@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Playfair+Display:wght@400;500;700&display=swap');
        
        :root {
            --primary: #1a4b7a;
            --secondary: #357ab3;
            --accent: #f8b739;
            --light: #f8f9fa;
            --dark: #212529;
        }
        
        body {
            font-family: 'Roboto', sans-serif;
            color: var(--dark);
            line-height: 1.6;
        }
        
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Playfair Display', serif;
        }
        
        .hero-gradient {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
        }
        
        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .testimonial-card {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
    
          .head_div{
    /* position: sticky; */
    top: 0;
    background-color: #12205f; 
    color: white;              /* White text color */
    padding: 15px;
    border-radius: 8px;
    padding: 40px 20px 40px 20px;
    text-align: center;
        }


        /* navlink */

         .nav-link {
    color: black;
    transition: color 0.3s;
  }
  .nav-link.active {
    color: blue; /* active color */
  }
  .nav-link:hover {
    color: var(--accent);
  }