:root {
  --logo-accent: #013064;
  --background: #f8f9fa;
  --text-headlines: #2e3a59;
  --light-logo-accent: #e2eaf3;
  --links-hovers: #0068C7;
  --body-text: #6c757d;
}

body {
  background: var(--background);
  color: var(--body-text);
  font-family: Inter, Arial, Helvetica, sans-serif;
}

h1,
h2,
h3 {
  color: var(--text-headlines);
}

a {
  color: var(--logo-accent);
}

/* Top Banner Styles */

.top-banner {
  background-color: var(--logo-accent);
  font-size: 12px;
}

.social-icons a {
  color: var(--background);
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: var(--links-hovers);
}

/* Navigation Styles */

.navbar {
  border-bottom: 2px solid var(--logo-accent);
  transition: border-bottom 0.3s ease;
  background: var(--light-logo-accent);
}

.navbar.no-border {
  border-bottom: none;
}

.navbar img {
  max-height: 60px;
}

.navbar-nav .nav-link {
  color: var(--text-headlines);
  font-weight: 600;
  transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
  color: var(--links-hovers);
}

.navbar-nav .nav-link.active {
  color: var(--links-hovers);
  position: relative;
  font-weight: 800;
}

.navbar-nav .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 2px;
  background-color: var(--links-hovers);
  border-radius: 1px;
}

/* Dropdown Styles */

.dropdown-toggle.active {
  color: var(--links-hovers);
  font-weight: 600;
  position: relative;
}

.dropdown-toggle::after{
  border: none;
  margin-left: 0;
  display: block;
}

.dropdown {
  cursor: pointer;
  transition: 300ms;
}

.dropdown-menu {
  display: none;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 5px;
}

.dropdown-item {
  color: var(--body-text);
  transition: all 300ms;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--links-hovers);
  color: var(--background);
  transform: translateX(5px);
}

/* CTA Button Styles*/
.btn-cta,
.btn-cta *,
.btn-cta :after,
.btn-cta :before,
.btn-cta:after,
.btn-cta:before {
  border: 0 solid;
  box-sizing: border-box;
}

.btn-cta {
  background-color: var(--logo-accent);
  background-image: none;
  color: var(--background);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid var(--logo-accent);
}

.btn-cta:after,
.btn-cta:before {
  background: linear-gradient(
    90deg,
    var(--background) 25%,
    transparent 0,
    transparent 50%,
    var(--background) 0,
    var(--background) 75%,
    transparent 0
  );
  content: "";
  inset: 0;
  position: absolute;
  transform: translateY(var(--progress, 100%));
  transition: transform 0.3s ease;
}

.btn-cta:after {
  --progress: -100%;
  background: linear-gradient(
    90deg,
    transparent 0,
    transparent 25%,
    var(--background) 0,
    var(--background) 50%,
    transparent 0,
    transparent 75%,
    var(--background) 0
  );
  z-index: 1;
}

.btn-cta:hover:after,
.btn-cta:hover:before {
  --progress: 0;
}

.btn-cta:hover {
  background-color: var(--background);
  color: var(--text-headlines);
}

/* Hero Section Styles*/

.hero-image {
  height: 70vh;
}

/* Our Features Styles*/

.features-container i {
  color: var(--logo-accent);
  font-size: 3em;
}

.feature-title {
  font-size: 1.125em;
}

.feature-description {
  color: var(--text-headlines);
}

/* Courses Section Styles */

.courses-section h2 {
  font-size: 24px;
}

.course-filters button {
  transition: all 0.3s ease;
    width: 100%;
    margin-bottom: 0.5rem;
}

.course-filters button.active {
  background-color: var(--logo-accent);
  color: var(--background);
  border-color: var(--light-logo-accent);
}

.course-card {
  background: var(--light-logo-accent);
  min-height: 420px;
  transition: transform 0.3s ease;
}

.course-card:hover {
  transform: translateY(-10px);
}

.course-card img {
  height: 200px;
  transition: transform 0.3s ease;
}

.course-card:hover img {
  transform: scale(1.05);
}

.course-details i {
  color: var(--logo-accent);
}

/* Course Features Section Styles */

.trait-card {
  background: var(--light-logo-accent);
  transition: transform 0.3s ease;
}

.trait-card h5 {
  color: var(--text-headlines);
  font-size: 1rem;
}

.trait-card p {
  font-size: 12px;
}

/* Our Team Section Styles */
.team-section {
  background-color: var(--light-logo-accent);
}

.team-section h2 {
  font-size: 24px;
}

.team-section .swiper-pagination-bullet {
  width: 40px;
  height: 6px;
  border-radius: 0;
}

.team-section .swiper-pagination-bullet-active {
  background: var(--logo-accent);
}

/* About & Contact Styles */

.about-main-title {
  color: var(--text-headlines);
  font-size: 1.75rem;
}

.about-icon {
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #013064, #001f3f);

}

.about-icon i {
  font-size: 20px;
}

.contact-form .form-control {
  transition: border-color 0.3s ease;
}

.contact-form .form-control:focus {
  border-color: var(--logo-accent);
  box-shadow: none;
}

/*** ADMISSIONS PAGE ***/

/* Admission Process */

.admission-method-icon {
  background: linear-gradient(135deg, var(--logo-accent), #011c3a);
  width: 80px;
  height: 80px;

  i {
    font-size: 2rem;
  }
}

.admission-process-step {
  width: 50px;
  height: 50px;
  background: var(--logo-accent);
}

.admission-process-step + div > i {
  font-size: 2rem;
  color: var(--logo-accent);
}

/* LG Admission Process Section Styles */
.lg-admission-method-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--logo-accent), #011c3a);

  i {
    font-size: 1.8rem;
  }
}

.lg-admission-process-step {
  width: 50px;
  height: 50px;
  background: var(--logo-accent);
  font-size: 1.2rem;
}

.lg-admission-process-step + div > i {
  font-size: 2rem;
  color: var(--logo-accent);
}

/* Payment Method Section Styles */
.payment-method-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--logo-accent), #011c3a);

  i {
    font-size: 2rem;
  }
}

/* CTA Section Styles */
.cta-section {
  background: linear-gradient(
    135deg,
    var(--links-hovers) 0%,
    var(--logo-accent) 100%
  );
}

/** COURSE PAGE **/

/* Course Detail Header Styles */
.course-detail-header {
  background: var(--light-logo-accent);
}

.module-number {
  width: 30px;
  height: 30px;
  font-size: 0.8rem;
}

/** ABOUT PAGE **/
.about-hero{
background: linear-gradient(135deg, var(--light-logo-accent) 0%, var(--links-hovers) 100%);
}


/** FOOTER **/

/* Footer Section Styles */
.social-icons-footer a {
  transition: transform 0.3s ease;
  width: 40px;
  height: 40px;
}

.social-icons-footer a:hover {
  transform: scale(1.1);
}

.footer-links {
  list-style: none;
}

.footer-links a {
  color: var(--body-text);
  transition: color 0.3s ease;
}

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

/* Application Modal Styles */

.form-control:focus {
  border-color: var(--logo-accent);
  box-shadow: 0 0 0 0.2rem rgba(0, 126, 58, 0.25);
}

.form-select:focus {
  border-color: var(--logo-accent);
  box-shadow: 0 0 0 0.2rem rgba(0, 126, 58, 0.25);
}

/* Early Bird Discount Styles */
.early-bird-badge {
  animation: pulse 2s infinite;
}

.early-bird-badge .badge {
  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
  border: 2px solid #fff;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.course-card .text-decoration-line-through {
  text-decoration-color: #dc3545 !important;
}

.course-card .bg-danger {
  background: linear-gradient(45deg, #dc3545, #e74c3c) !important;
  border: none;
  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
}

.course-details .text-success {
  color: #198754 !important;
  font-weight: 700 !important;
}