body {
    font-family: Arial, Helvetica, sans-serif;
}

header {
    display: flex;
    height: 50px;
    padding-top: 20px;
    padding-left: 20px;
    align-items: center;
}

header img {
    width: 250px;
}

.section1 { 
    /* 1. Link your image */
    background-image: url('../Images/moonsurface.png');

    /* 2. Scale image to cover entire section width and height */
    background-size: cover;

    /* 3. Keep image centered during resizing */
    background-position: center;

    /* 4. Prevent image from repeating */
    background-repeat: no-repeat;

    /* 5. Set dimensions: ensures the section has space to show the background */
    width: 100%;
    min-height: 400px; /* Or use 'vh' for viewport height */
    /* border: 1px solid #ddd; */
    border-radius: 8px;
}

.section1 div h2 {
    font-size: 80px;
    color:#F4B400;
    padding-left: 20px;
    padding-top: 20px;
}

.section1 div p {
    color:#F4B400;
    padding-left: 20px;
    width: 50%;
}

.box-container {
    background-color: #34A853;
    display: flex;
    gap: 20px; /* Space between boxes */
    padding: 20px;
    flex-wrap: wrap; /* Allows wrapping on mobile devices */
    border-radius: 8px;
}

.info-box {
    flex: 1; /* Makes all boxes equal width */
    min-width: 250px; /* Prevents boxes from getting too narrow */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    }

.section2 h2 {
    font-size: 40px;
    padding-left: 20px;
}

.tag-line {
    padding-left: 20px;
}

.section3 {
    background-color:bisque;
        /* 1. Link your image */
    background-image: url('../Images/next-level.png');

    /* 2. Scale image to cover entire section width and height */
    background-size: cover;

    /* 3. Keep image centered during resizing */
    background-position: center;

    /* 4. Prevent image from repeating */
    background-repeat: no-repeat;

    /* 5. Set dimensions: ensures the section has space to show the background */
    width: 100%;
    min-height: 400px; /* Or use 'vh' for viewport height */
    border-radius: 8px;    
}

.section3 h2 {
    font-size: 80px;
    color:#F4B400;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 0%;
}

.section3 p {
    color:#F4B400;
    padding-left: 20px;
    width: 50%;
}

.section4 {
    background-color:#4285F4;
    height: 400px;
    padding-left: 20px;
    border-radius: 8px;    
}

.section4 h2 {
    font-size: 40px;
    color:white;
    padding-left: 20px;
    padding-top: 20px;
}

.section4 p {
    padding-left: 20px;
    color:white;
}

.section4 a {
    display:flex;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    padding-left: 20px;
    text-decoration: none;
    color:black;
    width: 100px;
}

footer div {
    display: flex;
    height: 100px;
    padding-left: 20px;
    align-items: center;
}