/* Styles for the first section */
.section-one {
    /* Sets a background image for the section */
    background-image: url('Resources/home_title.webp');
    /* Aligns the background image to the bottom */
    background-position: bottom;
    /* Prevents the background image from repeating */
    background-repeat: no-repeat;
    /* Scales the background image to cover the entire section */
    background-size: cover;
    /* Adds padding to the bottom of the section */
    padding-bottom: 5vh;
    /* Applies a box shadow for a subtle 3D effect */
    box-shadow: 0 1vh 1vh rgba(0, 0, 0, 0.3), 0 0.3vh 0.5vh rgba(0, 0, 0, 0.1);
}

/* Styles for the main heading in the first section */
.section-one h1 {
    /* Adds top margin to push the heading down */
    margin-top: 15vh;
    /* Sets the font size of the heading */
    font-size: 10rem;
}

/* Styles for the paragraph in the first section */
.section-one p {
    /* Adds top margin to space out from the heading */
    margin-top: 5vh;
    /* Sets the font size of the paragraph */
    font-size: 2rem;
}

/* Styles for the button in the first section */
#section-one-button {
    /* Adds top margin for spacing */
    margin-top: 5vh;
}

/* Styles for the left section of the second main section */
.section-two-section-left {
    /* Sets a background image for this subsection */
    background-image: url('Resources/home_section2.webp');
    /* Centers the background image */
    background-position: center;
    /* Prevents the background image from repeating */
    background-repeat: no-repeat;
    /* Sets the width of the section to 40% of the parent */
    width: 40%;
    /* Applies a box shadow for a subtle 3D effect */
    box-shadow: 0 1vh 1vh rgba(0, 0, 0, 0.3), 0 0.3vh 0.5vh rgba(0, 0, 0, 0.1);
    /* Adds margin to the left and top for spacing */
    margin-left: 4vw;
    margin-top: 4vw;
    /* Rounds the corners of the section */
    border-radius: 2vh;
}

/* Styles for the right section of the second main section */
.section-two-section-right {
    /* Centers text within this section */
    text-align: center;
    /* Sets the width of the section to 40% */
    width: 40%;
    /* Adds margin to the left and top for spacing */
    margin-left: 10vw;
    margin-top: 4vw;
}

/* Styles for the main heading in the right section of the second main section */
.section-two-section-right h1 {
    /* Adds top margin to push the heading down */
    margin-top: 6vh;
    /* Sets the text color */
    color: #ffffff;
    /* Sets the font size of the heading */
    font-size: 4rem;
}

/* Styles for the paragraph in the right section of the second main section */
.section-two-section-right p {
    /* Sets the text color */
    color: #edfaff;
    /* Adds top margin for spacing */
    margin-top: 5vh;
    /* Sets the font size of the paragraph */
    font-size: 1.5rem;
}

/* Styles for the button in the second section */
#section-two-button {
    /* Adds top margin for spacing */
    margin-top: 5vh;
}

/* Styles for the left section of the third main section */
.section-three-section-left {
    /* Centers text within this section */
    text-align: center;
    /* Sets the width of the section to 40% */
    width: 40%;
    /* Adds margin to the left, top, and bottom for spacing */
    margin-left: 5vw;
    margin-top: 4vw;
    margin-bottom: 5vh;
}

/* Styles for the main heading in the left section of the third main section */
.section-three-section-left h1 {
    /* Adds top margin to push the heading down */
    margin-top: 10vh;
    /* Sets the text color */
    color: #ffffff;
    /* Sets the font size of the heading */
    font-size: 4rem;
}

/* Styles for the paragraph in the left section of the third main section */
.section-three-section-left p {
    /* Sets the text color */
    color: #edfaff;
    /* Adds top margin for spacing */
    margin-top: 5vh;
    /* Sets the font size of the paragraph */
    font-size: 1.5rem;
}

/* Styles for the right section of the third main section */
.section-three-section-right {
    /* Sets a background image for this subsection */
    background-image: url('Resources/home_section3.webp');
    /* Aligns the background image to the right */
    background-position: right;
    /* Prevents the background image from repeating */
    background-repeat: no-repeat;
    /* Scales the background image to cover the entire section */
    background-size: cover;
    /* Sets the width of the section to 40% */
    width: 40%;
    /* Applies a box shadow for a subtle 3D effect */
    box-shadow: 0 1vh 1vh rgba(0, 0, 0, 0.3), 0 0.3vh 0.5vh rgba(0, 0, 0, 0.1);
    /* Adds margin to the left and top for spacing */
    margin-left: 10vw;
    margin-top: 6vw;
    /* Rounds the corners of the section */
    border-radius: 2vh;
    /* Adds bottom margin for spacing */
    margin-bottom: 5vh;
}

/* Styles for the button in the third section */
#section-three-button {
    /* Adds top margin for spacing */
    margin-top: 5vh;
}

/* General styles for buttons */
.btn {
    /* Removes border for a cleaner look */
    border-width: 0;
    /* Rounds the corners of the button */
    border-radius: 20rem;
    /* Sets the background color of the button */
    background-color: #10bb3d;
    /* Sets the font size of the button text */
    font-size: 2rem;
    /* Adds a transition effect for background color changes */
    transition: background-color 0.2s;
}

/* Styles for text inside buttons */
.btn p {
    /* Adds margin around the text */
    margin: 1vh;
    /* Sets the font size of the text */
    font-size: 1.5rem;
    /* Sets the text color */
    color: #000000;
    /* Adds a transition effect for text color changes */
    transition: color 0.2s;
    /* Makes the text bold */
    font-weight: 700;
}

/* Hover effect for buttons */
.btn:hover {
    /* Changes the background color on hover */
    background-color: #09526d;
}

/* Hover effect for text inside buttons */
.btn:hover p {
    /* Changes the text color on hover */
    color: #10bb3d;
}