* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body {
  background-color: #fff;
  width: 100%;
  overflow-x: hidden;
  font-family: sans-serif; }

hr {
  width: 80%;
  height: 4px;
  margin: 10px auto;
  border-radius: 50%;
  border: none;
  opacity: 1 !important;
  background-color: #0583d2; }

.capitalize {
  text-transform: capitalize; }

.v_align_center {
  vertical-align: middle; }

tbody .table_head {
  background-color: #16558f;
  color: #fff; }

tbody tr.odd {
  background-color: #0583d2;
  color: #fff; }

.loader {
  z-index: 5555555;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: white;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center; }

.disappear {
  animation: vanish 1s forwards; }

@keyframes vanish {
  100% {
    opacity: 0;
    visibility: hidden; } }

@font-face {
  font-family: "icomoon";
  src: url("../fonts/icomoon.eot?zdjvh0");
  src: url("../fonts/icomoon.eot?zdjvh0#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?zdjvh0") format("truetype"), url("../fonts/icomoon.woff?zdjvh0") format("woff"), url("../fonts/icomoon.svg?zdjvh0#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block; }

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-x:before {
  content: "\e900"; }

.icon-cancel:before {
  content: "\e900"; }

.icon-close:before {
  content: "\e900"; }

.icon-phone:before {
  content: "\e942"; }

.icon-envelop:before {
  content: "\e945"; }

.icon-location:before {
  content: "\e947"; }

.icon-heart:before {
  content: "\e9da"; }

.icon-checkmark:before {
  content: "\ea10"; }

.icon-circle-down:before {
  content: "\ea43"; }

.icon-facebook:before {
  content: "\ea90"; }

.slider {
  width: 100%; }

.slider input {
  display: none; }

.testimonials {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 350px;
  perspective: 1000px;
  overflow: hidden; }

.testimonials .item {
  top: 0;
  position: absolute;
  box-sizing: border-box;
  background-color: #16558f;
  padding: 30px;
  width: 450px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  text-align: center;
  transition: transform 0.4s;
  transform-style: preserve-3d;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  cursor: pointer; }

.testimonials .item img {
  width: 200px;
  border-radius: 50%;
  border: 13px solid #fff; }

.testimonials .item p {
  color: #fff; }

.testimonials .item h2 {
  font-size: 14px;
  color: #fff; }

.dots {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center; }

.dots label {
  display: block;
  height: 5px;
  width: 5px;
  border-radius: 50%;
  cursor: pointer;
  background-color: #0583d2;
  margin: 7px;
  transition: transform 0.2s, color 0.2s; }

/* First */
#t-1:checked ~ .dots label[for="t-1"] {
  transform: scale(3);
  border: 1px solid #16558f; }

#t-1:checked ~ .dots label[for="t-2"] {
  transform: scale(1.5); }

#t-1:checked ~ .testimonials label[for="t-1"] {
  z-index: 4; }

#t-1:checked ~ .testimonials label[for="t-2"] {
  transform: translateX(300px) translateZ(-90px) rotateY(-15deg);
  z-index: 3; }

#t-1:checked ~ .testimonials label[for="t-3"] {
  transform: translateX(600px) translateZ(-180px) rotateY(-25deg);
  z-index: 2; }

#t-1:checked ~ .testimonials label[for="t-4"] {
  transform: translateX(900px) translateZ(-270px) rotateY(-35deg);
  z-index: 1; }

#t-1:checked ~ .testimonials label[for="t-5"] {
  transform: translateX(1200px) translateZ(-360px) rotateY(-45deg); }

/* Second */
#t-2:checked ~ .dots label[for="t-1"] {
  transform: scale(1.5); }

#t-2:checked ~ .dots label[for="t-2"] {
  transform: scale(3);
  border: 1px solid #16558f; }

#t-2:checked ~ .dots label[for="t-3"] {
  transform: scale(1.5); }

#t-2:checked ~ .testimonials label[for="t-1"] {
  transform: translateX(-300px) translateZ(-90px) rotateY(15deg); }

#t-2:checked ~ .testimonials label[for="t-2"] {
  z-index: 3; }

#t-2:checked ~ .testimonials label[for="t-3"] {
  transform: translateX(300px) translateZ(-90px) rotateY(-15deg);
  z-index: 2; }

#t-2:checked ~ .testimonials label[for="t-4"] {
  transform: translateX(600px) translateZ(-180px) rotateY(-25deg);
  z-index: 1; }

#t-2:checked ~ .testimonials label[for="t-5"] {
  transform: translateX(900px) translateZ(-270px) rotateY(-35deg); }

/* Third */
#t-3:checked ~ .dots label[for="t-2"] {
  transform: scale(1.5); }

#t-3:checked ~ .dots label[for="t-3"] {
  transform: scale(3);
  border: 1px solid #16558f; }

#t-3:checked ~ .dots label[for="t-4"] {
  transform: scale(1.5); }

#t-3:checked ~ .testimonials label[for="t-1"] {
  transform: translateX(-600px) translateZ(-180px) rotateY(25deg); }

#t-3:checked ~ .testimonials label[for="t-2"] {
  transform: translateX(-300px) translateZ(-90px) rotateY(15deg); }

#t-3:checked ~ .testimonials label[for="t-3"] {
  z-index: 3; }

#t-3:checked ~ .testimonials label[for="t-4"] {
  transform: translateX(300px) translateZ(-90px) rotateY(-15deg);
  z-index: 2; }

#t-3:checked ~ .testimonials label[for="t-5"] {
  transform: translateX(600px) translateZ(-180px) rotateY(-25deg); }

/* Fourth */
#t-4:checked ~ .dots label[for="t-3"] {
  transform: scale(1.5); }

#t-4:checked ~ .dots label[for="t-4"] {
  transform: scale(3);
  border: 1px solid #16558f; }

#t-4:checked ~ .dots label[for="t-5"] {
  transform: scale(1.5); }

#t-4:checked ~ .testimonials label[for="t-1"] {
  transform: translateX(-900px) translateZ(-270px) rotateY(35deg); }

#t-4:checked ~ .testimonials label[for="t-2"] {
  transform: translateX(-600px) translateZ(-180px) rotateY(25deg); }

#t-4:checked ~ .testimonials label[for="t-3"] {
  transform: translateX(-300px) translateZ(-90px) rotateY(15deg);
  z-index: 2; }

#t-4:checked ~ .testimonials label[for="t-4"] {
  z-index: 3; }

#t-4:checked ~ .testimonials label[for="t-5"] {
  transform: translateX(300px) translateZ(-90px) rotateY(-15deg); }

/* Fifth */
#t-5:checked ~ .dots label[for="t-4"] {
  transform: scale(1.5); }

#t-5:checked ~ .dots label[for="t-5"] {
  transform: scale(3);
  border: 1px solid #16558f; }

#t-5:checked ~ .testimonials label[for="t-1"] {
  transform: translateX(-1200px) translateZ(-360px) rotateY(45deg); }

#t-5:checked ~ .testimonials label[for="t-2"] {
  transform: translateX(-900px) translateZ(-270px) rotateY(35deg);
  z-index: 1; }

#t-5:checked ~ .testimonials label[for="t-3"] {
  transform: translateX(-600px) translateZ(-180px) rotateY(25deg);
  z-index: 2; }

#t-5:checked ~ .testimonials label[for="t-4"] {
  transform: translateX(-300px) translateZ(-90px) rotateY(15deg);
  z-index: 3; }

#t-5:checked ~ .testimonials label[for="t-5"] {
  z-index: 4; }

nav {
  width: 100%;
  position: absolute !important;
  top: 0;
  left: 0;
  z-index: 5000; }
  nav a {
    text-transform: capitalize;
    font-weight: bold !important;
    color: white !important; }
  nav .navbar-brand {
    font-size: 25px !important;
    margin-left: 150px !important;
    margin-right: 100px !important; }
  nav .navbar-nav a {
    margin: 0 10px 0px 10px !important; }
    nav .navbar-nav a:hover {
      color: #d2d0d0 !important;
      transition: 0.5s !important; }
  nav a.active {
    color: #38b3ff !important; }
    nav a.active:hover {
      color: #38b3ff !important; }

#section1 {
  color: #fff;
  width: 100%;
  height: 100vh;
  background: url(../imgs/Home1.png) center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center; }
  #section1 #quoteContent {
    width: 100%;
    height: 100vh;
    position: relative; }
    #section1 #quoteContent #quote {
      animation-name: quoting;
      animation-duration: 10s;
      animation-iteration-count: infinite;
      position: absolute;
      top: 40%;
      left: 32%;
      font-size: 3vw; }
      #section1 #quoteContent #quote #quote1 {
        opacity: 100%;
        animation-name: quoting1;
        animation-duration: 10s;
        animation-iteration-count: infinite; }
      #section1 #quoteContent #quote #quote3 {
        opacity: 0%;
        animation-name: quoting3;
        animation-duration: 10s;
        animation-iteration-count: infinite; }

/***start section2 styling***/
.section2 {
  margin-top: 30px;
  margin-right: 0px; }
  .section2 .section2_header {
    color: #2c3e50;
    position: relative;
    margin-bottom: 30px; }

.section3 {
  width: 95%;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
  border-left: 4px solid #0583d2;
  background-color: rgba(128, 128, 128, 0.096);
  text-transform: capitalize;
  padding: 10px; }
  .section3 .section3_header {
    padding: 10px; }
  .section3 h4 {
    padding: 10px; }
  .section3 .last-p span {
    font-weight: bold; }

.site_footer {
  color: #000;
  width: 100.9%;
  padding: 20px;
  border-top: 1px solid rgba(107, 104, 104, 0.247);
  font-weight: bold; }
  .site_footer h3 {
    text-transform: capitalize; }
  .site_footer ul {
    list-style-type: none; }
    .site_footer ul li {
      cursor: pointer;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      transition: all ease-in-out 0.3s; }
      .site_footer ul li:hover {
        transform: translate(0, -10%); }
      .site_footer ul li:hover span {
        color: white; }
      .site_footer ul li a {
        font-size: 1.4rem;
        color: black;
        text-decoration: none; }
  .site_footer .facebook:hover {
    background-color: #4267b2; }
  .site_footer .maps:hover {
    background-color: #eb4747; }
  .site_footer .gmail:hover {
    background-color: #c71610; }
  .site_footer .phone:hover {
    background-color: #25d366; }
  .site_footer .footer_section1 .scool_adress span {
    display: block; }
  .site_footer .footer_section1 .contact_us {
    width: 100%;
    margin-left: 0px !important; }
    .site_footer .footer_section1 .contact_us ul {
      width: 100% !important;
      margin-left: 0px !important; }
  .site_footer .footer_section2 div a {
    text-transform: capitalize;
    margin-top: 15px; }
    .site_footer .footer_section2 div a:hover {
      color: black;
      font-size: large;
      transition: 0.2s ease-in-out; }
  .site_footer .footer_section2 div a.active {
    color: #0583d2; }
    .site_footer .footer_section2 div a.active:hover {
      color: #0583d2; }
  .site_footer .footer_section3 img {
    margin-top: 30px;
    height: 230px;
    width: 80%; }
  .site_footer .footer_section4 .p_overview {
    margin-top: 20px; }
  .site_footer .footer_section4 hr {
    margin: 0px 0px 10px 0px;
    width: 95%;
    height: 1px;
    background-color: #000; }
  .site_footer .footer_section4 .copy_rights {
    text-transform: capitalize;
    margin-bottom: 0px; }
  .site_footer .footer_section4 .created_by {
    margin-top: 0px;
    text-transform: capitalize; }
    .site_footer .footer_section4 .created_by span {
      color: #c51104; }

.coming-soon {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 7vw;
}

@keyframes quoting {
  0% {
    left: 32%; }
  20% {
    left: 32%; }
  40% {
    left: 7%; }
  60% {
    left: 7%; }
  100% {
    left: 32%; } }

@keyframes quoting1 {
  0% {
    opacity: 100%; }
  20% {
    opacity: 100%; }
  40% {
    opacity: 0%; }
  60% {
    opacity: 0%; }
  100% {
    opacity: 100%; } }

@keyframes quoting3 {
  0% {
    opacity: 0%; }
  20% {
    opacity: 0%; }
  40% {
    opacity: 100%; }
  60% {
    opacity: 100%; }
  100% {
    opacity: 0%; } }

/*start mediaqueries*/
/***navbar***/
@media (max-width: 1176px) {
  nav .navbar-brand {
    font-size: 20px;
    margin-left: 20px !important;
    margin-right: 20px !important; } }

@media (max-width: 1000px) {
  nav {
    background-color: #0583d2 !important;
    width: 100%;
    background-color: #0583d2;
    box-shadow: 2px 9px 14px 1px rgba(131, 129, 129, 0.75); }
    nav .navbar-brand {
      font-size: 20px;
      margin-left: 0px !important;
      margin-right: 0px !important; }
    nav .navbar-nav .nav-link {
      color: #dfdddd !important; }
      nav .navbar-nav .nav-link:hover {
        color: #c4c3c3 !important; }
    nav .navbar-nav .nav-link.active {
      color: #fff !important; }
    nav .navbar-nav {
      text-align: center; }
      nav .navbar-nav a {
        margin: 0px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.171); }
      nav .navbar-nav a:last-of-type {
        border-bottom: none; } }

@media screen and (max-width: 280px) {
  nav .navbar-brand {
    font-size: 15px !important; } }

/*****cards media query*****/
@media (max-width: 576px) {
  .section2 .card-container div .card {
    margin-bottom: 30px; }
  .section2 .section2_header::before {
    width: 70px;
    left: 110px; }
  .section2 .section2_header::after {
    width: 70px;
    right: 110px; } }

/*media for section 2 headr*/
@media (max-width: 470px) {
  .section2 .section2_header::before {
    width: 70px;
    left: 65px; }
  .section2 .section2_header::after {
    width: 70px;
    right: 65px; } }

@media (max-width: px) {
  .section2 .section2_header::before {
    width: 70px;
    left: 180px; }
  .section2 .section2_header::after {
    width: 70px;
    right: 180px; } }

@media screen and (max-width: 768px) {
  .site_footer {
    width: 100%;
    margin: 0 auto !important;
    text-align: center; }
    .site_footer .footer_section3 img {
      margin-top: 30px;
      margin-bottom: 50px;
      height: 200px !important;
      width: 200px !important; }
    .site_footer .footer_section4 {
      margin: 0 auto; }
      .site_footer .footer_section4 hr {
        margin: 0 auto; } }

.services-block-three {
  margin-bottom: 30px; }

.services-block-three > a {
  text-transform: capitalize;
  display: block;
  border: 2px solid #d5d5d5;
  border-radius: 4px;
  text-align: center;
  background: #fff;
  padding: 20px;
  position: relative;
  margin-bottom: 30px;
  text-decoration: none; }

.services-block-three > a:before {
  display: block;
  content: "";
  width: 9%;
  height: 17%;
  position: absolute;
  bottom: -2px;
  right: -2px;
  border-bottom: 2px solid #0583d2;
  border-right: 2px solid #0583d2;
  transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s; }

.services-block-three > a:after {
  display: block;
  content: "";
  width: 9%;
  height: 17%;
  position: absolute;
  top: -2px;
  left: -2px;
  border-top: 2px solid #0583d2;
  border-left: 2px solid #0583d2;
  transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s; }

.services-block-three .earth_science {
  padding-bottom: 34px !important; }

.services-block-three .french,
.services-block-three .german {
  padding-bottom: 115px !important; }

.services-block-three a .teachers {
  text-align: left;
  margin-left: 30px; }

.padding-15px-bottom {
  padding-bottom: 15px !important; }

.padding-75px-bottom {
  padding-bottom: 75px !important; }

.services-block-three .padding-15px-bottom img {
  width: 50px;
  height: 50px; }

.services-block-three h3 {
  color: #6f6f6f;
  margin-bottom: 10px;
  font-weight: 600; }

.services-block-three p {
  margin-bottom: 0;
  color: #757575; }

.services-block-three > a:hover {
  opacity: 1;
  border-color: #d5d5d5; }

a:hover,
a:active {
  color: #03a9f5;
  text-decoration: none; }

.services-block-three > a:hover:before,
.services-block-three > a:hover:after {
  width: 95%;
  height: 90%; }

.about_landing {
  text-transform: capitalize;
  width: 100%;
  height: 70vh;
  background: url("../imgs/about.jpg") center !important;
  background-repeat: no-repeat;
  background-size: cover; }
  .about_landing .about_title p {
    position: absolute;
    top: 30%;
    right: 50%;
    transform: translate(50%, -30%);
    color: #fff;
    font-size: 50px !important; }
  .about_landing .about_title a {
    position: absolute;
    top: 40%;
    right: 50%;
    transform: translate(50%, 0%);
    text-decoration: none;
    color: #fff !important;
    font-size: 30px;
    animation: swinging 2s ease-in-out infinite; }

.about_content .overview {
  width: 100%; }
  .about_content .overview h1 {
    text-transform: capitalize;
    text-align: center;
    margin: 10px auto;
    color: #2c3e50; }
  .about_content .overview .overview_card {
    width: 70%;
    margin: 40px auto;
    padding: 20px;
    box-shadow: 0px 0px 26px 4px #bdc3c7;
    border-radius: 5px;
    border-top: 5px solid #0583d2; }
    .about_content .overview .overview_card .overview_card_p {
      color: #2c3e50;
      font-size: 17px;
      font-weight: bold; }
    .about_content .overview .overview_card .overview_card_img_cont {
      margin: 0 auto;
      width: 55%;
      display: flex;
      align-items: center;
      justify-content: space-between; }
      .about_content .overview .overview_card .overview_card_img_cont .overview_card_img {
        width: 120px;
        height: 120px; }
      .about_content .overview .overview_card .overview_card_img_cont .overview_card_img:nth-of-type(1) {
        margin-right: 20px; }
      .about_content .overview .overview_card .overview_card_img_cont .usaid {
        width: 170px;
        height: 170px; }

.about_content .staff .staff_cards_cont {
  width: 99%;
  margin: 0 auto; }
  .about_content .staff .staff_cards_cont h2 {
    text-transform: capitalize;
    margin: 15px 0px; }
  .about_content .staff .staff_cards_cont div .card {
    text-transform: capitalize;
    transition: 0.3s transform cubic-bezier(0.155, 1.105, 0.295, 1.12);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08), 0 0 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    height: 350px; }
    .about_content .staff .staff_cards_cont div .card:hover {
      cursor: pointer;
      transform: scale(1.05);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06); }
    .about_content .staff .staff_cards_cont div .card .card-img-top {
      height: 200px; }

@keyframes swinging {
  0% {
    transform: translate(0px, 0px); }
  50% {
    transform: translate(0px, 20px); }
  100% {
    transform: translate(0px, 0px); } }

@media (max-width: 850px) {
  .about_landing .about_title p {
    font-size: 40px !important; }
  .about_content .overview_card {
    width: 95% !important; }
    .about_content .overview_card .overview_card_img_cont {
      width: 100% !important; }
      .about_content .overview_card .overview_card_img_cont .overview_card_img {
        width: 32% !important;
        height: 120px; } }

@media (max-width: 280px) {
  .about_landing .about_title p {
    font-size: 30px !important; } }

.bg-blue {
  background-color: #0583d2;
  box-shadow: 2px 9px 14px 1px rgba(223, 221, 221, 0.75); }
  .bg-blue .navbar-nav .nav-link {
    color: #dfdddd !important; }
    .bg-blue .navbar-nav .nav-link:hover {
      color: #c4c3c3 !important; }
  .bg-blue .navbar-nav .nav-link.active {
    color: #fff !important; }

.campus_landing {
  color: #2c3e50; }
  .campus_landing .campus_heading {
    margin: 100px 0px 20px 0px;
    text-align: center; }
    .campus_landing .campus_heading h2 {
      display: inline-block; }
    .campus_landing .campus_heading img {
      margin-bottom: 10px; }
  .campus_landing .school_facilities {
    width: 80%;
    margin: 30px 0px 0px 60px; }

.campus_life .campus_heading {
  text-align: center; }
  .campus_life .campus_heading h2 {
    margin-top: 50px;
    display: inline-block; }
  .campus_life .campus_heading img {
    margin-bottom: 20px; }

.campus_life p {
  width: 80%;
  margin: 0 auto; }

.campus_life .time_table {
  text-transform: capitalize;
  width: 80%;
  margin: 20px auto; }

.campus_life .note {
  text-transform: capitalize;
  margin-bottom: 30px; }

@media screen and (max-width: 768px) {
  .campus_landing .campus_heading {
    margin-left: 0px; }
  .campus_landing .school_facilities {
    margin-left: 0px;
    margin: 0 auto;
    text-align: left; } }

@media screen and (max-width: 280px) {
  .time_table {
    font-size: 10px; } }

.heading {
  text-transform: capitalize;
  font-weight: bold !important; }

.academics_landing {
  margin-bottom: 40px; }
  .academics_landing .academics {
    color: #2c3e50; }
    .academics_landing .academics .academics_heading {
      margin-top: 100px;
      text-align: center; }
      .academics_landing .academics .academics_heading h2 {
        display: inline-block; }
      .academics_landing .academics .academics_heading img {
        margin-bottom: 10px; }
    .academics_landing .academics .academics_content {
      width: 97% !important;
      padding: 30px 0px 0px 140px; }
      .academics_landing .academics .academics_content .project_based_cont .left_text {
        margin-top: 10px; }
        .academics_landing .academics .academics_content .project_based_cont .left_text .btn {
          border-radius: 0px !important; }
      .academics_landing .academics .academics_content .project_based_cont .project_based img {
        width: inherit;
        height: auto; }

.subjects {
  color: #2c3e50; }
  .subjects .subjects_heading {
    margin-top: 30px;
    text-align: center; }
    .subjects .subjects_heading h2 {
      display: inline-block; }
    .subjects .subjects_heading img {
      margin-bottom: 10px; }
  .subjects .subjects_table {
    width: 80%;
    margin: 0 auto;
    margin-top: 20px; }
    .subjects .subjects_table th {
      text-transform: capitalize; }

.examinations {
  width: 90%;
  margin: 0 auto;
  color: #2c3e50; }
  .examinations .examination_heading {
    margin-bottom: 35px;
    text-align: center; }
    .examinations .examination_heading h2 {
      display: inline-block; }
    .examinations .examination_heading img {
      margin-bottom: 10px; }
  .examinations .examinations_content_cont {
    padding: 30px 0px 0px 67px; }

.capstone {
  margin-top: 30px;
  color: #2c3e50 !important; }
  .capstone .capstone_heading {
    text-align: center; }
    .capstone .capstone_heading h2 {
      display: inline-block; }
    .capstone .capstone_heading img {
      margin-bottom: 10px; }
  .capstone .capstone_content_cont {
    width: 80%;
    margin: 0 auto; }
  .capstone .steps {
    text-transform: capitalize;
    line-height: 30px; }

.skills {
  width: 80%;
  margin: 0 auto;
  margin-top: 20px;
  color: #2c3e50; }
  .skills .skills_heading {
    text-align: center; }
    .skills .skills_heading h2 {
      display: inline-block; }
    .skills .skills_heading img {
      width: 40px;
      height: 40px;
      margin-bottom: 10px; }

.grading_system {
  width: 80%;
  margin: 0 auto;
  color: #2c3e50; }
  .grading_system .gradin_system_heading {
    text-align: center; }
    .grading_system .gradin_system_heading h2 {
      display: inline-block; }
    .grading_system .gradin_system_heading img {
      width: 25px;
      height: 25px;
      margin: 0px 0px 10px 5px; }
  .grading_system .gradin_system_content_cont .g10_grade_sys tr th span,
  .grading_system .gradin_system_content_cont .g12_grade_sys tr th span {
    display: block;
    margin-bottom: 0px; }

.grades {
  width: 80%;
  margin: 0 auto; }
  .grades .grades_heading {
    text-align: center;
    color: #2c3e50; }
    .grades .grades_heading h2 {
      display: inline-block; }
    .grades .grades_heading img {
      margin-bottom: 15px; }
  .grades .grades_content_cont .grade_tables {
    text-transform: capitalize; }

@media screen and (max-width: 768px) {
  .academics {
    text-align: center; }
    .academics .academics_content {
      margin: 0 auto;
      padding: 0px !important; }
      .academics .academics_content .project_based_cont {
        width: 100%;
        margin: 0 auto; }
  .examinations {
    margin: 0 auto;
    padding: 0px !important;
    text-align: center; }
    .examinations .examinations_content_cont {
      padding: 0px; }
  .capstone {
    text-align: center; }
    .capstone ol {
      text-align: left; }
  .skills {
    text-align: center; }
    .skills ol {
      margin: 30px 0px 20px;
      text-align: left; }
      .skills ol li {
        line-height: 25px; }
  .grades .grades_content_cont .grade_tables {
    font-size: 15px; } }

@media screen and (max-width: 400px) {
  .subjects_table {
    font-size: 9px; }
  .grades .grades_content_cont .grade_tables {
    font-size: 10px; } }

.alumni {
  width: 100%;
  padding: 200px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}
.alumni .college {
  margin: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.alumni .college .students {
  
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 25px;
  padding: 10px 0;
}