/* =============================================================================
   HOME PAGE STYLES
   =============================================================================
   CSS for the home page content with two sections and icon layouts
   ============================================================================= */

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    background-color: #2c2c2c;       /* Dark background to match main app */
    color: #ffffff;                  /* White text */
    font-family: Arial, sans-serif;  /* Match main app font */
    overflow: hidden;                /* Prevent scrolling */
    display: flex;                   /* Flexbox for two sections */
    flex-direction: column;          /* Stack sections vertically */
    justify-content: center;         /* Center content vertically */
    align-items: center;             /* Center content horizontally */
    gap: 32px;                       /* Space between top and bottom rows */
}

/* -----------------------------------------------------------------------------
   TOP SECTION (First Half)
   ----------------------------------------------------------------------------- */
.top-section {
    /* Content-sized row centered within the page */
    width: 100%;                     /* Full width */
    background-color: transparent;   /* Transparent background */
    display: flex;                   /* Flexbox for centering content */
    align-items: center;             /* Center vertically */
    justify-content: center;         /* Center horizontally */
    padding: 0 20px;                 /* Horizontal padding only */
    transform: translateY(-30px);    /* Nudge the top row slightly upwards */
}

/* -----------------------------------------------------------------------------
   BOTTOM SECTION (Second Half)
   ----------------------------------------------------------------------------- */
.bottom-section {
    /* Content-sized row centered within the page */
    width: 100%;                     /* Full width */
    background-color: transparent;   /* Transparent background */
    display: flex;                   /* Flexbox for centering content */
    align-items: center;             /* Center vertically */
    justify-content: center;         /* Center horizontally */
    padding: 0 20px;                 /* Horizontal padding only */
}

/* -----------------------------------------------------------------------------
   ICON CONTAINER
   ----------------------------------------------------------------------------- */
.icon-container {
    display: flex;                   /* Flexbox for horizontal layout */
    gap: 80px;                       /* Increased space between icons */
    align-items: center;             /* Center icons vertically */
    justify-content: center;         /* Center icons horizontally */
    width: 100%;                     /* Full width of parent */
    max-width: 800px;                /* Increased maximum width for more spread */
}

/* -----------------------------------------------------------------------------
   INDIVIDUAL ICON ITEMS
   ----------------------------------------------------------------------------- */
.icon-item {
    display: flex;                   /* Flexbox for vertical layout */
    flex-direction: column;          /* Stack logo and name vertically */
    align-items: center;             /* Center align content */
    text-align: center;              /* Center text */
    cursor: pointer;                 /* Pointer cursor for clickable items */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth hover effects */
    min-width: 160px;                /* Increased minimum width for consistency */
}

.icon-item:hover {
    transform: translateY(-5px);     /* Slight lift effect on hover */
    opacity: 0.8;                    /* Slight transparency on hover */
}

/* -----------------------------------------------------------------------------
   ICON LOGO CONTAINER
   ----------------------------------------------------------------------------- */
.icon-logo {
    width: 140px;                    /* Significantly increased width for logo container */
    height: 140px;                   /* Significantly increased height for logo container */
    background-color: transparent;   /* Remove dark grey background */
    border-radius: 12px;             /* Rounded corners */
    display: flex;                   /* Flexbox for centering logo */
    align-items: center;             /* Center logo vertically */
    justify-content: center;         /* Center logo horizontally */
    margin-bottom: 6px;              /* Bring text closer to the logo */
    border: none;                    /* Remove border */
    transition: transform 0.3s ease; /* Smooth transitions */
}

.icon-item:hover .icon-logo {
    transform: scale(1.05);          /* Slight scale effect on hover */
}

/* -----------------------------------------------------------------------------
   ICON IMAGES
   ----------------------------------------------------------------------------- */
.icon-image {
    width: 100px;                    /* Significantly increased icon size */
    height: 100px;                   /* Significantly increased icon size */
    object-fit: contain;             /* Scale to fit without distortion */
    filter: brightness(1.1);        /* Slightly brighten icons */
}

/* -----------------------------------------------------------------------------
   ICON NAMES
   ----------------------------------------------------------------------------- */
.icon-name {
    font-size: 14px;                 /* Slightly larger font size for icon names */
    font-weight: normal;             /* Regular weight (not bold) */
    color: #ffffff;                  /* White text */
    line-height: 1.2;                /* Tight line height */
    max-width: 100px;                /* Limit text width */
    word-wrap: break-word;           /* Allow text wrapping if needed */
}

/* -----------------------------------------------------------------------------
   RESPONSIVE DESIGN
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .icon-container {
        gap: 20px;                   /* Reduced gap on smaller screens */
        flex-wrap: wrap;             /* Allow wrapping if needed */
    }
    .top-section { transform: translateY(-10px); }
    
    .icon-logo {
        width: 60px;                 /* Smaller logos on mobile */
        height: 60px;                /* Smaller logos on mobile */
        margin-bottom: 4px;          /* Slightly tighter spacing on mobile */
    }
    
    .icon-image {
        width: 35px;                 /* Smaller icons on mobile */
        height: 35px;                /* Smaller icons on mobile */
    }
    
    .icon-name {
        font-size: 13px;             /* Slightly larger text on mobile */
    }
}

@media (max-width: 480px) {
    .icon-container {
        flex-direction: column;      /* Stack icons vertically on very small screens */
        gap: 15px;                   /* Reduced gap */
    }
    .top-section { transform: translateY(-8px); }
    
    .top-section,
    .bottom-section {
        padding: 15px;               /* Reduced padding */
    }
}