/* ---------- Variables ---------- */
:root{
  --brand-blue:#00b5f1;
  --brand-cyan:#38cbdd;
  --accent:#172182;
  --text:#131333;
  --muted:#7B7B7B;
  --bg:#f5f8fa;
  --ff-head:"Poppins",sans-serif;
}

/* ---------- Reset / Base ---------- */
*{ box-sizing: border-box; }
html{ line-height: 1.15; scroll-behavior: smooth; }
body{ margin:0; font-family: 'Poppins','Montserrat',sans-serif; font-weight:500; line-height:1.5; color:var(--muted); background:var(--bg); padding-top:76px; }
a{ text-decoration:none; color:inherit; }
h1{ color:var(--text); font-weight:600; line-height:1.4; }
h2{ color:var(--text); font-size:30px; text-transform:uppercase; font-weight:700; }
p{ margin:0; color:#444; font-size:15px; line-height:1.8; }

/* ---------- Header / Navigation ---------- */
.header{ position:fixed; top:0; left:0; width:100%; height:76px; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,0.05); z-index:999; transition:all .35s; }
.header--sticky{ background:#fff; box-shadow:0 4px 10px rgba(0,0,0,.03); }
.header__content--fluid-width{ width:80%; margin:0 auto; height:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.header__logo-title img{
  height:56px;
}

.header__menu>ul{ list-style:none; margin:0; padding:0; display:flex; gap:18px; align-items:center; }
.header__menu>ul>li>a{ color:var(--text); font-weight:700; padding:20px 0px; display:inline-block; }
.header__menu>ul>li>a:hover, .header__menu>ul>li>a:focus{ color:var(--accent); }
.menu-button{ display:none; width:36px; height:24px; cursor:pointer; align-items:center; justify-content:center; }
.menu-button span{ display:block; height:3px; background:var(--text); margin:4px 0; border-radius:2px; }

/* ---------- Hero / Slider ---------- */
.hero{ padding:120px 60px 80px; display:flex; gap:40px; align-items:center; }
.hero-text{ width:50%; }
.hero-img{ width:45%; display:flex; align-items:center; justify-content:center; }
.hero-text h1{ color: var(--brand-blue); }
.slider-container{
  width:100%;
  max-width:720px;
  aspect-ratio: 16 / 9;   /* أهم سطر */
  border-radius:14px;
  overflow:hidden;
  background:#eef3f6;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  position:relative;
}

#sliderImg{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: opacity .45s ease-in-out;
}

.dots{ margin-top:12px; display:flex; justify-content:center; align-items:center; padding-top:8px; position:relative; top:0%; }

/* ---------- Project Gallery ---------- */
.project-gallery{ padding:80px 60px; background:#fff; text-align:center; }
.project-gallery h2{ font-size:34px; margin:0 0 10px; color:var(--brand-blue); text-transform:none; line-height:1.2; font-weight:700; }
.project-gallery h2 span{ display:block; font-size:15px; color:var(--muted); font-weight:500; margin-top:8px; text-transform:none; }
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.grid img{ width:100%; height:220px; object-fit:cover; border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,0.1); transition:transform .3s ease; }
.grid img:hover{ transform:translateY(-5px); }

/* ---------- Utilities (small bootstrap-like helpers) ---------- */
.container{ width:92%; max-width:1100px; margin:0 auto; }
.row{ display:flex; flex-wrap:wrap; gap:18px; }
.row2{ display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start; }
.col-md-3{ flex:1 1 220px; min-width:220px; }
.col-md-6{ flex:1 1 420px; }
.col-md-12{ flex:1 1 100%; }
.img-fluid{ max-width:100%; height:auto; display:block; }
.mt-5{ margin-top:2rem; }
.mb-3{ margin-bottom:1rem; }
.hvr{ transition:color .25s ease; }

/* ---------- Footer / Contact ---------- */
.footer-1{ background-color:var(--bg); padding:48px 0; }
.footer-1 .contact-heading{ text-align:center; margin-bottom:12px; }
.footer-1 .contact-heading h2{ margin:0; }
.contact-wrapper{ display:flex; justify-content:center; }
.contact-grid{ display:flex; gap:28px; align-items:stretch; justify-content:center; flex-wrap:wrap; padding:12px 12px; max-width:760px; width:100%; }
.contact-item{ display:flex; gap:18px; align-items:center; flex:0 1 100%; width:100%; padding:18px 20px; border-radius:10px; background:rgba(255,255,255,0.98); box-shadow:0 8px 26px rgba(0,0,0,0.04); box-sizing:border-box; min-height:140px; }
.contact-item img{ width:72px; height:72px; flex:0 0 72px; display:block; }
.contact-item img{ object-fit:cover; }
.contact-item .ci-body{ display:flex; flex-direction:column; gap:6px; flex:1 1 auto; justify-content:center; }
.contact-item .ci-body strong{ font-size:15px; color:var(--text); text-transform:none; }
.contact-item .ci-body a{ display:block; color:var(--text); line-height:1.6; text-decoration:none; }

.footer-main{ background:var(--bg); color:var(--text); padding:40px 24px; border-top:1px solid rgba(0,0,0,0.04); }
.footer-main .row2{ max-width:1100px; margin:0 auto; display:flex; flex-wrap:wrap; gap:24px; }
.footer-main img{ height:80px; margin-bottom:12px; display:block; }
.footer-main p{ margin:8px 0; line-height:1.9; }
.social-list{ display:flex; flex-direction:column; gap:10px; }
.social-link{ display:flex; align-items:center; gap:8px; }
.social-icon{ width:18px; height:18px; }
.social-link span{ display:inline-block; vertical-align:middle; }

/* prevent breaking inside email addresses */
.no-break{ white-space:nowrap; }

/* Top button */
#myBtn{ display:none; position:fixed; bottom:20px; right:30px; z-index:99; background:var(--brand-blue); color:#fff; border:none; padding:12px; border-radius:4px; cursor:pointer; }
#myBtn:hover{ background:#0a95ca; }

/* ---------- Submenu (services) ---------- */
.menu-item-has-children{ position:relative; }
.menu-item-has-children .sub-menu{ position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(6px); opacity:0; visibility:hidden; background:#fff; min-width:220px; box-shadow:0 6px 18px rgba(0,0,0,0.08); padding:8px 0; list-style:none; z-index:1000; border-radius:6px; transition:opacity .18s ease .22s, transform .18s ease .22s, visibility .18s ease .22s; pointer-events:none; }
.menu-item-has-children .sub-menu li a{ display:block; padding:8px 16px; color:var(--text); white-space:nowrap; }
.menu-item-has-children.open > .sub-menu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:auto; transition-delay:0s; }

@media (hover: hover) and (pointer: fine) {
    .menu-item-has-children:hover > .sub-menu,
    .menu-item-has-children:focus-within > .sub-menu {
        opacity:1;
        visibility:visible;
        transform:translateX(-50%) translateY(0);
        pointer-events:auto;
        transition-delay:0s;
    }
}

/* Mobile: make submenu part of flow */
@media (max-width:1024px){ .menu-button{ display:block; } .header__menu ul{ display:none; flex-direction:column; width:100%; background:#fff; margin-top:40px; } .menu-open .header__menu ul{ display:flex; } .menu-item-has-children .sub-menu{ position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto; box-shadow:none; padding-left:12px; display:none; transition:none; } .menu-item-has-children.open > .sub-menu{ display:flex; flex-direction:column; } }

/* Responsive tweaks */
@media (max-width:768px){ body{ padding-top:72px; } .header{ height:72px; } .hero{ padding:120px 30px 60px; flex-direction:column; } .hero-text{ width:100%; } .hero-text h1{ font-size:32px; } .project-gallery{ padding:40px 30px; } .grid{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); } .contact-grid{ max-width:100%; gap:14px; } .contact-item{ flex:1 1 100%; max-width:100%; } .social-list{ flex-direction:row; gap:12px; } .footer-nav{ align-items:flex-start; } .float-right{ text-align:left; } }

@media (max-width:600px){
    .grid img{ height:150px; }
    #sliderImg{ height:220px; max-width:100%; }
}

/* Ensure contact items sit side-by-side on medium+ screens */
@media (min-width: 600px) {
    .footer-1 .contact-grid { justify-content: center; }
    .footer-1 .contact-item { flex: 0 0 auto; width: calc(50% - 20px); max-width: none; }
}

/* Slider dots */
.dot{ display:inline-block; width:10px; height:10px; background:rgba(0,0,0,0.12); border-radius:50%; margin:0 6px; cursor:pointer; transition:background .2s ease, transform .15s ease; }
.dot.active{ background:var(--brand-blue); transform:scale(1.1); }

.marquee-wrap{
    width:100%;
    max-width:1100px;
    margin:20px auto 0;
    overflow:hidden;
}

.marquee{
    width:100%;
    overflow:hidden;
    padding:8px 0;
}

.marquee-track{
    display:flex;
    gap:14px;
    width:max-content;
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0,0,0);
}

.marquee-group{
    display:flex;
    gap:14px;
}

.marquee-track img{
    width:260px;
    height:150px;
    object-fit:cover;
    border-radius:8px;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
    flex-shrink:0;
    transform: translateZ(0);
}

/* directions */
.marquee-left .marquee-track{
    animation: marquee-left 150s linear infinite;
}

.marquee-right .marquee-track{
    animation: marquee-right 150s linear infinite;
}

@keyframes marquee-left{
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes marquee-right{
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* pause on hover */
.marquee:hover .marquee-track{
    animation-play-state: paused;
}

/* mobile */
@media (max-width:900px){
    .marquee-track img{
        width:180px;
        height:120px;
    }
}

/* longer duration on small screens for performance */
@media (max-width:768px){
    .marquee-track{ animation-duration:120s !important; }
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
    .marquee-track{
        animation: none;
    }
}

.project-highlight{
    padding:80px 60px;
    background:#f5f8fa;
}

.project-highlight h2{
    text-align:center;
    color:var(--brand-blue);
    margin-bottom:20px;
}

.highlight-desc{
    text-align:center;
    max-width:820px;
    margin:0 auto 30px;
    color:#444;
    font-size:15px;
    line-height:1.8;
}

.linkedin-embed{
    max-width:900px;
    margin:0 auto;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 8px 28px rgba(0,0,0,0.08);
    background:#fff;
}

.source-note{
    text-align:center;
    margin-top:16px;
    font-size:13px;
    color:#777;
}

.source-note a{
    color:var(--brand-blue);
    font-weight:600;
}