:root {
  /** colors **/
  --primary: #0C1BA1;
  --primary-hover: #24c8ffcf;
  --text-white: #efefef;
  --text-dark: #053444;
  /* --primary: #24c9ff;
  --primary-hover: #24c8ffcf;
  --text-white: #efefef;
  --text-dark: #053444; */

  --bg: #e0f8ff;
  --bg-gradient:
    radial-gradient(at 91% 6%, #0C1BA121 0px, transparent 50%),
    radial-gradient(at 13% 15%, #0C1BA159 0px, transparent 50%),
    radial-gradient(at 65% 63%, #0C1BA11f 0px, transparent 50%),
    radial-gradient(at 72% 84%, #0C1BA182 0px, transparent 50%),
    radial-gradient(at 24% 85%, #0C1BA10d 0px, transparent 50%),
    radial-gradient(at 31% 53%, #0C1BA136 0px, transparent 50%),
    radial-gradient(at 82% 33%, #ffffff 0px, transparent 50%);

  /** fonts **/
  --font-xxs: 10px;
  --font-xs: 12px;
  --font-sm: 14px;
  --font-md: 16px;
  --font-lg: 20px;
  --font-xl: 24px;
  --font-xxl: 30px;
  --font-xxxl: 40px;
  --font-xxxxl: 60px;
  --font-xxxxxl: 100px;
  --font-xxxxxxl: 150px;

  /* box shadow */
  --bs: 0px 21px 40px -15px #616161a3;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('../assets/fonts/Helvetica Neue 55 Roman.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('../assets/fonts/Helvetica Neue 75 Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('../assets/fonts/Helvetica Neue 55 Roman.otf') format('opentype');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('../assets/fonts/Helvetica Neue 75 Bold.otf') format('opentype');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

html,
body,
main {
  max-width: 100vw;
  overflow-x: hidden;
  background-color: var(--bg);
  background-image: var(--bg-gradient)
}

body {
  color: var(--text-dark);
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  display: flex;
  flex-direction: column;
}

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

p {
  line-height: 1.5;
}

.cta-button {
  background: none;
  padding: 12px 32px;
  cursor: pointer;
  transition: 0.4s;
  text-decoration: none;
  border-radius: 20px;
  background-color: var(--primary);
  width: fit-content;
  color: var(--text-white);
  font-weight: 600;
  border: none;
}
.cta-button:hover {
  background-color: var(--primary-hover);
}

.divider {
  background-color: #fff;
  height: 10px;
  width: 100vw;
}