/* - Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 */

/* COLORS:
#2f9e44
#2b8a3e
#51cf66
#1e612b
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Roboto", sans-serif;
  line-height: 1;
  font-weight: 400;
}

/* ****HERO SECTION**** */
/* /////////////////// */

.hero-section {
  width: 100%;
  height: 36rem;
  background: linear-gradient(to right, #51cf66, #2f9e44);
  display: flex;
  justify-content: center;
  align-items: center;
}

.heading-hero {
  color: #fff;
  font-weight: 600;
  font-size: 9.6rem;
  letter-spacing: -0.1rem;
}

/* ****CATEGORY SECTION**** */
/* /////////////////// */

.category-section {
  max-width: 112rem;
  width: 100%;
  margin: 9.6rem auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 12.8rem;
  row-gap: 4.8rem;
}

.logo_div {
  background-color: #368b44;
  display: flex;
  width: 100%;
  height: 24rem;
  border-radius: 2.4rem;
  justify-content: center;
  align-items: center;
  padding: 2.4rem 1.2rem;
  box-shadow: 0.7rem 0.7rem 0.5rem rgba(0, 0, 0, 0.6);
}

.logo_link {
  transition: all 0.3s;
}

.logo_link:hover,
.logo_link:active {
  scale: 1.05;
}

.logo-name {
  color: #fff;
  font-size: 4.8rem;
  font-weight: 500;
}

.logo_machine {
  width: 80%;
}

/* ****RESPONSIVE DESIGN**** */
/* /////////////////// */

@media (max-width: 77em) {
  .heading-hero {
    font-size: 8rem;
  }
}

@media (max-width: 74em) {
  .category-section {
    max-width: 96rem;
  }
}

@media (max-width: 63.25em) {
  .category-section {
    max-width: 80rem;
  }

  .heading-hero {
    font-size: 7.2rem;
  }

  .hero-section {
    height: 32rem;
  }

  .logo_div {
    height: 20rem;
  }
}

@media (max-width: 55.65em) {
  .heading-hero {
    font-size: 6.4rem;
    text-align: center;
  }

  .hero-section {
    height: 28rem;
  }
}

@media (max-width: 53em) {
  .category-section {
    max-width: 72rem;
    column-gap: 11.2rem;
  }

  .logo_div {
    height: 16rem;
  }
}

@media (max-width: 47.5em) {
  .category-section {
    max-width: 64rem;
    column-gap: 11.2rem;
  }

  .logo_div {
    height: 14rem;
  }
}

@media (max-width: 42.5em) {
  .category-section {
    max-width: 58rem;
    column-gap: 9.6rem;
  }

  .logo_div {
    height: 14rem;
  }
}

@media (max-width: 38.75em) {
  .category-section {
    max-width: 52rem;
    column-gap: 8rem;
  }

  .logo_div {
    height: 14rem;
  }
}

@media (max-width: 34.4em) {
  .category-section {
    max-width: 48rem;
    column-gap: 7.2rem;
  }

  .logo_div {
    height: 13rem;
  }
}

@media (max-width: 32.5em) {
  .category-section {
    max-width: 32rem;
    column-gap: 0;
    row-gap: 6.4rem;
    grid-template-columns: 1fr;
  }

  .logo_div {
    height: 18rem;
  }
}

@media (max-width: 30em) {
  .heading-hero {
    font-size: 5.2rem;
  }

  .hero-section {
    height: 24rem;
  }
}

@media (max-width: 25em) {
  .heading-hero {
    font-size: 4.8rem;
  }

  .hero-section {
    height: 24rem;
  }

  .category-section {
    max-width: 28rem;
    row-gap: 6.4rem;
  }

  .logo_div {
    height: 16rem;
  }
}

@media (max-width: 22em) {
  .heading-hero {
    font-size: 4.2rem;
  }

  .hero-section {
    height: 24rem;
  }

  .category-section {
    max-width: 28rem;
    row-gap: 6.4rem;
  }

  .logo_div {
    height: 16rem;
  }
}