html, body{
    height: 100%;
    margin: 0;
    overflow-x: hidden ;
}

.photo{
    height: 100vh;
    background-image: url(images/mainPhoto1.png);
    background-size: cover;
}
.photo2{
  height: 100vh;
  background-image: url(images/mainPhoto2.png);
  background-size: cover;
}
.photo3{
  height: 100vh;
  background-image: url(images/mainPhoto3.png);
  background-size: cover;
}

.mainText{
    color: whitesmoke;
    margin-left: 7%;
    margin-top: 15%;
    text-transform: uppercase;
    text-shadow: 1px 1px 12px black;
}

.black-btn {
    background-color: #000;
    color: #fff;
    border-radius: 35px;
    height: 5%;
    width: 7%;
    margin-top: 40%;
  }

  .galleryText{
    text-transform: uppercase;
    color: rgb(0, 0, 0);
    margin-top: 4%;
    margin-left: 5%;
  }
  .line{
    border-top: 1px solid rgb(0, 0, 0);
      height: 0;
      width: 5%;
      margin-left: 9%;
      transform: translateX(-50%);
      margin-bottom: 1%;
  }
  .line1{
    border-top: 1px solid rgb(0, 0, 0);
      height: 0;
      width: 5%;
      margin-left:50%;
      transform: translateX(-50%);
      margin-bottom: 1%;
  }
  .line2{
    border-top: 1px solid rgb(0, 0, 0);
      height: 0;
      width: 15%;
      margin-left:50%;
      transform: translateX(-50%);
      margin-bottom: 1%;
  }
  .photos{
    width: 100%;
    height: 100%;
  }
  .no-padding {
    padding: 0px;
  }
  .about{
    margin-top: 5%;
  }
  .aboutHeading{
    text-transform: uppercase;
  }
  .aboutText{
    text-align: center;
    padding-left: 15%;
    padding-right: 15%;
  }
  .learn{
    margin-top: 5%;
  }
  .learnHeading{
    text-transform: uppercase;
  }
  .cards{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .card{
    width: 20%;
    height: 40vh;
    margin-right: 4%;
    margin-left: 4%;
    border-radius: 0px;
    border: 2px solid rgb(46, 45, 45);
  }
  .card:first-child{
    background-color: rgb(46, 45, 45);
    color: whitesmoke;
  }
  .teacher {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 5%;
}

.teacherText {
    position: absolute;
    background-color: rgb(46, 45, 45);
    color: whitesmoke;
    width: 60%;
    padding: 2%;
    z-index: 2;
    margin-left: 10%;
    width: 50%;
}

.teacherimage img{
    width: 70%;
    margin-left: 100%;

}

.teacherP {
    margin-bottom: 0;
}

.teacherHeading{
  text-transform: uppercase;
  color: whitesmoke;
}
.teacherSubHeading{
  text-transform: uppercase;
  color: whitesmoke;
}
.footer{
  margin-top: 15%;
  width: 100%;
  font-family: 'Times New Roman', Times, serif;
}
.href{
  font-family: 'Times New Roman', Times, serif;
  font-size: 150%;
  text-decoration: none;
  color: rgb(0, 0, 0);
}

.href:hover{
  color: rgb(0, 0, 0);
  text-decoration: none;
}
.fadeIn {
  color: #fff;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  visibility: hidden;
}

.fadeIn.fadeInVisible {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1440px) {
  .about{
    margin-top: 7%;
  }
  .card{
    height: 70vh;
  }
  .teacherimage img{
    width: 60%;
    margin-left: 72%;
  }
}
@media (max-width: 1024px) {
  .about{
    margin-top: -7%;
  }
  .card{
    width: 25%;
    height: 77vh;
  }
  .teacherimage img{
    width: 51%;
    margin-left: 50%;
  }
  .teacherText{
    margin-left: 3%;
    height: 100%;
  }
}

@keyframes animace {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .mainText{
    margin-left: 9%;
    margin-top: 38%;
    animation: animace 2s ease-in-out;
  }
  .mainText2{
    margin-left: 6% !important;
  }
  .mainText3{
    margin-left: 4% !important ;
    margin-top: 22% !important;
    text-align: center;
  }
  .about{
    margin-top: -30%;
  }
  .card{
    width: 100%;
    margin-bottom: 2%;
    height: 35vh;
  }

  .teacherimage img{
    width: 45%;
  }
  .teacherHeading{
    font-size: 2rem;
  }
  .teacherSubHeading{
    font-size: 1.1rem;
  }
  .teacherP{
    font-size: 0.9rem;
  }
}

@media (max-width: 425px) {
  .mainText{
    text-align: center ;
    margin-left: 2%;
  }
  .photo{
    background-position-x: -94%;
  }
  .mainText2{
    margin-left: 1% !important;
    letter-spacing: 1px;
  }
  .photo2{
    background-position-x: -71%;
  }
  .photo3{
    background-position-x: -108%;
  }
  .mainText3{
    margin-left: 0% !important;
    margin-top: 45%  !important;
  }
  .galleryText{
    margin-left: 31%;
    margin-top: 2%;
  }
  .line{
    width: 30%;
    margin-left: 50%;
  }
  .about{
    margin-top: 550%;
  }
  .aboutHeading{
    font-size: 2rem;
  }
  .line1{
    width: 17%;
  }
  .aboutText{
    font-size: 1rem !important;
  }
  .learnHeading{
    font-size: 2rem;
  }
  .line2{
    width: 65%;
  }
  .lead{
    font-size: 1rem;
  }
  .footer{
    margin-top: 30%;
  }
  .teacherText{
    margin-left: 8%;
    margin-top: 15%;
    width: 85%;
    height: 200%;
    position: relative;
  }
  .teacherimage img{
    width: 85%;
    margin-left: 1%;
  }
}
@media (max-width: 375px) {
  .mainText{
    margin-left: 0%;
    font-size: 2rem;
  }
  .photo{
    background-position-x: -86.5%;
  }
  .mainText2{
    letter-spacing: 0px !important;
    margin-left: 0%	!important;
  }
  .photo2{
    background-position-x: -67%;
  }
  .mainText3{
    letter-spacing: 1px;
  }
  .photo3{
    background-position-x: -98.5%;
  }
 .galleryText{
    margin-top: 1%;
    margin-left: 29%;
  }
  .about{
    margin-top: 530%;
  }
  .card{
    height: 40vh;
  }
}

@media (max-width: 320px) {
  .mainText3{
    letter-spacing: 0px;
  }
  .photo{
    background-position-x: -79.5%;
  }
  .photo3{
    background-position-x: -89.5%;
  }
  .galleryText{
    margin-left: 25%;
  }
  .line{
    width: 40%;
  }
  .about{
    margin-top: 520%;
  }
  .card{
    height: 50vh;
  }
}