/**
* ! style rules for sectionOne
**/

.sectionOne__left--text {
  font-size: var(--body);
  font-family: var(--font-2);
  color: var(--color-white-75);
}

.sectionOne__left--btn {
  align-self: start;
  margin-top: 20px;
}

/**
* ! style rules for sectionTwo
**/

.sectionTwo {
  padding: 40px 0;
  display: grid;
  gap: 30px;
}

.sectionTwo__logo {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.sectionTwo__logo img {
  /* border: 2px solid red; */
  justify-self: center;
  align-self: center;
}

.sectionTwo__content--text {
  font-size: var(--sub);
  font-family: var(--font-2);
}

.sectionTwo__btn {
  justify-self: center;
}

/**
* ! style rules for sectionThree
**/

.sectionThree__right--btn {
  align-self: start;
  margin-top: 20px;
}

.sectionThree__right--text {
  color: var(--color-dark-50);
  font-family: var(--font-2);
  font-size: var(--body);
}

/**
* ! style rules for sectionFour
**/

.sectionFour__left--text {
  color: var(--color-dark-50);
  font-family: var(--font-2);
  font-size: var(--body);
}

.sectionFour__left--btn {
  align-self: start;
  margin-top: 20px;
}

/**
* ! style rules for sectionFive
**/

.sectionFive {
  display: grid;
  gap: 30px;
  margin-top: 15px;
  margin-bottom: 30px;
}

.sectionFive__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

[class^="sectionFive__cards--"] {
  /* border: 2px solid red; */
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-shadow: var(--shadow-1);
  border-radius: 5px;
  padding: 20px 25px;
}

[class^="sectionFive__cards--"] .name {
  font-family: var(--font-1);
  font-size: var(--h5);
  font-weight: bold;
}

[class^="sectionFive__cards--"] .position {
  font-family: var(--font-2);
  color: var(--color-dark-75);
  text-transform: uppercase;
}

.sectionFive__content--text {
  font-size: var(--sub);
  font-family: var(--font-2);
}

.sectionFive__btn {
  justify-self: center;
}

/**
* ! Adding media queries  
**/

@media (max-width: 1200px) {
  .sectionTwo__logo {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}

@media (max-width: 1024px) {
}

@media (max-width: 768px) {
  .sectionOne__left,
  .sectionFour__left {
    order: 1;
  }
  .sectionOne__right,
  .sectionFour__right {
    order: 0;
  }

  .sectionFive__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .sectionTwo__logo {
    grid-template-columns: repeat(1, 1fr);
  }
  .sectionFive__cards {
    grid-template-columns: repeat(1, 1fr);
  }
}