body {
      font-family: 'Poppins', sans-serif;
      background: #f9f9f9;
    }

    /* ---------- Hero Section ---------- */
    .hero-section {
      padding: 80px 0;
      position: relative;
      overflow: hidden;
      background: linear-gradient(to right, #ffffff, #f0f6ff);
    }

    .hero-text {
      padding: 40px;
    }

    .hero-text h1 {
      font-weight: 700;
      font-size: 2.5rem;
      color: #222;
    }

    .hero-text p {
      font-size: 1.1rem;
      color: #555;
      line-height: 1.7;
    }

    .advocate-img {
      position: relative;
      z-index: 2;
    }

    .advocate-img img {
      width: 100%;
      border-radius: 20px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.2);
      transform: scale(1.05);
    }

    .advocate-img::before {
      content: '';
      position: absolute;
      top: -20px;
      left: -20px;
      width: 100%;
      height: 100%;
      border: 4px solid #007bff;
      border-radius: 20px;
      z-index: -1;
      transform: rotate(-3deg);
    }

    /* Custom Image Styling */
    .custom-adv-img {
      width: 50%;          
      border-radius: 20px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.25);
      position: relative;
      right: -30px;   /* container se bahar overlap */
      top: 10px;      /* thoda vertical adjust */
      z-index: 2;
      transition: transform 0.3s ease-in-out;
    }

    /* Hover effect for extra attraction */
    .custom-adv-img:hover {
      transform: scale(1.08) translateY(-5px);
      box-shadow: 0 15px 35px rgba(0,0,0,0.35);
    }


    @media(max-width: 768px) {
      .hero-section {
        text-align: center;
      }
      .advocate-img::before {
        display: none;
      }
    }

    .navbar {
      transition: background-color 0.3s ease;
    }

    .navbar.scrolled {
      background-color: #ffffff !important; /* or your desired color */
      box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    }


    /* ---------- Services Section ---------- */
    .services-section {
      padding: 80px 0;
      background: #fff;
    }

    .services-section h2 {
      text-align: center;
      font-weight: 700;
      margin-bottom: 50px;
      color: #222;
    }

    .service-card {
      background: #f9f9f9;
      border-radius: 15px;
      padding: 30px;
      text-align: center;
      transition: all 0.3s ease;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .service-card i {
      font-size: 40px;
      color: #007bff;
      margin-bottom: 20px;
    }

    .service-card h5 {
      font-weight: 600;
      margin-bottom: 15px;
    }

    .service-card p {
      font-size: 0.95rem;
      color: #555;
    }

    .service-card:hover {
      transform: translateY(-10px);
      background: #007bff;
      color: #fff;
    }

    .service-card:hover i {
      color: #fff;
    }

    .footer-section {
      background: #1a1a1a;  /* Dark grey */
    }

    .footer-section h5, 
    .footer-section h6 {
      color: #ffffff;
    }

    .footer-link {
      color: #bbb;
      text-decoration: none;
      transition: color 0.3s;
    }

    .footer-link:hover {
      color: #ffffff;
    }

    .social-icons a {
      color: #bbb;
      transition: color 0.3s;
    }

    .social-icons a:hover {
      color: #0d6efd; /* Bootstrap primary */
}