* {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0px;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #f0f0f0;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
}
.padding-8 {
  padding: 8px;
}
.font-weight-600 {
  font-weight: 600;
}

.header {
  padding: 0 50px;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  justify-items: center;
  margin: 0 auto;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gradient-background {
  background: linear-gradient(to bottom,
      rgba(69, 82, 102, 1),
      rgba(56, 66, 84, 1));
  border-radius: 14px;
  color: white;
}

.logo {
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  display: flex;
  border-radius: 13px;
  font-size: 20px;
  font-weight: 600;
  color: white;
}

.header-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-button {
  padding: 10.4px 24px;
  color: white;
}

.header-text p {
  padding: 8px 16px;
}

.section-container {
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.section {
  width: 100%;
}

.section1 {
  padding: 69px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.blue-text {
  color: rgba(75, 85, 99, 1);
}

.the-art-of-time {
  padding: 8px 16px;
  margin-bottom: 12px;
  background-color: rgba(214, 218, 225, 1);
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}

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

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

.gap8 {
  gap: 8px;
  display: flex;
}

.time {
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 11px;
  padding: 0px 16px 20px;
}

.time-number {
  width: 112px;
  height: 168px;
  border-radius: 14px;
  font-size: 143.36px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.time-colon {
  font-size: 123.36px;
}

.section1-title {
  font-size: 72px;
}

.margin-0-auto {
  margin: 0 auto 16px;
}

.width-672 {
  width: 672px;
}

.text-center {
  text-align: center;
}

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

.line-height-28 {
  line-height: 28px;
}

.height-60 {
  height: 60px;
}

.section1-blue-button {
  height: 60px;
  padding: 16px 32px;
}

.section1-button {
  background-color: white;
  padding: 16px 32px;
}

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

.radius16 {
  border-radius: 16px;
}

.gap16 {
  gap: 16px;
  display: flex;
}

.margin-bottom-122 {
  margin-bottom: 122px;
}

.column {
  display: flex;
  flex-direction: column;
}

.explore-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(248, 249, 250, 1);
  border: 2px black solid;
}

.section2 {
  padding: 138px 0px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 1280px;
}

.section2-content {
  display: flex;
  flex-direction: row;
  width: 1280px;
  height: 705px;
  gap: 64px;
  align-items: center;
  justify-content: center;
}

.global-emoji {
  width: 94px;
  height: 50px;
  padding: 8px 16px;
  background-color: rgba(59, 130, 246, 0.1);
  border-radius: 16px;
  border: 1px rgba(59, 130, 246, 0.2) solid;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}

.section2-left {
  width: 30%;
}

.section2-right {
  box-shadow: rgba(15, 23, 42, 0.25) 0px 25px 65px -25px;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 17px;
  gap: 117px;
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(to top,
      rgb(255, 255, 255),
      rgba(255, 255, 255, 0.6),
      rgba(255, 255, 255, 0.3));
  align-items: center;
  border-radius: 26px;
}
.world-clock-title {
  font-size: 48px;
  margin-bottom: 16px;
}

.section2-blue-text {
  font-size: 20px;
  background-clip: text;
  background-image: linear-gradient(to right,
      rgb(59, 130, 246),
      rgb(6, 182, 212));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  margin-bottom: 24px;
}

.section2-text {
  line-height: 29.25px;
  color: rgb(75, 85, 99);
  margin-bottom: 32px;
  font-size: 1.125rem;
}

.blue-tick {
  color: white;
  width: 24px;
  height: 24px;
  background-image: linear-gradient(to right,
      rgb(59, 130, 246),
      rgb(6, 182, 212));
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.width-14 {
  width: 14px;
}

.height-14 {
  height: 14px;
}

.list {
  display: flex;
  gap: 16px;
  flex-direction: column;
}

.list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.section2-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.section2-top-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.section2-time-text2 {
  color: rgb(2, 132, 199);
  font-size: 18px;
  font-weight: 600;
}

.section2-time-text1 {
  font-size: 24px;
  font-weight: 700;
}

.height-1280 {
  height: 1280px;
}

.height-705 {
  height: 705px;
}

.gap12 {
  gap: 12px;
  display: flex;
}

.section2-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 26px;
  z-index: -1;
}

.section2-top-right {
  color: white;
}

.section-time {
  width: 160px;
  height: 240px;
  font-size: 204.8px;
}

.section2-bottom {
  width: 100%;
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100%;
}

.cloud {
  color: rgb(107, 114, 128);
  width: 80px;
  height: 80px;
}

.cloud-container {
  display: flex;
  align-items: center;
}

.temperature {
  font-size: 48px;
  font-weight: 100;
}

.grey-text {
  color: rgb(100, 116, 139);
}

.effect {
  gap: 4px;
  display: flex;
  flex-direction: column;
}

.section2-right-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section2-dark-button {
  background-image: linear-gradient(to right,
      rgb(71, 85, 105),
      rgb(55, 65, 81));
  color: white;
  font-weight: 400;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  font-size: 12px;
  gap: 6px;
  width: auto;
  border-radius: 8px;
}

.section2-right-bottom {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.section2-button {
  background-color: rgba(71, 85, 105, 0.12);
  color: rgb(75, 85, 99);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  width: auto;
  font-weight: 400;
  border-radius: 8px;
  font-size: 12px;
}

.section3 {
  padding: 80px 0px;
  display: flex;
  flex-direction: row;
  gap: 64px;
  width: 1280px;
}

.start-timer {
  background-color: rgb(229, 231, 235);
  padding: 12px;
  display: flex;
  border-radius: 12px;
}

.plus-1min {
  background-color: rgb(229, 231, 235);
  padding: 12px 16px;
  display: flex;
  border-radius: 12px;
}

.section3-timer-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-direction: row;
}

.section3-left {
  width: 75%;
  display: flex;
  gap: 24px;
}

.grid {
  display: grid;
}

.grid-4-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}

.grid-item {
  padding: 16px;
  display: flex;
  width: 100%;
  background-color: white;
  border-radius: 16px;
  gap: 14px;
}

.section3-left-container {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.pomodoro-green-icon {
  color: rgb(16, 185, 129);
  width: 20px;
  height: 20px;
}

.pomodoro-container {
  background-color: rgba(16, 185, 129, 0.2);
  display: flex;
  border-radius: 16px;
  padding: 12px;
}

.font-size-15 {
  font-size: 15px;
}

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

.font-weight-500 {
  font-weight: 500;
}

.font-weight-400 {
  font-weight: 400;
}

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

.line-container {
  gap: 4px;
  display: flex;
  flex-direction: row;
}

.line {
  border-radius: 9999px;
  display: flex;
  height: 6px;
  width: 100%;
}

.space-between {
  display: flex;
  justify-content: space-between;
}

.timer-right-icon {
  padding: 0 8px;
  color: rgb(75, 85, 99);
  border-radius: 9999px;
  background-color: rgb(229, 231, 235);
  font-size: 11px;
  font-weight: 400;
  align-items: center;
  justify-content: center;
  display: flex;
}

.red-line {
  background-color: rgb(239, 68, 68);
}

.green-line {
  background-color: rgb(16, 185, 129);
}

.blue-line {
  background-color: rgb(59, 130, 246);
}

.timer-icon {
  color: rgb(14, 165, 233);
  width: 20px;
  height: 20px;
}

.timer-container {
  background-color: rgba(14, 165, 233, 0.2);
  display: flex;
  border-radius: 16px;
  padding: 12px;
}

.border-dashed {
  border: 2px dashed rgb(229, 231, 235);
  border-radius: 16px;
  padding: 16px;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}

.color-rgb148-163-184 {
  color: rgb(148, 163, 184);
  font-size: 100%;
}

.display-flex {
  display: flex;
}

.height-32 {
  height: 32px;
}

.dashed-text {
  line-height: 24px;
  color: rgb(100, 116, 139);
  font-weight: 600;
}

.width-32 {
  width: 32px;
}

.section3-right {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.clock-emoji {
  width: 94px;
  height: 50px;
  padding: 8px 16px;
  background-color: rgba(168, 85, 247, 0.1);
  border-radius: 16px;
  border: 1px rgba(168, 85, 247, 0.2) solid;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}

.section3-purple-text {
  background-image: linear-gradient(to right,
      rgb(168, 85, 247),
      rgb(236, 72, 153));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 24px;
}

.purple-tick {
  color: white;
  width: 24px;
  height: 24px;
  background-image: linear-gradient(to right,
      rgb(168, 85, 247),
      rgb(236, 72, 153));
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alarms-emoji {
  width: 94px;
  height: 50px;
  padding: 8px 16px;
  background-color: rgba(245, 158, 11, 0.1);
  border-radius: 16px;
  border: 1px rgba(245, 158, 11, 0.2) solid;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}

.section4 {
  height: 981px;
  width: 1280px;
  display: flex;
}

.section4-alarm-text {
  font-size: 20px;
  background-clip: text;
  background-image: linear-gradient(to right,
      rgb(245, 158, 11),
      rgb(249, 115, 22));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  margin-bottom: 24px;
}

.width-full {
  width: 100%;
}

.section4-tick {
  color: white;
  width: 24px;
  height: 24px;
  background-image: linear-gradient(to right,
      rgb(245, 158, 11),
      rgb(249, 115, 22));
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gap64 {
  gap: 64px;
  display: flex;
}

.alarms-card-container {
  box-shadow: rgba(15, 23, 42, 0.25) 0px 25px 65px -25px;
  width: 100%;
  position: relative;
  padding: 24px;
  display: flex;
  flex-direction: column;
  background-color: white;
  align-items: center;
  border-radius: 26px;
  gap: 12px;
}

.section4-right-title {
  font-size: 24px;
  margin-bottom: 16px;
  width: 100%;
}

.alarms-card {
  background-color: rgba(243, 244, 246, 0.5);
  padding: 16px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  border-radius: 12px;
  width: 100%;
}

.alarms-card-7am {
  color: rgb(148, 163, 184);
  font-weight: 100;
  letter-spacing: -2.4px;
  font-size: 48px;
  line-height: 48px;
}

.alarms-wake-up {
  color: rgb(148, 163, 184);
  font-size: 16px;
  line-height: 24px;
  margin-top: 4px;
}

.weekday {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 8px;
  color: rgb(75, 85, 99);
  font-weight: 600;
}

.alarms-card-right {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 16px;
}

.button-img {
  width: 56px;
  height: 32px;
}

.alarms-card-right-section {
  padding: 8px 12px;
  white-space: nowrap;
  color: rgb(100, 116, 139);
}

.padding12-32 {
  padding: 12px 32px;
}

.border-radius8 {
  border-radius: 8px;
}

.margin-top-11 {
  margin-top: 11px;
}

.stopwatch-emoji {
  width: 94px;
  height: 50px;
  padding: 8px 16px;
  background-color: rgba(34, 197, 94, 0.1);
  border-radius: 16px;
  border: 1px rgba(34, 197, 94, 0.2) solid;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
  backdrop-filter: blur(4px);
}

.section5 {
  width: 1280px;
  display: flex;
  flex-direction: row;
  gap: 64px;
  align-items: center;
  padding: 80px 32px;
}

.green-tick {
  color: white;
  width: 24px;
  height: 24px;
  background-image: linear-gradient(to right,
      rgb(34, 197, 94),
      rgb(16, 185, 129));
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section5-green-text {
  background-image: linear-gradient(to right,
      rgb(34, 197, 94),
      rgb(16, 185, 129));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 24px;
}

.section5-card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 40px;
  padding-bottom: 48px;
}

.stopwatch-time {
  font-size: 72px;
  font-weight: 100;
  line-height: 1;
}

.stopwatch-time-ms {
  font-size: 48px;
  font-weight: 100;
  line-height: 1;
}

.stopwatch-buttons {
  display: flex;
  gap: 16px;
}

.stopwatch-white-button {
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 9999px;
  width: 7rem;
  height: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(75, 85, 99);
  font-size: 20px;
  font-weight: 600;
  opacity: 0.5;
  box-shadow: rgba(15, 23, 42, 0.25) 0px 25px 65px -25px;
}

.stopwatch-dark-button {
  background-color: rgb(75, 85, 99);
  color: white;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  font-weight: 600;
  width: 7rem;
  height: 7rem;
  box-shadow: rgba(15, 23, 42, 0.25) 0px 25px 65px -25px;
}

.section6 {
  height: 821px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 64px;
  width: 1280px;
}

.countdown-emoji {
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
  width: 94px;
  height: 50px;
  padding: 8px 16px;
  background-color: rgba(236, 72, 153, 0.1);
  border-radius: 16px;
  border: 1px rgba(236, 72, 153, 0.2) solid;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}

.section6-pink-text {
  font-size: 20px;
  background-clip: text;
  background-image: linear-gradient(to right, rgb(236, 72, 153), rgb(244, 63, 94));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  margin-bottom: 24px;
}

.pink-tick {
  color: white;
  width: 24px;
  height: 24px;
  background-image: linear-gradient(to right, rgb(236, 72, 153), rgb(244, 63, 94));
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2px;
}

.section6-right-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  width: 100%;
}

.card-container {
  box-shadow: rgba(15, 23, 42, 0.25) 0px 25px 65px -25px;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 24px;
  display: flex;
  flex-direction: column;
  background-color: white;
  align-items: center;
  border-radius: 26px;
  gap: 12px;
}
.section6-right-title-grey-text {
  color: rgb(75, 85, 99);
  font-size: 12px;
}
.section6-right-card {
  border: 1px solid rgba(226, 232, 240, 0.55);
  width: 100%;
  height: 100%;
  border-radius: 16px;
  padding: 16px;
}
.height-100percent {
  height: 100%;
}
.gift-icon-container {
  background-color:rgba(236, 72, 153, 0.12);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.gap-12 {
  display: flex;
  gap: 12px;
}
.margin-bottom-12 {
  margin-bottom: 12px;
}
.time-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.day-left {
  color: rgb(236, 72, 153);
  font-size: 36px;
  line-height: 36px;
  font-weight: 400;
  margin-right: 4px;
}
.second-left {
  display: flex;
  flex-direction: row;
  gap:8px;
  align-items: end;
  color: rgb(75, 85, 99);
  font-size: 14px;
}
.flex {
  display: flex;
}
.grey-circle {
  background-color: rgba(226, 232, 240, 0.55);
  border-radius:9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  line-height: 16.5px;
  font-size: 11px;
}
.section6-pink-line {
  background-color: rgba(236, 72, 153, 0.16);
  margin-top: 12px;
}
.calendar-icon-container {
  background-color: rgba(34, 197, 94, 0.12);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.day-left-green {
  color: rgb(34, 197, 94);
  font-size: 36px;
  line-height: 36px;
  font-weight: 400;
  margin-right: 4px;
}
.section6-green-line {
  background-color:rgba(34, 197, 94, 0.16);
  margin-top: 12px;
}
.plane-icon-container {
  background-color: rgba(59, 130, 246, 0.12);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.day-left-blue {
  color: rgb(59, 130, 246);
  font-size: 36px;
  line-height: 36px;
  font-weight: 400;
  margin-right: 4px;
}
.section6-blue-line {
  background-color: rgba(59, 130, 246, 0.16);
  margin-top: 12px;
}
.day-left-purple {
  color: rgb(139, 92, 246);
  font-size: 36px;
  line-height: 36px;
  font-weight: 400;
  margin-right: 4px;
}
.section6-purple-line {
  background-color: rgba(139, 92, 246, 0.16);
  margin-top: 12px;
}
.graduation-icon-container {
  background-color: rgba(139, 92, 246, 0.12);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.section7 {
  min-height: 1113px;
  display: flex;
  flex-direction: row;
  width:1280px;
  align-items: center;
  justify-content: center;
  gap: 64px;
}
.width-auto {
  width: auto;
}
.height-auto {
  height: auto;
}
.section7-left-top-card {
  border: 1px solid rgba(226, 232, 240, 0.55);
  width: 100%;
  height: 100%;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.classic-pomodoro-title {
  font-size: 18px;
  font-weight: 600;
  color: rgb(75, 85, 99);
}
.section7-grey-text {
  color: rgb(75, 85, 99);
  font-size: 14px;
}
.tomato-emoji {
  background-color: rgba(239, 68, 68, 0.125);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  color: rgb(239, 68, 68);
  font-size: 14px;
  border-radius: 9999px;
}
.font-size-48 {
  font-size: 48px;
}
.dot {
  background-color: rgb(209, 213, 219);
  width: 12px;
  height: 12px;
  border-radius: 9999px;
}
.dots-container {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
}
.red-dot {
  width: 14px;
  height: 14px;
  background-color: rgb(239, 68, 68);
  border-radius: 9999px;
}
.pomodoro-rest-text {
  color: rgb(75, 85, 99);
  font-size: 14px;
}
.gap-8 {
  gap: 8px;
}
.black-border-card {
  border: 1px rgb(71, 85, 105) solid;
  border-radius: .75rem;
  padding:12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.section7-card {
  border-radius: .75rem;
  border: 1px rgba(226, 232, 240, 0.55) solid;
  padding:12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.text-xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.card-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.color-rgb51-65-85 {
  color: rgb(51, 65, 85);
}
.pomodoro-card-text {
  color: rgb(75, 85, 99);
  font-size: 12px;
}
.pomodoro-card-title {
  color: rgb(17, 24, 39);
  font-size: 14px;
  font-weight: 500;
}
.target-emoji {width: 94px;
  height: 50px;
  padding: 8px 16px;
  border-radius: 16px;
  border: 1px rgba(239, 68, 68, 0.2)solid;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
  background-color: rgba(239, 68, 68, 0.1);
}
.pomodoro-clock-title {
  font-size: 48px;
  margin-bottom: 16px;
}
.section7-orange-text {
  font-size: 20px;
  background-clip: text;
  background-image:linear-gradient(to right, rgb(239, 68, 68), rgb(249, 115, 22));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  margin-bottom: 24px;
}
.orange-tick {
  color: white;
  width: 24px;
  height: 24px;
  background-image: linear-gradient(to right, rgb(239, 68, 68), rgb(249, 115, 22));
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2px;
}
.bell-emoji {width: 94px;
  height: 50px;
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
  background-color: rgba(234, 179, 8, 0.1);
  border: 1px rgba(234, 179, 8, 0.2) solid;
}
.section8-yellow-text {
  font-size: 20px;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  margin-bottom: 24px;
  background-image: linear-gradient(to right, rgb(234, 179, 8), rgb(245, 158, 11));
}
.yellow-tick {
  color: white;
  width: 24px;
  height: 24px;
  background-image: linear-gradient(to right, rgb(234, 179, 8), rgb(245, 158, 11));
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2px;
}
.bell-svg {
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  display: flex;
  margin-bottom: 8px;
  border-radius: 8px;
  background-color: rgba(245, 158, 11, 0.125);
}
.w-full {
  width: 100%;
}
.font-size-12 {
  font-size: 12px;
}
.margin-bottom-4 {
  margin-bottom: 4px;
}
.font-size-10 {
  font-size: 10px;
}
.line-height-15 {
  line-height: 15px;
}
.padding-16 {
  padding: 16px;
}
.width-144 {
  width: 144px;
}
.sound-svg {
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  display: flex;
  margin-bottom: 8px;
  border-radius: 8px;
  background-color: rgba(236, 72, 153, 0.125);
}
.mobile-svg {
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  display: flex;
  margin-bottom: 8px;
  border-radius: 8px;
  background-color: rgba(139, 92, 246, 0.125);
}
.gap0 {
  gap: 0px;
}
.green-text {
  color: rgb(34, 197, 94);
  gap: 4px;
  display: flex;
  align-items: center;
  flex-direction: row;
  font-size: 12px;
}
.font-size-14 {
  font-size: 14px;
}
.card {
  border-radius: .75rem;
  border: 1px rgba(226, 232, 240, 0.55) solid;
  padding: 12px;
  display: flex;
  flex-direction: column;
}
.green-card {
  border: 1px rgba(34, 197, 94, 0.3)solid;
  padding: 8px;
  display: flex;
  background-color: rgba(34, 197, 94, 0.1);
  border-radius: 8px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
.width-64 {
  width: 64px;
}
.w-95percent {
  width: 95%;
}
.grey-card {
  display: flex;
  background-color: rgba(71, 85, 105, 0.12);
  border-radius: 8px;
  width: 100%;
  align-items: center;
}
.w-90percent {
  width: 90%;
}
.yellow-line {
  background-color: rgb(245, 158, 11);
}
.w-75percent {
  width: 75%;
}
.w-50percent {
  width: 50%;
}
.light-blue-card {
  background-image: linear-gradient(to right bottom, rgb(241, 245, 249), rgb(249, 250, 251), rgb(241, 245, 249));
  padding: 16px;
  display: flex;
  border-radius: 8px;
  width: 100%;
  gap: 12px;
}
.dark-blue-lightning {
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  display: flex;
  color: white;
  background-image: linear-gradient(to right bottom, rgb(71, 85, 105), rgb(55, 65, 81));
  border-radius: 12px;
}
.line-height-20 {
  line-height: 20px;
}
.line-height-16 {
  line-height: 16px;
}
.enable-button {
  background-color: rgb(34, 197, 94);
  color: white;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: 12px;
  line-height: 16px;
}
.enable-button:hover {
  cursor: pointer;
}
.test-button {
  background-color: rgba(255, 255, 255, 0.72);
  border: 1px rgba(226, 232, 240, 0.55) solid;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: 12px;
  line-height: 16px;
}
.graph-emoji {
  width: 94px;
  height: 50px;
  padding: 8px 16px;
  border-radius: 16px;
  background-color: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}
.section9-purple-text {
  font-size: 20px;
  background-clip: text;
  color: rgb(99, 102, 241);
  font-weight: 600;
  margin-bottom: 24px;
}
.section9-purple-tick {
  color: white;
  width: 24px;
  height: 24px;
  background-image: linear-gradient(to right, rgb(99, 102, 241), rgb(139, 92, 246));
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.align-start {
  align-items: flex-start;
  display: flex;
}
.justify-start {
  justify-content: flex-start;
  display: flex;
}
.width-15 {
  width: 15px;
}
.height-15 {
  height: 15px;
}
.margin-bottom-8 {
  margin-bottom: 8px;
}
.padding-12 {
  padding: 12px;
}
.font-bold {
  font-weight: 700;
}
.text-sm {
  font-size: 14px;
}
.margin-bottom-16 {
  margin-bottom: 16px;
}
.height-128 {
  height: 128px;
}
.align-end {
  display: flex;
  align-items: flex-end;
}
.justify-end {
  display: flex;
  justify-content: flex-end;
}
.gap-24 {
  display: flex;
  gap: 24px;
}
.section9-right-bottom-right-circle {
  border-radius: 9999px;

}
.grid-3-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  height: 100%;
}
.pad {
  border-radius: 16px;
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
}
.purple-pad {
  background-image:linear-gradient(to right bottom, rgb(168, 85, 247), rgb(236, 72, 153));
}
.blue-pad {
  background-image: linear-gradient(to right bottom, rgb(59, 130, 246), rgb(6, 182, 212));
}
.green-pad {
  background-image:linear-gradient(to right bottom, rgb(34, 197, 94), rgb(16, 185, 129));
}
.orange-to-red-pad {
  background-image: linear-gradient(to right bottom, rgb(249, 115, 22), rgb(239, 68, 68));
}
.black-pad {
  background-image: linear-gradient(to right bottom, rgb(71, 85, 105), rgb(55, 65, 81));
}
.red-to-orange-pad {
  background-image: linear-gradient(to right bottom, rgb(244, 63, 94), rgb(245, 158, 11));
}
.light-dark-button-container {
  padding:4px;
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
}
.light-button {
  padding: 8px 16px;
  background-image: linear-gradient(to right, rgb(71, 85, 105), rgb(55, 65, 81));
  color: white;
  align-items: center;
  border-radius: 8px;
  gap: 8px;
  display: flex;
}
.dark-button {
  padding: 8px 16px;
  align-items: center;
  border-radius: 8px;
  gap: 8px;
  display: flex;
}
.w-40 {
  width: 40px;
}
.h-40 {
  height: 40px;
}
.line-height-24 {
  line-height: 24px;
}
.theme-emoji {
  width: 94px;
  height: 50px;
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
  border: 1px solid rgba(244, 63, 94, 0.2);
  background-color: rgba(244, 63, 94, 0.1);
}
.section10-pink-text {
  font-size: 20px;
  background-clip: text;
  background-image: linear-gradient(to right,
      rgb(236, 72, 153),
      rgb(244, 63, 94));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  margin-bottom: 24px;
}
.section10-tick {
  color: white;
  width: 24px;
  height: 24px;
  background-image: linear-gradient(to right,
      rgb(236, 72, 153),
      rgb(244, 63, 94));
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section11 {
  height: 100%;
  max-width: 1152px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 0;
}
.crown-emoji {
  width: 94px;
  height: 50px;
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgb(192, 132, 252);
  background-color: rgba(192, 132, 252, 0.1);
  border: 1px rgba(192, 132, 252, 0.2) solid;
  margin-bottom: 24px;
}
.section11-title {
  font-size: 48px;
  font-weight: 700;
  line-height: 48px;
  text-align: center;
  margin-bottom: 16px;
}
.margin-bottom-48 {
  margin-bottom: 48px;
}
.mounthly-yearly-buttons {
  display: flex;
  flex-direction: row;
  padding:4px;
  border-radius: 9999px;
  border: 2px solid rgb(229, 231, 235);
  margin-bottom: 48px;
}
.monthly-button {
  padding:10px 24px;
  color: rgb(75, 85, 99);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}
.yearly-button {
  color: white;
  padding:6px 6px 6px 24px;
  display: flex;
  gap: 8px;
  background-image:linear-gradient(to right, rgb(71, 85, 105), rgb(55, 65, 81)); 
  align-items: center;
  border-radius: 9999px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}
.save17-text {
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: white;
  color: black;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  border-radius: 9999px;
  font-weight: 600;
  padding: 4px 10px 4px 8px;
}
.purple-card {
  border-radius: 24px;
  padding: 24px;
  width: 100%;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.35) 0px 25px 70px 0px;
  border: rgb(146, 181, 240) solid 2px;
}
.section11-card {
  width: 100%;
  border-radius: 24px;
  background-color: white;
  height: 718px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.35) 0px 25px 70px 0px;
  padding: 24px;
}
.purple-top-right {
  position: absolute;
  top: 0;
  right: 0;
  background-image:linear-gradient(to right, rgb(168, 85, 247), rgb(147, 51, 234));
  border-top-right-radius: 24px;
  border-bottom-left-radius: 8px;
  color: white;
  font-size: 12px;
  padding: 4px 12px;
}
.relative {
  position: relative;
}
.cards3 {
  display: flex;
  flex-direction: row;
  gap: 24px;
  width: 1152px;
}
.gift-svg-container {
  background-image:linear-gradient(to right bottom, rgb(100, 116, 139), rgb(71, 85, 105));
  padding: 8px;
  height: 40px;
  aspect-ratio: 1/1;
  display: flex;
  border-radius: 8px;
}
.font-weight-700 {
  font-weight: 700;
}
a {
  text-decoration: none;
}
.money {
  font-size: 36px;
  font-weight: 700;
}
.gap-4 {
  display: flex;
  gap: 4px;
}
.margin-bottom-24 {
  margin-bottom: 24px;
}
.money-list-item {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  color: rgb(75, 85, 99);
  font-size: 14px;
  line-height: 20px;
}
.tick {
  color: rgb(34, 197, 94);
  width: 16px;
  height: 16px;
}
.money-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.month {
  color: rgb(75, 85, 99);
}
.x-svg {
  height: 16px;
  width: 16px;
  color: rgb(75, 85, 99);
}
.star-svg-container {
  background-image: linear-gradient(to right, rgb(168, 85, 247), rgb(147, 51, 234));
  padding: 8px;
  height: 40px;
  aspect-ratio: 1/1;
  display: flex;
  border-radius: 8px;
}
.black {
  color: black;
}
.purple-button {
  background-image: linear-gradient(to right, rgb(168, 85, 247), rgb(147, 51, 234));
  padding: 12px 0;
  align-items: center;
  display: flex;
  justify-content: center;
  gap: 8px;
  color: white;
  border-radius: 16px;
  font-weight: 600;
  margin-top: 24px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(7, 20, 66, 0.6) 0px 10px 30px 0px
}
.crown-svg-container {
  background-image: linear-gradient(to right bottom, rgb(245, 158, 11), rgb(217, 119, 6));
  padding: 8px;
  border-radius: 8px;
  aspect-ratio: 1/1;
  height: 40px;
}
.yellow-button {
  background-image: linear-gradient(to right, rgb(245, 158, 11), rgb(217, 119, 6));
  padding: 12px 0;
  align-items: center;
  display: flex;
  justify-content: center;
  gap: 8px;
  color: white;
  border-radius: 16px;
  font-weight: 600;
  margin-top: 24px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(7, 20, 66, 0.6) 0px 10px 30px 0px
}
.margin-bottom-80 {
  margin-bottom: 80px;
}
.question-emoji {
  width: 94px;
  height: 50px;
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgb(229, 231, 235);
  margin-bottom: 24px;
  
}
.section12-list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  padding: 16px;
  font-size: 16px;
  line-height: 24px;
  border: 1px solid rgb(229, 231, 235);
  border-radius: 12px;
  font-weight: 500;
}
.section12 {
  height: 100%;
  max-width: 768px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 0;
}
.margin-top-48 {
  margin-top: 48px;
}
.footer {
  max-width: 1280px;
  padding: 80px 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
  text-align: center;
  margin-bottom: 16px;
}
.margin-bottom-64 {
  margin-bottom: 64px;
}
.footer-settings {
  gap: 48px;
  width: 100%;
  display: flex;
  padding: 48px 0;
  border-top: 1px solid rgba(226, 232, 240, 0.55);
  border-bottom: 1px solid rgba(226, 232, 240, 0.55);
}
.footer-settings-item {
  gap: 16px;
  width: 100%;
  display: flex;
  font-size: 14px;
  line-height: 24px;
  flex-direction: column;
  color: rgb(75, 85, 99);
}
.line-height-22 {
  line-height: 22.75px;
}
.footer-strong {
  color: black;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.7px;
}
.w-32 {
  width: 32px;
}
.h-32 {
  height: 32px;
}
.margin-top-32 {
  margin-top: 32px;
}
.footer-button {
  color: white !important;
  display: flex;
  font-size: 18px;
  font-weight: 600;
  margin-top: 24px;
  padding: 16px 32px;
  border-radius: 16px;
  margin-bottom: 48px;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(to right, rgb(69, 82, 102), rgb(55, 65, 81));
}
.display-none {
  display: none;
}
@media (max-width: 1300px) {
  .section-container {
    gap: 160px;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
  }
  .section2-content {
    flex-direction: column;
    height: auto;
    width: 100%;
  }
  .section2 {
    padding: 0;
  }
  .section2-left {
    width: 100%;
  }
  .section2-right-container {
    width: 100%;
  }
  .section2-right,.section3-left {
    width: 100%;
  }
  .section {
    flex-direction: column;
    display: flex;
    width: 100%;
    height: 100vh;
  }
  .cards3 {
    width: 100%;
  }
  .media-row {
    flex-direction: row;
    display: flex;
  }
  .display-none {
    display: flex;
  }
  .media-display-none {
    display: none;
  }
  .section3 {
    padding: 0;
  }
  .footer-settings {
    flex-direction: column;
  }
  .section6 {
    height: auto;
  }
  .section5 {
    padding: 0;
  }
  .section4 {
    padding: 0;
  }
  .time-number {
    font-size: 81.92px;
    font-weight: 400;
    height: 96px;
    width: 64px;
  }
  .time-colon {
    font-size: 61.44px;
  }
  .section1-title {
    font-size: 48px;
  }
  .grey-card {
    padding: 8px;
  }
  .section2 {
    width: 100%;
  }
  .section3 {
    width: 100%;
  }
  .section4 {
    width: 100%;
  }
  .section5 {
    width: 100%;
  }
  .section6 {
    width: 100%;
  }
  .section7 {
    width: 100%;
  }
  .section8 {
    width: 100%;
  }
  .section11 {
    width: 100%;
  }
}