@keyframes bounceUp {
  0%   { transform: translateY(50px); opacity: 0; }
  60%  { transform: translateY(-10px); opacity: 1; }
  80%  { transform: translateY(5px); }
  100% { transform: translateY(0); opacity: 1; } /* ensure opacity stays 1 */
}
@keyframes float {
  0%   {transform: translateY(0) rotate(-5deg);}
  50%  {transform: translateY(-25px) rotate(10deg);}
  100% {transform: translateY(0) rotate(-5deg);}
}
@keyframes heroFade {
  0%   { transform: translateY(0) scale(1); opacity: 0.8; }
  50%  { transform: translateY(-10px) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 0.9; }
}
@media (max-width: 991px) {
  .hero h1 { font-size: 3rem; }
  .hero p  { font-size: 1.2rem; }
    .navbar-collapse {
    background-color: #ffffffd9 !important;  
    z-index: 333350;                      
    padding: 15px 20px;    
    margin-inline: -10px;             
    box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
  .navbar-collapse .nav-link {
    color: #333 !important;
    font-weight: 600;
  }
}
@media (max-width: 768px) {
  .timeline-grid {
    grid-template-columns: 1fr; 
  }
}
@media (max-width: 575px) {
  .app-logo {
    height: 120px;
    width: 120px;
  }
  .hero { min-height: 70vh; }
  .hero h1 { font-size: 2.2rem; letter-spacing: 1px; }
  .hero p  { font-size: 1rem; }
  .timeline-box {
    min-height: auto;
    padding: 25px 15px;
  }
  .timeline-img { width: 80px;height: 80px;}
  .logo img {height: 340px; width: 340px;}
}
@keyframes underline {
  to { width: 60px; }
}
@keyframes fadeUp  { to {opacity:1; transform:translateY(0);} }
@keyframes fadeLeft{ to {opacity:1; transform:translateX(0);} }
@keyframes fadeRight{ to {opacity:1; transform:translateX(0);} }
@keyframes scaleIn { to {opacity:1; transform:scale(1);} }
@keyframes rise {to{opacity:1; transform:translateY(0)}}
@keyframes riseIn  { to {opacity:1; transform:translateY(0);} }
@keyframes floatUp {
  0% {transform: translateY(0) scale(1); opacity: 0;}
  25% {opacity: .6;}
  50% {opacity: .8;}
  100% {transform: translateY(-120vh) scale(1.2); opacity: 0;}
}
@media (max-width: 767px) {
  .py-5 > .container > .row.align-items-center {
    flex-direction: column-reverse;
    text-align: center; 
  }
  .app-image-wrapper {
    max-width: 80%;
    margin: 0 auto 20px auto;
  }
  .py-5 > .container > .row.align-items-center h2.section-title {
    margin-top: 15px;
  }
}