@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}

:root {
  --white: #ffffff;
  --blue-gem: #4317ad;
  --dark-text: #212121;
  --text: #65626b;
  --light-text: #bdbdbd;
  --light-gray: #ececec;
}

body {
  overflow-y: auto;
  overflow-x: hidden;
  background: url("./Assets/bg.png") no-repeat top left;
  background-size: 100% 100%;
  background-attachment: fixed;
}

body::-webkit-scrollbar {
  width: 10px;
}

body::-webkit-scrollbar-track {
  width: 10px;
  background: #f2f2f2;
}

body::-webkit-scrollbar-thumb {
  border: 1px solid rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

section {
  overflow: auto;
}

button {
  cursor: pointer;
}

input[type="button"] {
  cursor: pointer;
}

.disabled {
  cursor: default;
}

/*********************************    NAVBAR    ***************************************/
.navbar {
  height: 70px;
  width: 100%;
  padding: 0px 5%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--white);
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 100;
}

.navbar-res {
  display: none;
}

.nav-logo {
  font-size: 24px;
  font-weight: bold;
  color: var(--blue-gem);
  display: flex;
  align-items: center;
}

.nav-logo img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.nav-list {
  height: 100%;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.nav-link {
  height: 100%;
  margin: 0 20px;
  font-size: 20px;
  font-weight: 400;
  text-decoration: none;
  color: var(--dark-text);
  display: flex;
  align-items: center;
}

.active {
  color: var(--blue-gem);
  border-bottom: 3px solid var(--blue-gem);
}

.active-videos {
  color: #212121;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .navbar {
    min-width: 360px;
    max-width: 115vw;
    box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.15);
  }

  .navbar-res {
    height: 100%;
    min-width: 360px;
    max-width: 100vw;
    width: 100%;
    position: fixed;
    top: 70px;
    left: 0px;
    display: flex;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 90;
    transform: translateY(-100%);
  }

  .nav-list-res {
    width: 100%;
    max-height: 210px;
    list-style: none;
    background-color: var(--white);
  }

  .nav-link-res {
    width: 100%;
    min-height: 70px;
    padding: 0 5%;
    font-size: 20px;
    font-weight: 400;
    text-decoration: none;
    color: var(--dark-text);
    display: flex;
    align-items: center;
    box-shadow: 0px 2px 0px -1px #d7d5db;
  }

  .nav-item-res {
    padding: 21px 0;
    height: 100%;
  }

  .hide {
    display: none;
  }

  .nav-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 24px;
    width: 24px;
    cursor: pointer;
  }

  .bar {
    width: 100%;
    height: 2px;
    background: #000;
  }
}

@media screen and (max-width: 500px) {
  .navbar {
    padding: 0 10px;
  }
}

/*********************************    PLAN    ***************************************/
.section {
  min-height: 1024px;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SECTION 1*/
.bg-layer1 {
  width: 100%;
  height: 1024px;
  background: url("../Assets/layer1.png") no-repeat top left;
  background-size: 60% 100%;
  display: flex;
}

.left-container {
  height: 1024px;
  flex: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.right-container {
  height: 1024px;
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.content {
  margin: 10px auto;
  max-width: 650px;
  padding: 48px;
  font-size: 20px;
  line-height: 150%;
  background: var(--white);
  box-shadow: 0px 16px 16px rgba(97, 97, 97, 0.2);
  border-radius: 8px;
}

.title {
  margin-bottom: 20px;
  font-size: 40px;
  font-weight: 600;
  line-height: 150%;
  color: var(--blue-gem);
}

.text {
  font-size: 20px;
  line-height: 32px;
  color: var(--text);
  text-transform: capitalize;
}

.main .right-container,
.coin .right-container {
  justify-content: flex-end;
}

.hero {
  width: 550px;
  height: auto;
}

.coin .hero {
  transform: translateY(-5%);
}

/* SECTION 2 */
.bg-layer2 {
  min-height: 1024px;
  height: 100%;
  width: 100%;
  background: url("./Assets/layer2.png") no-repeat top left;
  background-size: contain;
  display: flex;
}

.bg-layer3 {
  min-height: 1024px;
  height: 100%;
  width: 100%;
  background: url("./Assets/layer3.png") no-repeat bottom right;
  background-size: 40% 80%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  overflow: hidden;
}

.left-cloud-container,
.right-cloud-container {
  display: flex;
  align-self: start;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  flex: 1;
  z-index: 2;
}

.left-cloud-container {
  height: 250px;
  padding-top: 80px;
}

.right-cloud-container {
  padding-top: 20px;
}

.cloud3 {
  align-self: center;
}

.cloud4 {
  margin-right: 60px;
}

.cloud2 {
  margin-left: auto;
}

.cloud1 {
  margin-left: 30px;
}

.cloud5 {
  margin-right: auto;
  margin-bottom: 20px;
}

.cloud7 {
  margin-right: 50px;
}

.cloud8 {
  margin-right: auto;
}

.cloud9 {
  margin-left: 80px;
  margin-bottom: 50px;
}

.cloud6 {
  margin-right: 30px;
}

.caption {
  min-width: 1100px;
  max-width: 60%;
  padding: 40px;
  font-size: 20px;
  color: var(--text);
  line-height: 150%;
  text-transform: capitalize;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0px 12px 36px #00000033;
}

.ship-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  z-index: 3;
}

.card-container {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 4;
  transform: translateY(15%);
}

#card-carousel {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.left-arrow,
.right-arrow {
  display: none;
}

.card {
  margin: 0 5px;
  max-width: 250px;
  min-width: 220px;
  color: #999;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0px 8px 24px #00000033;
  padding-bottom: 50px;
  display: none;
  flex-direction: column;
  pointer-events: none;
}

.card-header img {
  width: 100%;
  height: auto;
}

.card-body {
  padding: 20px;
}

.card-body p {
  font-size: 16px;
  line-height: 24px;
}

.card-list {
  list-style: none;
}

.card-list-item {
  margin: 20px 0;
  font-size: 18px;
}

.ship {
  width: 1200px;
  height: auto;
  z-index: 5;
}

.shipwater {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 200px;
  z-index: 3;
}

/* SECTION 4 */
.contact {
  height: 100%;
  background: url("./Assets/contact_bg.png") no-repeat top left;
  background-size: 100% 100%;
}

.contact .right-container {
  align-items: flex-start;
}

.contact-form {
  margin: 10px auto;
  max-width: 500px;
  padding: 48px;
  font-size: 20px;
  line-height: 150%;
  background: var(--white);
  box-shadow: 0px 16px 16px rgba(97, 97, 97, 0.2);
  border-radius: 8px;
}

.form-title {
  margin-bottom: 20px;
  font-size: 40px;
  font-weight: 500;
  line-height: 150%;
  color: var(--blue-gem);
}

.form-text {
  font-size: 20px;
  line-height: 32px;
  color: var(--text);
  text-transform: capitalize;
}

.form-input {
  min-width: 300px;
  margin: 30px 0;
  padding: 10px 24px;
  font-size: 20px;
  color: var(--text);
  border: 1px solid var(--blue-gem);
  outline: none;
  border-radius: 10px;
}

.form-input::placeholder {
  color: var(--light-text);
  font-size: 18px;
}

.submit {
  padding: 10px 20px;
  font-size: 20px;
  border: 1px solid var(--blue-gem);
  outline: none;
  cursor: pointer;
  color: var(--white);
  background: var(--blue-gem);
  border-radius: 0 10px 10px 0;
  transform: translateX(-20%);
}

.form-subtext {
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 16px;
  color: var(--text);
}

.contact-form img {
  margin-right: 30px;
}

.contact .right-container img {
  position: absolute;
  z-index: 2;
}

.contact-frame {
  position: absolute;
  width: 460px;
  height: 260px;
  border: 4px solid rgba(67, 23, 175, 0.15);
  border-radius: 12px;
  clip-path: polygon(92% 0, 100% 0, 100% 100%, 60% 100%);
}

/* FOOTER */
.footer {
  padding: 50px 5%;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  color: var(--white);
  background: url("./Assets/footer_bg.png") no-repeat center;
  background-size: 100vw 100%;
}

.right {
  min-width: 600px;
  display: flex;
  justify-content: space-evenly;
}

.list {
  list-style: none;
  margin-bottom: 10px;
}

.list-title {
  margin: 20px 0;
  font-size: 18px;
  line-height: 30px;
}

.list a {
  text-decoration: none;
}

.list-item {
  margin: 10px 0;
  font-size: 16px;
  line-height: 30px;
  color: var(--white);
}

.footer-logo {
  font-size: 40px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.footer-logo img {
  width: 30px;
  height: 40px;
  margin-right: 20px;
}

.footer p {
  max-width: 400px;
  margin: 15px 0;
  font-size: 18px;
  line-height: 30px;
}

.social-links {
  display: flex;
  margin: 30px 0;
}

.social-links-mobile {
  display: none;
}

.social-links img {
  margin-right: 20px;
  cursor: pointer;
}

.copyright-text {
  font-size: 16px;
}

@media only screen and (max-width: 1200px) {
  .bg-layer1 {
    flex-direction: column;
    background-size: 80% 100%;
  }

  .main .left-container,
  .coin .left-container {
    height: 60%;
  }

  .main .right-container,
  .coin .right-container {
    height: 40%;
  }

  .content-wrapper {
    min-height: 400px;
  }

  .content {
    padding: 36px;
    font-size: 20px;
  }

  .hero {
    width: 340px;
    height: auto;
  }

  .caption {
    padding: 36px;
    min-width: 80%;
  }

  .bg-layer3 {
    justify-content: space-evenly;
  }

  .ship {
    height: 100%;
    width: 100%;
  }

  #card-carousel {
    min-width: 760px;
    width: 100%;
  }

  .card {
    min-width: 220px;
  }

  .left-arrow,
  .right-arrow {
    display: inline;
    align-self: center;
    font-size: 32px;
    font-family: "Nanum Gothic", sans-serif;
    font-weight: bold;
    color: #4317ad;
    cursor: pointer;
  }

  .left-arrow {
    margin-right: 15px;
  }

  .right-arrow {
    margin-left: 15px;
  }

  .hide-cloud {
    display: none;
  }

  .shipwater {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 4;
  }

  .contact {
    height: 1200px;
    flex-direction: column;
  }

  .contact .left-container {
    flex: 2;
    width: 100%;
  }

  .contact .right-container {
    flex: 1;
    width: 100%;
    align-items: center;
  }

  .contact-form {
    padding: 40px;
  }

  .contact-frame {
    height: 300px;
  }

  .right {
    max-width: 500px;
    min-width: 400px;
    justify-content: space-around;
  }
}

@media screen and (max-width: 768px) {
  .content {
    max-width: 90%;
    padding: 25px;
    font-size: 20px;
  }

  .main .content-wrapper {
    min-height: 320px;
  }

  .caption {
    min-width: 90%;
  }

  .title {
    margin-bottom: 20px;
    font-size: 26px;
    font-weight: 600;
  }

  .text {
    font-size: 20px;
    line-height: 30px;
    text-transform: none;
  }

  .ship {
    transform: translateY(20%);
  }

  .contact {
    height: 1024px;
  }

  .contact .left-container {
    justify-content: start;
  }

  .contact-form {
    max-width: 90%;
    padding: 24px;
  }

  .form-title {
    margin-bottom: 20px;
    font-size: 26px;
    font-weight: 600;
  }

  .line-break {
    display: none;
  }

  .contact-form img {
    margin-right: 20px;
  }

  .footer {
    padding: 20px 30px;
    position: relative;
    flex-direction: column;
  }

  .footer p {
    margin: 10px 0;
    max-width: 90%;
  }

  .right {
    width: 100%;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }

  .list-item {
    margin: 0;
    font-size: 16px;
    line-height: 30px;
    color: var(--white);
  }

  .list-title {
    margin: 5px 0;
  }

  .social-links {
    display: none;
  }

  .social-links-mobile {
    display: flex;
    flex-direction: column;
  }

  .social-item {
    margin: 5px 0;
    display: flex;
    align-items: center;
  }

  .social-links-mobile img {
    height: 24px;
    width: 24px;
    margin-right: 10px;
  }

  .copyright-text {
    position: absolute;
    bottom: 10px;
  }
}

@media screen and (max-width: 600px) {
  .caption {
    padding: 24px;
    font-size: 16px;
  }

  .ship-container {
    width: 100%;
  }

  .card-container {
    width: 100%;
    transform: translateY(15%);
  }

  #card-carousel {
    padding: 0 10px;
    min-width: 100%;
    width: 100%;
  }

  .card {
    min-width: 150px;
  }

  .left-arrow,
  .right-arrow {
    display: inline;
    align-self: center;
    font-size: 28px;
    font-family: "Nanum Gothic", sans-serif;
    font-weight: bold;
    color: #4317ad;
    cursor: pointer;
  }

  .left-arrow {
    margin-right: 0;
  }

  .right-arrow {
    margin-left: 0;
  }

  .card-header img {
    width: 100%;
    height: auto;
  }

  .card-body {
    padding: 10px;
  }

  .card-body p {
    font-size: 15px;
    line-height: 24px;
  }

  .card-list {
    list-style: none;
  }

  .card-list-item {
    margin: 20px 0;
    font-size: 16px;
  }

  .shipwater {
    width: 100%;
    min-height: 180px;
  }
}

@media screen and (max-width: 450px) {
  .card-list-item {
    font-size: 15px;
  }
}

/*********************************    LANDING    ***************************************/
.sub-navbar {
  width: 100%;
  padding: 10px;
  position: fixed;
  top: 70px;
  left: 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  z-index: 50;
  opacity: 0;
}

.sub-nav-list {
  height: 100%;
  min-width: 50%;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.sub-nav-item {
  margin: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease-in;
  opacity: 0;
}

.sub-nav-link {
  height: 100%;
  width: 100%;
  margin: auto;
  font-size: 20px;
  font-weight: 400;
  text-decoration: none;
  color: var(--dark-text);
  display: flex;
  justify-content: center;
  align-items: center;
}

.sub-nav-link:hover {
  color: var(--blue-gem);
  padding-bottom: 0px;
  border-bottom: 2px solid rgba(67, 23, 173, 1);
}

.sub-nav-logo {
  margin: 5px auto;
}

/* Landing */
.landing-main {
  height: 100%;
  background: url("./Assets/layer1.png") no-repeat top left;
  background-size: 60% 100%;
}

.landing-main .left-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.landing-main .right-container {
  justify-content: flex-end;
}

.landing-main .right-container::after {
  /* content: url("./Assets/frame-right.png"); */
  position: absolute;
  bottom: 0;
  right: 0;
}

.landing-hero {
  width: 550px;
  height: auto;
  z-index: 5;
}

.right-frame {
  position: absolute;
  width: 240px;
  height: 320px;
  border: 4px solid rgba(67, 23, 175, 0.15);
  border-radius: 12px;
  clip-path: polygon(80% 0, 100% 0, 100% 100%, 0 100%, 0 80%, 80% 80%);
  transform: translate(5%, -55%);
}

.frame1,
.frame2 {
  align-self: start;
  width: 50%;
  min-height: 60px;
}

.playstore {
  margin-top: 30px;
  margin-right: 30px;
  border-radius: 6px;
}

.sub-text {
  font-size: 15px;
  line-height: 5px;
  color: var(--text);
  margin-top: 25px;
}

/*Follow Star*/
.landing-followStar {
  height: 100%;
  background: url("./Assets/about_us_followStar.png") no-repeat top left;
  background-size: 100% 100%;
}

.left-frame {
  position: absolute;
  width: 270px;
  height: 320px;
  border: 4px solid rgba(67, 23, 175, 0.15);
  border-radius: 12px;
  clip-path: polygon(20% 0, 20% 80%, 100% 80%, 100% 100%, 0 100%, 0 0);
  transform: translate(-25%, 30%);
}

/*Star Honor */
.landing-starHonor {
  height: 100%;
  background: url("./Assets/about_us_starHonor.png") no-repeat top left;
  background-size: 100% 100%;
}

/* live events */
.landing-liveEvent {
  height: 100%;
  background: url("./Assets/about_us_liveEvents.png") no-repeat top left;
  background-size: 100% 100%;
}

.liveevents-frame2 {
  margin-bottom: 17rem;
  margin-right: -16rem;
  height: 255px;
  width: 275px;
}

/* Premium Content */
.landing-premiumContent {
  height: 100%;
  background: url("./Assets/about_us_premiumContent.png") no-repeat top left;
  background-size: 100% 100%;
}

.landing-premiumContent .right-container {
  justify-content: flex-end;
}

/* Star Memorabilia */
.landing-starMemorabilia {
  height: 100%;
  background: url("./Assets/about_us_starMemorabilia.png") no-repeat top left;
  background-size: 100% 100%;
}

@media only screen and (max-width: 1200px) {
  .sub-nav-link {
    font-size: 18px;
  }

  .landing-main {
    height: 1200px;
  }

  .landing-followStar,
  .landing-starHonor,
  .landing-liveEvent,
  .landing-premiumContent,
  .landing-starMemorabilia {
    height: 1100px;
  }

  .landing-main,
  .landing-followStar,
  .landing-starHonor,
  .landing-liveEvent,
  .landing-premiumContent,
  .landing-starMemorabilia {
    flex-direction: column;
  }

  .left-container {
    width: 100%;
    height: 60%;
  }

  .right-container {
    width: 100%;
    height: 40%;
  }

  .landing-followStar .left-container,
  .landing-followStar .right-container,
  .landing-starHonor .left-container,
  .landing-starHonor .right-container,
  .landing-liveEvent .left-container,
  .landing-liveEvent .right-container,
  .landing-premiumContent .left-container,
  .landing-premiumContent .right-container,
  .landing-starMemorabilia .left-container,
  .landing-starMemorabilia .right-container {
    flex: 1;
  }

  .frame1,
  .frame2 {
    width: 50%;
    min-height: 50px;
  }

  .landing-hero {
    width: 360px;
    height: auto;
  }

  .right-frame {
    width: 160px;
    height: 200px;
    transform: translate(5%, -55%);
  }

  .challenge-cuate {
    height: 450px;
    width: 380px;
  }

  .starhonor-image {
    width: 400px;
    height: auto;
  }

  .PC-image {
    width: 400px;
    height: auto;
  }
}

@media screen and (max-width: 768px) {
  .left-container,
  .right-container {
    flex: 1;
  }

  .sub-nav-list {
    min-width: 90%;
    justify-content: space-evenly;
  }

  .sub-nav-item {
    margin: 0 5px;
  }

  .sub-nav-link {
    font-size: 14px;
  }

  .landing-main {
    height: 1100px;
  }

  .frame1 {
    margin-top: 120px;
  }

  .frame1,
  .frame2 {
    width: 60%;
    min-height: 50px;
  }

  .landing-hero {
    width: 320px;
    height: auto;
  }

  .right-frame {
    transform: translate(0%, -50%);
  }

  .left-frame {
    height: 250px;
    width: 200px;
    transform: translate(-30%, 35%);
  }

  .challenge-cuate {
    height: 400px;
    width: 320px;
    z-index: 5;
  }
}

@media screen and (max-width: 500px) {
  .sub-nav-list {
    min-width: 100%;
    justify-content: space-evenly;
  }

  .sub-nav-item {
    margin: 0;
  }

  .sub-navbar {
    padding: 5px;
  }

  .sub-nav-link {
    font-size: 11px;
  }

  .sub-nav-link:hover {
    color: var(--blue-gem);
    padding-bottom: 0px;
    border-bottom: 1px solid rgba(67, 23, 173, 1);
  }

  .landing-main {
    height: 1024px;
  }

  .right-frame {
    height: 160px;
    width: 120px;
    transform: translate(10%, -55%);
  }

  .left-frame {
    height: 200px;
    width: 150px;
    transform: translate(-45%, 45%);
  }

  .content .title {
    font-size: 24px;
  }

  .content .text {
    font-size: 16px;
  }

  .sub-text {
    font-size: 14px;
  }

  .playstore,
  .appstore {
    width: 120px;
  }

  .playstore {
    margin-right: 15px;
  }

  .contact .right-container img {
    width: 320px;
    height: 240px;
  }

  .form-input {
    max-width: 200px;
    min-width: 140px;
  }

  .contact-form {
    padding: 20px;
  }

  .contact-form p + img,
  .contact-form p + img + img {
    width: 120px;
    margin-right: 15px;
  }

  .contact-frame {
    width: 300px;
    height: 220px;
  }

  .landing-hero {
    width: 280px;
    height: auto;
  }

  .challenge-cuate {
    width: 300px;
    height: auto;
  }

  .starhonor-image {
    width: 350px;
    height: auto;
  }

  .liveevents-image {
    width: 320px;
    height: auto;
  }

  .PC-image {
    width: 300px;
    height: auto;
  }

  .SM-image {
    width: 300px;
    height: auto;
  }

  .form-title {
    font-size: 24px;
  }

  .form-text {
    font-size: 16px;
    line-height: 150%;
  }

  .form-input {
    font-size: 16px;
  }

  .form-input::placeholder {
    color: var(--light-text);
    font-size: 15px;
  }

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

/* Card view */

.cardview-bg1 {
  min-height: 900px;
  height: 100%;
  width: 100%;
  background: url("../Assets/layer1.png") no-repeat top left;
  background-size: 60% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

.cardview-bg2 {
  min-height: 900px;
  height: 100%;
  width: 100%;
  background: url("./Assets/layer3.png") no-repeat bottom right;
  background-size: 40% 80%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-card {
  max-width: 416px;
  height: 621px;
  width: 100%;
  margin: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 4px;
  background: #ffffff;
  border: 1px solid rgba(189, 189, 189, 0.3);
  box-sizing: border-box;
  box-shadow: 0px 16px 16px rgb(97 97 97 / 20%);
}

.right-card {
  max-width: 416px;
  width: 100%;
  height: 621px;
  padding: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 4px;
  background: #ffffff;
  border: 1px solid rgba(189, 189, 189, 0.3);
  box-sizing: border-box;
  box-shadow: 0px 16px 16px rgb(97 97 97 / 20%);
}

/* cardview-video */
.leftcard-header {
  display: flex;
  align-items: flex-start;
  position: relative;
}

.card-video {
  width: 100%;
}

.menu {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu img {
  width: 4px;
  margin: 1px 0;
}

.video-stars {
  position: absolute;
  bottom: 15px;
  left: 15px;
}

.volume {
  position: absolute;
  bottom: 15px;
  right: 10px;
  padding: 8px;
  border-radius: 50%;
  background: rgba(87, 83, 83, 0.61);
  display: flex;
  align-items: center;
}

.volume-icon {
  height: 12px;
  width: 16px;
}

.leftcard-body {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.card-avatar {
  margin: 10px 0;
  width: 100%;
  display: flex;
  align-items: center;
}

.avatar-title {
  margin-left: 10px;
  font-size: 18px;
}

.news-logo-bg {
  width: 32px;
  height: 32px;
}

.news-logo {
  font-size: 18px;
  color: #ffffff;
  transform: translateX(-115%);
}

.news-title {
  font-size: 18px;
  color: #212121;
  transform: translateX(-15%);
}

.card-title {
  margin: 16px 0;
  width: 90%;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #212121;
}

.card-info {
  width: 100%;
  font-size: 14px;
  line-height: 24px;
  color: #363240;
}

.card-star-coin {
  display: none;
}

.leftcard-footer {
  margin-top: auto;
  margin-bottom: 12px;
  height: 30px;
  width: 100%;
  justify-self: flex-end;
}

.store-info {
  display: none;
}

/* Comment Card */
.comments-scroll {
  position: absolute;
  right: -28px;
  top: 100px;
  border: 2px solid #bdbdbd;
  background: #bdbdbd;
  transform: rotate(90deg);
  border-radius: 12px;
  height: 4px;
  width: 60px;
}

.rightcard-header {
  width: 100%;
  font-weight: 500;
  font-size: 18px;
  color: #838383;
}

.rightcard-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.comment {
  width: 100%;
  margin-top: 16px;
  display: flex;
}

.comment-avatar {
  margin-right: 24px;
}

.comment-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.comment-body-title {
  margin-bottom: 8px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.person-name {
  font-weight: 600;
  font-size: 16px;
  color: #201734;
}

.comment-time {
  font-size: 12px;
  color: #7e788b;
}

.comment-text {
  width: 90%;
  font-size: 14px;
  line-height: 24px;
  color: #363240;
}

.comment-reaction {
  margin: 10px 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.reply-icon {
  width: 16px;
  height: 15px;
  margin-right: 10px;
}

.reply {
  margin-right: 10px;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  color: #7e788b;
}

.thumbs-up {
  margin-right: 10px;
  width: 14px;
  height: 14px;
}

.like {
  margin-right: 10px;
  font-weight: 500;
  font-size: 16px;
  color: #7e788b;
}

.expire-text {
  position: absolute;
  top: 18px;
  font-style: normal;
  font-weight: normal;
  font-size: 17px;
  line-height: 17px;
  color: #979797;
}

@media screen and (max-width: 500px) {
  .expire-text {
    /* min-height: 100vh; */
    top: 8px;
  }
}

.replies {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.reply-line {
  margin-right: 10px;
  width: 24px;
}

.view-replies {
  font-size: 11px;
  color: #7e788b;
}

/* Audio */
.bg-head {
  width: 100%;
  position: absolute;
  background: linear-gradient(
    180deg,
    rgba(32, 23, 52, 07) -12.96%,
    rgba(32, 23, 52, 0) 0%
  );
  mix-blend-mode: normal;
  border-radius: 4px 4px 0px 0px;
}

.audio-bg {
  width: 100%;
  height: auto;
  position: absolute;
  bottom: 0;
}

.pause-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0%);
}

.full-length {
  position: absolute;
  top: 80%;
}

.ongoing-length {
  position: absolute;
  top: 80%;
}

.time1 {
  position: absolute;
  bottom: 10px;
  left: 20px;
  color: #7e788b;
}

.time2 {
  position: absolute;
  bottom: 10px;
  right: 20px;
  color: #7e788b;
}

/* Image  */

.vertical-menu {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
}

/* Event */
.event {
  align-items: flex-start;
  justify-content: space-between;
}

.event-details {
  margin-left: auto;
  display: flex;
}

.event-date {
  margin-top: 5px;
  font-size: 14px;
}

.date-time-divider {
  margin: 0 10px;
}

.timing {
  list-style: none;
}

.timing li {
  margin: 5px 0;
  display: flex;
  align-items: center;
}

.timing li p {
  font-size: 14px;
  color: #757575;
}

.timing img {
  height: 15px;
  margin-right: 5px;
}

/* Stardub */
.stardub-bg {
  position: absolute;
  left: -16px;
}

.stardub-play-button {
  position: absolute;
  width: 109.73px;
  height: 109.44px;
  left: 155px;
  top: 222px;
}

.stardub-footer {
  position: absolute;
  width: 416px;
  height: 175px;
  top: 435px;
}

.poll-card {
  width: 100%;
  padding: 16px 16px 0 16px;
  display: flex;
  flex-direction: column;
}

.poll-question {
  margin-bottom: 12px;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: #363240;
  margin-top: 36px;
}

.cardveiw-poll-options {
  display: flex;
  flex-direction: column;
}

.poll-option {
  width: 90%;
  margin: 5px 0;
  padding: 10px 16px;
  background: #f6f6f6;
  border: 1px solid #4317af;
  box-sizing: border-box;
  border-radius: 4px;
  font-weight: 500;
  font-size: 16px;
  color: #4317af;
  display: flex;
  align-items: center;
}

.image-container {
  margin: 5px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.star-images {
  display: flex;
  align-items: center;
}

.star-images img {
  margin: 10px 10px 10px 0;
}

.more-images {
  color: #757575;
  margin-left: 10px;
}

.poll-options-image {
  display: flex;
}

.poll-options-image span {
  margin-right: 16px;
}

.poll-options-image p {
  margin: 5px 0;
  font-size: 14px;
  color: #4317af;
}

.starwars-image {
  width: 90%;
  margin: 5px 0;
}

@media screen and (max-width: 900px) {
  .cardview-bg2 {
    padding-top: 120px;
    flex-direction: column;
    background-size: contain;
  }

  .right-card {
    margin: 16px;
  }
}

@media screen and (max-width: 500px) {
  .cardview-bg1 {
    min-height: 800px;
    background: none;
    overflow: hidden;
  }

  .cardview-bg2 {
    padding-top: 70px;
    height: 100%;
    background: none;
    background-color: #fff;
    flex-direction: column;
    justify-content: flex-start;
  }

  .left-card {
    margin: 0;
    padding: 10px;
    max-width: 500px;
    width: 100%;
    height: auto;
    border: none;
    box-shadow: none;
  }

  .leftcard-body {
    padding: 0;
    margin-bottom: 20px;
  }

  .store-info {
    min-height: 80px;
    font-size: 15px;
    color: #999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
  }

  .video-stars {
    display: none;
  }

  .card-star-coin {
    display: flex;
    align-items: center;
    font-weight: 500;
    margin-bottom: 20px;
  }

  .card-star-coin img {
    height: 20px;
    width: 20px;
    margin-right: 10px;
  }

  .poll-card {
    padding: 0;
  }

  .poll-option {
    width: 100%;
  }
  .starwars-image {
    width: 100%;
  }

  .right-card {
    display: none;
  }

  .card-avatar {
    margin: 12px 0;
  }

  #stardub {
    padding: 0;
  }

  .stardub-bg {
    overflow: hidden;
    width: 110%;
    height: auto;
    min-height: 640px;
    min-width: 420px;
    left: -20px;
  }

  .stardub-footer {
    width: 100%;
    height: auto;
  }

  .avatar-title,
  .news-title {
    font-size: 16px;
  }

  .card-info {
    font-size: 14px;
    line-height: 20px;
  }
}

@media screen and (max-width: 400px) {
  .card-info {
    font-size: 13px;
    line-height: 18px;
  }
}

/* Sign-Up */

.signup-bg1 {
  background: url(./Assets/layer7.png) no-repeat bottom left;
  display: flex;
  min-height: 1024px;
  height: 100%;
  width: 100%;
  background-size: 40% 70%;
  align-items: center;
  justify-content: center;
}

.signup-bg2 {
  min-height: 1024px;
  height: 100%;
  width: 100%;
  background: url(./Assets/layer6.png) no-repeat top right;
  background-size: 70% 65%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signup-card {
  height: 656px;
  width: 1115px;
  left: 0%;
  margin-top: -20%;
  flex-direction: column;
  justify-content: flex-start;
  top: 59px;
  border-radius: 46px;
  position: relative;
  display: flex;
  align-content: center;
  right: 11.25%;
  bottom: 99.18%;
  background: linear-gradient(180.06deg, #fffeff -4.31%, #d48bff 99.95%);
  box-shadow: 6px 6px 4px rgb(0 0 0 / 25%);
}
.signup-image {
  position: absolute;
  width: 445px;
  height: 395px;
  left: 100px;
  top: 225px;
}
.signup-logo {
  position: absolute;
  height: 42px;
  width: 41.68px;
  left: 300px;
  top: 95px;
}
.register-title {
  position: absolute;
  left: 168px;
  top: 165px;
  font-style: normal;
  font-weight: 500;
  font-size: 27px;
  line-height: 22px;
  letter-spacing: 0.04em;
  color: #000000;
}
.login-title {
  left: 185px;
}
.registration-heading {
  position: absolute;
  left: 30px;
  top: 123px;
  font-style: normal;
  font-weight: 500;
  font-size: 28px;
  line-height: 30px;
  text-align: center;
  letter-spacing: 0.04em;
  color: #000000;
}
.signup-rightCard {
  padding: 20px;
  position: absolute;
  height: 656px;
  width: 474px;
  left: 640px;
  background: #ffffff;
  border-top-right-radius: 46px;
  border-bottom-right-radius: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-heading {
  font-style: normal;
  font-weight: 500;
  font-size: 26px;
  line-height: 30px;
  text-align: center;
  letter-spacing: 0.04em;
  color: #000000;
}
.register-form-input {
  position: absolute;
  height: 50px;
  width: 345px;
  left: 76px;
  top: 220px;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  font-size: 20px;
  padding-left: 3.8rem;
}
.login-rightCard {
  padding: 20px;
  position: absolute;
  height: 656px;
  width: 474px;
  left: 640px;
  background: #ffffff;
  border-top-right-radius: 46px;
  border-bottom-right-radius: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-header {
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.register-header {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.error-message {
  max-width: 345px;
  margin: 50px 0 20px 0;
  font-weight: 500;
  font-size: 20px;
  color: #ed4337;
  opacity: 0;
}
.show {
  opacity: 1;
}
.login-form {
  flex: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
}
.register-form {
  margin-top: 30px;
  flex: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
}
.form-group {
  position: relative;
  margin: 10px 0;
}
.login-name {
  height: 50px;
  width: 345px;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  font-size: 20px;
  padding-left: 3.8rem;
}
.login-password {
  height: 50px;
  width: 345px;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  font-size: 20px;
  padding-left: 3.8rem;
}
.login-btn {
  margin-top: 50px;
  background: #4317ad;
  border: 0px;
  border-radius: 5px;
  width: 345px;
  height: 45px;
  color: white;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  font-style: normal;
  letter-spacing: 0.06em;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.input-icon {
  position: absolute;
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
  height: 24px;
}
.register-user-icon {
  position: absolute;
  top: 232px;
  left: 90px;
  height: 24px;
  z-index: 3;
}

.register-form-input::placeholder {
  position: absolute;
  color: #000000;
  font-size: 17px;
  font-style: normal;
  font-weight: 300;
  left: 60px;
  top: 15px;
}

.register-btn {
  margin-top: 20px;
  background: #4317ad;
  border: 0px;
  border-radius: 5px;
  width: 345px;
  height: 45px;
  color: white;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  font-style: normal;
  letter-spacing: 0.06em;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

/* Terms & Conditions */
.tnc-section {
  height: 100%;
}

.TndC-bg1 {
  background: url(./Assets/TndC-header-bg.png) no-repeat top;
  display: flex;
  min-height: 1024px;
  height: 100%;
  width: 100%;
  background-size: 100% 45%;
  align-items: center;
  justify-content: center;
}

.TndC-bg2 {
  background: url(./Assets/layer6.png) no-repeat top right;
  display: flex;
  min-height: 1024px;
  height: 100%;
  width: 100%;
  background-size: 70% 50%;
  align-items: center;
  justify-content: center;
}

.TndC-bg3 {
  position: absolute;
  background: url(./Assets/layer7.png) no-repeat bottom left;
  display: flex;
  height: 100%;
  width: 100%;
  background-size: 40% 60%;
  align-items: center;
  justify-content: center;
}

.TndC-bg4 {
  position: absolute;
  background: url(./Assets/layer8.png) no-repeat center left;
  display: flex;
  min-height: 1024px;
  height: 100%;
  width: 100%;
  background-size: 49.8% 70%;
  align-items: center;
  justify-content: center;
  top: 717px;
}

.TndC-bg5 {
  background: url(./Assets/layer9.png) no-repeat bottom right;
  color: #ffecfd;
  min-height: 2100px;
  height: 100%;
  width: 100%;
  background-size: 50% 66%;
  align-items: center;
  justify-content: center;
}

.TndC-image {
  position: absolute;
  left: 54.81%;
  top: 6%;
}

.header-info {
  position: absolute;
  left: 12.15%;
  top: 8%;
}

.header-info-text {
  width: 424.73px;
  font-style: normal;
  font-weight: 500;
  font-size: 21px;
  line-height: 32px;
  color: #65626b;
  margin-top: 6px;
  margin-left: 4px;
}

.read-TndC {
  position: absolute;
  top: 225px;
  color: #4317ad;
  border-radius: 2px;
  width: 205px;
  height: 22px;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 18px;
  text-align: center;
  margin-left: 4px;
}

.TndC-info {
  position: absolute;
  left: 27%;
  top: -32%;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #838383;
  width: 180px;
  height: 24px;
}

.TndC-info-text {
  font-style: normal;
  font-weight: 500;
  font-size: 21px;
  width: 295px;
  margin-top: 25px;
}

.TndC-p-text {
  width: 776px;
  margin-top: 20px;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

.TndC-logo {
  position: absolute;
  top: 44rem;
}

.TndC-divider {
  position: absolute;
  left: 65px;
  top: 45.1rem;
}

.TndC-info2 {
  margin-top: 8.5rem;
}

.check-TndC {
  margin-top: 30px;
  width: 15px;
  height: 15px;
  background: #ffffff;
  border: 1px solid #000000;
  box-sizing: border-box;
  cursor: pointer;
}

.check-text {
  margin-left: 25px;
  margin-top: -19px;
  width: 330px;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  color: #000000;
}

.verify-account {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  top: 5rem;
  background: #4317ad;
  color: white;
  border-radius: 3px;
  height: 38px;
  padding: 8px 16px;
  border: 0px;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  width: 152px;
}

.TndC-declaration {
  position: absolute;
  display: flex;
  justify-content: center;
  flex-direction: column;
  top: 25rem;
  left: 5px;
}

/* verify page */
.verify-card {
  position: absolute;
  width: 704px;
  height: 664px;
  left: 43%;
  right: 14.72%;
  top: 8.89%;
  bottom: 26.27%;
  background: #ffffff;
  box-shadow: 0px 6px 28px rgba(0, 0, 0, 0.25);
}

.verify-logo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 41.68px;
  height: 42px;
  left: -38%;
  top: -425px;
}

.verify-thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 171px;
  height: 155px;
  left: -17%;
  margin-top: -16%;
}

.verify-card-content {
  position: absolute;
  left: 20%;
  top: 20%;
}

.verify-heading {
  top: 20%;
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 26px;
  color: #363240;
}

.verify-subText1 {
  position: absolute;
  width: 370px;
  top: 5.5rem;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
  color: #65626b;
}

.verify {
  text-transform: none;
  top: 250px;
  left: 0%;
  width: 382px;
  height: 50px;
  font-size: 16px;
  box-shadow: none;
}

.verify-subText2 {
  position: absolute;
  top: 335px;
  width: 560px;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 56px;
  color: #363240;
}

.verify-subText2 span {
  color: #fc3fa8;
}

.verify-login {
  position: absolute;
  width: 90px;
  height: 36px;
  left: 28rem;
  top: 29rem;
  background: #fc3fa8;
  border: none;
  box-shadow: 0px 2px 5px rgb(255 62 166 / 50%);
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 1px;
  color: #ffffff;
}

.verify-otp {
  margin-top: 120px;
  margin-right: 25px;
  width: 50px;
  height: 56px;
  background: #e3e3e3;
  box-shadow: 0px 2px 0px -1px #d7d5db;
  border: none;
  text-align: center;
  font-size: 24px;
}

/* Premium Videos */
.navbar-personImg {
  position: fixed;
  display: flex;
  width: 48px;
  height: 48px;
  left: 44rem;
  top: 10px;
}
.pv-section {
  background: url(./Assets/PV-bg1.png) no-repeat bottom right;
  background-size: 80% 100%;
  min-height: 1024px;
  height: 100%;
  width: 100%;
}
.PV-bg1 {
  margin-top: 120px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.add-video {
  position: relative;
  top: -20px;
  left: 580px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 50px;
  border-radius: 28px;
  background: #4317ac;
  font-size: 62px;
  color: white;
  border: none;
}
.pv-gallery {
  padding: 50px;
  width: 1300px;
  height: auto;
  background-image: linear-gradient(
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 14.37%,
    rgba(121, 64, 146, 0.09) 100%
  );
  box-shadow: 0px 6px 28px rgb(0 0 0 / 25%);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 100px;
  grid-row-gap: 50px;
}
.video-tile {
  position: relative;
}
.video {
  width: 100%;
  opacity: 0.5;
  background: #ffffff;
  border-radius: 15px;
}
.video-menu {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.video-menu img {
  margin-bottom: 15px;
  cursor: pointer;
}
.like-video {
  margin-top: 15px;
}
.video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 87px;
  height: 87px;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.video-caption {
  margin-top: 10px;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 125%;
  color: #000000;
}

.nav-profilelogo {
  font-size: 20px;
  font-weight: 400;
  text-decoration: none;
  color: var(--dark-text);
  display: flex;
  align-items: center;
}

.nav-profilelogo img {
  width: 49px;
  height: 49px;
  margin-right: 10px;
}

/* Add Premium Video */
.add-pv-section {
  position: absolute;
  top: 0;
  min-height: 1024px;
  width: 100%;
}

.add-pv-form {
  position: relative;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
  padding: 70px;
  width: 1075px;
  height: 512px;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.85625) 14.37%,
    #f4daff 100%
  );
  box-shadow: 0px 6px 28px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.add-pv-form .form-group {
  margin-bottom: 35px;
  display: flex;
}

.add-pv-input {
  width: 950px;
  height: 56px;
  background: #ffffff;
  box-shadow: 0px 5px 4px -2px rgba(67, 23, 175, 0.28), 0px 2px 0px -1px #4317af;
  border: none;
  outline: none;
  font-size: 18px;
  padding: 8px 16px;
  position: relative;
}

.add-pv-input2 {
  width: 454px;
  height: 56px;
  background: #ffffff;
  box-shadow: 0px 5px 4px -2px rgba(67, 23, 175, 0.28), 0px 2px 0px -1px #4317af;
  border: none;
  outline: none;
  font-size: 18px;
  padding: 8px 16px;
  position: relative;
}

.add-pv-input-icon {
  height: 36px;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.spacer {
  width: 43px;
}

.add-pv-input-wrapper {
  position: relative;
}

.add-pv-submit {
  margin-top: 10px;
  border: none;
  outline: none;
  font-size: 18px;
  padding: 8px 16px;
  color: #ffffff;
  background: #4317ad;
  border-radius: 2px;
  cursor: pointer;
}

/* profile-landingpage */
.profile-landing {
  background: linear-gradient(180deg, #ffffff 0%, #ede0f3 100%) no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
}
.profile-landing-section {
  margin-top: 70px;
  width: 100%;
  min-height: 1600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url(./Assets/profile-bg1.png) no-repeat top right;
  background-size: 75% 100%;
}
.profile-landing-bg1 {
  width: 100%;
}
.page-top {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 30px;
}

.bg-gradient {
  position: absolute;
  top: 0;
  height: 200px;
  width: 100%;
  background: linear-gradient(
    180deg,
    rgba(183, 28, 248, 0.47) 0%,
    rgba(215, 120, 255, 0.08) 100%
  );
}
.profile-icon {
  position: absolute;
  top: 20px;
  left: 53%;
}
.profile-image {
  z-index: 2;
}
.profile-name {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 40px;
  line-height: 47px;
  color: #000000;
}
.add-photo {
  position: absolute;
  width: 115px;
  height: 115px;
  left: 52%;
  top: 180px;
  z-index: 3;
  cursor: pointer;
}
.profile-options {
  margin: auto;
  display: flex;
  justify-content: space-evenly;
  align-content: center;
  width: 845px;
  height: 171px;
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.3) 14.37%,
    rgba(113, 30, 148, 0.05) 100%
  );
  box-shadow: 0px 6px 28px rgba(0, 0, 0, 0.25);
}
.profile-options-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.profile-options-img {
  width: 51px;
  height: 51px;
}
.profile-options-number {
  font-style: normal;
  font-weight: 400;
  font-size: 32px;
  line-height: 150%;
  color: #000000;
}
.profile-options-text {
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 150%;
  color: #777777;
}
.profile-details {
  display: flex;
  justify-content: center;
}
.profile-info {
  height: 320px;
  margin: 10px 5px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
  width: 358px;
  height: 322px;
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.3) 14.37%,
    rgba(113, 30, 148, 0.05) 100%
  );
  box-shadow: 0px 6px 28px rgb(0 0 0 / 25%);
}
.profile-bio {
  height: 320px;
  margin: 10px 5px;
  padding: 30px;
  display: flex;
  justify-content: center;
  align-content: center;
  width: 477px;
  height: 322px;
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.3) 14.37%,
    rgba(113, 30, 148, 0.05) 100%
  );
  box-shadow: 0px 6px 28px rgb(0 0 0 / 25%);
}
.info-data {
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 150%;
  color: #000000;
}
.info-data-header {
  display: flex;
  justify-content: space-between;
}
.basic-info {
  text-decoration-line: underline;
  cursor: pointer;
}
.edit-info {
  color: #fc3fa8;
  text-decoration-line: underline;
  border: none;
  background: none;
  font-size: 18px;
  cursor: pointer;
}
.profile-bio .info-data-header {
  margin-bottom: 40px;
}
.info-item {
  margin: 20px 0;
  display: flex;
}
.info-item img {
  margin-right: 20px;
}
.gallery-container {
  margin: auto;
  display: flex;
  justify-content: center;
}
.profile-gallery {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  width: 690px;
  height: 240px;
  background: linear-gradient(180deg, #ffffff 0%, #f4daff 100%);
}
.tile {
  margin: 4px;
}
.option-tabs {
  margin-top: 10px;
  width: 845px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.opt-tab {
  flex: 1;
  padding: 12px 30px;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  color: #ef5da8;
  background-color: #ffffff;
  cursor: pointer;
  border-top: 2px solid transparent;
  border-bottom: 2px solid #4317ac;
  border-right: 2px solid #4e4d4d59;
  border-radius: 5px 5px 0px 0px;
}

.selected {
  box-sizing: border-box;
  border: 2px solid #4317ac;
  border-radius: 5px 5px 0px 0px;
}
.all-photos {
  position: relative;
  width: 690px;
  height: 26px;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.see-photos {
  width: 115px;
  height: 18px;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 18px;
  display: flex;
  align-items: center;
  text-align: center;
  text-decoration-line: underline;
  color: #fc3fa8;
  border: none;
  background: none;
  cursor: pointer;
}
.upload-icon {
  position: absolute;
  width: 110px;
  height: 110px;
  right: 10px;
  top: -55px;
}
.profile-landing-bg2 {
  background: url(./Assets/profile-bg4.png) no-repeat bottom right;
  min-height: 1200px;
  width: 100%;
  background-size: auto 90%;
  align-items: center;
  justify-content: center;
}
.profile-landing-bg3 {
  background: url(./Assets/profile-bg3.png) no-repeat bottom left;
  display: flex;
  height: 100%;
  width: 100%;
  background-size: 60% 100%;
  align-items: center;
  justify-content: center;
}

/* edit profile */

.editprofile-bg1 {
  min-height: 1024px;
  height: 100%;
  width: 100%;
  background: url("./Assets/editprofile-bg1.png") no-repeat top right;
  background-size: 50% 94%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  overflow: hidden;
}
.editprofile-bg2 {
  min-height: 1024px;
  height: 100%;
  width: 100%;
  background: url("./Assets/editprofile-bg2.png") no-repeat bottom left;
  background-size: 35% 65%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  overflow: hidden;
}

.edit-profile-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-content: center;
  width: 1282px;
  height: 746px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 14.37%,
    rgba(244, 218, 255, 0) 100%
  );
  box-shadow: 0px 6px 28px rgb(0 0 0 / 25%);
}

.edit-profile-content {
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 100px;
}

.card-heading {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 200px;
  top: 50px;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 21px;
  text-decoration-line: underline;
  color: #000000;
}

.edit-profile-form {
  position: absolute;
  display: flex;
  flex-direction: column;

  width: 474px;
  height: 56px;
  border: none;
}
.edit-profile-fields {
  position: absolute;
  width: 474px;
  height: 56px;
  top: 130px;
  font-size: 20px;
  font-style: normal;
  font-weight: normal;
  line-height: 21px;
  color: black;
  padding-left: 24px;
  border: none;
  box-shadow: 0px 5px 4px -2px rgb(67 23 175 / 28%), 0px 2.1px 0px -1px #4317af;
}
.edit-field2 {
  top: 230px;
}
.edit-field3 {
  top: 330px;
}
.edit-field4 {
  left: 560px;
}
.edit-field6 {
  top: 230px;
  left: 560px;
}
.edit-field5 {
  top: 430px;
  width: 683px;
  height: 210px;
  padding-bottom: 160px;
}

.save-edit-fields {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  left: 32rem;
  top: 42rem;
  width: 72px;
  height: 38px;
  background: #4317ad;
  border-radius: 2px;
  color: white;
  border: none;
  font-size: 18px;
}

/* PLAN NEW PAGE */
.plan-section {
  margin-top: 70px;
  background-color: #ffffff;
}

.container {
  background: url("./assets/B1.png") no-repeat top right;
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.top {
  min-height: 450px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: url("./assets/Layer%203.png") no-repeat top right;
  background-size: 70% 110%;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-size: 20px;
  line-height: 32px;
  text-align: center;
  color: #7f7b86;
  border-bottom: 1px solid #000;
}

.top p {
  margin-top: 50px;
  max-width: 968px;
  text-align: center;
  text-transform: capitalize;
  color: #65626b;
}

.plan-input {
  margin-top: 30px;
  margin-left: 15px;
  width: 940px;
  height: 56px;
  font-size: 18px;
  font-style: normal;
  font-weight: normal;
  line-height: 21px;
  color: black;
  padding-left: 24px;
  border: none;
  box-shadow: 0px 5px 4px -2px rgb(67 23 175 / 28%), 0px 2.1px 0px -1px #4317af;
}

.plan-card-section {
  overflow: visible;
  position: absolute;
  top: 550px;
  width: 100%;
  min-height: 1100px;
  background: url("./assets/plan-layer-2.png") no-repeat bottom left;
  background-color: #ffffff;
  background-size: auto 90%;
  display: flex;
  justify-content: center;
}

.plan-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  min-height: 500px;
  width: 100%;
  background: url("./assets/footer-img.png") no-repeat bottom left;
  background-size: 100% 100%;
}

.plan-card-gallery {
  position: relative;
  top: -170px;
  left: -20px;
  max-height: 70%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  row-gap: 50px;
  column-gap: 25px;
  z-index: 3;
  /* transform: translateY(-20%); */
}

.plan-card {
  padding: 30px;
  height: 416px;
  width: 513px;
  background: #ffffff;
  box-shadow: 6px 6px 4px #eee3f5;
  border-radius: 41px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.plan-card-header {
  width: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.title-wrapper {
  max-width: 130px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.daily {
  max-width: 80px;
}

.title-wrapper h4 {
  margin: 5px 0;
  width: 100%;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
}

.ellip {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #000;
}

.num {
  font-weight: 600;
  margin-left: 10px;
  font-size: 18px;
}

.num .crossed {
  margin-right: 10px;
  font-weight: 500;
  color: #887777;
  position: relative;
  /* text-decoration: line-through; */
}

.num .crossed::after {
  content: "";
  position: absolute;
  top: 48%;
  left: -10%;
  height: 1px;
  width: 125%;
  background-color: #887777;
}

.plan-card-body {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.para {
  margin: 30px auto 10px auto;
  font-size: 15px;
  color: #7e788b;
}

.sub-li {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 24px;
  color: #7e788b;
  font-size: 16px;
  font-weight: 500;
}

.pie {
  position: relative;
  top: -18px;
  right: 26px;
}

.upload {
  margin: auto;
  margin-top: 5px;
  background: #fc3fa8;
  display: flex;
  color: white;
  border: none;
  font-size: 16px;
  padding: 8px 16px;
  border-radius: 2px;
  cursor: pointer;
}

.checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 22px;
  width: 22px;
  background: #ffffff;
  border: 1px solid #616161;
  box-sizing: border-box;
  border-radius: 6px;
  margin-right: 10px;
  cursor: pointer;
}

.tick {
  position: absolute;
  left: 2px;
  opacity: 0;
  pointer-events: none;
}

.checkbox:checked + .tick {
  opacity: 1;
}

.checkbox:checked + .tick + label {
  color: #000;
}

.selected-card {
  padding: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f4daff 100%);
  box-shadow: 6px 6px 4px #b478bd;
}

.selected-card .para {
  margin: 20px auto 0 auto;
  font-weight: 500;
  color: #000;
}

.slider-container {
  margin-top: 24px;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 200px;
  height: 4px;
  border-radius: 8px;
  outline: none;
  background: #d3d3d3;
  cursor: pointer;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  cursor: pointer;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #c1c9d2;
  box-sizing: border-box;
  box-shadow: 0px 2px 5px rgba(60, 66, 87, 0.08),
    0px 1px 1px rgba(0, 0, 0, 0.12);
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  cursor: pointer;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #c1c9d2;
  box-sizing: border-box;
  box-shadow: 0px 2px 5px rgba(60, 66, 87, 0.08),
    0px 1px 1px rgba(0, 0, 0, 0.12);
}

.slider::-ms-fill-lower {
  background: #fc3fa8;
}

.slider::-webkit-slider-thumb::before {
  content: "10";
  position: absolute;
  top: 0;
  left: 0;
}

.custom {
  margin-top: 10px;
}

.custom-input {
  visibility: hidden;
  width: 300px;
  font-size: 18px;
  padding: 9px 16px;
  margin: 0 25px;
  border: none;
  outline: none;
  background: #ffffff;
  box-shadow: 0px 5px 4px -2px rgba(67, 23, 175, 0.28), 0px 2px 0px -1px #4317af;
}

.custom-input::placeholder {
  flex: 18px;
  color: #7e788b;
}

.show-input {
  visibility: visible;
}

/* polls */
.polls-bg {
  min-height: 1024px;
  height: 100%;
  width: 100%;
  background: url("./Assets/polls-bg.png") no-repeat top right;
  background-size: 67% 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  overflow: hidden;
}

.polls-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-content: center;
  width: 1272px;
  height: 800px;
  top: 30px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 14.37%,
    rgba(244, 218, 255, 0) 100%
  );
  box-shadow: 0px 6px 28px rgb(0 0 0 / 25%);
}

.all-poll-tiles {
  position: absolute;
  display: flex;
  width: 369px;
  height: 230px;
  top: 45px;
  left: 73px;
}

.poll-tile2 {
  position: absolute;
  left: 390px;
}
.poll-tile3 {
  position: absolute;
  left: 780px;
}
.poll-tile4 {
  position: absolute;
  top: 255px;
}
.poll-tile5 {
  position: absolute;
  top: 255px;
  left: 390px;
}
.poll-tile6 {
  position: absolute;
  top: 255px;
  left: 780px;
}
.poll-tile7 {
  position: absolute;
  top: 510px;
}
.poll-tile8 {
  position: absolute;
  top: 510px;
  left: 390px;
}
.poll-tile9 {
  position: absolute;
  top: 510px;
  left: 780px;
}
.poll-upload {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-content: center;
}
.poll-upload-icon {
  position: relative;
  left: 565px;
  top: -363px;
  width: 110px;
  height: 110px;
  cursor: pointer;
}

.poll-options {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-content: center;
  width: 196px;
  height: 27px;
  left: 135px;
  top: 16px;
}

.tile2 {
  left: 524px;
}

.tile3 {
  left: 914px;
}

.tile4 {
  top: 270px;
}

.tile5 {
  top: 270px;
  left: 524px;
}

.tile6 {
  top: 270px;
  left: 914px;
}

.poll-opt1 {
  position: absolute;
  left: 12.46%;
  right: 73.96%;
  top: 24.02%;
  bottom: 73.34%;
  width: 66px;
  height: 27px;
  background: #ffffff;
  border: 1px solid #4317af;
  box-sizing: border-box;
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  color: #4317ad;
  padding-left: 17px;
  padding-top: 5.3px;
}

.poll-opt1:hover,
.poll-opt2:hover,
.poll-opt3:hover {
  cursor: pointer;
  color: #ffffff;
  background: #4317af;
}

.poll-opt2 {
  position: absolute;
  left: 44.97%;
  right: 69.44%;
  top: 24.02%;
  bottom: 73.34%;
  background: #ffffff;
  border: 1px solid #4317af;
  box-sizing: border-box;
  width: 66px;
  height: 27px;
}

.poll-edit {
  position: absolute;
  height: 16px;
  width: 16px;
  left: 25px;
  top: 5px;
  border-radius: 0px;
  cursor: pointer;
  fill: #4317af;
}

.poll-opt2:hover svg,
.poll-opt3:hover svg {
  fill: #ffffff;
}

.poll-opt3 {
  position: absolute;
  left: 77.97%;
  right: 69.44%;
  top: 24.02%;
  bottom: 73.34%;
  background: #ffffff;
  border: 1px solid #4317af;
  box-sizing: border-box;
  width: 66px;
  height: 27px;
}

/* add-polls */
.add-polls-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  margin-top: 48px;
  margin-left: 23.5px;
  height: 845px;
  width: 1110px;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.85625) 14.37%,
    #f4daff 100%
  );
  box-shadow: 0px 6px 28px rgb(0 0 0 / 25%);
}

.add-polls-form {
  align-items: center;
  justify-content: center;
  align-content: center;
  position: absolute;
  display: flex;
  left: 6.3%;
  top: -11px;
  width: 951px;
  height: 56px;
  border: none;
}

.add-polls-fields {
  position: absolute;
  width: 951px;
  height: 56px;
  top: 94px;
  font-size: 18px;
  font-style: normal;
  font-weight: normal;
  line-height: 21px;
  color: black;
  padding-left: 24px;
  border: none;
  box-shadow: 0px 5px 4px -2px rgb(67 23 175 / 28%), 0px 2.1px 0px -1px #4317af;
}

.poll-fld2 {
  top: 200px;
  height: 117px;
  width: 951px;
  padding-bottom: 22px;
}

.poll-radio {
  position: absolute;
  top: 22.4rem;
  left: 2rem;
  height: 18px;
  width: 18px;
}

.radio2 {
  left: 153px;
}

.radio-label1 {
  position: absolute;
  width: 34px;
  height: 22px;
  left: 4rem;
  top: 22.35rem;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  display: flex;
  align-items: center;
  letter-spacing: 0.04em;
  color: #000000;
}

.label2 {
  left: 11.5rem;
  top: 22.25rem;
}

input[type="radio"]:after {
  width: 11px;
  height: 11px;
  border-radius: 14px;
  top: -1px;
  left: -1px;
  position: relative;
  background-color: #ffffff;
  content: "";
  display: inline-block;
  visibility: visible;
  border: 5px solid white;
}

input[type="radio"]:checked:after {
  width: 11px;
  height: 11px;
  border-radius: 14px;
  top: -1px;
  left: -1px;
  position: relative;
  background-color: #fc3fa8;
  content: "";
  display: inline-block;
  visibility: visible;
  border: 5px solid white;
}

.poll-fld3 {
  height: 56px;
  width: 459px;
  left: 0px;
  top: 405px;
}

.poll-fld4 {
  height: 56px;
  width: 459px;
  left: 500px;
  top: 405px;
}

.poll-fld5 {
  height: 56px;
  width: 459px;
  left: 0px;
  top: 575px;
}

.poll-fld6 {
  height: 56px;
  width: 459px;
  left: 500px;
  top: 575px;
}

.add-poll-choice {
  position: absolute;
  width: 54px;
  height: 54px;
  left: 2px;
  top: 480px;
  background: url(./Assets/add-poll-choice.png) no-repeat;
  border: none;
}

.add-choice-txt {
  position: absolute;
  left: 70px;
  top: 495px;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  display: flex;
  align-items: center;
  letter-spacing: 0.04em;
  color: #000000;
}

.save-add-polls {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  left: 46.54%;
  top: 45rem;
  background: #4317ad;
  border-radius: 2px;
  height: 38px;
  width: 72px;
  color: #ffffff;
  border: none;
  letter-spacing: 0.04em;
  padding-left: 16px;
  padding-bottom: 1px;
  font-weight: 500;
  font-size: 17px;
}

/* email-template */
.email-template-section {
  height: 1024px;
  width: 100%;
  background: url(./Assets/email-template-bg1.png) no-repeat top left;
  background-size: 76% 70%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  overflow: hidden;
}
.email-left-container {
  padding-top: 100px;
  display: flex;
  flex: 3;
  flex-direction: column;
  align-content: center;
  justify-content: flex-start;
  height: 75%;
}

.email-right-container {
  height: 75%;
  display: flex;
  flex: 2;
  flex-direction: column;
  align-items: center;
}

.email-template-content {
  width: 800px;
  height: 450px;
  margin: 0 auto;
  padding: 30px 60px;
  font-size: 20px;
  line-height: 150%;
  background: var(--white);
  box-shadow: 0px 6px 28px #00000029;
  border-radius: 8px;
}

.email-template-title {
  font-size: 50px;
  font-weight: 600;
  line-height: 60px;
  letter-spacing: 1.5px;
  color: #5c39b5;
  text-transform: capitalize;
}
.email-template-text {
  margin: 15px 0;
  font-size: 18px;
  line-height: 24px;
  width: 80%;
  letter-spacing: 0.5px;
  color: #262626;
}

.frame-top {
  height: 90px;
  width: 60%;
  border-radius: 4px;
  border-right: 3px solid #ff6beb;
  border-top: 3px solid #ff6beb;
}

.frame-bottom {
  height: 90px;
  width: 60%;
  border-radius: 4px;
  border-right: 3px solid #ff6beb;
  border-bottom: 3px solid #ff6beb;
}

.email-template-bg2 {
  z-index: -1;
  flex: 1;
  background: url("./Assets/email-template-bg2.png"), #ffecfd8a,
    no-repeat top left;
  background-size: 100% 200%;
}

.email-app-options {
  position: relative;
  top: -130px;
  left: -50px;
  width: 200px;
  height: auto;
}

.verify-button-container {
  min-height: 150px;
  height: 25%;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.verify-email-account {
  margin-top: 25px;
  background: #5c39b5 0% 0% no-repeat padding-box;
  color: white;
  padding: 15px 36px;
  border: 0px;
  font-size: 24px;
  letter-spacing: 0.5px;
  font-weight: 500;
  border-radius: 2px;
  cursor: pointer;
}

@media screen and (max-width: 1366px) {
  .email-template-section {
    height: 100%;
    min-height: 100vh;
    flex-direction: column;
    position: relative;
    background-size: 100% auto;
  }
}

@media screen and (max-width: 800px) {
  .email-template-content {
    width: 90%;
    min-height: 450px;
    padding: 30px 60px;
    font-size: 20px;
  }

  .email-template-title {
    font-size: 40px;
    font-weight: 600;
    line-height: 50px;
    letter-spacing: 0px;
    color: #5c39b5;
    text-transform: capitalize;
  }

  .email-template-text {
    margin: 15px 0;
    font-size: 18px;
    line-height: 22px;
    width: 90%;
  }
}

@media screen and (max-width: 700px) {
  .email-template-content {
    width: 90%;
    min-height: 400px;
    height: 100%;
    padding: 20px 40px;
    font-size: 20px;
  }

  .email-template-title {
    font-size: 36px;
    font-weight: 600;
    line-height: 48px;
    letter-spacing: 0px;
  }

  .email-template-text {
    margin: 15px 0;
    font-size: 16px;
    line-height: 20px;
    width: 100%;
  }
}

@media screen and (max-width: 500px) {
  .email-template-title {
    font-size: 26px;
    font-weight: 600;
    line-height: 32px;
  }

  .verify-email-account {
    padding: 12px 24px;
    font-size: 20px;
    letter-spacing: 0.5px;
    font-weight: 500;
  }

  .email-template-mobile {
    height: 600px;
    width: auto;
  }

  .email-app-options {
    position: relative;
    top: -100px;
    left: -40px;
    width: 160px;
    height: auto;
  }
}

/* audio clips */
.audio-section {
  background: url(./Assets/PV-bg1.png) no-repeat top right;
  position: absolute;
  top: 70px;
  min-height: 1024px;
  height: 100%;
  width: 100%;
  background-size: 80% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.audio-form {
  padding-left: 50px;
  max-height: 80px;
  width: 1300px;
  display: flex;
  justify-content: flex-start;
}

.audio-form .form-group {
  margin: 30px 20px 20px 30px;
  position: relative;
}

.box-card {
  position: absolute;
  top: 110px;
  display: flex;
  flex-direction: column;
  width: 1260px;
  height: 800px;
  align-content: center;
  justify-content: center;
  background-image: linear-gradient(
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 14.37%,
    rgba(121, 64, 146, 0.09) 100%
  );
  box-shadow: 0px 6px 28px rgb(0 0 0 / 25%);
}
@media screen and (max-width: 768px) {
  .box-card {
    left: -3%;
    justify-content: center;
    margin-top: -21%;
  }
}

.block-cards {
  align-content: space-evenly;
  position: absolute;
  height: 178px;
  width: 284px;
  left: 4%;
  top: 7.36%;
  bottom: 70.25%;
  background: #c4c4c4;
  border: 5px solid #ffffff;
  box-sizing: border-box;
}

.vio1 {
  position: absolute;
  left: 26.96%;
  top: 7.36%;
  background: #c4c4c4;
  border: 5px solid #ffffff;
  box-sizing: border-box;
}

.vio2 {
  position: absolute;
  left: 49.86%;
  top: 7.36%;
  background: #c4c4c4;
  border: 5px solid #ffffff;
  box-sizing: border-box;
}

.vio3 {
  position: absolute;
  left: 72.77%;
  top: 7.36%;
  background: #c4c4c4;
  border: 5px solid #ffffff;
  box-sizing: border-box;
}

.vio4 {
  position: absolute;
  left: 4%;
  top: 32.38%;
  bottom: 46.23%;
  background: #c4c4c4;
  border: 5px solid #ffffff;
  box-sizing: border-box;
}

.vio5 {
  position: absolute;
  left: 26.96%;
  top: 32.38%;
  bottom: 46.23%;
  background: #c4c4c4;
  border: 5px solid #ffffff;
  box-sizing: border-box;
}

.vio6 {
  position: absolute;
  left: 49.86%;
  top: 32.38%;
  bottom: 46.23%;
  background: #c4c4c4;
  border: 5px solid #ffffff;
  box-sizing: border-box;
}

.vio7 {
  position: absolute;
  left: 72.77%;
  top: 32.38%;
  bottom: 46.23%;
  background: #c4c4c4;
  border: 5px solid #ffffff;
  box-sizing: border-box;
}

.vio8 {
  position: absolute;
  left: 4%;
  top: 56.7%;
  bottom: 20.92%;
  background: #c4c4c4;
  border: 5px solid #ffffff;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}

.vio9 {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  left: 26.96%;
  top: 56.7%;
  bottom: 20.92%;
  background: #c4c4c4;
  border: 5px solid #ffffff;
  box-sizing: border-box;
}

.vio10 {
  position: absolute;
  left: 49.86%;
  top: 56.7%;
  bottom: 20.92%;
  background: #c4c4c4;
  border: 5px solid #ffffff;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}

.vio11 {
  position: absolute;
  left: 72.77%;
  top: 56.7%;
  bottom: 20.92%;
  background: #c4c4c4;
  border: 5px solid #ffffff;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}

.nav-profilelogo {
  font-size: 20px;
  font-weight: 400;
  text-decoration: none;
  color: var(--dark-text);
  display: flex;
  align-items: center;
}

.nav-profilelogo img {
  width: 49px;
  height: 49px;
  margin-right: 10px;
}

.upload-audio {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-content: center;
  background-color: transparent;
  border: 0;
}
.audio-upload-icon {
  position: absolute;
  left: 480px;
  top: 70px;
  width: 120px;
  height: 120px;
  cursor: pointer;
}

.delete-btn {
  background: #c4c4c4;
  border: 0;
  margin-top: 15px;
  margin-left: 225px;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .delete-btn {
    margin-left: 96px;
  }
}

.btn-group {
  margin-top: 80px;
  margin-left: 47px;
}
.btn-group button {
  color: #4317af;
  padding: 10px 24px;
  cursor: pointer;
  float: left;
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #4317af;
  opacity: 1;
  padding: 5px;
}

.down {
  margin-bottom: 11px;
}
.mid {
  margin-top: 80px;
}

.btn-group button:hover {
  background-color: #4317af;
  color: white;
}

/* add audio */
.add-audio-clips {
  position: absolute;
  top: 200px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  height: 640px;
  width: 1075px;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.85625) 14.37%,
    #f4daff 100%
  );
  box-shadow: 0px 6px 28px rgb(0 0 0 / 25%);
}

.add-audio-form {
  align-items: center;
  justify-content: center;
  align-content: center;
  position: absolute;
  display: flex;
  left: 6.3%;
  top: -12px;
  width: 951px;
  height: 56px;
  border: none;
}

.add-audio-fields {
  position: absolute;
  width: 951px;
  height: 56px;
  top: 90px;
  font-size: 18px;
  font-style: normal;
  font-weight: normal;
  line-height: 21px;
  color: black;
  padding-left: 24px;
  border: none;
  box-shadow: 0px 5px 4px -2px rgb(67 23 175 / 28%), 0px 2.1px 0px -1px #4317af;
}

.browse-url {
  position: absolute;
  width: 951px;
  height: 56px;
  top: 175px;
  padding: 24px;
  font-size: 18px;
  color: var(--text);
  border: none;
  box-shadow: 0px 5px 4px -2px rgb(67 23 175 / 28%), 0px 2.1px 0px -1px #4317af;
  outline: none;
}
.browse {
  position: absolute;
  font-size: 20px;
  border: 1px solid var(--blue-gem);
  outline: none;
  pointer-events: none;
  cursor: pointer;
  color: var(--white);
  background: var(--blue-gem);
  width: 92px;
  text-align: center;
  height: 38px;
  transform: translateX(-20%);
  margin-top: 22rem;
  margin-left: 54rem;
}

.audio-fld3 {
  top: 260px;
}

.audio-fld4 {
  color: rgba(0, 0, 0, 0.5);
  top: 345px;
  cursor: pointer;
}

.audio-fld5 {
  color: rgba(0, 0, 0, 0.5);
  top: 432px;
  cursor: pointer;
}
.add-audio-input-icon1 {
  height: 24px;
  position: absolute;
  right: 18px;
  top: 28.8rem;
  transform: translateY(-50%);
  cursor: pointer;
}
.add-audio-input-icon2 {
  height: 24px;
  position: absolute;
  right: 18px;
  top: 23.2rem;
  transform: translateY(-50%);
  cursor: pointer;
}

.save-add-audio {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  left: 46.54%;
  top: 33.5rem;
  background: #4317ad;
  border-radius: 2px;
  height: 38px;
  width: 72px;
  color: #ffffff;
  border: none;
  letter-spacing: 0.04em;
  padding-left: 16px;
  padding-bottom: 1px;
  font-weight: 500;
  font-size: 17px;
}

/*--------------------------------------------*/

/* videos-page */
.vide-bg {
  min-height: 1024px;
  height: 100%;
  width: 100%;
  background: url("./Assets/polls-bg.png") no-repeat top right;
  background-size: 67% 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  overflow: hidden;
}

.vide-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-content: center;
  width: 1272px;
  height: 800px;
  top: 30px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 14.37%,
    rgba(244, 218, 255, 0) 100%
  );
  box-shadow: 0px 6px 28px rgb(0 0 0 / 25%);
}

.all-vide-tiles {
  position: absolute;
  display: flex;
  width: 369px;
  height: 230px;
  top: 45px;
  left: 73px;
}

.vide-tile2 {
  position: absolute;
  left: 390px;
}
.vide-tile3 {
  position: absolute;
  left: 780px;
}
.vide-tile4 {
  position: absolute;
  top: 255px;
}
.vide-tile5 {
  position: absolute;
  top: 255px;
  left: 390px;
}
.vide-tile6 {
  position: absolute;
  top: 255px;
  left: 780px;
}
.vide-tile7 {
  position: absolute;
  top: 510px;
}
.vide-tile8 {
  position: absolute;
  top: 510px;
  left: 390px;
}
.vide-tile9 {
  position: absolute;
  top: 510px;
  left: 780px;
}
.vide-upload {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-content: center;
}
.vide-upload-icon {
  position: relative;
  left: 565px;
  top: -363px;
  width: 120px;
  height: 120px;
  cursor: pointer;
}

.vide-options {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-content: center;
  width: 196px;
  height: 27px;
  left: 67px;
  top: 172px;
}

.tile-2 {
  left: 459px;
}

.tile-3 {
  left: 846px;
}

.vide-opt1 {
  position: absolute;
  left: 1.46%;
  right: 73.96%;
  top: 24.02%;
  bottom: 73.34%;
  width: 86px;
  height: 27px;
  background: #ffffff;
  border: 1px solid #4317af;
  box-sizing: border-box;
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  color: #4317ad;
  text-align: center;
  padding-top: 5.3px;
  cursor: pointer;
}

.vide-opt1:hover {
  color: #ffffff;
  background: #4317af;
}

.vide-opt2 {
  position: absolute;
  left: 44.97%;
  right: 69.44%;
  top: 24.02%;
  bottom: 73.34%;
  background: #ffffff;
  border: 1px solid #4317af;
  box-sizing: border-box;
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  color: #4317ad;
  text-align: center;
  padding-top: 5.3px;
  width: 66px;
  height: 27px;
  cursor: pointer;
}

.vide-opt2:hover {
  color: #ffffff;
  background: #4317af;
}
.vide-opt3 {
  position: absolute;
  left: 77.97%;
  right: 69.44%;
  top: 24.02%;
  bottom: 73.34%;
  background: #ffffff;
  border: 1px solid #4317af;
  box-sizing: border-box;
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  color: #4317ad;
  text-align: center;
  padding-top: 5.3px;
  width: 88px;
  height: 27px;
  cursor: pointer;
}

.vide-opt3:hover {
  color: #ffffff;
  background: #4317af;
}

.video-vid {
  position: absolute;
  width: 35px;
  height: 26px;
  left: 284px;
  top: 20px;
  cursor: pointer;
}

.video-delete {
  position: absolute;
  width: 35px;
  height: 26px;
  left: 325px;
  top: 20px;
  cursor: pointer;
}

.del-2 {
  left: 44.6rem;
}
.vid-2 {
  left: 42rem;
}

.del-3 {
  left: 69rem;
}
.vid-3 {
  left: 66.4rem;
}

/*-------- EVENTS ---------------*/
.events-section {
  position: absolute;
  top: 70px;
  background: url(./Assets/PV-bg1.png) no-repeat bottom right;
  background-size: 75% 110%;
  min-height: 1024px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.event-filter {
  width: 1234px;
  height: 113px;
  margin-top: 60px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 3%, #f4daff 100%);
  box-shadow: 0px 6px 28px rgba(0, 0, 0, 0.25);
}

.event-filter .form-group {
  position: relative;
}

.event-input {
  width: 290px;
  height: 56px;
  background: #ffffff;
  box-shadow: 0px 5px 4px -2px rgba(67, 23, 175, 0.28), 0px 2px 0px -1px #4317af;
  border: none;
  outline: none;
  font-size: 18px;
  padding: 8px 16px;
}

.event-input-icon {
  height: 24px;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.event-container {
  margin-top: 30px;
  width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.button-wrapper {
  display: flex;
  margin-right: 40px;
  margin-bottom: 30px;
}

.event-btn {
  margin: 0;
  border: none;
  outline: none;
  padding: 16px 20px;
  background: #f7f7f7;
  color: #808a98;
  font-size: 16px;
  box-shadow: inset 0px -3px 0px #cfd4da;
  border-radius: 0px;
}

.active-btn {
  color: #000;
  box-shadow: inset 0px -3px 0px #4317af;
}

.event-calendar {
  width: 100%;
  border-collapse: collapse;
}

.event-calendar th {
  padding: 10px;
  font-size: 14px;
  font-weight: normal;
  text-align: left;
}

.event-calendar td {
  padding: 10px;
  height: 130px;
  width: 156px;
  align-content: flex-start;
  border: 1px solid #e0e0e0;
  font-size: 14px;
  vertical-align: text-top;
  position: relative;
}

.add-icon {
  width: 24px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  cursor: pointer;
}

/*---------- ADD EVENTS ---------------*/
.add-events-section {
  position: absolute;
  min-height: 1024px;
  width: 100%;
}

.add-events-form {
  position: relative;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
  padding: 30px;
  width: 1075px;
  height: 630px;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.85625) 14.37%,
    #f4daff 100%
  );
  box-shadow: 0px 6px 28px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.add-events-form .form-group {
  margin: 18px 0;
  display: flex;
}

.add-event-input {
  width: 950px;
  height: 56px;
  background: #ffffff;
  box-shadow: 0px 5px 4px -2px rgba(67, 23, 175, 0.28), 0px 2px 0px -1px #4317af;
  border: none;
  outline: none;
  font-size: 18px;
  padding: 8px 16px;
  position: relative;
}

.add-event-input2 {
  width: 454px;
  height: 56px;
  background: #ffffff;
  box-shadow: 0px 5px 4px -2px rgba(67, 23, 175, 0.28), 0px 2px 0px -1px #4317af;
  border: none;
  outline: none;
  font-size: 18px;
  padding: 8px 16px;
  position: relative;
}

.add-event-input-icon {
  height: 24px;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.spacer {
  width: 43px;
}

.add-event-input-wrapper {
  position: relative;
}

.add-event-submit {
  margin-top: 10px;
  border: none;
  outline: none;
  font-size: 18px;
  padding: 8px 16px;
  color: #ffffff;
  background: #4317ad;
  border-radius: 2px;
  cursor: pointer;
}

/* add videos */

.add-videos {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  margin-left: 23.5px;
  height: 396px;
  top: 224px;
  width: 1079px;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.85625) 14.37%,
    #f4daff 100%
  );
  box-shadow: 0px 6px 28px rgb(0 0 0 / 25%);
}

.add-video-form {
  align-items: center;
  justify-content: center;
  align-content: center;
  position: absolute;
  display: flex;
  left: 6.3%;
  top: -11px;
  width: 951px;
  height: 56px;
  border: none;
}

.add-video-fields {
  position: absolute;
  width: 951px;
  height: 56px;
  top: 84px;
  font-size: 18px;
  font-style: normal;
  font-weight: normal;
  line-height: 21px;
  color: var(--text);
  padding-left: 24px;
  border: none;
  box-shadow: 0px 5px 4px -2px rgb(67 23 175 / 28%), 0px 2.1px 0px -1px #4317af;
}

.video-url {
  position: absolute;
  width: 951px;
  height: 56px;
  top: 84px;
  padding: 24px;
  font-size: 18px;
  color: var(--text);
  border: none;
  box-shadow: 0px 5px 4px -2px rgb(67 23 175 / 28%), 0px 2.1px 0px -1px #4317af;
  outline: none;
}
.video-url1 {
  position: absolute;
  width: 951px;
  height: 56px;
  top: 11rem;
  padding: 24px;
  font-size: 18px;
  color: var(--text);
  border: none;
  box-shadow: 0px 5px 4px -2px rgb(67 23 175 / 28%), 0px 2.1px 0px -1px #4317af;
  outline: none;
}
.load {
  position: absolute;
  font-size: 20px;
  border: 1px solid var(--blue-gem);
  outline: none;
  pointer-events: none;
  cursor: pointer;
  color: var(--white);
  background: var(--blue-gem);
  width: 72px;
  text-align: center;
  height: 38px;
  transform: translateX(-20%);
  margin-top: 10.4rem;
  margin-left: 54rem;
}

.add-video-input-icon {
  height: 24px;
  position: absolute;
  right: 18px;
  top: 12.9rem;
  transform: translateY(-50%);
  cursor: pointer;
}

.save-add-video {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  pointer-events: none;
  left: 46.54%;
  top: 20rem;
  background: #4317ad;
  border-radius: 2px;
  height: 38px;
  width: 72px;
  color: #ffffff;
  border: none;
  letter-spacing: 0.04em;
  padding-left: 16px;
  padding-bottom: 1px;
  font-weight: 500;
  font-size: 17px;
}

/*--------------------------------------*/
.gallery-section {
  top: 70px;
  min-height: 1024px;
  height: 100%;
  width: 100%;
  background: url("./Assets/polls-bg.png") no-repeat bottom right;
  background-size: 67% 105%;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.gallery-section .inner {
  margin-top: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.gallery-upload-icon {
  position: absolute;
  right: 30px;
  top: 30px;
  width: 120px;
  height: 120px;
  cursor: pointer;
}

.inner .form-group {
  margin-left: 60px;
  margin-bottom: 20px;
  align-self: start;
}

.gallery-wrapper {
  padding: 48px 24px;
  width: 1272px;
  height: 800px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 14.37%,
    rgba(244, 218, 255, 0) 100%
  );
  box-shadow: 0px 6px 28px rgb(0 0 0 / 25%);
  display: grid;
  grid-template-columns: 407px 369px 407px;
  grid-template-rows: 462px 230px;
  column-gap: 20px;
  row-gap: 10px;
}

.gallery-card {
  position: relative;
  padding: 10px;
  width: 100%;
  height: 100%;
  background: #c4c4c4;
  border: 5px solid #ffffff;
  box-sizing: border-box;
  display: flex;
  align-items: start;
}

.gallery-button-wrapper {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.gallery-card-button {
  margin: 0 5px;
  width: 35px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fc3fa8;
  border-radius: 6px;
  cursor: pointer;
}

.gallery-card-button-edit {
  background: #4317ad;
}

.gallery-card-button-delete {
  background: #df4949;
}

.gallery-card-options {
  display: flex;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.gallery-opt {
  width: 86px;
  height: 27px;
  background: #ffffff;
  border: 1px solid #4317af;
  box-sizing: border-box;
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  color: #4317ad;
  text-align: center;
  padding-top: 5.3px;
  cursor: pointer;
}

.gallery-opt:hover {
  background: #4317ad;
  color: #ffffff;
}

.middle-col {
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 10px;
}

.add-gallery-section {
  position: absolute;
  top: 70px;
  min-height: 1024px;
  width: 100%;
}

.add-gallery-form {
  position: relative;
  top: 210px;
  left: 50%;
  transform: translateX(-50%);
  padding: 50px 30px;
  width: 1075px;
  height: 512px;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.795) 5%,
    #f4daff 100%
  );
  box-shadow: 0px 6px 28px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.add-gallery-form .form-group {
  margin: 20px 0;
  display: flex;
}

.add-gallery-input {
  width: 950px;
  height: 56px;
  background: #ffffff;
  box-shadow: 0px 5px 4px -2px rgba(67, 23, 175, 0.28), 0px 2px 0px -1px #4317af;
  border: none;
  outline: none;
  font-size: 18px;
  padding: 8px 16px;
  position: relative;
}

.add-gallery-input-button {
  position: absolute;
  right: 24px;
  top: 50%;
  border: none;
  outline: none;
  transform: translateY(-50%);
  cursor: pointer;
}

.add-gallery-input-icon {
  height: 24px;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.gallery-form-button {
  padding: 8px 16px;
  font-size: 15px;
  color: #ffffff;
  background: #4317ad;
  border-radius: 2px;
}

.add-gallery-submit {
  margin: 40px 0;
  border: none;
  outline: none;
  font-size: 18px;
  padding: 8px 16px;
  color: #ffffff;
  background: #4317ad;
  border-radius: 2px;
  cursor: pointer;
}

/* PAGINATION */
.pagination {
  position: absolute;
  bottom: 30px;
  transform: translateX(175%);
  display: flex;
  width: 272px;
  justify-content: space-around;
}

.page-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  font-weight: 600;
  font-size: 16px;
  border: 2px solid #c8cace;
  border-radius: 4px;
  background: #ffffff;
  cursor: pointer;
}

.active-page {
  border: 2px solid #4200ff;
  color: #4200ff;
}

.disabled-page {
  background: #c4cdd5;
  color: #ffffff;
  cursor: default;
}

.disabled-page svg path {
  fill: #ffffff;
}

/* Term & Conditions */
.terms-conditions {
  background: url("../Assets/layer1.png") no-repeat bottom left;
  background-size: auto;
  display: flex;
}

.terms-container {
  width: 100%;
  height: 100%;
  background: url("../Assets/layer3.png") no-repeat bottom right;
  background-size: auto 85%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.term-content-wrapper {
  position: absolute;
  top: 100px;
  width: 1000px;
  background: #ffffff;
  padding: 40px;
  border-radius: 4px;
  box-shadow: 0px 6px 28px rgb(0 0 0 / 25%);
  overflow: hidden;
}

.term-content {
  padding-right: 30px;
  max-height: 760px;
  overflow: auto;
}

.term-content::-webkit-scrollbar {
  width: 12px;
}

.term-content::-webkit-scrollbar-thumb {
  width: 10px;
  border-radius: 16px;
  border: 2px solid gray;
  background-color: white;
}

.term-content::-webkit-scrollbar-track {
  width: 12px;
  border-radius: 16px;
  background: gray;
  margin-top: 100px;
  margin-bottom: 100px;
}

.term-title {
  color: #777777;
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 24px;
}

.term-subtitle {
  color: #777777;
  font-weight: 500;
  font-size: 20px;
  margin-bottom: 16px;
}

.term-text {
  color: #777777;
  font-size: 18px;
  line-height: 30px;
  margin-bottom: 30px;
}

@media only screen and (max-width: 1000px) {
  .term-content-wrapper {
    width: 90%;
    padding: 30px;
  }

  .term-content {
    padding-right: 20px;
  }

  .term-title {
    font-size: 22px;
  }

  .term-subtitle {
    font-size: 18px;
  }

  .term-text {
    font-size: 16px;
    line-height: 26px;
  }
}

@media only screen and (max-width: 500px) {
  .term-content-wrapper {
    padding: 24px 20px 24px 24px;
  }

  .term-content {
    padding-right: 20px;
  }

  .term-title {
    font-size: 20px;
  }

  .term-subtitle {
    font-size: 16px;
  }

  .term-text {
    font-size: 14px;
    line-height: 22px;
  }
}