.AboutUs {
  height: 800px;
  width: 100%;
  transition: 0.3s;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  background-image: url("../../../Images/backgroundfreepik2.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-size: cover;
}

.AboutUs-sticky {
  transform: translateY(-100px);
}
/*--------------------------------------------------------MAIN-----------------------------------------------------*/

.AboutUs-image {
  height: 90%;
  width: 40%;
}

.AboutUs-image-coloroverlay {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.AboutUs-right {
  height: 100%;
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.AboutUs-top {
  height: 30%;
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.AboutUs-bottom {
  margin-top: 10px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.AboutUs-bottom-2 {
  height: 50%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}
.AboutUs-bottom-left {
  height: 100%;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.AboutUs-bottom-right {
  height: 100%;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.AboutUs-bullet {
  height: 100px;
  width: 420px;
  border-radius: 15px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  /* box-shadow: rgba(0, 0, 0, 0.176) 0px 16px 48px 0px; */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.AboutUs-bullet-480px {
  height: 100px;
  width: 420px;
  border-radius: 15px;
  margin-bottom: 30px;
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  /* box-shadow: rgba(0, 0, 0, 0.176) 0px 16px 48px 0px; */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.AboutUs-bullet-image-container {
  height: 100%;
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.AboutUs-bullet-image-container img {
  height: 60px;
  width: 60px;

  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-size: cover;
}
.AboutUs-bullet-text {
  width: 100%;
  padding: 0 10px 0 0;
}

.AboutUs-top-text {
  height: 90%;
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.undraw-image {
  position: absolute;
  bottom: 0;
  left: 120px;
  z-index: 1;
}
.undraw-image img {
  height: 500px;
  width: 500px;
}

.AboutUs-coloroverlay {
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

/*--------------------------------------------------------MAIN-----------------------------------------------------*/

/*--------------------------------------------------------TEXT-----------------------------------------------------*/

.AboutUs-bullet-text span {
  font-size: 1.1em;
  font-weight: 800;
  font-family: Montserrat;
  text-align: left;
  color: #222222;
  padding-bottom: 10px;
}

.AboutUs-bullet-text button {
  font-size: 1.1em;
  font-weight: 800;
  font-family: Montserrat;
  text-align: left;
  color: #222222;
  text-decoration: none;
  outline:transparent;
  border:none;
  background-color: transparent;
  padding-bottom: 10px;
}


.AboutUs-bullet-text p {
  font-size: 1em;
  font-weight: 500;
  font-family: Montserrat;
  text-align: left;
  color: #222222;
}

.AboutUs-bullet-titleBIG {
  font-size: 3.5em;
  margin-bottom: 20px;
  font-weight: bolder;
  font-family: Montserrat;
  text-align: left;

  background: linear-gradient(
    109.6deg,
    rgb(6, 183, 249) 11.2%,
    rgb(25, 74, 236) 91.1%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.AboutUs-bullet-titleSMALL {
  font-size: 1em;
  font-family: Montserrat;
  text-align: center;
  color: #222222;
}
/*--------------------------------------------------------TEXT-----------------------------------------------------*/

@keyframes aboutus-bounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

[data-aos="aboutus-bounce"] {
  opacity: 0;
  filter: blur(33px);
  &.aos-animate {
    opacity: 1;
    animation-name: aboutus-bounce;
    animation-duration: 1.2s;
    filter: blur(0);
  }
}

[data-aos="aboutus-bounce-2"] {
  opacity: 0;
  filter: blur(33px);
  &.aos-animate {
    opacity: 1;
    animation-name: aboutus-bounce;
    animation-duration: 1.4s;
    filter: blur(0);
  }
}
[data-aos="aboutus-bounce-3"] {
  opacity: 0;
  filter: blur(33px);
  &.aos-animate {
    opacity: 1;
    animation-name: aboutus-bounce;
    animation-duration: 1.6s;
    filter: blur(0);
  }
}

@media only screen and (max-width: 1440px) {
  .AboutUs-right {
    width: 80%;
  }
  .undraw-image {
    left: -30px;
  }
}

@media only screen and (max-width: 1024px) {
  .AboutUs {
    height: 1000px;
    align-items: flex-start;
  }
  .AboutUs-top {
    height: 20%;
  }
  .AboutUs-right {
    justify-content: flex-start;
  }
  .AboutUs-bullet-titleBIG {
    font-size: 2.3em;
  }
  .AboutUs-bullet-480px {
    display: flex;
  }
  .AboutUs-bottom-right {
    display: none;
  }
  .AboutUs-bottom-2 {
    display: none;
  }
  .undraw-image img {
    height: 300px;
    width: 300px;
  }
  .AboutUs-bullet-titleSMALL {
    text-align: justify;
  }
}

@media only screen and (max-width: 820px) {
  /* .MSI-left {
    padding: 20px 20px 20px 20px;
  } */
}

@media (max-width: 480px) {
  .AboutUs-top {
    width: 100%;
  }
  .AboutUs-right {
    width: 100%;
  }
  .AboutUs-bottom-left {
    width: 100%;
    padding: 0 10px 0 10px;
  }
  .AboutUs-bullet-480px,
  .AboutUs-bullet {
    width: 100%;
    /* scale: 0.8; */
  }
}

@media (max-width: 380px) {
  .AboutUs-right {
    width: 100%;
  }
  .AboutUs-bullet-titleBIG {
    font-size: 1.8em;
  }
}

/*--------------------------------------------------------MISSION-----------------------------------------------------*/

.Mission {
  height: 300px;
  width: 100%;
  margin-bottom: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/*--------------------------------------------------------MAIN-----------------------------------------------------*/
.Mission-container-1 {
  height: 100%;
  width: 20%;
  padding: 30px;
  margin-right: 30px;
  border-radius: 15px;

  box-shadow: rgba(0, 0, 0, 0.176) 0px 16px 48px 0px;
}
.Mission-container-2 {
  height: 100%;
  width: 20%;
  padding: 30px;
  margin-right: 30px;
  border-radius: 15px;

  box-shadow: rgba(0, 0, 0, 0.176) 0px 16px 48px 0px;
}
.Mission-container-3 {
  height: 100%;
  width: 20%;
  padding: 30px;
  margin-right: 30px;
  border-radius: 15px;

  box-shadow: rgba(0, 0, 0, 0.176) 0px 16px 48px 0px;
}

.Mission-image-container {
  height: 35%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.Mission-text-container {
  height: 65%;
  width: 100%;
}
/*--------------------------------------------------------MAIN-----------------------------------------------------*/

/*--------------------------------------------------------TEXT-----------------------------------------------------*/

.Mission-bullet-titleBIG {
  font-size: 1.5em;
  font-weight: 500;
  font-family: Montserrat;
  text-align: center;
  color: #222222;
  padding-bottom: 10px;
}
.Mission-bullet-titleSMALL {
  font-size: 1em;
  font-family: Montserrat;
  text-align: center;
  color: #222222;
}
/*--------------------------------------------------------TEXT-----------------------------------------------------*/

/*--------------------------------------------------------IMAGE-----------------------------------------------------*/
.Mission-image-1 {
  background-image: url("../../../Images/Icons/compassion.png");
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-size: cover;

  height: 100px;
  width: 100px;
  margin-bottom: 30px;
}
.Mission-image-2 {
  background-image: url("../../../Images/Icons/shield.png");
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-size: cover;

  height: 100px;
  width: 100px;
  margin-bottom: 30px;
}
.Mission-image-3 {
  background-image: url("../../../Images/Icons/social-responsibility.png");
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-size: cover;

  height: 100px;
  width: 100px;
  margin-bottom: 20px;
}

/*--------------------------------------------------------IMAGE-----------------------------------------------------*/

[data-aos="Mission-image"] {
  opacity: 0;
  transform: translate(0, 500px);
  filter: blur(33px);
  transition-duration: 1s !important;
  &.aos-animate {
    opacity: 1;
    transform: translate(0, 0);
    filter: blur(0);
  }
}
[data-aos="Mission-title"] {
  opacity: 0;
  transform: translate(0, 500px);
  filter: blur(33px);
  transition-duration: 1.2s !important;
  &.aos-animate {
    opacity: 1;
    transform: translate(0, 0);
    filter: blur(0);
  }
}
[data-aos="Mission-contents"] {
  opacity: 0;
  transform: translate(0, 500px);
  filter: blur(33px);
  transition-duration: 1.3s !important;
  &.aos-animate {
    opacity: 1;
    transform: translate(0, 0);
    filter: blur(0);
  }
}

/*--------------------------------------------------------OUR SERVICES-----------------------------------------------------*/

.OurServices {
  height: 300px;
  width: 100%;
  margin-bottom: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/*--------------------------------------------------------MAIN-----------------------------------------------------*/
.OurServices-container-1 {
  height: 100%;
  width: 20%;
  padding: 30px;
  margin-right: 30px;
  border-radius: 15px;

  box-shadow: rgba(0, 0, 0, 0.176) 0px 16px 48px 0px;
}

.OurServices-image-container {
  height: 35%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.OurServices-text-container {
  height: 65%;
  width: 100%;
}
/*--------------------------------------------------------MAIN-----------------------------------------------------*/

/*--------------------------------------------------------TEXT-----------------------------------------------------*/
.OurServices-bullet-titleBIG {
  font-size: 1.5em;
  font-weight: 500;
  font-family: Montserrat;
  text-align: center;
  color: #222222;
  padding-bottom: 10px;
}
.OurServices-bullet-titleSMALL {
  font-size: 1em;
  font-family: Montserrat;
  text-align: center;
  color: #222222;
}
/*--------------------------------------------------------TEXT-----------------------------------------------------*/

/*--------------------------------------------------------IMAGE-----------------------------------------------------*/

.OurServices-image-1 {
  background-image: url("../../../Images/Icons/compassion.png");
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-size: cover;

  height: 100px;
  width: 100px;
  margin-bottom: 30px;
}

/*--------------------------------------------------------IMAGE-----------------------------------------------------*/

/*--------------------------------------------------------WE ARE MSI-----------------------------------------------------*/

.MSI {
  height: 550px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.MSI-sticky {
  transform: translateY(-100px);
}
/*--------------------------------------------------------MAIN-----------------------------------------------------*/
.MSI-main {
  height: 100%;
  width: 80%;
  padding: 0 0 50px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
}
.MSI-left {
  height: 90%;
  width: 50%;
  padding: 20px 20px 20px 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
}
.MSI-right {
  height: 90%;
  width: 50%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.MSI-r-top {
  height: 50%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

.MSI-r-bottom {
  height: 50%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.MSI-content {
  height: 90%;
  width: 30%;
  /* box-shadow: rgba(0, 0, 0, 0.176) 0px 16px 48px 0px; */
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* cursor: pointer; */
}
.MSI-content-480px {
  height: 90%;
  width: 30%;
  /* box-shadow: rgba(0, 0, 0, 0.176) 0px 16px 48px 0px; */
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  border-radius: 15px;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* cursor: pointer; */
}

/*--------------------------------------------------------MAIN-----------------------------------------------------*/

/*--------------------------------------------------------IMAGE-----------------------------------------------------*/
.MSI-content-480px img,
.MSI-content img {
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-size: cover;

  height: 100px;
  width: 100px;
  margin-bottom: 10px;
}

/*--------------------------------------------------------IMAGE-----------------------------------------------------*/

/*--------------------------------------------------------TEXT-----------------------------------------------------*/
.MSI-content-480px p,
.MSI-content p {
  font-size: 1.3em;
  font-family: Montserrat;
  font-weight: 500;
}

.MSI-textBIG {
  font-size: 3em;
  margin-bottom: 20px;
  font-weight: bolder;
  font-family: Montserrat;
  text-align: left;

  background: linear-gradient(
    109.6deg,
    rgb(6, 183, 249) 11.2%,
    rgb(25, 74, 236) 91.1%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.MSI-textSMALL {
  font-size: 1.2em;
  font-family: Montserrat;
  text-align: left;
  color: #222222;
}

/*--------------------------------------------------------TEXT-----------------------------------------------------*/
@media only screen and (max-width: 1755px) {
  .MSI-main {
    width: 90%;
  }
}
@media only screen and (max-width: 1600px) {
  .MSI-main {
    width: 100%;
  }
}
@media only screen and (max-width: 1440px) {
  .MSI-main {
    width: 100%;
  }
}
@media only screen and (max-width: 1100px) {
  .MSI-content-480px img,
  .MSI-content img {
    height: 60px;
    width: 60px;
  }
  .MSI-content-480px p,
  .MSI-content p {
    font-size: 1em;
    font-family: Montserrat;
    font-weight: 500;
    text-align: center;
  }
}
@media only screen and (max-width: 1024px) {
  .MSI {
    height: 400px;
  }
  .MSI-r-top {
    gap: 30px;
    align-items: flex-start;
  }
  .MSI-left {
    height: 100%;
    width: 50%;
    padding: 20px 20px 20px 50px;
  }
  .MSI-right {
    height: 100%;
    width: 50%;
    padding: 20px;
  }
  .MSI-content-480px,
  .MSI-content {
    height: 70%;
    width: 30%;
  }
  .MSI-content-480px img,
  .MSI-content img {
    height: 60px;
    width: 60px;
  }
  .MSI-content-480px p,
  .MSI-content p {
    font-size: 1em;
  }

  .MSI-textBIG {
    font-size: 2.3em;
  }
  .MSI-textSMALL {
    font-size: 1em;
  }
}

@media only screen and (max-width: 820px) {
  .MSI {
    height: 450px;
  }
  .MSI-main {
    padding: 30px 0 0 0;
    width: 100%;
    flex-direction: column;
    align-items: center;
  }
  .MSI-content-480px,
  .MSI-content {
    height: 100%;
  }

  .MSI-left {
    width: 100%;
    padding: 20px 20px 20px 20px;
  }

  .MSI-right {
    width: 100%;
    padding: 0;
    flex-direction: row;
    align-items: flex-start;
  }
  .MSI-r-top {
    height: 80%;
    gap: 10px;
    padding: 0 10px 0 10px;
  }
  .MSI-r-bottom {
    display: none;
  }
  .MSI-content-480px {
    display: flex;
  }
  .MSI-content-480px p,
  .MSI-content p {
    font-size: 0.9em;
  }
  .MSI-textBIG {
    font-size: 1.8em;
  }
  .MSI-textSMALL {
    text-align: justify;
  }
}

@media (max-width: 480px) {
  .MSI {
    height: 450px;
  }
  .MSI-main {
    padding: 30px 0 0 0;
    width: 100%;
    flex-direction: column;
    align-items: center;
  }
  .MSI-content-480px,
  .MSI-content {
    height: 100%;
  }
  .MSI-left {
    width: 100%;
  }
  .MSI-right {
    width: 100%;
    padding: 0;
    flex-direction: row;
    align-items: flex-start;
  }
  .MSI-r-top {
    height: 80%;
    gap: 10px;
    padding: 0 10px 0 10px;
  }
  .MSI-r-bottom {
    display: none;
  }
  .MSI-content-480px {
    display: flex;
  }
  .MSI-content-480px p,
  .MSI-content p {
    font-size: 0.9em;
  }
  .MSI-textBIG {
    font-size: 1.8em;
  }
  .MSI-textSMALL {
    text-align: justify;
  }
}

@media (max-width: 380px) {
  .MSI-left {
    padding: 20px;
  }
  .MSI-content-480px img,
  .MSI-content img {
    height: 40px;
    width: 40px;
  }

  .MSI-content-480px p,
  .MSI-content p {
    font-size: 0.7em;
  }
}
