* {
    margin: 0; padding: 0; border: 0;
    box-sizing: border-box;
    font-size: 62.5%;
} /* Reset Rule */

html {
    scroll-behavior: smooth;
}

body {
    background-color: #FFF;
    color: #FFF;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/*

=====================================

        Coach Info Cards

=====================================

*/

.divider {
    width: 100%; height: 50px;
    background-color: #60aef8;
}

.returnHomeButton {
    display: none;
}

.coachMeetContainer {
    width: 80%; height: 100px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    margin: 20px auto 0 auto;
}

.coachMeetBackground {
    width: 100%; height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.coachMeetBackground p {
    font-size: 32px;
    color: black;
}

.coachInfoContainer {
    width: 80%; height: auto;
    margin: 20px auto 20px auto;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(8, 1fr);
    column-gap: 40px;
    row-gap: 40px;
}

.coachIMG > p {
    font-size: 24px;
}

.coachDesc > p {
    font-size: 18px;
    text-align: center;
    padding: 8px;
}

.coachDesc > p:first-child {
    font-size: 22px;
    padding: 12px 8px 4px 8px;
}

.coachExperience > p {
    font-size: 20px;
}   

@media(min-width: 481px) AND (max-width: 767px) {
    .coachMeetContainer {
        margin: 120px auto 0 auto;
    }

    .coachMeetBackground p {
        font-size: 40px;
    }
}

@media(min-width: 768px) AND (max-width: 1024px) {
    .coachMeetContainer {
        margin: 120px auto 0 auto;
    }

    .coachMeetBackground p {
        font-size: 40px;
    }
    
    .coachInfoContainer {
        margin: 20px auto;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }

    .coachDesc > p:first-child {
        font-size: 22px;
    }

    .coachDesc > p {
        font-size: 18px;
    }
}

@media (min-width: 1025px) AND (max-width: 1440px) {
    .returnHomeButton {
        display: block;
    }

    .headerContainer {
        display: block;
    }
    
    .coachMeetContainer {
        margin: 120px auto 0 auto;
    }
      
    .coachMeetBackground p {
        font-size: 44px;
    }

    .coachInfoContainer {
        margin: 20px auto ;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }

    .coachDesc > p:first-child {
        font-size: 24px;
    }
    
    .coachDesc > p {
        font-size: 20px;
    }
    
    .coachExperience > p {
        font-size: 24px;
    }
}

@media(min-width: 1441px) {
    .returnHomeButton {
        display: block;
    }
    
    .coachMeetContainer {
        box-shadow: 0 0 10px rgba(0, 0, 0, .5);
        margin: 120px auto 0 auto;
    }
    
    .coachMeetBackground {
        width: 100%; height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .coachMeetBackground p {
        font-size: 48px;
        color: black;
    }

    .coachInfoContainer {
        margin: 20px auto 20px auto;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }

    .coachIMG > p {
        font-size: 28px;
    }

    .coachDesc > p:first-child {
        font-size: 28px;
    }
}

.cImg1, .cImg2, .cImg3, .cImg4, .cImg5, .cImg6, .cImg7, .cImg8 {
    background-size: cover;
    background-position: center;
}

.cImg1 {
    background-image: url(../images/cImg1.jpg);
}

.cImg2 {
    background-image: url(../images/cImg2.jpg);
}

.cImg3 {
    background-image: url(../images/cImg3.jpg);
}

.cImg4 {
    background-image: url(../images/cImg4.jpg);
}

.cImg5 {
    background-image: url(../images/cImg5.jpg);
}

.cImg6 {
    background-image: url(../images/cImg6.jpg);
}

.cImg7 {
    background-image: url(../images/cImg7.jpg);
}

.cImg8 {
    background-image: url(../images/cImg8.jpg);
}