/* General Styles */
body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.7;
    color: #1a202c;
  }
  
  h1, h2, h3, h4 {
    font-weight: 800;
  }
  
  p {
    color: #4a5568;
    margin-bottom: 1rem;
  }
  
  /* Navbar */
  .navbar {
    @apply bg-white border-b border-gray-200 sticky top-0 z-50;
  }
  
  .nav-link {
    @apply font-semibold text-gray-700 transition duration-300;
  }
  
  .nav-link:hover {
    @apply text-royal-blue;
  }
  
  .btn {
    @apply transition-transform duration-300;
  }
  
  .btn:hover {
    @apply transform translate-y-[-2px] shadow-lg;
  }
  
  /* Hero Section */
  .hero {
    @apply bg-gradient-to-r from-royal-blue via-red-600 to-gray-100 text-white text-center py-16;
  }
  
  .hero h1 {
    @apply text-4xl md:text-6xl font-extrabold;
  }
  
  .hero p {
    @apply text-lg mt-4 text-gray-200;
  }
  
  .hero .btn {
    @apply px-6 py-3 rounded-full bg-red-600 text-white font-bold hover:bg-red-700;
  }
  
  /* About Us Section */
  #about {
    @apply py-16;
  }
  
  #about img {
    @apply rounded-lg shadow-lg;
  }
  
  /* Services Section */
  #services {
    @apply py-16 bg-white;
  }
  
  .card {
    @apply bg-gray-100 rounded-lg p-8 text-center transition-transform duration-300;
  }
  
  .card:hover {
    @apply transform translate-y-[-5px] shadow-xl;
  }
  
  .card img {
    @apply mb-4;
  }
  
  .card h3 {
    @apply text-lg font-extrabold text-gray-800 mb-2;
  }
  
  .card p {
    @apply text-gray-600;
  }
  
  /* Training Section */
  #training {
    @apply py-16 bg-gray-200;
  }
  
  #training .card {
    @apply bg-white;
  }
  
  /* Booking Section */
  #booking {
    @apply py-16 bg-white;
  }
  
  #booking .btn {
    @apply px-8 py-3 rounded-full;
  }
  
  /* Contact Section */
  #contact {
    @apply py-16 bg-gray-200;
  }
  
  .input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg mb-4;
  }
  
  .input:focus {
    @apply outline-none border-royal-blue shadow-outline;
  }
  
  /* Footer */
  footer {
    @apply text-center py-8 text-white bg-royal-blue;
  }
  
  footer p {
    @apply m-0;
  }
  
  footer .social-icons {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
  }
  
  footer .social-icons a {
    color: #ffffff;
    font-size: 1.2rem;
    transition: color 0.3s ease;
  }
  
  footer .social-icons a:hover {
    color: #e11d48;
  }
  
  /* Animations */
  .card:hover {
    animation: bounce 0.3s;
  }
  
  @keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }