:root{
  --topbar-bg:#466684;
  --topbar-text:#ffffff;
  --topbar-text-dim:rgba(255,255,255,.9);
  --topbar-hover:rgba(255,255,255,.15);
  --action:#0d6efd;
  --hero-bg:#3f5f7e;
  --strip-bg:#3b5874;
  --footer-bg:#2e3e4e;
  --font:"Cairo",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
}

body{font-family:var(--font);}

/* Header Top */
.header-top .logo-img{height:60px}
.header-top .btn{border-radius:10px}
.header-top .badge{font-size:.7rem}

/* Navbar */
.topbar{background-color:var(--topbar-bg);min-height:50px;padding:.4rem 0;}
.topbar .nav-link{color:var(--topbar-text-dim);display:inline-flex;align-items:center;gap:.35rem;padding:.375rem .75rem;border-radius:4px;font-weight:500;}
.topbar .nav-link i{font-size:.95rem;line-height:1;}
.topbar .nav-link a{white-space:nowrap;}
.topbar .nav-link:hover,.topbar .nav-item.show>.nav-link{color:var(--topbar-text);background-color:var(--topbar-hover);}
.topbar .dropdown-menu{border:0;border-radius:.5rem;padding:.4rem;min-width:13rem;}
.topbar .dropdown-item{border-radius:.35rem;padding:.5rem .75rem;display:flex;align-items:center;gap:.5rem;font-size:14px;}
.topbar .dropdown-item i{opacity:.9}
.topbar .dropdown-item:hover{background-color:rgba(0,0,0,.05);}
.navbar-toggler{border-color:rgba(255,255,255,.25)}
.navbar-toggler-icon{filter:invert(1) grayscale(1)}

/* Arrow flip */
.dropdown-toggle .dropdown-arrow{transition:transform .3s ease;font-size:.85rem;vertical-align:middle;}
.dropdown.show .dropdown-arrow{transform:rotate(180deg);}

/* Hover open (desktop) */
@media (min-width: 992px){
  .navbar .dropdown:hover > .dropdown-menu{display:block;margin-top:0;visibility:visible;opacity:1;}
}

/* ============================================
   MEGA MENU & SUBMENU STYLES
   ============================================ */

/* Mega Menu */
.mega-dropdown {
  position: static;
}

.mega-menu {
  width: 100%;
  padding: 1rem;
  border-radius: 0.75rem;
}

.mega-menu .dropdown-header {
  color: var(--topbar-bg);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--topbar-bg);
  margin-bottom: 0.5rem;
}

.mega-menu .row {
  margin: 0;
}

.mega-menu .col-lg-4 {
  padding: 0 1rem;
  border-left: 1px solid #eee;
}

.mega-menu .col-lg-4:last-child {
  border-left: none;
}

/* Dropdown Submenu */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-item::after {
  content: "\F285";
  font-family: "bootstrap-icons";
  float: left;
  margin-right: auto;
  font-size: 0.75rem;
}

.dropdown-submenu .submenu {
  display: none;
  position: absolute;
  right: 100%;
  top: 0;
  min-width: 220px;
  margin-right: 0.125rem;
  border-radius: 0.5rem;
}

.dropdown-submenu:hover > .submenu {
  display: block;
}

/* Mobile submenu */
@media (max-width: 991px) {
  .mega-menu {
    padding: 0.5rem;
  }
  
  .mega-menu .col-lg-4 {
    border-left: none;
    border-bottom: 1px solid #eee;
    padding: 0.5rem 0;
  }
  
  .mega-menu .col-lg-4:last-child {
    border-bottom: none;
  }
  
  .dropdown-submenu .submenu {
    position: static;
    box-shadow: none;
    border: none;
    padding-right: 1rem;
    background: rgba(0,0,0,0.02);
  }
  
  .dropdown-submenu > .dropdown-item::after {
    content: "\F282";
  }
  
  .dropdown-submenu.show > .dropdown-item::after {
    content: "\F286";
  }
}

/* Smaller nav items for more menu items */
@media (min-width: 992px) {
  .topbar .nav-link {
    padding: 0.35rem 0.6rem;
    font-size: 0.9rem;
  }
}

/* ============================================
   HERO SLIDER STYLES
   ============================================ */

.hero-slider {
  position: relative;
  height: 450px;
  overflow: hidden;
}

@media (max-width: 991px) {
  .hero-slider {
    height: 380px;
  }
}

@media (max-width: 575px) {
  .hero-slider {
    height: 340px;
  }
}

.slider-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Individual Slide */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
  z-index: 1;
}

.slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Slide Content Animations */
.slide-content {
  position: relative;
  z-index: 2;
}

.slide .slide-title {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: 0.2s;
}

.slide .slide-desc {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: 0.4s;
}

.slide .slide-btns {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: 0.6s;
}

.slide.active .slide-title,
.slide.active .slide-desc,
.slide.active .slide-btns {
  opacity: 1;
  transform: translateY(0);
}

/* Slide Image Animation */
.slide-img-wrapper {
  position: relative;
  z-index: 2;
}

.slide .slide-img {
  opacity: 0;
  transform: translateX(-60px) scale(0.9);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: 0.3s;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.slide.active .slide-img {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* Slider Navigation Buttons */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  color: white;
  font-size: 1.3rem;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.slider-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-50%) scale(1.1);
}

.slider-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.slider-prev {
  right: 20px;
}

.slider-next {
  left: 20px;
}

@media (max-width: 767px) {
  .slider-btn {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .slider-prev {
    right: 10px;
  }
  
  .slider-next {
    left: 10px;
  }
}

/* Slider Dots */
.slider-dots {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 10;
}

.slider-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}

.slider-dots .dot:hover {
  border-color: white;
  background: rgba(255, 255, 255, 0.3);
}

.slider-dots .dot.active {
  background: white;
  border-color: white;
  transform: scale(1.2);
}

/* Progress Bar */
.slider-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  z-index: 10;
}

.slider-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.8), rgba(255,255,255,1));
  width: 0%;
  transition: width 0.05s linear;
}

/* Hero Wave */
.hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 24px;
  background: radial-gradient(circle at 50% -50%, rgba(255,255,255,.35), transparent 70%);
  z-index: 5;
}

/* Keep original hero styles for backwards compatibility */
.hero {
  background: linear-gradient(135deg, var(--hero-bg), #5f7f9e);
  color: #fff;
}

.hero-illus {
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* ============================================
   END HERO SLIDER STYLES
   ============================================ */

/* Quick actions */
.quick-actions .qa{transition:transform .2s ease, box-shadow .2s ease;}
.quick-actions .qa:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08) !important;}

/* Stats strip */
.stats-strip{background:var(--strip-bg);} .stat small{opacity:.9}

/* Programs */
.program-card img{object-fit:cover;height:210px}
.section-head h2{color:#1b2a3a}

/* CTA */
.cta{background:linear-gradient(90deg, var(--strip-bg), #4e6d8a)}

/* Partners */
.grayscale{filter:grayscale(1);opacity:.8;transition:.2s}
.grayscale:hover{filter:none;opacity:1}

/* Footer */
.footer{background:var(--footer-bg)}

/* ============================================
   NEWS CUSTOM SLIDER
   ============================================ */

.news-slider-wrapper {
  position: relative;
  padding: 0 50px;
}

@media (max-width: 767px) {
  .news-slider-wrapper {
    padding: 0 15px;
  }
}

.news-slider {
  position: relative;
  overflow: hidden;
}

.news-slide {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.news-slide.active {
  display: block;
  opacity: 1;
}

.news-card {
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background: #fff;
}

.news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

.news-card .card-img-top {
  height: 190px;
  object-fit: cover;
}

@media (max-width: 575px) {
  .news-card .card-img-top {
    height: 175px;
  }
}

.news-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: #1b2a3a;
  margin: 0;
}

.news-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  margin: 0;
}

/* Slider Navigation Buttons */
.news-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.news-slider-btn:hover {
  background: rgba(0, 0, 0, 0.5);
  transform: translateY(-50%) scale(1.1);
}

.news-slider-prev {
  right: 0;
}

.news-slider-next {
  left: 0;
}

@media (max-width: 767px) {
  .news-slider-btn {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  
  .news-slider-prev {
    right: -5px;
  }
  
  .news-slider-next {
    left: -5px;
  }
}

/* Slider Dots */
.news-slider-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.news-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #466684;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}

.news-dot:hover {
  background: rgba(70, 102, 132, 0.3);
}

.news-dot.active {
  background: #466684;
  transform: scale(1.2);
}

/* ============================================
   PHOTO GALLERY
   ============================================ */

.gallery-item {
  width: 150px;
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  margin: 0 auto;
}

.gallery-item:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

/* Gallery Modal */
.gallery-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.gallery-modal.active {
  opacity: 1;
  visibility: visible;
}

.gallery-modal-content {
  max-width: 90%;
  max-height: 85vh;
}

.gallery-modal-content img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: 8px;
  box-shadow: 0 10px 50px rgba(0,0,0,0.5);
}

.gallery-modal-close {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  line-height: 1;
}

.gallery-modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.gallery-modal-prev,
.gallery-modal-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.gallery-modal-prev:hover,
.gallery-modal-next:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.1);
}

.gallery-modal-prev {
  right: 20px;
}

.gallery-modal-next {
  left: 20px;
}

@media (max-width: 767px) {
  .gallery-item {
    width: 120px;
    height: 120px;
  }
  
  .gallery-modal-close,
  .gallery-modal-prev,
  .gallery-modal-next {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  
  .gallery-modal-close {
    top: 10px;
    left: 10px;
  }
  
  .gallery-modal-prev {
    right: 10px;
  }
  
  .gallery-modal-next {
    left: 10px;
  }
}