@charset "UTF-8";._layout_szktb_1 {
  min-height: 100vh;       /* replaces min-h-dvh */
  display: flex;
  flex-direction: column;
  background-color: hsl(var(--background)); /* uses your theme token */
}

._main_szktb_15 {
  flex: 1;
  display: block; /* ensures <main> takes up available vertical space */
}
/* ===================================
   ASSIGNMENT BIDS NAVBAR
   =================================== */

._navbar_14ua8_9 {
  width: 100%;
  background: white;
  border-bottom: 1px solid #E5E7EB;
  padding: 18px 0;
}

._container_14ua8_23 {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  align-items: center;
  gap: 40px;
}

._backButton_14ua8_41 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: #6B7280;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
  flex-shrink: 0;
  white-space: nowrap;
}

._backButton_14ua8_41:hover {
  color: #374151;
}

._backIcon_14ua8_81 {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._titleSection_14ua8_97 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._title_14ua8_97 {
  font-size: 22px;
  font-weight: 800;
  color: #111827;
  margin: 0;
  line-height: 1.3;
}

._subtitle_14ua8_125 {
  font-size: 14px;
  font-weight: 400;
  color: #6B7280;
  margin: 0;
  line-height: 1.5;
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
  ._container_14ua8_23 {
    max-width: 1600px;
    padding: 0 100px;
  }
  
  ._title_14ua8_97 {
    font-size: 24px;
  }
  
  ._subtitle_14ua8_125 {
    font-size: 15px;
  }
}

/* Desktop (1200px - 1399px) */
@media (max-width: 1399px) and (min-width: 1200px) {
  ._container_14ua8_23 {
    padding: 0 80px;
  }
  
  ._title_14ua8_97 {
    font-size: 22px;
  }
  
  ._subtitle_14ua8_125 {
    font-size: 14px;
  }
}

/* Large Tablet (1024px - 1199px) */
@media (max-width: 1199px) and (min-width: 1024px) {
  ._container_14ua8_23 {
    padding: 0 60px;
  }
  
  ._title_14ua8_97 {
    font-size: 20px;
  }
  
  ._subtitle_14ua8_125 {
    font-size: 14px;
  }
}

/* Tablet Portrait (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
  ._navbar_14ua8_9 {
    padding: 20px 0;
  }
  
  ._container_14ua8_23 {
    padding: 0 50px;
    gap: 30px;
  }
  
  ._title_14ua8_97 {
    font-size: 20px;
  }
  
  ._subtitle_14ua8_125 {
    font-size: 13px;
  }
}

/* Large Mobile (481px - 767px) */
@media (max-width: 767px) and (min-width: 481px) {
  ._navbar_14ua8_9 {
    padding: 18px 0;
  }
  
  ._container_14ua8_23 {
    padding: 0 40px;
    gap: 20px;
    flex-direction: column;
    align-items: flex-start;
  }
  
  ._backButton_14ua8_41 {
    font-size: 14px;
  }
  
  ._backIcon_14ua8_81 {
    width: 18px;
    height: 18px;
  }
  
  ._title_14ua8_97 {
    font-size: 20px;
  }
  
  ._subtitle_14ua8_125 {
    font-size: 13px;
  }
}

/* Small Mobile (320px - 480px) */
@media (max-width: 480px) {
  ._navbar_14ua8_9 {
    padding: 16px 0;
  }
  
  ._container_14ua8_23 {
    padding: 0 25px;
    gap: 16px;
    flex-direction: column;
    align-items: flex-start;
  }
  
  ._backButton_14ua8_41 {
    font-size: 13px;
  }
  
  ._backIcon_14ua8_81 {
    width: 16px;
    height: 16px;
  }
  
  ._title_14ua8_97 {
    font-size: 18px;
  }
  
  ._subtitle_14ua8_125 {
    font-size: 12px;
  }
}

/* Extra Small Mobile (<320px) */
@media (max-width: 319px) {
  ._navbar_14ua8_9 {
    padding: 14px 0;
  }
  
  ._container_14ua8_23 {
    padding: 0 20px;
    gap: 12px;
    flex-direction: column;
    align-items: flex-start;
  }
  
  ._backButton_14ua8_41 {
    font-size: 12px;
  }
  
  ._title_14ua8_97 {
    font-size: 16px;
  }
  
  ._subtitle_14ua8_125 {
    font-size: 11px;
  }
}

._layout_19c85_1 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

._main_19c85_15 {
  flex: 1;
  width: 100%;
  background: white;
}

._container_cyuhd_1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
}

._fullScreen_cyuhd_19 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 9999;
}

._spinner_cyuhd_49 {
  border: 3px solid #f3f4f6;
  border-top: 3px solid #3b82f6;
  border-radius: 50%;
  animation: _spin_cyuhd_49 1s linear infinite;
}

._spinner_cyuhd_49._small_cyuhd_63 {
  width: 1.5rem;
  height: 1.5rem;
  border-width: 2px;
}

._spinner_cyuhd_49._medium_cyuhd_75 {
  width: 2.5rem;
  height: 2.5rem;
  border-width: 3px;
}

._spinner_cyuhd_49._large_cyuhd_87 {
  width: 4rem;
  height: 4rem;
  border-width: 4px;
}

@keyframes _spin_cyuhd_49 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

._message_cyuhd_117 {
  color: #6b7280;
  font-size: 0.875rem;
  margin: 0;
}

/* Section background */
._hero_l12u0_3 {
  position: relative;
  background: #f4f5fb;
  padding: 0;
  min-height: calc(100vh - 68px);
  display: flex;
  align-items: center;
}

._max_l12u0_21 {
  width: 100%;
  margin: 0;
  padding: 0 125px 0 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  min-height: calc(100vh - 68px);
}

/* LEFT */
._left_l12u0_45 {
  position: relative;
  background: #f4f5fb;
  border-radius: 0;
  padding: 40px 60px;
  padding-left: 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: calc(100vh - 68px);
  padding-top: 60px;
}

/* Background yellow circle for shadow effect */
._backgroundCircle_l12u0_73 {
  position: absolute;
  top: 50%;
  left: -100px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.2) 0%, rgba(251, 191, 36, 0.12) 50%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
  transform: translateY(-50%);
  filter: blur(20px);
}

._trustBadge_l12u0_99 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  background: linear-gradient(90deg, #1e40af 0%, #7c3aed 100%);
  color: #ffffff;
  border-radius: 25px;
  padding: 12px 20px;
  margin-bottom: 24px;
  font-size: 15px;
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
  width: -moz-fit-content;
  width: fit-content;
}

._trustBadge_l12u0_99 svg {
  fill: #ffffff;
  stroke: #ffffff;
  width: 20px;
  height: 20px;
}

._title_l12u0_143 {
  font-size: clamp(40px, 5.5vw, 62px);
  line-height: 0.75;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  position: relative;
  z-index: 2;
}

._learn_l12u0_165 { 
  display: block;
  margin-bottom: -8px;
}

._learn_l12u0_165 span {
  display: inline-block;
}

._learn_l12u0_165 span:nth-child(1) { color: #1e1b4b; } /* L - very deep indigo/navy blue */
._learn_l12u0_165 span:nth-child(2) { color: #2d1b69; } /* e - deep indigo */
._learn_l12u0_165 span:nth-child(3) { color: #3b1f7a; } /* a - indigo-purple */
._learn_l12u0_165 span:nth-child(4) { color: #5b21b6; } /* r - purple-indigo */
._learn_l12u0_165 span:nth-child(5) { color: #7c3aed; } /* n - vibrant purple */
._learn_l12u0_165 span:nth-child(6) { color: #a855f7; } /* . - bright purple/magenta */

._grow_l12u0_197 { 
  display: block;
  margin-bottom: -8px;
}

._grow_l12u0_197 span {
  display: inline-block;
}

._grow_l12u0_197 span:nth-child(1) { color: #fbbf24; } /* G - bright golden yellow */
._grow_l12u0_197 span:nth-child(2) { color: #f59e0b; } /* r - golden yellow */
._grow_l12u0_197 span:nth-child(3) { color: #f97316; } /* o - orange */
._grow_l12u0_197 span:nth-child(4) { color: #ea580c; } /* w - reddish orange */
._grow_l12u0_197 span:nth-child(5) { color: #dc2626; } /* . - red-orange */

._succeed_l12u0_227 { 
  color: #1f2937; 
  display: block;
}

._lead_l12u0_237 {
  max-width: calc(100% - 10px);
  color: #6b7280;
  font-weight: 700;
  line-height: 1.8;
  margin-bottom: 48px;
  font-size: 20px;
  position: relative;
  z-index: 2;
}

/* CTA and Badges Container */
._ctaAndBadgesContainer_l12u0_261 {
  position: relative;
}

/* CTAs */
._ctas_l12u0_271 {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

/* Yellow semicircle - exact clone from image */
._yellowSemicircle_l12u0_287 {
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 80px;
  background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 30%, #f59e0b 100%);
  border-radius: 160px 160px 0 0;
  z-index: 0;
  opacity: 0.2;
  transform: translateY(20px) translateX(20px);
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.2);
}

._btn_l12u0_315 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  padding: 16px 24px;
  font-weight: 700;
  font-size: 16px;
  border: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

._arrow_l12u0_343 { 
  transform: translateY(1px); 
  font-size: 18px;
}

._primary_l12u0_353 {
  background: linear-gradient(90deg, #1e40af 0%, #7c3aed 100%);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(30, 64, 175, 0.3);
  position: relative;
  z-index: 2;
}

._primary_l12u0_353:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 12px 32px rgba(30, 64, 175, 0.4);
}

._secondary_l12u0_379 {
  background: linear-gradient(90deg, #fbbf24 0%, #fb923c 100%);
  color: #000000;
  box-shadow: 0 8px 24px rgba(251, 191, 36, 0.3);
  position: relative;
  z-index: 2;
}

._secondary_l12u0_379:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 12px 32px rgba(245, 158, 11, 0.4);
}

/* Feature badges */
._featureBadges_l12u0_407 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

._featureBadge_l12u0_407 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 16px;
  position: relative;
  z-index: 2;
}

._freeTrialBadge_l12u0_445 {
  background: #dcfce7;
  color: #166534;
}

._freeTrialBadge_l12u0_445 svg {
  color: #166534;
  font-size: 16px;
}

._successRateBadge_l12u0_465 {
  background: #dbeafe;
  color: #1e40af;
}

._successRateBadge_l12u0_465 svg {
  color: #1e40af;
  font-size: 16px;
}

._supportBadge_l12u0_485 {
  background: #f3e8ff;
  color: #7c3aed;
}

._supportBadge_l12u0_485 svg {
  color: #7c3aed;
  font-size: 16px;
}

/* RIGHT */
._right_l12u0_507 { 
  position: relative; 
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f4f5fb;
  border-radius: 0;
  padding: 40px;
  min-height: calc(100vh - 68px);
  padding-top: 60px;
}

/* Students Online Badge - Top */
._studentsOnlineBadge_l12u0_533 {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e40af;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
}

._blueDot_l12u0_569 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  display: inline-block;
}

/* Yellow Star Badge */
._yellowStarBadge_l12u0_587 {
  position: absolute;
  top: 88px;
  right: 60px;
  width: 60px;
  height: 60px;
  background: #fbbf24;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(251, 191, 36, 0.4);
  z-index: 11;
  transform: rotate(-70deg);
}

._yellowStarBadge_l12u0_587 svg {
  width: 32px;
  height: 32px;
  color: #ffffff;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
}

/* Purple Dot */
._purpleDot_l12u0_641 {
  position: absolute;
  top: 200px;
  right: 50px;
  width: 14px;
  height: 14px;
  background: #a855f7;
  border-radius: 50%;
  z-index: 10;
}

/* Blue Blob */
._blueBlob_l12u0_665 {
  position: absolute;
  top: 120px;
  right: -50px;
  width: 148px;
  height: 148px;
  background: linear-gradient(135deg, rgba(191, 219, 254, 0.6) 0%, rgba(219, 234, 254, 0.4) 100%);
  border-radius: 24px;
  z-index: 1;
  filter: blur(2px);
  transform: rotate(18deg);
}

/* Cards Container */
._cardsContainer_l12u0_693 {
  position: relative;
  width: 100%;
  max-width: 550px;
  height: 500px;
  z-index: 5;
}

/* Image Cards - Polaroid style with white borders */
._imageCard_l12u0_711 {
  position: absolute;
  background: #ffffff;
  border-radius: 20px;
  padding: 12px;
  padding-bottom: 56px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

._imageCard_l12u0_711:hover {
  transform: translateY(-5px);
}

._cardImage_l12u0_739 {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border-radius: 12px;
}

._cardLabel_l12u0_755 {
  position: absolute;
  bottom: 14px;
  left: 12px;
  right: 12px;
  background: transparent;
  padding: 0 8px;
  font-weight: 700;
  font-size: 14px;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

._emoji_l12u0_787 {
  font-size: 18px;
}

/* Campus Life Card - Small, top left */
._campusLifeCard_l12u0_797 {
  top: -36px;
  left: 30px;
  width: 320px;
  height: 300px;
  transform: rotate(-5deg);
  z-index: 3;
}

/* Study Together Card - Large, center-right */
._studyTogetherCard_l12u0_817 {
  bottom: 160px;
  left: 160px;
  width: 320px;
  height: 300px;
  transform: rotate(3deg);
  z-index: 4;
}

/* Success Badge on Study Together - inline with label */
._successBadge_l12u0_837 {
  background: transparent;
  color: #10b981;
  padding: 0;
  border-radius: 0;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

._successArrow_l12u0_863 {
  width: 14px;
  height: 14px;
  color: #10b981;
}

/* Awards Badge on Success Stories - inline with label */
._awardsBadge_l12u0_877 {
  background: transparent;
  color: #3b82f6;
  width: auto;
  height: auto;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  margin-left: auto;
}

._awardsIcon_l12u0_903 {
  width: 18px;
  height: 18px;
  color: #3b82f6;
}

/* Success Stories Card - Bottom right */
._successStoriesCard_l12u0_917 {
  bottom: 0;
  right: 0px;
  width: 320px;
  height: 300px;
  transform: rotate(5deg);
  z-index: 3;
}

/* Instant Match Badge - Bottom */
._instantMatchBadge_l12u0_937 {
  position: absolute;
  bottom: 80px;
  left: 50px;
  background: #fbbf24;
  color: #000000;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 20px;
  box-shadow: 0 6px 16px rgba(251, 191, 36, 0.4);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
}

._flashIcon_l12u0_971 {
  width: 16px;
  height: 16px;
  color: #000000;
}

/* Pink Star */
._pinkStar_l12u0_985 {
  position: absolute;
  bottom: 150px;
  left: 50px;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(236, 72, 153, 0.4);
  z-index: 10;
}

._pinkStar_l12u0_985 svg {
  width: 28px;
  height: 28px;
  color: #ffffff;
  fill: #ffffff;
}

/* Chat Bubble */
._chatBubble_l12u0_1031 {
  position: absolute;
  bottom: 40px;
  right: 40px;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(100, 116, 139, 0.4);
  z-index: 10;
  border: 3px solid #ffffff;
}

._chatIcon_l12u0_1063 {
  font-size: 28px;
}

._chatBubble_l12u0_1031::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid #ffffff;
}

/* Large screens - prevent excessive stretching */
@media (min-width: 1500px) {
  ._max_l12u0_21 {
    max-width: 1500px;
    margin: 0 auto;
  }
}

/* Very tall screens - fit content instead of 100vh */
@media (min-height: 1000px) {
  ._hero_l12u0_3 {
    min-height: auto;
  }
  
  ._max_l12u0_21 {
    min-height: auto;
  }
  
  ._left_l12u0_45 {
    min-height: auto;
  }
  
  ._right_l12u0_507 {
    min-height: auto;
  }
}

/* Responsive */
@media (max-width: 1024px) {
  ._hero_l12u0_3 {
    min-height: auto;
    padding: 0;
  }
  
  ._max_l12u0_21 {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    min-height: auto;
  }
  
  ._left_l12u0_45 {
    padding: 30px;
    border-radius: 0;
    min-height: auto;
  }
  
  ._right_l12u0_507 { 
    order: 1; 
    margin-bottom: 60px;
    padding: 40px 20px;
    border-radius: 0;
    min-height: 600px;
    padding-top: 60px;
  }
  
  ._cardsContainer_l12u0_693 {
    max-width: 100%;
    height: 420px;
  }
  
  ._campusLifeCard_l12u0_797 {
    top: -20px;
    left: 20px;
    width: 240px;
    height: 220px;
    padding-bottom: 40px;
  }
  
  ._studyTogetherCard_l12u0_817 {
    bottom: 120px;
    left: 120px;
    width: 240px;
    height: 220px;
    padding-bottom: 40px;
  }
  
  ._successStoriesCard_l12u0_917 {
    bottom: 0;
    right: 0;
    width: 240px;
    height: 220px;
    padding-bottom: 40px;
  }
  
  ._cardLabel_l12u0_755 {
    font-size: 11px;
    bottom: 8px;
  }
  
  ._emoji_l12u0_787 {
    font-size: 12px;
  }
  
  ._successBadge_l12u0_837 {
    font-size: 10px;
    padding: 3px 7px;
  }
  
  ._successArrow_l12u0_863 {
    width: 10px;
    height: 10px;
  }
  
  ._awardsIcon_l12u0_903 {
    width: 14px;
    height: 14px;
  }
  
  ._studentsOnlineBadge_l12u0_533 {
    top: 20px;
    font-size: 12px;
    padding: 8px 16px;
  }
  
  ._yellowStarBadge_l12u0_587 {
    width: 50px;
    height: 50px;
    right: 20px;
    top: 60px;
  }
  
  ._yellowStarBadge_l12u0_587 svg {
    width: 26px;
    height: 26px;
  }
  
  ._blueBlob_l12u0_665 {
    width: 90px;
    height: 90px;
    top: 80px;
    right: -20px;
  }
  
  ._purpleDot_l12u0_641 {
    display: none;
  }
  
  ._instantMatchBadge_l12u0_937 {
    bottom: 50px;
    left: 30px;
    font-size: 12px;
    padding: 8px 14px;
  }
  
  ._pinkStar_l12u0_985 {
    width: 48px;
    height: 48px;
    bottom: 120px;
    left: 30px;
  }
  
  ._pinkStar_l12u0_985 svg {
    width: 24px;
    height: 24px;
  }
  
  ._title_l12u0_143 {
    font-size: clamp(36px, 8vw, 56px);
  }
  
  ._backgroundCircle_l12u0_73 {
    width: 150px;
    height: 150px;
    left: -75px;
  }
  
  ._ctaAndBadgesContainer_l12u0_261 {
    display: flex;
    flex-direction: column;
  }
  
  ._ctas_l12u0_271 {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 32px;
  }
  
  ._yellowSemicircle_l12u0_287 {
    width: 65px;
    height: 130px;
    border-radius: 0 130px 130px 0;
    transform: translateY(80px) translateX(50px) rotate(90deg);
  }
  
  ._btn_l12u0_315 {
    width: 100%;
    justify-content: center;
  }
  
  ._featureBadges_l12u0_407 {
    flex-direction: column;
    align-items: flex-start;
  }
  
  ._featureBadge_l12u0_407 {
    width: 100%;
    justify-content: flex-start;
    padding: 10px 16px;
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  ._max_l12u0_21 {
    padding: 0;
  }
  
  ._trustBadge_l12u0_99 {
    font-size: 13px;
    padding: 10px 16px;
  }
  
  ._title_l12u0_143 {
    font-size: clamp(28px, 10vw, 42px);
  }
  
  ._lead_l12u0_237 {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 32px;
  }
  
  ._btn_l12u0_315 {
    padding: 14px 20px;
    font-size: 15px;
  }
  
  ._left_l12u0_45 {
    padding: 20px;
  }
  
  ._right_l12u0_507 {
    padding: 30px 16px;
    margin-bottom: 60px;
    min-height: 450px;
  }
  
  ._backgroundCircle_l12u0_73 {
    width: 120px;
    height: 120px;
    left: -60px;
  }
  
  ._cardsContainer_l12u0_693 {
    height: 360px;
  }
  
  ._campusLifeCard_l12u0_797 {
    top: -15px;
    left: 15px;
    width: 200px;
    height: 180px;
    padding-bottom: 35px;
  }
  
  ._studyTogetherCard_l12u0_817 {
    bottom: 100px;
    left: 90px;
    width: 200px;
    height: 180px;
    padding-bottom: 35px;
  }
  
  ._successStoriesCard_l12u0_917 {
    bottom: 0;
    right: 0;
    width: 200px;
    height: 180px;
    padding-bottom: 35px;
  }
  
  ._cardLabel_l12u0_755 {
    font-size: 10px;
    bottom: 6px;
    padding: 0 6px;
  }
  
  ._emoji_l12u0_787 {
    font-size: 11px;
  }
  
  ._successBadge_l12u0_837 {
    font-size: 9px;
    padding: 2px 5px;
    gap: 3px;
  }
  
  ._successArrow_l12u0_863 {
    width: 9px;
    height: 9px;
  }
  
  ._awardsIcon_l12u0_903 {
    width: 12px;
    height: 12px;
  }
  
  ._studentsOnlineBadge_l12u0_533 {
    top: 10px;
    font-size: 11px;
    padding: 6px 12px;
  }
  
  ._yellowStarBadge_l12u0_587 {
    width: 44px;
    height: 44px;
    right: 15px;
    top: 50px;
  }
  
  ._yellowStarBadge_l12u0_587 svg {
    width: 22px;
    height: 22px;
  }
  
  ._blueBlob_l12u0_665 {
    display: none;
  }
  
  ._purpleDot_l12u0_641 {
    display: none;
  }
  
  ._instantMatchBadge_l12u0_937 {
    bottom: 40px;
    left: 20px;
    font-size: 11px;
    padding: 6px 12px;
  }
  
  ._pinkStar_l12u0_985 {
    width: 40px;
    height: 40px;
    bottom: 100px;
    left: 20px;
  }
  
  ._pinkStar_l12u0_985 svg {
    width: 20px;
    height: 20px;
  }
  
  ._yellowSemicircle_l12u0_287 {
    width: 55px;
    height: 110px;
    border-radius: 0 110px 110px 0;
    transform: translateY(70px) translateX(40px) rotate(90deg);
  }
}
:root{
  --blue:#2147a4;
  --blue-600:#1c449c;
  --gold:#f5c659;
  --green:#16a34a;
  --green-100:#e9f9ef;
  --blue-100:#eaf2ff;
  --purple:#7c3aed;
  --purple-100:#f3e8ff;
  --slate-700:#334155;
  --slate-500:#64748b;
  --border:#e8ecf4;
}

/* section shell */
._section_yxhiv_31{
  padding: 56px 0 40px;
  background: linear-gradient(180deg,#ffffff, #fbfdff);
   margin:4rem auto;
}
._max_yxhiv_41{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

/* badge */
._badge_yxhiv_57{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#f3f7ff;
  border:1px solid #d9e6ff;
  color:var(--blue);
  padding:10px 16px;
  border-radius:9999px;
  font-weight:700;
  margin-bottom:14px;
}

/* heading */
._title_yxhiv_85{
  font-size: clamp(26px,4.2vw,40px);
  font-weight:900;
  letter-spacing:-0.02em;
  color:#0b1424;
  margin: 4px 0 10px;
}
._accent_yxhiv_99{ color:var(--blue-600); }

._subtitle_yxhiv_103{
  max-width:760px;
  margin: 0 auto 28px;
  color:var(--slate-500);
  font-weight:700;
  line-height:1.55;
}

/* cards */
._cards_yxhiv_121{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:28px;
  margin-top: 8px;
}
._card_yxhiv_121{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:42px 26px 28px;
  box-shadow: 0 10px 30px rgba(16,24,40,.06);
  position:relative;
}
._card_yxhiv_121._green_yxhiv_149{ border-color:#ccf3dd; box-shadow: 0 10px 30px rgba(22,163,74,.06); }
._card_yxhiv_121._blue_yxhiv_151{  border-color:#cfe0ff; box-shadow: 0 10px 30px rgba(33,71,164,.06); }
._card_yxhiv_121._purple_yxhiv_153{border-color:#e1d0ff; box-shadow: 0 10px 30px rgba(124,58,237,.06); }

._iconWrap_yxhiv_157{
  width:64px; height:64px;
  border-radius:14px;
  display:grid; place-items:center;
  margin: 0 auto 18px;
  font-size:26px;
}
._greenTone_yxhiv_171{ background: var(--green-100); color: var(--green); border: 1px solid #cfeedd; }
._blueTone_yxhiv_173{  background: var(--blue-100);  color: var(--blue);  border: 1px solid #d9e6ff; }
._purpleTone_yxhiv_175{background: var(--purple-100);color: var(--purple);border: 1px solid #e9d7ff;}

._cardTitle_yxhiv_179{
  font-size:20px;
  font-weight:800;
  margin-bottom:8px;
  color:#0b1424;
}
._cardText_yxhiv_191{
  color:#475569;
  line-height:1.6;
  max-width: 420px;
  margin: 0 auto 26px;
}

/* thin underline inside card */
._underline_yxhiv_207{
  height:4px;
  width: 78%;
  margin: 0 auto;
  border-radius: 999px;
  background:#eef2f7;
}
._greenBar_yxhiv_221{ background: linear-gradient(90deg,#e8f8ee,#d6f3e3); }
._blueBar_yxhiv_223{  background: linear-gradient(90deg,#eaf2ff,#e0ecff); }
._purpleBar_yxhiv_225{background: linear-gradient(90deg,#f2e9ff,#eadbff); }

/* stats band */
._statsBand_yxhiv_231{
  margin-top: 36px;
  padding: 28px 26px;
  background: #f8fbff;
  border:1px solid #e9eef8;
  border-radius: 20px;
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
  box-shadow: 0 14px 40px rgba(15,23,42,.05) inset,
              0 20px 50px rgba(15,23,42,.06);
}
._statItem_yxhiv_255{ text-align:center; }
._statValue_yxhiv_257{
  font-size: clamp(22px,3vw,34px);
  font-weight: 900;
  letter-spacing:-0.02em;
  color:#0b1424;
}
._blueText_yxhiv_269{ color: var(--blue-600); }
._greenText_yxhiv_271{ color: var(--green); }
._purpleText_yxhiv_273{ color: var(--purple); }
._star_yxhiv_275{ color:#f59e0b; margin-left:6px; display:inline-flex; transform: translateY(2px); }

._statLabel_yxhiv_279{
  margin-top:6px;
  color:#64748b;
  font-weight:700;
}

/* responsive */
@media (max-width: 992px){
  ._cards_yxhiv_121{ grid-template-columns: 1fr; }
  ._statsBand_yxhiv_231{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  ._statsBand_yxhiv_231{ grid-template-columns: 1fr; }
}
/* Layout */
._section_1h9ef_3{
  padding: 54px 0 46px;
  background: radial-gradient(900px 300px at 50% -80px, #f6faff, transparent 70%) #fff;
}
._max_1h9ef_11{
  max-width: 1200px;
   margin:4rem auto;
  padding: 0 24px;
  text-align: center;
}

/* Badge */
._badge_1h9ef_27{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:#f3f7ff;
  border:1px solid #d9e6ff;
  color:#2147a4;
  font-weight:700;
  margin-bottom:14px;
}

/* Title */
._title_1h9ef_55{
  font-size: clamp(28px,4.4vw,44px);
  font-weight:900;
  letter-spacing:-0.02em;
  color:#0b1424;
  margin: 6px 0 10px;
}
._blue_1h9ef_69{ color:#2147a4; }
._gold_1h9ef_71{ color:#f5c659; }

._subtitle_1h9ef_75{
  max-width: 820px;
  margin: 0 auto 26px;
  color:#64748b;
  font-weight:700;
  line-height:1.55;
}

/* Grid */
._grid_1h9ef_93{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: 22px;
}

/* Card */
._card_1h9ef_107{
  text-align:left;
  background:#fff;
  border:1px solid var(--tint-200);
  border-radius:16px;
  padding:22px 20px 18px;
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
  position:relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
._card_1h9ef_107:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(15,23,42,.09);
}

/* Icon */
._iconWrap_1h9ef_139{
  width:56px; height:56px;
  border-radius:12px;
  display:grid; place-items:center;
  font-size:24px;
  color: var(--tint);
  background: var(--tint-100);
  border: 1px solid var(--tint-200);
  margin-bottom: 14px;
}

/* Content */
._cardTitle_1h9ef_163{
  font-size: 18px;
  font-weight: 800;
  color:#0b1424;
  margin-bottom: 6px;
}
._cardDesc_1h9ef_175{
  color:#65748b;
  line-height:1.55;
}

/* Thin divider like screenshot */
._rule_1h9ef_187{
  height:2px;
  width:100%;
  margin: 16px 0 10px;
  background: linear-gradient(90deg, #eef2f7, #edf1f6);
  border-radius:999px;
}

/* Footer row */
._cardFoot_1h9ef_205{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
._tutors_1h9ef_215{
  color:#64748b;
  font-weight:700;
}
._chev_1h9ef_223{
  width:28px; height:28px;
  border-radius:999px;
  display:grid; place-items:center;
  background: var(--tint-100);
  color: var(--tint);
  border:1px solid var(--tint-200);
}

/* CTA button */
._explore_1h9ef_243{
  margin: 24px auto 0;
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#2147a4;
  color:#fff;
  border:0;
  border-radius:12px;
  padding:12px 18px;
  font-weight:800;
  cursor:pointer;
  box-shadow: 0 10px 24px rgba(33,71,164,.2);
  transition: transform .15s ease, box-shadow .15s ease;
}
._explore_1h9ef_243:hover{ transform: translateY(-1px); }
._exploreIcon_1h9ef_275{ transform: translateY(1px); }

/* Responsive */
@media (max-width: 1100px){
  ._grid_1h9ef_93{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 820px){
  ._grid_1h9ef_93{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 540px){
  ._grid_1h9ef_93{ grid-template-columns: 1fr; }
}
._wrap_a5sgy_1 {
  margin: 44px auto 44px;
  padding: 0 16px;
  max-width: 1280px;
}

/* Large rounded gradient container */
._card_a5sgy_15 {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  min-height: 280px;
  padding: 56px 20px;

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

  /* blue → slate → gold, like the reference */
  background: linear-gradient(100deg, #2147a4 0%, #6f7683 50%, #f5c659 100%);
  color: #fff;

  /* soft outer glow */
  box-shadow:
    0 25px 70px rgba(0,0,0,.12),
    0 30px 100px rgba(33,71,164,.20),
    0 30px 100px rgba(245,198,89,.15);
}

/* subtle inner sheen on top */
._card_a5sgy_15::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 22px;
  background: radial-gradient(1200px 220px at 50% 0, rgba(255,255,255,.10), transparent 60%);
  pointer-events: none;
}

._icon_a5sgy_83 {
  width: 76px;
  height: 76px;
  border-radius: 9999px;
  background: rgba(255,255,255,.18);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
._icon_a5sgy_83 svg { color: #fff; }

._title_a5sgy_107 {
  margin: 6px 0 10px;
  font-weight: 900;
  font-size: clamp(22px, 3.5vw, 34px);
  letter-spacing: -0.01em;
}

._subtitle_a5sgy_121 {
  max-width: 980px;
  margin: 0 auto 22px;
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.6;
  color: rgba(255,255,255,.95);
}

._actions_a5sgy_137 {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Filled white CTA */
._primary_a5sgy_153 {
  background: #fff;
  color: #1e3a8a; /* deep blue text */
  border: 0;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    0 10px 28px rgba(16,24,40,.22),
    0 2px 4px rgba(16,24,40,.12);
  transition: transform .15s ease, box-shadow .15s ease;
}
._primary_a5sgy_153:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 34px rgba(16,24,40,.26),
    0 3px 6px rgba(16,24,40,.14);
}

/* Outline white CTA */
._ghost_a5sgy_195 {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 12px;
  padding: 10px 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
._ghost_a5sgy_195:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: #fff;
}

@media (max-width: 768px) {
  ._card_a5sgy_15 { padding: 44px 16px; min-height: 240px; }
  ._icon_a5sgy_83 { width: 60px; height: 60px; }
}
:root{
  --blue:#2147a4;
  --blue-300:#cfd8ff;
  --text:#0b1424;
  --muted:#667085;
}

._section_17ryk_15{
     margin:4rem auto;
  padding: 44px 0 36px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
}
._max_17ryk_25{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

/* Badge */
._badge_17ryk_41{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  background:#f3f7ff;
  border:1px solid #d9e6ff;
  color:var(--blue);
  font-weight:700;
  margin-bottom:12px;
}

/* Title + subtitle */
._title_17ryk_69{
  margin: 6px 0 8px;
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text);
}
._blue_17ryk_83{ color: var(--blue); }

._subtitle_17ryk_87{
  max-width: 900px;
  margin: 0 auto 36px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.6;
}

/* Steps row */
._steps_17ryk_105{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

/* faint connecting line */
._line_17ryk_123{
  position: absolute;
  left: 8%;
  right: 8%;
  top: 28px;             /* aligns with circle center */
  height: 2px;
  background: #e8edf9;
  z-index: 0;
}

/* Each step */
._step_17ryk_105{
  position: relative;
  text-align: center;
  padding-top: 0;
}

/* big numbered circle */
._circle_17ryk_159{
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  border-radius: 9999px;
  border: 3px solid var(--blue-300);
  background: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: var(--blue);
  font-size: 22px;
  z-index: 1;
}

/* tiny icon badge near circle */
._miniIcon_17ryk_191{
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translateX(56px); /* default to right of circle */
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--blue);
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 12px;
  z-index: 2;
}
._miLeft_17ryk_223{ transform: translateX(56px); }   /* same as default, for first step look */
._miRight_17ryk_225{ transform: translateX(56px); }  /* keep consistent with screenshot */

/* labels */
._stepTitle_17ryk_231{
    
  margin: 8px 0 8px;
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
}
._stepText_17ryk_245{
  margin: 0 auto;
  max-width: 360px;
  color: #6b7280;
  line-height: 1.6;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 900px){
  ._circle_17ryk_159{ width: 84px; height: 84px; font-size: 20px; }
  ._line_17ryk_123{ left: 6%; right: 6%; top: 24px; }
}
@media (max-width: 720px){
  ._steps_17ryk_105{ grid-template-columns: 1fr; gap: 28px; }
  ._line_17ryk_123{ display:none; }
  ._miniIcon_17ryk_191{ left: calc(50% + 42px); }
}
:root{
  --blue:#2147a4;
  --muted:#6b7280;
  --chip-bg:#e9f9ef;   /* light green */
  --chip-bd:#cfeedd;   /* green border */
  --chip-fg:#16a34a;   /* green icon */
  --card-bd:#e9eef8;
}

._section_1p76f_19{
   margin-top: 3rem;
  padding: 24px 0 12px;
  background: linear-gradient(180deg,#ffffff,#fbfdff);
}

._card_1p76f_31{
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px 30px;
  background: #fff;
  border: 1px solid var(--card-bd);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(15,23,42,.06);
}

._title_1p76f_51{
  text-align: center;
  font-size: clamp(22px,3.2vw,32px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #0b1424;
  margin: 2px 0 8px;
}

._subtitle_1p76f_69{
  text-align: center;
  color: #7b8aa0;
  font-weight: 700;
  margin-bottom: 18px;
}

/* two columns like the screenshot */
._grid_1p76f_85{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 60px;
  padding: 8px 10px 6px;
}

._list_1p76f_99{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
}

._item_1p76f_115{
  display: flex;
  align-items: center;
  gap: 14px;
}

._check_1p76f_127{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--chip-bg);
  border: 1px solid var(--chip-bd);
  color: var(--chip-fg);
  flex: 0 0 32px;
  font-size: 16px;
}

._text_1p76f_153{
  color: #0f172a;
  font-weight: 700;
}

/* responsive */
@media (max-width: 900px){
  ._grid_1p76f_85{ grid-template-columns: 1fr; gap: 16px; }
}
:root{
  --blue:#2147a4;
  --blue-200:#dbe6ff;
  --ink:#0b1424;
  --muted:#6b7280;
  --bd:#e9eef8;
  --chipGreyBg:#f2f5fa;
  --chipGreyBd:#e6ebf3;
  --chipGreenBg:#e9f9ef;
  --chipGreenBd:#cfeedd;
  --star:#f59e0b;
}

/* Section shell */
._section_1jri4_29{
  padding: 48px 0 12px;
  background: linear-gradient(180deg,#ffffff,#fbfdff);
   margin: 4rem auto;
}
._max_1jri4_39{
  max-width: 1100px;          /* tighter width like screenshot */
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

/* Badge */
._badge_1jri4_55{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:9999px;
  background:#f3f7ff;
  border:1px solid #d9e6ff;
  color:var(--blue);
  font-weight:700;
  font-size: 13px;            /* smaller */
  margin-bottom: 10px;
}

/* Title + subtitle */
._title_1jri4_85{
  margin: 4px 0 6px;
  font-size: clamp(22px,3.2vw,30px); /* smaller than previous sections */
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
}
._blue_1jri4_99{ color: var(--blue); }
._subtitle_1jri4_101{
  max-width: 840px;
  margin: 0 auto 16px;
  color: #7b8aa0;
  font-weight: 700;
  font-size: 14px;            /* smaller */
}

/* Card + nav */
._cardWrap_1jri4_119{
  position: relative;
  margin-top: 10px;
}
._card_1jri4_119{
  border: 1px solid var(--bd);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(15,23,42,.06);
  padding: 20px 24px;
  text-align: left;
  display: grid;
  grid-template-columns: 280px 1fr;   /* left profile + right quote */
  gap: 24px;
}

/* nav buttons */
._navBtn_1jri4_153{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--bd);
  display: grid; place-items: center;
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(15,23,42,.08);
  cursor: pointer;
}
._leftBtn_1jri4_179{ left: -12px; }
._rightBtn_1jri4_181{ right: -12px; }

/* Left profile */
._profile_1jri4_187{
  text-align: center;
  padding: 4px 6px;
}
._avatar_1jri4_195{
  width: 96px; height: 96px;
  border-radius: 999px;
  border: 3px solid var(--bd);
  margin: 2px auto 8px;
  display: grid; place-items: center;
  background:#f8fafc;
  overflow: hidden;
}
._avatar_1jri4_195 img{ width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 999px; }
._avatarIcon_1jri4_215{ color:#9aa8bf; font-size: 38px; }

._name_1jri4_219{
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  margin-top: 4px;
}
._university_1jri4_231{
  color: #60708a;
  font-weight: 700;
  font-size: 13px;
  margin-top: 4px;
}
._field_1jri4_243{
  color: var(--blue);
  font-weight: 700;
  font-size: 13px;
  margin-top: 2px;
}
._stars_1jri4_255{
  margin-top: 10px;
  display: flex; gap: 6px; justify-content: center;
}
._starOn_1jri4_263{ color: var(--star); font-size: 14px; }
._starOff_1jri4_265{ color: #e8eef7; font-size: 14px; }

/* Right quote */
._quoteCol_1jri4_271{ align-self: center; }
._quote_1jri4_271{
  margin: 0 0 14px;
  color: #0f172a;
  font-weight: 700;
  line-height: 1.6;
  font-size: 16px;          /* smaller */
}
._tags_1jri4_287{
  display:flex; gap:10px; flex-wrap:wrap;
}
._tag_1jri4_287{
  display:inline-flex; align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
}
._tagGrey_1jri4_307{
  background: var(--chipGreyBg);
  border: 1px solid var(--chipGreyBd);
  color: #566277;
}
._tagGreen_1jri4_317{
  background: var(--chipGreenBg);
  border: 1px solid var(--chipGreenBd);
  color: #128540;
}

/* dots */
._dots_1jri4_331{
  display:flex; gap:8px; justify-content:center;
  margin: 12px 0 4px;
}
._dot_1jri4_331{
  width: 8px; height: 8px; border-radius: 999px;
  background: #e4e9f3; border: 0;
}
._dotActive_1jri4_347{
  width: 24px; height: 8px; border-radius: 999px;
  background: var(--blue);
}

/* responsive */
@media (max-width: 860px){
  ._card_1jri4_119{ grid-template-columns: 1fr; }
  ._leftBtn_1jri4_179{ left: 4px; } ._rightBtn_1jri4_181{ right: 4px; }
  ._profile_1jri4_187{ text-align: left; display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; }
  ._stars_1jri4_255{ justify-content: flex-start; }
}
:root{
  --blue:#2147a4;
  --ink:#0b1424;
  --muted:#64748b;
  --card-bd:#e8edf7;
}

._section_jha60_15{
    margin:4rem auto;
  padding: 14px 0 10px;
  background: linear-gradient(180deg,#ffffff,#fbfdff);
}

._card_jha60_27{
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 18px 28px;
  background: #fbfdff;
  border: 1px solid var(--card-bd);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(15,23,42,.05);
  text-align: center;
}

/* small icon chip */
._icon_jha60_51{
  width: 34px;
  height: 34px;
  margin: 2px auto 6px;
  border-radius: 10px;
  background: #eef3ff;
  border: 1px solid #d9e6ff;
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 16px;
}

._title_jha60_77{
  font-size: clamp(20px, 2.6vw, 26px); /* smaller per your note */
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 6px 0 8px;
}

._subtitle_jha60_93{
  max-width: 820px;
  margin: 0 auto 16px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.55;
  font-size: 14px; /* smaller */
}

._actions_jha60_111{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* filled blue */
._primary_jha60_127{
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 8px 20px rgba(33,71,164,.20);
  cursor: pointer;
}

/* white outline */
._ghost_jha60_153{
  background: #fff;
  color: #1f2a44;
  border: 1px solid var(--card-bd);
  border-radius: 10px;
  padding: 9px 16px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}

@media (max-width: 640px){
  ._card_jha60_27{ padding: 22px 14px; }
}
:root{
  --blue:#2147a4;
  --ink:#0b1424;
  --muted:#6b7280;
  --bd:#e8edf7;
}

._section_1rdql_15{
   margin: 4rem auto;
  padding: 18px 0 26px;
  background: linear-gradient(180deg,#ffffff,#fbfdff);
}
._max_1rdql_25{
  max-width: 1100px;           /* compact like screenshot */
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

/* Badge */
._badge_1rdql_41{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#f3f7ff;
  border:1px solid #d9e6ff;
  color:var(--blue);
  font-weight:800;
  font-size:13px;              /* smaller */
  margin-bottom:10px;
}

/* Heading */
._title_1rdql_71{
  margin: 4px 0 6px;
  font-size: clamp(22px,3.2vw,30px); /* smaller fonts */
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.02em;
}
._subtitle_1rdql_85{
  max-width: 820px;
  margin: 0 auto 16px;
  color: #7b8aa0;
  font-weight: 700;
  font-size: 14px;
}

/* Search */
._searchWrap_1rdql_103{
  position: relative;
  margin: 8px auto 18px;
  max-width: 1040px;
}
._searchIcon_1rdql_113{
  position: absolute;
  top: 50%; left: 14px;
  transform: translateY(-50%);
  color: #98a5bf;
  font-size: 18px;
}
._search_1rdql_103{
  width: 100%;
  height: 44px;
  padding: 0 14px 0 40px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  outline: none;
}
._search_1rdql_103:focus{
  border-color:#cfd8ff;
  box-shadow: 0 0 0 3px rgba(33,71,164,.08);
}

/* Cards */
._list_1rdql_159{
  margin-top: 6px;
  text-align: left;
}
._card_1rdql_167{
  background:#fff;
  border:1px solid var(--bd);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(15,23,42,.06);
  margin-bottom: 12px;
  overflow: hidden;
}
._header_1rdql_183{
  width: 100%;
  background: transparent;
  border: 0;
  padding: 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
._question_1rdql_203{
  font-weight: 900;
  color: var(--ink);
  font-size: 16px;          /* smaller than default */
}
._chev_1rdql_213{
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid #d9e6ff;
  border-radius: 8px;
  color: var(--blue);
  background: #eef3ff;
  flex-shrink: 0;
}

._rule_1rdql_233{
  height: 1px;
  background: #edf1f6;
  margin: 0 16px;
}
._answer_1rdql_243{
  padding: 14px 16px 18px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.65;
  font-size: 14px;
}

._open_1rdql_259 ._header_1rdql_183{ background: #fcfdff; }

@media (max-width: 640px){
  ._question_1rdql_203{ font-size: 15px; }
  ._answer_1rdql_243{ font-size: 13.5px; }
}
:root{
  --green:#16a34a;
  --green-500:#16a34a;
  --green-600:#0f9a45;
  --green-400:#22c55e;
  --ink:#0b1424;
  --muted:#6b7280;
  --bd:#e9eef8;
}

._section_68whi_21{
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  padding: 18px 0 26px;
}
._max_68whi_29{
  max-width: 1100px;
  margin: 4rem auto;
  padding: 0 20px;
  text-align: center;
}

/* Badge */
._badge_68whi_45{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #e9f9ef;
  border: 1px solid #cfeedd;
  color: var(--green-600);
  font-weight: 800;
  font-size: 13px; /* smaller as requested */
  margin-bottom: 10px;
}

/* Heading */
._title_68whi_75{
  line-height: 1.05;
  margin: 6px 0 8px;
  letter-spacing: -0.02em;
  font-weight: 900;
  font-size: clamp(22px,3.2vw,30px); /* compact */
}
._green_68whi_89{ color: var(--green-500); }
._black_68whi_91{ color: var(--ink); }

._subtitle_68whi_95{
  max-width: 820px;
  margin: 0 auto 18px;
  color: #7b8aa0;
  font-weight: 700;
  font-size: 14px; /* compact */
}

/* Big green card */
._panel_68whi_113{
  position: relative;
  border-radius: 22px;
  padding: 32px 18px 28px;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(180deg, #12b981, var(--green-600));
  box-shadow: 0 28px 80px rgba(16,185,129,.25), 0 14px 40px rgba(0,0,0,.06);
}

/* Decorative blobs */
._blobTR_68whi_135, ._blobBL_68whi_135{
  position: absolute;
  pointer-events: none;
  opacity: .25;
  filter: blur(0.5px);
  background: radial-gradient(circle at 30% 30%, #2add8a, #0ea75b);
}
._blobTR_68whi_135{
  right: -80px; top: -40px;
  width: 260px; height: 260px; border-radius: 50%;
}
._blobBL_68whi_135{
  left: -90px; bottom: -70px;
  width: 220px; height: 220px; border-radius: 50%;
}

/* Center shield circle */
._iconWrap_68whi_169{
  width: 92px; height: 92px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,.12));
  display: grid; place-items: center;
}
._icon_68whi_169{ font-size: 34px; color: #fff; opacity: .95; }

._panelTitle_68whi_187{
  font-weight: 900;
  font-size: clamp(20px,2.8vw,26px);
  margin: 6px 0 6px;
  letter-spacing: -.01em;
}
._panelText_68whi_199{
  max-width: 820px;
  margin: 0 auto 18px;
  font-weight: 800;            /* bold like screenshot */
  line-height: 1.55;
  font-size: 14px;
  color: rgba(255,255,255,.95);
}

/* translucent ribbon box */
._ribbon_68whi_219{
  margin: 0 auto;
  max-width: 760px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
}
._ribbonLeft_68whi_241{
  display: inline-flex; align-items: center; gap: 8px;
  color: #eafff2;
  font-weight: 900;
  font-size: 14px;
}
._ribbonTitle_68whi_253{ white-space: nowrap; }
._ribbonText_68whi_255{
  color: rgba(255,255,255,.92);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 680px){
  ._ribbon_68whi_219{ grid-template-columns: 1fr; text-align: center; }
  ._ribbonLeft_68whi_241{ justify-content: center; }
}
:root {
  --blue: #2147a4;
  --ink: #0b1424;
  --muted: #6b7280;
  --bd: #e9eef8;

  --g-green: #16a34a;
  --g-green-100: #e9f9ef;
  --g-green-200: #cfeedd;
  --g-blue: #3b82f6;
  --g-blue-100: #eef3ff;
  --g-blue-200: #d9e6ff;
  --g-purple: #7c3aed;
  --g-purple-100: #f3e8ff;
  --g-purple-200: #eadbff;
  --g-orange: #f59e0b;
  --g-orange-100: #fff4e5;
  --g-orange-200: #ffe4c7;

  --circle-size: 70px; 
}

._section_17bql_45 {
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  padding: 16px 0 26px;
   margin: 4rem auto;
}

._max_17bql_57 {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Top cards */
._grid_17bql_71 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

._card_17bql_83 {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 18px;
  text-align: center;
  padding: 22px 16px 18px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .05);
}

._icon_17bql_101 {
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 24px;
  border: 1px solid var(--bd);
}

._cardTitle_17bql_123 {
  font-weight: 900;
  color: var(--ink);
  font-size: 16px;
  /* smaller text */
  margin-bottom: 6px;
}

._cardText_17bql_139 {
  color: #6b7280;
  font-weight: 700;
  line-height: 1.55;
  font-size: 13.5px;
}

/* tinted variants */
._green_17bql_155 {
  border-color: var(--g-green-200);
}

._green_17bql_155 ._icon_17bql_101 {
  background: var(--g-green-100);
  border-color: var(--g-green-200);
  color: var(--g-green);
}

._blue_17bql_175 {
  border-color: var(--g-blue-200);
}

._blue_17bql_175 ._icon_17bql_101 {
  background: var(--g-blue-100);
  border-color: var(--g-blue-200);
  color: var(--g-blue);
}

._purple_17bql_195 {
  border-color: var(--g-purple-200);
}

._purple_17bql_195 ._icon_17bql_101 {
  background: var(--g-purple-100);
  border-color: var(--g-purple-200);
  color: var(--g-purple);
}

._orange_17bql_215 {
  border-color: var(--g-orange-200);
}

._orange_17bql_215 ._icon_17bql_101 {
  background: var(--g-orange-100);
  border-color: var(--g-orange-200);
  color: var(--g-orange);
}

/* spacer between blocks */
._spacer_17bql_237 {
  height: 26px;
}

/* heading */
._title_17bql_247 {
  text-align: center;
  font-weight: 900;
  font-size: clamp(20px, 2.8vw, 26px);
  color: var(--ink);
  letter-spacing: -.02em;
  margin: 0 0 6px;
}

._blue_17bql_175 {
  color: var(--blue);
}

._subtitle_17bql_273 {
  text-align: center;
  color: #7b8aa0;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 20px;
}

/* steps */
._steps_17bql_291{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}

._line_17bql_307{
  position: absolute;
  left: 6%;
  right: 6%;
  top: calc(var(--circle-size) / 2); /* passes through center; adjust if needed */
  height: 2px;
  background: #e8edf9;
  z-index: 0;                         /* <<< behind */
}

._circle_17bql_327 {
  position: relative;
  z-index: 1;
  /* <<< above */
  width: var(--circle-size);
  height: var(--circle-size);
  margin: 0 auto 10px;
  border-radius: 999px;
  border: 2px solid #cfd8ff;
  background: #fff;
  /* hides the line where they overlap */
  display: grid;
  place-items: center;
  color: #2147a4;
  font-weight: 900;
  font-size: 16px;
}

._stepTitle_17bql_363 {
  font-weight: 900;
  color: var(--ink);
  font-size: 15px;
  margin: 4px 0 6px;
}

._stepText_17bql_377 {
  max-width: 320px;
  margin: 0 auto;
  color: #7b8aa0;
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.6;
}

/* responsive */
@media (max-width: 1000px) {
  ._grid_17bql_71 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  ._grid_17bql_71 {
    grid-template-columns: 1fr;
  }

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

  ._line_17bql_307 {
    display: none;
  }
}:root{
  --blue:#2147a4;
  --ink:#0b1424;
}

/* outer spacing */
._wrap_8xc4a_13{
  max-width: 1200px;
  margin: 32px auto 22px;
  padding: 0 16px;
}

/* gradient card */
._card_8xc4a_27{
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 56px 18px 28px;
  background: linear-gradient(100deg, #2147a4 0%, #6f7683 52%, #f5c659 100%);
  color: #fff;
  text-align: center;
  box-shadow:
    0 24px 80px rgba(33,71,164,.18),
    0 26px 90px rgba(245,198,89,.16),
    0 16px 40px rgba(15,23,42,.08);
}

/* center translucent icon */
._icon_8xc4a_57{
  width: 72px; height: 72px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  display: grid; place-items: center;
  font-size: 28px;
}

/* smaller fonts per your note */
._title_8xc4a_79{
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 900;
  letter-spacing: -.01em;
  margin: 8px 0 6px;
  color: #fff;
}

._subtitle_8xc4a_95{
  max-width: 900px;
  margin: 0 auto 18px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
  color: rgba(255,255,255,.95);
}

/* buttons */
._actions_8xc4a_115{
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

._primary_8xc4a_131{
  background: #fff;
  color: var(--blue);
  border: 0;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(16,24,40,.22);
}
._ghost_8xc4a_153{
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 12px;
  padding: 10px 18px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}

/* thin divider */
._rule_8xc4a_177{
  border: 0;
  height: 1px;
  width: min(820px, 78%);
  margin: 6px auto 12px;
  background: rgba(255,255,255,.35);
}

/* bottom note */
._note_8xc4a_195{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.9);
  font-weight: 700;
  font-size: 13.5px;
}
._noteIcon_8xc4a_211{ opacity: .95; }

/* responsive */
@media (max-width: 640px){
  ._card_8xc4a_27{ padding: 44px 14px 24px; }
}
:root{
  --blue:#2147a4;
  --blue-100:#eef3ff;
  --blue-200:#d9e6ff;
  --ink:#0b1424;
  --muted:#6b7280;
  --gold:#f5c659;
  --green:#16a34a;
  --orange:#f59e0b;
}

/* warm background like screenshot */
._wrap_1w1lw_25{
  padding: 28px 16px 28px;
  background: radial-gradient(900px 220px at 50% -80px, #fff7e8, #ffffff 70%);
  margin: 4rem auto;
}

/* white rounded card */
._card_1w1lw_39{
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  border: 1px solid #e9eef8;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(15,23,42,.07);
  padding: 26px 18px 20px;
}

/* small blue icon chip */
._iconChip_1w1lw_63{
  width: 64px; height: 64px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: var(--blue-100);
  border: 1px solid var(--blue-200);
  color: var(--blue);
  display: grid; place-items: center;
  font-size: 26px;
}

/* smaller fonts per your guidance */
._title_1w1lw_87{
  margin: 4px 0 6px;
  font-size: clamp(22px,3.2vw,30px);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--ink);
}
._subtitle_1w1lw_101{
  max-width: 760px;
  margin: 0 auto 14px;
  color: var(--muted);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.55;
}

/* CTAs */
._actions_1w1lw_121{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 8px;
}
._btnIcon_1w1lw_135{ margin-right: 8px; transform: translateY(1px); }

._btnBlue_1w1lw_139{
  display: inline-flex; align-items: center;
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 10px 26px rgba(33,71,164,.22);
  cursor: pointer;
}
._btnGold_1w1lw_163{
  display: inline-flex; align-items: center;
  background: var(--gold);
  color: #1f2937;
  border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 10px 26px rgba(245,198,89,.32);
  cursor: pointer;
}

/* features row */
._features_1w1lw_191{
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
}
._feature_1w1lw_191{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #58677f;
  font-weight: 800;
  font-size: 13.5px;
}
._featIcon_1w1lw_221{ font-size: 16px; }
._green_1w1lw_223{ color: var(--green); }
._blue_1w1lw_225{ color: var(--blue); }
._orange_1w1lw_227{ color: var(--orange); }

@media (max-width: 540px){
  ._card_1w1lw_39{ padding: 22px 14px 18px; }
}
:root{
  --blue:#2147a4;
  --blue-100:#eef3ff;
  --blue-200:#d9e6ff;
  --ink:#0b1424;
  --muted:#667085;
  --bd:#e9eef8;
}

._wrap_1c63x_19{
  padding: 18px 16px 16px;
  margin:4rem auto;
}

._card_1c63x_29{
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(15,23,42,.06);
  padding: 22px 16px 20px;
}

/* top icon chip */
._iconChip_1c63x_53{
  width: 64px; height: 64px;
  margin: 0 auto 8px;
  border-radius: 999px;
  background: var(--blue-100);
  border: 1px solid var(--blue-200);
  color: var(--blue);
  display: grid; place-items: center;
  font-size: 26px;
}

._title_1c63x_75{
  font-size: clamp(18px,2.4vw,22px); /* small as in screenshot */
  font-weight: 900;
  color: var(--ink);
  margin: 2px 0 6px;
  letter-spacing: -.01em;
}

._subtitle_1c63x_91{
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
  margin: 0 auto 12px;
}

/* CTA buttons */
._actions_1c63x_107{
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

._btnIcon_1c63x_121{ margin-right: 8px; transform: translateY(1px); font-size: 16px; }

._primary_1c63x_125{
  display: inline-flex; align-items: center;
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 10px 24px rgba(33,71,164,.2);
  cursor: pointer;
}

._ghost_1c63x_151{
  display: inline-flex; align-items: center;
  background: #fff;
  color: var(--blue);
  border: 2px solid var(--blue-200);
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}

@media (max-width: 520px){
  ._card_1c63x_29{ padding: 18px 12px; }
}
/* ===================================
   ONLINE TUTORING PAGE LAYOUT SYSTEM
   Professional Spacing & Structure
   =================================== */

/* Main Page Container */
._page_e9ynt_13 {
  min-height: 100%;
  background: white;
  width: 100%;
  overflow-x: hidden;
}

/* Section Wrapper - Controls ALL spacing between sections */
._sectionWrapper_e9ynt_29 {
  /* Vertical Spacing */
  padding-top: clamp(80px, 10vw, 120px);
  padding-bottom: clamp(80px, 10vw, 120px);
  
  /* Horizontal Spacing */
  padding-left: clamp(20px, 5vw, 80px);
  padding-right: clamp(20px, 5vw, 80px);
  
  /* Ensures sections take full width */
  width: 100%;
  box-sizing: border-box;
}

/* Reduce top padding for first section (after hero banner) */
._sectionWrapper_e9ynt_29._firstSection_e9ynt_59 {
  padding-top: clamp(32px, 4vw, 48px);
}

/* Remove bottom padding from last section */
._sectionWrapper_e9ynt_29:last-child {
  padding-bottom: clamp(60px, 8vw, 100px);
}

/* ===================================
   RESPONSIVE SPACING ADJUSTMENTS
   =================================== */

/* Extra Large Screens (1600px+) - Maximum breathing room */
@media (min-width: 1600px) {
  ._sectionWrapper_e9ynt_29 {
    padding-top: 140px;
    padding-bottom: 140px;
    padding-left: 100px;
    padding-right: 100px;
  }
  
  ._sectionWrapper_e9ynt_29._firstSection_e9ynt_59 {
    padding-top: 48px;
  }
  
  ._sectionWrapper_e9ynt_29:last-child {
    padding-bottom: 120px;
  }
}

/* Large Desktop (1200px - 1599px) - Generous spacing */
@media (min-width: 1200px) and (max-width: 1599px) {
  ._sectionWrapper_e9ynt_29 {
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 60px;
    padding-right: 60px;
  }
  
  ._sectionWrapper_e9ynt_29._firstSection_e9ynt_59 {
    padding-top: 40px;
  }
  
  ._sectionWrapper_e9ynt_29:last-child {
    padding-bottom: 80px;
  }
}

/* Medium Desktop (992px - 1199px) - Comfortable spacing */
@media (min-width: 992px) and (max-width: 1199px) {
  ._sectionWrapper_e9ynt_29 {
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: 40px;
    padding-right: 40px;
  }
  
  ._sectionWrapper_e9ynt_29._firstSection_e9ynt_59 {
    padding-top: 36px;
  }
  
  ._sectionWrapper_e9ynt_29:last-child {
    padding-bottom: 60px;
  }
}

/* Tablet (768px - 991px) - Balanced spacing */
@media (min-width: 768px) and (max-width: 991px) {
  ._sectionWrapper_e9ynt_29 {
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  ._sectionWrapper_e9ynt_29._firstSection_e9ynt_59 {
    padding-top: 32px;
  }
  
  ._sectionWrapper_e9ynt_29:last-child {
    padding-bottom: 50px;
  }
}

/* Small Tablet (576px - 767px) - Compact but breathable */
@media (min-width: 576px) and (max-width: 767px) {
  ._sectionWrapper_e9ynt_29 {
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 24px;
    padding-right: 24px;
  }
  
  ._sectionWrapper_e9ynt_29._firstSection_e9ynt_59 {
    padding-top: 28px;
  }
  
  ._sectionWrapper_e9ynt_29:last-child {
    padding-bottom: 40px;
  }
}

/* Mobile (320px - 575px) - Optimized for small screens */
@media (max-width: 575px) {
  ._sectionWrapper_e9ynt_29 {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 16px;
    padding-right: 16px;
  }
  
  ._sectionWrapper_e9ynt_29._firstSection_e9ynt_59 {
    padding-top: 24px;
  }
  
  ._sectionWrapper_e9ynt_29:last-child {
    padding-bottom: 32px;
  }
}

/* Ultra Small Screens (below 320px) - Minimal but functional */
@media (max-width: 319px) {
  ._sectionWrapper_e9ynt_29 {
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 12px;
    padding-right: 12px;
  }
  
  ._sectionWrapper_e9ynt_29._firstSection_e9ynt_59 {
    padding-top: 20px;
  }
  
  ._sectionWrapper_e9ynt_29:last-child {
    padding-bottom: 24px;
  }
}

/* Shimmer animation */
@keyframes _shimmer_1t8da_1 {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

._hero_1t8da_21 {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, #059669, #14b8a6, #059669);
  color: #ffffff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  z-index: 1;
}

._decorativeBg_1t8da_39 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0.2;
  pointer-events: none;
}

._decorativeCircle1_1t8da_61 {
  position: absolute;
  top: -96px;
  left: -96px;
  width: 256px;
  height: 256px;
  border-radius: 50%;
  background: #ffffff;
  filter: blur(48px);
}

._decorativeLine_1t8da_83 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(12deg);
  width: 100%;
  height: 48px;
  background: #ffffff;
  filter: blur(32px);
  opacity: 0.3;
}

._decorativeCircle2_1t8da_107 {
  position: absolute;
  bottom: -96px;
  right: -96px;
  width: 256px;
  height: 256px;
  border-radius: 50%;
  background: #fef08a;
  filter: blur(48px);
}

._container_1t8da_129 {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
}

._content_1t8da_143 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}

._leftSection_1t8da_161 {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: center;
}

._iconCircle_1t8da_175 {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

._zapIcon_1t8da_201 {
  width: 16px;
  height: 16px;
  color: #fef08a;
  fill: #fef08a;
}

._textSection_1t8da_215 {
  display: flex;
  flex-direction: column;
  gap: 0;
}

._mainText_1t8da_227 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.025em;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  line-height: 1.2;
}

._mobileIcon_1t8da_249 {
  display: inline;
}

._zapIconMobile_1t8da_257 {
  width: 16px;
  height: 16px;
  color: #fef08a;
  fill: #fef08a;
  display: inline;
}

._freeText_1t8da_273 {
  color: #fef08a;
  font-weight: 800;
}

._subtitle_1t8da_283 {
  font-size: 12px;
  color: #d1fae5;
  display: none;
  margin: 0;
  line-height: 1.2;
  margin-top: -2px;
}

._rightSection_1t8da_301 {
  flex-shrink: 0;
  width: auto;
}

._closeButton_1t8da_311 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  margin: 0;
}

._closeButton_1t8da_311:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

._closeButton_1t8da_311:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

._closeIcon_1t8da_361 {
  width: 18px;
  height: 18px;
}

/* Tablet and Desktop */
@media (min-width: 640px) {
  ._content_1t8da_143 {
    flex-direction: row;
    padding: 8px 0;
    gap: 24px;
  }

  ._leftSection_1t8da_161 {
    text-align: left;
  }

  ._iconCircle_1t8da_175 {
    display: flex;
  }

  ._mobileIcon_1t8da_249 {
    display: none;
  }

  ._subtitle_1t8da_283 {
    display: block;
  }

  ._mainText_1t8da_227 {
    font-size: 16px;
  }

  ._rightSection_1t8da_301 {
    width: auto;
  }

  ._container_1t8da_129 {
    padding: 0 24px;
  }
}

@media (min-width: 1024px) {
  ._container_1t8da_129 {
    padding: 0 32px;
  }
}
/* ChooseSubjectPage.module.css */

._container_10stf_5 {
  max-width: 1200px;
  margin: 0 auto;
  /* Removed outer padding - parent sectionWrapper handles spacing */
}

._badgeWrapper_10stf_17 {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

._badge_10stf_17 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #3b4da3;
  background: #e8edfb;
  color: #3b4da3;
  font-weight: 600;
  font-size: 13px;
}

._badgeIcon_10stf_55 {
  width: 14px;
  height: 14px;
}

._heading_10stf_65 {
  text-align: center;
  font-size: clamp(18px, 2.3vw, 24px);
  font-weight: 800;
  color: #0b1020;
  margin: 6px 0 8px;
}

._subHeading_10stf_81 {
  text-align: center;
  color: #6b7280;
  font-size: 15px;
  margin-bottom: 28px;
}

/* Grid */
._grid_10stf_97 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

@media (max-width: 1024px) {
  ._grid_10stf_97 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  ._grid_10stf_97 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  ._grid_10stf_97 { grid-template-columns: 1fr; }
}

/* Card */
._card_10stf_131 {
  border-radius: 16px;
  border: 2px solid #eef2f7;
  background: #fff;
  padding: 26px 22px;
  text-align: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.04);
}

._card_10stf_131:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.07);
}

/* Icon box */
._iconBox_10stf_165 {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 16px;
  display: grid;
  place-items: center;
}

._icon_10stf_165 {
  font-size: 28px;
}

/* Text */
._title_10stf_193 {
  font-size: clamp(17px, 2.2vw, 20px);
  font-weight: 800;
  color: #0b1020;
  margin: 4px 0 6px;
}

._tutors_10stf_207 {
  color: #6b7280;
  font-size: 14px;
  margin: 0;
}

/* ===== Color variants (border + soft icon background + icon color) ===== */

/* Blue (Mathematics / Law look) */
._blue_10stf_225 { border-color: #dbeafe; }
._blue_10stf_225:hover { border-color: #c3dafd; }
._blue_10stf_225 ._iconBox_10stf_165 { background: #eaf2ff; }
._blue_10stf_225 ._icon_10stf_165 { color: #2563eb; }

/* Green (Science / Languages look) */
._green_10stf_237 { border-color: #dcfce7; }
._green_10stf_237:hover { border-color: #c9f7d8; }
._green_10stf_237 ._iconBox_10stf_165 { background: #eaf8f0; }
._green_10stf_237 ._icon_10stf_165 { color: #16a34a; }

/* Purple (Geography) */
._purple_10stf_249 { border-color: #ece9ff; }
._purple_10stf_249:hover { border-color: #ded8ff; }
._purple_10stf_249 ._iconBox_10stf_165 { background: #f1efff; }
._purple_10stf_249 ._icon_10stf_165 { color: #7c3aed; }

/* Orange (Literature) */
._orange_10stf_261 { border-color: #ffe7d6; }
._orange_10stf_261:hover { border-color: #ffd9be; }
._orange_10stf_261 ._iconBox_10stf_165 { background: #fff1e6; }
._orange_10stf_261 ._icon_10stf_165 { color: #f97316; }

/* Pink (Computer Science) */
._pink_10stf_273 { border-color: #fde2f2; }
._pink_10stf_273:hover { border-color: #fbd2ea; }
._pink_10stf_273 ._iconBox_10stf_165 { background: #fff0f8; }
._pink_10stf_273 ._icon_10stf_165 { color: #ec4899; }

/* Indigo (Business) */
._indigo_10stf_285 { border-color: #e3e8ff; }
._indigo_10stf_285:hover { border-color: #d6ddff; }
._indigo_10stf_285 ._iconBox_10stf_165 { background: #eef1ff; }
._indigo_10stf_285 ._icon_10stf_165 { color: #4f46e5; }

/* Teal (Arts) */
._teal_10stf_297 { border-color: #d8ffef; }
._teal_10stf_297:hover { border-color: #c6ffe7; }
._teal_10stf_297 ._iconBox_10stf_165 { background: #e9fff7; }
._teal_10stf_297 ._icon_10stf_165 { color: #14b8a6; }

/* Red (Medicine) */
._red_10stf_309 { border-color: #ffe1e1; }
._red_10stf_309:hover { border-color: #ffd2d2; }
._red_10stf_309 ._iconBox_10stf_165 { background: #fff0f0; }
._red_10stf_309 ._icon_10stf_165 { color: #ef4444; }

/* Skeleton Loading Styles */
@keyframes _skeletonShimmer_10stf_1 {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

._skeletonIconBox_10stf_339 {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 16px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_10stf_1 1.5s ease-in-out infinite;
}

._skeletonTitle_10stf_359 {
  height: 24px;
  width: 120px;
  margin: 4px auto 6px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_10stf_1 1.5s ease-in-out infinite;
  border-radius: 4px;
}

._skeletonTutors_10stf_379 {
  height: 16px;
  width: 80px;
  margin: 0 auto;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_10stf_1 1.5s ease-in-out infinite;
  border-radius: 4px;
}
._container_1u8ea_1 {
  width: 100%;
  margin-top: 1.25rem;
  margin-bottom: 0;
  animation: _slideIn_1u8ea_1 0.3s ease-out;
}

@media (max-width: 768px) {
  ._container_1u8ea_1 {
    margin-top: 1rem;
  }
}

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

._message_1u8ea_49 {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1.125rem 1.25rem;
  border-radius: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 768px) {
  ._message_1u8ea_49 {
    padding: 1rem;
    font-size: 0.875rem;
    gap: 0.75rem;
  }
}

._message_1u8ea_49:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

._message_1u8ea_49._success_1u8ea_103 {
  background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%);
  color: #065f46;
  border: 1.5px solid #6ee7b7;
}

._message_1u8ea_49._error_1u8ea_115 {
  background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%);
  color: #991b1b;
  border: 1.5px solid #fca5a5;
}

._icon_1u8ea_127 {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.125rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

._errorsList_1u8ea_143 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

._fieldError_1u8ea_159 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

._fieldError_1u8ea_159:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

._fieldError_1u8ea_159:first-child {
  padding-top: 0;
}

._fieldError_1u8ea_159 strong {
  text-transform: capitalize;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
  opacity: 0.9;
}

._fieldError_1u8ea_159 > div {
  padding-left: 0.5rem;
  border-left: 2px solid currentColor;
  opacity: 0.85;
}

._message_1u8ea_49._error_1u8ea_115 ._fieldError_1u8ea_159 > div {
  border-left-color: #dc2626;
}

._message_1u8ea_49._success_1u8ea_103 ._fieldError_1u8ea_159 > div {
  border-left-color: #059669;
}

._dismissBtn_1u8ea_237 {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  opacity: 0.6;
  transition: all 0.2s ease;
  border-radius: 0.375rem;
  width: 1.75rem;
  height: 1.75rem;
}

._dismissBtn_1u8ea_237:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.05);
  transform: scale(1.1);
}

._dismissBtn_1u8ea_237:active {
  transform: scale(0.95);
}

._dismissBtn_1u8ea_237:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 0.375rem;
}

._wrap_14ewm_1 {
  margin: 48px auto;
  padding: 0 16px;
  max-width: 980px;
}

/* Big rounded gradient banner */
._card_14ewm_15 {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  max-height: 260px;
  padding: 36px 14px;

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

  /* blue → slate → gold like the screenshot */
  background: linear-gradient(100deg, #2147a4 0%, #6f7683 50%, #f5c659 100%);
  color: #fff;

  /* soft outer glow / elevation */
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.12),
    0 32px 100px rgba(33, 71, 164, 0.20),
    0 32px 100px rgba(245, 198, 89, 0.15);
}

/* subtle top sheen */
._card_14ewm_15::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 22px;
  background: radial-gradient(1200px 220px at 50% 0, rgba(255,255,255,0.10), transparent 60%);
  pointer-events: none;
}

._icon_14ewm_83 {
  width: 72px;
  height: 72px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
._icon_14ewm_83 svg { color: #fff; }

._title_14ewm_107 {
  margin: 8px 0 8px;
  font-weight: 800;
  font-size: clamp(18px, 2.4vw, 26px);
  letter-spacing: 0.2px;
}

._subtitle_14ewm_121 {
  max-width: 980px;
  margin: 8px 0 24px;
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

/* White CTA like the mock */
._cta_14ewm_139 {
  background: #ffffff;
  color: #1e3a8a;                 /* deep blue text */
  border: 0;
  border-radius: 12px;
  padding: 14px 22px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  box-shadow:
    0 8px 24px rgba(16, 24, 40, 0.22),
    0 2px 4px rgba(16, 24, 40, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
._cta_14ewm_139:hover {
  transform: translateY(-1px);
  box-shadow:
    0 12px 28px rgba(16, 24, 40, 0.26),
    0 3px 6px rgba(16, 24, 40, 0.14);
}
._cta_14ewm_139:active { transform: translateY(0); }

@media (max-width: 768px) {
  ._card_14ewm_15 {
    padding: 40px 20px;
    min-height: 220px;
  }
  ._icon_14ewm_83 { width: 56px; height: 56px; }
}
._section_1u6xw_1 {
  text-align: center;
  /* Removed outer padding - parent sectionWrapper handles spacing */
}

._badge_1u6xw_11 {
  display: inline-block;
  background: #f5f7ff;
  color: #1a2c82;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 20px;
  margin-bottom: 16px;
}

._title_1u6xw_33 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 40px;
  color: #111;
}

._highlight_1u6xw_47 {
  color: #1a2c82; /* blue */
}

._highlightAlt_1u6xw_55 {
  color: #fbbf24; /* yellow */
}

/* Cards container */
._cards_1u6xw_65 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Single card */
._card_1u6xw_65 {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  transition: transform 0.25s, box-shadow 0.25s;
}

._card_1u6xw_65:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

/* Icon box */
._iconBox_1u6xw_113 {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 1.5rem;
}

._blue_1u6xw_135 {
  background: #e6edff;
  color: #1a2c82;
}

._green_1u6xw_145 {
  background: #e8f9f0;
  color: #0a925d;
}

._purple_1u6xw_155 {
  background: #f6edff;
  color: #7a3fd4;
}

/* Text inside card */
._cardTitle_1u6xw_167 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #111;
}

._cardDesc_1u6xw_181 {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #555;
}
/* page area background fade (top) */
._wrap_17exa_3 {
  padding: 56px 16px 28px;
  background: transparent;
  text-align: center;
}

/* pill */
._pill_17exa_17 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #e6ffe6;
  color: #16a34a;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid #bbf7d0;
  margin: 0 auto 26px;
}

/* timeline layout */
._timeline_17exa_47 {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  padding: 30px 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
}

/* horizontal track line */
._track_17exa_71 {
  position: absolute;
  top: 60px; /* timeline padding (30px) + half of icon height (30px) = 60px */
  left: 0;
  right: 0;
  height: 2px;
  background: #e5e7eb;
  z-index: 0;
  pointer-events: none;
}

._step_17exa_93 {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 0;
  padding-top: 60px; /* Space for absolutely positioned icon */
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* icon circles */
._icon_17exa_125 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 3px solid;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

/* color variants (soft fill + subtle ring) */
._iconBlue_17exa_159   { background: #e0e8f7; border-color: #1c449c; color: #1c449c; }
._iconMint_17exa_161   { background: #f0f7f0; border-color: #9ca3af; color: #666666; }
._iconPink_17exa_163   { background: #f7f0f7; border-color: #9ca3af; color: #666666; }
._iconPeach_17exa_165  { background: #f7f0e0; border-color: #9ca3af; color: #666666; }

/* active (first) step emphasized */
._active_17exa_171 ._iconBlue_17exa_159 {
  box-shadow: 0 6px 16px rgba(28, 68, 156, 0.2);
  border-width: 3px;
}

/* headings & text */
._stepTitle_17exa_183 {
  margin: 14px 0 6px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #333333;
}

._stepText_17exa_199 {
  margin: 0 auto;
  color: #666666;
  font-size: 14px;
  line-height: 1.5;
}

/* responsive */
@media (max-width: 1024px) {
  ._timeline_17exa_47 {
    max-width: 900px;
    gap: 8px;
  }
}

@media (max-width: 950px) {
  ._timeline_17exa_47 {
    max-width: 100%;
    padding: 20px 10px 10px;
    gap: 6px;
  }
  
  ._stepTitle_17exa_183 {
    font-size: 16px;
    margin: 12px 0 4px;
  }
  
  ._stepText_17exa_199 {
    display: none; /* hide subtitle on screens under 950px */
  }
}

@media (max-width: 640px) {
  ._timeline_17exa_47 {
    padding: 15px 5px 10px;
  }
  
  ._step_17exa_93 {
    padding-top: 50px; /* Space for 50px icon */
    padding-left: 10px;
    padding-right: 10px;
  }
  
  ._track_17exa_71 {
    top: 40px; /* 15px padding + 25px (half of 50px icon) = 40px */
  }
  
  ._stepTitle_17exa_183 {
    font-size: 14px;
    margin: 10px 0 2px;
  }
  
  ._icon_17exa_125 {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 480px) {
  ._timeline_17exa_47 {
    padding: 10px 2px 10px;
  }
  
  ._step_17exa_93 {
    padding-top: 45px; /* Space for 45px icon */
    padding-left: 8px;
    padding-right: 8px;
  }
  
  ._track_17exa_71 {
    top: 32.5px; /* 10px padding + 22.5px (half of 45px icon) = 32.5px */
  }
  
  ._stepTitle_17exa_183 {
    font-size: 12px;
    margin: 8px 0 0;
  }
  
  ._icon_17exa_125 {
    width: 45px;
    height: 45px;
  }
}
._countryPickerWrapper_1bgtv_1 {
  position: relative;
  z-index: 100;
}

._countrySelector_1bgtv_11 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  background-color: #f8fafc;
  border: none;
  border-right: 1px solid #e2e8f0;
  border-radius: 12px 0 0 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
  justify-content: space-between;
  white-space: nowrap;
}

._countrySelector_1bgtv_11:hover:not(._disabled_1bgtv_43) {
  background-color: #f1f5f9;
}

._countrySelectorOpen_1bgtv_51 {
  background-color: #f1f5f9;
}

._countrySelector_1bgtv_11._disabled_1bgtv_43 {
  opacity: 0.6;
  cursor: not-allowed;
}

._countryEmoji_1bgtv_69 {
  font-size: 20px;
  line-height: 1;
}

._countryCode_1bgtv_79 {
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  flex: 1;
  text-align: left;
}

._chevron_1bgtv_95 {
  color: #94a3b8;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

._chevronOpen_1bgtv_107 {
  transform: rotate(180deg);
}

._dropdown_1bgtv_115 {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  min-width: 280px;
  max-width: 400px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  z-index: 10000;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

._searchContainer_1bgtv_151 {
  position: relative;
  padding: 12px;
  border-bottom: 1px solid #e2e8f0;
  background-color: #ffffff;
}

._searchIcon_1bgtv_165 {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  pointer-events: none;
  z-index: 1;
  transition: color 0.2s ease;
}

._searchInput_1bgtv_187 {
  width: 100%;
  padding: 10px 12px 10px 40px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
  color: #0f172a;
  background-color: #ffffff;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

._searchInput_1bgtv_187:focus {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  background-color: #ffffff;
}

._searchContainer_1bgtv_151:focus-within ._searchIcon_1bgtv_165 {
  color: #2563eb;
}

._searchInput_1bgtv_187::-moz-placeholder {
  color: #94a3b8;
  font-weight: 400;
}

._searchInput_1bgtv_187::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

._countryList_1bgtv_243 {
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 0;
}

._countryList_1bgtv_243::-webkit-scrollbar {
  width: 6px;
}

._countryList_1bgtv_243::-webkit-scrollbar-track {
  background: #f1f5f9;
}

._countryList_1bgtv_243::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

._countryList_1bgtv_243::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

._countryItem_1bgtv_289 {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
  text-align: left;
}

._countryItem_1bgtv_289:hover {
  background-color: #f8fafc;
}

._countryItemSelected_1bgtv_323 {
  background-color: #eff6ff;
}

._countryItemSelected_1bgtv_323:hover {
  background-color: #dbeafe;
}

._countryItemEmoji_1bgtv_339 {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

._countryItemName_1bgtv_351 {
  flex: 1;
  font-size: 14px;
  color: #0f172a;
  font-weight: 400;
}

._countryItemCode_1bgtv_365 {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
  flex-shrink: 0;
}

._noResults_1bgtv_379 {
  padding: 24px;
  text-align: center;
  color: #64748b;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 640px) {
  ._countrySelector_1bgtv_11 {
    min-width: 100px;
    padding: 12px 14px;
  }

  ._countryCode_1bgtv_79 {
    font-size: 13px;
  }

  ._dropdown_1bgtv_115 {
    max-height: 300px;
    min-width: 260px;
    max-width: calc(100vw - 32px);
    left: 0;
    right: auto;
  }
}

@media (max-width: 480px) {
  ._countrySelector_1bgtv_11 {
    min-width: 90px;
    padding: 12px;
  }

  ._countryCode_1bgtv_79 {
    font-size: 12px;
  }

  ._dropdown_1bgtv_115 {
    max-height: 300px;
    min-width: 260px;
    max-width: calc(100vw - 32px);
    left: 0;
    right: auto;
  }
}

@media (max-width: 340px) {
  ._countrySelector_1bgtv_11 {
    min-width: 80px;
    padding: 12px 8px;
    flex-shrink: 0;
  }

  ._countryCode_1bgtv_79 {
    font-size: 11px;
  }

  ._countryEmoji_1bgtv_69 {
    font-size: 18px;
  }

  ._dropdown_1bgtv_115 {
    max-height: 300px;
    min-width: 200px;
    max-width: calc(100vw - 16px);
    left: 0;
    right: auto;
  }
}

@media (max-width: 305px) {
  ._countrySelector_1bgtv_11 {
    min-width: 70px;
    padding: 10px 6px;
    flex-shrink: 0;
  }

  ._countryCode_1bgtv_79 {
    font-size: 10px;
  }

  ._countryEmoji_1bgtv_69 {
    font-size: 16px;
  }

  ._chevron_1bgtv_95 {
    width: 14px;
    height: 14px;
  }

  ._dropdown_1bgtv_115 {
    max-height: 280px;
    min-width: 180px;
    max-width: calc(100vw - 8px);
    left: 0;
    right: auto;
  }
}
._phoneInputWrapper_1cndh_1 {
  display: flex;
  align-items: center;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
}

._phoneInputWrapper_1cndh_1:focus-within {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

._phoneInputError_1cndh_31 {
  border-color: #ef4444;
}

._phoneInputError_1cndh_31:focus-within {
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
}

._separator_1cndh_47 {
  width: 1px;
  height: 24px;
  background-color: #e2e8f0;
  flex-shrink: 0;
}

._phoneInput_1cndh_1 {
  flex: 1;
  border: none;
  outline: none;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 400;
  color: #0f172a;
  background-color: transparent;
  font-family: inherit;
  border-radius: 0 12px 12px 0;
}

._phoneInput_1cndh_1::-moz-placeholder {
  color: #94a3b8;
}

._phoneInput_1cndh_1::placeholder {
  color: #94a3b8;
}

._phoneInput_1cndh_1:disabled {
  background-color: #f1f5f9;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Responsive */
@media (max-width: 640px) {
  ._phoneInputWrapper_1cndh_1 {
    width: 100%;
    max-width: 100%;
  }

  ._phoneInput_1cndh_1 {
    font-size: 16px;
    padding: 12px 14px;
  }
}

@media (max-width: 480px) {
  ._phoneInput_1cndh_1 {
    font-size: 16px;
    padding: 12px 14px;
  }
}

@media (max-width: 340px) {
  ._phoneInputWrapper_1cndh_1 {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  ._phoneInput_1cndh_1 {
    min-width: 0;
    font-size: 16px;
    padding: 10px 12px;
    flex: 1;
  }
}

@media (max-width: 305px) {
  ._phoneInputWrapper_1cndh_1 {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  ._phoneInput_1cndh_1 {
    min-width: 0;
    font-size: 16px;
    padding: 10px 8px;
    flex: 1;
  }
}
/* ==================== OVERLAY ==================== */
._overlay_1havq_2 {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.7);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: _fadeIn_1havq_1 0.2s ease-out;
}

@keyframes _fadeIn_1havq_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ==================== MODAL ==================== */
._modal_1havq_25 {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: _slideUp_1havq_1 0.3s ease-out;
}

@keyframes _slideUp_1havq_1 {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ==================== CLOSE BUTTON ==================== */
._closeBtn_1havq_51 {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

._closeBtn_1havq_51:hover {
  background: #e2e8f0;
  color: #334155;
}

/* ==================== HEADER & TABS ==================== */
._header_1havq_75 {
  padding: 1.5rem 1.5rem 0;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

._tabsContainer_1havq_80 {
  position: relative;
  display: flex;
  background: #f1f5f9;
  border-radius: 12px;
  padding: 4px;
}

._tab_1havq_80 {
  flex: 1;
  padding: 0.75rem 1rem;
  border: none;
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color 0.3s;
  border-radius: 8px;
}

._tab_1havq_80:hover:not(._activeTab_1havq_103) {
  color: #475569;
}

._activeTab_1havq_103 {
  color: #1e40af;
}

._tabIndicator_1havq_111 {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================== CONTENT ==================== */
._content_1havq_124 {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

._signupContainer_1havq_130 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ==================== PROGRESS BAR ==================== */
._progressSection_1havq_137 {
  margin-bottom: 0.5rem;
}

._progressInfo_1havq_141 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

._progressStep_1havq_148 {
  font-size: 0.75rem;
  font-weight: 600;
  color: #3b82f6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._progressLabel_1havq_156 {
  font-size: 0.8125rem;
  color: #64748b;
}

._progressBar_1havq_161 {
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  overflow: hidden;
}

._progressFill_1havq_168 {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
  border-radius: 2px;
  transition: width 0.4s ease-out;
}

/* ==================== FORM ==================== */
._form_1havq_176 {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

._formHeader_1havq_182 {
  text-align: center;
  margin-bottom: 0.5rem;
}

._title_1havq_187 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.375rem;
  letter-spacing: -0.025em;
}

._subtitle_1havq_195 {
  font-size: 0.9375rem;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

/* ==================== FORM GROUPS ==================== */
._formGroup_1havq_203 {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

._label_1havq_209 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
}

._inputWrapper_1havq_215 {
  position: relative;
  display: flex;
  align-items: center;
}

._inputIcon_1havq_221 {
  position: absolute;
  left: 14px;
  color: #94a3b8;
  pointer-events: none;
}

._input_1havq_215 {
  width: 100%;
  height: 48px;
  padding: 0 14px 0 44px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 0.9375rem;
  color: #1e293b;
  background: #ffffff;
  transition: all 0.2s;
}

._input_1havq_215:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

._input_1havq_215::-moz-placeholder {
  color: #94a3b8;
}

._input_1havq_215::placeholder {
  color: #94a3b8;
}

._input_1havq_215:disabled {
  background: #f8fafc;
  cursor: not-allowed;
}

._inputError_1havq_255 {
  border-color: #ef4444;
}

._inputError_1havq_255:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

._eyeBtn_1havq_264 {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._eyeBtn_1havq_264:hover {
  color: #64748b;
}

._fieldHint_1havq_281 {
  font-size: 0.8125rem;
  color: #64748b;
  margin-top: 0.25rem;
}

._fieldError_1havq_287 {
  font-size: 0.8125rem;
  color: #ef4444;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

._row2_1havq_296 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* ==================== ERROR ALERT ==================== */
._errorAlert_1havq_303 {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  color: #dc2626;
  font-size: 0.875rem;
  line-height: 1.5;
}

._errorAlert_1havq_303 svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* ==================== OTP SECTION ==================== */
._otpInfo_1havq_322 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
}

._otpIcon_1havq_332 {
  color: #16a34a;
  flex-shrink: 0;
}

._otpInfoText_1havq_337 {
  font-size: 0.875rem;
  color: #166534;
  margin: 0;
  font-weight: 500;
}

._changePhoneBtn_1havq_344 {
  background: none;
  border: none;
  color: #16a34a;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

._changePhoneBtn_1havq_344:hover {
  color: #15803d;
}

._otpContainer_1havq_359 {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

._otpInput_1havq_365 {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1e293b;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  transition: all 0.2s;
}

._otpInput_1havq_365:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

._otpInput_1havq_365:disabled {
  background: #f8fafc;
}

._resendSection_1havq_388 {
  text-align: center;
}

._resendText_1havq_392 {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0;
}

._resendBtn_1havq_398 {
  background: none;
  border: none;
  color: #3b82f6;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

._resendBtn_1havq_398:hover:not(:disabled) {
  color: #2563eb;
  text-decoration: underline;
}

._resendBtn_1havq_398:disabled {
  color: #94a3b8;
  cursor: not-allowed;
}

/* ==================== BUTTONS ==================== */
._submitBtn_1havq_419 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 48px;
  padding: 0 1.5rem;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

._submitBtn_1havq_419:hover:not(:disabled) {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
  transform: translateY(-1px);
}

._submitBtn_1havq_419:active:not(:disabled) {
  transform: translateY(0);
}

._submitBtn_1havq_419:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
}

._backBtn_1havq_453 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 48px;
  padding: 0 1.25rem;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  color: #475569;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

._backBtn_1havq_453:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #cbd5e1;
}

._backBtn_1havq_453:disabled {
  color: #94a3b8;
  cursor: not-allowed;
}

._buttonRow_1havq_480 {
  display: flex;
  gap: 0.75rem;
}

._buttonRow_1havq_480 ._submitBtn_1havq_419 {
  flex: 1;
}

/* ==================== LOADER ==================== */
._loader_1havq_490 {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: _spin_1havq_1 0.8s linear infinite;
}

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

/* ==================== SWITCH TEXT ==================== */
._switchText_1havq_506 {
  text-align: center;
  font-size: 0.875rem;
  color: #64748b;
  margin: 0.5rem 0 0;
}

._switchBtn_1havq_513 {
  background: none;
  border: none;
  color: #3b82f6;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

._switchBtn_1havq_513:hover {
  color: #2563eb;
  text-decoration: underline;
}

/* ==================== CHECKBOX ==================== */
._checkboxLabel_1havq_528 {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: #475569;
  cursor: pointer;
  line-height: 1.5;
}

._checkboxLabel_1havq_528 a {
  color: #3b82f6;
  text-decoration: none;
}

._checkboxLabel_1havq_528 a:hover {
  text-decoration: underline;
}

._checkbox_1havq_528 {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #3b82f6;
  cursor: pointer;
  flex-shrink: 0;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 520px) {
  ._modal_1havq_25 {
    max-height: 100vh;
    border-radius: 0;
    height: 100%;
  }

  ._content_1havq_124 {
    padding: 1.25rem;
  }

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

  ._otpInput_1havq_365 {
    width: 42px;
    height: 50px;
    font-size: 1.25rem;
  }

  ._title_1havq_187 {
    font-size: 1.375rem;
  }
}
/* Container background removed */
._wrap_h0wo2_3 {
  /* Background removed for clean appearance */
}

/* Stepper */
._stepper_h0wo2_13 {
  max-width: 940px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
._step_h0wo2_13 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
._stepNumber_h0wo2_39 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 16px;
  background: #e5e7eb;
  color: #6b7280;
  border: 3px solid #e5e7eb;
}
._stepLabel_h0wo2_63 { 
  font-weight: 700;
  color: #6b7280;
  font-size: 16px;
  letter-spacing: 0.025em;
}
._active_h0wo2_75 ._stepNumber_h0wo2_39 {
  background: #1e40af;
  color: #ffffff;
  border: 3px solid #1e40af;
  font-weight: 900;
}
._active_h0wo2_75 ._stepLabel_h0wo2_63 {
  color: #111827;
  font-weight: 800;
  letter-spacing: 0.025em;
}
._arrow_h0wo2_97 { 
  color: #9ca3af;
  font-size: 20px;
  font-weight: 700;
}

/* Responsive stepper */
@media (max-width: 768px) {
  ._stepper_h0wo2_13 {
    gap: 12px;
    padding: 0 10px;
  }
  
  ._step_h0wo2_13 {
    gap: 8px;
  }
  
  ._stepNumber_h0wo2_39 {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  
  ._stepLabel_h0wo2_63 {
    font-size: 14px;
  }
  
  ._arrow_h0wo2_97 {
    font-size: 18px;
  }
}

@media (max-width: 640px) {
  ._stepper_h0wo2_13 {
    gap: 8px;
    padding: 0 5px;
  }
  
  ._step_h0wo2_13 {
    gap: 6px;
  }
  
  ._stepNumber_h0wo2_39 {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  
  ._stepLabel_h0wo2_63 {
    font-size: 12px;
  }
  
  ._arrow_h0wo2_97 {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  ._stepper_h0wo2_13 {
    gap: 6px;
    padding: 0 2px;
  }
  
  ._step_h0wo2_13 {
    gap: 4px;
  }
  
  ._stepNumber_h0wo2_39 {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }
  
  ._stepLabel_h0wo2_63 {
    font-size: 11px;
  }
  
  ._arrow_h0wo2_97 {
    font-size: 14px;
  }
}

._card_h0wo2_261 {
  max-width: 1010px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #eef2f7;
  border-radius: 18px;
  padding: 22px 20px 24px;
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.06);
}

._partTitle_h0wo2_281 {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 800;
  color: #111827;
}

/* Upload */
._uploadBlock_h0wo2_297 { margin-bottom: 18px; }

._inputLabel_h0wo2_301 {
  display: block;
  font-weight: 600;
  color: #111827;
  margin-bottom: 10px;
}
._req_h0wo2_313 { color: #000000; }

._dropzone_h0wo2_317 {
  border: 2px dashed #D1D5DB;
  border-radius: 8px;
  padding: 48px 24px;
  text-align: center;
  background: #FFFFFF;
  color: #4B5563;
  transition: border-color 0.2s ease, background 0.2s ease;
  cursor: pointer;
}
._dropzone_h0wo2_317:hover {
  border-color: rgba(30, 64, 175, 0.5);
  background: #FFFFFF;
}
._uploadIcon_h0wo2_345 {
  color: #4B5563;
  margin-bottom: 16px;
}
._dropTitle_h0wo2_353 {
  margin: 0 0 16px;
  font-weight: 500;
  color: #4B5563;
  font-size: 16px;
}
._chooseBtn_h0wo2_365 {
  display: inline-block;
  margin-bottom: 16px;
  padding: 8px 20px;
  border-radius: 6px;
  background: #FFFFFF;
  color: #1E40AF;
  border: 1px solid #1E40AF;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s ease;
  cursor: pointer;
}
._chooseBtn_h0wo2_365:hover { 
  background: #1E40AF;
  color: #FFFFFF;
}
._supported_h0wo2_399 {
  margin: 0;
  font-size: 13px;
  color: #6B7280;
}
._hiddenInput_h0wo2_409 { display: none; }

/* Selected Files */
._selectedFiles_h0wo2_415 {
  margin-top: 16px;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

._selectedFilesTitle_h0wo2_431 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

._fileList_h0wo2_445 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._fileItem_h0wo2_457 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 14px;
}

._fileIcon_h0wo2_479 {
  color: #6b7280;
  flex-shrink: 0;
}

._fileName_h0wo2_489 {
  flex: 1;
  color: #111827;
  font-weight: 500;
  word-break: break-all;
}

._fileSize_h0wo2_503 {
  color: #6b7280;
  font-size: 12px;
  flex-shrink: 0;
}

._removeFileBtn_h0wo2_515 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: #f3f4f6;
  color: #6b7280;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

._removeFileBtn_h0wo2_515:hover {
  background: #ef4444;
  color: #ffffff;
}

/* Form Fields */
._formFields_h0wo2_557 {
  margin-bottom: 20px;
}

._field_h0wo2_565 { margin-top: 18px; }

._textarea_h0wo2_569 {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 12px 16px;
  font: inherit;
  line-height: 1.5;
  color: #111827;
  background: #F9FAFB;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 70px;
  resize: none;
  overflow: hidden;
}
._textarea_h0wo2_569::-moz-placeholder { 
  color: #9CA3AF; 
}
._textarea_h0wo2_569::placeholder { 
  color: #9CA3AF; 
}
._textarea_h0wo2_569:focus {
  border-color: #c8d6ee;
  box-shadow: 0 0 0 3px rgba(28, 68, 156, 0.12);
  background: #FFFFFF;
}

._row2_h0wo2_617 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
._input_h0wo2_301 {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 14px;
  font: inherit;
  color: #0f172a;
  background: #F9FAFB;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
._input_h0wo2_301:focus {
  border-color: #c8d6ee;
  box-shadow: 0 0 0 3px rgba(28, 68, 156, 0.12);
}

/* Dropdown Styles */
._dropdownContainer_h0wo2_663 {
  position: relative;
}

._dropdownInput_h0wo2_671 {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 14px;
  background: #F9FAFB;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

._dropdownInput_h0wo2_671:hover {
  border-color: transparent;
}

._dropdownInput_h0wo2_671:focus-within {
  border-color: #c8d6ee;
  box-shadow: 0 0 0 3px rgba(28, 68, 156, 0.12);
  background: #FFFFFF;
}

._universityInput_h0wo2_717 {
  width: 100%;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  padding: 8px 14px;
  background: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
}

._universityInput_h0wo2_717:hover {
  border-color: #1E40AF;
  background: #1E40AF;
  color: #FFFFFF;
}

._universityInput_h0wo2_717:focus-within {
  border-color: #c8d6ee;
  box-shadow: 0 0 0 3px rgba(28, 68, 156, 0.12);
  background: #FFFFFF;
}

._universityInput_h0wo2_717 ._placeholder_h0wo2_767 {
  color: #000000;
  font-weight: 500;
}

._universityInput_h0wo2_717:hover ._placeholder_h0wo2_767 {
  color: #FFFFFF;
}

._universityInput_h0wo2_717 ._selectedValue_h0wo2_785 {
  color: #000000;
}

._universityInput_h0wo2_717:hover ._selectedValue_h0wo2_785 {
  color: #FFFFFF;
}

._selectedValue_h0wo2_785 {
  color: #0f172a;
  font-weight: 500;
}

._placeholder_h0wo2_767 {
  color: #9ca3af;
}

._chevronContainer_h0wo2_819 {
  display: flex;
  align-items: center;
}

._chevron_h0wo2_819 {
  color: #6b7280;
  transition: transform 0.2s ease;
}

._dropdown_h0wo2_663 {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  z-index: 50;
  margin-top: 4px;
  max-height: 300px;
  overflow: hidden;
}

._searchContainer_h0wo2_869 {
  position: relative;
  padding: 8px;
  border-bottom: 1px solid #e5e7eb;
  background: #FFFFFF;
  border-radius: 6px 6px 0 0;
}

._searchIcon_h0wo2_885 {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
}

._searchInput_h0wo2_901 {
  width: 100%;
  padding: 6px 6px 6px 32px;
  border: none;
  border-radius: 0;
  font-size: 14px;
  outline: none;
  background: transparent;
  color: #000000;
}

._searchInput_h0wo2_901:focus {
  outline: none;
}

._optionsList_h0wo2_931 {
  max-height: 200px;
  overflow-y: auto;
}

._option_h0wo2_931 {
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.2s ease;
  font-size: 14px;
}

._option_h0wo2_931:hover {
  background-color: #f3f4f6;
}

._checkIcon_h0wo2_969 {
  color: #1c449c;
  flex-shrink: 0;
}

/* User Status Banner */
._userStatusBanner_h0wo2_981 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 8px;
  margin: 20px 0;
}

._statusCheckIcon_h0wo2_1003 {
  color: #16A34A;
  flex-shrink: 0;
}

._statusText_h0wo2_1013 {
  color: #166534;
  font-weight: 500;
  font-size: 14px;
}

/* Login Prompt Banner - for unauthenticated users */
._loginPromptBanner_h0wo2_1027 {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
}

._loginPromptBanner_h0wo2_1027 ._statusText_h0wo2_1013 {
  color: #1E40AF;
}

._statusLoginIcon_h0wo2_1045 {
  color: #3B82F6;
  flex-shrink: 0;
}

/* Footer */
._footer_h0wo2_1057 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 32px;
}

._footer_h0wo2_1057._twoButtons_h0wo2_1071 {
  justify-content: space-between;
}

._nextBtn_h0wo2_1079 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  background: #1E40AF;
  color: #ffffff;
  font-weight: 600;
  border: none;
  box-shadow: none;
  transition: background 0.2s ease;
  cursor: pointer;
  font-size: 14px;
}
._nextBtn_h0wo2_1079:hover { background: #1D4ED8; }
._nextBtn_h0wo2_1079:active { background: #1E40AF; }

._continueBtn_h0wo2_1115 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  background: #1E40AF;
  color: #ffffff;
  font-weight: 600;
  border: none;
  box-shadow: none;
  transition: background 0.2s ease;
  cursor: pointer;
  font-size: 14px;
}

._continueBtn_h0wo2_1115:hover { background: #1D4ED8; }
._continueBtn_h0wo2_1115:active { background: #1E40AF; }

._backBtn_h0wo2_1153 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  background: #FFFFFF;
  color: #2A3B8F;
  font-weight: 500;
  border: 2px solid #2A3B8F;
  box-shadow: none;
  transition: all 0.2s ease;
  cursor: pointer;
  font-size: 14px;
}

._backBtn_h0wo2_1153:hover {
  background: #2A3B8F;
  border-color: #2A3B8F;
  color: #FFFFFF;
}

._submitBtn_h0wo2_1197 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  background: #1E40AF;
  color: #ffffff;
  font-weight: 600;
  border: none;
  box-shadow: none;
  transition: background 0.2s ease;
  cursor: pointer;
  font-size: 14px;
}

._submitBtn_h0wo2_1197:hover {
  background: #1D4ED8;
}

._submitBtn_h0wo2_1197:active {
  background: #1E40AF;
}

/* Validation Styles */
._error_h0wo2_1247 {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

._errorMessage_h0wo2_1257 {
  color: #ef4444;
  font-size: 12px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

._errorIcon_h0wo2_1275 {
  width: 12px;
  height: 12px;
}

._fieldError_h0wo2_1285 {
  border-color: #ef4444;
}

._fieldError_h0wo2_1285 ._input_h0wo2_301,
._fieldError_h0wo2_1285 ._textarea_h0wo2_569,
._fieldError_h0wo2_1285 ._universityInput_h0wo2_717,
._fieldError_h0wo2_1285 ._dropdownInput_h0wo2_671 {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

._fieldError_h0wo2_1285 ._input_h0wo2_301:focus,
._fieldError_h0wo2_1285 ._textarea_h0wo2_569:focus,
._fieldError_h0wo2_1285 ._universityInput_h0wo2_717:focus-within,
._fieldError_h0wo2_1285 ._dropdownInput_h0wo2_671:focus-within {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

._validationSummary_h0wo2_1325 {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 16px;
}

._validationSummaryTitle_h0wo2_1341 {
  color: #dc2626;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

._validationSummaryList_h0wo2_1361 {
  list-style: none;
  padding: 0;
  margin: 0;
}

._validationSummaryItem_h0wo2_1373 {
  color: #dc2626;
  font-size: 13px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Responsive */
@media (max-width: 720px) {
  ._row2_h0wo2_617 { 
    grid-template-columns: 1fr; 
  }
  ._footer_h0wo2_1057 { 
    flex-direction: column;
    gap: 12px;
  }
  ._nextBtn_h0wo2_1079,
  ._continueBtn_h0wo2_1115,
  ._backBtn_h0wo2_1153,
  ._submitBtn_h0wo2_1197 {
    width: 100%;
    justify-content: center;
  }
  
  ._textarea_h0wo2_569 {
    min-height: 150px;
  }
}

@media (max-width: 480px) {
  ._textarea_h0wo2_569 {
    min-height: 170px;
  }
}

@media (max-width: 360px) {
  ._textarea_h0wo2_569 {
    min-height: 190px;
  }
}
/* Section backdrop */
._section_1kr7v_3 {
  padding: 56px 16px 40px;
  text-align: center;
}

/* Pill */
._pill_1kr7v_15 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #F5F7FA;
  border: 1px solid #D8E0F0;
  color: #1C449C;
  font-weight: 600;
  margin: 0 auto 14px;
}
._pillIcon_1kr7v_39 { 
  font-size: 14px;
  color: #1C449C;
}

/* Heading */
._title_1kr7v_51 {
  margin: 10px 0 6px;
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #0f172a;
}
._titleBlue_1kr7v_65 { color: #1c449c; }

._subtitle_1kr7v_69 {
  max-width: 900px;
  margin: 0 auto 28px;
  color: #64748b;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
}

/* Grid */
._grid_1kr7v_89 {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 26px;
  padding: 4px;
}

/* Card */
._card_1kr7v_109 {
  position: relative;
  background: #ffffff;
  border: 1px solid #E0E0E0;
  border-radius: 12px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

._card_1kr7v_109::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 15%;
  height: 3px;
  background: transparent;
  transform: translateX(-50%);
  transition: all 0.4s ease;
}

._card_1kr7v_109:hover {
  transform: translateY(-8px);
}

._iconWrap_1kr7v_167 {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  margin: 0 auto 40px;
  background: #eef3ff;
  color: #1c449c;
  border: 1px solid #dfe6fb;
  transition: all 0.3s ease;
}

._card_1kr7v_109:hover ._iconWrap_1kr7v_167 {
  transform: scale(1.1);
}

._cardTitle_1kr7v_201 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: #333333;
  transition: color 0.3s ease;
}

._card_1kr7v_109:hover ._cardTitle_1kr7v_201 {
  color: #1c449c;
}

._cardText_1kr7v_225 {
  margin: 0;
  color: #666666;
  line-height: 1.5;
  font-size: 14px;
  font-weight: 400;
}

/* Decorative tiny bar at bottom center - removed to match image */

/* Tone variants for icon and bar */
._tone_blue_1kr7v_247   ._iconWrap_1kr7v_167 { background: #e6f3ff; border-color: #b3d9ff; color: #1c449c; }
._tone_blue_1kr7v_247   ._bar_1kr7v_249      { background: #e6edff; }
._tone_blue_1kr7v_247::after { background: rgba(28, 68, 156, 0.2); }
._tone_blue_1kr7v_247:hover::after { 
  width: 100%; 
  background: rgba(28, 68, 156, 0.3); 
}

._tone_green_1kr7v_263  ._iconWrap_1kr7v_167 { background: #e6f7e6; border-color: #b3e6b3; color: #2a8d57; }
._tone_green_1kr7v_263  ._bar_1kr7v_249      { background: #dff3e7; }
._tone_green_1kr7v_263::after { background: rgba(42, 141, 87, 0.2); }
._tone_green_1kr7v_263:hover::after { 
  width: 100%; 
  background: rgba(42, 141, 87, 0.3); 
}

._tone_purple_1kr7v_279 ._iconWrap_1kr7v_167 { background: #f0e6ff; border-color: #d9b3ff; color: #7c3aed; }
._tone_purple_1kr7v_279 ._bar_1kr7v_249      { background: #ebe2ff; }
._tone_purple_1kr7v_279::after { background: rgba(124, 58, 237, 0.2); }
._tone_purple_1kr7v_279:hover::after { 
  width: 100%; 
  background: rgba(124, 58, 237, 0.3); 
}

._tone_orange_1kr7v_295 ._iconWrap_1kr7v_167 { background: #fff0e6; border-color: #ffd9b3; color: #d97706; }
._tone_orange_1kr7v_295 ._bar_1kr7v_249      { background: #ffe6cc; }
._tone_orange_1kr7v_295::after { background: rgba(217, 119, 6, 0.2); }
._tone_orange_1kr7v_295:hover::after { 
  width: 100%; 
  background: rgba(217, 119, 6, 0.3); 
}

._tone_pink_1kr7v_311   ._iconWrap_1kr7v_167 { background: #ffe6f0; border-color: #ffb3d9; color: #db2777; }
._tone_pink_1kr7v_311   ._bar_1kr7v_249      { background: #ffe1ee; }
._tone_pink_1kr7v_311::after { background: rgba(219, 39, 119, 0.2); }
._tone_pink_1kr7v_311:hover::after { 
  width: 100%; 
  background: rgba(219, 39, 119, 0.3); 
}

._tone_indigo_1kr7v_327 ._iconWrap_1kr7v_167 { background: #e6e6ff; border-color: #b3b3ff; color: #4f46e5; }
._tone_indigo_1kr7v_327 ._bar_1kr7v_249      { background: #e3e6ff; }
._tone_indigo_1kr7v_327::after { background: rgba(79, 70, 229, 0.2); }
._tone_indigo_1kr7v_327:hover::after { 
  width: 100%; 
  background: rgba(79, 70, 229, 0.3); 
}

/* Responsive */
@media (max-width: 1020px) {
  ._grid_1kr7v_89 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  ._grid_1kr7v_89 { grid-template-columns: 1fr; }
  ._section_1kr7v_3 { padding-top: 42px; }
  ._card_1kr7v_109 { text-align: center; }
  ._iconWrap_1kr7v_167 { margin: 0 auto 16px; }
}
/* ===================================
   ASSIGNMENT HELP PAGE LAYOUT SYSTEM
   Professional Spacing & Structure
   =================================== */

/* Main Page Container */
._page_y27lo_13 {
  min-height: 100%;
  background: white;
  width: 100%;
  overflow-x: hidden;
}

/* Hero Section - 4 Stepper at the top with no top padding */
._heroSection_y27lo_29 {
  /* No top padding to keep 4 stepper at the very top */
  padding-top: 0;
  padding-bottom: clamp(80px, 10vw, 120px);
  
  /* Horizontal Spacing */
  padding-left: clamp(20px, 5vw, 80px);
  padding-right: clamp(20px, 5vw, 80px);
  
  /* Ensures sections take full width */
  width: 100%;
  box-sizing: border-box;
}

/* Section Wrapper - Controls ALL spacing between sections */
._sectionWrapper_y27lo_59 {
  /* Vertical Spacing */
  padding-top: clamp(80px, 10vw, 120px);
  padding-bottom: clamp(80px, 10vw, 120px);
  
  /* Horizontal Spacing */
  padding-left: clamp(20px, 5vw, 80px);
  padding-right: clamp(20px, 5vw, 80px);
  
  /* Ensures sections take full width */
  width: 100%;
  box-sizing: border-box;
}

/* Remove bottom padding from last section */
._sectionWrapper_y27lo_59:last-child {
  padding-bottom: clamp(60px, 8vw, 100px);
}

/* ===================================
   RESPONSIVE SPACING ADJUSTMENTS
   =================================== */

/* Extra Large Screens (1600px+) - Maximum breathing room */
@media (min-width: 1600px) {
  ._heroSection_y27lo_29 {
    padding-top: 0;
    padding-bottom: 140px;
    padding-left: 100px;
    padding-right: 100px;
  }
  
  ._sectionWrapper_y27lo_59 {
    padding-top: 140px;
    padding-bottom: 140px;
    padding-left: 100px;
    padding-right: 100px;
  }
  
  ._sectionWrapper_y27lo_59:last-child {
    padding-bottom: 120px;
  }
}

/* Large Desktop (1200px - 1599px) - Generous spacing */
@media (min-width: 1200px) and (max-width: 1599px) {
  ._heroSection_y27lo_29 {
    padding-top: 0;
    padding-bottom: 100px;
    padding-left: 60px;
    padding-right: 60px;
  }
  
  ._sectionWrapper_y27lo_59 {
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 60px;
    padding-right: 60px;
  }
  
  ._sectionWrapper_y27lo_59:last-child {
    padding-bottom: 80px;
  }
}

/* Medium Desktop (992px - 1199px) - Comfortable spacing */
@media (min-width: 992px) and (max-width: 1199px) {
  ._heroSection_y27lo_29 {
    padding-top: 0;
    padding-bottom: 80px;
    padding-left: 40px;
    padding-right: 40px;
  }
  
  ._sectionWrapper_y27lo_59 {
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: 40px;
    padding-right: 40px;
  }
  
  ._sectionWrapper_y27lo_59:last-child {
    padding-bottom: 60px;
  }
}

/* Tablet (768px - 991px) - Balanced spacing */
@media (min-width: 768px) and (max-width: 991px) {
  ._heroSection_y27lo_29 {
    padding-top: 0;
    padding-bottom: 60px;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  ._sectionWrapper_y27lo_59 {
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  ._sectionWrapper_y27lo_59:last-child {
    padding-bottom: 50px;
  }
}

/* Small Tablet (576px - 767px) - Compact but breathable */
@media (min-width: 576px) and (max-width: 767px) {
  ._heroSection_y27lo_29 {
    padding-top: 0;
    padding-bottom: 50px;
    padding-left: 24px;
    padding-right: 24px;
  }
  
  ._sectionWrapper_y27lo_59 {
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 24px;
    padding-right: 24px;
  }
  
  ._sectionWrapper_y27lo_59:last-child {
    padding-bottom: 40px;
  }
}

/* Mobile (320px - 575px) - Optimized for small screens */
@media (max-width: 575px) {
  ._heroSection_y27lo_29 {
    padding-top: 0;
    padding-bottom: 40px;
    padding-left: 16px;
    padding-right: 16px;
  }
  
  ._sectionWrapper_y27lo_59 {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 16px;
    padding-right: 16px;
  }
  
  ._sectionWrapper_y27lo_59:last-child {
    padding-bottom: 32px;
  }
}

/* Ultra Small Screens (below 320px) - Minimal but functional */
@media (max-width: 319px) {
  ._heroSection_y27lo_29 {
    padding-top: 0;
    padding-bottom: 32px;
    padding-left: 12px;
    padding-right: 12px;
  }
  
  ._sectionWrapper_y27lo_59 {
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 12px;
    padding-right: 12px;
  }
  
  ._sectionWrapper_y27lo_59:last-child {
    padding-bottom: 24px;
  }
}
:root {
  --blue: #2147a4;
  --blue-100: #eef3ff;
  --blue-200: #d9e6ff;
  --ink: #0b1424;
  --muted: #64748b;
  --gold: #f5c659;
  --bd: #e9eef8;
}

/* soft page background like screenshot */
._section_4l62o_23 {
  background:
    radial-gradient(900px 420px at 80% 20%, #fefae8 0%, transparent 60%),
    linear-gradient(180deg, #f7fbff, #ffffff 45%, #fff 100%);
  padding: 24px 0 10px;
  margin: 0 auto;
}

._max_4l62o_39 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

._grid_4l62o_51 {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 28px;
}

/* LEFT */
._left_4l62o_67 {
  padding: 6px 0;
}

._badge_4l62o_75 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--blue-100);
  border: 1px solid var(--blue-200);
  color: var(--blue);
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 14px;
}

._title_4l62o_103 {
  margin: 0 0 8px;
  line-height: 1.02;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._black_4l62o_119 {
  font-size: clamp(36px, 5.8vw, 54px);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
}

._blue_4l62o_133 {
  font-size: clamp(36px, 5.4vw, 50px);
  font-weight: 900;
  color: var(--blue);
  letter-spacing: -0.02em;
}

._gold_4l62o_147 {
  font-size: clamp(36px, 5.4vw, 50px);
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #ffd98a, #f3b928);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

._subtitle_4l62o_167 {
  max-width: 620px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.55;
  font-size: 15px;
  margin: 8px 0 18px;
}

/* CTAs */
._actions_4l62o_187 {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

._primary_4l62o_199,
._ghost_4l62o_201 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
}

._primary_4l62o_199 {
  background: var(--blue);
  color: #fff;
  border: 0;
  box-shadow: 0 12px 28px rgba(33, 71, 164, .20);
}

._ghost_4l62o_201 {
  background: #fff;
  color: var(--blue);
  border: 2px solid var(--blue-200);
}

/* RIGHT */
._right_4l62o_253 {
  position: relative;
  justify-self: end;
}

._heroImg_4l62o_263 {
  width: min(620px, 100%);
  height: auto;
  border-radius: 22px;
  box-shadow:
    0 32px 90px rgba(15, 23, 42, .16),
    0 18px 40px rgba(15, 23, 42, .08);
  display: block;
}

/* floating stats card at bottom-left of image */
._floatingCard_4l62o_285 {
  position: absolute;
  left: 24px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .10);
}

._iconBadge_4l62o_313 {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--blue-100);
  border: 1px solid var(--blue-200);
  color: var(--blue);
  font-size: 18px;
}

._fcText_4l62o_337 {
  line-height: 1.1;
}

._fcTitle_4l62o_345 {
  font-weight: 900;
  color: #0f172a;
  font-size: 14px;
}

._fcSub_4l62o_357 {
  color: #6b7280;
  font-weight: 800;
  font-size: 12px;
}

/* Responsive */
@media (max-width: 980px) {
  ._grid_4l62o_51 {
    grid-template-columns: 1fr;
  }

  ._right_4l62o_253 {
    justify-self: start;
  }

  ._heroImg_4l62o_263 {
    width: 100%;
  }
}:root {
    --blue: #2147a4;
    --ink: #0b1424;
    --muted: #5f7390;
    --bd: #e9eef8;
    --green: #16a34a;
    --green-100: #e9f9ef;
    --green-200: #cfeedd;
    --gold: #f5c659;
}

/* soft page background like the reference */
._section_2d324_25 {
    background:
        radial-gradient(800px 300px at 70% 90%, #f4f9ff 0%, transparent 60%),
        linear-gradient(180deg, #f7fbff, #ffffff);
    padding: 18px 0 12px;
    margin: 4rem auto;
}

._max_2d324_41 {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

._grid_2d324_53 {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: 28px;
}

/* left column */
._badge_2d324_69 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--green-100);
    border: 1px solid var(--green-200);
    color: var(--green);
    font-weight: 800;
    font-size: 13px;
    /* smaller fonts as requested */
    margin-bottom: 12px;
}

._title_2d324_99 {
    margin: 0 0 10px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-size: clamp(28px, 4.6vw, 42px);
}

._lead_2d324_117 {
    max-width: 640px;
    color: var(--muted);
    font-weight: 800;
    line-height: 1.6;
    font-size: 14.5px;
    margin: 8px 0 0;
}

/* buttons */
._actions_2d324_137 {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

._btnIcon_2d324_151 {
    margin-right: 8px;
    transform: translateY(1px);
}

._primary_2d324_161,
._ghost_2d324_163 {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 14px;
    cursor: pointer;
}

._primary_2d324_161 {
    background: var(--gold);
    color: #1f2a44;
    border: 0;
    box-shadow: 0 12px 28px rgba(245, 198, 89, .28);
}

._ghost_2d324_163 {
    background: #fff;
    color: var(--blue);
    border: 2px solid #d9e6ff;
}

/* right column image */
._right_2d324_213 {
    position: relative;
}

._photo_2d324_221 {
    width: min(620px, 100%);
    height: auto;
    display: block;
    border-radius: 24px;
    box-shadow:
        0 32px 80px rgba(15, 23, 42, .10),
        0 20px 40px rgba(15, 23, 42, .06);
    -o-object-fit: cover;
       object-fit: cover;
}

/* responsive */
@media (max-width: 980px) {
    ._grid_2d324_53 {
        grid-template-columns: 1fr;
    }

    ._right_2d324_213 {
        order: 2;
    }

    ._left_2d324_263 {
        order: 1;
    }
}:root {
    --blue: #2147a4;
    --ink: #0b1424;
    --muted: #6b7280;

    --bd: #e9eef8;

    --t-blue: #3b82f6;
    --t-blue-100: #eef3ff;
    --t-blue-200: #d9e6ff;
    --t-green: #16a34a;
    --t-green-100: #e9f9ef;
    --t-green-200: #cfeedd;
    --t-purple: #7c3aed;
    --t-purple-100: #f3e8ff;
    --t-purple-200: #eadbff;
    --t-orange: #f59e0b;
    --t-orange-100: #fff4e5;
    --t-orange-200: #ffe4c7;
}

._section_1ikt3_43 {
    padding: 18px 0 24px;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    margin: 4rem auto;
}

._max_1ikt3_55 {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

/* Badge */
._badge_1ikt3_71 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #f3f7ff;
    border: 1px solid #d9e6ff;
    color: var(--blue);
    font-weight: 800;
    font-size: 13px;
    /* small */
    margin-bottom: 10px;
}

/* Heading */
._title_1ikt3_103 {
    margin: 4px 0 8px;
    font-weight: 900;
    letter-spacing: -.02em;
    font-size: clamp(26px, 4.2vw, 40px);
    /* compact */
}

._black_1ikt3_119 {
    color: var(--ink);
}

._blue_1ikt3_127 {
    color: var(--blue);
}

._gold_1ikt3_135 {
    background: linear-gradient(180deg, #ffd98a, #f3b928);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

._subtitle_1ikt3_149 {
    max-width: 820px;
    margin: 0 auto 18px;
    color: #7b8aa0;
    font-weight: 700;
    font-size: 14px;
}

/* Grid */
._grid_1ikt3_167 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 8px;
}

/* Card */
._card_1ikt3_183 {
    background: #fff;
    border: 1px solid var(--bd);
    border-radius: 16px;
    padding: 22px 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

._card_1ikt3_183:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

._card_1ikt3_183:hover ._iconWrap_1ikt3_211 {
    transform: scale(1.1);
}

._card_1ikt3_183:hover ._cardTitle_1ikt3_219 {
    color: #1c449c;
}

._iconWrap_1ikt3_211 {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 26px;
    border: 1px solid var(--bd);
    transition: all 0.3s ease;
}

/* Variants */
._blue_1ikt3_127 {
    border-color: var(--t-blue-200);
}

._blue_1ikt3_127 ._iconWrap_1ikt3_211 {
    background: var(--t-blue-100);
    border-color: var(--t-blue-200);
    color: var(--t-blue);
}

._green_1ikt3_273 {
    border-color: var(--t-green-200);
}

._green_1ikt3_273 ._iconWrap_1ikt3_211 {
    background: var(--t-green-100);
    border-color: var(--t-green-200);
    color: var(--t-green);
}

._purple_1ikt3_293 {
    border-color: var(--t-purple-200);
}

._purple_1ikt3_293 ._iconWrap_1ikt3_211 {
    background: var(--t-purple-100);
    border-color: var(--t-purple-200);
    color: var(--t-purple);
}

._orange_1ikt3_313 {
    border-color: var(--t-orange-200);
}

._orange_1ikt3_313 ._iconWrap_1ikt3_211 {
    background: var(--t-orange-100);
    border-color: var(--t-orange-200);
    color: var(--t-orange);
}

._cardTitle_1ikt3_219 {
    font-weight: 900;
    color: var(--ink);
    font-size: 16px;
    /* small bold */
    margin: 4px 0 8px;
    transition: color 0.3s ease;
}

._cardText_1ikt3_351 {
    color: var(--muted);
    font-weight: 700;
    line-height: 1.55;
    font-size: 13.5px;
}

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

@media (max-width: 560px) {
    ._grid_1ikt3_167 {
        grid-template-columns: 1fr;
    }
}:root{
  --blue:#2147a4;
  --ink:#0b1424;
  --muted:#6b7280;
  --bd:#e9eef8;

  --c-blue:#2147a4;
  --c-green:#16a34a;
  --c-purple:#7c3aed;
  --c-orange:#f97316;
}

._section_18f9n_25{
  padding: 18px 0 4rem;
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  margin: 4rem auto 0;
}

._max_18f9n_37{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

/* badge */
._badge_18f9n_53{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#e9f9ef;
  border:1px solid #cfeedd;
  color:#149a4a;
  font-weight:800;
  font-size:13px;
  margin-bottom:10px;
}

/* heading + subtitle (smaller fonts) */
._title_18f9n_83{
  margin: 4px 0 6px;
  font-weight: 900;
  letter-spacing:-.02em;
  font-size: clamp(26px,4vw,40px);
  color: var(--ink);
}
._subtitle_18f9n_97{
  color:#7b8aa0;
  font-weight:700;
  font-size:14px;
  margin: 0 auto 16px;
  max-width: 860px;
}

/* stat cards */
._grid_18f9n_115{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:22px;
  margin-top: 6px;
  margin-bottom: 2rem;
}
._card_18f9n_129{
  background:#fff;
  border:1px solid var(--bd);
  border-radius:16px;
  padding:22px 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

._card_18f9n_129:hover {
  box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.1);
  border-top: 1px solid var(--bd);
}

._value_18f9n_157{
  font-weight: 900;
  font-size: clamp(22px,3vw,32px);
  line-height:1;
  margin-bottom: 10px;
}
._label_18f9n_169{
  color:#7b8aa0;
  font-weight:700;
  font-size:14px;
}

/* colors for values */
._blue_18f9n_183{ color: var(--c-blue); }
._green_18f9n_185{ color: var(--c-green); }
._purple_18f9n_187{ color: var(--c-purple); }
._orange_18f9n_189{ color: var(--c-orange); }

/* responsive */
@media (max-width: 1000px){
  ._grid_18f9n_115{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px){
  ._grid_18f9n_115{ grid-template-columns: 1fr; }
}
:root{
  --ink:#0b1424;
  --muted:#6b7280;
  --bd:#e9eef8;

  --b:#2147a4;     --b-100:#eef3ff;    --b-200:#d9e6ff;
  --g:#16a34a;     --g-100:#e9f9ef;    --g-200:#cfeedd;
  --p:#7c3aed;     --p-100:#f3e8ff;    --p-200:#eadbff;
}

/* Section shell */
._section_ds166_23{
  padding: 18px 0 26px;
  background: linear-gradient(180deg,#f9fbff,#ffffff);
  margin: 0 auto 4rem;
}
._max_ds166_33{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
  text-align: center;
}

/* Badge */
._badge_ds166_49{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#f3f7ff;
  border:1px solid #d9e6ff;
  color: var(--b);
  font-weight:800;
  font-size:13px; /* small */
  margin-bottom:10px;
}

/* Title + subtitle (compact) */
._title_ds166_79{
  margin: 4px 0 6px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.02em;
  font-size: clamp(26px,4.2vw,40px);
}
._subtitle_ds166_93{
  color:#7b8aa0;
  font-weight:700;
  font-size:14px;
  margin: 0 auto 18px;
  max-width: 820px;
}

/* Grid */
._grid_ds166_111{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
  margin-top: 8px;
}

/* Card */
._card_ds166_127{
  background:#fff;
  border: 1px solid var(--bd);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  padding: 24px 18px 22px;
  transition: all 0.3s ease;
}

._card_ds166_127:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

._card_ds166_127:hover ._iconCircle_ds166_155 {
  transform: scale(1.1);
}

/* Icon circle */
._iconCircle_ds166_155{
  width: 92px; height: 92px;
  margin: 0 auto 12px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 30px;
  border: 2px solid;
  background: #fff;
  transition: all 0.3s ease;
}
._blue_ds166_185{   color: var(--b); border-color: var(--b-200); box-shadow: inset 0 0 0 10px var(--b-100); }
._green_ds166_187{  color: var(--g); border-color: var(--g-200); box-shadow: inset 0 0 0 10px var(--g-100); }
._purple_ds166_189{ color: var(--p); border-color: var(--p-200); box-shadow: inset 0 0 0 10px var(--p-100); }

._name_ds166_193{
  font-weight: 900;
  color: var(--ink);
  font-size: 18px;
  margin: 6px 0 2px;
}

/* role with tone color */
._role_ds166_209{
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 12px;
}
._blueText_ds166_219{ color: var(--b); }
._greenText_ds166_221{ color: var(--g); }
._purpleText_ds166_223{ color: var(--p); }

/* bio */
._bio_ds166_229{
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 980px){
  ._grid_ds166_111{ grid-template-columns: 1fr; }
}
:root {
  --blue: #2147a4;
  --ink: #0b1424;
  --muted: #6b7280;
  --bd: #e9eef8;

  --y-100: #fff7e5;
  --y-200: #ffe9bf;
  --y: #f59e0b;
  --b-100: #eef3ff;
  --b-200: #d9e6ff;
  --b: #3b82f6;
  --g-100: #e9f9ef;
  --g-200: #cfeedd;
  --g: #16a34a;
  --p-100: #f3e8ff;
  --p-200: #eadbff;
  --p: #7c3aed;
}

._section_1ed1j_41 {
  padding: 18px 0 12px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  margin: 4rem auto;
}

._max_1ed1j_53 {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

/* badge */
._badge_1ed1j_69 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff6e9;
  border: 1px solid #ffe6bf;
  color: #b37a00;
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 10px;
}

/* heading + subtitle (compact) */
._title_1ed1j_99 {
  margin: 4px 0 6px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.02em;
  font-size: clamp(26px, 4.2vw, 40px);
}

._subtitle_1ed1j_115 {
  color: #7b8aa0;
  font-weight: 700;
  font-size: 14px;
  margin: 0 auto 16px;
  max-width: 820px;
}

/* award cards */
._grid_1ed1j_133 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 8px;
}

._card_1ed1j_147 {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 16px;
  padding: 22px 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}

._card_1ed1j_147:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

._card_1ed1j_147:hover ._icon_1ed1j_175 {
  transform: scale(1.1);
}

._icon_1ed1j_175 {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  font-size: 22px;
  border: 1px solid var(--bd);
  transition: all 0.3s ease;
}

._cardTitle_1ed1j_207 {
  font-weight: 900;
  color: var(--ink);
  font-size: 14px;
  margin-bottom: 6px;
}

._cardSub_1ed1j_221 {
  color: #7b8aa0;
  font-weight: 700;
  font-size: 13px;
}

/* tones */
._yellow_1ed1j_235 {
  border-color: var(--y-200);
}

._yellow_1ed1j_235 ._icon_1ed1j_175 {
  background: var(--y-100);
  border-color: var(--y-200);
  color: var(--y);
}

._blue_1ed1j_255 {
  border-color: var(--b-200);
}

._blue_1ed1j_255 ._icon_1ed1j_175 {
  background: var(--b-100);
  border-color: var(--b-200);
  color: var(--b);
}

._green_1ed1j_275 {
  border-color: var(--g-200);
}

._green_1ed1j_275 ._icon_1ed1j_175 {
  background: var(--g-100);
  border-color: var(--g-200);
  color: var(--g);
}

._purple_1ed1j_295 {
  border-color: var(--p-200);
}

._purple_1ed1j_295 ._icon_1ed1j_175 {
  background: var(--p-100);
  border-color: var(--p-200);
  color: var(--p);
}

/* banner */
._bannerWrap_1ed1j_317 {
  margin-top: 6rem;
  padding: 0 24px;
}

._banner_1ed1j_317 {
  max-width: 1180px;
  margin: 0 auto;
  border-radius: 26px;
  padding: 46px 18px 24px;
  color: #fff;
  text-align: center;
  background: linear-gradient(100deg, #2147a4 0%, #6f7683 52%, #f5c659 100%);
  box-shadow: 0 28px 80px rgba(33, 71, 164, .18), 0 18px 60px rgba(245, 198, 89, .16);
}

._bannerChip_1ed1j_349 {
  width: 68px;
  height: 68px;
  margin: 0 auto 10px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .32);
  font-size: 26px;
  color: #fff;
}

._bannerTitle_1ed1j_375 {
  font-weight: 900;
  letter-spacing: -.01em;
  font-size: clamp(22px, 3.2vw, 28px);
  margin: 6px 0 6px;
}

._bannerText_1ed1j_389 {
  max-width: 860px;
  margin: 0 auto 16px;
  color: rgba(255, 255, 255, .95);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.55;
}

._actions_1ed1j_407 {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

._btnIcon_1ed1j_421 {
  margin-right: 8px;
  transform: translateY(1px);
}

/* buttons */
._primary_1ed1j_433 {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: var(--blue);
  border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(16, 24, 40, .22);
}

._ghost_1ed1j_461 {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 12px;
  padding: 8px 16px;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
}

/* responsive */
@media (max-width: 1000px) {
  ._grid_1ed1j_133 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  ._grid_1ed1j_133 {
    grid-template-columns: 1fr;
  }

  ._banner_1ed1j_317 {
    padding: 40px 14px 22px;
  }
}    :root {
        --blue: #2147a4;
        --blue-100: #eef3ff;
        --blue-200: #d9e6ff;
        --ink: #0b1424;
        --muted: #5f6f86;
        --bd: #e9eef8;
        --gold: #f5c659;
        --green: #16a34a;
    }

    /* soft background like the screenshot */
    ._section_6uhj4_25 {
        background:
            radial-gradient(900px 380px at 18% 82%, #fff4d8 0%, rgba(255, 244, 216, 0.4) 35%, transparent 60%),
            linear-gradient(180deg, #f7fbff 0%, #ffffff 40%, #ffffff 100%);
        padding: 18px 0 16px;
        margin: 0 auto;
    }

    ._max_6uhj4_41 {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
    }

    ._grid_6uhj4_53 {
        display: grid;
        grid-template-columns: 1.02fr 1fr;
        align-items: center;
        gap: 32px;
    }

    /* LEFT */
    ._badge_6uhj4_69 {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        border-radius: 999px;
        background: #f3f7ff;
        border: 1px solid var(--blue-200);
        color: var(--blue);
        font-weight: 800;
        font-size: 13px;
        margin-bottom: 10px;
    }

    ._title_6uhj4_97 {
        display: flex;
        flex-direction: column;
        gap: 4px;
        line-height: 1.06;
        margin: 0 0 10px;
    }

    ._black_6uhj4_113 {
        color: var(--ink);
        font-weight: 900;
        letter-spacing: -.02em;
        font-size: clamp(26px, 4.6vw, 40px);
    }

    ._blue_6uhj4_127 {
        color: var(--blue);
        font-weight: 900;
        letter-spacing: -.02em;
        font-size: clamp(26px, 4.4vw, 38px);
    }

    ._gold_6uhj4_141 {
        font-weight: 900;
        letter-spacing: -.02em;
        font-size: clamp(26px, 4.4vw, 38px);
        background: linear-gradient(180deg, #ffd98a, #f3b928);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    ._subtitle_6uhj4_161 {
        max-width: 620px;
        color: var(--muted);
        font-weight: 800;
        font-size: 14.5px;
        line-height: 1.6;
        margin-bottom: 16px;
    }

    ._actions_6uhj4_179 {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    ._btnIcon_6uhj4_191 {
        margin-right: 8px;
        transform: translateY(1px);
    }

    ._primary_6uhj4_201,
    ._ghost_6uhj4_203 {
        display: inline-flex;
        align-items: center;
        height: 42px;
        padding: 0 16px;
        border-radius: 12px;
        font-weight: 900;
        font-size: 14px;
        cursor: pointer;
    }

    ._primary_6uhj4_201 {
        background: var(--blue);
        color: #fff;
        border: 0;
        box-shadow: 0 12px 28px rgba(33, 71, 164, .20);
    }

    ._ghost_6uhj4_203 {
        background: #fff;
        color: var(--blue);
        border: 2px solid var(--blue-200);
    }

    /* RIGHT image + floating card */
    ._right_6uhj4_253 {
        position: relative;
    }

    ._photo_6uhj4_261 {
        width: min(640px, 100%);
        display: block;
        height: auto;
        border-radius: 26px;
        box-shadow: 0 30px 80px rgba(15, 23, 42, .14), 0 18px 40px rgba(15, 23, 42, .08);
        -o-object-fit: cover;
           object-fit: cover;
    }

    ._statusCard_6uhj4_279 {
        position: absolute;
        left: 18px;
        bottom: 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        background: #fff;
        border: 1px solid var(--bd);
        border-radius: 14px;
        padding: 12px 14px;
        box-shadow: 0 16px 36px rgba(15, 23, 42, .12);
    }

    ._dotWrap_6uhj4_307 {
        width: 36px;
        height: 36px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        background: #eaf9f0;
        border: 1px solid #cceedd;
        color: var(--green);
    }

    ._scText_6uhj4_329 {
        line-height: 1.05;
    }

    ._scTitle_6uhj4_337 {
        font-weight: 900;
        font-size: 14px;
        color: #0f172a;
    }

    ._scSub_6uhj4_349 {
        font-weight: 800;
        font-size: 12.5px;
        color: #6b7280;
    }

    /* responsive */
    @media (max-width: 980px) {
        ._grid_6uhj4_53 {
            grid-template-columns: 1fr;
        }

        ._right_6uhj4_253 {
            order: 2;
        }

        ._left_6uhj4_381 {
            order: 1;
        }
    }    :root {
        --ink: #0b1424;
        --muted: #667085;
        --bd: #e9eef8;
        --blue: #2147a4;

        --t-blue: #3b82f6;
        --t-blue-100: #eef3ff;
        --t-blue-200: #d9e6ff;
        --t-green: #16a34a;
        --t-green-100: #e9f9ef;
        --t-green-200: #cfeedd;
        --t-purple: #7c3aed;
        --t-purple-100: #f3e8ff;
        --t-purple-200: #eadbff;
        --t-orange: #f59e0b;
        --t-orange-100: #fff4e5;
        --t-orange-200: #ffe4c7;
    }

    /* shell */
    ._section_ztpv1_43 {
        padding: 16px 0 22px;
        background: linear-gradient(180deg, #ffffff, #fbfdff);
        margin: 4rem auto;
    }

    ._max_ztpv1_55 {
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 24px;
        text-align: center;
    }

    /* badge */
    ._badge_ztpv1_71 {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 999px;
        background: #e9f9ef;
        border: 1px solid #cfeedd;
        color: #149a4a;
        font-weight: 800;
        font-size: 13px;
        margin-bottom: 10px;
    }

    /* heading */
    ._title_ztpv1_101 {
        margin: 4px 0 6px;
        font-weight: 900;
        letter-spacing: -.02em;
        font-size: clamp(24px, 4.2vw, 36px);
    }

    ._black_ztpv1_115 {
        color: var(--ink);
    }

    ._blue_ztpv1_123 {
        color: var(--blue);
    }

    ._gold_ztpv1_131 {
        background: linear-gradient(180deg, #ffd98a, #f3b928);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    /* subtitle */
    ._subtitle_ztpv1_147 {
        color: #7b8aa0;
        font-weight: 700;
        font-size: 14px;
        margin: 0 auto 16px;
        max-width: 820px;
    }

    /* grid */
    ._grid_ztpv1_165 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        margin-top: 8px;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    /* card */
    ._card_ztpv1_187 {
        background: #fff;
        border: 1px solid var(--bd);
        border-radius: 16px;
        padding: 22px 16px 16px;
        box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
    }

    ._featured_ztpv1_203 {
        border-color: var(--t-green-200) !important;
    }

    /* icon chip */
    ._iconWrap_ztpv1_213 {
        width: 64px;
        height: 64px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        margin: 0 auto 12px;
        font-size: 26px;
        border: 1px solid var(--bd);
    }

    /* tones */
    ._blueTone_ztpv1_237 ._iconWrap_ztpv1_213 {
        background: var(--t-blue-100);
        border-color: var(--t-blue-200);
        color: var(--t-blue);
    }

    ._greenTone_ztpv1_249 ._iconWrap_ztpv1_213 {
        background: var(--t-green-100);
        border-color: var(--t-green-200);
        color: var(--t-green);
    }

    ._purpleTone_ztpv1_261 ._iconWrap_ztpv1_213 {
        background: var(--t-purple-100);
        border-color: var(--t-purple-200);
        color: var(--t-purple);
    }

    ._orangeTone_ztpv1_273 ._iconWrap_ztpv1_213 {
        background: var(--t-orange-100);
        border-color: var(--t-orange-200);
        color: var(--t-orange);
    }

    ._cardTitle_ztpv1_285 {
        font-weight: 900;
        color: var(--ink);
        font-size: 16px;
        margin-bottom: 6px;
    }

    ._cardText_ztpv1_299 {
        color: var(--muted);
        font-weight: 700;
        font-size: 13.5px;
        line-height: 1.55;
        min-height: 42px;
    }

    /* buttons */
    ._btn_ztpv1_317 {
        height: 38px;
        padding: 0 16px;
        border-radius: 10px;
        border: 2px solid;
        background: #fff;
        font-weight: 900;
        font-size: 14px;
        cursor: pointer;
        margin-top: 10px;
    }

    ._btnBlue_ztpv1_341 {
        color: var(--blue);
        border-color: var(--t-blue-200);
    }

    ._btnGreen_ztpv1_351 {
        color: var(--t-green);
        border-color: var(--t-green-200);
    }

    ._btnOrange_ztpv1_361 {
        color: var(--t-orange);
        border-color: var(--t-orange-200);
    }

    /* responsive */
    @media (max-width: 560px) {
        ._grid_ztpv1_165 {
            grid-template-columns: 1fr;
            max-width: 100%;
        }
    }:root{
  --ink:#0b1424;
  --muted:#667085;
  --bd:#e9eef8;

  --blue:#2147a4;
  --blue-100:#eef3ff;
  --blue-200:#d9e6ff;

  --purple:#7c3aed;
  --purple-100:#f3e8ff;
  --purple-200:#eadbff;
}

/* container */
._section_ctnj5_31{
  padding: 18px 0 22px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  margin: 4rem auto;
}
._max_ctnj5_41{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

/* badge */
._badge_ctnj5_57{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background: var(--purple-100);
  border:1px solid var(--purple-200);
  color: var(--purple);
  font-weight: 800;
  font-size: 13px; /* small as requested */
  margin-bottom: 10px;
}

/* title + subtitle */
._title_ctnj5_87{
  margin: 4px 0 6px;
  font-weight: 900;
  font-size: clamp(26px, 4.2vw, 40px);
  letter-spacing: -.02em;
  color: var(--ink);
}
._subtitle_ctnj5_101{
  color:#7b8aa0;
  font-weight:700;
  font-size:14px;
  margin: 0 auto 18px;
  max-width: 760px;
}

/* grid of cards */
._grid_ctnj5_119{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 6px;
}

/* card */
._card_ctnj5_135{
  text-align: left;
  background:#fff;
  border:1px solid var(--bd);
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: 0 12px 30px rgba(15,23,42,.06);
}

/* icon chip */
._icon_ctnj5_155{
  width: 40px; height: 40px;
  border-radius: 10px;
  display:grid; place-items:center;
  background: var(--blue-100);
  border:1px solid var(--blue-200);
  color: var(--blue);
  font-size: 18px;
  margin-bottom: 10px;
}

/* text */
._question_ctnj5_179{
  font-weight: 900;
  color: var(--ink);
  font-size: 16px;
  margin: 2px 0 8px;
}
._answer_ctnj5_191{
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.6;
}

/* responsive */
@media (max-width: 900px){
  ._grid_ctnj5_119{ grid-template-columns: 1fr; }
}
:root{
  --blue:#2147a4;
  --ink:#0b1424;
  --bd:#e9eef8;
}

/* outer padding to breathe */
._wrap_9ods3_15{
  padding: 6px 16px 10px;
  margin: 4rem auto;
}

/* gradient card */
._banner_9ods3_27{
  max-width: 1180px;
  margin: 0 auto;
  border-radius: 26px;
  padding: 42px 18px 26px;
  text-align: center;
  color: #fff;
  background: linear-gradient(100deg, #2147a4 0%, #6f7683 52%, #f5c659 100%);
  box-shadow:
    0 28px 90px rgba(33,71,164,.15),
    0 20px 60px rgba(245,198,89,.18);
}

/* round icon chip */
._iconChip_9ods3_55{
  width: 64px; height: 64px;
  margin: 0 auto 10px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.34);
  color: #fff;
  font-size: 26px;
}

/* text (compact) */
._title_9ods3_79{
  font-weight: 900;
  letter-spacing: -.01em;
  font-size: clamp(18px,2.3vw,22px);
  margin: 4px 0 8px;
}
._subtitle_9ods3_91{
  max-width: 880px;
  margin: 0 auto 16px;
  color: rgba(255,255,255,.95);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.55;
}

/* buttons */
._actions_9ods3_111{
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
._btnIcon_9ods3_123{ margin-right: 8px; transform: translateY(1px); }

._primary_9ods3_127, ._ghost_9ods3_127{
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  background: #fff;
}
._primary_9ods3_127{
  color: var(--blue);
  border: 1px solid var(--bd);
  box-shadow: 0 10px 26px rgba(16,24,40,.18);
}
._ghost_9ods3_127{
  color: #2b3548;
  border: 1px solid var(--bd);
  box-shadow: 0 10px 26px rgba(16,24,40,.14);
}

@media (max-width: 560px){
  ._banner_9ods3_27{ padding: 38px 14px 24px; }
}
:root {
    --ink: #0b1424;
    --muted: #667085;
    --bd: #e9eef8;
    --blue: #2147a4;

    --b-100: #eef3ff;
    --b-200: #d9e6ff;
    --g-100: #e9f9ef;
    --g-200: #cfeedd;
    --g: #16a34a;
    --p-100: #f3e8ff;
    --p-200: #eadbff;
    --p: #7c3aed;
    --o-100: #fff4e5;
    --o-200: #ffe4c7;
    --o: #f59e0b;
}

/* page shell */
._section_i37x3_41 {
    padding: 10px 0 24px;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    margin: 4rem auto;
}

._max_i37x3_53 {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* two-column layout */
._grid_i37x3_67 {
    display: grid;
    grid-template-columns: 1.02fr 1fr;
    gap: 26px;
}

/* form card */
._formCard_i37x3_81 {
    background: #fff;
    border: 1px solid var(--bd);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .06);
    padding: 18px 16px 16px;
}

._formTitle_i37x3_97 {
    font-weight: 900;
    color: var(--ink);
    font-size: 18px;
    margin: 2px 0 10px;
}

._form_i37x3_81 {
    margin-top: 4px;
}

._row2_i37x3_119 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

._field_i37x3_131 {
    margin-bottom: 12px;
}

._label_i37x3_139 {
    display: block;
    font-weight: 800;
    font-size: 12.5px;
    color: #5f6f86;
    margin-bottom: 6px;
}

._inputWrap_i37x3_155 {
    position: relative;
}

._input_i37x3_155 {
    width: 100%;
    height: 42px;
    border-radius: 10px;
    border: 1px solid var(--bd);
    background: #f9fbff;
    outline: none;
    padding: 0 40px 0 12px;
    color: #1f2937;
    font-weight: 600;
    font-size: 12px;
}

._input_i37x3_155:focus {
    border-color: var(--b-200);
    box-shadow: 0 0 0 3px #e7efff;
    background: #fff;
}

._textarea_i37x3_201 {
    height: auto;
    resize: vertical;
    padding: 10px 12px;
    line-height: 1.55;
}

._trailingIcon_i37x3_215 {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--b-100);
    color: var(--blue);
    border: 1px solid var(--b-200);
    font-size: 14px;
}

._submit_i37x3_247 {
    width: 260px;
    max-width: 100%;
    height: 40px;
    border-radius: 10px;
    background: var(--blue);
    color: #fff;
    border: none;
    font-weight: 900;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    box-shadow: 0 12px 28px rgba(33, 71, 164, .20);
    cursor: pointer;
}

._btnIcon_i37x3_285 {
    transform: translateY(1px);
}

/* right column */
._infoCol_i37x3_295 {}

._infoTitle_i37x3_299 {
    font-weight: 900;
    color: var(--ink);
    font-size: 18px;
    margin: 0 0 8px;
}

._infoIntro_i37x3_313 {
    color: #718197;
    font-weight: 700;
    font-size: 13px;
    margin: 0 0 14px;
    line-height: 1.6;
}

._infoCard_i37x3_329 {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--bd);
    border-radius: 16px;
    padding: 16px 14px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .06);
    margin-bottom: 14px;
}

._iconChip_i37x3_353 {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 22px;
    border: 1px solid var(--bd);
}

._blue_i37x3_373 {
    background: var(--b-100);
    border-color: var(--b-200);
    color: var(--blue);
}

._green_i37x3_385 {
    background: var(--g-100);
    border-color: var(--g-200);
    color: var(--g);
}

._purple_i37x3_397 {
    background: var(--p-100);
    border-color: var(--p-200);
    color: var(--p);
}

._orange_i37x3_409 {
    background: var(--o-100);
    border-color: var(--o-200);
    color: var(--o);
}

._cardHeading_i37x3_421 {
    font-weight: 900;
    color: var(--ink);
    font-size: 15px;
    margin-bottom: 4px;
}

._cardText_i37x3_435 {
    color: #475569;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.5;
}

._cardMeta_i37x3_449 {
    color: #6b7280;
    font-weight: 800;
    font-size: 12.5px;
    margin-top: 4px;
}

/* responsive */
@media (max-width: 980px) {
    ._grid_i37x3_67 {
        grid-template-columns: 1fr;
    }
}/* ===================================
   BECOME TUTOR PAGE LAYOUT SYSTEM
   Professional Spacing & Structure
   =================================== */

/* Main Page Container */
._page_1sshm_13 {
  min-height: 100%;
  background: white;
  width: 100%;
  overflow-x: hidden;
}

/* Section Wrapper - Controls ALL spacing between sections */
._sectionWrapper_1sshm_29 {
  /* Vertical Spacing */
  padding-top: clamp(80px, 10vw, 120px);
  padding-bottom: clamp(80px, 10vw, 120px);
  
  /* Horizontal Spacing */
  padding-left: clamp(20px, 5vw, 80px);
  padding-right: clamp(20px, 5vw, 80px);
  
  /* Ensures sections take full width */
  width: 100%;
  box-sizing: border-box;
}

/* Remove bottom padding from last section */
._sectionWrapper_1sshm_29:last-child {
  padding-bottom: clamp(60px, 8vw, 100px);
}

/* ===================================
   RESPONSIVE SPACING ADJUSTMENTS
   =================================== */

/* Extra Large Screens (1600px+) - Maximum breathing room */
@media (min-width: 1600px) {
  ._sectionWrapper_1sshm_29 {
    padding-top: 140px;
    padding-bottom: 140px;
    padding-left: 100px;
    padding-right: 100px;
  }
  
  ._sectionWrapper_1sshm_29:last-child {
    padding-bottom: 120px;
  }
}

/* Large Desktop (1200px - 1599px) - Generous spacing */
@media (min-width: 1200px) and (max-width: 1599px) {
  ._sectionWrapper_1sshm_29 {
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 60px;
    padding-right: 60px;
  }
  
  ._sectionWrapper_1sshm_29:last-child {
    padding-bottom: 80px;
  }
}

/* Medium Desktop (992px - 1199px) - Comfortable spacing */
@media (min-width: 992px) and (max-width: 1199px) {
  ._sectionWrapper_1sshm_29 {
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: 40px;
    padding-right: 40px;
  }
  
  ._sectionWrapper_1sshm_29:last-child {
    padding-bottom: 60px;
  }
}

/* Tablet (768px - 991px) - Balanced spacing */
@media (min-width: 768px) and (max-width: 991px) {
  ._sectionWrapper_1sshm_29 {
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  ._sectionWrapper_1sshm_29:last-child {
    padding-bottom: 50px;
  }
}

/* Small Tablet (576px - 767px) - Compact but breathable */
@media (min-width: 576px) and (max-width: 767px) {
  ._sectionWrapper_1sshm_29 {
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 24px;
    padding-right: 24px;
  }
  
  ._sectionWrapper_1sshm_29:last-child {
    padding-bottom: 40px;
  }
}

/* Mobile (320px - 575px) - Optimized for small screens */
@media (max-width: 575px) {
  ._sectionWrapper_1sshm_29 {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 16px;
    padding-right: 16px;
  }
  
  ._sectionWrapper_1sshm_29:last-child {
    padding-bottom: 32px;
  }
}

/* Ultra Small Screens (below 320px) - Minimal but functional */
@media (max-width: 319px) {
  ._sectionWrapper_1sshm_29 {
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 12px;
    padding-right: 12px;
  }
  
  ._sectionWrapper_1sshm_29:last-child {
    padding-bottom: 24px;
  }
}
/* ===== Hero Wrapper ===== */
._heroWrapper_1o69x_3 {
  width: 100%;
  padding: 40px 0 80px 0;
  background:
    radial-gradient(1200px 500px at 100% 0%, rgba(28, 68, 156, 0.08), transparent 60%),
    radial-gradient(900px 400px at 0% 80%, rgba(255, 204, 128, 0.18), transparent 55%),
    hsl(210, 40%, 98%);
}

/* ===== Hero ===== */
._hero_1o69x_3 {
  max-width: 1050px;
  margin: 0 auto;
  padding: 56px 20px 24px;
  text-align: center;
}

/* top pill */
._pill_1o69x_39 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #1c449c;
  border-radius: 999px;
  background: rgba(28, 68, 156, 0.08);
  color: #1c449c;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 20px;
}

/* Heading */
._title_1o69x_69 {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-size: clamp(24px, 4vw, 36px);
  color: #0f172a;
}

._titleLine_1o69x_91 {
  display: block;
  margin-bottom: 6px;
  font-weight: 800;
}

._titleEmphasisBlue_1o69x_103 {
  display: block;
  color: #1c449c;            /* primary blue */
  font-weight: 600;
}

._titleEmphasisGold_1o69x_115 {
  display: block;
  color: #ffcc66;            /* golden accent */
  font-weight: 600;
}

/* Subtitle paragraph */
._subtitle_1o69x_129 {
  max-width: 950px;
  margin: 16px auto 24px;
  font-size: 16px;
  line-height: 1.5;
  color: #475569;            /* slate-600 */
  font-weight: 700;
}

/* CTAs */
._ctaRow_1o69x_149 {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

._button_1o69x_165 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 0.06s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  box-shadow: 0 4px 8px rgba(28, 68, 156, 0.12);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

._button_1o69x_165:active { transform: translateY(1px); }

/* primary button */
._primary_1o69x_199 {
  background: #1c449c;
  color: #ffffff;
  border-color: rgba(28, 68, 156, 0.2);
}
._primary_1o69x_199:hover { background: #16367a; }

/* secondary (gold) */
._secondary_1o69x_215 {
  background: #f1c56b;
  color: #262626;
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 16px rgba(241, 197, 107, 0.32);
}
._secondary_1o69x_215:hover { background: #e7b959; }

/* Responsive */
@media (max-width: 900px) {
  ._ctaRow_1o69x_149 { flex-direction: column; }
}
/* ===== Stats ===== */
._statsWrap_1w2so_3 {
  max-width: 1200px;
  margin: 42px auto 120px;
  padding: 0 20px;
}

/* Hero variant - with background gradients */
._statsWrap_1w2so_3._hero_1w2so_17 {
  max-width: 1200px;
  margin: 42px auto 120px;
  padding: 0 20px;
}

._statsWrap_1w2so_3._hero_1w2so_17 ._statsCard_1w2so_29 {
  background:
    radial-gradient(1200px 600px at 10% 120%, rgba(28, 68, 156, 0.03), transparent 60%),
    radial-gradient(1200px 600px at 100% -10%, rgba(28, 68, 156, 0.05), transparent 60%),
    #ffffff;
  border: 1px solid transparent;
  border-radius: 28px;
  padding: 36px 28px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
}

/* Success Stories variant - simple white background */
._statsWrap_1w2so_3._successStories_1w2so_61 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

._statsWrap_1w2so_3._successStories_1w2so_61 ._statsCard_1w2so_29 {
  background:
    radial-gradient(1200px 600px at 10% 120%, rgba(28, 68, 156, 0.03), transparent 60%),
    radial-gradient(1200px 600px at 100% -10%, rgba(28, 68, 156, 0.05), transparent 60%),
    #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 28px;
  padding: 24px 28px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
  box-shadow: none;
  width: 100%;
}

._stat_1w2so_3 {
  text-align: center;
  padding: 10px 8px;
}

._statNumber_1w2so_119 {
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: clamp(20px, 3.5vw, 28px);
  line-height: 1.1;
}

._statBlue_1w2so_133 { color: #1c449c; }
._statGreen_1w2so_135 { color: #16a34a; }   /* green accent */
._statPurple_1w2so_137 { color: #7c3aed; }  /* purple accent */

._statLabel_1w2so_141 {
  margin-top: 6px;
  color: #6b7280;   /* gray-500/600 */
  font-size: 13px;
  font-weight: 500;
}

/* Success Stories specific label styling */
._statsWrap_1w2so_3._successStories_1w2so_61 ._statLabel_1w2so_141 {
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
}

/* Responsive */
@media (max-width: 900px) {
  ._statsCard_1w2so_29 { 
    flex-direction: row;
    gap: 10px;
    padding: 24px 16px;
  }
  ._stat_1w2so_3 {
    padding: 5px 4px;
  }
  ._statNumber_1w2so_119 {
    font-size: clamp(18px, 3vw, 24px);
  }
  ._statLabel_1w2so_141 {
    font-size: 12px;
  }
  
  ._statsWrap_1w2so_3._successStories_1w2so_61 ._statsCard_1w2so_29 {
    gap: 10px;
    padding: 16px 16px;
  }
  
  ._statsWrap_1w2so_3._successStories_1w2so_61 ._statLabel_1w2so_141 {
    font-size: 12px;
  }
}

@media (max-width: 600px) {
  ._statsCard_1w2so_29 {
    gap: 8px;
    padding: 20px 12px;
  }
  ._statNumber_1w2so_119 {
    font-size: clamp(16px, 2.5vw, 20px);
  }
  ._statLabel_1w2so_141 {
    font-size: 11px;
  }
  
  ._statsWrap_1w2so_3._successStories_1w2so_61 ._statsCard_1w2so_29 {
    gap: 8px;
    padding: 14px 12px;
  }
  
  ._statsWrap_1w2so_3._successStories_1w2so_61 ._statLabel_1w2so_141 {
    font-size: 11px;
  }
}

@media (max-width: 381px) {
  ._statsWrap_1w2so_3 {
    padding: 0;
    margin: 42px 0 120px 0;
  }
  ._statsCard_1w2so_29 {
    border-radius: 0;
    margin: 0;
    width: 100%;
    gap: 6px;
    padding: 16px 8px;
  }
  ._stat_1w2so_3 {
    flex: 1;
    padding: 4px 2px;
  }
  ._statNumber_1w2so_119 {
    font-size: clamp(14px, 2vw, 18px);
  }
  ._statLabel_1w2so_141 {
    font-size: 10px;
  }
  
  ._statsWrap_1w2so_3._successStories_1w2so_61 {
    margin: 0;
  }
  
  ._statsWrap_1w2so_3._successStories_1w2so_61 ._statsCard_1w2so_29 {
    gap: 6px;
    padding: 12px 8px;
  }
  
  ._statsWrap_1w2so_3._successStories_1w2so_61 ._statLabel_1w2so_141 {
    font-size: 10px;
  }
}
/* Most Popular Badge Section */
._popularSection_1k6iy_3 {
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: transparent;
}

._container_1k6iy_17 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* most popular pill */
._popularPill_1k6iy_39 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #f1c56b;
  border-radius: 999px;
  background: rgba(241, 197, 107, 0.08);
  color: #f1c56b;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 24px;
}

/* New Title */
._newTitle_1k6iy_69 {
  margin: 0 0 24px 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-size: clamp(24px, 4vw, 36px);
}

._newTitleBlack_1k6iy_89 {
  color: #0f172a;
}

._newTitleBlue_1k6iy_97 {
  color: #1c449c;
}

._newTitleYellow_1k6iy_105 {
  color: #ffcc66;
}

/* New Subtitle */
._newSubtitle_1k6iy_115 {
  max-width: 800px;
  margin: 0 auto 40px auto;
  font-size: 16px;
  line-height: 1.5;
  color: #475569;
  font-weight: 700;
}

/* Cards Grid */
._cardsGrid_1k6iy_135 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  width: 100%;
  margin: 60px 0 0 0;
  padding: 0;
}

/* Card Base */
._card_1k6iy_135 {
  background: white;
  border: 1px solid;
  border-radius: 12px;
  padding: 24px 20px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

._card_1k6iy_135:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

._card_1k6iy_135:hover ._cardTitle_1k6iy_187 {
  color: #1c449c;
}

/* Card Icon */
._cardIcon_1k6iy_197 {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
  border: 1px solid;
  transition: all 0.3s ease;
}

._card_1k6iy_135:hover ._cardIcon_1k6iy_197 {
  transform: scale(1.1);
}

/* Card Content */
._cardContent_1k6iy_231 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._cardTitle_1k6iy_187 {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #374151;
}

._cardSubtitle_1k6iy_261 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: #6b7280;
}

/* Card Color Variants */
._cardGreen_1k6iy_279 {
  border-color: #bbf7d0;
}

._cardGreen_1k6iy_279 ._cardIcon_1k6iy_197 {
  background-color: #f0fdf4;
  color: #16a34a;
  border-color: #bbf7d0;
}

._cardBlue_1k6iy_299 {
  border-color: #bfdbfe;
}

._cardBlue_1k6iy_299 ._cardIcon_1k6iy_197 {
  background-color: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
}

._cardPurple_1k6iy_319 {
  border-color: #d8b4fe;
}

._cardPurple_1k6iy_319 ._cardIcon_1k6iy_197 {
  background-color: #faf5ff;
  color: #7c3aed;
  border-color: #d8b4fe;
}

._cardOrange_1k6iy_339 {
  border-color: #fed7aa;
}

._cardOrange_1k6iy_339 ._cardIcon_1k6iy_197 {
  background-color: #fff7ed;
  color: #ea580c;
  border-color: #fed7aa;
}

/* Responsive Design */

/* Extra Large Screens (1600px+) */
@media (min-width: 1600px) {
  ._container_1k6iy_17 {
    max-width: 1400px;
  }
  
  ._newTitle_1k6iy_69 {
    font-size: 40px;
  }
  
  ._newSubtitle_1k6iy_115 {
    font-size: 18px;
  }
  
  ._cardsGrid_1k6iy_135 {
    gap: 36px;
  }
}

/* Large Screens (1400px - 1599px) */
@media (min-width: 1400px) and (max-width: 1599px) {
  ._container_1k6iy_17 {
    max-width: 1200px;
  }
  
  ._newTitle_1k6iy_69 {
    font-size: 38px;
  }
  
  ._newSubtitle_1k6iy_115 {
    font-size: 17px;
  }
  
  ._cardsGrid_1k6iy_135 {
    gap: 34px;
  }
}

/* Desktop (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
  ._container_1k6iy_17 {
    max-width: 1200px;
  }
  
  ._newTitle_1k6iy_69 {
    font-size: 36px;
  }
  
  ._newSubtitle_1k6iy_115 {
    font-size: 16px;
  }
  
  ._cardsGrid_1k6iy_135 {
    gap: 32px;
  }
}

/* Large Tablets (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  ._container_1k6iy_17 {
    /* Spacing controlled by page wrapper */
  }
  
  ._cardsGrid_1k6iy_135 {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
  
  ._newTitle_1k6iy_69 {
    font-size: 32px;
  }
  
  ._newSubtitle_1k6iy_115 {
    font-size: 15px;
  }
  
  ._card_1k6iy_135 {
    padding: 22px 18px;
  }
}

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  ._container_1k6iy_17 {
    /* Spacing controlled by page wrapper */
  }
  
  ._cardsGrid_1k6iy_135 {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  
  ._newTitle_1k6iy_69 {
    font-size: 28px;
  }
  
  ._newSubtitle_1k6iy_115 {
    font-size: 15px;
  }
  
  ._card_1k6iy_135 {
    padding: 20px 16px;
  }
  
  ._cardIcon_1k6iy_197 {
    width: 55px;
    height: 55px;
  }
  
  ._cardTitle_1k6iy_187 {
    font-size: 26px;
  }
}

/* Small Tablets (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  ._container_1k6iy_17 {
    /* Spacing controlled by page wrapper */
  }
  
  ._cardsGrid_1k6iy_135 {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
  
  ._newTitle_1k6iy_69 {
    font-size: 26px;
  }
  
  ._newSubtitle_1k6iy_115 {
    font-size: 14px;
  }
  
  ._card_1k6iy_135 {
    padding: 18px 14px;
  }
  
  ._cardIcon_1k6iy_197 {
    width: 52px;
    height: 52px;
  }
  
  ._cardTitle_1k6iy_187 {
    font-size: 24px;
  }
  
  ._cardSubtitle_1k6iy_261 {
    font-size: 13px;
  }
}

/* Mobile Large (480px - 575px) */
@media (min-width: 480px) and (max-width: 575px) {
  ._container_1k6iy_17 {
    /* Spacing controlled by page wrapper */
  }
  
  ._cardsGrid_1k6iy_135 {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  ._newTitle_1k6iy_69 {
    font-size: 24px;
  }
  
  ._newSubtitle_1k6iy_115 {
    font-size: 13px;
  }
  
  ._card_1k6iy_135 {
    padding: 16px 12px;
  }
  
  ._cardIcon_1k6iy_197 {
    width: 50px;
    height: 50px;
  }
  
  ._cardTitle_1k6iy_187 {
    font-size: 22px;
  }
  
  ._cardSubtitle_1k6iy_261 {
    font-size: 13px;
  }
}

/* Mobile Small (320px - 479px) */
@media (max-width: 479px) {
  ._container_1k6iy_17 {
    /* Spacing controlled by page wrapper */
  }
  
  ._cardsGrid_1k6iy_135 {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  
  ._newTitle_1k6iy_69 {
    font-size: 22px;
  }
  
  ._newSubtitle_1k6iy_115 {
    font-size: 12px;
  }
  
  ._card_1k6iy_135 {
    padding: 18px 14px;
  }
  
  ._cardIcon_1k6iy_197 {
    width: 48px;
    height: 48px;
  }
  
  ._cardTitle_1k6iy_187 {
    font-size: 22px;
  }
  
  ._cardSubtitle_1k6iy_261 {
    font-size: 13px;
  }
}

/* Ultra Small Screens (280px - 319px) */
@media (max-width: 319px) {
  ._container_1k6iy_17 {
    /* Spacing controlled by page wrapper */
  }
  
  ._cardsGrid_1k6iy_135 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  ._newTitle_1k6iy_69 {
    font-size: 20px;
  }
  
  ._newSubtitle_1k6iy_115 {
    font-size: 11px;
  }
  
  ._card_1k6iy_135 {
    padding: 16px 12px;
  }
  
  ._cardIcon_1k6iy_197 {
    width: 44px;
    height: 44px;
  }
  
  ._cardTitle_1k6iy_187 {
    font-size: 20px;
  }
  
  ._cardSubtitle_1k6iy_261 {
    font-size: 12px;
  }
}

/* Why Tutors Love Us Section */
._whyTutorsSection_c5ex9_3 {
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: transparent;
}

._container_c5ex9_17 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Top Pill/Badge */
._pill_c5ex9_39 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #1c449c;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 24px;
}

/* Main Heading */
._title_c5ex9_69 {
  margin: 0 0 24px 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-size: clamp(24px, 4vw, 36px);
}

._titleBlack_c5ex9_89 {
  color: #0f172a;
}

._titleBlue_c5ex9_97 {
  color: #1c449c;
}

._titleYellow_c5ex9_105 {
  color: #ffcc66;
}

/* Subtitle/Description */
._subtitle_c5ex9_115 {
  max-width: 800px;
  margin: 0 auto 40px auto;
  font-size: 16px;
  line-height: 1.5;
  color: #475569;
  font-weight: 700;
}

/* Cards Grid */
._cardsGrid_c5ex9_135 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

/* Card Base */
._card_c5ex9_135 {
  background: white;
  border: 1px solid;
  border-radius: 12px;
  padding: 24px 20px;
  text-align: left;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

._card_c5ex9_135:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

._card_c5ex9_135:hover ._cardTitle_c5ex9_195 {
  color: #1c449c;
}

/* Card Icon */
._cardIcon_c5ex9_205 {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

._card_c5ex9_135:hover ._cardIcon_c5ex9_205 {
  transform: scale(1.1);
}

/* Card Content */
._cardContent_c5ex9_239 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

._cardTitle_c5ex9_195 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #0f172a;
}

._cardDescription_c5ex9_271 {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: #475569;
}

/* Card Color Variants */
._cardGreen_c5ex9_289 {
  border-color: #bbf7d0;
}

._cardGreen_c5ex9_289 ._cardIcon_c5ex9_205 {
  background-color: #f0fdf4;
  color: #16a34a;
  border-color: #bbf7d0;
}

._cardBlue_c5ex9_309 {
  border-color: #bfdbfe;
}

._cardBlue_c5ex9_309 ._cardIcon_c5ex9_205 {
  background-color: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
}

._cardPurple_c5ex9_329 {
  border-color: #d8b4fe;
}

._cardPurple_c5ex9_329 ._cardIcon_c5ex9_205 {
  background-color: #faf5ff;
  color: #7c3aed;
  border-color: #d8b4fe;
}

._cardYellow_c5ex9_349 {
  border-color: #fde68a;
}

._cardYellow_c5ex9_349 ._cardIcon_c5ex9_205 {
  background-color: #fffbeb;
  color: #f59e0b;
  border-color: #fde68a;
}

._cardGrey_c5ex9_369 {
  border-color: #e2e8f0;
}

._cardGrey_c5ex9_369 ._cardIcon_c5ex9_205 {
  background-color: #f8fafc;
  color: #64748b;
  border-color: #e2e8f0;
}

._cardOrange_c5ex9_389 {
  border-color: #fed7aa;
}

._cardOrange_c5ex9_389 ._cardIcon_c5ex9_205 {
  background-color: #fff7ed;
  color: #ea580c;
  border-color: #fed7aa;
}

/* Responsive Design */

/* Extra Large Screens (1600px+) */
@media (min-width: 1600px) {
  ._container_c5ex9_17 {
    max-width: 1400px;
    padding: 0 20px;
  }
  
  ._title_c5ex9_69 {
    font-size: 40px;
  }
  
  ._subtitle_c5ex9_115 {
    font-size: 18px;
  }
  
  ._cardsGrid_c5ex9_135 {
    gap: 36px;
  }
}

/* Large Screens (1400px - 1599px) */
@media (min-width: 1400px) and (max-width: 1599px) {
  ._container_c5ex9_17 {
    max-width: 1200px;
    padding: 0 20px;
  }
  
  ._title_c5ex9_69 {
    font-size: 38px;
  }
  
  ._subtitle_c5ex9_115 {
    font-size: 17px;
  }
  
  ._cardsGrid_c5ex9_135 {
    gap: 34px;
  }
}

/* Desktop (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
  ._container_c5ex9_17 {
    max-width: 1200px;
    padding: 0 20px;
  }
  
  ._title_c5ex9_69 {
    font-size: 36px;
  }
  
  ._subtitle_c5ex9_115 {
    font-size: 16px;
  }
  
  ._cardsGrid_c5ex9_135 {
    gap: 32px;
  }
}

/* Large Tablets (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  ._container_c5ex9_17 {
    padding: 0 20px;
  }
  
  ._cardsGrid_c5ex9_135 {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
  
  ._title_c5ex9_69 {
    font-size: 32px;
  }
  
  ._subtitle_c5ex9_115 {
    font-size: 15px;
  }
  
  ._card_c5ex9_135 {
    padding: 22px 18px;
    gap: 14px;
  }
}

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  ._container_c5ex9_17 {
    padding: 0 30px;
  }
  
  ._cardsGrid_c5ex9_135 {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  
  ._title_c5ex9_69 {
    font-size: 28px;
  }
  
  ._subtitle_c5ex9_115 {
    font-size: 15px;
  }
  
  ._card_c5ex9_135 {
    padding: 20px 16px;
    gap: 12px;
  }
  
  ._cardIcon_c5ex9_205 {
    width: 44px;
    height: 44px;
  }
  
  ._cardTitle_c5ex9_195 {
    font-size: 16px;
  }
  
  ._cardDescription_c5ex9_271 {
    font-size: 14px;
  }
}

/* Small Tablets (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  ._container_c5ex9_17 {
    padding: 0 20px;
  }
  
  ._cardsGrid_c5ex9_135 {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
  
  ._title_c5ex9_69 {
    font-size: 26px;
  }
  
  ._subtitle_c5ex9_115 {
    font-size: 14px;
  }
  
  ._card_c5ex9_135 {
    padding: 18px 14px;
    gap: 11px;
  }
  
  ._cardIcon_c5ex9_205 {
    width: 42px;
    height: 42px;
  }
  
  ._cardTitle_c5ex9_195 {
    font-size: 15px;
  }
  
  ._cardDescription_c5ex9_271 {
    font-size: 13px;
  }
}

/* Mobile Large (480px - 575px) */
@media (min-width: 480px) and (max-width: 575px) {
  ._container_c5ex9_17 {
    padding: 0 15px;
  }
  
  ._cardsGrid_c5ex9_135 {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  
  ._title_c5ex9_69 {
    font-size: 24px;
  }
  
  ._subtitle_c5ex9_115 {
    font-size: 13px;
  }
  
  ._card_c5ex9_135 {
    padding: 16px 12px;
    gap: 10px;
  }
  
  ._cardIcon_c5ex9_205 {
    width: 40px;
    height: 40px;
  }
  
  ._cardTitle_c5ex9_195 {
    font-size: 15px;
  }
  
  ._cardDescription_c5ex9_271 {
    font-size: 13px;
  }
}

/* Mobile Small (320px - 479px) */
@media (max-width: 479px) {
  ._container_c5ex9_17 {
    padding: 0 10px;
  }
  
  ._cardsGrid_c5ex9_135 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  ._title_c5ex9_69 {
    font-size: 22px;
  }
  
  ._subtitle_c5ex9_115 {
    font-size: 12px;
  }
  
  ._card_c5ex9_135 {
    padding: 16px 12px;
    gap: 10px;
  }
  
  ._cardIcon_c5ex9_205 {
    width: 40px;
    height: 40px;
  }
  
  ._cardTitle_c5ex9_195 {
    font-size: 15px;
  }
  
  ._cardDescription_c5ex9_271 {
    font-size: 13px;
  }
}

/* Ultra Small Screens (280px - 319px) */
@media (max-width: 319px) {
  ._container_c5ex9_17 {
    padding: 0 5px;
  }
  
  ._cardsGrid_c5ex9_135 {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  
  ._title_c5ex9_69 {
    font-size: 20px;
  }
  
  ._subtitle_c5ex9_115 {
    font-size: 11px;
  }
  
  ._card_c5ex9_135 {
    padding: 14px 10px;
    gap: 8px;
  }
  
  ._cardIcon_c5ex9_205 {
    width: 36px;
    height: 36px;
  }
  
  ._cardTitle_c5ex9_195 {
    font-size: 14px;
  }
  
  ._cardDescription_c5ex9_271 {
    font-size: 12px;
  }
}

/* Success Stories Section */
._successStoriesSection_oxxcd_3 {
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: transparent;
}

._container_oxxcd_17 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Top Pill/Badge */
._pill_oxxcd_39 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #f1c56b;
  border-radius: 999px;
  background: rgba(241, 197, 107, 0.08);
  color: #f1c56b;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 24px;
}

/* Main Heading */
._title_oxxcd_69 {
  margin: 0 0 24px 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-size: clamp(24px, 4vw, 36px);
}

._titleBlack_oxxcd_89 {
  color: #0f172a;
}

._titleBlue_oxxcd_97 {
  color: #1c449c;
}

._titleYellow_oxxcd_105 {
  color: #f1c56b;
}

/* Subtitle */
._subtitle_oxxcd_115 {
  max-width: 800px;
  margin: 0 auto 40px auto;
  font-size: 16px;
  line-height: 1.5;
  color: #475569;
  font-weight: 700;
}

/* Testimonial Cards Grid */
._cardsGrid_oxxcd_135 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 60px auto;
  padding: 0;
}

/* Card Base */
._card_oxxcd_135 {
  background: white;
  border: 1px solid #e2e8f0;
  border-left-width: 4px;
  border-radius: 16px;
  padding: 24px 20px;
  text-align: left;
  transition: all 0.3s ease;
  position: relative;
  overflow: visible;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

._card_oxxcd_135:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

._card_oxxcd_135:hover ._cardIcon_oxxcd_193 {
  transform: scale(1.1);
}

._card_oxxcd_135:hover ._tutorName_oxxcd_201 {
  color: #1c449c;
}

/* Card Header */
._cardHeader_oxxcd_211 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  position: relative;
}

/* Card Icon */
._cardIcon_oxxcd_193 {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

/* Tutor Info */
._tutorInfo_oxxcd_255 {
  flex: 1;
}

._tutorName_oxxcd_201 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: #0f172a;
}

._tutorRole_oxxcd_279 {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #475569;
}

/* Quote Icon */
._quoteIcon_oxxcd_295 {
  position: absolute;
  top: -12px;
  right: -8px;
  font-size: 64px;
  color: #e2e8f0;
  font-family: serif;
  line-height: 1;
  z-index: 1;
  font-weight: 300;
}

/* Quote Text */
._quoteText_oxxcd_321 {
  margin: 0 0 20px 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #475569;
  position: relative;
  z-index: 2;
}

/* Separator Line */
._cardSeparator_oxxcd_343 {
  height: 1px;
  background-color: #e2e8f0;
  margin: 16px 0;
}

/* Card Footer */
._cardFooter_oxxcd_357 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

._rating_oxxcd_373, ._assignments_oxxcd_373 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #475569;
}

._ratingValue_oxxcd_389, ._assignmentsValue_oxxcd_389 {
  font-weight: 700;
}

._ratingLabel_oxxcd_397, ._assignmentsLabel_oxxcd_397 {
  font-weight: 400;
}

/* Card Color Variants */
._cardBlue_oxxcd_407 {
  border-color: #bfdbfe;
  border-left-width: 4px;
}

._cardBlue_oxxcd_407 ._cardIcon_oxxcd_193 {
  background-color: #eff6ff;
  color: #2563eb;
}

._cardGreen_oxxcd_427 {
  border-color: #bbf7d0;
  border-left-width: 4px;
}

._cardGreen_oxxcd_427 ._cardIcon_oxxcd_193 {
  background-color: #f0fdf4;
  color: #16a34a;
}

._cardPurple_oxxcd_447 {
  border-color: #d8b4fe;
  border-left-width: 4px;
}

._cardPurple_oxxcd_447 ._cardIcon_oxxcd_193 {
  background-color: #faf5ff;
  color: #7c3aed;
}

/* Responsive Design */

/* Extra Large Screens (1600px+) */
@media (min-width: 1600px) {
  ._container_oxxcd_17 {
    max-width: 1400px;
    padding: 0 20px;
  }
  
  ._title_oxxcd_69 {
    font-size: 40px;
  }
  
  ._subtitle_oxxcd_115 {
    font-size: 18px;
  }
  
  ._cardsGrid_oxxcd_135 {
    gap: 36px;
  }
}

/* Large Screens (1400px - 1599px) */
@media (min-width: 1400px) and (max-width: 1599px) {
  ._container_oxxcd_17 {
    max-width: 1200px;
    padding: 0 20px;
  }
  
  ._title_oxxcd_69 {
    font-size: 38px;
  }
  
  ._subtitle_oxxcd_115 {
    font-size: 17px;
  }
  
  ._cardsGrid_oxxcd_135 {
    gap: 34px;
  }
}

/* Desktop (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
  ._container_oxxcd_17 {
    max-width: 1200px;
    padding: 0 20px;
  }
  
  ._title_oxxcd_69 {
    font-size: 36px;
  }
  
  ._subtitle_oxxcd_115 {
    font-size: 16px;
  }
  
  ._cardsGrid_oxxcd_135 {
    gap: 32px;
  }
}

/* Large Tablets (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  ._container_oxxcd_17 {
    padding: 0 20px;
  }
  
  ._cardsGrid_oxxcd_135 {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
  
  ._title_oxxcd_69 {
    font-size: 32px;
  }
  
  ._subtitle_oxxcd_115 {
    font-size: 15px;
  }
}

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  ._container_oxxcd_17 {
    padding: 0 30px;
  }
  
  ._cardsGrid_oxxcd_135 {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  
  ._title_oxxcd_69 {
    font-size: 28px;
  }
  
  ._subtitle_oxxcd_115 {
    font-size: 15px;
  }
  
  ._card_oxxcd_135 {
    padding: 22px 18px;
  }
}

/* Small Tablets (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  ._container_oxxcd_17 {
    padding: 0 20px;
  }
  
  ._cardsGrid_oxxcd_135 {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  
  ._title_oxxcd_69 {
    font-size: 26px;
  }
  
  ._subtitle_oxxcd_115 {
    font-size: 14px;
  }
  
  ._card_oxxcd_135 {
    padding: 20px 16px;
  }
}

/* Mobile Large (480px - 575px) */
@media (min-width: 480px) and (max-width: 575px) {
  ._container_oxxcd_17 {
    padding: 0 15px;
  }
  
  ._cardsGrid_oxxcd_135 {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  ._title_oxxcd_69 {
    font-size: 24px;
  }
  
  ._subtitle_oxxcd_115 {
    font-size: 13px;
  }
  
  ._card_oxxcd_135 {
    padding: 18px 14px;
  }
  
  ._cardIcon_oxxcd_193 {
    width: 46px;
    height: 46px;
  }
  
  ._tutorName_oxxcd_201 {
    font-size: 17px;
  }
  
  ._tutorRole_oxxcd_279 {
    font-size: 13px;
  }
  
  ._quoteText_oxxcd_321 {
    font-size: 14px;
  }
  
  ._rating_oxxcd_373, ._assignments_oxxcd_373 {
    font-size: 13px;
  }
}

/* Mobile Small (320px - 479px) */
@media (max-width: 479px) {
  ._container_oxxcd_17 {
    padding: 0 10px;
  }
  
  ._cardsGrid_oxxcd_135 {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  
  ._title_oxxcd_69 {
    font-size: 22px;
  }
  
  ._subtitle_oxxcd_115 {
    font-size: 12px;
  }
  
  ._card_oxxcd_135 {
    padding: 16px 12px;
  }
  
  ._cardIcon_oxxcd_193 {
    width: 44px;
    height: 44px;
  }
  
  ._tutorName_oxxcd_201 {
    font-size: 16px;
  }
  
  ._tutorRole_oxxcd_279 {
    font-size: 13px;
  }
  
  ._quoteText_oxxcd_321 {
    font-size: 14px;
  }
  
  ._rating_oxxcd_373, ._assignments_oxxcd_373 {
    font-size: 13px;
  }
}

/* Ultra Small Screens (280px - 319px) */
@media (max-width: 319px) {
  ._container_oxxcd_17 {
    padding: 0 5px;
  }
  
  ._cardsGrid_oxxcd_135 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  ._title_oxxcd_69 {
    font-size: 20px;
  }
  
  ._subtitle_oxxcd_115 {
    font-size: 11px;
  }
  
  ._card_oxxcd_135 {
    padding: 14px 10px;
  }
  
  ._cardIcon_oxxcd_193 {
    width: 40px;
    height: 40px;
  }
  
  ._tutorName_oxxcd_201 {
    font-size: 15px;
  }
  
  ._tutorRole_oxxcd_279 {
    font-size: 12px;
  }
  
  ._quoteText_oxxcd_321 {
    font-size: 13px;
  }
  
  ._rating_oxxcd_373, ._assignments_oxxcd_373 {
    font-size: 12px;
  }
}
/* Getting Started Section */
._gettingStartedSection_1dtpp_3 {
  width: 100%;
  margin: 0;
  padding: 0;
}

._container_1dtpp_15 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

._contentWrapper_1dtpp_27 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 40px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
}

/* Top Pill/Badge */
._pill_1dtpp_51 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #f1f5f9;
  color: #2563eb;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 24px;
}

/* Main Heading */
._title_1dtpp_81 {
  margin: 0 0 24px 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-size: clamp(24px, 4vw, 36px);
}

._titleBlack_1dtpp_101 {
  color: #0f172a;
}

._titleBlue_1dtpp_109 {
  color: #1c449c;
}

._titleYellow_1dtpp_117 {
  color: #f1c56b;
}

/* Subtitle */
._subtitle_1dtpp_127 {
  max-width: 600px;
  margin: 0 auto 60px auto;
  font-size: 16px;
  line-height: 1.5;
  color: #475569;
  font-weight: 700;
}

/* Steps Container */
._stepsContainer_1dtpp_147 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 60px;
  max-width: 1200px;
  width: 100%;
}

/* Step Wrapper */
._stepWrapper_1dtpp_169 {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Step Card */
._stepCard_1dtpp_183 {
  background: white;
  border: 1px solid;
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  min-width: 280px;
  max-width: 320px;
  transition: all 0.3s ease;
}

._stepCard_1dtpp_183:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

._stepCard_1dtpp_183:hover ._stepIcon_1dtpp_219 {
  transform: scale(1.1);
}

._stepCard_1dtpp_183:hover ._stepTitle_1dtpp_227 {
  color: #1c449c;
}

/* Step Number */
._stepNumber_1dtpp_237 {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: #1c449c;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

/* Step Icon */
._stepIcon_1dtpp_219 {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px auto;
  border: 1px solid;
  transition: all 0.3s ease;
}

/* Step Title */
._stepTitle_1dtpp_227 {
  margin: 0 0 12px 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #0f172a;
}

/* Step Description */
._stepDescription_1dtpp_315 {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #6b7280;
}

/* Arrow */
._arrow_1dtpp_333 {
  color: #6b7280;
  flex-shrink: 0;
}

/* Card Color Variants */
._cardBlue_1dtpp_345 {
  border-color: #bfdbfe;
}

._cardBlue_1dtpp_345 ._stepIcon_1dtpp_219 {
  background-color: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
}

._cardGreen_1dtpp_365 {
  border-color: #bbf7d0;
}

._cardGreen_1dtpp_365 ._stepIcon_1dtpp_219 {
  background-color: #f0fdf4;
  color: #16a34a;
  border-color: #bbf7d0;
}

._cardPurple_1dtpp_385 {
  border-color: #d8b4fe;
}

._cardPurple_1dtpp_385 ._stepIcon_1dtpp_219 {
  background-color: #faf5ff;
  color: #7c3aed;
  border-color: #d8b4fe;
}

/* Footer Section */
._footer_1dtpp_407 {
  text-align: center;
  background: white;
  padding: 24px 32px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  width: 95%;
  margin: 0 auto;
}

._timeline_1dtpp_427 {
  margin: 0 0 20px 0;
  font-size: 16px;
  font-weight: 500;
  color: #475569;
}

._timelineLabel_1dtpp_441 {
  color: #0f172a;
  font-weight: 700;
}

._benefits_1dtpp_451 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

._benefit_1dtpp_451 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
}

._benefit_1dtpp_451._green_1dtpp_485 {
  color: #059669;
}

._benefit_1dtpp_451._green_1dtpp_485 svg {
  color: #059669;
}

._benefit_1dtpp_451._blue_1dtpp_501 {
  color: #2563eb;
}

._benefit_1dtpp_451._blue_1dtpp_501 svg {
  color: #2563eb;
}

._benefit_1dtpp_451._purple_1dtpp_517 {
  color: #7c3aed;
}

._benefit_1dtpp_451._purple_1dtpp_517 svg {
  color: #7c3aed;
}

/* Responsive Design */

/* Extra Large Screens (1600px+) */
@media (min-width: 1600px) {
  ._container_1dtpp_15 {
    max-width: 1400px;
    padding: 0 20px;
  }
  
  ._contentWrapper_1dtpp_27 {
    padding: 50px 50px;
  }
  
  ._title_1dtpp_81 {
    font-size: 40px;
  }
  
  ._subtitle_1dtpp_127 {
    font-size: 18px;
  }
}

/* Large Screens (1400px - 1599px) */
@media (min-width: 1400px) and (max-width: 1599px) {
  ._container_1dtpp_15 {
    max-width: 1200px;
    padding: 0 20px;
  }
  
  ._contentWrapper_1dtpp_27 {
    padding: 45px 45px;
  }
  
  ._title_1dtpp_81 {
    font-size: 38px;
  }
  
  ._subtitle_1dtpp_127 {
    font-size: 17px;
  }
}

/* Desktop (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
  ._container_1dtpp_15 {
    max-width: 1200px;
    padding: 0 20px;
  }
  
  ._contentWrapper_1dtpp_27 {
    padding: 40px 40px;
  }
  
  ._title_1dtpp_81 {
    font-size: 36px;
  }
  
  ._subtitle_1dtpp_127 {
    font-size: 16px;
  }
}

/* Large Tablets (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  ._container_1dtpp_15 {
    padding: 0 20px;
  }
  
  ._contentWrapper_1dtpp_27 {
    padding: 36px 36px;
  }
  
  ._stepsContainer_1dtpp_147 {
    flex-direction: column;
    gap: 40px;
  }
  
  ._stepWrapper_1dtpp_169 {
    flex-direction: column;
    gap: 0;
  }
  
  ._arrow_1dtpp_333 {
    transform: rotate(90deg);
  }
  
  ._stepCard_1dtpp_183 {
    min-width: 280px;
    max-width: 320px;
  }
}

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  ._container_1dtpp_15 {
    padding: 0 30px;
  }
  
  ._contentWrapper_1dtpp_27 {
    padding: 32px 30px;
  }
  
  ._stepsContainer_1dtpp_147 {
    flex-direction: column;
    gap: 36px;
  }
  
  ._stepWrapper_1dtpp_169 {
    flex-direction: column;
    gap: 0;
  }
  
  ._arrow_1dtpp_333 {
    transform: rotate(90deg);
  }
  
  ._stepCard_1dtpp_183 {
    min-width: 260px;
    max-width: 300px;
    padding: 26px 22px;
  }
  
  ._stepIcon_1dtpp_219 {
    width: 58px;
    height: 58px;
    margin-bottom: 18px;
  }
  
  ._stepTitle_1dtpp_227 {
    font-size: 19px;
  }
  
  ._stepDescription_1dtpp_315 {
    font-size: 13px;
  }
  
  ._benefits_1dtpp_451 {
    gap: 26px;
  }
}

/* Small Tablets (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  ._container_1dtpp_15 {
    padding: 0 20px;
  }
  
  ._contentWrapper_1dtpp_27 {
    padding: 28px 24px;
  }
  
  ._stepsContainer_1dtpp_147 {
    flex-direction: column;
    gap: 32px;
  }
  
  ._stepWrapper_1dtpp_169 {
    flex-direction: column;
    gap: 0;
  }
  
  ._arrow_1dtpp_333 {
    transform: rotate(90deg);
  }
  
  ._stepCard_1dtpp_183 {
    min-width: 240px;
    max-width: 280px;
    padding: 24px 20px;
  }
  
  ._stepIcon_1dtpp_219 {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
  }
  
  ._stepTitle_1dtpp_227 {
    font-size: 18px;
  }
  
  ._stepDescription_1dtpp_315 {
    font-size: 13px;
  }
  
  ._benefits_1dtpp_451 {
    gap: 24px;
  }
}

/* Mobile Large (480px - 575px) */
@media (min-width: 480px) and (max-width: 575px) {
  ._container_1dtpp_15 {
    padding: 0 15px;
  }
  
  ._contentWrapper_1dtpp_27 {
    padding: 24px 20px;
  }
  
  ._stepsContainer_1dtpp_147 {
    flex-direction: column;
    gap: 28px;
  }
  
  ._stepWrapper_1dtpp_169 {
    flex-direction: column;
    gap: 0;
  }
  
  ._arrow_1dtpp_333 {
    transform: rotate(90deg);
  }
  
  ._stepCard_1dtpp_183 {
    min-width: 220px;
    max-width: 260px;
    padding: 22px 18px;
  }
  
  ._stepIcon_1dtpp_219 {
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
  }
  
  ._stepTitle_1dtpp_227 {
    font-size: 17px;
  }
  
  ._stepDescription_1dtpp_315 {
    font-size: 12px;
  }
  
  ._benefits_1dtpp_451 {
    flex-direction: column;
    gap: 18px;
  }
  
  ._benefit_1dtpp_451 {
    font-size: 13px;
  }
}

/* Mobile Small (320px - 479px) */
@media (max-width: 479px) {
  ._container_1dtpp_15 {
    padding: 0 10px;
  }
  
  ._contentWrapper_1dtpp_27 {
    padding: 20px 16px;
  }
  
  ._stepsContainer_1dtpp_147 {
    flex-direction: column;
    gap: 24px;
  }
  
  ._stepWrapper_1dtpp_169 {
    flex-direction: column;
    gap: 0;
  }
  
  ._arrow_1dtpp_333 {
    transform: rotate(90deg);
  }
  
  ._stepCard_1dtpp_183 {
    min-width: 200px;
    max-width: 240px;
    padding: 20px 16px;
  }
  
  ._stepIcon_1dtpp_219 {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
  }
  
  ._stepTitle_1dtpp_227 {
    font-size: 16px;
  }
  
  ._stepDescription_1dtpp_315 {
    font-size: 12px;
  }
  
  ._benefits_1dtpp_451 {
    flex-direction: column;
    gap: 16px;
  }
  
  ._benefit_1dtpp_451 {
    font-size: 13px;
  }
}

/* Ultra Small Screens (280px - 319px) */
@media (max-width: 319px) {
  ._container_1dtpp_15 {
    padding: 0 5px;
  }
  
  ._contentWrapper_1dtpp_27 {
    padding: 16px 12px;
  }
  
  ._stepsContainer_1dtpp_147 {
    flex-direction: column;
    gap: 20px;
  }
  
  ._stepCard_1dtpp_183 {
    min-width: 180px;
    max-width: 220px;
    padding: 18px 14px;
  }
  
  ._stepIcon_1dtpp_219 {
    width: 44px;
    height: 44px;
    margin-bottom: 10px;
  }
  
  ._stepTitle_1dtpp_227 {
    font-size: 15px;
  }
  
  ._stepDescription_1dtpp_315 {
    font-size: 11px;
  }
  
  ._benefit_1dtpp_451 {
    font-size: 12px;
  }
}
/* In Demand Section */
._inDemandSection_1bdyw_3 {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: transparent;
}

._container_1bdyw_19 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

/* Top Pill/Badge */
._pill_1bdyw_33 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #f1f5f9;
  color: #2563eb;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 24px;
}

/* Main Title */
._title_1bdyw_63 {
  margin: 0 0 20px 0;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-size: clamp(24px, 4vw, 36px);
}

._titleBlack_1bdyw_79 {
  color: #0f172a;
}

._titleBlue_1bdyw_87 {
  color: #1c449c;
}

._titleYellow_1bdyw_95 {
  color: #f1c56b;
}

/* Subtitle */
._subtitle_1bdyw_105 {
  max-width: 600px;
  margin: 0 auto 60px auto;
  font-size: 16px;
  line-height: 1.5;
  color: #475569;
  font-weight: 700;
}

/* Subjects Grid */
._subjectsGrid_1bdyw_125 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
  width: 100%;
}

/* Subject Card */
._subjectCard_1bdyw_141 {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  text-align: left;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

/* Card Background Colors */
._bgRed_1bdyw_165 {
  background-color: #fef7f7;
}

._bgRed_1bdyw_165:hover {
  background-color: #fee2e2;
}

._bgBlue_1bdyw_181 {
  background-color: #f7faff;
}

._bgBlue_1bdyw_181:hover {
  background-color: #dbeafe;
}

._bgPurple_1bdyw_197 {
  background-color: #faf7ff;
}

._bgPurple_1bdyw_197:hover {
  background-color: #f3e8ff;
}

._bgGreen_1bdyw_213 {
  background-color: #f7fef7;
}

._bgGreen_1bdyw_213:hover {
  background-color: #dcfce7;
}

._bgPink_1bdyw_229 {
  background-color: #fef7fc;
}

._bgPink_1bdyw_229:hover {
  background-color: #fce7f3;
}

._bgDarkBlue_1bdyw_245 {
  background-color: #f7faff;
}

._bgDarkBlue_1bdyw_245:hover {
  background-color: #e0f2fe;
}

._subjectCard_1bdyw_141:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

._subjectCard_1bdyw_141:hover ._subjectIcon_1bdyw_271 {
  transform: scale(1.1);
}

._subjectCard_1bdyw_141:hover ._subjectName_1bdyw_279 {
  color: #1c449c;
}

/* Subject Icon */
._subjectIcon_1bdyw_271 {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* Subject Name */
._subjectName_1bdyw_279 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #0f172a;
}

/* Subject Topics */
._subjectTopics_1bdyw_335 {
  margin: 0 0 20px 0;
  font-size: 14px;
  color: #64748b;
  line-height: 1.4;
}

/* Card Separator */
._cardSeparator_1bdyw_351 {
  width: 100%;
  height: 1px;
  background-color: #e2e8f0;
  margin: 0 0 16px 0;
}

/* Card Footer */
._cardFooter_1bdyw_367 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
}

/* Tutor Count */
._tutorCount_1bdyw_383 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #475569;
}

/* Demand Badge */
._demandBadge_1bdyw_399 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

/* Icon Color Variants */
._iconRed_1bdyw_421 {
  color: #dc2626;
}

._iconBlue_1bdyw_429 {
  color: #2563eb;
}

._iconPurple_1bdyw_437 {
  color: #7c3aed;
}

._iconGreen_1bdyw_445 {
  color: #16a34a;
}

._iconPink_1bdyw_453 {
  color: #ec4899;
}

._iconDarkBlue_1bdyw_461 {
  color: #1e40af;
}

/* Demand Badge Color Variants */
._demandRed_1bdyw_471 {
  background-color: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

._demandOrange_1bdyw_483 {
  background-color: #fff7ed;
  color: #ea580c;
  border: 1px solid #fed7aa;
}

._demandYellow_1bdyw_495 {
  background-color: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}

/* Responsive Design */

/* Extra Large Screens (1600px+) */
@media (min-width: 1600px) {
  ._container_1bdyw_19 {
    max-width: 1400px;
    padding: 0 20px;
  }
  
  ._subjectsGrid_1bdyw_125 {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 28px;
  }
  
  ._title_1bdyw_63 {
    font-size: 40px;
  }
  
  ._subtitle_1bdyw_105 {
    font-size: 18px;
  }
}

/* Large Screens (1400px - 1599px) */
@media (min-width: 1400px) and (max-width: 1599px) {
  ._container_1bdyw_19 {
    max-width: 1200px;
    padding: 0 20px;
  }
  
  ._subjectsGrid_1bdyw_125 {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 26px;
  }
  
  ._title_1bdyw_63 {
    font-size: 38px;
  }
  
  ._subtitle_1bdyw_105 {
    font-size: 17px;
  }
}

/* Desktop (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
  ._container_1bdyw_19 {
    max-width: 1200px;
    padding: 0 20px;
  }
  
  ._subjectsGrid_1bdyw_125 {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 24px;
  }
  
  ._title_1bdyw_63 {
    font-size: 36px;
  }
  
  ._subtitle_1bdyw_105 {
    font-size: 16px;
  }
}

/* Large Tablets (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  ._container_1bdyw_19 {
    padding: 0 20px;
  }
  
  ._subjectsGrid_1bdyw_125 {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 22px;
  }
  
  ._title_1bdyw_63 {
    font-size: 32px;
  }
  
  ._subtitle_1bdyw_105 {
    font-size: 15px;
  }
}

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  ._container_1bdyw_19 {
    padding: 0 30px;
  }
  
  ._subjectsGrid_1bdyw_125 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }
  
  ._title_1bdyw_63 {
    font-size: 28px;
  }
  
  ._subtitle_1bdyw_105 {
    font-size: 15px;
  }
  
  ._subjectCard_1bdyw_141 {
    padding: 20px;
  }
  
  ._subjectName_1bdyw_279 {
    font-size: 18px;
  }
  
  ._tutorCount_1bdyw_383 {
    font-size: 14px;
  }
}

/* Small Tablets (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  ._container_1bdyw_19 {
    padding: 0 20px;
  }
  
  ._subjectsGrid_1bdyw_125 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
  }
  
  ._title_1bdyw_63 {
    font-size: 26px;
  }
  
  ._subtitle_1bdyw_105 {
    font-size: 14px;
  }
  
  ._subjectCard_1bdyw_141 {
    padding: 18px;
  }
  
  ._subjectName_1bdyw_279 {
    font-size: 17px;
  }
  
  ._tutorCount_1bdyw_383 {
    font-size: 13px;
  }
}

/* Mobile Large (480px - 575px) */
@media (min-width: 480px) and (max-width: 575px) {
  ._container_1bdyw_19 {
    padding: 0 15px;
  }
  
  ._subjectsGrid_1bdyw_125 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  ._title_1bdyw_63 {
    font-size: 24px;
  }
  
  ._subtitle_1bdyw_105 {
    font-size: 13px;
  }
  
  ._subjectCard_1bdyw_141 {
    padding: 16px;
  }
  
  ._subjectIcon_1bdyw_271 {
    width: 50px;
    height: 50px;
  }
  
  ._subjectName_1bdyw_279 {
    font-size: 16px;
  }
  
  ._subjectTopics_1bdyw_335 {
    font-size: 13px;
  }
  
  ._tutorCount_1bdyw_383 {
    font-size: 13px;
  }
  
  ._demandBadge_1bdyw_399 {
    font-size: 11px;
    padding: 3px 6px;
  }
}

/* Mobile Small (320px - 479px) */
@media (max-width: 479px) {
  ._container_1bdyw_19 {
    padding: 0 10px;
  }
  
  ._subjectsGrid_1bdyw_125 {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  
  ._title_1bdyw_63 {
    font-size: 22px;
  }
  
  ._subtitle_1bdyw_105 {
    font-size: 12px;
  }
  
  ._subjectCard_1bdyw_141 {
    padding: 14px;
  }
  
  ._subjectIcon_1bdyw_271 {
    width: 45px;
    height: 45px;
  }
  
  ._subjectName_1bdyw_279 {
    font-size: 15px;
  }
  
  ._subjectTopics_1bdyw_335 {
    font-size: 12px;
  }
  
  ._tutorCount_1bdyw_383 {
    font-size: 12px;
  }
  
  ._demandBadge_1bdyw_399 {
    font-size: 10px;
    padding: 2px 5px;
  }
}

/* Ultra Small Screens (280px - 319px) */
@media (max-width: 319px) {
  ._container_1bdyw_19 {
    padding: 0 5px;
  }
  
  ._subjectsGrid_1bdyw_125 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  ._title_1bdyw_63 {
    font-size: 20px;
  }
  
  ._subtitle_1bdyw_105 {
    font-size: 11px;
  }
  
  ._subjectCard_1bdyw_141 {
    padding: 12px;
  }
  
  ._subjectIcon_1bdyw_271 {
    width: 40px;
    height: 40px;
  }
  
  ._subjectName_1bdyw_279 {
    font-size: 14px;
  }
  
  ._subjectTopics_1bdyw_335 {
    font-size: 11px;
  }
  
  ._tutorCount_1bdyw_383 {
    font-size: 11px;
  }
  
  ._demandBadge_1bdyw_399 {
    font-size: 9px;
    padding: 2px 4px;
  }
}
/* Don't See Your Expertise Section */
._dontSeeSection_gaz32_3 {
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

._container_gaz32_19 {
  max-width: 1200px;
  width: 100%;
  padding: 0;
  display: flex;
  justify-content: center;
}

._gradientBox_gaz32_35 {
  background: linear-gradient(90deg, #4a70b8 0%, #6b8cc4 50%, #e8c77a 100%);
  border-radius: 20px;
  padding: 32px 80px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-width: 1200px;
  width: 100%;
}

._iconContainer_gaz32_55 {
  margin-bottom: 24px;
}

._iconBadge_gaz32_63 {
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
}

._title_gaz32_85 {
  margin: 0 0 20px 0;
  font-size: 32px;
  font-weight: 900;
  color: white;
  line-height: 1.2;
}

._description_gaz32_101 {
  margin: 0 0 32px 0;
  font-size: 18px;
  font-weight: 700;
  color: white;
  line-height: 1.5;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

._buttonContainer_gaz32_123 {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

._button_gaz32_123 {
  border-radius: 12px;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 180px;
  border: none;
}

._button_gaz32_123:first-child {
  background: white;
  color: #1A3B80;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

._button_gaz32_123:first-child:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

._button_gaz32_123:last-child {
  background: transparent;
  color: white;
  border: 1px solid white;
}

._button_gaz32_123:last-child:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Responsive Design */

/* Extra Large Screens (1600px+) */
@media (min-width: 1600px) {
  ._container_gaz32_19 {
    max-width: 1400px;
    padding: 0 20px;
  }
  
  ._gradientBox_gaz32_35 {
    padding: 40px 100px;
  }
  
  ._title_gaz32_85 {
    font-size: 36px;
  }
  
  ._description_gaz32_101 {
    font-size: 20px;
  }
}

/* Large Screens (1400px - 1599px) */
@media (min-width: 1400px) and (max-width: 1599px) {
  ._container_gaz32_19 {
    max-width: 1200px;
    padding: 0 20px;
  }
  
  ._gradientBox_gaz32_35 {
    padding: 38px 90px;
  }
  
  ._title_gaz32_85 {
    font-size: 34px;
  }
  
  ._description_gaz32_101 {
    font-size: 18px;
  }
}

/* Desktop (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
  ._container_gaz32_19 {
    max-width: 1200px;
    padding: 0 20px;
  }
  
  ._gradientBox_gaz32_35 {
    padding: 36px 80px;
  }
  
  ._title_gaz32_85 {
    font-size: 32px;
  }
  
  ._description_gaz32_101 {
    font-size: 17px;
  }
}

/* Large Tablets (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  ._container_gaz32_19 {
    padding: 0 20px;
  }
  
  ._gradientBox_gaz32_35 {
    padding: 36px 50px;
  }
  
  ._title_gaz32_85 {
    font-size: 28px;
  }
  
  ._description_gaz32_101 {
    font-size: 16px;
  }
}

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  ._container_gaz32_19 {
    padding: 0 30px;
  }
  
  ._gradientBox_gaz32_35 {
    padding: 32px 40px;
  }
  
  ._title_gaz32_85 {
    font-size: 26px;
  }
  
  ._description_gaz32_101 {
    font-size: 15px;
  }
  
  ._buttonContainer_gaz32_123 {
    flex-direction: column;
    gap: 12px;
  }
  
  ._button_gaz32_123 {
    width: 100%;
    min-width: auto;
  }
}

/* Small Tablets (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  ._container_gaz32_19 {
    padding: 0 20px;
  }
  
  ._gradientBox_gaz32_35 {
    padding: 30px 30px;
  }
  
  ._title_gaz32_85 {
    font-size: 24px;
  }
  
  ._description_gaz32_101 {
    font-size: 14px;
  }
  
  ._buttonContainer_gaz32_123 {
    flex-direction: column;
    gap: 10px;
  }
  
  ._button_gaz32_123 {
    width: 100%;
    min-width: auto;
  }
}

/* Mobile Large (480px - 575px) */
@media (min-width: 480px) and (max-width: 575px) {
  ._container_gaz32_19 {
    padding: 0 15px;
  }
  
  ._gradientBox_gaz32_35 {
    padding: 28px 20px;
  }
  
  ._title_gaz32_85 {
    font-size: 22px;
  }
  
  ._description_gaz32_101 {
    font-size: 13px;
  }
  
  ._buttonContainer_gaz32_123 {
    flex-direction: column;
    gap: 10px;
  }
  
  ._button_gaz32_123 {
    width: 100%;
    min-width: auto;
    font-size: 14px;
    padding: 12px 20px;
  }
  
  ._iconBadge_gaz32_63 {
    width: 50px;
    height: 50px;
  }
}

/* Legacy breakpoints for backward compatibility */
@media (max-width: 1200px) {
  ._container_gaz32_19 {
    padding: 0 20px;
  }
  
  ._gradientBox_gaz32_35 {
    padding: 36px 50px;
  }
  
  ._title_gaz32_85 {
    font-size: 28px;
  }
  
  ._description_gaz32_101 {
    font-size: 16px;
  }
}

/* Mobile Small (320px - 479px) */
@media (max-width: 479px) {
  ._container_gaz32_19 {
    padding: 0 10px;
  }
  
  ._gradientBox_gaz32_35 {
    padding: 24px 16px;
  }
  
  ._title_gaz32_85 {
    font-size: 20px;
  }
  
  ._description_gaz32_101 {
    font-size: 12px;
  }
  
  ._buttonContainer_gaz32_123 {
    flex-direction: column;
    gap: 8px;
  }
  
  ._button_gaz32_123 {
    width: 100%;
    min-width: auto;
    font-size: 13px;
    padding: 10px 16px;
  }
  
  ._iconBadge_gaz32_63 {
    width: 45px;
    height: 45px;
  }
}

/* Ultra Small Screens (280px - 319px) */
@media (max-width: 319px) {
  ._container_gaz32_19 {
    padding: 0 5px;
  }
  
  ._gradientBox_gaz32_35 {
    padding: 20px 12px;
  }
  
  ._title_gaz32_85 {
    font-size: 18px;
  }
  
  ._description_gaz32_101 {
    font-size: 11px;
  }
  
  ._button_gaz32_123 {
    font-size: 12px;
    padding: 8px 12px;
  }
  
  ._iconBadge_gaz32_63 {
    width: 40px;
    height: 40px;
  }
}
/* Ready to Start Section */
._readyToStartSection_enzx0_3 {
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

._container_enzx0_19 {
  max-width: 1200px;
  width: 100%;
  padding: 0;
  display: flex;
  justify-content: center;
}

._whiteCard_enzx0_35 {
  background: white;
  border-radius: 16px;
  padding: 48px 200px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
  max-width: 1800px;
  width: 100%;
}

._iconContainer_enzx0_55 {
  margin-bottom: 32px;
}

._iconCircle_enzx0_63 {
  width: 60px;
  height: 60px;
  background: rgba(219, 234, 254, 0.6);
  border: 1px solid #bfdbfe;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1e40af;
}

._title_enzx0_87 {
  margin: 0 0 20px 0;
  font-size: 36px;
  font-weight: 800;
  color: #1f2937;
  line-height: 1.2;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

._description_enzx0_109 {
  margin: 0 0 40px 0;
  font-size: 18px;
  font-weight: 700;
  color: #475569;
  line-height: 1.5;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

._buttonContainer_enzx0_131 {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}

._primaryButton_enzx0_147 {
  background: linear-gradient(90deg, #1e40af 0%, #3b82f6 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  justify-content: center;
}

._primaryButton_enzx0_147:hover {
  transform: scale(1.05);
}

._secondaryButton_enzx0_189 {
  background: #fbbf24;
  color: #1f2937;
  border: none;
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 180px;
  justify-content: center;
}

._secondaryButton_enzx0_189:hover {
  transform: scale(1.05);
}

._featuresList_enzx0_231 {
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: center;
}

._feature_enzx0_231 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

._featureIcon_enzx0_263 {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._feature_enzx0_231:nth-child(1) ._featureIcon_enzx0_263 {
  color: #16a34a;
}

._feature_enzx0_231:nth-child(2) ._featureIcon_enzx0_263 {
  color: #2563eb;
}

._feature_enzx0_231:nth-child(3) ._featureIcon_enzx0_263 {
  color: #7c3aed;
}

/* Responsive Design */

/* Extra Large Screens (1600px+) */
@media (min-width: 1600px) {
  ._container_enzx0_19 {
    max-width: 1400px;
    padding: 0 20px;
  }
  
  ._whiteCard_enzx0_35 {
    padding: 60px 250px;
  }
  
  ._title_enzx0_87 {
    font-size: 42px;
  }
  
  ._description_enzx0_109 {
    font-size: 20px;
  }
}

/* Large Screens (1400px - 1599px) */
@media (min-width: 1400px) and (max-width: 1599px) {
  ._container_enzx0_19 {
    max-width: 1200px;
    padding: 0 20px;
  }
  
  ._whiteCard_enzx0_35 {
    padding: 56px 220px;
  }
  
  ._title_enzx0_87 {
    font-size: 38px;
  }
  
  ._description_enzx0_109 {
    font-size: 18px;
  }
}

/* Desktop (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
  ._container_enzx0_19 {
    max-width: 1200px;
    padding: 0 20px;
  }
  
  ._whiteCard_enzx0_35 {
    padding: 52px 180px;
  }
  
  ._title_enzx0_87 {
    font-size: 34px;
  }
  
  ._description_enzx0_109 {
    font-size: 17px;
  }
}

/* Large Tablets (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  ._container_enzx0_19 {
    padding: 0 20px;
  }
  
  ._whiteCard_enzx0_35 {
    padding: 40px 50px;
  }
  
  ._title_enzx0_87 {
    font-size: 32px;
  }
  
  ._description_enzx0_109 {
    font-size: 16px;
  }
}

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  ._container_enzx0_19 {
    padding: 0 30px;
  }
  
  ._whiteCard_enzx0_35 {
    padding: 36px 40px;
  }
  
  ._title_enzx0_87 {
    font-size: 28px;
  }
  
  ._description_enzx0_109 {
    font-size: 15px;
  }
  
  ._buttonContainer_enzx0_131 {
    flex-direction: column;
    gap: 16px;
  }
  
  ._featuresList_enzx0_231 {
    flex-direction: column;
    gap: 16px;
  }
}

/* Small Tablets (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  ._container_enzx0_19 {
    padding: 0 20px;
  }
  
  ._whiteCard_enzx0_35 {
    padding: 32px 30px;
  }
  
  ._title_enzx0_87 {
    font-size: 26px;
  }
  
  ._description_enzx0_109 {
    font-size: 14px;
  }
  
  ._buttonContainer_enzx0_131 {
    flex-direction: column;
    gap: 14px;
  }
  
  ._featuresList_enzx0_231 {
    flex-direction: column;
    gap: 14px;
  }
}

/* Mobile Large (480px - 575px) */
@media (min-width: 480px) and (max-width: 575px) {
  ._container_enzx0_19 {
    padding: 0 15px;
  }
  
  ._whiteCard_enzx0_35 {
    padding: 28px 20px;
  }
  
  ._title_enzx0_87 {
    font-size: 24px;
  }
  
  ._description_enzx0_109 {
    font-size: 13px;
  }
  
  ._buttonContainer_enzx0_131 {
    flex-direction: column;
    gap: 12px;
  }
  
  ._featuresList_enzx0_231 {
    flex-direction: column;
    gap: 12px;
  }
  
  ._primaryButton_enzx0_147,
  ._secondaryButton_enzx0_189 {
    min-width: auto;
    width: 100%;
  }
}

/* Legacy breakpoints for backward compatibility */
@media (max-width: 1200px) {
  ._container_enzx0_19 {
    padding: 0 20px;
  }
  
  ._whiteCard_enzx0_35 {
    padding: 40px 50px;
  }
  
  ._title_enzx0_87 {
    font-size: 32px;
  }
  
  ._description_enzx0_109 {
    font-size: 16px;
  }
}

/* Mobile Small (320px - 479px) */
@media (max-width: 479px) {
  ._container_enzx0_19 {
    padding: 0 10px;
  }
  
  ._whiteCard_enzx0_35 {
    padding: 24px 16px;
  }
  
  ._title_enzx0_87 {
    font-size: 22px;
  }
  
  ._description_enzx0_109 {
    font-size: 13px;
  }
  
  ._iconCircle_enzx0_63 {
    width: 50px;
    height: 50px;
  }
  
  ._primaryButton_enzx0_147,
  ._secondaryButton_enzx0_189 {
    min-width: auto;
    width: 100%;
    font-size: 14px;
    padding: 6px 12px;
  }
  
  ._buttonContainer_enzx0_131 {
    flex-direction: column;
    gap: 10px;
  }
  
  ._featuresList_enzx0_231 {
    flex-direction: column;
    gap: 10px;
  }
  
  ._feature_enzx0_231 {
    font-size: 12px;
  }
}

/* Ultra Small Screens (280px - 319px) */
@media (max-width: 319px) {
  ._container_enzx0_19 {
    padding: 0 5px;
  }
  
  ._whiteCard_enzx0_35 {
    padding: 20px 12px;
  }
  
  ._title_enzx0_87 {
    font-size: 20px;
  }
  
  ._description_enzx0_109 {
    font-size: 12px;
  }
  
  ._iconCircle_enzx0_63 {
    width: 45px;
    height: 45px;
  }
  
  ._primaryButton_enzx0_147,
  ._secondaryButton_enzx0_189 {
    font-size: 13px;
    padding: 5px 10px;
  }
  
  ._feature_enzx0_231 {
    font-size: 11px;
  }
}
/* Join Our Team Section */
._joinOurTeamSection_1ywxc_3 {
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: transparent;
}

._container_1ywxc_17 {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  padding: 0;
}

/* Join Our Team Button */
._joinButton_1ywxc_33 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #f1f5f9;
  color: #2563eb;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
}

._joinButton_1ywxc_33:hover {
  transform: scale(1.05);
}

/* Main Title */
._title_1ywxc_75 {
  margin: 0 0 20px 0;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-size: clamp(24px, 4vw, 36px);
}

._titleBlack_1ywxc_91 {
  color: #0f172a;
}

._titleBlue_1ywxc_99 {
  color: #1c449c;
}

._titleYellow_1ywxc_107 {
  color: #f1c56b;
}

/* Description */
._description_1ywxc_117 {
  margin: 0 0 60px 0;
  font-size: 18px;
  font-weight: 700;
  color: #6b7280;
  line-height: 1.6;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Jobs Grid */
._jobsGrid_1ywxc_141 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Job Card */
._jobCard_1ywxc_159 {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px 20px; /* Reduced padding */
  text-align: left;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Job Card Border Colors - Match Icon Box Backgrounds */
._jobCard_1ywxc_159:nth-child(1) {
  border-color: #dbeafe; /* Blue - matches iconBlue background */
}

._jobCard_1ywxc_159:nth-child(2) {
  border-color: #dcfce7; /* Green - matches iconGreen background */
}

._jobCard_1ywxc_159:nth-child(3) {
  border-color: #e9d5ff; /* Purple - matches iconPurple background */
}

._jobCard_1ywxc_159:nth-child(4) {
  border-color: #fed7aa; /* Orange - matches iconOrange background */
}

._jobCard_1ywxc_159:nth-child(5) {
  border-color: #dbeafe; /* Blue - matches iconBlue background */
}

._jobCard_1ywxc_159:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Job Icon */
._jobIcon_1ywxc_239 {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

/* Job Title */
._jobTitle_1ywxc_261 {
  margin: 0 0 16px 0;
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.3;
}

/* Tags Container */
._tagsContainer_1ywxc_279 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

/* Department Tag */
._departmentTag_1ywxc_295 {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

._deptBlue_1ywxc_309 {
  background-color: #dbeafe;
  color: #1e40af;
}

._deptGreen_1ywxc_319 {
  background-color: #dcfce7;
  color: #16a34a;
}

._deptPurple_1ywxc_329 {
  background-color: #e9d5ff;
  color: #7c3aed;
}

._deptOrange_1ywxc_339 {
  background-color: #fed7aa;
  color: #ea580c;
}

/* Remote and Full-time Tags */
._remoteTag_1ywxc_351,
._fulltimeTag_1ywxc_353 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  background-color: #f3f4f6;
  color: #6b7280;
}

/* Job Description */
._jobDescription_1ywxc_379 {
  margin: 0 0 20px 0; /* Reduced margin */
  font-size: 14px;
  font-weight: 400;
  color: #6b7280;
  line-height: 1.5;
  flex-grow: 1; /* Allow description to grow and push button to bottom */
}

/* Apply Button */
._applyButton_1ywxc_399 {
  width: 100%;
  background: #1e40af;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px; /* Reduced padding */
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: auto; /* Push button to bottom */
}

._applyButton_1ywxc_399:hover {
  background: #1d4ed8;
  transform: scale(1.02);
}

/* Icon Color Variants */
._iconBlue_1ywxc_439 {
  color: #3b82f6;
  background-color: #dbeafe;
}

._iconGreen_1ywxc_449 {
  color: #16a34a;
  background-color: #dcfce7;
}

._iconPurple_1ywxc_459 {
  color: #7c3aed;
  background-color: #e9d5ff;
}

._iconOrange_1ywxc_469 {
  color: #ea580c;
  background-color: #fed7aa;
}

/* Responsive Design */

/* Large Tablets (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  ._container_1ywxc_17 {
    padding: 0 20px;
  }
  
  ._jobsGrid_1ywxc_141 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }
}

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  ._container_1ywxc_17 {
    padding: 0 30px;
  }
  
  ._jobsGrid_1ywxc_141 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
  }
}

/* Small Tablets (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  ._container_1ywxc_17 {
    padding: 0 20px;
  }
  
  ._jobsGrid_1ywxc_141 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Mobile Large (480px - 575px) */
@media (min-width: 480px) and (max-width: 575px) {
  ._container_1ywxc_17 {
    padding: 0 15px;
  }
  
  ._jobsGrid_1ywxc_141 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Legacy breakpoints for backward compatibility */
@media (max-width: 1200px) {
  ._container_1ywxc_17 {
    padding: 0 20px;
  }
  
  ._jobsGrid_1ywxc_141 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }
}

@media (max-width: 768px) {
  ._container_1ywxc_17 {
    padding: 0 30px;
  }
  
  ._title_1ywxc_75 {
    font-size: 36px;
  }
  
  ._description_1ywxc_117 {
    font-size: 16px;
  }
  
  ._jobsGrid_1ywxc_141 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  ._jobCard_1ywxc_159 {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  ._container_1ywxc_17 {
    padding: 0 10px;
  }
  
  ._title_1ywxc_75 {
    font-size: 28px;
  }
  
  ._description_1ywxc_117 {
    font-size: 15px;
  }
  
  ._jobCard_1ywxc_159 {
    padding: 16px;
  }
  
  ._jobTitle_1ywxc_261 {
    font-size: 18px;
  }
}

/* Ultra Small Screens (280px - 319px) */
@media (max-width: 319px) {
  ._container_1ywxc_17 {
    padding: 0 5px;
  }
  
  ._title_1ywxc_75 {
    font-size: 24px;
  }
  
  ._description_1ywxc_117 {
    font-size: 14px;
  }
  
  ._jobCard_1ywxc_159 {
    padding: 12px;
  }
  
  ._jobTitle_1ywxc_261 {
    font-size: 16px;
  }
}
/* Why Choose Us Section */
._whyChooseUsSection_1gkb8_3 {
  margin: 0;
  padding: 0;
}

._whyChooseUsContainer_1gkb8_13 {
  display: grid;
  grid-template-columns: 0.9fr 0.9fr;
  gap: 60px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

/* Left Side - Image */
._whyChooseUsImageContainer_1gkb8_33 {
  position: relative;
  width: 100%;
  margin-top: 60px;
}

._whyChooseUsImage_1gkb8_33 {
  width: 100%;
  height: 360px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 14px;
}

/* Stats Overlay */
._statsOverlay_1gkb8_61 {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: white;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  min-width: 180px;
}

._statsIcon_1gkb8_89 {
  width: 40px;
  height: 40px;
  background: #dbeafe;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b82f6;
  flex-shrink: 0;
}

._statsText_1gkb8_113 {
  display: flex;
  flex-direction: column;
  text-align: left;
}

._statsNumber_1gkb8_125 {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.2;
  text-align: left;
}

._statsSubtext_1gkb8_141 {
  font-size: 12px;
  color: #6b7280;
  font-weight: 400;
  text-align: left;
}

/* Right Side - Content */
._whyChooseUsContent_1gkb8_157 {
  padding-left: 20px;
  text-align: left;
  padding-top: 0;
}

/* Why Choose Us Button */
._whyChooseUsButton_1gkb8_171 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #f1f5f9;
  color: #2563eb;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 24px;
}

/* Main Title */
._whyChooseUsTitle_1gkb8_201 {
  font-size: 36px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 24px 0;
  line-height: 1.2;
  text-align: left;
}

._titleBlue_1gkb8_219 {
  color: #1c449c;
}

._titleHighlight_1gkb8_227 {
  color: #f1c56b;
}

/* Benefits List */
._benefitsList_1gkb8_237 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

._benefitItem_1gkb8_249 {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

._benefitIcon_1gkb8_261 {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._benefitContent_1gkb8_281 {
  flex: 1;
}

._benefitTitle_1gkb8_289 {
  font-size: 18px;
  font-weight: 900;
  color: #1f2937;
  margin: 0 0 4px 0;
  line-height: 1.3;
  text-align: left;
}

._benefitDescription_1gkb8_307 {
  font-size: 16px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
  text-align: left;
}

/* Benefit Icon Colors */
._benefitIconBlue_1gkb8_325 {
  background: #f0f9ff;
  color: #3b82f6;
  border: 1px solid #93c5fd;
}

._benefitIconGreen_1gkb8_337 {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #86efac;
}

._benefitIconPurple_1gkb8_349 {
  background: #faf5ff;
  color: #7c3aed;
  border: 1px solid #c4b5fd;
}

._benefitIconOrange_1gkb8_361 {
  background: #fff7ed;
  color: #f59e0b;
  border: 1px solid #fcd34d;
}

/* Responsive Design */

/* Extra Large Screens (1600px+) */
@media (min-width: 1600px) {
  ._whyChooseUsContainer_1gkb8_13 {
    max-width: 1400px;
    gap: 80px;
  }

  ._whyChooseUsImageContainer_1gkb8_33 {
    margin-top: 100px;
  }

  ._whyChooseUsTitle_1gkb8_201 {
    font-size: 42px;
  }

  ._benefitTitle_1gkb8_289 {
    font-size: 20px;
  }

  ._benefitDescription_1gkb8_307 {
    font-size: 18px;
  }
}

/* Large Screens (1400px - 1599px) */
@media (min-width: 1400px) and (max-width: 1599px) {
  ._whyChooseUsImageContainer_1gkb8_33 {
    margin-top: 80px;
  }

  ._whyChooseUsTitle_1gkb8_201 {
    font-size: 38px;
  }
}

/* Desktop (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
  ._whyChooseUsContainer_1gkb8_13 {
    gap: 50px;
  }

  ._whyChooseUsTitle_1gkb8_201 {
    font-size: 34px;
  }
}

/* Large Tablets (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  ._whyChooseUsContainer_1gkb8_13 {
    gap: 40px;
    padding: 0 20px;
  }

  ._whyChooseUsImageContainer_1gkb8_33 {
    margin-top: 50px;
  }

  ._whyChooseUsImage_1gkb8_33 {
    height: 320px;
  }

  ._whyChooseUsTitle_1gkb8_201 {
    font-size: 30px;
  }

  ._benefitTitle_1gkb8_289 {
    font-size: 17px;
  }

  ._benefitDescription_1gkb8_307 {
    font-size: 15px;
  }
}

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  ._whyChooseUsContainer_1gkb8_13 {
    grid-template-columns: 1fr;
    gap: 50px;
    padding: 0 30px;
  }

  ._whyChooseUsImageContainer_1gkb8_33 {
    margin-top: 0;
    order: 1;
  }

  ._whyChooseUsContent_1gkb8_157 {
    order: 2;
    padding-left: 0;
  }

  ._whyChooseUsImage_1gkb8_33 {
    height: 350px;
  }

  ._whyChooseUsTitle_1gkb8_201 {
    font-size: 28px;
    margin-bottom: 20px;
  }

  ._benefitsList_1gkb8_237 {
    gap: 22px;
  }

  ._benefitItem_1gkb8_249 {
    gap: 14px;
  }

  ._benefitIcon_1gkb8_261 {
    width: 44px;
    height: 44px;
  }

  ._benefitTitle_1gkb8_289 {
    font-size: 16px;
  }

  ._benefitDescription_1gkb8_307 {
    font-size: 15px;
  }
}

/* Small Tablets (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  ._whyChooseUsContainer_1gkb8_13 {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 20px;
  }

  ._whyChooseUsImageContainer_1gkb8_33 {
    margin-top: 0;
    order: 1;
  }

  ._whyChooseUsContent_1gkb8_157 {
    order: 2;
    padding-left: 0;
  }

  ._whyChooseUsImage_1gkb8_33 {
    height: 300px;
  }

  ._whyChooseUsTitle_1gkb8_201 {
    font-size: 26px;
    margin-bottom: 18px;
  }

  ._benefitsList_1gkb8_237 {
    gap: 20px;
  }

  ._benefitItem_1gkb8_249 {
    gap: 12px;
  }

  ._benefitIcon_1gkb8_261 {
    width: 42px;
    height: 42px;
  }

  ._benefitTitle_1gkb8_289 {
    font-size: 15px;
  }

  ._benefitDescription_1gkb8_307 {
    font-size: 14px;
  }

  ._statsOverlay_1gkb8_61 {
    bottom: 15px;
    left: 15px;
    padding: 10px 14px;
    min-width: 150px;
  }

  ._statsNumber_1gkb8_125 {
    font-size: 15px;
  }

  ._statsSubtext_1gkb8_141 {
    font-size: 11px;
  }
}

/* Mobile Large (480px - 575px) */
@media (min-width: 480px) and (max-width: 575px) {
  ._whyChooseUsContainer_1gkb8_13 {
    grid-template-columns: 1fr;
    gap: 35px;
    padding: 0 15px;
  }

  ._whyChooseUsImageContainer_1gkb8_33 {
    margin-top: 0;
    order: 1;
  }

  ._whyChooseUsContent_1gkb8_157 {
    order: 2;
    padding-left: 0;
  }

  ._whyChooseUsImage_1gkb8_33 {
    height: 280px;
  }

  ._whyChooseUsTitle_1gkb8_201 {
    font-size: 24px;
    margin-bottom: 16px;
  }

  ._benefitsList_1gkb8_237 {
    gap: 18px;
  }

  ._benefitItem_1gkb8_249 {
    gap: 10px;
  }

  ._benefitIcon_1gkb8_261 {
    width: 38px;
    height: 38px;
  }

  ._benefitTitle_1gkb8_289 {
    font-size: 14px;
  }

  ._benefitDescription_1gkb8_307 {
    font-size: 13px;
  }

  ._statsOverlay_1gkb8_61 {
    bottom: 12px;
    left: 12px;
    padding: 8px 12px;
    min-width: 140px;
  }

  ._statsIcon_1gkb8_89 {
    width: 32px;
    height: 32px;
  }

  ._statsNumber_1gkb8_125 {
    font-size: 14px;
  }

  ._statsSubtext_1gkb8_141 {
    font-size: 10px;
  }
}

/* Mobile Small (320px - 479px) */
@media (max-width: 479px) {
  ._whyChooseUsContainer_1gkb8_13 {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0 10px;
  }

  ._whyChooseUsImageContainer_1gkb8_33 {
    margin-top: 0;
    order: 1;
  }

  ._whyChooseUsContent_1gkb8_157 {
    order: 2;
    padding-left: 0;
  }

  ._whyChooseUsImage_1gkb8_33 {
    height: 250px;
  }

  ._whyChooseUsTitle_1gkb8_201 {
    font-size: 22px;
    margin-bottom: 14px;
  }

  ._benefitsList_1gkb8_237 {
    gap: 16px;
  }

  ._benefitItem_1gkb8_249 {
    gap: 8px;
  }

  ._benefitIcon_1gkb8_261 {
    width: 34px;
    height: 34px;
  }

  ._benefitTitle_1gkb8_289 {
    font-size: 13px;
  }

  ._benefitDescription_1gkb8_307 {
    font-size: 12px;
  }

  ._statsOverlay_1gkb8_61 {
    bottom: 10px;
    left: 10px;
    padding: 6px 10px;
    min-width: 120px;
  }

  ._statsIcon_1gkb8_89 {
    width: 28px;
    height: 28px;
  }

  ._statsNumber_1gkb8_125 {
    font-size: 12px;
  }

  ._statsSubtext_1gkb8_141 {
    font-size: 9px;
  }

  ._whyChooseUsButton_1gkb8_171 {
    padding: 6px 12px;
    font-size: 12px;
    margin-bottom: 16px;
  }
}

/* Ultra Small Screens (280px - 319px) */
@media (max-width: 319px) {
  ._whyChooseUsContainer_1gkb8_13 {
    padding: 0 5px;
  }

  ._whyChooseUsImageContainer_1gkb8_33 {
    order: 1;
  }

  ._whyChooseUsContent_1gkb8_157 {
    order: 2;
  }

  ._whyChooseUsImage_1gkb8_33 {
    height: 220px;
  }

  ._whyChooseUsTitle_1gkb8_201 {
    font-size: 20px;
  }

  ._benefitIcon_1gkb8_261 {
    width: 30px;
    height: 30px;
  }

  ._benefitTitle_1gkb8_289 {
    font-size: 12px;
  }

  ._benefitDescription_1gkb8_307 {
    font-size: 11px;
  }

  ._statsOverlay_1gkb8_61 {
    min-width: 100px;
    padding: 4px 8px;
  }

  ._statsIcon_1gkb8_89 {
    width: 24px;
    height: 24px;
  }

  ._statsNumber_1gkb8_125 {
    font-size: 11px;
  }

  ._statsSubtext_1gkb8_141 {
    font-size: 8px;
  }
}

/* Landscape Orientation Adjustments */
@media (max-height: 500px) and (orientation: landscape) {
  ._whyChooseUsContainer_1gkb8_13 {
    gap: 20px;
  }

  ._whyChooseUsImage_1gkb8_33 {
    height: 200px;
  }

  ._whyChooseUsTitle_1gkb8_201 {
    font-size: 24px;
    margin-bottom: 12px;
  }

  ._benefitsList_1gkb8_237 {
    gap: 12px;
  }

  ._benefitTitle_1gkb8_289 {
    font-size: 14px;
  }

  ._benefitDescription_1gkb8_307 {
    font-size: 12px;
  }
}
/* ===================================
   TUTOR FAQ SECTION
   Professional FAQ with Accordion Components
   =================================== */

._tutorFaq_8oojn_11 {
  background: white;
  width: 100%;
}

._container_8oojn_21 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header Section */
._header_8oojn_35 {
  text-align: center;
  margin-bottom: 60px;
}

._tag_8oojn_45 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #f1f5f9;
  color: #2563eb;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 24px;
}

._tagText_8oojn_73 {
  font-size: 14px;
}

._title_8oojn_81 {
  font-size: 48px;
  font-weight: 800;
  color: #111827;
  margin: 0 0 16px 0;
  line-height: 1.1;
}

._subtitle_8oojn_97 {
  font-size: 20px;
  color: #6b7280;
  font-weight: 600;
  margin: 0;
  line-height: 1.5;
  max-width: 600px;
  margin: 0 auto;
}

/* FAQ Sections */
._faqSections_8oojn_119 {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

._faqSection_8oojn_119 {
  background: white;
  border-radius: 12px;
  padding: 32px;
  border: 1px solid #e5e7eb;
}

._sectionHeader_8oojn_145 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f3f4f6;
}

._sectionIcon_8oojn_163 {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid;
  position: relative;
}

._sectionTitle_8oojn_187 {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  line-height: 1.2;
}

._accordionWrapper_8oojn_203 {
  width: 100%;
}

/* Responsive Design */
@media (max-width: 1024px) {
  ._container_8oojn_21 {
    padding: 0 16px;
  }
  
  ._faqSection_8oojn_119 {
    padding: 24px;
  }
  
  ._title_8oojn_81 {
    font-size: 40px;
  }
  
  ._subtitle_8oojn_97 {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  
  ._header_8oojn_35 {
    margin-bottom: 40px;
  }
  
  ._title_8oojn_81 {
    font-size: 32px;
  }
  
  ._subtitle_8oojn_97 {
    font-size: 16px;
  }
  
  ._faqSections_8oojn_119 {
    gap: 32px;
  }
  
  ._faqSection_8oojn_119 {
    padding: 20px;
  }
  
  ._sectionHeader_8oojn_145 {
    gap: 12px;
    margin-bottom: 20px;
  }
  
  ._sectionIcon_8oojn_163 {
    width: 36px;
    height: 36px;
  }
  
  ._iconText_8oojn_313 {
    font-size: 16px;
  }
  
  ._sectionTitle_8oojn_187 {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  
  ._container_8oojn_21 {
    padding: 0 12px;
  }
  
  ._title_8oojn_81 {
    font-size: 28px;
  }
  
  ._subtitle_8oojn_97 {
    font-size: 15px;
  }
  
  ._faqSections_8oojn_119 {
    gap: 24px;
  }
  
  ._faqSection_8oojn_119 {
    padding: 16px;
  }
  
  ._sectionHeader_8oojn_145 {
    gap: 10px;
    margin-bottom: 16px;
  }
  
  ._sectionIcon_8oojn_163 {
    width: 32px;
    height: 32px;
  }
  
  ._iconText_8oojn_313 {
    font-size: 14px;
  }
  
  ._sectionTitle_8oojn_187 {
    font-size: 18px;
  }
}
/* ===================================
   REUSABLE ACCORDION COMPONENT
   Clean, Modern FAQ Accordion
   =================================== */

._accordionContainer_rzojh_11 {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

._accordionItem_rzojh_25 {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  margin-bottom: 10px;
  background: white;
  overflow: hidden;
  transition: all 0.2s ease;
}

._accordionItem_rzojh_25:last-child {
  margin-bottom: 0;
}

._accordionButton_rzojh_51 {
  width: 100%;
  padding: 12px 16px;
  background: white;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-family: inherit;
}

._accordionButton_rzojh_51._active_rzojh_79 {
  background: #f8fafc;
  border-color: #e2e8f0;
  animation: _backgroundFadeIn_rzojh_1 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

._accordionButton_rzojh_51._closing_rzojh_91 {
  animation: _backgroundFadeOut_rzojh_1 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

._questionText_rzojh_99 {
  font-weight: 800;
  font-size: 15px;
  color: #111827;
  line-height: 1.4;
  flex: 1;
  margin-right: 12px;
}

._chevron_rzojh_117 {
  font-size: 14px;
  color: #6b7280;
  font-weight: 400;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  min-width: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  transform: scale(1);
}

._accordionButton_rzojh_51._active_rzojh_79 ._chevron_rzojh_117 {
  color: #6b7280;
  background: transparent;
  transform: scale(1.05);
}

._accordionContent_rzojh_163 {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-12px) scale(0.98);
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  animation: _accordionOpen_rzojh_1 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
  position: relative;
}

._accordionContent_rzojh_163::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #e5e7eb;
  opacity: 0;
  animation: _borderGlow_rzojh_1 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0.3s forwards;
}

._accordionContent_rzojh_163._closing_rzojh_91 {
  animation: _accordionClose_rzojh_1 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

._answerText_rzojh_219 {
  padding: 12px 16px;
  font-size: 14px;
  color: #374151;
  line-height: 1.5;
  font-weight: 600;
  background: #f8fafc;
  opacity: 0;
  transform: translateY(-8px) scale(0.95);
  animation: _textFadeIn_rzojh_1 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0.2s forwards;
  position: relative;
}

._answerText_rzojh_219::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #e5e7eb;
  opacity: 0;
  animation: _accentLine_rzojh_1 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s forwards;
}

._accordionContent_rzojh_163._closing_rzojh_91 ._answerText_rzojh_219 {
  animation: _textFadeOut_rzojh_1 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes _accordionOpen_rzojh_1 {
  0% {
    max-height: 0;
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-6px) scale(0.99);
  }
  100% {
    max-height: 500px;
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes _accordionClose_rzojh_1 {
  0% {
    max-height: 500px;
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  30% {
    opacity: 0.7;
    transform: translateY(-4px) scale(0.99);
  }
  70% {
    opacity: 0.3;
    transform: translateY(-8px) scale(0.98);
  }
  100% {
    max-height: 0;
    opacity: 0;
    transform: translateY(-12px) scale(0.95);
  }
}

@keyframes _textFadeIn_rzojh_1 {
  0% {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
  60% {
    opacity: 0.8;
    transform: translateY(-2px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes _textFadeOut_rzojh_1 {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
}

@keyframes _borderGlow_rzojh_1 {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    opacity: 0.6;
    transform: scaleX(1);
  }
}

@keyframes _accentLine_rzojh_1 {
  0% {
    opacity: 0;
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes _backgroundFadeIn_rzojh_1 {
  0% {
    background: white;
    border-color: #e5e7eb;
  }
  100% {
    background: #f8fafc;
    border-color: #e2e8f0;
  }
}

@keyframes _backgroundFadeOut_rzojh_1 {
  0% {
    background: #f8fafc;
    border-color: #e2e8f0;
  }
  100% {
    background: white;
    border-color: #e5e7eb;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  ._accordionButton_rzojh_51 {
    padding: 10px 14px;
  }
  
  ._questionText_rzojh_99 {
    font-size: 14px;
  }
  
  ._answerText_rzojh_219 {
    padding: 10px 14px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  ._accordionButton_rzojh_51 {
    padding: 8px 12px;
  }
  
  ._questionText_rzojh_99 {
    font-size: 13px;
  }
  
  ._answerText_rzojh_219 {
    padding: 8px 12px;
    font-size: 12px;
  }
}
/* ===================================
   JOIN OUR TEAM CALL TO ACTION
   Full-height section with gradient background
   =================================== */

._joinOurTeamSection_w1m8p_11 {
  min-height: 100vh;
  background: linear-gradient(135deg, #104cb2 0%, #718096 30%, #f3bf58 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  padding: 80px 0;
}

._container_w1m8p_33 {
  max-width: 1200px;
  width: 100%;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Header Area */
._header_w1m8p_59 {
  margin-bottom: 48px;
}

._iconContainer_w1m8p_67 {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 32px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

._title_w1m8p_93 {
  font-size: 36px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 24px 0;
  line-height: 1.1;
}

._description_w1m8p_109 {
  font-size: 16px;
  color: #ffffff;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
  font-weight: 600;
}

/* Call-to-Action Buttons */
._buttonContainer_w1m8p_129 {
  display: flex;
  gap: 24px;
  margin-bottom: 64px;
  flex-wrap: wrap;
  justify-content: center;
}

._primaryButton_w1m8p_145 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #ffffff;
  color: #364f6b;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


._secondaryButton_w1m8p_179 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

._secondaryButton_w1m8p_179:hover {
  background: #ffffff;
  color: #364f6b;
  transform: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

._secondaryButton_w1m8p_179 ._buttonIcon_w1m8p_223 {
  color: #ffffff;
}

._secondaryButton_w1m8p_179:hover ._buttonIcon_w1m8p_223 {
  color: #364f6b !important;
}

/* Benefit Cards Section */
._benefitCards_w1m8p_241 {
  display: flex;
  gap: 32px;
  margin-bottom: 64px;
  flex-wrap: wrap;
  justify-content: center;
}

._benefitCard_w1m8p_241 {
  background: transparent;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  max-width: 280px;
}

._benefitIcon_w1m8p_273 {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

._benefitTitle_w1m8p_299 {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px 0;
  line-height: 1.2;
}

._benefitDescription_w1m8p_315 {
  font-size: 14px;
  color: #ffffff;
  line-height: 1.5;
  margin: 0;
}

/* Footer Contact Section */
._contactSection_w1m8p_331 {
  width: 100%;
  max-width: 800px;
}

._contactContainer_w1m8p_341 {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-wrap: wrap;
  gap: 16px;
}

._contactText_w1m8p_367 {
  font-size: 16px;
  color: #ffffff;
  margin: 0;
  font-weight: 500;
}

._contactButton_w1m8p_381 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

._contactButton_w1m8p_381:hover {
  background: #ffffff;
  color: #364f6b;
  transform: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

._contactButton_w1m8p_381 ._buttonIcon_w1m8p_223 {
  color: #ffffff;
}

._contactButton_w1m8p_381:hover ._buttonIcon_w1m8p_223 {
  color: #364f6b !important;
}

/* Floating Chat Icon */
._floatingChat_w1m8p_443 {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
}

._chatIcon_w1m8p_457 {
  width: 60px;
  height: 60px;
  background: #3b82f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
}

._chatIcon_w1m8p_457:hover {
  background: #2563eb;
  transform: scale(1.05);
  box-shadow: 0 6px 25px rgba(59, 130, 246, 0.4);
}

._notificationDot_w1m8p_497 {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 12px;
  height: 12px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid white;
}

/* Responsive Design */
@media (max-width: 1024px) {
  ._joinOurTeamSection_w1m8p_11 {
    padding: 60px 0;
  }
  
  ._title_w1m8p_93 {
    font-size: 32px;
  }
  
  ._description_w1m8p_109 {
    font-size: 15px;
  }
  
  ._benefitCards_w1m8p_241 {
    gap: 24px;
  }
  
  ._benefitCard_w1m8p_241 {
    max-width: 250px;
    padding: 24px 20px;
  }
}

@media (max-width: 768px) {
  ._joinOurTeamSection_w1m8p_11 {
    padding: 40px 0;
  }
  
  ._container_w1m8p_33 {
    padding: 0 16px;
  }
  
  ._title_w1m8p_93 {
    font-size: 28px;
  }
  
  ._description_w1m8p_109 {
    font-size: 14px;
  }
  
  ._buttonContainer_w1m8p_129 {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  
  ._primaryButton_w1m8p_145,
  ._secondaryButton_w1m8p_179 {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
  
  ._benefitCards_w1m8p_241 {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  
  ._benefitCard_w1m8p_241 {
    max-width: 100%;
    width: 100%;
  }
  
  ._contactContainer_w1m8p_341 {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  
  ._contactButton_w1m8p_381 {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  ._joinOurTeamSection_w1m8p_11 {
    padding: 30px 0;
  }
  
  ._title_w1m8p_93 {
    font-size: 24px;
  }
  
  ._description_w1m8p_109 {
    font-size: 13px;
  }
  
  ._iconContainer_w1m8p_67 {
    width: 60px;
    height: 60px;
  }
  
  ._benefitCard_w1m8p_241 {
    padding: 20px 16px;
  }
  
  ._benefitTitle_w1m8p_299 {
    font-size: 14px;
  }
  
  ._benefitDescription_w1m8p_315 {
    font-size: 12px;
  }
  
  ._floatingChat_w1m8p_443 {
    bottom: 16px;
    right: 16px;
  }
  
  ._chatIcon_w1m8p_457 {
    width: 50px;
    height: 50px;
  }
}
._dropdownWrapper_13rdf_1 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._label_13rdf_15 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
}

._dropdown_13rdf_1 {
  position: relative;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
  min-height: 42px;
}

._dropdown_13rdf_1:hover:not(._disabled_13rdf_55) {
  border-color: #2563eb;
}

._dropdown_13rdf_1._open_13rdf_63 {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

._dropdown_13rdf_1._disabled_13rdf_55 {
  background: #f3f4f6;
  cursor: not-allowed;
  opacity: 0.6;
}

._selectedValue_13rdf_85 {
  flex: 1;
  font-size: 0.875rem;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._chevron_13rdf_103 {
  color: #6b7280;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 8px;
}

._chevron_13rdf_103._rotated_13rdf_117 {
  transform: rotate(180deg);
}

._optionsList_13rdf_125 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 4px;
}

._option_13rdf_125 {
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.15s ease;
  font-size: 0.875rem;
  color: #111827;
}

._option_13rdf_125:hover {
  background-color: #f3f4f6;
}

._option_13rdf_125._selected_13rdf_85 {
  background-color: #eff6ff;
  color: #2563eb;
  font-weight: 500;
}

._checkbox_13rdf_197 {
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: white;
  transition: all 0.2s ease;
}

._option_13rdf_125._selected_13rdf_85 ._checkbox_13rdf_197 {
  border-color: #2563eb;
  background-color: #2563eb;
  color: white;
}

._noOptions_13rdf_235 {
  padding: 12px;
  text-align: center;
  color: #6b7280;
  font-size: 0.875rem;
}

/* Scrollbar styling */
._optionsList_13rdf_125::-webkit-scrollbar {
  width: 6px;
}

._optionsList_13rdf_125::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

._optionsList_13rdf_125::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

._optionsList_13rdf_125::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

    ._page_1mil4_1 {
  --blue: #0b3a82;
  --blue-2: #1459cf;
  --ink: #0f172a;
  --muted: #6b7280;
  --ring: rgba(20, 89, 207, .25);

  position: relative;
  width: 100%;
  overflow-x: hidden;
  padding: 32px 16px 64px;
  text-align: center;

  /* soft radial background like the mock */
  background:
    radial-gradient(800px 400px at 25% 75%, #fff7e0 0%, rgba(255,247,224,0) 60%),
    radial-gradient(900px 520px at 85% 40%, #e9f3ff 0%, rgba(233,243,255,0) 60%),
    linear-gradient(#f9fbff, #f7fcf8);
}

/* top back row */
._topRow_1mil4_43 {
  max-width: 1100px;
  margin: 0 auto 10px;
  text-align: left;
}

._backBtn_1mil4_55 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  background: transparent;
  border: 0;
  color: #667085;
  cursor: pointer;
  font-size: 15px;
}

._backBtn_1mil4_55 svg { font-size: 18px; }

/* pill badge */
._badge_1mil4_85 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  margin-top: 10px;
  border-radius: 999px;
  background: #f3f6ff;
  border: 1px solid #e3e9ff;
  color: #203a74;
  font-weight: 600;
  font-size: 14px;
}

._badgeIcon_1mil4_113 { font-size: 18px; }

/* title */
._title_1mil4_119 {
  margin: 18px 0 8px;
  font-size: 30px;
  font-weight: 800;
  color: var(--ink);
}

._subject_1mil4_133 { color: var(--ink); }

._tutors_1mil4_137 {
  color: #1e40af;
}

/* lead */
._lead_1mil4_147 {
  max-width: 620px;
  margin: 0 auto 2px;
  color: #64748b;
  font-weight: 700;
}

/* meta line */
._meta_1mil4_163 {
  color: var(--muted);
  margin-bottom: 26px;
}

._dot_1mil4_173 {
  padding: 0 10px;
  font-size: 18px;
  line-height: 0;
  color: #a0a3ab;
}

/* search bar */
._searchBar_1mil4_189 {
  max-width: 1150px;
  margin: 56px auto 0;
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.04);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

._searchInputWrapper_1mil4_215 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f3f4f6;
  border-radius: 10px;
  padding: 0 16px;
  height: 36px;
}

._searchIcon_1mil4_237 {
  color: #4b5563;
  font-size: 20px;
  flex-shrink: 0;
}

._searchInput_1mil4_215 {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: #0f172a;
  min-width: 0;
}

._searchInput_1mil4_215::-moz-placeholder {
  color: #6b7280;
}

._searchInput_1mil4_215::placeholder {
  color: #6b7280;
}

._searchBtn_1mil4_277 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  height: 36px;
  background: var(--blue-2);
  border: 1.5px solid var(--blue-2);
  color: #ffffff;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

._searchBtn_1mil4_277:hover {
  background: #0b3a82;
  box-shadow: 0 0 0 4px var(--ring);
}

._searchBtn_1mil4_277:active {
  background: #0a2f6b;
}

._filterBtn_1mil4_331 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  height: 36px;
  background: #fff;
  border: 1.5px solid var(--blue-2);
  color: var(--blue-2);
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

._filterBtn_1mil4_331:hover {
  box-shadow: 0 0 0 4px var(--ring);
}

._filterBadge_1mil4_375 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #ef4444;
  color: white;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
}

._searchForm_1mil4_405 {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* Filter Sidebar */
._overlay_1mil4_421 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 999;
  animation: _fadeIn_1mil4_1 0.3s ease;
}

@keyframes _fadeIn_1mil4_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

._filterPanel_1mil4_461 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 90vw;
  background-color: #f9fafb;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  box-shadow: -1px 0 4px rgba(0, 0, 0, 0.03);
  animation: _slideIn_1mil4_1 0.3s ease;
  overflow: hidden;
}

@keyframes _slideIn_1mil4_1 {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

._panelClosing_1mil4_511 {
  animation: _slideOut_1mil4_1 0.3s ease;
}

@keyframes _slideOut_1mil4_1 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

._filterHeader_1mil4_537 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 20px 16px 20px;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

._filterHeaderLeft_1mil4_555 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

._filterHeaderIcon_1mil4_567 {
  color: #2563eb;
  flex-shrink: 0;
  margin-top: 2px;
}

._filterHeaderContent_1mil4_579 {
  flex: 1;
}

._filterTitle_1mil4_587 {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 4px 0;
  line-height: 1.2;
}

._filterSubtitle_1mil4_603 {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}

._filterCloseButton_1mil4_617 {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
  transition: all 0.2s ease;
  padding: 0;
}

._filterCloseButton_1mil4_617:hover {
  background-color: #f3f4f6;
  color: #6b7280;
}

._filterCloseButton_1mil4_617:active {
  background-color: #e5e7eb;
}

._filterContent_1mil4_667 {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._filterCard_1mil4_685 {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid #e5e7eb;
}

._filterCardHeader_1mil4_701 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  margin-left: -16px;
  margin-right: -16px;
  margin-top: -16px;
  padding: 16px 16px;
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 12px 12px 0 0;
}

._filterIcon_1mil4_729 {
  color: #2563eb;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background-color: #eff6ff;
  border-radius: 6px;
}

._filterCardTitle_1mil4_753 {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

._filterCardBody_1mil4_767 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._filterRangeGroup_1mil4_779 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._filterFooter_1mil4_791 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background-color: #ffffff;
  border-top: 1px solid #f3f4f6;
}

._filterResetButton_1mil4_809 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background-color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
  justify-content: center;
}

._filterResetButton_1mil4_809:hover {
  background-color: #f9fafb;
  border-color: #d1d5db;
}

._filterResetButton_1mil4_809:active {
  background-color: #f3f4f6;
}

._filterResetButton_1mil4_809 svg {
  flex-shrink: 0;
}

._filterApplyButton_1mil4_869 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  background-color: #2563eb;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
}

._filterApplyButton_1mil4_869:hover {
  background-color: #1d4ed8;
  box-shadow: 0 4px 6px -2px rgba(37, 99, 235, 0.4);
}

._filterApplyButton_1mil4_869:active {
  background-color: #1e40af;
}

._filterApplyButton_1mil4_869:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

._pagination_1mil4_929 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding: 20px;
}

._pageBtn_1mil4_947 {
  padding: 8px 16px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  color: #374151;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

._pageBtn_1mil4_947:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: var(--blue-2);
}

._pageBtn_1mil4_947:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._pageInfo_1mil4_989 {
  color: var(--muted);
  font-size: 0.875rem;
}

._emptyState_1mil4_999 {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}

._listContainer_1mil4_1011 {
  width: 100%;
  padding: 32px 16px 96px;
  background:
    radial-gradient(900px 450px at 15% 20%, #fff7e0 0%, rgba(255,247,224,0) 60%),
    radial-gradient(900px 520px at 85% 70%, #e9f3ff 0%, rgba(233,243,255,0) 60%),
    linear-gradient(#f7fcf8, #f9fbff);
}

._skeletonContainer_1mil4_1029 {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* responsive */
@media (max-width: 640px) {
  ._lead_1mil4_147, ._meta_1mil4_163 { padding: 0 8px; }
  ._searchBar_1mil4_189 {
    padding: 20px;
    background: #fff;
  }
  ._searchForm_1mil4_405 {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  ._searchInputWrapper_1mil4_215 {
    width: 100%;
    background: #f3f4f6;
    border-radius: 10px;
    padding: 10px 16px;
    height: auto;
    min-height: 44px;
  }
  
  ._searchInput_1mil4_215 {
    padding: 0;
  }
  ._searchBtn_1mil4_277,
  ._filterBtn_1mil4_331 {
    width: 100%;
    height: 36px;
    border-radius: 10px;
    justify-content: center;
  }

  ._filterPanel_1mil4_461 {
    width: 100vw;
    max-width: 100vw;
  }

  ._filterHeader_1mil4_537 {
    padding: 16px;
  }

  ._filterContent_1mil4_667 {
    padding: 16px;
  }

  ._filterCard_1mil4_685 {
    padding: 14px;
  }

  ._filterFooter_1mil4_791 {
    padding: 14px 16px;
    flex-direction: column;
  }

  ._filterResetButton_1mil4_809,
  ._filterApplyButton_1mil4_869 {
    width: 100%;
  }
}
/* ===== LAYOUT ===== */
._layout_1iueh_3 {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
  position: relative;
}


._tutorStack_1iueh_27 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
}

/* ===== CARD CONTAINER ===== */
._card_1iueh_43 {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: visible;
  transition: all 0.3s ease;
  border: 1px solid #f3f4f6;
  height: 320px;
  position: relative;
  z-index: 1;
}

._card_1iueh_43:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: #e5e7eb;
}

._cardActive_1iueh_77 {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

._cardContent_1iueh_85 {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: visible;
}

/* ===== LEFT COLUMN - PORTRAIT IMAGE ===== */
._portraitColumn_1iueh_101 {
  width: 33.333%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  align-self: stretch;
  display: flex;
  z-index: 1;
}

._portraitImageWrapper_1iueh_121 {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
}

._portraitImage_1iueh_121 {
  width: 100%;
  height: 100%;
  min-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transition: transform 0.7s ease;
  flex: 1;
}

._card_1iueh_43:hover ._portraitImage_1iueh_121 {
  transform: scale(1.05);
}

/* Available Now Badge */
._availableBadge_1iueh_165 {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(34, 197, 94, 0.9);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

._pulseDot_1iueh_199 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  animation: _pulse_1iueh_199 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

/* Mobile Overlay (hidden on desktop) */
._mobileOverlay_1iueh_235 {
  display: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2) 50%, transparent);
}

._mobileNameOverlay_1iueh_249 {
  display: none;
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  color: #ffffff;
}

._mobileNameRow_1iueh_267 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._mobileNameOverlay_1iueh_249 h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 4px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  flex: 1;
}

._mobileNameOverlay_1iueh_249 p {
  font-size: 14px;
  color: #f3f4f6;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

._mobileInfoIconButton_1iueh_309 {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
  color: #ffffff;
  flex-shrink: 0;
}

._mobileInfoIconButton_1iueh_309:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

._mobileInfoIconButton_1iueh_309:active {
  background: rgba(255, 255, 255, 0.4);
}

._mobileInfoIcon_1iueh_309 {
  width: 18px;
  height: 18px;
}

/* ===== RIGHT COLUMN - CONTENT AREA ===== */
._contentArea_1iueh_369 {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 28px;
  position: relative;
}

/* ===== HEADER SECTION ===== */
._headerSection_1iueh_387 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

._desktopNameBlock_1iueh_403 {
  flex: 1;
}

._nameRow_1iueh_411 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._desktopNameBlock_1iueh_403 h2 {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 4px 0;
  letter-spacing: -0.02em;
}

._infoIconButton_1iueh_439 {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
  color: #6b7280;
}

._infoIconButton_1iueh_439:hover {
  background: #f3f4f6;
  color: #2563eb;
}

._infoIconButton_1iueh_439:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

._infoIcon_1iueh_439 {
  width: 18px;
  height: 18px;
}

._locationMeta_1iueh_495 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #6b7280;
  margin-top: 4px;
}

._locationIcon_1iueh_513 {
  width: 14px;
  height: 14px;
}

._dividerDot_1iueh_523 {
  width: 4px;
  height: 4px;
  background: #d1d5db;
  border-radius: 50%;
  margin: 0 4px;
}

._topRatedBadge_1iueh_539 {
  color: #2563eb;
  font-weight: 500;
}

._mobileLocationMeta_1iueh_549 {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
  margin-top: 8px;
}

._locationIconSmall_1iueh_567 {
  width: 12px;
  height: 12px;
}

._topRatedBadgeMobile_1iueh_577 {
  color: #2563eb;
  font-weight: 500;
}

/* ===== RATE SECTION ===== */
._rateSection_1iueh_589 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

._rateDisplay_1iueh_601 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._priceTag_1iueh_613 {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

._priceAmount_1iueh_625 {
  font-size: 30px;
  font-weight: 700;
  color: #1e40af;
}

._priceLabel_1iueh_637 {
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
}

._ratingBadge_1iueh_649 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

._ratingStarIcon_1iueh_663 {
  width: 14px;
  height: 14px;
  color: #f59e0b;
  fill: #f59e0b;
}

._ratingScore_1iueh_677 {
  font-weight: 700;
  color: #374151;
}

._ratingCount_1iueh_687 {
  color: #9ca3af;
}

/* ===== BIO SECTION ===== */
._bioText_1iueh_697 {
  color: #6b7280;
  line-height: 1.6;
  font-size: 14px;
  margin: 0 0 16px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== TAGS SECTION ===== */
._tagsSection_1iueh_721 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

._tagItem_1iueh_735 {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 9999px;
  border: 1px solid;
}

._tagColor0_1iueh_751 {
  background: #eff6ff;
  color: #1e40af;
  border-color: #bfdbfe;
}

._tagColor1_1iueh_763 {
  background: #eef2ff;
  color: #4f46e5;
  border-color: #c7d2fe;
}

._tagColor2_1iueh_775 {
  background: #d1fae5;
  color: #047857;
  border-color: #6ee7b7;
}

._tagGray_1iueh_787 {
  background: #f9fafb;
  color: #6b7280;
  border-color: #e5e7eb;
}

/* ===== FOOTER SECTION ===== */
._footerSection_1iueh_801 {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid #f3f4f6;
  overflow: visible;
  position: relative;
  z-index: 10;
}

/* Action Row - Info Items + Book Button */
._actionRow_1iueh_821 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  overflow: visible;
  position: relative;
}

._infoItemWrapper_1iueh_841 {
  position: relative;
  z-index: 10;
}

._infoItem_1iueh_841 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #6b7280;
}

._clickableInfoItem_1iueh_867 {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

._infoIcon_1iueh_439 {
  width: 16px;
  height: 16px;
  color: #9ca3af;
}

._availabilityDropdown_1iueh_889 {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border: 1px solid #f3f4f6;
  z-index: 1000;
  min-width: 350px;
  max-width: 400px;
  animation: _slideUp_1iueh_1 0.2s ease;
  overflow: hidden;
}

._availabilityTable_1iueh_919 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

._availabilityTable_1iueh_919 thead {
  background: #f9fafb;
  border-bottom: 2px solid #e5e7eb;
}

._availabilityTable_1iueh_919 th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: #374151;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._availabilityTable_1iueh_919 tbody tr {
  border-bottom: 1px solid #f3f4f6;
}

._availabilityTable_1iueh_919 tbody tr:last-child {
  border-bottom: none;
}

._availabilityTable_1iueh_919 td {
  padding: 12px 16px;
  color: #6b7280;
  vertical-align: top;
}

._availabilityTable_1iueh_919 td:first-child {
  font-weight: 600;
  color: #111827;
}

._statusEnabled_1iueh_999 {
  color: #059669;
  font-weight: 600;
}

._statusDisabled_1iueh_1009 {
  color: #dc2626;
  font-weight: 600;
}

/* Booking Button */
._bookButton_1iueh_1021 {
  padding: 12px 24px;
  background: #2563eb;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  white-space: nowrap;
}

._bookButton_1iueh_1021:hover {
  background: #1d4ed8;
}

._bookButton_1iueh_1021:active {
  transform: scale(0.98);
}

._buttonIcon_1iueh_1075 {
  width: 16px;
  height: 16px;
}

._chevronIcon_1iueh_1085 {
  width: 14px;
  height: 14px;
  opacity: 0.7;
  transition: transform 0.3s ease;
}

._chevronRotated_1iueh_1099 {
  transform: rotate(180deg);
}

/* Dropdown Menu */
._dropdownMenu_1iueh_1109 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border: 1px solid #f3f4f6;
  z-index: 50;
  padding: 6px;
  opacity: 1;
  animation: _slideUp_1iueh_1 0.2s ease;
}

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

._dropdownHeader_1iueh_1161 {
  font-size: 10px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 12px;
}

._dropdownLoading_1iueh_1179 {
  padding: 12px;
  text-align: center;
  color: #6b7280;
  font-size: 13px;
  font-style: italic;
}

._dropdownOption_1iueh_1195 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
  min-height: 44px;
  text-align: left;
}

._dropdownOption_1iueh_1195:hover {
  background: #eff6ff;
}

._dropdownOptionHighlight_1iueh_1233 {
  background: rgba(249, 250, 251, 0.5);
}

._optionInfo_1iueh_1241 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._optionTitle_1iueh_1253 {
  font-weight: 600;
  color: #111827;
  font-size: 14px;
}

._optionSubtitle_1iueh_1265 {
  font-size: 12px;
  color: #6b7280;
}

._optionPrice_1iueh_1275 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

._optionAmount_1iueh_1289 {
  font-weight: 700;
  color: #2563eb;
  font-size: 16px;
}

._optionCurrency_1iueh_1301 {
  font-size: 10px;
  color: #9ca3af;
}

._optionDiscount_1iueh_1311 {
  font-size: 10px;
  color: #10b981;
  font-weight: 600;
}

/* ===== VIDEO CARD ===== */
._videoCard_1iueh_1325 {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid #f1f3f5;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  position: sticky;
  top: 180px;
  pointer-events: auto;
  transition: all 0.3s ease;
  width: 320px;
  flex-shrink: 0;
  align-self: start;
  z-index: 10;
}

._videoCardAbsolute_1iueh_1357 {
  position: absolute !important;
  margin-top: 0 !important;
}

._videoCard_1iueh_1325:hover {
  transform: translateY(-4px);
}

/* Empty state (when no video) */
._videoIcon_1iueh_1377 {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: #f1f5ff;
  color: #1b3fb8;
  border: 1px solid #d1d9f7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 32px auto 16px;
}

._videoCard_1iueh_1325 h4 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: #0c142f;
  padding: 0 26px;
  text-align: center;
}

._videoCard_1iueh_1325 p {
  margin: 0 0 32px;
  color: #54607f;
  line-height: 1.6;
  padding: 0 26px;
  text-align: center;
}

/* Video preview container */
._videoPreview_1iueh_1439 {
  width: 100%;
  position: relative;
  pointer-events: auto;
}

/* Header Section: Instructor Name */
._videoHeader_1iueh_1453 {
  padding: 0px 4px 0px;
  text-align: center;
}

._instructorName_1iueh_1463 {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin: 12px 0;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

._videoCard_1iueh_1325 ._instructorTitle_1iueh_1481 {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

/* Video wrapper - full width */
._videoWrapper_1iueh_1505 {
  position: relative;
  width: 100%;
}

/* VideoPlayer component handles its own aspect ratio and rendering */

._emptyState_1iueh_1519 {
  text-align: center;
  padding: 40px 20px;
  color: #6b7280;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Hide video card on smaller screens */
@media (max-width: 1100px) {
  ._layout_1iueh_3 {
    grid-template-columns: 1fr;
  }

  ._videoCard_1iueh_1325 {
    display: none;
  }
}

/* Tablet and Mobile */
@media (max-width: 768px) {
  ._card_1iueh_43 {
    border-radius: 12px;
    height: auto;
    min-height: 500px;
  }

  ._cardContent_1iueh_85 {
    flex-direction: column;
  }

  /* Portrait column becomes smaller on mobile */
  ._portraitColumn_1iueh_101 {
    width: 100%;
    height: 384px;
  }

  ._portraitImageWrapper_1iueh_121 {
    height: 100%;
  }

  /* Show mobile overlays */
  ._mobileOverlay_1iueh_235 {
    display: block;
  }

  ._mobileNameOverlay_1iueh_249 {
    display: block;
  }

  /* Hide desktop name block on mobile */
  ._desktopNameBlock_1iueh_403 {
    display: none;
  }

  /* Show mobile location meta */
  ._mobileLocationMeta_1iueh_549 {
    display: flex;
  }

  /* Adjust content area padding */
  ._contentArea_1iueh_369 {
    padding: 16px 20px;
  }

  /* Rate section mobile adjustments */
  ._headerSection_1iueh_387 {
    align-items: stretch;
    gap: 0;
  }

  ._rateSection_1iueh_589 {
    align-items: stretch;
  }

  ._rateDisplay_1iueh_601 {
    justify-content: space-between;
    width: 100%;
  }

  ._priceAmount_1iueh_625 {
    font-size: 28px;
  }

  /* Bio text clamp adjustment */
  ._bioText_1iueh_697 {
    -webkit-line-clamp: 3;
    font-size: 14px;
  }

  /* Action row on mobile - stack items vertically */
  ._actionRow_1iueh_821 {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  ._infoItem_1iueh_841 {
    font-size: 12px;
  }

  ._bookButton_1iueh_1021 {
    width: 100%;
  }

  /* Dropdown menu full width on mobile */
  ._dropdownMenu_1iueh_1109 {
    left: 0;
    right: 0;
  }

  /* Availability dropdown responsive */
  ._availabilityDropdown_1iueh_889 {
    min-width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
  }

  ._availabilityTable_1iueh_919 {
    font-size: 11px;
  }

  ._availabilityTable_1iueh_919 th,
  ._availabilityTable_1iueh_919 td {
    padding: 8px 12px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  ._card_1iueh_43 {
    min-height: 450px;
  }
  
  ._portraitColumn_1iueh_101 {
    height: 320px;
  }

  ._contentArea_1iueh_369 {
    padding: 16px;
  }

  ._priceAmount_1iueh_625 {
    font-size: 24px;
  }

  ._bioText_1iueh_697 {
    font-size: 13px;
  }

  ._infoItem_1iueh_841 {
    font-size: 11px;
  }

  ._bookButton_1iueh_1021 {
    padding: 12px 16px;
    font-size: 13px;
  }

  ._availabilityDropdown_1iueh_889 {
    min-width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
  }

  ._availabilityTable_1iueh_919 {
    font-size: 10px;
  }

  ._availabilityTable_1iueh_919 th,
  ._availabilityTable_1iueh_919 td {
    padding: 6px 8px;
  }

  ._availabilityTable_1iueh_919 th {
    font-size: 10px;
  }
}

/* ========================================
   Skeleton Loading Styles
   ======================================== */

/* Shimmer Animation */
@keyframes _skeletonShimmer_1iueh_1 {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Portrait Column Skeleton */
._skeletonPortraitImage_1iueh_1907 {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_1iueh_1 1.5s ease-in-out infinite;
}

._skeletonAvailableBadge_1iueh_1925 {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 120px;
  height: 28px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_1iueh_1 1.5s ease-in-out infinite;
  border-radius: 20px;
  z-index: 2;
}

/* Mobile Name Overlay Skeleton */
._skeletonMobileName_1iueh_1953 {
  height: 24px;
  width: 70%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.3) 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_1iueh_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 6px;
}

._skeletonMobileSubtitle_1iueh_1973 {
  height: 16px;
  width: 50%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.3) 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_1iueh_1 1.5s ease-in-out infinite;
  border-radius: 4px;
}

/* Desktop Name Block Skeleton */
._skeletonDesktopName_1iueh_1993 {
  height: 28px;
  width: 180px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_1iueh_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}

._skeletonLocationText_1iueh_2013 {
  height: 16px;
  width: 140px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_1iueh_1 1.5s ease-in-out infinite;
  border-radius: 4px;
}

._skeletonBadgeText_1iueh_2031 {
  height: 16px;
  width: 100px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_1iueh_1 1.5s ease-in-out infinite;
  border-radius: 4px;
}

/* Rate Section Skeleton */
._skeletonPriceTag_1iueh_2051 {
  height: 40px;
  width: 120px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_1iueh_1 1.5s ease-in-out infinite;
  border-radius: 8px;
  margin-bottom: 8px;
}

._skeletonRatingBadge_1iueh_2071 {
  height: 24px;
  width: 100px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_1iueh_1 1.5s ease-in-out infinite;
  border-radius: 12px;
}

._skeletonMobileLocation_1iueh_2089 {
  height: 14px;
  width: 180px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_1iueh_1 1.5s ease-in-out infinite;
  border-radius: 4px;
}

/* Bio Section Skeleton */
._skeletonBioLine1_1iueh_2109 {
  height: 16px;
  width: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_1iueh_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}

._skeletonBioLine2_1iueh_2129 {
  height: 16px;
  width: 85%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_1iueh_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 16px;
}

/* Tag Skeleton */
._skeletonTag_1iueh_2151 {
  height: 32px;
  width: 100px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_1iueh_1 1.5s ease-in-out infinite;
  border-radius: 16px;
}

._skeletonTag_1iueh_2151:nth-child(2) {
  width: 120px;
}

._skeletonTag_1iueh_2151:nth-child(3) {
  width: 90px;
}

/* Quick Info Item Skeleton */
._skeletonInfoItem_1iueh_2187 {
  height: 16px;
  width: 110px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_1iueh_1 1.5s ease-in-out infinite;
  border-radius: 4px;
}

._skeletonInfoItem_1iueh_2187:nth-child(2) {
  width: 100px;
}

._skeletonInfoItem_1iueh_2187:nth-child(3) {
  width: 90px;
}

/* Action Button Skeleton */
._skeletonBookButton_1iueh_2223 {
  height: 44px;
  width: 140px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_1iueh_1 1.5s ease-in-out infinite;
  border-radius: 8px;
}

/* Responsive Skeleton Adjustments */
@media (max-width: 768px) {
  ._skeletonDesktopName_1iueh_1993 {
    display: none;
  }

  ._skeletonLocationText_1iueh_2013,
  ._skeletonBadgeText_1iueh_2031 {
    display: none;
  }

  ._skeletonPriceTag_1iueh_2051 {
    height: 36px;
    width: 100px;
  }

  ._skeletonRatingBadge_1iueh_2071 {
    height: 20px;
    width: 80px;
  }

  ._skeletonBookButton_1iueh_2223 {
    width: 100%;
  }
}

@media (max-width: 480px) {
  ._skeletonPortraitImage_1iueh_1907 {
    min-height: 320px;
  }

  ._skeletonBioLine1_1iueh_2109,
  ._skeletonBioLine2_1iueh_2129 {
    height: 14px;
  }

  ._skeletonTag_1iueh_2151 {
    height: 28px;
  }

  ._skeletonInfoItem_1iueh_2187 {
    height: 14px;
    width: 90px;
  }

  ._skeletonBookButton_1iueh_2223 {
    height: 44px;
  }
}
/* Video Player Container */
._videoPlayer_9e23u_3 {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  background: #0f172a;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Iframe for embedded players (YouTube, Vimeo, Google Drive) */
._iframe_9e23u_23 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* HTML5 Video element for direct video files */
._video_9e23u_3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  background: #0f172a;
}

/* Error Container */
._errorContainer_9e23u_65 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  padding: 24px;
  text-align: center;
}

._errorIcon_9e23u_95 {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.6;
}

._errorText_9e23u_107 {
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

/* Loading Container */
._loadingContainer_9e23u_123 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  padding: 24px;
}

._spinner_9e23u_151 {
  width: 40px;
  height: 40px;
  border: 4px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: _spin_9e23u_151 0.8s linear infinite;
}

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

._loadingText_9e23u_181 {
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  margin: 16px 0 0 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  ._errorIcon_9e23u_95 {
    font-size: 36px;
  }
  
  ._errorText_9e23u_107,
  ._loadingText_9e23u_181 {
    font-size: 13px;
  }
}

.react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  border-color: #ccc;
  border-style: solid;
  border-width: 3px 3px 0 0;
  content: "";
  display: block;
  height: 9px;
  position: absolute;
  top: 6px;
  width: 9px;
}
.react-datepicker__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
}

.react-datepicker {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
  line-height: initial;
}

.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
  border-bottom-left-radius: 0.375em;
  border-bottom-right-radius: 0.375em;
}

.react-datepicker-popper {
  z-index: 1;
  line-height: 0;
}
.react-datepicker-popper .react-datepicker__triangle {
  stroke: #aeaeae;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
  fill: #f0f0f0;
  color: #f0f0f0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
  fill: #fff;
  color: #fff;
}
.react-datepicker-popper--header-middle[data-placement^=bottom] .react-datepicker__triangle, .react-datepicker-popper--header-bottom[data-placement^=bottom] .react-datepicker__triangle {
  fill: #fff;
  color: #fff;
}
.react-datepicker-popper--header-bottom[data-placement^=top] .react-datepicker__triangle {
  fill: #f0f0f0;
  color: #f0f0f0;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  padding: 8px 0;
  position: relative;
}
.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
  border-top-left-radius: 0;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select, .react-datepicker__header--middle, .react-datepicker__header--bottom) {
  border-top-right-radius: 0.3rem;
}
.react-datepicker__header--middle {
  border-top: 1px solid #aeaeae;
  border-radius: 0;
  margin-top: 4px;
}
.react-datepicker__header--bottom {
  border-bottom: none;
  border-top: 1px solid #aeaeae;
  border-radius: 0 0 0.3rem 0.3rem;
}

.react-datepicker__header-wrapper {
  position: relative;
}
.react-datepicker__header-wrapper .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 2px;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 15px;
}

.react-datepicker__month-select,
.react-datepicker__year-select,
.react-datepicker__month-year-select {
  background-color: transparent;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  margin-top: 5px;
  padding: 2px 5px;
}
.react-datepicker__month-select:focus-visible,
.react-datepicker__year-select:focus-visible,
.react-datepicker__month-year-select:focus-visible {
  outline: auto 1px;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem;
}

h2.react-datepicker__current-month {
  padding: 0;
  margin: 0;
}

.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.react-datepicker__navigation {
  align-items: center;
  background: none;
  display: flex;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 2px;
  padding: 0;
  border: none;
  z-index: 1;
  height: 32px;
  width: 32px;
  text-indent: -999em;
  overflow: hidden;
}
.react-datepicker__navigation--previous {
  left: 2px;
}
.react-datepicker__navigation--next {
  right: 2px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 85px;
}
.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__navigation--years-previous {
  top: 4px;
}
.react-datepicker__navigation--years-upcoming {
  top: -4px;
}
.react-datepicker__navigation:hover *::before {
  border-color: rgb(165.75, 165.75, 165.75);
}

.react-datepicker__navigation-icon {
  position: relative;
  top: -1px;
  font-size: 20px;
  width: 0;
}
.react-datepicker__navigation-icon--next {
  left: -2px;
}
.react-datepicker__navigation-icon--next::before {
  transform: rotate(45deg);
  left: -7px;
}
.react-datepicker__navigation-icon--previous {
  right: -2px;
}
.react-datepicker__navigation-icon--previous::before {
  transform: rotate(225deg);
  right: -7px;
}

.react-datepicker__month-container {
  float: left;
}

.react-datepicker__year {
  margin: 0.5em;
  text-align: center;
}
.react-datepicker__year-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 180px;
}
.react-datepicker__year .react-datepicker__year-text {
  display: inline-block;
  width: 5em;
  margin: 2px;
}

.react-datepicker__month {
  margin: 0.5em;
  text-align: center;
}
.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 5em;
  margin: 2px;
}

.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left;
}
.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: auto;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
  -moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}

.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}
.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.375em;
  position: absolute;
  right: -87px;
  top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
  border-bottom-right-radius: 0.375em;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
  border-bottom-right-radius: 0.375em;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + 2.125em / 2);
  overflow-y: scroll;
  padding-right: 0;
  padding-left: 0;
  width: 100%;
  box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 2.125em;
  line-height: 2.125em;
  text-align: center;
  margin: 0.208em;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__week-number--selected {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__week-number--selected:hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}

.react-datepicker__day-names {
  text-align: center;
  white-space: nowrap;
  margin-bottom: -8px;
}

.react-datepicker__week {
  white-space: nowrap;
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 2.125em;
  line-height: 2.125em;
  text-align: center;
  margin: 0.208em;
}
.react-datepicker__day-name--disabled,
.react-datepicker__day--disabled,
.react-datepicker__time-name--disabled {
  cursor: default;
  color: #ccc;
}

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
  cursor: pointer;
}
.react-datepicker__day:not([aria-disabled=true]):hover,
.react-datepicker__month-text:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text:not([aria-disabled=true]):hover,
.react-datepicker__year-text:not([aria-disabled=true]):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
  font-weight: bold;
}
.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}
.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
  background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
}
.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
  color: magenta;
}
.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
  color: green;
}
.react-datepicker__day--holidays,
.react-datepicker__month-text--holidays,
.react-datepicker__quarter-text--holidays,
.react-datepicker__year-text--holidays {
  position: relative;
  border-radius: 0.3rem;
  background-color: #ff6803;
  color: #fff;
}
.react-datepicker__day--holidays .overlay,
.react-datepicker__month-text--holidays .overlay,
.react-datepicker__quarter-text--holidays .overlay,
.react-datepicker__year-text--holidays .overlay {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}
.react-datepicker__day--holidays:not([aria-disabled=true]):hover,
.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
  background-color: rgb(207, 82.9642857143, 0);
}
.react-datepicker__day--holidays:hover .overlay,
.react-datepicker__month-text--holidays:hover .overlay,
.react-datepicker__quarter-text--holidays:hover .overlay,
.react-datepicker__year-text--holidays:hover .overlay {
  visibility: visible;
  opacity: 1;
}
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__day--selected:not([aria-disabled=true]):hover, .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__day--in-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: rgb(186.25, 217.0833333333, 241.25);
  color: rgb(0, 0, 0);
}
.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
  color: #fff;
}
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range) {
  background-color: rgba(33, 107, 165, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}
.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
  cursor: default;
  color: #ccc;
}
.react-datepicker__day--disabled .overlay,
.react-datepicker__month-text--disabled .overlay,
.react-datepicker__quarter-text--disabled .overlay,
.react-datepicker__year-text--disabled .overlay {
  position: absolute;
  bottom: 70%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.react-datepicker__input-container .react-datepicker__calendar-icon {
  position: absolute;
  padding: 0.625em;
  box-sizing: content-box;
}

.react-datepicker__view-calendar-icon input {
  padding: 6px 10px 5px 25px;
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
  position: relative;
}
.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  transform: rotate(135deg);
  right: -16px;
  top: 0;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
  background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0 6px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "×";
}
.react-datepicker__close-icon--disabled {
  cursor: default;
}
.react-datepicker__close-icon--disabled::after {
  cursor: default;
  background-color: #ccc;
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}

.react-datepicker__children-container {
  width: 17.25em;
  margin: 0.5em;
  padding-right: 0.25em;
  padding-left: 0.25em;
  height: auto;
}

.react-datepicker__aria-live {
  position: absolute;
  clip-path: circle(0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  white-space: nowrap;
}

.react-datepicker__calendar-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

.react-datepicker-popper-offset {
  margin-top: -0.7em;
}
/* Modal Backdrop */
._backdrop_1q8q3_3 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

/* Modal Container */
._modal_1q8q3_33 {
  background: #ffffff;
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  position: relative;
}

/* Header */
._header_1q8q3_57 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 24px 20px;
  border-bottom: 1px solid #f0f0f0;
}

._headerContent_1q8q3_73 {
  flex: 1;
}

._title_1q8q3_81 {
  font-size: 20px;
  font-weight: 700;
  color: #0b1224;
  margin: 0 0 4px;
  line-height: 1.3;
}

._subtitle_1q8q3_97 {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

._closeButton_1q8q3_111 {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  font-size: 24px;
  border-radius: 8px;
  flex-shrink: 0;
  margin-left: 12px;
}

/* Package Navigation */
._packageNavigation_1q8q3_145 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
  background: #f8fafc;
}

._packageNavButton_1q8q3_165 {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #475569;
  font-size: 18px;
  flex-shrink: 0;
}

._packageNavButton_1q8q3_165:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

._sessionIndicators_1q8q3_205 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}

._sessionIndicator_1q8q3_205 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #e2e8f0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
}

._sessionIndicatorActive_1q8q3_251 {
  border-color: #1e40af;
  background: #1e40af;
  color: #ffffff;
}

._sessionIndicatorFilled_1q8q3_263 {
  border-color: #10b981;
  background: #ecfdf5;
  color: #10b981;
}

._sessionIndicatorFilled_1q8q3_263._sessionIndicatorActive_1q8q3_251 {
  border-color: #1e40af;
  background: #1e40af;
  color: #ffffff;
}

/* Duration Selector */
._durationSelector_1q8q3_289 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 20px 24px;
}

._durationButton_1q8q3_303 {
  padding: 12px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
}

._durationButtonActive_1q8q3_327 {
  border-color: #1e40af;
  background: #ffffff;
  color: #1e40af;
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

._recommended_1q8q3_341 {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 9px;
  font-weight: 600;
  color: #ffffff;
  background: #10b981;
  padding: 2px 6px;
  border-radius: 8px;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

/* Calendar Section */
._calendarSection_1q8q3_373 {
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
}

._calendarHeader_1q8q3_383 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

._navButton_1q8q3_397 {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #475569;
  font-size: 18px;
}

._dateRange_1q8q3_425 {
  font-size: 15px;
  font-weight: 600;
  color: #0b1224;
}

._weekDays_1q8q3_437 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

._dayButton_1q8q3_449 {
  background: #f8fafc;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 12px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

._dayButtonSelected_1q8q3_473 {
  background: #1e40af;
  border-color: #1e40af;
}

._dayButtonSelected_1q8q3_473 ._dayName_1q8q3_483,
._dayButtonSelected_1q8q3_473 ._dayNumber_1q8q3_485 {
  color: #ffffff;
}

._dayName_1q8q3_483 {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  text-transform: capitalize;
}

._dayNumber_1q8q3_485 {
  font-size: 16px;
  font-weight: 700;
  color: #0b1224;
}

/* Timezone Info */
._timezoneInfo_1q8q3_521 {
  padding: 12px 24px;
  font-size: 13px;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid #f0f0f0;
}

/* Time Slots Section */
._timeSlotsSection_1q8q3_539 {
  padding: 20px 24px;
  max-height: 300px;
  overflow-y: auto;
}

._loadingSlots_1q8q3_551,
._emptySlots_1q8q3_553 {
  text-align: center;
  padding: 40px 20px;
  color: #64748b;
  font-size: 14px;
}

._slotGroup_1q8q3_567 {
  margin-bottom: 20px;
}

._slotGroup_1q8q3_567:last-child {
  margin-bottom: 0;
}

._slotGroupTitle_1q8q3_583 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #0b1224;
  margin-bottom: 12px;
}

._slotGroupTitle_1q8q3_583 svg {
  width: 16px;
  height: 16px;
  color: #64748b;
}

._slotGrid_1q8q3_615 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

._timeSlot_1q8q3_539 {
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  text-align: center;
}

._timeSlotSelected_1q8q3_651 {
  border-color: #1e40af;
  background: #eff6ff;
  color: #1e40af;
}

/* Continue Button */
._continueButton_1q8q3_665 {
  width: calc(100% - 48px);
  margin: 20px 24px 24px;
  padding: 14px;
  background: #e2e8f0;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #94a3b8;
  cursor: not-allowed;
}

._continueButton_1q8q3_665:not(:disabled) {
  background: #1e40af;
  color: #ffffff;
  cursor: pointer;
}

/* Scrollbar Styling */
._timeSlotsSection_1q8q3_539::-webkit-scrollbar {
  width: 6px;
}

._timeSlotsSection_1q8q3_539::-webkit-scrollbar-track {
  background: #f8fafc;
  border-radius: 3px;
}

._timeSlotsSection_1q8q3_539::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

/* Responsive */
@media (max-width: 640px) {
  ._modal_1q8q3_33 {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  ._header_1q8q3_57,
  ._packageNavigation_1q8q3_145,
  ._durationSelector_1q8q3_289,
  ._calendarSection_1q8q3_373,
  ._timezoneInfo_1q8q3_521,
  ._timeSlotsSection_1q8q3_539 {
    padding-left: 16px;
    padding-right: 16px;
  }

  ._continueButton_1q8q3_665 {
    width: calc(100% - 32px);
    margin-left: 16px;
    margin-right: 16px;
  }

  ._sessionIndicators_1q8q3_205 {
    gap: 6px;
  }

  ._sessionIndicator_1q8q3_205 {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  ._packageNavButton_1q8q3_165 {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  ._title_1q8q3_81 {
    font-size: 18px;
  }

  ._subtitle_1q8q3_97 {
    font-size: 13px;
  }

  ._weekDays_1q8q3_437 {
    gap: 4px;
  }

  ._dayButton_1q8q3_449 {
    padding: 8px 2px;
  }

  ._dayName_1q8q3_483 {
    font-size: 11px;
  }

  ._dayNumber_1q8q3_485 {
    font-size: 14px;
  }

  ._slotGrid_1q8q3_615 {
    grid-template-columns: repeat(2, 1fr);
  }
  ._durationSelector_1q8q3_289 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  ._durationSelector_1q8q3_289 {
    gap: 8px;
  }

  ._durationButton_1q8q3_303 {
    padding: 10px;
    font-size: 14px;
  }

  ._recommended_1q8q3_341 {
    font-size: 8px;
    padding: 1px 4px;
    top: -4px;
    right: -4px;
  }

  ._dateRange_1q8q3_425 {
    font-size: 14px;
  }

  ._navButton_1q8q3_397 {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}
._page_tipbq_1 {
  min-height: 100vh;
  background: #f9fafb;
  padding: 32px 16px 64px;
}

._container_tipbq_13 {
  max-width: 900px;
  margin: 0 auto;
}

._headerRow_tipbq_23 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

._backBtn_tipbq_39 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  background: transparent;
  border: 0;
  color: #667085;
  cursor: pointer;
  font-size: 15px;
}

._backBtn_tipbq_39 svg {
  font-size: 20px;
}

._debugBar_tipbq_71 {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 6px;
  font-size: 12px;
  color: #92400e;
  font-weight: 500;
  margin-left: auto;
}

._debugText_tipbq_97 {
  display: inline-block;
}

._badge_tipbq_105 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #1e40af;
  font-weight: 600;
  font-size: 14px;
}

._badgeIcon_tipbq_133 {
  font-size: 18px;
}

._title_tipbq_141 {
  font-size: 32px;
  font-weight: 800;
  color: #1a1d29;
  margin: 0 0 12px;
  text-align: center;
}

._tutorName_tipbq_157 {
  color: #1e40af;
}

._subtitle_tipbq_165 {
  font-size: 16px;
  color: #64748b;
  margin: 0 0 40px;
  font-weight: 500;
  text-align: center;
}

._content_tipbq_181 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}

/* Tutor Card */
._tutorCard_tipbq_197 {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  height: 100%;
}

._tutorHeader_tipbq_213 {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

._avatar_tipbq_225 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 2px solid #e5e7eb;
}

._tutorInfo_tipbq_241 {
  flex: 1;
}

._tutorInfo_tipbq_241 h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: #1a1d29;
}

._tutorTitle_tipbq_263 {
  margin: 0 0 6px;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
}

._rating_tipbq_277 {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  font-size: 13px;
  color: #6b7280;
}

._starIcon_tipbq_295 {
  color: #fbbf24;
  font-size: 15px;
}

._rating_tipbq_277 strong {
  color: #1a1d29;
  font-weight: 700;
}

._price_tipbq_315 {
  font-size: 20px;
  font-weight: 700;
  color: #1e40af;
}

._tutorStats_tipbq_327 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 16px;
}

._stat_tipbq_347 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  font-size: 13px;
}

._stat_tipbq_347 svg {
  font-size: 16px;
  color: #9ca3af;
}

._aboutSection_tipbq_373 h4 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: #1a1d29;
}

._aboutSection_tipbq_373 p {
  margin: 0;
  color: #6b7280;
  line-height: 1.5;
  font-size: 13px;
}

._videoSection_tipbq_401 {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

._videoSection_tipbq_401 h4 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: #1a1d29;
}

._videoContainer_tipbq_427 {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

/* Remove this class as it's no longer needed */
/* .videoIframe is replaced by VideoPlayer component's internal styles */

._infoSection_tipbq_447 {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

._infoSection_tipbq_447 h4 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: #1a1d29;
}

._infoSection_tipbq_447 p {
  margin: 0;
  color: #6b7280;
  line-height: 1.5;
  font-size: 13px;
}

._coursesList_tipbq_487 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._courseItem_tipbq_499 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #f9fafb;
  border-radius: 6px;
  font-size: 13px;
}

._courseItem_tipbq_499 strong {
  color: #1e40af;
  font-weight: 600;
  min-width: 60px;
}

._courseItem_tipbq_499 span {
  color: #6b7280;
}

._availabilityList_tipbq_539 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._availabilityItem_tipbq_551 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  background: #f9fafb;
  border-radius: 6px;
  font-size: 13px;
}

._availabilityItem_tipbq_551 strong {
  color: #1a1d29;
  font-weight: 600;
  min-width: 80px;
}

._availabilityItem_tipbq_551 span {
  color: #6b7280;
  flex: 1;
}

/* Booking Card */
._bookingCard_tipbq_595 {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  height: 100%;
}

._formGroup_tipbq_611 {
  margin-bottom: 16px;
}

._formGroup_tipbq_611 label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1a1d29;
}

._formGroup_tipbq_611 input,
._formGroup_tipbq_611 select,
._formGroup_tipbq_611 textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  color: #1a1d29;
  background: #f9fafb;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

._formGroup_tipbq_611 select {
  padding-right: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

._formGroup_tipbq_611 input:focus,
._formGroup_tipbq_611 select:focus,
._formGroup_tipbq_611 textarea:focus {
  border-color: #c8d6ee;
  box-shadow: 0 0 0 3px rgba(28, 68, 156, 0.12);
}

._formGroup_tipbq_611 input::-moz-placeholder, ._formGroup_tipbq_611 textarea::-moz-placeholder {
  color: #9ca3af;
}

._formGroup_tipbq_611 input::placeholder,
._formGroup_tipbq_611 textarea::placeholder {
  color: #9ca3af;
}

._formGroup_tipbq_611 textarea {
  resize: vertical;
  font-family: inherit;
}

._summary_tipbq_719 {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

._summary_tipbq_719 h4 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: #1a1d29;
}

._summaryRow_tipbq_749 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
  color: #6b7280;
}

._summaryRow_tipbq_749:last-child {
  margin-bottom: 0;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
  margin-top: 8px;
}

._summaryRow_tipbq_749 strong {
  color: #1a1d29;
  font-weight: 600;
}

._totalCost_tipbq_791 {
  color: #1e40af;
  font-size: 15px;
}

._freeBanner_tipbq_801 {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
  display: flex;
  gap: 10px;
}

._bulbIcon_tipbq_821 {
  font-size: 20px;
  color: #16a34a;
  flex-shrink: 0;
}

._freeBanner_tipbq_801 strong {
  display: block;
  color: #16a34a;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}

._freeBanner_tipbq_801 p {
  margin: 0;
  color: #16a34a;
  font-size: 12px;
  line-height: 1.5;
}

._bookBtn_tipbq_863 {
  width: 100%;
  padding: 12px 20px;
  background: #1e40af;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._bookBtn_tipbq_863:hover:not(:disabled) {
  background: #1e3a8a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
}

._bookBtn_tipbq_863:disabled {
  cursor: not-allowed;
  opacity: 0.8;
}

._bookBtn_tipbq_863:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Seven Dots Loader Animation */
._sevenDotsLoader_tipbq_931 {
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  height: 12px;
  line-height: 1;
}

._sevenDotsLoader_tipbq_931 span {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  animation: _dotPulse_tipbq_1 1.4s ease-in-out infinite both !important;
  display: inline-block !important;
}

._sevenDotsLoader_tipbq_931 span:nth-child(1) {
  animation-delay: -0.6s !important;
}

._sevenDotsLoader_tipbq_931 span:nth-child(2) {
  animation-delay: -0.5s !important;
}

._sevenDotsLoader_tipbq_931 span:nth-child(3) {
  animation-delay: -0.4s !important;
}

._sevenDotsLoader_tipbq_931 span:nth-child(4) {
  animation-delay: -0.3s !important;
}

._sevenDotsLoader_tipbq_931 span:nth-child(5) {
  animation-delay: -0.2s !important;
}

._sevenDotsLoader_tipbq_931 span:nth-child(6) {
  animation-delay: -0.1s !important;
}

._sevenDotsLoader_tipbq_931 span:nth-child(7) {
  animation-delay: 0 !important;
}

@keyframes _dotPulse_tipbq_1 {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Responsive */
@media (max-width: 1024px) {
  ._content_tipbq_181 {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 640px) {
  ._page_tipbq_1 {
    padding: 24px 16px 48px;
  }

  ._headerRow_tipbq_23 {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  ._debugBar_tipbq_71 {
    margin-left: 0;
    width: 100%;
  }

  ._title_tipbq_141 {
    font-size: 24px;
  }

  ._subtitle_tipbq_165 {
    font-size: 15px;
  }

  ._tutorCard_tipbq_197,
  ._bookingCard_tipbq_595 {
    padding: 20px;
  }

  ._avatar_tipbq_225 {
    width: 64px;
    height: 64px;
  }

  ._tutorInfo_tipbq_241 h3 {
    font-size: 18px;
  }

  ._price_tipbq_315 {
    font-size: 20px;
  }
}

/* Skeleton Loading Styles */
@keyframes _skeletonShimmer_tipbq_1 {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

._skeletonAvatar_tipbq_1165 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_tipbq_1 1.5s ease-in-out infinite;
  border: 2px solid #e5e7eb;
}

._skeletonName_tipbq_1185 {
  height: 20px;
  width: 150px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_tipbq_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}

._skeletonTitle_tipbq_1205 {
  height: 14px;
  width: 200px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_tipbq_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 6px;
}

._skeletonRating_tipbq_1225 {
  height: 16px;
  width: 100px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_tipbq_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 6px;
}

._skeletonPrice_tipbq_1245 {
  height: 24px;
  width: 100px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_tipbq_1 1.5s ease-in-out infinite;
  border-radius: 4px;
}

._skeletonStatText_tipbq_1263 {
  height: 14px;
  width: 120px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_tipbq_1 1.5s ease-in-out infinite;
  border-radius: 4px;
}

._skeletonSectionTitle_tipbq_1281 {
  height: 18px;
  width: 80px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_tipbq_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}

._skeletonBio_tipbq_1301 {
  height: 14px;
  width: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_tipbq_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 6px;
}

._skeletonLabel_tipbq_1321 {
  height: 14px;
  width: 120px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_tipbq_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 6px;
}

._skeletonInput_tipbq_1341 {
  height: 38px;
  width: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_tipbq_1 1.5s ease-in-out infinite;
  border-radius: 6px;
}

._skeletonSummaryRow_tipbq_1359 {
  height: 16px;
  width: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_tipbq_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}

._skeletonBannerContent_tipbq_1379 {
  height: 60px;
  width: 100%;
  background: linear-gradient(90deg, #f0fdf4 25%, #e0f9e8 50%, #f0fdf4 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_tipbq_1 1.5s ease-in-out infinite;
  border-radius: 8px;
}

._skeletonSubmitButton_tipbq_1397 {
  height: 44px;
  width: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_tipbq_1 1.5s ease-in-out infinite;
  border-radius: 8px;
  margin-top: 16px;
}


/* Date Picker Styles */
._datePickerWrapper_tipbq_1421 {
  position: relative;
  width: 100%;
}

._datePickerWrapper_tipbq_1421 .react-datepicker-wrapper {
  width: 100%;
}

._datePickerWrapper_tipbq_1421 .react-datepicker__input-container {
  width: 100%;
}

._datePickerInput_tipbq_1447 {
  width: 100% !important;
  padding: 9px 36px 9px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  color: #1a1d29 !important;
  background: #f9fafb !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  cursor: pointer !important;
  font-family: inherit !important;
}

._datePickerInput_tipbq_1447:focus {
  border-color: #c8d6ee !important;
  box-shadow: 0 0 0 3px rgba(28, 68, 156, 0.12) !important;
}

._datePickerInput_tipbq_1447::-moz-placeholder {
  color: #9ca3af !important;
}

._datePickerInput_tipbq_1447::placeholder {
  color: #9ca3af !important;
}

._datePickerIcon_tipbq_1493 {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #6b7280;
  pointer-events: none;
  z-index: 1;
}

._datePickerInput_tipbq_1447:focus + ._datePickerIcon_tipbq_1493 {
  color: #1e40af;
}
/* Calendar Popup Styles */
._datePickerPopper_tipbq_1523 {
  z-index: 1000 !important;
}

._datePickerCalendar_tipbq_1531 {
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
  padding: 16px !important;
  background: #ffffff !important;
  font-family: inherit !important;
}

/* Calendar Header */
._datePickerCalendar_tipbq_1531 ._react-datepicker__header_tipbq_1551 {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding-top: 16px !important;
  border-radius: 12px 12px 0 0 !important;
}

._datePickerCalendar_tipbq_1531 ._react-datepicker__current-month_tipbq_1565 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a1d29 !important;
  margin-bottom: 12px !important;
}

._datePickerCalendar_tipbq_1531 ._react-datepicker__day-names_tipbq_1579 {
  margin-bottom: 8px !important;
}

._datePickerCalendar_tipbq_1531 ._react-datepicker__day-name_tipbq_1579 {
  color: #6b7280 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  width: 36px !important;
  line-height: 36px !important;
  margin: 2px !important;
}

/* Navigation Arrows */
._datePickerCalendar_tipbq_1531 ._react-datepicker__navigation_tipbq_1607 {
  top: 16px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

._datePickerCalendar_tipbq_1531 ._react-datepicker__navigation_tipbq_1607:hover {
  background: #f9fafb !important;
}

._datePickerCalendar_tipbq_1531 ._react-datepicker__navigation-icon_tipbq_1631::before {
  border-color: #6b7280 !important;
  border-width: 2px 2px 0 0 !important;
  width: 8px !important;
  height: 8px !important;
  top: 10px !important;
}

._datePickerCalendar_tipbq_1531 ._react-datepicker__navigation_tipbq_1607:hover ._react-datepicker__navigation-icon_tipbq_1631::before {
  border-color: #1e40af !important;
}

/* Calendar Days */
._datePickerCalendar_tipbq_1531 ._react-datepicker__day_tipbq_1579 {
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  margin: 2px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  color: #1a1d29 !important;
  transition: all 0.2s ease !important;
  font-weight: 500 !important;
}

._datePickerCalendar_tipbq_1531 ._react-datepicker__day_tipbq_1579:hover {
  background: #eff6ff !important;
  color: #1e40af !important;
  border-radius: 6px !important;
}

._datePickerCalendar_tipbq_1531 ._react-datepicker__day--selected_tipbq_1693,
._datePickerSelectedDay_tipbq_1695 {
  background: #1e40af !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

._datePickerCalendar_tipbq_1531 ._react-datepicker__day--selected_tipbq_1693:hover,
._datePickerSelectedDay_tipbq_1695:hover {
  background: #1e3a8a !important;
  color: #ffffff !important;
}

._datePickerCalendar_tipbq_1531 ._react-datepicker__day--disabled_tipbq_1721 {
  color: #d1d5db !important;
  cursor: not-allowed !important;
}

._datePickerCalendar_tipbq_1531 ._react-datepicker__day--disabled_tipbq_1721:hover {
  background: transparent !important;
  color: #d1d5db !important;
}

._datePickerCalendar_tipbq_1531 ._react-datepicker__day--today_tipbq_1741 {
  font-weight: 700 !important;
  color: #1e40af !important;
  background: #eff6ff !important;
}

._datePickerCalendar_tipbq_1531 ._react-datepicker__day--today_tipbq_1741:hover {
  background: #dbeafe !important;
  color: #1e40af !important;
}

._datePickerCalendar_tipbq_1531 ._react-datepicker__day--keyboard-selected_tipbq_1763 {
  background: #eff6ff !important;
  color: #1e40af !important;
}

/* Month/Year Dropdown */
._datePickerCalendar_tipbq_1531 ._react-datepicker__month-dropdown_tipbq_1775,
._datePickerCalendar_tipbq_1531 ._react-datepicker__year-dropdown_tipbq_1777 {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

._datePickerCalendar_tipbq_1531 ._react-datepicker__month-option_tipbq_1791:hover,
._datePickerCalendar_tipbq_1531 ._react-datepicker__year-option_tipbq_1793:hover {
  background: #f9fafb !important;
}

._datePickerCalendar_tipbq_1531 ._react-datepicker__month-option--selected_tipbq_1801,
._datePickerCalendar_tipbq_1531 ._react-datepicker__year-option--selected_tipbq_1803 {
  background: #eff6ff !important;
  color: #1e40af !important;
}

/* Responsive Date Picker */
@media (max-width: 640px) {
  ._datePickerCalendar_tipbq_1531 {
    padding: 12px !important;
  }

  ._datePickerCalendar_tipbq_1531 ._react-datepicker__day_tipbq_1579 {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 12px !important;
  }

  ._datePickerCalendar_tipbq_1531 ._react-datepicker__day-name_tipbq_1579 {
    width: 32px !important;
    line-height: 32px !important;
    font-size: 11px !important;
  }

  ._datePickerCalendar_tipbq_1531 ._react-datepicker__current-month_tipbq_1565 {
    font-size: 14px !important;
  }

  ._timeSlotGrid_tipbq_1859 {
    gap: 6px;
  }

  ._timeSlotButton_tipbq_1867 {
    padding: 4px 10px;
    font-size: 12px;
    min-height: 24px;
  }
}

/* Session Time Styles */
._timeSlotPlaceholder_tipbq_1883,
._timeSlotLoading_tipbq_1885,
._timeSlotError_tipbq_1887 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: #6b7280;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  min-height: 28px;
}

._timeSlotPlaceholder_tipbq_1883 svg,
._timeSlotLoading_tipbq_1885 svg,
._timeSlotError_tipbq_1887 svg {
  font-size: 16px;
  color: #9ca3af;
  flex-shrink: 0;
}

._timeSlotError_tipbq_1887 {
  color: #dc2626;
  background: #fef2f2;
  border-color: #fecaca;
}

._timeSlotError_tipbq_1887 svg {
  color: #dc2626;
}

._timeSlotLoading_tipbq_1885 {
  justify-content: center;
}

._loadingSpinner_tipbq_1957 {
  width: 16px;
  height: 16px;
  border: 2px solid #e5e7eb;
  border-top-color: #1e40af;
  border-radius: 50%;
  animation: _spin_tipbq_1 0.8s linear infinite;
  flex-shrink: 0;
}

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

._timeSlotGrid_tipbq_1859 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

._timeSlotButton_tipbq_1867 {
  padding: 4px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #f9fafb;
  color: #1a1d29;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  white-space: nowrap;
}

._timeSlotButton_tipbq_1867:hover {
  background: #eff6ff;
  border-color: #c8d6ee;
  color: #1e40af;
}

._timeSlotButton_tipbq_1867._timeSlotSelected_tipbq_2053 {
  background: #1e40af;
  border-color: #1e40af;
  color: #ffffff;
  font-weight: 600;
}

._timeSlotButton_tipbq_1867._timeSlotSelected_tipbq_2053:hover {
  background: #1e3a8a;
  border-color: #1e3a8a;
}

._selectedTime_tipbq_2077 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 6px;
  font-size: 13px;
  color: #1e40af;
  font-weight: 500;
  margin-top: 8px;
}

._selectedTime_tipbq_2077 svg {
  font-size: 16px;
  color: #1e40af;
  flex-shrink: 0;
}

._fieldError_tipbq_2117 {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #dc2626;
  font-weight: 500;
}

._sessionGroup_tipbq_2133 {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e5e7eb;
}

._sessionGroup_tipbq_2133:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

._sessionNavigation_tipbq_2157 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding: 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

._navArrow_tipbq_2181 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

._navArrow_tipbq_2181:hover:not(:disabled) {
  background: #eff6ff;
  border-color: #c8d6ee;
  color: #1e40af;
}

._navArrow_tipbq_2181:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

._navArrow_tipbq_2181 svg {
  font-size: 18px;
}

._sessionCounter_tipbq_2243 {
  flex: 1;
  text-align: center;
}

._sessionCounterText_tipbq_2253 {
  font-size: 14px;
  font-weight: 600;
  color: #1a1d29;
}

._inputError_tipbq_2265 {
  border-color: #fca5a5 !important;
  background: #fef2f2 !important;
}

._inputError_tipbq_2265:focus {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

/* Modal Trigger Button */
._modalTriggerButton_tipbq_2287 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

._modalTriggerButton_tipbq_2287:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

._modalTriggerIcon_tipbq_2325 {
  width: 20px;
  height: 20px;
  color: #64748b;
  flex-shrink: 0;
}

._modalTriggerContent_tipbq_2339 {
  flex: 1;
}

._modalTriggerText_tipbq_2347 {
  font-size: 15px;
  font-weight: 500;
  color: #0b1224;
  margin-bottom: 2px;
}

._modalTriggerDuration_tipbq_2361 {
  font-size: 13px;
  color: #64748b;
}

/* Package Selector Styles */
._selectInput_tipbq_2373 {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  color: #1f2937;
  background-color: #fff;
  transition: all 0.2s ease;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 45px;
}

._selectInput_tipbq_2373:hover {
  border-color: #3b82f6;
}

._selectInput_tipbq_2373:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

._packageSelectorLoading_tipbq_2429 {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  color: #6b7280;
  background-color: #f9fafb;
  text-align: center;
}

._page_1hm7c_1 {
  min-height: 100vh;
  background: #f8f9fa;
}

._hero_1hm7c_11 {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 120px 20px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

._hero_1hm7c_11::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

._heroContent_1hm7c_47 {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

._pill_1hm7c_61 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 24px;
}

._title_1hm7c_87 {
  font-size: 3.5rem;
  font-weight: 800;
  color: white;
  margin-bottom: 20px;
  line-height: 1.2;
}

._highlight_1hm7c_103 {
  background: linear-gradient(90deg, #ffd700, #ffed4e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

._subtitle_1hm7c_115 {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

._stats_1hm7c_131 {
  padding: 40px 20px;
  background: white;
  border-bottom: 1px solid #e5e7eb;
}

._statsGrid_1hm7c_143 {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
}

._statCard_1hm7c_159 {
  text-align: center;
  padding: 20px;
}

._statNumber_1hm7c_169 {
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}

._statLabel_1hm7c_187 {
  color: #6b7280;
  font-size: 1rem;
}

._jobsSection_1hm7c_197 {
  padding: 80px 20px;
}

._container_1hm7c_205 {
  max-width: 1200px;
  margin: 0 auto;
}

._sectionTitle_1hm7c_215 {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 50px;
  color: #1f2937;
}

._jobsGrid_1hm7c_231 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
}

._jobCard_1hm7c_243 {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

._jobCard_1hm7c_243::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--job-color), var(--job-color-light));
  opacity: 0;
  transition: opacity 0.3s ease;
}

._jobCard_1hm7c_243:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

._jobCard_1hm7c_243:hover::before {
  opacity: 1;
}

._jobIcon_1hm7c_309 {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

._jobTitle_1hm7c_329 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 12px;
}

._jobMeta_1hm7c_343 {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

._location_1hm7c_357,
._type_1hm7c_359 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6b7280;
  font-size: 0.9rem;
}

._location_1hm7c_357 svg,
._type_1hm7c_359 svg {
  flex-shrink: 0;
}

._jobDescription_1hm7c_385 {
  color: #4b5563;
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: 24px;
}

._applyButton_1hm7c_399 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  align-self: flex-start;
}

._applyButton_1hm7c_399:hover {
  transform: translateX(4px);
  box-shadow: 0 10px 15px -3px rgba(102, 126, 234, 0.3);
}

._applyButton_1hm7c_399 svg {
  transition: transform 0.3s ease;
}

._applyButton_1hm7c_399:hover svg {
  transform: translateX(4px);
}

/* Loading, Error, Empty States */
._loadingState_1hm7c_457,
._errorState_1hm7c_459,
._emptyState_1hm7c_461 {
  text-align: center;
  padding: 80px 20px;
  color: #6b7280;
}

._loadingState_1hm7c_457 p,
._errorState_1hm7c_459 p,
._emptyState_1hm7c_461 p {
  font-size: 1.1rem;
  margin-top: 16px;
}

._spinner_1hm7c_487 {
  animation: _spin_1hm7c_487 1s linear infinite;
  color: #667eea;
}

@keyframes _spin_1hm7c_487 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

._retryButton_1hm7c_507 {
  margin-top: 16px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

._retryButton_1hm7c_507:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(102, 126, 234, 0.3);
}

@media (max-width: 768px) {
  ._title_1hm7c_87 {
    font-size: 2rem;
  }

  ._subtitle_1hm7c_115 {
    font-size: 1rem;
  }

  ._jobsGrid_1hm7c_231 {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  ._statsGrid_1hm7c_143 {
    grid-template-columns: repeat(2, 1fr);
  }
}
._page_1rg2n_1 {
  min-height: 100vh;
  background: #f8f9fa;
}

/* Header */
._header_1rg2n_13 {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60px 20px 80px;
}

._headerContent_1rg2n_23 {
  max-width: 1200px;
  margin: 0 auto;
}

._backLink_1rg2n_33 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 20px;
  transition: color 0.2s;
}

._backLink_1rg2n_33:hover {
  color: white;
}

._jobTitle_1rg2n_63 {
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
  margin-bottom: 16px;
}

._jobMeta_1rg2n_77 {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

._metaItem_1rg2n_89 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
}

/* Content Layout */
._contentWrapper_1rg2n_107 {
  max-width: 1200px;
  margin: -40px auto 60px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 30px;
}

/* Job Details */
._jobDetails_1rg2n_127 {
  background: white;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

._section_1rg2n_141 {
  margin-bottom: 32px;
}

._section_1rg2n_141:last-child {
  margin-bottom: 0;
}

._section_1rg2n_141 h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e5e7eb;
}

._richText_1rg2n_175 {
  color: #4b5563;
  line-height: 1.8;
}

._richText_1rg2n_175 ul,
._richText_1rg2n_175 ol {
  padding-left: 20px;
  margin: 12px 0;
}

._richText_1rg2n_175 li {
  margin-bottom: 8px;
}

._richText_1rg2n_175 p {
  margin-bottom: 12px;
}

/* Application Form */
._applicationForm_1rg2n_215 {
  position: relative;
}

._formCard_1rg2n_223 {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 100px;
}

._formTitle_1rg2n_241 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 24px;
}

._formGroup_1rg2n_255 {
  margin-bottom: 20px;
}

._label_1rg2n_263 {
  display: block;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
  font-size: 0.9rem;
}

._required_1rg2n_279 {
  color: #ef4444;
  margin-left: 2px;
}

._input_1rg2n_289,
._textarea_1rg2n_291,
._select_1rg2n_293 {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 1rem;
  color: #1f2937 !important;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: white;
}

._input_1rg2n_289::-moz-placeholder, ._textarea_1rg2n_291::-moz-placeholder {
  color: #9ca3af;
  opacity: 1;
}

._input_1rg2n_289::placeholder,
._textarea_1rg2n_291::placeholder {
  color: #9ca3af;
  opacity: 1;
}

._input_1rg2n_289:focus,
._textarea_1rg2n_291:focus,
._select_1rg2n_293:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  color: #1f2937 !important;
}

._textarea_1rg2n_291 {
  resize: vertical;
  min-height: 100px;
}

._select_1rg2n_293[multiple] {
  min-height: 120px;
}

._errorInput_1rg2n_363 {
  border-color: #ef4444 !important;
}

._errorText_1rg2n_371 {
  display: block;
  color: #ef4444;
  font-size: 0.85rem;
  margin-top: 4px;
}

._hint_1rg2n_385 {
  display: block;
  color: #6b7280;
  font-size: 0.8rem;
  margin-top: 4px;
}

/* Radio & Checkbox Groups */
._radioGroup_1rg2n_401,
._checkboxGroup_1rg2n_403 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._radioLabel_1rg2n_415,
._checkboxLabel_1rg2n_417 {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.95rem;
  color: #4b5563;
}

._radioLabel_1rg2n_415 input,
._checkboxLabel_1rg2n_417 input {
  width: 18px;
  height: 18px;
  accent-color: #667eea;
  cursor: pointer;
}

/* File Upload */
._fileUpload_1rg2n_453 {
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s;
}

._fileUpload_1rg2n_453:hover {
  border-color: #667eea;
}

._fileDropzone_1rg2n_475 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: pointer;
  color: #6b7280;
  gap: 8px;
}

._fileDropzone_1rg2n_475 svg {
  color: #9ca3af;
}

._fileHint_1rg2n_505 {
  font-size: 0.8rem;
  color: #9ca3af;
}

._selectedFile_1rg2n_515 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f3f4f6;
}

._selectedFile_1rg2n_515 svg {
  color: #667eea;
  flex-shrink: 0;
}

._selectedFile_1rg2n_515 span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  color: #374151;
}

._removeFile_1rg2n_559 {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 4px;
  display: flex;
  transition: color 0.2s;
  flex-shrink: 0;
}

._removeFile_1rg2n_559:hover {
  color: #ef4444;
}

._hiddenInput_1rg2n_589 {
  display: none;
}

/* Submit Button */
._submitButton_1rg2n_599 {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}

._submitButton_1rg2n_599:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(102, 126, 234, 0.3);
}

._submitButton_1rg2n_599:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Error Banner */
._errorBanner_1rg2n_655 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #fef2f2;
  color: #dc2626;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 0.9rem;
}

/* States */
._loadingState_1rg2n_681,
._errorState_1rg2n_683,
._successState_1rg2n_685 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 40px 20px;
}

._loadingState_1rg2n_681 p,
._errorState_1rg2n_683 p {
  color: #6b7280;
  margin-top: 16px;
}

._errorState_1rg2n_683 h2 {
  color: #1f2937;
  margin: 16px 0 8px;
}

._errorState_1rg2n_683 svg {
  color: #f59e0b;
}

._successState_1rg2n_685 {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  min-height: 100vh;
}

._successIcon_1rg2n_747 {
  color: #4ade80;
}

._successState_1rg2n_685 h2 {
  font-size: 2rem;
  margin: 24px 0 12px;
}

._successNote_1rg2n_765 {
  opacity: 0.9;
  margin-top: 8px;
}

._backButton_1rg2n_775 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 12px 24px;
  background: white;
  color: #667eea;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: transform 0.2s;
}

._backButton_1rg2n_775:hover {
  transform: translateY(-2px);
}

._spinner_1rg2n_811 {
  animation: _spin_1rg2n_811 1s linear infinite;
}

@keyframes _spin_1rg2n_811 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 968px) {
  ._contentWrapper_1rg2n_107 {
    grid-template-columns: 1fr;
  }

  ._formCard_1rg2n_223 {
    position: static;
  }

  ._jobTitle_1rg2n_63 {
    font-size: 1.75rem;
  }
}

@media (max-width: 640px) {
  ._header_1rg2n_13 {
    padding: 40px 20px 60px;
  }

  ._jobDetails_1rg2n_127,
  ._formCard_1rg2n_223 {
    padding: 24px;
  }

  ._jobMeta_1rg2n_77 {
    gap: 12px;
  }

  ._metaItem_1rg2n_89 {
    font-size: 0.9rem;
  }

  ._jobTitle_1rg2n_63 {
    font-size: 1.5rem;
  }
}
/* Page Container */
._page_h0i2o_3 {
  min-height: 100vh;
  background: #ffffff;
  color: #111827;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Loading and Error States */
._loading_h0i2o_23,
._error_h0i2o_25 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 16px;
}

._errorText_h0i2o_43 {
  font-size: 18px;
  color: #dc2626;
  text-align: center;
}

._backButton_h0i2o_55 {
  padding: 10px 20px;
  background: #f3f4f6;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

._backButton_h0i2o_55:hover {
  background: #e5e7eb;
}

/* Container */
._container_h0i2o_85 {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Mobile Header (Visible only on mobile) */
._mobileHeader_h0i2o_101 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 20;
  border-bottom: 1px solid #f3f4f6;
}

@media (min-width: 768px) {
  ._mobileHeader_h0i2o_101 {
    display: none;
  }
}

._mobileHeaderActions_h0i2o_137 {
  display: flex;
  gap: 8px;
}

._mobileHeaderButton_h0i2o_147 {
  padding: 8px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

._mobileHeaderButton_h0i2o_147:hover {
  background: #f3f4f6;
}

._mobileHeaderIcon_h0i2o_179 {
  width: 24px;
  height: 24px;
  color: #1f2937;
}

/* Main Content */
._mainContent_h0i2o_193 {
  flex-grow: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

@media (min-width: 768px) {
  ._mainContent_h0i2o_193 {
    padding: 32px;
  }
}

._contentWrapper_h0i2o_221 {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 768px) {
  ._contentWrapper_h0i2o_221 {
    flex-direction: row;
    gap: 48px;
  }
}

@media (min-width: 1024px) {
  ._contentWrapper_h0i2o_221 {
    gap: 48px;
  }
}

/* Left Column */
._leftColumn_h0i2o_261 {
  width: 100%;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  ._leftColumn_h0i2o_261 {
    width: 66.666667%;
  }
}

/* Mobile Profile Header - Add padding on mobile */
._mobileProfileHeader_h0i2o_287 {
  padding: 0 16px;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  ._mobileProfileHeader_h0i2o_287 {
    display: none;
  }
}

/* Video Section */
._videoSection_h0i2o_311 {
  padding: 0;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  ._videoSection_h0i2o_311 {
    padding: 0 0 24px;
  }
}

._videoContainer_h0i2o_333 {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  ._videoContainer_h0i2o_333 {
    border-radius: 12px;
  }
}

/* Show cursor pointer only for thumbnail containers */
._videoContainer_h0i2o_333._thumbnailContainer_h0i2o_365 {
  cursor: pointer;
}

._videoPlayer_h0i2o_373 {
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
}

@media (min-width: 768px) {
  ._videoPlayer_h0i2o_373 {
    border-radius: 12px;
  }
}

/* Override VideoPlayer's padding-bottom aspect ratio since container already has aspect-ratio */
._videoPlayer_h0i2o_373 > div {
  width: 100%;
  height: 100%;
  padding-bottom: 0 !important;
  position: relative;
}

._videoPlayer_h0i2o_373 iframe,
._videoPlayer_h0i2o_373 video {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
}

@media (min-width: 768px) {
  ._videoPlayer_h0i2o_373 iframe,
  ._videoPlayer_h0i2o_373 video {
    border-radius: 12px;
  }
}

/* Ensure error and loading containers also fill the space */
._videoPlayer_h0i2o_373 ._errorContainer_h0i2o_453,
._videoPlayer_h0i2o_373 ._loadingContainer_h0i2o_455 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

._videoThumbnail_h0i2o_471 {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.7s ease;
}

._videoContainer_h0i2o_333:hover ._videoThumbnail_h0i2o_471 {
  transform: scale(1.05);
}

._videoOverlay_h0i2o_493 {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s;
}

._videoContainer_h0i2o_333:hover ._videoOverlay_h0i2o_493 {
  background: rgba(0, 0, 0, 0.2);
}

/* Play Button */
._playButton_h0i2o_517 {
  position: absolute;
  bottom: 16px;
  left: 16px;
  width: 56px;
  height: 56px;
  background: #FF4D88;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  transform: transition-transform 0.2s;
}

@media (min-width: 768px) {
  ._playButton_h0i2o_517 {
    top: 50%;
    left: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }
}

._videoContainer_h0i2o_333:hover ._playButton_h0i2o_517 {
  transform: scale(1.1);
}

@media (min-width: 768px) {
  ._videoContainer_h0i2o_333:hover ._playButton_h0i2o_517 {
    transform: translate(-50%, -50%) scale(1.1);
  }
}

._playIcon_h0i2o_591 {
  width: 24px;
  height: 24px;
  color: #000000;
  fill: #000000;
  margin-left: 2px;
}

@media (min-width: 768px) {
  ._playIcon_h0i2o_591 {
    width: 32px;
    height: 32px;
  }
}

/* Mobile Profile Header - padding already defined above */

._mobileProfileInfo_h0i2o_625 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

._mobileAvatar_h0i2o_639 {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: #e5e7eb;
}

._mobileAvatar_h0i2o_639 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

._mobileProfileText_h0i2o_669 {
  display: flex;
  flex-direction: column;
}

._mobileName_h0i2o_679 {
  font-size: 30px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.02em;
  margin: 0;
}

._mobileLocation_h0i2o_695 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #374151;
  font-weight: 500;
  margin-top: 4px;
}

._countryFlag_h0i2o_713 {
  font-size: 20px;
}

/* Mobile Stats Row */
._mobileStats_h0i2o_723 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 24px;
}

._mobileStatItem_h0i2o_741 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._mobileStatValue_h0i2o_753 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 18px;
}

._mobileStatIcon_h0i2o_769 {
  width: 16px;
  height: 16px;
  fill: #000000;
  color: #000000;
}

._mobileStatLabel_h0i2o_783 {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

/* Desktop Title Section */
._desktopTitleSection_h0i2o_797 {
  display: none;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  ._desktopTitleSection_h0i2o_797 {
    display: block;
  }
}

._desktopTitle_h0i2o_797 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: #111827;
}

._desktopBio_h0i2o_833 {
  color: #4b5563;
  line-height: 1.75;
  margin: 0;
}

/* Profile Summary */
._profileSummary_h0i2o_847 {
  padding: 0 16px 96px;
}

@media (min-width: 768px) {
  ._profileSummary_h0i2o_847 {
    padding: 0 0 0;
  }
}

._profileSummaryTitle_h0i2o_867 {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 16px 0;
}

@media (min-width: 768px) {
  ._profileSummaryTitle_h0i2o_867 {
    display: none;
  }
}

/* Highlights Section */
._highlightsSection_h0i2o_895 {
  margin-bottom: 24px;
}

._highlightsHeader_h0i2o_903 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

._highlightsIcon_h0i2o_917 {
  width: 20px;
  height: 20px;
  color: #111827;
}

._highlightsTitle_h0i2o_929 {
  font-weight: 600;
  font-size: 18px;
  margin: 0;
  color: #111827;
}

._highlightsTags_h0i2o_943 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

._highlightTag_h0i2o_955 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
}

._highlightTag_h0i2o_955:first-child {
  background: #E3F2FD;
}

._highlightTag_h0i2o_955:last-child {
  background: #FCE4EC;
}

._highlightTagIcon_h0i2o_987 {
  padding: 4px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

._highlightTagIconSvg_h0i2o_1005 {
  width: 12px;
  height: 12px;
}

._highlightTag_h0i2o_955:first-child ._highlightTagIconSvg_h0i2o_1005 {
  color: #2563eb;
}

._highlightTag_h0i2o_955:last-child ._highlightTagIconSvg_h0i2o_1005 {
  color: #ec4899;
}

._highlightTagText_h0i2o_1031 {
  font-weight: 500;
  color: #1f2937;
}

/* Desktop Reviews */
._desktopReviews_h0i2o_1043 {
  display: none;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #f3f4f6;
}

@media (min-width: 768px) {
  ._desktopReviews_h0i2o_1043 {
    display: block;
  }
}

._reviewsTitle_h0i2o_1069 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 24px 0;
  color: #111827;
}

._reviewsList_h0i2o_1083 {
  display: grid;
  gap: 24px;
}

._reviewCard_h0i2o_1093 {
  background: #f9fafb;
  padding: 24px;
  border-radius: 12px;
}

._reviewHeader_h0i2o_1105 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

._reviewAvatar_h0i2o_1119 {
  width: 40px;
  height: 40px;
  background: #dbeafe;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #2563eb;
  font-size: 14px;
}

._reviewInfo_h0i2o_1145 {
  flex: 1;
}

._reviewName_h0i2o_1153 {
  font-weight: 600;
  color: #111827;
}

._reviewDate_h0i2o_1163 {
  font-size: 12px;
  color: #6b7280;
}

._reviewStars_h0i2o_1173 {
  display: flex;
  margin-left: auto;
}

._reviewStar_h0i2o_1173 {
  width: 16px;
  height: 16px;
  fill: #fbbf24;
  color: #fbbf24;
}

._reviewText_h0i2o_1197 {
  color: #4b5563;
  margin: 0;
  line-height: 1.5;
}

._noReviews_h0i2o_1209 {
  color: #6b7280;
  text-align: center;
  padding: 24px;
}

/* Right Column - Sticky Booking Card */
._rightColumn_h0i2o_1223 {
  display: none;
  width: 33.333333%;
  position: relative;
}

@media (min-width: 768px) {
  ._rightColumn_h0i2o_1223 {
    display: block;
  }
}

._bookingCard_h0i2o_1247 {
  position: sticky;
  top: 96px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  background: #ffffff;
}

._bookingCardHeader_h0i2o_1267 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 24px;
}

._bookingCardAvatar_h0i2o_1283 {
  width: 96px;
  height: 96px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

._bookingCardAvatar_h0i2o_1283 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

._bookingCardName_h0i2o_1313 {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 4px 0;
}

._bookingCardLocation_h0i2o_1327 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #4b5563;
  font-weight: 500;
  margin: 4px 0 16px 0;
}

/* Desktop Stats Grid */
._bookingCardStats_h0i2o_1349 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  margin-bottom: 24px;
  background: #f9fafb;
  padding: 16px;
  border-radius: 12px;
}

._bookingCardStat_h0i2o_1349 {
  text-align: center;
}

._bookingCardStat_h0i2o_1349:last-child {
  border-left: 1px solid #e5e7eb;
  padding-left: 16px;
}

._bookingCardStatValue_h0i2o_1389 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 4px;
}

._bookingCardStatIcon_h0i2o_1409 {
  width: 16px;
  height: 16px;
  fill: #fbbf24;
  color: #fbbf24;
}

._bookingCardStatLabel_h0i2o_1423 {
  font-size: 12px;
  color: #6b7280;
}

/* Booking Card Actions */
._bookingCardActions_h0i2o_1435 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._priceRow_h0i2o_1447 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 8px;
}

._priceLabel_h0i2o_1461 {
  color: #4b5563;
  font-weight: 500;
}

._priceValue_h0i2o_1471 {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
}

._buyTrialButton_h0i2o_1483,
._messageButton_h0i2o_1485 {
  width: 100%;
  font-weight: 700;
  padding: 14px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
}

._buyTrialButton_h0i2o_1483 {
  background: #1e40af;
  color: #ffffff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

._buyTrialButton_h0i2o_1483:hover {
  background: #1e3a8a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
}

._messageButton_h0i2o_1485 {
  background: #ffffff;
  border: 2px solid #e5e7eb;
  color: #111827;
}

._messageButton_h0i2o_1485:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

._buttonIcon_h0i2o_1561 {
  width: 20px;
  height: 20px;
}

._guaranteeText_h0i2o_1571 {
  text-align: center;
  font-size: 12px;
  color: #6b7280;
  margin-top: 16px;
}

._guaranteeText_h0i2o_1571 p {
  margin: 0;
}

/* Mobile Sticky Bottom Action Bar */
._mobileBottomBar_h0i2o_1595 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  padding: 16px;
  display: flex;
  gap: 12px;
  z-index: 40;
  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05), 0 -2px 4px -2px rgba(0, 0, 0, 0.05);
}

/* Inline Mobile Bottom Bar (shown after package options) */
._mobileBottomBarInline_h0i2o_1625 {
  position: relative;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  padding: 16px;
  display: flex;
  gap: 12px;
  margin-top: 24px;
  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05), 0 -2px 4px -2px rgba(0, 0, 0, 0.05);
}

@media (min-width: 768px) {
  ._mobileBottomBar_h0i2o_1595 {
    display: none;
  }

  ._mobileBottomBarInline_h0i2o_1625 {
    display: none;
  }
}

._mobileBottomBarButton_h0i2o_1667 {
  width: 56px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s;
}

._mobileBottomBarButton_h0i2o_1667:hover {
  background: #f9fafb;
}

._mobileBottomBarButton_h0i2o_1667:active {
  background: #f3f4f6;
}

._mobileBottomBarIcon_h0i2o_1709 {
  width: 24px;
  height: 24px;
  color: #374151;
}

._mobileBottomBarPrimary_h0i2o_1721 {
  flex: 1;
  background: #1e40af;
  color: #ffffff;
  font-weight: 700;
  border-radius: 8px;
  border: none;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

._mobileBottomBarPrimary_h0i2o_1721:active {
  background: #1e3a8a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
}

/* Info Sections */
._infoSection_h0i2o_1761 {
  margin-bottom: 32px;
}

._sectionHeader_h0i2o_1769 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

._sectionIcon_h0i2o_1783 {
  width: 20px;
  height: 20px;
}

/* ========================================
   Skeleton Loading Styles
   ======================================== */

/* Shimmer Animation */
@keyframes _skeletonShimmer_h0i2o_1 {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Base Skeleton Style */
._skeletonBase_h0i2o_1823 {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  border-radius: 8px;
}

/* Video Skeleton */
._skeletonVideo_h0i2o_1839 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  border-radius: 0;
}

@media (min-width: 768px) {
  ._skeletonVideo_h0i2o_1839 {
    border-radius: 12px;
  }
}

/* Mobile Profile Header Skeleton */
._skeletonMobileAvatar_h0i2o_1877 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

._skeletonMobileName_h0i2o_1897 {
  height: 24px;
  width: 180px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}

._skeletonMobileLocation_h0i2o_1917 {
  height: 16px;
  width: 140px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  border-radius: 4px;
}

._skeletonMobileStatValue_h0i2o_1935 {
  height: 20px;
  width: 40px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 4px;
}

._skeletonMobileStatLabel_h0i2o_1955 {
  height: 12px;
  width: 60px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  border-radius: 4px;
}

/* Desktop Title Skeleton */
._skeletonDesktopTitle_h0i2o_1975 {
  height: 32px;
  width: 300px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 12px;
}

._skeletonDesktopBio_h0i2o_1995 {
  height: 16px;
  width: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}

/* Section Icons and Titles */
._skeletonSectionIcon_h0i2o_2017 {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
}

._skeletonSectionTitle_h0i2o_2035 {
  height: 18px;
  width: 120px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  border-radius: 4px;
}

/* Highlights Skeleton */
._skeletonHighlightTag_h0i2o_2055 {
  height: 40px;
  width: 140px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  border-radius: 8px;
}

/* Meta Badges Skeleton */
._skeletonMetaBadges_h0i2o_2075 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

._skeletonMetaBadge_h0i2o_2075 {
  height: 36px;
  width: 120px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  border-radius: 8px;
}

/* Language Tags Skeleton */
._skeletonLanguageTags_h0i2o_2107 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

._skeletonLanguageTag_h0i2o_2107 {
  height: 36px;
  width: 100px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  border-radius: 8px;
}

/* Profile Summary Title Skeleton */
._skeletonProfileSummaryTitle_h0i2o_2139 {
  height: 28px;
  width: 200px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  ._skeletonProfileSummaryTitle_h0i2o_2139 {
    display: none;
  }
}

/* Bio Lines Skeleton */
._skeletonBioLine_h0i2o_2173 {
  height: 16px;
  width: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}

/* Booking Card Skeleton */
._skeletonBookingAvatar_h0i2o_2195 {
  width: 96px;
  height: 96px;
  border-radius: 16px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  margin-bottom: 16px;
}

._skeletonBookingName_h0i2o_2215 {
  height: 28px;
  width: 180px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin: 0 auto 8px auto;
}

._skeletonBookingLocation_h0i2o_2235 {
  height: 16px;
  width: 140px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin: 0 auto;
}

._skeletonBookingStatValue_h0i2o_2255 {
  height: 20px;
  width: 50px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 4px;
}

._skeletonBookingStatLabel_h0i2o_2275 {
  height: 12px;
  width: 60px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  border-radius: 4px;
}

._skeletonPriceLabel_h0i2o_2293 {
  height: 14px;
  width: 120px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}

._skeletonPriceValue_h0i2o_2313 {
  height: 24px;
  width: 80px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  border-radius: 4px;
}

._skeletonBookButton_h0i2o_2331 {
  height: 48px;
  width: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  border-radius: 8px;
  margin-bottom: 12px;
}

._skeletonShareButton_h0i2o_2351 {
  height: 48px;
  width: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  border-radius: 8px;
}

/* Mobile Bottom Bar Skeleton */
._skeletonMobileBottomButton_h0i2o_2371 {
  width: 56px;
  height: 48px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  border-radius: 8px;
}

._skeletonMobileBottomPrimary_h0i2o_2389 {
  flex: 1;
  height: 48px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_h0i2o_1 1.5s ease-in-out infinite;
  border-radius: 8px;
}

._sectionTitle_h0i2o_2407 {
  font-weight: 600;
  font-size: 18px;
  margin: 0;
  color: #111827;
}

._sectionText_h0i2o_2421 {
  color: #4b5563;
  line-height: 1.75;
  margin: 0;
  font-size: 16px;
}

/* Languages List */
._languagesList_h0i2o_2437 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

._languageTag_h0i2o_2449 {
  padding: 6px 12px;
  background: #f3f4f6;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

/* Availability */
._availabilityList_h0i2o_2469 {
  margin-top: 8px;
}

._availabilityText_h0i2o_2477 {
  color: #4b5563;
  line-height: 1.75;
  margin: 0;
  font-size: 16px;
}

/* Package Options */
._packagesList_h0i2o_2493 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}

._packageCard_h0i2o_2507 {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  background: #f9fafb;
}

._packageHeader_h0i2o_2521 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

._packageSessions_h0i2o_2535 {
  font-weight: 600;
  font-size: 16px;
  color: #111827;
}

._packageDiscount_h0i2o_2547 {
  background: #1e40af;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

._packagePrice_h0i2o_2565 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._packageTotalPrice_h0i2o_2577 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

._packagePerSession_h0i2o_2589 {
  font-size: 14px;
  color: #6b7280;
}

/* Meta Badges - Matching Language Badge design */
._metaBadge_h0i2o_2601 {
  display: inline-block;
  padding: 6px 12px;
  background: #f3f4f6;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-right: 8px;
}

._desktopMeta_h0i2o_2623,
._mobileMeta_h0i2o_2625,
._bookingCardMeta_h0i2o_2627 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

._mobileMeta_h0i2o_2625 {
  margin-top: 8px;
}

._bookingCardMeta_h0i2o_2627 {
  justify-content: center;
  margin-top: 8px;
}

/* Custom Scrollbar */
._page_h0i2o_3::-webkit-scrollbar {
  width: 8px;
}

._page_h0i2o_3::-webkit-scrollbar-track {
  background: #f1f1f1;
}

._page_h0i2o_3::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}

._page_h0i2o_3::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}
/* Modern Split-Screen Login Design */
._pageContainer_i4sys_3 {
  display: flex;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  overflow-x: hidden;
  max-width: 100vw;
}

/* Left Side: Branding & Visual */
._leftSide_i4sys_23 {
  position: relative;
  width: 50%;
  background-color: #1e293b;
  overflow: hidden;
  display: flex;
}

._backgroundImage_i4sys_39 {
  position: absolute;
  inset: 0;
  z-index: 0;
}

._bgImg_i4sys_51 {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.6;
  mix-blend-mode: overlay;
  transition: opacity 0.2s ease-in-out;
  /* Ensure image is always visible once loaded */
  display: block;
  will-change: opacity;
}

._bgOverlay_i4sys_75 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30, 41, 59, 0.9) 0%, rgba(30, 41, 59, 0.4) 50%, transparent 100%);
}

._leftContent_i4sys_87 {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: 4rem;
}

._logoSection_i4sys_107 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

._logoIcon_i4sys_121 {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
}

._logoIconImg_i4sys_141 {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

._brandName_i4sys_153 {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

._heroSection_i4sys_167 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

._heroTitle_i4sys_179 {
  font-size: 3rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0;
}

._heroTitleAccent_i4sys_197 {
  color: #93c5fd;
}

._heroDescription_i4sys_205 {
  color: #cbd5e1;
  font-size: 1.125rem;
  max-width: 28rem;
  line-height: 1.75;
  margin: 0;
}

._trustedSection_i4sys_221 {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
}

._avatarGroup_i4sys_235 {
  display: flex;
  margin-left: -0.5rem;
}

._avatar_i4sys_235 {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 2px solid #1e293b;
  margin-left: -0.5rem;
}

._avatarCount_i4sys_261 {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 2px solid #1e293b;
  background-color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: -0.5rem;
}

._trustedText_i4sys_291 {
  color: #ffffff;
  font-size: 0.875rem;
}

._trustedTitle_i4sys_301 {
  font-weight: 600;
}

._trustedSubtitle_i4sys_309 {
  color: #cbd5e1;
}

._copyright_i4sys_317 {
  color: #94a3b8;
  font-size: 0.875rem;
}

/* Right Side: Form */
._rightSide_i4sys_329 {
  width: 50%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  background-color: #ffffff;
  max-width: 100%;
}

._mobileHeader_i4sys_351 {
  display: none;
  padding: 1.5rem;
  align-items: center;
  gap: 0.5rem;
}

._mobileLogoIcon_i4sys_365 {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
}

._mobileLogoIconImg_i4sys_385 {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

._mobileBrandName_i4sys_397 {
  color: #2563eb;
  font-size: 1.25rem;
  font-weight: 700;
  display: none;
}

._formContainer_i4sys_411 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 36rem;
  margin: 0 auto;
  width: 100%;
  padding: 3rem 1.5rem;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Form Header */
._formHeader_i4sys_439 {
  margin-bottom: 2.5rem;
}

._headerTitle_i4sys_447 {
  font-size: 1.875rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 0.5rem 0;
}

._headerDesc_i4sys_461 {
  color: #64748b;
  margin: 0;
}

/* Form Styles */
._form_i4sys_411 {
  display: flex;
  flex-direction: column;
}

._formGroup_i4sys_483 {
  margin-bottom: 1.5rem;
}

._label_i4sys_491 {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #0f172a;
  font-size: 0.875rem;
}

._passwordLabelRow_i4sys_507 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

._forgotLink_i4sys_521 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  transition: color 0.2s ease;
}

._forgotLink_i4sys_521:hover {
  color: #1d4ed8;
}

._inputWrapper_i4sys_545 {
  position: relative;
  display: flex;
  align-items: center;
}

._inputIcon_i4sys_557 {
  position: absolute;
  left: 0.75rem;
  color: #64748b;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
  z-index: 1;
}

._input_i4sys_545 {
  width: 100%;
  padding: 0.875rem 2.75rem 0.875rem 2.5rem;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  color: #0f172a;
  font-size: 0.875rem;
  line-height: 1.5;
  outline: none;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

._input_i4sys_545:focus {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

._input_i4sys_545:disabled {
  background-color: #f1f5f9;
  cursor: not-allowed;
  opacity: 0.7;
}

._input_i4sys_545::-moz-placeholder {
  color: #94a3b8;
}

._input_i4sys_545::placeholder {
  color: #94a3b8;
}

._inputError_i4sys_633 {
  border-color: #ef4444;
}

._inputError_i4sys_633:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

._eyeButton_i4sys_649 {
  position: absolute;
  right: 0.75rem;
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

._eyeButton_i4sys_649:hover {
  color: #334155;
}

._eyeIcon_i4sys_685 {
  width: 1.25rem;
  height: 1.25rem;
}


._fieldError_i4sys_697 {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: #ef4444;
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 0.5rem;
}

._errorIconSmall_i4sys_717 {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

/* Button Styles */
._submitBtn_i4sys_731 {
  width: 100%;
  padding: 1rem 1.5rem;
  border-radius: 0.75rem;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: #2563eb;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  margin-top: 1.5rem;
}

._submitBtn_i4sys_731:hover:not(:disabled) {
  background-color: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}

._submitBtn_i4sys_731:active:not(:disabled) {
  transform: translateY(0);
}

._submitBtn_i4sys_731:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* Divider */
._divider_i4sys_803 {
  position: relative;
  margin: 2rem 0;
}

._dividerLine_i4sys_813 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

._dividerBorder_i4sys_827 {
  width: 100%;
  border-top: 1px solid #e2e8f0;
}

._dividerText_i4sys_837 {
  position: relative;
  display: flex;
  justify-content: center;
}

._dividerTextSpan_i4sys_849 {
  background-color: #ffffff;
  padding: 0 12px;
  font-size: 14px;
  color: #64748b;
}

/* Social Buttons */
._socialButtons_i4sys_865 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

._socialBtn_i4sys_877 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background-color: #ffffff;
  color: #334155;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}

._socialBtn_i4sys_877:hover {
  background-color: #f8fafc;
}

._socialIcon_i4sys_917 {
  width: 20px;
  height: 20px;
}

/* Error Message */
._errorMessage_i4sys_929 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.75rem;
  color: #dc2626;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

._errorIcon_i4sys_717 {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* Sign In Section */
._signInSection_i4sys_971 {
  text-align: center;
  margin-top: 2.5rem;
}

._signInText_i4sys_981 {
  color: #64748b;
  margin: 0;
}

._signInLink_i4sys_991 {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}

._signInLink_i4sys_991:hover {
  color: #1d4ed8;
}

/* Seven Dots Loader Animation */
._sevenDotsLoader_i4sys_1013 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 16px;
  line-height: 1;
}

._sevenDotsLoader_i4sys_1013 span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  animation: _dotPulse_i4sys_1 1.4s ease-in-out infinite both;
  display: inline-block;
}

._sevenDotsLoader_i4sys_1013 span:nth-child(1) {
  animation-delay: -0.6s;
}

._sevenDotsLoader_i4sys_1013 span:nth-child(2) {
  animation-delay: -0.5s;
}

._sevenDotsLoader_i4sys_1013 span:nth-child(3) {
  animation-delay: -0.4s;
}

._sevenDotsLoader_i4sys_1013 span:nth-child(4) {
  animation-delay: -0.3s;
}

._sevenDotsLoader_i4sys_1013 span:nth-child(5) {
  animation-delay: -0.2s;
}

._sevenDotsLoader_i4sys_1013 span:nth-child(6) {
  animation-delay: -0.1s;
}

._sevenDotsLoader_i4sys_1013 span:nth-child(7) {
  animation-delay: 0;
}

@keyframes _dotPulse_i4sys_1 {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Responsive Design */
@media (max-width: 1024px) {
  ._leftSide_i4sys_23 {
    display: none;
  }

  ._rightSide_i4sys_329 {
    width: 100%;
  }

  ._mobileHeader_i4sys_351 {
    display: flex;
  }
}

@media (max-width: 640px) {
  ._pageContainer_i4sys_3 {
    overflow-x: hidden;
    max-width: 100vw;
  }

  ._rightSide_i4sys_329 {
    overflow-x: hidden;
    max-width: 100vw;
  }

  ._mobileHeader_i4sys_351 {
    padding: 1rem 1.5rem;
    padding-bottom: 0.5rem;
  }

  ._formContainer_i4sys_411 {
    justify-content: flex-start;
    padding: 1rem 1.5rem 3rem 1.5rem;
    overflow-x: hidden;
    max-width: 100%;
  }

  ._formHeader_i4sys_439 {
    margin-bottom: 1rem;
  }

  ._heroTitle_i4sys_179 {
    font-size: 2rem;
  }

  ._leftContent_i4sys_87 {
    padding: 2rem;
  }

  ._headerTitle_i4sys_447 {
    font-size: 1.5rem;
  }

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

@media (max-width: 480px) {
  ._mobileHeader_i4sys_351 {
    padding: 0.75rem 1rem;
    padding-bottom: 0.25rem;
  }

  ._formContainer_i4sys_411 {
    justify-content: flex-start;
    padding: 0.75rem 1rem 2rem 1rem;
  }

  ._formHeader_i4sys_439 {
    margin-bottom: 0.75rem;
  }

  ._input_i4sys_545 {
    font-size: 1rem;
    padding: 0.75rem 2.5rem 0.75rem 2.5rem;
  }

  ._submitBtn_i4sys_731 {
    padding: 0.875rem 1.25rem;
    font-size: 0.9375rem;
  }
}

@media (max-width: 305px) {
  ._formContainer_i4sys_411 {
    padding: 0.75rem 0.5rem 2rem 0.5rem;
  }

  ._mobileHeader_i4sys_351 {
    padding: 0.75rem 0.5rem;
    padding-bottom: 0.25rem;
  }
}
/* Split Screen Layout */
._pageContainer_y22az_3 {
  min-height: 100vh;
  display: flex;
  background-color: #ffffff;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

/* Left Side - Visual & Branding */
._leftSide_y22az_23 {
  position: relative;
  flex: 1;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  overflow: hidden;
  display: none;
}

@media (min-width: 1024px) {
  ._leftSide_y22az_23 {
    display: flex;
  }
}

._backgroundImage_y22az_51 {
  position: absolute;
  inset: 0;
  z-index: 0;
}

._bgImg_y22az_63 {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.6;
  mix-blend-mode: overlay;
  transition: opacity 0.2s ease-in-out;
  /* Ensure image is always visible once loaded */
  display: block;
  will-change: opacity;
}

._bgOverlay_y22az_87 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.4) 40%, transparent 100%);
}

._leftContent_y22az_99 {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 64px;
  min-height: 100vh;
}

._logoSection_y22az_121 {
  position: absolute;
  top: 64px;
  left: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 20;
}

._logoIcon_y22az_141 {
  width: 88px;
  height: 88px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

._logoIconImg_y22az_161 {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

._brandName_y22az_173 {
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

._heroSection_y22az_187 {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

._heroTitle_y22az_199 {
  font-size: 48px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}

._heroTitleAccent_y22az_217 {
  color: #93c5fd;
}

._heroDescription_y22az_225 {
  color: #cbd5e1;
  font-size: 18px;
  max-width: 500px;
  line-height: 1.7;
  margin: 0;
}

._trustedSection_y22az_241 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
}

._avatarGroup_y22az_255 {
  display: flex;
  margin-left: -8px;
}

._avatar_y22az_255 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #0f172a;
  margin-left: -8px;
  -o-object-fit: cover;
     object-fit: cover;
}

._avatarCount_y22az_283 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #0f172a;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  margin-left: -8px;
}

._trustedText_y22az_313 {
  color: #ffffff;
  font-size: 14px;
}

._trustedTitle_y22az_323 {
  font-weight: 600;
}

._trustedSubtitle_y22az_331 {
  color: #cbd5e1;
  font-size: 13px;
}

._copyright_y22az_341 {
  position: absolute;
  bottom: 64px;
  left: 64px;
  color: #94a3b8;
  font-size: 14px;
  z-index: 20;
}

/* Right Side - Form Area */
._rightSide_y22az_361 {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  background-color: #ffffff;
  max-width: 100%;
}

/* Mobile Header */
._mobileHeader_y22az_387 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 24px;
}

@media (min-width: 1024px) {
  ._mobileHeader_y22az_387 {
    display: none;
  }
}

._mobileLogoIcon_y22az_413 {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

._mobileLogoIconImg_y22az_433 {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

._mobileBrandName_y22az_445 {
  color: #2563eb;
  font-size: 20px;
  font-weight: 700;
  display: none;
}

/* Form Container */
._formContainer_y22az_461 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 672px;
  width: 100%;
  margin: 0 auto;
  padding: 48px 24px;
  box-sizing: border-box;
  overflow-x: hidden;
}

@media (min-width: 1024px) {
  ._formContainer_y22az_461 {
    padding: 48px;
  }
}

/* Progress Section */
._progressSection_y22az_501 {
  margin-bottom: 40px;
}

._progressTopRow_y22az_509 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

._stepLabel_y22az_523 {
  font-size: 14px;
  font-weight: 600;
  color: #2563eb;
  letter-spacing: 0.01em;
}

._stepName_y22az_537 {
  font-size: 14px;
  color: #64748b;
}

._progressBarContainer_y22az_547 {
  height: 8px;
  background-color: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}

._progressBar_y22az_547 {
  height: 100%;
  background: linear-gradient(90deg, #2563eb 0%, #1d4ed8 100%);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Form Header */
._formHeader_y22az_577 {
  margin-bottom: 32px;
}

._headerTitle_y22az_585 {
  font-size: 30px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
}

._headerDesc_y22az_601 {
  font-size: 16px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

/* Form Styles */
._step_y22az_523 {
  display: flex;
  flex-direction: column;
}

._form_y22az_461 {
  display: flex;
  flex-direction: column;
}

._formGroup_y22az_637 {
  margin-bottom: 24px;
}

._row2_y22az_645 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 0;
}

._row2_y22az_645 ._formGroup_y22az_637 {
  margin-bottom: 20px;
}

._label_y22az_667 {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #334155;
  font-size: 14px;
  letter-spacing: 0.01em;
}

._inputWrapper_y22az_685 {
  position: relative;
  display: flex;
  align-items: center;
}

._inputIcon_y22az_697 {
  position: absolute;
  left: 16px;
  color: #94a3b8;
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: 1;
}

._inputHint_y22az_717 {
  margin-top: 8px;
  font-size: 12px;
  color: #64748b;
}

._input_y22az_685 {
  width: 100%;
  padding: 14px 16px 14px 48px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  color: #0f172a;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  outline: none;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

._input_y22az_685:focus {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

._input_y22az_685:disabled {
  background-color: #f1f5f9;
  cursor: not-allowed;
  opacity: 0.7;
}

._input_y22az_685::-moz-placeholder {
  color: #94a3b8;
}

._input_y22az_685::placeholder {
  color: #94a3b8;
}

._inputError_y22az_787 {
  border-color: #ef4444;
}

._inputError_y22az_787:focus {
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
}


._fieldError_y22az_805 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ef4444;
  font-size: 13px;
  font-weight: 500;
  margin-top: 6px;
}

._errorIconSmall_y22az_825 {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Phone Info Box */
._phoneInfoBox_y22az_839 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background-color: #dbeafe;
  border: 1px solid #93c5fd;
  border-radius: 12px;
  margin-bottom: 24px;
}

._shieldIcon_y22az_861 {
  width: 20px;
  height: 20px;
  color: #2563eb;
  flex-shrink: 0;
  margin-top: 2px;
}

._phoneInfoText_y22az_877 {
  font-size: 14px;
  color: #1e40af;
  font-weight: 500;
  margin: 0;
}

/* OTP Styles */
._otpContainer_y22az_893 {
  margin-bottom: 24px;
}

._otpInfo_y22az_901 {
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: start;
  gap: 12px;
  margin-bottom: 24px;
}

._otpInfoIcon_y22az_923 {
  width: 20px;
  height: 20px;
  color: #2563eb;
  flex-shrink: 0;
  margin-top: 2px;
}

._otpInfoContent_y22az_939 {
  flex: 1;
}

._otpInfoText_y22az_947 {
  font-size: 14px;
  color: #1e3a8a;
  font-weight: 500;
  margin: 0 0 4px 0;
}

._changePhoneBtn_y22az_961 {
  background: none;
  border: none;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: color 0.2s ease;
}

._changePhoneBtn_y22az_961:hover {
  color: #1d4ed8;
}

._otpInputs_y22az_993 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 24px;
}

._otpInput_y22az_993 {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background-color: #f8fafc;
  color: #0f172a;
  transition: all 0.2s ease;
  outline: none;
}

._otpInput_y22az_993:focus {
  border-color: #2563eb;
  background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

._otpInput_y22az_993._inputError_y22az_787 {
  border-color: #ef4444;
  background-color: #fef2f2;
}

._attemptsWarning_y22az_1057 {
  padding: 16px;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  color: #dc2626;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 24px;
}

/* Button Styles */
._buttonGroup_y22az_1081 {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

._buttonContainer_y22az_1093 {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

._submitBtn_y22az_1105 {
  width: 100%;
  padding: 16px 24px;
  border-radius: 12px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
}

._buttonContainer_y22az_1093 ._submitBtn_y22az_1105 {
  flex: 1;
}

._submitBtn_y22az_1105:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4);
}

._submitBtn_y22az_1105:active:not(:disabled) {
  transform: translateY(0);
}

._submitBtn_y22az_1105:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

._backBtn_y22az_1181 {
  padding: 16px 24px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #ffffff;
  color: #334155;
  flex: 1;
}

._backBtn_y22az_1181:hover:not(:disabled) {
  background-color: #f8fafc;
  border-color: #cbd5e1;
}

._backBtn_y22az_1181:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Resend Section */
._resendSection_y22az_1239 {
  text-align: center;
  margin-top: 24px;
  margin-bottom: 16px;
}

._resendText_y22az_1251 {
  color: #64748b;
  font-size: 14px;
  margin: 0 0 4px 0;
}

._resendInfo_y22az_1263 {
  color: #64748b;
  font-size: 14px;
  margin: 0;
}

._resendBtn_y22az_1275 {
  background: none;
  border: none;
  color: #2563eb;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
  margin-top: 4px;
}

._resendBtn_y22az_1275:hover:not(:disabled) {
  color: #1d4ed8;
}

._resendBtn_y22az_1275:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* Social Buttons */
._socialButtons_y22az_1321 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

._socialBtn_y22az_1333 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background-color: #ffffff;
  color: #0f172a;
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

._socialBtn_y22az_1333:hover {
  background-color: #f8fafc;
}

._socialIcon_y22az_1373 {
  width: 20px;
  height: 20px;
}

/* Terms Checkbox */
._termsCheckbox_y22az_1385 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 8px;
  margin-bottom: 16px;
}

._checkbox_y22az_1401 {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  cursor: pointer;
  margin-top: 2px;
  accent-color: #2563eb;
}

._checkboxLabel_y22az_1421 {
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
  cursor: pointer;
}

._termsLink_y22az_1435 {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}

._termsLink_y22az_1435:hover {
  color: #1d4ed8;
}

._resendBtn_y22az_1275 {
  background: none;
  border: none;
  color: #2563eb;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

._resendBtn_y22az_1275:hover:not(:disabled) {
  color: #1d4ed8;
}

._resendBtn_y22az_1275:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Error Message */
._errorMessage_y22az_1497 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  color: #dc2626;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 24px;
}

._errorIcon_y22az_825 {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Form Layout */
._row2_y22az_645 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Social Login */
._divider_y22az_1553 {
  position: relative;
  margin: 32px 0;
}

._dividerLine_y22az_1563 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

._dividerBorder_y22az_1577 {
  width: 100%;
  border-top: 1px solid #e2e8f0;
}

._dividerText_y22az_1587 {
  position: relative;
  display: flex;
  justify-content: center;
}

._dividerTextSpan_y22az_1599 {
  background-color: #ffffff;
  padding: 0 12px;
  font-size: 14px;
  color: #64748b;
}

._socialButtons_y22az_1321 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

._socialBtn_y22az_1333 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background-color: #ffffff;
  color: #334155;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}

._socialBtn_y22az_1333:hover {
  background-color: #f8fafc;
}

._socialIcon_y22az_1373 {
  width: 20px;
  height: 20px;
}

/* Sign In Section */
._signInSection_y22az_1677 {
  text-align: center;
  margin-top: 40px;
}

._signInText_y22az_1687 {
  color: #64748b;
  font-size: 14px;
  margin: 0;
}

._signInLink_y22az_1699 {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

._signInLink_y22az_1699:hover {
  color: #1d4ed8;
}

/* Checkbox Styles */
._checkboxContainer_y22az_1723 {
  display: flex;
  align-items: start;
  gap: 12px;
  margin-top: 24px;
}

._checkbox_y22az_1401 {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  cursor: pointer;
  margin-top: 2px;
  flex-shrink: 0;
}

._checkbox_y22az_1401:checked {
  accent-color: #2563eb;
}

._checkboxLabel_y22az_1421 {
  font-size: 14px;
  color: #334155;
  line-height: 1.5;
  cursor: pointer;
}

._checkboxLabel_y22az_1421 a {
  color: #2563eb;
  font-weight: 500;
  text-decoration: none;
}

._checkboxLabel_y22az_1421 a:hover {
  color: #1d4ed8;
}

/* Loading Spinner */
._sevenDotsLoader_y22az_1801 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 16px;
  line-height: 1;
}

._sevenDotsLoader_y22az_1801 span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  animation: _dotPulse_y22az_1 1.4s ease-in-out infinite both;
  display: inline-block;
}

._sevenDotsLoader_y22az_1801 span:nth-child(1) {
  animation-delay: -0.6s;
}

._sevenDotsLoader_y22az_1801 span:nth-child(2) {
  animation-delay: -0.5s;
}

._sevenDotsLoader_y22az_1801 span:nth-child(3) {
  animation-delay: -0.4s;
}

._sevenDotsLoader_y22az_1801 span:nth-child(4) {
  animation-delay: -0.3s;
}

._sevenDotsLoader_y22az_1801 span:nth-child(5) {
  animation-delay: -0.2s;
}

._sevenDotsLoader_y22az_1801 span:nth-child(6) {
  animation-delay: -0.1s;
}

._sevenDotsLoader_y22az_1801 span:nth-child(7) {
  animation-delay: 0;
}

@keyframes _dotPulse_y22az_1 {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Responsive design */
@media (max-width: 1024px) {
  ._logoSection_y22az_121 {
    top: 24px;
    left: 24px;
  }

  ._copyright_y22az_341 {
    bottom: 24px;
    left: 24px;
  }

  ._leftContent_y22az_99 {
    padding: 24px;
  }
}

@media (max-width: 640px) {
  ._pageContainer_y22az_3 {
    overflow-x: hidden;
    max-width: 100vw;
  }

  ._rightSide_y22az_361 {
    overflow-x: hidden;
    max-width: 100vw;
  }

  ._formContainer_y22az_461 {
    justify-content: flex-start;
    padding: 16px 16px 24px 16px;
    overflow-x: hidden;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  ._pageContainer_y22az_3 {
    overflow-x: hidden;
    max-width: 100vw;
  }

  ._rightSide_y22az_361 {
    overflow-x: hidden;
    max-width: 100vw;
  }

  ._mobileHeader_y22az_387 {
    padding: 16px 24px;
    padding-bottom: 8px;
  }

  ._formContainer_y22az_461 {
    justify-content: flex-start;
    padding: 12px 16px 24px 16px;
    overflow-x: hidden;
    max-width: 100%;
  }

  ._progressSection_y22az_501 {
    margin-bottom: 16px;
  }

  ._heroTitle_y22az_199 {
    font-size: 36px;
  }

  ._headerTitle_y22az_585 {
    font-size: 24px;
  }

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

  ._otpInputs_y22az_993 {
    gap: 6px;
  }

  ._otpInput_y22az_993 {
    width: 42px;
    height: 52px;
    font-size: 20px;
  }

  ._buttonContainer_y22az_1093 {
    flex-direction: column;
  }

  ._backBtn_y22az_1181,
  ._submitBtn_y22az_1105 {
    width: 100%;
  }

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

  ._logoSection_y22az_121 {
    top: 16px;
    left: 16px;
  }

  ._copyright_y22az_341 {
    bottom: 16px;
    left: 16px;
    font-size: 12px;
  }

  ._leftContent_y22az_99 {
    padding: 16px;
  }
}

@media (max-width: 305px) {
  ._formContainer_y22az_461 {
    padding: 12px 8px 24px 8px;
  }

  ._mobileHeader_y22az_387 {
    padding: 12px 16px;
    padding-bottom: 8px;
  }
}
/* ===================================
   DASHBOARD PAGE LAYOUT SYSTEM
   Professional Spacing & Structure
   =================================== */

/* Main Page Container */
._page_8ilrf_13 {
  min-height: 100%;
  background: transparent;
  width: 100%;
  overflow-x: hidden;
}

/* Section Wrapper - Controls ALL spacing between sections */
._sectionWrapper_8ilrf_29 {
  /* Vertical Spacing */
  padding-top: clamp(80px, 10vw, 120px);
  padding-bottom: clamp(80px, 10vw, 120px);
  
  /* Horizontal Spacing */
  padding-left: clamp(20px, 5vw, 80px);
  padding-right: clamp(20px, 5vw, 80px);
  
  /* Ensures sections take full width */
  width: 100%;
  box-sizing: border-box;
  background: white;
}

/* Gradient Transition Section - Merges hero and stats backgrounds */
._gradientTransition_8ilrf_61 {
  height: 6px;
  background: linear-gradient(to right, #F9FBF9, #ffffff);
  width: 100%;
}

/* Stats Carousel Section */
._statsSection_8ilrf_75 {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px 60px 40px 60px;
  background: transparent;
}

/* Subscriptions Section Wrapper - Clean white background */
._sectionWrapper_8ilrf_29._subscriptionsSection_8ilrf_93 {
  background: #ffffff;
}

/* Assignments Section Wrapper - Clean white background */
._sectionWrapper_8ilrf_29._assignmentsSection_8ilrf_103 {
  background: #ffffff;
}

/* Remove bottom padding from last section */
._sectionWrapper_8ilrf_29:last-child {
  padding-bottom: clamp(60px, 8vw, 100px);
}

/* ===================================
   RESPONSIVE SPACING ADJUSTMENTS
   =================================== */

/* Extra Large Screens (1600px+) - Maximum breathing room */
@media (min-width: 1600px) {
  ._sectionWrapper_8ilrf_29 {
    padding-top: 140px;
    padding-bottom: 140px;
    padding-left: 100px;
    padding-right: 100px;
  }
  
  ._sectionWrapper_8ilrf_29:last-child {
    padding-bottom: 120px;
  }
}

/* Large Desktop (1200px - 1599px) - Generous spacing */
@media (min-width: 1200px) and (max-width: 1599px) {
  ._sectionWrapper_8ilrf_29 {
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 60px;
    padding-right: 60px;
  }
  
  ._sectionWrapper_8ilrf_29:last-child {
    padding-bottom: 80px;
  }
  
  ._statsSection_8ilrf_75 {
    padding: 20px 60px 40px 60px;
  }
}

/* Medium Desktop (992px - 1199px) - Comfortable spacing */
@media (min-width: 992px) and (max-width: 1199px) {
  ._sectionWrapper_8ilrf_29 {
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: 40px;
    padding-right: 40px;
  }
  
  ._sectionWrapper_8ilrf_29:last-child {
    padding-bottom: 60px;
  }
  
  ._statsSection_8ilrf_75 {
    padding: 18px 40px 35px 40px;
    max-width: 100%;
  }
}

/* Tablet (771px - 991px) - Balanced spacing */
@media (min-width: 771px) and (max-width: 991px) {
  ._sectionWrapper_8ilrf_29 {
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  ._sectionWrapper_8ilrf_29:last-child {
    padding-bottom: 50px;
  }
  
  ._statsSection_8ilrf_75 {
    padding: 15px 25px 30px 25px;
    max-width: 100%;
  }
}

/* Small Tablet (576px - 770px) - Compact but breathable */
@media (min-width: 576px) and (max-width: 770px) {
  ._sectionWrapper_8ilrf_29 {
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 24px;
    padding-right: 24px;
  }
  
  ._sectionWrapper_8ilrf_29:last-child {
    padding-bottom: 40px;
  }
  
  ._statsSection_8ilrf_75 {
    max-width: 100%;
    padding: 15px 24px 30px 24px;
  }
}

/* Mobile (320px - 575px) - Optimized for small screens */
@media (max-width: 575px) {
  ._sectionWrapper_8ilrf_29 {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 16px;
    padding-right: 16px;
  }
  
  ._sectionWrapper_8ilrf_29:last-child {
    padding-bottom: 32px;
  }
  
  ._statsSection_8ilrf_75 {
    padding: 12px 16px 24px 16px;
    max-width: 100%;
  }
}

/* Ultra Small Screens (below 320px) - Minimal but functional */
@media (max-width: 319px) {
  ._sectionWrapper_8ilrf_29 {
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 12px;
    padding-right: 12px;
  }
  
  ._sectionWrapper_8ilrf_29:last-child {
    padding-bottom: 24px;
  }
}
/* ===================================
   DASHBOARD HERO SECTION
   =================================== */

._welcomeBackground_1y01z_9 {
  width: 100%;
  background: linear-gradient(to right, #F8FAFC, #F9FBF9);
}

._welcomeHeader_1y01z_19 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: nowrap;
  padding: 30px 60px;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

._welcomeTitle_1y01z_45 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  color: #111827;
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
}

._welcomeName_1y01z_65 {
  color: #1e40af;
}

._buttonGroup_1y01z_73 {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

._primaryButton_1y01z_91 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #1e3a8a;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

._primaryButton_1y01z_91:hover {
  background: #1e40af;
  transform: translateY(-1px);
}

._secondaryButton_1y01z_135 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fbbf24;
  color: #111827;
  border: none;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

._secondaryButton_1y01z_135:hover {
  background: #f59e0b;
  transform: translateY(-1px);
}

._buttonIcon_1y01z_179 {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

/* ===================================
   RESPONSIVE DESIGN - STUNNING UX
   =================================== */

/* Large tablets and below */
@media (max-width: 1024px) {
  ._welcomeHeader_1y01z_19 {
    padding: 25px 40px;
    gap: 16px;
    max-width: 100%;
  }
  
  ._welcomeTitle_1y01z_45 {
    font-size: 20px;
  }
  
  ._buttonGroup_1y01z_73 {
    gap: 10px;
  }
  
  ._primaryButton_1y01z_91,
  ._secondaryButton_1y01z_135 {
    padding: 8px 12px;
    font-size: 13px;
    gap: 6px;
  }
}

/* Tablets */
@media (max-width: 770px) {
  ._welcomeHeader_1y01z_19 {
    padding: 20px 25px;
    gap: 12px;
  }
  
  ._welcomeTitle_1y01z_45 {
    font-size: 18px;
  }
  
  ._buttonGroup_1y01z_73 {
    gap: 8px;
  }
  
  ._primaryButton_1y01z_91,
  ._secondaryButton_1y01z_135 {
    padding: 7px 10px;
    font-size: 12px;
    gap: 5px;
  }
  
  ._buttonIcon_1y01z_179 {
    width: 12px;
    height: 12px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  ._welcomeHeader_1y01z_19 {
    padding: 18px 20px;
    gap: 8px;
  }
  
  ._welcomeTitle_1y01z_45 {
    font-size: 16px;
  }
  
  ._welcomeName_1y01z_65 {
    display: inline;
  }
  
  ._buttonGroup_1y01z_73 {
    gap: 6px;
  }
  
  ._primaryButton_1y01z_91,
  ._secondaryButton_1y01z_135 {
    padding: 6px 8px;
    font-size: 11px;
    gap: 4px;
  }
  
  ._buttonIcon_1y01z_179 {
    width: 11px;
    height: 11px;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  ._welcomeHeader_1y01z_19 {
    padding: 16px;
    gap: 6px;
  }
  
  ._welcomeTitle_1y01z_45 {
    font-size: 16px;
  }
  
  ._primaryButton_1y01z_91,
  ._secondaryButton_1y01z_135 {
    padding: 7px 10px;
    font-size: 12px;
    gap: 4px;
  }
  
  ._buttonIcon_1y01z_179 {
    width: 12px;
    height: 12px;
  }
}

/* Very small screens - wrap buttons below */
@media (max-width: 450px) {
  ._welcomeHeader_1y01z_19 {
    flex-wrap: wrap;
    gap: 12px;
  }
  
  ._welcomeTitle_1y01z_45 {
    font-size: 18px;
    flex: 1 1 100%;
  }
  
  ._buttonGroup_1y01z_73 {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Extra small screens */
@media (max-width: 360px) {
  ._welcomeHeader_1y01z_19 {
    padding: 14px 12px;
  }
  
  ._welcomeTitle_1y01z_45 {
    font-size: 16px;
  }
  
  ._buttonGroup_1y01z_73 {
    gap: 6px;
  }
  
  ._primaryButton_1y01z_91,
  ._secondaryButton_1y01z_135 {
    padding: 6px 8px;
    font-size: 11px;
    gap: 4px;
  }
  
  ._buttonIcon_1y01z_179 {
    width: 11px;
    height: 11px;
  }
}
/* ===================================
   DASHBOARD STATS SECTION
   =================================== */

._section_18tow_9 {
  max-width: 1200px;
  margin: 0 auto;
}

._heroStatsContainer_18tow_19 {
  width: 100%;
  max-width: 100%;
}

._heroStatsContainer_18tow_19 ._sliderContainer_18tow_29 {
  padding: 0;
}

._heroStatsContainer_18tow_19 ._statCard_18tow_37 {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

._heroStatsContainer_18tow_19 ._statCard_18tow_37:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 1);
}

._sliderContainer_18tow_29 {
  padding: 0;
}

._slideItem_18tow_71 {
  padding: 0 8px;
  margin: 5px 0;
}

._statsGrid_18tow_81 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

._statCard_18tow_37 {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
  margin: 2px 0;
}

._statCard_18tow_37:hover {
  transform: translateY(-2px);
  box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.04);
}

._statCard_18tow_37:hover ._statIcon_18tow_127 {
  transform: scale(1.1);
}

._statContent_18tow_135 {
  flex: 1;
  text-align: left;
}

._statTitle_18tow_145 {
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 8px;
  text-align: left;
}

._statValue_18tow_161 {
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  line-height: 1;
  text-align: left;
}

._statIcon_18tow_127 {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  padding: 10px;
  transition: transform 0.2s ease;
}

._pendingBids_18tow_203 {
  background: #FFFDF5;
  border: 1px solid #E6D7A3;
  position: relative;
}

._pendingBids_18tow_203 ._statIcon_18tow_127 {
  background: #FFF0C2;
  border: 1px solid #E6D7A3;
  color: #D4A574;
}


._activeTasks_18tow_229 {
  background: white;
  border: 1px solid #D0E0F0;
}

._activeTasks_18tow_229 ._statIcon_18tow_127 {
  background: #F0F8FF;
  border: 1px solid #D0E0F0;
  color: #3366CC;
}

._upcomingSessions_18tow_251 {
  background: white;
  border: 1px solid #D9F2D9;
}

._upcomingSessions_18tow_251 ._statIcon_18tow_127 {
  background: #E6F7E6;
  border: 1px solid #D9F2D9;
  color: #4CAF50;
}

._totalAssignments_18tow_273 {
  background: white;
  border: 1px solid #E9D5FF;
}

._totalAssignments_18tow_273 ._statIcon_18tow_127 {
  background: #EFE7F9;
  border: 1px solid #E9D5FF;
  color: #8A5CF6;
}

/* ===================================
   SLICK CAROUSEL CUSTOM STYLES
   =================================== */

._sliderContainer_18tow_29 .slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

._sliderContainer_18tow_29 .slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 10px 0;
}

._sliderContainer_18tow_29 .slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

._sliderContainer_18tow_29 .slick-slide {
  display: block;
  float: left;
  height: auto;
  min-height: 1px;
}

._sliderContainer_18tow_29 .slick-slide > div {
  height: 100%;
  display: flex;
}

._sliderContainer_18tow_29 .slick-dots {
  position: absolute;
  bottom: -40px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

._sliderContainer_18tow_29 .slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

._sliderContainer_18tow_29 .slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}

._sliderContainer_18tow_29 .slick-dots li button:before {
  font-family: 'slick';
  font-size: 6px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: '•';
  text-align: center;
  opacity: 0.25;
  color: #36457F;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._sliderContainer_18tow_29 .slick-dots li.slick-active button:before {
  opacity: 0.75;
  color: #36457F;
}

._sliderContainer_18tow_29 .slick-prev,
._sliderContainer_18tow_29 .slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
  z-index: 10;
}

._sliderContainer_18tow_29 .slick-prev:hover,
._sliderContainer_18tow_29 .slick-prev:focus,
._sliderContainer_18tow_29 .slick-next:hover,
._sliderContainer_18tow_29 .slick-next:focus {
  color: transparent;
  outline: none;
  background: transparent;
}

._sliderContainer_18tow_29 .slick-prev:hover:before,
._sliderContainer_18tow_29 .slick-prev:focus:before,
._sliderContainer_18tow_29 .slick-next:hover:before,
._sliderContainer_18tow_29 .slick-next:focus:before {
  opacity: 1;
}

._sliderContainer_18tow_29 .slick-prev:before,
._sliderContainer_18tow_29 .slick-next:before {
  font-family: 'slick';
  font-size: 20px;
  line-height: 1;
  opacity: 0.75;
  color: #36457F;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._sliderContainer_18tow_29 .slick-prev {
  left: -25px;
}

._sliderContainer_18tow_29 .slick-prev:before {
  content: '←';
}

._sliderContainer_18tow_29 .slick-next {
  right: -25px;
}

._sliderContainer_18tow_29 .slick-next:before {
  content: '→';
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

/* Hero Stats Container Responsive */
@media (max-width: 1024px) {
  ._heroStatsContainer_18tow_19 ._sliderContainer_18tow_29 {
    padding: 0;
  }
  
  ._heroStatsContainer_18tow_19 ._slideItem_18tow_71 {
    padding: 0 4px;
  }
}

@media (max-width: 768px) {
  ._heroStatsContainer_18tow_19 ._sliderContainer_18tow_29 {
    padding: 0 0 20px 0;
  }
  
  ._heroStatsContainer_18tow_19 ._slideItem_18tow_71 {
    padding: 0 3px;
  }
  
  ._heroStatsContainer_18tow_19 ._statCard_18tow_37 {
    padding: 16px;
  }
  
  ._heroStatsContainer_18tow_19 ._statContent_18tow_135 {
    text-align: left;
  }
  
  ._heroStatsContainer_18tow_19 ._statTitle_18tow_145 {
    text-align: left;
  }
  
  ._heroStatsContainer_18tow_19 ._statValue_18tow_161 {
    text-align: left;
  }
}

@media (max-width: 1024px) {
  ._sliderContainer_18tow_29 {
    padding: 0;
  }
  
  ._slideItem_18tow_71 {
    padding: 0 6px;
  }
}

@media (max-width: 768px) {
  ._sliderContainer_18tow_29 {
    padding: 0 0 20px 0;
  }
  
  ._slideItem_18tow_71 {
    padding: 0 4px;
  }
  
  ._statCard_18tow_37 {
    padding: 16px;
  }
  
  ._statValue_18tow_161 {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  ._sliderContainer_18tow_29 {
    padding: 0 0 20px 0;
  }
  
  ._slideItem_18tow_71 {
    padding: 0 2px;
  }
  
  ._statCard_18tow_37 {
    padding: 14px;
  }
  
  ._statValue_18tow_161 {
    font-size: 18px;
    text-align: left;
  }
  
  ._statTitle_18tow_145 {
    font-size: 12px;
    text-align: left;
  }
  
  ._statContent_18tow_135 {
    text-align: left;
  }
}
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/* Slider */
.slick-loading .slick-list
{
    background: #fff url('/build/assets/ajax-loader-BcnMEykj.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('/build/assets/slick-Bi9J8BMx.eot');
    src: url('/build/assets/slick-Bi9J8BMx.eot?#iefix') format('embedded-opentype'), url('/build/assets/slick-BlUtDIuC.woff') format('woff'), url('/build/assets/slick-DWzRxEMf.ttf') format('truetype'), url('/build/assets/slick-BlzDm7g2.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}
/* ===================================
   ASSIGNMENTS SECTION
   =================================== */

._section_oo97g_9 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

._tabs_oo97g_21 {
  display: flex;
  background: #F9FAFB;
  border-radius: 12px;
  padding: 4px;
  margin: 0 auto 24px auto;
  border: 1px solid #F9FAFB;
  width: -moz-fit-content;
  width: fit-content;
}

._tab_oo97g_21 {
  padding: 6px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  text-align: center;
  min-width: 200px;
}

._tab_oo97g_21._active_oo97g_65 {
  background: white;
}

._tab_oo97g_21:not(._active_oo97g_65) {
  background: #F9FAFB;
}

._cardsContainer_oo97g_81 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

._card_oo97g_81 {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #E5E7EB;
  margin-bottom: 20px;
}

._cardHeader_oo97g_111 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}

._cardTitle_oo97g_127 {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  line-height: 1.3;
}

._statusTag_oo97g_143 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

._statusTag_oo97g_143._pendingBids_oo97g_167 {
  background: #FEF3C7;
  color: #92400E;
  border: none;
  padding: 4px 8px;
  border-radius: 8px;
}

._statusTag_oo97g_143._inProgress_oo97g_183 {
  background: #DBEAFE;
  color: #1E40AF;
  border: 1px solid #93C5FD;
  padding: 2px 5px;
  border-radius: 8px;
}

._description_oo97g_199 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: #6B7280;
  margin: 0 0 16px 0;
}

._assignmentDetails_oo97g_215 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 16px;
}

._detailItem_oo97g_229 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #6B7280;
  font-weight: 500;
}

._cardFooter_oo97g_247 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-top: 1px solid #E5E7EB;
  padding-top: 16px;
  margin-top: 16px;
}

._actionButton_oo97g_267 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid;
}

._actionButton_oo97g_267._primary_oo97g_293 {
  background: white;
  color: #1E40AF;
  border-color: #1E40AF;
}

._actionButton_oo97g_267._primary_oo97g_293:hover {
  background: #1E40AF;
  color: white;
}

._actionButton_oo97g_267._secondary_oo97g_315 {
  background: #FCD34D;
  color: #212121;
  border-color: #FCD34D;
}

._actionButton_oo97g_267._secondary_oo97g_315:hover {
  background: #FCD34D;
  color: #212121;
}

._assignedTo_oo97g_337 {
  font-size: 13px;
  color: #6B7280;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}

._assignedLabel_oo97g_355 {
  color: #6B7280;
  font-weight: 700;
}

._assignedName_oo97g_365 {
  color: #000000;
  font-weight: 700;
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

/* Large Desktop (1400px+) - Enhanced desktop experience */
@media (min-width: 1400px) {
  ._tabs_oo97g_21 {
    margin-bottom: 32px;
  }
  
  ._tab_oo97g_21 {
    padding: 8px 24px;
    font-size: 15px;
    min-width: 220px;
  }
}

/* Desktop (1200px - 1399px) - Standard desktop (unchanged) */
@media (max-width: 1399px) and (min-width: 1200px) {
  /* Desktop design remains intact */
}

/* Large Tablet (1024px - 1199px) - Tablet landscape */
@media (max-width: 1199px) and (min-width: 1024px) {
  ._tabs_oo97g_21 {
    margin-bottom: 28px;
  }
  
  ._tab_oo97g_21 {
    padding: 6px 18px;
    font-size: 14px;
    min-width: 180px;
  }
}

/* Tablet Portrait (768px - 1023px) - Responsive toggle */
@media (max-width: 1023px) and (min-width: 768px) {
  ._section_oo97g_9 {
    padding: 0 16px;
  }
  
  ._tabs_oo97g_21 {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 24px auto;
  }
  
  ._tab_oo97g_21 {
    padding: 8px 16px;
    font-size: 14px;
    min-width: 0;
    flex: 1;
  }
  
  ._card_oo97g_81 {
    padding: 20px;
  }
  
  ._cardHeader_oo97g_111 {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  ._assignmentDetails_oo97g_215 {
    flex-direction: column;
    gap: 12px;
  }
  
  ._cardFooter_oo97g_247 {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  ._actionButton_oo97g_267 {
    width: 100%;
    justify-content: center;
  }
}

/* Large Mobile (481px - 767px) - Enhanced mobile toggle */
@media (max-width: 767px) and (min-width: 481px) {
  ._section_oo97g_9 {
    padding: 0 16px;
  }
  
  ._tabs_oo97g_21 {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 20px auto;
    padding: 3px;
  }
  
  ._tab_oo97g_21 {
    padding: 8px 12px;
    font-size: 13px;
    min-width: 0;
    flex: 1;
  }
  
  ._card_oo97g_81 {
    padding: 18px;
  }
  
  ._cardHeader_oo97g_111 {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  ._assignmentDetails_oo97g_215 {
    flex-direction: column;
    gap: 10px;
  }
  
  ._cardFooter_oo97g_247 {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  ._actionButton_oo97g_267 {
    width: 100%;
    justify-content: center;
  }
}

/* Small Mobile (320px - 480px) - Standard mobile */
@media (max-width: 480px) {
  ._section_oo97g_9 {
    padding: 0 12px;
  }
  
  ._tabs_oo97g_21 {
    width: 100%;
    margin: 0 auto 20px auto;
    padding: 3px;
  }
  
  ._tab_oo97g_21 {
    padding: 10px 8px;
    font-size: 12px;
    min-width: 0;
    flex: 1;
  }
  
  ._card_oo97g_81 {
    padding: 16px;
  }
  
  ._cardTitle_oo97g_127 {
    font-size: 16px;
  }
  
  ._description_oo97g_199 {
    font-size: 13px;
  }
  
  ._cardHeader_oo97g_111 {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  ._assignmentDetails_oo97g_215 {
    flex-direction: column;
    gap: 8px;
  }
  
  ._cardFooter_oo97g_247 {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  ._actionButton_oo97g_267 {
    width: 100%;
    justify-content: center;
  }
}

/* Extra Small Mobile (<320px) - Ultra compact */
@media (max-width: 319px) {
  ._section_oo97g_9 {
    padding: 0 8px;
  }
  
  ._tabs_oo97g_21 {
    padding: 2px;
  }
  
  ._tab_oo97g_21 {
    padding: 8px 6px;
    font-size: 11px;
  }
  
  ._card_oo97g_81 {
    padding: 12px;
  }
  
  ._cardTitle_oo97g_127 {
    font-size: 14px;
  }
  
  ._description_oo97g_199 {
    font-size: 12px;
  }
}
/* ===================================
   TUTORING SESSIONS SECTION
   =================================== */

._section_xxc6v_9 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

._cardsContainer_xxc6v_21 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

._card_xxc6v_21 {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  gap: 20px;
}

._avatar_xxc6v_55 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #F3F4F6;
  border: 2px solid #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._avatarText_xxc6v_79 {
  font-size: 14px;
  font-weight: 600;
  color: #6B7280;
}

._avatarBlue_xxc6v_91 {
  background: #E0E7FF;
  border-color: #C7D2FE;
}

._avatarBlue_xxc6v_91 ._avatarText_xxc6v_79 {
  color: #1E40AF;
}

._avatarGray_xxc6v_109 {
  background: #F3F4F6;
  border-color: #E5E7EB;
}

._avatarGray_xxc6v_109 ._avatarText_xxc6v_79 {
  color: #6B7280;
}

._sessionDetails_xxc6v_127 {
  flex: 1;
  min-width: 0;
}

._sessionTitle_xxc6v_137 {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 12px 0;
  line-height: 1.3;
}

._instructor_xxc6v_153 {
  font-size: 16px;
  color: #6B7280;
  margin: 0 0 8px 0;
  font-weight: 400;
}

._sessionInfo_xxc6v_167 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

._infoItem_xxc6v_179 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #6B7280;
  font-weight: 400;
}

._infoItem_xxc6v_179 svg {
  color: #6B7280;
}

._infoItem_xxc6v_179:last-child svg {
  color: #F59E0B;
}

._actionButtons_xxc6v_213 {
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-shrink: 0;
}

._chatButton_xxc6v_227 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: white;
  color: #1E40AF;
  border: 1px solid #1E40AF;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 80px;
  justify-content: center;
}

._chatButton_xxc6v_227:hover {
  background: #1E40AF;
  color: white;
}

._joinButton_xxc6v_271 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #1E40AF;
  color: white;
  border: 1px solid #1E40AF;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 80px;
  justify-content: center;
}

._joinButton_xxc6v_271:hover {
  transform: scale(1.05);
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

@media (max-width: 768px) {
  ._section_xxc6v_9 {
    padding: 0 16px;
  }
  
  ._card_xxc6v_21 {
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  ._avatar_xxc6v_55 {
    width: 50px;
    height: 50px;
  }
  
  ._avatarText_xxc6v_79 {
    font-size: 16px;
  }
  
  ._sessionInfo_xxc6v_167 {
    flex-direction: column;
    gap: 12px;
  }
  
  ._actionButtons_xxc6v_213 {
    flex-direction: row;
    width: 100%;
  }
  
  ._chatButton_xxc6v_227,
  ._joinButton_xxc6v_271 {
    flex: 1;
  }
}

@media (max-width: 480px) {
  ._tabs_xxc6v_397 {
    margin-bottom: 20px;
  }
  
  ._tab_xxc6v_397 {
    padding: 6px 16px;
    font-size: 13px;
    min-width: 100px;
  }
  
  ._card_xxc6v_21 {
    padding: 16px;
  }
  
  ._sessionTitle_xxc6v_137 {
    font-size: 16px;
  }
  
  ._instructor_xxc6v_153 {
    font-size: 13px;
  }
  
  ._actionButtons_xxc6v_213 {
    flex-direction: column;
  }
}
/* ===================================
   SUBSCRIPTIONS SECTION
   =================================== */

._section_1yapk_9 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

._title_1yapk_21 {
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 24px;
  text-align: center;
}

._cardsContainer_1yapk_37 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  justify-items: center;
}

._card_1yapk_37 {
  position: relative;
  width: 100%;
  max-width: 320px;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

._statusTag_1yapk_79 {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #F3F4F6;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  border: none;
}

._profileImageWrapper_1yapk_105 {
  width: 80px;
  height: 80px;
  margin: 8px 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._profileImage_1yapk_105 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

._serviceName_1yapk_137 {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 16px;
  text-align: center;
}

._balanceInfo_1yapk_153 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: #6B7280;
  font-size: 14px;
  font-weight: 500;
}

._balanceIcon_1yapk_173 {
  font-size: 16px;
  color: #6B7280;
}

._balanceText_1yapk_183 {
  color: #374151;
}

._resubscribeButton_1yapk_191 {
  width: 100%;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid #111827;
  background: transparent;
  color: #111827;
}

._resubscribeButton_1yapk_191:hover {
  background: #F9FAFB;
  border-color: #111827;
}

._resubscribeButton_1yapk_191:active {
  transform: translateY(1px);
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
  ._title_1yapk_21 {
    font-size: 32px;
    margin-bottom: 32px;
  }
  
  ._cardsContainer_1yapk_37 {
    gap: 24px;
  }
}

/* Desktop (1200px - 1399px) */
@media (max-width: 1399px) and (min-width: 1200px) {
  /* Standard desktop design */
}

/* Large Tablet (1024px - 1199px) */
@media (max-width: 1199px) and (min-width: 1024px) {
  ._cardsContainer_1yapk_37 {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
  }
}

/* Tablet Portrait (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
  ._section_1yapk_9 {
    padding: 0 16px;
  }
  
  ._title_1yapk_21 {
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  ._cardsContainer_1yapk_37 {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }
  
  ._card_1yapk_37 {
    padding: 20px;
  }
}

/* Large Mobile (481px - 767px) */
@media (max-width: 767px) and (min-width: 481px) {
  ._section_1yapk_9 {
    padding: 0 16px;
  }
  
  ._title_1yapk_21 {
    font-size: 22px;
    margin-bottom: 18px;
  }
  
  ._cardsContainer_1yapk_37 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  ._card_1yapk_37 {
    max-width: 100%;
    padding: 18px;
  }
}

/* Small Mobile (320px - 480px) */
@media (max-width: 480px) {
  ._section_1yapk_9 {
    padding: 0 12px;
  }
  
  ._title_1yapk_21 {
    font-size: 20px;
    margin-bottom: 16px;
  }
  
  ._cardsContainer_1yapk_37 {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  
  ._card_1yapk_37 {
    max-width: 100%;
    padding: 16px;
  }
  
  ._serviceName_1yapk_137 {
    font-size: 16px;
  }
  
  ._balanceInfo_1yapk_153 {
    font-size: 13px;
  }
}

/* Extra Small Mobile (<320px) */
@media (max-width: 319px) {
  ._section_1yapk_9 {
    padding: 0 8px;
  }
  
  ._title_1yapk_21 {
    font-size: 18px;
  }
  
  ._card_1yapk_37 {
    padding: 14px;
  }
  
  ._profileImageWrapper_1yapk_105 {
    width: 70px;
    height: 70px;
  }
}
/* Chat Modal Container */
._chatModal_1lwcu_3 {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 300px;
  max-width: calc(100vw - 48px);
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 
              0 8px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 9999;
  animation: _slideUp_1lwcu_1 0.3s ease-out;
}

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

/* Header */
._header_1lwcu_61 {
  background: linear-gradient(135deg, #3B4BA8 0%, #5B7BD5 35%, #8AA4E8 60%, #C5A572 85%, #E8C87E 100%);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

._tutorInfo_1lwcu_79 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

._avatarWrapper_1lwcu_95 {
  position: relative;
  flex-shrink: 0;
}

._avatar_1lwcu_95 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.9);
}

._onlineIndicator_1lwcu_129 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: #22C55E;
  border: 2px solid white;
  border-radius: 50%;
}

._tutorDetails_1lwcu_151 {
  flex: 1;
  min-width: 0;
}

._tutorName_1lwcu_161 {
  font-size: 14px;
  font-weight: 700;
  color: white;
  margin: 0 0 2px 0;
  line-height: 1.3;
}

._tutorSubject_1lwcu_177 {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 2px 0;
  line-height: 1.3;
}

._chatAvailable_1lwcu_193 {
  font-size: 10px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  line-height: 1.3;
}

._headerActions_1lwcu_209 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

._iconButton_1lwcu_223 {
  background: transparent;
  border: none;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: rgba(255, 255, 255, 0.95);
  padding: 0;
}

._iconButton_1lwcu_223:hover {
  color: white;
  opacity: 0.8;
}

._iconButton_1lwcu_223:active {
  opacity: 1;
}

/* Messages Area */
._messagesArea_1lwcu_271 {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  max-height: 350px;
  min-height: 220px;
  background: #FAFAFA;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._messageWrapper_1lwcu_295 {
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
}

._tutorMessage_1lwcu_307 {
  align-items: flex-start;
}

._userMessage_1lwcu_315 {
  align-items: flex-end;
}

._message_1lwcu_271 {
  background: white;
  border-radius: 10px;
  padding: 10px 12px;
  max-width: 85%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

._userMessage_1lwcu_315 ._message_1lwcu_271 {
  background: #6B8DD6;
}

._messageText_1lwcu_347 {
  font-size: 13px;
  font-weight: 400;
  color: #1F2937;
  line-height: 1.5;
  margin: 0 0 4px 0;
  word-wrap: break-word;
}

._userMessage_1lwcu_315 ._messageText_1lwcu_347 {
  color: white;
}

._messageWrapper_1lwcu_295:last-child ._message_1lwcu_271 ._messageText_1lwcu_347 {
  margin-bottom: 0;
}

._messageTime_1lwcu_381 {
  font-size: 10px;
  font-weight: 400;
  color: #9CA3AF;
  display: block;
  text-align: right;
}

._userMessage_1lwcu_315 ._messageTime_1lwcu_381 {
  color: rgba(255, 255, 255, 0.8);
}

/* Input Area */
._inputArea_1lwcu_407 {
  background: white;
  padding: 12px 16px;
  border-top: 1px solid #E5E7EB;
}

._inputForm_1lwcu_419 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

._messageInput_1lwcu_433 {
  flex: 1;
  padding: 10px 14px;
  font-size: 13px;
  font-family: inherit;
  color: #374151;
  background: #F3F4F6;
  border: 1px solid transparent;
  border-radius: 24px;
  outline: none;
  transition: all 0.2s ease;
}

._messageInput_1lwcu_433::-moz-placeholder {
  color: #9CA3AF;
}

._messageInput_1lwcu_433::placeholder {
  color: #9CA3AF;
}

._messageInput_1lwcu_433:focus {
  background: white;
  border-color: #D1D5DB;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.05);
}

._sendButton_1lwcu_479 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #6B8DD6;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: white;
  flex-shrink: 0;
}

._sendButton_1lwcu_479:hover:not(:disabled) {
  background: #5B7BC6;
  transform: scale(1.05);
}

._sendButton_1lwcu_479:active:not(:disabled) {
  transform: scale(0.98);
}

._sendButton_1lwcu_479:disabled {
  background: #D1D5DB;
  cursor: not-allowed;
  opacity: 0.6;
}

._footer_1lwcu_539 {
  font-size: 10px;
  font-weight: 400;
  color: #9CA3AF;
  text-align: center;
  margin: 0;
  line-height: 1.4;
}

/* Responsive Design */
@media (max-width: 768px) {
  ._chatModal_1lwcu_3 {
    bottom: 16px;
    right: 16px;
    width: 300px;
  }
}

@media (max-width: 480px) {
  ._chatModal_1lwcu_3 {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 85vh;
  }

  ._header_1lwcu_61 {
    padding: 14px 16px;
  }

  ._tutorName_1lwcu_161 {
    font-size: 14px;
  }

  ._tutorSubject_1lwcu_177 {
    font-size: 11px;
  }

  ._messagesArea_1lwcu_271 {
    padding: 14px;
    max-height: calc(85vh - 180px);
  }

  ._inputArea_1lwcu_407 {
    padding: 12px 14px;
  }
}

/* Overlay */
._overlay_w5yo3_3 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  animation: _fadeIn_w5yo3_1 0.25s ease-out;
}

._overlayClosing_w5yo3_25 {
  animation: _fadeOut_w5yo3_1 0.3s ease-out forwards;
}

@keyframes _fadeIn_w5yo3_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes _fadeOut_w5yo3_1 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Modal Container */
._modal_w5yo3_71 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 420px;
  max-height: 75vh;
  background: white;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: _slideIn_w5yo3_1 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

._modalClosing_w5yo3_107 {
  animation: _slideOut_w5yo3_1 0.3s ease-out forwards;
}

@keyframes _slideIn_w5yo3_1 {
  from {
    opacity: 0;
    transform: translate(-50%, -48%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes _slideOut_w5yo3_1 {
  from {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -45%);
  }
}

@keyframes _slideUpMobile_w5yo3_1 {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes _slideDownMobile_w5yo3_1 {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

/* Header */
._header_w5yo3_205 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #E5E7EB;
}

._title_w5yo3_221 {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  line-height: 1.3;
}

._closeButton_w5yo3_237 {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
  color: #6B7280;
}

._closeButton_w5yo3_237:hover {
  background: #F3F4F6;
  color: #111827;
}

/* Assignment Info Section */
._assignmentInfo_w5yo3_277 {
  padding: 12px 14px;
  background: #F9FAFB;
  border-bottom: 1px solid #E5E7EB;
}

._infoGrid_w5yo3_289 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

._leftSection_w5yo3_303 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._tutorAvatar_w5yo3_315 {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._avatarText_w5yo3_337 {
  font-size: 13px;
  font-weight: 700;
  color: #6B7280;
  letter-spacing: 0.5px;
}

._tutorDetails_w5yo3_351 {
  flex: 1;
  min-width: 0;
}

._tutorName_w5yo3_361 {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 3px 0;
  line-height: 1.3;
}

._statusLine_w5yo3_377 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._onlineStatus_w5yo3_389 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: #059669;
}

._onlineDot_w5yo3_407 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
}

._rating_w5yo3_421 {
  font-size: 11px;
  font-weight: 500;
  color: #6B7280;
}

._rightSection_w5yo3_433 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

._assignmentTitle_w5yo3_447 {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

._dueDate_w5yo3_463 {
  font-size: 11px;
  font-weight: 400;
  color: #6B7280;
  margin: 0;
  line-height: 1.4;
}

/* Progress Section */
._progressSection_w5yo3_481 {
  padding: 10px 14px;
  background: #EEF2FF;
  border-bottom: 1px solid #E5E7EB;
}

._progressHeader_w5yo3_493 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

._progressLabel_w5yo3_507 {
  font-size: 12px;
  font-weight: 600;
  color: #3730A3;
}

._progressStatus_w5yo3_519 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #4F46E5;
}

._progressBarContainer_w5yo3_537 {
  width: 100%;
  height: 5px;
  background: #C7D2FE;
  border-radius: 2.5px;
  overflow: hidden;
  margin-bottom: 5px;
}

._progressBar_w5yo3_537 {
  height: 100%;
  background: #4F46E5;
  border-radius: 2.5px;
  transition: width 0.3s ease;
}

._progressText_w5yo3_569 {
  font-size: 10px;
  font-weight: 400;
  color: #4F46E5;
  margin: 0;
  line-height: 1.4;
}

/* Messages Section */
._messagesSection_w5yo3_587 {
  flex: 1;
  padding: 10px 14px;
  overflow-y: auto;
  max-height: 180px;
  background: white;
}

._messageItem_w5yo3_603 {
  margin-bottom: 10px;
}

._messageDate_w5yo3_611 {
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  color: #9CA3AF;
  margin-bottom: 8px;
}

._messageWrapper_w5yo3_627 {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 4px;
}

._tutorMessageWrapper_w5yo3_641 {
  align-items: flex-start;
}

._userMessageWrapper_w5yo3_649 {
  align-items: flex-end;
}

._messageSenderLabel_w5yo3_657 {
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
  padding-left: 2px;
}

._messageContent_w5yo3_671 {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 5px;
  padding: 8px 10px;
  max-width: 80%;
}

._userMessageWrapper_w5yo3_649 ._messageContent_w5yo3_671 {
  background: #000000;
  border-color: #000000;
}

._messageFiles_w5yo3_697 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}

._messageFileItem_w5yo3_711 {
  border-radius: 6px;
  overflow: hidden;
}

._messageImage_w5yo3_721 {
  width: 100%;
  max-width: 250px;
  height: auto;
  display: block;
  border-radius: 6px;
}

._messageVideo_w5yo3_737 {
  width: 100%;
  max-width: 250px;
  height: auto;
  display: block;
  border-radius: 6px;
}

._messageText_w5yo3_753 {
  font-size: 12px;
  font-weight: 400;
  color: #374151;
  line-height: 1.5;
  margin: 0 0 4px 0;
}

._userMessageWrapper_w5yo3_649 ._messageText_w5yo3_753 {
  color: white;
  margin: 0;
}

._messageTime_w5yo3_779 {
  font-size: 10px;
  font-weight: 400;
  color: #9CA3AF;
}

/* Files Section */
._filesSection_w5yo3_793 {
  padding: 10px 14px;
  background: white;
  border-top: 1px solid #E5E7EB;
}

._filesTitle_w5yo3_805 {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

._filesGrid_w5yo3_821 {
  display: grid;
  gap: 6px;
}

._fileCard_w5yo3_831 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 5px;
  transition: all 0.2s ease;
}

._fileCard_w5yo3_831:hover {
  background: #F3F4F6;
  border-color: #D1D5DB;
}

._fileCard_w5yo3_831 svg {
  color: #6B7280;
  flex-shrink: 0;
}

._fileName_w5yo3_873 {
  flex: 1;
  font-size: 11px;
  font-weight: 500;
  color: #374151;
}

._downloadButton_w5yo3_887 {
  background: transparent;
  border: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
  color: #6B7280;
}

._downloadButton_w5yo3_887:hover {
  background: #E5E7EB;
  color: #111827;
}

/* Input Section */
._inputSection_w5yo3_927 {
  padding: 10px 14px;
  background: white;
  border-top: 1px solid #E5E7EB;
}

._filePreviewSection_w5yo3_939 {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

._filePreviewItem_w5yo3_953 {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #E5E7EB;
}

._previewImage_w5yo3_971,
._previewVideo_w5yo3_973 {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

._removeFileButton_w5yo3_985 {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: background 0.2s ease;
}

._removeFileButton_w5yo3_985:hover {
  background: rgba(0, 0, 0, 0.9);
}

._inputForm_w5yo3_1027 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._attachButton_w5yo3_1039 {
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.2s ease;
  color: #6B7280;
  flex-shrink: 0;
}

._attachButton_w5yo3_1039:hover {
  background: #F3F4F6;
  color: #111827;
}

._messageInput_w5yo3_1079 {
  flex: 1;
  padding: 8px 12px;
  font-size: 12px;
  font-family: inherit;
  color: #374151;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 5px;
  outline: none;
  transition: all 0.2s ease;
}

._messageInput_w5yo3_1079::-moz-placeholder {
  color: #9CA3AF;
}

._messageInput_w5yo3_1079::placeholder {
  color: #9CA3AF;
}

._messageInput_w5yo3_1079:focus {
  background: white;
  border-color: #4F46E5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

._sendButton_w5yo3_1125 {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  background: #6B7280;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: white;
  flex-shrink: 0;
}

._sendButton_w5yo3_1125:hover:not(:disabled) {
  background: #4B5563;
  transform: translateY(-1px);
}

._sendButton_w5yo3_1125:active:not(:disabled) {
  transform: translateY(0);
}

._sendButton_w5yo3_1125:disabled {
  background: #D1D5DB;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Responsive Design */
@media (max-width: 768px) {
  ._modal_w5yo3_71 {
    width: 95%;
    max-width: 500px;
    max-height: 90vh;
    animation: _slideUpMobile_w5yo3_1 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  ._modalClosing_w5yo3_107 {
    animation: _slideDownMobile_w5yo3_1 0.3s ease-out forwards;
  }

  ._infoGrid_w5yo3_289 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  ._rightSection_w5yo3_433 {
    align-items: flex-start;
    text-align: left;
  }
}

@media (max-width: 480px) {
  ._modal_w5yo3_71 {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    top: 0;
    left: 0;
    transform: none;
    position: fixed;
    animation: _slideUpMobile_w5yo3_1 0.3s ease-out;
  }

  ._modalClosing_w5yo3_107 {
    animation: _slideDownMobile_w5yo3_1 0.3s ease-out forwards;
  }

  ._header_w5yo3_205 {
    padding: 14px 16px;
  }

  ._title_w5yo3_221 {
    font-size: 14px;
  }

  ._closeButton_w5yo3_237 {
    width: 32px;
    height: 32px;
  }

  ._assignmentInfo_w5yo3_277 {
    padding: 12px 16px;
  }

  ._infoGrid_w5yo3_289 {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  ._leftSection_w5yo3_303 {
    gap: 8px;
  }

  ._tutorAvatar_w5yo3_315 {
    width: 36px;
    height: 36px;
  }

  ._avatarText_w5yo3_337 {
    font-size: 12px;
  }

  ._tutorName_w5yo3_361 {
    font-size: 13px;
  }

  ._onlineStatus_w5yo3_389,
  ._rating_w5yo3_421 {
    font-size: 10px;
  }

  ._rightSection_w5yo3_433 {
    align-items: flex-start;
    text-align: left;
  }

  ._assignmentTitle_w5yo3_447 {
    font-size: 12px;
  }

  ._dueDate_w5yo3_463 {
    font-size: 10px;
  }

  ._progressSection_w5yo3_481 {
    padding: 10px 16px;
  }

  ._progressLabel_w5yo3_507,
  ._progressStatus_w5yo3_519 {
    font-size: 11px;
  }

  ._progressText_w5yo3_569 {
    font-size: 9px;
  }

  ._messagesSection_w5yo3_587 {
    padding: 12px 16px;
    max-height: calc(100vh - 450px);
    min-height: 150px;
  }

  ._messageContent_w5yo3_671 {
    max-width: 85%;
  }

  ._filesSection_w5yo3_793 {
    padding: 10px 16px;
  }

  ._filesTitle_w5yo3_805 {
    font-size: 11px;
  }

  ._fileName_w5yo3_873 {
    font-size: 10px;
  }

  ._inputSection_w5yo3_927 {
    padding: 10px 16px;
  }

  ._attachButton_w5yo3_1039,
  ._sendButton_w5yo3_1125 {
    width: 32px;
    height: 32px;
  }

  ._messageInput_w5yo3_1079 {
    font-size: 12px;
    padding: 8px 12px;
  }
}

/* ===================================
   ASSIGNMENT BIDS PAGE LAYOUT SYSTEM
   Professional Spacing & Structure
   =================================== */

/* Main Page Container */
._page_pd0ge_13 {
  min-height: 100%;
  background: white;
  width: 100%;
  overflow-x: hidden;
}

/* Section Wrapper - Controls ALL spacing between sections */
._sectionWrapper_pd0ge_29 {
  /* Vertical Spacing */
  padding-top: clamp(80px, 10vw, 120px);
  padding-bottom: clamp(80px, 10vw, 120px);
  
  /* Horizontal Spacing */
  padding-left: clamp(20px, 5vw, 80px);
  padding-right: clamp(20px, 5vw, 80px);
  
  /* Ensures sections take full width */
  width: 100%;
  box-sizing: border-box;
}

/* Remove bottom padding from last section */
._sectionWrapper_pd0ge_29:last-child {
  padding-bottom: clamp(60px, 8vw, 100px);
}

/* ===================================
   RESPONSIVE SPACING ADJUSTMENTS
   =================================== */

/* Extra Large Screens (1600px+) - Maximum breathing room */
@media (min-width: 1600px) {
  ._sectionWrapper_pd0ge_29 {
    padding-top: 140px;
    padding-bottom: 140px;
    padding-left: 100px;
    padding-right: 100px;
  }
  
  ._sectionWrapper_pd0ge_29:last-child {
    padding-bottom: 120px;
  }
}

/* Large Desktop (1200px - 1599px) - Generous spacing */
@media (min-width: 1200px) and (max-width: 1599px) {
  ._sectionWrapper_pd0ge_29 {
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 60px;
    padding-right: 60px;
  }
  
  ._sectionWrapper_pd0ge_29:last-child {
    padding-bottom: 80px;
  }
}

/* Medium Desktop (992px - 1199px) - Comfortable spacing */
@media (min-width: 992px) and (max-width: 1199px) {
  ._sectionWrapper_pd0ge_29 {
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: 40px;
    padding-right: 40px;
  }
  
  ._sectionWrapper_pd0ge_29:last-child {
    padding-bottom: 60px;
  }
}

/* Tablet (768px - 991px) - Balanced spacing */
@media (min-width: 768px) and (max-width: 991px) {
  ._sectionWrapper_pd0ge_29 {
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  ._sectionWrapper_pd0ge_29:last-child {
    padding-bottom: 50px;
  }
}

/* Small Tablet (576px - 767px) - Compact but breathable */
@media (min-width: 576px) and (max-width: 767px) {
  ._sectionWrapper_pd0ge_29 {
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 24px;
    padding-right: 24px;
  }
  
  ._sectionWrapper_pd0ge_29:last-child {
    padding-bottom: 40px;
  }
}

/* Mobile (320px - 575px) - Optimized for small screens */
@media (max-width: 575px) {
  ._sectionWrapper_pd0ge_29 {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 16px;
    padding-right: 16px;
  }
  
  ._sectionWrapper_pd0ge_29:last-child {
    padding-bottom: 32px;
  }
}

/* Ultra Small Screens (below 320px) - Minimal but functional */
@media (max-width: 319px) {
  ._sectionWrapper_pd0ge_29 {
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 12px;
    padding-right: 12px;
  }
  
  ._sectionWrapper_pd0ge_29:last-child {
    padding-bottom: 24px;
  }
}

/* ===================================
   BIDS SECTION
   =================================== */

._section_ht1ee_9 {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px clamp(60px, 8vw, 120px);
}

/* ===================================
   BIDS SECTION
   =================================== */

._bidsSection_ht1ee_31 {
  margin-top: 48px;
}

._bidsHeader_ht1ee_39 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 20px;
}

._bidsTitle_ht1ee_55 {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  line-height: 1.3;
}

._bidsSorting_ht1ee_71 {
  font-size: 14px;
  font-weight: 400;
  color: #6B7280;
  margin: 0;
  line-height: 1.5;
}

._bidsContainer_ht1ee_87 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ===================================
   AVAILABLE TUTORS SECTION
   =================================== */

._tutorsSection_ht1ee_107 {
  margin-top: 60px;
}

._tutorsHeader_ht1ee_115 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 20px;
}

._tutorsTitle_ht1ee_131 {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  line-height: 1.3;
}

._tutorsSubtitle_ht1ee_147 {
  font-size: 15px;
  font-weight: 400;
  color: #6B7280;
  margin: 0;
  line-height: 1.5;
}

/* ===================================
   EMPTY BIDS STATE
   =================================== */

._emptyBids_ht1ee_171 {
  text-align: center;
  padding: 60px 20px;
  background: #F9FAFB;
  border-radius: 12px;
  border: 1px dashed #E5E7EB;
}

._emptyIcon_ht1ee_187 {
  color: #9CA3AF;
  margin-bottom: 16px;
}

._emptyBids_ht1ee_171 h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: #374151;
}

._emptyBids_ht1ee_171 p {
  margin: 0;
  font-size: 14px;
  color: #6B7280;
}

/* ===================================
   NOT FOUND STATE
   =================================== */

._notFound_ht1ee_231 {
  text-align: center;
  padding: 80px 20px;
  background: #FFF;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
}

._notFound_ht1ee_231 h2 {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  color: #111827;
}

._notFound_ht1ee_231 p {
  margin: 0 0 24px;
  font-size: 16px;
  color: #6B7280;
}

/* ===================================
   BUTTONS
   =================================== */

._backBtn_ht1ee_281 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFF;
  border: 1px solid #E5E7EB;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
}

._backBtn_ht1ee_281:hover {
  background: #F9FAFB;
  border-color: #D1D5DB;
}

._backSection_ht1ee_321 {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #E5E7EB;
}

/* ===================================
   SKELETON LOADING
   =================================== */

@keyframes _skeletonShimmer_ht1ee_1 {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

._skeletonCard_ht1ee_359 {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 24px;
}

._skeletonHeader_ht1ee_373 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

._skeletonTitle_ht1ee_387 {
  width: 60%;
  height: 24px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_ht1ee_1 1.5s ease-in-out infinite;
  border-radius: 4px;
}

._skeletonBadge_ht1ee_405 {
  width: 100px;
  height: 24px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_ht1ee_1 1.5s ease-in-out infinite;
  border-radius: 12px;
}

._skeletonDescription_ht1ee_423 {
  width: 100%;
  height: 16px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_ht1ee_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}

._skeletonGrid_ht1ee_443 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 20px;
}

._skeletonItem_ht1ee_457 {
  height: 60px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_ht1ee_1 1.5s ease-in-out infinite;
  border-radius: 8px;
}

/* Bid Card Skeleton */
._skeletonBidCard_ht1ee_475 {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 24px;
}

._skeletonBidHeader_ht1ee_489 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

._skeletonAvatar_ht1ee_503 {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_ht1ee_1 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

._skeletonBidInfo_ht1ee_523 {
  flex: 1;
}

._skeletonBidName_ht1ee_531 {
  width: 180px;
  height: 20px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_ht1ee_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}

._skeletonBidMeta_ht1ee_551 {
  width: 120px;
  height: 14px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_ht1ee_1 1.5s ease-in-out infinite;
  border-radius: 4px;
}

._skeletonBidPrice_ht1ee_569 {
  width: 80px;
  height: 32px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_ht1ee_1 1.5s ease-in-out infinite;
  border-radius: 4px;
}

._skeletonBidStats_ht1ee_587 {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
}

._skeletonStat_ht1ee_599 {
  width: 100px;
  height: 40px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_ht1ee_1 1.5s ease-in-out infinite;
  border-radius: 8px;
}

._skeletonBidFooter_ht1ee_617 {
  display: flex;
  justify-content: flex-end;
}

._skeletonButton_ht1ee_627 {
  width: 160px;
  height: 40px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_ht1ee_1 1.5s ease-in-out infinite;
  border-radius: 8px;
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
  ._section_ht1ee_9 {
    max-width: 1600px;
  }
}

/* Tablet Portrait (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
  ._section_ht1ee_9 {
    padding: 40px 24px;
  }
  
  ._bidsHeader_ht1ee_39 {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  ._tutorsHeader_ht1ee_115 {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* Large Mobile (481px - 767px) */
@media (max-width: 767px) and (min-width: 481px) {
  ._section_ht1ee_9 {
    padding: 40px 20px;
  }
  
  ._bidsHeader_ht1ee_39 {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  ._tutorsHeader_ht1ee_115 {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* Small Mobile (320px - 480px) */
@media (max-width: 480px) {
  ._section_ht1ee_9 {
    padding: 40px 16px;
  }
  
  ._bidsSection_ht1ee_31 {
    margin-top: 32px;
  }
  
  ._bidsHeader_ht1ee_39 {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 20px;
  }
  
  ._bidsTitle_ht1ee_55 {
    font-size: 20px;
  }
  
  ._bidsSorting_ht1ee_71 {
    font-size: 13px;
  }
  
  ._tutorsSection_ht1ee_107 {
    margin-top: 40px;
  }
  
  ._tutorsHeader_ht1ee_115 {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 20px;
  }
  
  ._tutorsTitle_ht1ee_131 {
    font-size: 20px;
  }
  
  ._tutorsSubtitle_ht1ee_147 {
    font-size: 14px;
  }
}

/* ===================================
   ASSIGNMENT CARD
   =================================== */

._assignmentCard_1cu6z_9 {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* Card Header */
._cardHeader_1cu6z_27 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}

._cardTitle_1cu6z_43 {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  line-height: 1.3;
}

._statusBadge_1cu6z_59 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  background: #DBEAFE;
  color: #1E40AF;
  border: 1px solid #93C5FD;
}

._statusBadge_1cu6z_59 svg {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

/* Card Description */
._cardDescription_1cu6z_103 {
  font-size: 15px;
  line-height: 1.6;
  color: #6B7280;
  margin: 0 0 24px 0;
}

/* Details Grid */
._detailsGrid_1cu6z_119 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #E5E7EB;
}

._detailItem_1cu6z_137 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

._detailIcon_1cu6z_149 {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Icon color variations */
._detailItem_1cu6z_137:nth-child(1) ._detailIcon_1cu6z_149 {
  background: #EFF6FF;
  color: #2563EB;
}

._detailItem_1cu6z_137:nth-child(2) ._detailIcon_1cu6z_149 {
  background: #ECFDF5;
  color: #10B981;
}

._detailItem_1cu6z_137:nth-child(3) ._detailIcon_1cu6z_149 {
  background: #F5F3FF;
  color: #9333EA;
}

._detailItem_1cu6z_137:nth-child(4) ._detailIcon_1cu6z_149 {
  background: #FFF7ED;
  color: #EA580C;
}

._detailContent_1cu6z_211 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

._detailLabel_1cu6z_225 {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  line-height: 1.4;
}

._detailValue_1cu6z_239 {
  font-size: 13px;
  font-weight: 400;
  color: #6B7280;
  line-height: 1.4;
}

/* Card Footer */
._cardFooter_1cu6z_255 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

._footerLeft_1cu6z_269 {
  display: flex;
  align-items: center;
  gap: 20px;
}

._footerItem_1cu6z_281 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6B7280;
}

._footerItem_1cu6z_281 svg {
  flex-shrink: 0;
}

._footerRight_1cu6z_305 {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
  ._assignmentCard_1cu6z_9 {
    padding: 36px;
  }
}

/* Large Tablet (1024px - 1199px) */
@media (max-width: 1199px) and (min-width: 1024px) {
  ._detailsGrid_1cu6z_119 {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* Tablet Portrait (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
  ._assignmentCard_1cu6z_9 {
    padding: 28px;
  }
  
  ._detailsGrid_1cu6z_119 {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

/* Large Mobile (481px - 767px) */
@media (max-width: 767px) and (min-width: 481px) {
  ._assignmentCard_1cu6z_9 {
    padding: 24px;
  }
  
  ._cardTitle_1cu6z_43 {
    font-size: 17px;
  }
  
  ._cardDescription_1cu6z_103 {
    font-size: 14px;
  }
  
  ._detailsGrid_1cu6z_119 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  ._cardHeader_1cu6z_27 {
    flex-wrap: wrap;
  }
  
  ._cardFooter_1cu6z_255 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  ._footerLeft_1cu6z_269 {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* Small Mobile (320px - 480px) */
@media (max-width: 480px) {
  ._assignmentCard_1cu6z_9 {
    padding: 20px;
  }
  
  ._cardTitle_1cu6z_43 {
    font-size: 16px;
  }
  
  ._cardDescription_1cu6z_103 {
    font-size: 14px;
  }
  
  ._detailsGrid_1cu6z_119 {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  
  ._cardHeader_1cu6z_27 {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  ._cardFooter_1cu6z_255 {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  
  ._footerLeft_1cu6z_269 {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* Extra Small Mobile (<320px) */
@media (max-width: 319px) {
  ._assignmentCard_1cu6z_9 {
    padding: 16px;
  }
  
  ._cardTitle_1cu6z_43 {
    font-size: 16px;
  }
  
  ._cardDescription_1cu6z_103 {
    font-size: 13px;
  }
}

/* ===================================
   BID CARD
   =================================== */

._bidCard_f2aq4_9 {
  background: white;
  border: 2px solid #A8ADB7;
  border-radius: 12px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: box-shadow 0.2s ease;
}

._bidCard_f2aq4_9:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

._bidCardLight_f2aq4_39 {
  border: 1px solid #E5E7EB;
}

/* ===================================
   TOP BADGES
   =================================== */

._topBadges_f2aq4_55 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

._coordinatorBadge_f2aq4_69 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #111827;
  color: white;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

._coordinatorBadge_f2aq4_69 svg {
  flex-shrink: 0;
}

._qualityBadge_f2aq4_103 {
  display: inline-flex;
  align-items: center;
  background: #F3F4F6;
  color: #374151;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* ===================================
   MAIN CONTENT
   =================================== */

._mainContent_f2aq4_135 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

/* Tutor Info */
._tutorInfo_f2aq4_151 {
  flex: 1;
  min-width: 0;
}

._tutorHeader_f2aq4_161 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

._avatar_f2aq4_173 {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #F9FAFB;
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

._tutorDetails_f2aq4_201 {
  flex: 1;
  min-width: 0;
}

._tutorName_f2aq4_211 {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 6px 0;
  line-height: 1.3;
}

._tutorMeta_f2aq4_227 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

._rating_f2aq4_241 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #6B7280;
  font-weight: 400;
}

._rating_f2aq4_241 svg {
  color: #6B7280;
  flex-shrink: 0;
}

._verified_f2aq4_269 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #374151;
  font-weight: 500;
  background: #F3F4F6;
  padding: 2px 8px;
  border-radius: 6px;
}

._verified_f2aq4_269 svg {
  color: #6B7280;
  flex-shrink: 0;
}

._location_f2aq4_303 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #6B7280;
  font-weight: 400;
}

._location_f2aq4_303 svg {
  flex-shrink: 0;
  color: #6B7280;
}

/* Tutor Message */
._tutorMessage_f2aq4_333 {
  margin-top: 12px;
  padding: 12px 16px;
  background: #F9FAFB;
  border-radius: 8px;
  border-left: 3px solid #3B82F6;
}

._tutorMessage_f2aq4_333 p {
  margin: 0;
  font-size: 14px;
  color: #374151;
  line-height: 1.6;
  font-style: italic;
}

/* Price Section */
._priceSection_f2aq4_367 {
  text-align: right;
  flex-shrink: 0;
}

._price_f2aq4_367 {
  font-size: 24px;
  font-weight: 900;
  color: #111827;
  line-height: 1.2;
  margin: 0;
}

._priceLabel_f2aq4_393 {
  font-size: 14px;
  color: #6B7280;
  margin-top: 4px;
  font-weight: 400;
}

/* ===================================
   STATS ROW
   =================================== */

._statsRow_f2aq4_415 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 14px 32px;
  background: #F9FAFB;
  border-radius: 8px;
  margin: -16px 0 4px 80px;
}

._stat_f2aq4_415 {
  text-align: center;
}

._statValue_f2aq4_443 {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 4px 0;
  line-height: 1.2;
}

._statLabel_f2aq4_459 {
  font-size: 13px;
  color: #6B7280;
  font-weight: 500;
  line-height: 1.4;
}

._labelShort_f2aq4_473 {
  display: none;
}

._labelFull_f2aq4_481 {
  display: inline;
}

/* ===================================
   PROPOSAL SECTION
   =================================== */

._proposalSection_f2aq4_497 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: 80px;
}

._proposalTitle_f2aq4_511 {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  line-height: 1.4;
}

._proposalText_f2aq4_527 {
  font-size: 14px;
  color: #374151;
  line-height: 1.6;
  margin: 0;
}

/* ===================================
   TAGS
   =================================== */

._tags_f2aq4_549 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: 80px;
}

._tag_f2aq4_549 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: white;
  color: #111827;
  border: 1px solid #D1D5DB;
  white-space: nowrap;
}

._tagHighlighted_f2aq4_591 {
  background: #FCD34D;
  color: #111827;
  border: 1px solid #FCD34D;
}

/* ===================================
   FOOTER
   =================================== */

._footer_f2aq4_611 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 15px;
  margin-left: 80px;
  border-top: 1px solid #E5E7EB;
  margin-top: 0px;
}

._footerLeft_f2aq4_633 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

._viewProfileBtn_f2aq4_647 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid #E5E7EB;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
  transition: all 0.2s ease;
}

._viewProfileBtn_f2aq4_647:hover {
  background: #1E40AF;
  border-color: #1E40AF;
  color: white;
}

._viewProfileBtn_f2aq4_647 svg {
  flex-shrink: 0;
}

._bidTime_f2aq4_697 {
  font-size: 13px;
  color: #6B7280;
  font-weight: 400;
}

._footerRight_f2aq4_709 {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

._guarantees_f2aq4_723 {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

._guarantee_f2aq4_723 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #374151;
  font-weight: 500;
}

._guarantee_f2aq4_723 svg {
  color: #6B7280;
  flex-shrink: 0;
}

._acceptBtn_f2aq4_763 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #111827;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

._acceptBtn_f2aq4_763:hover {
  background: #1F2937;
}

._acceptBtn_f2aq4_763:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

._acceptBtn_f2aq4_763 svg {
  flex-shrink: 0;
}

/* Tasks Completed Badge */
._tasksCompleted_f2aq4_823 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #6B7280;
  font-weight: 500;
}

._tasksCompleted_f2aq4_823 svg {
  color: #10B981;
  flex-shrink: 0;
}

/* Selected Badge */
._selectedBadge_f2aq4_853 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #10B981;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}

._selectedBadge_f2aq4_853 svg {
  flex-shrink: 0;
}

/* Seven Dots Loader */
._sevenDotsLoader_f2aq4_887 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 8px;
}

._dot_f2aq4_901 {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: currentColor;
  animation: _dotPulse_f2aq4_1 1.4s ease-in-out infinite both;
}

._sevenDotsLoader_f2aq4_887 ._dot_f2aq4_901:nth-child(1) {
  animation-delay: -0.6s;
}

._sevenDotsLoader_f2aq4_887 ._dot_f2aq4_901:nth-child(2) {
  animation-delay: -0.5s;
}

._sevenDotsLoader_f2aq4_887 ._dot_f2aq4_901:nth-child(3) {
  animation-delay: -0.4s;
}

._sevenDotsLoader_f2aq4_887 ._dot_f2aq4_901:nth-child(4) {
  animation-delay: -0.3s;
}

._sevenDotsLoader_f2aq4_887 ._dot_f2aq4_901:nth-child(5) {
  animation-delay: -0.2s;
}

._sevenDotsLoader_f2aq4_887 ._dot_f2aq4_901:nth-child(6) {
  animation-delay: -0.1s;
}

._sevenDotsLoader_f2aq4_887 ._dot_f2aq4_901:nth-child(7) {
  animation-delay: 0;
}

@keyframes _dotPulse_f2aq4_1 {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

/* Desktop Large (1400px+) */
@media (min-width: 1400px) {
  ._bidCard_f2aq4_9 {
    padding: 26px 32px;
  }
}

/* Tablet Landscape (1024px - 1279px) */
@media (max-width: 1279px) and (min-width: 1024px) {
  ._statsRow_f2aq4_415 {
    gap: 24px;
  }
}

/* Tablet Portrait (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
  ._mainContent_f2aq4_135 {
    flex-direction: column;
    gap: 20px;
  }
  
  ._priceSection_f2aq4_367 {
    text-align: left;
  }
  
  ._statsRow_f2aq4_415 {
    gap: 20px;
    padding: 28px;
  }
  
  ._footer_f2aq4_611 {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  
  ._footerRight_f2aq4_709 {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  ._acceptBtn_f2aq4_763 {
    width: 100%;
    justify-content: center;
  }
}

/* Large Mobile (481px - 767px) */
@media (max-width: 767px) and (min-width: 481px) {
  ._bidCard_f2aq4_9 {
    padding: 24px;
  }
  
  ._mainContent_f2aq4_135 {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }
  
  ._tutorInfo_f2aq4_151 {
    flex: 1;
    min-width: 0;
  }
  
  ._tutorMeta_f2aq4_227 {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  
  ._priceSection_f2aq4_367 {
    text-align: right;
    flex-shrink: 0;
  }
  
  ._price_f2aq4_367 {
    font-size: 24px;
  }
  
  ._statsRow_f2aq4_415 {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    text-align: center;
    padding: 10px 16px;
    margin: 8px 0 4px 0;
  }
  
  ._stat_f2aq4_415 {
    text-align: center;
  }
  
  ._labelFull_f2aq4_481 {
    display: none;
  }
  
  ._labelShort_f2aq4_473 {
    display: inline;
  }
  
  ._proposalSection_f2aq4_497 {
    margin-left: 0;
  }
  
  ._tags_f2aq4_549 {
    margin-left: 0;
  }
  
  ._footer_f2aq4_611 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    margin-left: 0;
  }
  
  ._footerLeft_f2aq4_633 {
    display: contents;
  }
  
  ._footerRight_f2aq4_709 {
    display: contents;
  }
  
  ._bidTime_f2aq4_697 {
    order: 1;
    flex-basis: auto;
  }
  
  ._footerNoGuarantees_f2aq4_1267 ._bidTime_f2aq4_697 {
    flex-basis: 100%;
  }
  
  ._guarantees_f2aq4_723 {
    order: 2;
    flex-basis: auto;
    display: flex;
    flex-direction: row;
    gap: 0;
  }
  
  ._guarantee_f2aq4_723:last-child {
    display: none;
  }
  
  ._viewProfileBtn_f2aq4_647 {
    order: 3;
    flex: 1;
    min-width: 0;
    font-size: 13px;
    padding: 10px 16px;
  }
  
  ._acceptBtn_f2aq4_763 {
    order: 4;
    flex: 1;
    min-width: 0;
    justify-content: center;
    font-size: 13px;
    padding: 10px 20px;
  }
}

/* Small Mobile (320px - 480px) */
@media (max-width: 480px) {
  ._bidCard_f2aq4_9 {
    padding: 20px;
  }
  
  ._topBadges_f2aq4_55 {
    gap: 8px;
  }
  
  ._coordinatorBadge_f2aq4_69,
  ._qualityBadge_f2aq4_103 {
    font-size: 12px;
    padding: 5px 10px;
  }
  
  ._mainContent_f2aq4_135 {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }
  
  ._tutorInfo_f2aq4_151 {
    flex: 1;
    min-width: 0;
  }
  
  ._tutorHeader_f2aq4_161 {
    gap: 12px;
  }
  
  ._avatar_f2aq4_173 {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  
  ._tutorName_f2aq4_211 {
    font-size: 16px;
  }
  
  ._tutorMeta_f2aq4_227 {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  
  ._priceSection_f2aq4_367 {
    text-align: right;
    flex-shrink: 0;
  }
  
  ._price_f2aq4_367 {
    font-size: 22px;
  }
  
  ._statsRow_f2aq4_415 {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    text-align: center;
    padding: 8px 12px;
    margin: 8px 0 4px 0;
  }
  
  ._stat_f2aq4_415 {
    text-align: center;
  }
  
  ._statValue_f2aq4_443 {
    font-size: 16px;
  }
  
  ._statLabel_f2aq4_459 {
    font-size: 11px;
  }
  
  ._labelFull_f2aq4_481 {
    display: none;
  }
  
  ._labelShort_f2aq4_473 {
    display: inline;
  }
  
  ._proposalSection_f2aq4_497 {
    margin-left: 0;
  }
  
  ._proposalTitle_f2aq4_511 {
    font-size: 15px;
  }
  
  ._proposalText_f2aq4_527 {
    font-size: 13px;
  }
  
  ._tags_f2aq4_549 {
    gap: 8px;
    margin-left: 0;
  }
  
  ._tag_f2aq4_549 {
    font-size: 12px;
    padding: 5px 12px;
  }
  
  ._footer_f2aq4_611 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    margin-left: 0;
  }
  
  ._footerLeft_f2aq4_633 {
    display: contents;
  }
  
  ._footerRight_f2aq4_709 {
    display: contents;
  }
  
  ._bidTime_f2aq4_697 {
    order: 1;
    flex-basis: auto;
  }
  
  ._footerNoGuarantees_f2aq4_1267 ._bidTime_f2aq4_697 {
    flex-basis: 100%;
  }
  
  ._guarantees_f2aq4_723 {
    order: 2;
    flex-basis: auto;
    display: flex;
    flex-direction: row;
    gap: 0;
  }
  
  ._guarantee_f2aq4_723:last-child {
    display: none;
  }
  
  ._viewProfileBtn_f2aq4_647 {
    order: 3;
    flex: 1;
    min-width: 0;
    font-size: 12px;
    padding: 10px 16px;
  }
  
  ._acceptBtn_f2aq4_763 {
    order: 4;
    flex: 1;
    min-width: 0;
    justify-content: center;
    padding: 10px 20px;
    font-size: 12px;
  }
}

/* ===================================
   TIPS CARD
   =================================== */

._tipsCard_xyyya_9 {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 32px 40px;
  margin-top: 24px;
}

._title_xyyya_25 {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 32px 0;
  line-height: 1.3;
}

/* Tips Grid */
._tipsGrid_xyyya_43 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}

._tipsColumn_xyyya_55 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._tipItem_xyyya_67 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

._bullet_xyyya_79 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1E40AF;
  flex-shrink: 0;
  margin-top: 8px;
}

._tipText_xyyya_97 {
  font-size: 17px;
  font-weight: 500;
  color: #6B7280;
  line-height: 1.6;
  margin: 0;
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

/* Tablet Portrait (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
  ._tipsCard_xyyya_9 {
    padding: 28px 32px;
  }
  
  ._tipsGrid_xyyya_43 {
    gap: 32px;
  }
}

/* Large Mobile (481px - 767px) */
@media (max-width: 767px) and (min-width: 481px) {
  ._tipsCard_xyyya_9 {
    padding: 24px 28px;
  }
  
  ._tipsGrid_xyyya_43 {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Small Mobile (320px - 480px) */
@media (max-width: 480px) {
  ._tipsCard_xyyya_9 {
    padding: 20px 24px;
  }
  
  ._title_xyyya_25 {
    font-size: 18px;
    margin-bottom: 24px;
  }
  
  ._tipsGrid_xyyya_43 {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  ._tipsColumn_xyyya_55 {
    gap: 16px;
  }
  
  ._tipText_xyyya_97 {
    font-size: 14px;
  }
}

/* ===================================
   PAYMENTS PAGE LAYOUT SYSTEM
   Professional Spacing & Structure
   =================================== */

/* Main Page Container */
._page_1a369_13 {
  min-height: 100%;
  background: white;
  width: 100%;
  overflow-x: hidden;
}

/* Section Wrapper - Controls ALL spacing between sections */
._sectionWrapper_1a369_29 {
  /* Vertical Spacing */
  padding-top: clamp(80px, 10vw, 120px);
  padding-bottom: clamp(80px, 10vw, 120px);
  
  /* Horizontal Spacing */
  padding-left: clamp(20px, 5vw, 80px);
  padding-right: clamp(20px, 5vw, 80px);
  
  /* Ensures sections take full width */
  width: 100%;
  box-sizing: border-box;
}

/* Remove bottom padding from last section */
._sectionWrapper_1a369_29:last-child {
  padding-bottom: clamp(60px, 8vw, 100px);
}

/* ===================================
   RESPONSIVE SPACING ADJUSTMENTS
   =================================== */

/* Extra Large Screens (1600px+) - Maximum breathing room */
@media (min-width: 1600px) {
  ._sectionWrapper_1a369_29 {
    padding-top: 140px;
    padding-bottom: 140px;
    padding-left: 100px;
    padding-right: 100px;
  }
  
  ._sectionWrapper_1a369_29:last-child {
    padding-bottom: 120px;
  }
}

/* Large Desktop (1200px - 1599px) - Generous spacing */
@media (min-width: 1200px) and (max-width: 1599px) {
  ._sectionWrapper_1a369_29 {
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 60px;
    padding-right: 60px;
  }
  
  ._sectionWrapper_1a369_29:last-child {
    padding-bottom: 80px;
  }
}

/* Medium Desktop (992px - 1199px) - Comfortable spacing */
@media (min-width: 992px) and (max-width: 1199px) {
  ._sectionWrapper_1a369_29 {
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: 40px;
    padding-right: 40px;
  }
  
  ._sectionWrapper_1a369_29:last-child {
    padding-bottom: 60px;
  }
}

/* Tablet (768px - 991px) - Balanced spacing */
@media (min-width: 768px) and (max-width: 991px) {
  ._sectionWrapper_1a369_29 {
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  ._sectionWrapper_1a369_29:last-child {
    padding-bottom: 50px;
  }
}

/* Small Tablet (576px - 767px) - Compact but breathable */
@media (min-width: 576px) and (max-width: 767px) {
  ._sectionWrapper_1a369_29 {
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 24px;
    padding-right: 24px;
  }
  
  ._sectionWrapper_1a369_29:last-child {
    padding-bottom: 40px;
  }
}

/* Mobile (320px - 575px) - Optimized for small screens */
@media (max-width: 575px) {
  ._sectionWrapper_1a369_29 {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 16px;
    padding-right: 16px;
  }
  
  ._sectionWrapper_1a369_29:last-child {
    padding-bottom: 32px;
  }
}

/* Ultra Small Screens (below 320px) - Minimal but functional */
@media (max-width: 319px) {
  ._sectionWrapper_1a369_29 {
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 12px;
    padding-right: 12px;
  }
  
  ._sectionWrapper_1a369_29:last-child {
    padding-bottom: 24px;
  }
}

/* ===================================
   PAYMENTS SECTION
   =================================== */

._section_1pvbl_9 {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px clamp(100px, 12vw, 180px);
}

/* ===================================
   TWO COLUMN LAYOUT
   =================================== */

._paymentContainer_1pvbl_31 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

._leftColumn_1pvbl_45,
._rightColumn_1pvbl_47 {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 32px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

._sectionTitle_1pvbl_63 {
  font-size: 18px;
  font-weight: 800;
  color: #000000;
  margin: 0 0 24px 0;
  line-height: 1.2;
}

/* ===================================
   LEFT COLUMN - PAYMENT FORM
   =================================== */

._paymentForm_1pvbl_87 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._formGroup_1pvbl_99 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._formRow_1pvbl_111 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

._label_1pvbl_123 {
  font-size: 13px;
  font-weight: 700;
  color: #000000;
  line-height: 1.4;
}

._required_1pvbl_137 {
  color: #EF4444;
}

._input_1pvbl_145 {
  padding: 8px 14px;
  font-size: 14px;
  color: #374151;
  background: #F9FAFB;
  border: 1px solid transparent;
  border-radius: 6px;
  outline: none;
  transition: all 0.2s ease;
  font-family: inherit;
}

._input_1pvbl_145:focus {
  background: white;
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

._input_1pvbl_145::-moz-placeholder {
  color: #9CA3AF;
}

._input_1pvbl_145::placeholder {
  color: #9CA3AF;
}

._inputError_1pvbl_189 {
  border-color: #ef4444 !important;
  background: white !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

._inputError_1pvbl_189:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

._helperText_1pvbl_211 {
  font-size: 12px;
  color: #6B7280;
  margin: 2px 0 0 0;
  line-height: 1.5;
}

._errorMessage_1pvbl_225 {
  color: #ef4444;
  font-size: 12px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

._errorIcon_1pvbl_243 {
  width: 12px;
  height: 12px;
}

/* ===================================
   VALIDATION SUMMARY
   =================================== */

._validationSummary_1pvbl_261 {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 20px;
}

._validationSummaryTitle_1pvbl_277 {
  color: #dc2626;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

._validationSummaryList_1pvbl_297 {
  list-style: none;
  padding: 0;
  margin: 0;
}

._validationSummaryItem_1pvbl_309 {
  color: #dc2626;
  font-size: 13px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

._validationSummaryItem_1pvbl_309:last-child {
  margin-bottom: 0;
}

/* ===================================
   SECURE PAYMENT BANNER
   =================================== */

._secureBanner_1pvbl_343 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 6px;
  margin-top: 4px;
}

._secureBanner_1pvbl_343 svg {
  flex-shrink: 0;
  color: #15803D;
  width: 18px;
  height: 18px;
}

._secureBannerTitle_1pvbl_379 {
  font-size: 13px;
  font-weight: 800;
  color: #166534;
  margin-bottom: 2px;
  line-height: 1.4;
}

._secureBannerText_1pvbl_395 {
  font-size: 12px;
  color: #166534;
  line-height: 1.4;
}

/* ===================================
   TERMS AGREEMENT
   =================================== */

._termsGroup_1pvbl_415 {
  margin-top: 4px;
}

._checkboxLabel_1pvbl_423 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #374151;
  line-height: 1.5;
}

._checkboxError_1pvbl_443 {
  color: #ef4444;
}

._checkbox_1pvbl_423 {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: #3B82F6;
}

._link_1pvbl_469 {
  color: #3B82F6;
  text-decoration: none;
  font-weight: 500;
}

._link_1pvbl_469:hover {
  text-decoration: underline;
}

/* ===================================
   SUBMIT BUTTON
   =================================== */

._submitButton_1pvbl_497 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 20px;
  font-size: 15px;
  font-weight: 600;
  color: white;
  background: #8B95D5;
  border: none;
  border-radius: 8px;
  cursor: not-allowed;
  transition: all 0.2s ease;
  margin-top: 4px;
  font-family: inherit;
  opacity: 0.6;
}

._submitButton_1pvbl_497 svg {
  width: 15px;
  height: 15px;
}

._submitButton_1pvbl_497:hover {
  background: #8B95D5;
}

._submitButtonActive_1pvbl_553 {
  background: #1E3A8A;
  cursor: pointer;
  opacity: 1;
}

._submitButtonActive_1pvbl_553:hover {
  background: #1E40AF;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
}

._submitButtonActive_1pvbl_553:active {
  transform: translateY(0);
}

._submitButton_1pvbl_497 svg {
  flex-shrink: 0;
}

/* ===================================
   RIGHT COLUMN - ORDER SUMMARY
   =================================== */

/* Assignment Card */
._assignmentCard_1pvbl_603 {
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

._assignmentHeader_1pvbl_619 {
  display: flex;
  gap: 10px;
}

._avatar_1pvbl_629 {
  width: 40px;
  height: 40px;
  background: #E0E7FF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #4338CA;
  flex-shrink: 0;
}

._assignmentInfo_1pvbl_657 {
  flex: 1;
}

._assignmentTitle_1pvbl_665 {
  font-size: 14px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

._tutorName_1pvbl_681 {
  font-size: 12px;
  color: #6B7280;
  margin: 0 0 6px 0;
  line-height: 1.5;
}

._assignmentMeta_1pvbl_695 {
  display: flex;
  gap: 12px;
}

._metaItem_1pvbl_705 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #6B7280;
}

._metaItem_1pvbl_705 svg {
  color: #9CA3AF;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

/* ===================================
   COORDINATOR SERVICE BANNER
   =================================== */

._coordinatorBanner_1pvbl_743 {
  background: linear-gradient(to right, #1E3A8A 0%, #4169E1 100%);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

._coordinatorHeader_1pvbl_757 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
}

._coordinatorHeader_1pvbl_757 svg {
  color: white;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

._coordinatorTitle_1pvbl_785 {
  font-size: 14px;
  font-weight: 700;
  color: white;
  line-height: 1.3;
}

._benefitsList_1pvbl_799 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

._benefitsList_1pvbl_799 li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: white;
  line-height: 1.4;
}

._benefitsList_1pvbl_799 li svg {
  color: white;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}

/* ===================================
   MONEY-BACK GUARANTEE CARD
   =================================== */

._guaranteeCard_1pvbl_857 {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 8px;
  padding: 16px 14px;
  grid-column: 2;
}

._guaranteeIconWrapper_1pvbl_879 {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: #DCFCE7;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._guaranteeIconWrapper_1pvbl_879 svg {
  color: #15803D;
  width: 20px;
  height: 20px;
}

._guaranteeContent_1pvbl_913 {
  flex: 1;
}

._guaranteeTitle_1pvbl_921 {
  font-size: 13px;
  font-weight: 800;
  color: #166534;
  margin: 0 0 2px 0;
  line-height: 1.4;
}

._guaranteeText_1pvbl_937 {
  font-size: 12px;
  font-weight: 400;
  color: #166534;
  margin: 0;
  line-height: 1.4;
}

/* ===================================
   ASSIGNMENT DETAILS
   =================================== */

._detailsGrid_1pvbl_961 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 14px 20px;
  background: #FAFAFA;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid #E5E7EB;
}

._detailItem_1pvbl_987 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._detailLabel_1pvbl_999 {
  font-size: 14px;
  color: #6B7280;
  font-weight: 400;
  line-height: 1.4;
}

._detailValue_1pvbl_1013 {
  font-size: 14px;
  font-weight: 700;
  color: #000000;
  line-height: 1.3;
}

/* ===================================
   PRICING SECTION
   =================================== */

._pricingSection_1pvbl_1035 {
  padding-top: 32px;
  padding-bottom: 16px;
  border-top: 1px solid #E5E7EB;
  margin-bottom: 16px;
}

._priceRow_1pvbl_1049 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

._priceRow_1pvbl_1049:last-child {
  margin-bottom: 0;
}

._priceLabel_1pvbl_1071 {
  font-size: 13px;
  color: #6B7280;
  line-height: 1.4;
}

._priceValue_1pvbl_1083 {
  font-size: 14px;
  font-weight: 700;
  color: #000000;
  line-height: 1.4;
}

._totalRow_1pvbl_1097 {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #E5E7EB;
}

._totalLabel_1pvbl_1109 {
  font-size: 15px;
  font-weight: 700;
  color: #000000;
  line-height: 1.4;
}

._totalValue_1pvbl_1123 {
  font-size: 16px;
  font-weight: 700;
  color: #4F5FD5;
  line-height: 1.4;
}

/* ===================================
   WHAT HAPPENS NEXT
   =================================== */

._nextSteps_1pvbl_1145 {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 12px 20px;
  margin-top: 20px;
}

._nextStepsTitle_1pvbl_1161 {
  font-size: 14px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

._stepsList_1pvbl_1177 {
  list-style: none;
  counter-reset: step-counter;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._stepsList_1pvbl_1177 li {
  counter-increment: step-counter;
  font-size: 13px;
  color: #6B7280;
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
}

._stepsList_1pvbl_1177 li::before {
  content: counter(step-counter) ".";
  position: absolute;
  left: 0;
  font-weight: 600;
  color: #6B7280;
  font-size: 13px;
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
  ._section_1pvbl_9 {
    max-width: 1400px;
    padding: 40px 180px;
  }
}

/* Extra Large Desktop (1600px+) */
@media (min-width: 1600px) {
  ._section_1pvbl_9 {
    padding: 40px 220px;
  }
}

/* Tablet & Below (1024px and below) */
@media (max-width: 1024px) {
  ._paymentContainer_1pvbl_31 {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  ._leftColumn_1pvbl_45,
  ._rightColumn_1pvbl_47 {
    padding: 28px;
  }
  
  ._guaranteeCard_1pvbl_857 {
    grid-column: 1;
  }
}

/* Tablet Portrait (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
  ._section_1pvbl_9 {
    padding: 40px 40px;
  }
  
  ._leftColumn_1pvbl_45,
  ._rightColumn_1pvbl_47 {
    padding: 24px;
  }
}

/* Large Mobile (481px - 767px) */
@media (max-width: 767px) and (min-width: 481px) {
  ._section_1pvbl_9 {
    padding: 40px 20px;
  }
  
  ._leftColumn_1pvbl_45,
  ._rightColumn_1pvbl_47 {
    padding: 20px;
  }
  
  ._detailsGrid_1pvbl_961 {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  
  ._sectionTitle_1pvbl_63 {
    font-size: 16px;
  }
}

/* Small Mobile (320px - 480px) */
@media (max-width: 480px) {
  ._section_1pvbl_9 {
    padding: 30px 16px;
  }
  
  ._paymentContainer_1pvbl_31 {
    gap: 20px;
  }
  
  ._leftColumn_1pvbl_45,
  ._rightColumn_1pvbl_47 {
    padding: 20px;
  }
  
  ._sectionTitle_1pvbl_63 {
    font-size: 16px;
    margin-bottom: 20px;
  }
  
  ._formRow_1pvbl_111 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  ._input_1pvbl_145 {
    padding: 10px 14px;
    font-size: 14px;
  }
  
  ._submitButton_1pvbl_497 {
    padding: 10px 20px;
    font-size: 14px;
  }
  
  ._detailsGrid_1pvbl_961 {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px 16px;
  }
  
  ._detailLabel_1pvbl_999 {
    font-size: 12px;
  }
  
  ._detailValue_1pvbl_1013 {
    font-size: 12px;
  }
  
  ._assignmentCard_1pvbl_603 {
    padding: 12px;
  }
  
  ._assignmentTitle_1pvbl_665 {
    font-size: 13px;
  }
  
  ._avatar_1pvbl_629 {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }
  
  ._coordinatorBanner_1pvbl_743 {
    padding: 14px;
  }
  
  ._guaranteeCard_1pvbl_857 {
    padding: 14px 12px;
  }
  
  ._guaranteeIconWrapper_1pvbl_879 {
    width: 36px;
    height: 36px;
  }
  
  ._guaranteeIconWrapper_1pvbl_879 svg {
    width: 18px;
    height: 18px;
  }
  
  ._nextSteps_1pvbl_1145 {
    padding: 14px 16px;
  }
}

:root {
    --ink: #0b1424;
    --muted: #667085;
    --bd: #e9eef8;
    --panel: #ffffff;

    --blue: #2147a4;
    --blue-100: #eef3ff;
    --blue-200: #d9e6ff;

    --chip: #fff4da;
    --chip-b: #f6e2a5;
}

/* container */
._wrap_ncny4_31 {
    padding: 8px 18px 22px;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
}

._grid_ncny4_41 {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 22px;
}

/* left card */
._leftCard_ncny4_59 {
    background: var(--panel);
    border: 1px solid var(--bd);
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .06);
    padding: 22px 18px;
    text-align: center;
}

._avatar_ncny4_77 {
    width: 116px;
    height: 116px;
    margin: 4px auto 12px;
    border-radius: 999px;
    background: var(--blue-100);
    color: var(--blue);
    font-weight: 900;
    display: grid;
    place-items: center;
    font-size: 32px;
    border: 1px solid var(--blue-200);
}

._name_ncny4_105 {
    font-weight: 900;
    color: var(--ink);
    font-size: 20px;
    margin: 2px 0 6px;
}

._email_ncny4_119 {
    color: #5f6f86;
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 10px;
    word-break: break-word;
}

._metaList_ncny4_135 {
    margin: 6px 0 12px;
    text-align: left;
}

._metaRow_ncny4_145 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #41526b;
    font-weight: 800;
    font-size: 14px;
    margin: 6px 0;
}

._metaIcon_ncny4_165 {
    color: #7a8baa;
    font-size: 18px;
}

._hr_ncny4_175 {
    border: 0;
    border-top: 1px solid var(--bd);
    margin: 10px 0 12px;
}

._subhead_ncny4_187 {
    text-align: left;
    font-weight: 900;
    color: var(--ink);
    font-size: 18px;
    margin-bottom: 8px;
}

._tags_ncny4_203 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

._tag_ncny4_203 {
    background: var(--chip);
    border: 1px solid var(--chip-b);
    color: #aa7d00;
    font-weight: 800;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 10px;
}

/* right card */
._rightCard_ncny4_237 {
    background: var(--panel);
    border: 1px solid var(--bd);
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .06);
    padding: 20px 18px;
}

._title_ncny4_253 {
    font-weight: 900;
    color: var(--ink);
    font-size: 20px;
    margin-bottom: 12px;
}

/* form */
._formGrid_ncny4_269 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    margin-bottom: 8px;
}

._field_ncny4_283 {
    display: flex;
    flex-direction: column;
}

._label_ncny4_293 {
    color: #5f6f86;
    font-weight: 800;
    font-size: 12.5px;
    margin-bottom: 6px;
}

._req_ncny4_307 {
    color: #ef4444;
}

._input_ncny4_315 {
    height: 44px;
    background: #f9fbff;
    border: 1px solid var(--bd);
    border-radius: 10px;
    padding: 0 12px;
    color: #1f2937;
    font-weight: 800;
    font-size: 14px;
}

._input_ncny4_315[readonly] {
    color: #334155;
}

._input_ncny4_315:focus {
    outline: none;
    border-color: var(--blue-200);
    box-shadow: 0 0 0 3px #e7efff;
    background: #fff;
}

._textarea_ncny4_359 {
    height: auto;
    padding: 10px 12px;
    line-height: 1.6;
    resize: vertical;
    font-weight: 500;
    color: #888
}

/* select-like (read-only) */
._selectLike_ncny4_379 {
    height: 44px;
    background: #f9fbff;
    border: 1px solid var(--bd);
    border-radius: 10px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #334155;
    font-weight: 800;
    font-size: 14px;
}

/* big bio block */
._fieldBlock_ncny4_409 {
    margin-top: 8px;
}

/* responsive */
@media (max-width: 980px) {
    ._grid_ncny4_41 {
        grid-template-columns: 1fr;
    }
}:root {
  --ink: #0b1424;
  --muted: #667085;
  --bd: #e9eef8;
  --panel: #ffffff;

  --blue: #2147a4;
  --blue-100: #eef3ff;
  --blue-200: #d9e6ff;

  --g: #16a34a;
  --g-100: #e9f9ef;
  --g-200: #cfeedd;
  --y: #f59e0b;
  --y-100: #fff4e5;
  --y-200: #ffe4c7;
  --p: #7c3aed;
  --p-100: #f3e8ff;
  --p-200: #eadbff;
}

/* shell */
._wrap_eo2uk_45 {
  padding: 4px 18px 24px;
}

._grid_eo2uk_53 {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.68fr 1.32fr;
  gap: 22px;
}

/* left – stats */
._statsCard_eo2uk_71 {
  background: var(--panel);
  border: 1px solid var(--bd);
  border-radius: 16px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .06);
  padding: 18px 18px 12px;
}

._cardTitle_eo2uk_87 {
  font-weight: 900;
  color: var(--ink);
  font-size: 18px;
  margin-bottom: 10px;
}

._statRow_eo2uk_101 {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

._iconChip_eo2uk_117 {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 20px;
  border: 1px solid var(--bd);
}

._blue_eo2uk_137 {
  background: var(--blue-100);
  border-color: var(--blue-200);
  color: var(--blue);
}

._green_eo2uk_149 {
  background: var(--g-100);
  border-color: var(--g-200);
  color: var(--g);
}

._yellow_eo2uk_161 {
  background: var(--y-100);
  border-color: var(--y-200);
  color: var(--y);
}

._purple_eo2uk_173 {
  background: var(--p-100);
  border-color: var(--p-200);
  color: var(--p);
}

._statLabel_eo2uk_185 {
  color: #41526b;
  font-weight: 800;
  font-size: 14px;
}

._statValue_eo2uk_197 {
  color: var(--ink);
  font-weight: 900;
  font-size: 18px;
}

/* right column containers */
._rightCol_eo2uk_211 {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

._panel_eo2uk_223 {
  background: var(--panel);
  border: 1px solid var(--bd);
  border-radius: 16px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .06);
  padding: 18px;
}

/* academic info form */
._formGrid_eo2uk_241 {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

._field_eo2uk_255 {
  display: flex;
  flex-direction: column;
}

._label_eo2uk_265 {
  color: #5f6f86;
  font-weight: 800;
  font-size: 12.5px;
  margin-bottom: 6px;
}

._input_eo2uk_279 {
  height: 42px;
  border-radius: 10px;
  background: #f9fbff;
  border: 1px solid var(--bd);
  padding: 0 12px;
  color: #334155;
  font-weight: 800;
  font-size: 14px;
}

._input_eo2uk_279:focus {
  outline: none;
  border-color: var(--blue-200);
  box-shadow: 0 0 0 3px #e7efff;
  background: #fff;
}

._selectLike_eo2uk_315 {
  height: 42px;
  border-radius: 10px;
  background: #f9fbff;
  border: 1px solid var(--bd);
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #334155;
  font-weight: 800;
  font-size: 14px;
}

/* account settings row */
._settingRow_eo2uk_345 {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 24px;
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06) inset;
}

._greenSoft_eo2uk_371 {
  background: var(--g-100);
  border-color: var(--g-200);
  color: var(--g);
}

._settingText_eo2uk_383 {}

._settingTitle_eo2uk_387 {
  font-weight: 900;
  color: var(--ink);
  font-size: 16px;
}

._settingSub_eo2uk_399 {
  color: #6b7b92;
  font-weight: 800;
  font-size: 14px;
  margin-top: 2px;
}

._enableBtn_eo2uk_413 {
  height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  border: 2px solid var(--blue-200);
  background: #fff;
  color: var(--blue);
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
}

/* responsive */
@media (max-width: 980px) {
  ._grid_eo2uk_53 {
    grid-template-columns: 1fr;
  }
}:root {
  --bg: #f6f8fd;
  --panel: #ffffff;
  --ink: #0b1424;
  --muted: #6b7c93;
  --muted-2: #7f8fa5;
  --border: #e6edf8;

  --primary: #1e3a8a;
  --primary-2: #2147a4;
  --primary-100: #eef4ff;
  --primary-200: #d8e6ff;

  --green: #16a34a;
  --green-100: #eaf9f0;
  --green-200: #cfeedd;

  --purple: #7c3aed;
  --purple-100: #f3e8ff;
  --purple-200: #eadbff;

  --amber: #f59e0b;
  --amber-100: #fff6e8;
  --amber-200: #ffe6c8;

  --shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
  --shadow-soft: 0 14px 36px rgba(15, 23, 42, 0.06);
}

._page_pnssn_59 {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  padding: 0 0 34px;
}

._container_pnssn_69 {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 22px;
}

._headerWrapper_pnssn_81 {
  width: 100%;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  padding: 20px 0;
  margin-bottom: 28px;
}

._headerRow_pnssn_97 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

._headerText_pnssn_111 {
  min-width: 0;
}

._title_pnssn_119 {
  margin: 0 0 4px;
  color: var(--ink);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 32px;
  line-height: 1.1;
}

._sub_pnssn_137 {
  margin: 0;
  color: #7b8aa0;
  font-weight: 700;
  font-size: 14px;
}

._bookBtn_pnssn_151 {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: var(--primary-2);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

._bookBtn_pnssn_151:active {
  transform: translateY(1px);
}

._bookIcon_pnssn_191 {
  display: grid;
  place-items: center;
  font-size: 18px;
}

._statsGrid_pnssn_203 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 0 0 28px;
}

._statCard_pnssn_217 {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._statText_pnssn_239 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._statLabel_pnssn_251 {
  color: #73829b;
  font-weight: 800;
  font-size: 14px;
}

._statValue_pnssn_263 {
  color: var(--ink);
  font-weight: 900;
  font-size: 22px;
}

._statIcon_pnssn_275 {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 22px;
  border: 1px solid var(--border);
}

._blue_pnssn_295 {
  background: var(--primary-100);
  border-color: var(--primary-200);
  color: var(--primary-2);
}

._green_pnssn_307 {
  background: var(--green-100);
  border-color: var(--green-200);
  color: var(--green);
}

._purple_pnssn_319 {
  background: var(--purple-100);
  border-color: var(--purple-200);
  color: var(--purple);
}

._orange_pnssn_331 {
  background: var(--amber-100);
  border-color: var(--amber-200);
  color: var(--amber);
}

._filterCard_pnssn_343 {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 20px 14px;
  margin-bottom: 28px;
}

._searchWrap_pnssn_361 {
  position: relative;
  margin-bottom: 12px;
}

._searchIcon_pnssn_371 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #96a3b8;
  font-size: 18px;
}

._search_pnssn_361 {
  width: 100%;
  height: 38px;
  border-radius: 8px;
  border: none;
  background: #f8fafc;
  padding: 0 12px 0 38px;
  outline: none;
  color: #1f2937;
  font-weight: 800;
  font-size: 14px;
}

._search_pnssn_361:focus {
  border: 1px solid #1c449c;
  box-shadow: 0 0 0 3px #96a7d0;
  background: #f8fafc;
}

._filtersRow_pnssn_427 {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

._pagination_pnssn_441 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._paginationButton_pnssn_453 {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.2s ease;
}

._paginationButton_pnssn_453:hover:not(:disabled) {
  background: var(--primary-100);
  border-color: var(--primary-200);
  color: var(--primary-2);
}

._paginationButton_pnssn_453:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #f8fafc;
}

._paginationInfo_pnssn_507 {
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}

._dropdown_pnssn_521 {
  position: relative;
}

._selectLike_pnssn_529 {
  width: 100%;
  height: 38px;
  border-radius: 8px;
  border: none;
  background: #f8fafc;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #334155;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}

._chev_pnssn_561 {
  color: #94a3b8;
}

._menu_pnssn_569 {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 180px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
  padding: 6px;
  z-index: 10;
}

._menuItem_pnssn_595 {
  width: 100%;
  height: 34px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #0f172a;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}

._menuItem_pnssn_595:hover {
  background: var(--primary);
  color: #ffffff;
}

._menuItemActive_pnssn_637 {
  background: transparent;
  color: #0f172a;
}

._menuItemActive_pnssn_637:hover {
  background: transparent;
  color: #0f172a;
}

._check_pnssn_657 {
  font-weight: 900;
}

._tabs_pnssn_665 {
  margin: 0 0 28px;
  background: #f3f6fb;
  border-radius: 12px;
  padding: 1px 4px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

._tab_pnssn_665 {
  height: 34px;
  padding: 0 16px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: #0f172a;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
}

._tabActive_pnssn_709 {
  background: #ffffff;
  height: 26px;
}

._list_pnssn_719 {
  display: grid;
  gap: 16px;
  margin-top: 0;
}

._sessionCard_pnssn_731 {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 16px;
}

._sessionLeft_pnssn_755 {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  min-width: 0;
}

._avatar_pnssn_769 {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #e9eef8;
  display: grid;
  place-items: center;
  color: var(--primary-2);
  font-weight: 900;
  font-size: 14px;
}

._sessionBody_pnssn_793 {
  min-width: 0;
}

._sessionTopRow_pnssn_801 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

._sessionTitle_pnssn_815 {
  margin: 0;
  color: var(--ink);
  font-weight: 900;
  font-size: 16px;
}

._badge_pnssn_829 {
  height: 22px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  font-weight: 900;
  font-size: 11px;
  border: 1px solid transparent;
}

._badgeIcon_pnssn_853 {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._badgeUpcoming_pnssn_867 {
  color: var(--primary-2);
  background: var(--primary-100);
  border-color: var(--primary-200);
}

._badgeCompleted_pnssn_879 {
  color: #334155;
  background: #f2f4f7;
  border-color: #e5eaf3;
}

._badgeCancelled_pnssn_891 {
  color: #ef4444;
  background: #fff1f2;
  border-color: #fecdd3;
}

._sessionSub_pnssn_903 {
  margin-top: 4px;
  color: #64748b;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

._midDot_pnssn_925 {
  color: #94a3b8;
}

._metaRow_pnssn_933 {
  margin-top: 10px;
  color: #64748b;
  font-weight: 800;
  font-size: 12.5px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

._metaItem_pnssn_953 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

._feedback_pnssn_965 {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fcfcfd;
  padding: 12px 12px;
  max-width: 620px;
}

._feedbackTop_pnssn_983 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._stars_pnssn_995 {
  display: inline-flex;
  gap: 2px;
}

._star_pnssn_995 {
  font-size: 14px;
  line-height: 1;
  color: #cbd5e1;
}

._starOn_pnssn_1017 {
  color: var(--amber);
}

._feedbackLabel_pnssn_1025 {
  color: #64748b;
  font-weight: 800;
  font-size: 12px;
}

._feedbackText_pnssn_1037 {
  margin-top: 8px;
  color: #475569;
  font-weight: 800;
  font-size: 12.5px;
}

._sessionRight_pnssn_1051 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 6px;
}

._price_pnssn_1067 {
  color: var(--ink);
  font-weight: 900;
  font-size: 18px;
}

._rightTime_pnssn_1079 {
  color: #64748b;
  font-weight: 800;
  font-size: 12.5px;
}

._actions_pnssn_1091 {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

._secondaryBtn_pnssn_1107 {
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--primary-200);
  background: #ffffff;
  color: var(--primary-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 12.5px;
  cursor: pointer;
}

._primaryBtn_pnssn_1137 {
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--primary-2);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 12.5px;
  cursor: pointer;
}

@media (max-width: 1100px) {
  ._statsGrid_pnssn_203 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  ._sessionCard_pnssn_731 {
    grid-template-columns: 1fr;
  }
  ._sessionRight_pnssn_1051 {
    align-items: flex-start;
    text-align: left;
  }
  ._actions_pnssn_1091 {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  ._statsGrid_pnssn_203 {
    grid-template-columns: 1fr;
  }
  ._headerRow_pnssn_97 {
    flex-direction: column;
    align-items: flex-start;
  }
  ._bookBtn_pnssn_151 {
    width: 100%;
    justify-content: center;
  }
  ._tabs_pnssn_665 {
    width: 100%;
    justify-content: space-between;
  }
}

/* Rate Modal */
._modalOverlay_pnssn_1243 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

._modalContent_pnssn_1271 {
  background: #ffffff;
  border-radius: 12px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
}

._modalHeader_pnssn_1287 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

._modalTitle_pnssn_1303 {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  color: var(--ink);
}

._modalClose_pnssn_1317 {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #64748b;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

._modalClose_pnssn_1317:hover {
  color: var(--ink);
}

._modalForm_pnssn_1349 {
  padding: 12px 16px 16px;
}

._modalLabel_pnssn_1357 {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
}

._ratingSection_pnssn_1373 {
  margin-bottom: 16px;
}

._starsRating_pnssn_1381 {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
}

._starButton_pnssn_1395 {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #cbd5e1;
  font-size: 20px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

._starButton_pnssn_1395:hover {
  color: var(--amber);
}

._starButtonActive_pnssn_1429 {
  color: var(--amber);
}

._commentSection_pnssn_1437 {
  margin-bottom: 16px;
}

._commentInput_pnssn_1445 {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  background: #ffffff;
  resize: vertical;
  font-family: inherit;
  outline: none;
}

._commentInput_pnssn_1445:focus {
  border-color: var(--primary-200);
  box-shadow: 0 0 0 3px rgba(33, 71, 164, 0.1);
}

._commentInput_pnssn_1445::-moz-placeholder {
  color: #94a3b8;
}

._commentInput_pnssn_1445::placeholder {
  color: #94a3b8;
}

._modalActions_pnssn_1491 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

._submitButton_pnssn_1503 {
  height: 32px;
  padding: 0 16px;
  border-radius: 8px;
  border: none;
  background: var(--primary-2);
  color: #ffffff;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
}

._submitButton_pnssn_1503:hover {
  opacity: 0.9;
}

._submitButton_pnssn_1503:active {
  transform: translateY(1px);
}

._submitButton_pnssn_1503:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._submitButton_pnssn_1503:disabled:active {
  transform: none;
}

._submitButton_pnssn_1503:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

._submitButton_pnssn_1503 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Three Dots Loader */
._threeDotsLoader_pnssn_1585 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
}

/* Seven Dots Loader */
._sevenDotsLoader_pnssn_1601 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 4px;
}

._dot_pnssn_1615 {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: currentColor;
  animation: _dotPulse_pnssn_1 1.4s ease-in-out infinite both;
}

._threeDotsLoader_pnssn_1585 ._dot_pnssn_1615:nth-child(1) {
  animation-delay: -0.32s;
}

._threeDotsLoader_pnssn_1585 ._dot_pnssn_1615:nth-child(2) {
  animation-delay: -0.16s;
}

._threeDotsLoader_pnssn_1585 ._dot_pnssn_1615:nth-child(3) {
  animation-delay: 0;
}

._sevenDotsLoader_pnssn_1601 ._dot_pnssn_1615:nth-child(1) {
  animation-delay: -0.6s;
}

._sevenDotsLoader_pnssn_1601 ._dot_pnssn_1615:nth-child(2) {
  animation-delay: -0.5s;
}

._sevenDotsLoader_pnssn_1601 ._dot_pnssn_1615:nth-child(3) {
  animation-delay: -0.4s;
}

._sevenDotsLoader_pnssn_1601 ._dot_pnssn_1615:nth-child(4) {
  animation-delay: -0.3s;
}

._sevenDotsLoader_pnssn_1601 ._dot_pnssn_1615:nth-child(5) {
  animation-delay: -0.2s;
}

._sevenDotsLoader_pnssn_1601 ._dot_pnssn_1615:nth-child(6) {
  animation-delay: -0.1s;
}

._sevenDotsLoader_pnssn_1601 ._dot_pnssn_1615:nth-child(7) {
  animation-delay: 0;
}

@keyframes _dotPulse_pnssn_1 {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

._secondaryBtn_pnssn_1107:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

._emptyState_pnssn_1745 {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}

._emptyState_pnssn_1745 p {
  margin: 0 0 20px 0;
  font-size: 16px;
}

/* Booking Details Modal */
._bookingDetailsModal_pnssn_1769 {
  background: #ffffff;
  border-radius: 16px;
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

._bookingDetailsContent_pnssn_1793 {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

._bookingHeader_pnssn_1805 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

._bookingAvatar_pnssn_1823 {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--primary-100);
  display: grid;
  place-items: center;
  color: var(--primary-2);
  font-weight: 900;
  font-size: 20px;
  flex-shrink: 0;
  overflow: hidden;
}

._bookingAvatar_pnssn_1823 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

._bookingHeaderText_pnssn_1863 {
  flex: 1;
  min-width: 0;
}

._bookingTutorName_pnssn_1873 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 900;
  color: var(--ink);
}

._bookingDepartment_pnssn_1887 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
}

._bookingStatusBadge_pnssn_1901 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid transparent;
}

._bookingDetailsGrid_pnssn_1923 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

._bookingDetailCard_pnssn_1937 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--primary-100);
  border: 1px solid var(--primary-200);
  border-radius: 12px;
}

._bookingDetailIcon_pnssn_1957 {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--primary-2);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}

._bookingDetailContent_pnssn_1981 {
  flex: 1;
  min-width: 0;
}

._bookingDetailLabel_pnssn_1991 {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 4px;
}

._bookingDetailValue_pnssn_2005 {
  font-size: 14px;
  font-weight: 900;
  color: var(--ink);
}

._bookingSection_pnssn_2017 {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

._bookingSection_pnssn_2017:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

._bookingSectionTitle_pnssn_2041 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 900;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

._bookingSectionIcon_pnssn_2061 {
  font-size: 16px;
  color: var(--primary-2);
}

._bookingInfoRow_pnssn_2071 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  gap: 16px;
}

._bookingInfoLabel_pnssn_2087 {
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

._bookingInfoIcon_pnssn_2105 {
  font-size: 14px;
}

._bookingInfoValue_pnssn_2113 {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink);
  text-align: right;
  flex: 1;
}

._paymentPaid_pnssn_2129 {
  color: var(--green);
}

._paymentPending_pnssn_2137 {
  color: var(--amber);
}

._bookingNotes_pnssn_2145 {
  margin: 0;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.6;
}

._bookingRating_pnssn_2167 {
  margin-top: 8px;
}

._bookingReview_pnssn_2175 {
  margin-top: 8px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.6;
}

._meetingLink_pnssn_2197 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--primary-2);
  color: #ffffff;
  border-radius: 10px;
  font-weight: 900;
  font-size: 14px;
  text-decoration: none;
  transition: opacity 0.2s;
}

._meetingLink_pnssn_2197:hover {
  opacity: 0.9;
}

._bookingDetailsActions_pnssn_2233 {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

._modalHint_pnssn_2249 {
  margin: 8px 0 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 760px) {
  ._bookingDetailsGrid_pnssn_1923 {
    grid-template-columns: 1fr;
  }

  ._bookingDetailsActions_pnssn_2233 {
    flex-direction: column;
  }

  ._bookingDetailsActions_pnssn_2233 button {
    width: 100%;
  }
}

/* Skeleton Loading Styles */
@keyframes _skeletonPulse_pnssn_1 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes _skeletonShimmer_pnssn_1 {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

._avatarSkeleton_pnssn_2331 {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}

._skeletonCircle_pnssn_2345 {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_pnssn_1 1.5s ease-in-out infinite;
}

._skeletonTitle_pnssn_2363 {
  height: 20px;
  width: 200px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_pnssn_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}

._skeletonBadge_pnssn_2383 {
  height: 24px;
  width: 100px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_pnssn_1 1.5s ease-in-out infinite;
  border-radius: 12px;
}

._skeletonText_pnssn_2401 {
  height: 14px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_pnssn_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin: 4px 0;
}

._skeletonPrice_pnssn_2419 {
  height: 20px;
  width: 80px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_pnssn_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 12px;
}

._skeletonButton_pnssn_2439 {
  height: 36px;
  width: 80px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_pnssn_1 1.5s ease-in-out infinite;
  border-radius: 8px;
}

/* Packages Section */
._packagesSection_pnssn_2459 {
  margin: 0 0 28px;
}

._sectionTitle_pnssn_2467 {
  margin: 0 0 18px;
  color: var(--ink);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.01em;
}

._packagesGrid_pnssn_2483 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

._packageCard_pnssn_2495 {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  padding: 20px;
  transition: all 0.2s ease;
}

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

._packageHeader_pnssn_2523 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

._packageAvatar_pnssn_2541 {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--primary-100);
  border: 1px solid var(--primary-200);
  display: grid;
  place-items: center;
  color: var(--primary-2);
  font-weight: 900;
  font-size: 16px;
  flex-shrink: 0;
}

._packageHeaderText_pnssn_2569 {
  flex: 1;
  min-width: 0;
}

._packageTutorName_pnssn_2579 {
  margin: 0 0 4px;
  color: var(--ink);
  font-weight: 900;
  font-size: 16px;
  line-height: 1.2;
}

._packageDepartment_pnssn_2595 {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

._packageBadge_pnssn_2609 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--purple-100);
  border: 1px solid var(--purple-200);
  border-radius: 8px;
  color: var(--purple);
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
}

._packageBadgeIcon_pnssn_2637 {
  font-size: 14px;
}

._packageBody_pnssn_2645 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._packageProgress_pnssn_2657 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._packageProgressHeader_pnssn_2669 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

._packageProgressLabel_pnssn_2681 {
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}

._packageProgressValue_pnssn_2693 {
  color: var(--ink);
  font-weight: 900;
  font-size: 14px;
}

._packageProgressBar_pnssn_2705 {
  width: 100%;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

._packageProgressFill_pnssn_2721 {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-2) 0%, var(--primary) 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

._packageDetails_pnssn_2735 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._packageDetailRow_pnssn_2747 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}

._packageDetailRow_pnssn_2747:last-of-type {
  border-bottom: none;
}

._packageDetailLabel_pnssn_2771 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}

._packageDetailIcon_pnssn_2789 {
  font-size: 16px;
  color: var(--primary-2);
}

._packageDetailValue_pnssn_2799 {
  color: var(--ink);
  font-weight: 900;
  font-size: 14px;
}

._packageStatus_pnssn_2811 {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

._packageStatusBadge_pnssn_2823 {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 12px;
}

._packageStatusActive_pnssn_2841 {
  background: var(--green-100);
  border: 1px solid var(--green-200);
  color: var(--green);
}

._packageStatusExpired_pnssn_2853 {
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #dc2626;
}

._packageStatusInactive_pnssn_2865 {
  background: var(--amber-100);
  border: 1px solid var(--amber-200);
  color: var(--amber);
}

/* Responsive */
@media (max-width: 768px) {
  ._packagesGrid_pnssn_2483 {
    grid-template-columns: 1fr;
  }
}:root {
    --ink: #0b1424;
    --muted: #667085;
    --bd: #e9eef8;
    --panel: #ffffff;

    --blue: #2147a4;
    --blue-100: #eef3ff;
    --blue-200: #d9e6ff;
    --green: #16a34a;
    --green-100: #e9f9ef;
    --green-200: #cfeedd;
    --purple: #7c3aed;
    --purple-100: #f3e8ff;
    --purple-200: #eadbff;
    --orange: #f59e0b;
    --orange-100: #fff4e5;
    --orange-200: #ffe4c7;
}

/* page shell */
._wrap_52bmo_43 {
    padding: 14px 22px 28px;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
}

/* header */
._headerRow_52bmo_55 {
    max-width: 1240px;
    margin: 0 auto 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

._title_52bmo_73 {
    font-weight: 900;
    letter-spacing: -.02em;
    font-size: clamp(24px, 4.6vw, 40px);
    color: var(--ink);
    margin: 0 0 4px;
}

._sub_52bmo_89 {
    color: #7b8aa0;
    font-weight: 700;
    font-size: 14px;
    margin: 0;
}

/* book button */
._bookBtn_52bmo_105 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    border: none;
    color: #fff;
    background: var(--blue);
    font-weight: 900;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(33, 71, 164, .22);
}

._bookIcon_52bmo_137 {
    font-size: 18px;
}

/* stats */
._statsGrid_52bmo_147 {
    max-width: 1240px;
    margin: 10px auto 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

._card_52bmo_163 {
    background: var(--panel);
    border: 1px solid var(--bd);
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .06);
    padding: 16px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

._cardText_52bmo_185 {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

._cardLabel_52bmo_197 {
    color: #73829b;
    font-weight: 800;
    font-size: 14px;
}

._cardValue_52bmo_209 {
    color: var(--ink);
    font-weight: 900;
    font-size: 22px;
}

._iconChip_52bmo_221 {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 22px;
    border: 1px solid var(--bd);
}

._blue_52bmo_241 {
    background: var(--blue-100);
    border-color: var(--blue-200);
    color: var(--blue);
}

._green_52bmo_253 {
    background: var(--green-100);
    border-color: var(--green-200);
    color: var(--green);
}

._purple_52bmo_265 {
    background: var(--purple-100);
    border-color: var(--purple-200);
    color: var(--purple);
}

._orange_52bmo_277 {
    background: var(--orange-100);
    border-color: var(--orange-200);
    color: var(--orange);
}

/* filter card */
._filterCard_52bmo_291 {
    max-width: 1240px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--bd);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .06);
    padding: 14px;
}

._searchWrap_52bmo_311 {
    position: relative;
    margin-bottom: 12px;
}

._searchIcon_52bmo_321 {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #96a3b8;
    font-size: 18px;
}

._search_52bmo_311 {
    width: 100%;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--bd);
    background: #f9fbff;
    padding: 0 12px 0 38px;
    outline: none;
    color: #1f2937;
    font-weight: 800;
    font-size: 14px;
}

._search_52bmo_311:focus {
    border-color: var(--blue-200);
    box-shadow: 0 0 0 3px #e7efff;
    background: #fff;
}

/* filters row */
._filtersRow_52bmo_379 {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

._selectLike_52bmo_391 {
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--bd);
    background: #f9fbff;
    padding: 0 12px;
    min-width: 180px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #334155;
    font-weight: 800;
    font-size: 14px;
}

/* responsive */
@media (max-width: 1100px) {
    ._statsGrid_52bmo_147 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    ._statsGrid_52bmo_147 {
        grid-template-columns: 1fr;
    }

    ._bookBtn_52bmo_105 {
        width: 100%;
        justify-content: center;
    }

    ._headerRow_52bmo_55 {
        flex-direction: column;
        align-items: flex-start;
    }
}:root {
    --ink: #0b1424;
    --muted: #667085;
    --bd: #e9eef8;
    --panel: #ffffff;

    --blue: #2147a4;
    --blue-100: #eef3ff;
    --blue-200: #d9e6ff;
    --green: #16a34a;
    --green-100: #e9f9ef;
    --green-200: #cfeedd;
    --purple: #7c3aed;
    --purple-100: #f3e8ff;
    --purple-200: #eadbff;
}

/* list container */
._wrap_1blgy_37 {
    max-width: 1280px;
    margin: 6px auto 28px;
    display: grid;
    gap: 22px;
}

/* card */
._card_1blgy_53 {
    background: var(--panel);
    border: 1px solid var(--bd);
    border-radius: 18px;
    box-shadow: 0 22px 46px rgba(15, 23, 42, .07);
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

/* left side */
._left_1blgy_77 {
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: 14px;
    align-items: start;
}

._chip_1blgy_91 {
    width: 68px;
    height: 68px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 24px;
    border: 1px solid var(--bd);
}

._blue_1blgy_111 {
    background: var(--blue-100);
    border-color: var(--blue-200);
    color: var(--blue);
}

._green_1blgy_123 {
    background: var(--green-100);
    border-color: var(--green-200);
    color: var(--green);
}

._purple_1blgy_135 {
    background: var(--purple-100);
    border-color: var(--purple-200);
    color: var(--purple);
}

._content_1blgy_147 {
    min-width: 0;
}

._titleRow_1blgy_155 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

._title_1blgy_155 {
    margin: 0;
    color: var(--ink);
    font-weight: 900;
    font-size: 22px;
}

._badge_1blgy_183 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--green-100);
    border: 1px solid var(--green-200);
    color: var(--green);
    font-weight: 900;
    font-size: 12.5px;
}

._badgeIcon_1blgy_211 {
    font-size: 15px;
}

._line_1blgy_219 {
    color: #41526b;
    font-weight: 800;
    font-size: 15px;
    margin-top: 8px;
}

._dim_1blgy_233 {
    color: #7a8aa0;
}

._meta_1blgy_241 {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    color: #63738c;
    font-weight: 800;
    font-size: 14px;
    margin-top: 10px;
}

._metaItem_1blgy_261 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* right side */
._right_1blgy_275 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    text-align: right;
}

._amount_1blgy_291 {
    color: var(--ink);
    font-weight: 900;
    font-size: 24px;
}

._dt_1blgy_303 {
    color: #60708a;
    font-weight: 800;
    font-size: 14px;
}

._details_1blgy_315 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: 12px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--bd);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
    font-weight: 900;
    font-size: 14px;
    cursor: pointer;
}

/* responsive */
@media (max-width: 860px) {
    ._card_1blgy_53 {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    ._right_1blgy_275 {
        align-items: flex-start;
        text-align: left;
    }
}._page_6tcar_1 {
  min-height: 100vh;
  padding: 2rem;
  background: #f9fafb;
}

._container_6tcar_13 {
  max-width: 900px;
  margin: 0 auto;
}

._backBtn_6tcar_23 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
  padding: 0.5rem;
}

._backBtn_6tcar_23:hover {
  color: #374151;
}

._header_6tcar_57 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

._header_6tcar_57 h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

._statusBadge_6tcar_85 {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: capitalize;
}

._statusBadge_6tcar_85._confirmed_6tcar_101 {
  background: #dbeafe;
  color: #1e40af;
}

._statusBadge_6tcar_85._completed_6tcar_111 {
  background: #d1fae5;
  color: #065f46;
}

._statusBadge_6tcar_85._cancelled_6tcar_121 {
  background: #fee2e2;
  color: #991b1b;
}

._content_6tcar_131 {
  background: white;
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

._section_6tcar_145 {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #e5e7eb;
}

._section_6tcar_145:last-child {
  border-bottom: none;
}

._section_6tcar_145 h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 1rem 0;
}

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

._tutorAvatar_6tcar_191 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

._tutorInfo_6tcar_179 h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

._tutorInfo_6tcar_179 p {
  margin: 0.25rem 0 0 0;
  color: #6b7280;
  font-size: 0.875rem;
}

._detailsGrid_6tcar_229 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

._detailsGrid_6tcar_229 div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

._detailsGrid_6tcar_229 strong {
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 500;
}

._detailsGrid_6tcar_229 p {
  margin: 0;
  color: #1f2937;
  font-size: 1rem;
}

._actions_6tcar_277 {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

._cancelBtn_6tcar_289,
._rateBtn_6tcar_291 {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

._cancelBtn_6tcar_289 {
  background: #fee2e2;
  color: #991b1b;
}

._cancelBtn_6tcar_289:hover {
  background: #fecaca;
}

._rateBtn_6tcar_291 {
  background: #dbeafe;
  color: #1e40af;
}

._rateBtn_6tcar_291:hover {
  background: #bfdbfe;
}

._modal_6tcar_347 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

._modalContent_6tcar_373 {
  background: white;
  border-radius: 0.75rem;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
}

._modalContent_6tcar_373 h3 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
  font-weight: 600;
}

._textarea_6tcar_401 {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
  margin-top: 0.5rem;
}

._textarea_6tcar_401:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

._ratingInput_6tcar_435,
._reviewInput_6tcar_437 {
  margin-bottom: 1rem;
}

._ratingInput_6tcar_435 label,
._reviewInput_6tcar_437 label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #374151;
}

._ratingInput_6tcar_435 input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 1rem;
}

._modalActions_6tcar_477 {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

._modalActions_6tcar_477 button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

._modalActions_6tcar_477 button:first-child {
  background: #f3f4f6;
  color: #374151;
}

._modalActions_6tcar_477 button:first-child:hover {
  background: #e5e7eb;
}

._modalActions_6tcar_477 button:last-child {
  background: #667eea;
  color: white;
}

._modalActions_6tcar_477 button:last-child:hover {
  background: #5568d3;
}

._modalActions_6tcar_477 button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._error_6tcar_557 {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}

._page_14cso_1 {
  min-height: 100vh;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

._container_14cso_19 {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

._content_14cso_31 {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 48px 32px;
  text-align: center;
  animation: _fadeInUp_14cso_1 0.5s ease-out;
}

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

._iconContainer_14cso_71 {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}

._successIcon_14cso_83 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 40px;
  animation: _scaleIn_14cso_1 0.5s ease-out;
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.3);
}

._verifyingIcon_14cso_111 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 40px;
  position: relative;
}


@keyframes _scaleIn_14cso_1 {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


._spinner_14cso_163 {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: _spin_14cso_163 1s linear infinite;
}

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

._title_14cso_193 {
  font-size: 32px;
  font-weight: 800;
  color: #1a1d29;
  margin: 0 0 16px;
  line-height: 1.2;
}

._message_14cso_209 {
  font-size: 16px;
  color: #64748b;
  margin: 0 0 32px;
  line-height: 1.6;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

._detailsCard_14cso_229 {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  margin: 32px 0;
  text-align: left;
}

._detailsHeader_14cso_247 {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

._detailsTitle_14cso_259 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1d29;
  margin: 0;
}

._detailsContent_14cso_273 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._detailRow_14cso_285 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}

._detailRow_14cso_285:last-child {
  border-bottom: none;
}

._detailLabel_14cso_309 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
}

._detailIcon_14cso_327 {
  font-size: 18px;
  color: #3b82f6;
}

._detailValue_14cso_337 {
  font-size: 15px;
  font-weight: 700;
  color: #1a1d29;
}

._statusPaid_14cso_349 {
  color: #10b981;
  display: flex;
  align-items: center;
  gap: 6px;
}

._statusPaid_14cso_349::before {
  content: "✓";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #10b981;
  color: #ffffff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

._primaryButton_14cso_389 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
  margin-top: 8px;
}

._primaryButton_14cso_389:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4);
}

._primaryButton_14cso_389:active {
  transform: translateY(0);
}

._buttonIcon_14cso_443 {
  font-size: 18px;
  transition: transform 0.2s ease;
}

._primaryButton_14cso_389:hover ._buttonIcon_14cso_443 {
  transform: translateX(4px);
}


/* Responsive Design */
@media (max-width: 640px) {
  ._content_14cso_31 {
    padding: 32px 24px;
  }

  ._title_14cso_193 {
    font-size: 28px;
  }

  ._message_14cso_209 {
    font-size: 15px;
  }

  ._detailsCard_14cso_229 {
    padding: 20px;
  }

  ._primaryButton_14cso_389,
  ._secondaryButton_14cso_501 {
    width: 100%;
    padding: 14px 24px;
  }

}
._page_d3pew_1 {
  min-height: 100vh;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

._container_d3pew_19 {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

._content_d3pew_31 {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 48px 32px;
  text-align: center;
  animation: _fadeInUp_d3pew_1 0.5s ease-out;
}

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

._iconContainer_d3pew_71 {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}

._failureIcon_d3pew_83 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 40px;
  animation: _scaleIn_d3pew_1 0.5s ease-out;
  box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.3);
}

._verifyingIcon_d3pew_111 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 40px;
  position: relative;
}

@keyframes _scaleIn_d3pew_1 {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

._spinner_d3pew_159 {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: _spin_d3pew_159 1s linear infinite;
}

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

._title_d3pew_189 {
  font-size: 32px;
  font-weight: 800;
  color: #1a1d29;
  margin: 0 0 16px;
  line-height: 1.2;
}

._message_d3pew_205 {
  font-size: 16px;
  color: #64748b;
  margin: 0 0 32px;
  line-height: 1.6;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

._detailsCard_d3pew_225 {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  padding: 24px;
  margin: 32px 0;
  text-align: left;
}

._detailsHeader_d3pew_243 {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #fecaca;
}

._detailsTitle_d3pew_255 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1d29;
  margin: 0;
}

._detailsContent_d3pew_269 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._detailRow_d3pew_281 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #fee2e2;
}

._detailRow_d3pew_281:last-child {
  border-bottom: none;
}

._detailLabel_d3pew_305 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
}

._detailIcon_d3pew_323 {
  font-size: 18px;
  color: #ef4444;
}

._detailValue_d3pew_333 {
  font-size: 15px;
  font-weight: 700;
  color: #1a1d29;
}

._statusFailed_d3pew_345 {
  color: #dc2626;
  display: flex;
  align-items: center;
  gap: 6px;
}

._statusFailed_d3pew_345::before {
  content: "✕";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dc2626;
  color: #ffffff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

._primaryButton_d3pew_385 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
  margin-top: 8px;
}

._primaryButton_d3pew_385:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4);
}

._primaryButton_d3pew_385:active {
  transform: translateY(0);
}

._buttonIcon_d3pew_439 {
  font-size: 18px;
  transition: transform 0.2s ease;
}

._primaryButton_d3pew_385:hover ._buttonIcon_d3pew_439 {
  transform: translateX(-4px);
}

/* Responsive Design */
@media (max-width: 640px) {
  ._content_d3pew_31 {
    padding: 32px 24px;
  }

  ._title_d3pew_189 {
    font-size: 28px;
  }

  ._message_d3pew_205 {
    font-size: 15px;
  }

  ._detailsCard_d3pew_225 {
    padding: 20px;
  }

  ._primaryButton_d3pew_385 {
    width: 100%;
    padding: 14px 24px;
  }
}
:root {
  --bg: #f6f8fd;
  --panel: #ffffff;
  --ink: #0b1424;
  --muted: #6b7c93;
  --muted-2: #7f8fa5;
  --border: #e6edf8;

  --primary: #1e3a8a;
  --primary-2: #2147a4;
  --primary-100: #eef4ff;
  --primary-200: #d8e6ff;

  --green: #16a34a;
  --green-100: #eaf9f0;
  --green-200: #cfeedd;

  --purple: #7c3aed;
  --purple-100: #f3e8ff;
  --purple-200: #eadbff;

  --amber: #f59e0b;
  --amber-100: #fff6e8;
  --amber-200: #ffe6c8;

  --red: #ef4444;
  --red-100: #fef2f2;
  --red-200: #fecaca;

  --shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
  --shadow-soft: 0 14px 36px rgba(15, 23, 42, 0.06);
}

._page_1sdj6_34 {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  padding: 0 0 34px;
  min-height: 100vh;
}

._container_1sdj6_40 {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 22px;
}

._headerWrapper_1sdj6_46 {
  width: 100%;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  padding: 20px 0;
  margin-bottom: 28px;
}

._headerRow_1sdj6_54 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

._headerText_1sdj6_61 {
  min-width: 0;
}

._title_1sdj6_65 {
  margin: 0 0 4px;
  color: var(--ink);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 32px;
  line-height: 1.1;
}

._sub_1sdj6_74 {
  margin: 0;
  color: #7b8aa0;
  font-weight: 700;
  font-size: 14px;
}

._bookBtn_1sdj6_81 {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: var(--primary-2);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

._bookBtn_1sdj6_81:active {
  transform: translateY(1px);
}

._bookIcon_1sdj6_101 {
  display: grid;
  place-items: center;
  font-size: 18px;
}

._statsGrid_1sdj6_107 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 0 0 28px;
}

._statCard_1sdj6_114 {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._statText_1sdj6_125 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._statLabel_1sdj6_131 {
  color: #73829b;
  font-weight: 800;
  font-size: 14px;
}

._statValue_1sdj6_137 {
  color: var(--ink);
  font-weight: 900;
  font-size: 22px;
}

._statIcon_1sdj6_143 {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 22px;
  border: 1px solid var(--border);
}

._blue_1sdj6_153 {
  background: var(--primary-100);
  border-color: var(--primary-200);
  color: var(--primary-2);
}

._green_1sdj6_159 {
  background: var(--green-100);
  border-color: var(--green-200);
  color: var(--green);
}

._purple_1sdj6_165 {
  background: var(--purple-100);
  border-color: var(--purple-200);
  color: var(--purple);
}

._amber_1sdj6_171 {
  background: var(--amber-100);
  border-color: var(--amber-200);
  color: var(--amber);
}

._filterCard_1sdj6_177 {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 20px 14px;
  margin-bottom: 28px;
}

._searchWrap_1sdj6_186 {
  position: relative;
  margin-bottom: 12px;
}

._searchIcon_1sdj6_191 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #96a3b8;
  font-size: 18px;
}

._search_1sdj6_186 {
  width: 100%;
  height: 38px;
  border-radius: 8px;
  border: none;
  background: #f8fafc;
  padding: 0 12px 0 38px;
  outline: none;
  color: #1f2937;
  font-weight: 800;
  font-size: 14px;
}

._search_1sdj6_186:focus {
  border: 1px solid #1c449c;
  box-shadow: 0 0 0 3px #96a7d0;
  background: #f8fafc;
}

._filtersRow_1sdj6_219 {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

._pagination_1sdj6_226 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._paginationButton_1sdj6_232 {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.2s ease;
}

._paginationButton_1sdj6_232:hover:not(:disabled) {
  background: var(--primary-100);
  border-color: var(--primary-200);
  color: var(--primary-2);
}

._paginationButton_1sdj6_232:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #f8fafc;
}

._paginationInfo_1sdj6_259 {
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}

._dropdown_1sdj6_266 {
  position: relative;
}

._selectLike_1sdj6_270 {
  width: 100%;
  height: 38px;
  border-radius: 8px;
  border: none;
  background: #f8fafc;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #334155;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}

._chev_1sdj6_286 {
  color: #94a3b8;
}

._menu_1sdj6_290 {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 180px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
  padding: 6px;
  z-index: 10;
}

._menuItem_1sdj6_303 {
  width: 100%;
  height: 34px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #0f172a;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}

._menuItem_1sdj6_303:hover {
  background: var(--primary);
  color: #ffffff;
}

._menuItemActive_1sdj6_324 {
  background: transparent;
  color: #0f172a;
}

._check_1sdj6_329 {
  font-weight: 900;
}

._tabs_1sdj6_333 {
  margin: 0 0 28px;
  background: #f3f6fb;
  border-radius: 12px;
  padding: 1px 4px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

._tab_1sdj6_333 {
  height: 34px;
  padding: 0 16px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: #0f172a;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
}

._tabActive_1sdj6_355 {
  background: #ffffff;
  height: 26px;
}

._list_1sdj6_360 {
  display: grid;
  gap: 16px;
  margin-top: 0;
}

._taskCard_1sdj6_366 {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 16px;
}

._taskLeft_1sdj6_378 {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  min-width: 0;
}

._taskIcon_1sdj6_385 {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 20px;
  border: 1px solid var(--border);
}

._taskBody_1sdj6_395 {
  min-width: 0;
}

._taskTopRow_1sdj6_399 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

._taskTitle_1sdj6_406 {
  margin: 0;
  color: var(--ink);
  font-weight: 900;
  font-size: 16px;
  text-transform: capitalize;
}

._badge_1sdj6_414 {
  height: 22px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  font-weight: 900;
  font-size: 11px;
  border: 1px solid transparent;
}

._badgeIcon_1sdj6_426 {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._badgePending_1sdj6_433 {
  color: var(--amber);
  background: var(--amber-100);
  border-color: var(--amber-200);
}

._badgeAccepted_1sdj6_439 {
  color: var(--primary-2);
  background: var(--primary-100);
  border-color: var(--primary-200);
}

._badgeCompleted_1sdj6_445 {
  color: var(--green);
  background: var(--green-100);
  border-color: var(--green-200);
}

._badgeCancelled_1sdj6_451 {
  color: var(--red);
  background: var(--red-100);
  border-color: var(--red-200);
}

._taskSub_1sdj6_457 {
  margin-top: 4px;
  color: #64748b;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

._midDot_1sdj6_468 {
  color: #94a3b8;
}

._taskDescription_1sdj6_472 {
  margin: 8px 0 0;
  color: #475569;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.5;
}

._metaRow_1sdj6_480 {
  margin-top: 10px;
  color: #64748b;
  font-weight: 800;
  font-size: 12.5px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

._metaItem_1sdj6_490 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

._pastDue_1sdj6_496 {
  color: var(--red);
}

._assignedTutor_1sdj6_500 {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--primary-100);
  border: 1px solid var(--primary-200);
  border-radius: 8px;
  color: var(--primary-2);
  font-weight: 800;
  font-size: 12px;
}

._tutorIcon_1sdj6_514 {
  font-size: 14px;
}

._taskRight_1sdj6_518 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 6px;
}

._price_1sdj6_526 {
  color: var(--ink);
  font-weight: 900;
  font-size: 18px;
}

._budgetHint_1sdj6_532 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--ink);
  font-weight: 900;
  font-size: 16px;
}

._budgetLabel_1sdj6_541 {
  color: #94a3b8;
  font-weight: 700;
  font-size: 11px;
}

._taskId_1sdj6_547 {
  color: #94a3b8;
  font-weight: 700;
  font-size: 11px;
}

._actions_1sdj6_553 {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

._secondaryBtn_1sdj6_561 {
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--primary-200);
  background: #ffffff;
  color: var(--primary-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 12.5px;
  cursor: pointer;
}

._secondaryBtn_1sdj6_561:hover {
  background: var(--primary-100);
}

._primaryBtn_1sdj6_580 {
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--primary-2);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 12.5px;
  cursor: pointer;
}

._primaryBtn_1sdj6_580:hover {
  opacity: 0.9;
}

._dangerBtn_1sdj6_599 {
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--red);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 12.5px;
  cursor: pointer;
}

._dangerBtn_1sdj6_599:hover {
  opacity: 0.9;
}

._dangerBtn_1sdj6_599:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

._emptyState_1sdj6_623 {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}

._emptyState_1sdj6_623 p {
  margin: 16px 0 20px 0;
  font-size: 16px;
}

._emptyIcon_1sdj6_634 {
  font-size: 48px;
  color: #cbd5e1;
}

@media (max-width: 1100px) {
  ._statsGrid_1sdj6_107 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  ._taskCard_1sdj6_366 {
    grid-template-columns: 1fr;
  }
  ._taskRight_1sdj6_518 {
    align-items: flex-start;
    text-align: left;
  }
  ._actions_1sdj6_553 {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  ._statsGrid_1sdj6_107 {
    grid-template-columns: 1fr;
  }
  ._headerRow_1sdj6_54 {
    flex-direction: column;
    align-items: flex-start;
  }
  ._bookBtn_1sdj6_81 {
    width: 100%;
    justify-content: center;
  }
  ._tabs_1sdj6_333 {
    width: 100%;
    justify-content: space-between;
  }
}

/* Modal */
._modalOverlay_1sdj6_677 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

._modalContent_1sdj6_691 {
  background: #ffffff;
  border-radius: 12px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
}

._modalHeader_1sdj6_699 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

._modalTitle_1sdj6_707 {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  color: var(--ink);
}

._modalClose_1sdj6_714 {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #64748b;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

._modalClose_1sdj6_714:hover {
  color: var(--ink);
}

._modalForm_1sdj6_730 {
  padding: 16px;
}

._warningBox_1sdj6_734 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--amber-100);
  border: 1px solid var(--amber-200);
  border-radius: 8px;
  margin-bottom: 16px;
}

._warningIcon_1sdj6_745 {
  font-size: 20px;
  color: var(--amber);
  flex-shrink: 0;
  margin-top: 2px;
}

._warningBox_1sdj6_734 p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #78350f;
  line-height: 1.5;
}

._modalLabel_1sdj6_760 {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
}

._commentSection_1sdj6_768 {
  margin-bottom: 16px;
}

._commentInput_1sdj6_772 {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  background: #ffffff;
  resize: vertical;
  font-family: inherit;
  outline: none;
}

._commentInput_1sdj6_772:focus {
  border-color: var(--primary-200);
  box-shadow: 0 0 0 3px rgba(33, 71, 164, 0.1);
}

._commentInput_1sdj6_772::-moz-placeholder {
  color: #94a3b8;
}

._commentInput_1sdj6_772::placeholder {
  color: #94a3b8;
}

._modalActions_1sdj6_795 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Seven Dots Loader */
._sevenDotsLoader_1sdj6_802 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 4px;
}

._dot_1sdj6_809 {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: currentColor;
  animation: _dotPulse_1sdj6_1 1.4s ease-in-out infinite both;
}

._sevenDotsLoader_1sdj6_802 ._dot_1sdj6_809:nth-child(1) {
  animation-delay: -0.6s;
}

._sevenDotsLoader_1sdj6_802 ._dot_1sdj6_809:nth-child(2) {
  animation-delay: -0.5s;
}

._sevenDotsLoader_1sdj6_802 ._dot_1sdj6_809:nth-child(3) {
  animation-delay: -0.4s;
}

._sevenDotsLoader_1sdj6_802 ._dot_1sdj6_809:nth-child(4) {
  animation-delay: -0.3s;
}

._sevenDotsLoader_1sdj6_802 ._dot_1sdj6_809:nth-child(5) {
  animation-delay: -0.2s;
}

._sevenDotsLoader_1sdj6_802 ._dot_1sdj6_809:nth-child(6) {
  animation-delay: -0.1s;
}

._sevenDotsLoader_1sdj6_802 ._dot_1sdj6_809:nth-child(7) {
  animation-delay: 0;
}

@keyframes _dotPulse_1sdj6_1 {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Skeleton Loading */
@keyframes _skeletonShimmer_1sdj6_1 {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

._avatarSkeleton_1sdj6_866 {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
}

._skeletonCircle_1sdj6_873 {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_1sdj6_1 1.5s ease-in-out infinite;
}

._skeletonTitle_1sdj6_882 {
  height: 20px;
  width: 200px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_1sdj6_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}

._skeletonBadge_1sdj6_892 {
  height: 24px;
  width: 100px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_1sdj6_1 1.5s ease-in-out infinite;
  border-radius: 12px;
}

._skeletonText_1sdj6_901 {
  height: 14px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_1sdj6_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin: 4px 0;
}

._skeletonPrice_1sdj6_910 {
  height: 20px;
  width: 80px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_1sdj6_1 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 12px;
}

._skeletonButton_1sdj6_920 {
  height: 36px;
  width: 80px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_1sdj6_1 1.5s ease-in-out infinite;
  border-radius: 8px;
}
._page_1foe4_1 {
  min-height: 100vh;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

._container_1foe4_10 {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

._content_1foe4_16 {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 48px 32px;
  text-align: center;
  animation: _fadeInUp_1foe4_1 0.5s ease-out;
}

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

._iconContainer_1foe4_36 {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}

._successIcon_1foe4_42 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 40px;
  animation: _scaleIn_1foe4_1 0.5s ease-out;
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.3);
}

._verifyingIcon_1foe4_56 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 40px;
  position: relative;
}

._errorIcon_1foe4_69 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 40px;
  animation: _scaleIn_1foe4_1 0.5s ease-out;
  box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.3);
}

@keyframes _scaleIn_1foe4_1 {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

._spinner_1foe4_94 {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: _spin_1foe4_94 1s linear infinite;
}

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

._title_1foe4_109 {
  font-size: 32px;
  font-weight: 800;
  color: #1a1d29;
  margin: 0 0 16px;
  line-height: 1.2;
}

._message_1foe4_117 {
  font-size: 16px;
  color: #64748b;
  margin: 0 0 32px;
  line-height: 1.6;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

._detailsCard_1foe4_127 {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  margin: 32px 0;
  text-align: left;
}

._detailsHeader_1foe4_136 {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

._detailsTitle_1foe4_142 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1d29;
  margin: 0;
}

._detailsContent_1foe4_149 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._detailRow_1foe4_155 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}

._detailRow_1foe4_155:last-child {
  border-bottom: none;
}

._detailLabel_1foe4_167 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
}

._detailIcon_1foe4_176 {
  font-size: 18px;
  color: #3b82f6;
}

._detailValue_1foe4_181 {
  font-size: 15px;
  font-weight: 700;
  color: #1a1d29;
}

._statusPaid_1foe4_187 {
  color: #10b981;
  display: flex;
  align-items: center;
  gap: 6px;
}

._statusPaid_1foe4_187::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #10b981;
  color: #ffffff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

._buttonGroup_1foe4_207 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

._primaryButton_1foe4_214 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
}

._primaryButton_1foe4_214:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4);
}

._primaryButton_1foe4_214:active {
  transform: translateY(0);
}

._secondaryButton_1foe4_240 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  background: #ffffff;
  color: #374151;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

._secondaryButton_1foe4_240:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

._buttonIcon_1foe4_261 {
  font-size: 18px;
  transition: transform 0.2s ease;
}

._primaryButton_1foe4_214:hover ._buttonIcon_1foe4_261 {
  transform: translateX(4px);
}

/* Responsive Design */
@media (max-width: 640px) {
  ._content_1foe4_16 {
    padding: 32px 24px;
  }

  ._title_1foe4_109 {
    font-size: 28px;
  }

  ._message_1foe4_117 {
    font-size: 15px;
  }

  ._detailsCard_1foe4_127 {
    padding: 20px;
  }

  ._primaryButton_1foe4_214,
  ._secondaryButton_1foe4_240 {
    width: 100%;
    padding: 14px 24px;
  }
}
._page_1n05h_1 {
  min-height: 100vh;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

._container_1n05h_10 {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

._content_1n05h_16 {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 48px 32px;
  text-align: center;
  animation: _fadeInUp_1n05h_1 0.5s ease-out;
}

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

._iconContainer_1n05h_36 {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}

._errorIcon_1n05h_42 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 40px;
  animation: _scaleIn_1n05h_1 0.5s ease-out;
  box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.3);
}

@keyframes _scaleIn_1n05h_1 {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

._title_1n05h_67 {
  font-size: 32px;
  font-weight: 800;
  color: #1a1d29;
  margin: 0 0 16px;
  line-height: 1.2;
}

._message_1n05h_75 {
  font-size: 16px;
  color: #64748b;
  margin: 0 0 32px;
  line-height: 1.6;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

._infoCard_1n05h_85 {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 20px;
  margin: 32px 0;
  text-align: left;
}

._infoRow_1n05h_94 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

._infoIcon_1n05h_100 {
  font-size: 24px;
  color: #f59e0b;
  flex-shrink: 0;
  margin-top: 2px;
}

._infoText_1n05h_107 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._infoTitle_1n05h_113 {
  font-size: 15px;
  font-weight: 700;
  color: #92400e;
}

._infoDescription_1n05h_119 {
  font-size: 14px;
  color: #78350f;
  line-height: 1.5;
}

._buttonGroup_1n05h_125 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

._primaryButton_1n05h_132 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
}

._primaryButton_1n05h_132:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4);
}

._primaryButton_1n05h_132:active {
  transform: translateY(0);
}

._secondaryButton_1n05h_158 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  background: #ffffff;
  color: #374151;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

._secondaryButton_1n05h_158:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

._buttonIcon_1n05h_179 {
  font-size: 18px;
}

/* Responsive Design */
@media (max-width: 640px) {
  ._content_1n05h_16 {
    padding: 32px 24px;
  }

  ._title_1n05h_67 {
    font-size: 28px;
  }

  ._message_1n05h_75 {
    font-size: 15px;
  }

  ._infoCard_1n05h_85 {
    padding: 16px;
  }

  ._primaryButton_1n05h_132,
  ._secondaryButton_1n05h_158 {
    width: 100%;
    padding: 14px 24px;
  }
}