/* General Styling */
body {
    background-color: #121212; /* Dark background for overall page */
    color: #f5f5f5; /* Softer white text for readability */
    margin: 0; /* Remove default margin */
    font-family: Arial, sans-serif; /* Set font family */
}

.s-header, .s-footer, .s-pricing {
    background-color: #121212; /* Consistent dark background for header, footer, and pricing sections */
    padding: 20px; /* Padding for spacing */
}

.s-header__logo img, .footer__logo img {
    filter: brightness(0) invert(1); /* Invert logo colors for dark background */
}

.s-header__nav a, .footer__nav a {
    color: #f5f5f5; /* Softer white for navigation links */
    text-decoration: none; /* Remove underline */
    padding: 10px 15px; /* Padding for links */
    display: inline-block; /* Ensure links are block elements */
}

.s-header__nav a:hover, .footer__nav a:hover {
    background-color: #333333; /* Highlight background on hover */
    border-radius: 5px; /* Slightly rounded corners */
}

.btn, .item-card {
    background-color: #43ffc0; /* Contrasting color for buttons and cards */
    color: #ffffff; /* White text */
    text-decoration: none; /* Remove underline */
    padding: 12px 24px; /* Increased padding for buttons (padding: 12px top/bottom, 24px left/right) */
    border-radius: 5px; /* Rounded corners */
    border: none; /* Remove border */
    cursor: pointer; /* Pointer cursor on hover */
    display: inline-block; /* Ensure buttons are inline-block */
    font-size: 1.2rem; /* Larger font size */
    text-align: center; /* Center text */
    min-width: 120px; /* Set a minimum width for consistency */
}


.btn:hover, .item-card:hover {
    background-color: #063111;; /* Darken color on hover */
}

.s-footer__subscribe input, .s-footer__subscribe button {
    background-color: #063111; /* Consistent color for form elements */
    color: #ffffff; /* White text */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    padding: 10px; /* Padding for form elements */
    margin: 5px 0; /* Margin for spacing */
}

/* Pricing Section */
.s-pricing__content {
    padding: 40px 20px; /* Padding for pricing content */
    text-align: center; /* Center-align text */
}

.s-pricing__cards {
    display: flex; /* Flexbox for layout */
    justify-content: center; /* Center items */
    flex-wrap: wrap; /* Wrap items on smaller screens */
    gap: 20px; /* Gap between cards */
    padding: 20px 0; /* Padding inside container */
}

.item-card {
    display: flex; /* Flexbox for card content */
    flex-direction: column; /* Column layout */
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    border-radius: 15px; /* Rounded corners */
    width: 300px; /* Fixed width */
    height: 200px; /* Fixed height */
    margin: 20px; /* Margin around cards */
    color: #ffffff; /* White text */
    font-size: 1.4rem; /* Enlarged font size */
    font-weight: bold; /* Bold text */
    text-align: center; /* Center text */
    text-decoration: none; /* Remove underline */
    background-color: #063111; /* Card background color */
    transition: background-color 0.3s, transform 0.3s; /* Smooth transition */
    cursor: pointer; /* Pointer cursor on hover */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2); /* Soft shadow */
}

.item-card:hover {
    background-color: #063111; /* Darker background on hover */
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3); /* Deeper shadow on hover */
}

.item-card__title {
    color: #ffffff; /* White title text */
    margin: 10px 0; /* Margin for title */
    font-size: 1.5rem; /* Larger font size */
    font-weight: bold; /* Bold font for title */
}

/* Responsive Design */
@media (max-width: 768px) {
    .s-pricing__cards {
        flex-direction: column; /* Stack cards vertically */
        align-items: center; /* Center cards horizontally */
    }

    .item-card {
        margin: 10px 0; /* Reduce margin for stacked layout */
        padding: 15px; /* Adjust padding for mobile */
    }
}

@media (max-width: 480px) {
    .s-pricing__cards {
        gap: 15px; /* Set clear gap between cards */
    }

    .btn, .s-footer__subscribe input, .s-footer__subscribe button {
        width: 100%; /* Full width for small screens */
        box-sizing: border-box; /* Include padding in width */
        margin: 10px 0; /* Margin for spacing */
    }

    .item-card {
        /* Removed responsive adjustments for width and height */
        font-size: 1.3rem; /* Adjust font size for mobile */
        padding: 10px; /* Adjust padding for small screens */
    }

    .item-card__title {
        font-size: 1.4rem; /* Adjust font size for titles */
    }
}