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

body {
  width: 100vw;
  scroll-behavior: smooth;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
header {
  display: flex;
  justify-content: space-between;
  text-align: center;
  font-family: sans-serif;
}

#part1 {
  background-color: white;
}

.logo {
  width: 10vw;
  height: 20vh;
  font-size: 5vw;
  color: white;
  font-family: "Abril Fatface", cursive;
  background-image: url(../images/logo.png);
  background-size: 100% 100%;
  /* border: 2px solid blue;   */
  filter: contrast(200%);
}

.topnav {
  width: 30vw;
  /* border: 2px solid blue; */
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-family: "Abril Fatface", cursive;
}

.topnav a {
  text-decoration: none;
  color: white;
  font-size: 1.5vw;
}
#section1 {
  height: 88vh;
  width: 100%;
  background-image: url(../images/back1.jpg);
  animation-name: background;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
nav a {
  text-decoration: none;
  color: white;
  font-size: 2vw;
}

.ham1 {
  display: none;
}
@keyframes background {
  0% {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1)),
      url(../images/back1.jpg);
    background-size: cover;
  }
  20% {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1)),
      url(../images/back2.jpg);
    background-size: cover;
  }
  40% {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1)),
      url(../images/back3.jpg);
    background-size: cover;
  }
  60% {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1)),
      url(../images/back4.jpg);
    background-size: cover;
  }
  80% {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1)),
      url(../images/back5.jpg);
    background-size: cover;
  }
  100% {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1)),
      url(../images/back1.jpg);
    background-size: cover;
  }
}

main {
  height: 85vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#intro {
  color: white;
}

#intro h2 {
  font-size: 6vh;
  letter-spacing: 4px;
  text-shadow: 4px 4px 7px black;
}
.introh2 {
  animation-name: fromright;
  animation-duration: 4s;
  animation-timing-function: ease;
  display: block;
}
#intro h1 {
  font-size: 10vh;
  color: aliceblue;
  text-shadow: 4px 4px 7px black;
}
.introh1 {
  animation-name: fromleft;
  animation-duration: 4s;
  animation-timing-function: ease;
}
#intro h4 {
  font-size: 22px;
  color: white;
  margin: 5vh 0;
}

#intro a {
  text-decoration: none;
  font-size: 3vh;
  color: white;
  border-radius: 5px;
  padding: 10px 12px;
  margin: 10px;
  background-color: rgba(53, 53, 53, 0.8);
}
.introa {
  animation-name: bottons;
  animation-duration: 10s;
  animation-timing-function: ease;
}

#content::after {
  content: "";
  animation-name: changetext;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes changetext {
  0% {
    content: "Excel";
  }
  20% {
    content: "Learn";
  }
  40% {
    content: "Grow";
  }
  60% {
    content: "Develop";
  }
  80% {
    content: "Inovate";
  }
  100% {
    content: "Excel";
  }
}

@keyframes fromleft {
  0% {
    transform: translateX(300px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes fromright {
  0% {
    transform: translateX(-300px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes bottons {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* .logo:hover {
    background-color: rgb(182, 148, 105);
    border: 0px solid black;
    padding: 1px;
    border-radius: 30px;
} */

nav {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  height: 12vh;
  align-items: center;
}

nav a {
  color: #006d77;
  display: inline-block;
  width: 15vw;
  text-align: center;
  height: 13vh;
  line-height: 13vh;
  /* border: 3px solid red; */
}

.nav {
  position: sticky;
  top: 0px;
  background-color: #edf6f9;
  z-index: 10;
}

#main-nav {
  position: sticky;
  top: 0px;
}

nav a:hover {
  background-color: rgb(182, 148, 105);
  transform: scaleX(1.1);
}
.discover {
  display: grid;
  height: 88vh;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  background-image: url(../images/big.jpeg);
  background-size: 100% 120%;
  background-position: center center;
  /* border: 3px solid red; */
}

#grid-1 {
  height: 68vh;
  width: 60vw;
}
#grid-2 {
  height: 68vh;
}
#grid-2 img {
  height: 330px;
  width: 475px;
  padding-top: 60px;
}
#grid-3 {
  grid-column: 1/-1;
  height: 5vh;
}
h1 {
  font-weight: bolder;
  font-size: 70px;
  padding-top: 20px;
  text-align: center;
  color: #03306b;
}
#text {
  text-align: justify;
  font-size: 25px;
}

#textcont {
  margin: auto;
  width: 80%;
}
#moving_text {
  z-index: -3;
}
marquee {
  background-color: white;
}
marquee a {
  text-decoration: none;
  display: block;
  height: 10vh;
  line-height: 10vh;
  /* border: 3px solid green; */
  font-size: 2vw;
}

/* .section1 {
    background-image: url(collage.png);

} */

#poster2 {
  height: 88vh;
  width: 100%;
  /* background-image: url(../Capture2.JPG); */
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr) 0.5fr;
  grid-template-rows: 1fr 4fr;
  background-image: url(../images/poster2back.jpeg);
  background-position: center center;
}
/* .post2 {
    border: 2px solid blue;
} */

#post1 {
  grid-column: 1/2;
  grid-row: 1/-1;
}
#post2 {
  grid-column: 2/7;
  grid-row: 1/2;
  display: grid;
  place-items: left;
  color: white;
  padding-top: 20px;
  padding-left: 50px;
  font-size: 27px;
}
#book {
  margin: 20% 10%;
  margin-top: 110px;
  align-items: center;
}
#banner1 {
  background-color: rgb(238, 113, 180);
  height: 54%;
  width: 80%;
  margin: 3% auto;
  transition-property: height;
  transition-duration: 2s;
  overflow: hidden;
  text-align: center;
}
#banner1:hover {
  height: 85%;
}
#banner2 {
  background-color: rgb(230, 226, 24);
  height: 50%;
  width: 80%;
  margin: 30% auto;
  transition-property: height;
  transition-duration: 2s;
  overflow: hidden;
  align-self: center;
  text-align: center;
}

#banner2:hover {
  height: 80%;
}
#teaching {
  margin: 20% 10%;
  margin-top: 75px;
  align-items: center;
  text-align: center;
}
#library {
  margin: 20% 10%;
  margin-top: 100px;
  margin-left: 19px;
}
/* #bottomback{
    height: 100vh;
    width: 100vw;
    background-image: url(../images/backsec.jpeg);
    background-size: cover;
    position:fixed;
    top: 0px;
    z-index: -3;
} */

/* DEVELOPERS SECTION STYLING START */

#developers {
  display: grid;
  height: 88vh;
  width: 104.5vw;
  transform: translate(-6vw);
  grid-template-rows: 0.5fr 3fr;
  grid-template-columns: repeat(7, 1fr);
  background-color: #00d6eb;
  overflow: hidden;
}

#devheading {
  grid-column: 1/-1;
}

#devheading h1 {
  font-size: 40px;
}

/* #developers div {
    border: 1px solid blue;
} */

.devs {
  background-color: rgb(230, 226, 24);
  height: 55vh;
  width: 16vw;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.head {
  height: 55vh;
  width: 16vw;
  z-index: 5;
  transform: translateY(10vh);
  box-shadow: 7px 0px 8px brown, -7px 0px 8px brown;
  transition: transform 2s;
}

.head:hover {
  transform: scale(1.05, 1.05);
}
#dev3 {
  transform: perspective(500px) translate(3vw, 7vh) rotateY(25deg);
  transition: transform 2s;
}

#dev2 {
  transform: perspective(500px) translate(6vw, 5vh) rotateY(25deg);
  transition: transform 2s;
}

#dev1 {
  transform: perspective(500px) translate(9vw, 2vh) rotateY(25deg);
  transition: transform 2s;
}

#dev5 {
  transform: perspective(500px) translate(-3vw, 7vh) rotateY(-25deg);
  transition: transform 2s;
  z-index: 3;
}

#dev6 {
  transform: perspective(500px) translate(-6vw, 5vh) rotateY(-25deg);
  transition: transform 2s;
  z-index: 2;
}

#dev7 {
  transform: perspective(500px) translate(-9vw, 2vh) rotateY(-25deg);
  transition: transform 2s;
  z-index: 1;
}

#dev3:hover {
  z-index: 10;
  transform: translate(3vw, 7vh) rotateY(0deg);
}

#dev2:hover {
  z-index: 10;
  transform: translate(6vw, 5vh) rotateY(0deg);
}

#dev1:hover {
  z-index: 10;
  transform: translate(9vw, 2vh) rotateY(0deg);
}

#dev5:hover {
  z-index: 10;
  transform: translate(-3vw, 7vh) rotateY(0deg);
}

#dev6:hover {
  z-index: 10;
  transform: translate(-6vw, 5vh) rotateY(0deg);
}

#dev7:hover {
  z-index: 10;
  transform: translate(-9vw, 2vh) rotateY(0deg);
}

#dev1 .devpic {
  background-image: url(../images/homework.webp);
  background-size: 100% 100%;
}

#dev2 .devpic {
  background-image: url(../images/dance.png);
  background-size: 100% 100%;
}
#dev3 .devpic {
  background-image: url(../images/english.jpg);
  background-size: 100% 100%;
}
#dev4 .devpic {
  background-image: url(../images/PLAYGROUP.png);
  background-size: 100% 100%;
}
#dev5 .devpic {
  background-image: url(../images/tutoring.jpg);
  background-size: 100% 100%;
}
#dev6 .devpic {
  background-image: url(../images/artandcraft.jpg);
  background-size: 100% 100%;
}
#dev7 .devpic {
  background-image: url(../images/Exercise.jpg);
  background-size: 100% 100%;
}
.team1 {
  box-shadow: -7px 7px 8px brown, 7px -7px 8px brown;
}

.team2 {
  box-shadow: 7px -7px 8px brown, -7px 7px 8px brown;
}

.devpic {
  height: 45%;
  width: 80%;
  background-color: white;
  border-radius: 100%;
  margin: 15% 0;
}

.devcontent {
  height: 30%;
  width: 80%;
  /* background-color: yellow; */
  margin: auto;
  text-align: center;
  color: #03306b;
  font-size: 1.5vw;
  font-weight: bolder;
}

/* DEVELOPERS SECTION STYLING END */

.section_container {
  height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#part2 {
  background-image: url(../images/BG.jpeg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100vh;
}

#section2 {
  background-color: #00d6eb;
  color: #edf6f9;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.5fr 2fr;
  grid-gap: 20px;
  height: 60vh;
  width: 80%;
  margin: auto;
  /* transform: translateY(-30px); */
  border-radius: 50px;
  padding: 10vh 5vw;
}

#div1 {
  grid-column: 1/4;
  grid-row: 1/2;
  text-align: center;
  padding: 10px;
  font-size: 30px;
  font-weight: bolder;
}

.block {
  color: black;
  /* border: 2px solid blue; */
  text-align: center;
  border-radius: 1%;
  font-size: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.block p {
  font-size: 18px;
  font-weight: 100;
}
#section3 {
  background-color: #00d6eb;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.5fr 2fr;
  grid-gap: 30px;
  height: 60vh;
  width: 80%;
  align-items: center;
  /* margin: auto; */
  border-radius: 50px;
  padding: 10vh 5vw;
  /* color: #edf6f9; */
}
.s3block {
  text-align: center;
  font-size: 25px;
  font-weight: 700;
}
#div {
  grid-column: 1/4;
  grid-row: 1/2;
  text-align: center;
  padding: 10px;
  font-size: 30px;
}

.content1 {
  font-size: 18px;
  align-self: flex-start;
  font-weight: 300;
}
#content1 {
  text-align: justify;
  font-weight: normal;
}

#section4 {
  background-color: yellowgreen;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.5fr 2fr;
  grid-gap: 30px;
  height: 50vh;
  width: 80%;
  margin: auto;
  border-radius: 50px;
  padding: 1%;
}

#divid1 {
  grid-column: 1/4;
  grid-row: 1/2;
  text-align: center;
  padding: 10px;
  font-size: 30px;
  font-weight: bolder;
}

.sec4_vid {
  display: grid;
  place-items: center;
  align-self: flex-start;
}

footer {
  display: flex;
}
#td1 {
  background-color: aqua;
  height: 33vh;
  width: 33vw;
}
#td2 {
  background-color: chocolate;
  height: 33vh;
  width: 33vw;
}
#td3 {
  background-color: lightgreen;
  height: 33vh;
  width: 33vw;
}
footer div {
  font-size: 20px;
  text-align: center;
  padding-top: 30px;
}

footer div img {
  height: 35px;
  width: 35px;
  text-align: left;
}

#loader {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 29;
  background-image: url(../images/loader.gif);
  background-position: center center;
  background-color: #353535;
  background-repeat: no-repeat;
  /* display: none; */
}


.copyright{
  height: auto;
  width: 100vw;
  text-align: center;
  background-color: #00d6eb;
  font-size: 20px;

}