 <style>
    body {
      background: linear-gradient(to right, #0F2027, #203A43, #2C5364);
      color: #fff;
        font-family: 'Roboto', sans-serif;
    }
h1, h2, h3, h4, h5 {
  font-family: 'Poppins', sans-serif;
}

    .navbar {
      background-color: #ccccff;
    }

.navbar .nav-link {
  color: black !important;
}
.navbar .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }

.navbar .nav-link:hover {
  color: #007bff !important; /* Optional: hover color */
}

    .hero-section {
      min-height: 100vh;
      padding-top: 120px;
      padding-bottom: 100px;
      text-align: center;
      background: linear-gradient(to right, #2A5298, #1E3C72);
      animation: fadeIn 2s ease;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

.btn-primary {
  background-color: #00d4ff;
  border: none;
  color: #000;
  font-weight: 600;
  padding: 12px 30px;
  border-radius: 50px;
  transition: 0.3s ease-in-out;
}

.btn-primary:hover {
  background-color: #29abe2;
  transform: scale(1.05);
}


    .hero-section h1, .hero-section p, .hero-section a {
      animation: slideUp 1.5s ease forwards;
 font-family: 'Poppins', sans-serif; /* or choose another font */      opacity: 0;
    }


.hero-section p {
  font-weight: 700; /* Makes the paragraph bold */
}

    .hero-section h1 { animation-delay: 0.5s; }
    .hero-section p { animation-delay: 1s; }
    .hero-section a { animation-delay: 1.5s; }

    @keyframes fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }

    @keyframes slideUp {
      0% { transform: translateY(50px); opacity: 0; }
      100% { transform: translateY(0); opacity: 1; }
    }

    .animated-shapes .circle {
      position: absolute;
      border-radius: 50%;
      background: rgba(255,255,255,0.05);
      animation: float 10s infinite ease-in-out;
    }

    .circle:nth-child(1) {
      width: 200px; height: 200px; top: 20%; left: 10%; animation-duration: 12s;
    }
    .circle:nth-child(2) {
      width: 300px; height: 300px; top: 50%; left: 70%; animation-duration: 15s;
    }
    .circle:nth-child(3) {
      width: 150px; height: 150px; top: 80%; left: 40%; animation-duration: 18s;
    }

    @keyframes float {
      0% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-20px) rotate(180deg); }
      100% { transform: translateY(0) rotate(360deg); }
    }

    .card {
      background: #34495E;
      transition: transform 0.5s, box-shadow 0.3s;
      border: none;
      border-radius: 15px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }

    .card:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 25px rgba(0,0,0,0.4);
    }

.contact-section {
  background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
}

.contact-section .contact-icon {
  margin-right: 10px;
  color: #00d4ff;
  animation: float 1.5s ease-in-out infinite;
}

.map-container {
  overflow: hidden;
  border: 5px solid #fff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Icon animation */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

.client-logo {
  height: 80px;
  object-fit: contain;
  transition: transform 0.3s ease, opacity 0.3s ease;
  filter: grayscale(100%);
}

.client-logo:hover {
  transform: scale(1.1);
  filter: grayscale(0%);
  opacity: 1;
}


.team-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 20px auto 10px auto;
  border: 3px solid #00d4ff;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
}

.team-img:hover {
  transform: scale(1.05);
  border-color: #29abe2;
  box-shadow: 0 6px 20px rgba(0, 212, 255, 0.5);
}


    .footer {
      background: #2C3E50;
      padding: 20px 0;
      text-align: center;
    }

    h2 {
      font-weight: 700;
    }
  </style> 
