/* Shared "page hero" band used at the top of inner pages (About, Products,
   Blog, etc). The header (.header-layout2) is absolutely positioned so it
   can float over the home page's hero image — on inner pages, without a
   tall hero image behind it, this band needs enough top padding to clear
   the overlaid header instead of colliding with it. */

/* .inner-hero / .inner-breadcrumb now live in application/views/common/header_new.php
   (inline <style>) instead of here, so the dark hero styling can never be
   served stale from the CDN's static-asset cache the way this file can. */

/* Generic feature/value card grid, reused on About and similar content pages */
.value-card {
    background-color: var(--white-color);
    border-radius: 18px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    padding: 40px 26px;
    text-align: center;
    height: 100%;
    transition: transform 0.3s ease-in-out;
}
.value-card:hover {
    transform: translateY(-6px);
}
.value-card .value-card__icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--smoke-color);
    font-size: 30px;
    color: var(--theme-color);
}
.value-card .value-card__icon img {
    max-width: 38px;
    max-height: 38px;
}
.value-card h3 {
    font-family: var(--title-font);
    font-size: 18px;
    margin-bottom: 12px;
}
.value-card p {
    color: var(--body-color);
    opacity: 0.75;
    font-size: 14px;
    margin: 0;
}

.about-text-block p {
    color: var(--body-color);
    opacity: 0.8;
    line-height: 1.9;
    margin-bottom: 18px;
}