:root {
  --pink: #f38882;
  --orange: #fbdb8e;
  --pink-orange: #f5ab86;
  --gray: #d9d9d7;
  --gray-blue1: #646e92;
  --gray-blue2: #647194;
  --purple: #615681;
  --purple-brighter: #5d2f69;
  --black: #000;
  --white: #fff;
  --heading-1: 60px;
  --heading-2: 40px;
  --heading-3: 30px;
  --text-description: 17px;
  --font-md-1: 25px;
  --left-padding: 30px;
  --right-padding: 30px;
}

@import url("https://fonts.googleapis.com/css2?family=Faster+One&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

html {
  padding: 0;
  margin: 0;
}

body {
  font-family: "Roboto", Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background: var(--purple);
  min-height: 70px;
}

header #header-logo {
  margin: 1px 10px 1px 10px;
}

header h1 {
  font-family: "Faster One";
  background: linear-gradient(
    75deg,
    var(--orange),
    var(--pink)
  ); /* Define the linear gradient background */
  -webkit-background-clip: text; /* Use the text as the clipping mask for the background */
  background-clip: text;
  color: transparent; /* Make the text color transparent */
  font-size: 50px;
  margin: 0;
  padding: 2px;
  text-align: center;
  flex-grow: 1;
}

section > div {
  padding: 40px var(--left-padding) 40px var(--right-padding);
}

.hero-container {
  height: calc(100vh - 60px);
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: linear-gradient(var(--gray-blue1), var(--pink));
}

.hero-container-header {
  color: var(--white);
  font-size: var(--heading-1);
  font-weight: bolder;
}
.hero-container-sub-header {
  color: var(--gray);
  font-size: var(--heading-2);
  font-weight: bold;
}
.hero-container-btn {
  color: var(--white);
  font-size: var(--font-md-1);
  background-color: var(--pink);
  height: 50px;
  width: 290px;
  box-shadow: var(--pink-orange) 1px 1px 1px;
  border-radius: 5px;
}

.section-header-text {
  font-size: var(--heading-1);
  font-weight: bolder;
  color: var(--gray-blue1);
  margin: 70px 0 70px 0;
  text-align: center;
}

.our-projects-project {
  padding: 20px;
  box-shadow: 0px 4px 50.7px rgba(0, 0, 0, 0.2);
  border-radius: 30px;
  width: auto;
  height: 450px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.our-projects-project-title {
  font-size: var(--heading-3);
  font-weight: bolder;
  color: var(--gray-blue1);
  margin: 20px 0 20px 0;
}

.text-description-purple {
  font-size: var(--text-description);
  color: var(--gray-blue1);
  text-align: center;
}

.benefits-column {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
}
.benefits-column img {
  height: 140px;
  width: auto;
}
.benefits-column-text {
  font-size: var(--heading-2);
  text-align: center;
  font-weight: bold;
  color: var(--pink);
}

#contact {
  margin-top: 70px;
}
#contact > div {
  background-color: var(--purple);
  padding: 50px 0 0 0;
}
.contact-title {
  color: var(--white);
  font-size: var(--heading-2);
  font-weight: normal;
  margin-bottom: 10px;
}
.contact-icons img {
  height: 30px;
  width: auto;
}

.contact-copyright {
  margin-top: 50px;
  color: var(--white);
  font-weight: 300;
}

.clickable-card:hover {
  transform: scale(1.01);
  transition: ease-in-out;
  transition-duration: 200ms;
}

@media (max-width: 700px) {
  #chains h2 {
    margin: 20px 0 10px 0;
  }
}

@media (max-width: 700px) {
  header h1 {
    font-size: 25px;
  }
}