/* Make the body a flex container to push the footer to the bottom */
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh; /* Make sure the body takes the full height */
        background-color: #f8f9fa; /* Light background color for the body */
        font-size: 0,1rem !important;
    }

    .navbar {
        background-color: #253f8e; /* Navbar background color */
        padding-top: 15px; /* Increase the height of the navbar */
        padding-bottom: 15px; /* Increase the height of the navbar */
    }

    .navbar-brand img {
        height: 60px; /* Increase logo size */
        object-fit: contain;
    }

    .logo-center {
        display: block;
        margin: 30px auto;
        width: 150px; /* Adjust logo size */
    }

    footer {
        background-color: #253f8e; /* Footer with the same background color as navbar */
        color: white;
        padding: 20px 0;
        text-align: center;
        margin-top: auto; /* Push footer to the bottom */
    }

    .content {
        flex: 1; /* This will take the available space and push footer down */

        
    }

            /* Change navbar item text color to white */
    .navbar-nav .nav-link {
        color: white !important; /* Ensure the color is applied */
    }

    /* Optionally, change the color when the navbar item is active */
    .navbar-nav .nav-link.active {
        color: #a0c4ff !important; /* Light color for active item (e.g., white/gray) */
    }

    /* Change the color when hovered */
    .navbar-nav .nav-link:hover {
        color: #a0c4ff !important; /* Hover state (light color) */
    }   

    .prod {
        max-width: 60% !important;  /* Ensure the image size is constrained to 50% */
        width: 60% !important;  /* Set the image width explicitly to 50% */
        cursor: pointer;  /* Make the image look clickable */
    }
    
    .prod:hover {
        opacity: 0.8; /* Optional: Add a hover effect */
    }
    .product-features li {
        margin-bottom: 0.75rem; /* Adjust spacing as needed */
        font-size: 1rem;
    }
    @keyframes fadeInLeft {
        from {
          opacity: 0;
          transform: translateX(-30px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }
      
      @keyframes fadeInRight {
        from {
          opacity: 0;
          transform: translateX(30px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }
      
      .animate-fade-in-left {
        animation: fadeInLeft 1s ease forwards;
      }
      
      .animate-fade-in-right {
        animation: fadeInRight 1s ease forwards;
      }
      
      .fade-in {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease forwards;
    }
    
    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }