@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;
  min-height: 100%;
}

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

a {
  text-decoration: none;
}

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

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


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

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

/* ===== MAIN SCREEN ===== */
.screen{
    position: relative;
    width:390px;
    height:3095px;
    margin:0 auto;        /* centers it */
    background:#fff;
    overflow:hidden;
}

/* ===== DECORATIVE BLURRED BACKGROUNDS ===== */
.screen .ellipse {
  position: absolute;
  top: 68px;
  left: 128px;
  width: 298px;
  height: 286px;
  background-color: #fff7fa;
  border-radius: 149.15px / 143.23px;
  filter: blur(48.7px);
}

.screen .div {
  position: absolute;
  top: 932px;
  left: -103px;
  width: 415px;
  height: 467px;
  background-color: #fff7fa;
  border-radius: 207.63px / 233.41px;
  filter: blur(48.7px);
}

.screen .ellipse-5 {
  position: absolute;
  top: 2403px;
  left: -11px;
  width: 298px;
  height: 286px;
  background-color: #fff7fa;
  border-radius: 149.15px / 143.23px;
  filter: blur(48.7px);
}

.screen .ellipse-6 {
  position: absolute;
  top: 1764px;
  left: 138px;
  width: 298px;
  height: 286px;
  background-color: #fff7fa;
  border-radius: 149.15px / 143.23px;
  filter: blur(48.7px);
}

/* ===== VECTOR IMAGES ===== */
.screen .vector {
  position: absolute;
  top: 192px;
  left: 0;
  width: 134px;
  height: 146px;
}

.screen .img {
  position: absolute;
  top: 836px;
  left: 0;
  width: 127px;
  height: 146px;
}

.screen .vector-2 {
  position: absolute;
  top: 605px;
  left: 229px;
  width: 161px;
  height: 89px;
}

.screen .vector-3 {
  position: absolute;
  top: 1004px;
  left: 271px;
  width: 119px;
  height: 62px;
}

.screen .vector-4 {
  position: absolute;
  top: 1560px;
  left: 0;
  width: 137px;
  height: 146px;
}

.screen .ellipse-10 {
  position: absolute;
  top: 6845px;
  left: -31431px;
  width: 46px;
  height: 46px;
  object-fit: cover;
}

/* ===== SMALL DECORATIVE LINES ===== */
.screen .rectangle {
  position: absolute;
  top: 49px;
  left: 317px;
  width: 39px;
  height: 2px;
  background-color: #000000;
  border-radius: 2.26px;
}

.screen .rectangle-2 {
  position: absolute;
  top: 59px;
  left: 317px;
  width: 39px;
  height: 2px;
  background-color: #000000;
  border-radius: 2.26px;
}

.screen .rectangle-3 {
  position: absolute;
  top: 68px;
  left: 317px;
  width: 39px;
  height: 2px;
  background-color: #000000;
  border-radius: 2.26px;
}

.screen .rectangle-12 {
  position: absolute;
  top: 1239px;
  left: calc(50.00% - 21px);
  width: 42px;
  height: 1px;
  background-color: #000000;
  border-radius: 2.63px;
}

.screen .rectangle-13 {
  position: absolute;
  top: 1294px;
  left: calc(50.00% - 21px);
  width: 42px;
  height: 1px;
  background-color: #000000;
  border-radius: 2.63px;
}

.screen .rectangle-14 {
  position: absolute;
  top: 1350px;
  left: calc(50.00% - 21px);
  width: 42px;
  height: 1px;
  background-color: #000000;
  border-radius: 2.63px;
}

.screen .rectangle-20 {
  position: absolute;
  top: 1921px;
  left: calc(50.00% + 28px);
  width: 129px;
  height: 1px;
  background-color: #000000;
  border-radius: 2.63px;
}

.screen .rectangle-23 {
  position: absolute;
  top: 2135px;
  left: calc(50.00% - 172px);
  width: 129px;
  height: 1px;
  background-color: #000000;
  border-radius: 2.63px;
}

.screen .rectangle-26 {
  position: absolute;
  top: 2350px;
  left: calc(50.00% + 28px);
  width: 129px;
  height: 1px;
  background-color: #000000;
  border-radius: 2.63px;
}

/* ===== BUTTONS & BORDERS ===== */
.screen .rectangle-4 {
  position: absolute;
  top: 119px;
  left: calc(50.00% - 67px);
  width: 134px;
  height: 41px;
  border-radius: 22.06px;
  border: 0.88px solid;
  border-color: #000000;
}

.screen .rectangle-5 {
  position: absolute;
  top: 119px;
  left: 273px;
  width: 84px;
  height: 41px;
  border-radius: 22.06px;
  border: 0.88px solid;
  border-color: #000000;
}

.screen .rectangle-6 {
  position: absolute;
  top: 119px;
  left: 33px;
  width: 84px;
  height: 41px;
  border-radius: 22.06px;
  border: 0.88px solid;
  border-color: #000000;
}

.screen .rectangle-9 {
  position: absolute;
  top: 677px;
  left: calc(50.00% - 85px);
  width: 170px;
  height: 34px;
  background-color: #fff1f7;
  border-radius: 6.02px;
}

.screen .rectangle-19 {
  position: absolute;
  top: 2047px;
  left: 215px;
  width: 137px;
  height: 34px;
  background-color: #fff1f7;
  border-radius: 6.02px;
}

.screen .rectangle-22 {
  position: absolute;
  top: 2262px;
  left: 23px;
  width: 137px;
  height: 34px;
  background-color: #fff1f7;
  border-radius: 6.02px;
}

.screen .rectangle-25 {
  position: absolute;
  top: 2477px;
  left: 215px;
  width: 137px;
  height: 34px;
  background-color: #fff1f7;
  border-radius: 6.02px;
}

.screen .rectangle-27 {
  position: absolute;
  top: 2674px;
  left: calc(50.00% - 133px);
  width: 271px;
  height: 154px;
  border-radius: 1.88px;
  border: 0.88px solid;
  border-color: #000000;
}

.screen .rectangle-28 {
  position: absolute;
  top: 2674px;
  left: calc(50.00% + 157px);
  width: 271px;
  height: 154px;
  border-radius: 1.88px;
  border: 0.88px solid;
  border-color: #000000;
}

.screen .rectangle-29 {
  position: absolute;
  top: 2674px;
  left: calc(50.00% - 422px);
  width: 271px;
  height: 154px;
  border-radius: 1.88px;
  border: 0.88px solid;
  border-color: #000000;
}

/* ===== NUMBERS & CIRCLES ===== */
.screen .ellipse-2 {
  position: absolute;
  top: 1200px;
  left: 42px;
  width: 27px;
  height: 27px;
  border-radius: 13.6px;
  border: 1.13px solid;
  border-color: #000000;
}

.screen .ellipse-3 {
  position: absolute;
  top: 1255px;
  left: 42px;
  width: 27px;
  height: 27px;
  border-radius: 13.6px;
  border: 1.13px solid;
  border-color: #000000;
}

.screen .ellipse-4 {
  position: absolute;
  top: 1310px;
  left: 40px;
  width: 27px;
  height: 27px;
  border-radius: 13.6px;
  border: 1.13px solid;
  border-color: #000000;
}

/* ============================================================ */
/* ===== 🔥 IMAGE CONTAINERS — PINK RECTANGLES & CIRCLES 🔥 ===== */
/* ============================================================ */

/* --- Base styles for all pink rectangles --- */
.screen .rectangle-7,
.screen .rectangle-8,
.screen .rectangle-10,
.screen .rectangle-11,
.screen .rectangle-15,
.screen .rectangle-16,
.screen .rectangle-17,
.screen .rectangle-18,
.screen .rectangle-21,
.screen .rectangle-24 {
  background-color: #ffb4b4; /* fallback pink */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- Base styles for all pink circles --- */
.screen .ellipse-7,
.screen .ellipse-8,
.screen .ellipse-9 {
  background-color: #ffb4b4; /* fallback pink */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- INDIVIDUAL IMAGE CLASSES (replace .png filenames) --- */

/* Rectangles */
.rect-img-1 { background-image: url('rose1.jpg'); }
.rect-img-2 { background-image: url('rose2.jpg'); }
.rect-img-3 { background-image: url('rose3.jpg'); }
.rect-img-4 { background-image: url('rose4.jpg'); }
.rect-img-5 { background-image: url('rose5.jpg'); }
.rect-img-6 { background-image: url('rose6.jpg'); }
.rect-img-7 { background-image: url('rose7.jpg'); }
.rect-img-8 { background-image: url('rose8.jpg'); }
.rect-img-9 { background-image: url('rose9.jpg'); }
.rect-img-10 { background-image: url('rose10.jpg'); }

/* Circles */
.circle-img-1 { background-image: url('pp1.jpg'); }
.circle-img-2 { background-image: url('pp2.jpg'); }
.circle-img-3 { background-image: url('pp3.jpg'); }

/* ============================================================ */

/* ===== TEXT CONTENT ===== */
.screen .element {
  top: 127px;
  left: calc(50.00% - 56px);
  font-size: 15.7px;
  text-align: center;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper {
  top: 1209px;
  left: calc(50.00% - 146px);
  width: 17px;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.screen .p {
  top: 1200px;
  left: calc(50.00% - 111px);
  width: 228px;
  font-size: 16px;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-2 {
  top: 201px;
  left: calc(50.00% - 43px);
  font-size: 25.8px;
  text-align: center;
  white-space: nowrap;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-3 {
  top: 255px;
  left: calc(50.00% - 126px);
  font-size: 17.6px;
  text-align: center;
  white-space: nowrap;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-4 {
  top: 217px;
  left: calc(50.00% - 55px);
  width: 110px;
  -webkit-text-stroke: 1.25px #ffffff;
  font-size: 61.4px;
  text-align: center;
  white-space: nowrap;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-5 {
  top: 687px;
  left: calc(50.00% - 80px);
  width: 161px;
  font-size: 25.8px;
  text-align: center;
  white-space: nowrap;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-6 {
  top: 795px;
  left: calc(50.00% - 93px);
  font-size: 49.6px;
  text-align: center;
  white-space: nowrap;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .element-2 {
  top: 129px;
  left: 291px;
  font-size: 15.7px;
  text-align: center;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .element-3 {
  top: 127px;
  left: 45px;
  font-size: 15.7px;
  text-align: center;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-7 {
  top: 1256px;
  left: calc(50.00% - 111px);
  width: 214px;
  font-size: 16px;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-8 {
  top: 1311px;
  left: calc(50.00% - 111px);
  width: 228px;
  font-size: 16px;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-9 {
  top: 1446px;
  left: calc(50.00% - 138px);
  width: 277px;
  font-size: 14.8px;
  text-align: center;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-10 {
  top: 1264px;
  left: calc(50.00% - 146px);
  width: 19px;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.screen .text-wrapper-11 {
  top: 1319px;
  left: calc(50.00% - 147px);
  width: 21px;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.screen .text-wrapper-12 {
  top: 2057px;
  left: calc(50.00% + 21px);
  width: 136px;
  font-size: 22.6px;
  text-align: center;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}


.screen .text-wrapper-22 {
  top: 2272px;
  left: calc(50.00% + -171px);
  width: 136px;
  font-size: 22.6px;
  text-align: center;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-33 {
  top: 2487px;
  left: calc(50.00% + 21px);
  width: 136px;
  font-size: 22.6px;
  text-align: center;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-13 {
  top: 1399px;
  left: calc(50.00% - 66px);
  font-size: 49.6px;
  text-align: center;
  white-space: nowrap;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-14 {
  top: 2595px;
  left: calc(50.00% - 65px);
  font-size: 49.6px;
  text-align: center;
  white-space: nowrap;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-15 {
  top: 2896px;
  left: calc(50.00% - 45px);
  font-size: 49.6px;
  text-align: center;
  white-space: nowrap;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-16 {
  top: 2932px;
  left: calc(50.00% - 112px);
  font-size: 17.7px;
  text-align: center;
  white-space: nowrap;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-17 {
  position: absolute;
  top: 2965px;
  left: calc(50.00% - 54px);
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  font-size: 16.7px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.screen .text-wrapper-18 {
  top: 2981px;
  left: calc(50.00% - 41px);
  font-size: 16.7px;
  text-align: center;
  white-space: nowrap;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .hello-liviaflowers {
  position: absolute;
  top: 2998px;
  left: calc(50.00% - 62px);
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  font-size: 16.7px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.screen .text-wrapper-19 {
  top: 1850px;
  left: calc(50.00% - 112px);
  width: 225px;
  font-size: 49.6px;
  text-align: center;
  white-space: nowrap;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .element-4 {
  top: 1935px;
  left: calc(50.00% + 25px);
  width: 131px;
  font-size: 16px;
  text-align: right;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .span {
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  font-size: 16px;
  letter-spacing: 0;
}

.screen .text-wrapper-20 {
  font-size: 25.6px;
}

.screen .text-wrapper-21 {
  font-size: 20.9px;
}

.screen .element-5 {
  top: 2153px;
  left: calc(50.00% - 170px);
  width: 131px;
  font-size: 16px;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .element-6 {
  top: 2365px;
  left: calc(50.00% + 15px);
  width: 140px;
  font-size: 16px;
  text-align: right;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-24 {
  top: 2706px;
  left: calc(50.00% - 83px);
  width: 77px;
  font-size: 22.8px;
  text-align: center;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-25 {
  top: 2753px;
  left: calc(50.00% - 114px);
  width: 243px;
  font-size: 17px;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-26 {
  top: 2706px;
  left: calc(50.00% + 207px);
  width: 77px;
  font-size: 22.8px;
  text-align: center;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-27 {
  position: absolute;
  top: 2706px;
  left: calc(50.00% - 373px);
  width: 77px;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  font-size: 22.8px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-28 {
  top: 2153px;
  left: calc(50.00% - 402px);
  width: 229px;
  font-size: 17px;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-29 {
  top: 2753px;
  left: calc(50.00% + 177px);
  width: 202px;
  font-size: 17px;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.screen .angel {
  position: absolute;
  top: 2727px;
  left: calc(50.00% - 374px);
  width: 77px;
  font-family: "Winkle Regular";
  font-weight: 400;
  color: #000000;
  font-size: 19.6px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

/* ===== ORIGINAL PINK RECTANGLE POSITIONS (PRESERVED) ===== */
.screen .rectangle-7 {
  position: absolute;
  top: 297px;
  left: 92px;
  width: 200px;
  height: 301px;
  border-radius: 1.88px;
}

.screen .rectangle-8 {
  position: absolute;
  top: 864px;
  left: calc(50.00% - 99px);
  width: 197px;
  height: 290px;
  border-radius: 1.88px;
}

.screen .rectangle-10 {
  position: absolute;
  top: 297px;
  left: -5px;
  width: 76px;
  height: 301px;
}

.screen .rectangle-11 {
  position: absolute;
  top: 297px;
  left: 312px;
  width: 78px;
  height: 301px;
  border-radius: 1.88px;
}

.screen .rectangle-15 {
  position: absolute;
  top: 1518px;
  left: 192px;
  width: 179px;
  height: 283px;
  border-radius: 1.88px;
}

.screen .rectangle-16 {
  position: absolute;
  top: 1518px;
  left: 25px;
  width: 161px;
  height: 180px;
  border-radius: 1.88px;
}

.screen .rectangle-17 {
  position: absolute;
  top: 1704px;
  left: 25px;
  width: 161px;
  height: 97px;
  border-radius: 1.88px;
}

.screen .rectangle-18 {
  position: absolute;
  top: 1921px;
  left: 25px;
  width: 152px;
  height: 162px;
  border-radius: 1.88px;
}

.screen .rectangle-21 {
  position: absolute;
  top: 2135px;
  left: 198px;
  width: 152px;
  height: 162px;
  border-radius: 1.88px;
}

.screen .rectangle-24 {
  position: absolute;
  top: 2350px;
  left: 25px;
  width: 152px;
  height: 162px;
  border-radius: 1.88px;
}

/* ===== ORIGINAL PINK CIRCLE POSITIONS (PRESERVED) ===== */
.screen .ellipse-7 {
  position: absolute;
  top: 2690px;
  left: 77px;
  width: 46px;
  height: 46px;
  border-radius: 22.94px;
  object-fit: contain;
}

.screen .ellipse-8 {
  position: absolute;
  top: 2690px;
  left: 366px;
  width: 46px;
  height: 46px;
  border-radius: 22.94px;
    object-fit: contain;

}

.screen .ellipse-9 {
  position: absolute;
  top: 2690px;
  left: -213px;
  width: 46px;
  height: 46px;
  border-radius: 22.94px;
    object-fit: contain;

}


/* ===== HORIZONTAL SCROLLABLE REVIEWS ===== */
.reviews-scroll {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  padding: 10px 20px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  position: absolute;
  top: 2674px;
  left: 0;
  width: 100%;
  height: 200px;
  white-space: nowrap;
}

.reviews-scroll::-webkit-scrollbar {
  display: none; /* clean no-scrollbar look */
}

.review-item {
  flex: 0 0 271px;
  scroll-snap-align: start;
  position: relative;
  height: 154px;
  margin-right: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
}

/* Keep original rectangle borders but remove absolute positioning */
.review-item .rectangle-27,
.review-item .rectangle-28,
.review-item .rectangle-29 {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 1.88px !important;
  border: 0.88px solid !important;
  border-color: #000000 !important;
  z-index: 0;
}

/* PINK CIRCLES inside each card */
.review-item .ellipse-7,
.review-item .ellipse-8,
.review-item .ellipse-9 {
  position: relative !important;
  top: -12px !important;   /* moves circle slightly above the card */
  left: -85px !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
  z-index: 2 !important;
  margin: 0 auto !important;
  flex-shrink: 0 !important;
}

/* Text inside each review card */
.review-item .text-wrapper-27 {
  position: relative !important;
  top: -30px !important;
  left: -24px !important;
  font-size: 22.8px !important;
  text-align: center !important;
  z-index: 1;
  margin-top: -10px;
} 
.review-item .text-wrapper-24
{
  position: relative !important;
  top: -30px !important;
  left: -20px !important;
  font-size: 22.8px !important;
  text-align: center !important;
  z-index: 1;
  margin-top: -10px;
}
.review-item .text-wrapper-26 {
  position: relative !important;
  top: -30px !important;
  left: -22px !important;
  font-size: 22.8px !important;
  text-align: center !important;
  z-index: 1;
  margin-top: -10px;
}

.review-item p {
  position: relative !important;
  top: -10px !important;
  left: 0 !important;
  font-size: 17px !important;
  text-align: center !important;
  width: 90% !important;
  z-index: 1;
  margin: 5px auto 0;
  white-space: normal;
  line-height: normal;
}

/* ============================================================ */
/* ===== 🎀 SOFT & CUTE SCROLL ANIMATIONS 🎀 ===== */
/* ============================================================ */

/* --- BASE HIDDEN STATES --- */
.animate-fade-up { opacity: 0; transform: translateY(30px); transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.animate-fade-left { opacity: 0; transform: translateX(-40px); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.animate-fade-right { opacity: 0; transform: translateX(40px); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.animate-pop { opacity: 0; transform: scale(0.85); transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* 👇 BRAND NEW CLASS NAME - NO SPIN, NO SCALE, JUST PURE FADE UP 👇 */
.animate-soft-btn-final { 
  opacity: 0; 
  transform: translateY(20px); 
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}

.animate-slide-alt-1 { opacity: 0; transform: translateX(-30px); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.animate-slide-alt-2 { opacity: 0; transform: translateX(30px); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

/* --- VISIBLE STATES --- */
.animate-fade-up.visible, .animate-fade-left.visible, .animate-fade-right.visible, 
.animate-pop.visible, .animate-soft-btn-final.visible, .animate-slide-alt-1.visible, .animate-slide-alt-2.visible {
  opacity: 1 !important;
  transform: translateX(0) translateY(0) scale(1) !important; 
}

/* --- HEADER FLOAT --- */
.screen .text-wrapper-4 {
  animation: floatDreamy 3.5s ease-in-out infinite;
  opacity: 1 !important;
}
@keyframes floatDreamy {
  0% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-6px) scale(1.02); }
  100% { transform: translateY(0px) scale(1); }
}

/* --- BUTTON HOVER --- */
.screen .rectangle-9, .screen .rectangle-19, .screen .rectangle-22, .screen .rectangle-25 {
  transition: all 0.3s ease;
  cursor: pointer;
}
.screen .rectangle-9:hover, .screen .rectangle-19:hover, .screen .rectangle-22:hover, .screen .rectangle-25:hover {
  transform: scale(1.04);
  background-color: #ffe3ee !important;
  box-shadow: 0 6px 20px rgba(255, 180, 200, 0.3);
}

/* --- IMAGE ZOOM --- */
.screen .rectangle-18, .screen .rectangle-21, .screen .rectangle-24,
.screen .rectangle-15, .screen .rectangle-16, .screen .rectangle-17,
.screen .rectangle-7, .screen .rectangle-8, .screen .rectangle-10, .screen .rectangle-11 {
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  cursor: pointer;
}
.screen .rectangle-18:hover, .screen .rectangle-21:hover, .screen .rectangle-24:hover,
.screen .rectangle-15:hover, .screen .rectangle-16:hover, .screen .rectangle-17:hover,
.screen .rectangle-7:hover, .screen .rectangle-8:hover, .screen .rectangle-10:hover, .screen .rectangle-11:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* ============================================================ */
/* ===== 🍔 SIDE DRAWER MENU (SLIDES FROM RIGHT) 🍔 ===== */
/* ============================================================ */

/* --- The 3 lines (Keep them clickable) --- */
.screen .rectangle,
.screen .rectangle-2,
.screen .rectangle-3 {
  cursor: pointer;
  z-index: 100;
  transition: all 0.3s ease;
}

/* --- The Side Drawer Container --- */
.side-drawer {
  position: fixed;
  top: 0;
  right: -320px; /* Hidden off-screen to the right */
  width: 280px;
  height: 100vh;
  background: #ffffff;
  padding: 80px 25px 30px 25px;
  box-shadow: -10px 0 40px rgba(0,0,0,0.08);
  z-index: 999;
  transition: right 0.9s cubic-bezier(0.34, 0.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  border-left: 1px solid #f0f0f0;
  overflow-y: auto;
}

/* --- When drawer is open --- */
.side-drawer.open {
  right: 0;
}

/* --- Dimmed overlay behind the drawer --- */
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.2);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* --- Menu Links --- */
.side-drawer a {
            font-family: "overdozesans";
  font-size: 20px;
  color: #000;
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 10px 0;
  width: 100%;
  border-bottom: 1px solid #f5f5f5;
}

.side-drawer a:hover {
  color: #ffb4b4;
  transform: translateX(8px);
}

/* --- Close Button (X) inside the drawer --- */
.drawer-close-btn {
  position: absolute;
  top: 25px;
  right: 25px;
  font-size: 30px;
  cursor: pointer;
  color: #000;
  transition: all 0.3s ease;
  line-height: 1;
}
.drawer-close-btn:hover {
  transform: rotate(90deg);
  color: #ffb4b4;
}

/* --- Make sure the 3 lines stay on top --- */
.screen .rectangle,
.screen .rectangle-2,
.screen .rectangle-3 {
  z-index: 101 !important;
}


@media (min-width: 768px){

    body{
        display:flex;
        justify-content:center;
        background:#fff;
    }

    .screen{
        transform:scale(1.18);
        transform-origin:top center;
        margin-top:40px;
    }

}


@media (min-width: 1200px){

    body{
        display:flex;
        justify-content:center;
        background:#fff;
    }

    .screen{
        transform:scale(1.35);
        transform-origin:top center;
        margin-top:50px;
    }

}