/* Hero section styles */
.hero-section {
    padding: 100px 20px; /* Reduced padding */
    background-color: #ffffff;
    color: #000000;
    text-align: center;
    position: relative;
}

.hero-section h1 {
    margin-top: 30px; /* Add space before the main title */
    color: #000000;
    font-weight: 500;
    font-size: 50px;
}

.hero-section .btn-dark {
    background-color: #000000;
    border-color: #000000;
}

.hero-section .btn-dark:hover {
    background-color: #333333;
    border-color: #333333;
}

/* Product Features Section Styles */
.product-features-section {
    padding: 60px 0;
    background-color: #f8f9fa;
}

.product-features-section .feature-item {
    transition: transform 0.3s, box-shadow 0.3s;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: 100%;
}

.product-features-section .feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.product-features-section .feature-icon {
    color: #000000; /* Black color */
    font-size: 30px; /* Consistent size with images */
    margin-bottom: 15px; /* Same spacing as before */
}

.product-features-section .feature-title {
    font-size: 1.25rem;
    font-weight: 500;
    color: #000000;
    margin-bottom: 10px;
}

.product-features-section .feature-description {
    color: #6c757d;
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 0;
}

/* Features and Statistics sections */
.features-section,
.statistics-section {
    padding: 40px 0; /* Reduced padding */
}

.features-section .row,
.statistics-section .row {
    display: flex; /* Enable flexbox */
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
}

.feature-card,
.stat-card {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    border: 1px solid #e0e0e0; /* Lighter grey border */
    transition: transform 0.2s;
    padding: 20px; /* Padding for content */
    text-align: left; /* Ensure left alignment for text */
    display: flex; /* Enable flexbox */
    flex-direction: column; /* Arrange children vertically */
    flex-grow: 1; /* Allow the card to grow to fill available space */
    flex-basis: 0; /* Equally distribute the card size */
    color: #6c757d; /* Card text color lighter grey */
            height: 100%;

}

.feature-card:hover,
.stat-card:hover {
    transform: translateY(-5px); /* Slight lift on hover */
}

/* Card Titles */
.features-section .feature-card h5,
.statistics-section .stat-card h5,
.global-distribution-section .card h5,
.pricing-section .pricing-card h5,
.additional-section h5 {
    color: #000000; /* Black title for all card titles */
    margin: 0; /* Remove top margin for better alignment */
    font-weight: 500;
    display: flex; /* Use flex to align icon and title inline */
    align-items: center; /* Center the icon and text vertically */
}

.features-section .fa,
.statistics-section .fa {
    margin-right: 10px; /* Space between icon and title */
    color: #000000; /* Black and white icons */
    transition: color 0.3s;
    font-size: 1.25rem; /* Slightly smaller icon size */
}

.features-section .fa:hover,
.statistics-section .fa:hover {
    color: #333333;
}

/* Section headers */
.section-header {
    margin-top: 20px; /* Reduced top margin */
    margin-bottom: 20px; /* Reduced bottom margin */
    text-align: center; /* Center align */
    font-size: 1.5rem; /* Adjust the font size as needed */
    font-weight: 600; /* Make the header bold */
    border: none; /* Remove any border to prevent underlining */
    box-shadow: none; /* Remove the subtle shadow */
    display: block; /* Ensure full-width display */
    padding: 0; /* Remove padding */
}

/* Global Distribution section */
.global-distribution-section {
    padding: 40px 0; /* Reduced padding */
    background-color: #ffffff; /* Remove grey background */
}

.global-distribution-section .card {
    background-color: #ffffff; /* Match the white background */
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    border: 1px solid #e0e0e0; /* Lighter grey border */
    padding: 20px;
    transition: transform 0.2s;
}

.global-distribution-section .card:hover {
    transform: translateY(-5px);
}

/* Pricing section */
.pricing-section {
    padding: 40px 0; /* Reduced padding */
}

.pricing-section .row {
    display: flex; /* Enable flexbox */
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
}

.pricing-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0; /* Lighter grey border */
    border-radius: 10px; /* Slightly rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: transform 0.2s;
    padding: 20px; /* Padding for content */
    text-align: center; /* Center align the text and content */
    display: flex; /* Enable flexbox */
    flex-direction: column; /* Arrange children vertically */
    flex-grow: 1; /* Allow the card to grow to fill available space */
    flex-basis: 0; /* Equally distribute the card size */
    color: #6c757d; /* Card text color lighter grey */
}

.pricing-card:hover {
    transform: translateY(-5px); /* Slight lift on hover */
}

.pricing-card h5 {
    margin: 0; /* Remove top margin for better alignment */
    font-weight: 500;
    display: flex; /* Use flex to align icon and title inline */
    align-items: center; /* Center the icon and text vertically */
    color: #000000; /* Black title for pricing cards */
}

.pricing-card p {
    margin: 10px 0; /* Space above and below the paragraph */
    color: #6c757d; /* Lighter grey for the description text */
}

/* Pricing Amount Style */
.pricing-card h3 {
    color: #000000; /* Black color for price */
    font-size: 1.5rem; /* Smaller font size for the price */
    margin: 20px 0; /* Space around the price */
}

/* List of Features */
.pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 20px 0; /* Space around the list */
    text-align: left; /* Align list items to the left */
    align-self: center; /* Center the list within the flexbox */
}

.pricing-card ul li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: #6c757d; /* Lighter grey for list items */
}

.pricing-card ul li i {
    margin-right: 10px;
    color: #28a745; /* Green tick color */
}

.pricing-section .fa {
    margin-right: 10px; /* Space between icon and title */
    color: #000000; /* Black and white icons */
    transition: color 0.3s;
    font-size: 1.25rem; /* Slightly smaller icon size */
}

.pricing-section .fa:hover {
    color: #333333;
}

.pricing-card .btn-outline-dark {
    color: #000000;
    border-color: #000000;
}

.pricing-card .btn-outline-dark:hover {
    background-color: #000000;
    color: #ffffff;
}

/* Additional sections */
.additional-section {
    padding: 60px 0;
    background-color: #f8f9fa;
}

.additional-section .btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}

.additional-section .btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}
