/* ============================================================
   GLOBAL LAYOUT (app-layout)
   ============================================================ */
/* Main container for the home page layout */
.home-layout {
    height: 100vh;                      /* Full viewport height */
    overflow-y: auto;                   /* Enable vertical scrolling */
    padding: 1rem 2rem 4rem 2rem;       /* Outer spacing: top, right, bottom, left */
}
/* Adjust layout padding for medium/small screens */
@media (max-width: 992px) {
    .home-layout {
        padding: 1rem 2rem 4rem 2rem;
    }
}
/* ============================================================
   1. TITLE SECTION (home-title-section)
   ============================================================ */
/* Wrapper for the page title and subtitle */
.home-title-section {
    text-align: center;                 /* Center-align all text */
    padding: 1.5rem 3.5rem 0.5rem 3.5rem; /* Spacing around the title block */
    margin-bottom: 0;                   /* Remove external spacing below */
}
/* Main title of the home page */
.home-title {
    font-size: 4rem;                    /* Large font size for emphasis */
    font-weight: 700;                   /* Heavy bold */
    color: #1E1E1E;                     /* Dark-gray text color */
    margin-bottom: 0.5rem;              /* Space below the title */
    text-align: center;                 /* Center the title */
}
/* Subtitle directly under the main title */
.home-subtitle {
    font-size: 2.2rem;                  /* Slightly larger than body text */
    font-weight: 400;                   /* Normal weight */
    color: #444;                        /* Medium gray for contrast */
    margin-bottom: 2rem;                /* Add spacing below */
    text-align: center;                 /* Center the subtitle */
}
/* Bold variant inside the subtitle */
.home-subtitle-bold {
    color: #1E1E1E;                     /* Darker color for contrast */
    font-weight: 700;                   /* Maintain bold emphasis */
}
/* ============================================================
   2. CARD SECTION (home-card-section)
   ============================================================ */
/* Container holding all cards */
.home-card-section {
    display: flex;                      /* Use Flexbox layout */
    justify-content: center;            /* Center cards horizontally */
    flex-wrap: wrap;                    /* Allow wrapping on multiple rows */
    gap: 2rem;                          /* Horizontal and vertical spacing */
    margin: 0 auto 2rem auto;           /* Center block + bottom spacing */
    padding: 1rem 4rem;                 /* Inner spacing */
    max-width: 1200px;                  /* Prevent container from stretching too wide */
}
/* Individual card container */
.home-card-container {
    width: 230px;                       /* Fixed card width */
    height: 130px;                      /* Fixed card height */
    display: flex;                      /* Enable flex layout */
    flex-direction: column;             /* Stack elements vertically */
    justify-content: space-between;     /* Keep title at top and value at bottom */
    align-items: center;                /* Center content horizontally */
    text-align: center;                 /* Center content inside card */
    border-radius: 15px;                /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    background-color: white;            /* White background */
    padding: 1rem;                      /* Inner spacing */
    transition: transform 0.2s ease;    /* Smooth hover animation */
}
/* Card title */
.home-card-title {
    font-size: 1.1rem;                  /* Medium-sized title */
    font-weight: 500;                   /* Semi-bold weight */
    color: #444;                        /* Neutral dark-gray */
    margin: 0;                          /* Remove default margins */
    padding: 0;                         /* Ensure consistent spacing */
    line-height: 1.2;                   /* Balanced text height */
    min-height: 2.4em;                  /* Ensure consistent height across cards */
}
/* Numerical value displayed in each card */
.home-card-value {
    font-size: 1.8rem;                  /* Larger text for emphasis */
    font-weight: 700;                   /* Bold for prominence */
    color: #1E1E1E;                     /* Dark-gray text */
    margin: 0;                          /* Remove extra spacing */
    line-height: 1;                     /* Tight text alignment */
}
/* ============================================================
   3. SLOGAN SECTION (home-slogan-section)
   ============================================================ */
/* Slogan or message block centered on the page */
.home-slogan-section {
    margin: 2rem auto;                  /* Vertical spacing + center alignment */
    padding: 1rem 4rem;                 /* Internal spacing */
    text-align: center;                 /* Center-align text */
    font-size: 2.2rem;                  /* Large font size for visibility */
    font-weight: 600;                   /* Semi-bold weight */
    color: #1E1E1E;                     /* High-contrast dark color */
}
/* ============================================================
   4. DESCRIPTION SECTION (home-description-section)
   ============================================================ */
/* Wrapper containing multiple description blocks */
.home-description-section {
    margin: 2rem auto;                  /* Vertical spacing + center alignment */
    padding: 1rem 4rem;                 /* Internal spacing */
    display: flex;
    flex-direction: column;             /* Stack descriptions vertically */
    gap: 2rem;                          /* Space between description blocks */
}
/* Single description block */
.home-description-container {
    display: flex;                      /* Horizontal layout */
    justify-content: space-between;     /* Spread title and text */
    align-items: baseline;              /* Align items at the bottom (title and text) */
    gap: 3rem;                          /* Separation between title and text */
    padding: 0 0 1.5rem 0;              /* Bottom spacing */
    border-bottom: 1px solid #d9d9d9;   /* Light separator line */
}
/* Add top border only to the first description block */
.home-description-container:first-child {
    border-top: 1px solid #d9d9d9;      /* Light top separator */
    padding-top: 2rem;                  /* Ensure equal top spacing */
}
/* Title of each description block */
.home-description-title {
    flex: 1;                            /* Allocates space for the section title */
    min-width: 250px;                   /* Ensures a minimum width for alignment */
    font-size: 1.5rem;                  /* Large, clear title size */
    font-weight: 600;                   /* Bold title text */
    color: #1E1E1E;                     /* Dark gray text for contrast */
    margin: 0;
    padding: 0;
}
/* Text content in each description block */
.home-description-text{
    flex: 2;                            /* Take double the width of the title */
    font-size: 1.1rem;                  /* Slightly larger than default */
    color: #333;                        /* Dark neutral color */
    line-height: 1.8;                   /* Comfortable text spacing */
    margin: 0;
    padding: 0;
}
/* ============================================================
   5. FOUNDERS SECTION (home-founders-section)
   ============================================================ */
/* Wrapper for founders logos and title */
.home-founders-section {
    margin: 0 auto 5rem auto;           /* Center and space from bottom */
    padding: 0 4rem 2rem 4rem;          /* Inner spacing (top, sides, bottom) */
    text-align: center;                 /* Center content horizontally */
}
/* Founders section title */
.home-founders-title {
    font-size: 2.2rem;                  /* Large title */
    font-weight: 600;                   /* Semi-bold */
    color: #1E1E1E;                     /* High-contrast color */
    margin-bottom: 2rem;                /* Spacing below title */
}
/* Container for founders logos */
.home-founders-logo-container {
    display: flex;                      /* Use Flexbox */
    justify-content: center;            /* Center horizontally */
    align-items: center;                /* Center vertically */
    flex-wrap: wrap;                    /* Wrap logos on smaller screens */
    gap: 2rem;                          /* Space between logos */
}
/* Individual logo image */
.home-founders-logo-image {
    height: 80px;                       /* Fixed logo height */
}
/* ============================================================
   RESPONSIVE BEHAVIOR
   ============================================================ */
@media (max-width: 768px) {
    /* Reduce title-section padding on small screens */
    .home-title-section {
        padding: 1.5rem 0 0.5rem 0;
    }
    /* Reduce card container spacing */
    .home-card-section {
        margin: 2rem 0 2rem 0;          /* Center and space from bottom */
        padding: 1rem 0.5rem 1rem 0.5rem;/* Inner spacing (top, sides, bottom) */
    }
    /* Adjust spacing for description section */
    .home-description-section {
        margin: 2rem 0 3rem 0;          /* Top and bottom spacing, center horizontally */
        padding: 1rem 0.5rem 1rem 0.5rem; /* Inner spacing on all sides */
    }
    /* Stack description blocks vertically */
    .home-description-container {
        flex-direction: column;         /* Row → Column */
        gap: 1rem;                      /* Reduce spacing */
    }
    /* Title adapts to full width */
    .home-description-title {
        min-width: 100%;                /* Prevent layout issues */
        font-size: 1.4rem;              /* Slightly smaller title */
    }
    /* Optional: smaller text for mobile */
    .home-description-text {
        font-size: 1rem;                /* Smaller text */
    }
    /* Adjust founders section spacing on mobile */
    .home-founders-section {
        margin: 2rem 0 5rem 0;          /* Center and space from bottom */
        padding: 1rem 0.5rem 1rem 0.5rem;/* Inner spacing (top, sides, bottom) */
    }
}