/* Base Styles - General styles, fonts, colors, and resets */

/* Basic Reset - Resets default margins, padding, and sets box-sizing for consistent layout */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body Styles - Sets default font family, line height, and text color for the entire page */
/* Responsive body with flexbox for sticky footer */
body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Main Content - Flexible main content that grows to fill available space */
/* Responsive padding that adjusts for different screen sizes */
main {
    flex: 1;
    padding: 2rem;
    max-width: 1400px;
    margin: 90px auto 0 auto;
    width: 100%;
}

/* Hero Section - Centered text with margins */
.hero {
    text-align: center;
    margin-bottom: 2rem;
}

/* Hero Title - Large heading with responsive sizing */
.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

/* Hero Paragraph - Smaller text with gray color */
.hero p {
    font-size: 1.2rem;
    color: #666;
}

/* Responsive adjustments for main content */
@media (max-width: 768px) {
    main {
        padding: 1rem;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .news h2, .teams h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    main {
        padding: 0.5rem;
    }

    .hero h1 {
        font-size: 1.8rem;
    }

    .hero p {
        font-size: 0.9rem;
    }

    .news h2, .teams h2 {
        font-size: 1.3rem;
    }

    .team {
        flex: 1 1 100%;
        margin: 0.5rem;
    }
}

/* News and Teams Sections - Bottom margin for spacing */
.news, .teams {
    margin-bottom: 2rem;
}

/* Section Headings - Large font size and bottom margin */
.news h2, .teams h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

/* Article Styles - Bordered articles with padding and rounded corners */
article {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* Team List - Flex layout for team items with wrapping */
.team-list {
    display: flex;
    flex-wrap: wrap;
}

/* Team Item - Flex item with borders, padding, and rounded corners */
.team {
    flex: 1 1 300px;
    margin: 1rem;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
}