/* Base */
@import url('base/reset.css');
@import url('base/variables.css');
@import url('base/typography.css');

/* Layout */
@import url('layout/header.css');
@import url('layout/navbar.css');
@import url('layout/footer.css');

/* Components */
@import url('components/buttons.css');
@import url('components/cards.css');
@import url('components/forms.css');
@import url('components/accordion.css');
@import url('components/carousel.css');
@import url('components/social-icons.css');
@import url('components/text-area.css');


/* Sections */
@import url('sections/hero.css');
@import url('sections/announcement.css');
@import url('sections/about.css');
@import url('sections/team.css');
@import url('sections/facilities.css');
@import url('sections/testimonials.css');
@import url('sections/gallery.css');
@import url('sections/achievements.css');
@import url('sections/blog.css');
@import url('sections/course.css');
@import url('sections/contact.css');

/* Utilities */
@import url('utilities/spacing.css');
@import url('utilities/text.css');
@import url('utilities/visibility.css');

:root {
  --brand:#1a472a;
  --accent:#ffd700;
  --white:#fff;
  --muted:#d3d3d3;
}

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

body {
  font-family:Inter,Arial,sans-serif;
  background:#ffffff;
  color:#222;
}
.bg-brand {
  background-color: var(--color-brand) !important;
}

@keyframes slide-left {
  0% {transform:translateX(0);}
  100% {transform:translateX(-100%);}
}

.ticker {
  display: inline-block;
  padding-left: 100%;
  animation: tickerMove 18s linear infinite;
  font-weight: 600;
  font-size: 15px;
}

@keyframes tickerMove {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}


/* ------------------------------------
   SCROLL ANIMATION SYSTEM — 2025
-------------------------------------*/

/* Initial hidden state */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

/* Slide from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: all 0.8s ease;
}

/* Slide from right */
.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: all 0.8s ease;
}

/* When element becomes visible */
.reveal-visible {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}


.input-group-icon {
  position: relative;
}

.input-group-icon .icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--color-danger);  /* SAO red theme */
  z-index: 5;
}

.input-group-icon .form-control,
.input-group-icon .form-select {
  padding-left: 42px;
  height: 48px;
}





.modal-backdrop {
    z-index: 2000 !important;
}

.modal {
    z-index: 2050 !important;
}



/* ===============================
   FAQ PAGE STYLES
================================ */