/* ====================================================
   COMPONENTS.CSS — POLISHED + OPTIMIZED VERSION
   Clean, consistent, premium UI system
==================================================== */


/* ====================================================
   1. NAVIGATION
==================================================== */
.nav-link {
  position: relative;
  color: #222;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #FF6B00;
}

/* Webflow-style underline */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: #FF6B00;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* ----- MOBILE NAVIGATION ----- */
.mobile-nav {
  transform: translateX(100%);
  transition: 0.3s ease;
}

.mobile-nav.active {
  transform: translateX(0);
}

.mobile-nav-link {
  color: #222;
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

.mobile-nav-link:hover {
  color: #FF6B00;
}



/* ====================================================
   2. HERO SECTION
==================================================== */
.highlight {
  position: relative;
}

.highlight::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: rgba(255,140,66,0.3);
  z-index: -1;
}



/* ====================================================
   3. SERVICES (Premium Look)
==================================================== */
.service-card {
  background: white;
  padding: 36px;
  border-radius: 22px;
  border: 1px solid #eee;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
  transition: all 0.35s ease;
}

.service-card:hover {
  transform: translateY(-14px) scale(1.03);
  box-shadow: 0 25px 60px rgba(0,0,0,0.15);
  border-color: #ddd;
}

.service-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.service-icon.blue { background: linear-gradient(90deg, #3b82f6, #1e40af); }
.service-icon.purple { background: linear-gradient(90deg, #8b5cf6, #6d28d9); }
.service-icon.emerald { background: linear-gradient(90deg, #10b981, #047857); }

.service-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 12px;
}



/* ====================================================
   6. FOUNDER CARD
==================================================== */
.founder-card {
  display: flex;
  background: white;
  border-radius: 26px;
  overflow: hidden;
  transition: all 0.35s ease;
  box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}

.founder-card:hover {
  transform: translateY(-14px) scale(1.02);
  box-shadow: 0 28px 70px rgba(0,0,0,0.18);
}

.profile-frame {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.status-indicator {
  width: 18px;
  height: 18px;
  background: #22c55e;
  border: 4px solid white;
  border-radius: 50%;
  position: absolute;
  right: 0;
  bottom: 0;
}

.founder-name {
  font-size: 2.5rem;
  font-weight: 700;
}

.social-icon {
  width: 48px;
  height: 48px;
  background: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  transition: 0.3s ease;
}

.social-icon:hover {
  transform: scale(1.1);
  color: black;
}



/* ====================================================
   7. CONTACT
==================================================== */
.contact-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 22px;
}

.contact-icon {
  width: 50px;
  height: 50px;
  background: rgba(94,235,17,0.15);
  color: var(--primary);
  border-radius: 50%;
  margin-right: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-title { font-weight: 700; }
.contact-link { color: var(--accent); }
.contact-phone {
  color: #ea580c;
  font-weight: 700;
}






/* ====================================================
   9. NEW SECTION — FLOATING CARDS
==================================================== */
.hero-card-1 { animation: floatCard1 7s ease-in-out infinite; }
.hero-card-2 { animation: floatCard2 6.5s ease-in-out infinite; }
.hero-card-3 { animation: floatCard3 6s ease-in-out infinite; }

.hero-card:hover {
  transform: translateY(-25px) scale(1.05) !important;
  transition: all 0.4s ease !important;
  box-shadow: 0 28px 60px rgba(0,0,0,0.2) !important;
}

@keyframes floatCard1 {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-20px) rotate(1deg); }
}

@keyframes floatCard2 {
  0%, 100% { transform: translateY(-10px) rotate(2deg); }
  50% { transform: translateY(6px) rotate(-1deg); }
}

@keyframes floatCard3 {
  0%, 100% { transform: translateY(8px) rotate(-1deg); }
  50% { transform: translateY(-15px) rotate(2deg); }
}

.highlight-orange {
  color: #f97316 !important;
}
/* ============================================
   FIX: Header should NOT cover progress bar
============================================ */
#header {
  background: transparent !important;
  z-index: 200 !important; /* Below progress bar */
}

/* ============================================
   PROGRESS BAR (Always Above Header)
============================================ */
.progress-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 4px !important;
  z-index: 999999999 !important;
  pointer-events: none !important;
}

.progress-bar, #myBar {
  height: 100%;
  background: linear-gradient(to right, var(--secondary), var(--accent));
  width: 0%;
  z-index: 999999999 !important;
  position: relative;
}




/* ====================================================
   HEADER FIX (Below Progress Bar)
==================================================== */
#header {
  z-index: 100 !important;
  transition: all 0.3s ease;
}

.header-active {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}

.header-active .py-4 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
/* FINAL FIX: FORCE PROGRESS BAR ABOVE EVERYTHING */
.progress-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 4px !important;
  z-index: 999999999 !important; /* TOP OF ALL LAYERS */
  pointer-events: none !important;
}

#myBar {
  z-index: 999999999 !important;
  position: relative;
}
/* FIX: Make header solid glass when scrolling */
.header-active {
    background: rgba(255,255,255,0.95) !important;  /* More solid */
    backdrop-filter: blur(18px) !important;         /* Strong blur */
    -webkit-backdrop-filter: blur(18px) !important; /* Safari fix */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
header.header-active div.py-4 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

header.header-active div.lg\:py-5 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}