* {
         box-sizing: border-box;
         margin: 0;
         padding: 0;
         }
         body {
         font-family: Arial, sans-serif;
         line-height: 1.6;
         background-color: #f4f4f4;
         min-height: 100vh;
         display: flex;
         flex-direction: column;
         }
         /* Style for logo */
         .logo {
         width: 80px;
         margin-right: 15px;
         }
         /* Adjust the header-container to align items properly */
         .header-container {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 10px;
         }
         .login-button {
         background-color: #1fecf0;
         color: #003366;
         padding: 10px 15px;
         text-decoration: none;
         border-radius: 5px;
         transition: background-color 0.3s;
         }
         .login-button:hover {
         background-color: #ffd700;
         }
         .banner {
         background-image: url('images/WhatsApp Image 2024-10-19 at 14.19.34_432edd1e.jpg');
         background-size: cover; /* Keeps the cover style */
         background-position: center; /* Center the image */
         background-repeat: no-repeat; /* Prevent image repetition */
         text-align: center;
         padding: 50px 20px; /* Adjust padding if needed */
         position: relative;
         color: #fff;
         min-height: 500px; /* Increased min-height for larger screens */
         flex-grow: 1;
         display: flex;
         justify-content: center;
         align-items: center;
         }
         /* Mobile View */
         @media (max-width: 768px) {
         .banner {
         min-height: 200px; /* Height for smaller screens */
         }
         .banner-content {
         padding: 20px; /* Optional: Add padding for content */
         }
         }
         /* Card Section */
         .products {
         padding: 50px 20px;
         background-color: #fff;
         }
         .products .row {
         margin-bottom: 30px;
         }
         .card {
         background-color: #fff;
         border-radius: 10px;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         overflow: hidden;
         transition: transform 0.3s ease;
         }
         .card:hover {
         transform: translateY(-5px);
         }
         .card img {
         width: 100%;
         height: auto;
         border-top-left-radius: 10px;
         border-bottom-left-radius: 10px;
         }
         .card-body {
         padding: 20px;
         }
         .card h5 {
         font-size: 24px;
         margin-bottom: 15px;
         color: #003366;
         }
         .card p {
         font-size: 16px;
         color: #666;
         }
         footer {
         background-color: #003366;
         color: white;
         text-align: center;
         padding: 15px 0;
         width: 100%;
         }
         footer p {
         margin: 0;
         }
         /* Mobile View */
         @media (max-width: 768px) {
         .header-container {
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
         width: 100%;
         }
         .login-button {
         margin-left: auto;
         }
         .banner h2 {
         font-size: 24px;
         }
         .info {
         margin: 10px;
         }
         }