/* CSS for the project, structured by development steps */

/* Step 0: Initial Preparations
   Resetting margins and paddings to ensure consistency across different browsers. 
   Box-sizing set to border-box to include padding and border in the element's total width and height. 
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Step 1: Colors and Font Styles
   Applied colors and font styles based on design specifications from the provided image.
*/ 

/* Hero and Footer */
#masthead,
#footer {
    background-color: #1f2937;
}

/* Hero Main Text */
.hero-main-text {
    font-size: 48px;
    color: #f9faf8;
    font-weight: 900;
}

/* Hero Secondary text, Header Link Text, and Footer(self-added) */
.header-links,
.hero-secondary-text,
#footer {
    font-size: 18px;
    color: #e5e7eb;
}

/* Header Logo Text */
.header-logo {
    font-size: 24px;
    color: #f9faf8;
    font-weight: bold; /* This was not mentioned explicitly in the specifications.*/
}

/* Button and Call to action */
button,
.sign-up-box {
    background-color: #3882f6;
}

/* Information Header Text */
.information-text {
    font-size: 36px;
    font-weight: 900;
    color: #1f2937;
}

/* Quote Background */
#testimonial {
    background-color: #e5e7eb;

}

/* Quote Text */
.testimony {
    font-size: 36px;
    color: #1f2937;
    font-style: italic;
}

/* Step 2: Positioning & Layout
   The core part of this project. Deep Flexbox stuff!
*/

/* Section 1: Masthead(Header and Hero combined) */

#masthead{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    gap: 100px;
    padding: 20px 150px 100px 150px;
}

#header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    gap: 30px; 
}

.header-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    gap: 20px
}

#hero {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 30px;
    height: 100%;
}

.hero-text, .hero-image {
    flex: 1 1 0; /* Makes both items take equal width */
    height: 220px; /* Ensures both items have the same height */
}

.hero-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 5px;
}

.hero-image {
    background-color: lightslategray;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: white;
}

/* Section 2: Information */

#information {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 100px;
    gap: 50px;
}

.gallery {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 50px;
}

.grid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 150px;
    gap: 10px;
}

.grid-image {
    width: 150px;
    height: 150px;
    border: 4px solid #3882f6;
    border-radius: 8px;
}

.grid-text {
    text-align: center;
}

/* Section 3: Testimonial */

#testimonial {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 100px;
    padding-bottom: 100px;
}

.testimony-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 770px;
    height: auto;
}

.endorser {
    align-self: flex-end;
}

/* Section 4: Sign up */

#sign-up {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
    padding-bottom: 100px;
}

.sign-up-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0;
    width: 1000px;
    height: 150px;
    border-radius: 8px;
    color: white;
}

.sign-up-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

button {
    padding: 10px;
    border-radius: 8px;
    width: 120px;
    color: white;
    font-weight: bold;
}

.sign-up-box button {
    border: 1px solid white;
    color: white;
}

/* Section 5: Footer */

#footer {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Step 3: Adding Final Touches
   Added font-family for overall typography. Remember to link Roboto font in the HTML.
   Had to Google this stuff!
*/

* {
    font-family: "Roboto", sans-serif;
}