:root {
  --color-white: #ffffff;
  --color-white-80: #FFFFFFCC;
  --color-white-bg: #f5f5f5;
  --color-grey: #F1F1F1;
  --color-grey-dark: #C6C6C6;
  --color-placeholder: #949091;
  --color-black: #000000;
  --color-black-light: #00000088;
  --color-primary: #DB1C97;
  --color-primary-light: #ff0099;
  --color-secondary-light: #1C3454;
  --color-secondary: #180044;
  --color-secondary-dark: #0D2640;
  --color-purple-light: #A850F4;
  --color-purple-lighter: #C396F9;
  --color-purple: #7F30CC;

  --gradient-purple: linear-gradient(to right,#4b2281 0%,#170343 100%);
  --gradient-pink: linear-gradient(to right,#7F0B56 0%,#47012E 100%);

  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  --section-base-padding: 20px;
  --section-inline-padding: 20px;
  --section-block-padding: 32px;

  --content-large-max-width: 1920px;
  --content-max-width: 1600px;
  --content-small-max-width: 980px;

  --breakpoint-xs: 480px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 991px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1536px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: 400px;
}

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

b {
  font-weight: var(--font-weight-medium);
}

input[type="radio"] {
  accent-color: var(--color-primary);
}

.no-scroll {
  position: fixed;
  width: 100%;
  overflow: hidden;
  height: 100vh; 
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 40px;
  border-radius: 20px;
  /* font-family: 'Rubik', sans-serif; */
  font-size: 16px;
  border: none;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.button span {
  font-size: 16px;
}

.button--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.button--primary:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
  cursor: pointer;
}

.button--primaryOutline {
  color: var(--color-primary);
  background-color: var(--color-white);
  border: 1px solid var(--color-primary);
}

.button--primaryOutline:hover {
  color: var(--color-white);
  background-color: var(--color-primary);
  cursor: pointer;
}

.button--primaryOutline.blackOutline {
  color: var(--color-black);
  background-color: transparent;
  border: 1px solid var(--color-black);
}

.button--primaryOutline.blackOutline:hover {
  color: var(--color-white);
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  cursor: pointer;
}

.button--secondary {
  background-color: var(--color-purple-light);
  color: var(--color-white);
}

.button--secondary:hover {
  background-color: var(--color-white);
  color: var(--color-purple-light);
  cursor: pointer;
}

.button--secondaryOutline {
  color: var(--color-purple-light);
  background-color: var(--color-white);
  border: 1px solid var(--color-purple-light);
}

.button--secondaryOutline:hover {
  color: var(--color-white);
  background-color: var(--color-purple-light);
  border: 1px solid var(--color-purple-light);
  cursor: pointer;
}

.button--tertiary {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.button--tertiary:hover {
  background-color: var(--color-white);
  color: var(--color-secondary);
  cursor: pointer;
}

.button--tertiaryOutline {
  color: var(--color-secondary);
  background-color: var(--color-white);
  border: 1px solid var(--color-secondary);
}

.button--tertiaryOutline:hover {
  color: var(--color-white);
  background-color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
  cursor: pointer;
}

.button--transparentOutline {
  color: var(--color-white);
  background-color: transparent;
  border: 1px solid var(--color-white);
}

.button--transparentOutline:hover {
  color: var(--color-white);
  background-color: var(--color-purple-light);
  border: 1px solid var(--color-purple-light);
  cursor: pointer;
}

.button--secondaryTransparentOutline {
  color: var(--color-white);
  background-color: transparent;
  border: 1px solid var(--color-white);
}

.button--secondaryTransparentOutline:hover {
  color: var(--color-white);
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  cursor: pointer;
}

.buttonLink,
.buttonLink > button {
  color: var(--color-black);
  width: 100%;
  text-decoration: none;
}

.buttonLink > button.button--transparentOutline,
.buttonLink > button.button--secondaryTransparentOutline {
  color: var(--color-white);
}

.button img {
  display: block;
  transform: rotate(-45deg);
}

.button--primary img {
  content: url("/assets/svgs/arrow-right-white.svg");
}

.button--primary:hover img {
  content: url("/assets/svgs/arrow-right-pink.svg");
}

.button--primaryOutline img {
  content: url("/assets/svgs/arrow-right-pink.svg");
}

.button--primaryOutline:hover img {
  content: url("/assets/svgs/arrow-right-white.svg");
}

.button--primaryOutline.blackOutline img {
  content: url("/assets/svgs/arrow-right-black.svg");
}

.button--primaryOutline.blackOutline:hover img {
  content: url("/assets/svgs/arrow-right-white.svg");
}

.button--secondary img {
  content: url("/assets/svgs/arrow-right-white.svg");
}

.button--secondary:hover img {
  content: url("/assets/svgs/arrow-right-purple.svg");
}

.button--secondaryOutline img {
  content: url("/assets/svgs/arrow-right-purple.svg");
}

.button--secondaryOutline:hover img {
  content: url("/assets/svgs/arrow-right-white.svg");
}

.button--link {
  text-decoration: none;
}

.carousel__button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border: none;
  color: var(--color-white);
  background-color: var(--color-primary);
  z-index: 2;
}

.carousel__button__icon {
  display: block;
  width: 14px;
  height: 14px;
}

.carousel__button.disabled {
  color: var(--color-black);
  background-color: var(--color-placeholder);
}

.largeTitle {
  font-size: 36px;
  letter-spacing: -0.02em;
}

.title {
  font-size: 30px;
}

.smallTitle {
  font-size: 24px;
}

.largeHeading {
  font-size: 20px;
}

.heading {
  font-size: 18px;
}

.largeText {
  font-size: 16px;
}

.semilargeText {
  font-size: 16px;
}

.text {
  font-size: 16px;
}

.smallText {
  font-size: 14px;
}

@media (min-width: 576px) {
  :root {
    --section-inline-padding: 32px;
    --section-block-padding: 32px;
  }

  .buttonLink,
  .buttonLink > button {
    width: initial;
  }

  .carousel__button {
    width: 72px;
    height: 72px;
    font-size: 24px;
  }

  .carousel__button__icon {
    width: 20px;
    height: 20px;
  }
}

@media (min-width: 768px) {
  :root {
    --section-inline-padding: 64px;
    --section-block-padding: 64px;
  }

  .largeTitle {
    font-size: 36px;
  }

  .title {
    font-size: 30px;
  }

  .smallTitle {
    font-size: 24px;
  }

  .largeHeading {
    font-size: 20px;
  }

  .heading {
    font-size: 18px;
  }

  .largeText {
    font-size: 16px;
  }
}

@media (min-width: 991px) {
  :root {
    --section-inline-padding: 96px;
    --section-block-padding: 96px;
  }

  html {
    scroll-padding-top: 110px;
  }

  .button {
    padding: 16px 40px;
    font-size: 18px;
    border-radius: 30px;
  }

  .button span {
    font-size: 18px;
  }

  .largeTitle {
    font-size: 40px;
  }

  .title {
    font-size: 32px;
  }

  .smallTitle {
    font-size: 28px;
  }

  .largeHeading {
    font-size: 24px;
  }

  .heading {
    font-size: 20px;
  }

  .largeText {
    font-size: 18px;
  }
}

@media (min-width: 1200px) {
  .largeTitle {
    font-size: 48px;
  }

  .title {
    font-size: 40px;
  }

  .smallTitle {
    font-size: 36px;
  }

  .largeHeading {
    font-size: 28px;
  }

  .heading {
    font-size: 24px;
  }

  .largeText {
    font-size: 22px;
  }

  .semilargeText {
    font-size: 18px;
  }
}

@media (min-width: 1536px) {
  .largeTitle {
    font-size: 64px;
  }

  .title {
    font-size: 50px;
  }

  .smallTitle {
    font-size: 40px;
  }

  .largeHeading {
    font-size: 32px;
  }

  .heading {
    font-size: 30px;
  }

  .largeText {
    font-size: 24px;
  }

  .semilargeText {
    font-size: 22px;
  }
}