*body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 16px 20px;
  text-decoration: none;
  font-size: 22px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.banner-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../Image/schoolbg.jfif");
  height: 80%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.banner-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}





                       body {
                           font-family: Arial, Helvetica, sans-serif;
                           background-color:white;
                       }




                       .row:after {
                           content: "";
                           display: table;
                           clear: both;
                       }

                       @media screen and (max-width:600px) {
                           .colummn {
                               width: 100%;
                               display: block;
                               margin-bottom: 20px;
                           }
                       }

                       .card {
                           box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
                         height:380px;
                           max-width: 1000px;
                           margin: auto;
                           background-color: #042D96;
                           font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', Arial, sans-serif;
                           text-align: center;
                           border-radius: 40px;
                           padding-bottom: 15px;
                           color: white;
                       }

                       .card img {
                           border-radius: 50%;
                           cursor: pointer;
                       }



                       button {
                           border: none;
                           padding: 8px;
                           display: inline-block;
                           color: white;
                           background-color: black;
                           cursor: pointer;
                           width: 70%;
                           border-radius: 20px;
                           font-size: 18px;
                           text-align: center;
                       }

                       .header {

                           padding: 60px;
                           text-align: center;


                       }

                       img:hover {
                           opacity: 0.8;
                       }


                                              .sponsors-container{
                                                text-align: center;
                                              }

                                              .sponsors-img{
                                                  width: 50%;
                                                  height: auto;
                                              }

                                              .sponsors-link{
                                                    display: inline-block;
                                              }

                                              .sponsors-title{
                                                font-size: 48px;
                                                font-family: "Times New Roman", Times, serif;
                                              }

                                              .sponsors-subtitle{
                                                font-size: 36px;
                                                font-family:"Times New Roman", Times, serif;
                                              }


                                              .footer {
                                                 left: 0;
                                                 bottom: 0;
                                                 width: 100%;
                                                 line-height:2;
                                                 background-color: rgb(51, 133, 255);
                                                 color: white;
                                                 text-align: center;
                                              }

                       .footer p{
                         font-size: 20px;
                       }