:root {
      --blue-900: #04263a;
      /* deep navy */
      --blue-700: #0b4a6f;
      --accent: #1da1f2;
      /* for buttons/highlights */
      --muted: #e9f3fb;
      --card-bg: #f8fbff;
      --radius: 14px;
      --max-w: 1100px;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      margin: 0;
      background: linear-gradient(180deg, var(--muted), #fff);
      color: var(--blue-900);
    }

    .container {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 28px
    }

    /* Header / Nav */
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 0
    }

    .brand {
      display: flex;
      gap: 14px;
      align-items: center
    }

    a {
      text-decoration: none;
      color: white;
    }

    .logo {
      width: 56px;
      height: 56px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--blue-700), var(--blue-900));
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 700;
      font-size: 20px
    }

    nav a {
      margin-left: 18px;
      text-decoration: none;
      color: var(--blue-900);
      font-weight: 600
    }

    .cta {
      background: var(--blue-900);
      color: #fff;
      padding: 10px 14px;
      border-radius: 12px;
      text-decoration: none;
      font-weight: 700
    }

    /* Hero */
    .hero {
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: 28px;
      align-items: center;
      padding: 28px 0
    }

    .hero-card {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), #fff);
      padding: 28px;
      border-radius: 18px;
      box-shadow: 0 10px 30px rgba(2, 15, 30, 0.06)
    }

    h1 {
      margin: 0 0 8px;
      font-size: 32px
    }

    p.lead {
      margin: 0 0 18px;
      color: #16495f
    }

    .features {
      display: flex;
      gap: 12px;
      flex-wrap: wrap
    }

    .pill {
      background: var(--muted);
      padding: 8px 12px;
      border-radius: 999px;
      font-weight: 600
    }

    /* Cards grid */
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 18px
    }

    .card {
      background: var(--card-bg);
      padding: 18px;
      border-radius: 12px
    }

    /* Services */
    .services {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin: 28px 0
    }

    .service {
      background: white;
      padding: 18px;
      border-radius: 12px;
      box-shadow: 0 6px 18px rgba(2, 15, 30, 0.04)
    }

    /* Team */
    .team {
      display: flex;
      gap: 14px;
      flex-wrap: wrap
    }

    .person {
      background: white;
      padding: 12px;
      border-radius: 12px;
      display: flex;
      gap: 12px;
      align-items: center;
      min-width: 240px
    }

    .person img {
      width: 64px;
      height: 64px;
      border-radius: 12px;
      object-fit: cover
    }

    /* Contact */
    .contact {
      display: grid;
      grid-template-columns: 1fr 380px;
      gap: 18px;
      margin: 28px 0
    }

    form {
      background: white;
      padding: 18px;
      border-radius: 12px
    }

    label {
      display: block;
      font-size: 13px;
      margin-bottom: 6px
    }

    input,
    textarea,
    select {
      width: 100%;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid #e6eef6;
      margin-bottom: 10px
    }

    button {
      background: var(--blue-700);
      color: white;
      padding: 12px 14px;
      border-radius: 10px;
      border: 0;
      font-weight: 700
    }

    .logos {
      max-height: 100px;
      width: 200px;
    }

    footer {
      padding: 28px 0;
      color: #0b3b52
    }

    .slider {
      position: relative;
      width: 100%;
      max-width: 800px;
      overflow: hidden;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .slides {
      display: flex;
      transition: transform 0.5s ease-in-out;
      width: 100%;
    }

    .slides img {
      width: 100%;
      border-radius: 15px;
      flex-shrink: 0;
    }

    .btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      border: none;
      padding: 10px 15px;
      cursor: pointer;
      border-radius: 50%;
      font-size: 18px;
    }

    .btn.prev {
      left: 15px;
    }

    .btn.next {
      right: 15px;
    }

    /* Dots */
    .dots {
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
    }

    .dot {
      width: 10px;
      height: 10px;
      background: #ddd;
      border-radius: 50%;
      cursor: pointer;
      transition: background 0.3s;
    }

    .dot.active {
      background: #333;
    }

    .social-icons {
      display: flex;
      gap: 20px;
    }

    .social-icons a {
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #ffffff;
      border-radius: 20%;
      color: #04263a;
      font-size: 20px;
      text-decoration: none;
      transition: all 0.3s ease;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

    .social-icons a:hover {
      transform: scale(1.15);
    }

    /* Custom colors on hover */
    .social-icons a.facebook:hover {
      background: #1877f2;
    }

    .social-icons a.instagram:hover {
      background: #d62976 ;
    }

    .social-icons a.pinterest:hover {
      background: #E60023;
    }

    .social-icons a.tiktok:hover {
      background: #25f4ee;
    }

    .social-icons a.whatsapp:hover {
      background: #25D366;
    }


    /* Responsive */
    @media (max-width:980px) {
      .hero {
        grid-template-columns: 1fr
      }

      .services,
      .grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .contact {
        grid-template-columns: 1fr
      }
    }

    @media (max-width:520px) {
      nav a {
        display: none
      }

      .grid {
        grid-template-columns: 1fr
      }

      .services {
        grid-template-columns: 1fr
      }

      .logo {
        width: 44px;
        height: 44px
      }

      h1 {
        font-size: 26px
      }
    }