@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}






/* --- Background Magic: Different images for different screens --- */

/* Default (Mobile) - Applied to screens smaller than 810px */
b/* --- Fix: Ensure background covers the full screen on all devices --- */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 1590px; /* Ensures the body is at least as tall as the screen */
  background-attachment: fixed; /* Keeps background steady */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Mobile Background */
body {
  background-image: url('mobilebg.png');
}

/* Laptop/Desktop Background (810px and wider) */
@media (min-width: 810px) {
  body {
    background-image: url('laptopng.png');
  }
}




@font-face {
   font-family: "Vividly-Regular";
  /* Replace 'vividly.woff2' with your actual filename */
  src: url('vividly.woff2') format('woff2'), 
       url('Vividly-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* This helps it load faster on mobile! */
}
/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #ffe4f5 !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": "Black Future-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Black Future-Regular";
  src: local("Black Future-Regular");
}
.frame {
  overflow: hidden;
  width: 100%;
  min-width: 390px;
  min-height: 1590px;
  position: relative;
}

.frame .footerr {
  position: absolute;
  top: 1430px;
  left: 20px;
  width: 350px;
  height: 98px;
  aspect-ratio: 3.56;
  object-fit: cover;
}

.frame .dayss {
  position: absolute;
  top: 689px;
  left: calc(50.00% - 179px);
  width: 357px;
  height: 47px;
  aspect-ratio: 7.65;
  object-fit: cover;
}

.frame .rectangle {
  position: absolute;
  top: 865px;
  left: calc(50.00% - 76px);
  width: 151px;
  height: 52px;
}

.frame .text-wrapper {
  position: absolute;
  top: 884px;
  left: calc(50.00% - 49px);
  width: 99px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffa7d4;
  font-size: 19px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.frame .rabbitie-start {
  position: absolute;
  top: 68px;
  left: calc(50.00% - 185px);
  width: 347px;
  height: 308px;
  aspect-ratio: 1.13;
  object-fit: cover;
}

.frame .soft-productive {
  position: absolute;
  top: 223px;
  left: 83px;
  width: 48px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffa7d4;
  font-size: 7px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.frame .div {
  position: absolute;
  top: 288px;
  left: 46px;
  width: 135px;
  text-shadow: 0px 1px 27px #ffffff;
  font-family: "Vividly-Regular", Helvetica;
  font-size: 26px;
  text-align: center;
  line-height: normal;
  font-weight: 400;
  color: #ffa7d4;
  letter-spacing: 0;
}

.frame .soft-productive-2 {
  position: absolute;
  top: 127px;
  left: 205px;
  width: 129px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffa7d4;
  font-size: 7px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.frame .img {
  position: absolute;
  top: 1248px;
  left: calc(50.00% + 93px);
  width: 85px;
  height: 76px;
}

.frame .rectangle-2 {
  position: absolute;
  top: 696px;
  left: calc(50.00% - 70px);
  width: 56px;
  height: 31px;
}

.frame .sun-mon-tue-wed-thu {
  position: absolute;
  top: 706px;
  left: calc(50.00% - 161px);
  width: 322px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffa7d4;
  font-size: 18.7px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.frame .text-wrapper-2 {
  position: absolute;
  top: 1258px;
  left: calc(50.00% + 121px);
  width: 26px;
  font-family: "Single Day";
  font-size: 58px;
  line-height: 58.3px;
  white-space: nowrap;
  font-weight: 400;
  color: #ffa7d4;
  letter-spacing: 0;
}

.frame .rectangle-3 {
  position: absolute;
  top: 1159px;
  left: calc(50.00% + 93px);
  width: 85px;
  height: 76px;
}

.frame .rectangle-4{
  position: absolute;
  top: 1070px;
  left: calc(50.00% + 93px);
  width: 85px;
  height: 76px;
}

.frame .gemini-generated {
  position: absolute;
  top: 852px;
  left: 117px;
  width: 42px;
  height: 34px;
  aspect-ratio: 1.55;
  object-fit: cover;
}
.frame .gemini-generateds {
  position: absolute;
  top: -15px;
  left: 37px;
  width: 42px;
  height: 34px;
  aspect-ratio: 1.55;
  object-fit: cover;
}



.frame .gemini-generateda {
  position: absolute;
  top: 85px;
  left: 262px;
  width: 42px;
  height: 34px;
  aspect-ratio: 1.55;
  object-fit: cover;
}


.frame .gemini-generatedf {
  position: absolute;
  top: 182px;
  left: 37px;
  width: 42px;
  height: 34px;
  aspect-ratio: 1.55;
  object-fit: cover;
}


.frame .text-wrapper-3 {
  position: absolute;
  top: 1189px;
  left: calc(50.00% + 105px);
  width: 61px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffa7d4;
  font-size: 25px;
  text-align: center;
  letter-spacing: 0;
  line-height: 23.5px;
  white-space: nowrap;
}

.frame .text-wrapper-31 {
  position: absolute;
  top: 1099px;
  left: calc(50.00% + 105px);
  width: 61px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffa7d4;
  font-size: 25px;
  text-align: center;
  letter-spacing: 0;
  line-height: 23.5px;
  white-space: nowrap;
}




.frame .gemini-generated-2 {
  position: absolute;
  top: 1410px;
  left: 39px;
  width: 55px;
  height: 55px;
  aspect-ratio: 1.55;
  object-fit: cover;
}

.frame .group {
  position: absolute;
  top: 998px;
  left: calc(50.00% - 194px);
  width: 397px;
  height: 57px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.frame .text-wrapper-4 {
  margin-left: -8px;
  height: 12.06px;
  margin-top:454px;
  width: 114px;
  font-family: "Vividly-Regular", Helvetica;
  font-size: 14px;
  text-align: center;
  line-height: normal;
  white-space: nowrap;
  font-weight: 400;
  color: #ffa7d4;
  letter-spacing: 0;
}

.frame .a-soft-place-to-glow {
  margin-left: -8px;
  height: 8px;
  width: 181.66px;
  margin-top: 4.7px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffa7d4;
  font-size: 9px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.frame .about-contact {
  margin-left: -8px;
  height: 11.99px;
  width: 388.7px;
  margin-top: 6.1px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffa7d4;
  font-size: 13px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.frame .element-rabbitie-all {
  margin-left: -8px;
  height: 9.96px;
  width: 235.75px;
  margin-top: 4.1px;
  font-family: "Black Future-Regular", Helvetica;
  font-weight: 400;
  color: #ffa7d4;
  font-size: 9px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.frame .span {
  font-family: "Black Future-Regular", Helvetica;
  font-weight: 400;
  color: #ffa7d4;
  font-size: 9px;
  letter-spacing: 0;
}

.frame .text-wrapper-5 {
  font-family: "Vividly-Regular", Helvetica;
}





/* ==========================================================================
   BESTIE'S ENDLESS STREAM LAYOUT (SCROLLBAR HIDDEN & FULL HEIGHT LOOK)
   ========================================================================== */

.frame .rectangle-2 {
  transition: left 0.3s ease-in-out;
}

/* Container now expands larger downward to show all 5 tasks nicely */
.todo-scroll-container {
  position: absolute;
  top: 934px;
  left: calc(50% - 170px);
  width: 340px;
  height: 420px; /* Increased height so all 5 cards fill the space beautifully */
  overflow-y: auto;
  z-index: 10;
  padding-bottom: 80px; /* Gives nice breathing room under the floating elements */
  
  /* Hides the default scrollbar on Firefox */
  scrollbar-width: none; 
}

/* Hides the pink scrollbar entirely on Chrome, Safari, and Opera */
.todo-scroll-container::-webkit-scrollbar {
  display: none;
}

.task-card {
  background-image: url('taskkk.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 340px;
  height: 70px;
  margin-bottom: 12px;
  position: relative;
  display: flex;
  align-items: center;
  user-select: none;
  cursor: pointer;
}

.task-avatar {
  position: absolute;
  left: 15px;
  width: 50px;
  height: 45px;
  object-fit: contain;
}

.task-info {
  position: absolute;
  left: 80px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.task-time {
  font-family: "Vividly-Regular", Helvetica;
  font-size: 11px;
  color: #ffa7d4;
  letter-spacing: 1px;
}

.task-title {
  font-family: "Vividly-Regular", Helvetica;
  font-size: 18px;
  color: #ffa7d4;
}

.task-card.completed .task-title {
  text-decoration: line-through;
  opacity: 0.7;
}

.task-circle {
  position: absolute;
  right: 23px;
  width: 28px;
  height: 28px;
  border: 2px solid #ffa7d4;
  border-radius: 50%;
  background-color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
  z-index: 25;
}
@font-face {
  font-family: "Vividly-Regular";
  /* Replace 'vividly.woff2' with your actual filename */
  src: url('vividly.woff2') format('woff2'), 
       url('Vividly-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* This helps it load faster on mobile! */
}
.task-card.completed .task-circle {
  background-color: #ffa7d4 !important;
  border-color: #ffa7d4 !important;
}

.task-card.completed .task-circle::after {
  content: '✓';
  color: #ffffff !important;
  font-size: 16px;
  font-weight: bold;
  display: block;
  line-height: 1;
}

/* --- CREATE TASK MODAL DIALOG OVERLAY --- */
/* --- CREATE TASK MODAL DIALOG OVERLAY --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(3px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.modal-card {
  background-image: url('taskkcardd.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 360px;
  height: 440px;
  position: relative;
  padding: 30px;
}

.modal-close {
  position: absolute;
  top: 30px;
  left: 35px;
  font-family: "Vividly-Regular", Helvetica;
  font-size: 24px;
  color: #ffa7d4;
  cursor: pointer;
  font-weight: bold;
}

.modal-create {
  position: absolute;
  top: 30px;
  right: 35px;
  font-family: "Vividly-Regular", Helvetica;
  font-size: 20px;
  color: #ffa7d4;
  cursor: pointer;
}

/* Container for Melody Image and Title Input */
.modal-header-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 55px;
  gap: 8px;
}

.modal-melody-pic {
  width: 65px;
  height: 60px;
  object-fit: contain;
}

/* Beautiful Title Entry replacing the static text */
.modal-title-input {
  background: transparent;
  border: none;
  font-family: "Vividly-Regular", Helvetica;
  font-size: 22px;
  color: #ffa7d4;
  text-align: center;
  width: 200px;
  outline: none;
}

.modal-title-input::placeholder {
  color: #ffc2e3;
  opacity: 0.8;
}

.modal-form-box {
  margin-top: 35px;
  background-color: rgba(255, 235, 243, 0.6);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-label {
  font-family: "Vividly-Regular", Helvetica;
  font-size: 18px;
  color: #ffa7d4;
  display: flex;
  align-items: center;
  gap: 10px; /* Space between custom pic and text label */
}

/* Your custom picture icon sizes */
.custom-form-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.form-input {
  background: transparent;
  border: none;
  border-bottom: 1px dashed #ffa7d4;
  font-family: "Vividly-Regular", Helvetica;
  font-size: 16px;
  color: #ffa7d4;
  text-align: right;
  width: 90px;
  outline: none;
}

.form-select {
  background: transparent;
  border: 2px,#ffa7d4;
  font-family: "Vividly-Regular", Helvetica;
  font-size: 16px;
  color: #ffa7d4;
  outline: #ffa7d4;
  cursor: pointer;
  direction: ltr;
}

/* Deletion confirmation panel background */
.delete-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 208, 241, 0.95);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: "Vividly-Regular", Helvetica;
  font-size: 18px;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
  pointer-events: none;
  z-index: 20;
}

.task-card.show-delete .delete-overlay {
  opacity: 1;
  pointer-events: auto;
}


















/* --- CUSTOM MINI DELETE CONFIRMATION BOX --- */
.confirmation-mini-box {
  width: 290px !important;
  height: auto !important;
  min-height: 160px;
  padding: 20px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  border-radius: 24px;
}

.delete-message-text {
  font-family: "Vividly-Regular", Helvetica, Arial;
  font-size: 16px;
  color: #ffa7d4;
  text-align: center;
  line-height: 1.4;
  margin: 0;
}
@font-face {
  font-family: "Vividly-Regular";
  /* Replace 'vividly.woff2' with your actual filename */
  src: url('vividly.woff2') format('woff2'), 
       url('Vividly-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* This helps it load faster on mobile! */
}
.confirmation-action-row {
  display: flex;
  width: 100%;
  gap: 12px;
  justify-content: center;
}

.mini-box-btn {
  font-family: "Vividly-Regular", Helvetica, Arial;
  font-size: 15px;
  padding: 8px 20px;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Delete Button Style */
.mini-box-btn.delete-btn {
  background-color: #ffa7d4;
  color: #ffffff;
}

.mini-box-btn.delete-btn:hover {
  background-color: #ffb0d6;
}

/* Cancel Button Style */
.mini-box-btn.cancel-btn {
  background-color: #fff0f6;
  color: #ffa7d4;
  border: 1px solid #ffa7d4;
}

.mini-box-btn.cancel-btn:hover {
  background-color: #ffe3ef;
}










/* ===============================
   ✨ RESPONSIVE BESTIE MAGIC ✨
   =============================== */

/* Keep mobile EXACT (default already is your design) */
@font-face {
  font-family: "Vividly-Regular";
  /* Replace 'vividly.woff2' with your actual filename */
  src: url('vividly.woff2') format('woff2'), 
       url('Vividly-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* This helps it load faster on mobile! */
}

/* 📱➡️ Tablet (810px and up) */
@media (min-width: 810px) {
  .frame {
    width: 390px;
    margin: 0 auto; /* centers it */
    transform: scale(1.2); /* makes it slightly bigger */
    transform-origin: top center;
  }

  body {
    display: flex;
    justify-content: center;
  }
}


/* 💻 Laptop (1200px and up) */
@media (min-width: 1200px) {
  .frame {
    width: 390px;
    margin: 0 auto;
    transform: scale(1.40); /* bigger for desktop */
    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;
}
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");
}
.about {
  overflow: hidden;
  width: 100%;
  min-width: 390px;
  min-height: 999px;
  position: relative;
}

.about .footerr {
  position: absolute;
  top: 850px;
  left: 20px;
  width: 350px;
  height: 98px;
  aspect-ratio: 3.56;
  object-fit: cover;
}

.about .gemini-generated {
  position: absolute;
  top: 833px;
  left: 35px;
  width: 55px;
  height: 55px;
object-fit: contain;}

.about .group {
  position: absolute;
  top: 872px;
  left: calc(50.00% - 194px);
  width: 397px;
  height: 57px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about .text-wrapper {
  margin-left: -8px;
  height: 12.06px;
  width: 114px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffa7d4;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.about .a-soft-place-to-glow {
  margin-left: -8px;
  height: 8px;
  width: 181.66px;
  margin-top: 4.7px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffa7d4;
  font-size: 9px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.about .about-contact {
  margin-left: -8px;
  height: 11.99px;
  width: 388.7px;
  margin-top: 6.1px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffa7d4;
  font-size: 13px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.about .element-rabbitie-all {
  margin-left: -8px;
  height: 9.96px;
  width: 235.75px;
  margin-top: 4.1px;
  font-family: "Black Future-Regular", Helvetica;
  font-weight: 400;
  color: #ffa7d4;
  font-size: 9px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.about .span {
  font-family: "Black Future-Regular", Helvetica;
  font-weight: 400;
  color: #ffa7d4;
  font-size: 9px;
  letter-spacing: 0;
}

.about .text-wrapper-2 {
  font-family: "Vividly-Regular", Helvetica;
}

.about .rectangle {
  position: absolute;
  top: 85px;
  left: calc(50.00% - 178px);
  width: 356px;
  height: 735px;
}

.about .about-rabbitie-a {
  position: absolute;
  top: 123px;
  left: calc(50.00% - 152px);
  width: 304px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffa7d4;
  font-size: 18px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.about .about-rabbitie-aa {
  position: absolute;
  top: 123px;
  left: calc(50.00% - 152px);
  width: 304px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffa7d4;
  font-size: 18.7px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}
.about-contact a {
    color: #ffa7d4; /* This matches your pink theme */
    text-decoration: none; /* This removes the underline */
}

.about-contact a:hover {
    opacity: 0.7; /* This adds a cute "hover" effect */
}

.about-rabbitie-aa2 {
  position: absolute;
  top: 123px;
  left: calc(50.00% - 152px);
  width: 304px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffa7d4;
  font-size: 18.7px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}
.about .img {
  position: absolute;
  top: 53px;
  left: 23px;
  width: 97px;
  height: 76px;
  aspect-ratio: 1.55;
}
/* New wrapper to center everything on big screens */
.main-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.about {
  position: relative;
  width: 390px; /* Base mobile width */
  min-height: 999px;
  overflow: hidden;
  /* Add this to allow scaling on larger screens */
  transform-origin: top center;
}

/* Tablet (810px) - scale it up a bit */
@media (min-width: 810px) {
  .about {
    transform: scale(1.2); /* Adjust this percentage to make it look "bigger" */
  }
}

/* Laptop (1200px) - scale it up more */
@media (min-width: 1200px) {
  .about {
    transform: scale(1.5);
  }
}

/* Fix for absolute positioning */
/* Ensure your elements inside .about use percentages or relative offsets 
   to ensure they don't break when scaled */












































   





   .new-boxes-container {
    position: absolute;
    top: 360px; /* Adjust this to place them right where you want */
    left: calc(50% - 170px);
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    z-index: 5;
}
.info-box-item { position: relative; width: 100%; }
.info-box-item img { width: 100%; }
.info-box-item p { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size:13px; 
    color: #ffa7d4; font-family: "Vividly-Regular"; text-align: center; width: 90% ;
}












  .new-boxes-container1 {
    position: absolute;
    top: 748px; /* Adjust this to place them right where you want */
    left: calc(50% - 170px);
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    z-index: 5;
}
.info-box-item1 { position: relative; width: 100%; }
.info-box-item1 img { width: 100%; }
.info-box-item1 p { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size:13px; 
    color: #ffa7d4; font-family: "Vividly-Regular"; text-align: center; width: 90% ;
}


.frame .gemini-generatedm {
  position: absolute;
  top: -16px;
  left: 37px;
  width: 42px;
  height: 34px;
  aspect-ratio: 1.55;
  object-fit: cover;
}

  .new-boxes-container2 {
    position: absolute;
    top: 1288px; /* Adjust this to place them right where you want */
    left: calc(50% - 185px);
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    z-index: 5;
}
.info-box-item2 { position: relative; width: 100%; }
.info-box-item2 img { width: 100%; }
.info-box-item2 p { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size:13px; 
    color: #ffa7d4; font-family: "Vividly-Regular"; text-align: center; width: 90% ;
}