styles.css

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

.header {
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(Images/banner.png);
    background-position: center;
    background-size: cover;
    position: relative;
}

.header img {
    /* for the home logo */
    width: 50%;
    margin: 10px;
}

nav {
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
}

nav img {
    /* for the nav-links logo */
    width: 8rem;
    margin: 10px;
}

.nav-links {
    flex: 1;
    text-align: right;
}

.nav-links ul li {
    list-style-type: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}

.nav-links ul li a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
}

.nav-links ul li::after {
    content: '';
    width: 0%;
    /*made the red line underneath obvious*/
    height: 2px;
    background: #f44336;
    display: block;
    margin: auto;
    transition: 0.5s;
}

.nav-links ul li:hover::after {
    width: 100%;
}

.text-box {
    width: 90%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.text-box h1 {
    font-size: 62px;
    text-transform: capitalize;
}

.text-box p {
    margin: 10px 0 40px;
    /*top, left & right, bottom*/
    font-size: 14px;
    color: #fff;
}

.hero-btn {
    display: inline-block;
    text-decoration: none;
    text-transform: capitalize;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 34px;
    font-size: 13px;
    background: transparent;
    position: relative;
    cursor: pointer;
}

.hero-btn:hover {
    border: 1px solid #f44336;
    background-color: #f44336;
    transition: 1s;
}

nav .fa {
    display: none;
}

@media(max-width: 700px) {
    .text-box h1 {
        font-size: 34px;
        text-transform: capitalize;
        line-height: 2.5rem;
    }

    .text-box p {
        font-size: 14.7px;
        margin-top: 1rem;
        line-height: 1.5rem;
    }

    .nav-links ul li {
        display: block;
    }

    .nav-links {
        position: fixed;
        /* to avoid horizontal scrolling underneath in smaller screens, change position absolute to fixed */
        background-color: #f44336;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 2;
        transition: 1s;
        /*for the toggle menu*/
    }

    nav .fa {
        /* how it will look on smaller screen*/
        display: block;
        color: #fff;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }

    .nav-links ul {
        padding: 30px;
    }
}

/* search "font awesome 4 cdn" and click on the first link, copy the font awesome CSS and paste underneath font link under CSS link. copy 'close icon' link in font awesome icons and paste under div for nav-links. Remove the aria-hidden, search for 'menu icon' also before the closing nav tag after the closing div for the nav-links

The menu is opened in smaller screen, to hide it so we can open it willingly, change the value of nav-links under media query selector from 0 to -200px*/

/* -----Course----- */

.course {
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 60px;
}

h1 {
    font-size: 36px;
    font-weight: 600;
    text-transform: capitalize;
}

p {
    color: #777;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    padding: 10px;
}

.row {
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
}

.course-col {
    flex-basis: 31%;
    /* adjusted the content */
    background-color: #fff3f3;
    border-radius: 10px;
    margin-bottom: 5%;
    /* space between the box and outside it*/
    padding: 20px 12px;
    /* space between the borders and the content*/
    box-sizing: border-box;
    /* gave spaces between the boxes*/
    transition: 0.5s;
}

h3 {
    text-align: center;
    font-weight: 600;
    margin: 10px 0;
}

.course-col:hover {
    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2);
}

@media(max-width: 700px) {
    .row {
        flex-direction: column;
    }
}

/* ----- Campus ----- */

.campus {
    width: 80%;
    /* made the spaces between the h1/p at the left & right sides*/
    margin: auto;
    text-align: center;
    padding-top: 28px;
    /* % is > px */
}

.campus-col {
    flex-basis: 32%;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.campus-col img {
    width: 100%;
    display: block;
    /* to make the hover colour fit with the box*/
}

.layer {
    background-color: transparent;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}

.layer:hover {
    background-color: rgba(226, 0, 0, 0.7);
}

.layer h3 {
    width: 100%;
    font-weight: 500;
    color: #fff;
    font-size: 26px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    opacity: 0;
    transition: 0.5s;
}

.layer:hover h3 {
    bottom: 49%;
    opacity: 1;
}

/* ----- Facilities ----- */

.facilities {
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 40px;
}

.facilities-col {
    flex-basis: 31%;
    border-radius: 10px;
    margin-bottom: 5%;
    text-align: left;
}

.facilities-col img {
    width: 100%;
    border-radius: 10px;
}

.facilities-col p {
    padding: 0;
}

.facilities-col h3 {
    margin-top: 16px;
    margin-bottom: 15px;
    text-align: left;
}

/* ----- Testimonials ----- */

.testimonials {
    width: 80%;
    margin: auto;
    padding-top: 32px;
    text-align: center;
}

.testimonials-col {
    flex-basis: 44%;
    border-radius: 10px;
    margin-bottom: 5%;
    text-align: left;
    background-color: #fff3f3;
    padding: 25px;
    cursor: pointer;
    display: flex;
}

.testimonials-col img {
    height: 40px;
    /* made it small */
    margin-left: 5px;
    margin-right: 30px;
    border-radius: 50%;
    /*made the image circular */
}

.testimonials-col p {
    padding: 0;
}

.testimonials-col h3 {
    margin-top: 15px;
    text-align: left;
}

.testimonials-col span {
    color: #f44336;
}

@media(max-width: 700px) {

    /* to remove some spaces in smaller screen */
    .testimonials-col img {
        margin-left: 5px;
        margin-right: 30px;
    }
}

/* ----- Call To Action ----- */

.cta {
    margin: 100px auto;
    width: 80%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(images/banner2.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    text-align: center;
    padding: 100px 0;
}

.cta h1 {
    color: #fff;
    margin-bottom: 40px;
    padding: 0;
}

@media(max-width: 700px) {
    .cta h1 {
        font-size: 22px;
        line-height: 30px;
    }
}

/* ----- Footer ----- */

.footer {
    width: 100%;
    /* made it adequately centralized as compared to 80% */
    text-align: center;
    padding: 18px 0;
}

.footer h4 {
    text-transform: capitalize;
    margin-bottom: 25px;
    margin-top: 20px;
    font-weight: 600;
}

.icons span {
    color: #f44336;
    margin: 0 8px;
    cursor: pointer;
    padding: 18px 0;
}

.icons p {
    text-transform: capitalize;
}

.icons .links a {
    color: #f44336;
    margin: 0 8px;
    cursor: pointer;
    padding: 18px 0;
}

@media(max-width: 700px) {
    .footer p {
        font-size: 0.8rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .icons span {
        color: #f44336;
        margin: 0 13px;
        cursor: pointer;
        padding: 18px 0;
        width: 30px;
    }
}

/* ---------- About Us Page ----------- */

.sub-header {
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(images/background2.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}

.sub-header h1 {
    margin-top: 100px;
}

.about-us {
    width: 80%;
    margin: auto;
    padding-top: 80px;
    padding-bottom: 50px;
}

.about-col {
    flex-basis: 48%;
    /* because just 2 columns are needed*/
    padding: 30px 2px;
}

.about-col img {
    width: 100%;
}

.about-col h1 {
    padding-top: 0;
}

.about-col p {
    padding: 15px 0 25px;
}

.btn {
    border: 1px solid #f44336;
    background-color: transparent;
    color: #f44336;
}

.btn:hover {
    color: #fff;
}

/* ------- Blog Page Content ------- */

.blog-content {
    width: 80%;
    margin: auto;
    padding: 60px 0;
}

.blog-left {
    flex-basis: 65%;
}

.blog-left img {
    width: 100%;
}

.blog-left h2 {
    color: #222;
    font-weight: 600;
    margin: 30px 0;
}

.blog-left p {
    color: #999;
    padding: 0;
}

.blog-right {
    flex-basis: 32%;
}

.blog-right h3 {
    background-color: #f44336;
    color: #fff;
    padding: 7px 0;
    font-size: 16px;
    margin-bottom: 20px;
}

.blog-right div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #555;
    padding: 8px;
    /* space between each subject */
    box-sizing: border-box;
}

.comment-box {
    border: 1px solid #ccc;
    margin: 50px 0;
    padding: 10px 20px;
}

.comment-box h3 {
    text-align: left;
}

.comment-form input,
.comment-form textarea {
    width: 100%;
    padding: 10px;
    margin: 15px 0;
    box-sizing: border-box;
    border: none;
    outline: none;
    background-color: #f0f0f0;
    resize: none;
}

.comment-form button {
    margin: 10px 0;
}

@media(max-width: 700px) {
    .sub-header h1 {
        font-size: 24px;
    }
}

/* ------- Contact Us Page ------- */

.location {
    width: 80%;
    margin: auto;
    padding: 80px 0;
}

.location iframe {
    width: 100%;
    /* to make it responsive*/
}

.contact-us {
    width: 80%;
    margin: auto;
}

.contact-col {
    flex-basis: 48%;
    margin-bottom: 30px;
}

.contact-col div {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.contact-col div .fa-solid {
    font-size: 28px;
    color: #f44336;
    margin: 10px;
    margin-right: 30px;
}

.contact-col div p {
    padding: 0;
}

.contact-col div h5 {
    font-size: 20px;
    margin-bottom: 5px;
    color: #555;
    font-weight: 400;
}

.contact-col input,
.contact-col textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 17px;
    outline: none;
    border: 1px solid #ccc;
    box-sizing: border-box;
    /* to avoid horizontal scrolling underneath in smaller screens or shorten the email */
    resize: none;
}