body   {  
  height:125vh;
  margin-top: 80px;  
  padding: 10px;  
  background-size: cover;  
  font-family: sans-serif;
}  
clown {  
  background-color: #4BA3C3;
  position: fixed; 
  width:100%;
  left: 0;  
  right: 0;  
  top: 5px;  
  height: 50px;  
  display: flex;  
  align-items: center;  
  box-shadow: 0 0 25px 0 black;  
}  

clown * {  
  display: inline;  
}  
clown li {  
  max-inline-size: 40px;
  margin: 20px;  
  word-wrap: break-word;
}  
clown li a {  
  color: black; 
  text-decoration: none; 
  font-size:20px; 
}  
 .cu {
  font-family:'Times New Roman', Times, serif;
  font-size: 24px;
  width: 506px;
  height: 87px;
  left: 23px;
  top: 33px;
 }

.active {
  background-color: #CCE6F4;
}

.container {
  position: relative;
  width:100%;
  height:100%;
  background-color: white;
}

.container1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 50px;
  padding-top: 10px;
  height: auto;
  overflow: auto;
 }
 
  img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    align-items: center;
  }

  .cuimage {
    grid-column: 1;
    grid-row: 1;  
    float:left;
  }
 
  .join {
    grid-column: 2/4;
    grid-row: 1; 
    font-size: 30px;
  }

  .register {
    grid-column: 4;
    grid-row: 1;  
    background-color: #CCE6F4;
  }

  .apply {
    background-color: #D62839; 
    text-align: center; 
    display:block;
  }

  .details {
    font-size: 30px;
  }
  
  .oc_container {
    display: grid;
    grid-template-columns: 1fr 1fr ;
    column-gap: 100px;
    padding-top: 10px;
    height: auto;
    overflow: auto;
    background-color: white;
   }

   .offer {
    background-color: #CCE6F4;
    font-size:20px;
    padding-left: 5px;
   }

   .community {
    background-color: #CCE6F4;
    font-size:20px;
    padding-left: 5px;
   }

  .container2 {
    display: grid;
    align-items: center; 
    position: fixed;
    width:100%;
    bottom: 0px;
    left: 0;
    right: 0;
    grid-template-columns: 1fr 1fr 1fr 1fr ifr;
    font-size: 20px;
    padding-bottom: 10px;
    background-color: #CCE6F4;
  }
 
  .message {
      grid-column: 1  ;
      grid-row: 1;
      font-size: 30px;
  }

  text {
    font-size: 30px;
  }
  
  .ftext {
    grid-column: 2;
    grid-row: 1;
  }
  
  .ltext {
    grid-column: 3;
    grid-row: 1;
  }
  
  .emtext {
    grid-column: 4;
    grid-row:1;
  }

  .submit {
    grid-column: 5;
    grid-row:1;
  }

.chead {
  text-align: center;
}

.course_container1 {
  display: grid;
  background-color: #CCE6F4;
  width:100%;
  height: auto;
  overflow: auto;
}

.course_container2 {
  display: grid;
  background-color: #CCE6F4;
  width:100%;
  height: auto;
  overflow: auto;
}

.course_container3 {
  display: grid;
  background-color: #CCE6F4;
  width:100%;
  height: auto;
  overflow: auto;
}

.course_container4 {
  display: grid;
  background-color: #CCE6F4;
  width:100%;
  height: auto;
  overflow: auto;
}
.prof {
  color: #39bfec;
  padding-left: 20px;
  font-size: 25px;
}

.desc {
  font-size: 20px;
  padding-left: 20px;
}

.invisible {
  color: white;
}

.photos {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 30px;
  padding-top: 10px;
  height: auto;
  overflow: auto;
  padding-bottom: 10px;
}

.photo {
  padding: 20px;
  background-color: #CCE6F4; 
}

.image1 {
  grid-column: 1  ;
  grid-row: 1;
}
.image2 {
  grid-column: 2  ;
  grid-row: 1;
}
.image3 {
  grid-column: 3 ;
  grid-row: 1;
}

.name1 {
  grid-column:1 ;
  grid-row: 2;
  color: black;
}

.name2 {
  grid-column:2 ;
  grid-row: 2;
  color: black;
}

.name2 {
  grid-column:3;
  grid-row: 2;
  color: black;
}

.mission, .contact {
  font-size: 24px;
  background-color: #CCE6F4; 
}