.mission {
  width: 100%;
  height: 835px;
  position: relative;
  background-image: url("static/img/student2.jpg");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* Remove any fixed height to allow the section to expand with content */
}

@media (max-width: 868px) {
  .mission {
    min-height: 1000px;
  }
}
.mission__gradient {
  position: absolute;
  top: -2px;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("static/img/gradient.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.mission__container {
  display: flex;
  flex-direction: initial;
  flex-wrap: initial;
  justify-content: space-between;
  /* align-items: center; */
  align-items: stretch;
}
@media (max-width: 868px) {
  .mission__container {
    flex-direction: column;
    justify-content: flex-start;
  }
}
.mission__item {
  flex: 1;
  width: 360px;
  background-color: white;
  padding: 36px;
  /* position: relative; */
  /* max-width: calc(100vw - 150px); */
  /* min-height: auto; */

}
.mission__item__title {
  /* height: 85px; */
  max-width: 70%;         /* Ensure the image scales responsively */
  height: auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* margin-bottom: 24px; */
}
.mission__item h4 {
  font-size: 1.5rem;
  color: #2f1664;
  font-weight: 700;
  line-height: initial;
  text-align: initial;
  padding: 0;
  margin: 0;
}
.mission__item p {
  font-size: 1.09rem;
  color: #2f1664;
  font-weight: 600;
  line-height: initial;
  text-align: initial;
  margin-top: 16px;
}
.mission__ourvission,
.mission__ourmission {
  border-radius: 55px;
  min-height: auto; /* Remove fixed min-height to allow content to dictate size */
  margin-top: 16px;
  position: relative; /* Ensure it's positioned relative to allow z-index to work correctly */
  z-index: 2; /* Set z-index higher to keep these elements on top if needed */
}

.mission__ourmission {
  margin-right: 170px;
}

.mission__ourvission {
  margin-left: 150px;
}

@media (max-width: 868px) {
  .mission__ourvission {
    margin-top: 80px;
    /* min-height: auto; */
  }
}
@media (max-width: 868px) {
  .mission {
    background-attachment: scroll; /* Fixed attachment can cause issues on mobile */
  }
  .mission__container {
    flex-direction: column;
    align-items: stretch; /* Stretch items to take full width */
  }
  .mission__ourvission,
  .mission__ourmission {
    width: auto; /* Allow item to take the full width of its container */
    max-width: none; /* Remove max-width to allow it to expand */
    margin-top: 50; /* Adjust margin to ensure elements don't overlap */
    min-height: auto;

  }

  .mission__ourmission {
    margin-right: 0px;
  }

  .mission__ourvission {
    margin-left: 0px;
  }

}

/* Remove the transform translations to prevent elements from overlapping */
.mission__ourmission::after,
.mission__ourvission::after {
  position: absolute;
  content: " ";
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  z-index: 1; /* Keep pseudo-elements behind the content */
}

.abilities {
  width: 100%;
  min-height: 450px;
  background-image: url("static/img/color-lines.svg");
  background-size: auto;
  background-position: calc(100%) calc(50% + 10px);
  background-repeat: no-repeat;
  margin-top: 0; /* Replace with an appropriate value */

}
/* iPhone and similar small devices */
@media (max-width: 768px) { /* Adjust the max-width as needed for your design */
  .abilities {
    background-position: calc(100%) calc(50%);
  }
}

@media (max-width: 540px) { /* Adjust the max-width as needed for your design */
  .abilities {
    background-image: none;
  }
}

.about_diamond_p {
  padding: 30px 0px 100px 0px;
  text-align: center;
  font-size: 25.5px;
  font-weight: 600;
  color: #2f1664;
}

@media (max-width: 430px) {
  .about_diamond_p {
    padding: 30px 11px 30px 11px;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: #2f1664;
  }
}

.abilities__container.group1 {
  box-sizing: border-box;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: initial;
  flex-wrap: initial;
  /* justify-content: space-between; */
  align-items: stretch;
  align-content: initial;
}

.abilities__container.group2 {
  box-sizing: border-box;
  width: 100%;
  margin-top: 150px;
  display: flex;
  flex-direction: initial;
  flex-wrap: initial;
  /* justify-content: space-between; */
  align-items: stretch;
  align-content: initial;
}

@media (max-width: 768px) {
  .abilities__container.group1, .abilities__container.group2 {
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
  }
  .abilities__container.group2 {
    margin-top: 0px;
  }
}
@media (max-width: 968px) and (-ms-high-contrast: none),
  (max-width: 968px) and (-ms-high-contrast: active) {
  .abilities__container.group1 {
    /* IE10+ CSS styles go here */
  }
  .abilities__container.group1 [dir="rtl"], .abilities__container.group2 [dir="rtl"] {
    padding-right: size;
  }
  .abilities__container.group1 [dir="ltr"], .abilities__container.group2 [dir="ltr"] {
    padding-left: size;
  }
}
@media (max-width: 968px) and (-ms-high-contrast: none),
  (max-width: 968px) and (-ms-high-contrast: active) {
  .abilities__container.group1 {
    /* IE10+ CSS styles go here */
  }
  .abilities__container.group1 [dir="rtl"], .abilities__container.group2 [dir="rtl"] {
    padding-left: size;
  }
  .abilities__container.group1 [dir="ltr"], .abilities__container.group2 [dir="ltr"] {
    padding-right: size;
  }
}
.abilities__item {
  background: #2f1664;
  border-radius: 22px 56px 22px 22px;
  padding: 32px;
  width: auto; /* Adjust width to be auto to fit content */
  max-width: calc(100% - 64px); /* Adjust max-width to account for padding and prevent overflow */
  box-sizing: border-box; /* Make sure padding is included in the width calculation */
  margin: 10px; /* Add margin to create space between items */
  transition-property: transform;
  transition-duration: 0.23s;
  transition-timing-function: ease;
  margin-bottom: 60px;
}
@media (max-width: 968px) {
  .abilities__item {
    width: calc(50% - 10px);
    margin-bottom: 80px;
  }
}
@media (max-width: 576px) {
  .abilities__item {
    width: calc(100%);
    margin-bottom: 80px;
  }
}
.abilities__item__head {
  transform-origin: bottom left;
  background: #ffbe22;
  width: 82px;
  height: 82px;
  border-radius: 48.5px 48.5px 48.5px 0;
  margin-top: -64px;
  display: flex;
  flex-direction: initial;
  flex-wrap: initial;
  justify-content: center;
  align-items: center;
  align-content: initial;
}
.abilities__item__head i {
  font-size: 2.6rem;
  color: #2f1664;
}
.abilities__item p {
  font-size: 1.3rem;
  color: white;
  font-weight: 600;
  line-height: initial;
  text-align: initial;
}
@media (min-width: 968px) {
  .abilities__item:nth-child(even) {
    transform: translateY(80px) scale(1);
  }
}
@media (min-width: 968px) {
  .abilities__item:hover {
    transform: scale(1.05);
  }
  .abilities__item:hover:nth-child(even) {
    transform: translateY(80px) scale(1.05);
  }
}

.about {
  padding-top: 80px;
  padding-bottom: 80px;
  max-width: 100%;
}
.about > .container {
  position: relative;
}
.about__logo {
  width: 170px;
  height: 140px;
  position: absolute;
  top: -70px;
  left: 30px;
  background-image: url("static/img/fullwhite-logo.png");
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
  z-index: 1;
}
.about__container {
  background: rgba(255, 255, 255, 0.58);
  border-radius: 68px;
  backdrop-filter: blur(1);
  padding: 80px 80px 0 80px;
  position: relative;
  display: flex;
  flex-direction: initial;
  flex-wrap: initial;
  justify-content: space-between;
  align-items: flex-start;
  align-content: initial;
}
@media (max-width: 968px) {
  .about__container {
    flex-direction: column;
  }
}
.about__container::before {
  width: 449px;
  height: 378px;
  position: absolute;
  top: -150px;
  left: -80px;
  z-index: -1;
  content: " ";
  background-image: url("static/img/color-bulb.png");
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
}
.about__container::after {
  width: 350px;
  height: 340px;
  position: absolute;
  right: -104px;
  bottom: -112px;
  content: " ";
  z-index: -1;
  background-image: url("static/img/color-bulb2.png");
  background-size: contain;
  background-position: bottom right;
  background-repeat: no-repeat;
}
.about__container .about__content {
  margin-inline-start: 40px;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .about__container .about__content {
    /* IE10+ CSS styles go here */
  }
  .about__container .about__content [dir="rtl"] {
    margin-right: size;
  }
  .about__container .about__content [dir="ltr"] {
    margin-left: size;
  }
}
.about__container .about__content p.title {
  font-size: 1.3rem;
  color: #2f1664;
  font-weight: 700;
  line-height: initial;
  text-align: initial;
}
.about__container .about__content p.desc {
  font-size: 1.1rem;
  color: #2f1664;
  font-weight: 400;
  line-height: initial;
  text-align: initial;
}
@media (max-width: 968px) {
  .about__container .about__content {
    margin-inline-start: 0px;
  }
}
@media (max-width: 968px) and (-ms-high-contrast: none),
  (max-width: 968px) and (-ms-high-contrast: active) {
  .about__container .about__content {
    /* IE10+ CSS styles go here */
  }
  .about__container .about__content [dir="rtl"] {
    margin-right: size;
  }
  .about__container .about__content [dir="ltr"] {
    margin-left: size;
  }
}
.about__container .about__img {
  width: 300px;
  height: 390px;
  border-radius: 32px;
  flex-shrink: 0;
  transform: translateY(48px);
  margin-inline-start: 24px;
  background-image: url("static/img/caps-1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .about__container .about__img {
    /* IE10+ CSS styles go here */
  }
  .about__container .about__img [dir="rtl"] {
    margin-right: size;
  }
  .about__container .about__img [dir="ltr"] {
    margin-left: size;
  }
}
@media (max-width: 868px) {
  .about__container .about__img {
    margin-inline-start: auto;
    width: calc(100% - 100px);
    height: 310px;
  }
}
@media (max-width: 868px) and (-ms-high-contrast: none),
  (max-width: 868px) and (-ms-high-contrast: active) {
  .about__container .about__img {
    /* IE10+ CSS styles go here */
  }
  .about__container .about__img [dir="rtl"] {
    margin-right: size;
  }
  .about__container .about__img [dir="ltr"] {
    margin-left: size;
  }
}
@media (max-width: 576px) {
  .about__container .about__img {
    width: 100%;
    height: 290px;
  }
}

.services__container {
  margin-top: 16px;
  width: 100%;
  min-height: 360px;
  background-color: #2f1664;
  background-image: url("static/img/network-path.png");
  background-size: 100vw auto;
  background-position: center calc(100% + 50px);
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.services__container .container {
  position: relative;
}
.services .swiper {
  height: 450px;
}
.services .swiper .swiper-button-prev,
.services .swiper .swiper-button-next {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  height: 40px;
}
.services__slide {
  padding-inline-start: 80px;
  padding-inline-end: 80px;
  display: flex;
  flex-direction: initial;
  flex-wrap: initial;
  justify-content: space-between;
  align-items: flex-start;
  align-content: initial;
  box-sizing: border-box;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .services__slide {
    /* IE10+ CSS styles go here */
  }
  .services__slide [dir="rtl"] {
    padding-right: size;
  }
  .services__slide [dir="ltr"] {
    padding-left: size;
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .services__slide {
    /* IE10+ CSS styles go here */
  }
  .services__slide [dir="rtl"] {
    padding-left: size;
  }
  .services__slide [dir="ltr"] {
    padding-right: size;
  }
}
@media (max-width: 768px) {
  .services__slide {
    flex-direction: column;
    padding: 32px;
  }
}
.services__slide__content {
  margin-inline-end: 240px;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .services__slide__content {
    /* IE10+ CSS styles go here */
  }
  .services__slide__content [dir="rtl"] {
    margin-left: size;
  }
  .services__slide__content [dir="ltr"] {
    margin-right: size;
  }
}
@media (max-width: 768px) {
  .services__slide__content {
    margin-inline-end: 0px;
  }
}
@media (max-width: 768px) and (-ms-high-contrast: none),
  (max-width: 768px) and (-ms-high-contrast: active) {
  .services__slide__content {
    /* IE10+ CSS styles go here */
  }
  .services__slide__content [dir="rtl"] {
    margin-left: size;
  }
  .services__slide__content [dir="ltr"] {
    margin-right: size;
  }
}
.services__slide__content h4 {
  font-size: 1.5rem;
  color: white;
  font-weight: 600;
  line-height: initial;
  text-align: initial;
  margin: 56px 0 0 0;
}
.services__slide__content p {
  margin-top: 8px;
  margin-bottom: 48px;
  font-size: 1.3rem;
  color: white;
  font-weight: 200;
  line-height: initial;
  text-align: initial;
}
.services__slide__img {
  border-radius: 16px;
  overflow: hidden;
  width: 490px;
  max-width: calc(100% - 10px);
  max-height: 350px;
  object-position: center;
  flex-shrink: 0;
  transform: translateY(56px);
  box-shadow: 0 33px 46px rgba(0, 0, 0, 0.12);
}
.services__slide__img img {
  width: 100%;
  height: auto;
}
@media (max-width: 768px) {
  .services__slide__img {
    height: auto;
  }
}

.helps__container {
  margin-top: 16px;
  display: flex;
  flex-direction: space-between;
  flex-wrap: wrap;
  justify-content: center;
  align-items: initial;
  align-content: initial;
}
.helps__item {
  background-color: #f2f5ff;
  padding: 8px;
  border-radius: 100px 0 0 100px;
  flex-shrink: 0;
  margin: 16px 32px;
  position: relative;
  transform: scale(1);
  display: flex;
  flex-direction: flex-start;
  flex-wrap: initial;
  justify-content: center;
  align-items: center;
  align-content: initial;
  transition-property: transform;
  transition-duration: 0.23s;
  transition-timing-function: ease;
  width: 40%;
}
@media (max-width: 768px) {
  .helps__item {
    width: calc(100% - 60px);
    justify-content: flex-start;
    margin-left: 5px;
  }
}
.helps__item::after {
  position: absolute;
  content: " ";
  width: 32px;
  height: 100%;
  right: -31px;
  top: 0;
  z-index: -1;
  background-image: url("static/img/helps-right.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.item-icons {
  fill: #ffffff; /* Initial color (white) */
  transition: fill 0.3s ease; /* Smooth transition */
}

/* When the .helps__item container is hovered, change the SVG color */
.helps__item:hover .item-icons {
  fill: #2f1664; /* Change to purple on hover */
}
/* .helps__item:last-child {
  border-radius: 100px;
  padding-inline-end: 32px;
} */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .helps__item:last-child {
    /* IE10+ CSS styles go here */
  }
  .helps__item:last-child [dir="rtl"] {
    padding-left: size;
  }
  .helps__item:last-child [dir="ltr"] {
    padding-right: size;
  }
}
/* .helps__item:last-child::after {
  display: none;
} */
.helps__item__icon {
  flex-shrink: 0;
  border-radius: 100px;
  background-color: #2f1664;
  width: 75px;
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.helps__item__icon i {
  font-size: 2rem;
  color: white;
}
.helps__item h6 {
  margin: 0;
  margin-inline-start: 16px;
  margin-inline-end: 16px;
  font-size: 1.3rem;
  color: #2f1664;
  font-weight: 700;
  line-height: initial;
  text-align: initial;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .helps__item h6 {
    /* IE10+ CSS styles go here */
  }
  .helps__item h6 [dir="rtl"] {
    margin-right: size;
  }
  .helps__item h6 [dir="ltr"] {
    margin-left: size;
  }
}
.helps__item:hover {
  transform: scale(1.05);
  background-color: #2f1664;
}
.helps__item:hover h6 {
  color: white;
}
.helps__item:hover::after {
  background-image: url("static/img/helps-right__active.png");
}
.helps__item:hover .helps__item__icon {
  background-color: #f2f5ff;
}
.helps__item:hover .helps__item__icon i {
  color: #2f1664;
}

.contact-form {
  width: 100%;
}
.contact-form input,
.contact-form textarea,
.contact-form button {
  outline: none;
  border: none;
  font-size: 0.9rem;
}
.contact-form input,
.contact-form textarea {
  width: 300px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 12px;
  margin-top: 8px;
  resize: none;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.253);
}
@media (max-width: 840px) {
  .contact-form input,
  .contact-form textarea {
    width: 100%;
  }
}
.contact-form textarea {
  height: 100px;
}
.contact-form button {
  cursor: pointer;
  margin-top: 8px;
  padding: 16px 32px;
  font-weight: bold;
  color: white;
  background: #2f1664;
}