/* The following section is a copy from colors.css */

/* Global CSS Variables */
:root {
  /* Typography */
  --font-primary: 'Dongle', sans-serif;
  --font-size-base: 24px;
  --line-height-base: 0.9;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  
  /* Typography scale (Dongle requires larger sizes) */
  --font-size-sm: 20px;
  --font-size-md: 24px;
  --font-size-lg: 30px;
  --font-size-xl: 36px;
  --font-size-xxl: 42px;
  --font-size-display: 52px;
  
  /* Adjustments for heading line heights (Dongle needs tighter line height) */
  --line-height-heading: 1.15;
  
  /* Brand colors for nav/footer that remain consistent */
  --brand-primary: #3DA695;
  --brand-primary-rgb: 61, 166, 149;
  --brand-primary-hover: #2f8a7a;
  
  /* Card colors */
  --card-purple: #8C7CF7;
  --card-purple-rgb: 140, 124, 247;
  --card-orange: #F26D42;
  --card-orange-rgb: 242, 109, 66;
  --card-blue: #41A4F5;
  --card-blue-rgb: 65, 164, 245;
  --card-gold: #F2CA60;
  --card-gold-rgb: 242, 202, 96;
  
  /* Generate hover colors (slightly darker) */
  --card-purple-hover: #7b6be0;
  --card-orange-hover: #e55a2d;
  --card-blue-hover: #2a92eb;
  --card-gold-hover: #e6be4b;
  
  /* Tint versions with 10% opacity */
  --brand-primary-tint: rgba(61, 166, 149, 0.1);
  --card-purple-tint: rgba(140, 124, 247, 0.1);
  --card-orange-tint: rgba(242, 109, 66, 0.1);
  --card-blue-tint: rgba(65, 164, 245, 0.1);
  --card-gold-tint: rgba(242, 202, 96, 0.1);
  
  /* Hover tint versions */
  --brand-primary-hover-tint: rgba(47, 138, 122, 0.1);
  --card-purple-hover-tint: rgba(123, 107, 224, 0.1);
  --card-orange-hover-tint: rgba(229, 90, 45, 0.1);
  --card-blue-hover-tint: rgba(42, 146, 235, 0.1);
  --card-gold-hover-tint: rgba(230, 190, 75, 0.1);
  
  /* Default content settings (will be overridden by theme classes) */
  --content-primary: var(--brand-primary);
  --content-primary-rgb: var(--brand-primary-rgb);
  --content-primary-hover: var(--brand-primary-hover);
  --content-text-color: white;
  --content-primary-tint: var(--brand-primary-tint);
  --content-primary-hover-tint: var(--brand-primary-hover-tint);
  
  /* Bootstrap variables */
  --bs-primary: var(--content-primary);
  --bs-primary-rgb: var(--content-primary-rgb);
  --bs-primary-hover: var(--content-primary-hover);
  --bs-primary-tint: rgba(var(--bs-primary-rgb), 0.1);
  --bs-primary-hover-tint: rgba(var(--bs-primary-rgb), 0.1);
  
  /* Font spacing - adjusted for Dongle */
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.01em;
  
  /* Text and UI colors */
  --text-dark: #212529;
  --text-body: #333;
  --text-muted: #6c757d;
  
  /* Tint versions of text colors */
  --text-dark-tint: rgba(33, 37, 41, 0.1);
  --text-body-tint: rgba(51, 51, 51, 0.1);
  --text-muted-tint: rgba(108, 117, 125, 0.1);
  
  /* Background colors */
  --bg-white: #ffffff;
  --bg-light: #f8f9fa;
  
  /* Tint versions of background colors */
  --bg-white-tint: rgba(255, 255, 255, 0.1);
  --bg-light-tint: rgba(248, 249, 250, 0.1);
  
  /* White opacity variants */
  --white-10: rgba(255, 255, 255, 0.1);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-30: rgba(255, 255, 255, 0.3);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-80: rgba(255, 255, 255, 0.8);
  --white-90: rgba(255, 255, 255, 0.9);
  
  /* Black opacity variants */
  --black-05: rgba(0, 0, 0, 0.05);
  --black-10: rgba(0, 0, 0, 0.1);
  
  /* Border colors */
  --bs-border-light: #e9ecef;
  --bs-border-light-tint: rgba(233, 236, 239, 0.1);
  
  /* Navigation text colors */
  --nav-text-color: black;
  --nav-text-hover-bg: var(--black-10);
  --nav-btn-border: black;
  --nav-text-color-tint: rgba(0, 0, 0, 0.1);
  --nav-btn-border-tint: rgba(0, 0, 0, 0.1);
}

/* This is the end of the copy from colors.css */

/* Use the colors.css for inital-value */
@property --onpoint-green {
  syntax: "<color>";
  inherits: false;
  initial-value: var(--brand-primary);
}

body {
  font-family: Comfortaa;
  /* padding: 0 81px; */
}

/* a Tag Styles */
a {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
}

li a {
  color: #000;
}


/* Universal Class Styles */

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-container {
  padding: 50px 0;
  margin: 0 6%;
}

.flex-box-image {
  width: 55%;
}

.flex-box-text {
  width: 45%;
}

.curved-tops {
  border-radius: 70px 70px 0px 0px;
}

.screen {
  max-width: 1280px;
  margin: auto;
}

/* Header Styles */
header {
  display: flex;
  justify-content: space-between;
  /* width: 100%; */
  /* height: 116px; */
  padding: 0 81px; 
}

.header-logo {
  width: 183px;
  height: 54px;
  margin: auto 0;
}

.nav-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-item {
  margin: auto 22px;
  font-size: 15px;
  font-weight: 700;
}

.button-box {
  display: flex;
  align-items: center;
  width: 245px;
  justify-content: space-between;
}

/*  HERO STYLES */

.hero-section {
  background: linear-gradient(197deg, #FFF 40.54%, var(--Light-Gray, #EFF1F5) 86.31%);
}

.hero-title {
  /* font-size: 62px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -3.24px;
  margin: 0; */
  font-size: 57px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 57px */
  letter-spacing: -2.28px;
  margin: 0;
  }

.hero-text {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 27px */
  letter-spacing: -0.36px;

  margin: 27px 0 40px 0;
}

.hero-button-box {
  width: 385px;
  justify-content: space-between;
}

.hero-image {
  width: 401px;
  height: 258px;
}

/* DISCOVERY STYLES: Choose to learn *****************/

.discovery-section {
  /* background: #EFF1F5 */
  background: linear-gradient(to right, #EFF1F5 40.54%, #F8F9FB 86.31%);
}

.discovery-background {
  background: #fff;
}

.discovery-one-title {
  /* font-size: 42px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.4px;
  font-family: Comfortaa; */
  font-size: 34px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.34px;
}

.discovery-list {
  justify-content: space-between;
  padding: 0;
}

.discovery-list-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 27px 19px;
  text-align: center;
  width: 218px;
  height: 409px;
  flex-shrink: 0;
  border-radius: 30px;
  transition: transform 0.2s, box-shadow 0.2s, border 0.2s;
  border: 2.7px solid transparent;
  transform: translateY(-4.5px); /* 90% of 5px */
  box-shadow: 0 4.5px 13.5px rgba(0, 0, 0, 0.1); /* 90% of 5px 15px */
}

/* use colors.css values */
.background-watch:hover {
   border: 2.7px solid var(--card-purple); 
}
.background-watch {
  background: var(--card-purple-tint);
}

.background-chat:hover {
   border: 2.7px solid var(--card-orange); 
}
.background-chat {
  background: var(--card-orange-tint);
}

.background-practice:hover {
   border: 2.7px solid var(--card-blue); 
}
.background-practice {
  background: var(--card-blue-tint);
}

.background-read:hover {
    border: 2.7px solid var(--card-gold);
}
.background-read {
  background: var(--card-gold-tint);
}

.discovery-list-image {
  width: 206px;
  height: 153px;
}

.discovery-list-item-title {
  width: 100%;
  text-align: center;
  font-size: 33px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  height: 60px;
  margin: 13px 0;
}

.discovery-list-text {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150.3%;
  text-align: center;
}

/* use colors.css value */
.watch {
  color: var(--card-purple);
}
.chat {
  color: var(--card-orange);
}
.practice {
  color: var(--card-blue);
}
.read {
  color: var(--card-gold);
}

.discovery-list-item > div > button > a { 
  color: #fff;
}

/* values from colors.css */
button.watch {
  border: none;
  background: var(--card-purple);
}

button.chat {
  border: none;
  background: var(--card-orange);
}

button.practice {
  border: none;
  background: var(--card-blue);
}

button.read {
  border: none;
  background: var(--card-gold);
}

/* MISSION SECTION STYLES ************************ */

.mission-section {
  background: #fff;
  color: #FFF;
  /* max-height: 419px; */
}

.mission-background {
  background: var(--brand-primary);
}

.mission-section-container {

  padding: 0;
  padding-top: 40px;
}

.mission-text-container {
  margin-left: 60px;
}

.mission-title {
  font-family: Comfortaa;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 40px */
  letter-spacing: -0.4px;
}

.mission-text {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 27px */
  letter-spacing: -0.36px;
  max-width: 439px;
}

.mission-image {
  width: 609px;
  height: 392px;
  margin-bottom: -4px;
}


/* SOCRATIC JOURNEY SECTION STYLES ************************ */

.journey-section {
  background: linear-gradient(197deg, #FFF 40.54%, var(--Light-Gray, #EFF1F5) 86.31%);
}

.journey-title {
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 40px */
  letter-spacing: -0.4px;
}

.journey-text {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 27px */
  letter-spacing: -0.36px;
}

.journey-image {
  width: 559px;
  height: 353px;
  margin-left: 68px;
}

/* TOOLS SECTION STYLES ************************ */

.tools-section {
  background: var(--Light-Gray, #E7ECEC);
}

.tools-section-container {
  padding-bottom: 0;
}

.tools-title {
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 40px */
  letter-spacing: -0.4px;
  margin: 0 0 20px 0;
}

.tools-text {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 27px */
  letter-spacing: -0.36px;
}

.tools-icon-list {
  justify-content: space-between;
  padding: 0;
}

.tools-icon-list-item {
  text-align: center;
}

.tools-icon-circle {
  width: 94px;
  height: 94px;
  border-radius: 90px;
  text-align: center;
}

.tools-icon-circle.watch {
  background-color: #9086F6;
}
.tools-icon-circle.chat {
  background-color: #FF5F1F;
}
.tools-icon-circle.practice {
  background-color: #00AEF3;
}
.tools-icon-circle.read {
  background-color: #FFB636;
}

.tools-icon {
  width: 46.52px;
  height: 38px;
  text-align: center;
}

.tools-icon-title {
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}

.tools-image {
  height: 486px;
  width: 566px;
  margin-bottom: -4px;
}


/* CTA SECTION STYLES  *******************/

.cta-section {
  background: linear-gradient(to right, #EFF1F5 40.54%, #F8F9FB 86.31%);
}

.cta-background {
  background: #fff;
}

.cta-title {
  font-size: 61px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 61px */
  letter-spacing: -2.44px;
  margin: 0;
}

.cta-text {
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 30px */
  letter-spacing: -0.6px;
  margin: 40px 0;
  max-width: 517px;
}


/* FOOTER STYLES  *******************/
footer {
  background-color: var(--brand-primary);
  max-height: 200px;
  padding: 30px 80px 10px 80px;
}
.footer-container {
  justify-content: space-between;
}

.footer-logo-section {
  width: 30%;
}
.footer-info-section {
  width: 20%;
}
.footer-links-section {
  width: 20%;
}
.footer-support-section {
  width: 20%;
}

.footer-list {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  height: 100%;
  text-align: left;
}

.footer-list-title {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin: 0 0 5px 0;
}

.footer-list-item {
  margin: 8px 0;
  color: #FFF;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 120.3%; /* 15.639px */
}


.footer-list-item a {
  color: #FFF;
}

.footer-icon-container {
  display: flex;
  align-items: center;
}

.footer-icon {
  margin-right: 4px;
}

.footer-logo {
  width: 183px;
  height: 54px;
  margin-bottom: 24px;
}

.copyright {
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0;
}

/* BUTTON STYLES  *******************/

button {
  width: 180px;
  height: 50px;
  padding: 10px 15px;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  /* line-height: 24px; */
  border-radius: 30px;
  font-size: 14px;
}

button a {
  font-family: Comfortaa;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  /* line-height: 24px; */
}

button.special a {
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  margin: none;
}

button.special {
  display: flex;
  width: 116px;
  height: 29px;
  padding: 10px 15px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

button:hover {
  cursor:pointer;
}

button:active {
  opacity: 0.3;
}

button.primary a {
  color: #fff;
}

button.primary {
  background: var(--brand-primary);
  text-align: center;
  border: none;
}

button.secondary a {
  color: var(--brand-primary);
}

button.secondary  {
  border: 2.5px solid var(--brand-primary);
  background: #fff;
}