:root{
  --accent:#f59e0b;
  --drawer-bg: rgba(17,17,19,.92);
  --drawer-border: rgba(255,255,255,.10);
}

/* Mobile header + drawer */
.mobile-header{ display:none; }

@media (max-width: 768px){
  /* Hide desktop nav area if exists */
  .site-header .header-inner,
  .site-header .main-nav { display:none !important; }

  .mobile-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 14px;
    position:sticky;
    top:0;
    z-index:999;
    backdrop-filter:saturate(1.2) blur(10px);
    background:rgba(10,10,10,.55);
    border-bottom:1px solid rgba(255,255,255,.06);
  }

  .mobile-logo{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:#fff;
    min-width:0;
  }
  .mobile-logo-img{
    width:38px;
    height:38px;
    border-radius:10px;
    object-fit:cover;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.10);
  }
  .mobile-brand-text{ display:flex; flex-direction:column; line-height:1.05; }
  .mobile-brand-name{ font-weight:800; letter-spacing:.5px; font-size:14px; }
  .mobile-brand-sub{ font-weight:600; font-size:12px; opacity:.92; }

  /* Left side: login then menu (login before menu) */
  .mobile-actions{ display:flex; align-items:center; gap:10px; }
  .mobile-login{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:var(--accent);
    min-width:54px;
  }
  .mobile-login-ico{
    font-size:18px;
    line-height:1;
    filter:saturate(1.1);
  }
  .mobile-login-text{
    font-size:10px;
    font-weight:700;
    margin-top:3px;
  }

  .mobile-menu-toggle{
    width:44px;
    height:44px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    background:var(--drawer-bg);
    color:var(--accent);
    font-size:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 14px 40px rgba(0,0,0,.35);
    cursor:pointer;
  }

  .mobile-drawer-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:998;
  }

  .mobile-drawer{
    position:fixed;
    top:0;
    left:0; /* opens from left */
    height:100vh;
    width:min(320px, 86vw);
    background:var(--drawer-bg);
    border-right:1px solid var(--drawer-border);
    box-shadow: 20px 0 60px rgba(0,0,0,.55);
    z-index:999;
    transform:translateX(-105%);
    transition:transform .18s ease;
    padding:14px 14px 18px;
    backdrop-filter:saturate(1.2) blur(12px);
  }
  .mobile-drawer.is-open{ transform:translateX(0); }

  .drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 14px;
    border-bottom:1px solid rgba(255,255,255,.08);
    margin-bottom:12px;
  }
  .drawer-title{
    font-weight:800;
    font-size:14px;
    color:#fff;
  }
  

  .drawer-nav{ display:flex; flex-direction:column; gap:10px; padding-top:6px; }
  .drawer-link{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:12px 12px;
    border-radius:14px;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
  }
  .drawer-link:active{ transform:scale(.99); }
  .drawer-link-accent{
    background:rgba(245,158,11,.14);
    border-color:rgba(245,158,11,.35);
    color:var(--accent);
  }

  /* Lock scroll when drawer open */
  .drawer-open body{ overflow:hidden; }

  /* Center EVERYTHING on mobile (texts, buttons, cards, plans) */
  body, .container{ text-align:center; }
  .hero-layout{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .hero-content{ text-align:center; }
  .hero-actions, .btn-row, .cta-actions{ justify-content:center !important; }
  .hero-actions a, .btn, button{ margin-left:auto; margin-right:auto; }

  .plans-grid{ justify-content:center !important; }
  .plan-card{ margin:10px auto !important; }

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

  /* Slightly smaller mobile header */
  .mobile-header{ padding:8px 12px !important; }
  .mobile-logo-img{ width:40px !important; height:40px !important; }
  .mobile-brand-name{ font-size:0.92rem !important; }
  .mobile-brand-sub{ font-size:0.72rem !important; }
  .mobile-menu-toggle{ width:38px !important; height:38px !important; font-size:20px !important; }
  .mobile-login{ color:var(--accent) !important; }
  .mobile-login-ico{ color:var(--accent) !important; }
  .mobile-login-text{ font-size:10px !important; }

  /* Center CTA button like الباقات المتاحة */
  .contact-cta-actions{ display:flex; justify-content:center; }

}


/* ===== v5 adjustments (full-width header + better centering) ===== */
@media (max-width: 768px){
  /* Make header truly edge-to-edge even if inside a centered container */
  .mobile-header{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:8px 10px;
  }

  .mobile-logo-img{ width:32px; height:32px; border-radius:10px; }
  .mobile-brand-name{ font-size:13px; }
  .mobile-brand-sub{ font-size:11px; }
  .mobile-menu-toggle{ width:40px; height:40px; border-radius:10px; font-size:20px; }
  .mobile-login{ min-width:48px; }
  .mobile-login-text{ font-size:10px; }

  /* Ensure layout: logo right, actions (login+menu) hard-left */
  .mobile-header{ justify-content:space-between; }
  .mobile-actions{ gap:8px; }

  /* Center ALL page sections content on mobile */
  body, .page-wrapper { overflow-x:hidden; }
  .container, .wrap, .section, section { text-align:center; }
  .hero img, .hero-image img, .hero .hero-image, .hero .hero-media { margin-left:auto !important; margin-right:auto !important; }
  .btn, a.btn, button, .button { margin-left:auto; margin-right:auto; }

  /* Center button groups if they use flex */
  .btn-group, .buttons, .hero-buttons, .cta-buttons {
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .btn-group .btn, .buttons .btn, .hero-buttons .btn, .cta-buttons .btn { margin:0; }
}


/* Social footer */
.social-footer{
  padding:18px 0 26px;
  text-align:center;
}
.social-footer-inner{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.social-footer .soc{
  width:44px;
  height:44px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  background:var(--drawer-bg);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.social-footer .soc svg{ width:22px; height:22px; }


/* ===== Fix for previous mobile zoom/scale that broke layout ===== */
@media (max-width: 768px){
  html, body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }
  body{
    zoom:1 !important;
    transform:none !important;
  }
}

/* ===== v7: Hero blur + button sizing + center packages + RTL contact + social title ===== */
@media (max-width: 768px){
  .hero, .hero-section, .hero-wrap { position: relative; overflow: hidden; }
  .hero::after, .hero-section::after, .hero-wrap::after {
    content:""; position:absolute; left:0; right:0; bottom:0; height:45%;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.35));
    pointer-events:none;
  }

  /* Wide buttons (original look) */
  .hero .btn, .hero a.btn, .cta .btn, .cta a.btn {
    width:100%;
    max-width:320px;
    padding:14px 18px;
    border-radius:16px;
  }

  /* Center "الباقات المتاحة" */
  .packages .btn, .plans .btn, .pricing .btn, .btn-packages {
    margin-left:auto !important;
    margin-right:auto !important;
    display:block;
  }

  /* Contact form RTL */
  form input, form textarea { direction: rtl; text-align: right; }
}

/* v8: blur ONLY on hero image (keeps text sharp) */
@media (max-width: 768px){
  .hero, .hero-section, .hero-wrap { position: relative; overflow: hidden; }

  /* Put hero image below */
  .hero img, .hero-section img, .hero-wrap img,
  .hero .hero-image, .hero .hero-media, .hero .hero-photo {
    position: relative;
    z-index: 0;
  }

  /* Blur overlay sits above image but below text */
  .hero::after, .hero-section::after, .hero-wrap::after {
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:45%;
    z-index: 1;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.35));
    pointer-events:none;
  }

  /* Keep text & buttons above overlay */
  .hero .hero-content, .hero .content, .hero .hero-text, .hero .hero-buttons,
  .hero h1, .hero h2, .hero h3, .hero p, .hero a, .hero button,
  .hero-section .hero-content, .hero-wrap .hero-content {
    position: relative;
    z-index: 2;
  }
}



:root{
  --brand-green:#2f7d3a;
  --brand-orange:#f28c28;
}

@media (max-width: 768px){
  /* Wider CTA buttons */
  .hero .btn, .hero a.btn, .cta .btn, .cta a.btn,
  .btn-primary, .btn-secondary {
    width:100% !important;
    max-width:380px !important;
    padding:15px 20px !important;
    border-radius:18px !important;
    font-weight:700;
  }

  /* Brand colors for login + menu */
  .mobile-menu-toggle{
    background: var(--brand-orange) !important;
    color:#fff !important;
    border: 1px solid rgba(255,255,255,.18) !important;
  }
  .mobile-login-ico{
    background: var(--brand-green) !important;
    color:#fff !important;
    border: 1px solid rgba(255,255,255,.18) !important;
  }
  .mobile-login-text{
    color: #fff !important;
    opacity: .95;
  }

  /* Brand for main buttons (if they use background) */
  .hero .btn.primary, .hero a.btn.primary, .btn-primary{
    background: var(--brand-green) !important;
    color:#fff !important;
    border: none !important;
  }
  .hero .btn.secondary, .hero a.btn.secondary, .btn-secondary{
    background: var(--brand-orange) !important;
    color:#fff !important;
    border: none !important;
  }

  /* Ensure centered */
  .hero .btn, .hero a.btn, .cta .btn, .cta a.btn { margin-left:auto !important; margin-right:auto !important; display:block; }
}


/* ===== v11 FINAL: brand colors + normal sizes for login/menu, wide CTAs only ===== */
:root{
  --brand-orange:#f28c28;
  --brand-dark:#111111;
}

@media (max-width: 768px){
  /* Keep CTA buttons wide */
  .hero .btn, .hero a.btn, .cta .btn, .cta a.btn,
  .btn-primary, .btn-secondary{
    width:100% !important;
    max-width:380px !important;
    padding:14px 18px !important;
    border-radius:16px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    display:block !important;
  }

  /* Brand colors */
  .mobile-menu-toggle{
    background: var(--brand-orange) !important;
    color:#fff !important;
    border:none !important;
  }
  .mobile-login-ico{
    background: var(--brand-dark) !important;
    color:#fff !important;
    border:none !important;
  }
  .mobile-login-text{ color:#fff !important; }

  /* Reset sizes for menu & login to normal (no extra widening) */
  .mobile-menu-toggle, .mobile-login-ico{
    width:auto !important;
    height:auto !important;
    min-width:auto !important;
    padding:6px 10px !important;
    border-radius:10px !important;
  }
}


/* ===== v12: smaller login + unify button size/style to match "ابدأ الآن" ===== */
@media (max-width: 768px){
  /* Smaller login */
  .mobile-login-ico{
    padding:5px 8px !important;
    border-radius:10px !important;
  }
  .mobile-login-ico svg{ width:18px !important; height:18px !important; }
  .mobile-login-text{ font-size:9px !important; }

  /* Make ALL buttons follow primary CTA sizing */
  .btn, a.btn, button, input[type="submit"], .button,
  .btn-primary, .btn-secondary{
    width:100% !important;
    max-width:380px !important;
    padding:14px 18px !important;
    border-radius:16px !important;
    font-weight:700 !important;
    margin-left:auto !important;
    margin-right:auto !important;
    display:block !important;
    text-align:center !important;
  }

  /* Keep button groups centered nicely */
  .btn-group, .buttons, .hero-buttons, .cta-buttons, .actions{
    display:flex !important;
    justify-content:center !important;
    gap:10px !important;
    flex-wrap:wrap !important;
  }
  .btn-group .btn, .buttons .btn, .hero-buttons .btn, .cta-buttons .btn, .actions .btn,
  .btn-group a.btn, .buttons a.btn, .hero-buttons a.btn, .cta-buttons a.btn, .actions a.btn{
    width:100% !important;
    max-width:380px !important;
    margin:0 !important;
  }
}


/* menu-zindex */
.mobile-drawer-overlay{z-index:9998 !important;}
#mobileDrawer.mobile-drawer{z-index:9999 !important;}
.mobile-header{z-index:9997 !important; position:relative;}

/* menu-toggle-scale */
.mobile-menu-toggle{transform:scale(1.10); transform-origin:center;}



@media (max-width: 768px){
  #mobileDrawer.mobile-drawer, #mobileDrawer{
    left: auto !important;
    right: 0 !important;
    transform: translateX(110%) !important;
  }
  #mobileDrawer.mobile-drawer.is-open, #mobileDrawer.is-open{
    transform: translateX(0) !important;
  }
  /* keep overlay above page but below drawer */
  #mobileDrawerOverlay, .mobile-drawer-overlay{
    z-index: 9998 !important;
  }
  #mobileDrawer{
    z-index: 9999 !important;
  }
}

@media (max-width:768px){#mobileDrawer{position:fixed;top:0;height:100vh;width:82vw;max-width:340px;background:rgba(10,10,10,.95);}}


/* menu-click */
.mobile-menu-toggle{cursor:pointer;pointer-events:auto;z-index:10001;}
.mobile-drawer-overlay{display:block;}
.mobile-drawer-overlay[hidden]{display:none !important;}
.mobile-drawer-overlay.open{display:block !important;}


/* ===== v8: fix header layout + prevent overlap (menu clickable) ===== */
@media (max-width: 768px){
  /* Hide desktop header elements if they exist to avoid double box */
  .desktop-nav, .nav-links, .top-nav, .header-actions { display:none !important; }

  .mobile-header{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:12px !important;
    padding:10px 12px !important;
    box-sizing:border-box !important;
  }
  .mobile-logo{
    margin-left:auto !important; /* push logo to the right (RTL visual) */
    display:flex !important;
    align-items:center !important;
  }
  .mobile-logo img{ height:34px !important; width:auto !important; }

  .mobile-login{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    padding:8px 10px !important;
    border-radius:12px !important;
    position:relative !important;
    z-index:10002 !important;
  }
  .mobile-menu-toggle{
    width:44px !important;
    height:44px !important;
    border-radius:12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    z-index:10003 !important;
    pointer-events:auto !important;
  }

  /* Make sure login link doesn't cover the menu button */
  .mobile-login{ max-width: 140px; }
}

/* drawer-left */
@media (max-width:768px){
  #mobileDrawer.mobile-drawer, #mobileDrawer{
    right:auto !important;
    left:0 !important;
    transform: translateX(-110%) !important;
  }
  #mobileDrawer.mobile-drawer.is-open, #mobileDrawer.is-open{
    transform: translateX(0) !important;
  }
}

/* drawer-close-square */
@media (max-width:768px){
  .drawer-head{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
  }
  button
}

/* hide-desktop-menu */
@media (min-width: 992px){
  .menu-btn, .hamburger, #menuBtn, .mobile-menu-btn{
    display:none !important;
  }
}

/* drawer-close-transparent */
@media (max-width:768px){
  button.drawer-close{
    background: transparent !important;
    border: none !important;
    color: #ff9f1a !important;
    box-shadow: none !important;
  }
}


/* === Force drawer close X to be small square === */
@media (max-width: 768px) {
  .drawer-close,
  .mobile-drawer .drawer-close,
  button.drawer-close {
    all: unset !important;
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    line-height: 1 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: #ff9f1a !important;
    cursor: pointer !important;
  }
}

/* hide-mobile-on-desktop */
@media (min-width: 992px){
  .mobile-header,
  #mobileDrawerOverlay,
  #mobileDrawer{
    display:none !important;
  }
  .mobile-menu-toggle{display:none !important;}
}

/* hide-mobile-on-desktop-strong */
@media (min-width: 769px){
  .mobile-header,
  #mobileDrawerOverlay,
  #mobileDrawer{
    display:none !important;
  }
}


/* menu-close-small-square */
.drawer-close{
  width:36px !important;
  height:36px !important;
  border-radius:10px !important;
  background:transparent !important;
  border:1px solid rgba(255,255,255,.22) !important;
  color:#fff !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  font-size:18px !important;
  line-height:1 !important;
}

/* mobile menu only on mobile */
@media (min-width: 769px){
  .mobile-menu-toggle,
  #mobileDrawerOverlay,
  #mobileDrawer{
    display:none !important;
  }
}



/* === HERO MOBILE ORDER: image on top, text below (under logo) === */
@media (max-width: 768px){
  .hero-layout{
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
    align-items:stretch !important;
  }

  /* Image first */
  .hero-visual{
    order:1 !important;
    width:100% !important;
    padding:0 14px !important;
    margin:0 !important;
  }
  .hero-box{
    max-width:none !important;
    width:100% !important;
    margin:0 !important;
    position:relative !important;
    transform:none !important;
  }
  .hero-image{
    width:100% !important;
    height:auto !important;
    display:block !important;
  }

  /* Text second */
  .hero-content{
    order:2 !important;
    width:100% !important;
    padding:0 14px !important;
    text-align:center !important;
    margin:0 !important;
    position:static !important;
  }
  .hero-title{
    margin: 0 0 10px !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
  }
  .hero-subtitle{
    margin: 0 0 14px !important;
    font-size: 14px !important;
    line-height: 1.85 !important;
    position:static !important;
    transform:none !important;
  }

  /* Kill overlays/blur if any */
  .hero-image-overlay,
  .hero-overlay,
  .hero-blur,
  .hero-blur-bar{
    display:none !important;
  }
  .hero-box::before,
  .hero-box::after{
    content:none !important;
    display:none !important;
  }
}



/* === HERO TEXT ON IMAGE (Mobile): under chest logo === */
@media (max-width: 768px){
  .hero-box{ position:relative !important; }
  .hero-overlay-copy{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:58%;
    width:92%;
    max-width:520px;
    z-index:6;
    pointer-events:none;
  }
  .hero-overlay-inner{
    padding:10px 14px;
    border-radius:16px;
    background: rgba(0,0,0,0.28);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .hero-overlay-title{
    color:#fff;
    font-weight:800;
    font-size:20px;
    line-height:1.25;
    margin:0 0 8px;
    text-shadow:0 6px 18px rgba(0,0,0,0.65);
    text-align:center;
  }
  .hero-overlay-sub{
    color: rgba(255,255,255,0.92);
    font-size:13px;
    line-height:1.8;
    text-shadow:0 6px 18px rgba(0,0,0,0.55);
    text-align:center;
  }

  /* hide the duplicate title/subtitle below image */
  .hero-content .hero-title,
  .hero-content .hero-subtitle{
    display:none !important;
  }
}



/* === HERO TIGHTEN (Mobile): closer to header, full-width image, tighter spacing === */
@media (max-width: 768px){
  /* closer to header */
  .hero-section{ padding-top: 8px !important; padding-bottom: 14px !important; }

  /* make hero area full width */
  .hero-section .container{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* image flush with page */
  .hero-visual{ padding: 0 !important; margin: 0 !important; }
  .hero-box{
    width: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
  }
  .hero-image{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* tighter typography spacing */
  .hero-content{ padding: 0 14px !important; }
  .hero-title{ margin-bottom: 6px !important; }
  .hero-subtitle{ margin-bottom: 10px !important; }

  /* buttons closer to each other and to text */
  .hero-actions{
    gap: 8px !important;
    margin-top: 8px !important;
  }
  .hero-actions .btn{
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* keep overlay text aligned under chest logo after image became full-bleed */
  .hero-overlay-copy{ width: 94% !important; top: 56% !important; }
  .hero-overlay-inner{ border-radius: 14px !important; padding: 9px 12px !important; }
}



/* === HERO FINAL TUNE (Mobile): flush to header, text lower, buttons closer === */
@media (max-width: 768px){
  /* Hero flush to header (no gap) */
  .hero-section{ padding-top: 0 !important; margin-top: 0 !important; }
  .site-header + .hero-section{ margin-top: 0 !important; }
  .site-header{ margin-bottom: 0 !important; }

  /* Move overlay text a bit lower under chest logo */
  .hero-overlay-copy{ top: 60% !important; }

  /* Bring buttons closer to the text */
  .hero-actions{
    margin-top: 4px !important;
    gap: 6px !important;
  }
}



/* === HERO OVERLAY LOWER + BUTTONS UP (Mobile) === */
@media (max-width: 768px){
  /* lower the overlay text inside hero image */
  .hero-overlay-copy{ top: 64% !important; }
  .hero-overlay-inner{ padding: 8px 12px !important; }

  /* pull buttons closer to the overlay/text */
  .hero-content{ margin-top: -6px !important; }
  .hero-actions{
    margin-top: 2px !important;
    gap: 6px !important;
  }

  /* reduce space below hero so buttons appear closer */
  .hero-section{ padding-bottom: 8px !important; }
}



/* === HERO MICRO TUNE (Mobile): lower text more, pull buttons up === */
@media (max-width: 768px){
  /* move overlay text further down under logo */
  .hero-overlay-copy{ top: 68% !important; }

  /* bring content (buttons) closer to image text */
  .hero-content{ margin-top: -12px !important; }
  .hero-actions{
    margin-top: -2px !important;
    gap: 6px !important;
  }

  /* reduce any extra spacing between hero and next section */
  .hero-section{ padding-bottom: 4px !important; }
}



/* === HERO REMOVE OVERLAY BG (Mobile): no box/blur behind text === */
@media (max-width: 768px){
  .hero-overlay-inner{
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
}



/* === FORCE: show only "ابدأ الآن" button in HERO (Mobile) === */
@media (max-width: 768px){
  .hero-actions > *{ display:none !important; }
  .hero-actions > *:first-child{ display:block !important; }
  .hero-actions{ margin-top: 6px !important; gap: 0 !important; }
}



/* === FIX: Return hero overlay text + only Start Now button (Mobile) === */
@media (max-width: 768px){

  /* Ensure hero overlay text is visible */
  .hero-overlay-copy{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    top:68% !important;
    z-index:10 !important;
  }
  .hero-overlay-title,
  .hero-overlay-sub{
    display:block !important;
  }

  /* Hide all hero buttons */
  .hero-actions > *{
    display:none !important;
  }

  /* Show only first button: ابدأ الآن */
  .hero-actions > *:first-child{
    display:block !important;
    margin-top:6px !important;
  }
}



/* === TUNE: Move Start Now button closer inside hero (Mobile) === */
@media (max-width: 768px){
  /* Pull the hero content up a bit */
  .hero-content{
    margin-top: -10px !important;
  }

  /* Bring the Start Now button closer to overlay text */
  .hero-actions > *:first-child{
    margin-top: -4px !important;
  }
}



/* === PLACE Start Now button INSIDE hero under overlay text (Mobile) === */
@media (max-width: 768px){
  .hero-box{ position:relative !important; }

  /* move hero actions into the image area */
  .hero-actions{
    position:absolute !important;
    left:50% !important;
    transform: translateX(-50%) !important;
    top: 75% !important;   /* directly under the overlay text */
    width: 92% !important;
    margin: 0 !important;
    z-index: 11 !important;
  }

  /* show only first button */
  .hero-actions > *{ display:none !important; }
  .hero-actions > *:first-child{
    display:block !important;
    margin: 0 !important;
  }
}



/* === TUNE: raise Start Now button + remove overlay background (Mobile) === */
@media (max-width: 768px){
  /* raise the button slightly */
  .hero-actions{
    top: 72% !important; /* was 75% */
  }

  /* remove any transparent/blur box behind hero text */
  .hero-overlay-inner{
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
}



/* === HERO BLACK BACKGROUND (Mobile) === */
@media (max-width: 768px){
  .hero-section{
    background: #000 !important;
  }
  /* ensure full-bleed look */
  body{
    background: #000 !important;
  }
}