* {
         box-sizing: border-box;
         margin: 0;
         padding: 0;
     }

     html,
     body {
         overflow-x: hidden;
         font-family: 'Arial', sans-serif;
         background-color: #01304a;
         color: #ffffff;
     }

     body {
         line-height: 1.6;
         background: url('../image/background.jpg') no-repeat center center fixed;
         background-size: cover;
     }

     .floating-section {
         display: flex;
         flex-direction: column;
         align-items: center;
         position: relative;
         background: rgba(0, 0, 0, 0.6);
     }

     .bubble {
         position: absolute;
         background: rgba(0, 255, 255, 0.2);
         border-radius: 50%;
         animation: rise 10s linear infinite;
     }

     .bubble:nth-child(1) {
         width: 20px;
         height: 20px;
         left: 10%;
         bottom: -50px;
         animation-delay: 0s;
     }

     .bubble:nth-child(2) {
         width: 25px;
         height: 25px;
         left: 50%;
         bottom: -70px;
         animation-delay: 2s;
     }

     .bubble:nth-child(3) {
         width: 15px;
         height: 15px;
         left: 80%;
         bottom: -30px;
         animation-delay: 4s;
     }

     @keyframes rise {
         0% {
             transform: translateY(0);
             opacity: 0.5;
         }

         100% {
             transform: translateY(-100vh);
             opacity: 0;
         }
     }

     .card-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: 1.5rem;
         margin-top: 2rem;
         z-index: 1;
     }

     .card {
         background: rgba(0, 255, 255, 0.07);
         border: 1px solid rgba(0, 255, 255, 0.2);
         border-radius: 1rem;
         padding: 1.5rem;
         text-align: left;
         box-shadow: 0 0 10px rgba(0, 255, 255, 0.1);
         transform: rotate(-2deg);
         transition: transform 0.3s ease;
     }

     .card:hover {
         transform: rotate(0deg) scale(1.02);
     }

     .card h3 {
         color: #00eaff;
         margin-bottom: 0.5rem;
     }

     .hero-new {
         text-align: center;
         padding: 1% 0%;
         background: rgba(0, 0, 0, 0.6);
         color: #00eaff;
     }

     .hero-new h1 {
         font-size: 3rem;
         margin-bottom: 1rem;
     }

     .hero-new p {
         max-width: 600px;
         margin: 0 auto 2rem;
     }

     .button-yellow {
         display: inline-block;
         padding: 0.75rem 1.5rem;
         background-color: #00eaff;
         color: #002b40;
         font-weight: bold;
         border-radius: 9999px;
         text-decoration: none;
         transition: background 0.3s ease;
     }

     .button-yellow:hover {
         background-color: #00c5dd;
     }

     footer {
         text-align: center;
         font-size: 0.9rem;
         color: #7ddfff;
         background: rgba(0, 0, 0, 0.8);
         padding: 2rem 1rem;
     }

     .banner-container {
         width: 100%;
         max-width: 800px;
         display: flex;
         justify-content: center;
         flex-wrap: wrap;
         gap: 1.5rem;
         margin: 1% 0%;
     }

     .banner-container img {
         width: 100%;
         border-radius: 1rem;
         box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
         transition: transform 0.3s ease;
     }

     .banner-container img:hover {
         transform: scale(1.05);
     }

     @media screen and (max-width: 1020px) {
         .banner-container {
         max-width: 600px;
     }

     .button-yellow {
         margin-bottom: 4%;
     }

     }