.services_section {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  gap: 10px;

  width: 78%;

  margin: 0 auto 80px auto;

  position: relative;

}



.services_headings {

  display: flex;

  justify-content: space-between;

  align-items: start;

  padding: 2rem;

  gap: 2rem;

  border-radius: 40px;

  background: var(--gradient-bg);

  padding-bottom: 250px;

}



.services_headings div {

  text-align: start;

}



.services_headings div h2 {

  font-size: 24px;

  color: white;

  letter-spacing: 2px;

  font-family: var(--Gabarito-font);

  font-weight: 500;

}



.services_headings div h3 {

  font-size: 40px;

  color: white;

  font-weight: 700;

  text-align: left;

  padding: 8px 0;

  width: 80%;

  font-family: var(--Faustina-font);

}



.services_headings p {

  font-size: 22px;

  color: white;

  font-weight: 400;

  width: 60%;

  text-align: left;

  font-family: var(--Gabarito-font);

}



/* //////////////////////// */



.services_box_section {



  grid-template-columns: 1fr 1fr 1fr 1fr;

  justify-content: center;

  align-items: center;

  gap: 15px;

  position: absolute;

  top: 50%;

  width: 95%;
    display: flex;
  flex-wrap: wrap;

}



.services_box {

  background-color: white;

  padding: 25px 20px;

  width: 300px;

  height: 280px;

  border-radius: 40px;

  color: white;

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  gap: 20px;

}



.service_no {

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  text-align: center;

  font-size: 40px;

  font-weight: 900;

  font-family: var(--Faustina-font);

}



.services_box h4 {

  font-size: 22px;

  font-weight: 700;

  text-align: center;

  font-family: var(--Gabarito-font);

}



.services_box p {

  font-size: 16px;

  font-weight: 300;

  text-align: center;

  color: white;

  /* padding: 2px 0; */

  /* margin: 20px 0; */

  font-family: var(--Gabarito-font);

}



.service_box_btn {

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

  color: white;

  border: none;

  font-family: 300;

  font-size: 14px;

  border-radius: 10px;

  font-family: var(--Fredoka-font);

  cursor: pointer;

  letter-spacing: 2px;

  padding: 10px 20px;

  /* position: absolute;

  bottom: 14%;

  left: 30%; */

}



.service_box_btn a {

  color: white;

}



/* //////////////////////// */

/* Tab Responsive  */



@media screen and (min-width: 1024px) and (max-width: 1400px) {

  .services_section {

    width: 80%;

  }

  .services_box_section {

    grid-template-columns: 1fr 1fr 1fr;

    position: absolute;

    top: 50%;

    /* width: 100%; */

  }

}



@media screen and (min-width: 768px) and (max-width: 1024px) {

  .services_section {

    width: 80%;

  }



  .services_headings {

    /* flex-direction: column;

    align-items: center; */

    padding: 1rem;

  }



  .services_headings p {

    width: 95%;

    text-align: center;

  }



  .services_box_section {

    grid-template-columns: 1fr;

    position: relative;

    top: 0;

    width: 100%;

  }



  .services_box {

    width: 80%;

    margin: auto;

    margin-bottom: 20px;

  }



  .service_no {

    margin: 20px auto;

    bottom: 10%;

  }



  .services_box h4 {

    text-align: left;

    margin-left: 50px;

  }

  .services_box p {

    text-align: left;

    margin-left: 50px;

  }



  .service_box_btn {

    left: 40%;

  }

}



/* //////////////////////// */

/* Mobile Responsive  */

@media (max-width: 768px) {

  .services_section {

    width: 100%;

    padding: 20px;

  }



  .services_headings {

    flex-direction: column;

    align-items: center;

    padding: 1rem;

  }

  .services_headings div h3 {

    width: 100%;

  }



  .services_headings p {

    width: 95%;

    font-size: 18px;

  }



  .services_box_section {

    grid-template-columns: 1fr;

    position: relative;

    top: 0;

    width: 100%;

  }



  .services_box {

    width: 90%;

    margin: auto;

    margin-bottom: 20px;

  }

}