@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Space+Grotesk:wght@300..700&display=swap');

/* // <weight>: Use a value from 200 to 800
// <uniquifier>: Use a unique and descriptive class name

.manrope-<uniquifier> {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

// <weight>: Use a value from 300 to 700
// <uniquifier>: Use a unique and descriptive class name

.space-grotesk-<uniquifier> {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
} */

* {
    margin: 0;
    padding: 0;
}

body {
   font-family: "Space Grotesk", sans-serif;
   font-optical-sizing: auto;
}

header, nav {
    width: 100%;
    height: 15vh;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background-color: #FFFFFF;
    position: fixed;
    z-index: 10;
}

#div_1 {
    margin: 0.5rem 3.5rem;
}

#div_2 {
    width: 40%;
    height: 40%;
    margin-left: 1rem;
}

#div_3 {
    width: 19%;
    display: flex;
    justify-content: space-between;
}

.navigation {
    display: flex;
    justify-content: space-between;
    margin: 0.5rem 0.5rem;
    list-style: none;
    font-size: 14px;
    position: relative;
}

.navigation:hover {
    cursor: pointer;
}

.fa-sort-down {
    font-size: 8px;
    position: absolute;
    margin-top: 5px;
    margin-left: 5px;
}

.nav_btn {
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    background-color: #854AF6;
    color: #FFFFFF;
}

.nav_btn:hover {
    background-color: #E4E4E4;
    color: #161616;
    cursor: progress;
}

.hero_container {
    width: 100%;
    height: 120vh;
    background: #ce23de;
    background: linear-gradient(120deg, rgba(206, 35, 222, 1) 1%, rgba(8, 48, 194, 1) 63%, rgba(40, 222, 195, 1) 100%);
    position: relative;
    padding-top: 200px;
}

.parent {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

#hero_1 {
    width: 445px;
    height: 420px;
}

h1 {
    color: #FFFFFF;
    font-size: 44px;
    font-family: "Manrope", sans-serif;
    line-height: 1.2em;
}

p {
    color: #FFFFFFCC;
    font-size: 20px;
    margin-top: 30px;
}

#hr_1_btn {
    margin-top: 70px;
    margin-left: 10px;
    padding: 20px 35px;
    border-radius: 30px;
    border: none;
    color: #FFFFFF;
    background-color: #1C1C1F;
}

#hr_1_btn:hover {
    cursor: progress;
    color: #1C1C1F;
    background-color: #FFFFFF;
}

#hero_2 {
    width: 580px;
    height: 480px;
}

#hero_img {
    width: 580px;
    height: 480px;
}