/*
  Futuristic Website Redesign
  ---------------------------
  - Author: Gemini
  - Date: July 7, 2024
  - Description: A complete CSS overhaul for a modern, futuristic look.
*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. Fonts & Global Styles
02. Header & Navigation
03. Homepage Hero Section
04. Homepage Features Grid Section
05. Homepage Process Flow Section
06. Homepage Call to Action Banner
07. About Us Hero Section
08. Our Story Section
09. Our Values Section
10. Team Grid Section
11. Contact Hero Section
12. Contact Details & Form Section
13. Map Section
14. Courses Hero Section (New)
15. Course Listing Section (New)
16. Testimonials Section (Retained)
17. Register Page Section (New)
18. Responsive Design

--------------------------------------------- */

/* ---------------------------------------------
01. Fonts & Global Styles
--------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");

:root {
  --primary-color: #4c0f7b;
  /* Purple */
  --secondary-color: #812acc;
  /* Darker Purple */
  --accent-color: #020202;
  /* Green */
  --background-dark: #4A9782;
  /* Very Dark Gray/Near Black for futuristic feel */
  --background-light: #196552;
  /* Slightly lighter dark gray */
  --text-light: #ffffff;
  --text-dark: #090909;
  --border-color: #f6f6f6;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--background-dark);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Prevent horizontal scroll from overflowing content */
}

a {
  text-decoration: none;
  color: var(--text-light);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--text-light);
}

p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-light);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-light);
  font-weight: 600;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.section-heading {
  text-align: center;
  margin-bottom: 0px;
}

.section-heading h6 {
  color: var(--border-color);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
}

.section-heading h4 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-top: 10px;
}

.section-heading h4 em {
  font-style: normal;
  color: #fff;
}

/* Primary Button with Gradient */
.primary-gradient-button {
  font-size: 1rem;
  color: var(--text-light);
  background: #004030;
  padding: 15px 30px;
  display: inline-block;
  border-radius: 50px;
  font-weight: 600;
  transition: all .3s;
  border: none;
  box-shadow: 0 5px 15px rgba(138, 90, 174, 0.3);
  cursor: pointer;
}

.primary-gradient-button:hover {
  transform: translateY(-3px);
  color: var(--text-light);
  box-shadow: var(--background-light);
}

/* Secondary Outline Button */
.secondary-outline-button {
  font-size: 1rem;
  color: var(--border-color);
  background: var(--background-light);
  padding: 15px 30px;
  display: inline-block;
  border-radius: 50px;
  font-weight: 600;
  transition: all .3s;
  /* border: 2px solid red; */
  /* box-shadow: 0 1px 1px red; */
  cursor: pointer;
}

.secondary-outline-button:hover {
  background: var(--background-light);
  color: var(--text-light);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(138, 90, 174, 0.3);
}

/* ---------------------------------------------
02. Header & Navigation
--------------------------------------------- */
.header-area {
  position: fixed;
  /* Changed to fixed for consistent sticky behavior */
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: all .5s ease;
  background-color: #004030;
  /* Distinct background color */
  backdrop-filter: blur(10px);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.header-area .main-nav {
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  flex-wrap: wrap;
}

.header-area .logo img {
  height: 70px;
  width: auto;
}

.header-area .nav {
  display: flex;
  align-items: center;
  list-style: none;
}

.header-area .nav li {
  margin-left: 30px;
  position: relative;
}

.header-area .nav li a {
  color: var(--text-light);
  font-weight: 500;
  transition: color 0.3s ease;
}

.header-area .nav li a:hover,
.header-area .nav li a.active {
  color: #37c9a2;
}

.header-area .nav li.has-sub ul.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background-color: var(--background-light);
  box-shadow: 0 5px 15px #ADEED9;
  border-radius: 8px;
  padding: 10px 0;
  list-style: none;
  display: none;
  /* opacity: 0; */
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 99;
}

.header-area .nav li.has-sub:hover ul.sub-menu {
  display: block;
  opacity: 1;
  visibility: visible;
}

.header-area .nav li.has-sub ul.sub-menu li {
  margin: 0;
}

.header-area .nav li.has-sub ul.sub-menu li a {
  padding: 10px 10px;
  display: block;
  color: var(--text-light);
  font-weight: 400;
  /* transition: background-color 0.3s ease, color 0.3s ease; */
}

.header-area .nav li.has-sub ul.sub-menu li a:hover {
  background-color: var(--background-dark);
  color: var(--text-light);
}

/* --- UPDATED MENU TRIGGER STYLES --- */
.menu-trigger {
  cursor: pointer;
  display: none;
  /* Hidden by default, shown in media query */
  position: relative;
  width: 25px;
  height: 25px;
  text-align: center;
}

.menu-trigger .icon-bars,
.menu-trigger .icon-close {
  color: var(--text-light);
  font-size: 1.5rem;
  transition: transform 0.3s ease, opacity 0.3s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.menu-trigger .icon-close {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.menu-trigger.active .icon-bars {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.menu-trigger.active .icon-close {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}

/* --- END OF UPDATED STYLES --- */

.header-sticky {
  position: fixed;
  background-color: #004030;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  animation: fadeInDown 0.5s;
}

@keyframes fadeInDown {
  from {
    top: -100px;
    opacity: 0;
  }

  to {
    top: 0;
    opacity: 1;
  }
}

/* ---------------------------------------------
03. Homepage Hero Section
--------------------------------------------- */
.hero-section {
  padding: 180px 0 60px;
  text-align: center;
  background: var(--background-dark);
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(138, 90, 174, 0.1) 0%, transparent 70%);
  z-index: 1;
}

.hero-section .hero-content {
  position: relative;
  z-index: 2;
}

.hero-section h1 {
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
}

.hero-section h1 em {
  font-style: normal;
  color: #004030;
  background: #004030;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-section .lead {
  font-size: 1.3rem;
  color: var(--text-light);
  max-width: 800px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

.hero-section .hero-buttons .btn {
  margin: 0px;
}

/* ---------------------------------------------
04. Homepage Features Grid Section
--------------------------------------------- */
.features-grid-section {
  padding: 80px 0 20px 0;
  background-color: var(--background-dark);
}

.feature-card {
  background: var(--background-light);
  border-radius: 15px;
  border: 1px solid var(--border-color);
  padding: 40px;
  text-align: center;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.feature-card:hover {
  transform: translateY(-10px);
  border-color: var(--primary-color);
  box-shadow: 0 8px 25px rgba(138, 90, 174, 0.3);
}

.feature-card .icon-wrapper {
  width: 100px;
  height: 100px;
  background: var(--background-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.feature-card .icon-wrapper i {
  color: var(--text-light);
}

.feature-card h3 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: var(--text-light);
}

.feature-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-light);
}

/* ---------------------------------------------
05. Homepage Process Flow Section
--------------------------------------------- */
.process-flow-section {
  padding: 80px 0 20px 0;
  background-color: var(--background-light);
}

.process-step {
  background: var(--background-dark);
  border-radius: 15px;
  border: 1px solid var(--border-color);
  padding: 30px;
  text-align: center;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.process-step:hover {
  transform: translateY(-8px);
  border-color: var(--accent-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.process-step .step-number {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--border-color);
  color: var(--text-dark);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  border: 3px solid var(--background-dark);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.process-step .step-icon {
  margin-top: 20px;
  margin-bottom: 20px;
}

.process-step .step-icon i {
  color: #004030;
}

.process-step h5 {
  font-size: 1.4rem;
  margin-bottom: 10px;
  color: var(--text-light);
}

.process-step p {
  font-size: 0.9rem;
  color: var(--text-light);
  flex-grow: 1;
}

@media (min-width: 992px) {
  .process-flow-section .row {
    position: relative;
  }

  .process-flow-section .row::before {
    content: '';
    /* position: absolute; */
    top: 90%;
    left: 12%;
    right: 12%;
    height: 2px;
    background: var(--border-color);
    z-index: 0;
    transform: translateY(-50%);
  }

  .process-flow-section .col-lg-3:not(:last-child) .process-step::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -25px;
    width: 25px;
    height: 2px;
    background: var(--border-color);
    transform: translateY(-50%);
    z-index: 1;
  }
}

/* ---------------------------------------------
06. Homepage Call to Action Banner
--------------------------------------------- */
.action-banner-section {
  padding: 100px 0;
  background: var(--background-light);
  text-align: center;
  border-radius: 15px;
  margin: 60px auto;
  max-width: calc(100% - 30px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.action-banner-section h2 {
  font-size: 2.8rem;
  color: var(--text-light);
  margin-bottom: 20px;
  font-weight: 700;
}

.action-banner-section p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 700px;
  margin: 0 auto 30px;
}

/* ---------------------------------------------
07. About Us Hero Section
--------------------------------------------- */
.about-hero-section {
  padding: 180px 0 60px;
  text-align: center;
  background: var(--background-dark);
  position: relative;
  overflow: hidden;
}

.about-hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(40, 197, 77, 0.1) 0%, transparent 70%);
  z-index: 1;
}

.about-hero-section .about-hero-content {
  position: relative;
  z-index: 2;
}

.about-hero-section h1 {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
  color: var(--text-light);
}

.about-hero-section h1 em {
  font-style: normal;
  color: #004030;
  background: #004030;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-hero-section .lead {
  font-size: 1.2rem;
  color: var(--text-light);
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ---------------------------------------------
08. Our Story Section
--------------------------------------------- */
.our-story-section {
  padding: 60px 0 0 0;
  background-color: var(--background-dark);
}

.story-block {
  margin-bottom: 60px;
}

.story-block:last-child {
  margin-bottom: 30;
}

.story-image-wrapper {
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color);
  transition: transform 0.3s ease;
}

.story-image-wrapper:hover {
  transform: translateY(-5px);
}

.story-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

.story-content {
  padding: 20px;
}

.story-content h3 {
  font-size: 2.2rem;
  margin-bottom: 15px;
  color: var(--text-light);
}

.story-content p {
  margin-bottom: 15px;
}

/* ---------------------------------------------
09. Our Values Section
--------------------------------------------- */
.our-values-section {
  padding: 80px 0 30px 0;
  background-color: var(--background-light);
}

.value-card {
  background: var(--background-dark);
  border-radius: 15px;
  border: 1px solid var(--border-color);
  padding: 30px;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.value-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary-color);
  box-shadow: 0 8px 20px rgba(138, 90, 174, 0.3);
}

.value-card .value-icon {
  width: 80px;
  height: 80px;
  background: var(--background-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.value-card .value-icon i {
  color: var(--text-light);
}

.value-card h4 {
  font-size: 1.6rem;
  margin-bottom: 10px;
  color: var(--text-light);
}

.value-card p {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ---------------------------------------------
10. Team Grid Section
--------------------------------------------- */
.team-grid-section {
  padding: 80px 0 30px 0;
  background-color: var(--background-dark);
}

.team-member-card {
  background: var(--background-light);
  border-radius: 15px;
  border: 1px solid var(--border-color);
  padding: 30px;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.team-member-card:hover {
  transform: translateY(-8px);
  border-color: var(--accent-color);
  box-shadow: 0 12px 30px rgba(40, 197, 77, 0.4);
}

.team-member-card .member-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 20px;
  border: 4px solid var(--background-dark);
  box-shadow: 0 0 15px rgba(24, 12, 33, 0.5);
}

.team-member-card .member-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-member-card h4 {
  font-size: 1.8rem;
  margin-bottom: 5px;
  color: var(--text-light);
}

.team-member-card span {
  display: block;
  font-size: 1rem;
  color: #fff;
  margin-bottom: 15px;
}

.team-member-card p {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

.team-member-card .social-links a {
  color: var(--text-dark);
  font-size: 1.3rem;
  margin: 0 10px;
  transition: color 0.3s ease;
}

.team-member-card .social-links a:hover {
  color: var(--accent-color);
}

/* ---------------------------------------------
11. Contact Hero Section
--------------------------------------------- */
.contact-hero-section {
  padding: 180px 0 60px;
  text-align: center;
  background: var(--background-dark);
  position: relative;
  overflow: hidden;
}

.contact-hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(138, 90, 174, 0.1) 0%, transparent 70%);
  z-index: 1;
}

.contact-hero-section .contact-hero-content {
  position: relative;
  z-index: 2;
}

.contact-hero-section h1 {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
  color: var(--text-light);
}

.contact-hero-section h1 em {
  font-style: normal;
  color: #004030;
  background: #004030;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contact-hero-section .lead {
  font-size: 1.2rem;
  color: var(--text-light);
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ---------------------------------------------
12. Contact Details & Form Section
--------------------------------------------- */
.contact-details-section {
  padding: 80px 0;
  background-color: var(--background-light);
}

.contact-info-cards {
  display: flex;
  flex-direction: column;
  gap: 30px;
  /* Space between info cards */
}

.contact-info-cards .info-card {
  background: var(--background-dark);
  border-radius: 15px;
  border: 1px solid var(--border-color);
  padding: 30px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.contact-info-cards .info-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.contact-info-cards .info-card .icon-circle {
  width: 70px;
  height: 70px;
  background: var(--background-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.contact-info-cards .info-card .icon-circle i {
  color: var(--text-light);
}

.contact-info-cards .info-card h4 {
  font-size: 1.6rem;
  margin-bottom: 10px;
  color: var(--text-light);
}

.contact-info-cards .info-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 5px;
}

.contact-form-wrapper {
  background: var(--background-dark);
  border-radius: 15px;
  border: 1px solid var(--border-color);
  padding: 40px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.contact-form-wrapper h3 {
  font-size: 2rem;
  color: var(--text-light);
  margin-bottom: 30px;
  text-align: center;
}

#contact-form input,
#contact-form textarea {
  width: 100%;
  background: #196552;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 15px 20px;
  margin-bottom: 20px;
  color: var(--text-light);
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

#contact-form input:focus,
#contact-form textarea:focus {
  border-color: var(--primary-color);
  outline: none;
}

#contact-form textarea {
  min-height: 150px;
  resize: vertical;
}

#contact-form button {
  width: 100%;
}

/* ---------------------------------------------
13. Map Section
--------------------------------------------- */
.map-section {
  padding: 20px;
  /* Full width map */
  margin-top: 60px;
  /* Space above map */
}

.map-embed-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  border-radius: 15px;
  /* Match other rounded elements */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color);
}

.map-embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------
14. Courses Hero Section (New)
--------------------------------------------- */
.courses-hero-section {
  padding: 180px 0 60px;
  text-align: center;
  background: var(--background-dark);
  position: relative;
  overflow: hidden;
}

.courses-hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(40, 197, 77, 0.1) 0%, transparent 70%);
  /* Accent color radial gradient */
  z-index: 1;
}

.courses-hero-section .courses-hero-content {
  position: relative;
  z-index: 2;
}

.courses-hero-section h1 {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
  color: var(--text-light);
}

.courses-hero-section h1 em {
  font-style: normal;
  color: #004030;
  background: #004030;
  /* Gradient for emphasis */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.courses-hero-section .lead {
  font-size: 1.2rem;
  color: var(--text-light);
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ---------------------------------------------
15. Course Listing Section (New)
--------------------------------------------- */
.course-listing-section {
  padding: 80px 0;
  background-color: var(--background-light);
}

.course-item-card {
  background: var(--background-dark);
  border-radius: 15px;
  border: 1px solid var(--border-color);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  height: 100%;
  /* Ensure equal height cards */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.course-item-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary-color);
  box-shadow: 0 12px 30px rgba(138, 90, 174, 0.4);
}

.course-item-card .card-header {
  padding: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.course-item-card .card-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-light);
}

.course-item-card .card-description {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-dark);
}

.course-item-card .card-body {
  padding: 30px;
  flex-grow: 1;
  /* Allows body to expand */
}

.course-details-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.course-details-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
  font-size: 0.95rem;
  color: var(--text-light);
}

.course-details-list li:last-child {
  border-bottom: none;
}

.course-details-list li i {
  color: #004030;
  margin-right: 10px;
}

.course-details-list li .detail-value {
  font-weight: 600;
  color: var(--text-light);
}

.course-details-list li .detail-value.price {
  font-size: 1.1rem;
  color: #004030;
}

.course-item-card .card-footer {
  padding: 20px 30px 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: auto;
  /* Pushes footer to bottom */
}

.no-courses-message,
.login-prompt {
  font-size: 1.2rem;
  color: var(--text-dark);
  padding: 50px 0;
  background: var(--background-dark);
  border-radius: 15px;
  border: 1px solid var(--border-color);
  margin-top: 30px;
}

.login-prompt a {
  color: var(--accent-color);
  font-weight: 600;
}


/* ---------------------------------------------
16. Testimonials Section (Retained from previous, with minor adjustments)
--------------------------------------------- */
.testimonials {
  padding: 80px 0;
}

.testimonials .item {
  background: var(--background-light);
  padding: 30px;
  border-radius: 15px;
  border: 1px solid var(--border-color);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonials .item p {
  font-style: italic;
  margin-bottom: 20px;
  flex-grow: 1;
}

.testimonials .item h4 {
  margin-top: 0;
  color: var(--accent-color);
  font-size: 1.3rem;
}

.testimonials .item span {
  font-size: 0.9rem;
  color: var(--text-dark);
}

/* ---------------------------------------------
17. Footer & Contact (Retained from previous, with previous fixes)
--------------------------------------------- */
.contact-us {
  padding: 80px 0;
  border-top: 1px solid var(--border-color);
}

#contact {
  background: var(--background-light);
  padding: 40px;
  border-radius: 15px;
}

#contact input,
#contact textarea {
  width: 100%;
  background: var(--background-dark);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
  color: var(--text-light);
}

#contact button {
  background: var(--primary-color);
  color: var(--text-light);
  border: none;
  padding: 15px 30px;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#contact button:hover {
  background-color: var(--accent-color);
}

.footer-menu {
  list-style: none;
  padding: 0;
  margin: 40px 0 20px;
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.footer-menu li a {
  color: var(--text-light);
}

.copyright {
  text-align: center;
  color: var(--text-light);
  opacity: 0.7;
}

/* Added to remove dots from specific unordered list */
ul.text-center {
  list-style-type: none;
}

/* ---------------------------------------------
18. Responsive Design (Updated for new sections and previous fixes)
--------------------------------------------- */
/* Adjustments for screens smaller than 992px (e.g., tablets) */
@media (max-width: 992px) {

  /* Header & Nav */
  .menu-trigger {
    display: block;
  }

  .header-area .main-nav {
    justify-content: space-between;
  }

  .header-area .nav {
    /* Changed display to flex and control visibility with opacity/transform */
    display: flex;
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 70px;
    left: 0;
    background-color: #196552;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    padding: 0px 0;
    border-radius: 0 0 15px 15px;
    opacity: 0;
    visibility: visible;
    transform: translateY(0px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 90;
    /* Ensure the height is auto to fit content */
    height: 297px;
    max-height: 0;
    /* Initially collapsed */
    overflow: hidden;
  }

  .header-area.active .nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    max-height: 500px;
    /* A value large enough to contain all menu items */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, max-height 0.5s ease-out;
    /* Add max-height transition */
  }

  .header-area .nav li {
    margin: 0;
    width: 100%;
    text-align: center;
  }

  .header-area .nav li a {
    padding: 5px 5px;
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .header-area .nav li:last-child a {
    border-bottom: none;
  }

  .header-area .nav li.has-sub ul.sub-menu {
    position: absolute;
    width: 100%;
    box-shadow: none;
    display: block;
    border-radius: 0;
    top: 100%;
    left: 0;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    padding: 0;
    background-color: rgba(0, 0, 0, 0.2);
    border-top: 1px solid var(--border-color);
  }

  .header-area .nav li.has-sub ul.sub-menu li a {
    padding-left: 10px;
  }

  /* Homepage Hero Section */
  .hero-section {
    padding: 120px 0 30px;
  }

  .hero-section h1 {
    font-size: 3.5rem;
  }

  .hero-section .lead {
    font-size: 1.1rem;
  }

  /* Homepage Features Grid */
  .features-grid-section .section-heading h4 {
    font-size: 2rem;
  }

  .feature-card {
    padding: 30px;
  }

  .feature-card h3 {
    font-size: 1.5rem;
  }

  /* Homepage Process Flow */
  .process-flow-section .section-heading h4 {
    font-size: 2rem;
  }

  .process-step {
    padding: 25px;
  }

  .process-step h5 {
    font-size: 1.2rem;
  }

  .process-flow-section .row::before,
  .process-flow-section .col-lg-3:not(:last-child) .process-step::after {
    display: none;
  }

  /* Homepage Call to Action Banner */
  .action-banner-section {
    padding: 80px 0;
    margin: 40px auto;
  }

  .action-banner-section h2 {
    font-size: 2.2rem;
  }

  .action-banner-section p {
    font-size: 1rem;
  }

  /* About Us Hero Section */
  .about-hero-section {
    padding: 120px 0 20px 0;
  }

  .about-hero-section h1 {
    font-size: 3rem;
  }

  .about-hero-section .lead {
    font-size: 1.1rem;
  }

  /* Our Story Section */
  .story-content h3 {
    font-size: 1.8rem;
  }

  .story-content p {
    font-size: 0.9rem;
  }

  .story-block {
    margin-bottom: 40px;
  }

  /* Our Values Section */
  .value-card {
    padding: 25px;
  }

  .value-card h4 {
    font-size: 1.4rem;
  }

  .value-card .value-icon {
    width: 70px;
    height: 70px;
  }

  .value-card .value-icon i {
    font-size: 2.5rem;
  }

  /* Team Grid Section */
  .team-member-card {
    padding: 25px;
    margin-bottom: 30px;
  }

  .team-member-card .member-image {
    width: 120px;
    height: 120px;
  }

  .team-member-card h4 {
    font-size: 1.5rem;
  }

  .team-member-card span {
    font-size: 0.9rem;
  }

  .team-member-card .social-links a {
    font-size: 1.1rem;
  }

  /* Contact Hero Section */
  .contact-hero-section {
    padding: 120px 0 30px;
  }

  .contact-hero-section h1 {
    font-size: 3rem;
  }

  .contact-hero-section .lead {
    font-size: 1.1rem;
  }

  /* Contact Details & Form Section */
  .contact-details-section {
    padding: 50px 0 30px 0;
  }

  .contact-info-cards {
    gap: 20px;
  }

  .contact-info-cards .info-card {
    padding: 25px;
  }

  .contact-info-cards .info-card h4 {
    font-size: 1.4rem;
  }

  .contact-info-cards .info-card .icon-circle {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
  }

  .contact-info-cards .info-card .icon-circle i {
    font-size: 2rem;
  }

  .contact-info-cards .info-card p {
    font-size: 0.95rem;
  }

  .contact-form-wrapper {
    padding: 30px;
  }

  .contact-form-wrapper h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }

  #contact-form input,
  #contact-form textarea {
    padding: 12px 15px;
    margin-bottom: 15px;
  }

  /* Map Section */
  .map-section {
    margin-top: 40px;
  }

  /* Courses Hero Section */
  .courses-hero-section {
    padding: 120px 0 30px;
  }

  .courses-hero-section h1 {
    font-size: 3rem;
  }

  .courses-hero-section .lead {
    font-size: 1.1rem;
  }

  /* Course Listing Section */
  .course-listing-section {
    padding: 60px 0 30px 0;
  }

  .course-item-card {
    padding: 0;
  }

  /* Padding moved to inner elements */
  .course-item-card .card-header {
    padding: 25px;
  }

  .course-item-card .card-title {
    font-size: 1.5rem;
  }

  .course-item-card .card-description {
    font-size: 0.9rem;
  }

  .course-item-card .card-body {
    padding: 25px;
  }

  .course-details-list li {
    font-size: 0.9rem;
    padding: 8px 0;
  }

  .course-details-list li i {
    margin-right: 8px;
  }

  .course-details-list li .detail-value.price {
    font-size: 1rem;
  }

  .course-item-card .card-footer {
    padding: 15px 25px 25px;
  }

  .no-courses-message,
  .login-prompt {
    padding: 30px 20px;
    font-size: 1rem;
    margin-top: 20px;
  }

  /* Testimonials */
  .testimonials .item {
    padding: 25px;
  }

  .testimonials .item h4 {
    font-size: 1.2rem;
  }

  /* Footer */
  .footer-menu {
    gap: 10px;
  }

  .copyright {
    font-size: 0.75rem;
    line-height: 1.5;
    padding: 0 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    color: var(--text-light);
    opacity: 1;
  }
}

/* Adjustments for screens smaller than 768px (e.g., mobile phones) */
@media (max-width: 768px) {

  /* Header & Nav */
  .header-area .logo img {
    height: 50px;
  }

  /* Homepage Hero Section */
  .hero-section {
    padding: 100px 0 0;
  }

  .hero-section h1 {
    font-size: 2.5rem;
  }

  .hero-section .lead {
    font-size: 1rem;
  }

  .hero-section .hero-buttons .btn {
    display: block;
    width: 100%;
    margin-bottom: 15px;
  }

  /* Homepage Features Grid */
  .features-grid-section {
    padding: 60px 0 0 0;
  }

  .features-grid-section .section-heading h4 {
    font-size: 1.8rem;
  }

  .feature-card {
    padding: 25px;
  }

  .feature-card h3 {
    font-size: 1.3rem;
  }

  .feature-card .icon-wrapper {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
  }

  .feature-card .icon-wrapper i {
    font-size: 2.5rem;
  }

  /* Homepage Process Flow */
  .process-flow-section {
    padding: 60px 0 30px 0;
  }

  .process-flow-section .section-heading h4 {
    font-size: 1.8rem;
  }

  .process-step {
    margin-bottom: 30px;
  }

  .process-step .step-number {
    top: -15px;
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }

  .process-step .step-icon {
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .process-step .step-icon i {
    font-size: 1.8rem;
  }

  .process-step h5 {
    font-size: 1.1rem;
  }

  /* Homepage Call to Action Banner */
  .action-banner-section {
    padding: 60px 0;
    margin: 30px auto;
  }

  .action-banner-section h2 {
    font-size: 1.8rem;
  }

  .action-banner-section p {
    font-size: 0.9rem;
  }

  .action-banner-section .btn {
    font-size: 0.9rem;
    padding: 12px 25px;
  }

  /* About Us Hero Section */
  .about-hero-section {
    padding: 100px 0 0px;
  }

  .about-hero-section h1 {
    font-size: 2.5rem;
  }

  .about-hero-section .lead {
    font-size: 1rem;
  }

  /* Our Story Section */
  .story-content h3 {
    font-size: 1.5rem;
  }

  .story-content p {
    font-size: 0.9rem;
  }

  .story-block {
    margin-bottom: 30px;
  }

  /* Our Values Section */
  .our-values-section {
    padding: 60px 0 0 0;
  }

  .value-card {
    padding: 20px;
    margin-bottom: 20px;
  }

  .value-card h4 {
    font-size: 1.2rem;
  }

  .value-card .value-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
  }

  .value-card .value-icon i {
    font-size: 2rem;
  }

  .value-card p {
    font-size: 0.85rem;
  }

  /* Team Grid Section */
  .team-grid-section {
    padding: 60px 0 30px 0;
  }

  .team-member-card {
    padding: 20px;
    margin-bottom: 20px;
  }

  .team-member-card .member-image {
    width: 100px;
    height: 100px;
  }

  .team-member-card h4 {
    font-size: 1.3rem;
  }

  .team-member-card span {
    font-size: 0.85rem;
  }

  .team-member-card p {
    font-size: 0.8rem;
  }

  .team-member-card .social-links a {
    font-size: 1rem;
    margin: 0 8px;
  }

  /* Contact Hero Section */
  .contact-hero-section {
    padding: 100px 0 20px;
  }

  .contact-hero-section h1 {
    font-size: 2.5rem;
  }

  .contact-hero-section .lead {
    font-size: 1.1rem;
  }

  /* Contact Details & Form Section */
  .contact-details-section {
    padding: 30px 0;
  }

  .contact-info-cards {
    gap: 15px;
  }

  .contact-info-cards .info-card {
    padding: 20px;
  }

  .contact-info-cards .info-card h4 {
    font-size: 1.3rem;
  }

  .contact-info-cards .info-card .icon-circle {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
  }

  .contact-info-cards .info-card .icon-circle i {
    font-size: 1.8rem;
  }

  .contact-info-cards .info-card p {
    font-size: 0.85rem;
  }

  .contact-form-wrapper {
    padding: 25px;
  }

  .contact-form-wrapper h3 {
    font-size: 1.6rem;
    margin-bottom: 15px;
  }

  #contact-form input,
  #contact-form textarea {
    padding: 10px 12px;
    margin-bottom: 10px;
  }

  #contact-form textarea {
    min-height: 120px;
  }

  /* Map Section */
  .map-section {
    margin-top: 30px;
  }

  /* Courses Hero Section */
  .courses-hero-section {
    padding: 100px 0 20px;
  }

  .courses-hero-section h1 {
    font-size: 2.5rem;
  }

  .courses-hero-section .lead {
    font-size: 1rem;
  }

  /* Course Listing Section */
  .course-listing-section {
    padding: 50px 0 30px 0;
  }

  .course-item-card .card-header {
    padding: 20px;
  }

  .course-item-card .card-title {
    font-size: 1.3rem;
  }

  .course-item-card .card-description {
    font-size: 0.8rem;
  }

  .course-item-card .card-body {
    padding: 20px;
  }

  .course-details-list li {
    font-size: 0.85rem;
    padding: 6px 0;
  }

  .course-details-list li i {
    margin-right: 6px;
  }

  .course-details-list li .detail-value.price {
    font-size: 0.95rem;
  }

  .course-item-card .card-footer {
    padding: 12px 20px 20px;
  }

  .no-courses-message,
  .login-prompt {
    padding: 25px 15px;
    font-size: 0.9rem;
    margin-top: 15px;
  }

  /* Testimonials */
  .testimonials {
    padding: 60px 0;
  }

  .testimonials .item {
    padding: 20px;
  }

  .testimonials .item h4 {
    font-size: 1.1rem;
  }

  .testimonials .item p {
    font-size: 0.85rem;
  }

  .testimonials .item span {
    font-size: 0.75rem;
  }

  /* Footer */
  .footer-menu {
    gap: 8px;
  }

  .copyright {
    font-size: 0.7rem;
    line-height: 1.4;
    padding: 0 10px;
    margin-top: 15px;
    margin-bottom: 20px;
  }
}

/* General utility classes for responsiveness */
.mb-4 {
  margin-bottom: 1.5rem !important;
  /* Bootstrap spacing */
}

.pad-0 {
  padding: 0 !important;
}

/* Ensure images and embedded content are responsive by default */
img {
  max-width: 100%;
  height: auto;
}

/* Ensure tables are responsive (if any were added) */
table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  /* display: block; */
}