:root {
      --primary: #ff4d00;
      --dark: #101820;
      --light: #f6f7f9;
    }

    body {
      font-family: Arial, sans-serif;
      background: var(--light);
      color: #222;
    }

    .top-bar {
      background: var(--primary);
      color: #fff;
      font-size: 14px;
      padding: 8px 0;
    }

    .navbar {
      background: #fff;
      box-shadow: 0 5px 18px rgba(0,0,0,.08);
    }

    .navbar-brand {
      font-weight: 900;
      font-size: 26px;
      color: var(--dark);
    }

    .navbar-brand span { color: var(--primary); }

    .nav-link {
      color: #222;
      font-weight: 600;
      margin: 0 5px;
    }

    .nav-link:hover,
    .nav-link.active { color: var(--primary); }

    .dropdown-menu {
      border: none;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0,0,0,.12);
      padding: 12px;
    }

    .dropdown-item {
      border-radius: 10px;
      font-weight: 600;
      padding: 9px 14px;
    }

    .dropdown-item:hover {
      background: rgba(255,77,0,.1);
      color: var(--primary);
    }

    .nav-icons a {
      color: #222;
      font-size: 20px;
      margin-left: 15px;
      text-decoration: none;
    }

    .about-hero {
      min-height: 430px;
      background:
        linear-gradient(rgba(16,24,32,.78), rgba(16,24,32,.78)),
        url("https://images.unsplash.com/photo-1521412644187-c49fa049e84d?auto=format&fit=crop&w=1600&q=80");
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      color: #fff;
      text-align: center;
    }

    .about-hero h1 {
      font-size: 54px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .btn-orange {
      background: var(--primary);
      color: #fff;
      border-radius: 30px;
      padding: 11px 28px;
      font-weight: 700;
      border: none;
    }

    .btn-orange:hover {
      background: #df4300;
      color: #fff;
    }

    .section-title h2 {
      font-weight: 900;
      text-transform: uppercase;
    }

    .about-img {
      border-radius: 26px;
      overflow: hidden;
      box-shadow: 0 12px 35px rgba(0,0,0,.12);
    }

    .about-img img {
      width: 100%;
      height: 460px;
      object-fit: cover;
    }

    .highlight-card,
    .value-card,
    .team-card,
    .counter-box {
      background: #fff;
      border-radius: 22px;
      box-shadow: 0 8px 24px rgba(0,0,0,.08);
    }

    .highlight-card {
      padding: 24px;
      height: 100%;
      border-left: 5px solid var(--primary);
    }

    .highlight-card i,
    .value-card i {
      color: var(--primary);
      font-size: 38px;
    }

    .value-card {
      padding: 28px 22px;
      height: 100%;
      text-align: center;
      transition: .3s;
    }

    .value-card:hover {
      transform: translateY(-8px);
    }

    .mission-box {
      background:
        radial-gradient(circle at top left, rgba(255,77,0,.18), transparent 35%),
        linear-gradient(135deg, #101820, #172331);
      color: #fff;
      border-radius: 28px;
      padding: 50px;
    }

    .counter-box {
      padding: 26px;
      text-align: center;
      height: 100%;
    }

    .counter-box h3 {
      color: var(--primary);
      font-size: 42px;
      font-weight: 900;
    }

    .team-card {
      overflow: hidden;
      height: 100%;
      text-align: center;
    }

    .team-card img {
      width: 100%;
      height: 260px;
      object-fit: cover;
    }

    .cta-box {
      background:
        linear-gradient(rgba(255,77,0,.92), rgba(255,77,0,.92)),
        url("https://images.unsplash.com/photo-1517649763962-0c623066013b?auto=format&fit=crop&w=1400&q=80");
      background-size: cover;
      background-position: center;
      border-radius: 28px;
      color: #fff;
      padding: 50px 35px;
    }

    footer {
      background: var(--dark);
      color: #ccc;
      padding: 55px 0 18px;
    }

    footer h5 {
      color: #fff;
      font-weight: 800;
      margin-bottom: 18px;
    }

    footer a {
      color: #ccc;
      text-decoration: none;
      display: block;
      margin-bottom: 9px;
    }

    footer a:hover { color: var(--primary); }

    @media (max-width: 991px) {
      .about-hero h1 { font-size: 40px; }
      .about-img img { height: 360px; }
      .mission-box { padding: 35px 25px; }
      .nav-icons { margin-top: 15px; }
    }

    @media (max-width: 576px) {
      .top-bar { text-align: center; font-size: 12px; }
      .navbar-brand { font-size: 22px; }
      .about-hero { min-height: 330px; }
      .about-hero h1 { font-size: 32px; }
      .about-img img { height: 280px; }
      .cta-box { padding: 35px 22px; text-align: center; }
    }