@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import url(../fonts/stylesheet.css);
* {
  margin: 0;
  padding: 0;
}

html, body {
  background-color: #fff;
}

ul, ol {
  list-style: none;
}

a, img {
  text-decoration: none;
  outline: none;
}

/* media Queries */
.header {
  width: 100%;
  background: white;
  background: -webkit-gradient(linear, left bottom, left top, from(white), color-stop(25%, white), color-stop(25%, #fdcc4b), to(#fdcc4b));
  background: linear-gradient(0deg, white 0%, white 25%, #fdcc4b 25%, #fdcc4b 100%);
}

.header header {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.header header .logo {
  width: 100%;
  text-align: center;
}

.header header .logo img {
  display: inline-block;
  width: 100%;
  max-width: 380px;
}

.header header h2 {
  text-align: center;
  font: 400 72px/72px "Just Lovely", georgia, serif;
  color: #EC1C24;
  margin: 30px 0;
}

@media (max-width: 768px) {
  .header header h2 {
    font: 400 48px/48px "Just Lovely", georgia, serif;
  }
}

.header .schoolWrapper {
  width: 100%;
  max-width: 1280px;
  padding: 0 24px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0 auto;
}

.header .schoolWrapper ul {
  width: 100%;
  display: -ms-grid;
  display: grid;
  grid-gap: 24px;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(, 1fr);
}

@media (max-width: 768px) {
  .header .schoolWrapper ul {
    -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
  }
}

.header .schoolWrapper ul li {
  width: 100%;
}

.header .schoolWrapper ul li.lred {
  background-color: #FFBED3;
}

.header .schoolWrapper ul li.lblue {
  background-color: #BED8FF;
}

.header .schoolWrapper ul li.lgreen {
  background-color: #BCF2C3;
}

.header .schoolWrapper ul li .photo {
  width: 100%;
}

.header .schoolWrapper ul li .photo img {
  display: block;
  width: 100%;
}

.header .schoolWrapper ul li .text {
  padding: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.header .schoolWrapper ul li .text h2 {
  text-align: center;
  font: 600 16px "Inter", sans-serif;
  color: #000;
}

.header .schoolWrapper ul li .text dl {
  width: 100%;
  margin: 16px 0 0 0;
  display: -ms-grid;
  display: grid;
  grid-gap: 8px;
  -ms-grid-columns: (1fr)[1];
      grid-template-columns: repeat(1, 1fr);
}

.header .schoolWrapper ul li .text dl dt {
  width: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 90px auto;
      grid-template-columns: 90px auto;
}

.header .schoolWrapper ul li .text dl dt b {
  display: block;
  width: 100%;
  text-align: left;
  font: 600 13px "Inter", sans-serif;
  color: #000;
}

.header .schoolWrapper ul li .text dl dt p {
  width: 100%;
  text-align: left;
  font: 500 13px "Inter", sans-serif;
  color: rgba(0, 0, 0, 0.8);
}

.header .schoolWrapper ul li .text .dirlinks {
  width: 100%;
  margin: 16px 0 0 0;
  display: -ms-grid;
  display: grid;
  grid-gap: 8px;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.header .schoolWrapper ul li .text .dirlinks a {
  display: block;
  width: 100%;
  text-align: center;
  font: 500 12px/36px "Inter", sans-serif;
  color: #fff;
  border-radius: 4px;
  padding-left: 12px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.header .schoolWrapper ul li .text .dirlinks a.dir {
  background: url(../icons/directions.html) no-repeat left 12px center #03B85E;
  background-size: 20px;
}

.header .schoolWrapper ul li .text .dirlinks a.dir:hover {
  background-color: #00974b;
}

.header .schoolWrapper ul li .text .dirlinks a.app {
  background: url(../icons/android.html) no-repeat left 12px center #333333;
  background-size: 20px;
}

.header .schoolWrapper ul li .text .dirlinks a.app:hover {
  background-color: #111111;
}

.header .schoolWrapper ul li .text .link {
  width: 100%;
  margin: 8px 0 0 0;
}

.header .schoolWrapper ul li .text .link a {
  display: block;
  width: 100%;
  text-align: center;
  font: 500 12px/36px "Inter", sans-serif;
  color: #fff;
  border-radius: 4px;
  padding-left: 12px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.header .schoolWrapper ul li .text .link a.web {
  background: url(../icons/web.html) no-repeat left 12px center #4465EB;
  background-size: 20px;
}

.header .schoolWrapper ul li .text .link a.web:hover {
  background-color: #304fcc;
}

.header .schoolWrapper ul li .text .link a.fee {
  background: url(../icons/rupee.html) no-repeat left 12px center #8F39E4;
  background-size: 20px;
}

.header .schoolWrapper ul li .text .link a.fee:hover {
  background-color: #792bc7;
}

.aboutWrapper {
  width: 100%;
  max-width: 1280px;
  margin: 72px auto 0 auto;
  padding: 0 24px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.aboutWrapper h2 {
  text-align: center;
  font: 400 102px "Just Lovely", georgia, serif;
  color: #EC1C24;
}

.aboutWrapper p {
  text-align: left;
  font: 500 15px/22px "Inter", sans-serif;
  color: rgba(0, 0, 0, 0.8);
  margin: 24px 0 0 0;
}

.aboutWrapper .missionvision {
  width: 100%;
  display: -ms-grid;
  display: grid;
  grid-gap: 24px;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  margin: 56px 0 0 0;
}

@media (max-width: 560px) {
  .aboutWrapper .missionvision {
    -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
  }
}

.aboutWrapper .missionvision .box {
  width: 100%;
  padding: 24px 24px 32px 24px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #EC1C24;
}

.aboutWrapper .missionvision .box h2 {
  text-align: center;
  font: 400 56px "Just Lovely", georgia, serif;
  color: #fff;
}

.aboutWrapper .missionvision .box p {
  text-align: center;
  font: 500 14px/20px "Inter", sans-serif;
  color: rgba(255, 255, 255, 0.8);
  margin: 24px 0 0 0;
}

.management {
  width: 100%;
  max-width: 1280px;
  padding: 0 24px;
  margin: 48px auto 0 auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.management ul {
  width: 100%;
  background-color: #FDCC4B;
  display: -ms-grid;
  display: grid;
  grid-gap: 16px;
  -ms-grid-columns: 38% auto;
      grid-template-columns: 38% auto;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

@media (max-width: 560px) {
  .management ul {
    -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
  }
}

.management ul li {
  width: 100%;
}

.management ul li:last-child {
  padding: 72px 36px 36px 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (max-width: 560px) {
  .management ul li:last-child {
    padding: 24px;
  }
}

.management ul li .photo {
  width: 100%;
}

.management ul li .photo img {
  display: block;
  width: 100%;
}

.management ul li h2 {
  text-align: left;
  font: 400 82px "Just Lovely", georgia, serif;
  color: #000;
}

@media (max-width: 560px) {
  .management ul li h2 {
    font: 400 62px "Just Lovely", georgia, serif;
  }
}

.management ul li p {
  text-align: left;
  font: 500 14px/20px "Inter", sans-serif;
  color: rgba(0, 0, 0, 0.8);
  margin: 24px 0 0 0;
}

.management ul li b {
  display: block;
  width: 100%;
  margin: 24px 0 0 0;
  font: 600 20px "Inter", sans-serif;
  color: #000;
}

@media (max-width: 560px) {
  .management ul li b {
    font: 600 16px "Inter", sans-serif;
  }
}

.testimonials {
  width: 100%;
  max-width: 1280px;
  padding: 0 24px;
  margin: 72px auto 0 auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.testimonials h2 {
  text-align: center;
  font: 400 102px "Just Lovely", georgia, serif;
  color: #EC1C24;
}

@media (max-width: 560px) {
  .testimonials h2 {
    font: 400 72px "Just Lovely", georgia, serif;
  }
}

.testimonials ul {
  width: 100%;
  display: -ms-grid;
  display: grid;
  grid-gap: 24px;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  margin: 24px 0 0 0;
}

@media (max-width: 768px) {
  .testimonials ul {
    -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
  }
}

.testimonials ul li {
  width: 100%;
  background-color: #FDCC4B;
  padding: 62px 32px 32px 32px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.testimonials ul li .photo {
  height: 96px;
  width: 96px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #fff;
}

.testimonials ul li .photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.testimonials ul li p {
  text-align: center;
  font: 400 16px/24px "Inter", sans-serif;
  color: rgba(0, 0, 0, 0.8);
  padding: 48px 48px 32px 48px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (max-width: 560px) {
  .testimonials ul li p {
    padding: 32px;
  }
}

.testimonials ul li b {
  display: block;
  width: 100%;
  text-align: center;
  font: 600 14px "Inter", sans-serif;
  color: #000;
  padding: 0 24px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (max-width: 560px) {
  .testimonials ul li b {
    padding: 0 16px;
  }
}

.testimonials ul li b span {
  font: 400 14px "Inter", sans-serif;
}

.infrastructure {
  width: 100%;
  background-color: #EC1C24;
  margin: 72px 0 0 0;
}

.infrastructure .infWrapper {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 24px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.infrastructure .infWrapper h2 {
  text-align: center;
  font: 400 102px "Just Lovely", georgia, serif;
  color: #fff;
}

@media (max-width: 560px) {
  .infrastructure .infWrapper h2 {
    font: 400 72px "Just Lovely", georgia, serif;
  }
}

.infrastructure .infWrapper p {
  text-align: center;
  font: 500 15px/20px "Inter", sans-serif;
  color: rgba(255, 255, 255, 0.8);
  margin: 24px 0 0 0;
  word-break: keep-all;
}

.infrastructure .infWrapper ul {
  width: 100%;
  display: -ms-grid;
  display: grid;
  grid-gap: 24px;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  margin: 56px 0 0 0;
}

@media (max-width: 560px) {
  .infrastructure .infWrapper ul {
    -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
  }
}

.infrastructure .infWrapper ul li {
  width: 100%;
}

.infrastructure .infWrapper ul li img {
  display: block;
  width: 100%;
}

.footer {
  width: 100%;
  background: url(../images/footer.jpg) no-repeat left center;
  background-size: cover;
  padding: 106px 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.footer ul {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (max-width: 768px) {
  .footer ul {
    -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
  }
}

.footer ul li {
  width: 100%;
  padding: 0 40px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (max-width: 768px) {
  .footer ul li {
    padding: 40px 24px;
  }
}

.footer ul li .logo {
  display: block;
  text-align: center;
}

.footer ul li .logo img {
  display: inline-block;
  width: 100%;
  max-width: 160px;
}

.footer ul li.border {
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

@media (max-width: 768px) {
  .footer ul li.border {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
  }
}

.footer ul li h2 {
  text-align: left;
  font: 600 16px "Inter", sans-serif;
  color: #fff;
}

.footer ul li b {
  display: block;
  width: 100%;
  text-align: left;
  font: 400 13px "Inter", sans-serif;
  color: rgba(255, 255, 255, 0.8);
  margin: 16px 0 0 0;
}

.footer ul li p {
  text-align: left;
  font: 400 13px "Inter", sans-serif;
  color: rgba(255, 255, 255, 0.8);
  margin: 12px 0 0 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 72px auto;
      grid-template-columns: 72px auto;
}

.footer ul li p span {
  display: block;
  width: 100%;
  font: 500 13px "Inter", sans-serif;
  color: #fff;
}

.footer ul li p b {
  display: block;
  width: 100%;
  text-align: left;
  font: 400 13px "Inter", sans-serif;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

footer {
  width: 100%;
  background-color: #333333;
  padding: 24px 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

footer ul {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  grid-gap: 8px;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 24px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (max-width: 560px) {
  footer ul {
    -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
  }
}

footer ul li {
  text-align: left;
  font: 500 12px "Inter", sans-serif;
  color: rgba(255, 255, 255, 0.8);
}

footer ul li:last-child {
  text-align: right;
}

@media (max-width: 560px) {
  footer ul li:last-child {
    text-align: left;
  }
}

footer ul li a {
  display: inline-block;
  font: 600 12px "Inter", sans-serif;
  color: #fff;
  text-transform: uppercase;
}
/*# sourceMappingURL=style.css.map */





/* Add these styles to your existing CSS or create a new CSS file 

.three-column-layout {
  display: flex;
  justify-content: right;
  margin: 5px; 
}

.column {
  flex: 2;
  margin: 10 10px;
}

.column img {
  max-width: 50%;
  height: auto;
}
*/


.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.column {
	flex: 1 0 300px;
	margin: 10px;
	text-align: center;
}

.left-column, .right-column {
	img {
		max-width: 50%;
		height: auto;
	}
}

.middle-column {
	h1 {
		margin: 0;
	}
	p {
		margin: 20px 0;
	}
}