/* ============================================
   색상 Import
   ============================================ */
@import url('colors.css');


/* Add font files for Geist */
@font-face {
  font-family: 'Geist';
  src: url('fonts/geist.woff2') format('woff2'),
       url('fonts/geist.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
/* mx-auto 클래스 정의 */
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

:root {
  /* ============================================
     폰트 패밀리
     ============================================ */
  --font-family-geist: 'Geist', sans-serif;
  --font-family-roboto: 'Roboto', sans-serif;
  --font-family-inter: 'Inter', sans-serif;

  /* ============================================
     색상 시스템 - Light Mode
     ============================================ */

  /* 1. Primary (브랜드 핵심 색상) */
  --primary-brand: #FFE086;
  --primary-brand-hover: #FFB800;
  --primary-brand-active: #FFE086;

  /* 2. Background (배경색) */
  --bg-default: #F0F0F0;        /* Porcelain Haze */
  --bg-muted: #F7F7F7;          /* Snow Flask */
  --bg-surface: #FFFFFF;        /* White */
  --bg-card: #FFFFFF;           /* Card background */
  --bg-dark: #0B1215;           /* Inkstone - 다크모드용 */
  --bg-gray-50: #F9FAFB;        /* Light Gray */

  /* 3. Text (텍스트 색상) */
  --text-default: #262626;      /* Charcoal */
  --text-muted: #212427;        /* Graphite Fog */
  --text-light: #F7F7F7;        /* Snow Flask - 다크배경용 */
  --text-slate: #4B5563;        /* Slate Gray */
  --text-inkstone: #0B1215;     /* Inkstone - 진한 텍스트 */

  /* 4. Border & Divider (경계선, 구분선) */
  --border: 1px solid var(--border-default);    /* 기본 보더 */
  --border-muted: #212427;      /* Graphite Fog */
  --border-light: #F0F0F0;      /* Porcelain Haze */

  /* 5. State (상태 색상) */
  --state-success: #28A745;     /* Green */
  --state-error: #DC3545;       /* Red */
  --state-warning: #F1EDE8;     /* Worn Dune */
  --state-info: #FAF6F5;        /* Rose Quartz */

  /* 6. 비활성 / Disabled */
  --inactive: #9CA3AF;          /* Gray */

  /* 7. Border Default */
  --border-default: #E5E7EB;    /* Light gray border */

  /* ============================================
     타이포그래피 시스템
     ============================================ */

  /* Font Sizes */
  --font-size-large-title: 34px;
  --font-size-title1: 28px;
  --font-size-title2: 22px;
  --font-size-title3: 20px;
  --font-size-headline: 17px;
  --font-size-body: 17px;
  --font-size-callout: 16px;
  --font-size-subhead: 15px;
  --font-size-footnote: 13px;
  --font-size-caption1: 12px;
  --font-size-caption2: 11px;

  /* Line Heights (폰트 크기 * 1.4 기준) */
  --line-height-large-title: 47.6px;
  --line-height-title1: 39.2px;
  --line-height-title2: 30.8px;
  --line-height-title3: 28px;
  --line-height-headline: 23.8px;
  --line-height-body: 23.8px;
  --line-height-callout: 22.4px;
  --line-height-subhead: 21px;
  --line-height-footnote: 18.2px;
  --line-height-caption1: 16.8px;
  --line-height-caption2: 15.4px;
}

/* ============================================
   다크모드 색상 시스템
   ============================================ */
html[data-theme="dark"],
:root[data-theme="dark"] {
  /* 1. Primary (브랜드 핵심 색상) - Dark */
  --primary-brand: #F3CB59;
  --primary-brand-hover: #E0B847;
  --primary-brand-active: #F3CB59;

  /* 2. Background (배경색) - Dark */
  --bg-default: #10151A;        /* Dark background */
  --bg-muted: #1C1F22;          /* Muted dark */
  --bg-surface: #1C1F22;        /* Surface dark */
  --bg-card: #242830;           /* Card background dark */
  --bg-header-footer: #111827;  /* Header & Footer dark */

  /* 3. Text (텍스트 색상) - Dark */
  --text-default: #F4F4F4;      /* Default text */
  --text-muted: #B9BEC3;        /* Muted text */
  --text-light: #F4F4F4;        /* Light text */
  --text-inkstone: #F4F4F4;     /* Inkstone - 다크모드에선 밝게 */

  /* 4. Border & Divider (경계선, 구분선) - Dark */
  --border-default: #2A2E31;    /* Default border */
  --border-muted: #2A2E31;      /* Muted border */
  --border-light: #2A2E31;      /* Light border */

  /* 5. State (상태 색상) - Dark */
  --state-success: #5CD47D;     /* Lighter Green */
  --state-error: #F26B6B;       /* Lighter Red */
  --state-warning: #FAF6F5;     /* Rose Quartz */
  --state-info: #F1EDE8;        /* Worn Dune */

  /* 6. 비활성 / Disabled - Dark */
  --inactive: #6B7280;          /* Darker Gray */

  /* 7. Timeline (타임라인 전용) - Dark */
  --timeline-circle: #F4F4F4;   /* Timeline circle */
  --timeline-line: #2C2F33;     /* Timeline line */
}

/* 다크모드 강제 적용 (인라인 스타일 오버라이드) */
[data-theme="dark"],
[data-theme="dark"] html,
[data-theme="dark"] body {
  background-color: var(--bg-default) !important;
  background: var(--bg-default) !important;
  color: var(--text-default) !important;
}

[data-theme="dark"] * {
  border-color: var(--border-muted) !important;
}

/* 모든 div, section 등에 기본 다크 배경 적용 */
[data-theme="dark"] div,
[data-theme="dark"] section,
[data-theme="dark"] header,
[data-theme="dark"] footer,
[data-theme="dark"] main {
  color: var(--text-default);
}

/* 다크모드 배경색 오버라이드 */
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background: #FFFFFF"],
[data-theme="dark"] [style*="background: #FFF"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color: #FFFFFF"] {
  background: var(--bg-surface) !important;
  background-color: var(--bg-surface) !important;
}

[data-theme="dark"] [style*="background: #F0F0F0"],
[data-theme="dark"] [style*="background-color: #F0F0F0"] {
  background: var(--bg-muted) !important;
  background-color: var(--bg-muted) !important;
}

[data-theme="dark"] [style*="background: #F7F7F7"],
[data-theme="dark"] [style*="background-color: #F7F7F7"] {
  background: var(--bg-muted) !important;
  background-color: var(--bg-muted) !important;
}

/* Third 섹션 전용 배경색 오버라이드 */
[data-theme="dark"] .Third[style*="background: #F0F0F0"],
[data-theme="dark"] .Third[style*="background-color: #F0F0F0"] {
  background: #262626 !important;
  background-color: #262626 !important;
}

[data-theme="dark"] .Third [style*="background: #F7F7F7"],
[data-theme="dark"] .Third [style*="background-color: #F7F7F7"] {
  background: #212427 !important;
  background-color: #212427 !important;
}

/* 다크모드 텍스트 색상 오버라이드 */
[data-theme="dark"] [style*="color: #262626"],
[data-theme="dark"] [style*="color: #212427"],
[data-theme="dark"] [style*="color: #0B1215"],
[data-theme="dark"] [style*="color: black"] {
  color: var(--text-default) !important;
}

/* H3-286, P-289 다크모드 밝은 색상 */
[data-theme="dark"] .H3286 [class="288"],
[data-theme="dark"] .P289 [class="291"] {
  color: var(--text-default) !important;
}

/* textDiv, stepContainer 다크모드 밝은 색상 */
[data-theme="dark"] .Textdiv [class="288"],
[data-theme="dark"] .Stepcontainer [class="310"] {
  color: var(--text-default) !important;
}

/* Header, Footer 다크모드 배경색 */
[data-theme="dark"] .Header,
[data-theme="dark"] .Footer {
  background: var(--bg-header-footer) !important;
}

/* 다크모드 브랜드 컬러 오버라이드 */
[data-theme="dark"] [style*="fill: #FFE086"],
[data-theme="dark"] [style*="stop-color: #FFE086"] {
  fill: var(--primary-brand) !important;
  stop-color: var(--primary-brand) !important;
}

/* Third 섹션의 Circle 타임라인 색상 오버라이드 */
.Third .Circle[style*="background: #212427"],
.Third .Circle[style*="background: #262626"] {
  background: #000000 !important;
}

[data-theme="dark"] .Third .Circle[style*="background: #212427"],
[data-theme="dark"] .Third .Circle[style*="background: #262626"] {
  background: var(--timeline-circle) !important;
}

/* Timeline Line 색상 오버라이드 (필요시) */
[data-theme="dark"] .Third [style*="border-top"],
[data-theme="dark"] .Third [style*="border-bottom"],
[data-theme="dark"] .Third .Stick {
  border-color: var(--timeline-line) !important;
}

/* ============================================
   다크모드 폼 요소 (Input, Select, Button, Textarea)
   ============================================ */

/* Input & Textarea */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] textarea {
  background: var(--bg-surface) !important;
  color: var(--text-default) !important;
  border-color: var(--border-default) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.6;
}

/* Select */
[data-theme="dark"] select {
  background: var(--bg-surface) !important;
  color: var(--text-default) !important;
  border-color: var(--border-default) !important;
}

[data-theme="dark"] select option {
  background: var(--bg-surface) !important;
  color: var(--text-default) !important;
}

/* Button 기본 스타일 */
[data-theme="dark"] button {
  color: var(--text-default) !important;
  border-color: var(--border-default) !important;
}

[data-theme="dark"] button[style*="background: white"],
[data-theme="dark"] button[style*="background-color: white"],
[data-theme="dark"] button[style*="background: #FFFFFF"] {
  background: var(--bg-surface) !important;
  background-color: var(--bg-surface) !important;
}

[data-theme="dark"] button[style*="background: #F3F4F6"],
[data-theme="dark"] button[style*="background-color: #F3F4F6"] {
  background: var(--bg-muted) !important;
  background-color: var(--bg-muted) !important;
}

/* Modal & Popup */
[data-theme="dark"] [style*="background: white"][style*="border-radius"],
[data-theme="dark"] div[style*="background: white"][style*="padding: 24px"],
[data-theme="dark"] div[style*="background: rgb(255, 255, 255)"] {
  background: var(--bg-card) !important;
  background-color: var(--bg-card) !important;
}

/* Modal Overlay */
[data-theme="dark"] [style*="background: rgba(0,0,0,0.5)"],
[data-theme="dark"] [style*="background: rgba(0, 0, 0, 0.5)"] {
  background: rgba(0, 0, 0, 0.75) !important;
}

/* Card 배경 */
[data-theme="dark"] [style*="background: var(--bg-card)"] {
  background: var(--bg-card) !important;
}

/* Range Slider */
[data-theme="dark"] input[type="range"] {
  background: var(--border-default) !important;
}

[data-theme="dark"] input[type="range"]::-webkit-slider-thumb {
  border-color: var(--primary-brand) !important;
}

[data-theme="dark"] input[type="range"]::-moz-range-thumb {
  border-color: var(--primary-brand) !important;
}

/* Checkbox & Radio */
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
  border-color: var(--border-default) !important;
  background: var(--bg-surface) !important;
}

/* Outline 스타일 다크모드 */
[data-theme="dark"] [style*="outline: 1px #E5E7EB"],
[data-theme="dark"] [style*="outline: 1px solid #E5E7EB"],
[data-theme="dark"] [style*="outline-offset: -1px"] {
  outline-color: var(--border-default) !important;
}

/* 특정 색상 outline 변환 */
[data-theme="dark"] [style*="outline: 1px solid rgb(229, 231, 235)"],
[data-theme="dark"] [style*="outline: 1px rgb(229, 231, 235)"] {
  outline-color: var(--border-default) !important;
}

/* Box shadow 다크모드 조정 */
[data-theme="dark"] [style*="box-shadow"] {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* 링크 색상 */
[data-theme="dark"] a {
  color: var(--primary-brand);
}

[data-theme="dark"] a:hover {
  color: var(--primary-brand-hover);
}

/* 스크롤바 다크모드 */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 12px;
  background: var(--bg-muted);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 6px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ============================================
   CSS Reset & Base Styles
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  max-width: 100%;
}

body {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

/* ============================================
   Mobile Touch Optimization
   ============================================ */

/* 터치 타겟 최소 크기 보장 (44x44px) */
.Toolsbtn, .Planningbtn, .Makebtn, .Eventbtn, .Askbtn {
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  touch-action: manipulation;
}

.Loginbtn, .Signupbtn, .Logoutbtn {
  height: 40px !important;
  min-width: 44px;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  touch-action: manipulation;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
}

.Loginbtn > div, .Signupbtn > div, .Logoutbtn > div {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  height: 100% !important;
  line-height: normal !important;
}

/* 터치 피드백 */
button:active, a:active,
.Toolsbtn:active, .Planningbtn:active, .Makebtn:active,
.Eventbtn:active, .Askbtn:active, .Loginbtn:active, .Signupbtn:active {
  opacity: 0.7;
  transform: scale(0.98);
  transition: all 0.1s ease;
}

/* 스크롤 성능 향상 */
.Main, .Body, .First, .Second, .Third {
  -webkit-overflow-scrolling: touch;
}

/* 텍스트 선택 방지 (UI 요소) */
.Header, .Footer, button, .Toolsbtn, .Planningbtn, .Makebtn,
.Eventbtn, .Askbtn, .Loginbtn, .Signupbtn {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 모바일 사파리 100vh 이슈 해결 */
@supports (-webkit-touch-callout: none) {
  body {
    min-height: -webkit-fill-available;
  }
}

/* ============================================
   Responsive Layout Overrides
   ============================================ */

/* Main Layout */
.Main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto;
  display: flex !important;
  height: auto !important;
  align-items: center !important;
}

.LayoutMust {
  width: 100% !important;
  max-width: 1440px;
  height: auto !important;
}

/* Header */
.Header {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 60px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  background: white;
  z-index: 999;
  border-bottom: 1px solid #e5e7eb;
  transition: min-height 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 1) 헤더 한 줄 강제 */
.Headerpadding {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;   /* 줄바꿈 금지 */
  gap: 4px !important;
  min-height: 60px !important;
  padding: 0 8px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* 2) 자식들은 줄바꿈/늘어남 방지 */
.Headerpadding > .Logo,
.Headerpadding > .mobile-menu-toggle,
.Headerpadding > .Middlelayer {
  flex: 0 0 auto !important;      /* 너비 자동확장 금지 */
  white-space: nowrap !important;  /* 텍스트 줄바꿈 금지 */
  margin: 0 auto !important;      /* mx-auto */
}

.Headerpadding > .Loginlayer {
  flex: 0 0 auto !important;      /* 너비 자동확장 금지 */
  white-space: nowrap !important;  /* 텍스트 줄바꿈 금지 */
  margin: 0 auto !important;      /* mx-auto */
}

/* 3) 로고는 flex 제거 (중요) */
.Logo {
  display: block !important;      /* 기존 inline/ flex 제거 */
  height: 40px !important;
  width: auto !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  margin: 0 auto !important;      /* mx-auto */
}

/* 4) Middlelayer - 모바일에서만 숨김 */
@media (max-width: 1023px) {
  .Headerpadding > .Middlelayer {
    position: fixed !important;
    pointer-events: none;
    visibility: hidden;
    width: auto !important;
  }
}

.Loginlayer {
  margin: 0 auto !important;      /* mx-auto */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 24px !important;
}

.mobile-menu-toggle {
  margin: 0 auto !important;      /* mx-auto */
}

@media (max-width: 600px) {
  .Headerpadding .Middlelayer {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .Headerpadding {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Body & Content Sections */
.Body {
  width: 100% !important;
  max-width: 100vw !important;
  height: auto !important;
  margin-top: 40px !important;
  align-items: center !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

.First, .Second, .Third {
  width: 100% !important;
  max-width: 1440px !important;
  height: auto !important;
  min-height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 64px 32px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
}

/* First 섹션 자식 요소들 */
.First > .Toptext,
.First > .Bottom {
  position: static !important;
  width: 100% !important;
  height: auto !important;
}

.First > .Bottom {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

/* 텍스트 요소 반응형 */
.Toptext {
  font-size: clamp(24px, 5vw, 40px) !important;
  line-height: 1.2 !important;
  padding: 0 16px !important;
}

/* 버튼 영역 반응형 */
.Bottom {
  width: 100% !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  justify-content: center !important;
}

/* 이미지 영역 반응형 */
.Imagearea {
  max-width: 100% !important;
  width: min(320px, 90vw) !important;
  height: auto !important;
  aspect-ratio: 320 / 568.88 !important;
}

/* Content Areas */
.Middlelayer {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  gap: 16px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

/* 버튼 반응형 */
.Freestartbtn, .Aboutservicebtn {
  width: auto !important;
  min-width: 140px !important;
  padding: 12px 24px !important;
  font-size: clamp(14px, 2vw, 16px) !important;
}

/* Step Container 반응형 */
.Stepcontainer {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

.Step1, .Step2, .Step3, .Step4, .Step5 {
  width: 100% !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

.Step1 .Box, .Step2 .Box, .Step3 .Box, .Step4 .Box, .Step5 .Box {
  width: 100% !important;
  max-width: 100% !important;
}

/* Timeline 반응형 */
.Timeline {
  width: 100% !important;
  overflow-x: auto !important;
}

/* Footer 반응형 */
.Footer {
  width: 100% !important;
  max-width: 100vw !important;
  padding: 32px 16px !important;
  box-sizing: border-box !important;
}

.Links {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
}

.Product, .Company, .Shortform, .Sns {
  width: 100% !important;
  max-width: 280px !important;
  min-width: 200px !important;
  flex: 1 1 200px !important;
}

.dropdown-wrapper {
  display: inline-flex !important;
  position: relative !important;
}

.Loginlayer {
  width: auto !important;
  max-width: 100% !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.Loginlayer .Loginbtn,
.Loginlayer .Signupbtn,
.Loginlayer .Logoutbtn {
  width: auto !important;
  height: 40px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.Loginlayer .Loginbtn > div,
.Loginlayer .Signupbtn > div,
.Loginlayer .Logoutbtn > div {
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: normal !important;
  display: flex !important;
  align-items: center !important;
}

/* Middlelayer 버튼 기본 스타일 - 좌우 사이즈 증가 */
.Middlelayer .Toolsbtn,
.Middlelayer .Planningbtn,
.Middlelayer .Makebtn,
.Middlelayer .Eventbtn,
.Middlelayer .Askbtn {
  width: auto !important;
  min-width: 80px !important;
  height: 40px !important;
  white-space: nowrap !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  display: flex !important;
  align-items: center !important;
}

.Middlelayer .Toolsbtn > div,
.Middlelayer .Planningbtn > div,
.Middlelayer .Makebtn > div,
.Middlelayer .Eventbtn > div,
.Middlelayer .Askbtn > div {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Middlelayer 버튼 글자 크기 반응형 */
@media (max-width: 1200px) {
  .Middlelayer .Toolsbtn > div,
  .Middlelayer .Planningbtn > div,
  .Middlelayer .Makebtn > div,
  .Middlelayer .Eventbtn > div,
  .Middlelayer .Askbtn > div {
    font-size: 13px !important;
  }
}

@media (max-width: 1000px) {
  .Middlelayer .Toolsbtn > div,
  .Middlelayer .Planningbtn > div,
  .Middlelayer .Makebtn > div,
  .Middlelayer .Eventbtn > div,
  .Middlelayer .Askbtn > div {
    font-size: 12px !important;
  }

  .Middlelayer .Toolsbtn,
  .Middlelayer .Planningbtn,
  .Middlelayer .Makebtn,
  .Middlelayer .Eventbtn,
  .Middlelayer .Askbtn {
    min-width: 60px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 800px) {
  .Middlelayer .Toolsbtn > div,
  .Middlelayer .Planningbtn > div,
  .Middlelayer .Makebtn > div,
  .Middlelayer .Eventbtn > div,
  .Middlelayer .Askbtn > div {
    font-size: 14px !important;
  }

  .Middlelayer .Toolsbtn,
  .Middlelayer .Planningbtn,
  .Middlelayer .Makebtn,
  .Middlelayer .Eventbtn,
  .Middlelayer .Askbtn {
    min-width: 50px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .Middlelayer {
    min-width: 400px !important;
    gap: 8px !important;
  }
}

.Left, .Right {
  width: 100% !important;
  max-width: 600px;
  height: auto !important;
}

.Links {
  width: 100% !important;
  max-width: 1264px;
  height: auto !important;
}

.Product, .Company, .Support, .Legal {
  flex: 1 !important;
  min-width: 0 !important;
  height: auto !important;
}

/* Footer */
.Footer {
  width: 100vw !important;
  min-height: 281px !important;
  height: auto !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* Z-Index Layers */
.Stick {
  z-index: 1 !important;
}

.Circle {
  z-index: 3 !important;
}

/* ============================================
   Media Queries - Mobile Responsive
   ============================================ */

/* Tablet & Below (1024px) */
@media (max-width: 1024px) {
  .Main, .Body, .First, .Second, .Third {
    padding-left: 24px;
    padding-right: 24px;
  }

  .Header {
    max-width: 100% !important;
  }

  .Middlelayer {
    flex-wrap: wrap;
    gap: 12px;
  }

  .Links {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Mobile Landscape & Below (768px) */
@media (max-width: 768px) {
  .Main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
  }

  .LayoutMust {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .MainContent {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
  }

  .Body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 16px !important;
    align-items: stretch !important;
  }

  .First, .Second, .Third {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 16px;
    padding-right: 16px;
  }

  .Body {
    margin-top: 70px !important;
  }

  .Header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .Headerpadding {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Middlelayer visibility is now controlled by JavaScript */

  .Loginlayer {
    gap: 8px;
  }

  .Left, .Right {
    width: 100% !important;
    max-width: 100%;
    padding: 20px !important;
  }

  .Links {
    flex-direction: column;
    gap: 24px;
  }

  .Product, .Company, .Support, .Legal {
    width: 100% !important;
    max-width: 100%;
  }
}

/* Mobile Small (500px 이하) */
@media (max-width: 500px) {
  .Headerpadding {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .Headerpadding .Middlelayer {
    display: none !important;
  }

  .Headerpadding .Logo {
    max-width: 90px !important;
    width: 90px !important;
    height: auto !important;
    flex-shrink: 0 !important;
    order: 1 !important;
  }

  .Headerpadding .Loginlayer {
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    order: 2 !important;
  }

  .Loginbtn, .Signupbtn {
    padding: 6px 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  .mobile-menu-toggle {
    width: 32px !important;
    height: 32px !important;
    padding: 4px !important;
    flex-shrink: 0 !important;
  }
}

/* Mobile Portrait (480px) */
@media (max-width: 480px) {
  .Header, .Headerpadding {
    min-height: 50px !important;
  }

  .Headerpadding {
    padding: 0 6px !important;
    gap: 2px !important;
  }

  .Logo {
    max-height: 48px !important;
    max-width: 105px !important;
  }

  .Loginlayer {
    gap: 4px !important;
  }

  .Loginbtn, .Signupbtn {
    padding: 4px 6px !important;
    font-size: 10px !important;
  }

  .Main, .Body, .First, .Second, .Third {
    padding-left: 12px;
    padding-right: 12px;
  }

  .Body {
    margin-top: 60px !important;
  }

  .Header, .Headerpadding {
    min-height: 50px !important;
  }

  .Headerpadding .Logo {
    max-height: 48px !important;
  }

  .Headerpadding {
    padding: 0 12px !important;
  }

  /* 버튼 크기 조정 */
  .Toolsbtn, .Planningbtn, .Makebtn, .Eventbtn, .Askbtn,
  .Loginbtn, .Signupbtn {
    padding: 8px 12px !important;
    font-size: 14px !important;
  }

  /* 푸터 조정 */
  .Footer {
    padding: 24px 16px !important;
  }

  .Links {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 텍스트 크기 조정 */
  h1, .text-25 {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }

  h2 {
    font-size: 20px !important;
  }

  h3 {
    font-size: 18px !important;
  }

  p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}

/* Small Mobile (360px) */
@media (max-width: 360px) {
  .Main, .Body, .First, .Second, .Third {
    padding-left: 8px;
    padding-right: 8px;
  }

  .Logo {
    max-width: 80px !important;
  }

  .Loginlayer {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .Loginbtn, .Signupbtn {
    width: 100%;
    justify-content: center !important;
  }
}

/* ============================================
   Original Figma Export Styles
   ============================================ */
.layout_must-2 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
  opacity: 0;
}

.logo-5 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  max-width: 134px;
  width: 100%;
  height: auto;
}

.text-8 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.toolsbtn-7 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 12px 8px 12px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 13.23529411764706%;
  border-radius: 6px;
}

.text-10 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.planningbtn-9 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 12px 8px 12px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 13.025210084033615%;
  border-radius: 6px;
}

.genicon-12 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  height: auto;
}

.text-13 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.makebtn-11 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 16px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 21.008403361344538%;
  border-radius: 12px;
}

.text-15 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.eventbtn-14 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 12px 8px 12px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 13.025210084033615%;
  border-radius: 6px;
}

.text-17 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.askbtn-16 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 12px 8px 12px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 13.025210084033615%;
  border-radius: 6px;
}

.middlelayer-6 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.text-20 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-black);
}

.loginbtn-19 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 12px 8px 12px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 42.85546829211113%;
}

.text-22 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-255-224-134);
}

.signupbtn-21 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 12px 8px 12px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 51.14289063415778%;
}

.loginlayer-18 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 9.256727430555555%;
}

.headerpadding-4 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0px 24px 0px 30px;
  flex-grow: 1;
  flex-shrink: 1;
  width: 100%;
}

.header-3 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0px 0px 1px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
  background-color: rgba(255, 255, 255, 1);
  border-bottom: 1px solid rgba(229, 231, 235, 1);
}

.text-25 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -0.8500000238418579px;
  line-height: 40px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.text-28 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.8500000238418579px;
  line-height: 44px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.text-29 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 20px;
  line-height: 23.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.text-30 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 16px;
  line-height: 18.200000762939453px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.text-33 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.freestartbtn-32 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 16px 32px 16px 32px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 30.56329617834395%;
  background-color: rgba(255, 224, 134, 1);
  border-radius: 12px;
}

.text-35 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.aboutservicebtn-34 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 18px 34px 18px 34px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 28.047870222929937%;
  border: 2px solid var(--Border/Default/Light);
  border-radius: 24px;
}

.btnlayout-31 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 0px 0px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.left-27 {
@media (max-width: 1440px) {
  .left-27 {
    width: 47%;
    min-width: 280px;
  }
}

@media (max-width: 768px) {
  .left-27 {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }
}
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  width: 30%;
  min-width: 280px;
}

.img-91-40 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  max-width: 320px;
  width: 100%;
  height: auto;
}

.img-93-41 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  max-width: 320px;
  width: 100%;
  height: auto;
}

.img-95-42 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  max-width: 320px;
  width: 100%;
  height: auto;
}

.img-97-43 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  max-width: 320px;
  width: 100%;
  height: auto;
}

.imagecontainer-39 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.leftbtn-45 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
  backdrop-filter: blur(4px);
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 9999px;
}

.left-44 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 10%;
  opacity: 0;
}

.rightbtn-47 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
  backdrop-filter: blur(4px);
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 9999px;
}

.right-46 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 10%;
  opacity: 0;
}

.topline-49 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 1px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
  border-bottom: 1px solid rgba(33, 36, 39, 0.3);
}

.botline-50 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1px 0px 0px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
  border-top: 1px solid rgba(33, 36, 39, 0.3);
}

.line-48 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.centerblack-52 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 17.5%;
  backdrop-filter: blur(4px);
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 9999px;
}

.center-51 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.button-108-54 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 11.11111111111111%;
  background-color: rgba(255, 224, 134, 1);
  border-radius: 9999px;
}

.button-109-55 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 11.11111111111111%;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 9999px;
}

.button-110-56 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 11.11111111111111%;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 9999px;
}

.indicator-53 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 22.5%;
}

.div-111-57 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
  background-color: rgba(255, 224, 134, 0.1);
  opacity: 0;
}

.imagearea-38 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.5), 0px 4px 6px -4px rgba(0,0,0,0.5);
  background-color: rgba(240, 240, 240, 1);
  border-radius: 24px;
}

.text-59 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 500;
  font-size: 13px;
  line-height: 18.200000762939453px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.text-60 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 16.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.bottomtext-58 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 12px 0px 0px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.imageui-37 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 50.955414012738856%;
  max-width: 320px;
}

.right-36 {
@media (max-width: 1440px) {
  .right-36 {
    width: 47%;
    min-width: 280px;
  }
}

@media (max-width: 768px) {
  .right-36 {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }
}
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  width: 30%;
  min-width: 280px;
}

.bottom-26 {
@media (max-width: 1440px) {
  .bottom-26 {
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .bottom-26 {
    gap: 24px;
  }
}
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 95.55555555555556%;
}

.first-24 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 30px 32px 30px 32px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.text-63 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 28px;
  line-height: 33.599998474121094px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.text-64 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 17px;
  line-height: 23.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.text-66 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 500;
  font-size: 12px;
  line-height: 16.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-255-224-134);
}

.box-65 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 16px 8px 16px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 22.334917153996102%;
  background-color: rgba(255, 224, 134, 0.1);
  border-radius: 9999px;
}

.textzone-62 {
  flex-grow: 0;
  flex-shrink: 1;
  width: 35.625%;
}

.div-135-70 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.div-134-69 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 99.50657260706988%;
  opacity: 0.05000000074505806;
}

.div-136-71 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 99.50657260706988%;
  border-radius: 24px;
  opacity: 0;
}

.div-139-75 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 18.860800294700006%;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.5), 0px 4px 6px -4px rgba(0,0,0,0.5);
  border-radius: 24px;
}

.text-78 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 500;
  font-size: 12px;
  line-height: 16.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.span-141-77 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 55.32286212914486%;
}

.div-140-76 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 24px 12px 24px 12px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 15.830915872358062%;
  background-color: rgba(255, 224, 134, 0.1);
  border-radius: 9999px;
}

.div-138-74 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.margin-wrap-73 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 24px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.text-83 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.h3-145-82 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.margin-wrap-81 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 12px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.text-85 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 17px;
  line-height: 27.625px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.p-148-84 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.div-144-80 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.margin-wrap-79 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 32px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.div-153-89 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 7.072800110512502%;
  background-color: rgba(33, 36, 39, 1);
  border-radius: 9999px;
}

.text-92 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 16.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.span-154-91 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 89.16784203102962%;
}

.margin-wrap-90 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 0px 12px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.div-152-88 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.div-158-95 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 7.072800110512502%;
  background-color: rgba(33, 36, 39, 1);
  border-radius: 9999px;
}

.text-98 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 16.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.span-159-97 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 83.1023102310231%;
}

.margin-wrap-96 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 0px 12px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.div-157-94 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.margin-wrap-93 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 12px 0px 0px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.div-163-101 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 7.072800110512502%;
  background-color: rgba(33, 36, 39, 1);
  border-radius: 9999px;
}

.text-104 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 16.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.span-164-103 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 79.99479030997657%;
}

.margin-wrap-102 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 0px 12px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.div-162-100 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.margin-wrap-99 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 12px 0px 0px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.text-109 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 11px;
  line-height: 15.399999618530273px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.span-169-108 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 67.578125%;
}

.div-168-107 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 7.072800110512502%;
  background-color: rgba(33, 36, 39, 0.2);
  border-radius: 9999px;
}

.text-112 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 16.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.span-172-111 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 83.96659707724426%;
}

.margin-wrap-110 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 0px 12px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.div-167-106 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.margin-wrap-105 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 12px 0px 0px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.div-151-87 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.margin-wrap-86 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 24px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.text-115 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 500;
  font-size: 12px;
  line-height: 16.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.span-176-114 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 17.391904959248514%;
}

.icon-179-116 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  background-color: rgba(255, 255, 255, 1);
}

.div-175-113 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.div-137-72 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 83.71689603330636%;
}

.introduce1-68 {
@media (max-width: 1440px) {
  .introduce1-68 {
    width: 47%;
    min-width: 280px;
  }
}

@media (max-width: 768px) {
  .introduce1-68 {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }
}
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 33px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  width: 30%;
  min-width: 280px;
  background-color: rgba(240, 240, 240, 1);
  border: 1px solid rgba(33, 36, 39, 0.05);
  border-radius: 24px;
}

.div-182-119 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.div-181-118 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 99.50657260706988%;
  opacity: 0.05000000074505806;
}

.div-183-120 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 99.50657260706988%;
  border-radius: 24px;
  opacity: 0;
}

.div-186-124 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 18.860800294700006%;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.5), 0px 4px 6px -4px rgba(0,0,0,0.5);
  border-radius: 24px;
}

.text-127 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 500;
  font-size: 12px;
  line-height: 16.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.span-188-126 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 49.80392156862745%;
}

.div-187-125 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 24px 12px 24px 12px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 14.090343970161626%;
  background-color: rgba(255, 224, 134, 0.1);
  border-radius: 9999px;
}

.div-185-123 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.margin-wrap-122 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 24px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.text-132 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.h3-192-131 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.margin-wrap-130 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 12px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.text-134 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 17px;
  line-height: 27.625px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.p-195-133 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.div-191-129 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.margin-wrap-128 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 32px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.div-200-138 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 7.072800110512502%;
  background-color: rgba(255, 224, 134, 1);
  border-radius: 9999px;
}

.text-141 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 16.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.span-201-140 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 80.55203849075716%;
}

.margin-wrap-139 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 0px 12px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.div-199-137 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.div-205-144 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 7.072800110512502%;
  background-color: rgba(255, 224, 134, 1);
  border-radius: 9999px;
}

.text-147 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 16.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.span-206-146 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 86.13968597726043%;
}

.margin-wrap-145 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 0px 12px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.div-204-143 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.margin-wrap-142 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 12px 0px 0px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.div-210-150 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 7.072800110512502%;
  background-color: rgba(255, 224, 134, 1);
  border-radius: 9999px;
}

.text-153 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 16.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.span-211-152 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 88.88406426400347%;
}

.margin-wrap-151 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 0px 12px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.div-209-149 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.margin-wrap-148 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 12px 0px 0px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.text-158 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 11px;
  line-height: 15.399999618530273px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.span-216-157 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 67.578125%;
}

.div-215-156 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 7.072800110512502%;
  background-color: rgba(33, 36, 39, 0.2);
  border-radius: 9999px;
}

.text-161 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 16.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.span-219-160 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 83.96659707724426%;
}

.margin-wrap-159 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 0px 12px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.div-214-155 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.margin-wrap-154 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 12px 0px 0px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.div-198-136 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.margin-wrap-135 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 24px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.text-164 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 500;
  font-size: 12px;
  line-height: 16.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.span-223-163 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 17.391904959248514%;
}

.icon-226-165 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  background-color: rgba(255, 255, 255, 1);
}

.div-222-162 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.div-184-121 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 83.71689603330636%;
}

.introduce2-117 {
@media (max-width: 1440px) {
  .introduce2-117 {
    width: 47%;
    min-width: 280px;
  }
}

@media (max-width: 768px) {
  .introduce2-117 {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }
}
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 33px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  width: 30%;
  min-width: 280px;
  background-color: rgba(240, 240, 240, 1);
  border: 1px solid rgba(33, 36, 39, 0.05);
  border-radius: 24px;
}

.div-229-168 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.div-228-167 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 99.50659162747668%;
  opacity: 0.05000000074505806;
}

.div-230-169 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 99.50659162747668%;
  border-radius: 24px;
  opacity: 0;
}

.div-233-173 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 18.859931853761857%;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.5), 0px 4px 6px -4px rgba(0,0,0,0.5);
  border-radius: 24px;
}

.text-176 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 500;
  font-size: 12px;
  line-height: 16.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.span-235-175 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 58.50891410048622%;
}

.div-234-174 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 24px 12px 24px 12px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 17.045768486969333%;
  background-color: rgba(255, 224, 134, 0.1);
  border-radius: 9999px;
}

.div-232-172 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.margin-wrap-171 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 24px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.text-181 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.h3-239-180 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.margin-wrap-179 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 12px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.text-183 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 17px;
  line-height: 27.625px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.p-242-182 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.div-238-178 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.margin-wrap-177 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 32px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.div-247-187 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 7.0724744451606965%;
  background-color: rgba(38, 38, 38, 1);
  border-radius: 9999px;
}

.text-190 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 16.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.span-248-189 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 83.1023102310231%;
}

.margin-wrap-188 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 0px 12px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.div-246-186 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.div-252-193 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 7.0724744451606965%;
  background-color: rgba(38, 38, 38, 1);
  border-radius: 9999px;
}

.text-196 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 16.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.span-253-195 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 86.02620087336244%;
}

.margin-wrap-194 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 0px 12px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.div-251-192 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.margin-wrap-191 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 12px 0px 0px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.div-257-199 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 7.0724744451606965%;
  background-color: rgba(38, 38, 38, 1);
  border-radius: 9999px;
}

.text-202 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 16.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.span-258-201 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 88.47711927981996%;
}

.margin-wrap-200 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 0px 12px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.div-256-198 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.margin-wrap-197 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 12px 0px 0px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.text-207 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 11px;
  line-height: 15.399999618530273px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.span-263-206 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 67.578125%;
}

.div-262-205 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 7.0724744451606965%;
  background-color: rgba(33, 36, 39, 0.2);
  border-radius: 9999px;
}

.text-210 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 16.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.span-266-209 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 83.96659707724426%;
}

.margin-wrap-208 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 0px 12px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.div-261-204 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.margin-wrap-203 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 12px 0px 0px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.div-245-185 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.margin-wrap-184 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 24px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.text-213 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 500;
  font-size: 12px;
  line-height: 16.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.span-270-212 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 17.391104153236945%;
}

.icon-273-214 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  background-color: rgba(255, 255, 255, 1);
}

.div-269-211 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.div-231-170 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 83.7175237067304%;
}

.introduce3-166 {
@media (max-width: 1440px) {
  .introduce3-166 {
    width: 47%;
    min-width: 280px;
  }
}

@media (max-width: 768px) {
  .introduce3-166 {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }
}
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 33px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  width: 30%;
  min-width: 280px;
  background-color: rgba(240, 240, 240, 1);
  border: 1px solid rgba(33, 36, 39, 0.05);
  border-radius: 24px;
}

.introducebox-67 {
@media (max-width: 1440px) {
  .introducebox-67 {
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .introducebox-67 {
    gap: 32px;
  }
}
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 32px;
  padding: 0px 0px 64px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.activatebtn1-216 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 20%;
  box-shadow: 0px 4px 6px -1px rgba(0,0,0,0.5), 0px 2px 4px -2px rgba(0,0,0,0.5);
  background-color: rgba(255, 224, 134, 1);
  border-radius: 9999px;
}

.activatebtn2-217 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 20%;
  background-color: rgba(33, 36, 39, 0.2);
  border-radius: 9999px;
}

.activatebtn3-218 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 20%;
  background-color: rgba(33, 36, 39, 0.2);
  border-radius: 9999px;
}

.indicatorbox-215 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 12px 24px 12px 24px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 11.11111111111111%;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);
  background-color: rgba(240, 240, 240, 1);
  border-radius: 9999px;
}

.second-61 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 64px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.circle-222 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 13.69472182596291%;
  box-shadow: 0px 4px 6px -1px rgba(0,0,0,0.5), 0px 2px 4px -2px rgba(0,0,0,0.5);
  border-radius: 24px;
}

.text-225 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 22px;
  line-height: 28.600000381469727px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.h3-286-224 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.text-227 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 17px;
  line-height: 23.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.p-289-226 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.textdiv-223 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 82.02567760342369%;
}

.div-283-221 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 15px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.circle1-229 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 45.45454545454545%;
  background-color: rgba(247, 247, 247, 1);
  border-radius: 9999px;
}

.circle2-230 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 45.45454545454545%;
  background-color: rgba(247, 247, 247, 1);
  border-radius: 9999px;
}

.circlearea-228 {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 6.915520628683694%;
}

.topbox-220 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 754px;
  padding: 32px 40px 32px 40px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  border-bottom: 1px solid rgba(33, 36, 39, 0.1);
}

.text-238 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 23.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-white);
}

.numbertext-237 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 18.505859375%;
}

.circle-236 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 5.333333333333334%;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.5), 0px 4px 6px -4px rgba(0,0,0,0.5);
  background-color: var(--Text/Muted/Light);
  border-radius: 9999px;
}

.text-241 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 21.25px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.h4-308-240 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 12.723415017985612%;
}

.text-243 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 19.5px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.p-312-242 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 95.68345323741008%;
}

.box-239 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 21px;
  padding: 24px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 92.66666666666666%;
  background-color: rgba(247, 247, 247, 1);
  border-radius: 24px;
}

.step2-235 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.text-247 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 23.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-white);
}

.numbertext-246 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 18.505859375%;
}

.circle-245 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 5.333333333333334%;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.5), 0px 4px 6px -4px rgba(0,0,0,0.5);
  background-color: var(--Text/Default/Light);
  border-radius: 9999px;
}

.text-250 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 21.25px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.h4-308-249 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 12.723415017985612%;
}

.text-252 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 19.5px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.p-312-251 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 95.68345323741008%;
}

.box-248 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 21px;
  padding: 24px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 92.66666666666666%;
  background-color: rgba(247, 247, 247, 1);
  border-radius: 24px;
}

.step3-244 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.text-256 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 23.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-white);
}

.numbertext-255 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 18.505859375%;
}

.circle-254 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 5.333333333333334%;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.5), 0px 4px 6px -4px rgba(0,0,0,0.5);
  background-color: var(--Border/Default/Light);
  border-radius: 9999px;
}

.text-259 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 21.25px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.h4-308-258 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 12.723415017985612%;
}

.text-261 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 19.5px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.p-312-260 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 95.68345323741008%;
}

.box-257 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 21px;
  padding: 24px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 92.66666666666666%;
  background-color: rgba(247, 247, 247, 1);
  border-radius: 24px;
}

.step4-253 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.text-265 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 23.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-241-237-232);
}

.numbertext-264 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 18.505859375%;
}

.circle-263 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 5.333333333333334%;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.5), 0px 4px 6px -4px rgba(0,0,0,0.5);
  background-color: var(--Border/Default/Light);
  border-radius: 9999px;
}

.text-268 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 21.25px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.h4-308-267 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 12.723415017985612%;
}

.text-270 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 19.5px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.p-312-269 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 95.68345323741008%;
}

.box-266 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 21px;
  padding: 24px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 92.66666666666666%;
  background-color: rgba(247, 247, 247, 1);
  border-radius: 24px;
}

.step5-262 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.text-274 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 23.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-white);
}

.numbertext-273 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 18.505859375%;
}

.circle-272 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 5.333333333333334%;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.5), 0px 4px 6px -4px rgba(0,0,0,0.5);
  background-color: var(--Background/Muted/Dark);
  border-radius: 9999px;
}

.text-277 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 21.25px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.h4-308-276 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 12.723415017985612%;
}

.text-279 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 19.5px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.p-312-278 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 95.68345323741008%;
}

.box-275 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 21px;
  padding: 24px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 92.66666666666666%;
  background-color: rgba(247, 247, 247, 1);
  border-radius: 24px;
}

.step1-271 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.stepcontainer-234 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 93.75%;
}

.stick-280 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 0.625%;
  background-color: var(--Background/Muted/Light);
  border-radius: 9999px;
}

.bigstep1-233 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 40px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.text-286 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 23.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-white);
}

.numbertext-285 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 18.505859375%;
}

.circle-284 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 5.333333333333334%;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.5), 0px 4px 6px -4px rgba(0,0,0,0.5);
  background-color: rgba(33, 36, 39, 1);
  border-radius: 9999px;
}

.text-289 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 21.25px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.h4-308-288 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 12.723415017985612%;
}

.text-291 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 19.5px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.p-312-290 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 95.68345323741008%;
}

.box-287 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 21px;
  padding: 24px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 92.66666666666666%;
  background-color: rgba(247, 247, 247, 1);
  border-radius: 24px;
}

.step1-283 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.text-295 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 23.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-white);
}

.numbertext-294 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 18.505859375%;
}

.circle-293 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 5.333333333333334%;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.5), 0px 4px 6px -4px rgba(0,0,0,0.5);
  background-color: rgba(33, 36, 39, 1);
  border-radius: 9999px;
}

.text-298 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 21.25px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.h4-308-297 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 12.723415017985612%;
}

.text-300 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 19.5px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.p-312-299 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 95.68345323741008%;
}

.box-296 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 21px;
  padding: 24px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 92.66666666666666%;
  background-color: rgba(247, 247, 247, 1);
  border-radius: 24px;
}

.step2-292 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.text-304 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 23.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-white);
}

.numbertext-303 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 18.505859375%;
}

.circle-302 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 5.333333333333334%;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.5), 0px 4px 6px -4px rgba(0,0,0,0.5);
  background-color: rgba(33, 36, 39, 1);
  border-radius: 9999px;
}

.text-307 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 21.25px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.h4-308-306 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 12.723415017985612%;
}

.text-309 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 19.5px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.p-312-308 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 95.68345323741008%;
}

.box-305 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 21px;
  padding: 24px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 92.66666666666666%;
  background-color: rgba(247, 247, 247, 1);
  border-radius: 24px;
}

.step3-301 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.text-313 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 23.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-white);
}

.numbertext-312 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 18.505859375%;
}

.circle-311 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 5.333333333333334%;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.5), 0px 4px 6px -4px rgba(0,0,0,0.5);
  background-color: rgba(33, 36, 39, 1);
  border-radius: 9999px;
}

.text-316 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 21.25px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.h4-308-315 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 12.723415017985612%;
}

.text-318 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 19.5px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.p-312-317 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 95.68345323741008%;
}

.box-314 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 21px;
  padding: 24px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 92.66666666666666%;
  background-color: rgba(247, 247, 247, 1);
  border-radius: 24px;
}

.step4-310 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.text-322 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 23.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-white);
}

.numbertext-321 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 18.505859375%;
}

.circle-320 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 5.333333333333334%;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.5), 0px 4px 6px -4px rgba(0,0,0,0.5);
  background-color: rgba(33, 36, 39, 1);
  border-radius: 9999px;
}

.text-325 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 21.25px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.h4-308-324 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 12.723415017985612%;
}

.text-327 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 19.5px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.p-312-326 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 95.68345323741008%;
}

.box-323 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 21px;
  padding: 24px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 92.66666666666666%;
  background-color: rgba(247, 247, 247, 1);
  border-radius: 24px;
}

.step5-319 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.stepcontainer-282 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 93.75%;
}

.stick-328 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 0.625%;
  background-color: rgba(33, 36, 39, 0.1);
  border-radius: 9999px;
}

.bigstep2-281 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 40px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.text-334 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 23.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-white);
}

.numbertext-333 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 18.505859375%;
}

.circle-332 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 5.333333333333334%;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.5), 0px 4px 6px -4px rgba(0,0,0,0.5);
  background-color: rgba(33, 36, 39, 1);
  border-radius: 9999px;
}

.text-337 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 21.25px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.h4-308-336 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 12.723415017985612%;
}

.text-339 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 19.5px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.p-312-338 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 95.68345323741008%;
}

.box-335 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 21px;
  padding: 24px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 92.66666666666666%;
  background-color: rgba(247, 247, 247, 1);
  border-radius: 24px;
}

.step1-331 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.text-343 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 23.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-white);
}

.numbertext-342 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 18.505859375%;
}

.circle-341 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 5.333333333333334%;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.5), 0px 4px 6px -4px rgba(0,0,0,0.5);
  background-color: rgba(33, 36, 39, 1);
  border-radius: 9999px;
}

.text-346 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 21.25px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.h4-308-345 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 12.723415017985612%;
}

.text-348 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 19.5px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.p-312-347 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 95.68345323741008%;
}

.box-344 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 21px;
  padding: 24px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 92.66666666666666%;
  background-color: rgba(247, 247, 247, 1);
  border-radius: 24px;
}

.step2-340 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.text-352 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 23.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-white);
}

.numbertext-351 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 18.505859375%;
}

.circle-350 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 5.333333333333334%;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.5), 0px 4px 6px -4px rgba(0,0,0,0.5);
  background-color: rgba(33, 36, 39, 1);
  border-radius: 9999px;
}

.text-355 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 21.25px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.h4-308-354 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 12.723415017985612%;
}

.text-357 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 19.5px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.p-312-356 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 95.68345323741008%;
}

.box-353 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 21px;
  padding: 24px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 92.66666666666666%;
  background-color: rgba(247, 247, 247, 1);
  border-radius: 24px;
}

.step3-349 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.text-361 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 23.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-white);
}

.numbertext-360 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 18.505859375%;
}

.circle-359 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 5.333333333333334%;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.5), 0px 4px 6px -4px rgba(0,0,0,0.5);
  background-color: rgba(33, 36, 39, 1);
  border-radius: 9999px;
}

.text-364 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 21.25px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.h4-308-363 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 12.723415017985612%;
}

.text-366 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 19.5px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.p-312-365 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 95.68345323741008%;
}

.box-362 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 21px;
  padding: 24px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 92.66666666666666%;
  background-color: rgba(247, 247, 247, 1);
  border-radius: 24px;
}

.step4-358 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.text-370 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 23.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-white);
}

.numbertext-369 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 18.505859375%;
}

.circle-368 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 5.333333333333334%;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.5), 0px 4px 6px -4px rgba(0,0,0,0.5);
  background-color: rgba(33, 36, 39, 1);
  border-radius: 9999px;
}

.text-373 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 21.25px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.h4-308-372 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 12.723415017985612%;
}

.text-375 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 12px;
  line-height: 19.5px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.p-312-374 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 95.68345323741008%;
}

.box-371 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 21px;
  padding: 24px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 92.66666666666666%;
  background-color: rgba(247, 247, 247, 1);
  border-radius: 24px;
}

.step5-367 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.stepcontainer-330 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 93.75%;
}

.stick-376 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 0.625%;
  background-color: rgba(33, 36, 39, 0.1);
  border-radius: 9999px;
}

.bigstep3-329 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 40px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.bigsteplayout-232 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.botbox-231 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.third-219 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px 80px 0px 80px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 88.88888888888889%;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.5), 0px 4px 6px -4px rgba(0,0,0,0.5);
  background-color: rgba(240, 240, 240, 1);
  border-radius: 24px;
}

.text-379 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.h3-675-378 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 46.666666666666664%;
}

.text-381 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-inter);
  font-weight: normal;
  font-size: 17px;
  line-height: 23.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-38-38-38);
}

.p-678-380 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 46.666666666666664%;
}

.text-383 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.5), 0px 4px 6px 0px rgba(0,0,0,0.5);
  font-family: var(--font-family-inter);
  font-weight: 700;
  font-size: 17px;
  line-height: 23.799999237060547px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-11-18-21);
}

.button-681-382 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 16px 40px 16px 40px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 14.125434027777779%;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.5), 0px 4px 6px -4px rgba(0,0,0,0.5);
  background-color: rgba(255, 224, 134, 1);
  border-radius: 12px;
}

.forth-377 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 18px;
  padding: 64px 0px 0px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.body-23 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
  background-color: rgba(247, 247, 247, 1);
}

.text-387 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-17-24-39);
}

.text-388 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-75-85-99);
}

.text-389 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-75-85-99);
}

.text-390 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-75-85-99);
}

.product-386 {
@media (max-width: 1440px) {
  .product-386 {
    width: 47%;
    min-width: 280px;
  }
}

@media (max-width: 768px) {
  .product-386 {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }
}
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 13px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  width: 30%;
  min-width: 280px;
}

.text-392 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-17-24-39);
}

.text-393 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-75-85-99);
}

.text-394 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-75-85-99);
}

.text-395 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-75-85-99);
}

.company-391 {
@media (max-width: 1440px) {
  .company-391 {
    width: 47%;
    min-width: 280px;
  }
}

@media (max-width: 768px) {
  .company-391 {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }
}
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 13px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  width: 30%;
  min-width: 280px;
}

.text-397 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-17-24-39);
}

.text-398 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-75-85-99);
}

.text-399 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-75-85-99);
}

.text-400 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-75-85-99);
}

.support-396 {
@media (max-width: 1440px) {
  .support-396 {
    width: 47%;
    min-width: 280px;
  }
}

@media (max-width: 768px) {
  .support-396 {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }
}
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 13px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  width: 30%;
  min-width: 280px;
}

.text-402 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-17-24-39);
}

.text-403 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-75-85-99);
}

.text-404 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-75-85-99);
}

.text-405 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-75-85-99);
}

.legal-401 {
@media (max-width: 1440px) {
  .legal-401 {
    width: 47%;
    min-width: 280px;
  }
}

@media (max-width: 768px) {
  .legal-401 {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }
}
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 13px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  width: 30%;
  min-width: 280px;
}

.links-385 {
@media (max-width: 1440px) {
  .links-385 {
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .links-385 {
    gap: 16px;
  }
}
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0px 0px 10px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 87.77777777777777%;
}

.logo-407 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  max-width: 134px;
  width: 100%;
  height: auto;
}

.text-408 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-33-36-39);
}

.logotab-406 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 0px 0px 20px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.text-410 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-roboto);
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-33-36-39);
}

.div-764-409 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 9px 0px 0px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 87.77777777777777%;
  border-top: 1px solid rgba(229, 231, 235, 1);
}

.footer-384 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  padding: 16px 0px 0px 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
  background-color: rgba(249, 250, 251, 1);
  border-top: 1px solid rgba(229, 231, 235, 1);
}

.button-770-412 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 14px 26px 14px 26px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.5), 0px 4px 6px -4px rgba(0,0,0,0.5);
  background-color: rgba(240, 240, 240, 1);
  border: 2px solid rgba(33, 36, 39, 0.2);
  border-radius: 12px;
}

.dark_mode_toggle-411 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 3.6111111111111107%;
}

.main-1 {
@media (max-width: 1440px) {
  .main-1 {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 768px) {
  .main-1 {
    padding-left: 16px;
    padding-right: 16px;
  }
}
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  max-width: 1440px;
  flex-grow: 0;
  flex-shrink: 1;
}

/* ============================================
   JavaScript Enhanced Features
   ============================================ */

/* 드롭다운 메뉴 */
.dropdown-menu-custom {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 1000;
}

.dropdown-menu-custom.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item-custom {
  display: block;
  padding: 12px 16px;
  color: #4B5563;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}

.dropdown-item-custom:hover {
  background: var(--bg-muted);
  color: var(--primary-brand);
}

.dropdown-divider-custom {
  height: 1px;
  background: #E5E7EB;
  margin: 8px 0;
}

/* 모바일 메뉴 토글 버튼 */
.mobile-menu-toggle {
  display: none;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px;
  color: var(--text-default);
  transition: all 0.2s;
}

.mobile-menu-toggle:hover {
  color: var(--primary-brand);
}

.mobile-menu-toggle i {
  display: block;
}

@media (max-width: 1023px) {
  .mobile-menu-toggle {
    display: block;
  }

  /* Middlelayer 기본 상태: 숨김 */
  .Middlelayer {
    display: none !important;
    position: fixed !important;
    left: 50% !important;
    top: 80px !important;
    transform: translateX(-50%) !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    z-index: 99999 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 16px !important;
    gap: 4px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
  }

  /* 메뉴 열렸을 때 - 라이트모드 */
  body:not([data-theme="dark"]) .Middlelayer.mobile-menu-open {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: white !important;
    background-color: white !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  }

  /* 다크모드에서 메뉴 열렸을 때 */
  html[data-theme="dark"] .Middlelayer.mobile-menu-open,
  body[data-theme="dark"] .Middlelayer.mobile-menu-open,
  [data-theme="dark"] .Middlelayer.mobile-menu-open {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: #1C1F22 !important;
    background-color: #1C1F22 !important;
    border: 1px solid #2A2E31 !important;
    border-color: #2A2E31 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  }

  .Middlelayer > * {
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  .Middlelayer .Toolsbtn,
  .Middlelayer .Planningbtn,
  .Middlelayer .Makebtn,
  .Middlelayer .Eventbtn,
  .Middlelayer .Askbtn {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    transition: background-color 0.2s !important;
  }

  .Middlelayer .Toolsbtn:hover,
  .Middlelayer .Planningbtn:hover,
  .Middlelayer .Makebtn:hover,
  .Middlelayer .Eventbtn:hover,
  .Middlelayer .Askbtn:hover {
    background-color: #f5f5f5 !important;
  }
}

/* 스크롤 애니메이션 */
.fade-in {
  animation: fadeInUp 0.6s ease forwards;
}

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

/* 터치 디바이스 최적화 */
.touch-device button,
.touch-device a {
  -webkit-tap-highlight-color: rgba(255, 224, 134, 0.2);
}

/* ============================================
   Enhanced Responsive Improvements
   ============================================ */

@media (max-width: 1200px) {
  .Main {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 768px) {
  .Header {
    min-height: 56px !important;
  }

  .Logo img {
    height: 42px !important;
  }

  .Loginlayer {
    gap: 8px !important;
  }

  .Loginbtn, .Signupbtn {
    padding: 6px 12px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .Body {
    margin-top: 70px !important;
  }

  /* 텍스트 크기 조정 */
  .First p, .Second p, .Third p {
    font-size: 14px !important;
  }

  h1 {
    font-size: 24px !important;
  }

  h2 {
    font-size: 20px !important;
  }

  h3 {
    font-size: 18px !important;
  }
}

/* ============================================
   모바일 레이아웃 겹침 수정
   ============================================ */

@media (max-width: 768px) {
  .Toptext {
    margin-bottom: 24px !important;
    padding: 0 16px !important;
    font-size: 28px !important;
    line-height: 1.3 !important;
  }

  .Bottom {
    flex-direction: column !important;
    height: auto !important;
    gap: 24px !important;
  }

  .Left, .Right {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .First {
    height: auto !important;
    padding: 40px 16px !important;
    gap: 32px !important;
  }

  .Second, .Third {
    height: auto !important;
    padding: 40px 16px !important;
  }
}

@media (max-width: 480px) {
  .Toptext {
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin-bottom: 20px !important;
  }

  .First {
    padding: 32px 12px !important;
  }
}

/* ============================================
   CRITICAL 모바일 레이아웃 수정 (강제 적용)
   ============================================ */

@media (max-width: 1024px) {
  /* Bottom 영역을 세로로 배치 */
  .Bottom {
    flex-direction: column !important;
    height: auto !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  /* Left와 Right를 100% 너비로 */
  .First > .Bottom > .Left,
  .First > .Bottom > .Right {
    width: 100% !important;
    max-width: 600px !important;
    height: auto !important;
    min-height: 400px !important;
  }
}

@media (max-width: 768px) {
  /* Toptext 여백 확보 */
  .First .Toptext {
    margin-bottom: 32px !important;
    padding: 0 16px !important;
    font-size: 28px !important;
    line-height: 1.4 !important;
  }

  /* First 섹션 높이 자동 */
  .First {
    height: auto !important;
    min-height: unset !important;
    padding: 40px 16px !important;
  }

  /* Left 영역 */
  .First > .Bottom > .Left {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 20px !important;
  }

  /* Right 영역 */
  .First > .Bottom > .Right {
    width: 100% !important;
    max-width: 400px !important;
    height: auto !important;
    margin-top: 24px !important;
  }

  /* AI 텍스트 크기 조정 */
  .Ai57 {
    font-size: 24px !important;
    line-height: 1.4 !important;
  }
}

@media (max-width: 480px) {
  .First .Toptext {
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin-bottom: 24px !important;
  }

  .First {
    padding: 32px 12px !important;
  }

  .Ai57 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  .First > .Bottom > .Left {
    padding: 16px !important;
  }
}

/* ============================================
   DIV-111 상단 마진 추가 & 폰트 크기 원복
   ============================================ */

/* DIV-111에 상단 마진 추가 */
.Div111 {
  margin-top: 40px !important;
}

@media (max-width: 768px) {
  .Div111 {
    margin-top: 30px !important;
  }
}

/* 폰트 크기 원복 - 기존 설정 제거 */
@media (max-width: 768px) {
  .First .Toptext {
    font-size: unset !important;
    line-height: unset !important;
  }

  .Ai57 {
    font-size: unset !important;
    line-height: unset !important;
  }
}

@media (max-width: 480px) {
  .First .Toptext {
    font-size: unset !important;
    line-height: unset !important;
  }

  .Ai57 {
    font-size: unset !important;
    line-height: unset !important;
  }

  /* 기존에 추가한 텍스트 크기 조정 제거 */
  .First p, .Second p, .Third p {
    font-size: unset !important;
  }

  h1 {
    font-size: unset !important;
  }

  h2 {
    font-size: unset !important;
  }

  h3 {
    font-size: unset !important;
  }

  .Toptext {
    font-size: unset !important;
    line-height: unset !important;
  }
}

/* ============================================
   폰트 크기 override 완전 제거
   ============================================ */

/* 이전에 추가한 모든 폰트 크기 관련 CSS 무효화 */
@media (max-width: 768px) {
  .Toptext {
    /* 폰트 크기는 건드리지 않음 - 인라인 스타일 유지 */
    font-size: inherit !important;
    line-height: inherit !important;
  }

  .First .Toptext {
    /* 마진과 패딩만 조정 */
    margin-bottom: 32px !important;
    padding: 0 16px !important;
    /* 폰트 크기 원복 */
    font-size: 40px !important;
    line-height: 40px !important;
  }
}

@media (max-width: 480px) {
  .First .Toptext {
    /* 작은 화면에서는 약간만 줄임 */
    font-size: 32px !important;
    line-height: 36px !important;
    margin-bottom: 24px !important;
  }
}

/* ============================================
   Second 섹션 텍스트 겹침 수정
   ============================================ */

/* TextZone 기본 스타일 - 자식 크기에 맞춤 */
.Textzone {
  width: 100% !important;
  max-width: 800px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  position: relative !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 48px !important;
  padding: 24px 16px !important;
}

/* Textzone 내부 자식들 position 제거 */
.Textzone > .Box,
.Textzone > .Ai128,
.Textzone > div {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  max-width: 100% !important;
}

/* introduceBox 영역 침범 방지 */
.Introducebox {
  width: 100% !important;
  max-width: 1312px !important;
  margin-top: 0 !important;
  clear: both !important;
}

/* topBox 유연한 크기 조절 */
.Topbox {
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  padding: 32px 40px !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 32px !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;
  border-bottom: 1px rgba(33, 36, 39, 0.10) solid !important;
  overflow: visible !important;
}

/* topBox 좌측 텍스트 영역 (Div283) */
.Topbox .Div283 {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  display: flex !important;
  gap: 15px !important;
  align-items: flex-start !important;
}

/* topBox 내 textDiv */
.Topbox .Textdiv {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* topBox 내 H3, P 요소들 */
.Topbox .H3286,
.Topbox .P289 {
  width: 100% !important;
  height: auto !important;
  white-space: normal !important;
  word-wrap: break-word !important;
}

/* topBox 우측 인디케이터 영역 */
.Topbox .Circlearea {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 88px !important;
  flex-shrink: 0 !important;
}

@media (max-width: 1024px) {
  .Topbox {
    flex-wrap: wrap !important;
    gap: 24px !important;
  }

  .Topbox .Circlearea {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 768px) {
  .Topbox {
    padding: 24px 20px !important;
    gap: 20px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .Topbox .Circlearea {
    justify-content: flex-start !important;
  }
}

@media (max-width: 480px) {
  .Topbox {
    padding: 20px 16px !important;
    gap: 16px !important;
  }
}

/* ============================================
   Bigstep 반응형 및 UI 개선
   ============================================ */

/* Botbox - 부모 컨테이너 - JavaScript에서 크기 제어 */
.Botbox {
  height: auto !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Bigstep 레이아웃 - 좌우 슬라이드 - JavaScript에서 크기 제어 */
.Bigsteplayout {
  height: auto !important;
  display: flex !important;
  flex-direction: row !important;
  transition: transform 0.5s ease-in-out !important;
  overflow: visible !important;
}

.Bigstep1, .Bigstep2, .Bigstep3 {
  height: auto !important;
  padding: 40px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* Step Container - JavaScript에서 크기 제어 */
.Stepcontainer {
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 27px !important;
  overflow: visible !important;
  position: relative !important;
}

/* 각 Step - JavaScript에서 크기 제어 */
.Step1, .Step2, .Step3, .Step4, .Step5, .Step6 {
  height: auto !important;
  position: relative !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  min-height: 64px !important;
}

/* Circle - Step 내에서 absolute, Stick 중심(68+4=72px)에 맞춤 */
.Step1 > .Circle,
.Step2 > .Circle,
.Step3 > .Circle,
.Step4 > .Circle,
.Step5 > .Circle,
.Step6 > .Circle {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 64px !important;
  height: 64px !important;
  transform: translateX(40px) !important;
}

/* Box - JavaScript에서 크기 제어 */

/* Box 내부 텍스트 */
.Step1 .Box > div,
.Step2 .Box > div,
.Step3 .Box > div,
.Step4 .Box > div,
.Step5 .Box > div,
.Step6 .Box > div {
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1024px) {
  .Bigstep1, .Bigstep2, .Bigstep3 {
    padding: 32px !important;
  }
}

@media (max-width: 768px) {
  .Bigstep1, .Bigstep2, .Bigstep3 {
    padding: 24px 16px !important;
  }

  .Stepcontainer {
    gap: 20px !important;
  }

  .Step1, .Step2, .Step3, .Step4, .Step5, .Step6 {
    gap: 16px !important;
  }

  .Step1 > .Circle,
  .Step2 > .Circle,
  .Step3 > .Circle,
  .Step4 > .Circle,
  .Step5 > .Circle,
  .Step6 > .Circle {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  .Step1 > .Box,
  .Step2 > .Box,
  .Step3 > .Box,
  .Step4 > .Box,
  .Step5 > .Box,
  .Step6 > .Box {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 16px 20px !important;
    min-height: 48px !important;
  }
}

@media (max-width: 480px) {
  .Bigstep1, .Bigstep2, .Bigstep3 {
    padding: 20px 12px !important;
  }

  .Stepcontainer {
    gap: 16px !important;
  }

  .Step1, .Step2, .Step3, .Step4, .Step5, .Step6 {
    gap: 12px !important;
  }

  .Step1 > .Circle,
  .Step2 > .Circle,
  .Step3 > .Circle,
  .Step4 > .Circle,
  .Step5 > .Circle,
  .Step6 > .Circle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .Step1 > .Box,
  .Step2 > .Box,
  .Step3 > .Box,
  .Step4 > .Box,
  .Step5 > .Box,
  .Step6 > .Box {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 12px 16px !important;
    min-height: 40px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 768px) {
  /* TextZone 높이 자동 조정 */
  .Textzone {
    width: 100% !important;
    height: auto !important;
    padding: 24px 16px !important;
    margin-bottom: 32px !important;
  }

  /* AI가 만드는 숏폼 제작 솔루션 */
  .Ai128 {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }

  /* 다양한 방식으로... 설명 텍스트 */
  .Textzone > div:nth-child(2) {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  /* AI 기반 솔루션 박스 */
  .Box {
    order: -1 !important;
  }

  /* Second 섹션 패딩 조정 */
  .Second {
    padding: 40px 16px !important;
  }
}

@media (max-width: 480px) {
  .Ai128 {
    font-size: 20px !important;
  }

  .Textzone > div:nth-child(2) {
    font-size: 14px !important;
  }
}

/* ============================================
   TopText 하단 공간 추가
   ============================================ */

.Toptext {
  margin-bottom: 80px !important;
}

@media (max-width: 768px) {
  .Toptext {
    margin-bottom: 60px !important;
  }
}

@media (max-width: 480px) {
  .Toptext {
    margin-bottom: 48px !important;
  }
}

/* ============================================
   AI로 쉽게 '딸깍' 텍스트 상단 공간 추가
   ============================================ */

.Ai57 {
  margin-top: 60px !important;
  white-space: pre-line !important;
}

@media (max-width: 768px) {
  .Ai57 {
    margin-top: 48px !important;
    white-space: pre-line !important;
  }
}

@media (max-width: 480px) {
  .Ai57 {
    margin-top: 32px !important;
    white-space: pre-line !important;
  }
}

/* ============================================
   Introduce 카드 호버 효과
   ============================================ */

.Introduce1, .Introduce2, .Introduce3 {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  cursor: pointer !important;
}

.Introduce1:hover, .Introduce2:hover, .Introduce3:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

/* 강조 텍스트 호버 시 노란색으로 변경 */
.Introduce1:hover [class="147"],
.Introduce2:hover .Url194,
.Introduce3:hover .Ai241 {
  color: var(--primary-brand-hover) !important;
  transition: color 0.3s ease !important;
}

/* ============================================
   bigStep 반응형 - Stick과 Circle은 고정, Box만 축소
   ============================================ */

/* Step 요소들 (Step1, Step2, Step3 등) */
.Step1, .Step2, .Step3, .Step4, .Step5 {
  width: 100% !important;
  max-width: 1200px !important;
  gap: 24px !important;
}

/* Circle 크기 고정 */
.Step1 .Circle,
.Step2 .Circle,
.Step3 .Circle,
.Step4 .Circle,
.Step5 .Circle {
  width: 64px !important;
  min-width: 64px !important;
  height: 64px !important;
  flex-shrink: 0 !important;
}

/* Box는 반응형으로 축소 */
.Step1 .Box,
.Step2 .Box,
.Step3 .Box,
.Step4 .Box,
.Step5 .Box {
  width: auto !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* Stick 크기 고정 및 Circle 정중앙 배치 */
.Stick {
  width: 8px !important;
  min-width: 8px !important;
  flex-shrink: 0 !important;
  /* Circle 중심 = bigStep padding(40px) + StepContainer padding(16px) + Circle 반지름(32px) - Stick 반지름(4px) */
  left: calc(40px + 16px + 32px - 4px) !important;
}

/* StepContainer 반응형 */
.Stepcontainer {
  width: 100% !important;
  max-width: 1200px !important;
  padding: 0 16px !important;
}

/* BigStep 레이아웃 - JavaScript에서 크기 제어 */
.Bigstep1, .Bigstep2, .Bigstep3 {
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.Bigsteplayout {
  display: flex !important;
  position: relative !important;
  transition: transform 0.5s ease-in-out !important;
}

/* BigStep의 부모 요소 (Third) - overflow 숨김 */
.Third {
  overflow: hidden !important;
  position: relative !important;
}

/* Forth 하단 마진 */
.Forth {
  margin-bottom: 64px !important;
}

@media (max-width: 768px) {
  .Step1 .Box,
  .Step2 .Box,
  .Step3 .Box,
  .Step4 .Box,
  .Step5 .Box {
    padding: 16px !important;
  }

  .Stepcontainer {
    gap: 32px !important;
  }
}

/* ============================================
   타이포그래피 유틸리티 클래스
   ============================================ */

/* Large Title */
.text-large-title {
  font-size: var(--font-size-large-title);
  line-height: var(--line-height-large-title);
  font-weight: 400;
}

/* Title 1 */
.text-title1 {
  font-size: var(--font-size-title1);
  line-height: var(--line-height-title1);
  font-weight: 400;
}

/* Title 2 */
.text-title2 {
  font-size: var(--font-size-title2);
  line-height: var(--line-height-title2);
  font-weight: 400;
}

/* Title 3 */
.text-title3 {
  font-size: var(--font-size-title3);
  line-height: var(--line-height-title3);
  font-weight: 400;
}

/* Headline */
.text-headline {
  font-size: var(--font-size-headline);
  line-height: var(--line-height-headline);
  font-weight: 400;
}

/* Body */
.text-body {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
}

/* Callout */
.text-callout {
  font-size: var(--font-size-callout);
  line-height: var(--line-height-callout);
  font-weight: 400;
}

/* Subhead */
.text-subhead {
  font-size: var(--font-size-subhead);
  line-height: var(--line-height-subhead);
  font-weight: 400;
}

/* Footnote */
.text-footnote {
  font-size: var(--font-size-footnote);
  line-height: var(--line-height-footnote);
  font-weight: 400;
}

/* Caption 1 */
.text-caption1 {
  font-size: var(--font-size-caption1);
  line-height: var(--line-height-caption1);
  font-weight: 400;
}

/* Caption 2 */
.text-caption2 {
  font-size: var(--font-size-caption2);
  line-height: var(--line-height-caption2);
  font-weight: 400;
}

/* ============================================
   전역 폰트 크기 오버라이드 (인라인 스타일 대체)
   ============================================ */

/* 34px → Large Title */
[style*="font-size: 34px"] {
  font-size: var(--font-size-large-title) !important;
}

/* 28px → Title 1 */
[style*="font-size: 28px"] {
  font-size: var(--font-size-title1) !important;
}

/* 22px → Title 2 */
[style*="font-size: 22px"] {
  font-size: var(--font-size-title2) !important;
}

/* 20px → Title 3 */
[style*="font-size: 20px"] {
  font-size: var(--font-size-title3) !important;
}

/* 17px → Headline/Body */
[style*="font-size: 17px"] {
  font-size: var(--font-size-headline) !important;
}

/* 16px → Callout */
[style*="font-size: 16px"] {
  font-size: var(--font-size-callout) !important;
}

/* 15px → Subhead */
[style*="font-size: 15px"] {
  font-size: var(--font-size-subhead) !important;
}

/* 13px → Footnote */
[style*="font-size: 13px"] {
  font-size: var(--font-size-footnote) !important;
}

/* 12px → Caption 1 */
[style*="font-size: 12px"] {
  font-size: var(--font-size-caption1) !important;
}

/* 11px → Caption 2 */
[style*="font-size: 11px"] {
  font-size: var(--font-size-caption2) !important;
}

/* ============================================
   색상 유틸리티 클래스 (Color Utility Classes)
   ============================================ */

/* Text Colors */
.text-charcoal { color: #262626; }
.text-inkstone { color: #0B1215; }
.text-graphite { color: #212427; }
.text-slate { color: #4B5563; }
.text-gray-900 { color: #111827; }
.text-brand { color: #FFE086; }
.text-worn-dune { color: #F1EDE8; }

[data-theme="dark"] .text-charcoal,
[data-theme="dark"] .text-inkstone,
[data-theme="dark"] .text-graphite,
[data-theme="dark"] .text-slate,
[data-theme="dark"] .text-gray-900 {
  color: var(--text-default);
}

[data-theme="dark"] .text-brand {
  color: var(--primary-brand);
}

/* Background Colors */
.bg-snow-flask { background: #F7F7F7; background-color: #F7F7F7; }
.bg-porcelain { background: #F0F0F0; background-color: #F0F0F0; }
.bg-graphite { background: #212427; background-color: #212427; }
.bg-charcoal { background: #262626; background-color: #262626; }
.bg-brand { background: #FFE086; background-color: #FFE086; }
.bg-gray-50 { background: #F9FAFB; background-color: #F9FAFB; }

[data-theme="dark"] .bg-snow-flask,
[data-theme="dark"] .bg-porcelain {
  background: var(--bg-muted);
  background-color: var(--bg-muted);
}

[data-theme="dark"] .bg-graphite,
[data-theme="dark"] .bg-charcoal {
  background: var(--bg-surface);
  background-color: var(--bg-surface);
}

[data-theme="dark"] .bg-brand {
  background: var(--primary-brand);
  background-color: var(--primary-brand);
}

[data-theme="dark"] .bg-gray-50 {
  background: var(--bg-default);
  background-color: var(--bg-default);
}

/* Third 섹션 전용 배경 */
[data-theme="dark"] .Third .bg-porcelain {
  background: #262626;
  background-color: #262626;
}

[data-theme="dark"] .Third .bg-snow-flask {
  background: #212427;
  background-color: #212427;
}


/* ============================================
   설정 메뉴 컨테이너 (톱니바퀴 + 테마/언어 토글)
   ============================================ */
.settings-menu-container {
  position: fixed !important;
  bottom: 24px !important;
  left: 24px !important;
  z-index: 9999 !important;
  display: flex;
  flex-direction: column-reverse; /* 위로 펼쳐지도록 */
  align-items: flex-start;
  gap: 12px;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* 톱니바퀴 버튼 */
.settings-toggle-btn {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #000;
  border: 1px solid rgba(255,255,255,.25);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 0 24px rgba(255,255,255,.15);
  -webkit-tap-highlight-color: transparent;
}

.settings-toggle-btn:hover {
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.4),
    0 0 32px rgba(255,255,255,.25);
  transform: scale(1.05);
}

.settings-toggle-btn i {
  font-size: 28px;
  color: #fff;
  transition: transform 0.3s ease;
}

.settings-menu-container.open .settings-toggle-btn i {
  transform: rotate(90deg);
}

/* 설정 옵션들 컨테이너 */
.settings-options {
  display: flex !important;
  flex-direction: column-reverse !important; /* 위로 펼쳐지도록 */
  gap: 12px !important;
  max-height: 0 !important;
  overflow: visible !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease !important;
  pointer-events: none !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.settings-menu-container.open .settings-options {
  max-height: 400px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 다크모드 토글 버튼 */
.fixed-theme-toggle {
  width: 140px;
  height: 44px;
  border-radius: 9999px;
  background: #000;
  border: 1px solid rgba(255,255,255,.25);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

.fixed-theme-toggle:hover {
  box-shadow: none !important;
}

/* 텍스트 레이어 */
.theme-toggle-text {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 16px;
}

/* 텍스트 아이템 */
.theme-toggle-text-item {
  flex: 1;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-shadow:
    0 0 6px rgba(255,255,255,.9),
    0 0 12px rgba(255,255,255,.6);
  opacity: 0.5;
  transition: opacity 0.2s ease;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 활성 상태 */
.theme-toggle-text-item.active {
  opacity: 1;
}

/* 슬라이딩 인디케이터 - 기본은 다크모드(왼쪽) */
.theme-toggle-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 62px;
  height: 36px;
  border-radius: 9999px;
  background: rgba(255,255,255,.12);
  box-shadow: none !important;
  transition: transform 0.3s ease;
  pointer-events: none;
}

/* 라이트 모드일 때 인디케이터를 오른쪽으로 */
.fixed-theme-toggle.theme-toggle-light .theme-toggle-indicator {
  transform: translateX(66px);
}

/* 다크 모드일 때 인디케이터를 왼쪽으로 (명시적) */
.fixed-theme-toggle:not(.theme-toggle-light) .theme-toggle-indicator {
  transform: translateX(0);
}

/* 반응형 - 작은 화면에서 위치 조정 */
@media (max-width: 768px) {
  .settings-menu-container {
    bottom: 20px !important;
    left: 20px !important;
  }

  .settings-toggle-btn {
    width: 56px !important;
    height: 56px !important;
  }

  .settings-toggle-btn i {
    font-size: 24px !important;
  }

  .fixed-theme-toggle {
    width: 120px;
    height: 40px;
  }

  .theme-toggle-text {
    padding: 0 12px;
  }

  .theme-toggle-text-item {
    font-size: 11px;
  }
}

/* ==========================================
   텍스트 요소 간격 및 여백 설정
   ========================================== */

/* PC 기본 설정 (768px 이상) */
body {
  --text-gap: 32px;
  --text-padding: 64px;
}

/* 텍스트 컨테이너에 간격 적용 */
div[class*="Textdiv"],
div[class*="Content"],
section,
.Third .Textdiv,
.Topbox .Textdiv {
  gap: var(--text-gap) !important;
  padding-left: var(--text-padding) !important;
  padding-right: var(--text-padding) !important;
}


/* ==========================================
   다크모드 모바일 메뉴 강제 적용 (최우선)
   ========================================== */
@media (max-width: 1023px) {
  html[data-theme="dark"] .Middlelayer.mobile-menu-open,
  html[data-theme="dark"] .Headerpadding .Middlelayer.mobile-menu-open,
  body[data-theme="dark"] .Middlelayer.mobile-menu-open,
  [data-theme="dark"] .Middlelayer.mobile-menu-open {
    background: #1C1F22 !important;
    background-color: #1C1F22 !important;
    border: 1px solid #2A2E31 !important;
    border-color: #2A2E31 !important;
  }
}


/* ==========================================
   Language Toggle Button (다국어 토글)
   ==========================================*/
.fixed-language-toggle {
  width: 140px;
  height: 44px;
  background: #000;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  padding: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.fixed-language-toggle:hover {
  box-shadow: none !important;
}

.language-toggle-indicator {
  position: absolute;
  width: 62px;
  height: 36px;
  background: rgba(255,255,255,.12);
  border-radius: 9999px;
  transition: transform 0.3s ease;
  top: 4px;
  left: 4px;
  box-shadow: none !important;
  pointer-events: none;
}

.fixed-language-toggle.lang-en .language-toggle-indicator {
  transform: translateX(66px);
}

.language-toggle-text {
  display: flex;
  width: 100%;
  position: relative;
  z-index: 1;
  justify-content: space-between;
  padding: 0 16px;
}

.language-toggle-text-item {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  transition: opacity 0.2s ease;
  user-select: none;
  letter-spacing: 0.5px;
  text-shadow:
    0 0 6px rgba(255,255,255,.9),
    0 0 12px rgba(255,255,255,.6);
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.language-toggle-text-item.active {
  opacity: 1;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .fixed-language-toggle {
    width: 120px;
    height: 40px;
  }

  .language-toggle-text {
    padding: 0 12px;
  }

  .language-toggle-text-item {
    font-size: 11px;
  }
}