/* === Two-Tier Navigation: Lower Tier (was collapsed nav) === */
#collapsed-nav {
  /* Always visible, no animation */
  transform: translateY(0) !important;
  transition: none !important;
}

nav {
  transition: transform 0.3s ease-in-out;
}

/* Hide collapsed nav on mobile */
@media (max-width: 768px) {
  #collapsed-nav {
    display: none !important;
  }
}

/* === Hero Section === */
.hero-gradient {
  background: linear-gradient(
      to right,
      rgba(98, 100, 106, 0.9),
      rgba(20, 49, 163, 0.9)
    ),
    url("https://images.unsplash.com/photo-1554224155-6726b3ff858f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80");
  background-size: cover;
  background-position: center;
}

/* === Service Cards Hover Effects === */
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* === Fade-in Animation === */
.fade-in {
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* === Background Pattern === */
.finance-pattern {
  background-image: url(" https://www.transparenttextures.com/patterns/inspiration-geometry.png ");
  background-color: #0b0b0c;
}

/* === About Cards === */
.about-card {
  transition: all 0.3s ease;
}

.about-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* === Feature Icons === */
.feature-icon {
  background: linear-gradient(135deg, #08447f, #59626a);
}

/* === Hover Glow Effect === */
.glow-on-hover:hover {
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}

/* === Gradient Text === */
.gradient-text {
  background: linear-gradient(90deg, #1d4ed8, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* === Expandable Content (Service Cards) === */
.expandable-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.expandable-content.expanded {
  max-height: 2000px;
}

/* === Learn More Button === */
.learn-more-btn {
  transition: all 0.3s ease;
}

.learn-more-btn:hover {
  transform: translateY(-2px);
}

/* === Icon Rotation for Expandable Content === */
.rotate-180 {
  transform: rotate(180deg);
}

/* === Custom Font for Logo Text === */
.script-bold {
  font-family: "Brush Script MT", cursive;
  font-weight: bold;
  font-style: italic;
}

/* === Pulse Glow Animation for Cards === */
@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(147, 197, 253, 0.7);
  }
  50% {
    box-shadow: 0 0 20px 10px rgba(147, 197, 253, 0);
  }
}

.animate-pulse {
  animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* === Logo Container === */
.logo-container {
  background: linear-gradient(135deg, #040404, #0c0c0c);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.logo-container img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* === Grey Gradient Background === */
.grey-gradient {
  background: linear-gradient(to bottom, #f3f4f6, #e5e7eb);
}

/* === Transparent Background for Container === */
.container,
.container-fluid {
  background-color: transparent !important;
}

/* === Optional: Improve Expandable Card Layouts === */
.service-card {
  position: relative;
  z-index: 1;
}

.service-card .expandable-content {
  position: relative;
  z-index: 0;
}

/* === Optional: Fix for Safari and Older Browsers === */
@media (prefers-reduced-motion: no-preference) {
  .expandable-content {
    scroll-behavior: smooth;
  }
}

/* === MOBILE NAVIGATION === */

/* Hide lower tier nav on mobile */
@media (max-width: 768px) {
  #collapsed-nav {
    display: none !important;
  }

  .logo-container {
    margin-right: 0.5rem;
  }

  #mobile-menu-button {
    display: block;
  }
}

/* .typing-dots span {
  animation: typingDots 1.4s infinite;
}

@keyframes typingDots {
  0% {
    content: ".";
  }
  33% {
    content: "..";
  }
  66% {
    content: "...";
  }
  100% {
    content: ".";
  }
} */
.typing-dots::after {
  content: "";
  animation: typingDots 1.4s infinite;
}

@keyframes typingDots {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
  100% {
    content: "";
  }
}