body {
     font-family: 'Times New Roman', Times, serif;
     font-size: 18px;
    }

    /* Navbar */
    .navbar-nav .nav-link {
      font-size: 20px; 
      font-weight: 600;
      color: #0d47a1;
      border-radius: 25px;
      padding: 8px 15px;
      transition: all 0.3s ease;
    }
    .navbar-nav .nav-link:hover {
      background: #0d47a1;
      color: #fff !important;
      box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    }

    /* Main Section */
    .welcome-section {
      background: linear-gradient(135deg, #0d47a1, #1565c0);
      color: #fff;
      padding: 4rem 2rem;
    }
    .welcome-section h1 {
      font-weight: 700;
    }
    .typewriter {
      overflow: hidden;
      white-space: nowrap;
      border-right: 3px solid #fff;
      animation: typing 4s steps(40, end), blink 0.75s step-end infinite;
    }
    @keyframes typing {
      from { width: 0 }
      to { width: 100% }
    }
    @keyframes blink {
      from, to { border-color: transparent }
      50% { border-color: #fff }
    }

    /* Footer */
    .footer-link a {
      transition: color 0.3s ease;
    }
    .footer-link a:hover {
      color: #ffc107 !important;
      text-decoration: underline;
    }
    .footer-icon {
      transition: transform 0.3s ease, background 0.3s ease;
    }
    .footer-icon:hover {
      transform: scale(1.1);
      background: #ffca28 !important;
      color: #0d47a1 !important;
    }

   

    .section-title {
      text-align: center;
      margin-bottom: 50px;
    }

    .section-title h2 {
      font-weight: bold;
      font-size: 2.5rem;
      color: #004080;
    }

    .card {
      background-color: #fff;
      border: 3px solid transparent;
      border-radius: 15px;
      transition: all 0.3s ease-in-out;
      height: 100%;
      box-shadow: 0px 6px 12px rgba(0,0,0,0.1);
      text-align: center;
      padding-top: 20px;
      position: relative;
      overflow: hidden;
    }

    .card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 15px;
      padding: 3px;
      background: linear-gradient(45deg, #0d6efd, #ff007f, #00c853, #ffc107);
      background-size: 300% 300%;
      animation: borderAnimation 6s linear infinite;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      pointer-events: none; /* fix links not clickable */
    }

    @keyframes borderAnimation {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .card:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0px 15px 30px rgba(0,0,0,0.2);
      border-color: #0d6efd;
    }

    .card img {
      width: 150px;
      height: 150px;
      object-fit: cover;
      border-radius: 50%;
      border: 4px solid #0d6efd;
      margin: 0 auto 15px auto;
      transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
    }

    .card img:hover {
      transform: scale(1.08);
      box-shadow: 0 0 20px rgba(13,110,253,0.5);
    }

    .card-text {
      text-align: justify;
    }

    .social-btn {
      transition: all 0.3s ease-in-out;
      border-radius: 25px;
    }

    .social-btn:hover {
      transform: scale(1.1);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }


     .card-header {
      font-weight: bold;
    }
    .accordion-button:focus {
      box-shadow: none;
    }
    .contact-icon {
      transition: 0.3s;
    }
    .contact-icon:hover {
      transform: scale(1.1);
      color: #0d47a1 !important;
    }