:root {
  --background: #031d2e;
  --font-family: "SF Pro Display", sans-serif;
  --white-80: #fffc;
  --size-18: 18px;
  --size-26: 26px;
  --size-10: 10px;
  --size-16: 16px;
  --background-header: #4a63d6;
  --white-100: #fff;
  --size-14: 14px;
  --size-24: 24px;
  --size-12: 12px;
  --size-4: 4px;
  --background-header-cta: #f5b945;
  --black-100: black;
  --size-52: 52px;
  --size-64: 64px;
  --size-128: 128px;
  --size-0: 0px;
  --size-40: 40px;
  --background-navigation: #0b2953;
  --size-220: 220px;
  --size-160: 160px;
  --size-20: 20px;
  --size-28: 28px;
  --primary-light: #33b9de;
  --size-6: 6px;
  --primary-light-2: #1184d1;
  --size-72: 72px;
  --size-30: 30px;
  --size-56: 56px;
  --size-48: 48px;
  --size-32: 32px;
  --size-44: 44px;
  --size-350: 350px;
  --primary: #1d4cb3;
  --box-shadow: #33b9de3d;
  --box-shadow-hover: #21d1ff;
  --size-80: 80px;
  --background-container: #08263c;
  --size-720: 720px;
  --size-500: 500px;
  --size-380: 380px;
  --size-320: 320px;
  --size-460: 460px;
  --size-34: 34px;
  --size-530: 530px;
  --size-480: 480px;
  --size-440: 440px;
  --size-240: 240px;
  --size-8: 8px;
  --card-shadow: #33b9de66;
  --size-560: 560px;
  --background-psychics-topic: #77e0fc;
  --size-22: 22px;
  --psychics-busy: #f64668;
  --psychics-online: #20e2bf;
  --text-description: #b3b3b3;
  --background-footer: #08273c;
  --size-2: 2px;
  --size-36: 36px;
  --size-38: 38px;
  --size-42: 42px;
  --size-46: 46px;
  --size-50: 50px;
  --size-54: 54px;
  --size-58: 58px;
  --size-60: 60px;
  --size-62: 62px;
  --size-66: 66px;
  --size-68: 68px;
  --size-70: 70px;
  --white-101: white;
  --black-101: black;
  --size-360: 360px;
  --size-100: 100px;
}

.body {
  background-color: var(--background);
  font-family: var(--font-family);
  color: var(--white-80);
  font-size: var(--size-18);
  line-height: var(--size-26);
  text-align: left;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  font-weight: 400;
}

.header_offer {
  z-index: 9999;
  padding: var(--size-10) var(--size-16);
  grid-column-gap: var(--size-10);
  grid-row-gap: var(--size-10);
  background-color: var(--background-header);
  color: var(--white-100);
  font-size: var(--size-14);
  line-height: var(--size-24);
  text-align: left;
  text-transform: uppercase;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-weight: 700;
  display: flex;
  position: fixed;
  inset: 0% 0% auto;
}

.header_offer_icon {
  width: var(--size-24);
  height: var(--size-24);
  flex: none;
}

.cta_header {
  padding: var(--size-4) var(--size-24);
  border-radius: var(--size-4);
  background-color: var(--background-header-cta);
  color: var(--black-100);
  font-size: var(--size-14);
  line-height: var(--size-24);
  text-align: center;
  text-transform: capitalize;
  cursor: pointer;
  flex: none;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  text-decoration: none;
  display: flex;
}

.navbar {
  z-index: 9998;
  margin-top: var(--size-52);
  padding: var(--size-16) var(--size-64);
  background-color: #0000;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.navbar_container {
  grid-column-gap: var(--size-16);
  grid-row-gap: var(--size-16);
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  display: flex;
}

.navbar_logo {
  max-width: var(--size-220);
  min-width: var(--size-128);
  width: 100%;
}

.navbar_logo.w--current {
  padding: var(--size-0);
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.navbar_menu {
  grid-column-gap: var(--size-40);
  grid-row-gap: var(--size-40);
  flex-flow: row;
  justify-content: center;
  align-items: center;
  display: flex;
}

.navbar_link {
  padding: var(--size-0);
  color: var(--white-100);
  font-size: var(--size-20);
  line-height: var(--size-28);
  text-align: center;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
}

.navbar_login {
  padding: var(--size-4) var(--size-12);
  grid-column-gap: var(--size-18);
  grid-row-gap: var(--size-18);
  color: var(--primary-light);
  font-size: var(--size-16);
  line-height: var(--size-24);
  text-align: left;
  text-transform: capitalize;
  flex-flow: row;
  flex: none;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  text-decoration: none;
  display: flex;
}

.navbar_menu_button {
  display: none;
}

.hero_section {
  background-image: url('../images/hero-section-background.png'), linear-gradient(151deg, var(--background), var(--primary-light-2));
  background-position: 50%, 0 0;
  background-repeat: no-repeat, repeat;
  background-size: cover, auto;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  display: flex;
  position: relative;
  overflow: hidden;
}

.hero_container {
  z-index: 9;
  padding-top: var(--size-72);
  padding-right: var(--size-64);
  padding-left: var(--size-64);
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.hero_cards {
  z-index: 2;
  width: 100%;
  max-width: 100%;
  margin: auto auto 0;
  padding-top: 16px;
  position: relative;
}

.hero_innercontainer {
  grid-column-gap: var(--size-24);
  grid-row-gap: var(--size-24);
  color: var(--white-100);
  font-size: var(--size-20);
  line-height: var(--size-30);
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 824px;
  font-weight: 400;
  display: flex;
}

.hero_h1 {
  color: var(--white-100);
  font-size: var(--size-56);
  line-height: var(--size-72);
  text-align: center;
  width: 100%;
  margin: 0;
  font-weight: 600;
}

.hero_withcta {
  z-index: 9;
  grid-column-gap: var(--size-64);
  grid-row-gap: var(--size-64);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}

.cta_main {
  max-width: var(--size-350);
  padding: var(--size-16) var(--size-32);
  border-radius: var(--size-32);
  background-image: linear-gradient(57deg, var(--primary) 14%, var(--primary-light) 85%);
  box-shadow: var(--size-0) var(--size-0) var(--size-16) var(--size-0) var(--box-shadow);
  color: var(--white-100);
  font-size: var(--size-20);
  line-height: var(--size-28);
  text-align: center;
  text-transform: capitalize;
  cursor: pointer;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-weight: 700;
  text-decoration: none;
  transition: all .3s ease-out;
  display: flex;
}

.cta_main:hover {
  box-shadow: var(--size-4) var(--size-4) var(--size-16) var(--size-0) var(--box-shadow-hover);
}

.cta_main_arrow {
  width: var(--size-24);
  height: var(--size-24);
  flex: none;
}

.hero_spinner_top {
  z-index: 1;
  max-width: 400px;
  position: absolute;
  inset: -128px auto auto -56px;
  transform: rotate(-15deg);
}

.hero_spinner_top.psychics {
  left: auto;
  right: -56px;
}

.hero_spinner_bottom {
  z-index: 1;
  max-width: 400px;
  position: absolute;
  inset: auto -56px -180px auto;
  transform: rotate(-27deg);
}

.separator {
  width: 100%;
}

.main_wrapper {
  padding: var(--size-80) var(--size-64);
  grid-column-gap: var(--size-80);
  grid-row-gap: var(--size-80);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.main_container {
  padding: var(--size-64) var(--size-40);
  grid-column-gap: var(--size-24);
  grid-row-gap: var(--size-24);
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1184px;
  display: flex;
}

.main_container.with_background {
  padding: var(--size-48);
  grid-column-gap: var(--size-48);
  grid-row-gap: var(--size-48);
  border-radius: var(--size-16);
  background-color: var(--background-container);
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.main_container.psychics {
  z-index: 3;
  padding: var(--size-0);
  grid-column-gap: var(--size-64);
  grid-row-gap: var(--size-64);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

.main_container.faq {
  max-width: var(--size-720);
  padding: var(--size-0);
  grid-column-gap: var(--size-24);
  grid-row-gap: var(--size-24);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
}

.main_contentwrapper {
  max-width: var(--size-500);
  min-width: var(--size-380);
  grid-column-gap: var(--size-12);
  grid-row-gap: var(--size-12);
  color: var(--white-80);
  font-size: var(--size-18);
  line-height: var(--size-26);
  text-align: left;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  font-weight: 400;
  display: flex;
}

.main_contentwrapper.horoscope {
  min-width: var(--size-320);
  grid-column-gap: var(--size-24);
  grid-row-gap: var(--size-24);
}

.main_h2 {
  max-width: var(--size-460);
  color: var(--primary-light-2);
  font-size: var(--size-32);
  line-height: var(--size-44);
  text-align: left;
  text-transform: capitalize;
  width: 100%;
  margin: 0;
  font-weight: 700;
}

.main_h2.topics_heading {
  max-width: var(--size-530);
  text-align: center;
}

.main_h2_gradient {
  background-image: linear-gradient(57deg, var(--primary) 14%, var(--primary-light) 85%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.main_image {
  max-width: var(--size-480);
  width: 100%;
}

.main_image.order_first {
  order: -1;
}

.main_image.order_first.planets {
  max-width: var(--size-440);
}

.main_image.order_first.love_n_dreams, .main_image.palmistry {
  max-width: var(--size-380);
}

.stats_description {
  max-width: var(--size-720);
  color: var(--white-80);
  font-size: var(--size-18);
  line-height: var(--size-26);
  text-align: center;
  width: 100%;
  font-style: italic;
  font-weight: 400;
}

.stats_list {
  grid-column-gap: var(--size-24);
  grid-row-gap: var(--size-24);
  flex-flow: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  display: flex;
}

.stats_block {
  min-width: var(--size-240);
  padding: var(--size-16) var(--size-24);
  grid-column-gap: var(--size-16);
  grid-row-gap: var(--size-16);
  border-radius: var(--size-12);
  background-color: var(--background);
  color: var(--white-100);
  font-size: var(--size-18);
  line-height: var(--size-26);
  text-align: center;
  text-transform: capitalize;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 20%;
  font-weight: 500;
  display: flex;
}

.stats_img {
  height: var(--size-48);
  flex: none;
}

.stats_img.stats_icon {
  width: var(--size-48);
}

.main_image_holder {
  min-width: var(--size-320);
}

.main_image_holder.order_first {
  order: -1;
}

.topics_list {
  grid-column-gap: var(--size-24);
  grid-row-gap: var(--size-24);
  color: var(--white-100);
  font-size: var(--size-18);
  line-height: var(--size-26);
  text-align: center;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-weight: 700;
  display: flex;
}

.topic_block {
  min-width: var(--size-240);
  padding: var(--size-16) var(--size-24);
  grid-column-gap: var(--size-24);
  grid-row-gap: var(--size-24);
  border: 2px solid var(--background);
  border-radius: var(--size-8);
  background-color: var(--background);
  color: var(--white-100);
  font-size: var(--size-18);
  line-height: var(--size-26);
  text-align: center;
  text-transform: capitalize;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 30%;
  font-weight: 500;
  transition: all .3s ease-out;
  display: flex;
}

.topic_block:hover {
  border: 2px solid var(--primary-light-2);
  box-shadow: var(--size-0) var(--size-4) var(--size-16) var(--size-0) var(--card-shadow);
}

.topic_icon {
  height: var(--size-64);
  flex: none;
}

.psychics_topcontent {
  max-width: var(--size-560);
  grid-column-gap: var(--size-16);
  grid-row-gap: var(--size-16);
  color: var(--white-100);
  font-size: var(--size-18);
  line-height: var(--size-26);
  text-align: center;
  text-transform: capitalize;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  font-weight: 400;
  display: flex;
}

.psychics_list {
  grid-column-gap: var(--size-24);
  grid-row-gap: var(--size-24);
  flex-flow: wrap;
  justify-content: center;
  width: 100%;
  display: flex;
}

.psychics_wrapper {
  min-width: var(--size-320);
  padding: var(--size-32);
  grid-column-gap: var(--size-32);
  grid-row-gap: var(--size-32);
  border-radius: var(--size-12);
  background-color: var(--background-container);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 30%;
  display: flex;
  position: relative;
}

.ai-enhanced-icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 32px;
  flex: none;
}

.psychics_block {
  grid-column-gap: var(--size-16);
  grid-row-gap: var(--size-16);
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.psychics_infoblock {
  grid-column-gap: var(--size-24);
  grid-row-gap: var(--size-24);
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
}

.psychics_pp_holder {
  width: var(--size-80);
  height: var(--size-80);
  background-color: var(--background);
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.psychics_pp {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.psychics_infocontent {
  grid-column-gap: var(--size-4);
  grid-row-gap: var(--size-4);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.psychics_username {
  color: var(--white-100);
  font-size: var(--size-18);
  line-height: var(--size-26);
  text-align: left;
  text-transform: capitalize;
  font-weight: 700;
}

.psychics_ratingblock {
  grid-column-gap: var(--size-8);
  grid-row-gap: var(--size-8);
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
}

.psychics_rating {
  color: var(--white-100);
  font-size: var(--size-16);
  line-height: var(--size-20);
  text-align: left;
  font-weight: 700;
}

.psychics_staricon {
  width: var(--size-24);
  flex: none;
}

.psychics_reviewnumber {
  color: var(--white-100);
  font-size: var(--size-12);
  line-height: var(--size-14);
  text-align: left;
  font-weight: 400;
}

.psychis_topiclist {
  min-height: var(--size-72);
  grid-column-gap: var(--size-12);
  grid-row-gap: var(--size-12);
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.psychics_topic {
  padding: var(--size-8) var(--size-12);
  border-radius: var(--size-32);
  background-color: var(--background-psychics-topic);
  color: var(--background-container);
  font-size: var(--size-12);
  line-height: var(--size-14);
  text-align: center;
  text-transform: capitalize;
  font-weight: 500;
}

.psychics_statslist {
  grid-column-gap: var(--size-8);
  grid-row-gap: var(--size-8);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.psychics_statsblock {
  grid-column-gap: var(--size-8);
  grid-row-gap: var(--size-8);
  color: var(--white-100);
  font-size: var(--size-14);
  line-height: var(--size-18);
  text-align: left;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  font-weight: 400;
  display: flex;
}

.psychics_statsicon {
  width: var(--size-32);
  height: var(--size-32);
  flex: none;
}

.psychics_description {
  color: var(--white-80);
  font-size: var(--size-16);
  line-height: var(--size-22);
  text-align: left;
  width: 100%;
  font-weight: 400;
}

.cta_psychics {
  padding: var(--size-8) var(--size-40);
  border-radius: var(--size-64);
  background-color: var(--primary-light-2);
  background-image: linear-gradient(57deg, var(--primary) 14%, var(--primary-light) 85%);
  color: var(--white-100);
  font-size: var(--size-16);
  line-height: var(--size-24);
  text-align: center;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  font-weight: 700;
  text-decoration: none;
  display: flex;
}

.psychics_statusblock {
  grid-column-gap: var(--size-8);
  grid-row-gap: var(--size-8);
  color: var(--box-shadow-hover);
  font-size: var(--size-12);
  line-height: var(--size-14);
  text-align: left;
  text-transform: capitalize;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  font-weight: 400;
  display: flex;
}

.psychics_statusblock.busy {
  color: var(--psychics-busy);
}

.psychics_statusicon {
  width: var(--size-8);
  height: var(--size-8);
  background-color: var(--psychics-online);
  border-radius: 50%;
  flex: none;
}

.psychics_statusicon.busy {
  background-color: var(--psychics-busy);
}

.psychics_browsecontent {
  grid-column-gap: var(--size-32);
  grid-row-gap: var(--size-32);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
}

.psychics_listimg {
  max-width: var(--size-350);
  width: 100%;
}

.cta_psychics_text {
  grid-column-gap: var(--size-8);
  grid-row-gap: var(--size-8);
  color: var(--primary-light);
  font-size: var(--size-20);
  text-align: center;
  text-transform: capitalize;
  cursor: pointer;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  text-decoration: none;
  display: flex;
}

.separator_text {
  padding: var(--size-16) var(--size-32);
  background-image: linear-gradient(57deg, var(--primary) 14%, var(--primary-light) 85%);
  color: var(--white-100);
  font-size: var(--size-20);
  line-height: var(--size-32);
  text-align: center;
  width: 100%;
  font-style: italic;
  font-weight: 800;
}

.horoscope_benefitlist {
  grid-column-gap: var(--size-24);
  grid-row-gap: var(--size-24);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.horoscope_benefitblock {
  grid-column-gap: var(--size-16);
  grid-row-gap: var(--size-16);
  color: var(--white-80);
  font-size: var(--size-20);
  line-height: var(--size-28);
  text-align: left;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  font-weight: 500;
  display: flex;
}

.horoscope_benefitsicon {
  width: var(--size-28);
}

.horoscope_imgholder {
  max-width: var(--size-530);
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.horoscope_image {
  width: 100%;
}

.horoscope_typelist {
  color: var(--white-100);
  font-size: var(--size-16);
  line-height: var(--size-20);
  text-align: center;
  text-transform: uppercase;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  font-weight: 700;
  display: flex;
  position: absolute;
  inset: auto;
}

.horoscope_typespan {
  padding: var(--size-6) var(--size-16);
  border-radius: var(--size-8);
  background-image: linear-gradient(57deg, var(--primary) 14%, var(--primary-light) 85%);
  margin-top: -8px;
  margin-bottom: -8px;
}

.horoscope_list {
  grid-column-gap: var(--size-24);
  grid-row-gap: var(--size-24);
  color: var(--text-description);
  font-size: var(--size-16);
  line-height: var(--size-22);
  text-align: left;
  flex-flow: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  font-weight: 400;
  display: flex;
}

.horoscope_block {
  min-width: var(--size-240);
  padding-top: var(--size-24);
  padding-bottom: var(--size-24);
  grid-column-gap: var(--size-16);
  grid-row-gap: var(--size-16);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 30%;
  display: flex;
}

.horoscope_listtitleblock {
  grid-column-gap: var(--size-16);
  grid-row-gap: var(--size-16);
  color: var(--white-100);
  font-size: var(--size-20);
  line-height: var(--size-26);
  text-align: left;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  font-weight: 500;
  display: flex;
}

.horoscope_icon {
  width: var(--size-48);
  height: var(--size-48);
  flex: none;
}

.faq_list {
  grid-column-gap: var(--size-16);
  grid-row-gap: var(--size-16);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
}

.faq_block {
  grid-row-gap: 16px;
  border-bottom: 1px solid #8c8c8c;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-bottom: 8px;
}

.faq_trigger {
  padding: var(--size-16) var(--size-0);
  grid-column-gap: var(--size-8);
  grid-row-gap: var(--size-8);
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  transition: all .2s ease-in-out;
  display: flex;
}

.faq_triggertitle {
  color: #fff;
  font-size: var(--size-20);
  line-height: var(--size-28);
  text-align: left;
  font-weight: 500;
}

.faq_arrow {
  transition: all .2s ease-in-out;
}

.faq_txtblock {
  width: 100%;
  display: block;
  overflow: hidden;
}

.faq_text {
  color: var(--white-80);
  font-size: var(--size-16);
  line-height: var(--size-20);
  text-align: left;
  font-weight: 400;
  transition: all .2s ease-in-out;
}

.footer_section {
  padding: var(--size-16) var(--size-64);
  grid-column-gap: var(--size-24);
  grid-row-gap: var(--size-24);
  background-color: var(--background-footer);
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.footer_allinfo {
  grid-column-gap: var(--size-16);
  grid-row-gap: var(--size-16);
  color: var(--white-100);
  font-size: var(--size-16);
  line-height: var(--size-24);
  text-align: left;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-weight: 400;
  display: flex;
}

.footer_links {
  grid-column-gap: var(--size-16);
  grid-row-gap: var(--size-16);
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 560px;
}

.footer_link {
  color: var(--white-80);
  font-size: var(--size-16);
  line-height: var(--size-24);
  text-align: left;
  cursor: pointer;
  font-weight: 400;
  text-decoration: none;
  transition: all .3s ease-out;
}

.footer_link:hover {
  color: var(--white-100);
}

.header_holder {
  width: 100%;
}

.main_container.packages {
  padding: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.package-list {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  gap: 64px;
  flex-wrap: wrap;
  margin: 0 auto;
}

.package-item {
  width: 100%;
  max-width: 318px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 32px;
  background: #fff;
  border-radius: 16px;
  transition: all .2s ease-in-out;
}

.package-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 24px 0 rgba(255, 255, 255, 0.08);
}

.package-item.premium {
  background: linear-gradient(72deg, #031D2E 0%, #1184D1 100.54%);
}

.package-price {
  width: 100%;
  text-align: center;
  font-size: 48px;
  line-height: 56px;
  font-weight: 700;
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.package-price span {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #fff;
  text-align: center;
}

.package-title {
  width: 100%;
  border-radius: 640px;
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: #000;
  background: #9DB8F4;
  text-align: center;
}

.package-title.premium {
  background-image: linear-gradient(56.86deg, #1D4CB3 14.34%, #33B9DE 85.66%);
  color: #fff;
}

.package-benefit-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
}

.package-benefit-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}

.package-benefit-icon {
  width: 24px;
  height: 24px;
  flex: none;
}

.package-benefit-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
}

.package-benefit-item-title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: #000;
  text-align: left;
  width: 100%;
}

.package-benefit-item-title span {
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: #000;
  text-align: left;
}

.premium-span {
  color: #fff !important;
}

.package-benefit-item-text {
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: #000;
  text-align: left;
  width: 100%;
}

.opacity-60 {
  opacity: 0.6;
}

.line-through {
  text-decoration: line-through 2px solid black;
}

.line-through.premium {
  text-decoration: line-through 2px solid #fff;
}

.package-item.premium .package-price,
.package-item.premium .package-benefit-item-title {
  color: #fff;
}

.package-item.premium .package-benefit-item-text {
  color: #fff;
}

@media screen and (min-width: 1280px) {
  .navbar, .hero_container, .main_wrapper {
    padding-right: var(--size-128);
    padding-left: var(--size-128);
  }

  .horoscope_listtitleblock {
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
  }

  .footer_section {
    padding-right: var(--size-128);
    padding-left: var(--size-128);
  }
}

@media screen and (max-width: 991px) {
  .header_offer {
    font-size: var(--size-12);
    line-height: var(--size-16);
    position: relative;
  }

  .navbar {
    margin-top: var(--size-0);
    padding-right: var(--size-40);
    padding-left: var(--size-40);
    background-color: var(--background-navigation);
  }

  .navbar_menu {
    display: none;
  }

  .navbar_login {
    grid-column-gap: var(--size-6);
    grid-row-gap: var(--size-6);
    font-size: var(--size-14);
  }

  .navbar_menu_button {
    display: none;
  }

  .hero_container {
    justify-content: center;
    align-items: center;
  }

  .hero_h1 {
    font-size: var(--size-48);
    line-height: var(--size-56);
    text-align: left;
  }

  .hero_description {
    font-size: var(--size-16);
    line-height: var(--size-24);
    text-align: left;
  }

  .hero_withcta {
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: auto;
  }

  .main_wrapper {
    padding: var(--size-64) var(--size-40);
    grid-column-gap: var(--size-64);
    grid-row-gap: var(--size-64);
  }

  .main_container {
    padding: var(--size-24);
    grid-column-gap: var(--size-40);
    grid-row-gap: var(--size-40);
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
  }

  .main_container.with_background {
    padding: var(--size-32);
  }

  .main_contentwrapper {
    max-width: 720px;
  }

  .main_h2 {
    max-width: none;
  }

  .main_h2.topics_heading {
    font-size: var(--size-28);
    line-height: var(--size-32);
  }

  .main_image_holder.order_first {
    order: 1;
  }

  .horoscope_block {
    max-width: 45%;
  }

  .footer_section {
    padding-right: var(--size-40);
    padding-left: var(--size-40);
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  .footer_allinfo {
    justify-content: flex-start;
    align-items: center;
  }

  .header_holder {
    z-index: 9999;
    position: fixed;
    inset: 0% 0% auto;
  }
  
  .package-list {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
  }
  .package-item {
    max-width: 560px;
    padding: 18px;
  }
  .package-price {
    font-size: 32px;
    line-height: 40px;
  }
  .package-title {
    padding: 12px;
    font-size: 18px;
    line-height: 28px;
    max-width: 480px;
  }
  .package-benefit-item-title {
    font-size: 18px;
    line-height: 28px;
  }
  .package-benefit-list {
    max-width: 480px;
  }
  .package-item .package-price span {
    display: none;
  }
  .package-item.premium .package-price span {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .navbar {
    padding-right: var(--size-24);
    padding-left: var(--size-24);
  }

  .navbar_logo.w--current {
    max-width: var(--size-160);
  }

  .hero_container {
    padding-right: var(--size-24);
    padding-left: var(--size-24);
  }

  .hero_cards {
    min-width: 150%;
    margin-bottom: -16px;
    margin-left: 0;
    margin-right: 0;
  }

  .hero_h1 {
    font-size: var(--size-32);
    line-height: var(--size-44);
  }

  .hero_withcta {
    grid-column-gap: var(--size-40);
    grid-row-gap: var(--size-40);
    flex: 1;
    justify-content: center;
    align-items: flex-start;
  }

  .cta_main {
    padding-right: var(--size-16);
    padding-left: var(--size-16);
    font-size: var(--size-18);
    line-height: var(--size-24);
  }

  .main_wrapper {
    padding: var(--size-24);
    grid-column-gap: var(--size-40);
    grid-row-gap: var(--size-40);
  }

  .main_container.with_background {
    padding: var(--size-24);
    grid-column-gap: var(--size-32);
    grid-row-gap: var(--size-32);
  }

  .main_contentwrapper {
    font-size: var(--size-16);
    line-height: var(--size-24);
  }

  .main_h2 {
    font-size: var(--size-24);
    line-height: var(--size-34);
  }

  .main_h2.topics_heading {
    text-align: center;
  }

  .stats_list {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
  }

  .stats_block, .topic_block {
    max-width: 100%;
  }

  .psychics_topcontent {
    font-size: var(--size-16);
    line-height: var(--size-24);
    text-align: left;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 100%;
  }

  .psychics_wrapper {
    max-width: 100%;
  }

  .psychis_topiclist {
    min-height: auto;
  }

  .separator_text {
    padding-top: var(--size-8);
    padding-bottom: var(--size-8);
    font-size: var(--size-16);
    line-height: var(--size-22);
  }

  .horoscope_benefitblock {
    font-size: var(--size-16);
    line-height: var(--size-22);
  }

  .horoscope_typelist {
    font-size: var(--size-10);
    line-height: var(--size-14);
  }

  .horoscope_typespan {
    margin-top: var(--size-0);
    margin-bottom: var(--size-0);
    padding: var(--size-4) var(--size-8);
  }

  .horoscope_list {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .horoscope_block {
    padding-top: var(--size-12);
    padding-bottom: var(--size-12);
    max-width: 100%;
  }

  .horoscope_listtitleblock {
    font-size: var(--size-18);
    line-height: var(--size-24);
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
  }

  .horoscope_icon {
    width: var(--size-40);
    height: var(--size-40);
  }

  .faq_triggertitle {
    font-size: var(--size-16);
    line-height: var(--size-24);
  }

  .faq_text {
    font-size: var(--size-14);
    letter-spacing: .1px;
  }

  .footer_section {
    padding-right: var(--size-24);
    padding-left: var(--size-24);
  }

  .footer_links {
    justify-content: center;
  }
}

@media screen and (max-width: 479px) {
  .hero_withcta {
    flex: 1;
    justify-content: center;
    align-items: flex-start;
  }

  .main_contentwrapper, .main_contentwrapper.horoscope, .main_image_holder {
    min-width: auto;
  }

  .psychics_wrapper {
    padding: var(--size-24) var(--size-16);
    min-width: auto;
  }

  .psychics_infoblock {
    grid-column-gap: var(--size-12);
    grid-row-gap: var(--size-12);
  }

  .psychics_ratingblock {
    grid-row-gap: var(--size-4);
    flex-flow: wrap;
  }

  .horoscope_block {
    min-width: auto;
  }

  .footer_links {
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
  }
}


@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/SF-Pro-Display-Regular.OTF') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/SF-Pro-Display-Medium.OTF') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/SF-Pro-Display-Bold.OTF') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/SF-Pro-Display-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/SF-Pro-Display-Heavy.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/SF-Pro-Display-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}