@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");
}

/* ============================================================ */
/* ===== 📱 MOBILE SCREEN (YOUR EXACT ORIGINAL DESIGN) ===== */
/* ============================================================ */
.mobile-only{
    position: relative;
    width:390px;
    height:3095px;
    margin:0 auto;        /* centers it */
    background:#fff;
    overflow:hidden;
}

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

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

.mobile-only .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);
}

.mobile-only .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 ===== */
.mobile-only .vector {
  position: absolute;
  top: 192px;
  left: 0;
  width: 134px;
  height: 146px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== BUTTONS & BORDERS ===== */
.mobile-only .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;
}

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

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

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

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

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

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

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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 ===== */
.mobile-only .ellipse-2 {
  position: absolute;
  top: 1200px;
  left: 42px;
  width: 27px;
  height: 27px;
  border-radius: 13.6px;
  border: 1.13px solid;
  border-color: #000000;
}

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

.mobile-only .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 ===== */
.mobile-only .rectangle-7,
.mobile-only .rectangle-8,
.mobile-only .rectangle-10,
.mobile-only .rectangle-11,
.mobile-only .rectangle-15,
.mobile-only .rectangle-16,
.mobile-only .rectangle-17,
.mobile-only .rectangle-18,
.mobile-only .rectangle-21,
.mobile-only .rectangle-24 {
  background-color: #ffb4b4;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.mobile-only .ellipse-7,
.mobile-only .ellipse-8,
.mobile-only .ellipse-9 {
  background-color: #ffb4b4;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.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('rose12.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('rose13.jpg'); }

.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 ===== */
.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
  animation: floatDreamy 3.5s ease-in-out infinite;
}

@keyframes floatDreamy {
  0% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-6px) scale(1.02); }
  100% { transform: translateY(0px) scale(1); }
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

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

.mobile-only .text-wrapper-20 { font-size: 25.6px; }
.mobile-only .text-wrapper-21 { font-size: 20.9px; }

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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;
}

.mobile-only .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 ===== */
.mobile-only .rectangle-7 {
  position: absolute;
  top: 297px;
  left: 92px;
  width: 200px;
  height: 301px;
  border-radius: 1.88px;
}

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== HORIZONTAL SCROLLABLE REVIEWS ===== */
.mobile-only .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;
}

.mobile-only .reviews-scroll::-webkit-scrollbar {
  display: none;
}

.mobile-only .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;
}

.mobile-only .review-item .rectangle-27,
.mobile-only .review-item .rectangle-28,
.mobile-only .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;
}

.mobile-only .review-item .ellipse-7,
.mobile-only .review-item .ellipse-8,
.mobile-only .review-item .ellipse-9 {
  position: relative !important;
  top: -12px !important;
  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;
}

.mobile-only .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;
} 
.mobile-only .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;
}
.mobile-only .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;
}

.mobile-only .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;
}

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

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

/* ===== SIDE DRAWER (Mobile) ===== */
.mobile-only .rectangle, .mobile-only .rectangle-2, .mobile-only .rectangle-3 {
  cursor: pointer;
  z-index: 100;
  transition: all 0.3s ease;
}

.side-drawer {
  position: fixed;
  top: 0;
  right: -320px;
  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;
}

.side-drawer.open { right: 0; }

.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; }

.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); }

.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; }

.mobile-only .rectangle, .mobile-only .rectangle-2, .mobile-only .rectangle-3 { z-index: 101 !important; }


/* ============================================================ */
/* ===== 🖥️ BRAND NEW LAPTOP/TABLET DESIGN 🖥️ ===== */
/* ============================================================ */

/* Hide laptop version on phones */
@media (max-width: 767px) {
    .desktop-wrapper { display: none !important; }
}

/* Show laptop version on tablets and desktops */
@media (min-width: 768px) {
    .mobile-only { display: none !important; }
    
    body {
        background: #fcf9fa; /* Soft pinkish background */
        display: flex;
        justify-content: center;
        padding: 30px;
    }

    .desktop-wrapper {
        max-width: 1200px;
        width: 100%;
        border-radius: 40px;
        overflow: hidden;
        padding: 0 50px 50px 50px;
        font-family: "overdozesans", sans-serif;
    }

    /* ===== HEADER ===== */
    .desktop-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30px 0;
        border-bottom: 1px solid #ffd8ea;
    }
    .logo-text {
        font-size: 32px;
        font-weight: bold;
        letter-spacing: 1px;
    }
    .desktop-nav {
        display: flex;
        gap: 30px;
        align-items: center;
    }
    .desktop-nav a {
        color: #333;
        font-size: 16px;
        transition: color 0.3s;
    }
    .desktop-nav a:hover { color:#ff9dcb; }
    .desktop-btn {
        background: #fff1f7;
        padding: 10px 25px;
        border-radius: 30px;
        border: 1px solid #000;
        transition: all 0.3s;
    }
    .desktop-btn:hover {
        background: #ffe3ee;
        transform: scale(1.05);
    }

    /* ===== HERO ===== */
    .desktop-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 60px 0;
        gap: 50px;
    }
    .hero-text {
        flex: 1;
    }
    .hero-sub {
        font-size: 20px;
        color: #666;
        display: block;
        margin-bottom: 10px;
    }
    .hero-text h1 {
        font-size: 80px;
        margin: 0 0 10px 0;
        letter-spacing: -2px;
        -webkit-text-stroke: 1.25px #ffffff;
    }
    .hero-text p {
        font-size: 20px;
        color: #555;
        margin-bottom: 30px;
    }
    .hero-btn {
        display: inline-block;
        background: #fff1f7;
        padding: 15px 40px;
        color: #333;
        border-radius: 30px;
        font-size: 18px;
        border: 1px solid #000;
        transition: all 0.3s;
    }
    .hero-btn:hover { transform: scale(1.05); background: #ffe3ee; }
    .hero-image {
        flex: 1;
        height: 400px;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 15px 40px rgba(255, 180, 200, 0.2);
    }
    .hero-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ===== STATS ===== */
    .desktop-stats {
        display: flex;
        justify-content: center;
        gap: 40px;
        padding: 40px 0;
        border-top: 1px solid #ffd8ea;
        border-bottom: 1px solid #ffd8ea;
        margin-bottom: 60px;
    }
    .stat-box {
        text-align: center;
        font-size: 18px;
        color: #555;
    }
    .stat-box span {
        display: block;
        font-size: 36px;
        font-weight: bold;
        color: #000;
        margin-bottom: 5px;
    }

    /* ===== SECTIONS ===== */
    .desktop-section {
        padding: 60px 0;
    }
    .section-title {
        text-align: center;
        font-size: 48px;
        margin-bottom: 50px;
        letter-spacing: -1px;
    }

    .desktop-grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .card {
        text-align: center;
        padding: 30px;
        border-radius: 20px;
        background: #fcf9fa;
        transition: transform 0.3s;
    }
    .card:hover { transform: translateY(-5px); }
    .card-number {
        font-size: 40px;
        margin-bottom: 10px;
    }
    .card h3 { font-size: 22px; margin-bottom: 10px; }
    .card p { color: #666; line-height: 1.5; }

    /* ===== LOCATION ===== */
    .location-content {
        display: flex;
        align-items: center;
        gap: 50px;
    }
    .location-text { flex: 1; font-size: 18px; line-height: 1.6; color: #444; }
    .location-text strong { display: block; margin-top: 20px; font-size: 20px; color: #000; }
    .location-image { flex: 1; height: 300px; border-radius: 20px; overflow: hidden; }
    .location-image img { width: 100%; height: 100%; object-fit: cover; }

    /* ===== BOUQUETS ===== */
    .bouquet-grid {
        gap: 40px;
    }
    .bouquet-card {
        background: #fcf9fa;
        border-radius: 20px;
        padding: 20px;
        text-align: center;
        transition: all 0.3s;
        border: 1px solid #ffd8ea;
    }
    .bouquet-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
    .bouquet-img {
        height: 250px;
        border-radius: 15px;
        background-size: cover;
        background-position: center;
        margin-bottom: 15px;
    }
    .bouquet-card h3 { font-size: 22px; margin-bottom: 5px; }
    .bouquet-card p { color: #666; font-size: 15px; margin-bottom: 15px; }
    .price { font-size: 28px; font-weight: bold; margin-bottom: 15px; }
    .desktop-btn-small {
        display: inline-block;
        background: #fff1f7;
        padding: 8px 30px;
        color: #333;
        border-radius: 30px;
        border: 1px solid #000;
        transition: all 0.3s;
    }
    .desktop-btn-small:hover { background: #ffe3ee; transform: scale(1.05); }

    /* ===== REVIEWS ===== */
    .review-card {
        text-align: center;
        background: #fff;
        padding: 30px;
        border-radius: 20px;
        border: 1px solid #ffd8ea;
        transition: all 0.3s;
    }
    .review-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
    .review-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        margin: 0 auto 15px;
        border: 3px solid #fff1f7;
    }
    .review-card h4 { font-size: 20px; margin-bottom: 10px; }
    .review-card p { color: #666; line-height: 1.5; font-size: 15px; }

    /* ===== FOOTER ===== */
    .desktop-footer {
        text-align: center;
        padding: 60px 0 20px 0;
        border-top: 1px solid #ffd8ea;
        margin-top: 60px;
    }
    .desktop-footer h2 { font-size: 40px; margin-bottom: 5px; }
    .desktop-footer .tagline { font-size: 18px; color: #666; margin-bottom: 30px; }
    .footer-details {
        display: flex;
        justify-content: center;
        gap: 50px;
        font-size: 16px;
        color: #444;
        margin-bottom: 40px;
    }
    .footer-copy {
        color: #ffd8ea;
        font-size: 14px;
    }
}