/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght,YOPQ@100..900,300&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

html, body {
    margin: 0;
    font-family: "Kumbh Sans", sans-serif;
    scroll-behavior: smooth;
}

/* HEADER SECTION CSS */

header {
    display: flex;
    align-items: center;
    padding: 12px;
    padding-left: 250px;
    padding-right: 250px;
    height: 35px;
    background-color: #1F2937;
}

header h1 {
    /* Stay in header */
    margin: 0;  

    /* Text styling */
    font-size: 24px;
    color: #F9FAF8;
}

header ul {
    /* Positioning */
    display: flex;
    justify-content: space-between;
    gap: 48px;
    margin-left: auto;

    /* Styling */
    list-style-type: none;
}

header a {
    /* Styling */
    text-decoration: none;
    color: #F9FAF8;

}

/* HERO SECTION STYLING */

.hero-container {
    /* Container Positioning */
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* Size */
    padding-left: 250px;
    padding-right: 250px;
    padding-bottom: 50px;
    height: 450px;

    /* Container Styling */
    background-color: #1F2937;
}

.left {
    width: 500px;
}

.left h1 {
    font-size: 48px;
    font-weight: 900;
    color: #F9FAF8; 
    margin: 0px;
}

.left h2 {
    font-size: 16px;
    font-weight: light;
    color: #d5d7db;
    margin-bottom: 16px; 
    width: 450px;
}

.left button {
    background-color: #3882F6;
    border-radius: 10px;
    border: none;
    color: #ffffff;
    padding: 8px 20px;
}

.right img {
    width: 500px;
    height: auto;
    border-radius: 10px;
    margin-left: 25px;
}

/* INFORMATION SECTION STYLING */

.info-container {
    display: flex;
    justify-content: center;
    column-gap: 100px;
    padding: 64px;

    text-align: center;

    padding-left: 250px;
    padding-right: 250px;
}

.info {
    max-width: 200px;
}

.img-placeholder {
    border: 4px solid blue;
    border-radius: 10px;
    height: 200px;
    width: 200px;
}

.info-title {
    font-size: 32px;
    font-weight: 900;
    padding-top: 64px;

    display: flex;
    justify-content: center;
}

/* QUOTE SECTION STYLING */

.quote-container {
    height: 325px;
    background-color: #E5E7EB;

    display: flex;
    justify-content: center;
    align-items: center;
}

.quote-text {
    font-size: 36px;
    color: #1F2937;
    font-weight: 300;
    font-style: italic;

    max-width: 900px;
}

.source-container {
    height: 0px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.quote-source {
    padding-bottom: 35px;
    padding-left: 450px;
}

/* CALL TO ACTION STYLING */

.cta-container {
    height: 500px;

    display: flex;
    justify-content: center;
    align-items: center;

    padding-left: 250px;
    padding-right: 250px;
}

.cta {
    background-color: #3882F6;
    width: 900px;
    height: 60px;
    padding: 32px;
    border-radius: 8px;

    display: flex;    
    justify-content: space-between; 
    align-items: center; 

    color: #ffffff;
}

.cta h1 {
    font-size: 28px;
    margin: 0;
}

.cta h2 {
    font-size: 18px;
    font-weight: 450;
    margin: 0;
}

.cta button {
    margin-right: 80px;
    margin-bottom: -10px;
    padding: 5px 20px;
    border: 1px solid #ffffff;
    border-radius: 5px;
    background-color: #3882F6;
    color: #ffffff;
}

/* FOOTER STYLING */

footer {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #1F2937;
    color: #ffffff;
    height: 100px
}