/* Hero Section */
.hero {
    position: relative; /* Required for the ::before pseudo-element */
    background-image: url('../images/hero.webp'); /* Path to your hero image */
    background-size: cover; /* Ensure the image covers the entire section */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    height: 480px; /* Set the maximum height */
    display: flex; /* Use Flexbox for layout */
    align-items: center; /* Vertically align the content */
    justify-content: center; /* Center the content horizontally */
    padding: 0 40px; /* Add padding for spacing */
    color: #fff; /* Text color */
}

.hero::before {
    content: ''; /* Add an overlay */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
    z-index: 1; /* Place it behind the content */
}

.hero-content {
    display: flex; /* Use Flexbox for layout */
    justify-content: space-between; /* Space between text and card */
    align-items: center; /* Vertically align the content */
    width: 100%; /* Full width */
    max-width: 1200px; /* Limit the width of the content */
    position: relative; /* Ensure content is above the overlay */
    z-index: 2; /* Place content above the overlay */
}

.hero-text {
    max-width: 50%; /* Limit the width of the text */
    text-align: left; /* Align text to the left */
    margin-right: 20px; /* Add spacing between text and card */
}

.hero-text h1 {
    font-size: 2.2rem; /* Default size for large screens */
    margin-bottom: 1rem; /* Add spacing below the heading */
    color: #fff; /* Ensure the text is white */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Add shadow for better readability */
}

.hero-text p {
    font-size: 1.5rem; /* Larger font size for hero text */
    margin-bottom: 1.5rem; /* Add spacing below the paragraph */
    color: #fff; /* Ensure the text is white */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Add shadow for better readability */
}

/* Button Styling */
.button {
    display: inline-block;
    background-color: #3a6ea5;
    color: #fff;
    padding: 10px 20px;
    font-size: 1rem;
    text-decoration: none; /* Remove underline */
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #2a5a8a;
    color: #fff;
    text-decoration: none; /* Remove underline */
}

/* Hero Card */
.hero-card {
    max-width: 40%; /* Limit the width of the card */
    background: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
    padding: 20px; /* Add padding inside the card */
    border-radius: 10px; /* Add rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    color: #333; /* Text color inside the card */
    text-align: left; /* Align text to the left */
}

.hero-card h2 {
    font-size: 1.5rem; /* Adjust font size for card headings */
    margin-bottom: 1rem; /* Add spacing below the heading */
}

.hero-card h3 {
    font-size: 1.5rem; /* Adjust font size for card headings */
    margin-bottom: 1rem; /* Add spacing below the heading */
    color: #3a6ea5; /* Heading color */
}

.hero-card ul {
    list-style: none; /* Remove default bullets */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}

.hero-card ul li {
    margin-bottom: 10px; /* Add spacing between list items */
    font-size: 1rem; /* Adjust font size */
    color: #333; /* Text color */
    position: relative; /* For custom bullet styling */
}

.hero-card ul li::before {
    content: '\2713'; /* Unicode for a checkmark */
    color: green; /* Set the checkmark color to green */
    font-weight: bold; /* Make the checkmark bold */
    margin-right: 10px; /* Add spacing between the checkmark and text */
    position: absolute; /* Position the checkmark */
    left: 0; /* Align the checkmark to the left */
    top: 0; /* Align the checkmark vertically */
    transform: translateY(2px); /* Adjust vertical alignment */
}

.hero-card ul li {
    padding-left: 25px; /* Add padding to align text with the checkmark */
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-content {
        flex-direction: column; /* Stack text and card vertically */
        text-align: center; /* Center-align text and card */
    }

    .hero-text {
        max-width: 100%; /* Allow text to take full width */
        margin-bottom: 20px; /* Add spacing below the text */
    }

    .hero-card {
        max-width: 100%; /* Allow the card to take full width */
    }
}
/* Medium screens (tablets) */
@media (max-width: 992px) {
    .hero-text h1 {
        font-size: 2.8rem; /* Smaller font size for medium screens */
    }
}

/* Small screens (mobile) */
@media (max-width: 770px) {
    .hero-card {
        display: none; /* Hide the hero card on small screens */
    }

    .hero-text {
        flex: 1 1 100%; /* Make the hero text take the full width */
        text-align: center; /* Optional: Center-align the text */
    }
}