:root {
  --primary-color: #2563eb;
  --secondary-color: #1e40af;
  --accent-color: #fbbf24;
  --text-dark: #1f2937;
  --text-light: #6b7280;
  --bg-light: #f9fafb;
  --bg-white: #ffffff;
  --success-color: #10b981;
  --transition: all .3s ease
}
* {
  margin:0;
  padding:0;
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  font-family:Inter,sans-serif;
  color:var(--text-dark);
  line-height:1.6;
  overflow-x:hidden
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:Poppins,sans-serif;
  font-weight:700;
  line-height:1.2
}
.navbar {
  background:#2563ebf2;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  padding:1rem 0;
  transition:var(--transition);
  box-shadow:0 2px 10px #0000001a
}
.navbar.scrolled {
  background:#2563eb;
  box-shadow:0 4px 20px #00000026
}
.navbar-brand {
  font-family:Poppins,sans-serif;
  font-size:1.5rem;
  font-weight:700;
  color:#fff!important;
  transition:var(--transition)
}
.navbar-brand:hover {
  transform:scale(1.05)
}
.nav-link {
  color:#ffffffe6!important;
  font-weight:500;
  padding:.5rem 1rem!important;
  position:relative;
  transition:var(--transition)
}
.nav-link:after {
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  width:0;
  height:2px;
  background:var(--accent-color);
  transition:var(--transition);
  transform:translate(-50%)
}

.hero-section {
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  margin-top: 0px;
}
.parallax-bg {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:120%;
  background-image:url(../images/video.jpg?auto=compress&cs=tinysrgb&w=1920);
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  transform:translateZ(0);
  will-change:transform;
  z-index:-2
}
.hero-overlay {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(135deg,#483d8b,#483d8b);
  opacity: 0.8;
  z-index:-1
}
.hero-content {
  position:relative;
  z-index:1;
  color:#fff;
  padding:0px
}
.hero-title {
  font-size:3rem;
  font-weight:800;
  margin-bottom:1.5rem;
  text-shadow:2px 2px 4px rgba(0,0,0,.2);
  animation:fadeInUp 1s ease
}
.hero-subtitle {
  font-size:1.3rem;
  font-weight:300;
  margin-bottom:2rem;
  opacity:.95;
  animation:fadeInUp 1s ease .2s both
}
.hero-buttons {
  margin-bottom:1rem;
  animation:fadeInUp 1s ease .4s both
}
.btn-cta {
  background:var(--accent-color);
  color:var(--text-dark);
  font-weight:600;
  padding:12px 32px;
  border-radius:50px;
  border:none;
  transition:var(--transition);
  box-shadow:0 4px 15px #fbbf2466;
  position:relative;
  overflow:hidden
}
.btn-cta:before {
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transition:left .5s
}
.btn-cta:hover:before {
  left:100%
}
.btn-cta:hover {
  background:#f59e0b;
  transform:translateY(-2px);
  box-shadow:0 6px 20px #fbbf2499;
  color:var(--text-dark)
}
.cta-text {
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-weight:700;
  padding:2px 0;
  text-shadow:none;
  display:inline-block;
  animation:shimmer 3s infinite
}
.btn-cta .cta-text {
  -webkit-text-fill-color:var(--text-dark);
  background:none;
  animation:none
}
@keyframes shimmer {
  0%,
  to {
    opacity:1
  }
  50% {
    opacity:.85
  }
}
.btn-outline-light {
  border:2px solid white;
  color:#fff;
  font-weight:600;
  padding:12px 32px;
  border-radius:50px;
  transition:var(--transition)
}
.btn-outline-light:hover {
  background:#fff;
  color:var(--primary-color);
  transform:translateY(-2px)
}
.hero-stats {
  margin-top:4rem
}
.stat-item {
  padding:1.5rem;
  background:#ffffff1a;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-radius:15px;
  transition:var(--transition);
  border:1px solid rgba(255,255,255,.2)
}
.stat-item:hover {
  background:#ffffff26;
  transform:translateY(-5px)
}
.stat-number {
  font-size:3rem;
  font-weight:800;
  color:var(--accent-color);
  margin-bottom:.5rem
}
.stat-label {
  font-size:1rem;
  color:#ffffffe6;
  margin-bottom:0
}
.scroll-indicator {
  position:absolute;
  bottom:30px;
  left:50%;
  transform:translate(-50%);
  animation:bounce 2s infinite;
  font-size:2rem;
  color:#fff;
  cursor:pointer
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  to {
    transform:translate(-50%) translateY(0)
  }
  40% {
    transform:translate(-50%) translateY(-10px)
  }
  60% {
    transform:translate(-50%) translateY(-5px)
  }
}
@keyframes fadeInUp {
  0% {
    opacity:0;
    transform:translateY(30px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
.animate-on-scroll {
  opacity:0;
  transform:translateY(30px);
  transition:opacity .6s ease,transform .6s ease
}
.animate-on-scroll.animated {
  opacity:1;
  transform:translateY(0)
}
.section-tag {
  display:inline-block;
  background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));
  color:#fff;
  padding:6px 20px;
  border-radius:50px;
  font-size:.875rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:1rem
}
.section-title {
  font-size:2.5rem;
  font-weight:800;
  color:var(--text-dark);
  margin-bottom:1rem
}
.section-title-white {
  font-size:2.5rem;
  font-weight:800;
  color:#ffffff;
  margin-bottom:1rem
}
.section-description {
  font-size:1.125rem;
  color:var(--text-light);
  line-height:1.8
}
.about-section {
  padding:100px 0;
  background:var(--bg-white)
}
.about-image {
  position:relative;
  margin-top:30px;
}
.about-image img {
  width:100%;
  height:auto;
  object-fit:cover;
  transition:var(--transition)
}
.about-image:hover img {
  transform:scale(1.03)
}
.about-badge {
  position:absolute;
  bottom:20px;
  right:20px;
  background:var(--accent-color);
  color:var(--text-dark);
  padding:15px 25px;
  border-radius:50px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow:0 4px 15px #fbbf2466;
  animation:pulse 2s infinite
}

@keyframes pulse {
  0%,
  to {
    transform:scale(1)
  }
  50% {
    transform:scale(1.05)
  }
}
.about-features {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem
}
.feature-item {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:500;
  color:var(--text-dark)
}
.feature-item i {
  color:var(--success-color);
  font-size:1.25rem
}
.why-choose-section {
  padding:100px 0;
  background:linear-gradient(135deg,#f0f9ff,#e0f2fe)
}
.carousel {
  padding:2rem 0
}
.carousel-control-prev,
.carousel-control-next {
  width:50px;
  height:50px;
  background:var(--primary-color);
  border-radius:50%;
  top:50%;
  transform:translateY(-50%);
  opacity:1
}
.carousel-control-prev {
  left:-60px
}
.carousel-control-next {
  right:-60px
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
  background:var(--secondary-color)
}
.carousel-indicators {
  margin-bottom:-40px;
  display:none;
}
.carousel-indicators button {
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--primary-color);
  opacity:.5
}
.carousel-indicators button.active {
  opacity:1;
  background:var(--accent-color)
}
.why-card {
  background:var(--bg-white);
  padding:2.5rem;
  border-radius:20px;
  text-align:center;
  transition:var(--transition);
  box-shadow:0 4px 20px #00000014;

  border:2px solid transparent
}
.why-card:hover {
  transform:translateY(0px);
  box-shadow:0 10px 40px #2563eb26;
  border-color:var(--primary-color)
}
.why-icon {
  width:80px;
  height:80px;
  background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1.5rem;
  transition:var(--transition)
}
.why-card:hover .why-icon {
  transform:rotateY(360deg);
  background:linear-gradient(135deg,var(--accent-color),#f59e0b)
}
.why-icon i {
  font-size:2rem;
  color:#fff
}
.why-title {
  font-size:1.5rem;
  font-weight:700;
  color:var(--text-dark);
  margin-bottom:1rem
}
.why-description {
  color:var(--text-light);
  font-size:1rem;
  line-height:1.7
}
.programs-section {
  padding:100px 0;
  background:#254284;
}
.program-card {
  background:var(--bg-white);
  border:2px solid #e5e7eb;
  border-radius:20px;
  padding:2.5rem;
  transition:var(--transition);
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column
}
.program-card:hover {
  transform:translateY(-10px);
  box-shadow:0 15px 40px #0000001a;
  border-color:var(--primary-color)
}
.program-card.featured {
  border-color:var(--accent-color);
  background:linear-gradient(135deg,#fffbeb,#fef3c7);
  transform:scale(1.05)
}
.program-card.featured:hover {
  transform:scale(1.08) translateY(-10px)
}
.program-badge {
  position:absolute;
  top:-15px;
  right:20px;
  background:var(--accent-color);
  color:var(--text-dark);
  padding:8px 20px;
  border-radius:50px;
  font-weight:700;
  font-size:.875rem;
  box-shadow:0 4px 15px #fbbf2466
}
.program-header {
  text-align:center;
  margin-bottom:2rem
}
.program-name {
  font-size:1.75rem;
  font-weight:700;
  color:var(--text-dark);
  margin-bottom:1rem
}
.program-price {
  margin-bottom:1.5rem
}
.price-amount {
  font-size:3rem;
  font-weight:800;
  color:var(--primary-color)
}
.price-period {
  font-size:1rem;
  color:var(--text-light)
}
.program-features {
  list-style:none;
  padding:0;
  margin-bottom:2rem;
  flex-grow:1
}
.program-features li {
  padding:.75rem 0;
  border-bottom:1px solid #e5e7eb;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text-dark)
}
.program-features li:last-child {
  border-bottom:none
}
.program-features i {
  color:var(--success-color);
  font-size:1.125rem
}
.btn-outline-primary {
  border:2px solid var(--primary-color);
  color:var(--primary-color);
  font-weight:600;
  padding:12px 32px;
  border-radius:50px;
  transition:var(--transition)
}
.btn-outline-primary:hover {
  background:var(--primary-color);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 4px 15px #2563eb4d
}
.testimonials-section {
  padding:100px 0;
  background:linear-gradient(135deg,#f9fafb,#f3f4f6)
}
.testimonial-card {
  background:var(--bg-white);
  padding:2.5rem;
  border-radius:20px;
  box-shadow:0 4px 20px #00000014;
  transition:var(--transition);
  height:100%;
  border:2px solid transparent
}
.testimonial-card:hover {
  transform:translateY(-10px);
  box-shadow:0 10px 40px #0000001f;
  border-color:var(--accent-color)
}
.testimonial-rating {
  margin-bottom:1.5rem
}
.testimonial-rating i {
  color:var(--accent-color);
  font-size:1.25rem;
  margin-right:5px
}
.testimonial-text {
  font-size:1.125rem;
  font-style:italic;
  color:var(--text-dark);
  margin-bottom:2rem;
  line-height:1.8
}
.testimonial-author {
  display:flex;
  align-items:center;
  gap:15px;
  border-top:2px solid #e5e7eb;
  padding-top:1.5rem
}
.testimonial-author img {
  width:60px;
  height:60px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid var(--accent-color)
}
.testimonial-author h4 {
  font-size:1.125rem;
  font-weight:700;
  color:var(--text-dark);
  margin-bottom:.25rem
}
.testimonial-author p {
  font-size:.875rem;
  color:var(--text-light);
  margin-bottom:0
}
.contact-section {
  padding:100px 0;
  background:var(--bg-white)
}
.contact-info {
  padding-right:2rem
}
.contact-details {
  margin-top:2rem
}
.contact-item {
  display:flex;
  gap:20px;
  margin-bottom:2rem
}
.contact-icon {
  width:50px;
  height:50px;
  background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0
}
.contact-icon i {
  font-size:1.5rem;
  color:#fff
}
.contact-item h4 {
  font-size:1.125rem;
  font-weight:700;
  color:var(--text-dark);
  margin-bottom:.5rem
}
.contact-item p {
  color:var(--text-light);
  margin-bottom:0
}
.social-links {
  display:flex;
  gap:15px
}
.social-link {
  width:45px;
  height:45px;
  background:var(--primary-color);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.25rem;
  transition:var(--transition)
}
.social-link:hover {
  background:var(--accent-color);
  color:var(--text-dark);
  transform:translateY(-3px)
}
.contact-form-wrapper {
  background:linear-gradient(135deg,#f0f9ff,#e0f2fe);
  padding:3rem;
  border-radius:20px;
  box-shadow:0 4px 20px #00000014
}
.contact-form .form-control,
.contact-form .form-select {
  padding:12px 20px;
  border:2px solid #e5e7eb;
  border-radius:10px;
  font-size:1rem;
  transition:var(--transition)
}
.contact-form .form-control:focus,
.contact-form .form-select:focus {
  border-color:var(--primary-color);
  box-shadow:0 0 0 3px #2563eb1a
}
.footer {
  background:linear-gradient(135deg,#1e293b,#0f172a);
  color:#fff
}
.footer-brand {
  font-family:Poppins,sans-serif;
  font-size:1.75rem;
  font-weight:700;
  margin-bottom:1rem
}
.footer-title {
  font-size:1.25rem;
  font-weight:700;
  margin-bottom:1.5rem
}
.footer-description {
  color:#ffffffb3;
  line-height:1.8
}
.footer-links {
  list-style:none;
  padding:0
}
.footer-links li {
  margin-bottom:.75rem
}
.footer-links a {
  color:#ffffffb3;
  text-decoration:none;
  transition:var(--transition)
}
.footer-links a:hover {
  color:var(--accent-color);
  padding-left:5px
}
.newsletter-form .form-control {
  background:#ffffff1a;
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  padding:10px 15px;
  border-radius:10px
}
.newsletter-form .form-control::placeholder {
  color:#ffffff80
}
.newsletter-form .form-control:focus {
  background:#ffffff26;
  border-color:var(--accent-color);
  box-shadow:none;
  color:#fff
}
.footer-divider {
  border-color:#ffffff1a;
  margin:2rem 0
}
.footer-copyright {
  color:#fff9;
  font-size:.875rem;
  margin-bottom:0
}
@media (max-width: 991px) {
  .hero-title {
    font-size:3rem
  }
  .hero-subtitle {
    font-size:1.25rem
  }
  .section-title {
    font-size:2rem
  }
  .carousel-control-prev,
  .carousel-control-next {
    display:none
  }
  .carousel-indicators {
  margin-bottom:-40px;
  display:block;
}
  .about-features {
    grid-template-columns:1fr
  }
}
@media (max-width: 768px) {
  .hero-title {
    font-size:2.5rem
  }
  .hero-subtitle {
    font-size:1.125rem
  }
  .stat-number {
    font-size:2.5rem
  }
  .section-title {
    font-size:1.75rem
  }
  .contact-info {
    padding-right:0
  }
  .contact-form-wrapper {
    padding:2rem
  }
    .why-card {
 margin-top: 20px;

}

}
@media (max-width: 576px) {
  .hero-title {
    font-size:2rem
  }
  .btn-cta,
  .btn-outline-light,
  .btn-outline-primary {
    padding:10px 24px;
    font-size:.875rem
  }
  .program-card.featured {
    transform:scale(1)
  }
  .program-card.featured:hover {
    transform:scale(1.02) translateY(-5px)
  }
  .hero-content {
  position:relative;
  z-index:1;
  color:#fff;
  padding-top:100px
}

}