/* ============================================================
   Tech A Leap — Animations & Responsive Styles
   ============================================================ */

/* ─── ANIMATIONS ─── */
@-webkit-keyframes fadeUp {
  from { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
  to   { opacity: 1; -webkit-transform: translateY(0);    transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
  -webkit-animation: fadeUp 0.7s ease forwards;
          animation: fadeUp 0.7s ease forwards;
}
.delay-1 { -webkit-animation-delay: 0.1s;  animation-delay: 0.1s;  opacity: 0; }
.delay-2 { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; opacity: 0; }
.delay-3 { -webkit-animation-delay: 0.4s;  animation-delay: 0.4s;  opacity: 0; }
.delay-4 { -webkit-animation-delay: 0.55s; animation-delay: 0.55s; opacity: 0; }
.delay-5 { -webkit-animation-delay: 0.4s;  animation-delay: 1s;  opacity: 0; }
.delay-6 { -webkit-animation-delay: 0.55s; animation-delay: 1.15s; opacity: 0; }

/* ─── RESPONSIVE OVERRIDES ─── */
@media (max-width: 991px) {
/*  .navbar-collapse {
    background: rgba(0,0,0,0.05);
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 10px;
    padding: 16px 0 8px;
    border-radius: 0 0 12px 12px;
  }
  .navbar-nav .nav-link { padding: 10px 20px !important; }*/
  .btn-start-nav { margin: 20px 15px; display: inline-block; background:var(--text-primary); padding:15px 30px; font-size:18px; }
}

@media (max-width: 767px) {
 /* .hero-title { font-size: 2.4rem; }
  .fossil-title { font-size: 2rem; }*/
  .portfolio-grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  .portfolio-item.large,
  .portfolio-item.top-right,
  .portfolio-item.bottom-left,
  .portfolio-item.bottom-right {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: auto;
    grid-row: auto;
    -webkit-aspect-ratio: 4/3;
            aspect-ratio: 4/3;
  }
  .timeline-table th,
  .timeline-table td {
    padding: 14px 14px;
    font-size: 0.82rem;
  }
  .footer-bottom {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .hero-content { padding: 60px 0 80px; }
  .cta-title { font-size: 1.8rem; }
  .btn-hero-primary,
  .btn-hero-secondary {
    width: 100%;
    text-align: center;
  }
}