* {
    margin: 0;
    padding: 0;
}

.uppernav span {
    color: maroon;
    font-weight: bold;
    font-size: 20px;
}

.uppernav {
    background-color: white;
    margin-top: -10px;
    height: 100px;
    z-index: 3;
}

.uppernav p {

    margin-top: 30px;
    margin-left: 200px;
    margin-right: 200px;
    color: rgb(167, 162, 162);
    font-size: 20px;
    display: flex;
}

.uppernav p marquee {
    width: 55%;
}

.uppernav p img {
    margin-left: 20px;
    width: 20px;
    height: 20px;
}

.uppernav p a {
    text-decoration: none;
}

.uppernav p button {
    margin-left: 20px;
    width: 100px;
    height: 28px;
    background-color: rgb(201, 201, 47);
    color: white;
    font-size: 20px;
    border-radius: 10px;
    border-color: rgb(201, 201, 47);
}

.uppernav p button:hover {
    background-image: linear-gradient(to right, red, rgb(201, 201, 47));
}

#backgr {
    background-color: rgb(130, 7, 7);
}

.navbar ul li {
    margin-left: 30px;
}

.nav {
    position: sticky;
    top: 0px;
    z-index: 2;
}


.mid-img {
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-top: 5%;
    padding-left: 60%;
    box-sizing: border-box;
    margin-bottom: 5%;
}

.mid-in {
    width: 65%;
    display: flex;
    text-align: left;
    align-items: center;
    margin-bottom: 60px;
}

.mid-in h5 {
    width: 100%;
    border-radius: 40px;
    font-size: 22px;
    background-color: rgb(150, 146, 146);
    opacity: .6;
    margin-left: 20px;
    padding: 15px;
    color: white;
}

.mid-in a {
    text-decoration: none;
}

#icon4 {
    background-color: darkorchid;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    text-align: center;
    padding-top: 16px;
    z-index: 1;
}

#icon5 {
    background-color: blue;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    text-align: center;
    padding-top: 16px;
    z-index: 1;
}

#icon6 {
    background-color: green;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    text-align: center;
    padding-top: 16px;
    z-index: 1;
}

#icon7 {
    background-color: rgb(52, 120, 148);
    width: 50px;
    height: 50px;
    border-radius: 50px;
    text-align: center;
    padding-top: 16px;
    z-index: 1;
}

#icon4:hover {
    background-color: brown;
}

#icon5:hover {
    background-color: brown;
}

#icon6:hover {
    background-color: brown;
}

#icon7:hover {
    background-color: brown;
}

.home:hover {
    background-color: brown;
}

.schoolnews {
    width: 100%;
    height: 300px;
    margin-top: 60px;
}

.schoolnews h5 {
    text-align: center;
    margin-top: 50px;
    font-size: 50px;
    color: maroon;
    margin-top: 100px;
}

.news {
    display: flex;
    width: 100%;
    align-items: center;
    justify-self: center;
    gap: 35px;
    flex-wrap: wrap;
    margin: -100px 10px 0px 0px;
}

.cards {
    width: 22%;
    border-radius: 10px;
    box-shadow: 1px 1px 4px 4px rgb(181, 180, 180);
    padding: 2%;
    color: rgb(145, 132, 132);
    text-align: center;
    font-size: 20px;
    line-height: 30px;
    margin-left: 10px;
}

.cards img {
    width: 100%;
    margin-bottom: 20px;
}


.allwin {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.honor h3 {
    margin-top: 40px;
    margin-left: 100px;
    color: maroon;
    font-size: 40px;
    width: 100%;
}

.honor {
    margin-left: 80px;
    width: 450px;
}

.box1 {
    border: 4px solid rgb(241, 150, 165);
    height: 230px;
    margin-top: 20px;
    border-top-left-radius: 5px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 5px;
}

.box1 p {
    margin: 10px;
}

.box1 a {
    font-size: 22px;
    text-decoration: none;
    text-align: center;
    color: grey;
}

.schcal {
    display: flex;
    justify-content: center;
    padding-top: 5%;
    padding-bottom: 5%;
    gap: 5%;
    width: 100%;
    box-sizing: border-box;
}

.box2 {
    padding: 30px 15px;
    border-radius: 25px;
    font-size: 20px;
    line-height: 30px;
    color: rgb(46, 41, 41);
    margin-bottom: 20px;
    margin-top: 10px;
    background-color: rgb(176, 203, 240);
}

.box3 {
    padding: 30px 15px;
    border-radius: 25px;
    font-size: 20px;
    line-height: 30px;
    color: rgb(46, 41, 41);
    margin-bottom: 20px;
    margin-top: 10px;
    background-color: rgb(196, 233, 246);
}

.box4 {
    padding: 30px 15px;
    border-radius: 25px;
    font-size: 20px;
    line-height: 30px;
    color: rgb(46, 41, 41);
    margin-bottom: 20px;
    margin-top: 10px;
    background-color: rgb(176, 239, 176);
}

.schcal a {
    text-decoration: none;
}

.link {
    color: gray;
    font-size: 20px;
}

.schcalleft {
    border-right: 3px solid rgb(153, 14, 14);
    padding-right: 4%;
    width: fit-content;
    width: 20%;
}

.schcalright {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 25px;
    width: 60%;
}

.schcalright a {
    font-size: 18px;
    border-radius: 15px;
    text-decoration: none;
    width: 10%;
    padding: 30px;
    background-color: wheat;
    height: fit-content;
    color: rgb(57, 56, 56);
}

.schcalright a img {
    width: 35px;
    margin-bottom: 10px;
    margin-left: 15%;
}


.footer1 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5%;
    background-color: rgb(227, 222, 222);
    padding: 7% 0;
}

.footer1 ul li {
    list-style: none;
    font-size: 23px;
}

.fa-solid {
    color: maroon;
}

.heading {
    color: maroon;
}

.footer1 ul li a {
    text-decoration: none;
    color: black;
}

.myself {
    background-color: maroon;
    width: 100%;
    height: 100px;
    text-align: center;
    padding-top: 20px;
    color: wheat;
}