/*CSS Styles for Landing Page*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: sans-serif;
}

/* typography */
p {
    margin-top: 1%;
    margin-bottom: 1%;
}

a {
    background-color: #1F2937;
    color: #f9faf8;
    text-decoration: none;
}

.site-title {
    font-size: 24px;
}

blockquote {
    font-size: 36px;
    font-style: italic;
    font-weight: 200;
    color: #1F2937;
}

.caption {
    text-align: right;
}

/* buttons */
.cta-btn {
    color: #e5e7eb;
    min-width: 80px;
    background-color: #3882F6;
    padding: 10% 15%;
    border: 2px solid #e5e7eb;
    border-radius: 8%;
}

.sign-up-btn {
    color: #f9faf8;
    background-color: #3882F6;
    padding: 2% 5%;
    border: 2px solid #3882F6;
    border-radius: 8%;
}

/* section styes */
.section {
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 10%;
    padding-bottom: 10%;
}

/* header*/
.section.header{
    padding-top: 5%;
    padding-bottom: 0%;
}

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

.menu {
    display: flex;
    list-style-type: none;
    gap: 16px;
    flex-direction: end;
}
header {
    background-color: #1F2937;
    color: #f9faf8;
}

/* hero section */
.hero {
    padding-top: 10%;
    padding-bottom: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-left {
    flex-direction: start;
    padding-right: 5%;
    max-width: 450px;
}

.hero-right {
    flex-direction: end;
}

.hero img {
    max-width: 100%;
    
}

.hero-left h2 {
    font-size: 48px;
    font-weight: extra-bold;
}

.hero, .hero h2 {
    color: #f9faf8;
    background-color: #1F2937;
}

@media screen and (max-width: 985px) {
    .hero {
      display: block;
    }
    .hero img{
        margin-top: 5%;
    }
  }

/* random info section */
.info h2, .info-items {
    text-align: center;
}

.info-item, .info-item img {
    max-width: 150px;
}

.info-items {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 5%;
}

.info-item {
    margin-left: 2%;
    margin-right: 2%;
}

@media screen and (max-width: 686px) {
    .info-items {
      display: block;
    }
    .info-item, .info-item img {
        max-width: 75%;
        margin: auto;
    }
  }

/* quote section */ 
.quote {
    background-color: #e5e7eb;
}

/* call to action section */
.cta {
    display: flex;
    margin: 8% 20% 8% 20%;
    background-color: #3882F6;
    padding: 3% 5%;
    color: #e5e7eb;
    justify-content: space-evenly;
    align-items: center;
    border: 4px solid #3882F6;
    border-radius: 5px;
}

.cta-left {
    flex-direction: left;
}

.cta-right {
    flex-direction: end;
}

/*footer*/
footer {
    padding: 1% 0%;
    text-align: center;
    background-color: #1F2937;
    color: #e5e7eb;
}