@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
    :root{
      --brand:#0a59cc; /* accent similar to theme */
      --dark:#0e1a2b;
      --text:#233142;
      --muted:#6b7a90;
      --light:#f8fafc;
      --header-h:84px;
      --container:1200px;
    }
    *,*:before,*:after{box-sizing:border-box}
    body{margin:0;font-family:"Nunito", sans-serif !important;color:var(--text);background:#fff}
    a{color:inherit;text-decoration:none}
    .container{max-width:var(--container);margin-inline:auto;padding-inline:24px}

    /* Top bar */
    .topbar{background:var(--dark);color:#c8d0dc;font-size:13px}
    .topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:38px}
    .topbar .left i{margin-right:6px;color:var(--brand)}
    .topbar .left span{margin-right:18px}
    .topbar .social a{margin-left:14px;opacity:.8}
    .topbar .social a:hover{opacity:1;color:#fff}

    /* Header */
    header{
      position:sticky;top:0;z-index:50;backdrop-filter:saturate(120%) blur(8px);
      background:rgba(14,26,43,.65); /* transparent over hero */
      border-bottom:1px solid rgba(255,255,255,.08);
      transition:background .3s ease, box-shadow .3s ease;
    }
    header.scrolled{background:#0f2037;box-shadow:0 10px 30px rgba(0,0,0,.25)}
    .nav{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
    .brand{display:flex;align-items:center;gap:12px;color:#fff;font-weight:700;font-size:20px}
    .brand img{height:36px}
    .navlinks{display:flex;align-items:center;gap:24px}
    .navlinks a{color:#e9eef7;font-weight:600;letter-spacing:.2px}
    .navlinks a:hover{color:#fff}
    .cta{display:flex;align-items:center;gap:18px}
    .cta .phone{display:flex;align-items:center;color:#fff;font-weight:700}
    .cta .phone i{color:var(--brand);margin-right:8px}
    .btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;font-weight:700}
    .btn-primary{background:var(--brand);color:#1a2433}
    .btn-primary:hover{filter:brightness(.95)}

    /* Mobile */
    .burger{display:none;width:40px;height:40px;border:1px solid rgba(255,255,255,.2);border-radius:10px;align-items:center;justify-content:center;color:#fff}
    @media (max-width: 980px){
      .navlinks{display:none}
      .cta .phone{display:none}
      .burger{display:flex}
    }

    /* Hero Slider */
    .hero{position:relative}
    .hero .swiper{height:100vh;min-height:520px}
    .hero .slide{position:relative;width:100%;height:100%;overflow:hidden;color:#fff}
    .hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05);transition:transform 6s ease}
    .hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(7,16,29,.35), rgba(7,16,29,.65))}
    .hero .content{position:relative;z-index:2;height:100%;display:grid;align-items:center}
    .hero .inner{max-width:var(--container);margin:auto;padding:0 24px}
    .eyebrow{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:8px 12px;border-radius:999px;font-weight:700;font-size:12px;letter-spacing:.3px;text-transform:uppercase}
    .eyebrow i{color:var(--brand)}
    .title{margin:16px 0 12px;font-size:3rem;line-height:1.05;font-weight:900}
    .lead{max-width:720px;font-size:18px;color:#e3e8f2}
    .cta-row{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}

    /* Swiper controls */
    .swiper-pagination-bullets .swiper-pagination-bullet{background:#fff;opacity:.5}
    .swiper-pagination-bullet-active{background:var(--brand)!important;opacity:1}
    .swiper-button-prev, .swiper-button-next{color:#fff}

    /* Ken Burns active scale */
    .swiper-slide-active .bg{transform:scale(1.15)}

    /* Section placeholder below */
    .section{padding:80px 0}

.box-shadow{
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  width: 48% !important;
  margin: 10px !important;
      transition: all 0.3s ease-in-out;
}
.box-shadow:hover{
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
    transition: all 0.3s ease-in-out;
    transform: translateY(-5px) !important;
}
.activity-padding{
  padding: 15px;

}

/* Card container */
.service-card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  border:1px solid #f0f2f5;
  overflow:hidden;
  height: 510px !important;
  transition:transform .2s ease, box-shadow .2s ease;
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,.08);
}

/* Top image with fixed aspect ratio like screenshot */
.service-thumb{
  width:100%;
  aspect-ratio: 16 / 9;           /* modern browsers */
  object-fit:cover;
  display:block;
  height: 200px !important;
}

/* Soft primary pill button */
.btn-soft-primary{
  background:#e8f5ff;
  color:#0ea5e9;
  border:none;
  padding:.6rem 1rem;
  border-radius:999px;
  font-weight:600;
}
.btn-soft-primary:hover{
  background:#d9efff;
  color:#0b89c8;
}

/* Round icon button (red) */
.btn-icon{
  width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1rem;
}
/* Expanding "Read More" pill */
.btn-reveal{
  height:44px;
  width:44px;                 /* start as a circle */
  padding:0;                  /* no text padding until hover */
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  transition:width .28s ease, padding .28s ease, box-shadow .2s ease;
  overflow:hidden;            /* hide the label until hover */
  white-space:nowrap;
}

.btn-reveal .label{
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .22s ease, transform .22s ease;
  font-weight:600;
}

.btn-reveal:hover{
  width:150px;                /* expands smoothly */
  padding:0 16px;             /* space for the text */
}

.btn-reveal:hover .label{
  opacity:1;
  transform:none;
}

/* optional: keyboard focus */
.btn-reveal:focus-visible{
  box-shadow:0 0 0 .2rem rgba(13,110,253,.25);
}
.service-card{
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
      transition: all 0.3s ease-in-out;
}
.service-card:hover{
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
    transition: all 0.3s ease-in-out;
}
.services .btn-reveal:hover .opacity0icone{
  opacity: 0 !important;
}
.port {text-align: center;margin: 10px;box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;display: flex;  transition: all 0.2s ease-in-out;}
.port:hover{
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
  transition: all 0.2s ease-in-out;
}
.port p {
  text-align: justify;
  margin: auto;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
    
}
.port i {
  padding: 10px;
  font-size: 20px;
  color: #0a59cc;
}



/* Blue gradient header */
.contact-strip{
  background: linear-gradient(180deg,#28a6ec 0%, #2aa4f4 60%, #31a6f1 100%);
}

/* Section titles with small underline */
.footer-title{
  color:#144a88; /* deep blue like screenshot */
  font-weight:700;
  margin-bottom:.75rem;
  position:relative;
}
.footer-title::after{
  content:"";
  display:block;
  width:60px; height:3px;
  background:#2a7bd1;
  margin-top:.35rem;
}

/* Lists */
.footer-list li{
  color:#4b5563;
  margin-bottom:.6rem;
}
.footer-list a{
  color:#2a7bd1; text-decoration:none;
}
.footer-list a:hover{ text-decoration:underline }

/* Optional subtle divider look */
.footer-links{
  background:#fff;
}


.about-hero{
  background: linear-gradient(180deg,#28a6ec 0%, #2aa4f4 60%, #31a6f1 100%);
}
.text-white-75{ color: rgba(255,255,255,.8); }
.stat{ background:#fff; border-radius:12px; padding:18px; }
.contact-strip{
  background: linear-gradient(180deg,#28a6ec 0%, #2aa4f4 60%, #31a6f1 100%);
}
.object-fit-cover{ object-fit: cover; }
.about-hero{background:linear-gradient(180deg,#28a6ec 0%,#2aa4f4 60%,#31a6f1 100%)}
.text-white-75{color:rgba(255,255,255,.8)}
.contact-strip{background:linear-gradient(180deg,#28a6ec 0%,#2aa4f4 60%,#31a6f1 100%)}


/* mobile */

@media screen and (max-width: 960px) {
  .title {
  font-size: 24px !important;text-align: center !important; 
}
.lead {
  max-width: 600px !important;
  font-size: 14px !important;
  margin: auto;
}
.swiper-button-next::after, .swiper-button-prev::after {
  display: none !important;
}
.box-shadow {
  width: 100% !important;
  margin: 15px auto !important;
}
.activities .row {
  display: block !important;
}
.activities .row .col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
  margin: 10px auto !important;
}
.activities .row .col-8 {
  flex: 0 0 auto;
  width: 100%;
  margin: auto;
}

p {
  font-size: 14px !important;
}

 .topbar .container.wrap{
    display: flex;
    gap: 12px;
    overflow-x: auto;              /* سكرول أفقي */
    overflow-y: hidden;
    white-space: nowrap;           /* منع النزول لسطر جديد */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; /* اختياري: سناب لطيف */
    padding: 10px 12px;
  }
  .topbar .left,
  .topbar .social{
    display: inline-flex;          /* صف واحد */
    align-items: center;
    gap: 12px;
  }
  .topbar .left span,
  .topbar .social a{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    scroll-snap-align: start;      /* مع السناب */
    font-size: 14px;
  }
  .navbar-brand img {
    width: 80px !important;
  }
  .dropdown-toggle{
  padding: 8px 0px !important;
}
}
/* أساس البلور القوي */
.nav-blur-strong{
  background: rgba(255,255,255,0.7) !important;         /* MUCH more transparent background */
  -webkit-backdrop-filter: blur(30px) saturate(250%); /* Increased blur (e.g., to 30px) and saturation */
  backdrop-filter: blur(30px) saturate(250%);         /* Increased blur and saturation */
  border-bottom: 1px solid rgba(255,255,255,.35); /* Slightly stronger border */
  box-shadow: 0 8px 32px rgba(0,0,0,.15);         /* Larger, darker shadow for separation */
  z-index: 1050;
}

.navbar{padding: 0 !important;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0,0,0,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  --bs-navbar-toggler-border-color: rgba(0,0,0,.25);
}
.nav-link {
  color: #000 !important;}
/* قوّي بلور المنيو المنسدلة عشان ما تبان فلات */
.navbar .dropdown-menu{
  background: rgba(255,255,255,.7) !important;
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  backdrop-filter: blur(20px) saturate(200%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 40px rgba(0,0,0,.24);
}
.navbar-toggler{
  color: #000 !important;
  background-color: transparent;
  border: 1px solid #000 !important;
}


.sidebar-card{ background:#fff; }
.sidebar-title{ color:#144a88; font-weight:700; margin-bottom:.5rem; position:relative; }
.sidebar-title::after{ content:""; display:block; width:120px; height:3px; background:#2a7bd1; margin-top:.4rem; }
.sidebar-links li{ margin:.65rem 0; }
.sidebar-links a{ color:#1f5fb3; text-decoration:none; line-height:1.25; }
.sidebar-links a:hover{ text-decoration:underline; }
.sidebar-links a.active{ color:#0d6efd; font-weight:600; }
.service-bullets li{ position:relative; padding-left:1.25rem; margin-bottom:.5rem; }
.service-bullets li::before{ content:""; position:absolute; left:.2rem; top:.55rem; width:6px; height:6px; border-radius:50%; background:#2a7bd1; }