:root {
      --primary-bg: #000000;
      --accent:     #ffff;
      --dark-alt:   #000000;
      --light-bg:   #f4f6f8;
      --border:     #303447;
      --text:       #333;
      --text-light: #fff;
    }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Lato', sans-serif;
      color: var(--text);
      background: var(--light-bg);
      padding-top: 56px;
    }
    h2,h5 { font-family: 'Montserrat', sans-serif; }

    .masthead {
      background: linear-gradient(135deg, #000000 0%, #000000 100%);
      color: var(--text-light);
      text-align: center;
      padding: 6rem 1rem;
      position: relative;
    }
    .masthead .hero-logo {
      width: 120px;
      margin-bottom: 2rem;
      animation: floatLogo 4s ease-in-out infinite;
    }
    @keyframes floatLogo {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    .masthead h1 {
      font-size: 2.25rem;
      font-weight: 700;
      margin-bottom: 1rem;
    }
    .masthead p.lead {
      font-size: 1.1rem;
      margin-bottom: 2rem;
    }
    .features {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 1.25rem;
      margin-bottom: 2rem;
    }
    .feature-circle {
      width: 95px;
      height: 95px;
      border: 2px solid var(--accent);
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: var(--text-light);
      transition: background 0.3s, transform 0.3s;
    }
    .feature-circle i {
      font-size: 1.4rem;
      margin-bottom: 0.35rem;
    }
    .feature-circle p {
      font-size: 0.8rem;
      margin: 0;
    }
    .feature-circle:hover {
      background: rgba(255, 255, 255, 0.1);
      transform: translateY(-5px);
    }
    .btn-explore {
      border: 2px solid var(--accent);
      color: var(--accent);
      background-color: transparent;
      padding: 0.75rem 1.75rem;
      font-weight: 600;
      transition: all 0.3s;
    }
    .btn-explore:hover {
      background-color: var(--accent);
      color: var(--primary-bg);
    }
    :root {
      --primary-bg: #000000;
      --accent:     #ffff;
      --dark-alt:   #000000;
      --light-bg:   #f4f6f8;
      --border:     #303447;
      --text:       #333;
      --text-light: #fff;
    }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Lato', sans-serif;
      color: var(--text);
      background: var(--light-bg);
      padding-top: 56px;
    }
    h2,h5 { font-family: 'Montserrat', sans-serif; }

    /* Navbar */
    .navbar { background: var(--primary-bg); }
    .navbar-brand, .nav-link {
      color: rgba(255,255,255,0.85)!important;
      font-weight: 600;
      position: relative;
      transition: color .25s;
    }
    .nav-link:hover, .nav-link.active { color: var(--accent)!important; }
    .nav-link.active::after {
      content: ""; position: absolute;
      left:0; right:0; bottom:-0.25rem;
      height:2px; background: var(--accent);
    }

    /* Sections */
    .page-section { padding: 6rem 0; scroll-margin-top: 80px; }

    /* Hero */
    .masthead {
      background: var(--primary-bg);
      color: var(--text-light);
      text-align: center;
      padding: 6rem 0;
      box-shadow: 0 4px 20px rgba(255,255,255,0.1);
    }
    .masthead .hero-logo {
  width: 300px;
  margin-bottom: 2rem;
  animation: floatLogo 4s ease-in-out infinite;
}

    .feature-circle {
      width:100px; height:100px;
      border:2px solid var(--accent);
      border-radius:50%;
      display:flex; flex-direction:column;
      justify-content:center; align-items:center;
      color:var(--text-light);
      transition:background .3s,transform .3s;
    }
    .feature-circle i { font-size:1.5rem; margin-bottom:.5rem; }
    .feature-circle p { margin:0; font-size:.85rem; }
    .feature-circle:hover {
      background:rgba(255,255,255,0.1);
      transform:translateY(-5px);
    }
    .btn-explore {
      border:2px solid rgba(255,255,255,0.8);
      color:rgba(255,255,255,0.9);
      padding:.75rem 1.75rem;
      font-weight:600;
      transition:background .3s,color .3s;
    }
    .btn-explore:hover {
      background:rgba(255,255,255,0.15);
      color:var(--text-light);
    }

    /* Services */
    #services { background: var(--light-bg); }
    .service-box {
      display:flex; flex-direction:column; flex:1;
      background:var(--text-light);
      border:1px solid var(--border); border-radius:.5rem;
      padding:2rem 1rem; text-align:center;
      transition:background .3s,box-shadow .3s;
    }
    .service-box:hover {
      background:#e8ebee; box-shadow:0 4px 12px rgba(0,0,0,.05);
    }
    .service-box i {
      font-size:2rem; color:var(--accent); margin-bottom:.5rem;
    }
    .service-box p { margin-top:auto; }
    .service-box h5 { font-weight:700; margin:1rem 0 0; }

    /* About (Company profile) */
    #about {
      background: var(--dark-alt);
      color: var(--text-light);
      text-align: center;
    }
    #about h2 { margin-bottom:1rem; }
    #about p {
      max-width:700px; margin:0 auto; line-height:1.6;
    }
    #about .features-list {
      max-width:600px; margin:2rem auto 0;
      text-align:left; list-style:none; padding:0;
    }
    #about .features-list li {
      margin-bottom:.75rem;
    }
    #about .features-list i {
      color:var(--accent); margin-right:.5rem;
    }
/* دائرة حول الأيقونة */
.icon-circle {
  width: 60px;
  height: 60px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

/* ضمان أن كل بطاقة تمتد لملء الارتفاع */
.card.h-100 {
  display: flex;
  flex-direction: column;
}
.card.h-100 .card-title {
  margin-top: auto;
  margin-bottom: .5rem;
}

    /* Contact */
    #contact { background: var(--light-bg); }
    .form-control:focus {
      border-color: var(--accent);
      box-shadow:0 0 0 .2rem rgba(40,203,105,.25);
    }
    #contact button {
      background: var(--accent); border:none;
      padding:.75rem 2rem; font-weight:600; color:var(--text-light);
      transition:background .3s;
    }
    #contact button:hover { background:#22a85a; }

    /* Footer */
    footer {
      background: var(--primary-bg);
      color: var(--text-light);
      text-align: center; padding:2rem 0;
    }
    footer a {
      color: var(--text-light); margin:0 .5rem;
      transition:color .3s;
    }
    footer a:hover { color: var(--accent); }