@keyframes slide {
  0% {
    left: 0;
    /* Start from the left edge of the container */
  }

  100% {
    left: 100%;
    /* Move to the right edge of the container */
  }
}

.frame-item {
  position: absolute;
  top: -12px;
  left: 0;
  /* Start with left at 0 */
  background-color: #fff;
  width: 14.5px;
  height: 73.9px;
  transform: rotate(21.55deg);
  transform-origin: 0 0;
  opacity: 0.1;
  animation: slide 2s infinite alternate ease-in-out;
}

.rectangle-parent {
  position: relative;
  overflow: hidden;
  /* Ensure the .frame-item does not show outside this container */
  width: 300px;
  /* Set to match the width of your button */
  height: 50.7px;
}

.better-today-logo-1,
.hero-base-icon {
  position: absolute;
  top: 0;
  left: 7.5px;
  width: 375px;
  height: 341px;
}

.better-today-logo-1 {
  left: 0;
  width: 150.4px;
  height: 130.3px;
  object-fit: cover;
}

.dec23-900 {
  position: absolute;
  top: 89px;
  left: 0.6px;
  line-height: 140%;
  display: inline-block;
  width: 364px;
  height: 32px;
}

.image-1-icon {
  position: absolute;
  top: 0;
  left: 215.6px;
  width: 40px;
  height: 40px;
  object-fit: cover;
}

.day-book {
  font-weight: 900;
}

.day-book-reading-container,
.frame1 {
  position: absolute;
  left: 0;
  width: 317.4px;
}

.day-book-reading-container {
  top: 1.6px;
  line-height: 130%;
  display: inline-block;
  height: 77.6px;
}

.frame1 {
  top: 0;
  height: 79.2px;
  overflow: hidden;
  font-size: 30px;
  color: #fff;
}

.b,
.stop-swiping-up {
  position: absolute;
  top: 0;
  left: 256.9px;
  line-height: 180%;
  display: inline-block;
  width: 71px;
  height: 47px;
  opacity: 0.8;
}

.stop-swiping-up {
  top: 19px;
  left: 0;
  font-size: 15px;
  width: 256.8px;
  height: 25px;
}

.frame2 {
  position: absolute;
  top: 171px;
  left: 13.7px;
  width: 327.9px;
  height: 47px;
  overflow: hidden;
  font-size: 35px;
  color: #000;
  font-family: "Nunito Sans";
}

.frame-child,
.hero-text {
  position: absolute;
  top: 101px;
  left: 5.9px;
  width: 364.6px;
  height: 218px;
}

.frame-child {
  top: 0;
  left: 0;
  border-radius: 11px;
  background-color: #00173b;
  width: 300px;
  height: 50px;
}


.register-now-299- {
  position: absolute;
  top: 11px;
  left: 29.3px;
  line-height: 180%;
  font-weight: 900;
  display: inline-block;
  width: 221.7px;
  height: 20.3px;
}

.join-button-1,
.join-button-1-child {
  position: absolute;
  top: 22.2px;
  left: 257.6px;
  width: 16.5px;
  height: 7.4px;
}

.join-button-1 {
  top: 228px;
  left: 13.7px;
  width: 332px;
  height: 50.7px;
  cursor: pointer;
  text-align: center;
  font-size: 18px;
  color: #fff;
  font-family: "Nunito Sans";
}

.frame {
  position: absolute;
  top: 0;
  left: 18.6px;
  width: 370.4px;
  height: 319px;
  overflow: hidden;
}

.hero-header {
  position: relative;
  width: 389px;
  height: 341px;
}

.headerframe {
  width: 375px;
  height: 357px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  font-family: Montserrat;
}

.hi-im-prasad {
  position: absolute;
  top: 0;
  left: 0;
  line-height: 140%;
  font-weight: 800;
  display: inline-block;
  width: 325px;
  height: 80px;
}

.i-read-books-you-should-too {
  margin: 0;
}

.book-reading-challenge {
  font-weight: 700;
  font-family: "IBM Plex Sans";
}

.i-read-books-container {
  position: absolute;
  top: 40px;
  left: 0;
  font-size: 15px;
  line-height: 180%;
  color: #585c65;
  display: inline-block;
  width: 333px;
  height: 52px;
  font-family: "IBM Plex Sans";
}

.feature-1-child,
.head-text {
  position: absolute;
  top: 0;
  left: 9px;
  width: 333px;
  height: 92px;
}

.feature-1-child {
  top: 114px;
  left: 0;
  width: 342.3px;
  height: 337.4px;
  object-fit: cover;
}

.feature-1,
.highlights {
  position: relative;
  font-family: Montserrat;
}

.feature-1 {
  width: 345px;
  height: 447.4px;
  text-align: left;
  font-size: 24px;
}

.highlights {
  font-size: 30px;
  line-height: 140%;
  font-weight: 900;
  color: #001856;
  display: inline-block;
  width: 325px;
}

.frame-inner {
  position: absolute;
  top: 68px;
  left: -3px;
  width: 333px;
  height: 296.4px;
}

.read-whichever-book-you-want {
  margin-bottom: 0;
}

.daily-30-minutes-book-reading {
  margin: 0;
  padding-left: 19px;
}

.daily-30-minutes-container {
  position: absolute;
  top: 112px;
  left: 20px;
  line-height: 28.8px;
  color: #5a5a5a;
  text-align: left;
  display: inline-block;
  width: 277px;
  height: 201px;
  font-family: "IBM Plex Sans";
}

.b1,
.what-we-do {
  position: absolute;
  top: 76.8px;
  left: 22px;
  font-size: 20px;
  line-height: 150%;
  display: inline-block;
  width: 282px;
  height: 30.9px;
}

.b1 {
  top: 7px;
  left: 81px;
  font-size: 48px;
  width: 155px;
  height: 70px;
}

.vector-parent {
  position: relative;
  width: 325px;
  height: 339px;
  font-size: inherit;
}

.rectangle-icon {
  position: absolute;
  top: 0;
  left: -4px;
  width: 333px;
  height: 296.4px;
}

.b2,
.read-books-container,
.why-we-do {
  position: absolute;
  left: 20px;
  display: inline-block;
}

.read-books-container {
  top: 108px;
  line-height: 28.8px;
  text-align: left;
  width: 284px;
  height: 159px;
  font-family: "IBM Plex Sans";
}

.b2,
.why-we-do {
  top: 70px;
  font-size: 20px;
  line-height: 150%;
  color: #000;
  width: 282px;
  height: 26.1px;
}

.b2 {
  top: 6.3px;
  left: 88px;
  font-size: 48px;
  color: #27292e;
  width: 155px;
  height: 26.4px;
}

.vector-group {
  position: relative;
  width: 325px;
  height: 288.4px;
  font-size: inherit;
  color: #5a5a5a;
}

.frame-child1 {
  position: absolute;
  top: -37.8px;
  left: 4px;
  width: 333px;
  height: 171px;
}

.anyone-who-wish,
.b3,
.who-can-join {
  position: absolute;
  display: inline-block;
}

.anyone-who-wish {
  top: 67.2px;
  left: 21px;
  line-height: 28.8px;
  font-family: "IBM Plex Sans";
  color: #5a5a5a;
  width: 298px;
  height: 65px;
}

.b3,
.who-can-join {
  top: 37.2px;
  left: 29px;
  font-size: 20px;
  line-height: 150%;
  width: 282px;
  height: 29px;
}

.b3 {
  top: -37.8px;
  left: 93px;
  font-size: 48px;
  width: 155px;
  height: 64px;
}

.vector-container {
  position: relative;
  width: 341px;
  height: 132px;
}

.frame3 {
  position: absolute;
  top: -26.8px;
  left: 3px;
  width: 389px;
  height: 372px;
  overflow: hidden;
}

.hero-header-icon,
.img-1306-2-1 {
  position: absolute;
  top: -8.8px;
  left: 3.5px;
  width: 373px;
  height: 502px;
}

.img-1306-2-1 {
  top: -59.8px;
  width: 360px;
  height: 225px;
  object-fit: cover;
}

.join-button-2-child {
  position: absolute;
  top: 4px;
  left: 33px;
  border-radius: 11px;
  background-color: #bf6157;
  width: 304px;
  height: 49px;
  display: none;
}

.rectangle-group {
  position: absolute;
  top: 0;
  left: 0;
  width: 371px;
  height: 50px;
  overflow: hidden;
}

.register-now-299-1 {
  position: absolute;
  top: 10px;
  left: 28.9px;
  line-height: 180%;
  font-weight: 900;
  display: inline-block;
  width: 246.3px;
  height: 20px;
}

.join-button-2-item {
  position: absolute;
  top: 21.8px;
  left: 259.5px;
  width: 18.2px;
  height: 7.4px;
}

.frame4,
.join-button-2 {
  position: absolute;
  height: 50px;
}

.join-button-2 {
  top: 0;
  left: 80px;
  width: 371px;
  cursor: pointer;
}

.frame4 {
  top: 339.2px;
  left: -44px;
  width: 451px;
  overflow: hidden;
}

.starting-01-dec-container {
  position: absolute;
  top: 0;
  left: -9px;
  line-height: 140%;
  font-weight: 900;
  display: inline-block;
  width: 368px;
}

.reading-trending {
  font-family: "IBM Plex Sans";
}

.make-sure-to-container {
  position: absolute;
  top: 0;
  left: 0;
  line-height: 180%;
  display: inline-block;
  width: 368px;
}

.frame6 {
  position: absolute;
  top: 95px;
  left: -9px;
  width: 368px;
  height: 58px;
  overflow: hidden;
  font-size: 16px;
  color: #585c65;
  font-family: "IBM Plex Sans";
}

.frame5,
.head-text1 {
  position: absolute;
  height: 159px;
}

.head-text1 {
  top: 0;
  left: 4px;
  width: 359px;
}

.frame5 {
  top: calc(50% + 42.2px);
  left: calc(50% - 183px);
  width: 370px;
  overflow: hidden;
  font-size: 32px;
  color: #27292e;
  font-family: Montserrat;
}

.feature-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 367px;
  height: 264px;
}

.feature-2-wrapper,
.final-mid {
  position: relative;
  width: 367px;
  height: 264px;
  font-size: 18px;
  color: #fff;
}

.final-mid {
  background-color: #fff;
  width: 100%;
  height: 2531px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 72px;
  text-align: center;
  font-size: 16px;
  color: #27292e;
  font-family: "Nunito Sans";
}