body {
   font-family: 'Roboto', sans-serif;
   scroll-behavior: smooth;
   line-height: 1.6;
 }

 .hero-section {
   background: linear-gradient(135deg, #00A676 0%, #007BFF 100%);
   position: relative;
   overflow: hidden;
 }

 .about-section {
   background-color: #E6F4F1;
 }

 .contact-section,
 .faq-section {
   background-color: #2D3748;
 }

 .tech-stack-section {
   background-color: #F8F9FA;
 }

 .course-section {
   background-color: #E6F4F1;
 }

 .service-card:hover,
 .pricing-card:hover,
 .resource-card:hover,
 .testimonial-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
 }

 .animate-fade-in {
   animation: fadeIn 1s ease-in;
 }

 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(20px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .sticky-nav {
   position: sticky;
   top: 0;
   z-index: 1000;

 }

 #vanta-bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
   opacity: 0.3;
 }

 .popular-plan {
   border: 2px solid #FFD700;
   position: relative;
 }

 .most-choose-plan {
   border: 2px solid #6fec09;
   position: relative;
 }

 .popular-badge {
   position: absolute;
   top: -10px;
   right: 20px;
   background: #FFD700;
   color: #000;
   padding: 2px 10px;
   border-radius: 20px;
   font-size: 12px;
   font-weight: bold;
 }

 .most-choose-badge {
   position: absolute;
   top: -10px;
   right: 20px;
   background: #6fec09;
   color: #000;
   padding: 2px 10px;
   border-radius: 20px;
   font-size: 12px;
   font-weight: bold;
 }

 .chatbot-container {
   position: fixed;
   bottom: 30px;
   right: 30px;
   z-index: 999;
 }

 .chatbot-button {
   background: #00A676;
   color: white;
   border-radius: 50%;
   width: 60px;
   height: 60px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   cursor: pointer;
   transition: all 0.3s ease;
 }

 .chatbot-button:hover {
   transform: scale(1.1);
 }

 .accordion-header {
   cursor: pointer;
   padding: 16px;
   background: #374151;
   border-radius: 8px;
   transition: all 0.3s ease;
 }

 .accordion-header:hover {
   background: #4B5563;
 }

 .accordion-content {
   display: none;
   padding: 16px;
   background: #1F2937;
   border-radius: 0 0 8px 8px;
 }

 .accordion-content.active {
   display: block;
 }

 .legal-section {
   background-color: #F8F9FA;
 }

 .back-to-top {
   position: fixed;
   bottom: 100px;
   right: 30px;
   background: #00A676;
   color: white;
   padding: 12px;
   border-radius: 50%;
   z-index: 998;
   display: none;
 }

 .back-to-top.visible {
   display: block;
 }

 .btn-navbar {
   background: linear-gradient(90deg, #00A676, #4F46E5);
   color: white;
 }

 /* Chat widget container */
 #chat-widget {
   position: fixed;
   bottom: 20px;
   right: 30px;
   z-index: 9999;
   font-family: sans-serif;
 }

 /* Floating button */
 #chat-toggle {
   background: #00A676;
   color: white;
   border: none;
   border-radius: 50%;
   width: 60px;
   height: 60px;
   font-size: 24px;
   cursor: pointer;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
   transition: background 0.3s;
 }

 #chat-toggle:hover {
   background: #24e6af;
 }

 /* Chat window */
 #chat-container {
   display: none;
   flex-direction: column;
   width: 320px;
   max-width: 90vw;
   height: 400px;
   max-height: 80vh;
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
   overflow: hidden;
   margin-bottom: 10px;
 }

 /* Header */
 #chat-header {
   background: linear-gradient(90deg, #00A676, #4F46E5);
   color: white;
   font-weight: bold;
   padding: 10px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 #chat-close {
   background: transparent;
   border: none;
   color: white;
   font-size: 20px;
   cursor: pointer;
 }

 /* Messages */
 #chat-box {
   flex: 1;
   padding: 10px;
   overflow-y: auto;
   background: #F3F4F6;
 }

 .message {
   margin-bottom: 10px;
   padding: 6px 10px;
   border-radius: 8px;
   max-width: 80%;
   word-wrap: break-word;
 }

 .message.user {
   background: #00A676;
   color: white;
   margin-left: auto;
 }

 .message.bot {
   background: #E5E7EB;
   color: black;
   margin-right: auto;
 }

 /* Input */
 #chat-input-container {
   display: flex;
   border-top: 1px solid #D1D5DB;
   padding: 8px;
   gap: 6px;
 }

 #user-input {
   flex: 1;
   padding: 6px 10px;
   border-radius: 8px;
   border: 1px solid black;
   outline: none;
   color: black;
 }

 #send-btn {
   background: #00A676;
   color: white;
   border: none;
   border-radius: 8px;
   padding: 6px 12px;
   cursor: pointer;
 }

 #send-btn:hover {
   background: #00A676;
 }

 /* Loading */
 #loading {
   padding: 5px 10px;
   font-style: italic;
   color: #6B7280;
   display: none;
   font-size: 12px;
 }

 /* Mobile adjustments */
 @media (max-width: 500px) {
   #chat-container {
     width: 90vw;
     height: 60vh;
   }

   #chat-toggle {
     width: 50px;
     height: 50px;
     font-size: 20px;
   }
 }

 .animate-fade-in {
   animation: fadeIn 0.3s ease-in-out;
 }

 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(20px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .typing-dot {
   display: inline-block;
   width: 6px;
   height: 6px;
   margin: 0 2px;
   background-color: #555;
   border-radius: 50%;
   opacity: 0.4;
   animation: typingBounce 1.4s infinite ease-in-out both;
 }

 .typing-dot:nth-child(2) {
   animation-delay: 0.2s;
 }

 .typing-dot:nth-child(3) {
   animation-delay: 0.4s;
 }

 @keyframes typingBounce {

   0%,
   80%,
   100% {
     transform: scale(0);
     opacity: 0.3;
   }

   40% {
     transform: scale(1);
     opacity: 1;
   }
 }