body,
       html {
           margin: 0;
           padding: 0;
           height: 100%;
           overflow-x: hidden;
           font-family: 'Poppins', sans-serif;
           background: #0e0e0e;
           color: #fff;
       }

       /* Theme Colors */
       :root {
           --bg-color: #ffffff;
           --text-color: #000000;
       }

       body.dark-mode {
           --bg-color: #000000;
           --text-color: #f2f2f2;
           background-color: var(--bg-color);
           color: var(--text-color);
       }

       body {
           background-color: var(--bg-color);
           color: var(--text-color);
           transition: background 0.4s ease, color 0.4s ease;
       }

       /* Toggle Button Styling */
       .theme-btn {
           position: fixed;
           top: 14px;
           right: 116px;
           width: 50px;
           height: 50px;
           z-index: 1002;
           background: none;
           border: none;
           cursor: pointer;
       }

       .theme-btn img {
           width: 105px;
           height: 110%;
           transition: transform 0.3s ease;
       }


       /* Navbar */
       header.navbar {
           background: linear-gradient(to right, #0a0a0a, #1a1a1a, #2a2a2a);
           padding: 15px 20px;
           position: sticky;
           top: 0;
           left: 0;
           width: 100%;
           z-index: 1000;
           box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
       }

       header nav button {
           display: none;
           margin: .5rem;
           margin-right: 0;
           border: 0;
           background-color: rgba(0, 0, 0, 0);
           padding: .5rem;
           position: relative;
           width: 50px;
           height: 50px;
           z-index: 9;
       }

       .navbar-container {
           display: flex;
           justify-content: space-between;
           align-items: center;
           max-width: 970px;
           margin: 0 auto;
           padding: 10px 20px;
           position: relative;
       }

       .menu {
           position: relative;
           width: 60px;
           height: 60px;
           display: flex;
           justify-content: center;
           align-items: center;
           background: #282828;
           cursor: pointer;
       }

       .menu span {
           position: relative;
           width: 100%;
           height: 100%;
           display: flex;
           justify-content: center;
           align-items: center;
           transform: rotate(45deg);
           transition: 0.5s;
       }

       .menu.active span {
           transform: rotate(135deg);
           transition-delay: 0.5s;
       }

       .menu span::before {
           content: "";
           position: absolute;
           width: 40px;
           height: 3px;
           background: white;
           border-radius: 3px;
           transition: 0.5s;
       }

       .menu.active span::before {
           transform: rotate(-270deg);
           transition-delay: 1s;
       }

       .menu span::after {
           content: "";
           position: absolute;
           width: 25px;
           height: 3px;
           background: #fff;
           border-radius: 3px;
           transition: 0.5s;
           transform: translateY(-12px);
           box-shadow: 0 24px #fff;
       }

       .menu.active span::after {
           width: 40px;
           transform: translateY(0px);
           box-shadow: 0 0 #fff;
       }

       .logo {
           font-size: 2.2rem;
           font-weight: 700;
           color: #fff;
           text-decoration: none;
           letter-spacing: 2px;
           padding-right: 20px;
       }

       .logo img {
           height: 50px;
           width: auto;
           display: block;
           position: relative;
           left: -90px;
       }

       .nav-links {
           display: flex;
           gap: 30px;
           transform: translateX(100%);
           opacity: 0;
           transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
           backdrop-filter: blur(10px);
           box-shadow: -10px 0 20px rgba(0, 0, 0, 0.5);
       }

       .nav-links.active {
           transform: translateX(0%);
           opacity: 1;
       }

       .nav-links a {
           color: #e0e0e0;
           text-decoration: none;
           font-size: 1.05rem;
           font-weight: 500;
           padding: 5px 0;
           position: relative;
           transition: color 0.3s ease, transform 0.3s ease;
           opacity: 0;
           transform: translateX(30px);
           transition: all 0.4s ease;
       }

       .nav-links.active a:nth-child(1) {
           transition-delay: 0.1s;
       }

       .nav-links.active a:nth-child(2) {
           transition-delay: 0.2s;
       }

       .nav-links.active a:nth-child(3) {
           transition-delay: 0.3s;
       }

       .nav-links.active a:nth-child(4) {
           transition-delay: 0.4s;
       }

       .nav-links.active a:nth-child(5) {
           transition-delay: 0.5s;
       }

       .nav-links.active a:nth-child(6) {
           transition-delay: 0.6s;
       }


       .nav-links.active a {
           opacity: 1;
           transform: translateX(0);
       }

       .nav-links a::after {
           content: '';
           position: absolute;
           left: 0;
           bottom: 0;
           width: 0%;
           /* Start with no width for the underline */
           height: 2px;
           background-color: #ffb700;
           /* Yellow underline */
           transition: width 0.3s ease;
           /* Animate width */
       }

       .nav-links a:hover {
           color: #ffb700;
           transform: translateY(-3px);
           /* Subtle lift effect */
       }

       .nav-links a:hover::after {
           width: 100%;
           /* Expand underline to full width on hover */
       }

       .hamburger-menu {
           display: none;
           font-size: 1.8rem;
           color: #fff;
           cursor: pointer;
       }

       @media (max-width: 993px) {
           .theme-btn {
               right: 149px;
               top: 30px;
           }

           .theme-btn img {
               width: 105px;
               height: 110%;
           }
       }

       /* For desktops */
       @media (min-width: 994px) {
           .theme-btn {
               right: 84px;
               top: 20px;
           }

           .navbar-container {
               justify-content: center;
           }
       }

       @media (max-width: 1205px) {
           .nav-links {
               /* width: 652px !important; */
               justify-content: center !important;
               padding-right: 21px !important;
           }
       }

       /* Mobile Navigation Overlay */
       @media (min-width: 993px) {
           .nav-links {
               transform: none !important;
               opacity: 1 !important;
               position: static;
               flex-direction: row;
               justify-content: flex-end;
               align-items: center;
               gap: 30px;
               height: auto;
               padding: 0;
               background: transparent;
               box-shadow: none;
               width: 780px;
           }

           .nav-links a {
               opacity: 1;
               transform: none;
               border-bottom: none;
               font-size: 1.05rem;
               padding: 0;
           }

           .hamburger-menu {
               display: none !important;
           }

           .logo img {
               left: -50.5px;
           }
       }

       @media (max-width: 992px) {
           .nav-links {
               display: flex;
               position: fixed;
               top: 0;
               right: 0;
               width: 100vw;
               height: 100%;
               background: #1a1a1a;
               flex-direction: column;
               justify-content: flex-start;
               align-items: flex-start;
               padding: 80px 30px 20px;
               transform: translateX(100%);
               transition: transform 0.3s ease-in-out;
               box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
               z-index: 999;
               overflow-y: auto;
           }

           .nav-links.active {
               transform: translateX(0%);
           }

           .nav-links a {
               width: 100%;
               padding: 15px 0;
               border-bottom: 1px solid rgba(255, 255, 255, 0.1);
               font-size: 1.2rem;
               border-bottom: none;
               padding-bottom: 15px;
           }

           .nav-links a::after {
               display: none;
           }

           .nav-links a:last-child {
               border-bottom: none;
           }

           .hamburger-menu {
               position: absolute;
               right: 18px;
               top: 50%;
               display: block;
               z-index: 1001;
               position: relative;
           }

           .logo img {
               left: -26.5px;
               display: block;
               z-index: 99999 !important;
           }

           #chatbot-modal {
               width: 45%;
           }

       }

       @media (max-width: 600px) {
           .logo {
               font-size: 1.8rem;
           }

           .logo img {
               left: -26.5px;
           }
       }

       .hero {
           height: 100vh;
           position: relative;
           display: flex;
           align-items: center;
           justify-content: center;
           flex-direction: column;
           overflow: hidden;
       }

       .hero::before {
           content: "";
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: linear-gradient(45deg, rgb(0, 0, 0), rgb(255 183 0));
           z-index: 1;
       }

       .hero h1,
       .hero p {
           position: relative;
           z-index: 2;
       }

       .hero-logo {
           width: 200px;
           z-index: 2;
       }

       .hero-text {
           font-size: 2.5rem;
           margin-top: 5px;
           z-index: 2;
           color: whitesmoke;
           font-weight: 10px;
       }

       .shine {
           background: linear-gradient(90deg, #ffb400, #ff6600, #ffb400);
           background-size: 200% auto;
           color: transparent;
           -webkit-background-clip: text;
           background-clip: text;
           animation: shine 3s linear infinite;
       }

       @keyframes shine {
           to {
               background-position: 200% center;
           }
       }

       .scroll-btn {
           margin-top: 30px;
           font-size: 1rem;
           background: #fff;
           color: #000;
           padding: 10px 20px;
           border-radius: 25px;
           border: none;
           cursor: pointer;
           z-index: 2;
       }

       .spline {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           z-index: 1;
           opacity: 50%;
       }

       #main-heading {
           font-weight: bold;
           font-family: Italiana;
           font-size: 4rem;
           text-transform: uppercase;
       }

       .banners {
           filter: brightness(0.5);
       }

       /* Testimonials Section */
       .testimonials-section {
           background-color: var(--bg-color);
           padding: 80px 20px;
           display: flex;
           justify-content: center;
           align-items: center;
           min-height: 50vh;
       }

       .testimonial-grid-container {
           display: flex;
           width: 100%;
           align-items: center;
           gap: 40px;
           position: relative;
           justify-content: center;
       }

       .testimonial-left-content {
           flex: 1;
           min-width: 300px;
           max-width: 450px;
           text-align: left;
       }

       .testimonial-subheading {
           color: #ffb700;
           font-size: 1.1rem;
           font-weight: 600;
           margin-bottom: 10px;
       }

       .testimonial-main-heading {
           font-size: 3rem;
           color: var(--text-color);
           line-height: 1.2;
           margin-bottom: 20px;
       }

       .testimonial-carousel-wrapper {
           flex: 2;
           min-width: 400px;
           max-width: 700px;
           position: relative;
           padding: 0 40px;
       }

       .testimonialSwiper {
           width: 100%;
           height: auto;
           padding-bottom: 20px;
       }

       .testimonial-card {
           background-color: #fff;
           border: 1px solid #e0e0e0;
           border-radius: 15px;
           padding: 30px;
           box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
           max-width: 100%;
           margin: 0 auto;
           display: flex;
           flex-direction: column;
           height: 100%;
           position: relative;
           z-index: 1;
       }

       .testimonial-card::before {
           content: '';
           position: absolute;
           top: -5px;
           left: -5px;
           right: -5px;
           bottom: -5px;
           border: 1px solid rgba(0, 0, 0, 0.1);
           border-radius: 18px;
           z-index: 0;
       }

       .testimonial-quote {
           font-size: 1.1rem;
           line-height: 1.8;
           color: var(--text-color);
           margin-bottom: 30px;
           position: relative;
           padding-left: 20px;
           z-index: 1;
       }

       .testimonial-quote::before {
           content: '"';
           font-family: Georgia, serif;
           font-size: 6em;
           color: #ffb700;
           position: absolute;
           left: -20px;
           top: -10px;
           opacity: 0.15;
           z-index: 0;
       }

       .testimonial-author {
           display: flex;
           align-items: center;
           justify-content: space-between;
           gap: 20px;
           margin-top: auto;
           z-index: 1;
       }

       .author-details {
           text-align: left;
       }

       .author-name {
           font-size: 1.2rem;
           font-weight: 700;
           color: var(--text-color);
           margin-bottom: 5px;
       }

       .author-title {
           font-size: 0.95rem;
           color: #555;
       }

       .author-image {
           width: 90px;
           height: 90px;
           border-radius: 10px;
           overflow: hidden;
           border: 3px solid #ffb700;
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
           flex-shrink: 0;
       }

       .author-image img {
           width: 100%;
           height: 100%;
           object-fit: cover;
       }

       .testimonial-swiper-button-prev,
       .testimonial-swiper-button-next {
           color: #000;
           background-color: var(--bg-color);
           border-radius: 50%;
           width: 50px;
           height: 50px;
           display: flex;
           align-items: center;
           justify-content: center;
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
           transition: background-color 0.3s ease, transform 0.2s ease;
       }

       .testimonial-swiper-button-prev:hover,
       .testimonial-swiper-button-next:hover {
           background-color: var(--bg-color);
           transform: scale(1.05);
       }

       .testimonial-swiper-button-prev {
           left: 0;
       }

       .testimonial-swiper-button-next {
           right: 0;
       }

       .testimonial-swiper-button-prev::after {
           font-size: 1.5rem !important;
           content: 'prev';
       }

       .testimonial-swiper-button-next::after {
           font-size: 1.5rem !important;
           content: 'next';
       }

       @media (max-width: 460px) {
           #main-heading {
               font-size: 3rem;
           }
       }

       @media (max-width: 1250px) {
           .testimonial-grid-container {
               flex-direction: column;
               text-align: center;
               gap: 60px;
           }

           .testimonial-left-content {
               max-width: 100%;
               text-align: center;
           }

           .testimonial-main-heading {
               font-size: 2.8rem;
           }

           .testimonial-carousel-wrapper {
               order: 1;
               min-width: unset;
               max-width: 100%;
               padding: 0 20px;
           }

           .testimonial-swiper-button-prev {
               left: 0px;
           }

           .testimonial-swiper-button-next {
               right: 0px;
           }
       }

       @media (max-width: 768px) {
           .testimonial-main-heading {
               font-size: 2.2rem;
           }

           .testimonial-card {
               padding: 25px;
           }

           .testimonial-quote {
               font-size: 1rem;
           }

           .author-image {
               width: 80px;
               height: 80px;
           }

           .testimonial-swiper-button-prev,
           .testimonial-swiper-button-next {
               width: 40px;
               height: 40px;
           }

           .testimonial-swiper-button-prev::after,
           .testimonial-swiper-button-next::after {
               font-size: 1.2rem !important;
           }
       }

       @media (max-width: 480px) {
           .testimonials-section {
               padding: 50px 15px;
           }

           .testimonial-quote::before {
               font-size: 4em;
               left: -10px;
               top: 0px;
           }

           .testimonial-author {
               flex-direction: column-reverse;
               text-align: center;
               align-items: center;
               gap: 15px;
           }

           .author-details {
               text-align: center;
           }

           .testimonial-carousel-wrapper {
               padding: 0 10px;
           }
       }

       /* Courses Section */
       .courses-section {
           background-color: #f8f8f8;
           padding: 80px 20px;
           display: flex;
           justify-content: center;
           align-items: center;
           text-align: center;
       }

       .courses-container {
           max-width: 1200px;
           width: 100%;
       }

       .courses-main-heading {
           font-size: 3rem;
           color: #1a1a1a;
           margin-bottom: 15px;
       }

       .courses-sub-text {
           font-size: 1.1rem;
           color: #555;
           margin-bottom: 50px;
           max-width: 800px;
           margin-left: auto;
           margin-right: auto;
       }

       .course-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
           gap: 30px;
           margin-bottom: 60px;
       }

       .course-card {
           background-color: #fff;
           border-radius: 12px;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
           overflow: hidden;
           display: flex;
           flex-direction: column;
           transition: transform 0.3s ease, box-shadow 0.3s ease;
       }

       .course-card:hover {
           transform: translateY(-5px);
           box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
       }

       .course-card img {
           width: 100%;
           height: 350px;
           object-fit: cover;
           border-bottom: 1px solid #eee;
       }

       .card-content {
           padding: 25px;
           flex-grow: 1;
           display: flex;
           flex-direction: column;
           align-items: flex-start;
           text-align: left;
       }

       .card-title {
           font-size: 1.6rem;
           color: #1a1a1a;
           margin-bottom: 10px;
       }

       .card-description {
           font-size: 1rem;
           color: #666;
           line-height: 1.6;
           margin-bottom: 20px;
           flex-grow: 1;
       }

       .read-more-btn {
           display: inline-flex;
           align-items: center;
           color: #ffb700;
           text-decoration: none;
           font-weight: 600;
           transition: color 0.3s ease;
           padding-top: 10px;
       }

       .read-more-btn:hover {
           color: #e0a300;
       }

       .read-more-btn i {
           margin-left: 8px;
           transition: transform 0.3s ease;
       }

       .read-more-btn:hover i {
           transform: translateX(5px);
       }

       .view-all-btn {
           background-color: #ffb700;
           color: #fff;
           border: none;
           padding: 15px 30px;
           border-radius: 8px;
           font-size: 1.1rem;
           font-weight: 700;
           cursor: pointer;
           transition: background-color 0.3s ease, transform 0.2s ease;
       }

       .view-all-btn:hover {
           background-color: #e0a300;
           transform: translateY(-2px);
       }

       /* Responsive Adjustments */
       @media (max-width: 992px) {
           .courses-main-heading {
               font-size: 2.5rem;
           }

           .course-grid {
               grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
           }
       }

       @media (max-width: 768px) {
           .courses-main-heading {
               font-size: 2rem;
           }

           .courses-sub-text {
               font-size: 1rem;
           }

           .course-card img {
               height: 180px;
           }

           .card-title {
               font-size: 1.4rem;
           }

           .card-description {
               font-size: 0.95rem;
           }
       }

       @media (max-width: 480px) {
           .courses-section {
               padding: 50px 15px;
           }

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

           .view-all-btn {
               width: 100%;
               padding: 12px 20px;
               font-size: 1rem;
           }
       }

       /* Contact Section */
       .contact-section {
           background-color: var(--bg-color);
           padding: 80px 20px;
           display: flex;
           justify-content: center;
           align-items: center;
       }

       .contact-container {
           display: flex;
           flex-wrap: wrap;
           max-width: 1200px;
           width: 100%;
           gap: 50px;
           justify-content: space-between;
           align-items: flex-start;
       }

       .contact-left {
           flex: 1;
           min-width: 300px;
           max-width: 500px;
       }

       .contact-heading {
           font-size: 2.8rem;
           color: var(--text-color);
           margin-bottom: 15px;
       }

       .contact-subheading {
           font-size: 1.1rem;
           color: var(--text-color);
           line-height: 1.6;
           margin-bottom: 40px;
       }

       .contact-info {
           margin-bottom: 40px;
       }

       .info-item {
           display: flex;
           align-items: flex-start;
           margin-bottom: 20px;
           color: var(--text-color);
       }

       .info-item i {
           font-size: 1.5rem;
           color: #ffb700;
           margin-right: 15px;
           flex-shrink: 0;
           margin-top: 4px;
       }

       .info-item p {
           font-size: 1rem;
           line-height: 1.6;
           margin: 0;
       }

       .social-links {
           display: flex;
           gap: 15px;
       }

       .social-links .social-icon {
           display: flex;
           justify-content: center;
           align-items: center;
           width: 45px;
           height: 45px;
           border-radius: 50%;
           background-color: #f0f0f0;
           color: #555;
           font-size: 1.1rem;
           transition: background-color 0.3s ease, color 0.3s ease;
           text-decoration: none;
       }

       .social-links .social-icon:hover {
           background-color: #ffb700;
           color: #fff;
       }

       .contact-right {
           flex: 1;
           min-width: 300px;
           max-width: 600px;
       }

       .contact-form {
           background-color: var(--bg-color);
           padding: 40px;
           border-radius: 12px;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
       }

       .form-group {
           margin-bottom: 25px;
       }

       .form-group label {
           display: block;
           font-size: 0.95rem;
           color: white;
           margin-bottom: 8px;
           font-weight: 600;
       }

       .form-group input[type="text"],
       .form-group input[type="email"],
       .form-group input[type="tel"],
       .form-group textarea {
           width: 100%;
           padding: 12px 15px;
           border: 1px solid #ddd;
           border-radius: 8px;
           font-size: 1rem;
           background-color: #ffffff;
           color: #000;
           transition: border-color 0.3s ease;
           box-sizing: border-box;
       }

       .form-group input:focus,
       .form-group textarea:focus {
           border-color: #ffb700;
           outline: none;
       }

       .form-group textarea {
           resize: vertical;
           min-height: 100px;
       }

       .submit-btn {
           background-color: #ffb700;
           color: #fff;
           border: none;
           padding: 15px 30px;
           border-radius: 8px;
           font-size: 1.1rem;
           font-weight: 700;
           cursor: pointer;
           transition: background-color 0.3s ease, transform 0.2s ease;
           width: auto;
           display: block;
           margin-left: auto;
           margin-right: auto;
       }

       .submit-btn:hover {
           background-color: #e0a300;
           transform: translateY(-2px);
       }

       /* Footer Section */
       .footer {
           background-color: var(--bg-color);
           color: var(--text-color);
           padding: 60px 20px;
           text-align: center;
           border-top: 1px solid #e5e5e5;
       }

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

       .footer-logo {
        text-transform: uppercase;
           font-size: 2.5rem;
           font-weight: 700;
           /* color: #ffb700; */
           margin-bottom: 10px;
       }

       .footer-tagline {
           font-size: 1.1rem;
           margin-bottom: 30px;
           color: #bbb;
       }

       .footer-nav {
           margin-bottom: 30px;
       }

       .footer-nav a {
           color: var(--text-color);
           text-decoration: none;
           font-size: 1rem;
           margin: 0 15px;
           transition: color 0.3s ease;
       }

       .footer-nav a:hover {
           color: #ffb700;
       }

       .footer-social {
           display: flex;
           justify-content: center;
           gap: 15px;
           margin-bottom: 30px;
       }

       .footer-social .social-icon {
           display: flex;
           justify-content: center;
           align-items: center;
           width: 40px;
           height: 40px;
           border-radius: 50%;
           background-color: #333;
           color: #f0f0f0;
           font-size: 1rem;
           transition: background-color 0.3s ease, color 0.3s ease;
           text-decoration: none;
       }

       .footer-social .social-icon:hover {
           background-color: #ffb700;
           color: #fff;
       }

       .footer-copyright {
           font-size: 0.9rem;
           color: #888;
       }

       /* Responsive Adjustments for Contact & Footer */
       @media (max-width: 992px) {
           .contact-container {
               align-items: center;
               text-align: center;
           }

           .contact-left,
           .contact-right {
               max-width: 100%;
           }

           .contact-heading {
               font-size: 2.2rem;
           }

           .info-item {
               justify-content: center;
               text-align: left;
           }

           .social-links {
               justify-content: center;
           }

           .contact-form {
               padding: 30px;
           }

           .footer-nav {
               display: flex;
               flex-wrap: wrap;
               justify-content: center;
               gap: 12px;;
           }
       }

       @media (max-width: 600px) {
           .contact-section {
               padding: 50px 15px;
           }

           .contact-form {
               padding: 20px;
           }

           .contact-heading {
               font-size: 1.8rem;
           }

           .contact-subheading {
               font-size: 1rem;
           }

           .submit-btn {
               width: 100%;
           }

           .footer {
               padding: 40px 15px;
           }

           .footer-logo {
               font-size: 2rem;
           }

           .footer-nav a {
               margin: 0 10px;
           }
       }

       .social-links .social-icon {
           display: flex;
           justify-content: center;
           align-items: center;
           width: 45px;
           height: 45px;
           border-radius: 50%;
           background-color: #f0f0f0;
           font-size: 1.1rem;
           transition: background-color 0.3s ease, color 0.3s ease;
           text-decoration: none;
           overflow: hidden;
       }

       .social-links .social-icon img {
           width: 60%;
           height: 60%;
           object-fit: contain;
       }

       .social-links .social-icon:hover {
           background-color: #ffb700;
       }

       /* In Footer Section CSS */
       .footer-social .social-icon {
           display: flex;
           justify-content: center;
           align-items: center;
           width: 40px;
           height: 40px;
           border-radius: 50%;
           background-color: #ffffff;
           font-size: 1rem;
           transition: background-color 0.3s ease, color 0.3s ease;
           text-decoration: none;
           overflow: hidden;
       }

       .footer-social .social-icon img {
           width: 60%;
           height: 60%;
           object-fit: contain;
           filter: var(--text-color);
       }

       .footer-social .social-icon:hover {
           background-color: #ffb700;
       }

       /* Courses Section */
       /* COURSES  */

       /* Intro */
       .intro-section {
           text-align: center;
           background-color: var(--bg-color);
           padding: 40px 20px;
       }

       .intro-section h2 {
           color: #f1c40f;
       }

       /* Tabs */
       .courses-tabs {
           display: flex;
           justify-content: center;
           gap: 10px;
           background-color: var(--bg-color);
           padding: 20px;
       }

       .tab-button {
           padding: 12px 24px;
           border: none;
           cursor: pointer;
           background-color: #222;
           color: #f1c40f;
           font-weight: bold;
           border-radius: 5px;
           transition: 0.3s ease;
       }

       .tab-button.active {
           background-color: #f1c40f;
           color: #000;
       }

       /* Sections */
       .course-section {
           display: none;
           padding: 30px 20px;
       }

       .course-section.active {
           display: block;
       }

       .course-section h3 {
           color: #f1c40f;
           text-align: center;
           margin-bottom: 20px;
       }

       /* Course Card */
       .course-card {
           max-width: 700px;
           margin: 0 auto 20px;
           background-color: var(--bg-color);
           border-left: 5px solid #f1c40f;
           padding: 20px;
           border-radius: 6px;
           box-shadow: 0 4px 8px rgba(255, 255, 0, 0.1);
       }

       .course-card h4 {
           color: #f1c40f;
           margin-top: 0;
       }

       .course-card p {
           margin: 8px 0;
       }

       /* Modal Overlay */
       .modal {
           display: none;
           position: fixed;
           z-index: 9999;
           left: 0;
           top: 0;
           width: 100%;
           height: 100vh;
           background-color: rgba(0, 0, 0, 0.7);
           display: flex;
           justify-content: center;
           align-items: center;
           padding: 0 20px;
           overflow-y: hidden;

       }


       /* Modal Content Box (Dark Theme) */
       .modal-content {
           background-color: #1b1b1b;
           /* Dark modal background */
           margin: auto;
           padding: 30px 25px;
           border-radius: 12px;
           width: 90%;
           max-width: 600px;
           color: #f0f0f0;
           position: relative;
           box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
           font-family: 'Poppins', sans-serif;
           padding-bottom: 60px;
       }

       .modal-overlay {
           display: none;
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: rgba(0, 0, 0, 0.7);
           z-index: 10000;
           overflow-y: auto;
           padding: 40px 20px;
           box-sizing: border-box;
           align-items: center;
       }

       .modal-content {
           background: #111;
           color: #fff;
           max-width: 600px;
           margin: 0 auto;
           padding: 30px;
           border-radius: 10px;
           font-family: 'Poppins', sans-serif;
           position: relative;
           box-sizing: border-box;
       }

       /* Close Button */
       .close-btn {
           position: absolute;
           right: 20px;
           font-size: 28px;
           cursor: pointer;
           background: transparent;
           border: none;
           color: #fff;
       }

       /* Form Tabs */
       .modal-options {
           display: flex;
           justify-content: center;
           gap: 20px;
           margin: 20px 0 30px 0;
       }

       .modal-tab {
           flex: 1;
           padding: 10px 15px;
           border: none;
           border-radius: 5px;
           background: #333;
           color: #fff;
           cursor: pointer;
           font-weight: 600;
           transition: background-color 0.3s, color 0.3s;
           user-select: none;
       }

       .modal-tab:hover,
       .modal-tab[aria-selected="true"] {
           background: #ff9900;
           color: #000;
       }

       /* Forms */
       .modal-form {
           display: none;
       }

       .form-group {
           margin-bottom: 15px;
       }

       .form-group label {
           display: block;
           margin-bottom: 6px;
           font-weight: 500;
       }

       .form-group input,
       .form-group select,
       .form-group textarea {
           width: 100%;
           padding: 10px;
           border: none;
           border-radius: 5px;
           background: #222;
           color: #fff;
           font-size: 14px;
           box-sizing: border-box;
       }

       .form-group textarea {
           resize: vertical;
           min-height: 80px;
       }

       .submit-btn {
           background-color: #ff9900;
           color: var(--text-color);
           padding: 12px 20px;
           border: none;
           border-radius: 5px;
           cursor: pointer;
           margin-top: 10px;
           width: 100%;
           font-size: 16px;
           font-weight: 600;
           transition: background-color 0.3s;
       }

       .submit-btn:hover {
           background-color: #e88c00;
       }

       /* Close Button (×) */
       .close-modal {
           color: #f5b000;
           /* Yellow close */
           position: absolute;
           top: 12px;
           right: 18px;
           font-size: 28px;
           font-weight: bold;
           cursor: pointer;
           transition: color 0.2s ease;
       }

       .close-modal:hover {
           color: #ffcc00;
       }

       /* Headings */
       .modal-content h3 {
           margin-top: 0;
           font-size: 22px;
           color: #f5b000;
           /* Yellow heading */
       }

       .modal-content h4 {
           margin-top: 25px;
           font-size: 18px;
           color: #f0f0f0;
       }

       /* Paragraph */
       .modal-intro,
       .career-note {
           font-size: 15px;
           margin-bottom: 15px;
           color: #dcdcdc;
       }

       /* Fee and Job Lists */
       .fee-list,
       .job-list {
           list-style: none;
           padding: 0;
           margin: 0;
       }

       .fee-list li,
       .job-list li {
           background-color: #292929;
           color: #f0f0f0;
           margin: 8px 0;
           padding: 10px 12px;
           border-radius: 6px;
           font-size: 14px;
       }

       /* Modal Trigger Button   */
       .open-fee-modal {
           margin-top: 15px;
           padding: 8px 16px;
           background-color: #f5b000;
           /* Aptech yellow */
           color: #000;
           border: none;
           border-radius: 6px;
           font-size: 14px;
           font-weight: 500;
           cursor: pointer;
           transition: background-color 0.3s ease;
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
       }

       .open-fee-modal:hover {
           background-color: #d49d00;
           /* Darker yellow */
       }

       .modal-cta-buttons {
           display: flex;
           justify-content: center;
           /* Center horizontally */
           gap: 15px;
           /* Buttons ke beech gap */
           margin-top: 25px;
       }

       .modal-cta-btn {
           flex: 1;
           /* Dono buttons equal width */
           max-width: 180px;
           padding: 12px 0;
           background-color: #f5b000;
           /* Aptech yellow */
           color: #1b1b1b;
           /* Dark text for contrast */
           font-weight: 600;
           font-size: 16px;
           border: none;
           border-radius: 8px;
           cursor: pointer;
           box-shadow: 0 4px 8px rgba(245, 176, 0, 0.4);
           transition: background-color 0.3s ease, box-shadow 0.3s ease;
           user-select: none;
       }

       .modal-cta-btn:hover {
           background-color: #d49d00;
           /* Darker yellow on hover */
           box-shadow: 0 6px 12px rgba(212, 157, 0, 0.6);
       }

       /* News And Events */
       .news-section {
           height: 100vh;
           width: 100%;
           position: relative;
           overflow: hidden;
       }

       .news-title {
           display: flex;
           flex-direction: column;
           justify-content: center;
           height: 200px;
           width: 100%;
           color: white;
           background-color: #202020;
       }

       .news-title h1 {
           font-size: 3.5rem;
           letter-spacing: 1px;
       }

       .news-title p {
           font-size: 1.2rem;
           margin-top: 10px;
           color: #ccc;
       }

       .news-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
           gap: 25px;
           max-width: 1200px;
           margin: 0 auto;
       }

       .filter-buttons {
           text-align: center;
           margin-bottom: 30px;
           margin: 40px;
       }

       .filter-buttons button {
           padding: 10px 20px;
           margin: 0 10px;
           border: none;
           background-color: #fcb0178a;
           color: #000;
           font-size: 1rem;
           border-radius: 8px;
           cursor: pointer;
           transition: 0.3s ease;
       }

       .filter-buttons button.active,
       .filter-buttons button:hover {
           background-color: #fcaf17;
       }

       .news-card {
           background-color: var(--bg-color);
           border-radius: 15px;
           box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
           overflow: hidden;
           transition: transform 0.3s ease, box-shadow 0.3s ease;
           display: flex;
           flex-direction: column;
       }

       .news-card:hover {
           transform: translateY(-8px);
           box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
       }

       .news-card img {
           width: 100%;
           height: 280px;
           object-fit: cover;
       }

       .news-card-content {
           padding: 15px 18px;
           flex-grow: 1;
           display: flex;
           flex-direction: column;
           justify-content: space-between;
       }

       .news-card h3 {
           font-size: 1.1rem;
           color: var(--text-color);
           margin-bottom: 10px;
       }

       .news-card p {
           font-size: 0.9rem;
           color: #555;
           line-height: 1.4;
       }

       .news-card-footer {
           margin-top: 15px;
           text-align: right;
           cursor: pointer;
       }

       .news-card-footer a {
           text-decoration: none;
           /* color: #0066cc; */
           font-size: 0.85rem;
       }

       .news-card-footer a:hover {
           text-decoration: underline;
       }

       .news-modal {
           display: none;
           position: fixed;
           z-index: 9999;
           padding: 40px 20px;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
           overflow: auto;
           background-color: rgba(0, 0, 0, 0.8);
       }

       .news-modal-content {
           background-color: var(--bg-color);
           margin: auto;
           padding: 20px;
           border-radius: 10px;
           max-width: 600px;
           position: relative;
           animation: fadeIn 0.4s;
       }

       .news-modal-content img {
           width: 100%;
           border-radius: 8px;
           margin-bottom: 15px;
       }

       .news-modal-close {
           position: absolute;
           top: 10px;
           right: 15px;
           font-size: 28px;
           font-weight: bold;
           color: #000;
           /* ensure it's black or visible on white */
           background-color: #eee;
           padding: 5px 10px;
           border-radius: 5px;
           cursor: pointer;
           transition: background 0.3s;
       }

       .news-modal-close:hover {
           background-color: #ddd;
       }

       .download-btn {
           display: inline-block;
           margin-top: 0.2rem;
           padding: 10px 20px;
           background-color: #ffa807bb;
           color: var(--text-color);
           border-radius: 8px;
           text-decoration: none;
           font-weight: bold;
           transition: background-color 0.3s ease;
           margin-left: 1rem;
       }

       .download-btn:hover {
           background-color: #ffa80785;
       }

       @keyframes fadeIn {
           from {
               opacity: 0;
           }

           to {
               opacity: 1;
           }
       }

       @media (max-width: 600px) {
           .news-modal-content {
               width: 100%;
               height: auto;
           }
       }


       video {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           object-fit: cover;
           z-index: 1;
       }

       /* Palacement Page */

       .overlay {
           background-color: rgba(0, 0, 0, 0.6);
           /* Dark overlay */
           padding: 60px 40px;
           color: white;
           border-radius: 12px;
       }

       .brand {
           color: white;
           font-weight: bold;
           font-size: 24px;
       }

       .highlight {
           color: orange;
           font-weight: bold;
           font-size: 24px;
           margin-left: 5px;
       }

       .main-title {
           font-size: 48px;
           font-weight: 800;
           margin: 10px 0;
       }

       .btn {
           display: inline-block;
           padding: 12px 28px;
           background-color: #0a9572;
           color: white;
           font-weight: bold;
           border: none;
           border-radius: 8px;
           text-decoration: none;
           transition: background 0.3s ease;
       }

       .btn:hover {
           background-color: #077257;
       }

       .bg-light {
           --bs-bg-opacity: 1;
           background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
       }

       .placementSection .placementIntro {
           width: 100%;
           margin: auto;
           padding-block: 2rem;
           text-align: center;
       }

       .placementSection .placementIntro p {
           font-size: 1rem;
           line-height: 2rem;
       }

       .placementSection .placementIntro .placementSteps {
           width: 100%;
           display: flex;
           flex-wrap: wrap;
           margin-top: 2rem;
           justify-content: space-between;
       }

       .top-placements {
           padding: 80px 20px;
           background: var(--bg-color);
           text-align: center;
       }

       .section-title {
           font-size: 40px;
           font-weight: 700;
           margin-bottom: 10px;
           color: #1d1d1d;
       }

       .section-title span {
           color: #ffb400;
       }

       .section-subtitle {
           font-size: 18px;
           color: #666;
           margin-bottom: 50px;
       }

       .placement-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
           gap: 40px;
           justify-content: center;
       }

       .placement-card {
           backdrop-filter: blur(8px);
           background: var(--bg-color);
           border: 1px solid #e0e0e0;
           border-radius: 20px;
           padding: 24px;
           box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
           transition: all 0.3s ease;
       }

       .placement-card:hover {
           transform: translateY(-10px);
           box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
       }

       .placement-header {
           display: flex;
           align-items: center;
           justify-content: space-between;
           margin-bottom: 20px;
       }

       .student-photo {
           width: 70px;
           height: 70px;
           border-radius: 50%;
           object-fit: cover;
           border: 3px solid #ffb400;
       }

       .company-logo {
           width: 60px;
           height: 60px;
           object-fit: contain;
           border-radius: 12px;
       }

       .placement-info h3 {
           font-size: 20px;
           font-weight: 600;
           margin-bottom: 5px;
           color: var(--text-color);
       }

       .placement-role {
           display: inline-block;
           font-size: 14px;
           color: #ffb400;
           /* background-color: #e0f2f1; */
           padding: 4px 12px;
           border-radius: 20px;
           margin-bottom: 6px;
       }

       .placement-company {
           font-size: 16px;
           color: #555;
           font-weight: 500;
       }

       .testimonials-section {
           background: var(--bg-color);
           padding: 60px 20px;
           text-align: center;
           font-family: 'Segoe UI', sans-serif;
           flex-direction: column;
       }

       .section-title {
           font-size: 2.5em;
           margin-bottom: 40px;
           color: var(--text-color);
       }

       .testimonials-container {
           display: grid;
           gap: 30px;
           grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
           max-width: 1100px;
           margin: 0 auto;
       }

       .testimonial-card {
           background: var(--bg-color);
           padding: 25px;
           border-radius: 12px;
           box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
           transition: transform 0.3s ease;
       }

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

       .testimonial-text {
           font-style: italic;
           color: #555;
           margin-bottom: 20px;
       }

       .testimonial-profile {
           display: flex;
           align-items: center;
           gap: 15px;
       }

       .testimonial-profile img {
           width: 60px;
           height: 60px;
           border-radius: 50%;
           object-fit: cover;
       }

       .testimonial-profile h3 {
           margin: 0;
           font-size: 1.1em;
           color: var(--text-color);
       }

       .testimonial-profile p {
           margin: 3px 0 0;
           color: #777;
           font-size: 0.9em;
       }

       @media (max-width: 700px) {
           .max-modal {
               margin: 25px -1px;
           }
       }

       @media (max-width: 400px) {
           .modal {
               position: static;
               height: 50%;
               background-color: transparent;
           }
       }