/* Defining root variables */

:root{
  --primary-c: #871D27;
  --secondary-c: #CD642B;
  --hover-c-light: #ee8349;
  --hover-c-dark: #a5400a;
  --color1: #333333;
}

/* Universal reset styles */

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Source Sans 3", sans-serif;
}

html, body{
  scroll-behavior: smooth;
  overflow-x: clip;
}

/* Generated class from JS below for intersection observer */
/* Generated class from JS below for intersection observer */
/* Generated class from JS below for intersection observer */

.hidden{
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 1.5s, transform 1s;
}

.show{
  opacity: 1;
  transform: translateY(0);
}

/* Mission section main starts here */

.mission-sec1{
  width: 100%;
  background: #fff;
  padding: 5em 12.5em;
}

.mission-h1{
  font-size: 4rem;
  font-weight: 800;
  line-height: 4rem;
  max-width: 18ch;
  color: #102031;
}

.mission-thin-line{
  width: 50px;
  height: 2px;
  background: var(--secondary-c);
  margin: 2em 0;
}

.mission-para{
  font-size: 1rem;
  font-weight: 400;
  max-width: 90ch;
  color: #102031;
}

/* Mission section 2 starts here */

.mission-sec2{
  width: 100%;
  background: #fff;
  padding: 2em 2.5em 2em 12.5em;
}

/* Mission block here */

.approach__ccc{
  display: flex;
  gap: 15px;
  width: 100%;
  height: 350px;
  margin: 2em 0;

  .approach__txt{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .7em;
    width: 70%;
    height: 100%;
    background: #f0f0f0;
    border-radius: 1em;
    padding: 1.4em;
    border: 1px solid transparent;

    &:hover{
      border: .001em solid #000;
    }

    .ap--c{
      display: flex;
      align-items: center;
      width: 100%;
      background: #d6d6d6;
      border-radius: 10px;
      padding: 15px 10px;

      &:hover{
      background: #e2e2e2;
      }

      &:hover .appr--icon{
        background: var(--secondary-c);
        color: #fff;
      }

      .appr--icon{
        display: flex;
        align-items: center;        
        justify-content: center;
        flex-shrink: 0;
        width: 3em;
        height: 3em;
        background: #fff;
        border-radius: 50%;
        margin-right: 10px;

        ion-icon{
          font-size: 1.6rem;
        }
      }

      .txtSpanblk{
        font-size: 0.9rem;
        font-weight: 500;
      }
    }
  }

  .approach__img{
    width: 30%;
    height: 100%;
    overflow: hidden;
    border-radius: 1em;

    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: .2s;

      &:hover{
        transform: scale(1.02);
      }
    }
  }
}

/* Mission section 3 */

.misson-sec3{
  width: 100%;
  background: #fff;
  padding: 2em 12.5em;
}

.mission-para3{
  font-size: 1rem;
  font-weight: 400;
  max-width: 90ch;
  color: #102031;
}

.mission-img4{
  width: 100%;
  height: 300px;
  border-radius: 20px;
  background-image: url(images/mission-img4.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: 2em;
}

/* All media query for various screens */
/* All media query for various screens */
/* All media query for various screens */

/* Media for laptops - 1308px */

@media(max-width: 1308px){

/* Mission block here */

.approach__ccc{
  height: 390px;
}
}

/* Media for laptops - 1230px */

@media(max-width: 1230px){

.mission-sec1{
  padding: 5em 2.9em;
}

.mission-sec2{
  padding: 0 2.9em 2em;
}

.misson-sec3{
  padding: 1em 2.9em;
}

.mission-img4{
  height: 450px;
  border-radius: 30px;
}

/* Mission block here */

.approach__ccc{
  height: 390px;
}
}

/* Media for laptops - 1030px */

@media(max-width: 1030px){

.mission-sec1{
  padding: 5em 2em;
}

.mission-sec2{
  padding: 5em 2em;
}

.misson-sec3{
  padding: 1em 2em;
}

/* Mission block here */

.approach__ccc{
  height: 430px;
}
}

/* Media for laptops - 885px */

@media(max-width: 885px){
/* Mission block here */

.approach__ccc{
  height: 490px;
}
}

/* Media for laptops - 760px */

@media(max-width: 760px){
/* Mission block here */

.approach__ccc{
  height: 530px;
}

.mission-para{
  max-width: 60ch;
}
}

/* Media for laptops - 700px */

@media(max-width: 700px){
/* Mission block here */

.approach__ccc{
  flex-direction: column;
  height: unset;

  .approach__txt{
    width: 100%;
    padding: 1em;

    .ap--c{

      .txtSpanblk{
        font-size: .8rem;
      }
    }
  }

  .approach__img{
    width: 100%;
  }
}
}

/* Media for laptops - 625px */

@media(max-width: 625px){
  .mission-h1{
  font-size: 3rem;
  line-height: 3rem;
}
}

/* Media for laptops - 500px */

@media(max-width: 500px){
  .mission-sec1{
  padding: 5em 1.2em;
}

.mission-para{
  max-width: 50ch;
}

.mission-sec2{
  padding: 5em 1.2em;
}

.misson-sec3{
  padding: 1em 1.2em;
}

.mission-para3{
  max-width: 50ch;
}
}

/* Media for laptops - 435px */

@media(max-width: 435px){

.mission-para{
  max-width: 45ch;
}

.mission-para3{
  max-width: 45ch;
}
}

/* Media for laptops - 380px */

@media(max-width: 380px){

.mission-sec1{
  padding: 5em 1.2em 1em;
}  

.mission-para{
  max-width: 36ch;
}

.mission-sec2{
  padding: 5em 1.2em 1em;
}

.mission-para3{
  max-width: 36ch;
}
}

/* Media for laptops - 353px */

@media(max-width: 353px){

.mission-h1{
  font-size: 2.5rem;
  line-height: 2.5rem;
}
}