/* Apps section */
#apps .apps-wrap{ display:flex; align-items:center; justify-content:center }
#apps .icon-container{ display:flex; gap:30px; flex-wrap:wrap; justify-content:center }
#apps .icon-container a{ display:inline-block; border-radius:22px; text-decoration:none; outline:none; -webkit-tap-highlight-color: transparent }
#apps .icon-container a:focus{ outline:none !important; box-shadow:none !important }
#apps .icon-container a:focus-visible{ outline:none !important; box-shadow:none !important }
#apps .raised-icon{
  position: relative;
  width: var(--app-size, 110px);
  min-height: var(--app-size, 110px);
  height: auto;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 8px 12px;
  border-radius: 22px;
  background: var(--icon-bg, #1e1e1e);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  cursor:pointer;
  flex: 0 1 auto;
  transform-style: preserve-3d;
  transition: all .35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 20px rgba(0,0,0,.3), 0 6px 10px rgba(0,0,0,.15);
}
#apps .raised-icon i{ font-size: 34px; color: var(--primary, #4a90e2); transform: translateZ(30px); transition: all .3s ease; flex-shrink: 0 }
#apps .raised-icon::before{
  content:""; position:absolute; inset:0; border-radius:22px;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  transform: translateZ(20px);
}
#apps .raised-icon:hover{ transform: rotateX(-10deg) rotateY(10deg) translateZ(30px) scale(1.06) }
#apps .raised-icon:hover i{ color: var(--accent, #50c878); transform: translateZ(50px) }
#apps .app-name{
  position:static;
  margin-top:6px;
  font-size:12px;
  font-weight:700;
  color:#fff;
  transform: translateZ(20px);
  text-align:center;
  line-height:1.25;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}
#apps .icon-code i{ --primary: #f39c12 }
#apps .icon-design i{ --primary: #9b59b6 }
#apps .icon-analytics i{ --primary: #3498db }
@media (max-width: 640px) {
  #apps .icon-container { gap: 14px; row-gap: 18px; justify-content: center; align-items: stretch; }
  #apps .raised-icon { width: min(100%, 132px); min-height: 96px; }
  #apps .raised-icon i { font-size: 28px; }
  #apps .app-name { font-size: 11px; }
}

/* Services slider container (spacing only) */
#owl-news { max-width: 1150px; margin: 0 auto; padding: 30px 10px; overflow: visible; position: relative }

/* Agencies section */
#agencies{
  background-color: #f1f6ff;
}
#agencies #news-slider{
  margin-top: 80px;
  position: relative;
}
#agencies .post-slide{
  background: #fff;
  margin: 20px 15px 20px;
  border-radius: 15px;
  padding-top: 1px;
  box-shadow: 0px 14px 22px -9px #bbcbd8;
}
#agencies .post-slide .post-img{
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin: -12px 15px 8px 15px;
  margin-left: -10px;
}
#agencies .post-slide .post-img img{
  width: 100%;
  height: 180px;
  min-height: 180px;
  object-fit: cover;
  display: block;
  transform: scale(1,1);
  transition:transform 0.2s linear;
}
#agencies .post-slide:hover .post-img img{
  transform: scale(1.1,1.1);
}
#agencies .post-slide .over-layer{
  width:100%;
  height:100%;
  position: absolute;
  top:0;
  left:0;
  opacity:0;
  background: linear-gradient(-45deg, rgba(6,190,244,0.75) 0%, rgba(45,112,253,0.6) 100%);
  transition:all 0.50s linear;
}
#agencies .post-slide:hover .over-layer{
  opacity:1;
  text-decoration:none;
}
#agencies .post-slide .over-layer i{
  position: relative;
  top:45%;
  text-align:center;
  display: block;
  color:#fff;
  font-size:25px;
}
#agencies .post-slide .post-content{
  background:#fff;
  padding: 2px 20px 40px;
  border-radius: 15px;
}
#agencies .post-slide .post-title a{
  font-size:15px;
  font-weight:bold;
  color:#333;
  display: inline-block;
  text-transform:uppercase;
  transition: all 0.3s ease 0s;
  text-decoration: none;
}
#agencies .post-slide .post-title a:hover{
  text-decoration: none;
  color:#3498db;
}
#agencies .post-slide .post-description{
  line-height:24px;
  color:#808080;
  margin-bottom:25px;
}
#agencies .post-slide .post-meta-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  gap: 20px;
}
#agencies .post-slide .post-date{
  color:#a9a9a9;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#agencies .post-slide .post-date i{
  font-size:16px;
  color: #CFDACE;
}

/* عدد المشاهدات في كروت الوكالات */
#agencies .post-slide .post-views{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  color:#6b7280;
  font-size:13px;
  white-space:nowrap;
}

#agencies .post-slide .post-views i{
  font-size:12px;
  margin-inline-end:4px;
}
#agencies .post-slide .read-more{
  padding: 7px 20px;
  float: right;
  font-size: 12px;
  background: #2196F3;
  color: #ffffff;
  box-shadow: 0px 10px 20px -10px #1376c5;
  border-radius: 25px;
  text-transform: uppercase;
  text-decoration: none;
}
#agencies .post-slide .read-more:hover{
  background: #3498db;
  text-decoration:none;
  color:#fff;
}
/* OwlCarousel 2.x Navigation for Agencies */
#agencies .owl-nav{
  position: absolute;
  top: -13%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 10;
}
#agencies .owl-nav button{
  pointer-events: auto;
  background: #fff !important;
  border: none !important;
  border-radius: 50px;
  padding: 0 18px 0 15px;
  box-shadow: 3px 14px 25px -10px #92b4d0;
  transition: background 0.5s ease 0s;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#agencies .owl-nav button.owl-prev{
  position: absolute;
  left: 15px;
  padding: 0 18px 0 15px;
}
#agencies .owl-nav button.owl-next{
  position: absolute;
  right: 15px;
  padding: 0 15px 0 18px;
  box-shadow: -3px 14px 25px -10px #92b4d0;
}
#agencies .owl-nav button span,
#agencies .owl-nav button i{
  display: none;
}
#agencies .owl-nav button.owl-prev::after,
#agencies .owl-nav button.owl-next::after{
  content:"\f104";
  font-family: FontAwesome;
  color: #333;
  font-size:30px;
  line-height: 1;
}
#agencies .owl-nav button.owl-next::after{
  content:"\f105";
}
#agencies .owl-nav button:hover{
  background: #f0f7ff !important;
}
@media only screen and (max-width:1280px) {
  #agencies .post-slide .post-content{
    padding: 0px 15px 25px 15px;
  }
}

.vgrid{ display:grid }
/* My Videos section */
#myvideos .vgrid{ 
  display:grid; gap:18px; 
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media(min-width:640px){ #myvideos .vgrid{ grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media(min-width:1024px){ #myvideos .vgrid{ grid-template-columns: repeat(3, minmax(0, 1fr)) } }

#myvideos .vitem{ background: rgba(255,255,255,.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border:1px solid rgba(255,255,255,.6); border-radius:14px; overflow:hidden; box-shadow:0 10px 22px -10px rgba(0,0,0,.18); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease }
#myvideos .vitem:hover{ transform: translateY(-3px); box-shadow:0 16px 32px -12px rgba(0,0,0,.22); border-color: rgba(255,255,255,.8) }

#myvideos .vthumb{ position:relative; background:#e5e7eb; background-size:cover; background-position:center; aspect-ratio:16/9; overflow:hidden }
#myvideos .vbadge{ position:absolute; top:8px; inset-inline-start:8px; background:rgba(255,255,255,.92); color:#111; font-size:12px; font-weight:800; padding:4px 8px; border-radius:8px }
#myvideos .vplay{ position:absolute; inset:0; margin:auto; width:48px; height:48px; display:grid; place-items:center; border-radius:9999px; background: #1e3a8a; color:#fff; border:none; box-shadow:0 8px 20px rgba(30,58,138,.35) }
#myvideos .vplay i{ font-size:18px }

#myvideos .vbody{ padding:12px 14px; background:#fff; text-align:center }
#myvideos .vtitle{ font-size:16px; font-weight:800; color:#111; margin:0 0 6px }
#myvideos .vdesc{ font-size:13px; color:#6b7280; margin:0 }

/* Optional: nav/dots styling for videos slider */
#myvideos .owl-nav{ position:absolute; inset-inline:0; top:50%; transform:translateY(-50%); display:flex; justify-content:space-between; pointer-events:none }
#myvideos .owl-nav button{ pointer-events:auto; width:36px; height:36px; border-radius:9999px; background:#fff !important; border:1px solid rgba(0,0,0,.12); box-shadow:0 8px 20px rgba(0,0,0,.15) }
#myvideos .owl-dots{ display:flex; justify-content:center; gap:8px; margin-top:12px }
#myvideos .owl-dots .owl-dot span{ width:10px; height:10px; border-radius:9999px; background:#c7d2fe; display:block }
#myvideos .owl-dots .owl-dot.active span{ background:#3b82f6 }

.post-slide{
    background: #fff;
    margin: 20px 15px 20px;
    border-radius: 15px;
    padding-top: 1px;
    box-shadow: 0px 14px 22px -9px #bbcbd8;
}
.post-slide .post-img{
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 10px 10px 0px 0px;
    margin: 0;
}
.post-slide .post-img img{
    width: 100%;
    height: auto;
    transform: scale(1,1);
    transition:transform 0.2s linear;
}
.post-slide:hover .post-img img{
    transform: scale(1.1,1.1);
}
.post-slide .over-layer{
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    opacity:0;
    background: linear-gradient(-45deg, rgba(6,190,244,0.75) 0%, rgba(45,112,253,0.6) 100%);
    transition:all 0.50s linear;
}
.post-slide:hover .over-layer{
    opacity:1;
    text-decoration:none;
}
.post-slide .post-img a{text-decoration:none;}
.post-slide .over-layer i{
    position: relative;
    top:45%;
    text-align:center;
    display: block;
    color:#fff;
    font-size:25px;
}
.post-slide .post-content{
    background:#fff;
    padding: 2px 20px 40px;
    border-radius: 15px;
}
.post-slide .post-title a{
    font-size:15px;
    font-weight:bold;
    color:#333;
    display: inline-block;
    text-transform:uppercase;
    transition: all 0.3s ease 0s;
    text-decoration: none;
}
.post-slide .post-title a:hover{
    text-decoration: none;
    color:#0066FF;
}
.post-slide .post-description{
    line-height:24px;
    color:#808080;
    margin-bottom:25px;
}
.post-slide .post-date{
    color:#a9a9a9;
    font-size: 14px;
}
.post-slide .post-date:before {
  content: '\f017';
  font-family: var(--fa-style-family, "Font Awesome 6 Pro");
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  margin-right: 8px;
}

.post-slide .read-more{
    padding: 7px 20px;
    float: right;
    font-size: 12px;
    background: #0066FF;
    color: #ffffff;
    box-shadow: 0px 10px 20px -10px #1376c5;
    border-radius: 25px;
    text-transform: uppercase;
    text-decoration: none;
}
.post-slide .read-more:after {
    content: "\00bb";
    font-family: var(--fa-style-family, "Font Awesome 6 Pro");
    transition: 0.5s;
  margin-left:15px;
}
.post-slide .read-more:hover{
    background: #1e1e1e;
    text-decoration:none;
    color:#fff;
}
/* OwlCarousel2 nav/dots styling */
#owl-news .owl-nav{ position:absolute; inset-inline:0; top:50%; transform:translateY(-50%); display:flex; justify-content:space-between; pointer-events:none }
#owl-news .owl-nav button{ pointer-events:auto; width:40px; height:40px; border-radius:9999px; background:#fff !important; border:1px solid rgba(0,0,0,.12); box-shadow:0 8px 20px rgba(0,0,0,.15); display:flex; align-items:center; justify-content:center; color:#111 }
#owl-news .owl-nav .owl-prev::before, 
#owl-news .owl-nav .owl-next::before{ content: none !important }
#owl-news .owl-nav .owl-prev span, 
#owl-news .owl-nav .owl-next span{ display: none !important }
/* Draw one arrow icon via ::after (Unicode chevrons, no external font) */
#owl-news .owl-nav .owl-prev::after, 
#owl-news .owl-nav .owl-next::after{ display:block; font-size:18px; line-height:1; color:inherit }
#owl-news .owl-nav .owl-prev::after{ content:"\276E" }
#owl-news .owl-nav .owl-next::after{ content:"\276F" }
#owl-news .owl-nav button:hover{ background: var(--primary, #3b82f6) !important; color:#fff; }
#owl-news .owl-dots{ display:flex; justify-content:center; gap:8px; margin-top:10px }
#owl-news .owl-dots .owl-dot span{ width:10px; height:10px; border-radius:9999px; background:#c7d2fe; display:block }
#owl-news .owl-dots .owl-dot.active span{ background:#3b82f6 }
@media only screen and (max-width:1280px) {
    .post-slide .post-content{
        padding: 0px 15px 25px 15px;
    }
}
/* Global full-page loader */
#page-loader{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.88);
  z-index:99999;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
#page-loader.active{
  opacity:1;
  pointer-events:auto;
}
#page-loader .spinner{
  width:46px;
  height:46px;
  border-radius:999px;
  border:3px solid rgba(148,163,184,.4);
  border-top-color:#0ea5e9;
  animation:loader-spin .7s linear infinite;
}
@keyframes loader-spin{ to{ transform:rotate(360deg); } }

:root[data-theme="sky"]{
      /* Base sizing */
      --font-size:17px; 
      /* Site backgrounds/text (preserved) */
      --background:#0a0a0f;
      --foreground:#ffffff;
      --card:#1e1e3f;
      --card-foreground:#ffffff;
      --popover:#1e1e3f;
      --popover-foreground:#f1f5f9;
      /* User-provided palette */
      --blue:#007bff;
      --indigo:#6610f2;
      --purple:#6f42c1;
      --pink:#e83e8c;
      --red:#dc3545;
      --orange:#fd7e14;
      --yellow:#ffc107;
      --green:#28a745;
      --teal:#20c997;
      --cyan:#17a2b8;
      --white:#fff;
      --gray:#6c757d;
      --gray-dark:#343a40;
      /* Map semantic roles to the provided palette */
      --primary: var(--blue);
      --primary-foreground:#ffffff;
      --secondary: var(--gray);
      --secondary-foreground:#ffffff;
      --success: var(--green);
      --info: var(--cyan);
      --warning: var(--yellow);
      --danger: var(--red);
      --light: #f8f9fa;
      --dark: var(--gray-dark);
      /* Additional roles used in site */
      --muted:#334155;
      --muted-foreground:#cbd5e1;
      --accent: var(--teal);
      --accent-foreground:#ffffff;
      --destructive: var(--red);
      --destructive-foreground:#ffffff;
      --border: rgba(148,163,184,.2);
      --input: rgba(148,163,184,.1);
      --input-background:#1e293b;
      --switch-background:#475569;
      --font-weight-medium:500;
      --font-weight-normal:400;
      --ring: var(--primary);
      /* Charts can align with palette */
      --chart-1: var(--primary);
      --chart-2: var(--cyan);
      --chart-3: var(--purple);
      --chart-4: var(--green);
      --chart-5: var(--orange);
      --radius:.75rem;
      /* Sidebar colors based on palette */
      --sidebar:#1e1e3f;
      --sidebar-foreground:#f1f5f9;
      --sidebar-primary: var(--primary);
      --sidebar-primary-foreground:#ffffff;
      --sidebar-accent:#1e293b;
      --sidebar-accent-foreground:#f1f5f9;
      --sidebar-border:rgba(148,163,184,.2);
      --sidebar-ring: var(--primary);
      /* Breakpoints and fonts from provided list */
      --breakpoint-xs:0;
      --breakpoint-sm:576px;
      --breakpoint-md:768px;
      --breakpoint-lg:992px;
      --breakpoint-xl:1200px;
      --font-family-sans-serif:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      --font-family-monospace:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      /* Global sizing */
      --nav-height:56px;
      --container-max:1200px;
      --section-py-mobile:52px;
      --section-py-desktop:72px;
    }
    /* Flip animations for card transitions */
    @keyframes flipIn{ from{ transform:rotateY(-90deg) scale(.9); opacity:0 } to{ transform:rotateY(0) scale(1); opacity:1 } }
    @keyframes flipOut{ from{ transform:rotateY(0) scale(1); opacity:1 } to{ transform:rotateY(90deg) scale(.9); opacity:0 } }
    /* overrides and additional theme variables */
    :root[data-theme="sky"]{
      --radius:1rem; 
      --card-radius:24px; 
      --btn-radius:32px; 
      --nav-radius:20px; 
      --nav-sub-radius:14px;
      --section-radius:28px; 
      --news-card-radius:24px; 
      --ticker-radius:32px; 
      --ticker-btn-radius:32px; 
      --label-radius:9999px;
      /* Revert to previous sky-blue dark palette */
      --background:#0f0f23;                 /* background */
      --foreground:#e2e8f0;                 /* text */
      --card:#1e1e3f;                       /* blocks */
      --card-foreground:#f1f5f9;
      --popover:#1e1e3f; 
      --popover-foreground:#f1f5f9;
      --primary:#3b82f6;                    /* sky blue */
      --primary-foreground:#ffffff;
      --secondary:#1e293b;                  /* slate */
      --secondary-foreground:#f1f5f9;
      --accent:#06b6d4;                     /* cyan */
      --accent-foreground:#ffffff;
      --border: rgba(148,163,184,.2);
      --input: rgba(148,163,184,.1);
      --ring:#3b82f6;
      /* Navbar baseline for glass on dark */
      --nav-bg:#0f172a;
      --nav-foreground:#e5e7eb; 
      --nav-link-bg: rgba(17,19,24,.55);
      --nav-link-hover-bg: rgba(17,19,24,.75);
      --nav-link-active-bg: var(--primary);
      --btn-bg: var(--primary); 
      --btn-fg: var(--primary-foreground);
      --carousel-gap: 24px;
      --card-w: 280px; /* adopt crew-card width */
      --card-h: 380px; /* adopt crew-card height */
      --arrow-margin: 8px;
    }
    .dark{
      --background:#030712; --foreground:#f8fafc; --card:#0f172a; --card-foreground:#f8fafc; --popover:#0f172a; --popover-foreground:#f8fafc; --primary:#06b6d4; --primary-foreground:#ffffff; --secondary:#1e293b; --secondary-foreground:#f8fafc; --muted:#334155; --muted-foreground:#94a3b8; --accent:#8b5cf6; --accent-foreground:#ffffff; --destructive:#dc2626; --destructive-foreground:#ffffff; --border:rgba(148,163,184,.2); --input:rgba(148,163,184,.1); --ring:#06b6d4; --font-weight-medium:500; --font-weight-normal:400; --chart-1:#06b6d4; --chart-2:#3b82f6; --chart-3:#8b5cf6; --chart-4:#10b981; --chart-5:#f59e0b; --sidebar:#0f172a; --sidebar-foreground:#f8fafc; --sidebar-primary:#06b6d4; --sidebar-primary-foreground:#ffffff; --sidebar-accent:#1e293b; --sidebar-accent-foreground:#f8fafc; --sidebar-border:rgba(148,163,184,.2); --sidebar-ring:#06b6d4;
    }
    /* Site-wide theme overrides (user palette) */
    body{ background: var(--background) !important; color: var(--foreground) !important }
    a{ color: inherit }
    /* Interaction polish: remove default tap highlight and focus outlines */
    *{ -webkit-tap-highlight-color: transparent }
    a:focus, button:focus, [role="button"]:focus{ outline: none }
    a:active, button:active, [role="button"]:active{ outline: none; box-shadow: none }
    /* Accessibility-friendly focus without boxes: subtle underline/color */
    a:focus-visible{ outline: none; box-shadow: none; text-decoration: underline; text-underline-offset: 3px }
    button:focus-visible, [role="button"]:focus-visible{
      outline: none; box-shadow: none; filter: brightness(1.05)
    }
    /* Simple text-style link for 'عرض الكل' and مشابه */
    :root{ --btn-px:14px; --btn-py:10px; --btn-radius:24px }
    .navlike{ 
      display:inline-flex; align-items:center; gap:.5rem; 
      color: #38bdf8; text-decoration: none; font-weight: 700;
      transition: color .2s ease; 
      border: none !important; box-shadow: none !important; outline: none !important;
    }
    .navlike:hover{ color: #7dd3fc }
    .navlike:focus, .navlike:active{ outline: none !important; box-shadow: none !important; border-color: transparent !important }
    .navlike:focus-visible{ outline: none !important; box-shadow: none !important; text-decoration: underline; text-underline-offset: 3px }
    .navlike i{ font-size:1em; line-height:1 }
    /* Section separators (compat shim: use variables, avoid forcing !important) */
    .section-sep .label{ color: var(--section-sep-label-color, var(--section-sep-color, var(--primary))); border-color: var(--section-sep-color, var(--primary)) }
    .section-sep .line{ background:linear-gradient(to left, transparent, var(--section-sep-color, var(--primary)), transparent) }
    /* Night mode: لون التسمية من لوحة التحكم غالباً للوضع الفاتح — نطابق لون الخط ليكون مقروءاً */
    html[data-theme="dark"] .section-sep .label,
    html[data-theme="sky"] .section-sep .label,
    html.dark .section-sep .label,
    body.dark .section-sep .label{
      color: var(--section-sep-color, var(--primary)) !important;
    }
    /* Ads and Ticker */
    #adsbar .card, #ticker .card{ background: var(--secondary) !important; color: var(--foreground) !important; border-color: var(--border) !important }
    #adsbar .br-title, #ticker .br-title{ color: var(--primary) !important }
    #adsbar .breaking-news a, #ticker .breaking-news a{ color: var(--foreground) !important }
    #adsbar .breaking-news a:hover, #ticker .breaking-news a:hover{ color: var(--accent) !important }
    /* News cards */
    .news-card{ background: var(--card) !important; color: var(--card-foreground) !important; border-color: var(--border) !important }
    .news-card__excerpt{ color: color-mix(in oklab, var(--foreground), #000 10%) !important }
    .news-card__read-more:not(.theme-btn){ background: var(--secondary) !important; color: var(--foreground) !important; border-color: var(--border) !important }
    .news-card__read-more:not(.theme-btn):hover{ background: color-mix(in oklab, var(--secondary), #000 8%) !important }
    html{scroll-behavior:smooth}
    body{
      font-family:"Cairo",sans-serif;
      background: var(--background) !important;
      background-image: 
        radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(6, 182, 212, 0.06) 0%, transparent 50%),
        repeating-linear-gradient(
          45deg,
          transparent,
          transparent 2px,
          rgba(59, 130, 246, 0.02) 2px,
          rgba(59, 130, 246, 0.02) 4px
        ) !important;
      background-size: 100% 100%, 100% 100%, 40px 40px !important;
      background-position: 0 0, 0 0, 0 0 !important;
      background-attachment: fixed !important;
      color:var(--foreground);
      overflow-x:hidden; 
      margin:0; 
      position:relative; 
      min-height:100vh; 
      line-height:1.7;
      will-change: auto;
    }
    /* Unified page shell and section spacing (2025-style layout, colors unchanged) */
    .page-shell{
      width:100%;
      max-width:var(--container-max, 1200px);
      margin-inline:auto;
      padding-inline:1.25rem;
    }
    main{
      width:100%;
      max-width:var(--container-max, 1200px);
      margin-inline:auto;
      padding-inline:1.25rem;
    }
    section[id]{
      padding-block:var(--section-py-mobile, 3.25rem);
    }
    section[id] + section[id]{
      padding-top:calc(var(--section-py-mobile, 3.25rem) * .6);
    }
    @media (min-width: 768px){
      .page-shell,
      main{
        padding-inline:2rem;
      }
      section[id]{
        padding-block:var(--section-py-desktop, 4.5rem);
      }
      section[id] + section[id]{
        padding-top:calc(var(--section-py-desktop, 4.5rem) * .55);
      }
    }
    /* Simple background overlay */
    body:before{
      content:none; 
      position:fixed; 
      inset:0; 
      pointer-events:none; 
      z-index:0;
      background:none;
    }
    ::selection{ background: color-mix(in oklab, var(--primary) 35%, #000 65%); color: #fff }
    *{box-sizing:border-box}
    /* Banner core (responsive heights for HD / 2K / 4K) */
    .slider-container{
      position:relative;
      width:100%;
      height:clamp(260px, 60vh, 640px);
      overflow:hidden;
      z-index:20;
    }
    .slider-image{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      opacity:0;
      transform:scale(1.02);
      transition:opacity .8s ease,transform .8s ease;
      z-index:10;
    }
    .slider-image.active{opacity:1;transform:scale(1)}
    .overlay-fixed{position:absolute;z-index:120}
    .logo{position:absolute;top:16px;right:16px;display:flex;gap:16px;align-items:center;padding:8px 12px;z-index:140;flex-direction:row}
    .logo .box{width:64px;height:64px;min-width:64px;min-height:64px;border-radius:12px;background:#fff;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.15);flex-shrink:0}
    .logo .box img{width:100%;height:100%;object-fit:contain;display:block;padding:6px}
    .logo .box:after{display:none}
    .logo .text{font-family:"Cairo","Kufi",sans-serif;font-weight:700;letter-spacing:0;animation:fade 2.5s forwards;text-shadow:0 2px 4px rgba(0,0,0,0.3);font-size:clamp(1rem,2vw,1.25rem);line-height:1.3;white-space:nowrap;flex-shrink:0}
    .content-right{right:20px;bottom:16px;max-width:420px;background:var(--banner-box-bg, rgba(0,0,0,.45));border:1px solid var(--banner-box-border, #1f2430);border-radius:14px;box-shadow:var(--banner-box-shadow, 0 0 18px rgba(0,0,0,.6));padding:12px 14px}
    .content-text{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease;position:absolute;inset:0;padding-inline:2px}
    .content-text.active{opacity:1;transform:translateY(0);position:relative}
    .features-left{left:20px;top:20%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:360px}
    @media(max-width:768px){ .features-left{grid-template-columns:1fr;max-width:260px} }
    /* Slightly taller banner on medium/large screens */
    @media(min-width:768px){ .slider-container{ height:clamp(340px, 60vh, 680px) } }
    @media(min-width:1280px){ .slider-container{ height:clamp(420px, 60vh, 720px) } }
    @media(min-width:1536px){ .slider-container{ height:clamp(480px, 65vh, 780px) } }
    .counter{left:16px;top:10px;background:var(--banner-counter-bg, rgba(0,0,0,.6));border:1px solid var(--banner-counter-border, #4b5563);border-radius:10px;padding:4px 8px;text-align:center;color: var(--banner-counter-fg, inherit); z-index:130}
    /* Slide number flip animation */
    @keyframes countFlip{0%{transform:translateY(8px);opacity:0}40%{opacity:1}100%{transform:translateY(0);opacity:1}}
    #banner .counter #slideNumber.tick{animation:countFlip .45s ease}
    .slider-controls{left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:8px;align-items:center;background:rgba(0,0,0,.25);border:1px solid #4b5563;border-radius:12px;padding:6px 10px; z-index:130}
    .slider-controls button{ all: unset }
    .dots{display:flex;gap:6px}
    .dots span{width:8px;height:8px;border-radius:9999px;background:#fff;opacity:.4}
    .dots span.active{opacity:1;box-shadow:0 0 6px #fff}

    /* Original animations */
    @keyframes expand { 0%{height:0} 40%{height:0} 60%{height:80%} 100%{height:90%} }
    @keyframes test { 0%{transform:scale(0);right:100%} 40%{transform:scale(1);right:100%} 60%{transform:scale(1);right:100%} 100%{right:0} }
    @keyframes fade { 0%{opacity:0} 65%{opacity:0} 100%{opacity:1} }
    @keyframes slideInRight { from{transform:translateX(100px);opacity:0} to{transform:translateX(0);opacity:1} }
    @keyframes slideInLeft { from{transform:translateX(-100px);opacity:0} to{transform:translateX(0);opacity:1} }
    .content-right-initial{animation:slideInRight 1.2s ease-out forwards}
    .features-left-initial{animation:slideInLeft 1.2s ease-out forwards}
    /* Modern Cards Design */
    .card{
      background: var(--card);
      color: var(--card-foreground);
      border: 1px solid var(--border);
      border-radius: var(--card-radius, 20px);
      box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    
    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .card:hover{ 
      transform: translateY(-4px) scale(1.02); 
      box-shadow: 
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04),
        0 0 0 1px rgba(59, 130, 246, 0.1);
      border-color: rgba(59, 130, 246, 0.3);
    }
    
    .card:hover::before {
      opacity: 1;
    }
    /* Page View: disable hover motion only when body has .page-view */
    body.page-view .card:hover{ transform:none !important; box-shadow:none !important; border-color:var(--border) !important }
    body.page-view .card:hover::before{ opacity:0 !important }
    /* App bars (navbar/footer) controlled by theme */
    nav, footer{background: color-mix(in oklab, var(--nav-bg, rgba(15,23,42,.6)), transparent 0%) !important; color:var(--nav-foreground) !important}
    /* Glass effect */
    nav{ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: color-mix(in oklab, #ffffff 12%, transparent); z-index:100 }
    nav a, footer a{color:var(--nav-foreground) !important}
    nav{min-height:var(--nav-height, 44px); --nav-item-h: 36px}
    nav ul li a{
      border-radius: var(--nav-radius, 32px) !important;
      background: rgba(17,19,24,.55) !important;
      color: var(--nav-link-foreground, #e5e7eb) !important;
      border: 1px solid rgba(255,255,255,.06) !important;
      box-shadow: 0 4px 14px rgba(0,0,0,.28) !important;
      padding-inline:14px !important; font-size:.95rem !important;
      height: var(--nav-item-h) !important; line-height:1; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; position:relative;
      padding: 0 14px !important;
      transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    nav ul li a:hover{ background: rgba(17,19,24,.75) !important; color:#fff !important; border-color: rgba(255,255,255,.12) !important; box-shadow: 0 6px 18px rgba(0,0,0,.35) !important }
    nav ul li a.active{ background: color-mix(in oklab, var(--primary) 30%, #111318 70%) !important; color:#fff !important; border-color: color-mix(in oklab, var(--primary), #ffffff 10%) !important; box-shadow: 0 6px 20px color-mix(in oklab, var(--primary) 40%, transparent) !important; font-weight:600 }
    /* Remove old underline indicator */
    nav ul li a::after{ display:none !important }
    /* Navbar dropdown submenu (refined) */
    nav ul{ list-style:none; margin:0; padding:0; gap:.4rem; display:flex; align-items:center }
    /* Align and size dropdown links like modern pills (icon + label) */
    nav ul li ul li a{
      height:auto !important;
      padding:6px 14px !important;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.6rem;
      text-align:right;
      font-size:.9rem;
      line-height:1.4;
    }
    nav .brand, nav form[role="search"], nav ul{ align-items:center }
    nav ul li{ position:relative }
    nav ul li.has-sub > a{ position:relative; padding-inline-end:26px }
    /* Keep arrow ▾ and neutralize global underline for this trigger */
    nav ul li.has-sub > a::after{
      content:'▾'; position:absolute; left:8px; top:50%; transform:translateY(-50%);
      font-size:11px; opacity:.8; background:none !important; height:auto; right:auto; bottom:auto;
    }
    /* Add a subtle vertical separator to hint dropdown */
    nav ul li.has-sub > a::before{
      content:''; position:absolute; left:22px; top:50%; transform:translateY(-50%);
      width:1px; height:60%; background: var(--border); opacity:.6;
    }
    nav ul li ul{ display:none; position:absolute; top:100%; right:0; margin-top:2px; background: rgba(12,14,20,.78); color:var(--card-foreground); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:8px; min-width:230px; z-index:40; box-shadow:0 16px 36px rgba(0,0,0,.55); animation:ddown .22s ease-out; overflow:visible; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px) }
    /* Hover buffer above first-level submenu to avoid accidental close */
    nav ul li ul::before{ content:''; position:absolute; left:0; right:0; top:-16px; height:16px }
    nav ul li ul li.has-sub{ position:relative }
    nav ul li ul li.has-sub > a{ position:relative; padding-inline-end:24px }
    nav ul li ul li.has-sub > a::after{ content:'▸'; position:absolute; left:8px; top:50%; transform:translateY(-50%); font-size:11px; opacity:.8 }
    nav ul li ul li.has-sub > ul{ display:none; position:absolute; top:0; right:100%; margin-right:-2px; background:var(--card); color:var(--card-foreground); border:1px solid var(--border); border-radius:12px; padding:8px; min-width:200px; z-index:45; box-shadow:0 12px 28px rgba(0,0,0,.38); overflow:visible }
    /* Hover buffer between trigger and nested submenu (RTL) */
    nav ul li ul li.has-sub > ul::before{ content:''; position:absolute; top:0; right:-16px; width:16px; height:100% }
    nav ul li ul li.has-sub:hover > ul{ display:block }
    nav ul li:hover > ul{ display:block }
    /* Keep open when JS adds .open-hover */
    nav ul li.open-hover > ul{ display:block }
    nav ul li ul li.open-hover > ul{ display:block }
    /* Auto-open: when hovering 'خدمات موقعي', open its submenu and the first nested submenu */
    nav ul li.has-sub:hover > a[href="#site-services"] + ul{ display:block }
    nav ul li.has-sub:hover > a[href="#site-services"] + ul > li.has-sub:first-child > ul{ display:block }
    /* Also show via JS-controlled state for click/touch */
    nav ul li.open > ul{ display:block }
    nav ul li ul li.open > ul{ display:block }
    nav ul li ul a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.6rem;
      margin:2px 4px;
      padding:8px 14px;
      border-radius: var(--nav-sub-radius, 14px);
      background:transparent;
      color:var(--nav-link-foreground, #e5e7eb);
      border:1px solid transparent;
      transition:background .2s ease, border-color .2s ease, transform .18s ease;
    }
    nav ul li ul a i{
      font-size:.95rem;
      opacity:.9;
      flex-shrink:0;
      margin-inline-start:.25rem;
      margin-inline-end:0;
    }
    nav ul li ul a span,
    nav ul li ul a strong{
      display:inline-block;
      white-space:nowrap;
    }
    nav ul li ul a:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); color:#fff }
    /* Distinct color for the second-level submenu (inside "خدمات موقعي") */
    nav ul li ul > li.has-sub > ul{
      background: color-mix(in oklab, var(--primary) 10%, rgba(12,14,20,.9));
      border-color: color-mix(in oklab, var(--primary) 24%, #ffffff 8%);
    }
    nav ul li ul > li.has-sub > ul a:hover{
      background: color-mix(in oklab, var(--primary) 12%, rgba(20,24,32,.9));
      border-color: color-mix(in oklab, var(--primary) 34%, #ffffff 10%);
    }
    @keyframes ddown{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:translateY(0) } }

    
    /* Inputs */
    input[type="search"]{
      background:var(--input-background);
      border-color:var(--border);
      color:var(--foreground);
      height: var(--nav-item-h);
      padding: .35rem .7rem;
      font-size: .9rem;
      border-radius: 10px;
    }
    /* Modern Buttons Design */
    .btn{
      border-radius: var(--btn-radius, 12px);
      padding: var(--btn-py, 0.75rem) var(--btn-px, 1.5rem);
      box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      font-weight: 600;
      letter-spacing: 0.025em;
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    
    .btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.5s ease;
    }
    
    .btn:hover{ 
      /* إزالة التكبير لتفادي أي ضبابية على الشاشات عالية الدقة */
      transform: translateY(-2px); 
      box-shadow: 
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05),
        0 0 0 1px rgba(59, 130, 246, 0.2);
    }
    
    .btn:hover::before {
      left: 100%;
    }
    
    .btn:active {
      transform: translateY(0);
    }

    /* ===== Global interaction cleanup (no frames/underlines on focus/hover) ===== */
    a,
    a:hover,
    a:focus,
    a:active,
    a:visited{
      text-decoration:none !important;
    }
    *:focus,
    *:focus-visible,
    *:active{
      outline:none !important;
      box-shadow:none !important;
    }

    /* ===== Responsive tweaks for main sections (apps, banner) ===== */
    /* Apps: icon size scales with viewport */
    #apps .raised-icon{
      width:clamp(80px, 22vw, 110px);
      height:clamp(80px, 22vw, 110px);
    }
    #apps .icon-container{
      gap:clamp(16px, 4vw, 30px);
    }


    /* Banner: ensure good look on ultra-wide/4K while keeping max height */
    @media(min-width:1920px){
      .slider-container{
        height:clamp(520px, 60vh, 820px);
      }
      .content-right{ max-width:480px; }
      .features-left{ max-width:420px; }
    }

    /* ===== Navbar visibility rules (simplified) ===== */
    /* لا نغيّر display للروابط من هنا حتى لا يحدث تعارض، نسمح فقط بإظهار زر الموبايل عند الشاشات الصغيرة إن لزم */
    @media (max-width: 992px){
    }
    /* Modern Theme Buttons */
    .theme-btn, a.theme-btn, button.theme-btn{
      background: linear-gradient(135deg, var(--primary), color-mix(in oklab, var(--primary) 80%, white 20%)) !important;
      color: var(--primary-foreground) !important;
      border: 1px solid rgba(255,255,255,.2) !important;
      border-radius: var(--btn-radius, 12px) !important;
      padding: var(--btn-py, 12px) var(--btn-px, 24px) !important;
      box-shadow: 
        0 4px 6px -1px rgba(59, 130, 246, 0.1),
        0 2px 4px -1px rgba(59, 130, 246, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
      position: relative !important;
      overflow: hidden !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
    }
    
    .theme-btn::before, a.theme-btn::before, button.theme-btn::before {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: -100% !important;
      width: 100% !important;
      height: 100% !important;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
      transition: left 0.5s ease !important;
    }
    
    .theme-btn:hover, a.theme-btn:hover, button.theme-btn:hover {
      transform: translateY(-2px) scale(1.05) !important;
      box-shadow: 
        0 10px 15px -3px rgba(59, 130, 246, 0.2),
        0 4px 6px -2px rgba(59, 130, 246, 0.1),
        0 0 0 1px rgba(59, 130, 246, 0.3) !important;
      background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 90%, white 10%), var(--primary)) !important;
    }
    
    .theme-btn:hover::before, a.theme-btn:hover::before, button.theme-btn:hover::before {
      left: 100% !important;
    }
    /* Unified control buttons for sliders/tickers/breaking/news/ads */
    .ctrl-btn{ display:grid; place-items:center; width:40px; height:40px; border-radius: var(--ticker-btn-radius, 32px); border:1px solid var(--ctrl-border, var(--border)); background: var(--ctrl-bg, var(--nav-link-bg)); color: var(--ctrl-fg, var(--foreground)); box-shadow: 0 2px 10px rgba(0,0,0,.2); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease }
    .ctrl-btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.25); filter: brightness(1.05) }
    .ctrl-btn:focus{ outline: none }
    .ctrl-btn:focus-visible{ outline: none; box-shadow: none; filter: brightness(1.06) }
    .ctrl-btn--sm{ width:34px; height:34px; font-size: 14px }
    .ctrl-btn[data-variant="primary"]{ background: var(--primary); color: var(--primary-foreground); border-color: color-mix(in oklab, var(--primary), black 18%) }
    .ctrl-btn[data-variant="accent"]{ background: var(--accent); color: var(--accent-foreground); border-color: color-mix(in oklab, var(--accent), black 18%) }
    .ctrl-btn[data-variant="secondary"]{ background: var(--secondary); color: var(--secondary-foreground); border-color: color-mix(in oklab, var(--secondary), black 18%) }
    /* Rounded links variants */
    .card a.rounded-full[data-variant="primary"]{background:var(--primary) !important;color:var(--primary-foreground) !important;border:1px solid color-mix(in oklab, var(--primary), black 10%);border-radius:var(--btn-radius, 24px) !important;padding:var(--btn-py, 8px) var(--btn-px, 14px) !important;box-shadow:var(--btn-shadow, none) !important}
    .card a.rounded-full[data-variant="primary"]:hover{background:color-mix(in oklab, var(--primary) 85%, black 15%) !important}
    .card a.rounded-full[data-variant="accent"]{background:var(--accent) !important;color:var(--accent-foreground) !important;border:1px solid color-mix(in oklab, var(--accent), black 10%);border-radius:var(--btn-radius, 24px) !important;padding:var(--btn-py, 8px) var(--btn-px, 14px) !important;box-shadow:var(--btn-shadow, none) !important}
    .card a.rounded-full.theme-btn{background:var(--btn-bg) !important;color:var(--btn-fg) !important;border:1px solid color-mix(in oklab, var(--btn-bg), black 20%);border-radius:var(--btn-radius, 24px) !important;padding:var(--btn-py, 8px) var(--btn-px, 14px) !important;box-shadow:var(--btn-shadow, none) !important}
    
    /* Scroll-in animations */
    .reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s ease}
    .reveal.in{opacity:1;transform:none}
    /* Theme toggle */
    .theme-toggle{
      width: var(--nav-item-h); height: var(--nav-item-h); border-radius:9999px;
      background:#111318; border:1px solid #1f2430; color:#fff;
      display:grid; place-items:center;
    }
    .theme-toggle i, .theme-toggle svg{ font-size:16px; width:16px; height:16px }
    nav ul li a i{ font-size:.95em }
    /* Ads bar theme colors */
    #adsbar .card{ background:var(--ads-bg, #0c0c0c) !important; color:var(--ads-foreground, #ffffff) !important }
    /* Breaking (Owl Carousel) styles - scoped */
    #breaking{ background: transparent }
    #breaking .rounded-xl{ position:relative }
    #breaking #news-slider{ margin-top: 6px }
    /* Unified card size */
    #breaking .post-slide{ background:#fff; margin:20px 15px; border-radius:20px; padding-top:1px; box-shadow:0 14px 22px -9px rgba(187,203,216,.9); display:flex; flex-direction:column; height: 380px }
    #breaking .post-img{ position:relative; overflow:hidden; border-radius:14px; margin:-12px 15px 8px 15px }
    #breaking .post-img img{ width:100%; height: 260px; object-fit:cover; transform:scale(1); transition:transform .25s linear }
    #breaking .post-slide:hover .post-img img{ transform:scale(1.06) }
    #breaking .over-layer{ position:absolute; inset:0; opacity:0; background:linear-gradient(-45deg, rgba(6,190,244,.75) 0%, rgba(45,112,253,.6) 100%); transition:opacity .35s ease }
    #breaking .post-slide:hover .over-layer{ opacity:1; text-decoration:none }
    #breaking .over-layer i{ position:absolute; inset-inline:0; top:45%; text-align:center; color:#fff; font-size:22px }
    #breaking .post-content{ background:#fff; padding:8px 16px 8px; border-radius:20px; display:flex; flex-direction:column; flex:1 }
    #breaking .post-title a{ font-size:16px; font-weight:800; color:#111; display:inline-block; text-decoration:none; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
    #breaking .post-title a:hover{ color:#2563eb }
    #breaking .post-description{ line-height:1.6; color:#555; margin:.5rem 0 .5rem; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
    #breaking .post-date{ color:#6b7280; font-size:13px; margin-top:auto }
    #breaking .post-date i{ font-size:16px; margin-inline-end:8px; color:#94a3b8 }
    #breaking .read-more{ padding:7px 16px; align-self:flex-start; font-size:12px; background:#2196F3; color:#fff; box-shadow:0 10px 20px -10px #1376c5; border-radius:9999px; text-transform:uppercase; text-decoration:none }
    #breaking .read-more:hover{ background:#2563eb }
    /* Owl nav buttons - centered, consistent */
    #breaking .owl-nav{ position:absolute; inset:0; margin:0; pointer-events:none }
    #breaking .owl-nav button{ pointer-events:auto; background:var(--nav-link-bg,#111318) !important; border:1px solid var(--border); min-width:44px; height:44px; padding:0 14px; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 6px 18px rgba(0,0,0,.25); position:absolute; top:50%; transform:translateY(-50%); transition:transform .2s, box-shadow .2s, filter .2s }
    #breaking .owl-nav button:hover{ transform:translateY(-50%) translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.3); filter:brightness(1.05) }
    #breaking .owl-nav .owl-prev{ inset-inline-start:8px }
    #breaking .owl-nav .owl-next{ inset-inline-end:8px }
    #breaking .owl-nav button i{ font-size:20px; color:var(--foreground) }
    #breaking .owl-nav button span{ font-size:14px; color:var(--foreground) }
    @media(max-width:768px){
      #breaking .post-slide{ height: 330px }
      #breaking .post-img img{ height: 210px }
    }
    /* Modern Responsive Design */
    @media(max-width: 1024px){
      .container, .max-w-7xl{ 
        padding-left: 1.5rem !important; 
        padding-right: 1.5rem !important;
      }
      
      .news-card{ 
        min-width: 280px !important; 
        height: 14rem !important;
      }
      
      .content-wrapper{ 
        gap: 0.75rem;
        padding: 0.75rem;
      }
    }
    
    @media(max-width: 768px){
      .logo{
        top: 12px;
        right: 12px;
        left: auto;
        gap: 12px;
        padding: 6px 10px;
        flex-direction: row-reverse;
        width: auto;
        max-width: calc(100% - 24px);
      }
      .logo .box{
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
      }
      .logo .text{
        font-size: clamp(0.875rem, 3vw, 1rem);
      }
      
      .content-right{
        right: 12px;
        left: 12px;
        max-width: none;
      }
      
      .features-left{
        top: 12px;
        left: 12px;
      }
      
      .card{
        padding: 1.25rem !important;
        border-radius: 16px !important;
      }
      
      .btn{
        padding: 0.875rem 1.5rem !important; 
        font-size: 0.9rem;
        min-height: 44px;
      }
      
      nav ul{
        flex-direction: column; 
        gap: 0.75rem;
      }
      
      nav ul li a{
        padding: 0.875rem 1.25rem !important; 
        font-size: 0.9rem;
        height: 44px;
      }
      
      .grid{
        grid-template-columns: 1fr !important; 
        gap: 1.25rem !important;
      }
      
      .content-wrapper{
        flex-direction: column;
        gap: 1rem;
      }
      
      .news-card{
        min-width: 100% !important; 
        height: 12rem !important;
        margin: 0.25rem;
      }
      
      .news-card__text-wrapper{
        padding: 1rem;
      }
      
      .news-card__title{
        font-size: 1rem;
      }
      
      #services-icons .icon{
        width: 60px;
        height: 60px;
      }
      
      #services-icons .icon i{
        font-size: 1.25rem;
      }
    }
    
    @media(max-width: 640px){
      .container, .max-w-7xl{
        padding-left: 1rem !important; 
        padding-right: 1rem !important;
      }
      
      .card{
        padding: 1rem !important;
        border-radius: 12px !important;
      }
      
      .btn{
        padding: 0.75rem 1.25rem !important; 
        font-size: 0.875rem;
        min-height: 40px;
      }
      
      h1{ font-size: 1.5rem !important; }
      h2{ font-size: 1.25rem !important; }
      h3{ font-size: 1.125rem !important; }
      h4{ font-size: 1rem !important; }
      
      .news-card{
        height: 10rem !important;
        margin: 0.125rem;
      }
      
      .news-card__text-wrapper{
        padding: 0.875rem;
      }
      
      .news-card__title{
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
      }
      
      .news-card__post-date{
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
      }
      
      #services-icons .icon{
        width: 56px;
        height: 56px;
      }
      
      #services-icons .icon i{
        font-size: 1.125rem;
      }
    }
    
    @media(max-width: 480px){
      .container, .max-w-7xl{
        padding-left: 0.75rem !important; 
        padding-right: 0.75rem !important;
      }
      
      .card{
        padding: 0.875rem !important;
        border-radius: 10px !important;
      }
      
      .btn{
        padding: 0.625rem 1rem !important; 
        font-size: 0.8rem;
        min-height: 36px;
      }
      
      h1{ font-size: 1.375rem !important; }
      h2{ font-size: 1.125rem !important; }
      h3{ font-size: 1rem !important; }
      h4{ font-size: 0.95rem !important; }
      
      .news-card{
        height: 9rem !important;
        min-width: 100% !important;
      }
      
      .news-card__text-wrapper{
        padding: 0.75rem;
      }
      
      .news-card__title{
        font-size: 0.9rem;
        margin-bottom: 0.375rem;
      }
      
      .news-card__post-date{
        font-size: 0.7rem;
        margin-bottom: 0.375rem;
      }
    }
    
    /* Advanced Performance Optimizations */
    * {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }
    
    /* Hardware acceleration for smooth animations */
    .card, .btn, .theme-btn, .news-card, #services-icons .icon {
      will-change: transform;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
    }
    
    /* Optimize repaints and reflows */
    .card::before, .btn::before, .theme-btn::before, #services-icons .icon::before {
      will-change: opacity, transform;
    }
    
    /* Reduce motion for better performance and accessibility */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      
      .card:hover, .btn:hover, .theme-btn:hover, .news-card:hover {
        transform: none !important;
      }
    }
    
    /* Optimize images and media */
    img {
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
    }
    
    /* Lazy loading optimization */
    img[loading="lazy"] {
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    img[loading="lazy"].loaded {
      opacity: 1;
    }
    
    /* GPU acceleration for smooth scrolling */
    html {
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
    }
    
    /* Optimize backdrop filters for better performance */
    .card, .news-card {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    
    /* Reduce layout thrashing */
    .content-wrapper, .grid {
      contain: layout style;
    }
    
    /* Base design tokens (light) */
    :root{
      --background: #f4f7fb;
      --foreground: #0b1220;
      --card: #ffffff;
      --card-foreground: #0b1220;
      --muted: #e5e9f2;
      --border: #e5e9f2;
      --primary: #3b82f6;
      --secondary: #e9eef8;
      --accent: #06b6d4;
    }
    /* Dark mode tokens */
    html.dark, body.dark{
      --background: #0b1220;
      --foreground: #ffffff;
      --card: #0f172a;
      --card-foreground: #ffffff;
      --muted: #0f172a;
      --border: #1f2937;
      --primary: #3b82f6;
      --secondary: #111827;
      --accent: #22d3ee;
    }
    /* Optimize font loading */
    /* Cairo: assets/fonts/cairo/cairo.css (cdn-local.php) */
    @font-face {
      font-family: 'Inter';
      font-display: swap;
    }
    /* Modern centered separators (unified) */
    :root{ --section-sep-width: 88%; --section-sep-thickness: 3px; --section-sep-color: var(--primary); --section-sep-label-color: var(--section-sep-color) }
    .section-sep{ display:flex; align-items:center; justify-content:center; gap:14px; margin:28px auto 18px; padding:0 12px; width: var(--section-sep-width, 88%) }
    .section-sep .line{ height: var(--section-sep-thickness, 3px) !important; flex:1; background:linear-gradient(to left, transparent, var(--section-sep-color), transparent) }
    .section-sep .label{
      white-space:nowrap;
      padding:6px 14px;
      border:1px solid var(--section-sep-color);
      border-radius:9999px;
      color: var(--section-sep-label-color, var(--section-sep-color));
      background: color-mix(in oklab, var(--card) 70%, transparent 30%);
      font-weight:800;
      font-size: var(--section-sep-label-size, clamp(14px, 2.6vw, 16px));
      letter-spacing:.8px;
      text-transform:uppercase;
      opacity:.9;
    }
    /* Site content width: responsive */
    .container{ max-width:96% !important; }
    .max-w-7xl{ max-width:96% !important; }
    @media (max-width: 639px){ /* Mobile */
      .container, .max-w-7xl{ max-width:100% !important; }
    }
    @media (min-width: 640px) and (max-width: 1023px){ /* Tablet */
      .container, .max-w-7xl{ max-width:96% !important; }
    }
    @media (min-width: 1024px) and (max-width: 1535px){ /* Desktop */
      .container, .max-w-7xl{ max-width:92% !important; }
    }
    @media (min-width: 1536px){ /* Large screens */
      .container, .max-w-7xl{ max-width:88% !important; }
    }
    /* restore comfortable gutters */
    .container.mx-auto.max-w-7xl.px-4{ padding-left:1rem !important; padding-right:1rem !important }
    /* Keep ads bar and ticker full-bleed */
    #adsbar .container{ max-width:100% !important; padding-left:0 !important; padding-right:0 !important }
    #ticker .container{ max-width:100% !important; padding-left:0 !important; padding-right:0 !important }
    /* Keep divider centered with custom width */
    .section-sep{ width: var(--section-sep-width, 88%); margin-left:auto; margin-right:auto }
    /* Global container clamp */
    .container, .max-w-7xl{ max-width: min(96%, var(--container-max, 1200px)) !important }
    @media (min-width: 1536px){ .container, .max-w-7xl{ max-width: min(88%, var(--container-max, 1200px)) !important } }

    /* Unified Typography Scale for Arabic */
    html{ 
      font-size: 16px;
      font-family: 'Tajawal', 'Cairo', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif;
    }
    
    body{ 
      line-height: 1.7;
      font-weight: 400;
      letter-spacing: 0.01em;
      text-align: right;
      direction: rtl;
    }
    
    /* Unified Heading Sizes */
    h1{ 
      font-size: 2rem;
      font-weight: 800;
      line-height: 1.3;
      letter-spacing: -0.01em;
      margin-bottom: 1rem;
      text-align: right;
    }
    
    h2{ 
      font-size: 1.75rem;
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: 0;
      margin-bottom: 0.875rem;
      text-align: right;
    }
    
    h3{ 
      font-size: 1.5rem;
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: 0;
      margin-bottom: 0.75rem;
      text-align: right;
    }
    
    h4{ 
      font-size: 1.25rem;
      font-weight: 600;
      line-height: 1.5;
      letter-spacing: 0;
      margin-bottom: 0.625rem;
      text-align: right;
    }
    
    h5{ 
      font-size: 1.125rem;
      font-weight: 600;
      line-height: 1.5;
      margin-bottom: 0.5rem;
      text-align: right;
    }
    
    h6{ 
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.5;
      margin-bottom: 0.5rem;
      text-align: right;
    }
    
    /* Unified Text Sizes */
    p, li, a, button, input, span, div{ 
      font-size: 1rem;
      line-height: 1.7;
      font-weight: 400;
      text-align: right;
    }
    
    /* Unified Size Classes */
    .text-xs { font-size: 0.75rem; }
    .text-sm { font-size: 0.875rem; }
    .text-base { font-size: 1rem; }
    .text-lg { font-size: 1.125rem; }
    .text-xl { font-size: 1.25rem; }
    .text-2xl { font-size: 1.5rem; }
    .text-3xl { font-size: 1.875rem; }
    .text-4xl { font-size: 2.25rem; }
    
    /* Unified Font Weights */
    .font-light { font-weight: 300; }
    .font-normal { font-weight: 400; }
    .font-medium { font-weight: 500; }
    .font-semibold { font-weight: 600; }
    .font-bold { font-weight: 700; }
    .font-extrabold { font-weight: 800; }
    
    /* Unified Spacing */
    .mb-1 { margin-bottom: 0.25rem; }
    .mb-2 { margin-bottom: 0.5rem; }
    .mb-3 { margin-bottom: 0.75rem; }
    .mb-4 { margin-bottom: 1rem; }
    .mb-5 { margin-bottom: 1.25rem; }
    .mb-6 { margin-bottom: 1.5rem; }
    
    .mt-1 { margin-top: 0.25rem; }
    .mt-2 { margin-top: 0.5rem; }
    .mt-3 { margin-top: 0.75rem; }
    .mt-4 { margin-top: 1rem; }
    .mt-5 { margin-top: 1.25rem; }
    .mt-6 { margin-top: 1.5rem; }
    
    /* Unified Padding */
    .p-1 { padding: 0.25rem; }
    .p-2 { padding: 0.5rem; }
    .p-3 { padding: 0.75rem; }
    .p-4 { padding: 1rem; }
    .p-5 { padding: 1.25rem; }
    .p-6 { padding: 1.5rem; }
    
    .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
    .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
    .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
    .px-4 { padding-left: 1rem; padding-right: 1rem; }
    .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
    .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    
    .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
    .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
    .py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
    .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }

    /* Unified buttons sizing and alignment */
    .btn, .theme-btn, a.theme-btn, button.theme-btn, .card a.rounded-full{
      min-height: 40px;
      font-weight: 700;
      letter-spacing: .2px;
      padding-left: var(--btn-px, 14px) !important;
      padding-right: var(--btn-px, 14px) !important;
      text-align:center;
    }
    .btn i, .theme-btn i{ margin-inline-start:.25rem }

    /* Make primary actions consistent width */
    .btn, .theme-btn, a.theme-btn, button.theme-btn{ min-width: 150px }

    /* Services section alignment */
    #services-icons .mt-auto{ display:flex; flex-direction:column; align-items:center }
    #services-icons .theme-btn{ width: fit-content }
    /* Force 3 columns on large screens regardless of utility classes */
    #services-icons .grid{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important }
    @media(max-width:1024px){ #services-icons .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important } }
    @media(max-width:640px){ #services-icons .grid{ grid-template-columns: 1fr !important } }

    /* Avoid navbar overlap on pages using injected nav */
    body.has-global-nav{ padding-top: calc(var(--nav-height, 56px) + 8px) }

    /* Modern Premium Glass Navbar */
    
    /* Flexcards announcements section styles removed */
    /* Modern Services Icon Cards */
    #services-icons .icon{ 
      width: 80px; 
      height: 80px; 
      border-radius: 20px; 
      display: grid; 
      place-items: center; 
      background: linear-gradient(135deg, var(--primary), color-mix(in oklab, var(--primary) 80%, white 20%)); 
      color: var(--primary-foreground);
      box-shadow: 
        0 8px 16px -4px rgba(59, 130, 246, 0.15),
        0 4px 8px -2px rgba(59, 130, 246, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    #services-icons .icon::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    
    #services-icons .icon::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    #services-icons .icon:hover {
      transform: translateY(-4px) scale(1.05);
      box-shadow: 
        0 12px 24px -4px rgba(59, 130, 246, 0.25),
        0 8px 16px -2px rgba(59, 130, 246, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
    
    #services-icons .icon:hover::before {
      opacity: 1;
    }
    
    #services-icons .icon:hover::after {
      width: 100px;
      height: 100px;
    }
    
    #services-icons .icon i {
      font-size: 2rem;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 2;
      position: relative;
    }
    
    #services-icons .icon:hover i {
      transform: scale(1.15) rotate(8deg);
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
      color: white;
    }
    /* Modern News Cards Design */
    .content-wrapper{ 
      margin:0 auto; 
      max-width:1200px; 
      display:flex; 
      flex-flow:row wrap; 
      justify-content:center; 
      gap:1rem; 
      padding:1rem;
    }
    
    .news-card{ 
      position:relative; 
      margin:.5rem; 
      height:16rem; 
      overflow:hidden; 
      border-radius:var(--news-card-radius, 16px); 
      flex:1; 
      min-width:300px; 
      box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.05);
      background:var(--news-card-bg, var(--card)); 
      color:var(--card-foreground); 
      border:1px solid var(--border);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    
    @media(min-width:900px){ 
      .news-card{ 
        height:20rem;
        min-width:320px;
      } 
    }
    
    .news-card::before{ 
      content:""; 
      position:absolute; 
      inset:0; 
      background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.8) 100%); 
      z-index:1;
      transition: opacity 0.3s ease;
    }
    
    .news-card__card-link{ 
      position:absolute; 
      inset:0; 
      z-index:2;
    }
    
    .news-card__image{ 
      width:100%; 
      height:100%; 
      display:block; 
      object-fit:cover; 
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
      position:relative; 
      z-index:0;
    }
    
    .news-card__text-wrapper{ 
      position:absolute; 
      bottom:0; 
      padding:1rem; 
      width:100%; 
      z-index:2;
    }
    
    .news-card__title{ 
      margin:0 0 .75rem 0; 
      transition: all 0.3s ease; 
      color: var(--news-title, #ffffff);
      font-size: 1.1rem;
      font-weight: 700;
      line-height: 1.3;
    }
    
    .news-card__post-date{ 
      font-size:.8rem; 
      margin-bottom:.75rem; 
      color: var(--news-text, #cbd5e1);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    .news-card__details-wrapper{ 
      max-height:0; 
      opacity:0; 
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
      overflow:hidden;
    }
    
    @media(min-width:900px){
      .news-card:hover{ 
        transform: translateY(-8px) scale(1.02);
        box-shadow:
          0 20px 25px -5px rgba(0, 0, 0, 0.1),
          0 10px 10px -5px rgba(0, 0, 0, 0.04),
          0 0 0 1px rgba(59, 130, 246, 0.2);
      }
      
      .news-card:hover .news-card__details-wrapper{ 
        max-height:20rem; 
        opacity:1;
      }
      
      .news-card:hover .news-card__text-wrapper{ 
        background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 50%, transparent 100%);
        padding: 1.25rem 1rem 1rem;
      }
      
      .news-card:hover .news-card__title{ 
        color: var(--accent);
        transform: translateY(-2px);
      }
      
      .news-card:hover .news-card__image{ 
        transform: scale(1.1);
      }
      
      .news-card:hover::before {
        opacity: 0.3;
      }
    }
    
    .news-card__excerpt{ 
      font-weight:400; 
      color: var(--news-text, #cbd5e1);
      line-height: 1.5;
      margin-bottom: 1rem;
    }
    
    .news-card__read-more:not(.theme-btn){ 
      background: rgba(59, 130, 246, 0.1); 
      color: var(--accent); 
      display:inline-flex; 
      align-items: center;
      gap: 0.5rem;
      padding:.75rem 1rem; 
      border-radius:8px; 
      margin-top:1rem; 
      border:1px solid rgba(59, 130, 246, 0.2); 
      font-size:.85rem; 
      text-decoration:none;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    
    .news-card__read-more:hover:not(.theme-btn) {
      background: rgba(59, 130, 246, 0.2);
      border-color: rgba(59, 130, 246, 0.4);
      transform: translateX(4px);
    }
    
    .news-card__read-more i{ 
      position:relative; 
      transition: all 0.3s ease;
    }
    
    .news-card__read-more:hover i{ 
      transform: translateX(2px);
    }
    /* visual refinements: icons/buttons/chips/corners */
    .news-card__read-more:not(.theme-btn){ background:#000; color:#bbb; display:inline-block; padding:.5rem .8rem; border-radius:.5rem; margin-top:1rem; border:1px solid #444; font-size:.85rem; text-decoration:none }
    i.fas, i.fa, i.far, i.fab, .bi{ 
      font-size:1rem; 
      line-height:1; 
      vertical-align:middle;
      transition: all 0.3s ease;
    }
    .icon, .h-10.w-10{ 
      box-shadow:0 6px 18px rgba(0,0,0,.25);
      transition: all 0.3s ease;
    }
    img.rounded-md{ border-radius:12px }
    img.rounded-lg{ border-radius:16px }
    img.rounded-xl{ border-radius:20px }
    
    /* Simple icon animations */
    .icon:hover i, .btn:hover i, a:hover i {
      transform: scale(1.05);
    }
    
    /* Simple active states */
    .btn:active, .card:active {
      transform: scale(0.98);
    }
    
    /* Smooth scroll behavior */
    html {
      scroll-behavior: smooth;
    }
    
    /* Focus styles for accessibility */
    .btn:focus, a:focus, input:focus, button:focus {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }
    
    
    
    /* Banner counter colors (from theme) */
    #banner .counter #slideNumber{ color: var(--banner-counter-numbers, var(--primary)) }
    #banner .counter #totalSlides{ color: var(--banner-counter-numbers, var(--primary)) }
    
    /* Banner hero badge (new design) */
    #banner .hero-badge{ 
      display:flex; align-items:center; gap:12px;
      background: rgba(2,6,23,.55);
      border:1px solid rgba(148,163,184,.25);
      border-radius: 18px;
      padding: 16px 18px;
      color: var(--banner-badge-fg, #e6f3ff);
      backdrop-filter: blur(6px);
      max-width: 520px;
      box-shadow: 0 8px 24px rgba(0,0,0,.25);
      position:absolute; right:24px; bottom:10px; z-index:5;
    }
    #banner .hero-badge .hb-icon{ 
      width:48px; height:48px; border-radius:14px;
      display:grid; place-items:center;
      background: var(--banner-icon-bg, #0ea5e9);
      color: var(--banner-icon-fg, #fff); box-shadow: var(--banner-icon-shadow, 0 6px 14px rgba(14,165,233,.35));
      flex:0 0 auto;
    }
    #banner .hero-badge .hb-text{ display:flex; flex-direction:column; gap:4px; min-width:0 }
    #banner .hero-badge .hb-title{ margin:0; font-size:1.1rem; font-weight:900; color: var(--banner-badge-title, #38bdf8) }
    #banner .hero-badge .hb-sub{ margin:0; font-size:.9rem; color: var(--banner-badge-sub, #e2f3ff); opacity:.95 }
    #banner .hero-badge .hb-desc{ margin:0; font-size:.85rem; color: var(--banner-badge-desc, #cfe8ff); opacity:.9; line-height:1.6 }
    @media (max-width: 640px){ 
      #banner .hero-badge{ max-width: 92vw; left:50%; right:auto; transform:translateX(-50%); bottom:10px }
    }
    
    /* Banner slider indicators (dots) */
    #banner .slider-controls{ gap:4px }
    #banner .slider-controls .dots{ display:flex; align-items:center; gap:4px }
    #banner .slider-controls .dots > .b-dot{ width:6px; height:6px; border-radius:50% !important; aspect-ratio:1/1; background: var(--banner-dot); border:1px solid color-mix(in oklab, var(--banner-dot), #fff 20%); display:inline-block; cursor:pointer; transition: transform .14s ease, background .14s ease; box-sizing: border-box }
    #banner .slider-controls .dots > .b-dot.active{ background: var(--banner-dot-active); transform: scale(1.08) }
    #banner .slider-controls .dots > .b-dot:hover{ transform: scale(1.1) }
    /* Prev/Next without colored ring (smooth circular caps) */
    #banner .slider-controls .ctrl-btn{ 
      width: 28px; height: 28px; padding: 0; 
      display: grid; place-items: center;
      border:1px solid var(--banner-ctrl-border, rgba(255,255,255,.35)) !important; 
      border-radius: var(--banner-ctrl-radius, 9999px); background: var(--banner-ctrl-bg, rgba(0,0,0,.35)); color: var(--banner-ctrl-fg, #fff);
      box-sizing: border-box; overflow: hidden;
      -webkit-backface-visibility: hidden; backface-visibility: hidden;
      -webkit-transform: translateZ(0); transform: translateZ(0);
    }
    #banner .slider-controls .ctrl-btn i{ pointer-events:none }
    #banner .slider-controls .ctrl-btn:hover{ background: rgba(255,255,255,.18) }
    #banner .slider-controls .ctrl-btn:focus{ outline: none; box-shadow: none }
    
    /* Banner caption overlay animation */
    #banner #bannerCaption{ will-change: opacity, transform }
    .bc-anim-enter{ animation: bcIn .45s ease forwards }
    .bc-anim-exit{ animation: bcOut .35s ease forwards }
    @keyframes bcIn{ from{ opacity:0; transform: translateY(10px) } to{ opacity:1; transform:none } }
    
    /* Services: Owl #news-slider (scoped) */
    #owl-news{ max-width:1150px; margin:0 auto; padding: 20px 12px 6px; overflow:visible }
    #news-slider{ margin-top: 10px; position: relative; overflow:visible }
    #news-slider .post-slide{ background: var(--card); color: var(--card-foreground); margin: 12px 8px; border-radius: 14px; padding-top: 1px; box-shadow: 0 12px 20px -10px rgba(0,0,0,.32); border:1px solid var(--border); display:flex; flex-direction:column; height: 340px }
    #news-slider .post-img{ position: relative; overflow: hidden; border-radius: 10px; margin: -10px 12px 8px 12px }
    #news-slider .post-img img{ width: 100%; height: 180px; object-fit: cover; transform: scale(1); transition: transform .25s linear }
    #news-slider .post-slide:hover .post-img img{ transform: scale(1.06) }
    #news-slider .over-layer{ position:absolute; inset:0; opacity:0; background: linear-gradient(-45deg, color-mix(in oklab, var(--accent) 75%, transparent) 0%, color-mix(in oklab, var(--primary) 60%, transparent) 100%); transition:opacity .35s ease }
    #news-slider .post-slide:hover .over-layer{ opacity:1; text-decoration:none }
    #news-slider .over-layer i{ position:absolute; inset-inline:0; top:45%; text-align:center; color:#fff; font-size:22px }
    #news-slider .post-content{ background: var(--card); padding: 8px 12px 14px; border-radius: 12px; display:flex; flex-direction:column; flex:1 }
    #news-slider .post-title a{ font-size:15px; font-weight:800; color: var(--card-foreground); display:inline-block; text-decoration:none; line-height:1.3 }
    #news-slider .post-title a:hover{ color: var(--primary) }
    #news-slider .post-description{ line-height:1.5; color: color-mix(in oklab, var(--foreground), #000 35%); margin:.4rem 0 .4rem; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
    #news-slider .post-date{ color: color-mix(in oklab, var(--foreground), #000 45%); font-size:12px; }
    #news-slider .post-views{ color: color-mix(in oklab, var(--foreground), #000 45%); font-size:12px; }
    /* نستخدم أيقونات Font Awesome فقط، بدون رموز إضافية */
    #news-slider .post-date::before{ content: none; margin-inline-end:0 }
    #news-slider .post-views::before{ content: none; margin-inline-end:0 }
    #news-slider .post-meta{ display:flex; gap:12px; align-items:center; margin-top:auto }
    #news-slider .post-date i{ font-size:16px; margin-inline-end:8px; color: color-mix(in oklab, var(--foreground), #000 65%) }
    #news-slider .read-more{ padding:6px 14px; align-self:flex-start; font-size:11px; background: var(--primary); color:#fff; border:1px solid color-mix(in oklab, var(--primary), #000 18%); border-radius:9999px; text-transform:uppercase; text-decoration:none; box-shadow: 0 10px 20px -10px color-mix(in oklab, var(--primary), #000 25%) }
    #news-slider .read-more:hover{ background: color-mix(in oklab, var(--primary) 85%, #000 15%) }
    /* Owl nav/dots themed */
    #news-slider .owl-nav{ position:absolute; inset-block-start:50%; inset-inline:0; transform:translateY(-50%); pointer-events:none }
    #news-slider .owl-nav button{ pointer-events:auto; position:absolute; width:42px; height:42px; display:grid; place-items:center; background: var(--nav-link-bg) !important; border:1px solid var(--border) !important; border-radius:9999px; color: var(--foreground) !important; box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .2s ease, box-shadow .2s ease }
    #news-slider .owl-nav .owl-prev{ inset-inline-start: -50px }
    #news-slider .owl-nav .owl-next{ inset-inline-end: -50px }
    #news-slider .owl-nav .owl-prev::before, #news-slider .owl-nav .owl-next::before{ font-size: 18px; line-height:1; content: "❮"; font-weight:700; color: var(--foreground) }
    #news-slider .owl-nav .owl-next::before{ content: "❯" }
    /* Keep chevrons consistent in RTL to avoid visual inversion */
    html[dir="rtl"] #news-slider .owl-nav .owl-prev::before{ content: "❮" }
    html[dir="rtl"] #news-slider .owl-nav .owl-next::before{ content: "❯" }
    #news-slider .owl-nav button:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.3) }
    #news-slider .owl-dots{ text-align:center; margin-top: 6px }
    #news-slider .owl-dot span{ width:6px; height:6px; background: rgba(255,255,255,.35); display:inline-block; border-radius:9999px; margin:0 3px; transition: transform .15s ease, background .15s ease }
    #news-slider .owl-dot.active span{ background: var(--primary); transform: scale(1.3) }
    @media(max-width:1024px){ #news-slider .post-img img{ height: 170px } }
    @media(max-width:640px){ #news-slider .post-img img{ height: 150px } }
    
    /* Company Announcements: Projects Cards (scoped) */
    #ads-company-projects{ background-color:transparent; color:#fff }
    #ads-company-projects .section-sep{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw) }
    #ads-company-projects .label{ color:#0ea5e9 }
    /* Responsive grid */
    #ads-company-projects .projects-grid{ max-width:1200px; margin:3rem auto 4rem; display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:28px; align-content:center; padding: 0 1rem }
    /* Card */
    #ads-company-projects .project{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:340px; border-radius:24px; overflow:hidden; color:#fff; background: linear-gradient(180deg, rgba(2,6,23,.38) 0%, rgba(2,6,23,.7) 100%); border:1px solid rgba(148,163,184,.22); box-shadow: 0 14px 36px rgba(0,0,0,.38); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; transform-style: preserve-3d }
    /* ensure anchor scroll positions account for sticky navbar */
    #ads-company-projects .project{ scroll-margin-top: 100px }
    /* Gradient veil */
    #ads-company-projects .project::after{ content:""; position:absolute; inset:0; background: radial-gradient(110% 60% at 50% 10%, rgba(14,165,233,.16), rgba(14,165,233,0) 55%) , linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.1)); z-index:2; pointer-events:none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: backdrop-filter .45s ease, -webkit-backdrop-filter .45s ease, background .45s ease }
    /* Subtle glow ring */
    #ads-company-projects .project::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background: linear-gradient(135deg, rgba(14,165,233,.65), rgba(99,102,241,.45), rgba(236,72,153,.35)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.28; pointer-events:none; z-index:3 }
    #ads-company-projects .project h1{ margin:0 0 .35rem 0; position:relative; z-index:4; font-weight:900; font-size:1.05rem; line-height:1.25; color:#a5f3fc; text-shadow:0 1px 2px rgba(0,0,0,.5) }
    #ads-company-projects .project__info{ position:relative; z-index:4; padding:1.2rem }
    #ads-company-projects .project__info h2{ margin:.25rem 0 .5rem; font-size:.9rem; font-weight:800; color:#e2e8f0; display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .75rem; border-radius:9999px; background: rgba(2,6,23,.45); border:1px solid rgba(203,213,225,.18) }
    #ads-company-projects .project__description{ opacity:.95; transition: opacity .35s ease }
    #ads-company-projects .description{ font-size:.95rem; color: rgba(241,245,249,.9); display:-webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden }
    #ads-company-projects .project__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; transform: translateZ(0) scale(1.04); filter: grayscale(45%) saturate(95%); transition: transform .7s cubic-bezier(.22,.61,.36,1), filter .45s ease }
    /* Hover/focus states */
    #ads-company-projects .project:hover, #ads-company-projects .project:focus-within{ transform: translateY(-8px) perspective(800px) rotateX(1.2deg); box-shadow: 0 22px 48px rgba(0,0,0,.5); border-color: rgba(148,163,184,.4) }
    #ads-company-projects .project:hover .project__img, #ads-company-projects .project:focus-within .project__img{ transform: translateZ(0) scale(1.1); filter: none }
    #ads-company-projects .project:hover::after, #ads-company-projects .project:focus-within::after{ background: radial-gradient(110% 60% at 50% 10%, rgba(14,165,233,.0), rgba(14,165,233,0) 55%) , linear-gradient(to top, rgba(0,0,0,.0), rgba(0,0,0,.0)); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px) }
    #ads-company-projects .project:hover h1{ color:#38bdf8 }
    #ads-company-projects .project:hover .description{ color:#fff }
    /* Optional tags styling (if present in markup) */
    #ads-company-projects .tag-container{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:.75rem 0; font-size:12px; color:#93c5fd }
    #ads-company-projects .tag{ padding:4px 10px; border:1px solid rgba(148,163,184,.35); border-radius:9999px; background: rgba(2,6,23,.35) }
    /* Pulse highlight when navigated via ticker */
    #ads-company-projects .project.pulse{ box-shadow: 0 0 0 4px rgba(14,165,233,.35), 0 0 0 10px rgba(14,165,233,.18), 0 22px 48px rgba(0,0,0,.5); transition: box-shadow .25s ease }
    @media (max-width: 720px){ 
      #ads-company-projects .project{ min-height:300px }
    }
    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      #ads-company-projects .project{ transition: none }
      #ads-company-projects .project__img{ transition: none }
    }
    
    /* Ads/news ticker: breaking-news styles (scoped, adapted to our layout) */
    #adsbar .card, #ticker .card{ position:relative; overflow:hidden }
    #adsbar .breaking-news, #ticker .breaking-news{ display:block; background-color:#292929; color:#c6c6c6; overflow:hidden; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.06); box-shadow:0 6px 18px rgba(0,0,0,.28) }
    #adsbar .breaking-news .wrapper, #ticker .breaking-news .wrapper{ width:100%; position:relative; height:40px; margin:0 }
    /* Title (we keep your external label, so we don't render .br-title inside) */
    #adsbar .breaking-news .br-title, #ticker .breaking-news .br-title{ display:none }
    /* Navigation area inside breaking-news is not used; we keep external buttons */
    #adsbar .breaking-news .br-navi, #ticker .breaking-news .br-navi{ display:none }
    /* Articles lane aligned to start (left:0) to sit beside the external label */
    #adsbar .breaking-news .br-article-list, #ticker .breaking-news .br-article-list{ position:absolute; left:0; top:0; right:0; line-height:40px; font-size:13px; overflow:hidden }
    #adsbar .breaking-news .br-article-list:after, #adsbar .breaking-news .br-article-list:before,
    #ticker .breaking-news .br-article-list:after, #ticker .breaking-news .br-article-list:before{ display:none }
    #adsbar .breaking-news .br-article-list-inner, #ticker .breaking-news .br-article-list-inner{ display:block; white-space:nowrap; position:relative }
    #adsbar .breaking-news .br-article, #ticker .breaking-news .br-article{ display:inline-block; white-space:nowrap; margin-right:24px; position:relative }
    #adsbar .breaking-news .br-article:before, #ticker .breaking-news .br-article:before{ content:'\f111'; font-family: FontAwesome; font-size:4px; padding-top:1px; position:absolute; right:-15px; color:rgba(255,255,255,.2) }
    #adsbar .breaking-news .br-article:last-child:before, #ticker .breaking-news .br-article:last-child:before{ display:none }
    #adsbar .breaking-news a, #ticker .breaking-news a{ color:#c6c6c6; text-decoration:none }
    #adsbar .breaking-news a strong, #ticker .breaking-news a strong{ display:inline-block; margin-left:100px; color:#fff; font-weight:700; border-bottom:1px solid transparent; padding-bottom:1px; line-height:14px; vertical-align:middle; transition:all .2s }
    #adsbar .breaking-news a:hover strong, #ticker .breaking-news a:hover strong{ border-color:#ccc }

    /* Fade mode: show one item, fade between */
    #adsbar .breaking-news.mode-fade .br-article-list{ position:absolute; left: calc(var(--bn-title-w) + 2px); right:2px }
    #adsbar .breaking-news.mode-fade .br-article-list-inner{ position:relative; white-space:normal; height:36px }
    #adsbar .breaking-news.mode-fade .br-article{ position:absolute; inset:0; display:block; margin:0; padding:0 8px; white-space:nowrap; opacity:0; transition: opacity .5s ease }
    #adsbar .breaking-news.mode-fade .br-article.is-active{ opacity:1 }
    #adsbar .breaking-news.mode-fade .br-article:before{ display:none }

    #ticker .breaking-news.mode-fade .br-article-list{ position:absolute; left: calc(var(--bn-title-w) + 2px); right:2px }
    #ticker .breaking-news.mode-fade .br-article-list-inner{ position:relative; white-space:normal; height:36px }
    #ticker .breaking-news.mode-fade .br-article{ position:absolute; inset:0; display:block; margin:0; padding:0 8px; white-space:nowrap; opacity:0; transition: opacity .5s ease }
    #ticker .breaking-news.mode-fade .br-article.is-active{ opacity:1 }
    #ticker .breaking-news.mode-fade .br-article:before{ display:none }

    /* CSS Scrolling Ticker (pure CSS) */
    @keyframes ticker-scroll {
      from { transform: translate3d(0,0,0); }
      to   { transform: translate3d(-50%,0,0); }
    }
    #adsbar .breaking-news.mode-css .br-article-list, #ticker .breaking-news.mode-css .br-article-list{ position:absolute; left: calc(var(--bn-title-w) + 2px); right:2px; overflow:hidden }
    #adsbar .breaking-news.mode-css .br-article-list-inner, #ticker .breaking-news.mode-css .br-article-list-inner{
      position:relative; display:inline-flex; align-items:center; white-space:nowrap; gap:24px; will-change:transform;
      animation: ticker-scroll var(--ticker-speed, 30s) linear infinite;
      direction: ltr; /* ثبّت LTR للمسار لضمان الدخول من اليمين بسلاسة */
    }
    #adsbar .breaking-news.mode-css:hover .br-article-list-inner,
    #ticker .breaking-news.mode-css:hover .br-article-list-inner{ animation-play-state: paused }
    #adsbar .breaking-news.mode-css.paused .br-article-list-inner,
    #ticker  .breaking-news.mode-css.paused .br-article-list-inner{ animation-play-state: paused }
    #adsbar .breaking-news.mode-css .br-article, #ticker .breaking-news.mode-css .br-article{ display:inline-block; margin:0; position:relative }
    #adsbar .breaking-news.mode-css .br-article:before, #ticker .breaking-news.mode-css .br-article:before{ right:-12px }
    /* تقليل المسافات في وضع CSS لبدء الظهور فوراً */
    #adsbar .breaking-news.mode-css a strong, #ticker .breaking-news.mode-css a strong{ margin-left:16px }
    #adsbar .breaking-news.mode-css .br-article:before, #ticker .breaking-news.mode-css .br-article:before{ display:none }

    /* Scroll (JS) mode: تأكيد التدفق من اليمين لليسار عبر LTR للمسار */
    #adsbar .breaking-news.mode-scroll .br-article-list, #ticker .breaking-news.mode-scroll .br-article-list{ position:absolute; left: calc(var(--bn-title-w) + 2px); right:2px; top:0; bottom:0; overflow:hidden }
    #adsbar .breaking-news.mode-scroll .br-article-list-inner, #ticker .breaking-news.mode-scroll .br-article-list-inner{
      position:relative; display:inline-flex; align-items:center; white-space:nowrap; gap:12px; left:0; will-change: transform; direction:ltr
    }
    #adsbar .breaking-news.mode-scroll .br-article, #ticker .breaking-news.mode-scroll .br-article{ display:inline-block; margin:0; position:relative }
    #adsbar .breaking-news.mode-scroll .br-article:before, #ticker .breaking-news.mode-scroll .br-article:before{ display:none }
    /* قلل مسافة strong لتكثيف التدفق في وضع التمرير */
    #adsbar .breaking-news.mode-scroll a strong, #ticker .breaking-news.mode-scroll a strong{ margin-left:16px }

    /* === User provided breaking-news CSS (appended) === */
    /* User requested original breaking-news design */
    /* Make the ticker itself a full-width capsule inside the card */
    .breaking-news { display:block; width:100%; background-color:#292929; color:#c6c6c6; overflow:hidden; border:none !important; box-shadow:none !important; border-radius:9999px; padding-right: 2px }
    .breaking-news .wrapper { width:100%; position:relative }
    .breaking-news .br-title { display:block; overflow:hidden; position:relative; font-size:20px; font-weight:900; letter-spacing:-.8px; text-transform:uppercase; color:#efc220; line-height:46px; cursor:default }
    .breaking-news .br-navi { display:block; position:absolute; right:0; top:0; height:46px; line-height:43px; cursor:default }
    .breaking-news .br-navi a { display:inline-block; position:relative; margin-left:0; line-height:26px; width:26px; text-align:center; border-radius:50%; vertical-align:middle; background-color:transparent; color:#fff; font-size:15px }
    .breaking-news .br-navi a:before { display:block; content:''; z-index:0; position:absolute; width:100%; height:100%; left:0; top:0; background:#efc220; border-radius:50%; opacity:.1; transition:all .2s }
    .breaking-news .br-navi a:hover:before { opacity:1 }
    .breaking-news .br-navi a i { display:block; position:relative; z-index:2 }
    .breaking-news .br-navi a:hover { color:#232323 }
    .breaking-news .br-article-list { display:block; position:absolute; left:130px; top:0; right:0; line-height:46px; font-size:12px; overflow:hidden }
    /* RTL fix: اربط قائمة المقالات من اليمين بدل اليسار */
    html[dir="rtl"] .breaking-news .br-article-list { left:auto; right:130px; }
    /* لا حواف/تظليل على طرفي المسار */
    .breaking-news .br-article-list:after, .breaking-news .br-article-list:before { display:none !important; content:none; box-shadow:none !important }
    .breaking-news .br-article-list:before { left:auto; right:100% }
    /* Category (anchor text) in site blue */
    .breaking-news .br-article-list a { color:#3b82f6; display:inline-block; line-height:inherit }
    /* Force colors per section to avoid overrides */
    #adsbar .breaking-news .br-article-list a,
    #ticker .breaking-news .br-article-list a{ color:#3b82f6 !important }
    .breaking-news .br-article-list a:not(.post-title-comment) strong { display:inline-block; border-bottom:1px solid transparent; padding-bottom:1px; line-height:14px; vertical-align:middle; transition:all .2s }
    .breaking-news .br-article-list a:not(.post-title-comment):hover strong { border-color:#ccc }
    /* Headline after a small gap */
    .breaking-news .br-article-list a strong { display:inline-block; margin-left:12px; color:#ffffff; font-weight:800 }
    /* Add explicit spacer before headline to prevent visual overlap */
    #adsbar .breaking-news .br-article-list a strong::before,
    #ticker .breaking-news .br-article-list a strong::before{ content:''; display:inline-block; width:8px }
    /* Force headline color with higher specificity */
    #adsbar .breaking-news .br-article-list a strong,
    #ticker .breaking-news .br-article-list a strong{ color:#ffffff !important }
    .breaking-news .br-article-list a.post-title-comment { color:#efc220; margin-left:5px; display:inline-block; font-weight:700 }
    .breaking-news .br-article-list a.post-title-comment i { padding-right:3px; width:19px }
    .breaking-news .br-article-list a.post-title-comment:hover { color:#fff }
    .breaking-news .br-article { display:inline-block; white-space:nowrap; margin-right:24px; position:relative }
    /* Site blue bullet between items */
    .breaking-news .br-article:before { display:block; position:absolute; content:'\f111'; font-family: FontAwesome; font-size:5px; padding-top:1px; right:-15px; color:#3b82f6 }
    .breaking-news .br-article:last-child:before { display:none }
    .breaking-news .br-article-list-inner { display:block; white-space:nowrap; position:relative }

    /* لا تحرك/لا تحدد نص بالشريط عند الضغط بالماوس */
    .breaking-news .br-article-list,
    .breaking-news .br-article-list-inner,
    .breaking-news .br-article{
      user-select:none; -webkit-user-drag:none; -webkit-tap-highlight-color:transparent; touch-action:none; cursor:default;
    }
    .breaking-news a{ user-select:text; cursor:pointer }

    /* ألغِ أي إطار/حدود على بطاقات الشريطين وألغِ أنيميشن الهوفر */
    /* Make outer cards transparent and center the capsule */
    #adsbar .card, #ticker .card{
      box-shadow:none !important;
      transition:none;
      border:none !important;
      background:transparent !important;
      color:inherit !important;
      border-radius: var(--ticker-radius,24px) !important;
      justify-content:center;
    }
    #adsbar .card:hover, #ticker .card:hover{ transform:none !important; box-shadow:none !important; border:none !important; background:transparent !important }

    /* Hide external labels since we move titles inside */
    #adsbar .card > span, #ticker .card > span{ display:none !important }

    /* Keep default flex so the capsule stretches properly */
    #adsbar .card > .flex-1, #ticker .card > .flex-1{ flex:1 1 auto; display:block }

    /* Show inner title, fix widths, and reserve space (no overlap) */
    .breaking-news{ --bn-controls-w: 88px; --bn-title-w: 120px; }
    #adsbar .breaking-news .br-title, #ticker .breaking-news .br-title{ display:block; position:absolute; top:0; height:36px; line-height:36px; width:var(--bn-title-w) }
    /* LTR: title starts after controls */
    .breaking-news .br-title{ left: var(--bn-controls-w); text-align:left }
    /* RTL: title on right */
    html[dir="rtl"] .breaking-news .br-title{ left:auto; right:0; text-align:right }
    /* LTR lane: starts after title with 2px padding; RTL lane: starts after controls */
    #adsbar .breaking-news .br-article-list, #ticker .breaking-news .br-article-list{ left: calc(var(--bn-title-w) + 2px); right:2px }
    html[dir="rtl"] #adsbar .breaking-news .br-article-list, html[dir="rtl"] #ticker .breaking-news .br-article-list{ left: calc(var(--bn-controls-w)); right: calc(var(--bn-title-w) + 2px) }

    /* Place controls inside the ticker strip on the LEFT */
    .breaking-news .bn-controls{ position:absolute; left:4px; right:auto; top:4px; height:32px; display:flex; align-items:center; gap:5px; z-index:3; padding:0 6px }
    .breaking-news .wrapper{ position:relative }

    /* Re-enable fade edge for these two sections */
    #adsbar .breaking-news .br-article-list:after,
    #adsbar .breaking-news .br-article-list:before,
    #ticker .breaking-news .br-article-list:after,
    #ticker .breaking-news .br-article-list:before{
      display:block !important; position:absolute; z-index:2; top:0; width:100px; height:100%; content:''; box-shadow:5px 0 60px 40px #292929
    }
    #adsbar .breaking-news .br-article-list:after,
    #ticker .breaking-news .br-article-list:after{ left:100% }
    #adsbar .breaking-news .br-article-list:before,
    #ticker .breaking-news .br-article-list:before{ left:auto; right:100% }

    /* Remove any hover effects on the strip content (keep buttons) */
    #adsbar .breaking-news .br-navi, #ticker .breaking-news .br-navi{ display:none !important }
    .breaking-news .br-article-list a:not(.post-title-comment) strong{ transition:none !important }
    .breaking-news .br-article-list a:not(.post-title-comment):hover strong{ border-color:transparent !important }
    .breaking-news:hover{ filter:none !important; transform:none !important }
    .breaking-news .br-title:hover{ filter:none !important }

    /* Controls styling */
    .bn-controls{ display:flex; align-items:center; gap:6px }
    /* Modern capsule buttons: slightly smaller, glass border, soft shadow */
    .bn-btn{ 
      width:24px; height:24px; 
      display:grid; place-items:center; 
      border-radius:8px; 
      border:2px solid rgba(255,255,255,0.3); 
      background: transparent;
      color:#ffffff; 
      font-size:11px; 
      box-shadow: 0 3px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, border-color .2s ease;
      padding: 2px;
    }
    .bn-btn i{ font-size:11px }
    /* Section-specific gradients to mirror br-title */
    #adsbar .bn-controls .bn-btn{ 
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-color: rgba(255,255,255,0.4);
      box-shadow: 0 3px 10px rgba(102, 126, 234, 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
    }
    #ticker .bn-controls .bn-btn{ 
      background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
      border-color: rgba(255,255,255,0.4);
      box-shadow: 0 3px 10px rgba(255, 107, 107, 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
    }
    /* Hover/focus states */
    #adsbar .bn-controls .bn-btn:hover{ 
      transform: none;
      background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
      border-color: rgba(255,255,255,0.6);
      box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5), inset 0 1px 0 rgba(255,255,255,0.3);
      filter:none;
    }
    #ticker .bn-controls .bn-btn:hover{ 
      transform: none;
      background: linear-gradient(135deg, #e53e3e 0%, #38b2ac 100%);
      border-color: rgba(255,255,255,0.6);
      box-shadow: 0 6px 16px rgba(255, 107, 107, 0.5), inset 0 1px 0 rgba(255,255,255,0.3);
      filter:none;
    }
    .bn-btn:focus{ outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.45), 0 3px 10px rgba(0,0,0,0.25) }
    /* Pause button keep consistent size */
    .bn-btn[data-action="pause"]{ width:24px; height:24px; font-size:11px }
    .bn-btn[data-action="pause"] i{ font-size:11px }
    /* Ultra Modern Capsule label chip for titles - positioned at far right */
    #adsbar .breaking-news .br-title, #ticker .breaking-news .br-title{
      position:absolute; 
      top:6px; 
      right:2px; 
      width: var(--bn-title-w); 
      height:28px; 
      min-height:28px;
      display:flex; 
      align-items:center; 
      justify-content:center;
      padding:0 12px; 
      border-radius:8px; 
      font-size:13px; 
      font-weight:700; 
      line-height:1;
      border:2px solid rgba(255,255,255,0.3); 
      box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
      backdrop-filter: blur(10px);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }
    #adsbar .breaking-news .br-title::before, #ticker .breaking-news .br-title::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.05) 100%);
      border-radius: 8px;
      pointer-events: none;
    }
    /* Distinct colors for each ticker label with modern gradients */
    #adsbar .breaking-news .br-title{ 
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
      color: #ffffff; 
      border-color: rgba(255,255,255,0.4);
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
    }
    #ticker .breaking-news .br-title{ 
      background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%); 
      color: #ffffff; 
      border-color: rgba(255,255,255,0.4);
      box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
    }
    /* Hover effects for titles */
    #adsbar .breaking-news .br-title:hover{ 
      transform: none;
      background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
      box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5), inset 0 1px 0 rgba(255,255,255,0.3);
      border-color: rgba(255,255,255,0.6);
    }
    #ticker .breaking-news .br-title:hover{ 
      transform: none;
      background: linear-gradient(135deg, #e53e3e 0%, #38b2ac 100%);
      box-shadow: 0 6px 16px rgba(255, 107, 107, 0.5), inset 0 1px 0 rgba(255,255,255,0.3);
      border-color: rgba(255,255,255,0.6);
    }
    html[dir="rtl"] #adsbar .breaking-news .br-title, html[dir="rtl"] #ticker .breaking-news .br-title{ right:2px; left:auto }
    /* Place the article lane with enough inset to avoid chips */
    html[dir="rtl"] #adsbar .breaking-news .br-article-list, html[dir="rtl"] #ticker .breaking-news .br-article-list{ left: calc(8px + var(--bn-controls-w)); right: calc(8px + var(--bn-title-w)) }
    /* Controls: pill style and distinct colors per section */
    #adsbar .bn-controls .bn-btn{ background: var(--accent); color: var(--accent-foreground); border-color: color-mix(in oklab, var(--accent), black 18%) }
    #ticker .bn-controls .bn-btn{ background: var(--primary); color: var(--primary-foreground); border-color: color-mix(in oklab, var(--primary), black 18%) }
    #adsbar .bn-controls .bn-btn:hover{ filter: brightness(1.07) }
    #ticker .bn-controls .bn-btn:hover{ filter: brightness(1.07) }
    /* Pause/play same size */
    .bn-btn[data-action="pause"]{ width:28px; height:28px; font-size:12px }
    .bn-btn[data-action="pause"] i{ font-size:12px }
    .bn-btn:hover{ filter:brightness(1.05) }
    /* Variants both transparent */
    #adsbar .bn-btn[data-variant="primary"], #ticker .bn-btn[data-variant="primary"]{ background:transparent; color:#e5e5e5; border-color:rgba(255,255,255,.35) }
    #adsbar .bn-btn[data-variant="secondary"], #ticker .bn-btn[data-variant="secondary"]{ background:transparent; color:#e5e5e5; border-color:rgba(255,255,255,.25) }
    .breaking-news .br-article { margin:0 }

    /* No separators between items */
    #adsbar .breaking-news .br-article:before,
    #ticker  .breaking-news .br-article:before{ display:none !important; content:none }

    /* Scroll To Top button */
    #scrollTopBtn{
      position: fixed;
      inset-block-end: 18px; /* bottom */
      left: 18px; right: auto; /* always left side */
      z-index: 99;
      width: 42px;
      height: 42px;
      border-radius: 9999px;
      display: grid;
      place-items: center;
      color: var(--btn-fg, #fff);
      background: var(--btn-bg, #3b82f6);
      border: 1px solid color-mix(in oklab, var(--btn-bg, #3b82f6), black 18%);
      box-shadow: 0 8px 20px rgba(0,0,0,.25);
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: opacity .25s ease, transform .25s ease, visibility .25s ease, filter .2s ease;
    }
    #scrollTopBtn i{ font-size: 16px }
    #scrollTopBtn:hover{ filter: brightness(1.06) }
    #scrollTopBtn.show{ opacity: 1; visibility: visible; transform: translateY(0) }

    /* Site background: modern dark theme */
    :root[data-theme="sky"]{ 
      --background: #0a0a0f; 
      --foreground: #f8fafc;
      --card: #1e1e3f;
      --card-foreground: #f1f5f9;
      --primary: #3b82f6;
      --primary-foreground: #ffffff;
      --secondary: #1e293b;
      --secondary-foreground: #f1f5f9;
      --accent: #06b6d4;
      --accent-foreground: #ffffff;
      --border: rgba(148,163,184,.2);
      --nav-bg: #0f172a;
      --nav-foreground: #e5e7eb;
    }

    /* Apply modern dark theme */
    html, body{ 
      background: var(--background) !important; 
      background-image: 
        radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
        repeating-linear-gradient(
          45deg,
          transparent,
          transparent 2px,
          rgba(59, 130, 246, 0.03) 2px,
          rgba(59, 130, 246, 0.03) 4px
        ) !important;
      background-size: 100% 100%, 100% 100%, 40px 40px !important;
      background-position: 0 0, 0 0, 0 0 !important;
      background-attachment: fixed !important;
      color: var(--foreground) !important;
      font-family: 'Cairo', 'Inter', system-ui, -apple-system, sans-serif;
    }
    
    /* Modern gradient background overlay */
    body:before{
      content: none;
      background: none;
    }
    
    /* Remove any top gap so banner touches the top of the screen */
    html, body{ padding-top: 0 !important; margin-top: 0 !important }
    #banner, .slider-container{ margin-top: 0 !important; padding-top: 0 !important }

    /* Announcements component (shared for all bars) */
    .announcements-container{
      width: 100%;
      background: #f5f5f5;
      overflow: hidden;
      display: flex;
      align-items: center;
      font-family: "PT Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      height: 40px;
      line-height: 40px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    .announcements-container:hover{ box-shadow: 0 4px 16px rgba(0,0,0,0.2) }
    .announcements-container .container-title{
      flex: 0 0 160px;
      height: 100%;
      overflow: hidden;
      padding: 0 15px;
      background: #03a9f4; /* default color (news) */
      text-align: center;
      font-size: 15px;
      font-weight: 800;
      text-transform: uppercase;
      color: #fff;
      letter-spacing: 1px;
      display: flex; align-items: center; justify-content: center;
      border-start-start-radius: 8px; /* logical top-left for LTR, top-right for RTL */
      border-end-start-radius: 8px;   /* logical bottom-left for LTR, bottom-right for RTL */
    }
    .announcements-container ul.announcements{
      flex: 1 1 auto;
      height: 40px;
      overflow: hidden;
      list-style: none;
      margin: 0;
      padding: 0 12px;
    }
    .announcements-container ul.announcements li{
      width: 100%;
      height: 40px;
      line-height: 40px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      margin: 0;
      padding: 0;
      font-size: 14px;
    }
    .announcements-container ul.announcements li a{
      display: inline-block;
      width: 100%;
      text-decoration: none;
      color: #212121;
      transition: color .5s ease-out;
    }
    .announcements-container ul.announcements li a:hover{ color: #03a9f4 }
    .announcements-container ul.announcements li a:visited{ color: #616161 }
    /* Sliding animation helper */
    .announcements-container ul.announcements{ will-change: transform }
    .announcements-container.animating ul.announcements{ transition: transform .45s ease }
    html[dir="rtl"] .announcements-container .container-title{ border-start-start-radius: 0; border-end-start-radius: 8px }
    html[dir="rtl"] .announcements-container .container-title{ border-start-start-radius: 8px; border-end-start-radius: 0 }

    /* Ads bar: orange title */
    #ads-announcements .container-title{ background: #f59e0b }

:root{
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}