/* Styles specific to the Home page */

.frame-79-2221 {
    width: 100%; 
    max-width: 1920px; /* Or based on design, could be a variable */
    min-height: 100vh; /* Ensure it takes at least full viewport height */
    position: relative;
    margin: 0 auto; /* Center the content */
    overflow: hidden; /* Prevent horizontal scroll from children */
    display: flex; /* Using flex to manage footer at bottom potentially */
    flex-direction: column;
}

/* Hero Section */
.hero-section-container { 
    position: relative;
    width: 100%;
    margin-top: 80px; /* To account for fixed header */
    display: flex; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--common-text-color-light);
    text-align: center; /* Center text within hero */
}

.layer-79-2311 { /* Grey background for hero, fallback or design element */
    width: 100%;
    height: 100%; 
    background-color: var(--common-image-placeholder-gray);
    position: absolute;
    top: 0; 
    left: 0;
    z-index: -2; 
}

.hero-section-container picture,
.hero-section-container .layer-79-2314 { /* img tag */
    width: 100%;
    object-fit: cover; /* Cover the area, might crop */
    z-index: -1;
    display: block;
    min-height: 500px;
}

.text-79-2255 { /* Hero Title */
    font-family: var(--pc-font-4-0162-family);
    font-size: var(--pc-font-4-0162-size);
    font-weight: var(--pc-font-4-0162-style);
    line-height: var(--pc-font-4-0162-line-height);
    position: absolute; /* Ensure it's above image */
    bottom: 80px;
    z-index: 1;
}

.text-79-2302 { /* Hero Subtitle */
    font-family: var(--pc-font-1-0214-family);
    font-size: var(--pc-font-1-0214-size);
    font-weight: var(--pc-font-1-0214-style);
    position: absolute; /* Ensure it's above image */
    bottom: 60px;
    z-index: 1;
}
.home-main {
    width: 65%;
    text-align: center;
    margin: auto;
}
main {
    padding: 40px 80px;
    flex-grow: 1;
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.game-section {
    overflow: hidden;
    text-align: center;
    max-width: 457px;
}

    .game-section img {
        width: 100%;
        height: 343.25px; /* Maintain aspect ratio */
        object-fit: cover;
        display: block;
    }

.game-section h2 {
    font-family: var(--pc-font-1-478-family);
    font-size: var(--pc-font-1-478-size);
    font-weight: var(--pc-font-1-478-style);
    line-height: var(--pc-font-1-478-line-height);
    color: var(--common-text-color-dark);
    margin-top: 10px;
}

.group-29.see-more-button { 
    display: flex; /* Use flex for centering content */
    justify-content: center;
    align-items: center;
    margin: 30px auto; /* Center button block */
    width: 200px; /* Example width */
    height: 50px; /* Example height */
    border: 1px solid var(--common-button-see-more-border);
    border-radius: 25px;
    cursor: pointer;
    background-color: transparent;
}

.rectangle-40-79-2260 { /* See More button background - not needed if parent is styled */
    /* This was likely the visual representation of the button in MasterGo. */
    /* We style the parent .see-more-button instead for a real button */
    display: none; 
}

.text-79-2261 { /* See More button text */
    font-family: var(--pc-font-1-478-family);
    font-size: var(--pc-font-1-478-size);
    font-weight: var(--pc-font-1-478-style);
    color: var(--common-button-see-more-text);
}
.group-29.see-more-button:hover {
    background-color: var(--common-button-see-more-border);
    color: var(--common-bg-color);
}
.group-29.see-more-button:hover .text-79-2261{
    color: var(--common-bg-color); /* Change text color on hover */
}

/* FAB Button */
.group-230.fab-button {
    width: 56px;
    height: 56px;
    position: fixed; 
    right: 40px;
    bottom: 200px;
    background-color: var(--pc-paint-79-2252); /* transparent blue */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--pc-effect-1-576);
    z-index: 900;
    cursor: pointer;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
}

.rectangle-161-79-2251 { /* FAB background - styled on parent */
   display: none;
}

.path-79-2254 { /* FAB icon */
    /* SVG styling done via attributes, or can be targeted here if needed */
    /* fill: var(--common-text-color-light); */ /* Example if not set in SVG */
}


/* Media Queries for Home Page Content */
@media (max-width: 768px) {
    .frame-79-2221 {
        /* Any specific adjustments for the main frame on mobile */
    }

    .hero-section-container {
        margin-top: 70px; /* Adjust for potentially smaller mobile header */
    }

    .layer-79-2311 { display: none; } /* Hide PC grey background for hero if mobile image is primary */

    .text-79-2255 { /* Mobile Hero Title */
        font-size: var(--mobile-font-1-0435-size);
        line-height: var(--mobile-font-1-0435-line-height);
    }

    .text-79-2302 { /* Mobile Hero Subtitle */
        font-size: var(--mobile-font-1-460-size);
        padding: 0 15px; /* Add some padding so it does not touch edges */
    }

    main {
        padding: 20px;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Adjust for mobile */
        gap: 20px;
        width: 100% !important;
    }
    .game-section h2 { /* Mobile Game Titles */
        font-size: var(--mobile-font-1-0425-size);
        line-height: var(--mobile-font-1-0425-line-height);
    }

    .group-29.see-more-button { /* Mobile See More Button */
        width: 180px;
        height: 45px;
        margin: 20px auto;
    }
    /* .group-29.see-more-button .rectangle-40-79-2260 was for visual only */
    .group-29.see-more-button .text-79-2261 {
        font-size: calc(var(--pc-font-1-478-size) * 0.9); /* Slightly smaller */
    }

    .group-230.fab-button { /* Mobile FAB */
        width: 50px;
        height: 50px;
        right: 20px;
        bottom: 200px;
    }
    .group-230.fab-button svg.path-79-2254 { /* Mobile FAB Icon */
        transform: scale(0.85); /* Slightly smaller icon */
    }
}

@media (max-width: 480px) {
     .hero-section-container {
        margin-top: 60px;
    }
    .text-79-2255 { /* Hero Title for very small screens */
        font-size: 40px; 
    }
    .text-79-2302 { /* Hero Subtitle for very small screens */
        font-size: 14px;
        bottom: 70px;
    }

    main {
        padding: 15px;
        grid-template-columns: 1fr; /* Single column for very small screens */
        gap: 15px;
    }

    .game-section h2 {
        font-size: 14px;
    }

    .group-29.see-more-button {
        width: 160px;
        height: 40px;
    }
    .group-29.see-more-button .text-79-2261 {
        font-size: calc(var(--pc-font-1-478-size) * 0.8);
    }

    .group-230.fab-button { 
        width: 44px;
        height: 44px;
        right: 15px;
        bottom: 50px;
    }
    .group-230.fab-button svg.path-79-2254 { 
        transform: scale(0.75);
    }
}