.plans {
  padding: 1rem 7rem;
  /* background: red; */
}

.plansContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.heading {
  /* height: 5rem; */
  /* padding: 20px; */
  /* display: flex; */
  /* flex-direction: column; */
  /* place-items: center; */
  /* gap: -10rem; */
  margin-bottom: 3rem;
  color: var(--firstColor);
}

.heading h2 {
  font-size: 50px;
  font-weight: 400;
}

.heading h3 {
  font-weight: 400;
}

/* ARTICLE  */
.plans .content {
  /* display: grid; */
  /* grid-template-rows: repeat(auto-fit, minmax(50% 50%)); */
  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */
  /* justify-content: space-between; */
}

.plans article {
  /* border-radius: 15px; */
  text-align: left;
  padding: 20px;
}

.plans article:nth-child(1) {
  background: rgb(245, 245, 245);
}

.plans article:nth-child(2) {
  background: var(--firstColor);
  color: var(--thirdColor);
}


.plans .top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 15px;
  margin-bottom: 13px;
  border-bottom: solid 1px rgba(32, 32, 32, 0.253);
}

.plans .top .image {
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 35% 15%;
  object-fit: cover;
}

.plans .top .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 35% 15% ;

}

.plans .top span {
  color: rgb(32, 32, 32);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.plans .top span h3 {
  font-size: 20px;
  font-weight: 700;
}

.plans article:nth-child(2) .top span {
  color: var(--thirdColor);
}

.top small {
  color: rgb(167, 159, 159);
}

.plans .top span h4 {
  font-size: 15px;
  font-weight: 600;
}

.plans .middle {
  font-size: 15px;
}

.plans .middle span {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
}

.plans .middle span i {
  /* color: gray; */
}

.plans .middle span p {
  max-width: 15rem;
}

.plans .bottom {
  display: flex;
  align-items: center;
  /* justify-content: center; */
}

.plans .bottom button {
  width: 15rem;
  height: 4rem;
  padding: 15px 35px;
  background: var(--firstColor);
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--thirdColor);
}

.plans .bottom button:hover {
  background: transparent;
  border: solid 1px var(--thirdColor);
}


@media only screen and (max-width: 991px) {
  .plans{padding: 1rem 1.5rem;}
}
@media only screen and (min-width: 991px) {
  .plans .content {display: flex;}
}