/* ============================================================
   Billion Landing Page — Pixel-perfect from TSX
   Canvas: 448px × 6290px — ALL elements position:absolute
   Coordinates = phone-frame origin (except Part01 children)
   ============================================================ */

/* ── LOCAL FONTS ── */
@font-face {
  font-family: 'Zain';
  src: url('../honey-herbs-assets/fonts/Zain-VF.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px; overflow-x:hidden}

/* Default body font: Cairo */
body{
  font-family:'Cairo',sans-serif;
  background:#e8e8e8;
  display:flex;justify-content:center;align-items:flex-start;
  min-height:100vh;
  margin:0;padding:0;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}

.page-outer{display:flex;justify-content:center;align-items:flex-start;width:100%}

/* Responsiveness Fix - Correct Breakpoints */
@media (max-width: 1023px) {
  .s-desktop-version { display: none !important; }
  .page-outer { 
    display: flex !important;
    width: 100%;
  }
  .mct-show-desktop-only { display: none !important; }
  .mct-show-mobile-only { display: block !important; }
}

@media (min-width: 1024px) {
  .s-desktop-version { 
    display: block !important; 
    width: 100%;
    max-width: none !important;
    background: #fdfdfd;
    min-height: 100vh;
    overflow-x: hidden;
  }
  .page-outer { display: none !important; }
  body { display: block !important; background: #fff !important; overflow: auto !important; }
  .mct-show-desktop-only { display: block !important; }
  .mct-show-mobile-only { display: none !important; }
}

/* ── SECTION WRAPPERS ── */
.s-hero { position:absolute; left:0; top:300px; width:448px; }
.s-divider { position:absolute; left:0; top:1200px; width:448px; }
.s-problem { position:absolute; left:0; top:1450px; width:448px; }
.s-benefit { position:absolute; left:0; top:2450px; width:448px; }
.s-composition { position:absolute; left:0; top:3050px; width:448px; }
.s-benefits-body { position:absolute; left:0; top:4550px; width:448px; }
.s-before-form { position:absolute; left:0; top:5105px; width:448px; }
.s-footer {
  position:absolute;
  left:0;
  top:6550px;
  width:448px;
  height:150px;
  background:transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  overflow: visible;
  padding: 0;
  margin: 0;
}
.s-footer .ft-follow{
  font-family:'Cairo',sans-serif;font-weight:700;font-size:24px;
  line-height:1.2;color:#ff8900;text-align:center;
  margin: 0;
  width: 100%;
}
.s-footer .ft-icons{
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  direction: ltr;
}
.s-footer .ft-icon{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  color:#ff8900;
  transition: transform 0.3s ease;
}
.s-footer .ft-icon:hover {
  transform: translateY(-3px) scale(1.1);
}
.s-footer .ft-icon svg{ width: 32px; height: 32px; color:#ff8900; display:block }
.s-footer .ft-copy{
  font-family:'Cairo',sans-serif;font-weight:400;font-size:16px;
  line-height:1.5;color:#ff8900;text-align:center;
  opacity: 0.7;
  margin: 0;
}
/* ── PHONE FRAME ── */
.phone-frame{
  position:relative;
  width:448px;height:6700px;
  background:#fff;overflow:hidden;flex-shrink:0
}

/* ══════════════════════════════════════
   HEADER  left:0 top:13 w:448 h:73
   children relative to header
══════════════════════════════════════ */
.s-header{
  position:absolute;left:0;top:13px;
  width:448px;height:73px;
  background:#1a1a1a;
  z-index:99;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 34px;
}

.s-hdr-logo-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 176px;
  height: 176px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  z-index: 10;
}

.s-hdr-logo{
  width: 100%;
  max-width: 130px;
  height: auto;
  display: block;
  object-fit: contain;
}
.s-hdr-cart{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 40px;
  cursor: pointer;
  color: #ff8900;
}

/* ══════════════════════════════════════
   PART 01 — real box
   left:0 top:-220 w:448 h:1475
   All children coords RELATIVE to Part01
══════════════════════════════════════ */
.s-part01{
  position:absolute;left:0;top:-220px;
  width:448px;height:1475px;overflow:hidden
}

/* WA bg image: left:-2 top:-3 w:483 h:1210 */
.p01-wa-wrap{
  position:absolute;left:-2px;top:-3px;
  width:483px;height:1210px;overflow:hidden;pointer-events:none
}
.p01-wa-img{
  position:absolute;
  width:153.04%;height:74.82%;
  left:-26.35%;top:18.59%;
  max-width:none;object-fit:cover
}
/* Orange glow: left:-151 top:187 size:474 */
.p01-orange-glow{
  position:absolute;left:-151px;top:187px;
  width:474px;height:474px;
  border-radius:50%;background:rgba(255,157,0,.44);pointer-events:none
}
/* Title div: left:18 top:350 w:378
   text-shadow:2px 4px 4px rgba(0,0,0,.25) on container */
.p01-title{
  position:absolute;left:18px;top:350px;width:378px;
  text-align:right;direction:rtl;
  text-shadow:2px 4px 4px rgba(0,0,0,.25)
}
.p01-title-text{
  font-family:'Cairo',sans-serif;font-weight:700;font-size:31px;
  line-height:1.368;color:#110f00;letter-spacing:-1.86px
}
/* Subtitle: -translateX(-100%) from left:396 → right:52px, top:474 */
.p01-subtitle{
  position:absolute;right:52px;top:474px;
  white-space:nowrap;
  font-family:'Cairo',sans-serif;font-weight:400;font-size:27px;
  line-height:normal;color:#1f1f1f;
  text-shadow:2px 4px 4px rgba(0,0,0,.25)
}
/* Gradient: left:-32 top:865 w:480 h:408 */
.p01-gradient{
  position:absolute;left:-32px;top:865px;
  width:480px;height:408px;
  background:linear-gradient(to bottom,rgba(217,217,217,0) 0%,#fff 53.804%);
  pointer-events:none
}
/* Description: centered, top:954, w:356 → left=(448-356)/2=46 */
.p01-desc{
  position:absolute;left:46px;top:954px;width:356px;
  font-family:'Cairo',sans-serif;font-weight:800;font-size:26px;
  line-height:1.57;color:#363636;letter-spacing:-.78px;
  text-align:center;direction:rtl
}
/* Checklist: left:43 top:1300 w:344 */
.p01-checklist{
  position:absolute;left:43px;top:1300px;width:344px;
  text-align:right;direction:rtl
}
.p01-checklist p{
  font-family:'Cairo',sans-serif;font-weight:800;font-size:20px;
  line-height:1.57;color:#363636;letter-spacing:-.6px
}
/* Intro text: centered, top:1017, line-height:1 */
.p01-intro{
  position:absolute;left:50%;top:1017px;
  transform:translateX(-50%);
  text-align:center;white-space:nowrap
}
.p01-intro p{
  font-family:'Zain',sans-serif;font-weight:400;font-size:24px;
  line-height:1;color:#8d008b;margin:0
}

/* ══════════════════════════════════════
   HERO ELEMENTS — phone-frame coords
   (SectionHero is display:contents)
══════════════════════════════════════ */

/* Yellow blur ellipse:
   inset 13.4% 68.53% 81.4% -45.54% of 449×6291
   top:843 left:-204.5 w:345.8 h:327 */
.hero-blur{
  position:absolute;left:-204.5px;top:543px;
  width:345.8px;height:327px;
  mix-blend-mode:multiply;pointer-events:none;overflow:visible
}
.hero-blur-inner{
  position:absolute;
  top:-21.28%;left:-20.17%;right:-20.17%;bottom:-21.28%
}

/* CTA Green (Cta default):
   left-[calc(50%-110px)] = 114.5, translateX(-50%) of 136 = -68 → left:46.5
   top:350 w:136 h:40 */
.cta-green{
  position:absolute;left:46.5px;top:50px;
  width:136px;height:40px;
  border-radius:22px;display:block;cursor:pointer;background:transparent
}
.cta-green-svg{
  position:absolute;
  left:-2.94%;right:-2.94%;top:0;bottom:-20%;
  width:108.88%;height:120%
}
.cta-green span{
  position:absolute;left:12px;top:10px;
  font-family:'Zain',sans-serif;font-weight:800;font-size:17px;
  color:#fff;white-space:nowrap;line-height:normal
}

/* CTA Brown (Cta1): left:227 top:999 w:160 h:42 */
.cta-brown{
  position:absolute;left:227px;top:699px;
  width:160px;height:42px;
  border-radius:42px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;background:transparent;overflow:visible
}
.cta-brown-bg{
  position:absolute;top:-1.06%;left:0;right:0;bottom:-1.06%;
  border-radius:41px;background:#716159;
  box-shadow:0 4px 4px rgba(0,0,0,.25)
}
.cta-brown span{
  position:relative;z-index:1;
  font-family:'Zain',sans-serif;font-weight:800;font-size:17px;
  color:#fff;white-space:nowrap;line-height:normal
}

/* ══════════════════════════════════════
   DIVIDER — phone-frame coords
══════════════════════════════════════ */

/* Food images: left:-30 top:1329.89 size:283.226 */
.div-food-l,.div-food-r{
  position:absolute;top:129.89px;
  width:283.226px;height:283.226px;
  overflow:hidden;pointer-events:none
}
.div-food-l{left:-30px}
.div-food-r{left:195.77px}
.div-food-l img,.div-food-r img{
  position:absolute;width:100.08%;height:123.68%;top:-23.58%;object-fit:cover
}
.div-food-r img{left:-0.08%}

/* Divider block: left:0 top:1212 w:448 h:210 [real box] */
.div-block{position:absolute;left:0;top:12px;width:448px;height:210px}

/* Stripe: inset 16.19% → top:34 bottom:34 h:142 */
.div-stripe{
  position:absolute;top:34px;left:0;right:0;bottom:34px;background:#efa118
}
/* Text: inset 41.9% 3.57% 16.19% 3.35% of 448×210
   top:88 left:15 right:16 bottom:34 */
.div-text{position:absolute;top:58px;left:15px;right:16px;bottom:34px}
.div-text p{
  font-family:'Cairo',sans-serif;font-weight:700;font-size:31px;
  line-height:44px;color:#fff;text-align:right;direction:rtl
}

/* Energy draining icon: left:30 top:1209 size:135 */
.div-energy{position:absolute;left:30px;top:-6px;width:130px;height:130px}
.div-energy img{width:115px;height:100%;object-fit:contain}

/* ══════════════════════════════════════
   PROBLEM SECTION — phone-frame coords
══════════════════════════════════════ */

/* Blurred bg: left:-520 top:1664 size:1423 blur:3.8px */
.prob-blur-bg{
  position:absolute;left:-520px;top:214px;
  width:1423px;height:1423px;
  filter:blur(3.8px);pointer-events:none
}
.prob-blur-bg img{width:100%;height:100%;object-fit:cover}

/* Masked circle img: left:-388.49 top:1539.42 size:784.053
   mask: circle r=298 at position:100.494px 82.584px, size:596×596 */
.prob-masked{
  position:absolute;left:-388.49px;top:89.42px;
  width:784.053px;height:784.053px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 596 596'%3E%3Ccircle cx='298' cy='298' r='298' fill='white'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 596 596'%3E%3Ccircle cx='298' cy='298' r='298' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size:596px 596px;mask-size:596px 596px;
  -webkit-mask-position:100.494px 82.584px;mask-position:100.494px 82.584px;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  pointer-events:none
}
.prob-masked img{width:100%;height:100%;object-fit:cover}

/* Problem header: left:278 top:1511 w:143 h:62 */
.prob-hdr{
  position:absolute;left:278px;top:61px;width:143px;height:62px;
  font-family:'Cairo',sans-serif;font-weight:700;font-size:26px;
  line-height:1.33;color:#363636;text-align:right;direction:rtl
}

/* Problem icons (shared) */
.prob-icon{position:absolute}
.prob-icon img{width:100%;height:100%;object-fit:cover}

/* Problem labels (shared) */
.prob-lbl{
  position:absolute;
  font-family:'Cairo',sans-serif;font-weight:500;font-size:20px;
  line-height:1.872;color:#363636;direction:rtl
}

/* Color blend circle: left:-248 top:2330 size:456 mix-blend:color */
.prob-color-blend{
  position:absolute;left:-248px;top:880px;
  width:456px;height:456px;
  mix-blend-mode:color;pointer-events:none
}

/* Energetic man: left:212 top:2393 size:476 */
.prob-energetic{
  position:absolute;left:212px;top:943px;
  width:476px;height:476px;overflow:hidden;pointer-events:none
}
.prob-energetic img{
  position:absolute;width:100%;height:100%;object-fit:cover;top:-4.24%
}

/* Yellow reason bg:
   inset 33.17% -13.69% 59.67% -2.46% of 449×6291
   top:2087 left:-11 w:521.5 h:452 */
.prob-reason-bg{
  position:absolute;left:-11px;top:637px;
  width:521.5px;height:452px;pointer-events:none
}
.prob-reason-svg{position:absolute;inset:0;width:100%;height:100%}

/* Reason text: left:42 top:2147 w:368 */
.prob-reason-txt{
  position:absolute;left:42px;top:697px;width:368px;
  direction:rtl;text-align:right
}
.prob-reason-txt p{
  font-family:'Cairo',sans-serif;font-weight:700;font-size:25px;
  line-height:1.872;color:#2b2b2b;margin:0
}

/* ══════════════════════════════════════
   BENEFIT SECTION — phone-frame coords
══════════════════════════════════════ */

/* Orange ellipse: left:80.2 top:2642 size:228.798 fill:#FF8900 */
.ben-ellipse{
  position:absolute;left:80.2px;top:192px;
  width:228.798px;height:228.798px;
  border-radius:50%;background:#FF8900;pointer-events:none
}

/* Product rotated: left:-28 top:2591 w:323.328 h:358.111 */
.ben-product-wrap{
  position:absolute;left:-28px;top:141px;
  width:323.328px;height:358.111px;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none
}
/* rotate(22.9deg) skewX(0.03deg); inner w:227.563 h:292.567 */
.ben-product-inner{
  transform:rotate(22.9deg) skewX(0.03deg);
  width:227.563px;height:292.567px;
  overflow:hidden;flex-shrink:0;position:relative
}
.ben-product-inner img{
  position:absolute;width:109.67%;height:100%;
  left:-2.75%;top:-4.07%;max-width:none;object-fit:cover
}

/* "شو بتستفيد / من": TSX uses leading-[0] on container, dir=auto on p, right edge at 412px */
.ben-q{
  position:absolute;right:37px;top:338px;
  white-space:nowrap;text-align:right;
  line-height:0
}
.ben-q p{
  font-family:'Zain',sans-serif;font-weight:800;font-size:38px;
  line-height:1.07;color:#fff;letter-spacing:-1.14px;
  text-shadow:-5px 8px 4px rgba(0,0,0,.25);margin:0
}

/* "بيليون ؟": left:106 top:2874 w:306 h:128 */
.ben-billion{
  position:absolute;left:106px;top:400px;width:306px;height:128px;
  font-family:'Zain',sans-serif;font-weight:800;font-size:49px;
  line-height:1.872;color:#fff;letter-spacing:-1.47px;
  text-shadow:-5px 8px 4px rgba(0,0,0,.25);
  text-align:right;direction:rtl
}

/* List: -translateX(-100%) from left:369 → right:80
   top:2931 whitespace-nowrap
   Container: leading-[0] = line-height:0
   Each p: leading-[1.24] + whitespace-pre + dir=ltr (exact TSX match) */
.ben-list{
  position:absolute;right:80px;top:490px;
  white-space:nowrap;text-align:right;
  line-height:0
}
.ben-list p{
  font-family:'Zain',sans-serif;font-weight:400;font-size:26px;
  line-height:1.24;color:#000;letter-spacing:-.96px;margin:0
}

/* Yellow bullets: left:374 size:16 fill:#E7C700 */
.ben-dot{
  position:absolute;left:374px;
  width:13px;height:13px;border-radius:50%;background:#E7C700
}

/* Honey star graphic (Layer component):
   Inner div: inset 40.48% 57.79% 57.24% 0 of phone-frame
   top:2546.39 left:0 width:189.51 height:144.18 */
.ben-honey{
  position:absolute;left:0;top:96px;
  width:189.51px;height:144.18px;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none
}
/* hypot(22.8823*1.8951, 81.2176*1.4418)=124.82  hypot(77.1177*1.8951,-18.7824*1.4418)=148.61 */
.ben-honey-inner{
  transform:rotate(-10.48deg) skewX(9.87deg);
  width:148.61px;height:124.82px;flex-shrink:0
}

/* Ghost CTA (reusable): transparent, inset shadow, orange text */
.cta-ghost{
  position:absolute;
  width:160px;height:42px;border-radius:42px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;background:transparent;
  box-shadow:inset 0 4px 4px rgba(255,255,255,.52)
}
.cta-ghost span{
  font-family:'Zain',sans-serif;font-weight:800;font-size:17px;
  color:#ff9d00;line-height:normal
}

/* ══════════════════════════════════════
   COMPOSITION  — phone-frame coords
══════════════════════════════════════ */

/* Bee/lion bg: left:-2 top:3076 w:486 h:1310 */
.comp-bee-bg{
  position:absolute;left:-2px;top:-100px;
  width:486px;height:1480px;overflow:hidden;pointer-events:none
}
.comp-bee-bg img{
  position:absolute;width:100%;height:159.45%;top:-.03%;object-fit:contain
}

/* Title: left:13 top:3635 w:407 h:68
   TSX: h-[68px] w-[407px] font-size:50px tracking:-1.5px
   Force single line to match React/Zain-VF rendering */
.comp-title{
  position:absolute;left:13px;top:85px;width:407px;height:68px;
  font-family:'Zain',sans-serif;font-weight:400;font-size:34px;
  line-height:1.24;color:#e6e6e6;text-align:right;direction:rtl;
  letter-spacing:-1.5px;
  white-space:nowrap;overflow:hidden
}

/* Sub-CTA ghost btn is handled by .cta-ghost in HTML via inline style */

/* Diamond: shared class, position via inline-style in HTML */
.comp-dia{
  position:absolute;width:132px;height:132px;
  display:flex;align-items:center;justify-content:center
}
.comp-dia::before{
  content:'';position:absolute;
  width:93.338px;height:93.338px;
  background:#d9d9d9;transform:rotate(45deg)
}

/* Composition images */
.comp-img{position:absolute;overflow:hidden}
.comp-img img{
  width:100%;height:100%;object-fit:cover;
  position:relative;z-index:1
}

/* Ingredient name: shared — TSX uses h-[30px] for RJ/Gin/Honey, h-[61px] for Arginine */
.comp-ing-name{
  position:absolute;width:229px;
  font-family:'Zain',sans-serif;font-weight:400;font-size:21px;
  line-height:1.24;color:#e6e6e6;letter-spacing:-.66px;
  text-align:right;direction:rtl;
  overflow:hidden
}
/* Arginine name contains name+  → h:61px */
.comp-ing-name.h61{ height:61px }
/* RJ/Gin/Honey name → h:30px */
.comp-ing-name.h30{ height:30px }
/* Ingredient desc (Arginine + Honey): TSX h-[61px] whitespace-pre-wrap */
.comp-ing-desc{
  position:absolute;width:229px;
  height:61px
}
.comp-ing-desc p{
  font-family:'Zain',sans-serif;font-weight:400;font-size:19px;
  line-height:1.24;color:#e6e6e6;letter-spacing:-.66px;
  text-align:right;direction:rtl;margin:0;
  white-space:pre-wrap
}
/* Ingredient list (RJ + Ginseng): TSX h-[61px] leading-[0] list-disc
   No overflow:hidden in TSX so items show beyond 61px height */
.comp-ing-list{
  position:absolute;list-style:disc;padding-right:33px;direction:rtl;
  line-height:0;height:61px
}
.comp-ing-list li{
  font-family:'Zain',sans-serif;font-weight:400;font-size:19px;
  line-height:1.24;color:#e6e6e6;letter-spacing:-.66px;
  text-align:right
}

/* "15" number: left:237 top:4189 w:163 h:182 */
.comp-num15{
  position:absolute;left:237px;top:39px;
  width:163px;height:182px;
  font-family:'Zain',sans-serif;font-weight:900;font-size:152px;
  line-height:1;color:#ff9d00;letter-spacing:-5.94px;
  text-shadow:-1px 2px 0 #fff;
  text-align:right;direction:rtl
}

/* Glow overlay: left:171 top:4209 size:166 mix-blend:overlay */
.comp-glow{
  position:absolute;left:171px;top:59px;
  width:166px;height:166px;mix-blend-mode:overlay;pointer-events:none
}

/* Sachet label: left:66 top:4246 w:163 h:67 */
.comp-sachet-lbl{
  position:absolute;left:28px;top:59px;
  font-family:'Zain',sans-serif;font-weight:900;font-size:34px;
  line-height:1.24;color:#ff9d00;letter-spacing:-1.02px;
  text-shadow:-1px 2px 0 #fff;
  text-align:right;direction:rtl
}

/* Food dividers: left:-31/195 top:4383 w:283 h:229 */
.comp-food{
  position:absolute;top:1333px;width:283px;height:229px;
  overflow:hidden;pointer-events:none
}
.comp-food img{
  position:absolute;width:100.08%;height:123.68%;top:-23.58%;object-fit:cover
}

/* ══════════════════════════════════════
   BENEFITS IN BODY — phone-frame coords
══════════════════════════════════════ */

/* Title: left:2 top:4560 w:412 h:68 */
.bib-title{
  position:absolute;left:2px;top:60px;width:412px;height:68px;
  font-family:'Zain',sans-serif;font-weight:400;font-size:50px;
  line-height:1.24;color:#312924;text-align:right;direction:rtl;
  letter-spacing:-1.5px
}
/* Text: left:29 top:4698 w:369 h:327 */
.bib-text{
  position:absolute;left:29px;top:198px;width:369px;height:327px;
  direction:rtl;text-align:right
}
.bib-text p{
  font-family:'Zain',sans-serif;font-weight:400;font-size:22px;
  line-height:1.24;color:#373737;letter-spacing:-.66px;margin:0
}

/* ══════════════════════════════════════
   BEFORE FORM — phone-frame coords
══════════════════════════════════════ */

/* Orange circle: left:-162 top:5064 size:764 fill:#EFA118 */
.bf-circle{
  position:absolute;left:-162px;top:64px;
  width:764px;height:764px;
  border-radius:50%;background:#EFA118;pointer-events:none
}

/* Purple CTA: left:139 top:5043 w:160 h:42 */
.bf-cta{
  position:absolute;left:139px;top:43px;
  width:160px;height:42px;border-radius:42px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;background:transparent;overflow:hidden
}
.bf-cta-bg{
  position:absolute;top:-1.06%;left:0;right:0;bottom:-1.06%;
  border-radius:41px;background:rgba(128,4,134,.59);
  box-shadow:0 4px 4px rgba(0,0,0,.25)
}
.bf-cta span{
  position:relative;z-index:1;
  font-family:'Zain',sans-serif;font-weight:800;font-size:17px;
  color:#fff;line-height:normal
}

/* Large text (usage title + testimonial): positioned via inline style */
.bf-big-txt{
  position:absolute;width:311px;height:203px;
  font-family:'Zain',sans-serif;font-weight:400;font-size:33px;
  line-height:1.24;color:#312924;text-align:center;direction:rtl;
  letter-spacing:-1.5px
}

/* Usage list: bullets tight against text */
.bf-list{
  position:absolute;left:0;top:235px;width:448px;height:84px;
  direction:rtl;
  display:flex;flex-direction:column;align-items:center;gap:4px
}
.bf-list li{
  font-family:'Zain',sans-serif;font-weight:400;font-size:22px;
  line-height:1.24;color:#373737;letter-spacing:-.66px;
  display:flex;align-items:center;gap:8px;direction:rtl
}
.bf-list li::before{
  content:'•';
  color:#373737;font-size:22px;flex-shrink:0
}

/* CTA label: left:40.5 top:5616 w:369 h:30 */
.bf-cta-label{
  position:absolute;left:40.5px;top:616px;width:369px;height:30px;
  font-family:'Zain',sans-serif;font-weight:400;font-size:18px;
  line-height:1.24;color:#373737;letter-spacing:-.66px;
  text-align:center;direction:rtl
}

/* ══════════════════════════════════════
   ORDER FORM — matching MCT OIL lindex.html
══════════════════════════════════════ */
.nj-order-section{
  position:absolute;left:0;top:5762px;
  width:448px;
  display:flex;justify-content:center
}
.nj-form-container{
  width:100%;padding:0 16px
}
.nj-order-form{
  background:#fff;border-radius:16px;
  box-shadow:0 4px 24px rgba(0,0,0,0.10);
  overflow:hidden;direction:rtl
}
.nj-order-header{
  background:linear-gradient(135deg,#716159,#5a4e47);
  padding:20px 20px 16px;text-align:center
}
.nj-order-title{
  font-family:'Cairo',sans-serif;font-weight:700;font-size:22px;
  color:#fff;margin-bottom:4px
}
.nj-order-lead{
  font-family:'Cairo',sans-serif;font-size:13px;
  color:rgba(255,255,255,0.8)
}
.nj-order-card{
  padding:16px;display:flex;flex-direction:column;gap:12px
}

/* Fields */
.nj-field-wrap{
  display:flex;flex-direction:column;gap:5px
}
.nj-field-label{
  font-family:'Cairo',sans-serif;font-weight:600;font-size:13px;
  color:#444;direction:rtl
}
.nj-form-input{
  width:100%;padding:10px 12px;
  font-family:'Cairo',sans-serif;font-size:14px;color:#333;
  background:#f8f8f8;border:1.5px solid #e2e2e2;border-radius:8px;
  outline:none;direction:rtl;appearance:none;-webkit-appearance:none;
  transition:border-color .2s
}
.nj-form-input:focus{ border-color:#716159;background:#fff }
.nj-form-input::placeholder{ color:#bbb }

/* Package selector */
.nj-field-wrap--packages{ gap:8px }
.nj-pkg-selector{
  display:flex;flex-direction:column;gap:8px
}
.nj-pkg-option{
  cursor:pointer
}
.nj-pkg-option input[type="radio"]{
  display:none
}
.nj-pkg-box{
  border:2px solid #e2e2e2;border-radius:10px;
  padding:10px 14px;background:#f8f8f8;
  transition:all .2s;cursor:pointer
}
.nj-pkg-box:hover{
  border-color:#716159;background:#f9f8f7
}
.nj-pkg-selected,
.nj-pkg-option input[type="radio"]:checked + .nj-pkg-box{
  border-color:#716159;background:#f9f8f7;
  box-shadow:0 0 0 3px rgba(113,97,89,0.10)
}
.nj-pkg-box-body{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  flex-wrap:wrap;direction:rtl
}
.nj-pkg-qty{
  font-family:'Cairo',sans-serif;font-weight:700;font-size:14px;color:#222
}
.nj-pkg-price{
  font-family:'Cairo',sans-serif;font-weight:800;font-size:16px;color:#716159
}
.nj-pkg-badge{
  font-family:'Cairo',sans-serif;font-size:11px;font-weight:600;
  background:#ff8900;color:#fff;padding:2px 8px;border-radius:20px
}
.nj-pkg-badge.saving{
  background:#07b32e
}

/* Price summary */
.nj-price-summary{
  background:#f0f0f0;border-radius:10px;padding:12px 14px;
  display:flex;flex-direction:column;gap:6px;direction:rtl
}
.nj-total-line{
  display:flex;justify-content:space-between;align-items:center
}
.nj-total-label{
  font-family:'Cairo',sans-serif;font-size:14px;color:#555
}
.nj-total-val{
  font-family:'Cairo',sans-serif;font-weight:800;font-size:18px;color:#716159
}
.nj-delivery-line{
  display:flex;gap:6px;align-items:center;
  font-family:'Cairo',sans-serif;font-size:13px;color:#07b32e
}

/* Submit */
.nj-submit-wrap{ padding:0 0 4px }
.nj-submit-btn{
  width:100%;padding:14px;
  background:linear-gradient(135deg,#716159,#5a4e47);
  color:#fff;font-family:'Cairo',sans-serif;font-weight:700;font-size:16px;
  border:none;border-radius:10px;cursor:pointer;
  box-shadow:0 4px 12px rgba(113,97,89,0.35);
  transition:transform .1s, box-shadow .1s;
  direction:rtl
}
.nj-submit-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(113,97,89,0.45)
}
.nj-submit-btn:active{ transform:translateY(0) }


/* ══════════════════════════════════════
   RESPONSIVE SCALE
══════════════════════════════════════ */
/* Scaling handled by JS */

/* ══════════════════════════════════════
   DRAWER / SLIDE MENU
══════════════════════════════════════ */
.drh-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.drh-overlay.active {
  opacity: 1;
  visibility: visible;
}

.drh-menu-drawer {
  position: fixed;
  top: 0;
  right: -320px;
  width: 320px;
  max-width: 100%;
  height: 100vh;
  background: #1a1a1a;
  z-index: 9999;
  box-shadow: -10px 0 50px rgba(0, 0, 0, 0.4);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
  padding: 60px 40px;
  color: #fff;
  visibility: hidden;
}
.drh-menu-drawer.active {
  right: 0;
  visibility: visible;
}

.drawer-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 50px;
}
.drawer-close {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.drawer-close:hover { background: rgba(255, 255, 255, 0.1); }

.drawer-logo {
  max-width: 120px;
  height: auto;
  margin-right: 20px;
}

/* Reference Navigation Links Styles */
.drh-nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.drh-nav-links li a {
  color: #fff;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 500;
  transition: all 0.2s;
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-family: 'Cairo', sans-serif;
}
.drh-nav-links li a:hover,
.drh-nav-links li a.active {
  color: #ff8900;
  padding-right: 10px;
}

.drawer-footer {
  margin-top: auto;
  font-family: 'Cairo', sans-serif;
  font-size: 14px;
  color: #666;
  text-align: center;
}

/* ══════════════════════════════════════
   TOAST NOTIFICATIONS
══════════════════════════════════════ */
.toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  background: #333;
  color: #fff;
  padding: 12px 24px;
  border-radius: 50px;
  font-family: 'Cairo', sans-serif;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  pointer-events: auto;
  border-right: 4px solid #ff8900;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════
   DESKTOP DESIGN SYSTEM
 ══════════════════════════════════════ */
.dt-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 5%;
  direction: rtl;
}

.dt-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.dt-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.dt-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.dt-sec-title {
  font-family: 'Zain', sans-serif;
  font-size: 48px;
  color: #1e1e1e;
  margin-bottom: 30px;
  line-height: 1.2;
}

.dt-btn-cta {
  display: inline-block;
  background: #716159;
  color: #fff;
  padding: 16px 40px;
  border-radius: 50px;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  font-size: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(113,97,89,0.3);
}
.dt-btn-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(113,97,89,0.4);
}

/* Header */
.dt-header {
  background: #1a1a1a;
  height: 80px;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  overflow: hidden;
}

.dt-hdr-logo-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 176px;
  height: 176px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  z-index: 10;
}

.dt-hdr-logo {
  width: 100%;
  max-width: 130px;
  height: auto;
  display: block;
  object-fit: contain;
}

.dt-hdr-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  color: #ff8900;
}

/* Hide old nav if it still exists */
.dt-nav { display: none !important; }

/* Hero */
.dt-hero {
  padding: 100px 0;
  background: linear-gradient(135deg, #1e1e1e 0%, #333 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.dt-hero::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: rgba(253, 198, 94, 0.1);
  filter: blur(80px);
  border-radius: 50%;
}
.dt-hero-title {
  font-family: 'Zain', sans-serif;
  font-size: 64px;
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.1;
  color: #fff;
}
.dt-hero-subtitle {
  font-family: 'Cairo', sans-serif;
  font-size: 24px;
  color: #ff8900;
  margin-bottom: 20px;
}
.dt-hero-desc {
  font-size: 18px;
  margin-bottom: 40px;
  color: #ccc;
  max-width: 500px;
}
.dt-hero-image img {
  width: 100%;
  max-width: 400px;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,0.5));
}

/* Problems */
.dt-problems { padding: 80px 0; background: #fff; }
.dt-card {
  background: #f9f9f9;
  padding: 40px;
  border-radius: 20px;
  text-align: center;
  border-bottom: 5px solid #ff8900;
  transition: transform 0.3s;
}
.dt-card:hover { transform: scale(1.05); }
.dt-card img { width: 100px; margin-bottom: 20px; }
.dt-card p { font-weight: 700; font-size: 20px; }

/* Benefits */
.dt-benefits { padding: 100px 0; background: #f4f4f4; }
.dt-ben-img,
.dt-ben-list{ min-width: 0; }
.dt-ben-img img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 520px;
  margin: 0 auto;
}
.dt-ben-img img {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.dt-check-list { list-style: none; margin: 30px 0; }
.dt-check-list li {
  font-size: 20px;
  margin-bottom: 15px;
  padding-right: 40px;
  position: relative;
}
.dt-check-list li::before {
  content: "✔";
  position: absolute;
  right: 0;
  color: #07b32e;
  font-weight: 900;
}

/* Composition */
.dt-composition { padding: 80px 0; }
.dt-comp-card {
  background: #fff;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  text-align: center;
}
.dt-comp-card img { width: 120px; height: 120px; object-fit: contain; margin-bottom: 20px; }
.dt-comp-card h4 { font-size: 24px; color: #716159; margin-bottom: 15px; font-family: 'Zain', sans-serif; font-weight: 700; }
.dt-comp-card p { font-size: 14px; color: #666; font-family: 'Cairo', sans-serif; }

/* Usage */
.dt-usage { padding: 80px 0; background: #716159; color: #fff; }
.dt-usage h3 { font-family: 'Zain', sans-serif; font-size: 36px; margin-bottom: 20px; }
.dt-list { list-style: none; }
.dt-list li { margin-bottom: 10px; padding-right: 30px; position: relative; font-size: 18px; }
.dt-list li::before { content: "•"; position: absolute; right: 0; color: #ff8900; font-size: 30px; line-height: 1; }
.dt-testimonial {
  font-style: italic;
  font-size: 24px;
  padding: 40px;
  background: rgba(255,255,255,0.1);
  border-radius: 20px;
  border-right: 5px solid #ff8900;
}

/* Tablet Adjustments */
@media (min-width: 1024px) and (max-width: 1280px) {
  .dt-container { max-width: 960px; }
  .dt-hero-title { font-size: 48px; }
  .dt-grid-4 { grid-template-columns: 1fr 1fr; }
}

/* Benefits layout safety (small desktop / tablet landscape) */
@media (min-width: 1024px) and (max-width: 1120px) {
  .dt-grid-2 { grid-template-columns: 1fr; }
  .dt-benefits .dt-ben-list { text-align: center; }
  .dt-check-list { margin: 24px auto; max-width: 720px; }
}

/* ══════════════════════════════════════
   DESKTOP FORM OVERRIDES
 ══════════════════════════════════════ */
.dt-order-section {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  padding: 80px 0;
  background: #f9f9f9;
}
.dt-order-section .nj-form-container {
  max-width: 600px;
  margin: 0 auto;
}

/* Footer Desktop/Tablet — same look as phone (.s-footer + .ft-copy) */
.dt-footer {
  padding: 40px 20px;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.dt-footer .ft-follow{
  font-family:'Cairo',sans-serif;font-weight:700;font-size:24px;
  color:#ff8900;text-align:center;
  margin: 0;
}
.dt-footer .ft-icons{
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}
.dt-footer .ft-icon{
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color:#ff8900;
  transition: transform 0.3s ease;
}
.dt-footer .ft-icon:hover {
  transform: translateY(-3px) scale(1.1);
}
.dt-footer .ft-icon svg{ width: 32px; height: 32px; display:block; color:#ff8900; }
.dt-footer .ft-copy {
  font-family:'Cairo',sans-serif;font-weight:400;font-size:16px;
  color:#ff8900;text-align:center;
  opacity: 0.7;
  margin: 0;
}

/* ══════════════════════════════════════
   PREMIUM DESKTOP REFINEMENTS (Rich Visuals)
 ══════════════════════════════════════ */

@media (min-width: 1024px) {
  
  /* Section Atmospheric Backgrounds */
  .dt-hero, .dt-problems, .dt-composition {
    position: relative;
    overflow: hidden;
  }

  .dt-hero-bg-inner, .dt-prob-bg, .dt-comp-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
  }
  .dt-hero-bg-inner img, .dt-prob-bg img, .dt-comp-bg img {
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0.15;
  }
  .dt-comp-bg img { opacity: 0.25; mix-blend-mode: overlay; }

  /* Hero Enhancements */
  .dt-hero { padding: 120px 0; background: #121212; color: #fff; }
  .flex-hero { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
  .dt-hero-content { flex: 1; position: relative; }
  .dt-hero-title { font-size: 72px; line-height: 1.1; margin-bottom: 25px; text-shadow: 0 4px 20px rgba(0,0,0,0.5); }
  .dt-hero-desc { font-size: 20px; line-height: 1.6; color: #bbb; max-width: 550px; margin-bottom: 45px; }

  .dt-glow-circle {
    position: absolute;
    top: -50px; right: -100px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(255,137,0,0.2) 0%, transparent 70%);
    filter: blur(40px);
    z-index: -1;
    animation: glow-pulse 6s ease-in-out infinite alternate;
  }
  @keyframes glow-pulse { from { opacity: 0.5; transform: scale(1); } to { opacity: 0.9; transform: scale(1.2); } }

  .dt-floating-img {
    max-width: 450px;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6));
    animation: float-main 4s ease-in-out infinite;
  }
  @keyframes float-main { 0%, 100% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(-25px) rotate(-1deg); } }

  /* Problems Section Enhancements */
  .dt-problems { background: #fdfdfd; padding: 100px 0; }
  .dt-prob-flex { display: flex; align-items: start; gap: 60px; z-index: 1; position: relative; }
  .dt-prob-text { flex: 1.4; }
  .dt-prob-visual { flex: 0.6; }
  .dt-problems-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-top: 40px; }
  
  .dt-prob-card {
    background: #fff;
    padding: 30px 20px;
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    transition: all 0.3s ease;
  }
  .dt-prob-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-color: #ff8900; }
  .dt-prob-card img { width: 80px; height: 80px; object-fit: contain; margin-bottom: 20px; }
  .dt-prob-card p { font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 18px; color: #333; }

  .dt-energetic-img { width: 100%; border-radius: 30px; }

  /* Composition Enhancements */
  .dt-composition { background: #1e1e1e; padding: 120px 0; color: #fff; }
  .dt-sec-title.white { color: #fff; text-align: center; margin-bottom: 60px; }
  
  .dt-comp-card {
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 40px 30px;
    border-radius: 24px;
    text-align: center;
    transition: background 0.3s;
  }
  .dt-comp-card:hover { background: rgba(255,255,255,0.07); }
  .dt-comp-icon { 
    width: 100px; height: 100px; margin: 0 auto 25px; 
    background: #fff; border-radius: 50%; padding: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  }
  .dt-comp-icon img { width: 100%; height: 100%; object-fit: contain; }
  .dt-comp-card h4 { font-size: 28px; color: #ff8900; margin-bottom: 15px; }
  .dt-comp-card p { font-size: 15px; color: #ccc; }

  /* Benefits Enhancements */
  .dt-benefits { background: #fdfdfd; padding: 100px 0; }
  .dt-ben-img { position: relative; }
  .dt-ben-ellipse {
    position: absolute; top: 10%; right: 10%; width: 80%; height: 80%;
    background: #FF8900; border-radius: 50%; filter: blur(60px); opacity: 0.15; z-index: -1;
  }
  .dt-check-list li {
    background: #fff; padding: 20px 25px; border-radius: 15px; margin-bottom: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); border-right: 4px solid #07b32e;
    font-weight: 600; font-size: 20px; transition: transform 0.2s;
  }
  .dt-check-list li:hover { transform: translateX(-10px); background: #f9fff9; }

  /* CTA Buttons Premium */
  .dt-btn-cta {
    background: linear-gradient(135deg, #716159 0%, #4a3e39 100%);
    border: none; color: #fff; font-size: 24px; padding: 20px 60px;
    box-shadow: 0 10px 30px rgba(113,97,89,0.4); text-transform: uppercase;
  }
  .dt-btn-secondary {
    display: inline-block; padding: 18px 45px; border-radius: 50px;
    border: 2px solid rgba(255,255,255,0.3); color: #fff;
    font-family: 'Cairo', sans-serif; font-weight: 700; margin-right: 20px;
    transition: all 0.3s;
  }
  .dt-btn-secondary:hover { border-color: #ff8900; color: #ff8900; }

  .dt-cta-group { display: flex; align-items: center; margin-top: 10px; }
  .dt-cta-center { text-align: center; margin-top: 50px; }
  .mt-60 { margin-top: 60px; }

  /* Testimonial Card */
  .dt-usage-testimonial { padding: 100px 0; background: #f4f4f4; }
  .dt-usage-card, .dt-quote-card {
    background: #fff; padding: 50px; border-radius: 30px; height: 100%;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
  }
  .dt-quote-card { border-right: 10px solid #716159; display: flex; flex-direction: column; justify-content: center; }
  .dt-quote-card p { font-size: 32px; font-style: italic; line-height: 1.4; color: #1e1e1e; margin-bottom: 20px; }
  .dt-quote-label { font-family: 'Cairo', sans-serif; font-weight: 700; color: #ff8900; font-size: 18px; }

}

/* ══════════════════════════════════════
   FULL-WIDTH FLUID POLISHES
 ══════════════════════════════════════ */
@media (min-width: 1024px) {
  .dt-hero-desc { max-width: 800px; }
  .dt-floating-img { max-width: 550px; }
  .dt-grid-2 { gap: 5vw; }
  .dt-prob-flex { gap: 4vw; }
  .dt-problems-grid { gap: 2vw; }
}

/* Testimonials Slider */
.dt-reviews { padding: 80px 0; background: #161616; position: relative; }
.dt-feedback-swiper { padding-bottom: 20px; overflow: visible !important; }

.dt-review-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 30px;
  border-radius: 20px;
  height: 100%;
  transition: transform 0.3s, background 0.3s;
}
.dt-review-card:hover { 
  background: rgba(255,255,255,0.05);
  transform: translateY(-5px);
}
.dt-rev-stars { color: #ff8900; font-size: 18px; margin-bottom: 15px; }
.dt-review-card p {
  color: #ddd;
  font-family: 'Cairo', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 20px;
}
.dt-rev-user {
  color: #fff;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  font-size: 16px;
}

.dt-swiper-nav { display: flex; gap: 12px; }
.dt-nav-btn {
  width: 44px; height: 44px;
  background: #1e1e1e;
  border: 1px solid #333;
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  position: static !important; /* Override Swiper default */
  margin: 0 !important;
}
.dt-nav-btn:after { display: none; } /* Hide Swiper icons */
.dt-nav-btn:hover { background: #ff8900; border-color: #ff8900; transform: scale(1.1); }