/* ============================================================
   REFRESH GLOBAL — INDEX PAGE SOLUTIONS SECTION
   ------------------------------------------------------------
   Location:
     /Views/Home/Index.cshtml

   Purpose:
     • Styles the “Solutions” section on the homepage
     • Provides consistent card layout for service categories
     • Ensures clean spacing, icon alignment, and visual hierarchy
     • Matches corporate UI language (radius, shadows, transitions)
     • Fully responsive (stack on mobile → 3 columns desktop)

   Notes:
     • Images stored under:
         ~/Content/hero/index/solutions/
     • Icons use Font Awesome (fa-solid)
     • This CSS is specific to the Index page only
   ============================================================ */



/* ============================================================
   1️⃣ SOLUTION CARD CONTAINER (.service-box)
   ------------------------------------------------------------
   • White card with soft border
   • Rounded corners for modern corporate feel
   • Internal padding for breathing room
   • Smooth hover elevation for premium interaction
   ============================================================ */
.service-box {
    background: #fff; /* clean white tile */
    border: 1px solid #e6e6e6; /* light corporate border */
    border-radius: 10px; /* smooth rounded corners */
    padding: 25px; /* internal spacing */
    height: 100%; /* equal height columns */
    text-align: center; /* center all content */
    transition: transform 0.25s ease, box-shadow 0.25s ease; /* smooth hover motion */
}

    /* Hover effect */
    .service-box:hover {
        box-shadow: 0 6px 24px rgba(0,0,0,0.12); /* soft elevation */
        transform: translateY(-6px); /* gentle lift */
    }



    /* ============================================================
   2️⃣ SOLUTION IMAGES
   ------------------------------------------------------------
   • Full-width responsive images
   • Rounded corners for consistency
   • Object-fit ensures clean scaling
   ============================================================ */
    .service-box img {
        width: 100%;
        max-height: 160px;
        object-fit: cover;
        border-radius: 8px;
    }



    /* ============================================================
   3️⃣ SOLUTION ICONS (Font Awesome)
   ------------------------------------------------------------
   • Large, bold icons representing each service category
   • Corporate color tone for consistency
   ============================================================ */
    .service-box i {
        font-size: 2rem; /* strong icon size */
        color: #4f5a70; /* corporate blue-grey */
        margin-top: 10px;
    }



    /* ============================================================
   4️⃣ SOLUTION TITLE
   ------------------------------------------------------------
   • Bold, readable, corporate
   • Slight spacing before description
   ============================================================ */
    .service-box h5 {
        font-weight: 700;
        margin-top: 15px;
        margin-bottom: 0.6rem;
        color: #222;
    }



    /* ============================================================
   5️⃣ SOLUTION DESCRIPTION
   ------------------------------------------------------------
   • Soft, secondary text
   • Comfortable line height for readability
   ============================================================ */
    .service-box p {
        font-size: 0.95rem;
        color: #666;
        line-height: 1.55;
        margin-bottom: 0;
    }



/* ============================================================
   6️⃣ SECTION TITLE
   ------------------------------------------------------------
   • Large, bold, centered
   • Matches product section typography
   ============================================================ */
.section-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 2rem;
}