body {
       font-family: 'Nunito', sans-serif;
       background-color: #f4f7f6;
       color: #2c3e50;
   }

   .navbar {
       /* position: fixed; */
       /* top: 0;
      left: 0; */
       width: 100%;
       z-index: 1030;
       background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
       padding: 15px 0;
       transition: all 0.3s ease;
   }

   .navbar.scrolled {
       padding: 10px 0;
       background-color: rgba(255, 255, 255, 1) !important;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
   }

   .navbar-brand {
       display: flex;
       align-items: center;
       padding: 0;
   }

   .navbar-brand img {
       height: 55px;
       transition: transform 0.3s ease;
   }

   .navbar-brand img:hover {
       transform: scale(1.05);
   }

   .navbar-brand span {
       font-size: 1.5rem;
       font-weight: 600;
       background: linear-gradient(45deg, #2575fc, #6a11cb);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
   }

   .nav-item {
       margin: 0 5px;
       position: relative;
   }

   .nav-link {
       color: #fff !important;
       font-weight: 500;
       padding: 8px 15px !important;
       position: relative;
       transition: all 0.3s ease;
   }

   .nav-link::before {
       content: '';
       position: absolute;
       bottom: 0;
       left: 50%;
       transform: translateX(-50%);
       width: 0;
       height: 2px;
       background: linear-gradient(45deg, #2575fc, #6a11cb);
       transition: width 0.3s ease;
       border-radius: 2px;
   }

   .nav-link:hover::before {
       width: 80%;
   }

   .nav-link:hover {
       color: #2575fc !important;
   }

   .dropdown-menu {
       border: none;
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
       border-radius: 12px;
       padding: 10px;
   }

   .dropdown-item {
       padding: 8px 20px;
       border-radius: 8px;
       transition: all 0.3s ease;
   }

   .dropdown-item:hover {
       background: linear-gradient(45deg, #2575fc20, #6a11cb20);
       transform: translateX(5px);
   }

   .btn-outline-primary {
       border: 2px solid #2575fc;
       border-radius: 50px;
       padding: 8px 25px;
       font-weight: 500;
       transition: all 0.3s ease;
   }

   .btn-outline-primary:hover {
       background: linear-gradient(45deg, #2575fc, #6a11cb);
       border-color: transparent;
       transform: translateY(-2px);
       box-shadow: 0 5px 15px rgba(37, 117, 252, 0.2);
   }

   .navbar-toggler {
       border: none;
       padding: 0;
   }

   .navbar-toggler:focus {
       box-shadow: none;
   }

   .navbar-toggler-icon {
       width: 24px;
       height: 24px;
       background-image: none;
       position: relative;
       transition: all 0.3s ease;
   }

   .navbar-toggler-icon::before,
   .navbar-toggler-icon::after {
       content: '';
       position: absolute;
       width: 24px;
       height: 2px;
       background: #2575fc;
       left: 0;
       transition: all 0.3s ease;
   }

   .navbar-toggler-icon::before {
       top: 8px;
   }

   .navbar-toggler-icon::after {
       bottom: 8px;
   }

   /* Hero Section */
   .hero-banner {
       background: linear-gradient(135deg, #0984e3 0%, #00cec9 100%);
       padding: 100px 0 120px;
       color: white;
       position: relative;
       clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
   }

   .hero-tagline {
       background: rgba(255, 255, 255, 0.2);
       padding: 8px 20px;
       border-radius: 50px;
       font-size: 0.9rem;
       letter-spacing: 1px;
       display: inline-block;
       margin-bottom: 25px;
       border: 1px solid rgba(255, 255, 255, 0.4);
   }

   /* SEO Content Section */
   .seo-content-card {
       background: #ffffff;
       border-radius: 20px;
       padding: 40px;
       box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
       margin-top: -60px;
       position: relative;
       z-index: 10;
       border-top: 5px solid #0984e3;
   }

   .highlight-text {
       color: #0984e3;
       font-weight: 700;
   }

   /* Feature Cards */
   .benefit-card {
       background: #ffffff;
       border-radius: 16px;
       padding: 30px 20px;
       text-align: center;
       height: 100%;
       border: 1px solid #e1e8ed;
       transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   }

   .benefit-card:hover {
       transform: translateY(-10px);
       box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
       border-color: #00cec9;
   }

   .benefit-icon {
       font-size: 2.5rem;
       margin-bottom: 20px;
       display: inline-block;
   }

   .icon-blue {
       color: #0984e3;
   }

   .icon-teal {
       color: #00cec9;
   }

   .icon-purple {
       color: #6c5ce7;
   }

   .icon-orange {
       color: #e17055;
   }

   /* Buttons */
   .btn-primary-custom {
       background-color: #2d3436;
       color: white;
       border: none;
       padding: 12px 30px;
       border-radius: 50px;
       font-weight: 700;
       transition: 0.3s;
   }

   .btn-primary-custom:hover {
       background-color: #0984e3;
       color: white;
       transform: scale(1.05);
   }

   /* Footer Styles */
   .footer {
       background: #1e293b;
       color: white;
       padding: 4rem 0 2rem;
   }

   .footer-logo {
       height: 150px;
       margin-bottom: 1rem;
   }

   .footer-links h5 {
       color: #94a3b8;
       margin-bottom: 1.5rem;
   }

   .footer-links ul {
       list-style: none;
       padding: 0;
   }

   .footer-links li {
       margin-bottom: 0.8rem;
   }

   .footer-links a {
       color: #e2e8f0;
       text-decoration: none;
       transition: all 0.3s ease;
   }

   .footer-links a:hover {
       color: var(--primary-color);
   }

   .social-links a {
       color: white;
       margin-right: 1rem;
       font-size: 1.5rem;
       transition: all 0.3s ease;
   }

   .social-links a:hover {
       color: var(--primary-color);
       transform: translateY(-3px);
   }

   .copyright {
       border-top: 1px solid #334155;
       margin-top: 3rem;
       padding-top: 2rem;
       text-align: center;
       color: #94a3b8;
   }

   .team-section {
       /* padding: 4rem 1rem; */
       background: #f8f9fa;
   }

   .container {
       max-width: 1200px;
       margin: 0 auto;
   }

   .team-section-title {
       text-align: center;
       margin-bottom: 3rem;
   }

   .team-section-title h2 {
       font-size: 2.5rem;
       color: #333;
       margin: 0;
       background: linear-gradient(45deg, #ff7e5f, #feb47b);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
   }

   .team-member-card {
       background: white;
       border-radius: 15px;
       overflow: hidden;
       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
       transition: transform 0.3s ease;
       height: 100%;
       width: 100%;
       max-width: 350px;
       margin: 0 auto;
   }

   .team-member-card:hover {
       transform: translateY(-5px);
   }

   .team-member-image-container {
       width: 100%;
       height: 250px;
       overflow: hidden;
   }

   .team-member-image {
       width: 100%;
       height: 100%;
       object-fit: contain;
       transition: transform 0.3s ease;
       border-radius: 50%;
   }

   .team-member-card:hover .team-member-image {
       transform: scale(1.05);
   }

   .team-member-details {
       padding: 1.5rem;
       text-align: center;
   }

   .team-member-name {
       font-size: 1.5rem;
       color: #333;
       margin: 0 0 0.5rem;
   }

   .team-member-position {
       font-size: 1rem;
       color: #ff7e5f;
       margin: 0 0 1rem;
       font-weight: 500;
   }

   .team-member-bio {
       font-size: 0.9rem;
       color: #666;
       line-height: 1.6;
       margin: 0 0 1rem;
       display: -webkit-box;
       -webkit-line-clamp: 4;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }

   .social-links {
       display: flex;
       justify-content: center;
       gap: 1rem;
   }

   .social-icon {
       color: #333;
       font-size: 1.2rem;
       transition: color 0.3s ease;
   }

   .social-icon:hover {
       color: #ff7e5f;
   }


   @media (max-width: 768px) {
       .navbar-collapse {
           background: rgb(162, 157, 157);
           padding: 20px;
           border-radius: 15px;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
           margin-top: 15px;
       }

       .nav-item {
           margin: 5px 0;
       }


       .dropdown-menu {
           box-shadow: none;
           border: none;
           padding-left: 20px;
       }

       .btn-group {
           margin-top: 15px;
       }

       .courses-grid {
           grid-template-columns: repeat(2, 1fr);
       }

       .recognition-container {
           flex-direction: column;
       }

       .recognition-content,
       .recognition-highlights {
           width: 100%;
       }

       .milestone-metrics {
           gap: 20px;
       }

       .feedback-grid {
           grid-template-columns: 1fr;
       }

       .logo-container {
           max-width: 100px;
       }

       .contact-us {
           padding: 50px 10px;
       }

       .contact-card {
           padding: 20px;
       }

       .section-title {
           font-size: 2.2rem;
       }

       .section-subtitle {
           font-size: 1.2rem;
       }

       .contact-image {
           max-width: 300px;
       }

       .footer {
           padding: 2rem 0 1rem;
       }

       .footer-section {
           margin-bottom: 2rem;
       }

       .team-section-title h2 {
           font-size: 2rem;
       }

       .team-member-card {
           max-width: 300px;
       }

       .team-member-image-container {
           height: 200px;
       }

       .swiper {
           padding: 1rem 0.5rem;
       }
   }