/**
 * Missions Website Stylesheet
 * Responsive design for desktop and mobile
 */

 :root {
	/* Primary Colors - Default Theme */
	--primary-color: #191814;
	--secondary-color: #7acbee;
	--accent-color: #f5a623;
	--text-color: #1f2129;
	--light-text: #727478;
	--bg-color: #F7F5F0;
	--card-bg: #ffffff;
	--border-color: #e2e8f0;
	--task-color: #38b2ac;
	--reward-color: #ed8936;
	--screen-time-color: #9f7aea;
	--shadow: 0 4px 10px rgba(50, 50, 93, 0.11), 0 1px 5px rgba(0, 0, 0, 0.1);
	--pic-shadow: 0 2px 4px rgba(50, 50, 93, 0.11), 0 2px 4px rgba(0, 0, 0, 0.1);
	--pixel-accent: #ff6b6b;
	
	/* Fonts */
	--pixel-font: 'Press Start 2P', 'Microsoft Yahei', sans-serif;
	--primary-font: 'Jost', 'Microsoft Yahei', sans-serif;
	--body-font: 'Nunito', 'Microsoft Yahei', sans-serif;
	
	/* Dimensions */
	--header-height: 70px;
	--border-radius: 8px;
	--container-width: 1140px;
	
	/* Animations */
	--transition-speed: 0.3s;
	--animation-time: 15s;
  }
  
  /* Global Styles */
  * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
  }
  
  html {
	font-size: 16px;
	scroll-behavior: smooth;
  }
  
  body {
	font-family: var(--body-font);
	background-color: var(--bg-color);
	color: var(--text-color);
	min-height: 100vh;
	overflow-x: hidden;
	transition: background-color var(--transition-speed) ease;
	line-height: 1.6;
  }
  
  a {
	color: var(--primary-color);
	text-decoration: none;
	transition: all var(--transition-speed) ease;
  }
  
  a:hover {
	color: var(--accent-color);
  }
  
  h1, h2, h3, h4, h5, h6 {
	font-family: var(--primary-font);
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 1rem;
	color: var(--text-color);
	transition: color var(--transition-speed) ease;
  }
  
  h1 {
	font-size: 2.5rem;
  }
  
  h2 {
	font-size: 2rem;
	margin-top: 2.5rem;
  }
  
  h3 {
	font-size: 1.5rem;
  }
  
  p {
	margin-bottom: 1rem;
	font-weight: 300;
	transition: color var(--transition-speed) ease;
  }
  
  img {
	max-width: 100%;
	height: auto;
  }
  
  button {
	cursor: pointer;
	border: none;
	outline: none;
	transition: all var(--transition-speed) ease;
  }
  
  ul {
	list-style-position: inside;
	margin-bottom: 1rem;
  }
  
  .container {
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 1.5rem;
  }
  
  /* Main Content Area */
  .main_content {
	position: relative;
	z-index: 10;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 3rem 2rem;
	overflow: visible;
  }
  
  /* App Title Area */
  .app_title {
	text-align: center;
	margin-bottom: 2rem;
  }
  
  .appicon {
	width: 100px;
	height: 100px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin: 0rem auto 1rem;
	border-radius: 22px;
	/* box-shadow: var(--shadow); */
	background-image: url('images/app_icon.png');
  }
  
  .appname {
	font-size: 2.5rem;
	margin: 1rem 0 0.5rem;
	font-family: var(--pixel-font);
	color: var(--primary-color);
  }
  
  .subtitle {
	font-size: 1.2rem;
	color: var(--light-text);
	margin-bottom: 1.5rem;
  }
  
  .app_intro {
	max-width: 720px;
	font-weight: 300;
	margin: 0 auto 3rem;
	text-align: center;
	font-size: 1.2rem;
	line-height: 1.8;
  }
  
  /* Download Button */
  .ios_download_btn {
	display: block;
	width: 180px;
	height: 60px;
	background-image: url('images/ios_download.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin: 2rem auto 4rem;
	transition: transform var(--transition-speed) ease;
  }
  
  .ios_download_btn:hover {
	transform: scale(1.05);
  }
  
  /* Scenario Toggle Tabs - iOS Segmented Control Style */
  .scenario_tabs {
	display: flex;
	justify-content: center;
	margin: 2rem auto 3rem;
	max-width: 500px;
	background-color: rgba(0, 0, 0, 0.05);
	border-radius: 8px;
	padding: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	flex-wrap: nowrap;
  }
  
  .tab {
	flex: 1;
	padding: 0.8rem 1rem;
	background-color: transparent;
	border: none;
	border-radius: 6px;
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
	color: var(--text-color);
	transition: all 0.2s ease;
	position: relative;
	text-align: center;
	
	/* Add vertical centering */
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px; /* Ensure fixed minimum height */
  }
  
  .tab:hover {
	color: var(--primary-color);
  }
  
  .tab.active {
	background-color: white;
	color: var(--primary-color);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
  
  /* Scenario Content */
  .scenario_content {
	display: none;
	animation: fadeIn 0.5s ease;
  }
  
  .scenario_content.active {
	display: block;
  }
  
  @keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
  }
  
  /* Single Card Container */
  .steps_container {
	background-color: var(--card-bg);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow);
	margin-bottom: 5rem;
	overflow: hidden;
	padding: 2rem 0 0rem;
  }
  
  /* Modify step styles, remove independent card styles */
  .step_1, .step_2, .step_3, .step_4 {
	display: flex;
	flex-wrap: wrap;
	padding: 2rem 3rem 3rem;
	background-color: transparent;
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 2rem;
	position: relative;
  }
  
  /* Add downward arrow to indicate step flow */
  .step_1::after, .step_2::after, .step_3::after {
	content: "";
	position: absolute;
	bottom: -2rem;
	left: 50%;
	transform: translateX(-50%);
	background-image: url('images/chevron.down.svg');
	background-size: 2.5rem 2.5rem;
	background-repeat: no-repeat;
	background-position: center;
	width: 2.5rem;
	height: 2.5rem;
  }
  
  /* Last step doesn't show arrow */
  .steps_container .step_4:last-child::after {
	display: none;
  }
  
  .intro_text {
	flex: 3;
	min-width: 300px;
	padding-right: 2rem;
  }
  
  .intro_text h3 {
	color: var(--primary-color);
	margin-bottom: 1rem;
	font-size: 1.8rem;
  }
  
  .intro_text .descr {
	font-size: 1.1rem;
	color: var(--text-color);
	line-height: 1.7;
  }
  
  .intro_pics {
	flex: 4;
	min-width: 300px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2rem;
  }
  
  .intro_pic {
	width: 250px;
	height: 540px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: var(--pic-shadow);
	transition: transform var(--transition-speed) ease;
  }
  
  .intro_pic:hover {
	transform: translateY(-10px);
  }
  
  /* Theme Switching Section */
  .theme_section {
	text-align: center;
	margin: 5rem 0;
	padding: 3rem;
	background-color: var(--card-bg);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow);
	transition: all var(--transition-speed) ease;
  }
  
  /* Theme Style Variants */
  .theme_section.theme-vintage {
	background-color: #ffffff;
	color: #000000;
  }
  
  .theme_section.theme-vintage h2,
  .theme_section.theme-vintage p {
	color: #000000;
  }
  
  .theme_section.theme-pixelate {
	background-color: #3A3A3A;
	color: #ffffff;
  }
  
  .theme_section.theme-pixelate h2,
  .theme_section.theme-pixelate p {
	color: #ffffff;
  }
  
  .theme_section.theme-ancienttech {
	background-color: #2a2e36;
	color: #ffffff;
  }
  
  .theme_section.theme-ancienttech h2,
  .theme_section.theme-ancienttech p {
	color: #ffffff;
  }
  
  .theme_section h2 {
	margin-top: 0;
	transition: color var(--transition-speed) ease;
  }
  
  /* Ensure paragraph text follows theme changes */
  .theme_section p {
	transition: color var(--transition-speed) ease;
  }
  
  .theme_switchers {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin: 2rem 0;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
  }
  
  .theme_btn {
	flex: 1;
	min-width: 120px;
	max-width: 180px;
	padding: 0.8rem 1.5rem;
	background-color: var(--card-bg);
	border: 2px solid var(--border-color);
	border-radius: var(--border-radius);
	font-size: 1rem;
	font-weight: 600;
	color: var(--light-text);
	transition: all var(--transition-speed) ease;
	white-space: nowrap;
  }
  
  .theme_btn:hover {
	border-color: var(--primary-color);
	color: var(--primary-color);
  }
  
  .theme_btn.active {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: white;
  }
  
  .theme_preview {
	margin-top: 2rem;
	display: flex;
	justify-content: center;
	gap: 3rem;
	flex-wrap: wrap;
  }
  
  .theme_pic {
	width: 225px;
	height: 400px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: var(--shadow);
	transition: transform var(--transition-speed) ease;
  }
  
  .theme_pic:hover {
	transform: translateY(-5px);
  }
  
  /* Feature Showcase Area */
  .showcase_title_box {
	text-align: center;
	margin: 5rem 0 3rem;
  }
  
  .showcase_title_box h1 {
	color: var(--primary-color);
	margin-bottom: 1rem;
  }
  
  .showcases {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-bottom: 3rem;
  }
  
  .showcase {
	display: block;
	padding: 1.5rem;
	background-color: var(--card-bg);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow);
	transition: all var(--transition-speed) ease;
	position: relative;
  }
  
  .showcase:hover {
	transform: translateY(-5px);
	box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
  }
  
  .showcase::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1.5rem;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--primary-color);
	border-bottom: 2px solid var(--primary-color);
	transform: translateY(-50%) rotate(-45deg);
  }
  
  /* Non-clickable showcase styles */
  .showcase_non_clickable {
	cursor: default;
  }
  
  .showcase_non_clickable:hover {
	transform: none;
	box-shadow: var(--shadow);
  }
  
  .showcase_non_clickable::after {
	display: none;
  }
  
  .showcase_nochevron::after {
	display: none;
  }
  
  .showcase .icon {
	width: 50px;
	height: 50px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-bottom: 1rem;
  }
  
  .icon_checklist {
	background-color: #00C851;
	mask: url('images/checklist.checked') no-repeat center;
	mask-size: contain;
	-webkit-mask: url('images/checklist.checked.svg') no-repeat center;
	-webkit-mask-size: contain;
  }
  
  .icon_hourglass {
	background-color: #ff9700;
	mask: url('images/clock.badge.checkmark.svg') no-repeat center;
	mask-size: contain;
	-webkit-mask: url('images/clock.badge.checkmark.svg') no-repeat center;
	-webkit-mask-size: contain;
  }
  
  .icon_moon {
	background-color: #507ffb;
	mask: url('images/zzz.svg') no-repeat center;
	mask-size: contain;
	-webkit-mask: url('images/zzz.svg') no-repeat center;
	-webkit-mask-size: contain;
  }
  
  .icon_family {
	background-color: #00bcff;
	mask: url('images/figure.and.child.holdinghands.svg') no-repeat center;
	mask-size: contain;
	-webkit-mask: url('images/figure.and.child.holdinghands.svg') no-repeat center;
	-webkit-mask-size: contain;
  }
  
  .icon_app_limit {
	background-color: #f51c1c;
	mask: url('images/lock.ipad.svg') no-repeat center;
	mask-size: contain;
	-webkit-mask: url('images/lock.ipad.svg') no-repeat center;
	-webkit-mask-size: contain;
  }
  
  .icon_question {
	background-color: #a155ff;
	mask: url('images/questionmark.circle.svg') no-repeat center;
	mask-size: contain;
	-webkit-mask: url('images/questionmark.circle.svg') no-repeat center;
	-webkit-mask-size: contain;
  }
  
  .showcase h3 {
	margin-bottom: 0.5rem;
	font-size: 1.3rem;
  }
  
  .showcase p {
	color: var(--light-text);
	margin-bottom: 0;
	padding-right: 1.5rem;
  }
  
  /* Subscription Information */
  .subscription_info {
	margin: 5rem 0;
	text-align: center;
  }
  
  .plans {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
  }
  
  .plan {
	padding: 2rem;
	background-color: var(--card-bg);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow);
	flex: 1;
	min-width: 250px;
	max-width: 300px;
	transition: all var(--transition-speed) ease;
  }
  
  .plan:hover {
	transform: translateY(-5px);
  }
  
  .plan.featured {
	border: 2px solid var(--primary-color);
	transform: scale(1.05);
  }
  
  .plan.featured:hover {
	transform: translateY(-5px) scale(1.05);
  }
  
  .plan h3 {
	margin-bottom: 0.5rem;
	color: var(--primary-color);
  }
  
  .plan .price {
	font-size: 1.8rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
  }
  
  .plan .save {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	background-color: var(--accent-color);
	color: white;
	border-radius: 50px;
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 1.5rem;
  }
  
  .plan ul {
	list-style-type: none;
	text-align: left;
  }
  
  .plan ul li {
	margin-bottom: 0.8rem;
	position: relative;
	padding-left: 1.5rem;
  }
  
  .plan ul li::before {
	content: "✓";
	color: var(--primary-color);
	position: absolute;
	left: 0;
	font-weight: bold;
  }
  
  /* Footer */
  .copyright {
	text-align: center;
	margin-top: 4rem;
	padding-top: 2rem;
	color: var(--light-text);
	font-size: 0.9rem;
  }
  
  /* Pixel Style Background */
  .bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
  }
  
  .pixel_bg {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--bg-color);
	overflow: hidden;
  }
  
  .pixel_element {
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.1;
	transition: all var(--transition-speed) ease;
  }
  
  .clock {
	width: 300px;
	height: 300px;
	top: 15%;
	left: 10%;
	background-image: url('images/pixel_clock.png');
	animation: float 15s ease-in-out infinite alternate;
  }
  
  .hourglass {
	width: 250px;
	height: 250px;
	top: 60%;
	left: 85%;
	background-image: url('images/pixel_hourglass.png');
	animation: float 18s ease-in-out infinite alternate-reverse;
  }
  
  .checklist {
	width: 200px;
	height: 200px;
	top: 75%;
	left: 15%;
	background-image: url('images/pixel_checklist.png');
	animation: float 12s ease-in-out infinite alternate;
  }
  
  .trophy {
	width: 180px;
	height: 180px;
	top: 25%;
	right: 15%;
	background-image: url('images/pixel_trophy.png');
	animation: float 20s ease-in-out infinite alternate-reverse;
  }
  
  .star {
	width: 150px;
	height: 150px;
	top: 45%;
	left: 50%;
	background-image: url('images/pixel_star.png');
	animation: float 16s ease-in-out infinite alternate;
  }
  
  @keyframes float {
	0%, 100% { transform: translateY(0px); }
	50% { transform: translateY(-20px); }
  }
  
  /* Media Queries - Responsive Design */
  @media screen and (max-width: 769px) {
	html {
	  font-size: 15px;
	}
	
	.app_title {
	  margin-bottom: 1.5rem;
	}
	
	.appicon {
	  width: 90px;
	  height: 90px;
	}
	
	.appname {
	  font-size: 2rem;
	}
	
	.subtitle {
	  font-size: 1rem;
	}
	
	.app_intro {
	  font-size: 1.1rem;
	  margin-bottom: 2rem;
	}
	
	.scenario_tabs {
	  margin: 1.5rem auto 2rem;
	}
	
	.tab {
	  font-size: 14px;
	  padding: 0.6rem 1rem;
	  flex: 1;
	  text-align: center;
	  white-space: nowrap;
	  /* Disable automatic line wrapping */
	  overflow: hidden;
	  text-overflow: ellipsis;
	  min-width: 0;
	  /* Allow flex items to shrink below content size */
	}
	
	.step_1, .step_2, .step_3, .step_4 {
	  margin-bottom: 2rem;
	}
	
	.intro_text {
	  margin-bottom: 1rem;
	}
	
	.intro_pic {
	  width: 200px;
	  height: 410px;
	}
	
	.intro_pics {
	  gap: 1rem;
	}
	
	.theme_section {
	  margin: 3rem 0;
	}
	
	.theme_switchers {
	  flex-wrap: wrap;
	  gap: 0.5rem;
	  justify-content: center;
	}
	
	.theme_btn {
	  padding: 8px 12px;
	  font-size: 12px;
	  min-width: 90px;
	}
	
	.theme_pic {
	  width: 180px;
	  height: 370px;
	}
	
	.theme_preview {
	  flex-direction: column;
	  align-items: center;
	}
	
	.showcase_title_box h1 {
	  font-size: 1.8rem;
	}
	
	.showcases {
	  grid-template-columns: repeat(2, 1fr);
	}
	
	.plans {
	  flex-direction: column;
	  align-items: center;
	}
	
	.plan {
	  width: 100%;
	  max-width: none;
	  margin-bottom: 1.5rem;
	}
	
	.plan.featured {
	  transform: none;
	}
	
	.plan.featured:hover {
	  transform: translateY(-5px);
	}
	
	.clock {
	  width: 200px;
	  height: 200px;
	}
	
	.hourglass {
	  width: 180px;
	  height: 180px;
	}
	
	.checklist, .trophy, .star {
	  width: 150px;
	  height: 150px;
	}
	
	.subscription_table th:nth-child(3),
	.subscription_table td:nth-child(3) {
	  border-left-width: 2px;
	}
  }
  
  /* Additional optimization for extra small screens */
  @media screen and (max-width: 480px) {
	html {
	  font-size: 14px;
	}
	
	.main_content {
	  padding: 1rem;
	}
	
	.appicon {
	  width: 80px;
	  height: 80px;
	}
	
	.appname {
	  font-size: 1.8rem;
	}
	
	.intro_pic {
	  width: 160px;
	  height: 330px;
	}
	
	.theme_pic {
	  width: 160px;
	  height: 330px;
	}
	
	.showcases {
	  grid-template-columns: 1fr;
	}
	
	.subscription_table th:nth-child(3),
	.subscription_table td:nth-child(3) {
	  border-left-width: 1px;
	}
  }
  
  /* For medium-large screens (below 1000px) */
  @media screen and (max-width: 1000px) {
	.showcases {
	  grid-template-columns: repeat(2, 1fr);
	}
  }
  
  /* For medium screens (tablets, etc.) */
  
  /* Animation Effects */
  @keyframes fadeInUp {
	from {
	  opacity: 0;
	  transform: translateY(20px);
	}
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }
  
  .fadeInUp {
	animation: fadeInUp 0.6s ease forwards;
  }
  
  /* Image generation hint comments */
  /*
  Pixel-style images to be generated:
  1. pixel_clock.png - Pixel-style clock
  2. pixel_hourglass.png - Pixel-style hourglass
  3. pixel_checklist.png - Pixel-style task list
  4. pixel_trophy.png - Pixel-style trophy
  5. pixel_star.png - Pixel-style star
  
  These icons should use pixel art style with bright colors and remain clean and clear.
  Images should be in PNG format with transparent background for use in website background.
  */
  
  /* Subscription Table Styles */
  .subscription_table {
    width: 100%;
    max-width: 100%;
    margin: 2rem auto 0;
    border-collapse: collapse;
    text-align: center;
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
  }
  
  .subscription_table thead {
    background-color: var(--primary-color);
    color: white;
  }
  
  .subscription_table th {
    padding: 1rem 1rem;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.5px;
  }
  
  .subscription_table th:first-child {
    text-align: left;
    padding-left: 2rem;
    width: 30%;
  }
  
  .subscription_table td {
    padding: 0.8rem 0.8rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 1rem;
  }
  
  .subscription_table td:first-child {
    text-align: left;
    padding-left: 2rem;
    font-weight: 500;
  }
  
  .subscription_table tbody tr:last-child td {
    border-bottom: none;
  }
  
  .subscription_table tbody tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.02);
  }
  
  .feature-available {
    color: var(--primary-color);
    font-size: 1.4rem;
    font-weight: bold;
  }
  
  .feature-unavailable {
    color: #FF5252;
    font-size: 1.4rem;
    font-weight: bold;
  }
  
  /* Subscription Information */
  .subscription-note {
    text-align: center;
    font-size: 0.9rem;
    color: var(--light-text);
  }
  
  /* Download Button - Bottom Version */
  .ios_download_btn.bottom {
    margin: 60px auto;
  }
  
  /* Customer Support Text */
  .customer-support {
    text-align: center;
	margin-top: 10px;
	margin-bottom: 0px;
    font-size: 14px;
  }
  
  /* Responsive Styles */
  @media screen and (max-width: 769px) {
    .subscription_table {
      font-size: 0.9rem;
    }
    
    .subscription_table th, 
    .subscription_table td {
      padding: 1rem 0.5rem;
    }
    
    .subscription_table th:first-child,
    .subscription_table td:first-child {
      padding-left: 1rem;
    }
  }
  
  @media screen and (max-width: 480px) {
    .subscription_table {
      font-size: 0.8rem;
    }
    
    .subscription_table th, 
    .subscription_table td {
      padding: 0.8rem 0.4rem;
    }
    
    .feature-available,
    .feature-unavailable {
      font-size: 1.2rem;
    }
  }
  
  /* Add column separator for table */
  .subscription_table th,
  .subscription_table td {
    border-right: 1px solid var(--border-color);
  }
  
  /* Last column doesn't need right border */
  .subscription_table th:last-child,
  .subscription_table td:last-child {
    border-right: none;
  }
  
  /* Separator line between free and annual subscription */
  .subscription_table th:nth-child(3),
  .subscription_table td:nth-child(3) {
    border-left: 1px solid var(--border-color);
  }
  
  .showcase_ellipsis {
	display: flex;
	align-items: center;
	justify-content: center;
  }
  
  .showcase_ellipsis .ellipsis {
	font-size: 4rem;
	color: var(--light-text);
  }

  .language-switcher {
	position: absolute;
	display: inline-block;
	cursor: pointer;
	z-index: 999;
	top: 20px;
	right: 20px;
}

.language-switcher .selected-language {
  padding: 8px 16px 6px;
  border: 1px solid #999;
  border-radius: 4px;
}

.language-switcher .selected-language::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 22px;
  margin-right: 8px;
  vertical-align: middle;
  background-image: url("images/globe.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

.language-switcher .selected-language::after {
  content: '';
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  border-top: 4px solid #000;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.language-switcher .language-list {
  display: none;
  right: 0px;
  position: absolute;
  padding: 15px 10px;
  background-color: rgba(255, 255, 255, 0.95);
  width: calc(100vw - 60px);
  max-width: 400px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
  z-index: 1;
  column-count: 3;
  border-radius: 5px;
}

.language-switcher .language-list.show {
	display: flex;
	flex-wrap: wrap;
}

.language-switcher .language-list a {
	flex: 0 0 28%;
	padding: 10px 5px;
	font-size: 13px;
	border-radius: 4px;
	text-decoration: none;
	color: #000;
}

.language-switcher .language-list a:hover {
	background-color: rgba(90, 90, 255, 0.2);
	border-radius: 5px;
}