.how-it-works {
    background-color: #f5f5f5; /* Example background color */
    padding: 40px 0;
}

    .how-it-works h2 {
        margin-bottom: 10px;
    }

    .how-it-works p {
        color: #666; /* Text color */
        margin-bottom: 30px;
    }

    .how-it-works .step {
        text-align: center;
        margin-bottom: 20px;
    }

    .how-it-works .icon {
        /* Add styles for icons here */
    }

    .how-it-works .video-container {
        margin: 30px 0;
        text-align: center;
    }

        .how-it-works .video-container video {
            max-width: 100%;
            height: auto;
        }

    .how-it-works button.btn {
        margin-top: 20px;
    }

    /*.how-it-works .learn-more {
        display: inline-block;
        margin-top: 20px;
        color: #007bff;
        text-decoration: none;
    }*/

/*@media (max-width: 768px) {
    .how-it-works .step {
        margin-bottom: 40px;
    }
}*/

.how-it-works {
    background-color: #f5f5f5; /* Assuming you want the same background color */
    padding: 40px 0;
    text-align: center; /* Center-align the content */
}

    .how-it-works .btn-primary {
        border-color: #4caf50; /* Match border color to background */
        color: #ffffff; /* White text color */
        font-size: 18px; /* Adjust font-size as necessary */
        padding: 15px 30px; /* Vertical and horizontal padding */
        border-radius: 50px; /* Rounded edges */
        box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2); /* Shadow effect */
        transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
    }

        .how-it-works .btn-primary:hover,
        .how-it-works .btn-primary:focus {
            background-color: #43a047; /* Slightly darker green for the hover state */
            box-shadow: 0 6px 12px 0 rgba(0,0,0,0.2); /* Larger shadow on hover for 'lifting' effect */
        }

    .how-it-works .learn-more {
        color: #0056b3; /* The color of the "Learn more" link in the image */
        text-decoration: none; /* No underline */
        font-size: 18px; /* Adjust font-size as necessary */
        margin-top: 20px; /* Space from the button above */
        display: block; /* Make it a block to have it on a new line */
    }

.learn-more {
    display: inline-block; /* This keeps the link block-level for margin utilities to work */
    text-decoration: none; /* Removes the underline from the link */
    /* Additional styles as needed */
}

@media (max-width: 768px) {
    .learn-more {
        display: block; /* Full width for smaller devices */
        margin-top: 15px; /* Adjust as needed for spacing */
    }
}


/* Responsive adjustments */
/*@media (max-width: 768px) {
    .how-it-works .btn {
        display: block;*/ /* Full width */
        /*margin: 10px auto;*/ /* Center the button with automatic margins */
    /*}

    .how-it-works .learn-more {
        margin-top: 10px;
    }
}*/

