/* ================= Base ================= */
		body {
		  font-family: 'Inter', sans-serif;
		  background-color: #f8fafc;
		  margin: 0;
		  padding: 0;
		  background: linear-gradient(135deg, #f9f9f9, #e6f0ff);
		}

		/* ================= Header ================= */
		.header {
		   position: relative; /* Not sticky anymore */
		  top: 0;
		  z-index: 1000;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  background: linear-gradient(90deg, #ffffff 0%, #e3f2fd 100%);
		  backdrop-filter: blur(8px);
		  padding: 5px 5px 5px 5px;
		  border-bottom: 2px solid #0d47a1;
		  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		  flex-wrap: wrap;
		  animation: slideDownFade 0.7s ease-out;
		}

		.site-info {
		  display: flex;
		  align-items: center;
		  gap: 5px;
		}

		.site-logo {
		  width: 100%;          /* Adjusts to container width */
		  max-width: 350px;     /* Optional: Max width limit */
		  height: auto;
		  object-fit: contain;
		  border: none;
		  box-shadow: none;
		  border-radius: 0;
		  background: transparent;
		  transition: none;
		}

		.site-logo:hover {
		  transform: scale(1.05);
		}

		.site-name {
		  font-size: 24px;
		  font-weight: bold;
		  color: #0d47a1;
		  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
		}

		.nav-menu {
		  display: flex;
		  gap: 20px;
		  justify-content: center;
		  align-items: center;
		  flex: 1;
		}

		.nav-link {
		  font-size: 16px;
		  text-decoration: none;
		  color: #333;
		  font-weight: 600;
		  padding: 6px 12px;
		  border-radius: 6px;
		  transition: all 0.3s ease;
		}

		.nav-link:hover {
		  background-color: #007bff;
		  color: white;
		  transform: translateY(-2px);
		  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
		}

		.developer-info {
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  text-align: center;
		  margin-left: auto;
		}

		.developer-label {
		  font-size: 16px;
		  color: #333;
		  font-weight: 600;
		  margin-bottom: 5px;
		}

		.developer-logo {
		  width: 180px;
		  height: auto;
		  border-radius: 8px;
		  transition: transform 0.3s, box-shadow 0.3s;
		  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
		}

		.developer-logo:hover {
		  transform: scale(1.05);
		  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
		}

		/* ================= Container ================= */
		.container {
		  width: 75%;
		  margin: 0 auto;
		  padding: 30px 0;
		  display: grid;
		  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		  gap: 30px 20px;
		  animation: fadeInContainer 1s ease;
		  
		}

		@keyframes fadeInContainer {
		  0% {
			opacity: 0;
			transform: scale(0.95);
		  }
		  100% {
			opacity: 1;
			transform: scale(1);
		  }
		}

		/* ================= Card ================= */
		.card {
		  padding: 10px;
		  border-radius: 15px;
		  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
		  text-align: center;
		  text-decoration: none;
		  color: white;
		  background: linear-gradient(135deg, #007bff, #00d4ff);
		  transition: transform 0.4s ease, box-shadow 0.4s ease;
		  animation: popIn 0.6s ease;
		}

		.card:nth-child(2) { background: linear-gradient(135deg, #28a745, #85e085); }
		.card:nth-child(3) { background: linear-gradient(135deg, #ffc107, #ffdd57); color: #333; }
		.card:nth-child(4) { background: linear-gradient(135deg, #e83e8c, #ff6f91); }
		.card:nth-child(5) { background: linear-gradient(135deg, #6f42c1, #b084f1); }
		.card:nth-child(6) { background: linear-gradient(135deg, #20c997, #63ffda); }
		.card:nth-child(7) { background: linear-gradient(135deg, #fd7e14, #fdbb64); }

		.card:hover {
		  transform: scale(1.05) rotate(-0.5deg);
		  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
		  color: #007bff;
		}

		@keyframes popIn {
		  0% {
			opacity: 0;
			transform: translateY(30px) scale(0.9);
		  }
		  100% {
			opacity: 1;
			transform: translateY(0) scale(1);
		  }
		}

		.card h3 {
		  margin-bottom: 10px;
		  font-size: 20px;
		  color: white;
		  font-weight: bold;
		  transition: color 0.3s ease;
		}

		.card p {
		  font-size: 16px;
		  margin-bottom: 10px;
		}

		.btn {
		  display: inline-block;
		  padding: 10px 18px;
		  background-color: #ffffff;
		  color: #007bff;
		  text-decoration: none;
		  border-radius: 6px;
		  font-weight: 600;
		  box-shadow: 0 3px 6px rgba(255, 255, 255, 0.4);
		  transition: all 0.3s ease;
		}

		.btn:hover {
		  background-color: #007bff;
		  color: #fff;
		  transform: translateY(-3px);
		}

		.contact-btn {
		  background-color: #28a745;
		  color: #fff;
		}
		
		/* Dropdown Container */
		.nav-item {
		  position: relative;
		}

		* Dropdown Container */
		.nav-item {
		  position: relative;
		}

		/* Dropdown Menu - initially hidden */
		.dropdown-menu {
		  position: absolute;
		  top: 110%;
		  left: 0;
		  background: linear-gradient(135deg, #ffffff 0%, #f4f8fb 100%);
		  border-radius: 12px;
		  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
		  min-width: 200px;
		  opacity: 0;
		  transform: translateY(10px);
		  pointer-events: none;
		  transition: opacity 0.4s ease, transform 0.3s ease;
		  z-index: 999;
		  overflow: hidden;
		}

		/* Dropdown Links */
		.dropdown-link {
		  display: block;
		  padding: 12px 20px;
		  font-size: 15px;
		  font-weight: 500;
		  color: #333;
		  text-decoration: none;
		  transition: all 0.3s ease;
		  border-bottom: 1px solid #eee;
		}

		.dropdown-link:last-child {
		  border-bottom: none;
		}

		.dropdown-link:hover {
		  background: #e3f2fd;
		  color: #0d47a1;
		  padding-left: 24px;
		}

		/* Animate dropdown on hover */
		.nav-item:hover .dropdown-menu {
		  opacity: 1;
		  transform: translateY(0);
		  pointer-events: auto;
		}
		

		/* ================= Footer ================= */
		.footer {
		  bottom: 0;
		  width: 100%;
		  background: linear-gradient(90deg, #ffffff 0%, #e3f2fd 100%);
		  backdrop-filter: blur(8px);
		  border-top: 2px solid #0d47a1;
		  padding: 15px 20px;
		  text-align: center;
		  color: #0d47a1;
		  font-size: 15px;
		  font-weight: bold;
		  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
		  z-index: 999;
		  animation: slideUpFade 0.7s ease-out;
		}

		.footer-content p {
		  margin: 4px 0;
		  line-height: 1.5;
		}

		.footer a {
		  color: #0d47a1;
		  text-decoration: underline;
		  font-weight: 500;
		  transition: color 0.3s;
		}

		.footer a:hover {
		  color: #1565c0;
		}

		/* ================= Animations ================= */
		@keyframes slideDownFade {
		  0% {
			opacity: 0;
			transform: translateY(-20px);
		  }
		  100% {
			opacity: 1;
			transform: translateY(0);
		  }
		}

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

		/* ================= Responsive ================= */
		@media (max-width: 768px) {
		  .header {
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			padding: 15px;
		  }

		  .site-info {
			flex-direction: column;
			justify-content: center;
			align-items: center;
		  }

		  .developer-info {
			margin-left: 0;
			margin-top: 15px;
		  }

		  .nav-menu {
			flex-direction: column;
			gap: 10px;
			margin-top: 10px;
		  }

		  .container {
			width: 90%;
			grid-template-columns: 1fr;
		  }
		}

		@media (max-width: 600px) {
		  .footer {
			font-size: 13px;
			padding: 12px;
		  }
		}
		
		
		/*Feature Card Styling */
		@keyframes fadeInUp {
			0% {
			  opacity: 0;
			  transform: translateY(30px);
			}
			100% {
			  opacity: 1;
			  transform: translateY(0);
			}
		  }

		  .feature-card {
			background: #ffffff;
			border-radius: 12px;
			padding: 25px;
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
			transition: transform 0.3s ease, box-shadow 0.3s ease;
			opacity: 0;
			animation: fadeInUp 0.8s ease forwards;
		  }

		  .feature-card:hover {
			transform: translateY(-8px);
			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
		  }

		  /* Delay animation for each card */
		  .feature-card:nth-child(1) { animation-delay: 0.1s; }
		  .feature-card:nth-child(2) { animation-delay: 0.2s; }
		  .feature-card:nth-child(3) { animation-delay: 0.3s; }
		  .feature-card:nth-child(4) { animation-delay: 0.4s; }
		  .feature-card:nth-child(5) { animation-delay: 0.5s; }
		  .feature-card:nth-child(6) { animation-delay: 0.6s; }