@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

@font-face {
    font-family: prime_font;
    src: url(../fonts/smile_and_wave/smileandwave.ttf);
}
@font-face {
  font-family: Montserrat;
  src: url(../fonts/Montserrat/Montserrat-SemiBold.ttf);
}



:root {
  --rosso: #cd0000;
  --metal: #223843;
  --richb: #020402;
}
*{
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
}

/*      ABOUT US HERO STRIP     */

/* .hero{
  background-color: black;
  height : 600px;
  display: flex;
  justify-content: center;

}
.hero_text{
  text-align: center;
  color: white;
  margin: auto 10%;
  max-width: 750px;
} */

/*      ABOUT US    */
.about{
  padding-top: 7.5%;
  text-align: left;
}
.about .title h2{
  color: var(--rosso);
  margin-left: 15%;
  margin-right: 15%;
}
.content{
  max-width: 1000px;
  text-align : left;
  margin-left: 15%;
  margin-right: 15%;

}
.content p{
  padding-top: 20px;
}

/*      Achievements      */

.acheive {
  padding-top: 50px;
  padding-bottom: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  background-image: url(../images/grey-papert-texture.png);
  background-position:  left top;
  background-repeat:  repeat;
}
.acheive .title{
  margin-top: 50px;
  width : 80%;
  height: 70px;
  text-align: center;

}
.acheive .title h3{
  font-size: 40px;
  font-family: prime_font;
  font-weight: 400px;
  color: var(--rosso);
}
.tree{

  margin-top: 40px;
  width: 90%;
  max-width: 1100px;;
  justify-content: center;
  align-items: center;
}

.chapter{
  height: 80px;
  width : 400px;
  background: white;

  margin: 0 auto;
  border-radius: 0 0 15px 15px;
  text-align: center;
  color: white;
  display: flex;
}
.chapter h3{
  color: var(--rosso);
  font-size: 17px;
  margin :  auto;
}
.chapter h3 span{
  font-weight : 700px;
  font-size: 25px;
}
.view{
  display: flex;
  align-self: center;
  justify-content: center;
}
.center {
  width : 2%;
  max-width: 13px;
  background-color: var(--richb);
  border-radius: 10px;

}
.left{
  width : 45%;
  padding-bottom: 60px;

  /* Saujay */
  /* box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); */

}
.right{
  width : 45%;
  padding-bottom: 60px;
  padding-top: 50px;

  /* Saujay */
  /* box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); */

}
.points{
  width: 100%;

  margin-top: 30px;
  display: flex;
  
}
.points .write {
  width: 85%;
  background-color: #F0CDCD;
  padding: 10px;
  border-radius: 10px;
  margin: 0 20px;

  /* Saujay */
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}
.write h3{
  margin-bottom: 10px;
  text-align: center;
}
.write p{
  font-size: 15px;
}
/* .write .image{
  /* width : 75%;
  margin-left: 12%;
  margin-right: 12%;
  margin-bottom: 20px;
  height : 150px;
  background-color: transparent;
  border-radius: 10px;

  background-image: url(""); 
} */
.points .graphic{
  width : 15%;
  display: flex;
  
}
.line{
  height : 15px;
  width: 100%;
  max-height: 8px;
  background-color: var(--richb);
  margin: auto;
  text-align: center;
  border-radius: 5px 0 0 5px;

  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}
.line_r{
  height : 10%;
  width: 100%;
  max-height: 8px;
  background-color: var(--richb);
  margin: auto;
  text-align: center;

  border-radius: 0 5px 5px 0;

  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}

.mission h2{
  color: var(--rosso);
  margin-top: 70px;
  margin-left: 15%;
  margin-right: 15%;
  font-weight: 400px;
}
.mission p{
  margin-left: 15%;
  margin-right: 15%;
  margin-top: 30px;
  margin-bottom: 100px;
  font-size: 16px;
}


/* FOOTER SECTION */


@media only screen and (max-width:600px){
  .acheive{
    display: none;
  }
  body{
    background: url(../images/grey-papert-texture.png);
  }
  .about .title h2{
    margin-left: 10%;
    margin-right: 10%;
    font-size: 16px;
    font-weight: 100px;
  }
  .content{
    margin-left: 10%;
    margin-right: 10%;
  
  }
  .content p{
    font-size: 10px;
    padding-top: 20px;
  }
  .mission h2{
    margin-left: 10%;
    margin-right: 10%;
    font-size: 16px;
    font-weight: 100px;
  }
  .mission p{
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 20px;
    margin-bottom: 25px;
    font-size: 10px;
  }
}