.vision_section {

  display: grid;

  grid-template-columns: 40% auto;

  justify-content: center;

  align-items: center;

  padding: 10px 10px;

  width: 78%;

  gap: 20px;

  margin: 30px auto 150px auto;

}

.vision_section.mission-section {
  display: flex;
  justify-content: center;
  align-items: center;
}



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

/* Vision text section */

.vision_text_section {

  display: flex;

  justify-content: center;

  align-items: start;

  flex-direction: column;

  gap: 25px;

  /* padding-left: 100px; */

}



.vision_text_section h2 {

  font-size: 48px;

  color: var(--color-pink);

  letter-spacing: 2px;

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

}



.vision_text_section h3 {

  font-size: 38px;

  color: var(--Faustina-font);

  font-weight: 700;

  width: 90%;

}



.vision_text_section p {

  font-size: 23px;

  color: var(--color-black);

  font-weight: 400;

  width: 80%;

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

}



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

/* vision Img section  */

.vision_img_section {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  gap: 20px;

  /* background-color: var(--color-pink); */

  background: linear-gradient(to top, #011f53, #81382a);

  padding: 40px 20px;

  border-radius: 40px;

}



.vision_img_section p {

  font-size: 20px;

  color: white;

  font-weight: 400;

  text-align: left;

  width: 90%;

  margin: 0 auto;

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

}



.vision_img_box_section {

  display: flex;

  justify-content: space-between;

  align-items: center;

  width: 100%;

  position: relative;

  padding: 0 10px;

}



.vision_img_box {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  gap: 10px;

}



.vision_img_box img {

  width: 120px;

  height: 120px;

  object-fit: contain;

}



.vision_img_box span {

  color: white;

  font-size: 24px;

  font-weight: 700;

}



.excellence_box {

  background-color: white;

  padding: 50px 10px;

  border-radius: 40px;

  position: absolute;

  margin: 0 auto;

  width: 50%;

  top: 0%;

  left: 22%;

  text-align: left;

  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);

}



.excellence_box span {

  font-size: 24px;

  color: black;

  text-align: left;

  font-weight: 700;

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

}

.excellence_box p {

  font-size: 18px;

  color: black;

  text-align: left;

  font-weight: 400;

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

}



.excellence_icon {

  width: 50px;

  height: 50px;

  object-fit: contain;

  /* margin-right: 10px; */

}



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

/* for Medium  */



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

  .vision_section {

    grid-template-columns: 100%;

  }



  .about_story_section {

    flex-direction: column;

  }

}



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

  .vision_section {

    grid-template-columns: 1fr;

    width: 70%;

    align-items: center;

    margin: 20px auto;

  }



  .vision_text_section {

    padding-left: 0px;

  }



  .vision_text_section h3 {

    font-size: 38px;

  }



  .vision_img_box_section {

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 50px 0;

  }



  .excellence_box {

    position: relative;

    width: 90%;

    left: 2%;

    margin: 10px auto;

  }

}



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

/* Responsive Design  */



@media (max-width: 768px) {

  .vision_section {

    grid-template-columns: 1fr;

    width: 90%;

    align-items: center;

    padding: 0px;

  }



  .vision_text_section {

    padding-left: 0px;

  }

  .vision_img_section {

    width: 100%;

  }

  .about_story_section .text_col p,

  .about_story_section .text_col h3 {

    width: 100%;

  }



  .vision_text_section h3 {

    font-size: 28px;

  }



  .vision_img_box_section {

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }



  .excellence_box {

    position: relative;

    width: 90%;

    left: 2%;

    margin: 10px auto;

  }

}