@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap');
#root {
  background: #111111;
}
.btn_back {
  background-color: transparent;
  border: none;
}
.sign_label {
  font-weight: 400;
  font-size: 22px;
  line-height: 33px;
  margin-bottom: 0.5rem;
}
.subCard {
  min-height: 838px;
  width: 32%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0 0 27px 27px;
  position: relative;
}
.sub_recommended {
  position: absolute;
  top: -2.7rem;
  background-color: #5e36ce;
  width: 100%;
  padding: 0.2rem 0rem;
  border: none;
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  text-align: center;
  color: #ffffff;
}
.subCardHead {
  padding: 0.5rem 0rem 1rem 0rem;
  height: 10%;
  width: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#subPlanName {
  font-family: 'Syne', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 45px;
  line-height: 54px;
  display: flex;
  align-items: center;
  text-align: center;

  color: #2e2e2e;
}

.subPrice {
  font-weight: 700;
  font-size: 28px;
  line-height: 42px;
  letter-spacing: 0.045em;

  color: #6117ff;
}
.subCardBody {
  padding: 2rem;
  font-weight: 500;
  line-height: 36px;
  color: #dbdfe3;
  min-height: 500px;
  font-size: 24px;
  color: #ecf2f8;
}
.subCardBody > p {
  margin-bottom: 2rem;
}
.subCardBody > ul > li {
  color: #ecf2f8;
  padding-left: 1rem;
}

.subCardBody > ul {
  list-style-image: url('../components//Icons/icon_list_style.svg');
  margin-left: 1.5rem;
}

.subFunnel {
  background: rgba(255, 255, 255, 0.17);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  padding: 0.6rem;
}
.subFunnel > p {
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  text-align: center;
  color: #ffffff;
}

.subsBtn {
  background: linear-gradient(94.62deg, #f76f47 2.55%, #bd61ec 98.64%);
  border-radius: 13px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0.8rem;
  gap: 2rem;
  position: relative;
  font-weight: 600;
  font-size: 27px;
  line-height: 40px;
  color: #ffffff;
}
.button_container {
  padding: 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
#subs_right_arrow {
  position: absolute;
  right: 8%;
  top: 35%;
}
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Poppins', sans-serif;
  overflow-x: hidden;
}
/* Disable increment and decrement buttons on number inputs */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'] {
  -moz-appearance: textfield; /* Firefox */
}
/*/////////////// Verification OTP */
.otpInputs {
  height: 67px;
  width: 67px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 35px;
  line-height: 52px;
  color: #ffffff;
  padding: 1.2rem;
}
.otpInputContainer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 0rem;
}
.otpHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.otpSentTo {
  font-size: 22px;
  line-height: 33px;
  text-align: right;
  color: #656565;
}
.otpType {
  line-height: 33px;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.82);
}

.formEndPara {
  margin-top: 1rem;
  font-size: 15px;
  line-height: 33px;
  color: rgba(255, 255, 255, 0.82);
}

.formEndPara > span {
  color: #bd61ec;
}

/* END OF VERIFICATION OTP */

.inputContainer {
  display: flex;
  gap: 1rem;
  margin-bottom: 4rem;
}
.labelContainer {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}
.otp {
  aspect-ratio: 1/1;
  width: 100%;
  padding: 0px;
  text-align: center;
  font-size: 22px;
}
/* Chrome, Safari, Edge, Opera */
.otp::-webkit-outer-spin-button,
.otp::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.otp[type='number'] {
  -moz-appearance: textfield;
}

.otpForm {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  gap: 9rem;
}

.right_otp {
  /* background-color: #0a1118; */
  color: white;
}

.served {
  background: linear-gradient(94.62deg, #f76f47 2.55%, #bd61ec 98.64%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.heading {
  position: relative;
  font-size: 33px;
  line-height: 50px;
  margin-top: 120px;
  margin-bottom: 29px;
  margin-left: 96px;
}
.heading-img {
  position: absolute;
  top: 0;
  margin: 2rem;
}
.list-container {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-left: 127px;
  margin-bottom: 19px;
}
.list-item {
  font-size: 22px;
  line-height: 33px;
}

.list-bullet {
  background: rgba(255, 255, 255, 0.24);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: block;
}
.right-img {
  position: absolute;
  bottom: -3vw;
  right: -12vw;
}
.right-img img {
  /* background-image: url('../image/Group 112 (2).png'); */
  width: 41vw;
  /* height: 100%; */
  /* background-size: contain; */
  /* background-repeat: no-repeat; */
  /* position: absolute; */
  /* top: 0; */
  /* right: 0; */
  /* background-position: 155% 121%; */
}

.inputSubmit {
  background-color: rgba(11, 11, 11, 0.73);
}
.thankyou {
  background-color: #0a1118;
  color: white;
  font-family: Poppins;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  display: flex;
}
.left-thank-you {
  background-repeat: no-repeat;
  background-image: url('../image/signin_bg.png');
  position: relative;
  writing-mode: vertical-lr;
  /* direction: rtl; */
  transform: rotate(-180deg);
  font-weight: 700;
  font-size: 36px;
  /* line-height: 54px; */
  padding: 2rem 0.5rem;
  display: flex;
  white-space: nowrap;
}
.left-thank-you p {
  /* height: 200vh; */
  /* display: inline; */
  padding-inline: 1rem;
  white-space: nowrap;
  animation: move-ttb 10s linear infinite;
}
@keyframes move-ttb {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
  }
}
.right-thank-you {
  display: flex;
  flex-grow: 1;
  padding-left: 65px;
  background-image: url('../image/Group 113.png');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 60%;
  flex-direction: column;
}
.thank-you-logo {
  width: 100px;
}

.right-thank-you h1 {
  font-family: 'Barlow';
  font-weight: 700;
  font-size: 65px;
  /* line-height: px; */
}
.text-colored {
  background: linear-gradient(94.62deg, #f76f47 2.55%, #bd61ec 98.64%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.details {
  padding: 0.5rem;
  background-color: white;
  width: 934px;
  color: black;
  margin-top: 1.5rem;
  margin-bottom: 3rem;
  font-size: 25px;
}
.details table {
  width: 100%;
  border-top: none;
  text-align: left;
}
th {
  font-weight: 700;
  width: 148px;
  line-height: 39px;
  padding: 10px 20px;
}
td {
  font-weight: 500;
  line-height: 39px;
  color: #404040;
  padding: 10px 20px;
}
table {
  border-collapse: collapse;
}
table td,
table th {
  border: 1px solid black;
}
table tr:first-child td,
table tr:first-child th {
  border-top: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr:last-child td,
table tr th:first-child {
  border-bottom: 0;
}
table tr td:last-child,
table tr th:first-child {
  border-right: 0;
}
.right-thank-you__img {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  /* margin-inline: 38rem; */
}
.right-thank-you__img img {
  position: absolute;
  bottom: 0;
  left: 25.25vw;
  /* transform: translateX(-48%); */
  width: 40vw;
}
.right-thank-you__img figcaption {
  position: absolute;
  bottom: 2.8vw;
  left: 46vw;
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-size: 1.25vw;
  /* line-height: 53px; */
  color: #1a1818;
  z-index: 10;
}

.video-thankyou {
  position: absolute;
  left: 28.25vw;
  /* transform: translateX(-48.15%); */
  bottom: 2vw;
  width: 34vw;
}

.playButton {
  width: 5.339vw;
  height: 5.339vw;
  position: absolute;
  background-color: white;
  border: none;
  border-radius: 50%;
  background-image: url('../image/Polygon 2.png');
  background-repeat: no-repeat;
  background-position: 55%;
  background-size: 1.5vw;
  bottom: 8.6vw;
  left: 49vw;
  filter: drop-shadow(0px 0px 0.8rem rgba(68, 68, 68, 0.4));
}
.dashboard {
  height: 100%;
  width: 100vw;
  background: radial-gradient(
      50rem at left top,
      rgba(172, 32, 1, 1),
      rgba(172, 32, 1, 0.14)
    ),
    radial-gradient(
      150rem at center left,
      rgba(28, 146, 255, 1),
      rgba(28, 146, 255, 0.52)
    ),
    radial-gradient(
      150rem at right,
      rgba(97, 23, 255, 1),
      rgba(97, 23, 255, 0.57)
    );
}
.gradient {
  /* filter: blur(10px); */
  background-attachment: fixed;
  height: 100%;
  width: 100%;
  background-color: rgba(30, 30, 30, 0.8);
  display: grid;
  grid-template-columns: 237px 1fr;
}

.sidebar {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.0153) 0%,
    rgba(255, 255, 255, 0.09) 100%
  );
  border-right: 1px solid rgba(255, 255, 255, 0.21);
  display: flex;
  flex-direction: column;
}
.myzer-logo {
  mix-blend-mode: screen;
  text-align: center;
  padding-top: 1.2rem;
}
hr {
  margin-top: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-inline: 1rem;
}
.section-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  padding: 0 24px;
  line-height: 21px;
  color: rgba(255, 255, 255, 0.69);
}
.sidebar-section-1,
.sidebar-section-2 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 20px 0;
}
.sidebar-section-3 {
  margin-bottom: 2rem;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 10px 10px 10px 15px;
  margin: 0 0 16px;
  position: relative;
  z-index: 99;
}

.sidebar-item::before {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 0 9px 9px 0;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10.5px);
  transition: width 0.3s linear;
  inset: 0;
  width: 0;
}

.sidebar-item:hover:before {
  width: 100%;
}

.sidebar-item:after {
  position: absolute;
  content: '';
  left: 0;
  width: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(180deg, #bd61ec 0%, #5e36ce 100%);
  z-index: 9;
  transition: width 0.3s linear;
}

.sidebar-item:hover:after {
  width: 7px;
}

.setting {
  padding: 10px;
  margin-bottom: 20px;
}
.sidebar-logo {
  width: 22px;
}
.main-right {
  display: block;
  min-width: 83vw;
  max-width: 100vw;
}
.navbar {
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}
.user-section {
  display: flex;
  flex-direction: row-reverse;
  text-align: right;
  padding-inline: 2rem;
  gap: 1rem;
  align-items: center;
}
.user-details__plan {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  line-height: 15px;
  text-align: right;
  text-transform: capitalize;

  color: rgba(255, 255, 255, 0.71);
}
.user-details {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  text-transform: uppercase;
  color: #ffffff;
}
.bellIcon-section {
  border-inline: 1px solid rgba(255, 255, 255, 0.1);
  padding-inline: 2rem;
}
.content {
  padding: 1.188rem 3.813rem 1.375rem 2.313rem;
  display: flex;
  gap: 1.875rem;
}
.left-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.date-section {
  height: 2.688rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.input-section {
  display: flex;
  justify-content: space-between;
  width: 24.875rem;
  align-items: center;
  height: 100%;
}
.input-section input {
  height: 100%;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 24px;
  text-transform: uppercase;
  color: #000000;
  padding-inline: 0.5rem;
  border: none;
  border-radius: 8px;
}
input[type='date']::-webkit-calendar-picker-indicator {
  background-image: url('../image/calendar 1.svg');
  width: 1.813rem;
  height: 1.813rem;
}
.complete-report-section {
  height: 100%;
}
.complete-report-section button {
  height: 100%;
  background: rgba(1, 1, 1, 0.14);
  border: 1px solid white;
  border-radius: 8px;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  padding: 0.5rem 1.25rem;
  color: white;
}
.report-section {
  background: linear-gradient(121.92deg, #5e36ce 53.35%, #4200ff 105.85%);
  box-shadow: 0px 0px 50px rgba(30, 14, 75, 0.4);
  border-radius: 9px;
  height: 18.25rem;
  display: flex;
  gap: 2.563rem;
  padding: 0.938rem 1.063rem;
}
.bitmoji {
  width: 15.98rem;
  height: 100%;
  text-align: center;
  align-self: center;
  border: 1px solid white;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25),
    inset 6px 9px 40px rgba(255, 255, 255, 0.25);
  border-radius: 17px;
}
.reports {
  flex-grow: 1;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  /* column-gap: 10rem; */
  /* place-content: center; */
}
#dashboard-table-1 {
  width: 100%;
}
.reports-item {
  /* text-align: center; */
  padding-inline: 3rem;
  align-self: center;
  color: white;
}
.reports-item h2 {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-size: 1.3vw;
  line-height: 30px;
}
.reports-item h1 {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: bold;
  font-size: 3.5vw;
  line-height: 85px;
  /* identical to box height */

  text-transform: capitalize;

  background: linear-gradient(
    180deg,
    #ffffff 38.21%,
    rgba(255, 255, 255, 0) 87.74%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
/* 
.total-sales {
  border-right: 1px solid transparent;
  border-image-source: url('../image/Line 25.svg');
  border-image-repeat: initial;
  border-image-slice: 20;
  border-image-width: 20px;
  border-image-outset: 0px;
}

.total-orders {
  border-bottom: 1px solid transparent;
  border-image-source: url('../image/Line 25.svg');
  border-image-repeat: initial;
  border-image-slice: 20;
  border-image-width: 20px;
  border-image-outset: 0px;
}

.conversion-rate {
  border-right: 1px solid transparent;
  border-image-source: url('../image/Line 25.svg');
  border-image-repeat: initial;
  border-image-slice: 20;
  border-image-width: 20px;
  border-image-outset: 0px;
} */
.analytics-section {
  /* background-color: #2196f3; */
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: 1rem;
}

.analytic-item {
  /* background-color: red; */
  background-image: url('../image/Group 16 1.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.right-content {
  width: 20.125rem;
  margin-top: 1rem;
  padding: 1.313rem 1rem;
  /* background-color: red; */
  height: 71.29094412331406vh;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 29px;
}
.right-heading {
  display: flex;
  gap: 1rem;
}
.right-icon {
  background-color: white;
  padding: 9px;
  border-radius: 10px;
  border: 1px solid rgba(255, 107, 0, 1);
}

.right-text h2 {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  color: white;
}
.right-text p {
  color: #eaeaea;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.redDot {
  background: linear-gradient(136.47deg, #ff3939 12.64%, #ff9900 82.33%);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: inline-block;
}

.rightItem {
  background: linear-gradient(
    174.78deg,
    rgba(255, 255, 255, 0.07) 4.18%,
    rgba(255, 255, 255, 0.0105) 101.95%
  );
  box-shadow: 0px 8px 70px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  padding: 10px;
  justify-content: space-between;
}
.rightItemLeft {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.rightItemText h4 {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: white;
}

.rightItemText p {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-size: 10px;
  color: white;
}
.rightItemPrice {
  text-align: right;
}

.rightItemPrice h4 {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  text-align: right;

  background: linear-gradient(98.02deg, #ff6b00 6.92%, #ff9900 97.15%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

.rightItemPrice p {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-size: 8px;
  color: white;
}

.template-card,
.template-card-image {
  background: gray;
  position: relative;
  min-width: 230px;
  min-height: 310px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.0192) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 16px;
}

.template-card:before {
  content: '';
  position: absolute;
  height: calc(90% - 10px);
  width: calc(90% - 10px);
  left: 7%;
  top: 7%;
  border: 1px dashed #ffffff;
  border-radius: 16px;
}

.template-description {
  font-weight: 400;
  font-size: 17px;
  line-height: 121%;
  /* or 21px */

  display: flex;
  align-items: center;
  text-align: center;
  text-transform: capitalize;

  color: rgba(255, 255, 255, 0.79);
}

.custom-scrollbar {
  overflow-y: hidden;
  direction: ltr;
  scrollbar-color: #d4aa70 #e4e4e4;
  scrollbar-width: 10px !important;
  padding-bottom: 10px;
  position: relative;
}

.custom-scrollbar::-webkit-scrollbar {
  height: 7px !important;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background-color: #5a556a;
  border-radius: 30px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 30px;
  background-color: #7d8389;
}

.gradient-1 {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100%;
  background: linear-gradient(to left, rgb(4 4 4 / 75%), rgb(0 0 0 / 0%));
}

.table-header-span {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 7px;
  color: #c8cacc;
  text-align: center;
  padding: 8px 10px;
}

.landing-pages-table {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 15px;
  padding: 15px 25px;
}

/* //////////////////// */
.phone-input-container {
  display: flex;
  align-items: center;
  border-radius: 4px;
  height: 44px;
  padding: 0 12px;
  font-size: 16px;
  color: #333;
  margin-top: 8px;
}

.phone-input-container input {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  padding: 0.6rem 2.5rem !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 18px !important;
  color: #d9d9d9;
  width: 100%;
}

.phone-input-container .selected-flag {
  margin-right: 8px;
}

.phone-input-container .flag-dropdown {
  border: none;
  box-shadow: none;
  background-color: rgba(255, 255, 255, 0.05) !important;
  font-size: 16px;
  color: #333;
  margin-left: 3rem !important;
}
.react-tel-input .form-control {
  width: 100% !important;
  line-height: 36px !important;
  padding: 1.5rem 3rem !important;
  padding-left: 6rem !important;
}
.react-tel-input {
  padding: 0 !important;
}

.phone-input-container .search-box input {
  background-color: transparent;
  border: none;
  font-size: 16px;
  color: #333;
  outline: none;
}

.phone-input-container .search-box input::placeholder {
  color: #a0a0a0;
}

/* ///////////////////// */
.subs_container {
  background: url('./images/sub_bg.png');
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.subs_inner {
  margin: 4% auto;
  width: 92%;
  display: flex;
  padding: 2rem;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}
.subs_header {
  height: 7rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.47);
  margin-bottom: 1rem;
}
/* Monthly and Year plans tab container styles */
.sub_tabs_container {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 29px;
  margin-top: 4%;
  padding: 0.5rem;
  position: relative;
}
.sub_tab {
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  color: #aaaaaa;
  padding: 0.5rem 4rem;
  border: none;
  border-radius: 21px;
  background-color: transparent;
  cursor: pointer;
}
.sub_tab_active {
  border-radius: 21px;
  color: #ffffff;
  background: linear-gradient(92.91deg, #bd61ec 32.32%, #5e36ce 97.22%);
}
/* /// */
.sub_offer {
  position: absolute;
  top: 0;
  left: -15rem;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  transform: rotate(18.94deg);
  color: #ffffff;
}
.subscriptions {
  position: relative;
}
.sub_offer > p > span {
  background: linear-gradient(103.51deg, #bd61ec 11.38%, #ff6b00 64.51%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#sub_offer_emoji_1 {
  position: absolute;
  top: -2rem;
  left: -3.5rem;
  transform: rotate(-15deg);
}

#sub_offer_emoji_2 {
  position: absolute;
  top: -1.5rem;
  right: -0.8rem;
  transform: rotate(-65deg);
}
#arrow_pointing_tabs {
  position: absolute;
  top: -7.5rem;
  right: -5rem;
  transform: rotate(-20deg);
}

.subs_footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rem 5.5rem;
}

.subs_links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  font-weight: 500;
  font-size: 27px;
  line-height: 40px;
}
.subs_links a {
  text-decoration: none;
  color: #a5abb5;
}
#subs_mesh_1 {
  position: absolute;
  top: 0;
  left: 0;
}
#subs_mesh_2 {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}