* {
  font-family: "Poppins";
  font-style: normal;
  margin: 0;
  padding: 0;
}

.about-us-section {
  .stroke-mobile {
    display: none;
  }

  /* top container */

  .top-container {
    display: flex;

    .top-content {
      padding: 4vw;
      width: 35vw;
      display: flex;
      text-align: left;
      background: #F3EFFF;
      justify-content: center;
      align-items: center;

      .highlight-text {
        font-size: 2vw;
        line-height: 7vh;
        text-align: left;
        font-weight: 600;

        span {
          color: #3197A8;
        }

      }
    }

    .top-image {
      width: 50%;
      height: 100%;

      .about-us-img {
        width: 50vw;
        height: 65vh;
        object-fit: cover;
      }
    }
  }

  /* bottom container */

  .bottom-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: auto;


    .bottom-heading {
      width: 35vw;
      height: auto;

      .stroke {
        position: relative;
        top: -6vh;
        font-size: 5vw;
        color: #fff;
        text-shadow:
          -1px -1px 0 #A4A4A4,
          1px -1px 0 #A4A4A4,
          -1px 1px 0 #A4A4A4,
          1px 1px 0 #A4A4A4;
        line-height: 14vh;
        letter-spacing: 0.5vw;
        transform: rotate(-90deg);

        span {
          margin-left: 200px;
        }
      }
    }

    .bottom-content {
      width: 50vw;
      height: 50vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: #F3EFFF;

      .para {
        padding: 1vw 2vw 0 2vw;
        font-size: 1vw;
        line-height: 4vh;
      }

      .stats {
        display: flex;
        justify-content: space-evenly;
        gap: 3vw;

        div {
          text-align: center;

          .count {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            font-size: 25px;
            font-weight: 600;

            h1 {
              font-size: 33px;
              margin-bottom: 6px;
              margin-top: 0;
              font-weight: 600;
            }
          }

          span {
            font-size: 18px;
            font-weight: 600;
          }
        }
      }

      .fex-btn {
        display: flex;
        margin-top: 1vw;

        div {
          background: #B7C6C4;
          width: 4vw;
          height: 8vh;
        }

        .viewmorebtn {
          background-color: #3197a8;
          color: #fff;
          border: none;
          cursor: pointer;
          width: 15vw;
          height: 8vh;

          a {
            text-decoration: none;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1vw;
            font-size: 1rem;

            img {
              width: 2vw;
              height: 2vh;
            }
          }
        }
      }
    }

    .aside-text p {
      font-size: 1.5vw;
      transform: rotate(-90deg);
      width: 25vw;
      letter-spacing: 0.5vw;
      line-height: 4vh;
      position: relative;
      top: -15vh;
      right: 9vw;
      color: #626262;
    }

    .aside-text p span {
      margin-left: 10%;
    }

    .aside-text {
      background: #F3EFFF;
      width: 13%;
    }
  }

}


@media (min-width: 320px) and (max-width: 668px) {
  .about-us-section {

    .stroke-mobile {
      display: block;
      padding: 3vw;
      text-align: center;
      font-size: 8vw;
      color: #fff;
      text-shadow: -1px -1px 0 #A4A4A4, 1px -1px 0 #A4A4A4, -1px 1px 0 #A4A4A4, 1px 1px 0 #A4A4A4;
      letter-spacing: 0.5vw;
    }

    /* top container */


    .top-container {
      flex-direction: column;

      .top-content {
        width: 42vw;
        position: relative;
        left: 8vw;

        .highlight-text {
          font-size: 3vw;
          line-height: 2vh;
          margin: 0;
        }
      }

      .top-image {
        .about-us-img {
          width: 90vw;
          height: 35vh;
          object-fit: cover;
          position: relative;
          left: 8vw;
        }
      }
    }

    /* bottom container */


    .bottom-container {
      flex-direction: row-reverse;

      .bottom-heading {
        display: none;
      }

      .bottom-content {
        width: 63vw;
        height: 45vh;

        .para {
          padding: 0 3vw;
          font-size: 3vw;
          line-height: 3vh;
        }

        .stats {
          display: flex;
          justify-content: space-evenly;
          gap: 3vw;

          div {
            text-align: center;

            .count {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 5px;
              font-size: 25px;
              font-weight: 600;

              h1 {
                font-size: 33px;
                margin-bottom: 6px;
                margin-top: 0;
                font-weight: 600;
              }
            }

            span {
              font-size: 18px;
              font-weight: 600;
            }
          }
        }

        .fex-btn {
          div {
            width: 10vw;
            height: 5vh;
          }

          .viewmorebtn {
            width: 45vw;
            height: 5vh;

            a {

              img {
                width: 6vw;
                height: 2vh;
              }
            }
          }
        }
      }

      .aside-text p {
        font-size: 5.5vw;
        width: 70vw;
        letter-spacing: 0.5vw;
        line-height: 5vh;
        top: 13vh;
        right: 18vw;
      }

      .aside-text p span {
        margin-left: 10%;
      }

      .aside-text {
        background: none;
        width: 37%;
      }
    }
  }
}

@media (min-width: 668px) and (max-width: 1024px) {
  .about-us-section {
    .stroke-mobile {
      display: block;
      text-align: center;
      font-size: 8vw;
      color: #fff;
      text-shadow: -1px -1px 0 #A4A4A4, 1px -1px 0 #A4A4A4, -1px 1px 0 #A4A4A4, 1px 1px 0 #A4A4A4;
      letter-spacing: 0.5vw;
    }

    /* top container */

    .top-container {
      flex-direction: column;

      .top-content {
        width: 35vw;
        position: relative;
        left: 8vw;

        .highlight-text {
          line-height: 3vh;
        }
      }

      .top-image {

        .about-us-img {
          width: 90vw;
          height: 40vh;
          position: relative;
          left: 10vw;
        }
      }
    }

    /* bottom container */

    .bottom-container {
      flex-direction: row-reverse;


      .bottom-heading {
        display: none;

        .stroke {
          position: relative;
          top: -6vh;
          font-size: 5vw;
          color: #fff;
          text-shadow:
            -1px -1px 0 #A4A4A4,
            1px -1px 0 #A4A4A4,
            -1px 1px 0 #A4A4A4,
            1px 1px 0 #A4A4A4;
          line-height: 14vh;
          letter-spacing: 0.5vw;
          transform: rotate(-90deg);

          span {
            margin-left: 200px;
          }
        }
      }

      .bottom-content {
        width: 80vw;
        height: 30vh;

        .para {
          padding: 0 2vw;
          font-size: 2vw;
          line-height: 3vh;
        }

        .stats {
          display: flex;
          justify-content: space-evenly;
          gap: 3vw;

          div {
            text-align: center;

            .count {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 5px;
              font-size: 25px;
              font-weight: 600;

              h1 {
                font-size: 33px;
                margin-bottom: 6px;
                margin-top: 0;
                font-weight: 600;
              }
            }

            span {
              font-size: 18px;
              font-weight: 600;
            }
          }
        }

        .fex-btn {
          display: flex;
          margin-top: 0;

          div {
            width: 4vw;
            height: 6vh;
          }

          .viewmorebtn {
            width: 20vw;
            height: 6vh;

            a {
              img {
                width: 4vw;
              }
            }
          }
        }
      }


      .aside-text {
        background: none;
        width: 20%;

        p {
          font-size: 3vw;
          width: 70vw;
          top: 0vh;
          right: 25vw;

          span {
            margin-left: 10%;
          }
        }
      }
    }
  }
}


/* our statemnts */


.ourstatement {
  padding: 60px 0;
}


.ourstatement h1 {
  text-align: center;
  font-size: 30px;
}

.ourstatement .our-p {
  text-align: center;
  font-size: 14px;
}

.mv-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 60px;
  margin-top: 30px;
}

.mission,
.vision {
  border: 1px solid #ccc;
  width: 35%;
  height: auto;
  border-radius: 15px;
  padding: 30px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}


.m-p,
.v-p {
  font-size: 14px;
  line-height: 25px;
}

.mission-head,
.vision-head {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 15px;
}

.mission-head img,
.vision-head img {
  width: 45px;
  height: 45px;
}

.mission-head h2,
.vision-head h2 {
  font-size: 18px;
}





@media only screen and (max-width: 1180px) {

  .mission,
  .vision {
    width: 60%;
  }

  .mission p,
  .vision p {
    font-size: 15px;
    line-height: 25px;
  }
}



@media only screen and (max-width: 768px) {
  .mv-box {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }



  .mission p {
    font-size: 12px;
  }

  .mission,
  .vision {
    width: 80%;
    height: auto;

  }


  .mission-head p {
    font-size: 10px;
  }

  .ourstatement .our-p {
    font-size: 8px;
  }
}


@media only screen and (max-width: 480px) {
  .ourstatement h1 {
    font-size: 24px;
  }

  .ourstatement p {
    font-size: 12px;
  }

  .mv-box {
    gap: 20px;
  }

  .mission,
  .vision {
    width: 75%;
  }

  .mission-head img,
  .vision-head img {
    width: 35px;
    height: 35px;
  }

  .mission-head h2,
  .vision-head h2 {
    font-size: 16px;
  }

}




/* who we are */
.whoweare {
  background-color: #96A1AC;
  padding: 30px;
}

.who-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.who-img img {
  width: 80%;
}

.who-content {
  width: 450px;
}

.content-p {
  font-size: 13px;
  color: white;
}

.who-content h1 {
  color: white;
  line-height: 40px;
  margin-bottom: 10px;
}

.who-content p {
  color: white;
  line-height: 25px;
  font-size: 13px;
}

.who-view-coursebtn a {
  text-decoration: none;
  color: white;
  background-color: #3197A8;
}

.who-view-coursebtn {
  border: none;
  border-radius: 20px;
  background-color: #3197A8;
  padding: 10px 20px;
  margin-top: 20px;
}

@media only screen and (max-width: 768px) {
  .who-box {
    flex-direction: column;
  }

  .who-content {
    width: 100%;
    margin-top: 20px;
  }

  .who-img img {
    width: 100%;
  }
}

@media only screen and (min-width: 1200px) {
  .who-content {
    width: 550px;
  }
}



/* responsive about us */
.new-flex-one {
  padding-left: 30px;
}

.new-flex-two {
  display: flex;
  position: relative;
  bottom: 5px;
}

.new-plus {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  text-align: center;
}

.new-plus h1 {
  font-size: 19px;
}

.new-plus span {
  font-size: 16px;
}

.new-content p {
  font-size: 16px;
  width: 700px;
}

.new-rotate-1 {
  width: 80px;
}

.new-rotate-1 p {
  font-size: 10px;
  position: relative;
  top: 60px;
  width: 200px;
  right: 50px;
  transform: rotate(-90deg);
  letter-spacing: 4px;
}

.new-rotate-1 p span {
  margin-left: 30px;
}

.new-viewmore {
  background-color: #f3efff;
  padding: 15px 0 15px 15px;
  width: 100%;
}

.new-image,
.new-aboutus-img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  font-size: 0;
}

.new-flex-one-content {
  width: 69%;
  padding: 15px;
  background-color: #f3efff;
}

.new-flex-one-content h1 {
  font-size: 18px;
  width: 300px;
}

.new-flex-one-content h1 span {
  color: #3197a8;
}

.new-double {
  font-size: 36px;
  color: #fff;
  text-shadow: -1px -1px 0 #a4a4a4, 1px -1px 0 #a4a4a4, -1px 1px 0 #a4a4a4, 1px 1px 0 #a4a4a4;
  letter-spacing: 8px;
  text-align: center;
  margin-bottom: 20px;
}

#newsection {
  display: none;
}




@media only screen and (max-width: 1180px) {
  #aboutus {
    display: none;
  }

  #newsection {
    display: block;
  }

  .new-content p {
    font-size: 15px;
  }


}

@media only screen and (max-width: 768px) {
  #aboutus {
    display: none;
  }

  #newsection {
    display: block;
  }

  .new-content p {
    font-size: 10px;
    width: 245px;
  }

  .new-viewmore {
    width: 100%;
  }

  .new-plus h1 {
    font-size: 14px;
  }

  .new-plus span {
    font-size: 10px;
  }

  .new-flex-one-content h1 {
    font-size: 12px;
    width: 200px;
  }
}