@import url('https://fonts.googleapis.com/css2?family=Single+Day&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

@font-face {
  font-family: "Vividly-Regular";
  src: url("./Vividly-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Minako-Regular";
  src: url("./Minako-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

html,

/* Base styles (Desktop / Laptop default) */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;

    background-image: url("bggglaptopp.png");
    background-size: cover;        /* makes it fill full screen */
    background-position: center;   /* keeps it centered */
    background-repeat: no-repeat;
    background-attachment: fixed;  /* optional: makes it stay while scrolling */
}


/* Tablet */
@media (max-width: 1024px) {
    body {
        background-image: url("bggglaptopp.png");
    }
}


/* Mobile */
@media (max-width: 600px) {
    body {
        background-image: url("bggg.png");
        background-attachment: scroll; /* better performance on phones */
    }
}

/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}
/* @FONTWARNING[{"type": "restricted", "family": "Vividly-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Vividly-Regular";
  src: local("Vividly-Regular");
}
/* @FONTWARNING[{"type": "restricted", "family": "Inter-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Inter-Regular";
  src: local("Inter-Regular");
}
/* @FONTWARNING[{"type": "restricted", "family": "Black Future-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Black Future-Regular";
  src: local("Black Future-Regular");
}
.screen {
  width: 100%;
  min-width: 576px;
  min-height: 2000px;
  position: relative;
}

.screen .HOME-GLOW-KOREAN {
  top: 657px;
  left: 288px;
  position: absolute;
  width: 256px;
  height: 300px;
  aspect-ratio: 0.86;
  object-fit: cover;
}

.screen .HOME-FOOTER {
  top: 1787px;
  left: calc(50.00% - 258px);
  width: 515px;
  height: 109px;
  aspect-ratio: 4.73;
  position: absolute;
  object-fit: cover;
}

.screen .beautiful-soft-words {
  position: absolute;
  top: 843px;
  left: calc(50.00% + 55px);
  width: 141px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper {
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  letter-spacing: 0;
}

.screen .span {
  font-size: 16px;
}

.screen .div {
  top: 896px;
  left: calc(50.00% + 90px);
  width: 67px;
  color: #ffffff;
  font-size: 13px;
  white-space: nowrap;
  position: absolute;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.screen .img {
  top: 657px;
  left: 29px;
  position: absolute;
  width: 256px;
  height: 300px;
  aspect-ratio: 0.86;
  object-fit: cover;
}

.screen .HOME-GLOW-KOREAN-2 {
  top: 963px;
  left: 288px;
  position: absolute;
  width: 256px;
  height: 300px;
  aspect-ratio: 0.86;
  object-fit: cover;
}

.screen .HOME-GLOW-KOREAN-3 {
  top: 963px;
  left: 29px;
  position: absolute;
  width: 256px;
  height: 300px;
  aspect-ratio: 0.86;
  object-fit: cover;
}

.screen .HOME-GLOW-KOREAN-4 {
  top: 1269px;
  left: 288px;
  position: absolute;
  width: 256px;
  height: 300px;
  aspect-ratio: 0.86;
  object-fit: cover;
}

.screen .HOME-GLOW-KOREAN-5 {
  top: 1269px;
  left: 29px;
  position: absolute;
  width: 256px;
  height: 300px;
  aspect-ratio: 0.86;
  object-fit: cover;
}

.screen .your-soft-start-to {
  position: absolute;
  top: 1149px;
  left: calc(50.00% - 207px);
  width: 141px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.screen .HOME-MEOW {
  position: absolute;
  top: 510px;
  left: calc(50.00% - 275px);
  width: 549px;
  height: 133px;
  aspect-ratio: 4.13;
  object-fit: cover;
}

.screen .text-wrapper-2 {
  position: absolute;
  top: 1202px;
  left: calc(50.00% - 172px);
  width: 67px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 13px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.screen .soft-peaceful {
  top: 1149px;
  left: calc(50.00% + 55px);
  width: 141px;
  color: #ffc7e1;
  font-size: 11px;
  position: absolute;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-3 {
  position: absolute;
  top: 1202px;
  left: calc(50.00% + 88px);
  width: 74px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 13px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.screen .removebg-preview {
  top: 559px;
  left: 138px;
  width: 41px;
  height: 41px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.screen .removebg-preview-2 {
  top: 559px;
  left: 390px;
  width: 41px;
  height: 41px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.screen .removebg-preview-3 {
  top: 532px;
  left: 307px;
  width: 94px;
  height: 94px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.screen .removebg-preview-4 {
  top: 532px;
  left: 173px;
  width: 94px;
  height: 94px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.screen .removebg-preview-5 {
  top: 547px;
  left: calc(50.00% - 34px);
  width: 69px;
  height: 69px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.screen .HOME-MEOW-2 {
  top: 1615px;
  left: calc(50.00% - 275px);
  width: 549px;
  height: 133px;
  aspect-ratio: 4.13;
  position: absolute;
  object-fit: cover;
}

.screen .removebg-preview-6 {
  top: 1664px;
  left: 138px;
  width: 41px;
  height: 41px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.screen .removebg-preview-7 {
  top: 1664px;
  left: 390px;
  width: 41px;
  height: 41px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.screen .removebg-preview-8 {
  top: 1637px;
  left: 307px;
  width: 94px;
  height: 94px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.screen .removebg-preview-9 {
  top: 1637px;
  left: 173px;
  width: 94px;
  height: 94px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.screen .removebg-preview-10 {
  top: 1652px;
  left: calc(50.00% - 34px);
  width: 69px;
  height: 69px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.screen .step-into-soft {
  position: absolute;
  top: 1455px;
  left: calc(50.00% - 207px);
  width: 141px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-4 {
  position: absolute;
  top: 1508px;
  left: calc(50.00% - 178px);
  width: 82px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 13px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.screen .learn-french-the {
  position: absolute;
  top: 1455px;
  left: calc(50.00% + 55px);
  width: 141px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-5 {
  position: absolute;
  top: 1508px;
  left: calc(50.00% + 89px);
  width: 73px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 13px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.screen .text-wrapper-6 {
  top: 1801px;
  left: calc(50.00% - 57px);
  width: 114px;
  font-size: 18px;
  position: absolute;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.screen .grow-at-your-own {
  position: absolute;
  top: 1826px;
  left: calc(50.00% - 91px);
  width: 182px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.screen .about-contact {
  position: absolute;
  top: 1842px;
  left: calc(50.00% - 194px);
  width: 389px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.screen .element-rabbity-all {
  position: absolute;
  top: 1863px;
  left: calc(50.00% - 118px);
  width: 236px;
  font-family: "Black Future-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.screen .text-wrapper-7 {
  font-family: "Black Future-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  letter-spacing: 0;
}

.screen .text-wrapper-8 {
  font-family: "Vividly-Regular", Helvetica;
}

.screen .text-wrapper-9 {
  top: 896px;
  left: calc(50.00% - 172px);
  width: 67px;
  color: #ffffff;
  font-size: 13px;
  white-space: nowrap;
  position: absolute;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.screen .glow-softly-while {
  top: 843px;
  left: calc(50.00% - 207px);
  width: 141px;
  color: #ffc7e1;
  font-size: 11px;
  position: absolute;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.screen .HOME-START {
  top: 130px;
  left: calc(50.00% - 241px);
  width: 453px;
  height: 360px;
  aspect-ratio: 1.26;
  position: absolute;
  object-fit: cover;
}

.screen .rectangle {
  left: 150px;
  position: absolute;
  top: 411px;
  width: 50px;
  height: 50px;
  background-color: #ffd6e9;
  border-radius: 14px;
  border: 1px solid;
  border-color: #ffffff;
}

.screen .rectangle-2 {
  left: 211px;
  position: absolute;
  top: 411px;
  width: 50px;
  height: 50px;
  background-color: #ffd6e9;
  border-radius: 14px;
  border: 1px solid;
  border-color: #ffffff;
}

.screen .rectangle-3 {
  left: 272px;
  position: absolute;
  top: 411px;
  width: 50px;
  height: 50px;
  background-color: #ffd6e9;
  border-radius: 14px;
  border: 1px solid;
  border-color: #ffffff;
}

.screen .download-removebg {
  position: absolute;
  top: 421px;
  left: 160px;
  width: 30px;
  height: 30px;
  aspect-ratio: 1;
  object-fit: cover;
}

.screen .tiktok-removebg {
  top: 420px;
  left: 219px;
  width: 33px;
  height: 33px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.screen .tiktok-removebg-2 {
  top: 419px;
  left: 281px;
  width: 32px;
  height: 32px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.screen .download-removebg-2 {
  left: 173px;
  position: absolute;
  top: 396px;
  width: 37px;
  height: 37px;
  aspect-ratio: 1;
  object-fit: cover;
}

.screen .download-removebg-3 {
  left: 234px;
  position: absolute;
  top: 396px;
  width: 37px;
  height: 37px;
  aspect-ratio: 1;
  object-fit: cover;
}

.screen .download-removebg-4 {
  left: 295px;
  position: absolute;
  top: 396px;
  width: 37px;
  height: 37px;
  aspect-ratio: 1;
  object-fit: cover;
}

.screen .welcome-to-your-cozy {
  position: absolute;
  top: 253px;
  left: calc(50.00% + 17px);
  width: 175px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-10 {
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 15px;
  
  /* 1. This allows the 'top' command to work */
  position: absolute; 
  
  /* 2. Adjust this number to move it UP. 
     (e.g., if it's too low at 300px, try 250px) */
  top: 1px; 
  
  /* 3. This stops the text from smushing together */
  line-height: 1;
  
  /* 4. Keeps it centered in your layout */
  left: 0;
  right: 0;
  text-align: center;
  width: 100%;
 
}

.screen .text-wrapper-11 {
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 15px;
  
  /* 1. This allows the 'top' command to work */
  position: absolute; 
  
  /* 2. Adjust this number to move it UP. 
     (e.g., if it's too low at 300px, try 250px) */
  top: 34px; 
  
  /* 3. This stops the text from smushing together */
  line-height: 1;
  
  /* 4. Keeps it centered in your layout */
  left: 0;
  right: 0;
  text-align: center;
  width: 100%;
}

.screen .whisper-your-dreams {
  position: absolute;
  top: 336px;
  left: calc(50.00% - 121px);
  width: 107px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.screen .p {
  top: 176px;
  left: calc(50.00% - 6px);
  font-size: 25px;
  white-space: nowrap;
  position: absolute;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.screen .HOME-FOOT-PIC {
  top: 1764px;
  left: 37px;
  position: absolute;
  width: 72px;
  height: 70px;
  aspect-ratio: 1.02;
  object-fit: cover;
}

.screen .HOME-FOOT-PIC-2 {
  top: 1854px;
  left: 464px;
  position: absolute;
  width: 72px;
  height: 70px;
  aspect-ratio: 1.02;
  object-fit: cover;
}
/* 🌸 WRAPPER FOR CENTERING */
.wrapper {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* 🌸 MOBILE BASE (your original design size) */
.screen {
  width: 576px;
  transform-origin: top center;
}

/* 🌸 TABLET */
@media (min-width: 768px) {
  .screen {
    transform: scale(1.1);
  }
}

/* 🌸 SMALL LAPTOP */
@media (min-width: 1024px) {
  .screen {
    transform: scale(1.25);
  }
}

/* 🌸 BIG LAPTOP / DESKTOP */
@media (min-width: 1440px) {
  .screen {
    transform: scale(1.4);
  }
}








@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
html,
body {
  margin: 0px;
  height: 100%;
}
/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}
/* @FONTWARNING[{"type": "restricted", "family": "Vividly-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Vividly-Regular";
  src: local("Vividly-Regular");
}
/* @FONTWARNING[{"type": "restricted", "family": "Inter-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Inter-Regular";
  src: local("Inter-Regular");
}
/* @FONTWARNING[{"type": "restricted", "family": "Black Future-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Black Future-Regular";
  src: local("Black Future-Regular");
}

.glow-korean {
  width: 100%;
  min-width: 576px;
  min-height: 1982px;
  position: relative;
}

.glow-korean .GLOW-KOREAN-START {
  position: absolute;
  top: 124px;
  left: calc(50.00% - 245px);
  width: 490px;
  height: 313px;
  aspect-ratio: 1.56;
  object-fit: cover;
}

.glow-korean .KOREAN-BEGINER {
  top: 1003px;
  position: absolute;
  left: calc(50.00% - 253px);
  width: 506px;
  height: 147px;
  aspect-ratio: 3.45;
  object-fit: cover;
}

.glow-korean .img {
  top: 1141px;
  position: absolute;
  left: calc(50.00% - 253px);
  width: 506px;
  height: 147px;
  aspect-ratio: 3.45;
  object-fit: cover;
}

.glow-korean .KOREAN-BEGINER-2 {
  top: 1282px;
  position: absolute;
  left: calc(50.00% - 253px);
  width: 506px;
  height: 147px;
  aspect-ratio: 3.45;
  object-fit: cover;
}

.glow-korean .KOREAN-BEGINER-3 {
  top: 1420px;
  position: absolute;
  left: calc(50.00% - 253px);
  width: 506px;
  height: 147px;
  aspect-ratio: 3.45;
  object-fit: cover;
}

.glow-korean .text-wrapper {
  position: absolute;
  top: 1211px;
  left: calc(50.00% - 169px);
  width: 182px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.glow-korean .div {
  position: absolute;
  top: 1223px;
  left: calc(50.00% + 35px);
  width: 75px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.glow-korean .p {
  position: absolute;
  top: 1352px;
  left: calc(50.00% - 163px);
  width: 175px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.glow-korean .text-wrapper-2 {
  position: absolute;
  top: 1364px;
  left: calc(50.00% + 42px);
  width: 67px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.glow-korean .text-wrapper-3 {
  position: absolute;
  top: 1490px;
  left: calc(50.00% - 163px);
  width: 175px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.glow-korean .text-wrapper-4 {
  position: absolute;
  top: 1502px;
  left: calc(50.00% + 42px);
  width: 67px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.glow-korean .welcome-to-your-cozy {
  position: absolute;
  top: 235px;
  left: calc(50.00% - 148px);
  width: 107px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.glow-korean .span {
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  letter-spacing: 0;
}

.glow-korean .text-wrapper-5 {
  font-size: 16px;
}

.glow-korean .text-wrapper-6 {
  position: absolute;
  top: 1079px;
  left: calc(50.00% - 158px);
  width: 162px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.glow-korean .text-wrapper-7 {
  position: absolute;
  top: 1085px;
  left: calc(50.00% + 41px);
  width: 67px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.glow-korean .small-lessons-pretty {
  position: absolute;
  top: 306px;
  left: calc(50.00% - 52px);
  width: 107px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.glow-korean .text-wrapper-8 {
  top: 178px;
  left: calc(50.00% - 189px);
  font-size: 20px;
  white-space: nowrap;
  position: absolute;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.glow-korean .text-wrapper-77 {
  top: 178px;
  left: calc(50.00% - 204px);
  font-size: 20px;
  white-space: nowrap;
  position: absolute;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.glow-korean .HOME-MEOW {
  position: absolute;
  top: 556px;
  left: calc(50.00% - 275px);
  width: 549px;
  height: 133px;
  aspect-ratio: 4.13;
  object-fit: cover;
}

.glow-korean .removebg-preview {
  top: 605px;
  left: 140px;
  width: 41px;
  height: 41px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.glow-korean .removebg-preview-2 {
  top: 605px;
  left: 392px;
  width: 41px;
  height: 41px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.glow-korean .removebg-preview-3 {
  top: 579px;
  left: 308px;
  width: 94px;
  height: 94px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.glow-korean .removebg-preview-4 {
  top: 579px;
  left: 175px;
  width: 94px;
  height: 94px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.glow-korean .removebg-preview-5 {
  top: 593px;
  left: calc(50.00% - 33px);
  width: 69px;
  height: 69px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.glow-korean .HOME-FOOTER {
  top: 1772px;
  left: calc(50.00% - 258px);
  width: 515px;
  height: 109px;
  aspect-ratio: 4.73;
  position: absolute;
  object-fit: cover;
}

.glow-korean .HOME-MEOW-2 {
  top: 1601px;
  left: calc(50.00% - 275px);
  width: 549px;
  height: 133px;
  aspect-ratio: 4.13;
  position: absolute;
  object-fit: cover;
}

.glow-korean .removebg-preview-6 {
  position: absolute;
  top: 1650px;
  left: 138px;
  width: 41px;
  height: 41px;
  aspect-ratio: 1;
  object-fit: cover;
}

.glow-korean .removebg-preview-7 {
  position: absolute;
  top: 1650px;
  left: 390px;
  width: 41px;
  height: 41px;
  aspect-ratio: 1;
  object-fit: cover;
}

.glow-korean .removebg-preview-8 {
  position: absolute;
  top: 1623px;
  left: 307px;
  width: 94px;
  height: 94px;
  aspect-ratio: 1;
  object-fit: cover;
}

.glow-korean .removebg-preview-9 {
  position: absolute;
  top: 1623px;
  left: 173px;
  width: 94px;
  height: 94px;
  aspect-ratio: 1;
  object-fit: cover;
}




.glow-korean .removebg-preview-10 {
  position: absolute;
  top: 1638px;
  left: calc(50.00% - 34px);
  width: 69px;
  height: 69px;
  aspect-ratio: 1;
  object-fit: cover;
}

.glow-korean .text-wrapper-9 {
  top: 1787px;
  left: calc(50.00% - 57px);
  width: 114px;
  font-size: 18px;
  position: absolute;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.glow-korean .grow-at-your-own {
  position: absolute;
  top: 1812px;
  left: calc(50.00% - 91px);
  width: 182px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.glow-korean .about-contact {
  position: absolute;
  top: 1828px;
  left: calc(50.00% - 194px);
  width: 389px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.glow-korean .element-rabbity-all {
  position: absolute;
  top: 1849px;
  left: calc(50.00% - 118px);
  width: 236px;
  font-family: "Black Future-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.glow-korean .text-wrapper-10 {
  font-family: "Black Future-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  letter-spacing: 0;
}

.glow-korean .text-wrapper-11 {
  font-family: "Vividly-Regular", Helvetica;
}

.glow-korean .HOME-FOOT-PIC {
  top: 1750px;
  left: 37px;
  position: absolute;
  width: 72px;
  height: 70px;
  aspect-ratio: 1.02;
  object-fit: cover;
}

.glow-korean .HOME-FOOT-PIC-2 {
  top: 1840px;
  left: 464px;
  position: absolute;
  width: 72px;
  height: 70px;
  aspect-ratio: 1.02;
  object-fit: cover;
}

.glow-korean .rectangle {
  top: 439px;
  position: absolute;
  left: calc(50.00% - 117px);
  width: 235px;
  height: 49px;
}

.glow-korean .rectangle-2 {
  top: 928px;
  position: absolute;
  left: calc(50.00% - 117px);
  width: 235px;
  height: 49px;
}

.glow-korean .text-wrapper-12 {
  position: absolute;
  top: 455px;
  left: calc(50.00% - 81px);
  width: 163px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 23px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}





.badge-btn {
    background: transparent;
    border: none;
    color: #FFC7E1;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    font-family: "Vividly-Regular", cursive;
    
    /* 🎀 This is now further down! 🎀 */
    margin-top: -110px; 
}


/* tablet */
@media (min-width: 768px) {
  .glow-korean {
    transform: scale(1.1);
  }
}

/* laptop */
@media (min-width: 1024px) {
  .glow-korean {
    transform: scale(1.25);
  }
}

/* big screens */
@media (min-width: 1440px) {
  .glow-korean {
    transform: scale(1.4);
  }
}





.heart-logic-wrapper {
    position: absolute;
    top: 500px; 
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    z-index: 1000;
}

@media (min-width: 1025px) {
    .heart-logic-wrapper {
        top: 626px; /* adjust for laptop */
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .heart-logic-wrapper {
        top: 555px; /* adjust for tablet */
    }
}

.heart-row {
    display: flex;
    gap: 20px;
}

.heart-item {
    width: 23px;
    height: 23px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.glow-message {
    color: #FFC7E1;
    font-family: "Vividly-Regular", Helvetica, cursive;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    margin-top: 5px; 
    min-height: 20px;
}


.wrapper {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.glow-korean {
  width: 576px;
  transform-origin: top center;
}

























.card-container-wrapper {
    position: absolute;
    top: 720px; /* Adjust this to move the card group up or down in your design */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 1000;
}


/* 📱 MOBILE = default (unchanged) */


/* 📱 TABLET */
@media (min-width: 768px) {
  .card-container-wrapper {
    top: 820px; /* move only on tablet */
  }

  .student-pass-card {
    transform: scale(1.15);
    transform-origin: center;
  }
  
}


/* 💻 LAPTOP */
@media (min-width: 1024px) {
  .card-container-wrapper {
    top: 900px; /* more space on big screen */
  }

  .student-pass-card {
    transform: scale(1.3);
    transform-origin: center;
  }
}


/* 🖥 BIG SCREENS */
@media (min-width: 1440px) {
  .card-container-wrapper {
    top: 980px;
  }

  .student-pass-card {
    transform: scale(1.45);
    transform-origin: center;
  }


}



.student-pass-card {
    width: 324px;
    height: 181px;
    border-radius: 15px;
    border: 3px solid #ffffff;
    position: relative;
    overflow: hidden;
    background-color: #FFF2F9; /* Fallback pink */
    background-image: url('card-bg.png'); /* Replace with your background filename */
    background-size: cover;
    background-position: center;
    font-family: "Vividly-Regular", cursive;
}

/* 🌸 TABLET + LAPTOP CARD ENLARGEMENT ONLY */

@media (min-width: 768px) { 
  .student-pass-card {
    transform: scale(1.2);
    transform-origin: center;
  }

  .card-container-wrapper {
    top: 779px;
}
  }


@media (min-width: 1024px) {
  .student-pass-card {
    transform: scale(1.35);
    transform-origin: center;
  }

  .card-container-wrapper {
    top: 900px;
  }
}

@media (min-width: 1440px) {
  .student-pass-card {
    transform: scale(1.5);
    transform-origin: center;
  }

  .card-container-wrapper {
    top: 942px;
  }
}

.photo-section {
    position: absolute;
    left: 15px;
    top: 15px;
    width: 105px;
    height: 115px;
    border: 2px solid #ffffff;
    background: #FFF2F9;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.pfp-style { width: 100%; height: 100%; object-fit: cover; }

.upload-label {
    font-size: 10px;
    cursor: pointer;
    text-align: center;
    width: 100%;
    color: #FFB0D7;
}

.content-section {
    position: absolute;
    left: 135px;
    top: 20px;
    width: 175px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-heart-bg {
    width: 155px;
    position: absolute;
    top: -19px;
    z-index: 0;
    opacity: 0.8;
}

.text-overlay {
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
    margin-top: 31px;
    text-align: center;
}

.card-title { font-size: 13px; font-weight: bold; color: #FFB0D7; line-height: 1; }
.card-subtitle { font-size: 14px; letter-spacing: 1px; color: #FFC7E1; }

.separator {
    font-size: 15px;
    color: #FFB0D7;
    position: absolute;
    top: 84px;
    z-index: 1;
    text-align: center;
    width: 100%;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 33px;
    row-gap: -2px;
    width: 100%;
    z-index: 1;
    margin-top: 5px;
}

.field { font-size: 10px; font-weight: bold; color: #FFB0D7; text-align: left; }

.card-input {
    display: block;
    width: 100%;
    min-height: 14px;
    border: none;
    background: transparent;
    outline: none;
    font-size: 11px;
    color: #FFC7E1;
    white-space: nowrap;
}

.barcode-style {
    position: absolute;
    bottom: 22px;
    left: 15px;
    width: 105px;
}

.badge-btn {
    background: transparent;
    border: none;
    color: #FFC7E1;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    font-family: "Vividly-Regular";
    margin-top: 37px;
}


/* 📱 MOBILE (default stays same) */
.badge-btn {
    font-size: 17px;
    margin-top: 36px;
}

/* 📱 TABLET */
@media (min-width: 768px) {
    .badge-btn {
        font-size: 20px;
        margin-top: 73px;
    }
}

/* 💻 LAPTOP */
@media (min-width: 1024px) {
    .badge-btn {
        font-size: 24px;
                margin-top: 92px;

    }
}

/* 🖥 BIG SCREENS */
@media (min-width: 1440px) {
    .badge-btn {
        font-size: 26px;
                margin-top: 92px;

    }
}




























@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
html,
body {
  margin: 0px;
  height: 100%;
}
/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}
/* @FONTWARNING[{"type": "restricted", "family": "Vividly-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Vividly-Regular";
  src: local("Vividly-Regular");
}
/* @FONTWARNING[{"type": "restricted", "family": "Single Day-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Single Day-Regular";
  src: local("Single Day-Regular");
}
/* @FONTWARNING[{"type": "restricted", "family": "Inter-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Inter-Regular";
  src: local("Inter-Regular");
}
/* @FONTWARNING[{"type": "restricted", "family": "Black Future-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Black Future-Regular";
  src: local("Black Future-Regular");
}
.KOREAN-beginner {
  width: 100%;
  min-width: 576px;
  min-height: 2089px;
  position: relative;
}

.KOREAN-beginner .k-BEGINNER-START {
  position: absolute;
  top: 120px;
  left: calc(50.00% - 195px);
  width: 387px;
  height: 299px;
  aspect-ratio: 1.3;
  object-fit: cover;
}

.KOREAN-beginner .tgrttr {
  top: 583px;
  left: 42px;
  position: absolute;
  width: 247px;
  height: 209px;
  aspect-ratio: 1.18;
  object-fit: cover;
}

.KOREAN-beginner .img {
  top: 583px;
  left: 286px;
  position: absolute;
  width: 247px;
  height: 209px;
  aspect-ratio: 1.18;
  object-fit: cover;
}

.KOREAN-beginner .tgrttr-2 {
  top: 804px;
  left: 42px;
  position: absolute;
  width: 247px;
  height: 209px;
  aspect-ratio: 1.18;
  object-fit: cover;
}

.KOREAN-beginner .tgrttr-3 {
  top: 804px;
  left: 286px;
  position: absolute;
  width: 247px;
  height: 209px;
  aspect-ratio: 1.18;
  object-fit: cover;
}

.KOREAN-beginner .tgrttr-4 {
  top: 1025px;
  left: 42px;
  position: absolute;
  width: 247px;
  height: 209px;
  aspect-ratio: 1.18;
  object-fit: cover;
}

.KOREAN-beginner .tgrttr-5 {
  top: 1025px;
  left: 286px;
  position: absolute;
  width: 247px;
  height: 209px;
  aspect-ratio: 1.18;
  object-fit: cover;
}

.KOREAN-beginner .tgrttr-6 {
  top: 1245px;
  left: 42px;
  position: absolute;
  width: 247px;
  height: 209px;
  aspect-ratio: 1.18;
  object-fit: cover;
}

.KOREAN-beginner .tgrttr-7 {
  top: 1245px;
  left: 286px;
  position: absolute;
  width: 247px;
  height: 209px;
  aspect-ratio: 1.18;
  object-fit: cover;
}

.KOREAN-beginner .tgrttr-8 {
  top: 1466px;
  left: 42px;
  position: absolute;
  width: 247px;
  height: 209px;
  aspect-ratio: 1.18;
  object-fit: cover;
}

.KOREAN-beginner .tgrttr-9 {
  top: 1466px;
  left: 286px;
  position: absolute;
  width: 247px;
  height: 209px;
  aspect-ratio: 1.18;
  object-fit: cover;
}

.KOREAN-beginner .text-wrapper {
  position: absolute;
  top: 678px;
  left: calc(50.00% - 202px);
  width: 107px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
}

.KOREAN-beginner .morning-chat {
  position: absolute;
  top: 632px;
  left: calc(50.00% - 202px);
  width: 95px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 23px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-beginner .span {
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 23px;
  letter-spacing: 0;
}

.KOREAN-beginner .text-wrapper-2 {
  font-size: 20px;
}

.KOREAN-beginner .div {
  top: 767px;
  left: calc(50.00% - 164px);
  width: 82px;
  position: absolute;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-beginner .practice-basic {
  position: absolute;
  top: 1341px;
  left: calc(50.00% - 202px);
  width: 107px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
}

.KOREAN-beginner .at-the-bus-stop {
  position: absolute;
  top: 1295px;
  left: calc(50.00% - 202px);
  width: 95px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 23px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-beginner .feel-speak {
  position: absolute;
  top: 1430px;
  left: calc(50.00% - 164px);
  width: 82px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-beginner .learn-prices-colors {
  position: absolute;
  top: 1341px;
  left: calc(50.00% + 44px);
  width: 107px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
}

.KOREAN-beginner .practice-telling-and {
  position: absolute;
  top: 1562px;
  left: calc(50.00% - 202px);
  width: 107px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
}

.KOREAN-beginner .asking-the-time {
  position: absolute;
  top: 1516px;
  left: calc(50.00% - 202px);
  width: 95px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 23px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-beginner .text-wrapper-3 {
  position: absolute;
  top: 1651px;
  left: calc(50.00% - 164px);
  width: 82px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-beginner .talk-about-sunny {
  position: absolute;
  top: 1562px;
  left: calc(50.00% + 44px);
  width: 107px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
}

.KOREAN-beginner .weather-chat {
  top: 1516px;
  left: calc(50.00% + 44px);
  width: 95px;
  color: #ffc7e1;
  font-size: 23px;
  position: absolute;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-beginner .text-wrapper-4 {
  top: 1651px;
  left: calc(50.00% + 79px);
  width: 90px;
  color: #ffffff;
  font-size: 17px;
  text-align: center;
  position: absolute;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-beginner .shopping-cute-things {
  position: absolute;
  top: 1295px;
  left: calc(50.00% + 44px);
  width: 95px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 23px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-beginner .text-wrapper-5 {
  position: absolute;
  top: 1430px;
  left: calc(50.00% + 83px);
  width: 82px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-beginner .from-to-full {
  position: absolute;
  top: 228px;
  left: calc(50.00% - 108px);
  width: 107px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.KOREAN-beginner .text-wrapper-6 {
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  letter-spacing: 0;
}

.KOREAN-beginner .text-wrapper-7 {
  font-size: 16px;
}

.KOREAN-beginner .text-wrapper-8 {
  font-family: "Single Day"!important;
  font-size: 16px;
  /* Adding this helps Korean characters breathe better */
}

.KOREAN-beginner .start-your-korean {
  position: absolute;
  top: 291px;
  left: calc(50.00% - 5px);
  width: 107px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.KOREAN-beginner .p {
  top: 173px;
  left: calc(50.00% - 149px);
  font-size: 21px;
  white-space: nowrap;
  position: absolute;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.KOREAN-beginner .text-wrapper-9 {
  position: absolute;
  top: 678px;
  left: calc(50.00% + 44px);
  width: 107px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
}

.KOREAN-beginner .getting-ready {
  position: absolute;
  top: 632px;
  left: calc(50.00% + 44px);
  width: 95px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 23px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-beginner .learn-friendly {
  position: absolute;
  top: 1120px;
  left: calc(50.00% + 44px);
  width: 107px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
}

.KOREAN-beginner .hello-friend {
  position: absolute;
  top: 1074px;
  left: calc(50.00% + 44px);
  width: 95px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 23px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-beginner .text-wrapper-10 {
  position: absolute;
  top: 1209px;
  left: calc(50.00% + 83px);
  width: 82px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-beginner .order-and-talk-about {
  position: absolute;
  top: 899px;
  left: calc(50.00% - 202px);
  width: 107px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
}

.KOREAN-beginner .breakfast-time {
  position: absolute;
  top: 853px;
  left: calc(50.00% - 202px);
  width: 95px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 23px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-beginner .text-wrapper-11 {
  top: 988px;
  left: calc(50.00% - 166px);
  width: 91px;
  position: absolute;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-beginner .learn-how-to-order {
  position: absolute;
  top: 899px;
  left: calc(50.00% + 44px);
  width: 107px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
}

.KOREAN-beginner .cute-cafe-visit {
  position: absolute;
  top: 853px;
  left: calc(50.00% + 44px);
  width: 95px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 23px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-beginner .sip-learn {
  position: absolute;
  top: 988px;
  left: calc(50.00% + 83px);
  width: 82px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-beginner .text-wrapper-12 {
  position: absolute;
  top: 767px;
  left: calc(50.00% + 83px);
  width: 82px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-beginner .practice-simple {
  position: absolute;
  top: 1120px;
  left: calc(50.00% - 202px);
  width: 107px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
}

.KOREAN-beginner .HOME-FOOTER {
  top: 1898px;
  left: calc(50.00% - 258px);
  width: 515px;
  height: 109px;
  aspect-ratio: 4.73;
  position: absolute;
  object-fit: cover;
}

.KOREAN-beginner .going-outside {
  position: absolute;
  top: 1074px;
  left: calc(50.00% - 202px);
  width: 95px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 23px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-beginner .text-wrapper-13 {
  position: absolute;
  top: 1209px;
  left: calc(50.00% - 164px);
  width: 82px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-beginner .grow-at-your-own {
  position: absolute;
  top: 1937px;
  left: calc(50.00% - 91px);
  width: 182px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-beginner .about-contact {
  position: absolute;
  top: 1953px;
  left: calc(50.00% - 194px);
  width: 389px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-beginner .element-rabbity-all {
  position: absolute;
  top: 1974px;
  left: calc(50.00% - 118px);
  width: 236px;
  font-family: "Black Future-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-beginner .text-wrapper-14 {
  font-family: "Black Future-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  letter-spacing: 0;
}

.KOREAN-beginner .text-wrapper-15 {
  font-family: "Vividly-Regular", Helvetica;
}

.KOREAN-beginner .HOME-FOOT-PIC {
  top: 1875px;
  left: 37px;
  position: absolute;
  width: 72px;
  height: 70px;
  aspect-ratio: 1.02;
  object-fit: cover;
}

.KOREAN-beginner .HOME-FOOT-PIC-2 {
  top: 1965px;
  left: 464px;
  position: absolute;
  width: 72px;
  height: 70px;
  aspect-ratio: 1.02;
  object-fit: cover;
}

.KOREAN-beginner .HOME-MEOW {
  top: 1726px;
  left: calc(50.00% - 275px);
  width: 549px;
  height: 133px;
  aspect-ratio: 4.13;
  position: absolute;
  object-fit: cover;
}

.KOREAN-beginner .removebg-preview {
  top: 1775px;
  left: 138px;
  width: 41px;
  height: 41px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.KOREAN-beginner .removebg-preview-2 {
  top: 1775px;
  left: 390px;
  width: 41px;
  height: 41px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.KOREAN-beginner .removebg-preview-3 {
  top: 1749px;
  left: 307px;
  width: 94px;
  height: 94px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.KOREAN-beginner .removebg-preview-4 {
  top: 1749px;
  left: 173px;
  width: 94px;
  height: 94px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.KOREAN-beginner .removebg-preview-5 {
  top: 1763px;
  left: calc(50.00% - 34px);
  width: 69px;
  height: 69px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.KOREAN-beginner .HOME-MEOW-2 {
  position: absolute;
  top: 432px;
  left: calc(50.00% - 275px);
  width: 549px;
  height: 133px;
  aspect-ratio: 4.13;
  object-fit: cover;
}

.KOREAN-beginner .removebg-preview-6 {
  top: 481px;
  left: 140px;
  width: 41px;
  height: 41px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.KOREAN-beginner .removebg-preview-7 {
  top: 481px;
  left: 392px;
  width: 41px;
  height: 41px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.KOREAN-beginner .removebg-preview-8 {
  top: 454px;
  left: 308px;
  width: 94px;
  height: 94px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.KOREAN-beginner .removebg-preview-9 {
  top: 454px;
  left: 175px;
  width: 94px;
  height: 94px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.KOREAN-beginner .removebg-preview-10 {
  top: 468px;
  left: calc(50.00% - 33px);
  width: 69px;
  height: 69px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.KOREAN-beginner .text-wrapper-16 {
  top: 1912px;
  left: calc(50.00% - 57px);
  width: 114px;
  font-size: 18px;
  position: absolute;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}


/* 💖 BASE (MOBILE = YOUR CURRENT DESIGN) */
.KOREAN-beginner {
  width: 576px;
  margin: 0 auto;
  position: relative;
}

/* 💖 TABLET */
@media (min-width: 768px) {
  .KOREAN-beginner {
    transform: scale(1.2);
    transform-origin: top center;
  }
}

/* 💖 LAPTOP */
@media (min-width: 1200px) {
  .KOREAN-beginner {
    transform: scale(1.3);
    transform-origin: top center;
  }
}
































































@font-face {
  font-family: "Vividly-Regular";
  src: url("./Vividly-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}


@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
html,
body {
  margin: 0px;
  height: 100%;
}

/* =========================
   RESPONSIVE FIX (DO NOT EDIT HTML)
   ========================= */

/* Center the whole design on big screens */
body {
  display: flex;
  justify-content: center;
}

/* Main container stays centered */
.korean-roleplay {
  position: relative;
  width: 100%;
  max-width: 576px;   /* your original mobile width */
  margin: 0 auto;
}

/* =========================
   TABLET
   ========================= */
@media (min-width: 768px) {
  .korean-roleplay {
    transform: scale(1.15);
    transform-origin: top center;
  }
}

/* =========================
   SMALL LAPTOP
   ========================= */
@media (min-width: 1024px) {
  .korean-roleplay {
    transform: scale(1.3);
    transform-origin: top center;
  }
}

/* =========================
   DESKTOP / LARGE SCREEN
   ========================= */
@media (min-width: 1440px) {
  .korean-roleplay {
    transform: scale(1.45);
    transform-origin: top center;
  }
}
/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}
/* @FONTWARNING[{"type": "restricted", "family": "Single Day-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Single Day-Regular";
  src: local("Single Day-Regular");
}
/* @FONTWARNING[{"type": "restricted", "family": "Vividly-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Vividly-Regular";
  src: local("Vividly-Regular");
}
/* @FONTWARNING[{"type": "restricted", "family": "Black Future-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Black Future-Regular";
  src: local("Black Future-Regular");
}
/* @FONTWARNING[{"type": "restricted", "family": "Inter-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Inter-Regular";
  src: local("Inter-Regular");
}
.korean-roleplay {
  width: 100%;
  min-width: 576px;
  min-height: 2241px;
  position: relative;
}

.korean-roleplay .rectangle {
  top: 279px;
  left: calc(50.00% - 244px);
  position: absolute;
  width: 364px;
  height: 87px;
}

.korean-roleplay .ellipse {
  top: 251px;
  left: calc(50.00% - 226px);
  width: 62px;
  height: 59px;
  position: absolute;
  object-fit: cover;
}

.korean-roleplay .div {
  top: 307px;
  left: calc(50.00% - 185px);
  width: 206px;
  font-family: "Single Day-Regular", Helvetica;
  font-size: 16px;
  white-space: nowrap;
  position: absolute;
  font-weight: 400;
  color: #ffc7e1;
  letter-spacing: 0;
  line-height: normal;
}

.korean-roleplay .text-wrapper {
  font-family: "Single Day";
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
}

.korean-roleplay .span {
  font-family: "Vividly-Regular", Helvetica;
}

.korean-roleplay .text-wrapper-2 {
  position: absolute;
  top: 330px;
  left: calc(50.00% - 185px);
  width: 206px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.korean-roleplay .voice {
  position: absolute;
  top: 304px;
  left: 351px;
  width: 40px;
  height: 37px;
}

.korean-roleplay .removebg-preview {
  top: 300px;
  left: 302px;
  position: absolute;
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .img {
  top: 375px;
  left: calc(50.00% - 133px);
  position: absolute;
  width: 364px;
  height: 87px;
}

.korean-roleplay .p {
  top: 403px;
  left: calc(50.00% - 18px);
  width: 206px;
  font-family: "Single Day";
  font-size: 16px;
  white-space: nowrap;
  position: absolute;
  font-weight: 400;
  color: #ffc7e1;
  letter-spacing: 0;
  line-height: normal;
}

.korean-roleplay .text-wrapper-3 {
  top: 426px;
  left: calc(50.00% - 18px);
  position: absolute;
  width: 206px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.korean-roleplay .ellipse-2 {
  top: 350px;
  left: calc(50.00% + 146px);
  width: 68px;
  height: 64px;
  position: absolute;
  object-fit: cover;
}

.korean-roleplay .voice-2 {
  top: 400px;
  left: 179px;
  position: absolute;
  width: 40px;
  height: 37px;
}

.korean-roleplay .removebg-preview-2 {
  top: 397px;
  left: 217px;
  position: absolute;
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .rectangle-2 {
  top: 473px;
  left: calc(50.00% - 244px);
  position: absolute;
  width: 364px;
  height: 87px;
}

.korean-roleplay .ellipse-3 {
  top: 445px;
  left: calc(50.00% - 226px);
  width: 62px;
  height: 59px;
  position: absolute;
  object-fit: cover;
}

.korean-roleplay .div-2 {
  top: 501px;
  left: calc(50.00% - 185px);
  width: 206px;
  font-family: "Single Day";
  font-size: 16px;
  white-space: nowrap;
  position: absolute;
  font-weight: 400;
  color: #ffc7e1;
  letter-spacing: 0;
  line-height: normal;
}

.korean-roleplay .text-wrapper-4 {
  top: 524px;
  left: calc(50.00% - 185px);
  position: absolute;
  width: 206px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.korean-roleplay .voice-3 {
  top: 498px;
  left: 351px;
  position: absolute;
  width: 40px;
  height: 37px;
}

.korean-roleplay .removebg-preview-3 {
  top: 494px;
  left: 302px;
  position: absolute;
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .rectangle-3 {
  top: 569px;
  left: calc(50.00% - 133px);
  position: absolute;
  width: 364px;
  height: 87px;
}

.korean-roleplay .div-3 {
  top: 597px;
  left: calc(50.00% - 18px);
  width: 206px;
  font-family: "Single Day-Regular", Helvetica;
  font-size: 16px;
  white-space: nowrap;
  position: absolute;
  font-weight: 400;
  color: #ffc7e1;
  letter-spacing: 0;
  line-height: normal;
}

.korean-roleplay .text-wrapper-5 {
  top: 620px;
  left: calc(50.00% - 18px);
  position: absolute;
  width: 206px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.korean-roleplay .ellipse-4 {
  top: 544px;
  left: calc(50.00% + 146px);
  width: 68px;
  height: 64px;
  position: absolute;
  object-fit: cover;
}

.korean-roleplay .voice-4 {
  top: 594px;
  left: 179px;
  position: absolute;
  width: 40px;
  height: 37px;
}

.korean-roleplay .removebg-preview-4 {
  top: 591px;
  left: 217px;
  position: absolute;
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .rectangle-4 {
  top: 670px;
  left: calc(50.00% - 244px);
  position: absolute;
  width: 364px;
  height: 87px;
}

.korean-roleplay .ellipse-5 {
  top: 642px;
  left: calc(50.00% - 226px);
  width: 62px;
  height: 59px;
  position: absolute;
  object-fit: cover;
}

.korean-roleplay .div-4 {
  top: 698px;
  left: calc(50.00% - 185px);
  width: 206px;
  font-family: "Single Day-Regular", Helvetica;
  font-size: 16px;
  white-space: nowrap;
  position: absolute;
  font-weight: 400;
  color: #ffc7e1;
  letter-spacing: 0;
  line-height: normal;
}

.korean-roleplay .text-wrapper-6 {
  top: 721px;
  left: calc(50.00% - 185px);
  position: absolute;
  width: 206px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.korean-roleplay .voice-5 {
  top: 695px;
  left: 351px;
  position: absolute;
  width: 40px;
  height: 37px;
}

.korean-roleplay .removebg-preview-5 {
  top: 691px;
  left: 302px;
  position: absolute;
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .rectangle-5 {
  top: 766px;
  left: calc(50.00% - 133px);
  position: absolute;
  width: 364px;
  height: 87px;
}

.korean-roleplay .div-5 {
  top: 794px;
  left: calc(50.00% - 18px);
  width: 206px;
  font-family: "Single Day-Regular", Helvetica;
  font-size: 16px;
  white-space: nowrap;
  position: absolute;
  font-weight: 400;
  color: #ffc7e1;
  letter-spacing: 0;
  line-height: normal;
}

.korean-roleplay .text-wrapper-7 {
  top: 817px;
  left: calc(50.00% - 18px);
  position: absolute;
  width: 206px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.korean-roleplay .ellipse-6 {
  top: 741px;
  left: calc(50.00% + 146px);
  width: 68px;
  height: 64px;
  position: absolute;
  object-fit: cover;
}

.korean-roleplay .voice-6 {
  top: 791px;
  left: 179px;
  position: absolute;
  width: 40px;
  height: 37px;
}

.korean-roleplay .removebg-preview-6 {
  top: 788px;
  left: 217px;
  position: absolute;
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .rectangle-6 {
  top: 864px;
  left: calc(50.00% - 244px);
  position: absolute;
  width: 364px;
  height: 87px;
}

.korean-roleplay .ellipse-7 {
  top: 836px;
  left: calc(50.00% - 226px);
  width: 62px;
  height: 59px;
  position: absolute;
  object-fit: cover;
}

.korean-roleplay .div-6 {
  top: 892px;
  left: calc(50.00% - 185px);
  width: 206px;
  font-family: "Single Day-Regular", Helvetica;
  font-size: 16px;
  white-space: nowrap;
  position: absolute;
  font-weight: 400;
  color: #ffc7e1;
  letter-spacing: 0;
  line-height: normal;
}

.korean-roleplay .text-wrapper-8 {
  top: 915px;
  left: calc(50.00% - 185px);
  position: absolute;
  width: 206px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.korean-roleplay .voice-7 {
  top: 889px;
  left: 351px;
  position: absolute;
  width: 40px;
  height: 37px;
}

.korean-roleplay .removebg-preview-7 {
  top: 885px;
  left: 302px;
  position: absolute;
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .rectangle-7 {
  top: 960px;
  left: calc(50.00% - 133px);
  position: absolute;
  width: 364px;
  height: 87px;
}

.korean-roleplay .div-7 {
  top: 988px;
  left: calc(50.00% - 18px);
  width: 206px;
  font-family: "Single Day-Regular", Helvetica;
  font-size: 16px;
  white-space: nowrap;
  position: absolute;
  font-weight: 400;
  color: #ffc7e1;
  letter-spacing: 0;
  line-height: normal;
}

.korean-roleplay .text-wrapper-9 {
  top: 1011px;
  left: calc(50.00% - 18px);
  position: absolute;
  width: 206px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.korean-roleplay .ellipse-8 {
  top: 935px;
  left: calc(50.00% + 146px);
  width: 68px;
  height: 64px;
  position: absolute;
  object-fit: cover;
}

.korean-roleplay .voice-8 {
  top: 985px;
  left: 179px;
  position: absolute;
  width: 40px;
  height: 37px;
}

.korean-roleplay .removebg-preview-8 {
  top: 982px;
  left: 217px;
  position: absolute;
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .rectangle-8 {
  top: 1062px;
  left: calc(50.00% - 244px);
  position: absolute;
  width: 364px;
  height: 87px;
}

.korean-roleplay .ellipse-9 {
  top: 1034px;
  left: calc(50.00% - 226px);
  width: 62px;
  height: 59px;
  position: absolute;
  object-fit: cover;
}

.korean-roleplay .div-8 {
  top: 1090px;
  left: calc(50.00% - 185px);
  width: 206px;
  font-family: "Single Day-Regular", Helvetica;
  font-size: 16px;
  white-space: nowrap;
  position: absolute;
  font-weight: 400;
  color: #ffc7e1;
  letter-spacing: 0;
  line-height: normal;
}

.korean-roleplay .text-wrapper-10 {
  top: 1113px;
  left: calc(50.00% - 185px);
  position: absolute;
  width: 206px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.korean-roleplay .voice-9 {
  top: 1087px;
  left: 351px;
  position: absolute;
  width: 40px;
  height: 37px;
}

.korean-roleplay .removebg-preview-9 {
  top: 1083px;
  left: 302px;
  position: absolute;
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .rectangle-9 {
  top: 1158px;
  left: calc(50.00% - 133px);
  position: absolute;
  width: 364px;
  height: 87px;
}

.korean-roleplay .div-9 {
  top: 1186px;
  left: calc(50.00% - 18px);
  width: 206px;
  font-family: "Single Day-Regular", Helvetica;
  font-size: 16px;
  white-space: nowrap;
  position: absolute;
  font-weight: 400;
  color: #ffc7e1;
  letter-spacing: 0;
  line-height: normal;
}

.korean-roleplay .text-wrapper-11 {
  top: 1209px;
  left: calc(50.00% - 18px);
  position: absolute;
  width: 206px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.korean-roleplay .ellipse-10 {
  top: 1133px;
  left: calc(50.00% + 146px);
  width: 68px;
  height: 64px;
  position: absolute;
  object-fit: cover;
}

.korean-roleplay .voice-10 {
  top: 1183px;
  left: 179px;
  position: absolute;
  width: 40px;
  height: 37px;
}

.korean-roleplay .removebg-preview-10 {
  top: 1180px;
  left: 217px;
  position: absolute;
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .rectangle-10 {
  top: 1256px;
  left: calc(50.00% - 244px);
  position: absolute;
  width: 364px;
  height: 87px;
}

.korean-roleplay .ellipse-11 {
  top: 1228px;
  left: calc(50.00% - 226px);
  width: 62px;
  height: 59px;
  position: absolute;
  object-fit: cover;
}

.korean-roleplay .div-10 {
  top: 1284px;
  left: calc(50.00% - 185px);
  width: 206px;
  font-family: "Single Day-Regular", Helvetica;
  font-size: 16px;
  white-space: nowrap;
  position: absolute;
  font-weight: 400;
  color: #ffc7e1;
  letter-spacing: 0;
  line-height: normal;
}

.korean-roleplay .text-wrapper-12 {
  top: 1307px;
  left: calc(50.00% - 185px);
  position: absolute;
  width: 206px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.korean-roleplay .voice-11 {
  top: 1281px;
  left: 351px;
  position: absolute;
  width: 40px;
  height: 37px;
}

.korean-roleplay .removebg-preview-11 {
  top: 1277px;
  left: 302px;
  position: absolute;
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .rectangle-11 {
  top: 1352px;
  left: calc(50.00% - 133px);
  position: absolute;
  width: 364px;
  height: 87px;
}

.korean-roleplay .div-11 {
  top: 1380px;
  left: calc(50.00% - 18px);
  width: 206px;
  font-family: "Single Day-Regular", Helvetica;
  font-size: 16px;
  white-space: nowrap;
  position: absolute;
  font-weight: 400;
  color: #ffc7e1;
  letter-spacing: 0;
  line-height: normal;
}

.korean-roleplay .text-wrapper-13 {
  top: 1403px;
  left: calc(50.00% - 18px);
  position: absolute;
  width: 206px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.korean-roleplay .ellipse-12 {
  top: 1327px;
  left: calc(50.00% + 146px);
  width: 68px;
  height: 64px;
  position: absolute;
  object-fit: cover;
}

.korean-roleplay .voice-12 {
  top: 1377px;
  left: 179px;
  position: absolute;
  width: 40px;
  height: 37px;
}

.korean-roleplay .removebg-preview-12 {
  top: 1374px;
  left: 217px;
  position: absolute;
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .rectangle-12 {
  top: 1454px;
  left: calc(50.00% - 244px);
  position: absolute;
  width: 364px;
  height: 87px;
}

.korean-roleplay .ellipse-13 {
  top: 1426px;
  left: calc(50.00% - 226px);
  width: 62px;
  height: 59px;
  position: absolute;
  object-fit: cover;
}

.korean-roleplay .div-12 {
  top: 1482px;
  left: calc(50.00% - 185px);
  width: 206px;
  font-family: "Single Day-Regular", Helvetica;
  font-size: 16px;
  white-space: nowrap;
  position: absolute;
  font-weight: 400;
  color: #ffc7e1;
  letter-spacing: 0;
  line-height: normal;
}

.korean-roleplay .text-wrapper-14 {
  top: 1505px;
  left: calc(50.00% - 185px);
  position: absolute;
  width: 206px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.korean-roleplay .voice-13 {
  top: 1479px;
  left: 351px;
  position: absolute;
  width: 40px;
  height: 37px;
}

.korean-roleplay .removebg-preview-13 {
  top: 1475px;
  left: 302px;
  position: absolute;
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .rectangle-13 {
  top: 1550px;
  left: calc(50.00% - 133px);
  position: absolute;
  width: 364px;
  height: 87px;
}

.korean-roleplay .div-13 {
  top: 1578px;
  left: calc(50.00% - 18px);
  width: 206px;
  font-family: "Single Day-Regular", Helvetica;
  font-size: 16px;
  white-space: nowrap;
  position: absolute;
  font-weight: 400;
  color: #ffc7e1;
  letter-spacing: 0;
  line-height: normal;
}

.korean-roleplay .text-wrapper-15 {
  top: 1601px;
  left: calc(50.00% - 18px);
  position: absolute;
  width: 206px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.korean-roleplay .ellipse-14 {
  top: 1525px;
  left: calc(50.00% + 146px);
  width: 68px;
  height: 64px;
  position: absolute;
  object-fit: cover;
}

.korean-roleplay .voice-14 {
  top: 1575px;
  left: 179px;
  position: absolute;
  width: 40px;
  height: 37px;
}

.korean-roleplay .removebg-preview-14 {
  top: 1572px;
  left: 217px;
  position: absolute;
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .rectangle-14 {
  top: 1648px;
  left: calc(50.00% - 244px);
  position: absolute;
  width: 364px;
  height: 87px;
}

.korean-roleplay .ellipse-15 {
  top: 1620px;
  left: calc(50.00% - 226px);
  width: 62px;
  height: 59px;
  position: absolute;
  object-fit: cover;
}

.korean-roleplay .div-14 {
  top: 1676px;
  left: calc(50.00% - 185px);
  width: 206px;
  font-family: "Single Day-Regular", Helvetica;
  font-size: 16px;
  white-space: nowrap;
  position: absolute;
  font-weight: 400;
  color: #ffc7e1;
  letter-spacing: 0;
  line-height: normal;
}

.korean-roleplay .text-wrapper-16 {
  top: 1699px;
  left: calc(50.00% - 185px);
  position: absolute;
  width: 206px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.korean-roleplay .voice-15 {
  top: 1673px;
  left: 351px;
  position: absolute;
  width: 40px;
  height: 37px;
}

.korean-roleplay .removebg-preview-15 {
  top: 1669px;
  left: 302px;
  position: absolute;
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .rectangle-15 {
  top: 1744px;
  left: calc(50.00% - 133px);
  position: absolute;
  width: 364px;
  height: 87px;
}

.korean-roleplay .div-15 {
  top: 1772px;
  left: calc(50.00% - 18px);
  width: 206px;
  font-family: "Single Day-Regular", Helvetica;
  font-size: 16px;
  white-space: nowrap;
  position: absolute;
  font-weight: 400;
  color: #ffc7e1;
  letter-spacing: 0;
  line-height: normal;
}

.korean-roleplay .text-wrapper-17 {
  top: 1795px;
  left: calc(50.00% - 18px);
  position: absolute;
  width: 206px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.korean-roleplay .ellipse-16 {
  top: 1719px;
  left: calc(50.00% + 146px);
  width: 68px;
  height: 64px;
  position: absolute;
  object-fit: cover;
}

.korean-roleplay .voice-16 {
  top: 1769px;
  left: 179px;
  position: absolute;
  width: 40px;
  height: 37px;
}

.korean-roleplay .HOME-MEOW {
  top: 1867px;
  left: calc(50.00% - 275px);
  width: 549px;
  height: 133px;
  aspect-ratio: 4.13;
  position: absolute;
  object-fit: cover;
}

.korean-roleplay .HOME-MEOW-2 {
  position: absolute;
  top: 112px;
  left: calc(50.00% - 275px);
  width: 549px;
  height: 133px;
  aspect-ratio: 4.13;
  object-fit: cover;
}

.korean-roleplay .removebg-preview-16 {
  top: 1766px;
  left: 217px;
  position: absolute;
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .removebg-preview-17 {
  top: 1916px;
  left: 138px;
  width: 41px;
  height: 41px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .removebg-preview-18 {
  top: 1916px;
  left: 390px;
  width: 41px;
  height: 41px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .removebg-preview-19 {
  top: 1890px;
  left: 307px;
  width: 94px;
  height: 94px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .removebg-preview-20 {
  top: 1890px;
  left: 173px;
  width: 94px;
  height: 94px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .removebg-preview-21 {
  top: 1904px;
  left: calc(50.00% - 34px);
  width: 69px;
  height: 69px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .removebg-preview-22 {
  top: 148px;
  left: calc(50.00% - 33px);
  width: 69px;
  height: 69px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .HOME-FOOTER {
  top: 2039px;
  left: calc(50.00% - 258px);
  width: 515px;
  height: 109px;
  aspect-ratio: 4.73;
  position: absolute;
  object-fit: cover;
}

.korean-roleplay .grow-at-your-own {
  position: absolute;
  top: 2078px;
  left: calc(50.00% - 91px);
  width: 182px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.korean-roleplay .about-contact {
  position: absolute;
  top: 2094px;
  left: calc(50.00% - 194px);
  width: 389px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.korean-roleplay .element-rabbity-all {
  position: absolute;
  top: 2115px;
  left: calc(50.00% - 118px);
  width: 236px;
  font-family: "Black Future-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.korean-roleplay .text-wrapper-18 {
  font-family: "Black Future-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  letter-spacing: 0;
}

.korean-roleplay .HOME-FOOT-PIC {
  top: 2016px;
  left: 37px;
  position: absolute;
  width: 72px;
  height: 70px;
  aspect-ratio: 1.02;
  object-fit: cover;
}

.korean-roleplay .HOME-FOOT-PIC-2 {
  top: 2106px;
  left: 464px;
  position: absolute;
  width: 72px;
  height: 70px;
  aspect-ratio: 1.02;
  object-fit: cover;
}

.korean-roleplay .text-wrapper-19 {
  top: 2053px;
  left: calc(50.00% - 57px);
  width: 114px;
  font-family: "Inter-Regular", Helvetica;
  font-size: 18px;
  text-align: center;
  position: absolute;
  font-weight: 400;
  color: #ffc7e1;
  letter-spacing: 0;
  line-height: normal;
}

.korean-roleplay .removebg-preview-23 {
  top: 161px;
  left: 140px;
  width: 41px;
  height: 41px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .removebg-preview-24 {
  top: 161px;
  left: 392px;
  width: 41px;
  height: 41px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .removebg-preview-25 {
  top: 134px;
  left: 308px;
  width: 94px;
  height: 94px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.korean-roleplay .removebg-preview-26 {
  top: 134px;
  left: 175px;
  width: 94px;
  height: 94px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}






























@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
html,
body {
  margin: 0px;
  height: 100%;
}
/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}
/* @FONTWARNING[{"type": "restricted", "family": "Vividly-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Vividly-Regular";
  src: local("Vividly-Regular");
}
/* @FONTWARNING[{"type": "restricted", "family": "Black Future-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Black Future-Regular";
  src: local("Black Future-Regular");
}
/* @FONTWARNING[{"type": "restricted", "family": "Inter-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Inter-Regular";
  src: local("Inter-Regular");
}
.KOREAN-voice {
  width: 100%;
  min-width: 576px;
  min-height: 1155px;
  position: relative;
}

.KOREAN-voice .hehee {
  position: absolute;
  top: 208px;
  left: calc(50.00% - 231px);
  width: 463px;
  height: 267px;
  aspect-ratio: 1.73;
  object-fit: cover;
}

.KOREAN-voice .HOME-MEOW {
  position: absolute;
  top: 77px;
  left: calc(50.00% - 275px);
  width: 549px;
  height: 133px;
  aspect-ratio: 4.13;
  object-fit: cover;
}

.KOREAN-voice .removebg-preview {
  top: 114px;
  left: calc(50.00% - 33px);
  width: 69px;
  height: 69px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.KOREAN-voice .img {
  top: 126px;
  left: 140px;
  width: 41px;
  height: 41px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.KOREAN-voice .removebg-preview-2 {
  top: 126px;
  left: 392px;
  width: 41px;
  height: 41px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.KOREAN-voice .removebg-preview-3 {
  top: 100px;
  left: 308px;
  width: 94px;
  height: 94px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.KOREAN-voice .removebg-preview-4 {
  top: 100px;
  left: 175px;
  width: 94px;
  height: 94px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.KOREAN-voice .micpicccheart {
  position: absolute;
  top: 623px;
  left: calc(50.00% - 107px);
  width: 214px;
  height: 94px;
  aspect-ratio: 2.27;
  object-fit: cover;
}

.KOREAN-voice .HOME-MEOW-2 {
  top: 778px;
  left: calc(50.00% - 275px);
  width: 549px;
  height: 133px;
  aspect-ratio: 4.13;
  position: absolute;
  object-fit: cover;
}

.KOREAN-voice .removebg-preview-5 {
  top: 827px;
  left: 138px;
  width: 41px;
  height: 41px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.KOREAN-voice .removebg-preview-6 {
  top: 827px;
  left: 390px;
  width: 41px;
  height: 41px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.KOREAN-voice .removebg-preview-7 {
  top: 801px;
  left: 307px;
  width: 94px;
  height: 94px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.KOREAN-voice .removebg-preview-8 {
  top: 801px;
  left: 173px;
  width: 94px;
  height: 94px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.KOREAN-voice .removebg-preview-9 {
  top: 815px;
  left: calc(50.00% - 34px);
  width: 69px;
  height: 69px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.KOREAN-voice .HOME-FOOTER {
  top: 950px;
  left: calc(50.00% - 258px);
  width: 515px;
  height: 109px;
  aspect-ratio: 4.73;
  position: absolute;
  object-fit: cover;
}

.KOREAN-voice .grow-at-your-own {
  position: absolute;
  top: 989px;
  left: calc(50.00% - 91px);
  width: 182px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-voice .about-contact {
  position: absolute;
  top: 1005px;
  left: calc(50.00% - 194px);
  width: 389px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-voice .element-rabbity-all {
  position: absolute;
  top: 1026px;
  left: calc(50.00% - 118px);
  width: 236px;
  font-family: "Black Future-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.KOREAN-voice .text-wrapper {
  font-family: "Black Future-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  letter-spacing: 0;
}

.KOREAN-voice .span {
  font-family: "Vividly-Regular", Helvetica;
}

.KOREAN-voice .HOME-FOOT-PIC {
  top: 927px;
  left: 37px;
  position: absolute;
  width: 72px;
  height: 70px;
  aspect-ratio: 1.02;
  object-fit: cover;
}

.KOREAN-voice .HOME-FOOT-PIC-2 {
  top: 1017px;
  left: 464px;
  position: absolute;
  width: 72px;
  height: 70px;
  aspect-ratio: 1.02;
  object-fit: cover;
}

.KOREAN-voice .div {
  position: absolute;
  top: 964px;
  left: calc(50.00% - 57px);
  width: 114px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 18px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.KOREAN-voice .paste-a-word-you-re {
  position: absolute;
  top: 427px;
  left: calc(50.00% - 53px);
  width: 147px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.KOREAN-voice .practice-your-glow {
  position: absolute;
  top: 288px;
  left: calc(50.00% - 58px);
  width: 147px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.KOREAN-voice .p {
  position: absolute;
  top: 315px;
  left: calc(50.00% - 67px);
  width: 168px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.KOREAN-voice .rectangle {
  position: absolute;
  top: 506px;
  left: calc(50.00% - 190px);
  width: 381px;
  height: 108px;
}














/* ─── ADDED ELEMENT STYLES FOR THE KOREAN ACCENT LAB ─── */

/* Responsive Interactive Master Box locked safely above the main design background asset */
.KOREAN-voice .interactive-cloud-overlay {
  position: absolute;
  top: 208px; /* Perfectly matches your main header .hehee position */
  left: calc(50% - 231px);
  width: 463px;
  height: 480px;
  z-index: 100;
}

/* Left side profile picture element positioning */
.KOREAN-voice .cloud-side-pic {
  position: absolute;
  top: 262px;
  left: 50px;
  width: 72px;
  height: auto;
  object-fit: contain;
  z-index: 110;
}

/* Text area input frame nested cleanly inside the cloud lines */
.KOREAN-voice .vivid-textarea {
  position: absolute;
  top: 308px;
  left: calc(50% - 150px);
  width: 300px;
  height: 90px;
  background-color: transparent;
  border: none;
  font-family: "Single Day", Helvetica, sans-serif;
  font-size: 18px;
  color: #FFD8EE;
  text-align: center;
  outline: none;
  resize: none;
  padding: 10px;
  z-index: 105;
}



.KOREAN-voice .vivid-textarea::placeholder {
  color: #FFD8EE;
  opacity: 0.6;
}

.KOREAN-voice .voice-controls-row {
  position: absolute;
  top: 414px;
  width: 217px; /* 🎀 Decreased from 260px to make the gap smaller! */
  left: calc(50% - 110px); /* 🎀 Half of the new width (180 / 2) to keep it centered */
  display: flex;
  justify-content: space-between;
}

/* Component grouping structure link container */
.KOREAN-voice .control-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  width: 80px;
}

/* Button Circle Overlay Container Frame matching circle graphic shapes */
.KOREAN-voice .circle-button-frame {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease-in-out;
}

.KOREAN-voice .control-wrapper:hover .circle-button-frame {
  transform: scale(1.08);
}

/* Custom visual graphics icons inserted into circles */
.KOREAN-voice .inner-button-icon {
  width: 34px;
  height: 34px;
  
  object-fit: contain;
}

/* Label text overlay covering underline design targets */
.KOREAN-voice .button-underline-text {
  font-family: "Vividly-Regular", Helvetica, sans-serif;
  font-size: 15px;
  color: #FFD8EE;
  text-align: center;
  white-space: nowrap;
}

/* Anchored layout notification pop-up alert layout */
.KOREAN-voice .feedback-container {
  position: absolute;
  top: 510px;
  left: calc(50% - 150px);
  width: 300px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.KOREAN-voice .feedback-box {
  background-color: rgba(255, 252, 253, 0.95);
  border: 1px solid #ffe3ed;
  border-radius: 15px;
  padding: 6px 15px;
  font-size: 13px;
  color: #FFD8EE;
  font-family: "Vividly-Regular", Helvetica, sans-serif;
  text-align: center;
  box-shadow: 0px 2px 8px rgba(255, 141, 161, 0.15);
}


/* =========================
   RESPONSIVE CENTER + SCALE
   (DO NOT TOUCH YOUR DESIGN)
   ========================= */

/* Center whole layout */
body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Keep original mobile size */
.KOREAN-voice {
  width: 100%;
  max-width: 576px;
  position: relative;
}

/* =========================
   TABLET
   ========================= */
@media (min-width: 768px) {
  .KOREAN-voice {
    transform: scale(1.15);
    transform-origin: top center;
  }
}

/* =========================
   SMALL LAPTOP
   ========================= */
@media (min-width: 1024px) {
  .KOREAN-voice {
    transform: scale(1.25);
    transform-origin: top center;
  }
}

/* =========================
   DESKTOP
   ========================= */
@media (min-width: 1440px) {
  .KOREAN-voice {
    transform: scale(1.4);
    transform-origin: top center;
  }
}
















































































@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

/* --- THE MASTER SCROLLBAR KILLER --- */
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden; 
  overflow-y: auto;   
}


.page-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  min-height: 100vh;
  padding: 20px 0 40px 0; /* FIX: Reduced bottom padding from 120px to 40px to trim empty space */
  box-sizing: border-box;
  overflow: visible; 
}

/* Focus styles */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}

a {
  text-decoration: none;
}

/* Fonts */
@font-face { font-family: "Vividly-Regular"; src: local("Vividly-Regular"); }
@font-face { font-family: "Black Future-Regular"; src: local("Black Future-Regular"); }
@font-face { font-family: "Inter-Regular"; src: local("Inter-Regular"); }

/* ========================================== */
/*           ABOUT PAGE CONFIGURATION         */
/* ========================================== */
.about {
  width: 580px; 
  height: 1350px; 
  position: relative;
  flex-shrink: 0;
  transform-origin: top center;
}

@media (max-width: 580px) {
  .about {
    transform: scale(calc((100vw - 20px) / 580));
    margin-bottom: calc((1350px * (1 - ((100vw - 20px) / 580))) * -1);
  }
}
/* FIX: Tuned down margins to snap the footer closer to the bottom */
@media (min-width: 1200px) { .about { transform: scale(1.15); margin-bottom: calc(1350px * 0.03); } }
@media (min-width: 1500px) { .about { transform: scale(1.3); margin-bottom: calc(1350px * 0.08); } }

/* --- ABOUT ELEMENT POSITIONS --- */
.about .rectangle { position: absolute; top: 236px; left: calc(50.00% - 267px); width: 535px; height: 708px; }
.about .about-rabbity { position: absolute; top: 284px; left: calc(50.00% - 198px); width: 395px; font-family: "Vividly-Regular", Helvetica; font-weight: 400; color: #ffd7ed; font-size: 22px; text-align: center; letter-spacing: 0; line-height: normal; }
.about .HOME-MEOW { position: absolute; top: 71px; left: calc(50.00% - 275px); width: 549px; height: 133px; aspect-ratio: 4.13; object-fit: cover; }
.about .removebg-preview { top: 108px; left: calc(50.00% - 33px); width: 69px; height: 69px; position: absolute; aspect-ratio: 1; object-fit: cover; }
.about .img { top: 120px; left: 140px; width: 41px; height: 41px; position: absolute; aspect-ratio: 1; object-fit: cover; }
.about .removebg-preview-2 { top: 120px; left: 392px; width: 41px; height: 41px; position: absolute; aspect-ratio: 1; object-fit: cover; }
.about .removebg-preview-3 { top: 94px; left: 308px; width: 94px; height: 94px; position: absolute; aspect-ratio: 1; object-fit: cover; }
.about .removebg-preview-4 { top: 94px; left: 175px; width: 94px; height: 94px; position: absolute; aspect-ratio: 1; object-fit: cover; }
.about .HOME-MEOW-2 { top: 995px; left: calc(50.00% - 275px); width: 549px; height: 133px; aspect-ratio: 4.13; position: absolute; object-fit: cover; }
.about .removebg-preview-5 { top: 1044px; left: 138px; width: 41px; height: 41px; position: absolute; aspect-ratio: 1; object-fit: cover; }
.about .removebg-preview-6 { top: 1044px; left: 390px; width: 41px; height: 41px; position: absolute; aspect-ratio: 1; object-fit: cover; }
.about .removebg-preview-7 { top: 1018px; left: 307px; width: 94px; height: 94px; position: absolute; aspect-ratio: 1; object-fit: cover; }
.about .removebg-preview-8 { top: 1018px; left: 173px; width: 94px; height: 94px; position: absolute; aspect-ratio: 1; object-fit: cover; }
.about .removebg-preview-9 { top: 1032px; left: calc(50.00% - 34px); width: 69px; height: 69px; position: absolute; aspect-ratio: 1; object-fit: cover; }
.about .HOME-FOOTER { top: 1167px; left: calc(50.00% - 258px); width: 515px; height: 109px; aspect-ratio: 4.73; position: absolute; object-fit: cover; }
.about .grow-at-your-own { position: absolute; top: 1206px; left: calc(50.00% - 91px); width: 182px; font-family: "Vividly-Regular", Helvetica; font-weight: 400; color: #ffc7e1; font-size: 11px; text-align: center; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.about .about-contact { position: absolute; top: 1222px; left: calc(50.00% - 194px); width: 389px; font-family: "Vividly-Regular", Helvetica; font-weight: 400; color: #ffc7e1; font-size: 17px; text-align: center; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.about .element-rabbity-all { position: absolute; top: 1243px; left: calc(50.00% - 118px); width: 236px; font-family: "Black Future-Regular", Helvetica; font-weight: 400; color: #ffc7e1; font-size: 11px; text-align: center; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.about .text-wrapper { font-family: "Black Future-Regular", Helvetica; font-weight: 400; color: #ffc7e1; font-size: 11px; letter-spacing: 0; }
.about .span { font-family: "Vividly-Regular", Helvetica; }
.about .HOME-FOOT-PIC { top: 1144px; left: 37px; position: absolute; width: 72px; height: 70px; aspect-ratio: 1.02; object-fit: cover; }
.about .HOME-FOOT-PIC-2 { top: 1234px; left: 464px; position: absolute; width: 72px; height: 70px; aspect-ratio: 1.02; object-fit: cover; }
.about .div { position: absolute; top: 1181px; left: calc(50.00% - 57px); width: 114px; font-family: "Inter-Regular", Helvetica; font-weight: 400; color: #ffc7e1; font-size: 18px; text-align: center; letter-spacing: 0; line-height: normal; }

/* ========================================== */
/*        PRIVACY PAGE CONFIGURATION          */
/* ========================================== */
.privacy-policy {
  width: 580px; 
  height: 2326px; 
  position: relative;
  flex-shrink: 0;
  transform-origin: top center;
}

@media (max-width: 580px) {
  .privacy-policy {
    transform: scale(calc((100vw - 20px) / 580));
    margin-bottom: calc((2326px * (1 - ((100vw - 20px) / 580))) * -1);
  }
}
/* FIX: Tuned down margins to snap the footer closer to the bottom */
@media (min-width: 1200px) { .privacy-policy { transform: scale(1.15); margin-bottom: calc(2326px * 0.03); } }
@media (min-width: 1500px) { .privacy-policy { transform: scale(1.3); margin-bottom: calc(2326px * 0.08); } }

/* --- PRIVACY ELEMENT POSITIONS --- */
.privacy-policy .rectangle { position: absolute; top: 236px; left: calc(50.00% - 267px); width: 535px; height: 1684px; }
.privacy-policy .text-wrapper { position: absolute; top: 279px; left: calc(50.00% - 220px); width: 439px; font-family: "Vividly-Regular", Helvetica; font-weight: 400; color: #ffd7ed; font-size: 22px; text-align: center; letter-spacing: 0; line-height: normal; }
.privacy-policy .HOME-MEOW { position: absolute; top: 72px; left: calc(50.00% - 275px); width: 549px; height: 133px; aspect-ratio: 4.13; object-fit: cover; }
.privacy-policy .removebg-preview { top: 109px; left: calc(50.00% - 33px); width: 69px; height: 69px; position: absolute; aspect-ratio: 1; object-fit: cover; }
.privacy-policy .img { top: 121px; left: 140px; width: 41px; height: 41px; position: absolute; aspect-ratio: 1; object-fit: cover; }
.privacy-policy .removebg-preview-2 { top: 121px; left: 392px; width: 41px; height: 41px; position: absolute; aspect-ratio: 1; object-fit: cover; }
.privacy-policy .removebg-preview-3 { top: 94px; left: 308px; width: 94px; height: 94px; position: absolute; aspect-ratio: 1; object-fit: cover; }
.privacy-policy .removebg-preview-4 { top: 94px; left: 175px; width: 94px; height: 94px; position: absolute; aspect-ratio: 1; object-fit: cover; }
.privacy-policy .HOME-MEOW-2 { top: 1955px; left: calc(50.00% - 275px); width: 549px; height: 133px; aspect-ratio: 4.13; position: absolute; object-fit: cover; }
.privacy-policy .removebg-preview-5 { position: absolute; top: 2004px; left: 138px; width: 41px; height: 41px; aspect-ratio: 1; object-fit: cover; }
.privacy-policy .removebg-preview-6 { position: absolute; top: 2004px; left: 390px; width: 41px; height: 41px; aspect-ratio: 1; object-fit: cover; }
.privacy-policy .removebg-preview-7 { position: absolute; top: 1977px; left: 307px; width: 94px; height: 94px; aspect-ratio: 1; object-fit: cover; }
.privacy-policy .removebg-preview-8 { position: absolute; top: 1977px; left: 173px; width: 94px; height: 94px; aspect-ratio: 1; object-fit: cover; }
.privacy-policy .removebg-preview-9 { position: absolute; top: 1992px; left: calc(50.00% - 34px); width: 69px; height: 69px; aspect-ratio: 1; object-fit: cover; }
.privacy-policy .HOME-FOOTER { top: 2127px; left: calc(50.00% - 258px); width: 515px; height: 109px; aspect-ratio: 4.73; position: absolute; object-fit: cover; }
.privacy-policy .grow-at-your-own { position: absolute; top: 2166px; left: calc(50.00% - 91px); width: 182px; font-family: "Vividly-Regular", Helvetica; font-weight: 400; color: #ffc7e1; font-size: 11px; text-align: center; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.privacy-policy .about-contact { position: absolute; top: 2182px; left: calc(50.00% - 194px); width: 389px; font-family: "Vividly-Regular", Helvetica; font-weight: 400; color: #ffc7e1; font-size: 17px; text-align: center; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.privacy-policy .element-rabbity-all { position: absolute; top: 2203px; left: calc(50.00% - 118px); width: 236px; font-family: "Black Future-Regular", Helvetica; font-weight: 400; color: #ffc7e1; font-size: 11px; text-align: center; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.privacy-policy .span { font-family: "Black Future-Regular", Helvetica; font-weight: 400; color: #ffc7e1; font-size: 11px; letter-spacing: 0; }
.privacy-policy .text-wrapper-2 { font-family: "Vividly-Regular", Helvetica; }
.privacy-policy .HOME-FOOT-PIC { top: 2104px; left: 37px; position: absolute; width: 72px; height: 70px; aspect-ratio: 1.02; object-fit: cover; }
.privacy-policy .HOME-FOOT-PIC-2 { top: 2194px; left: 464px; position: absolute; width: 72px; height: 70px; aspect-ratio: 1.02; object-fit: cover; }
.privacy-policy .div { position: absolute; top: 2141px; left: calc(50.00% - 57px); width: 114px; font-family: "Inter-Regular", Helvetica; font-weight: 400; color: #ffc7e1; font-size: 18px; text-align: center; letter-spacing: 0; line-height: normal; }

/* ========================================== */
/*          TERMS PAGE CONFIGURATION          */
/* ========================================== */
.terms {
  width: 580px; 
  height: 1974px; 
  position: relative;
  flex-shrink: 0;
  transform-origin: top center;
}

@media (max-width: 580px) {
  .terms {
    transform: scale(calc((100vw - 20px) / 580));
    margin-bottom: calc((1974px * (1 - ((100vw - 20px) / 580))) * -1);
  }
}
/* FIX: Tuned down margins to snap the footer closer to the bottom */
@media (min-width: 1200px) { .terms { transform: scale(1.15); margin-bottom: calc(1974px * 0.03); } }
@media (min-width: 1500px) { .terms { transform: scale(1.3); margin-bottom: calc(1974px * 0.08); } }

/* --- TERMS ELEMENT POSITIONS --- */
.terms .rectangle { position: absolute; top: 236px; left: calc(50.00% - 267px); width: 535px; height: 1331px; }
.terms .terms-of-use-welcome { position: absolute; top: 279px; left: calc(50.00% - 220px); width: 439px; font-family: "Vividly-Regular", Helvetica; font-weight: 400; color: #ffd7ed; font-size: 22px; text-align: center; letter-spacing: 0; line-height: normal; }
.terms .HOME-MEOW { position: absolute; top: 71px; left: calc(50.00% - 275px); width: 549px; height: 133px; aspect-ratio: 4.13; object-fit: cover; }
.terms .removebg-preview { top: 108px; left: calc(50.00% - 33px); width: 69px; height: 69px; position: absolute; aspect-ratio: 1; object-fit: cover; }
.terms .img { top: 120px; left: 140px; width: 41px; height: 41px; position: absolute; aspect-ratio: 1; object-fit: cover; }
.terms .removebg-preview-2 { top: 120px; left: 392px; width: 41px; height: 41px; position: absolute; aspect-ratio: 1; object-fit: cover; }
.terms .removebg-preview-3 { top: 94px; left: 308px; width: 94px; height: 94px; position: absolute; aspect-ratio: 1; object-fit: cover; }
.terms .removebg-preview-4 { top: 94px; left: 175px; width: 94px; height: 94px; position: absolute; aspect-ratio: 1; object-fit: cover; }
.terms .HOME-MEOW-2 { top: 1609px; left: calc(50.00% - 275px); width: 549px; height: 133px; aspect-ratio: 4.13; position: absolute; object-fit: cover; }
.terms .removebg-preview-5 { position: absolute; top: 1658px; left: 138px; width: 41px; height: 41px; aspect-ratio: 1; object-fit: cover; }
.terms .removebg-preview-6 { position: absolute; top: 1658px; left: 390px; width: 41px; height: 41px; aspect-ratio: 1; object-fit: cover; }
.terms .removebg-preview-7 { position: absolute; top: 1631px; left: 307px; width: 94px; height: 94px; aspect-ratio: 1; object-fit: cover; }
.terms .removebg-preview-8 { position: absolute; top: 1631px; left: 173px; width: 94px; height: 94px; aspect-ratio: 1; object-fit: cover; }
.terms .removebg-preview-9 { position: absolute; top: 1645px; left: calc(50.00% - 34px); width: 69px; height: 69px; aspect-ratio: 1; object-fit: cover; }
.terms .HOME-FOOTER { top: 1780px; left: calc(50.00% - 258px); width: 515px; height: 109px; aspect-ratio: 4.73; position: absolute; object-fit: cover; }
.terms .grow-at-your-own { position: absolute; top: 1820px; left: calc(50.00% - 91px); width: 182px; font-family: "Vividly-Regular", Helvetica; font-weight: 400; color: #ffc7e1; font-size: 11px; text-align: center; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.terms .about-contact { position: absolute; top: 1836px; left: calc(50.00% - 194px); width: 389px; font-family: "Vividly-Regular", Helvetica; font-weight: 400; color: #ffc7e1; font-size: 17px; text-align: center; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.terms .element-rabbity-all { position: absolute; top: 1857px; left: calc(50.00% - 118px); width: 236px; font-family: "Black Future-Regular", Helvetica; font-weight: 400; color: #ffc7e1; font-size: 11px; text-align: center; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.terms .text-wrapper { font-family: "Black Future-Regular", Helvetica; font-weight: 400; color: #ffc7e1; font-size: 11px; letter-spacing: 0; }
.terms .span { font-family: "Vividly-Regular", Helvetica; }
.terms .HOME-FOOT-PIC { top: 1758px; left: 37px; position: absolute; width: 72px; height: 70px; aspect-ratio: 1.02; object-fit: cover; }
.terms .HOME-FOOT-PIC-2 { top: 1848px; left: 464px; position: absolute; width: 72px; height: 70px; aspect-ratio: 1.02; object-fit: cover; }
.terms .div { position: absolute; top: 1795px; left: calc(50.00% - 57px); width: 114px; font-family: "Inter-Regular", Helvetica; font-weight: 400; color: #ffc7e1; font-size: 18px; text-align: center; letter-spacing: 0; line-height: normal; }




@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

/* --- THE MASTER SCROLLBAR KILLER --- */
html {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;   /* Clean main page scrollbar */
}



/* Base structural wrapper for perfect centering */
.page-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  min-height: 100vh;
  padding: 20px 0 40px 0; /* FIX: Trimmed down to 40px to reduce excessive empty space */
  box-sizing: border-box;
  overflow: visible;      /* FIX: Ensures content never gets cut off at the bottom */
}

/* Focus styling */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}

a {
  text-decoration: none;
}

/* Custom Fonts */
@font-face {
  font-family: "Vividly-Regular";
  src: local("Vividly-Regular");
}

@font-face {
  font-family: "Black Future-Regular";
  src: local("Black Future-Regular");
}

@font-face {
  font-family: "Inter-Regular";
  src: local("Inter-Regular");
}

/* Canvas Container Setup */
.contact {
  width: 580px; /* Locked design resolution width */
  height: 1222px; /* Locked design resolution height */
  position: relative;
  flex-shrink: 0;
  transform-origin: top center;
}

/* --- RESPONSIVE SCALING MACHINERY --- */

/* Mobile scaling: Keeps everything perfectly fitted on small displays down to 320px width */
@media (max-width: 580px) {
  .page-wrapper {
    align-items: flex-start;
    padding: 10px 0;
  }
  .contact {
    transform: scale(calc((100vw - 20px) / 580));
    margin-bottom: calc((1222px * (1 - ((100vw - 20px) / 580))) * -1);
  }
}

/* Laptop/Desktop sizing: Scales everything up beautifully for larger viewports */
@media (min-width: 1200px) {
  .contact {
    transform: scale(1.15); /* Scales your design cleanly up by 15% */
    margin-bottom: calc(1222px * 0.03); /* FIX: Tuned down to perfectly pull up the footer */
  }
}

@media (min-width: 1500px) {
  .contact {
    transform: scale(1.3); /* Scales your design up by 30% on larger screens */
    margin-bottom: calc(1222px * 0.08); /* FIX: Tuned down to completely eliminate dead space */
  }
}

/* --- ORIGINAL ELEMENT VALUES ENTIRELY UNTOUCHED --- */

.contact .rectangle {
  position: absolute;
  top: 236px;
  left: calc(50.00% - 267px);
  width: 535px;
  height: 594px;
}

.contact .contact-us-we-d-love {
  position: absolute;
  top: 289px;
  left: calc(50.00% - 211px);
  width: 421px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffd7ed;
  font-size: 22px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.contact .HOME-MEOW {
  position: absolute;
  top: 64px;
  left: calc(50.00% - 275px);
  width: 549px;
  height: 133px;
  aspect-ratio: 4.13;
  object-fit: cover;
}

.contact .removebg-preview {
  top: 101px;
  left: calc(50.00% - 33px);
  width: 69px;
  height: 69px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.contact .img {
  top: 113px;
  left: 140px;
  width: 41px;
  height: 41px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.contact .removebg-preview-2 {
  top: 113px;
  left: 392px;
  width: 41px;
  height: 41px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.contact .removebg-preview-3 {
  top: 87px;
  left: 308px;
  width: 94px;
  height: 94px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.contact .removebg-preview-4 {
  top: 87px;
  left: 175px;
  width: 94px;
  height: 94px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.contact .HOME-MEOW-2 {
  top: 870px;
  left: calc(50.00% - 275px);
  width: 549px;
  height: 133px;
  aspect-ratio: 4.13;
  position: absolute;
  object-fit: cover;
}

.contact .removebg-preview-5 {
  top: 919px;
  left: 138px;
  width: 41px;
  height: 41px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.contact .removebg-preview-6 {
  top: 919px;
  left: 390px;
  width: 41px;
  height: 41px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.contact .removebg-preview-7 {
  top: 893px;
  left: 307px;
  width: 94px;
  height: 94px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.contact .removebg-preview-8 {
  top: 893px;
  left: 173px;
  width: 94px;
  height: 94px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.contact .removebg-preview-9 {
  top: 907px;
  left: calc(50.00% - 34px);
  width: 69px;
  height: 69px;
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
}

.contact .HOME-FOOTER {
  top: 1042px;
  left: calc(50.00% - 258px);
  width: 515px;
  height: 109px;
  aspect-ratio: 4.73;
  position: absolute;
  object-fit: cover;
}

.contact .grow-at-your-own {
  position: absolute;
  top: 1081px;
  left: calc(50.00% - 91px);
  width: 182px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.contact .about-contact {
  position: absolute;
  top: 1097px;
  left: calc(50.00% - 194px);
  width: 389px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.contact .element-rabbity-all {
  position: absolute;
  top: 1118px;
  left: calc(50.00% - 118px);
  width: 236px;
  font-family: "Black Future-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.contact .text-wrapper {
  font-family: "Black Future-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 11px;
  letter-spacing: 0;
}

.contact .span {
  font-family: "Vividly-Regular", Helvetica;
}

.contact .HOME-FOOT-PIC {
  top: 1019px;
  left: 37px;
  position: absolute;
  width: 72px;
  height: 70px;
  aspect-ratio: 1.02;
  object-fit: cover;
}

.contact .HOME-FOOT-PIC-2 {
  top: 1109px;
  left: 464px;
  position: absolute;
  width: 72px;
  height: 70px;
  aspect-ratio: 1.02;
  object-fit: cover;
}

.contact .div {
  position: absolute;
  top: 1056px;
  left: calc(50.00% - 57px);
  width: 114px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffc7e1;
  font-size: 18px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}


.about-contact a {
  color: inherit; /* Keeps your cute pink color intact! */
}

.about-contact a:hover {
  color: #ffd7ed; /* Optional: adds a slightly brighter pink glow when you hover over them! ✨ */
}