.pgbdy{
    width: 80%;
    justify-content: center;
    text-align: center;
    border: 0.0625rem solid rgba(32, 32, 32, 0.3);
    border-radius: 2rem;
    margin: auto auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.vision{
    text-align: center;
    width: 80%;
    margin: auto auto;
}

.mission{
    text-align: center;
    width: 90%;
    margin: auto auto;
}

.values{
    text-align: center;
    width: 80%;
    margin: auto auto;
}

.pgbdy h2{
    margin-top: 1.7rem;
    margin-bottom: 0.7rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 2.2rem;
    color: rgb(32, 32, 32);
}

.pgbdy p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    color: rgb(32, 32, 32);
    margin-bottom: 1rem;
}

.bttm{
    margin-bottom: 1rem;
}

.bttm span{
    font-size: 2.5rem;
}

.facilities{
    border-top: 0.125rem solid rgb(5, 5, 90);
    width: 100%;
}

h3{
    text-align: center;
    padding-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 3rem;
    color: rgb(32, 32, 32);
}

.facilitieswrapper, .whywrapper{ 
    width: 90%;
    margin: auto auto;
    margin-top: 1.5rem;
    display: flex;
    text-align: center;
}

.facilitieswrapper h4, .whywrapper h4{
    margin-bottom: 1.1rem;
    margin-top: 1.25rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.9);
}

.facilitieswrapper p, .whywrapper p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    width: 90%;
    margin: auto auto;
    margin-bottom: 1.5rem;
}

.facilitieswrapper{
    background-size: cover;
    border-radius: 3px;
    animation: facilitiesbackground 18s ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes facilitiesbackground {
    0%{
        background-image: url(images/homefacilities/1.jpg);
        background-position: top;
    }

    25%{
        background-image: url(images/homefacilities/2.jpg);
        background-position: bottom;
    }

    50%{
        background-image: url(images/homefacilities/3.jpg);
        background-position: bottom;
    }

    100%{
        background-image: url(images/homefacilities/1.jpg);
        background-position: top;
    }
}

.whywrapper{
    background-size: cover;
    border-radius: 3px;
    animation: whybackground 10s ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes whybackground {
    0%{
        background-image: url(images/homewhy/1.jpg);
        background-position: center;
    }

    50%{
        background-image: url(images/homewhy/2.jpg);
        background-position: center;
    }

    100%{
        background-image: url(images/homewhy/1.jpg);
        background-position: center;
    }
}

.academics, .sports, .clubs{
    border-radius: 1rem;
    margin: 1.5rem 0.5rem;
}

.academics{
    background-image: url(images/3.academics.jpg);
    background-position: center;
    background-size: contain;
}

.sports{
    background-image: url(images/1.sports.jpg);
    background-position: center;
    background-size: contain;
}

.clubs{
    background-image: url(images/2.clubs.jpg);
    background-position: center;
    background-size: contain;
}

.why{
    margin-top: 1rem;
    padding-bottom: 1.5rem;
}

.quality, .affordability, .interactive{
    border: 0.0625rem solid rgba(32, 32, 32, 0.3);
    border-radius: 1rem;
    margin: 1.5rem 0.5rem;
}

.quality{
    background-image: url(images/4.holistic.jpg);
    background-position: center;
    background-size: contain;
}

.affordability{
    background-image: url(images/5.affordibility.jpg);
    background-position: center;
    background-size: contain;
}

.interactive{
    background-image: url(images/6.interactive.jpg);
    background-position: center;
    background-size: contain;
}

.academics, .sports, .clubs, .affordability, .quality, .interactive{
    background-color: rgba(0, 0, 0, 0.45);
}

.principal{
    margin: auto auto;
    margin-top: 0.125rem;
    padding: 1rem 0;
    width: 60%;
    align-items: center;
    border-radius: 0.2rem;
    border-top: 0.25rem solid rgba(32, 32, 32, 0.3);
}

.principal h4{
    text-align: center;
    margin-bottom: 0.7rem;
    margin-top: 0.5rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1.7rem;
    color: rgb(32, 32, 32);
}

.principalwrapper{
    display: flex;
}

.principalimg{
    width: 40%;
    height: 3rem;
    margin-left: 1rem;
    border: 0.0625 solid black;
    border-radius: 0.5rem;
    background-color: blue;
}

.principaltext{
    width: 65%;
    margin-left: 1.5rem;
    text-align: center;
}

.principaltext p{
    text-decoration: wavy;
    font-weight: 600;
    font-size: 1.1rem;
}

.principaltext span{
    font-size: 3rem;
}

.connect{
    margin-bottom: 1.5rem;
    justify-content: center;
    align-content: center;
}

.connectwrapper{
    width: 90%;
    display: flex;
    justify-content: center;
    align-content: center;
    margin: 0 auto;
    margin-top: 1rem;
}

.sendus, .visitus{
    border-radius: 0.2rem;
    border-top: 0.25rem solid rgba(32, 32, 32, 0.5);
    margin: 0 auto;
    width: 45%;
}

h5{
    text-align: center;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1.7rem;
    color: rgb(32, 32, 32);
}

.visitusheading{
    text-align: left;
    font-size: 1.4rem;
    margin-top: 0rem;
}

.visitusparagraph{
    text-align: right;
    font-size: 1.25rem;
    font-family: Arial, Helvetica, sans-serif;
}

.visitusparagraph span{
    font-size: 1.2rem;
    font-weight: bolder;
}

.visitusparagraph a{
    color:rgb(29, 27, 27);
    font-style: italic;
}

.senduscontainer form{
    display: flex;
    flex-direction: column;
}

.sendusinput{
    height: 2.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
    border: none;
    outline: none;
    border-bottom: 0.125rem solid black;
    font-size: 1.1rem;
}

.senduscontainer .mssg{
    margin-top: 1rem;
    padding-left: 0.5rem;
    border: none;
    outline: none;
    border-bottom: 0.125rem solid black;
    font-size: 1.1rem;
    font-family: Arial, Helvetica, sans-serif;
    height: 5rem;
}

.subbutton{
    margin-top: 0.125rem;
    font-size: 1.3rem;
    height: 2.5rem;
    width: 5rem;
    border-radius: 0.5rem;
    border: none;
    color: white;
    background-color: rgb(0, 0, 104);
}

.subbutton:hover{
    background-color: rgb(0, 0, 196);
}

.calltoaction{
    width: 90%;
    margin: 0 auto;
}

.CTAwrapper{
    width: 60%;
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin: 0 auto;
    margin-top: 1rem;
}

.logIn, .apply{
    width: 45%;
    text-align: center;
    align-content: center;
    border-radius: 5px;
}

.logIn:hover , .apply:hover{
    scale: 1.1;
}

.logIn{
    background-color: rgb(0, 0, 104);
}

.apply{
    background-color: rgb(104, 0, 0);
}

h4{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    color: white;
    margin-top: 10px;
    margin-bottom: 15px;
}

.button{
    margin-top: 3px;
    margin-bottom: 15px;
}

.button a{
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.3rem;
    color: white;
    border: 2px solid white;
    border-radius: 3px;
    padding: 3px 5px;
}

.button a:hover{
    background-color: white;
    color: black;
}

.schoolImage{
    width: 99%;
    margin: 0 auto;
    margin-top: 20px;
    height: 10rem;
    border-radius: 3px;
    background-image: url(images/schoolImage.jpg);
    background-size: cover;
    background-position: center;
}

@media(max-width: 800px){

    .imgheader{
        background-position: right;
    }

    .imgheader p{
        font-size: 1.3rem;
    }

    .imgtext{
        margin-left: 3rem;
        padding-top: 2.5rem;
    }

    .imgtext p{
        font-weight: bold;
    }

    header a{
        margin-left: 2.3rem;
    }

    .facilitieswrapper, .whywrapper, .connectwrapper, .bookform{
        flex-direction: column;
    }

    .facilitieswrapper, .whywrapper{
        animation: none;
    }

    .facilitieswrapper h4, .whywrapper h4{
        margin-bottom: 1.7rem;
        font-size: 2.5rem;
    }
    
    .facilitieswrapper p, .whywrapper p{
        font-size: 1.5rem;
        font-weight: bold;
    }

    .academics{
        background-image: url(images/homefacilities/2.jpg);
        background-size: cover;
        background-position: center;
    }

    .sports{
        background-image: url(images/homefacilities/sports.jpg);
        background-size: cover;
        background-position: top;
    }

    .clubs{
        background-image: url(images/homefacilities/club.jpg);
        background-size: cover;
        background-position: center;
    }

    .quality{
        background-image: url(images/homefacilities/club.jpg);
        background-size: cover;
        background-position: center;
    }

    .affordability{
        background-image: url(images/homefacilities/club.jpg);
        background-size: cover;
        background-position: center;
    }

    .interactive{
        background-image: url(images/homefacilities/club.jpg);
        background-size: cover;
        background-position: center;
    }

    .academics{
        height: 35rem;
    }

    .sports{
        height: 33rem;
    }

    .clubs{
        height: 31rem;
    }

    .interactive{
        height: 23rem;
    }

    .quality, .affordability{
       margin-top: 1rem;
       height: 26rem;
       border: none;
    }

    .principal{
        width: 90%;
    }

    .principaltext{
        width: 85%;
        margin-top: 1.5rem;
        margin-left: 1.5rem;
    }
    
    .principaltext p{
        text-decoration: wavy;
        font-weight: 600;
        font-size: 1.2rem;
    }
    
    .principaltext span{
        font-size: 3rem;
    }

    .sendus, .visitus{
        width: 80%;
        margin: 0 auto;
    }

    .sendus{
        margin-top: 1rem;
    }

    .senduscontainer .mssg{
        padding-left: 0;
    }

    .visitus{
        margin-bottom: 1.5rem;
    }

    .CTAwrapper{
        width: 100%;
        flex-direction: column;
    }

    .logIn, .apply{
        margin: 0 auto;
        width: 90%;
    }

    .button{
        margin-bottom: 20px;
        scale: 1.2;
    }
}

@media(max-width: 760px){

    .imgheader p{
        font-size: 1.1rem;
    }

    .imgheader{
        background-position: right;
    }

    .imgheader h1{
        font-size: 2.5rem;
    }
}

@media(max-width: 720px){

    .imgheader{
        background-position: right;
    }

    .imgtext{
        padding-top: 3.5rem;
    }

    header a{
        margin-left: 2rem;
    }

    .wrapper{
        margin-top: 0.3rem;
    }

    .pgbdy h2{
        font-size: 2rem;;
    }
    
    .pgbdy p{
        font-size: 1.2rem;
    }

    .principalwrapper{
        display: flex;
        justify-content: center;
        align-content: center;
    }

    .principalimg{
        display: none;
    }

    .principaltext{
        background-color: rgba(0, 0, 0, 0.534);
        border-radius: 10px;
    }

    .principaltext p{
        color: white;
        padding: 0 0.5rem;
        padding-bottom: 0.5rem;
        font-size: 1.3rem;
    }
}

@media(max-width: 600px){

    .imgtext{
        margin-left: 2.5rem;
    }

    .imgheader h1{
        margin-bottom: 2.5rem;
        font-size: 2.5rem;
    }

    .imgheader p{
        font-size: 1rem;
    }

    header a{
        margin-left: 1.8rem;
        font-size: 1.1rem;
    }

    .pgbdy h2{
        font-size: 1.5rem;;
    }
    
    .pgbdy p{
        font-size: 1rem;
    }

    .wrapper{
        margin-top: 0.2rem;
    }

    h3{
        font-size: 2.1rem;
        padding-top: 1.5rem;
        margin-bottom: 0rem;
    }

    .principal{
        width: 90%;
    }

    .principaltext{
        width: 80%;
        margin-top: 1.5rem;
        margin-left: 1.5rem;
    }

}

@media(max-width: 500px){

    .imgtext{
        padding-top: 4.5rem;
    }

    .imgheader h1{
        margin-bottom: 1.3rem;
        font-size: 2rem;
    }

    .imgheader p{
        font-size: 1rem;
    }

    header a{
        margin-left: 1.3rem;
    }
}

@media(max-width: 450px){

    .imgheader{
        background-position: right;
    }

    .imgtext{
        padding-top: 3rem;
    }

    header a{
        font-size: 1rem;
        margin-left: 1.05rem;
    }
}

@media (max-width: 400px){
    .facilitieswrapper h4{
        margin-bottom: 0.8rem;
    }
}

@media (max-width: 350px) {
    .principal{
        width: 95%;
    }

    .principaltext{
        width: 90%;
    }
}