/* Web/static/styles/feature.css */

.feature-hero {
    text-align: center;
    padding: 80px 20px 40px; /*  Reduced bottom padding */
    background-color: #fafafa; /*  Subtle background */
}

.feature-hero h1 {
    font-size: 3.2em;
    font-weight: 700;
    margin-bottom: 0.5em;
    letter-spacing: 0.005em;
}

.feature-hero .tagline {
    font-size: 1.4em;
    color: #6e6e73;
    max-width: 700px; /*  Limit width for readability */
    margin: 0 auto 20px; /*  Center and add bottom margin */
}

.feature-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 60px 20px; /* More padding */
    max-width: 1024px;
    margin: 0 auto; /* Center content */
}

/* Alternate layout for feature sections */
.feature-detail.alternate {
    flex-direction: row-reverse;  /* Reverse the order */
}

.feature-content {
    flex: 1;
    padding-right: 40px; /* Space between text and image */
    text-align: left; /*  Explicitly set text alignment */
}

.feature-detail.alternate .feature-content {
    padding-right: 0;  /* Remove right padding on alternate */
    padding-left: 40px;  /* Add left padding on alternate */
}

.feature-content h2 {
    font-size: 2.2em;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}

.feature-content p {
    font-size: 1.1em;
    color: #555;
    line-height: 1.6;
}

.feature-image {
    flex: 1;
    text-align: center; /* Center the image */
}
.feature-image img {
    max-width: 90%; /*  Slightly smaller than 100% */
    height: auto;
    border-radius: 16px; /*  Consistent rounding */
}
/* Responsive Styles */
@media screen and (max-width: 768px) {
    .feature-hero {
        padding: 60px 20px 30px; /* Less padding on smaller screens */
    }

    .feature-hero h1 {
        font-size: 2.5em;
    }

    .feature-hero .tagline {
        font-size: 1.2em;
    }

    .feature-detail,
    .feature-detail.alternate {
        flex-direction: column; /* Stack content vertically */
        padding: 40px 20px; /* Less padding */
    }

    .feature-content,
    .feature-detail.alternate .feature-content {
        padding-right: 0;
        padding-left: 0;
        text-align: center; /* Center text on smaller screens */
        margin-bottom: 30px; /* Add space between content and image */
    }

    .feature-image img {
        max-width: 100%; /* Full width on smaller screens */
    }
     /* Make menu items stack vertically on smaller screens */
      .ac-ln-menu-items {
        flex-direction: column;
        align-items: flex-start; /* Align items to the start */
    }
      .ac-ln-menu-item {
        margin-left: 0; /* Remove left margin */
        margin-bottom: 10px; /* Add bottom margin for spacing */
    }
    /* Adjust padding and alignment for actions */
    .ac-ln-content {
        flex-direction: column; /* Stack title and menu vertically */
        align-items: flex-start; /* Align items to the start */
    }
    .ac-ln-actions {
        margin-left: 0; /* Remove left margin */
        margin-top: 10px; /* Add top margin for spacing */
    }
}