  <style>

p,
.hero-sub,
.section-sub,
.p-desc,
.testimonial-card p,
.contact-card p,
.hero-card p {
  text-align: justify;
}

    :root {
      --primary: #2563eb;
      --primary-soft: #e0edff;
      --accent-pink: #f0acac;
      --accent-mint: #22c55e;
      --accent-yellow: #facc15;
      --text-dark: #0f172a;
      --text-muted: #e5e7eb;
      --card-border: #e5e7eb;
      --shadow-soft: 0 12px 30px rgba(15,23,42,.35);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      background-color: #f3f4f8;
      color: var(--text-dark);
    }

    a { text-decoration: none; }

    /* NAVBAR */
    .navbar {
      background-color: #ffffff;
      box-shadow: 0 2px 18px rgba(15,23,42,.06);
    }
    .navbar-brand span {
      letter-spacing: .04em;
      font-weight: 700;
    }
    .nav-link {
      font-weight: 500;
      color: #64748b !important;
    }
    .nav-link:hover,
    .nav-link:focus {
      color: var(--primary) !important;
    }
    .navbar .fa-code {
      color: var(--primary);
    }

    .nav-link-button {
      border: none;
      background: transparent;
      padding: .5rem 1rem;
      cursor: pointer;
    }
    .nav-link-button:focus {
      outline: none;
    }

    .hero-area {
      position: relative;
      overflow: hidden;
      padding: 4.5rem 0 4rem;
      color: #fff;
      background:
        linear-gradient(135deg, rgba(44,39,100,0.85), rgba(91,74,165,0.85)),
        url('myimg.jpeg') center/cover no-repeat;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      animation: heroBgCycle 12s ease-in-out infinite;
      min-height: 100vh;
      display: flex;
      align-items: center;
    }

    .hero-content {
      position: relative;
      z-index: 1;
      width: 100%;
    }

    
    @keyframes heroBgCycle {
      0%, 30% {
        background-image:
          linear-gradient(135deg, rgba(44,39,100,0.85), rgba(91,74,165,0.85)),
          url('myimg.jpeg');
        background-position: center top;
      }
      33%, 63% {
        background-image:
          linear-gradient(135deg, rgba(44,39,100,0.85), rgba(91,74,165,0.85)),
          url('cover-1.jpg');
        background-position: center center;
      }
      66%, 96% {
        background-image:
          linear-gradient(135deg, rgba(44,39,100,0.85), rgba(91,74,165,0.85)),
          url('IMG3.jpg');
        background-position: center bottom;
      }
      100% {
        background-image:
          linear-gradient(135deg, rgba(44,39,100,0.85), rgba(91,74,165,0.85)),
          url('myimg.jpeg');
        background-position: center top;
      }
    }

    .hero-badge {
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.35rem .75rem;
      border-radius:999px;
      background:rgba(15,23,42,0.65);
      border:1px solid rgba(148,163,184,0.5);
      font-size:.85rem;
      color:var(--text-muted);
      box-shadow:0 4px 12px rgba(15,23,42,.5);
    }
    .hero-title {
      font-size: clamp(2.5rem, 4vw, 3.3rem);
      font-weight: 800;
      letter-spacing: -.04em;
      color: #f9fafb;
    }
    .hero-sub {
      color: #e5e7eb;
      max-width: 640px;
    }

    .hero-card {
      position: relative;
      background: rgba(15,23,42,0.88);
      border-radius:0;
      padding: 2rem;
      box-shadow: var(--shadow-soft);
      border:1px solid rgba(148,163,184,0.5);
      color:#e5e7eb;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
    }

    .hero-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 45px rgba(15,23,42,.8);
      border-color: rgba(129,140,248,0.9);
      background: rgba(15,23,42,0.96);
    }

    .hero-card .small {
      color: #f9fafb !important;
    }

    .hero-pill {
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.35rem .8rem;
      border-radius:999px;
      background: rgba(161, 197, 255, 0.18);
      color: #bfdbfe;
      font-size:.78rem;
      font-weight:600;
      border:1px solid rgba(129,140,248,0.7);
    }
    .hero-pill-alt {
      background:rgba(248,250,252,0.08);
      color:#fee2e2;
      border-color:rgba(240, 233, 233, 0.8);
    }
    .pill {
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.3rem .75rem;
      border-radius:999px;
      border:1px dashed rgba(148,163,184,.7);
      background: rgba(15,23,42,.6);
      font-size:.8rem;
      color:#e5e7eb;
    }
    .pill i { color: #93c5fd; }

    .section-title {
      font-weight: 700;
      font-size: 1.7rem;
      letter-spacing: -.03em;
      color: #0f172a;
    }
    .section-sub {
      color: #6b7280;
      max-width: 640px;
    }


#projects-section {
  background: #e0f2fe;              
  padding: 4rem 0 4.5rem;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

/* content above bubbles */
#projects-section > .container {
  position: relative;
  z-index: 1;
}

/* LAYER 1 – pastel dots */
#projects-section::before {
  content: "";
  position: absolute;
  top: 8%;
  left: 3%;
  width: 18px;                      /* bigger */
  height: 18px;                     /* bigger */
  border-radius: 50%;
  background: rgba(168, 85, 247, 0.35); /* base purple */
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  box-shadow:
    40px  20px  0 rgba(244, 114, 182, 0.45),
    90px  60px  0 rgba(59, 130, 246, 0.45),
    150px 25px  0 rgba(56, 189, 248, 0.45),
    210px 70px  0 rgba(52, 211, 153, 0.45),
    270px 35px  0 rgba(251, 191, 36, 0.45),
    330px 80px  0 rgba(129, 140, 248, 0.45),
    390px 30px  0 rgba(248, 250, 252, 0.6),
    450px 65px  0 rgba(244, 114, 182, 0.45),
    510px 15px  0 rgba(59, 130, 246, 0.45),
    570px 55px  0 rgba(56, 189, 248, 0.45),
    630px 25px  0 rgba(52, 211, 153, 0.45),
    690px 75px  0 rgba(251, 191, 36, 0.45),
    750px 40px  0 rgba(129, 140, 248, 0.45),
    810px 90px  0 rgba(248, 250, 252, 0.6),
    870px 35px  0 rgba(244, 114, 182, 0.45),
    930px 70px  0 rgba(59, 130, 246, 0.45),
    990px 30px  0 rgba(56, 189, 248, 0.45),
    1050px 80px 0 rgba(52, 211, 153, 0.45),
    1110px 45px 0 rgba(251, 191, 36, 0.45),
    1170px 20px 0 rgba(129, 140, 248, 0.45);
  animation: projectsDotsFloat1 14s ease-in-out infinite alternate;
}




@media (max-width: 768px) {
  #projects-section::before {
    animation-duration: 18s;
  }
  #projects-section::after {
    animation-duration: 22s;
  }
}

    #testimonials {
      background: #fef3c7;
      padding: 4rem 0 4.5rem;
    }
    #contact {
      background: #dcfce7;
      padding: 4rem 0 4.5rem;
    }

    .search-bar-wrapper {
      margin-bottom: 1.75rem;
    }
    .search-bar .form-control {
      border-radius: 999px 0 0 999px;
      padding-left: 1.25rem;
      padding-right: .75rem;
      border: 1px solid #cbd5e1;
    }
    .search-bar .btn {
      border-radius: 0 999px 999px 0;
      font-size: .85rem;
      padding: .55rem .9rem;
    }
    .p-chip {
      border-radius:999px;
      border:1px solid rgba(148,163,184,0.8);
      background:#f9fafb;
      color:#64748b;
      padding:.35rem .9rem;
      font-size:.85rem;
      cursor:pointer;
      transition: all .2s ease;
    }
    .p-chip:hover {
      background:#e0edff;
      border-color: var(--primary);
      color: var(--primary);
    }
    .p-chip.active {
      background: var(--primary);
      border-color: var(--primary);
      color:#ffffff;
    }

    .p-card {
      border-radius: 0;
      background: #ffffff;
      border:1px solid var(--card-border);
      padding: 1.25rem;
      height: 100%;
      display:flex;
      flex-direction:column;
      box-shadow:0 6px 16px rgba(15,23,42,.08);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .p-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-soft);
      border-color: var(--primary);
    }
    .p-card img {
      border-radius:0;
    }
    .p-card h3 {
      font-size: 1.05rem;
      margin-bottom: .25rem;
    }
    .p-desc {
      font-size: .92rem;
      color: #6b7280;
      margin-bottom: .8rem;
    }
    .p-badge {
      display:inline-flex;
      padding:.2rem .6rem;
      border-radius:999px;
      border:1px solid #e5e7eb;
      font-size:.75rem;
      margin: 0 .25rem .3rem 0;
      background:#f9fafb;
    }

    .testimonial-card {
      border-radius:0;
      background:#ffffff;
      border:1px solid var(--card-border);
      padding: 1.5rem;
      height: 100%;
      box-shadow:0 6px 16px rgba(15,23,42,.08);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .testimonial-card:hover {
      transform: translateY(-6px);
      box-shadow:0 6px 16px rgba(15,23,42,.18);
      border-color: var(--accent-pink);
    }

    .contact-card {
      border-radius:0;
      background:#ffffff;
      border:1px solid var(--card-border);
      padding: 1.6rem;
      box-shadow:0 6px 18px rgba(15,23,42,.08);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .contact-card:hover {
      transform: translateY(-4px);
      box-shadow:var(--shadow-soft);
      border-color: var(--accent-mint);
    }

    footer {
      border-top:1px solid #e5e7eb;
      padding:1.3rem 0 1rem;
      font-size:.9rem;
      color:#6b7280;
      background:#ffffff;
    }
    footer a {
      color:#6b7280;
    }
    footer a:hover {
      color:var(--primary);
    }

    /* Admin login modal - smooth popup animation */
    .admin-login-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(15,23,42,0.75);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1080;
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease;
    }
    .admin-login-backdrop.show {
      opacity: 1;
      pointer-events: auto;
    }
    .admin-login-modal {
      position: relative;
      max-width: 420px;
      width: 100%;
      background: #020617;
      color: #e5e7eb;
      border-radius: 0;
      padding: 1.75rem 1.75rem 1.5rem;
      border: 1px solid rgba(148,163,184,0.7);
      box-shadow: 0 24px 60px rgba(15,23,42,0.95);
      opacity: 0;
      transform: translateY(16px) scale(0.96);
    }
    .admin-login-backdrop.show .admin-login-modal {
      animation: adminModalIn .28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @keyframes adminModalIn {
      from {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .admin-login-title {
      font-size: 1.4rem;
      font-weight: 700;
      margin-bottom: .35rem;
      letter-spacing: -.02em;
    }
    .admin-login-subtitle {
      font-size: .9rem;
      color: #9ca3af;
      margin-bottom: 1.1rem;
    }
    .admin-login-badge {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .25rem .7rem;
      border-radius: 999px;
      font-size: .78rem;
      border: 1px solid rgba(129,140,248,0.85);
      background: rgba(30,64,175,0.7);
      color: #e5e7eb;
    }
    .admin-login-close {
      position: absolute;
      right: .75rem;
      top: .75rem;
      width: 32px;
      height: 32px;
      border-radius: 999px;
      border: none;
      background: rgba(15,23,42,0.8);
      color: #e5e7eb;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background .15s ease, transform .15s ease;
    }
    .admin-login-close:hover {
      background: rgba(31,41,55,1);
      transform: translateY(-1px);
    }
    .admin-login-form .form-control {
      background: #020617;
      border-radius: 0;
      border-color: rgba(75,85,99,0.9);
      color: #e5e7eb;
    }
    .admin-login-form .form-control:focus {
      border-color: #4f46e5;
      box-shadow: 0 0 0 1px rgba(79,70,229,.8);
      background: #020617;
      color: #e5e7eb;
    }
    .admin-login-form .form-label {
      color: #9ca3af;
    }
    .admin-toggle-password {
      font-size: .78rem;
      color: #9ca3af;
    }
  </style>