/* HEADER */

header.main-section {

  position: sticky;

  top: 0;

  z-index: 1500;

  background: linear-gradient(90deg, #0b63d7 0%, #0b5bff 100%);

  height: 88px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 28px;

  box-shadow: 0 6px 20px rgba(6, 50, 74, 0.12);

}



.logo {

  height: 32px;

  width: auto;

  margin-right: 40px;

}



.page-nav {

  display: block;

}



.page-nav-list {

  display: flex;

  align-items: center;

  gap: 28px;

  padding: 0;

  margin: 0;

}



.page-nav-list .nav-item {

  position: relative;

}



.page-nav-list .nav-item:not(:first-child)::before {

  content: "";

  position: absolute;

  left: -18px;

  top: 50%;

  transform: translateY(-50%);

  width: 1px;

  height: 16px;

  background: #ffffff;

}



@media (max-width: 800px) {

  .page-nav-list .nav-item:not(:first-child)::before {

    display: none;

  }

}



.page-nav-link {

  font-family: "Readex Pro", sans-serif;

  color: #ffffff;

  font-weight: 600;

  font-size: 16px;

  padding: 8px 6px;

  display: inline-block;

  position: relative;

}



.page-nav-link::after {

  content: "";

  position: absolute;

  left: 50%;

  bottom: -4px;

  width: 100%;

  height: 2px;

  background: #db00a4;

  border-radius: 4px;

  box-shadow: 0 6px 14px rgba(219, 0, 164, 0.12);

  transform: translateX(-50%) scaleX(0);

  transform-origin: center;

  opacity: 0;

  transition:

    transform 0.28s ease,

    opacity 0.2s ease;

}



.page-nav-link:hover::after,

.page-nav-link:focus-visible::after,

.page-nav-link.active::after {

  transform: translateX(-50%) scaleX(1);

  opacity: 1;

}



/* MOBILE SLIDE-IN MENU */

.menu {

  position: fixed;

  inset: 0;

  top: 50px;

  z-index: 1400;

  pointer-events: none;

}



.menu nav {

  position: absolute;

  right: 0;

  left: 0;

  top: 50px;

  bottom: auto;

  background: #004cd7;

  color: #fff;

  box-shadow: -12px 0 34px rgba(6, 50, 74, 0.25);

  transform: translateX(110%);

  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);

  pointer-events: auto;

  padding: 20px 40px;

}



.menu-nav-list {

  display: flex;

  flex-direction: column;

  gap: 12px;

  justify-content: flex-start;

  align-items: flex-start;

}



.menu.menu-opened {

  pointer-events: auto;

}



.menu.menu-opened nav {

  transform: translateX(0);

}



.menu.menu-opened::before {

  opacity: 1;

  pointer-events: auto;

}



.menu .page-nav-list {

  padding: 12px 0 40px 0;

  margin: 0;

  list-style: none;

}



.menu .page-nav-link {

  display: block;

  padding: 12px 8px;

  color: #fff;

  text-decoration: none;

  border-radius: 8px;

}



.menu .page-nav-link:hover {

  background: rgba(255, 255, 255, 0.04);

}



.menu-btn {

  z-index: 1500;

}



@media (max-width: 800px) {

  .menu-btn.menu-open {

    display: inline-flex !important;

  }

  .menu-btn.menu-close {

    display: none !important;

  }



  body.menu-opened .menu-btn.menu-open {

    display: none !important;

  }

  body.menu-opened .menu-btn.menu-close {

    display: inline-flex !important;

  }

}



.hidden {

  display: none !important;

}



body.overflow {

  overflow: hidden;

}



@media (max-width: 800px) {

  header.main-section {

    height: 64px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 14px;

  }



  .menu-btn {

    position: static;

    top: auto;

    right: auto;

    margin: 0;

    width: 56px;

    height: 56px;

    border-radius: 12px;

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

  }



  .menu-open-svg,

  .menu-close-svg {

    width: 22px;

    height: 22px;

  }



  .page-nav {

    display: none !important;

  }

}



@media (min-width: 801px) {

  .menu-btn {

    display: none !important;

  }

}



/* HERO */

.hero {

  width: 100%;

  padding: 0;

}



.hero-wrap {

  position: relative;

  overflow: hidden;

  display: flex;

  background-color: #f3f7fb;

  min-height: 800px;

}



@media (max-width: 767px) {

  .hero-wrap {

    min-height: 769px;

  }

}



.hero-bg-video {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  z-index: 0;

  filter: saturate(0.98) contrast(0.98);

}



.hero-textBlock {

  position: relative;

  max-width: 1400px; /* user-requested width limit */

  width: 100%;

  margin: 76px auto 0;

  padding-inline: 100px;

}



@media (max-width: 767px) {

  .hero-textBlock {

    padding: 0 20px;

    margin: 65px auto 0;

  }

}



.hero-title {

  font-family: "Readex Pro";

  font-weight: 600;

  font-style: semi-bold;

  font-size: 80px;

  line-height: 88px;

  letter-spacing: 0%;

  color: #004bd7;

  margin: 0 0 36px 0;

  max-width: 760px;

}



@media (max-width: 767px) {

  .hero-title {

    font-size: 48px;

    line-height: 52px;

    letter-spacing: 0%;

    max-width: 400px;

  }

}



.hero-subtitle {

  font-family: "Readex Pro";

  font-weight: 400;

  font-size: 40px;

  line-height: 48px;

  letter-spacing: 0%;

  color: #f800b9;

  max-width: 650px;

  margin-left: 100px;

}



@media (max-width: 767px) {

  .hero-subtitle {

    font-size: 32px;

    line-height: 36px;

    margin-left: 50px;

  }

}



/* ABOUT */

.about {

  background: linear-gradient(180deg, #ffffff 0%, #aed5f3 100%);

  padding: 0 100px;

  position: relative;

  overflow: hidden;

}



.about-container {

  max-width: 1200px;

  margin: 0 auto;

  display: flex;

  gap: 40px;

  align-items: center;

  justify-content: space-between;

}



.about-text {

  flex: 1 1 48%;

}



.about-title {

  color: #004bd7;

  font-family: "Readex Pro", sans-serif;

  font-weight: 700;

  font-size: 60px;

  line-height: 1.02;

  margin: 0 0 60px 0;

  text-align: left;

}



.about-desc {

  color: #0b2a66;

  font-size: 20px;

  min-width: 526px;

  line-height: 1.6;

  margin: 0 0 12px 0;

}



.about-images {

  max-height: 740px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}



.about-phone {

  max-width: 56%;

  height: auto;

  display: block;

  border-radius: 22px;

  box-shadow: 0 20px 40px rgba(6, 50, 74, 0.18);

}



.about-phone-back {

  transform: translateY(-35%) rotate(-19deg);

  z-index: 1;

}

.about-phone-front {

  position: absolute;

  right: 8%;

  top: 6%;

  z-index: 2;

  width: 56%;

  transform: translateX(-10%) translateY(20%) rotate(12deg);

}



.phone-frame {

  position: relative;

  display: block;

  border-radius: 70px;

  background-image: url("./photo/about/phone.png");

  background-repeat: no-repeat;

  background-position: center;

  background-size: contain;

  width: 425px;

  height: 880px;

}



.videoBox {

  position: absolute;

  inset: 18.33px;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 390px;

  height: 844px;

  border-radius: 50px;

  overflow: hidden;

}



.phone-video {

  width: 125%;

  height: 125%;

}



.phone-ui {

  position: absolute;

  width: 390px;

  height: 229px;

  object-fit: cover;

  top: 18.33px;

  left: 18.33px;

  z-index: 2;

}



.phone-camera {

  position: absolute;

  width: 123px;

  height: 36px;

  object-fit: cover;

  top: 32px;

  left: 151.33px;

  z-index: 2;

}



@media (max-width: 1200px) {

  .about-container {

    flex-direction: column;

  }



  .about-images {

    height: 600px;

  }



  .about-phone-back {

    transform: translateY(-15%) rotate(-19deg);

  }

  .about-phone-front {

    transform: translateX(-10%) translateY(30%) rotate(12deg);

  }



  .phone-frame {

    width: 209px;

    height: 433px;

    border-radius: 35px;

  }



  .videoBox {

    inset: 8.33px;

    width: 192.4px;

    height: 415.3px;

    border-radius: 30px;

  }



  .phone-video {

    width: 125%;

    height: 125%;

  }



  .phone-ui {

    width: 192.4px;

    height: 123px;

    top: 8.33px;

    left: 8.33px;

  }



  .phone-camera {

    width: 61.5px;

    height: 18px;

    top: 16px;

    left: 75.67px;

  }

}



@media (max-width: 700px) {

  .about {

    padding: 40px 20px;

  }

  .about-phone-back {

    transform: translateX(30%) translateY(-15%) rotate(-19deg);

  }

  .about-phone-front {

    transform: translateX(10%) translateY(30%) rotate(12deg);

  }

  .about-title {

    font-size: 40px;

    margin-bottom: 40px;

  }

  .about-desc {

    min-width: 0;

  }

}



/* WORLD */

.world-container {

  position: relative;

  max-width: 1400px;

  width: 100%;

  margin: 0 auto;

  padding: 80px 100px;

  display: flex;

  align-items: center;

  justify-content: flex-end;

}



@media (max-width: 850px) {

  .world-container {

    justify-content: center;

    padding-inline: 0;

    padding-bottom: 186px;

    margin-bottom: 100px;

  }

}



.world-img {

  width: 60%;

  border-radius: 16px;

  object-fit: cover;

  position: absolute;

  left: 80px;

  max-height: 557px;

}



@media (max-width: 850px) {

  .world-img {

    left: 20px;

    bottom: 0;

    width: calc(100% - 40px);

  }

}



.world-card {

  max-width: 700px;

  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(16px);

  border-radius: 16px;

  padding: 45px;

  box-shadow: 0 12px 30px rgba(10, 30, 70, 0.08);

}



@media (max-width: 850px) {

  .world-card {

    width: 100%;

    max-width: none;

    padding: 40px 20px;

  }

}



.world-title {

  font-family: "Readex Pro";

  font-weight: 600;

  font-style: SemiBold;

  font-size: 60px;

  line-height: 64px;

  letter-spacing: 0%;

  color: #004bd7;

  margin: 0 0 60px 0;

}



@media (max-width: 850px) {

  .world-title {

    font-size: 40px;

    line-height: 48px;

    margin-bottom: 40px;

  }

}



.world-text {

  font-family: "Readex Pro";

  font-weight: 400;

  font-size: 20px;

  line-height: 28px;

  letter-spacing: 2%;

  color: #0f0e0e;

  margin: 0 0 12px 0;

}



@media (max-width: 850px) {

  .world-text {

    font-size: 18px;

    line-height: 28px;

  }

}



/* HOW TO PLAY */

.play {

  background: linear-gradient(360deg, #ffffff 0%, #aed5f3 100%);

  padding: 100px;

}



.play-title {

  text-align: center;

  color: #004bd7;

  font-family: "Readex Pro";

  font-weight: 600;

  font-size: 60px;

  line-height: 64px;

  letter-spacing: 0%;

  margin: 0 0 60px 0;

}



.play-container {

  max-width: 1200px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 40px;

}



.play-list {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

  gap: 40px;

  width: 260px;

  height: 240px;

  text-align: center;

}



.play-item {

  font-family: "Arimo";

  font-weight: 400;

  min-width: 280px;

  max-width: 330px;

  font-size: 20px;

  line-height: 28px;

  letter-spacing: 2%;

  text-align: center;

  color: #0b2a66;

}



.play-item-1 {

  transform: translateX(100px);

}

.play-item-2 {

  transform: translateX(-20px);

}



.play-item-3 {

  transform: translateX(20px);

}



.play-item-4 {

  transform: translateX(-100px);

}



.play-item-5 {

  transform: translateX(20px);

}



.play-item-6 {

  transform: translateX(-40px);

}



.play-img {

  max-width: 640px;

  width: 60%;

  height: auto;

  display: block;

}



@media (max-width: 1400px) {

  .play-img {

    width: 40%;

  }

}



@media (max-width: 1000px) {

  .play {

    padding: 60px 20px;

  }



  .play-title {

    font-size: 45px;

    margin-bottom: 40px;

  }



  .play-container {

    flex-direction: column;

    gap: 20px;

  }



  .play-list {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 0 16px;

    gap: 20px;

  }



  .play-img {

    width: 100%;

    margin: 20px auto;

  }



  .play-item {

    font-size: 18px;

    transform: none;

  }

}



/* UNIQUENESS */

.uniqueness {

  background: linear-gradient(180deg, #ffffff 0%, #aed5f3 100%);

  padding: 100px 80px;

  position: relative;

}



.uniqueness-title {

  text-align: center;

  color: #004bd7;

  font-family: "Readex Pro", sans-serif;

  font-weight: 600;

  font-size: 60px;

  line-height: 64px;

  letter-spacing: 0%;



  margin: 0 0 60px 0;

}



.uniqueness-container {

  max-width: 1200px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

}



.uniqueness-list {

  list-style: none;

  padding: 0;

  margin: 0;

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 20px 24px;

  width: 60%;

}



.uniqueness-item {

  background: rgba(255, 255, 255, 0.5);

  backdrop-filter: blur(8px);

  padding: 40px 32px;

  border-radius: 12px;

  box-shadow: 0 8px 20px rgba(10, 30, 70, 0.06);

  font-family: "Readex Pro", sans-serif;

  font-weight: 400;

  font-size: 20px;

  line-height: 28px;

  letter-spacing: 2%;



  color: #0b2a66;

}



.uniqueness-img {

  position: absolute;

  bottom: 0;

  right: 0;

  width: 40%;

}



@media (max-width: 850px) {

  .uniqueness {

    padding: 60px 20px 250px;

  }



  .uniqueness-title {

    font-size: 40px;

    margin-bottom: 24px;

  }



  .uniqueness-container {

    flex-direction: column-reverse;

    align-items: center;

    gap: 18px;

  }



  .uniqueness-list {

    width: 100%;

    grid-template-columns: 1fr;

    gap: 14px;

  }



  .uniqueness-img {

    width: 65%;

  }

}



@media (max-width: 400px) {

  .uniqueness-img {

    width: 100%;

  }

}



/* FEATURES */

.features {

  background: linear-gradient(360deg, #ffffff 0%, #aed5f3 100%);

  padding: 100px;

  position: relative;

}



/* decorative cloud backgrounds for #features */

.features-clouds {

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 0;

}



.features .section-title,

.features .features-list {

  position: relative;

  z-index: 2;

}



.features-clouds .cloud {

  position: absolute;

  display: block;

  user-select: none;

  -webkit-user-drag: none;

  pointer-events: none;

  opacity: 0.95;

  transition:

    transform 300ms ease,

    opacity 300ms ease;

}



.features-clouds .c1 {

  left: 10%;

  top: 6%;

  width: 220px;

  transform: translateZ(0);

}

.features-clouds .c2 {

  right: 40%;

  top: 10%;

  width: 200px;

  transform: translateZ(0);

}

.features-clouds .c3 {

  left: 8%;

  top: 55%;

  width: 100px;

  transform: translateZ(0);

}

.features-clouds .c4 {

  right: 50%;

  top: 55%;

  width: 130px;

  transform: translateZ(0);

}

.features-clouds .c5 {

  right: 0;

  top: 55%;

  width: 300px;

  transform: translateX(0);

}



@media (max-width: 600px) {

  .features-clouds .c1 {

    left: 10%;

    top: 6%;

    width: 100px;

    transform: translateZ(0);

  }

  .features-clouds .c2 {

    right: 10%;

    top: 10%;

    width: 100px;

    transform: translateZ(0);

  }

  .features-clouds .c3 {

    left: 8%;

    top: 55%;

    width: 60px;

    transform: translateZ(0);

  }

  .features-clouds .c4 {

    display: none;

  }

  .features-clouds .c5 {

    right: 0;

    top: 55%;

    width: 200px;

    transform: translateX(0);

  }

}



.features-title {

  text-align: right;

  transform: translateY(50px);

  color: #004bd7;

  font-family: "Readex Pro", sans-serif;

  font-weight: 600;

  font-size: 60px;

  line-height: 64px;

  margin: 0 0 40px 0;

}



.features-list {

  max-width: 1200px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 36px 40px;

  align-items: start;

  padding: 10px 40px;

}



.features-item {

  padding: 48px 32px;

  font-family: "Readex Pro", sans-serif;

  font-weight: 400;

  font-size: 18px;

  line-height: 1.6;

  color: #0b2a66;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

}



.features-item.cloud-light,

.features-item.cloud-dark {

  background: transparent;

  border-radius: 0;

  padding: 0;

  box-shadow: none;

  min-height: 280px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.features-item.cloud-light p,

.features-item.cloud-dark p {

  padding: 24px 30px;

  border-radius: 32px;

  max-width: 300px;

  margin: 12px;

}



.features-item.f1 {

  background-image: url("./photo/features/lightCloud.png");

  background-repeat: no-repeat;

  background-position: center;

  background-size: 360px auto;

}

.features-item.f2 {

  background-image: url("./photo/features/lightCloud.png");

  background-repeat: no-repeat;

  background-position: center;

  transform: translate(-100px, 50px);

  background-size: 360px auto;

}

.features-item.f3 {

  background-image: url("./photo/features/darkCloud.png");

  background-repeat: no-repeat;

  background-position: center;

  transform: translate(50px, -50px);

  background-size: 360px auto;

}

.features-item.f4 {

  background-image: url("./photo/features/darkCloud.png");

  background-repeat: no-repeat;

  background-position: center;

  background-size: 360px auto;

}



@media (max-width: 1050px) {

  .features {

    padding: 60px 20px;

  }



  .features-title {

    font-size: 42px;

    margin-bottom: 24px;

    text-align: center;

    transform: translateY(0);

  }



  .features-list {

    grid-template-columns: 1fr;

    gap: 20px;

    padding: 0 16px;

  }



  .features-item {

    padding: 22px 20px;

    font-size: 16px;

    border-radius: 36px;

  }



  .features-item.f1,

  .features-item.f2,

  .features-item.f3,

  .features-item.f4 {

    transform: translate(0);

  }



  .features-item.cloud-light,

  .features-item.cloud-dark {

    min-height: 240px;

  }

}



@media (max-width: 400px) {

  .features-item {

    font-size: 14px;

    padding: 18px 16px;

  }



  .features-item.f1,

  .features-item.f2,

  .features-item.f3,

  .features-item.f4 {

    background-size: 280px auto;

  }



  .features-item.cloud-light,

  .features-item.cloud-dark {

    min-height: 200px;

  }

}



/* CONTACT */

.contact {

  background-image: url("./photo/contactBg.png");

  background-size: cover;

  background-position: center top;

  padding: 120px 20px;

  position: relative;

  overflow: hidden;

}



.contact::before {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(

    180deg,

    rgba(255, 255, 255, 0.06) 0%,

    rgba(255, 255, 255, 0.06) 40%,

    rgba(255, 255, 255, 0.18) 100%

  );

  z-index: 1;

  pointer-events: none;

}



.contact-box {

  position: relative;

  z-index: 2;

  max-width: 760px;

  margin: 0 auto;

  padding: 40px 48px;

  background: rgba(255, 255, 255, 0.2);

  backdrop-filter: blur(8px);

  border-radius: 12px;

  box-shadow: 0 12px 30px rgba(10, 30, 70, 0.12);

  text-align: center;

}



.contact-title {

  color: #004bd7;

  font-family: "Readex Pro", sans-serif;

  font-weight: 600;

  font-size: 60px;

  line-height: 64px;

  letter-spacing: 0%;

  text-align: center;

  margin-bottom: 60px;

}



.contact-text {

  color: #f800b9;

  font-family: "Readex Pro", sans-serif;

  font-weight: 400;

  font-size: 40px;

  line-height: 48px;

  letter-spacing: 0%;

  text-align: center;

}



.contact-email {

  display: inline-block;

  color: #f800b9;

  font-family: "Readex Pro", sans-serif;

  font-weight: 400;

  font-size: 40px;

  line-height: 48px;

  letter-spacing: 0%;

  text-align: center;

}



@media (max-width: 800px) {

  .contact {

    padding: 60px 16px;

    background-position: center 10%;

  }



  .contact-box {

    padding: 30px 22px;

    max-width: 92%;

  }



  .contact-title {

    font-size: 40px;

    margin-bottom: 40px;

  }



  .contact-text,

  .contact-email {

    font-size: 28px;

    line-height: 32px;

  }

}



/* FOOTER */

.footer {

  background: #06324a; /* deep navy */

  color: #d9eefc;

  padding: 28px 20px;

}



.footer-container {

  max-width: 1200px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 20px;

  flex-wrap: wrap;

}



.footer-links {

  margin: 0;

  padding: 0;

  color: #cfe8ff;

  font-size: 14px;

}



.footer-links a {

  color: #cfe8ff;

  text-decoration: none;

  margin: 0 8px;

}



.footer-links a:hover {

  text-decoration: underline;

}



.footer-copy {

  margin: 0;

  color: #a9d0ea;

  font-size: 14px;

  text-align: right;

}



@media (max-width: 700px) {

  .footer-container {

    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 12px;

  }



  .footer-links {

    order: 1;

  }



  .footer-copy {

    order: 2;

    text-align: center;

  }

}



/* COOKIE POPUP (appended) */

.page-popup {

  position: fixed;

  left: 24px;

  right: 24px;

  bottom: 22px;

  z-index: 1200;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding: 14px 18px;

  background: #004bd7;

  color: #fff;

  border-radius: 12px;

  box-shadow: 0 18px 40px rgba(6, 50, 74, 0.18);

  font-size: 15px;

  transition:

    opacity 0.25s ease,

    transform 0.25s ease,

    visibility 0.25s;

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}



/* Hidden state: HTML includes `popup-click` by default */

.page-popup.popup-click {

  opacity: 0;

  transform: translateY(8px);

  visibility: hidden;

  pointer-events: none;

}



.page-popup .popup-text {

  margin: 0;

  padding: 0 8px 0 0;

  line-height: 1.45;

  color: rgba(255, 255, 255, 0.95);

  flex: 1 1 auto;

}



.page-popup .popup-wrap {

  display: flex;

  gap: 10px;

  align-items: center;

  flex: 0 0 auto;

}



.popup-btn {

  appearance: none;

  border: none;

  background: transparent;

  color: rgba(255, 255, 255, 0.95);

  padding: 8px 12px;

  border-radius: 10px;

  cursor: pointer;

  font-size: 14px;

}



.popup-btn:focus {

  outline: 2px solid rgba(255, 255, 255, 0.12);

  outline-offset: 2px;

}

.popup-btn:hover {

  opacity: 0.95;

}



.popup-btn.accept {

  background: #bfe8ff;

  color: #04224a;

  padding: 9px 14px;

  border-radius: 12px;

  box-shadow: 0 6px 18px rgba(11, 96, 255, 0.18);

}



.popup-btn.accept:hover {

  filter: brightness(0.88);

}



.page-popup a {

  color: #e6f5ff;

  text-decoration: underline;

}



@media (max-width: 480px) {

  .page-popup {

    left: 16px;

    right: auto;

    width: 320px;

    bottom: 16px;

    padding: 14px 16px;

    flex-direction: column;

    align-items: flex-start;

    border-radius: 16px;

  }



  .page-popup .popup-text {

    font-size: 13px;

  }

  .page-popup .popup-wrap {

    width: 100%;

    display: flex;

    justify-content: space-between;

    gap: 12px;

    margin-top: 10px;

  }

  .popup-btn {

    font-size: 13px;

    padding: 8px 10px;

  }

}