.inner-hero {
  position: relative;
  height: 500px;
  padding-block: 0;
  container: slider-container / inline-size;

  .img-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: linear-gradient(
        0,
        var(--color-primary-400) 0,
        var(--color-primary-900) 100%
      ) !important;
      opacity: 0.1;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .content {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

    .text {
      max-width: 900px;
      margin-inline: auto;

      * {
        color: white;
        text-align: center;
        text-transform: uppercase;
      }
    }
  }

  h1 {
    font-size: clamp(2.3rem, 6.5cqw, 4rem) !important;
    line-height: calc(clamp(2.3rem, 6.5cqw, 4rem) * 1.3) !important;
    max-width: max(65cqw, 350px);
    margin-inline: auto;
  }

  p {
    text-wrap: balance;
  }
}

.img-text-section {
  &.inverse {
    .row {
      flex-direction: row-reverse;
    }

    /* .text-col {
      * {
        text-align: end;
      }
    } */
  }

  .row {
    display: flex;
    --gap: 3rem;
    gap: var(--gap);

    .img-col {
      width: calc(50% - var(--gap));
    }

    .text-col {
      width: calc(50% - var(--gap));
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    @media (max-width: 1000px) {
      .img-col,
      .text-col {
        width: 100%;
      }
    }
  }

  .title_sections {
    margin-bottom: 1rem;
  }

  .img-container {
    height: 400px;

    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }
}

.text-centered-section {
  * {
    text-align: center;
  }

  .title_sections {
    margin-bottom: 1rem;
  }

  .text-content {
    max-width: 1000px;
    margin-inline: auto;
  }
}

.image-section {
  padding-block: 0;

  img {
    border-radius: 10px;
  }
}

.team-slider {
  position: relative;
  overflow-x: hidden;

  .image_box {
    &::after {
      display: none;
    }
  }

  .team_box.style_four .team_box_outer .image_box {
    position: relative;
    height: 500px;
    overflow-x: hidden;
    overflow-y: visible;
    border-radius: 0;
    margin: auto;
    z-index: 1;

    &::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      max-height: 60%;
      background-color: var(--color-primary-400);
      z-index: 1;
      border-radius: 8px 8px 0 0;
      transition: all 0.4s ease;
    }

    img {
      position: relative;
      z-index: 2;
      transition: all 0.4s ease;
      width: 100%;
      max-width: 90%;
      margin-inline: auto;
      object-fit: contain;
      object-position: bottom;
    }
  }

  .team_box.style_four:hover {
    .image_box {
      &::before {
        max-height: 80%;
      }

      img {
        max-width: 100%;
      }
    }
  }

  .swiper-slide:nth-child(even) {
    .team_box.style_four .team_box_outer .image_box::before {
      background-color: var(--color-primary-300);
    }
  }

  .arrows > div {
    position: absolute;
    top: 40%;
    /* transform: translateY(-300%); */
    z-index: 15;

    &::before {
      box-shadow: unset !important;
      background-color: var(--color-gray-200);

      &::before:hover {
        background-color: var(--color-primary-700);
        color: white;
      }
    }
  }

  .prev-single-one {
    left: 0;
  }

  .next-single-one {
    right: 50px;
  }

  .num_pagination {
    display: none;
  }

  /* To be removed later */

  .swiper-wrapper {
    justify-content: center;
    pointer-events: none;

    .arrows {
      display: none;
    }

    .team_box {
      pointer-events: all;
    }
  }
}

.careers-form-section {
  .contact_form_box_inner {
    background-color: var(--color-primary-400) !important;
  }

  label {
    color: white !important;
  }

  button[type="input"] {
    background-color: var(--color-primary-300) !important;
  }

  .required-message {
    display: block;
    margin-bottom: 0.5rem;

    p {
      color: white;
      font-size: 0.8rem;
      line-height: calc(0.8rem * 1.5);
    }
  }
}

.contact-form-section {
  background-color: white !important;

  .img-container {
    height: 550px;

    img {
      height: 100%;
      object-fit: cover;
    }
  }

  .required-message {
    display: block;
    margin-bottom: 0.5rem;

    p {
      color: var(--color-primary-700);
      font-size: 0.8rem;
      line-height: calc(0.8rem * 1.5);
    }
  }

  .contact_form_box_all {
    h3 {
      /* text-transform: uppercase; */
      color: var(--color-primary-900);
      text-align: center;
      margin-bottom: 2rem;
      font-weight: 400;
    }
  }

  .contact_form_box_inner {
    padding: 0 !important;
    box-shadow: unset !important;
  }

  @media (max-width: 954px) {
    .contact_form_box_all {
      margin-bottom: 1rem !important;
    }
  }

  @media (max-width: 520px) {
    .contact_form_box_all {
      margin-bottom: 2rem !important;
    }
  }

  @media (max-width: 520px) {
    .contact_form_box_all.type_one .contact_form_box_inner {
      padding: 0 !important;
    }

    .col-lg-6 {
      padding: 0 !important;
    }
  }

  .contact_form_box_all input,
  .contact_form_box_all input[type="text"],
  .contact_form_box_all input[type="email"],
  .contact_form_box_all input[type="number"],
  .contact_form_box_all textarea,
  .contact_form_box_all select {
    margin-bottom: 15px !important;
  }

  form {
    & .form-group {
      &.captcha-field {
        margin-bottom: 15px;
      }
    }
  }
}

.partners-form-section {
  .required-message {
    display: block;
    margin-bottom: 0.5rem;

    p {
      color: var(--color-primary-700);
      font-size: 0.8rem;
      line-height: calc(0.8rem * 1.5);
    }
  }
}

.job-list-section {
  .job-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    h3 {
      margin-bottom: 1rem;
    }

    .job-box {
      display: block;
      background-color: white;
      padding: 1rem 2rem;
      display: flex;
      justify-content: space-between;
      transition: all 0.1s ease !important;

      @media (max-width: 550px) {
        padding: 1rem !important;
        gap: 1rem;
        flex-direction: column;
      }

      * {
        transition: all 0.1s ease !important;
      }

      &:hover {
        background-color: var(--color-primary-300);

        * {
          color: white;
        }
      }

      h4 {
        font-size: 1.2rem;
        line-height: calc(1.2rem * 1.5);
        margin-bottom: 0.3rem;
      }
    }
  }
}

.job-post {
  .main-title {
    margin-bottom: 2rem;
    text-align: center;

    h2 {
      margin-bottom: 0.5rem;
    }

    p {
      margin-bottom: 0;
      width: 100%;
      text-align: center;
    }
  }
  h2 {
    color: var(--color-primary-900);
    margin-bottom: 3rem;
  }

  .section {
    margin-bottom: 2rem;

    h3 {
      font-size: 1.3rem;
      margin-bottom: 0.5rem;
    }
  }
}

.activities-section {
  .row.services {
    --gap: 2px;

    gap: var(--gap);

    .service-box {
      width: 100%;
      max-width: calc((1 / 3) * 100% - var(--gap));
      background-color: rgb(243, 243, 243);

      a {
        pointer-events: none;
      }

      p {
        text-align: start;
      }

      .icon_box_all {
        border: none !important;
      }

      &:nth-child(even) {
        background-color: rgb(248, 248, 248);

        &:hover {
          background-color: var(--color-primary-400);
        }
      }

      &:hover {
        background-color: var(--color-primary-700);

        * {
          color: var(--color-text-white);
          transition: all 0.1s ease !important;
        }

        img {
          filter: brightness(0) invert(1);
        }
      }

      @media (max-width: 994px) {
        max-width: calc((1 / 2) * 100% - var(--gap));

        &:nth-child(even) {
          background-color: rgb(243, 243, 243);

          &:hover {
            background-color: var(--color-primary-700);
          }
        }
      }

      @media (max-width: 554px) {
        max-width: 100%;
      }
    }
  }
}

.courses-section {
  .service_box.type_one {
    .image_box img {
      height: unset;
      aspect-ratio: 1.5;
    }

    .content_box {
      padding: 30px;
      min-height: 275px;

      p {
        margin-bottom: 0.7rem;
      }

      .duration {
        color: var(--color-primary-900);
        margin-bottom: 1rem;
        font-size: 0.9rem;
  
        &::before {
          content: 'Duration: ';
          font-weight: bold;
          padding-right: 4px;
          color: var(--color-primary-700);
        }
      }

      .course-popup-button {
        background-color: transparent;
        border: none !important;
        color: var(--color-primary-700);
      }
    }

  } 

}

.separator-section {
  position: relative;
  padding-block: var(--section-padding);

  background: url(./../img/campus.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-primary-400);
    opacity: 0.8;
  }

  .content {
    position: relative;
    z-index: 5;
    margin-inline: auto;
    max-width: 600px;

    h2,
    p {
      color: white !important;
    }

    * {
      text-align: center;
    }

    h2 {
      margin-bottom: 1rem;
    }

    p {
      margin-bottom: 2rem;
    }
  }
}

.testimonials-section {
  h3 {
    margin-bottom: 1rem;
    color: var(--color-primary-900);
  }

  .testimonial_sec.style_v2_one .testimonial_box .image img {
    border-radius: 0;
  }
}

.advisory-section {
  .icon_box_all.style_five {
    margin-bottom: 1rem;

    .icon_content {
      border-radius: 0px 10px 0px 10px !important;
    }

    * {
      transition: all 0.1s ease;
    }
    &:hover {
      * {
        color: white;
      }
    }
  }
}

.partners-section {
  .container-fluid {
    max-width: 1560px;
  }

  .swiper-slide .image,
  .owl-item .image {
    margin: 0px 20px;
    padding: 0 !important;
  }
}