@font-face{
   font-family:'Lato';
   src:url('../fonts/LatoLatin-Regular.woff2');
   font-weight:400;
   font-style:normal;
}
@font-face{
   font-family:'Lato';
   src:url('../fonts/LatoLatin-Bold.woff2');
   font-weight:600;
   font-style:bold;
}
@font-face{
   font-family:'Lato';
   src:url('../fonts/LatoLatin-Heavy.woff2');
   font-weight:900;
   font-style:bold;
}
@font-face{
   font-family:'Lato';
   src:url('../fonts/LatoLatin-Italic.woff2');
   font-weight:normal;
   font-style:italic;
}

body, *{
  margin:0;
  padding:0;
  font-family: "Lato", sans-serif;
  color:#2F2F2F;
  scroll-behavior: smooth;
}

body{
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.section-container{
  width:1640px;
  max-width:90%;
  margin:120px auto;
}

.full-width-section {
  width: calc(100% - 8px); /* Full width */
  margin: 0 4px; /* Margin around the section */
  border-radius: 7px; /* Rounded corners */
  background-color: #F3EFFF; /* Light background color */
}

/* Mark Element */
.text--marked {
  background-color: #f7f6fa;
  padding: 3px;
  border-radius: 5px;
}

.section {
  padding: 0;
}

/* Typography Block */
.heading--primary {
  font-size: 4em;
  line-height: 1.1em;
  margin-bottom: 25px;
}

.heading--secondary {
  font-size: 3.5em;
  text-align: center;
  line-height: 1.1em;
  margin-bottom: 30px;
}

.heading--tertiary {
  font-size: 1.875em;
}

.heading--quaternary {
  font-size: 1.25em;
}

.text--paragraph {
  font-size: 1.05em;
  line-height: 172%;
}

.text--subtext {
  width: 100%;
  max-width: 820px;
  font-size:1.25rem;
  line-height:172%;
  text-align: center;
  color:#666;
  margin: 0 auto 60px auto;
}

.heading--highlight {
  font-size: 1em;
  color: #17181D;
  letter-spacing: 2px;
  font-weight: 900;
  text-align: center;
  font-variant: small-caps;
  margin:0 auto 12px auto;
  border-radius:360px;
  border:2px solid #17181D;
  width: fit-content;
  padding:4px 12px;
}

.text--highlight {
  color: #7851E8;
}

.text--tiny {
  font-size: 0.8em;
}

/* Bold Text */
.text--bold {
  font-weight: 900;
}

/* Tooltip Block */
.tooltip {
  position: relative;
  display: inline-block;
  font-weight: bold;
  color: #7851E8;
}

.tooltip__content {
  opacity: 0;
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -75px;
  background-color: #F8CF3E;
  color: #1a1a1a;
  text-align: center;
  border-radius: 3px;
  padding: 5px 15px;
  transition: 0.2s all ease-out;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltip__content {
  opacity: 1;
}

.tooltip__content::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #F8CF3E transparent transparent transparent;
}

/* Buttons */
.button {
  padding: 15px 50px;
  border-radius: 60px;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 1em;
  font-weight: 600;
  background: transparent;
  transition: all 0.3s ease-out;
  transform: translateY(0);
}

.button--primary {
  color: #fff;
  background: #7851E8;
  border-color: #7851E8;
  transition: all 0.3s ease-out;
}

.button--light {
  background: transparent;
  border-color: #F3EFFF;
  color: #F3EFFF;
}

.button--dark {
  background: transparent;
  border-color:#17181D;
  color: #17181D;
}

.button--primary:hover,
.button--light:hover,
.button--dark:hover {
  transform: translateY(-1px);
}

.button--center {
  display: flex;
  margin: 24px auto 0 auto;
}

.button--primary:hover {
  background: #6a42cc;
}

.button--light:hover {
  border-color: #F8CF3E;
  color: #F8CF3E;
}

.button--dark:hover {
  border-color: #7851E8;
  color: #7851E8;
}