@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

/* Basic Reset */
* {
margin: 0;
box-sizing: border-box;
}

:root {
--page-padding: 5% 10%;
--mobile-page-padding: 10% 1rem;
--cta-text-color: #FFFFFF;
--cta-background: #61CB72;
/* --heading-primary-color: #052E6F; */
--main-text-color: #2F2F2F;
--footer-text-color: #ACACAC;
--background-color-white: #FFFFFF;
/* --background-color-blue: #E8F4F0; */
--black-highlight: #2F2F2F; 
--white-highlight: #FFFFFF;
--baby-blue: #E8F4F0;
}

body {
background-color: var(--background-color-white);
}

body, h1, h2, h3, h4, h5, h6, p, a {
font-family: "Outfit", serif;
font-style: normal;
}

/* -------------- Header */

header {
background-color: var(--background-color-white);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.3rem 10%;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
height: 4rem;
}

.logo img {
height: 20px;
}

.nav-contents {
display: flex;
}

.nav-menu {
display: flex;
gap: 1rem;
align-items: center;
}

.nav-menu a {
color: var(--main-text-color);
font-size: 0.75rem;
text-decoration: none;
font-weight: 300;
}

/* -------------- Hero */

.hero {
height: 100vh;
padding: 4rem 0 0;
background-image: url("./assets/hero_background.png");
background-repeat: no-repeat;
background-size: cover;
width: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}

.hero-contents {
background-image: url("./assets/hero_illustrations.svg");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
}

.hero-headline {
display: flex;
text-transform: capitalize;
}

.hero-headline h1 {
font-size: 2rem;
font-weight: 200;
}

.text-part-1 {
margin-right: 0.5rem;
}

.text-part-1 h1 span {
font-weight: 500;
}

.text-part-2 h1 span {
color: #FFFFFF;
font-weight: 500;
background-color: var(--black-highlight);
padding: 0.3rem 0.5rem;
border-radius: 10px;
}

.hero-usp-desktop {
display: flex;
flex-wrap: wrap;
width: 40%;
align-items: center;
justify-content: center;
gap: 1rem;
}

.hero-usp-desktop p, .hero-usp-mobile p {
background-color: var(--white-highlight);
width: fit-content;
padding: 0.5rem 0.8rem;
border-radius: 200px;
text-align: center;
font-size: 0.75rem;
}

.hero-usp-mobile {
display: flex;
gap: 1rem;
}

.usp-txt-wrapper-mobile {
display: flex;
flex-direction: column;
justify-content: space-evenly;
gap: 1rem;
}

/* -------------- 1st Fold */
.fold-1 {
padding: var(--page-padding);
display: flex;
flex-direction: column;
gap: 5rem;
}

.fold-1-content-wrapper {
display: flex;
align-items: center;
gap: 2rem;
}

.fold-1-content-wrapper:nth-child(2) {
flex-direction: row-reverse;
}

.fold-1-content-wrapper img {
width: 50%;
height: 16rem;
}

.company-info {
width: 50%;
}

.company-info h2 {
background-color: var(--baby-blue);
width: fit-content;
padding: 0.6rem;
border-radius: 0.5rem;
font-weight: 600;
color: var(--main-text-color);
margin-bottom: 1rem;
}

.company-info p {
color: var(--main-text-color);
font-weight: 300;
}

/* -------------- 2nd Fold */

.fold-2 {
padding: var(--page-padding);
display: flex;
gap: 3rem;
background-color: var(--baby-blue);
color: var(--main-text-color);
}

.feature-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}

.feature-wrapper h3 {
font-weight: 600;
text-align: center;
margin-bottom: 0.7rem;
}

/* -------------- Footer */

footer {
padding: 3% 10%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
color: var(--footer-text-color);
font-weight: 300;
font-size: 0.875rem;
}

/* -------------- Media Queries */

@media screen and (min-width: 641px) {
.hero-usp-mobile {
display: none;
}
}

@media screen and (max-width: 640px) {
header {
padding: 0.3rem 1rem;
}

.hide-this-in-mobile {
display: none;
}

.hero {
padding: 4rem 1rem 0;
}

.hero-contents {
background-image: none; 
gap: 3rem;
}

.hero-headline {
flex-direction: column;
gap: 1rem;
align-items: center;
}

.hero-headline h1 {
    font-size: 1.5rem;
}

.hero-usp-desktop {
display: none;
}

.hero-usp-mobile p {
font-size: 0.75rem;
}

.fold-1 {
padding: var(--mobile-page-padding);
gap: 3rem;
}

.fold-1-content-wrapper, .fold-1-content-wrapper:nth-child(2) {
flex-direction: column;
}

.fold-1-content-wrapper img, .company-info {
width: 80%;
height: auto;
}

.fold-2 {
padding: var(--mobile-page-padding);
flex-direction: column;
align-items: center;
}

.feature-wrapper {
    width: 80%;
    gap: 1.5rem;
}
}