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

.hero {

  padding: 50px 0;

  background-color: var(--light-color);
}


/* Main hero layout */
.hero-container {

  display: grid;

  /*
    Creates 2 equal columns
  */
  grid-template-columns: repeat(2, 1fr);

  gap: 60px;

  align-items: center;

}


/* Small top tag */
.hero-tag {

  display: inline-block;

  background-color: rgba(192, 132, 252, 0.15);

  color: var(--accent-color);

  padding: 10px 18px;

  border-radius: 50px;

  font-size: 14px;

  font-weight: 600;

  margin-bottom: 25px;
}


/* Main heading */
.hero-text h1 {

  font-size: 64px;

  color: var(--primary-color);

  margin-bottom: 25px;

  line-height: 1.1;
}


/* Hero paragraph */
.hero-text p {

  font-size: 18px;

  margin-bottom: 35px;

  max-width: 550px;
}


/* Hero buttons */
.hero-buttons {

  display: flex;

  gap: 20px;

  flex-wrap: wrap;
}


/* Secondary button */
.secondary-btn {

  border: 2px solid var(--primary-color);

  color: var(--primary-color);
}


/* Hover */
.secondary-btn:hover {

  background-color: var(--primary-color);

  color: var(--white-color);

  transform: translateY(-3px);
}


/* Hero image */
.hero-image img {

  width: 100%;

  border-radius: 30px;

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}