/* Basic Reset and Typography */
html, body {
    margin: 0;
    padding: 0;
    font-family: 'Sora', sans-serif;
}
  
  /* Navigation */
  .navbar {
    background: transparent;
    padding: 1rem 0;
  }
  .navbar .logo {
    height: 50px;
  }
  
  /* Hero Section with Animated Gradient Background */
.hero-section {
    height: 100vh; /* Full viewport height */
    background: linear-gradient(-45deg, #003558, #003558, #003558, #003558);
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;
}
  
  /* Keyframes for Gradient Animation */
  @keyframes gradientAnimation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
  /* Headings and Text Styling */
  .hero-section h4 {
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .hero-section .display-5 {
    line-height: 1.2;
  }
  
  /* Mobile Images */
  .mobile-img {
    max-width: 200px; /* Adjust this size as needed */
    margin-bottom: 10px;
  }
  
  /* QR Code Styling */
  .qr-code img {
    max-width: 100px; /* Adjust size as needed */
  }
  
  /* Store Buttons */
  .store-btn {
    width: 140px;
    height: auto;
  }

.btn-warning {
    color: white !important;
    background-color: #003558 !important;
}