/**
 * GeoAdvances 2026 - Main Stylesheet
 * Green color scheme (#059669 primary)
 */

/* ==========================================================================
   Font Loading
   ========================================================================== */
@font-face {
  font-family: "ArabicFont";
  src: url("../fonts/arabic-font.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "EnglishFont";
  src: url("../fonts/english-font.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* ==========================================================================
   Font Classes
   ========================================================================== */
.font-arabic {
  font-family: "ArabicFont", sans-serif !important;
}

.font-english {
  font-family: "EnglishFont", sans-serif !important;
}

/* Direct Font Application - High Specificity */
html,
body,
body * {
  font-family: "ArabicFont", sans-serif !important;
}

/* Override for specific font classes */
.font-arabic,
.font-arabic * {
  font-family: "ArabicFont", sans-serif !important;
}

.font-english,
.font-english * {
  font-family: "EnglishFont", sans-serif !important;
}

/* Ensure all major elements get Arabic font */
div,
span,
p,
a,
button,
input,
textarea,
select,
h1,
h2,
h3,
h4,
h5,
h6,
li,
td,
th,
label {
  font-family: "ArabicFont", sans-serif !important;
}

/* ==========================================================================
   Stats Glow Effects - Updated for Green
   ========================================================================== */
.glow-ocean {
  text-shadow: 0 0 20px rgba(5, 150, 105, 0.4),
    0 0 40px rgba(5, 150, 105, 0.2);
}

.glow-berry {
  text-shadow: 0 0 20px rgba(16, 185, 129, 0.4),
    0 0 40px rgba(16, 185, 129, 0.2);
}

.glow-depth {
  text-shadow: 0 0 20px rgba(4, 120, 87, 0.4), 0 0 40px rgba(4, 120, 87, 0.2);
}

.group:hover .glow-ocean {
  text-shadow: 0 0 30px rgba(5, 150, 105, 0.6),
    0 0 60px rgba(5, 150, 105, 0.3), 0 0 80px rgba(5, 150, 105, 0.2);
}

.group:hover .glow-berry {
  text-shadow: 0 0 30px rgba(16, 185, 129, 0.6),
    0 0 60px rgba(16, 185, 129, 0.3), 0 0 80px rgba(16, 185, 129, 0.2);
}

.group:hover .glow-depth {
  text-shadow: 0 0 30px rgba(4, 120, 87, 0.6), 0 0 60px rgba(4, 120, 87, 0.3),
    0 0 80px rgba(4, 120, 87, 0.2);
}

/* ==========================================================================
   Hero Section - Updated for Green
   ========================================================================== */
.hero-geo {
  background-color: #064E3B;
  position: relative;
}

/* Diagonal Clip Path */
.diagonal-split {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

/* Glass Countdown */
.countdown-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   Navigation Styles - Updated for Green
   ========================================================================== */
.nav-scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.nav-scrolled .nav-text-main {
  color: #064E3B;
}

.nav-scrolled .nav-text-sub {
  color: #059669;
}

.nav-scrolled .nav-link {
  color: #555;
}

.nav-scrolled .nav-btn {
  background-color: #059669;
  color: white;
}

.nav-transparent {
  background: transparent;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.nav-transparent .nav-text-main {
  color: white;
}

.nav-transparent .nav-text-sub {
  color: #6EE7B7;
}

.nav-transparent .nav-link {
  color: rgba(255, 255, 255, 0.8);
}

.nav-transparent .nav-btn {
  background-color: white;
  color: #064E3B;
}

/* Mobile Menu Animation */
#mobile-menu {
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  pointer-events: none;
}

#mobile-menu.menu-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   Program Section - Day Tabs - Updated for Green
   ========================================================================== */
.day-tab {
  background: transparent;
  color: #64748b;
  transition: all 0.3s ease;
}

.day-tab.active {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(5, 150, 105, 0.3);
}

.day-tab:not(.active):hover {
  background: #f1f5f9;
  color: #1e293b;
}

/* ==========================================================================
   Program Section - Session Cards Animation
   ========================================================================== */
.session-card {
  animation: fadeInUp 0.5s ease-out forwards;
  opacity: 0;
}

.session-card:nth-child(1) {
  animation-delay: 0.05s;
}

.session-card:nth-child(2) {
  animation-delay: 0.1s;
}

.session-card:nth-child(3) {
  animation-delay: 0.15s;
}

.session-card:nth-child(4) {
  animation-delay: 0.2s;
}

.session-card:nth-child(5) {
  animation-delay: 0.25s;
}

.session-card:nth-child(6) {
  animation-delay: 0.3s;
}

.session-card:nth-child(7) {
  animation-delay: 0.35s;
}

.session-card:nth-child(8) {
  animation-delay: 0.4s;
}

.session-card:nth-child(9) {
  animation-delay: 0.45s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.schedule-content.hidden .session-card {
  animation: none;
  opacity: 0;
}