/* ==========================================================================
   DESIGN CRUNCHERS — UAE EDITION · MODERN THEME 2026
   "Dubai Luxury Tech" — midnight navy, royal gold, glassmorphism, motion.
   This file loads LAST and re-skins the whole site. Content is untouched.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Cairo:wght@400;600;700;800&display=swap');

:root{
  --dcx-bg:        #070a13;
  --dcx-bg-2:      #0b1020;
  --dcx-surface:   rgba(255,255,255,.045);
  --dcx-surface-2: rgba(255,255,255,.07);
  --dcx-line:      rgba(31,166,220,.22);
  --dcx-line-soft: rgba(255,255,255,.09);
  --dcx-gold:      #1fa6dc;
  --dcx-gold-2:    #63cdec;
  --dcx-gold-3:    #37a72f;
  --dcx-emerald:   #0eae74;
  --dcx-text:      #eef0f6;
  --dcx-muted:     #a7adbd;
  --dcx-sand:      #dcedf0;
  --dcx-grad-gold: linear-gradient(100deg, #45bd3a 0%, #1fa58f 48%, #1fa6dc 100%);
  --dcx-radius:    22px;
  --dcx-ease:      cubic-bezier(.22,.61,.36,1);
  --dcx-shadow:    0 24px 70px rgba(0,0,0,.55);
}

/* ==========================================================================
   1. BASE — background, typography, scrollbar, selection
   ========================================================================== */

html{ scroll-behavior:smooth; }

body{
  font-family:'Poppins', sans-serif !important;
  color: var(--dcx-text) !important;
  background: #070a13 !important;
  overflow-x: hidden;
}

/* ambient sky: gold/blue/emerald glows + faint arabesque grid, one fixed layer
   (no background-attachment:fixed — unreliable on mobile & during capture) */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%231fa6dc' stroke-opacity='0.05'%3E%3Cpath d='M36 6 L66 36 L36 66 L6 36 Z'/%3E%3Ccircle cx='36' cy='36' r='10'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1100px 700px at 85% -10%, rgba(31,166,220,.10), transparent 60%),
    radial-gradient(900px 640px at -10% 22%, rgba(14,110,174,.12), transparent 60%),
    radial-gradient(1000px 800px at 50% 115%, rgba(14,174,116,.07), transparent 55%),
    linear-gradient(180deg, #070a13 0%, #0a0f1e 50%, #070a13 100%);
}

h1,h2,h3,h4,h5,h6{ font-family:'Outfit','Poppins',sans-serif !important; letter-spacing:.2px; }

p{ color: var(--dcx-muted); line-height:1.85; }

::selection{ background: rgba(31,166,220,.85); color:#10130b; }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:#0a0d17 !important; border-radius:0; }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #37a72f, #1fa6dc) !important;
  border-radius:99px !important;
  border:2px solid #0a0d17 !important;
}
::-webkit-scrollbar-thumb:hover{ background:#63cdec !important; }

/* kill the old fixed glow-video backgrounds — the theme paints its own sky */
#BgVideo, .BgVideo2{ display:none !important; }

img{ max-width:100%; }

/* ==========================================================================
   2. TOPBAR (UAE identity) — refined
   ========================================================================== */

.uae-topbar{
  background: linear-gradient(90deg, rgba(7,9,16,.98), rgba(14,17,28,.98)) !important;
  border-bottom:1px solid var(--dcx-line) !important;
  padding:7px 16px !important;
  position:relative; z-index:1002;
}
/* replace the old chunky flag stripe with a slim UAE-flag hairline under the bar */
.uae-topbar::before{
  left:0; top:auto; bottom:-1px;
  width:100% !important; height:2px !important;
  background: linear-gradient(90deg,
    var(--uae-red, #ef3340) 0 25%,
    var(--uae-green, #009739) 25% 50%,
    #ffffff 50% 75%,
    var(--dcx-gold) 75% 100%) !important;
}

/* ==========================================================================
   3. NEW NAVBAR (dcx-nav)
   ========================================================================== */

.dcx-nav{
  position: sticky;
  top:0;
  z-index:1001;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:10px clamp(16px, 4vw, 48px);
  background: rgba(7,10,19,.55);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition: background .35s var(--dcx-ease), box-shadow .35s var(--dcx-ease), padding .35s var(--dcx-ease);
}
.dcx-nav.is-scrolled{
  background: rgba(7,10,19,.92);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  padding-top:6px; padding-bottom:6px;
}
.dcx-nav .dcx-logo img,
.dcx-nav .dcx-logo video{
  width:auto; height:56px; max-width:180px; object-fit:contain; display:block;
  /* transparent PNG — natural green→cyan logo, no box, just a soft glow */
  filter: drop-shadow(0 6px 16px rgba(31,166,220,.25));
}
@media (max-width: 575.98px){
  .dcx-nav .dcx-logo img, .dcx-nav .dcx-logo video{ height:44px; }
}

.dcx-links{
  display:flex; align-items:center; gap:6px;
  list-style:none; margin:0; padding:0;
}
.dcx-links > li{ position:relative; }
.dcx-links > li > a{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Outfit',sans-serif;
  font-size:13.5px; font-weight:500;
  letter-spacing:1.2px; text-transform:uppercase;
  color:#dfe3ee !important;
  text-decoration:none !important;
  padding:10px 13px;
  border-radius:12px;
  position:relative;
  transition: color .25s, background .25s;
}
.dcx-links > li > a::after{
  content:"";
  position:absolute; left:13px; right:13px; bottom:5px;
  height:2px; border-radius:2px;
  background: var(--dcx-grad-gold);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .3s var(--dcx-ease);
}
.dcx-links > li > a:hover{ color:var(--dcx-gold-2) !important; background:rgba(255,255,255,.04); }
.dcx-links > li > a:hover::after,
.dcx-links > li > a.active::after{ transform: scaleX(1); }
.dcx-links > li > a.active{ color:var(--dcx-gold-2) !important; }

.dcx-caret{ font-size:9px; transition: transform .3s; }
li.dcx-has-drop:hover .dcx-caret, li.dcx-has-drop.open .dcx-caret{ transform: rotate(180deg); }

/* dropdown */
.dcx-drop{
  position:absolute; top:calc(100% + 10px); left:50%;
  transform: translate(-50%, 12px);
  min-width:280px;
  padding:12px;
  list-style:none;
  margin:0;
  border-radius:18px;
  background: linear-gradient(180deg, rgba(16,20,33,.98), rgba(9,12,21,.98));
  border:1px solid var(--dcx-line);
  box-shadow: var(--dcx-shadow), 0 0 0 1px rgba(255,255,255,.03) inset;
  opacity:0; visibility:hidden;
  transition: opacity .28s var(--dcx-ease), transform .28s var(--dcx-ease), visibility .28s;
  z-index:1002;
}
li.dcx-has-drop:hover > .dcx-drop,
li.dcx-has-drop.open > .dcx-drop{
  opacity:1; visibility:visible;
  transform: translate(-50%, 0);
}
.dcx-drop::before{
  content:"";
  position:absolute; top:-6px; left:50%;
  width:12px; height:12px;
  transform: translateX(-50%) rotate(45deg);
  background:#10141f;
  border-left:1px solid var(--dcx-line);
  border-top:1px solid var(--dcx-line);
}
.dcx-drop li a{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px;
  font-family:'Outfit',sans-serif;
  font-size:13px; font-weight:500; letter-spacing:.8px; text-transform:uppercase;
  color:#d9deeb !important;
  text-decoration:none !important;
  border-radius:12px;
  transition: background .22s, color .22s, transform .22s;
}
.dcx-drop li a i{
  width:30px; height:30px; flex:none;
  display:grid; place-items:center;
  border-radius:9px;
  background: rgba(31,166,220,.12);
  color:var(--dcx-gold);
  font-size:13px;
  transition: background .22s, color .22s;
}
.dcx-drop li a:hover{
  background: rgba(31,166,220,.10);
  color:var(--dcx-gold-2) !important;
  transform: translateX(4px);
}
.dcx-drop li a:hover i{ background: var(--dcx-grad-gold); color:#141414; }

/* nav right side */
.dcx-nav-cta{ display:flex; align-items:center; gap:14px; }
.dcx-nav-cta .dcx-tel{
  display:inline-flex; align-items:center; gap:8px;
  color:#cfd5e4 !important; text-decoration:none !important;
  font-family:'Outfit',sans-serif; font-size:13px; letter-spacing:.6px;
  transition: color .25s;
}
.dcx-nav-cta .dcx-tel i{ color:var(--dcx-gold); }
.dcx-nav-cta .dcx-tel:hover{ color:var(--dcx-gold-2) !important; }

/* burger */
.dcx-burger{
  display:none;
  width:46px; height:46px;
  border-radius:14px;
  border:1px solid var(--dcx-line);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  position:relative;
  z-index:1005;
  transition: background .25s;
}
.dcx-burger span{
  position:absolute; left:12px; right:12px;
  height:2px; border-radius:2px;
  background: var(--dcx-gold-2);
  transition: transform .35s var(--dcx-ease), opacity .25s, top .35s var(--dcx-ease);
}
.dcx-burger span:nth-child(1){ top:16px; }
.dcx-burger span:nth-child(2){ top:22px; }
.dcx-burger span:nth-child(3){ top:28px; }
.dcx-burger.active span:nth-child(1){ top:22px; transform:rotate(45deg); }
.dcx-burger.active span:nth-child(2){ opacity:0; }
.dcx-burger.active span:nth-child(3){ top:22px; transform:rotate(-45deg); }

/* mobile drawer */
.dcx-mobile{
  position:fixed; inset:0;
  z-index:1004;
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(31,166,220,.12), transparent 55%),
    linear-gradient(180deg, rgba(7,10,19,.98), rgba(10,14,26,.99));
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  display:flex; flex-direction:column;
  padding:110px 8vw 40px;
  overflow-y:auto;
  opacity:0; visibility:hidden;
  transform: translateY(-3%);
  transition: opacity .4s var(--dcx-ease), transform .4s var(--dcx-ease), visibility .4s;
}
.dcx-mobile.open{ opacity:1; visibility:visible; transform:none; }
.dcx-mobile .dcx-m-title{
  font-family:'Outfit',sans-serif;
  font-size:12px; letter-spacing:3px; text-transform:uppercase;
  color:var(--dcx-gold);
  margin:26px 0 10px;
  display:flex; align-items:center; gap:12px;
}
.dcx-mobile .dcx-m-title::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--dcx-line), transparent); }
.dcx-mobile a{
  display:block;
  font-family:'Outfit',sans-serif;
  font-size:clamp(19px, 4.6vw, 26px);
  font-weight:600;
  color:#eef0f6 !important;
  text-decoration:none !important;
  padding:9px 0;
  transform: translateY(16px);
  opacity:0;
  transition: transform .5s var(--dcx-ease), opacity .5s var(--dcx-ease), color .25s;
}
.dcx-mobile.open a{ transform:none; opacity:1; }
.dcx-mobile a:hover{ color:var(--dcx-gold-2) !important; }
.dcx-mobile a .ar{ font-family:'Cairo',sans-serif; font-size:.62em; color:var(--dcx-gold); margin-inline-start:10px; }

@media (max-width: 1199.98px){
  .dcx-links, .dcx-nav-cta .dcx-tel{ display:none; }
  .dcx-burger{ display:block; }
}

/* ==========================================================================
   4. BUTTONS — gold pills with shine sweep
   ========================================================================== */

.btn-classic, .btn-classicx, .btn-porfolio, .Through-btn, .btn-modal,
.tabPanel .btn-light, .card-sec .btn-light{
  clip-path:none !important;
  -webkit-clip-path:none !important;
  position:relative;
  display:inline-flex !important;
  align-items:center; justify-content:center;
  gap:10px;
  background: var(--dcx-grad-gold) !important;
  color:#04252b !important;
  font-family:'Outfit',sans-serif !important;
  font-weight:700 !important;
  font-size:14px !important;
  letter-spacing:1.4px;
  text-transform:uppercase;
  text-decoration:none !important;
  border:none !important;
  border-radius:999px !important;
  padding:14px 32px !important;
  overflow:hidden;
  box-shadow: 0 14px 34px rgba(31,166,220,.28), 0 2px 0 rgba(255,255,255,.35) inset !important;
  transition: transform .3s var(--dcx-ease), box-shadow .3s var(--dcx-ease) !important;
}
.btn-classic a, .btn-classicx a, .btn-porfolio a, .btn-modal a{
  color:#04252b !important; text-decoration:none !important;
}
.btn-classic::before, .btn-classicx::before, .btn-porfolio::before,
.tabPanel .btn-light::before, .card-sec .btn-light::before{
  content:"";
  position:absolute; top:0; bottom:0; left:-80%;
  width:45%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  transition: left .6s var(--dcx-ease);
}
.btn-classic:hover, .btn-classicx:hover, .btn-porfolio:hover,
.tabPanel .btn-light:hover, .card-sec .btn-light:hover{
  transform: translateY(-4px) !important;
  box-shadow: 0 22px 50px rgba(31,166,220,.42) !important;
}
.btn-classic:hover::before, .btn-classicx:hover::before, .btn-porfolio:hover::before,
.tabPanel .btn-light:hover::before, .card-sec .btn-light:hover::before{ left:120%; }

/* ==========================================================================
   5. SECTION HEADINGS — kicker + gradient display type
   ========================================================================== */

.set_Universal_Headings{ position:relative; padding:10px 0 6px; text-align:center; }
/* centre the kicker row (icon-lines + label) regardless of parent alignment */
.set_Universal_Headings > h3:first-child{ justify-content:center; }

.set_Universal_Headings > h3:first-child, .about-sec h3, .service-sec > .set_Universal_Headings > h3:first-child{
  display:inline-flex; align-items:center; gap:14px;
  font-family:'Outfit',sans-serif !important;
  font-size:13px !important;
  font-weight:600;
  letter-spacing:5px !important;
  text-transform:uppercase;
  color:var(--dcx-gold) !important;
}
.set_Universal_Headings > h3:first-child::before,
.set_Universal_Headings > h3:first-child::after{
  content:"";
  width:34px; height:1px;
  background: linear-gradient(90deg, transparent, var(--dcx-gold));
}
.set_Universal_Headings > h3:first-child::after{
  background: linear-gradient(90deg, var(--dcx-gold), transparent);
}

.set_Universal_Headings h2, .set_Universal_Headings h1,
.about-sec h2, .about-sec h1, .service-sec h2, .service-sec h1{
  font-family:'Outfit',sans-serif !important;
  font-weight:800 !important;
  font-size: clamp(34px, 6vw, 64px) !important;
  line-height:1.08 !important;
  -webkit-text-stroke-width:0 !important;
  color:transparent !important;
  background: linear-gradient(180deg, #ffffff 20%, #bfeaf0 55%, #1fa6dc 100%);
  -webkit-background-clip:text !important;
  background-clip:text !important;
  text-align:center;
}
.set_Universal_Headings h1{ font-size: clamp(22px, 3.2vw, 34px) !important; font-weight:600 !important; }
.contact-header-heading{ font-size: clamp(38px, 7vw, 74px) !important; }

.cdg{
  font-size: clamp(22px, 3.4vw, 38px) !important;
  color:#e4f4f7 !important;
  font-weight:600 !important;
}

/* sub-heading rows (UI/UX, GRAPHIC DESIGN etc.) */
.ui-ux-content h3{ color:#f0f2f8; }
.ui-ux-content > h3:not(.team-txt){ font-size: clamp(22px, 2.6vw, 32px) !important; font-weight:700 !important; line-height:1.3; }

/* ==========================================================================
   6. HERO + MARQUEE
   ========================================================================== */

.uae-hero-wrap{
  padding: clamp(14px, 3vw, 34px) clamp(14px, 4vw, 52px) 0;
  position:relative;
  z-index:1;
}
.uae-hero-wrap .herovideo{
  width:100%;
  border-radius: clamp(16px, 2.4vw, 28px);
  border:1px solid var(--dcx-line);
  box-shadow: 0 40px 110px rgba(0,0,0,.6), 0 0 90px rgba(31,166,220,.12);
  display:block;
}
.uae-hero-wrap::after{
  content:"";
  position:absolute; left:50%; bottom:-70px;
  width:min(760px, 82vw); height:140px;
  transform:translateX(-50%);
  background: radial-gradient(50% 100% at 50% 0%, rgba(31,166,220,.16), transparent 70%);
  pointer-events:none;
}

.marquee{
  margin-top: clamp(26px, 4vw, 48px);
  padding:10px 0 !important;
}
.marquee h2{
  font-family:'Outfit',sans-serif !important;
  font-size: clamp(15px, 1.8vw, 22px) !important;
  letter-spacing:3px;
  margin:0;
}

/* ==========================================================================
   7. GENERIC IMAGERY — figures, gallery, portfolio
   ========================================================================== */

/* vertically centre the image column against the tall text column
   (kills the big empty gap under the mockups on desktop UI/UX-style rows) */
@media (min-width: 992px){
  .ui-ux-images{ align-self:center; align-items:center !important; }
}
.ui-ux-images figure{ position:relative; margin-bottom:0; }
.ui-ux-images figure img{
  border-radius:20px;
  border:1px solid var(--dcx-line-soft);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  transition: transform .5s var(--dcx-ease), box-shadow .5s var(--dcx-ease), border-color .5s;
}
.ui-ux-images figure img:hover{
  transform: translateY(-8px) scale(1.015);
  border-color: var(--dcx-line);
  box-shadow: 0 34px 80px rgba(0,0,0,.6), 0 0 60px rgba(31,166,220,.14);
}

.gal img{
  border-radius:16px;
  border:1px solid var(--dcx-line-soft);
  transition: transform .45s var(--dcx-ease), box-shadow .45s var(--dcx-ease), border-color .45s;
}
.gal img:hover{
  transform: scale(1.03);
  border-color: var(--dcx-line);
  box-shadow: 0 20px 55px rgba(0,0,0,.55), 0 0 40px rgba(31,166,220,.16);
}

.about-sec-2 .phone img, .about-sec-2 .laptop img{
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.55));
}

.Logo-Image-Gallery img{
  border-radius:18px;
  object-fit:cover;
  border:1px solid var(--dcx-line-soft);
  transition: transform .45s var(--dcx-ease), border-color .45s;
}
.Logo-Image-Gallery img:hover{ transform: translateY(-6px); border-color:var(--dcx-line); }

/* ==========================================================================
   8. NEUTRALIZE LEGACY BACKGROUND BLOBS
   ========================================================================== */

[class*="bvgkl"], .graphicDesign, .digitalMarketing, .TestiBlack, .testiback,
.FooterBackground, .portfolioCircle, .ContactSectionCircle{
  background: none !important;
  background-image: none !important;
}

/* ==========================================================================
   9. PRICING — dark glass cards, gold accents
   ========================================================================== */

.tabContainer .buttonContainer button{
  font-family:'Outfit',sans-serif !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  letter-spacing:1.6px;
  border:1px solid var(--dcx-line) !important;
  border-radius:999px !important;
  padding:12px 20px !important;
  white-space:nowrap;
  transition: all .3s var(--dcx-ease) !important;
}

.tabPanel{ background:transparent !important; }

.glass, .non-glass{
  height:auto !important;
  min-height:560px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(31,166,220,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)) !important;
  border:1px solid var(--dcx-line-soft) !important;
  border-radius:24px !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.5) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform:none !important;
  overflow:hidden;
  position:relative;
  transition: transform .4s var(--dcx-ease), border-color .4s, box-shadow .4s !important;
}
.glass::before, .non-glass::before{
  content:"";
  position:absolute; top:0; left:10%; right:10%;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(31,166,220,.7), transparent);
}
.glass:hover, .non-glass:hover{
  transform: translateY(-10px) !important;
  border-color: var(--dcx-line) !important;
  box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 70px rgba(31,166,220,.12) !important;
}

/* make all "text-dark" content readable on dark glass */
.glass .text-dark, .glass.text-dark, .glass .card-title,
.non-glass .text-dark, .non-glass.text-dark, .non-glass .card-title{
  color:#f2f4fa !important;
}
.glass .heading, .non-glass .heading{
  font-family:'Outfit',sans-serif;
  letter-spacing:1px;
  color:var(--dcx-gold-2) !important;
}
.glass .display-3, .non-glass .display-3{
  font-family:'Outfit',sans-serif !important;
  font-weight:800 !important;
  color:transparent !important;
  background: var(--dcx-grad-gold);
  -webkit-background-clip:text !important;
  background-clip:text !important;
}
.glass del, .non-glass del{ color:rgba(255,255,255,.35) !important; }

.scroll-package{ scrollbar-width: thin; scrollbar-color: var(--dcx-gold-3) transparent; }
.scroll-package::-webkit-scrollbar{ width:5px; }
.scroll-package::-webkit-scrollbar-track{ background:transparent !important; }

.options li, .glass li, .non-glass li{ color:#cdd3e1; }

.monthly, .yearly{
  background: var(--dcx-grad-gold) !important;
  color:#04252b !important;
  border-radius:999px !important;
  font-family:'Outfit',sans-serif;
  font-weight:700;
}

/* ==========================================================================
   10. TESTIMONIALS — glass quote cards
   ========================================================================== */

.items .card, .testimonial-inner .card{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(31,166,220,.08), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
  border:1px solid var(--dcx-line-soft) !important;
  border-radius:22px !important;
  margin:14px 10px;
  padding:26px 24px 20px !important;
  position:relative;
  box-shadow: 0 22px 55px rgba(0,0,0,.45);
  transition: transform .4s var(--dcx-ease), border-color .4s, box-shadow .4s;
}
.items .card:hover{
  transform: translateY(-8px);
  border-color: var(--dcx-line) !important;
  box-shadow: 0 32px 75px rgba(0,0,0,.55), 0 0 50px rgba(31,166,220,.10);
}
.items .card::before{
  content:"\201C";
  position:absolute; top:6px; right:20px;
  font-family: Georgia, serif;
  font-size:84px; line-height:1;
  color:rgba(31,166,220,.22);
  pointer-events:none;
}
.tour-text{ font-size:14.5px; line-height:1.85; color:#ccd2e0 !important; min-height:150px; }
.link-name{
  font-family:'Outfit',sans-serif;
  font-weight:700; color:var(--dcx-gold-2);
  margin-top:16px; letter-spacing:.4px;
}
.link-position{ font-size:12.5px; color:var(--dcx-muted); letter-spacing:.6px; }

.myrfsxxfd{ color:var(--dcx-muted) !important; }

/* slick dots → gold */
.slick-dots li button:before{ color:var(--dcx-gold) !important; font-size:9px !important; opacity:.35; }
.slick-dots li.slick-active button:before{ color:var(--dcx-gold-2) !important; opacity:1; }

/* ==========================================================================
   11. SWIPER CONTROLS
   ========================================================================== */

.swiper-navBtn, .swiper-button-next, .swiper-button-prev{ color:var(--dcx-gold) !important; }
.swiper-pagination-bullet{ background:rgba(31,166,220,.45) !important; }
.swiper-pagination-bullet-active{ background:var(--dcx-gold) !important; }

/* ==========================================================================
   12. CONTACT / PORTFOLIO SPLIT SECTION
   ========================================================================== */

.ContactSectionCircle .bvgklxx6{
  margin: 40px clamp(12px, 4vw, 48px);
  border-radius:28px;
  border:1px solid var(--dcx-line-soft);
  background:
    radial-gradient(700px 320px at 12% 0%, rgba(31,166,220,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)) !important;
  overflow:hidden;
}
.portfolio-img img{ border-radius:0 24px 24px 0; object-fit:cover; }
.blur-filter-portfolio{
  backdrop-filter: blur(8px) brightness(.55) !important;
  -webkit-backdrop-filter: blur(8px) brightness(.55) !important;
  border-radius:0 24px 24px 0;
}
.customline:after, .customlinez:after{ color:var(--dcx-gold) !important; }
.lets-beggin{ font-family:'Outfit',sans-serif !important; font-weight:700 !important; }

/* ==========================================================================
   13. FORMS & MODALS — dark glass
   ========================================================================== */

.modal-content{
  background: linear-gradient(180deg, #121627, #0b0f1c) !important;
  border:1px solid var(--dcx-line) !important;
  border-radius:22px !important;
  color:var(--dcx-text) !important;
  box-shadow: var(--dcx-shadow) !important;
}
.modal-header, .modal-footer{ border-color: var(--dcx-line-soft) !important; }
.modal-title{ color:var(--dcx-gold-2) !important; font-family:'Outfit',sans-serif !important; }
.modal .btn-close{ filter: invert(1) grayscale(1); }
.modal .form-label{ color:#d5dae6; font-size:13px; letter-spacing:.5px; }

.form-control, textarea.form-control, select.form-control, input.form-control{
  background: rgba(255,255,255,.05) !important;
  border:1px solid var(--dcx-line-soft) !important;
  border-radius:14px !important;
  color:#eef0f6 !important;
  padding:12px 16px !important;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.form-control::placeholder{ color:rgba(255,255,255,.35) !important; }
.form-control:focus{
  background: rgba(255,255,255,.07) !important;
  border-color: var(--dcx-gold) !important;
  box-shadow: 0 0 0 4px rgba(31,166,220,.15) !important;
  outline:none !important;
}

.modal .btn-primary{
  background: var(--dcx-grad-gold) !important;
  border:none !important;
  color:#04252b !important;
  font-weight:700 !important;
  border-radius:999px !important;
  padding:10px 26px !important;
}
.modal .btn-secondary{
  background: rgba(255,255,255,.08) !important;
  border:1px solid var(--dcx-line-soft) !important;
  border-radius:999px !important;
  padding:10px 22px !important;
}

/* contact page form (custom -ccc classes) */
input.col2-ccc, .sec2contactform-ccc input, .sec2contactform-ccc textarea{
  background: rgba(255,255,255,.05) !important;
  border:1px solid var(--dcx-line-soft) !important;
  border-radius:14px !important;
  color:#eef0f6 !important;
  padding:13px 16px !important;
  transition: border-color .25s, box-shadow .25s;
}
.sec2contactform-ccc input::placeholder, .sec2contactform-ccc textarea::placeholder{
  color:rgba(255,255,255,.38) !important;
}
.sec2contactform-ccc input:focus, .sec2contactform-ccc textarea:focus{
  border-color: var(--dcx-gold) !important;
  box-shadow: 0 0 0 4px rgba(31,166,220,.15) !important;
  outline:none !important;
}
.contactPage_submit_btn input[type="submit"], input[type="submit"]{
  background: var(--dcx-grad-gold) !important;
  color:#04252b !important;
  border:none !important;
  border-radius:999px !important;
  padding:13px 40px !important;
  font-family:'Outfit',sans-serif !important;
  font-weight:700 !important;
  letter-spacing:1.5px;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow: 0 14px 34px rgba(31,166,220,.28) !important;
  transition: transform .3s var(--dcx-ease), box-shadow .3s var(--dcx-ease);
}
.contactPage_submit_btn input[type="submit"]:hover, input[type="submit"]:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 50px rgba(31,166,220,.42) !important;
}

/* ==========================================================================
   14. FOOTER — modern glass panel
   ========================================================================== */

.uae-skyline{ margin-top:90px; opacity:.85; }

footer.FooterBackground{
  margin-top:0 !important;
  border-top:1px solid var(--dcx-line);
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(31,166,220,.07), transparent 60%),
    linear-gradient(180deg, #0a0e1b, #060810) !important;
  position:relative;
}
footer.FooterBackground .footer-content img.website-logo-footer,
footer.FooterBackground .footer-content video{
  width:200px !important;
  height:auto !important;
  filter: drop-shadow(0 6px 18px rgba(31,166,220,.2));
}
footer.FooterBackground .footer-content > p{
  color:#c8cddc; max-width:640px; margin-left:auto; margin-right:auto;
}
footer .footer-links{ margin-top:34px; }
footer .footer_list ul{ list-style:none; padding-left:0; }
footer .footer_list li b{
  display:inline-block;
  font-family:'Outfit',sans-serif;
  color:var(--dcx-gold) !important;
  letter-spacing:3px;
  font-size:12.5px;
  margin-bottom:14px;
  position:relative;
  padding-bottom:8px;
}
footer .footer_list li b::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:30px; height:2px; border-radius:2px;
  background: var(--dcx-grad-gold);
}
footer .footer_list li{ margin-bottom:9px; }
footer .footer_list li a{
  color:#aeb5c6 !important;
  text-decoration:none !important;
  font-size:13.5px;
  letter-spacing:.4px;
  position:relative;
  transition: color .25s, padding-left .25s;
}
footer .footer_list li a:hover{ color:var(--dcx-gold-2) !important; padding-left:8px; }
footer .footer-iconz{ color:var(--dcx-gold); margin-right:4px; }

/* ---------- Global presence (country flags) ---------- */
footer .dcx-presence{
  margin:30px auto 6px;
  max-width:640px;
  text-align:center;
}
footer .dcx-presence-title{
  display:inline-flex; align-items:center; gap:12px;
  margin-bottom:22px;
  font-family:'Outfit',sans-serif;
}
footer .dcx-presence-title::before,
footer .dcx-presence-title::after{
  content:""; width:36px; height:1px;
  background:linear-gradient(90deg, transparent, var(--dcx-gold));
}
footer .dcx-presence-title::after{ background:linear-gradient(90deg, var(--dcx-gold), transparent); }
footer .dcx-presence-title .en{
  font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--dcx-gold);
}
footer .dcx-presence-title .ar{
  font-family:'Cairo',sans-serif; font-size:14px; color:var(--dcx-gold-2); opacity:.9;
}
footer .dcx-presence-grid{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:14px;
}
footer .dcx-country{
  display:flex; align-items:center; gap:10px;
  padding:9px 18px 9px 10px;
  border-radius:999px;
  border:1px solid var(--dcx-line-soft);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition: transform .3s var(--dcx-ease), border-color .3s, box-shadow .3s, background .3s;
}
footer .dcx-country:hover{
  transform: translateY(-4px);
  border-color: var(--dcx-line);
  background:linear-gradient(180deg, rgba(31,166,220,.12), rgba(255,255,255,.03));
  box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 26px rgba(31,166,220,.15);
}
footer .dcx-flag{
  width:34px; height:34px; flex:none;
  border-radius:50%;
  overflow:hidden;
  display:grid; place-items:center;
  border:1px solid var(--dcx-line);
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}
footer .dcx-flag img{
  width:100%; height:100%; object-fit:cover; display:block;
}
footer .dcx-country-name{
  font-family:'Outfit',sans-serif;
  font-size:13.5px; font-weight:600; letter-spacing:.4px;
  color:#d7dced;
  white-space:nowrap;
}
footer .dcx-country:hover .dcx-country-name{ color:var(--dcx-gold-2); }

@media (max-width:575.98px){
  /* balanced 2 × 2 grid on phones instead of an uneven 3 + 1 wrap */
  footer .dcx-presence-grid{ gap:10px; }
  footer .dcx-country{
    flex:0 1 calc(50% - 10px);
    justify-content:flex-start;
    padding:8px 14px 8px 8px;
  }
  footer .dcx-flag{ width:30px; height:30px; }
  footer .dcx-country-name{ font-size:13px; }
}

/* kill the legacy white square outline around each social icon */
footer .social-icons span{
  border:none !important;
  padding:0 !important;
  margin:0 6px !important;
  line-height:normal !important;
}
footer .social-icons a{
  display:inline-grid; place-items:center;
  width:46px; height:46px;
  border-radius:14px;
  border:1px solid var(--dcx-line);
  background: rgba(255,255,255,.04);
  color:var(--dcx-gold-2) !important;
  font-size:18px;
  transition: transform .3s var(--dcx-ease), background .3s, color .3s, box-shadow .3s;
}
footer .social-icons a:hover{
  transform: translateY(-5px);
  background: var(--dcx-grad-gold);
  color:#04252b !important;
  box-shadow: 0 16px 36px rgba(31,166,220,.35);
}
footer .copyright{ color:#8189a0; font-size:13px; letter-spacing:.4px; }
footer .copyright strong{ color:#c8cddc; font-weight:600; }

.FooterBackground .barknewsec.text-center{
  width:auto !important;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:14px !important;
  margin: 6px auto 18px !important;
  /* NOTE: this used to carry transform:scale(.72) + margin-bottom:-36px. That
     was tuned for the old large "pro" badge, whose PROFESSIONAL text clipped.
     The badge is now the medium reviews one (188x57 natural, ~132x40 on page),
     which is already smaller than the old scaled badge was — scaling it again
     shrank it to ~95x29, and the -36px pullback was sized for the taller badge. */
}
.FooterBackground .barknewsec.text-center a img{ height:auto !important; }
.FooterBackground .barknewsec.text-center > a:last-child img{ width:200px !important; }
.FooterBackground .barknewsec.text-center a.bark-widget img{ margin-top:1px !important; }

/* ==========================================================================
   15. SCROLL-REVEAL ANIMATION SYSTEM (driven by js/uae-modern.js)
   ========================================================================== */

[data-reveal]{
  opacity:0;
  transform: translateY(30px);
  transition: opacity .9s var(--dcx-ease), transform .9s var(--dcx-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="left"]{ transform: translateX(-44px); }
[data-reveal="right"]{ transform: translateX(44px); }
[data-reveal="zoom"]{ transform: scale(.92); }
[data-reveal].is-in{ opacity:1; transform:none; }

/* gentle float for decorative imagery */
@keyframes dcxFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}
.about-sec-2 .phone figure img{ animation: dcxFloat 7s ease-in-out infinite; }

/* back-to-top (injected by JS) */
.dcx-top{
  position:fixed; right:22px; bottom:26px;
  width:50px; height:50px;
  border-radius:16px;
  border:1px solid var(--dcx-line);
  background: rgba(10,13,23,.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color:var(--dcx-gold-2);
  font-size:17px;
  display:grid; place-items:center;
  cursor:pointer;
  z-index:998;
  opacity:0; visibility:hidden;
  transform: translateY(14px);
  transition: all .35s var(--dcx-ease);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
.dcx-top.show{ opacity:1; visibility:visible; transform:none; }
.dcx-top:hover{ background: var(--dcx-grad-gold); color:#04252b; }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .about-sec-2 .phone figure img{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================================
   15b. LOGIN / SIGN-UP — dark glass panels
   ========================================================================== */

.loginPage{
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
}

.custom-select, select.custom-select, select.form-control, select{
  background-color: rgba(20,24,38,.95) !important;
  border:1px solid var(--dcx-line-soft) !important;
  border-radius:14px !important;
  color:#eef0f6 !important;
  padding:10px 14px;
}

.btn-primary{
  background: var(--dcx-grad-gold) !important;
  border:none !important;
  color:#04252b !important;
  font-family:'Outfit',sans-serif !important;
  font-weight:700 !important;
  border-radius:999px !important;
  letter-spacing:1px;
  transition: transform .3s var(--dcx-ease), box-shadow .3s var(--dcx-ease);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(31,166,220,.35);
}

.loginCol, .loginColLogin{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(31,166,220,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  border:1px solid var(--dcx-line) !important;
  border-radius:24px !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--dcx-shadow);
}
.loginCol .text-dark, .loginColLogin .text-dark{ color:var(--dcx-gold-2) !important; }
.loginCol h6.text-dark, .loginColLogin h6.text-dark{ color:#c9cedd !important; }

.btn-loginpage, .navbar-login-btn{
  clip-path:none !important;
  -webkit-clip-path:none !important;
  width:auto !important;
  height:auto !important;
  padding:10px 28px !important;
  white-space:nowrap;
  background: var(--dcx-grad-gold) !important;
  color:#04252b !important;
  border:none !important;
  border-radius:999px !important;
  font-family:'Outfit',sans-serif !important;
  font-weight:700 !important;
  letter-spacing:1px;
  transition: transform .3s var(--dcx-ease), box-shadow .3s var(--dcx-ease);
  box-shadow: 0 12px 30px rgba(31,166,220,.25);
}
.btn-loginpage:hover, .navbar-login-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(31,166,220,.4);
}

/* ==========================================================================
   16. MISC POLISH
   ========================================================================== */

.uae-divider{ margin:70px auto 20px; }

.team-txt h2, .team-txt h3, .team-txt h4, .team-txt h5,
h2.team-txt, h3.team-txt, h4.team-txt, h5.team-txt{
  font-family:'Outfit',sans-serif !important;
  letter-spacing:2.5px !important;
  font-size:15px !important;
  font-weight:600 !important;
  color:var(--dcx-gold) !important;
  text-transform:uppercase;
}

/* re-tint legacy brand-colored icon PNGs to the gold palette */
img[src*="aboutAssets/icons/"]{
  filter: grayscale(1) sepia(1) saturate(3) hue-rotate(-12deg) brightness(1.05);
  max-width:110px;
}

a{ transition: color .25s; }

.text-success{ color: var(--dcx-gold) !important; }

/* tables (policy pages etc.) */
table{ color:var(--dcx-text); }

/* keep everything above the fixed pattern layer */
body > *{ position:relative; z-index:1; }

/* ==========================================================================
   21b. PACKAGES HERO — themed "packages" background image
   ========================================================================== */
.container-fluid.Hero_Section_p10.dcx-pkg-hero{
  position:relative;
  background-image: url("../assets/packages-hero-bg.svg?v=dcx2110") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  min-height: 600px;
  display:flex; align-items:center;
}
/* the hero is a flex container (to vertically centre the copy over the art);
   without this its child .row shrinks to its content width and sticks to the
   start edge, so the centred "OUR PACKAGES" lands left of the true page centre.
   Making the row fill the hero lets text-align:center hit the real centre —
   the same in English (LTR) and Arabic (RTL). */
.dcx-pkg-hero > .row{ flex:1 1 100%; width:100%; margin:0; }
.dcx-pkg-hero .hero-content{ position:relative; z-index:2; }
@media (max-width: 767.98px){
  .dcx-pkg-hero.Hero_Section_p10{ min-height:440px; background-position:center top !important; }
}

/* ==========================================================================
   21c. CONTACT HERO — themed "communication / connection" background image
   ========================================================================== */
.container-fluid.transHeader.bg.dcx-contact-hero{
  position:relative;
  background-image: url("../assets/contact-hero-bg.svg?v=dcx2110") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* let the outer SVG show through the inner section instead of the arabesque theme */
.dcx-contact-hero .hero-aaa,
.dcx-contact-hero .hero-inner-aaa{
  background: transparent !important;
  position:relative; z-index:2;
}

/* contact-form left illustration column (fills the previously-empty left half) */
.section2-ccc .col2-ccc.dcx-contact-illus{
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding-top:10px;
}
.dcx-contact-illus img{
  width:100%;
  max-width:470px;
  height:auto;
  filter: drop-shadow(0 22px 55px rgba(31,166,220,.20));
}
@media (max-width: 960px){
  .dcx-contact-illus{ margin-bottom:30px; padding-top:0; }
  .dcx-contact-illus img{ max-width:340px; }
}

/* ==========================================================================
   22. LEGAL PAGES (terms / privacy / refund / opt-out) — readable UAE docs
   ========================================================================== */
.dcx-legal{ max-width:960px; margin:0 auto; padding:40px 4px 20px; }
.dcx-legal .dcx-legal-head{ text-align:center; margin-bottom:14px; }
.dcx-legal h1{
  font-family:'Outfit',sans-serif !important; font-weight:800 !important;
  font-size: clamp(30px, 5vw, 52px) !important;
  color:transparent !important;
  background: linear-gradient(180deg,#fff 30%,#bfeaf0 60%,#1fa6dc 100%);
  -webkit-background-clip:text !important; background-clip:text !important;
  text-align:center;
}
.dcx-legal .dcx-legal-meta{
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  margin:8px auto 4px; font-family:'Outfit',sans-serif; font-size:12.5px; letter-spacing:.4px;
  color:var(--dcx-gold-2);
}
.dcx-legal .dcx-legal-meta span{
  padding:5px 12px; border-radius:999px;
  border:1px solid var(--dcx-line); background:rgba(31,166,220,.08);
}
.dcx-legal h2{
  font-family:'Outfit',sans-serif !important; font-weight:700 !important;
  font-size: clamp(19px, 2.4vw, 24px) !important;
  color:var(--dcx-gold-2) !important;
  margin:34px 0 6px; padding-top:18px;
  border-top:1px solid var(--dcx-line-soft);
  display:flex; align-items:center; gap:10px;
}
.dcx-legal h2::before{
  content:""; width:8px; height:8px; flex:none; transform:rotate(45deg);
  background:var(--dcx-gold); box-shadow:0 0 10px rgba(31,166,220,.5);
}
.dcx-legal p, .dcx-legal li{ color:#c2c8d6; line-height:1.85; font-size:15px; }
.dcx-legal p{ margin:10px 0; }
.dcx-legal ul{ margin:12px 0 12px; padding-left:0; list-style:none; }
.dcx-legal ul li{
  position:relative; padding:6px 0 6px 26px;
}
.dcx-legal ul li::before{
  content:"\25C6"; position:absolute; left:0; top:8px; font-size:9px; color:var(--dcx-gold);
}
.dcx-legal a{ color:var(--dcx-gold-2); text-decoration:underline; }
.dcx-legal .dcx-legal-note{
  margin-top:36px; padding:16px 20px; border-radius:14px;
  border:1px solid var(--dcx-line-soft); background:rgba(255,255,255,.03);
  font-size:13px; color:var(--dcx-muted);
}

/* ==========================================================================
   21. DATA-DRIVEN PRICING (dcx-pricing)  — packages-data.php
   ========================================================================== */

.dcx-pricing{ padding-bottom:20px; }
.dcx-pricing-sub{
  text-align:center; color:var(--dcx-muted);
  max-width:640px; margin:6px auto 0; font-size:14.5px;
}
.dcx-pricing .container-xl{ padding-left:16px; padding-right:16px; }

/* service tabs */
.dcx-pk-tabs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin:34px auto 10px; max-width:1100px;
}
.dcx-pk-tab{
  font-family:'Outfit',sans-serif;
  font-size:13px; font-weight:600; letter-spacing:.6px;
  color:#cfd5e4;
  padding:11px 20px;
  border-radius:999px;
  border:1px solid var(--dcx-line-soft);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  transition: all .28s var(--dcx-ease);
  white-space:nowrap;
}
.dcx-pk-tab:hover{ border-color:var(--dcx-line); color:var(--dcx-gold-2); }
.dcx-pk-tab.active{
  background: var(--dcx-grad-gold);
  color:#04252b;
  border-color:transparent;
  box-shadow:0 10px 26px rgba(31,166,220,.28);
}

/* panels */
.dcx-pk-panel{ display:none; }
.dcx-pk-panel.active{ display:block; animation: dcxHeroIn .5s var(--dcx-ease); }

/* card grid — 3 across */
.dcx-pk-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:22px;
  max-width:1180px;
  margin:28px auto 0;
  align-items:stretch;
}
.dcx-pk-card{
  position:relative;
  display:flex; flex-direction:column;
  padding:30px 26px 28px;
  border-radius:22px;
  border:1px solid var(--dcx-line-soft);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(31,166,220,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  transition: transform .35s var(--dcx-ease), border-color .35s, box-shadow .35s;
}
.dcx-pk-card:hover{
  transform: translateY(-8px);
  border-color: var(--dcx-line);
  box-shadow: 0 36px 84px rgba(0,0,0,.55), 0 0 60px rgba(31,166,220,.12);
}
.dcx-pk-card.is-popular{
  border-color: var(--dcx-gold);
  box-shadow: 0 30px 74px rgba(0,0,0,.55), 0 0 46px rgba(31,166,220,.2);
}
.dcx-pk-card.is-popular::before{
  content:""; position:absolute; inset:0; border-radius:22px; padding:1px;
  background: linear-gradient(160deg, var(--dcx-gold), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}
.dcx-pk-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  font-family:'Outfit',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:1.4px; text-transform:uppercase;
  color:#04252b; background: var(--dcx-grad-gold);
  padding:6px 16px; border-radius:999px;
  box-shadow:0 10px 24px rgba(31,166,220,.35);
  white-space:nowrap;
}
.dcx-pk-name{
  font-family:'Outfit',sans-serif; font-weight:700;
  font-size:19px; letter-spacing:.3px; color:#eef0f6;
  margin:2px 0 14px;
}
.dcx-pk-price{ margin-bottom:20px; }
.dcx-pk-price del{
  display:block; color:rgba(255,255,255,.42);
  font-size:15px; font-weight:500; margin-bottom:2px;
}
.dcx-pk-now{
  display:block;
  font-family:'Outfit',sans-serif; font-weight:800;
  font-size:30px; line-height:1.1;
  color:transparent; background: var(--dcx-grad-gold);
  -webkit-background-clip:text; background-clip:text;
}
.dcx-pk-per{
  font-size:14px; font-weight:600; -webkit-text-fill-color: var(--dcx-muted); color:var(--dcx-muted);
}
.dcx-pk-tag{
  display:inline-block; margin-top:8px;
  font-family:'Outfit',sans-serif; font-size:10.5px; font-weight:700;
  letter-spacing:1.2px; text-transform:uppercase;
  color:var(--dcx-gold-2);
  background: rgba(31,166,220,.12);
  border:1px solid var(--dcx-line);
  padding:4px 11px; border-radius:999px;
}
.dcx-pk-feats{
  list-style:none; padding:0; margin:0 0 20px;
  flex:1 1 auto;
}
.dcx-pk-feats li{
  position:relative; padding:7px 0 7px 26px;
  font-size:13.5px; line-height:1.5; color:#c7cddb;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.dcx-pk-feats li:last-child{ border-bottom:none; }
.dcx-pk-feats li::before{
  content:"\2713";
  position:absolute; left:0; top:7px;
  width:17px; height:17px;
  display:grid; place-items:center;
  font-size:10px; font-weight:700;
  color:#04252b; background: var(--dcx-grad-gold);
  border-radius:50%;
}
.dcx-pk-note{
  font-size:12.5px; font-style:italic; color:var(--dcx-muted);
  margin:0 0 18px; line-height:1.5;
}
.dcx-pk-cta{
  align-self:stretch; text-align:center;
  padding:12px 26px !important; font-size:13px !important;
}

/* Commercial Terms & Package Notes */
.dcx-pk-notes{ max-width:900px; margin:60px auto 0; padding:0 16px; }
.dcx-pk-notes .set_Universal_Headings h2{ font-size: clamp(24px,3.4vw,38px) !important; }
.dcx-pk-notes-list{
  list-style:none; padding:0; margin:26px 0 0;
  display:grid; grid-template-columns:1fr 1fr; gap:12px 26px;
}
.dcx-pk-notes-list li{
  position:relative; padding-left:24px;
  font-size:13px; line-height:1.6; color:var(--dcx-muted);
}
.dcx-pk-notes-list li::before{
  content:"\25C6"; position:absolute; left:0; top:1px;
  color:var(--dcx-gold); font-size:9px;
}
.dcx-pk-positioning{
  margin-top:24px; padding:16px 20px;
  border-radius:16px; border:1px solid var(--dcx-line-soft);
  background: rgba(31,166,220,.06);
  font-size:13.5px; color:#c7cddb; text-align:center;
}
.dcx-pk-positioning strong{ color:var(--dcx-gold-2); }

@media (max-width: 991.98px){
  .dcx-pk-grid{ grid-template-columns:1fr; max-width:460px; }
  .dcx-pk-notes-list{ grid-template-columns:1fr; }
}
@media (max-width: 575.98px){
  .dcx-pk-tab{ font-size:12px; padding:9px 15px; }
  .dcx-pk-card{ padding:26px 20px 24px; }
}

/* ==========================================================================
   17. HARD OVERFLOW CLAMP — mobile browsers ignore body-only overflow-x
   ========================================================================== */

html{ overflow-x: clip; }
@supports not (overflow-x: clip){ html{ overflow-x: hidden; } }
body{ overflow-x: clip !important; }

/* side-reveals must not poke outside the viewport on small screens */
@media (max-width: 991.98px){
  [data-reveal="left"], [data-reveal="right"]{ transform: translateY(30px); }
}

/* ==========================================================================
   18. BILINGUAL NAVBAR (EN + AR labels)
   ========================================================================== */

.dcx-links > li > a{
  flex-direction:column;
  gap:2px;
  padding:8px 13px;
  line-height:1.15;
}
.dcx-links > li > a .en{ display:inline-flex; align-items:center; gap:7px; }
.dcx-links > li > a .ar{
  font-family:'Cairo',sans-serif;
  font-size:10.5px;
  font-weight:600;
  color:var(--dcx-gold);
  opacity:.85;
  letter-spacing:0;
}
.dcx-links > li > a::after{ bottom:2px; }

.dcx-drop li a{ justify-content:flex-start; }
.dcx-drop-ar{
  margin-inline-start:auto;
  font-family:'Cairo',sans-serif;
  font-size:12px;
  font-weight:600;
  color:var(--dcx-gold);
  opacity:.9;
  letter-spacing:0;
  text-transform:none;
}
.dcx-drop{ min-width:330px; }

.dcx-nav-quote{ padding:10px 20px !important; font-size:12px !important; }
.ar-cta{
  font-family:'Cairo',sans-serif;
  font-weight:700;
  font-size:.92em;
  letter-spacing:0;
  border-inline-start:1px solid rgba(4,37,43,.35);
  padding-inline-start:9px;
  margin-inline-start:4px;
}
.dcx-btn-ghost .ar-cta{ border-inline-start-color: rgba(31,166,220,.45); }

.dcx-mobile a .ar{
  font-family:'Cairo',sans-serif;
  font-size:.68em;
  color:var(--dcx-gold);
  margin-inline-start:10px;
  font-weight:600;
}

/* ==========================================================================
   19. HERO — UAE bilingual edition
   ========================================================================== */

.dcx-hero{
  position:relative;
  padding: clamp(40px, 7vh, 90px) 0 clamp(30px, 5vh, 70px);
  overflow: clip;
}
.dcx-hero-bg{ position:absolute; inset:0; pointer-events:none; }
.dcx-orb{
  position:absolute;
  border-radius:50%;
  filter: blur(70px);
  opacity:.5;
}
.dcx-orb-1{
  width:480px; height:480px;
  right:-140px; top:-160px;
  background: radial-gradient(circle, rgba(31,166,220,.4), transparent 65%);
  animation: dcxFloat 9s ease-in-out infinite;
}
.dcx-orb-2{
  width:380px; height:380px;
  left:-160px; bottom:-120px;
  background: radial-gradient(circle, rgba(14,110,174,.35), transparent 65%);
  animation: dcxFloat 12s ease-in-out infinite reverse;
}
.dcx-orb-3{
  width:240px; height:240px;
  left:38%; top:8%;
  background: radial-gradient(circle, rgba(14,174,116,.22), transparent 65%);
  animation: dcxFloat 10s ease-in-out infinite;
}

.dcx-hero-flag{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid var(--dcx-line);
  background: rgba(31,166,220,.08);
  margin-bottom:22px;
}
.dcx-hero-flag img{ width:26px; border-radius:3px; }
.dcx-hero-flag .en{
  font-family:'Outfit',sans-serif;
  font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:#cfeaef;
}
.dcx-hero-flag i{ color:rgba(255,255,255,.35); font-style:normal; }
.dcx-hero-flag .ar{ font-family:'Cairo',sans-serif; font-weight:700; font-size:14px; color:var(--dcx-gold); }

.dcx-hero-title{ margin:0 0 18px; }
.dcx-hero-title .en{
  display:block;
  font-family:'Outfit',sans-serif;
  font-weight:800;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height:1.08;
  color:#fff;
}
.dcx-hero-title .en em{
  font-style:normal;
  color:transparent;
  background: var(--dcx-grad-gold);
  -webkit-background-clip:text;
  background-clip:text;
}
.dcx-hero-title .ar{
  display:block;
  font-family:'Cairo',sans-serif;
  font-weight:800;
  font-size: clamp(24px, 3.2vw, 42px);
  line-height:1.5;
  color:#e4f4f7;
  margin-top:10px;
}
.dcx-hero-title .ar em{
  font-style:normal;
  color:var(--dcx-gold);
  text-shadow:0 0 26px rgba(31,166,220,.4);
}

.dcx-hero-sub{
  max-width:560px;
  font-size:15px;
  color:#aeb5c8;
  margin-bottom:8px;
}
.dcx-hero-sub.ar{
  font-family:'Cairo',sans-serif;
  font-size:15.5px;
  color:#9cc7cb;
  margin-bottom:0;
}

.dcx-hero-ctas{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  margin:30px 0 0;
}
.dcx-btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 30px;
  border-radius:999px;
  border:1px solid var(--dcx-line);
  background: rgba(255,255,255,.03);
  color:var(--dcx-gold-2) !important;
  font-family:'Outfit',sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  text-decoration:none !important;
  transition: all .3s var(--dcx-ease);
}
.dcx-btn-ghost:hover{
  border-color:var(--dcx-gold);
  background: rgba(31,166,220,.1);
  transform: translateY(-3px);
}

.dcx-hero-stats{
  display:flex; flex-wrap:wrap;
  gap: clamp(18px, 3vw, 44px);
  margin-top:38px;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.08);
}
.dcx-stat b{
  display:block;
  font-family:'Outfit',sans-serif;
  font-weight:800;
  font-size: clamp(26px, 2.6vw, 38px);
  color:transparent;
  background: var(--dcx-grad-gold);
  -webkit-background-clip:text;
  background-clip:text;
  line-height:1.1;
}
.dcx-stat span{ display:block; font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color:#98a0b3; margin-top:4px; }
.dcx-stat span.ar{ font-family:'Cairo',sans-serif; letter-spacing:0; text-transform:none; color:var(--dcx-gold); font-size:13px; margin-top:2px; }

/* hero visual — layered mockups + showreel card */
.dcx-hero-visual{ position:relative; }
.dcx-hero-imgwrap{
  position:relative;
  min-height: clamp(320px, 44vw, 560px);
}
.dcx-hero-img-back{
  position:absolute;
  left:0; top:6%;
  width:62%;
  transform: rotate(-6deg);
  opacity:.9;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.55));
  animation: dcxFloat 11s ease-in-out infinite;
}
.dcx-hero-img-front{
  position:absolute;
  right:0; top:0;
  width:64%;
  filter: drop-shadow(0 36px 70px rgba(0,0,0,.6)) drop-shadow(0 0 60px rgba(31,166,220,.15));
  animation: dcxFloat 8s ease-in-out infinite;
  animation-delay:1.2s;
  z-index:2;
}
.dcx-hero-reel{
  position:absolute;
  left:4%; bottom:0;
  width:44%;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--dcx-line);
  box-shadow: 0 26px 60px rgba(0,0,0,.6), 0 0 40px rgba(31,166,220,.12);
  z-index:3;
  background:#0a0d17;
}
.dcx-hero-reel video{ width:100%; display:block; }
.dcx-reel-tag{
  position:absolute;
  left:10px; bottom:10px;
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 12px;
  border-radius:999px;
  background: rgba(7,9,16,.8);
  border:1px solid var(--dcx-line);
  font-family:'Outfit',sans-serif;
  font-size:10px; letter-spacing:2.5px;
  color:#cfeaef;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.dcx-reel-tag i{ font-style:normal; font-family:'Cairo',sans-serif; font-size:12px; color:var(--dcx-gold); letter-spacing:0; }

/* rotating gold orbit rings behind the mockups */
.dcx-ring{
  position:absolute;
  left:50%; top:46%;
  width:min(540px, 96%);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background: conic-gradient(from 0deg, transparent 0 68%, rgba(31,166,220,.65) 84%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: dcxSpin 16s linear infinite;
  z-index:0;
}
.dcx-ring-2{
  width:min(420px, 78%);
  background: conic-gradient(from 180deg, transparent 0 74%, rgba(14,174,116,.5) 88%, transparent 100%);
  animation: dcxSpinRev 22s linear infinite;
}
@keyframes dcxSpin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes dcxSpinRev{ to{ transform:translate(-50%,-50%) rotate(-360deg); } }

/* floating service icon chips */
.dcx-chip{
  position:absolute;
  width:52px; height:52px;
  display:grid; place-items:center;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border:1px solid var(--dcx-line);
  color:var(--dcx-gold-2);
  font-size:19px;
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 24px rgba(31,166,220,.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index:3;
  animation: dcxChipFloat 6s ease-in-out infinite;
}
.dcx-chip-1{ left:2%;  top:6%;   animation-delay:0s; }
.dcx-chip-2{ right:0;  top:14%;  animation-delay:.8s; }
.dcx-chip-3{ left:-2%; top:52%;  animation-delay:1.6s; }
.dcx-chip-4{ right:3%; top:58%;  animation-delay:2.4s; }
.dcx-chip-5{ left:16%; bottom:2%; animation-delay:3.2s; }
.dcx-chip-6{ right:20%; bottom:-2%; animation-delay:4s; }
@keyframes dcxChipFloat{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-16px) rotate(4deg); }
}

/* light sweep across the hero visual every few seconds */
.dcx-hero-imgwrap::after{
  content:"";
  position:absolute;
  top:-10%; bottom:-10%; left:-30%;
  width:26%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.09), transparent);
  transform: skewX(-18deg);
  animation: dcxSweep 5.5s ease-in-out infinite;
  pointer-events:none;
  z-index:4;
}
@keyframes dcxSweep{
  0%, 55%{ left:-30%; }
  85%, 100%{ left:130%; }
}

/* shimmering gold on the highlighted headline word */
.dcx-hero-title .en em{
  background: linear-gradient(100deg, #37a72f 0%, #1fa6dc 30%, #dffaff 50%, #1fa6dc 70%, #37a72f 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation: dcxShimmer 4s ease-in-out infinite;
}
@keyframes dcxShimmer{
  0%,100%{ background-position: 0% 0; }
  50%{ background-position: 100% 0; }
}

/* hero entrance animation (no scroll needed) */
.dcx-hero-copy > *, .dcx-hero-imgwrap{
  opacity:0;
  transform: translateY(26px);
  animation: dcxHeroIn .9s var(--dcx-ease) forwards;
}
.dcx-hero-copy > *:nth-child(1){ animation-delay:.05s; }
.dcx-hero-copy > *:nth-child(2){ animation-delay:.15s; }
.dcx-hero-copy > *:nth-child(3){ animation-delay:.25s; }
.dcx-hero-copy > *:nth-child(4){ animation-delay:.32s; }
.dcx-hero-copy > *:nth-child(5){ animation-delay:.42s; }
.dcx-hero-copy > *:nth-child(6){ animation-delay:.52s; }
.dcx-hero-imgwrap{ animation-delay:.3s; }
@keyframes dcxHeroIn{ to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .dcx-hero-copy > *, .dcx-hero-imgwrap{ opacity:1; transform:none; animation:none; }
  .dcx-orb, .dcx-hero-img-back, .dcx-hero-img-front,
  .dcx-ring, .dcx-ring-2, .dcx-chip{ animation:none; }
  .dcx-hero-imgwrap::after{ display:none; }
  .dcx-hero-title .en em{ animation:none; }
}

/* ==========================================================================
   20. MOBILE POLISH
   ========================================================================== */

@media (max-width: 991.98px){
  .dcx-hero{ text-align:center; padding-top:34px; }
  .dcx-hero-sub{ margin-left:auto; margin-right:auto; }
  .dcx-hero-ctas{ justify-content:center; }
  .dcx-hero-stats{ justify-content:center; }
  .dcx-hero-imgwrap{ min-height:0; height:auto; display:grid; place-items:center; padding:20px 0 26px; }
  .dcx-hero-img-back{ position:relative; left:auto; top:auto; width:58%; margin-right:-22%; grid-area:1/1; justify-self:start; }
  .dcx-hero-img-front{ position:relative; right:auto; top:auto; width:62%; margin-left:-22%; margin-top:14%; grid-area:1/1; justify-self:end; }
  .dcx-ring{ top:50%; width:min(340px, 96%); }
  .dcx-ring-2{ width:min(260px, 76%); }
  .dcx-chip{ width:42px; height:42px; font-size:15px; border-radius:13px; }
  .dcx-chip-3, .dcx-chip-4{ display:none; }
  .dcx-chip-5{ left:6%; bottom:0; }
  .dcx-chip-6{ right:6%; bottom:0; }
}

/* "Become a Partner" band (video-animation page) — clean gold CTA panel,
   the old absolutely-positioned hackathon video behind the text is gone */
.News_Letter_Animation{
  height:auto !important;
  width:min(1100px, calc(100% - 24px)) !important;
  margin:50px auto !important;
  padding:60px 24px !important;
  border-radius:28px !important;
  border:1px solid var(--dcx-line);
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(31,166,220,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)) !important;
  flex-direction:column;
}
.AnimatedContent{ position:static !important; }
.AnimatedContent h1{
  font-size: clamp(22px, 3vw, 36px) !important;
  color:#fff;
  max-width:820px;
  margin:0 auto 18px;
}
.AnimatedContent p{ max-width:720px; margin-left:auto; margin-right:auto; }

/* "Partner with us" CTA bands (service pages) — swap stock photos for a
   theme-matched dark navy + cyan/emerald glow + arabesque backdrop */
.News_Letter_Logo, .News_Letter_Web, .News_Letter_Mob,
.News_Letter_Smm, .News_Letter_Seo, .News_Letter_Contact{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%231fa6dc' stroke-opacity='0.12'%3E%3Cpath d='M32 4 L60 32 L32 60 L4 32 Z'/%3E%3Ccircle cx='32' cy='32' r='9'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(760px 360px at 18% 0%, rgba(31,166,220,.22), transparent 60%),
    radial-gradient(760px 360px at 86% 108%, rgba(14,174,116,.18), transparent 60%),
    linear-gradient(180deg, #0b1120 0%, #070a13 100%) !important;
  background-size: 64px 64px, cover, cover, cover !important;
  background-position: center, center, center, center !important;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat !important;
  border-top:1px solid var(--dcx-line);
  position:relative;
  overflow:hidden;
}
/* thin gold hairline along the curved top edge */
.News_Letter_Logo::before, .News_Letter_Web::before, .News_Letter_Mob::before,
.News_Letter_Smm::before, .News_Letter_Seo::before, .News_Letter_Contact::before{
  content:""; position:absolute; left:8%; right:8%; top:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--dcx-gold), transparent);
  opacity:.7;
}
/* heading + copy polish inside these bands */
.News_Letter_Logo h1, .News_Letter_Web h1, .News_Letter_Mob h1,
.News_Letter_Smm h1, .News_Letter_Seo h1, .News_Letter_Contact h1{
  font-family:'Outfit',sans-serif !important;
  font-weight:800 !important;
  font-size: clamp(24px, 3.2vw, 40px) !important;
  line-height:1.2 !important;
  color:#fff !important;
  max-width:900px; margin-left:auto; margin-right:auto;
  text-shadow:0 4px 24px rgba(0,0,0,.5);
}

/* ---------- Page HERO banners — swap ALL stock photos for the site theme ----------
   [class*="Hero_Section"] catches every Hero_Section_* + video_Hero_Section variant
   at once (minus the mockup-image container), so no banner is ever missed. */
[class*="Hero_Section"]:not([class*="Hero_Section-Img"]),
.hero-aaa, .hero-aaaz, .transHeader{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%231fa6dc' stroke-opacity='0.10'%3E%3Cpath d='M32 4 L60 32 L32 60 L4 32 Z'/%3E%3Ccircle cx='32' cy='32' r='9'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(900px 440px at 16% 0%, rgba(31,166,220,.22), transparent 62%),
    radial-gradient(900px 440px at 88% 108%, rgba(14,174,116,.16), transparent 62%),
    linear-gradient(180deg, #0b1120 0%, #070a13 100%) !important;
  background-size: 64px 64px, cover, cover, cover !important;
  background-position: center !important;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat !important;
}
/* keep hero headings crisp on the themed backdrop */
[class*="Hero_Section"] h1, .hero-aaa h1, .hero-aaaz h1, .transHeader h1{
  text-shadow:0 4px 26px rgba(0,0,0,.55);
}

/* service-page intro image columns (setImgAfterHero) — fill the column so the
   image doesn't float small with big blank space beside it on desktop */
@media (min-width: 992px){
  .setImgAfterHero img.responsive-imglll{
    width:100% !important;   /* beat styles.css .responsive-imglll{width:70% !important} */
    max-width:560px;
    height:auto;
    border-radius:20px;
    align-self:center;
  }
}

/* white-background illustration/animation videos — frame as tidy cards */
video.responsive-imglll_s2, video.responsive-imglll, video.responsive-imglll_s3{
  display:block;
  border-radius:20px;
  border:1px solid var(--dcx-line-soft);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  background:#fff;
  object-fit: cover;
}
@media (max-width: 991.98px){
  /* stack side-by-side media full-width on phones (was squeezed halves) */
  .ui-ux-images{ flex-direction: column; align-items: center; }
  .ui-ux-images figure{
    margin-left:0 !important;
    margin-right:0 !important;
    width:100%;
  }
  .ui-ux-images figure img{ width:100%; }
  video.responsive-imglll_s2, video.responsive-imglll, video.responsive-imglll_s3{
    width:100% !important;
    aspect-ratio: 4 / 3;   /* crop the mp4's empty white padding */
    margin:0 auto;
  }
}

/* login / sign-up panels: never wider than the phone */
@media (max-width: 767.98px){
  .loginCol, .loginColLogin{ width:100% !important; max-width:30rem; }
  .loginPage{ height:auto !important; min-height:100vh; padding:30px 12px !important; }
}

/* country-select modal must scroll on phones */
.country-modal-overlay{ overflow-y:auto; }
.country-modal{ max-height:92vh; overflow-y:auto; margin:auto; }
@media (max-width: 991.98px){
  .country-grid{ grid-template-columns:1fr 1fr !important; gap:12px !important; }
  .country-orb{ width:104px !important; height:104px !important; }
  .flag-mini{ width:34px !important; height:34px !important; border-radius:10px !important; }
  .flag-mini img{ width:20px !important; height:20px !important; }
}

/* testimonial cards: fixed 350px must not exceed the track pre-slick */
.items .card, .testimonial-inner .card{ max-width:100%; }

@media (max-width: 575.98px){
  .dcx-nav{ padding:8px 14px; }
  .set_Universal_Headings > h3:first-child{ letter-spacing:2px !important; font-size:11.5px !important; }
  .set_Universal_Headings > h3:first-child::before,
  .set_Universal_Headings > h3:first-child::after{ width:20px; }
  footer.FooterBackground .footer-content > p{ width:100% !important; max-width:100% !important; }
  .px-5{ padding-left:16px !important; padding-right:16px !important; }
  .dcx-nav .dcx-logo video{ width:118px; height:60px; }
  .dcx-nav-quote{ padding:9px 14px !important; font-size:10.5px !important; }
  .dcx-nav-quote .ar-cta{ display:none; }
  .dcx-burger{ width:42px; height:42px; }
  .dcx-hero-title .en{ font-size:30px; }
  .dcx-hero-title .ar{ font-size:22px; }
  .dcx-hero-sub{ font-size:14px; }
  .dcx-hero-stats{ gap:16px; }
  .dcx-stat{ flex:1 1 30%; min-width:90px; }
  .uae-topbar{ gap:8px; padding:6px 10px !important; }
  .uae-topbar-ar{ font-size:13px; }
  .uae-skyline{ background-size: 200% auto; }
  .marquee h2{ letter-spacing:1.5px; }
  /* bootstrap containers: keep gutters sane inside full-bleed sections */
  .container-fluid{ padding-left:12px; padding-right:12px; }
}

/* ==========================================================================
   23. AUTO LIGHT / DARK THEME
   The visitor's own system clock picks the theme on first paint
   (06:00-17:59 local = light, otherwise dark). A manual toggle overrides it
   and is remembered. Detection lives in includes/header-styles.php so it
   runs before the first paint; the toggle lives in js/uae-modern.js.

   Only the content between the hero and the footer turns light. The chrome
   (topbar, navbar, heroes, login panels, footer) stays dark in both themes,
   which is why those blocks re-assert the night palette below.
   ========================================================================== */

[data-theme="light"]{
  --dcx-bg:        #f2f5fb;
  --dcx-bg-2:      #e8eef7;
  --dcx-surface:   rgba(11,24,45,.05);
  --dcx-surface-2: rgba(11,24,45,.08);
  --dcx-line:      rgba(31,166,220,.35);
  --dcx-line-soft: rgba(11,24,45,.13);
  --dcx-text:      #0d1526;
  --dcx-muted:     #4d5872;
  --dcx-sand:      #0f5f88;
  --dcx-shadow:    0 18px 50px rgba(16,32,60,.13);
  /* The brand cyans are tuned for a dark backdrop; on this light surface they
     fall to ~2.5:1, so text-bearing accents use darker cyans here (>=4.5:1).
     The filled gradient (--dcx-grad-gold) keeps its bright brand colours. */
  --dcx-gold:      #0b6a91;
  --dcx-gold-2:    #0a5f83;
}

/* ---------- base surface ---------- */
[data-theme="light"] body{
  background:#f2f5fb !important;
  color: var(--dcx-text) !important;
}
[data-theme="light"] body::before{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%231fa6dc' stroke-opacity='0.10'%3E%3Cpath d='M36 6 L66 36 L36 66 L6 36 Z'/%3E%3Ccircle cx='36' cy='36' r='10'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1100px 700px at 85% -10%, rgba(31,166,220,.13), transparent 60%),
    radial-gradient(900px 640px at -10% 22%, rgba(14,110,174,.10), transparent 60%),
    radial-gradient(1000px 800px at 50% 115%, rgba(14,174,116,.08), transparent 55%),
    linear-gradient(180deg, #f2f5fb 0%, #e8eef7 50%, #f2f5fb 100%) !important;
}
[data-theme="light"] ::-webkit-scrollbar-track{ background:#e2e8f3 !important; }
[data-theme="light"] ::-webkit-scrollbar-thumb{ border-color:#e2e8f3 !important; }

/* ---------- dark zones keep the night palette ----------
   Every block here sits on a dark surface in BOTH themes, so it keeps light
   text. Only the palette variables they inherit (and Bootstrap's .text-white)
   need pinning back — their surfaces are already dark on their own:
     - topbar / heroes / footer  -> hard-coded dark gradients
     - .loginPage                -> full-bleed dark background video
     - .blur-filter-portfolio    -> backdrop-filter brightness(.55) darkens the
                                    photo behind it, so its text must stay light
     - .News_Letter_*            -> "become a partner" bands; they end in
                                    linear-gradient(180deg,#0b1120,#070a13)
     - .News_Letter (no suffix)  -> about.php's partner banner: Mask.png behind
                                    a 70% black overlay, so also a dark surface
     - .marquee                  -> scrolling band on a near-black gradient
                                    (rgb(21,16,10) -> rgb(37,28,14))

   .dcx-hero is deliberately NOT listed: unlike every other hero it paints no
   background at all — it simply let the dark <body> show through. On the light
   surface it therefore IS a light zone, and must take dark text like any other
   content. Listing it here is what made the home page headline white-on-white. */
[data-theme="light"] .uae-topbar,
[data-theme="light"] .dcx-nav,
[data-theme="light"] [class*="Hero_Section"],
[data-theme="light"] .hero-aaa,
[data-theme="light"] .hero-aaaz,
[data-theme="light"] .transHeader,
[data-theme="light"] .loginPage,
[data-theme="light"] .blur-filter-portfolio,
[data-theme="light"] .News_Letter,
[data-theme="light"] .News_Letter_Logo,
[data-theme="light"] .News_Letter_Web,
[data-theme="light"] .News_Letter_Mob,
[data-theme="light"] .News_Letter_Smm,
[data-theme="light"] .News_Letter_Seo,
[data-theme="light"] .News_Letter_Contact,
[data-theme="light"] .marquee,
[data-theme="light"] footer,
[data-theme="light"] .FooterBackground{
  --dcx-surface:   rgba(255,255,255,.045);
  --dcx-surface-2: rgba(255,255,255,.07);
  --dcx-line-soft: rgba(255,255,255,.09);
  --dcx-text:      #eef0f6;
  --dcx-muted:     #a7adbd;
  --dcx-sand:      #dcedf0;
  --dcx-shadow:    0 24px 70px rgba(0,0,0,.55);
  /* these sit on a dark backdrop, so the bright brand cyans belong here */
  --dcx-gold:      #1fa6dc;
  --dcx-gold-2:    #63cdec;
}
[data-theme="light"] .text-white{ color: var(--dcx-text) !important; }
[data-theme="light"] .uae-topbar .text-white,
[data-theme="light"] .dcx-nav .text-white,
[data-theme="light"] [class*="Hero_Section"] .text-white,
[data-theme="light"] .hero-aaa .text-white,
[data-theme="light"] .hero-aaaz .text-white,
[data-theme="light"] .transHeader .text-white,
[data-theme="light"] .loginPage .text-white,
[data-theme="light"] .blur-filter-portfolio .text-white,
[data-theme="light"] .News_Letter .text-white,
[data-theme="light"] .News_Letter_Logo .text-white,
[data-theme="light"] .News_Letter_Web .text-white,
[data-theme="light"] .News_Letter_Mob .text-white,
[data-theme="light"] .News_Letter_Smm .text-white,
[data-theme="light"] .News_Letter_Seo .text-white,
[data-theme="light"] .News_Letter_Contact .text-white,
[data-theme="light"] footer .text-white,
[data-theme="light"] .FooterBackground .text-white{ color:#fff !important; }

/* ---------- content panels: white-on-dark glass -> ink-on-light ---------- */
[data-theme="light"] .glass,
[data-theme="light"] .non-glass{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(31,166,220,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.74)) !important;
  border-color: var(--dcx-line-soft) !important;
  box-shadow: var(--dcx-shadow) !important;
}
[data-theme="light"] .glass del,
[data-theme="light"] .non-glass del{ color: rgba(13,21,38,.45) !important; }

[data-theme="light"] .items .card,
[data-theme="light"] .testimonial-inner .card{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(31,166,220,.08), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.74)) !important;
  border-color: var(--dcx-line-soft) !important;
}

[data-theme="light"] .ContactSectionCircle .bvgklxx6{
  background:
    radial-gradient(700px 320px at 12% 0%, rgba(31,166,220,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72)) !important;
}
[data-theme="light"] .News_Letter_Animation{
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(31,166,220,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72)) !important;
}

/* ---------- forms & modals ---------- */
[data-theme="light"] .modal-content{
  background: linear-gradient(180deg, #ffffff, #f2f5fb) !important;
  color: var(--dcx-text) !important;
}
[data-theme="light"] .modal .btn-close{ filter:none; }
[data-theme="light"] .modal .form-label{ color:#33405c; }
[data-theme="light"] .form-control,
[data-theme="light"] textarea.form-control,
[data-theme="light"] select.form-control,
[data-theme="light"] input.form-control{
  background: rgba(255,255,255,.96) !important;
  color:#0d1526 !important;
}
[data-theme="light"] .form-control::placeholder{ color: rgba(13,21,38,.42) !important; }
[data-theme="light"] .form-control:focus{ background:#fff !important; }
[data-theme="light"] .modal .btn-secondary{
  background: rgba(11,24,45,.08) !important;
  color:#0d1526 !important;
}
[data-theme="light"] input.col2-ccc,
[data-theme="light"] .sec2contactform-ccc input,
[data-theme="light"] .sec2contactform-ccc textarea{
  background: rgba(255,255,255,.96) !important;
  color:#0d1526 !important;
}
[data-theme="light"] .sec2contactform-ccc input::placeholder,
[data-theme="light"] .sec2contactform-ccc textarea::placeholder{
  color: rgba(13,21,38,.42) !important;
}

/* ---------- pricing ---------- */
[data-theme="light"] .dcx-pk-tab{
  color:#33405c;
  background: rgba(11,24,45,.05);
}
[data-theme="light"] .dcx-pk-card{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(31,166,220,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.78));
  box-shadow: var(--dcx-shadow);
}
[data-theme="light"] .dcx-pk-price del{ color: rgba(13,21,38,.45); }
[data-theme="light"] .dcx-pk-feats li{ border-bottom-color: rgba(11,24,45,.09); }

/* ---------- legal pages ---------- */
[data-theme="light"] .dcx-legal .dcx-legal-note{ background: rgba(11,24,45,.04); }

/* ---------- navbar theme toggle (sun / moon) ---------- */
.dcx-theme-toggle{
  width:40px; height:40px; flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid var(--dcx-line);
  background: var(--dcx-surface);
  color: var(--dcx-gold-2);
  cursor:pointer;
  padding:0;
  transition: transform .3s var(--dcx-ease), border-color .3s, background .3s;
}
.dcx-theme-toggle:hover{ transform: translateY(-2px); border-color: var(--dcx-gold-2); }
.dcx-theme-toggle svg{ width:18px; height:18px; display:block; }
/* show the icon for the theme the click will switch TO */
.dcx-theme-toggle .dcx-ico-moon{ display:none; }
.dcx-theme-toggle .dcx-ico-sun{ display:block; }
[data-theme="light"] .dcx-theme-toggle .dcx-ico-sun{ display:none; }
[data-theme="light"] .dcx-theme-toggle .dcx-ico-moon{ display:block; }

/* ---------- legacy hard-coded white copy ----------
   styles.css (and a few inline style="color:#fff" attributes) hard-code white
   headings/copy for the original dark design — invisible on the light surface.
   Routing them through the palette variables fixes both themes at once: the
   dark zones above re-declare --dcx-text/--dcx-muted, so headings and copy
   inside the navbar, heroes and footer stay light automatically.
   Gradient headings are untouched (they paint via -webkit-text-fill-color). */
[data-theme="light"] :is(h1,h2,h3,h4,h5,h6){ color: var(--dcx-text) !important; }
[data-theme="light"] :is(p,li){ color: var(--dcx-muted) !important; }
[data-theme="light"] .ui-ux-content{ color: var(--dcx-text) !important; }

/* ...but the cyan section kickers keep their (light-tuned) brand accent */
[data-theme="light"] .set_Universal_Headings h3,
[data-theme="light"] .team-txt,
[data-theme="light"] .dcx-legal a{ color: var(--dcx-gold) !important; }

/* Arabic sub-labels hard-code the bright cyan; route them through the palette
   so they darken on the light surface and stay bright inside the dark zones. */
[data-theme="light"] .ar-sub,
[data-theme="light"] .ar-inline,
[data-theme="light"] .dcx-stat .ar,
[data-theme="light"] .set_Universal_Headings .ar{ color: var(--dcx-gold) !important; }

/* ---------- home hero: light zone corrections ----------
   .dcx-hero paints no background of its own, so in light mode it sits on the
   light body. These bits hard-code colours chosen for the old dark backdrop. */
[data-theme="light"] .dcx-hero-flag .en{ color: var(--dcx-text) !important; }
[data-theme="light"] .dcx-hero-flag i{ color: rgba(13,21,38,.35) !important; }
[data-theme="light"] .dcx-stat span{ color: var(--dcx-muted) !important; }
[data-theme="light"] .dcx-btn-ghost{ color: var(--dcx-gold) !important; }
[data-theme="light"] .dcx-btn-ghost{ background: rgba(11,24,45,.04); }

/* The navbar is only 55% opaque: over light content it washes out to mid-grey
   and its cyan sub-labels fall to ~1.7:1. Pin it to the same opacity its own
   scrolled state already uses, so it stays a genuinely dark surface. */
[data-theme="light"] .dcx-nav{ background: rgba(7,10,19,.92) !important; }

/* ---------- inline style="color:#1fa6dc" ----------
   12 pages hard-code the bright cyan inline on kicker links, arrows and lead
   paragraphs. Inline styles beat normal rules, so !important is required here.
   Pointing them at --dcx-gold keeps them bright inside the dark zones and
   darkens them (to >=4.5:1) on the light content surface. */
[data-theme="light"] .team-txt a,
[data-theme="light"] .team-txt i,
[data-theme="light"] .text-uppecase,
[data-theme="light"] .secPara,
[data-theme="light"] .fa-arrow-right{ color: var(--dcx-gold) !important; }

/* Some of those inline cyans sit on bare <span>/<i> elements with no class to
   hook (e.g. <h5><span style="color:#1fa6dc">Custom Logo Design</span></h5>),
   so match the inline style itself. #1fa6dc is the only accent colour used
   inline anywhere on the site (30 occurrences across 12 pages), and inside the
   dark zones --dcx-gold is still #1fa6dc, so this is a no-op there. */
[data-theme="light"] [style*="#1fa6dc" i]{ color: var(--dcx-gold) !important; }

/* ---------- near-white headlines that live in LIGHT zones ----------
   The hero's Arabic headline and the .cdg headline hard-code #e4f4f7 for the
   old dark design. Both sit on the light surface now, so route them through
   the palette (dark in light mode, light inside the dark zones).

   Deliberately NOT touched: .dcx-reel-tag / .dcx-hero-flag i, which use a
   near-white on top of their own dark pill backgrounds. */
[data-theme="light"] .dcx-hero-title .ar,
[data-theme="light"] .cdg{ color: var(--dcx-text) !important; }

/* The hero headline is a <span class="en"> inside the <h1> with its own
   color:#fff, so the blanket h1 rule above never reaches it. Its <em>
   ("Creativity") is gradient-painted and is intentionally left alone. */
[data-theme="light"] .dcx-hero-title .en{ color: var(--dcx-text) !important; }

/* ---------- gradient pills keep their dark ink ----------
   The dark-zone `.text-white` rule above is more specific (0,3,0) than the
   button's own `.btn-porfolio a{color:#04252b}` (0,1,1), so inside a dark zone
   it was repainting the pill's label white on a bright green gradient (2.8:1).
   Same specificity as that rule but declared later, so this wins. */
[data-theme="light"] .btn-classic .text-white,
[data-theme="light"] .btn-classicx .text-white,
[data-theme="light"] .btn-porfolio .text-white,
[data-theme="light"] .btn-modal .text-white,
[data-theme="light"] .Through-btn .text-white{ color:#04252b !important; }

/* ==========================================================================
   24. MARQUEE — finish the rebrand
   uae-theme.css (the pre-rebrand gold theme, still loaded) paints this band
   brown: linear-gradient(180deg,#15100a,#251c0e,#15100a) with --uae-gold
   borders. That never got updated when the site moved to navy + cyan, so on a
   light page it reads as a random brown stripe. Match the .News_Letter_* bands
   instead. Applies to BOTH themes — the brown is off-brand at night too.
   ========================================================================== */
.marquee{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%231fa6dc' stroke-opacity='0.20' stroke-width='1'%3E%3Cpath d='M28 4 L52 28 L28 52 L4 28 Z'/%3E%3Cpath d='M28 12 L44 28 L28 44 L12 28 Z'/%3E%3Ccircle cx='28' cy='28' r='5'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(620px 200px at 18% 50%, rgba(31,166,220,.20), transparent 62%),
    radial-gradient(620px 200px at 82% 50%, rgba(14,174,116,.16), transparent 62%),
    linear-gradient(180deg, #0b1120 0%, #070a13 100%) !important;
  border-top:1px solid var(--dcx-line) !important;
  border-bottom:1px solid var(--dcx-line) !important;
}
/* the old theme tinted these with --uae-gold, which no longer exists */
.marquee h1, .marquee h2{ color: var(--dcx-text) !important; }
.marquee .ar-inline{ color: var(--dcx-gold-2) !important; }

/* ==========================================================================
   25. PORTFOLIO HERO — close the gap under the navbar
   portfolio.php is the only page whose hero carries Bootstrap's `mt-sm-4`
   (<div class="container-fluid Hero_Section_portfolio mt-0 mt-sm-4">), which
   wins the cascade at 1.5rem/24px and pushes the hero down. In dark mode the
   gap just showed the dark body so it was invisible; on the light surface it
   reads as a white line under the navbar. Every other hero sits flush.
   Overriding here (rather than editing the markup) also neutralises the ten
   conflicting legacy margin-top rules styles.css has for this same class.
   ========================================================================== */
.Hero_Section_portfolio{ margin-top:0 !important; }

/* ==========================================================================
   26. MARQUEE SURROUND — animated aurora in the gap above the band
   The strip between the hero and the marquee is .marquee_margin's collapsed
   top margin. A margin belongs to no box, so nothing can paint it — it just
   showed the bare body (fine when that was dark, bland once it went light).
   So: convert that margin into padding (identical total footprint — 115+75+8
   before, same after), which makes the strip ours, then paint a slow aurora
   into it in light mode. Layout change applies to both themes so the spacing
   never differs between them; only the colour is light-mode-only.
   ========================================================================== */
.marquee_margin{
  position: relative;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: clamp(56px, 9vw, 115px);
  padding-bottom: 8px;
  overflow: hidden;
}
.marquee_margin > .marquee{ margin-top:0 !important; margin-bottom:0 !important; }

@keyframes dcxAurora{
  0%   { background-position:   0% 50%, 100% 50%,  50% 50%; }
  100% { background-position: 100% 50%,   0% 50%, 100% 50%; }
}
[data-theme="light"] .marquee_margin{
  background-color: transparent;
  background-image:
    radial-gradient(58% 130% at 22% 50%, rgba(31,166,220,.30), transparent 62%),
    radial-gradient(58% 130% at 78% 50%, rgba(55,167,47,.24),  transparent 62%),
    radial-gradient(46% 110% at 50% 50%, rgba(99,205,236,.22), transparent 64%);
  background-size: 190% 100%, 190% 100%, 190% 100%;
  background-repeat: no-repeat;
  animation: dcxAurora 18s ease-in-out infinite alternate;
}
/* the band itself must stay opaque over the aurora */
.marquee_margin > .marquee{ position:relative; z-index:1; }

@media (prefers-reduced-motion: reduce){
  [data-theme="light"] .marquee_margin{ animation:none; }
}

/* ---------- per-service package footnote (e.g. videography location terms) --- */
.dcx-pk-footnote{
  max-width: 900px;
  margin: 18px auto 0;
  padding: 0 12px;
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  color: var(--dcx-muted);
}

/* ---------- EN / AR language switcher (navbar) ---------- */
.dcx-lang-switch{
  min-width:40px; height:40px; flex:none;
  display:grid; place-items:center;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--dcx-line);
  background: var(--dcx-surface);
  color: var(--dcx-gold-2);
  font-family:'Outfit',sans-serif;
  font-size:13px; font-weight:700; letter-spacing:.5px;
  text-decoration:none !important;
  transition: transform .3s var(--dcx-ease), border-color .3s, background .3s;
}
.dcx-lang-switch:hover{ transform:translateY(-2px); border-color: var(--dcx-gold-2); }

/* ==========================================================================
   ONE LANGUAGE AT A TIME  (menu AND in-page bilingual pairs)
   Large parts of this site were authored bilingually: an English half marked
   .en next to an Arabic half marked .ar / .ar-sub / .ar-inline / .ar-cta /
   .dcx-drop-ar / .uae-topbar-ar / .uae-footer-ar. That was fine before there
   was a language switcher — now each language must show only its own half, or
   every label reads as a duplicate.

   This file is always loaded, so BOTH directions are handled here.

   Exception: the dropdown, drawer and quote CTA hold their English as a bare
   text node (no .en wrapper), so CSS can't hide it. Those go through te() in
   includes/header.php instead, and it's their Arabic span that hides in Arabic
   (see uae-rtl.css). */
[dir="ltr"] .ar,
[dir="ltr"] .ar-sub,
[dir="ltr"] .ar-inline,
[dir="ltr"] .ar-cta,
[dir="ltr"] .dcx-drop-ar,
[dir="ltr"] .uae-topbar-ar,
[dir="ltr"] .uae-topbar-sep,
[dir="ltr"] .uae-footer-ar,
[dir="ltr"] .dcx-m-title span[dir="rtl"]{ display: none !important; }

[dir="rtl"] .en,
[dir="rtl"] .uae-topbar-en{ display: none !important; }

/* the quote pill's Arabic half carried the divider between the two labels */
[dir="ltr"] .dcx-nav-quote{ gap: 0; }

/* ==========================================================================
   27. MOBILE OVERFLOW — contain the footer's stray Bootstrap row
   The footer drops a Bootstrap .row straight into a full-bleed wrapper
   (.bvgkl3Girl) that has no padding, so the row's negative gutters poke 15px
   past each edge. The global overflow clamp hides the scrollbar, but the
   footer still sits 15px off-centre and reads as a gap on phones. A .container
   would normally supply this 15px — the footer is missing one, so add it. */
.FooterBackground .bvgkl3Girl{
  padding-left: 15px;
  padding-right: 15px;
}
/* belt-and-braces: on small screens nothing may cause horizontal scroll */
@media (max-width: 575.98px){
  html, body{ overflow-x: hidden; max-width: 100%; }
}

/* ==========================================================================
   28. PORTFOLIO GALLERY (data-driven drop-in grid — includes/portfolio-data.php)
   ========================================================================== */
.dcx-pf-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
  max-width:1200px;
  margin:10px auto 0;
  padding:0 12px;
}
.dcx-pf-item{
  position:relative;
  display:block;
  aspect-ratio: 4 / 3;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--dcx-line-soft);
  background: var(--dcx-surface);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  transition: transform .35s var(--dcx-ease), box-shadow .35s var(--dcx-ease), border-color .35s;
  text-decoration:none !important;
}
.dcx-pf-item img{
  width:100%; height:100%;
  object-fit:cover;
  object-position: top;   /* full-page website captures are very tall — show the
                             hero at the TOP, not a blank band from the middle */
  display:block;
  transition: transform .5s var(--dcx-ease);
}
.dcx-pf-item:hover{
  transform: translateY(-5px);
  border-color: var(--dcx-gold-2);
  box-shadow: 0 20px 44px rgba(31,166,220,.28);
}
.dcx-pf-item:hover img{ transform: scale(1.06); }
/* clickable (real image) tiles get a zoom badge + overlay */
a.dcx-pf-item::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(7,10,19,.55));
  opacity:0; transition: opacity .35s var(--dcx-ease);
}
a.dcx-pf-item:hover::after{ opacity:1; }
.dcx-pf-zoom{
  position:absolute; right:12px; bottom:12px;
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:50%;
  background: var(--dcx-grad-gold);
  color:#04252b; font-size:16px;
  opacity:0; transform: translateY(6px);
  transition: opacity .35s var(--dcx-ease), transform .35s var(--dcx-ease);
  z-index:2;
}
a.dcx-pf-item:hover .dcx-pf-zoom{ opacity:1; transform:none; }
.dcx-pf-item.is-placeholder{ cursor:default; }

@media (max-width: 991.98px){ .dcx-pf-grid{ grid-template-columns: repeat(3, 1fr); gap:14px; } }
@media (max-width: 575.98px){ .dcx-pf-grid{ grid-template-columns: repeat(2, 1fr); gap:10px; } }

/* ---- lightbox gallery (opened + driven by js/uae-modern.js) ---- */
.dcx-lb{
  position:fixed; inset:0; z-index:99999;
  display:none;
  background: rgba(4,7,13,.94);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  /* scroll tall full-page website captures; centre shorter ones */
  overflow-y:auto; overflow-x:hidden;
  padding:70px 20px 40px;
  text-align:center;
}
.dcx-lb.open{ display:block; }
.dcx-lb-stage{ min-height: calc(100vh - 110px); display:flex; align-items:center; justify-content:center; }
.dcx-lb img{
  /* fit the whole image inside the screen — logos, cards, banners never appear
     oversized or need scrolling */
  max-width: 92vw;
  max-height: 86vh;
  width:auto; height:auto;
  border-radius:12px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  background:#fff;
}
/* close + counter + prev/next controls (fixed, always reachable) */
.dcx-lb-close, .dcx-lb-nav{
  position:fixed; z-index:2;
  border:none; border-radius:50%;
  background: rgba(255,255,255,.14); color:#fff; cursor:pointer;
  display:grid; place-items:center;
  transition: background .25s, transform .25s;
}
.dcx-lb-close{ top:18px; right:22px; width:46px; height:46px; font-size:24px; }
.dcx-lb-nav{ top:50%; transform:translateY(-50%); width:54px; height:54px; font-size:30px; }
.dcx-lb-prev{ left:18px; }
.dcx-lb-next{ right:18px; }
.dcx-lb-close:hover, .dcx-lb-nav:hover{ background: var(--dcx-grad-gold); color:#04252b; }
.dcx-lb-nav:hover{ transform: translateY(-50%) scale(1.08); }
.dcx-lb-count{
  position:fixed; top:24px; left:50%; transform:translateX(-50%); z-index:2;
  color:#cfe6f2; font-family:'Outfit',sans-serif; font-size:13px; letter-spacing:1px;
  background: rgba(255,255,255,.10); padding:6px 14px; border-radius:999px;
}
@media (max-width: 575.98px){
  .dcx-lb-nav{ width:44px; height:44px; font-size:24px; }
  .dcx-lb-prev{ left:8px; } .dcx-lb-next{ right:8px; }
}

/* ---- Cards tab: business-card designs are 1.75:1, not 4:3 ----
   Give these tiles the card ratio and use `contain`, so the whole design shows
   (logos + names + contact) instead of cover cropping the sides off. */
#pk5 .dcx-pf-grid{ gap:20px; }
#pk5 .dcx-pf-item{
  aspect-ratio: 7 / 4;
  background: transparent;
  border:none;
  box-shadow:none;
}
#pk5 .dcx-pf-item img{
  object-fit: contain;
  object-position: center;
  border-radius:14px;
}
#pk5 .dcx-pf-item:hover{ box-shadow:none; transform: translateY(-4px); }
#pk5 a.dcx-pf-item::after{ display:none; }
@media (max-width: 991.98px){ #pk5 .dcx-pf-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 575.98px){ #pk5 .dcx-pf-grid{ grid-template-columns: repeat(1,1fr); } }

/* ---- lightbox: very tall full-page website captures size by width + scroll -- */
.dcx-lb img.dcx-lb-tall{ max-height:none; width:min(92vw, 980px); }

/* ==========================================================================
   29. PORTFOLIO TILES — per-tab fit so each design shows FULLY, centred
   Every tab's images have their own aspect; give each tab that ratio and use
   `contain` so the whole logo/design is centred with nothing cropped.
   ========================================================================== */
/* ---- Website: real captures are 820×564 (1.454). Give the tile that exact
   ratio + `contain` so the WHOLE above-the-fold design shows — nothing cropped.
   Because the ratio matches the image, `contain` fills edge-to-edge with no
   letterbox for the standard 820×564 shots. ---- */
#pk3 .dcx-pf-item{ aspect-ratio: 820 / 564; }   /* website  1.454 */
#pk3 .dcx-pf-item img{
  object-fit: contain;
  object-position: center;
  background:#ffffff;                            /* neutral, only shows behind the few tall shots */
}
/* the handful of genuine full-page (very tall) captures would `contain` down to
   a thin sliver — show their hero instead (top-aligned cover); the full,
   scrollable page is one click away in the lightbox. Tagged in render (php). */
#pk3 .dcx-pf-item.dcx-pf-tall img{
  object-fit: cover;
  object-position: top;
  background:transparent;
}
#pk1 .dcx-pf-item{ aspect-ratio: 1 / 1; }     /* logo        1.00 */
#pk6 .dcx-pf-item{ aspect-ratio: 9 / 8; }     /* corporate   1.13 */
#pk7 .dcx-pf-item{ aspect-ratio: 10 / 7; }    /* banners     1.43 */
#pk2 .dcx-pf-item{ aspect-ratio: 3 / 2; }     /* brochure    1.50 */
#pk4 .dcx-pf-item{ aspect-ratio: 14 / 9; }    /* stationery  1.56 */
#pk1 .dcx-pf-item img,
#pk6 .dcx-pf-item img,
#pk7 .dcx-pf-item img,
#pk2 .dcx-pf-item img,
#pk4 .dcx-pf-item img{
  object-fit: contain;
  object-position: center;
  background:#ffffff;                          /* logos/designs sit on white */
  padding:6%;                                  /* breathing room around the mark */
}