body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
            background-image: url('../images/background-image.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
        }
.background {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

        .card {
            background: rgba(255, 255, 255, 0.8);
            padding: 20px;
            border-radius: 10px;
            max-width: 600px;
            width: 100%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

        .card h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        .info-container {
            display: flex;
            gap: 20px;
        }

        .left-column, .right-column {
            flex: 1;
            flex-wrap: wrap;
            gap: 20px;
        }
         
        }
              .left-column,  {
            order: 1;
            width: 40%;
        }
              .right-column {
            order: 2;
            width: 60%;
        }

        .left-column img {
            max-width: 100%;
            width: 250px;
            height: 200px;
            border-radius: 10px;
        }

        .left-column button {
            width: 250px;
            max-width: 100%;
            padding: 10px;
            margin-top: -40px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 20px;
        }

        .left-column button:hover {
            background-color: #0056b3;
        }

        .right-column .info-item {
            margin-bottom: 10px;
            width: 350px;
          font-size: 20px;
          justify-content: center;
        }

        .right-column .info-item i {
            margin-right: 10px;
            color: #007BFF;
            text-align: left;
          
        }

        @media (max-width: 480px) {
          .card {
            height: 100%;
          }
            .info-container {
                flex-direction: column-reverse;

              
            }

            .left-column, .right-column {
                width: 100%;
            }
          .left-column img, .left-column button {
            width: 100%;
            height: auto;
          }
          .info-item{
            width: 100%;
            text-align: left;
          }
        }