@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&display=swap');

/* ------------------------------------------------------------ HTML */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.row {
    margin-right: 0;
    margin-left: 0;
}

.container-fluid {
    padding-right: 0;
    padding-left: 0;
}

/* -------------------------------------------------------------------------------- General CSS */

.uppercase {
    text-transform: uppercase;
}

/* -------------------------------------------------------------------------------- Header */

header {
    background-color: #333;  
    font-family: "Lato", sans-serif;  
}

/* ------------------------------------------------------------ Header Logo */

/* ------------------------------------------------------------ Header Background */

.bg-dark {
    background-color: #333!important;
}

/* ------------------------------------------------------------ Header BP Fitness Logo Text  */

.navbar-dark .navbar-brand {
    font-family: "Lato", sans-serif;
    color: #fafafa;
    font-size: 140%;
    padding: 20px;
}

.navbar-dark .navbar-text:hover {
    color: #42e3f5;
    text-decoration: none;
}

/* ------------------------------------------------------------ Header Nav Links  */

.navbar-dark .navbar-nav .nav-link {
    font-family: "Lato", sans-serif;
    color: #fafafa;
    padding: 20px;
    font-size: 90%;
}

.navbar-dark .navbar-nav .nav-link:hover {
    font-family: "Lato", sans-serif;
    color: #42e3f5;
}

/* ------------------------------------------------------------ Header Burger Menu Icon  */

.navbar-dark .navbar-toggler-icon {
    color: #fafafa;
}

.navbar-dark .navbar-toggler {
    border: none;
}

.navbar-collapse {
    flex-grow: 0;
    margin-right: 20px;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------ index.html CSS */

/* -------------------------------------------------------------------------------- Hero Image Section */

.hero-section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0 ,0, 0, 0.5)), url("../images/hero.jpg");
    height: 900px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-text { 
  font-family: "Lato", sans-serif;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fafafa;
  padding: 0 50px 0 50px;
}

.hero-text h2 {
    font-size: 25px;
    padding: 0 0 10px 0;
}

.hero-text h5 {
    font-size: 20px;
    padding: 0 0 20px 0;
}

.hero-text a {
    color: #fafafa;
}

.hero-text button {
    background-color: #0c1f34;
    border: none;
    color: #fafafa;
    height: 65px;
    width: 200px;
    padding: 20px;
}

.hero-text button a:hover {
    color: #42e3f5;
    text-decoration: none;
}

/* -------------------------------------------------------------------------------- Membership Fees Section */

/* -------------------- Student Membership Offer Image */

.member-fees {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fafafa;
}

.membership-fees-header {
    font-family: "Lato", sans-serif;
    font-size: 250%;
    text-align: center;
    text-transform: uppercase;
    color: #fafafa;
    background-color: #0c1f34;
    padding: 40px 40px 40px 40px;
    margin: 0;
}

.student-membership {
    background: url("../images/student-options.jpg");
    height: 350px;
    width: 400px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: auto;
    margin-top: 30px;
    margin-bottom: 30px;
}

.student-membership h2 {
    text-align: center;
    color: #fafafa;
    font-size: 150%;
    padding: 80px 0 20px 0;
}    

.student-membership h4 {
    text-align: center;
    color: #fafafa;
    font-size: 100%;
    padding: 0 10px 20px 10px;
}

.student-membership h5 {
    text-align: center;
    color: #fafafa;
    font-size: 100%;
    background-color: #0c1f34;
    padding: 5px;
    width: 275px;
    height: 30px;
    margin: auto;
}

.student-membership h5 a {
    color: #fafafa;
}

.student-membership h5 a:hover {
    color: #42e3f5;
    text-decoration: none;
}

/* -------------------- Membership Fees Image */

.membership-prices {
    background: url("../images/membership-options.jpg");
    height: 350px;
    width: 400px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 30px;
}

.membership-prices h2 {
    text-align: center;
    color: #fafafa;
    font-size: 150%;
    padding: 70px 0 20px 0;
}

.membership-prices h4 {
    text-align: center;
    color: #fafafa;
    font-size: 100%;
    padding: 0 10px 20px 10px;
}

.membership-prices h5 a {
    color: #fafafa;
}

.membership-prices h5 {
    text-align: center;
    color: #fafafa;
    font-size: 100%;
    background-color: #0c1f34;
    padding: 5px;
    width: 200px;
    height: 30px;
    margin: auto;
}

.membership-prices h5 a:hover {
    color: #42e3f5;
    text-decoration: none;
}

/* -------------------------------------------------------------------------------- Member Section */

.member-section {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fafafa;
}

.member-section-header {
    font-family: "Lato", sans-serif;
    font-size: 250%;
    text-align: center;
    background-color: #0c1f34;
    color: #fafafa;
    padding: 40px 40px 40px 40px;
}

/* -------------------- Personal Training Image */

.img-box1 {
    text-align: center;
    color: #fafafa;
    font-size: 100%;
    background-image: url("../images/personal-training.jpg");
    background-position: center;
    background-repeat: no-repeat;
    height: 250px;
    width: 300px;
    margin-left: auto;
    margin-top: 40px;
    margin-bottom: 100px;
}

.img-pt-text {
    font-family: "Lato", sans-serif;
    color: #fafafa;
    font-size: 120%;
    padding-top: 100px;
}

.img-button-pt button {
    border: none;
    color: #fafafa;
    font-size: 90%;
    background-color: #0c1f34;
    margin-top: 130px;
    height: 50px;
    width: 300px;
}

.img-button-pt button a {
    font-family: "Lato", sans-serif;
    text-decoration: none;
    color: #fafafa;
    font-size: 100%;
}

.img-button-pt button a:hover {
    color: #42e3f5;
}

/* -------------------- Gym Classes Image */

.img-box2 {
    text-align: center;
    color: #fafafa;
    font-size: 100%;
    background-image: url("../images/gym-class.jpg");
    background-position: center;
    background-repeat: no-repeat;
    height: 250px;
    width: 300px;
    margin: auto;
    margin-top: 40px;
    margin-bottom: 100px;
}

.img-gc-text {
    font-family: "Lato", sans-serif;
    color: #fafafa;
    font-size: 120%;
    padding-top: 100px;
}

.img-button-gc button {
    border: none;
    color: #fafafa;
    font-size: 90%;
    background-color: #0c1f34;
    margin-top: 130px;
    height: 50px;
    width: 300px;
}

.img-button-gc button a {
    font-family: "Lato", sans-serif;
    text-decoration: none;
    color: #fafafa;
    font-size: 100%;
}

.img-button-gc button a:hover {
    color: #42e3f5;
}

/* -------------------- Workout & Dietary Plans */

.img-box3 {
    text-align: center;
    color: #fafafa;
    font-size: 100%;
    background-image: url("../images/workout-diet.jpg");
    background-position: center;
    background-repeat: no-repeat;
    height: 250px;
    width: 300px;
    margin-right: auto;
    margin-top: 40px;
    margin-bottom: 100px;
}

.img-wd-text {
    font-family: "Lato", sans-serif;
    color: #fafafa;
    font-size: 120%;
    padding-top: 100px;
}

.img-button-wd button {
    border: none;
    color: #fafafa;
    font-size: 90%;
    background-color: #0c1f34;
    margin-top: 130px;
    height: 50px;
    width: 300px;
}

.img-button-wd button a {
    font-family: "Lato", sans-serif;
    text-decoration: none;
    color: #fafafa;
    font-size: 100%;
}

.img-button-wd button a:hover {
    color: #42e3f5;
}

/* -------------------------------------------------------------------------------- Icon Section */

.icon-section {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    background-color: #0c1f34;
    height: 175px;
}

.icon-section span i {
    color: #fafafa;
    font-size: 60px;
    text-align: center;
    padding: 10px 5px 10px 5px;
    margin-right: auto;
    margin-left: auto;
}

.icon-section h5 {
    font-family: "Lato", sans-serif;
    color: #fafafa;
    padding: 10px;
    font-size: 16px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}

/* -------------------------------------------------------------------------------- Testimonial Section */

.testimonial-header {
    font-family: "Lato", sans-serif;
    font-size: 250%;
    text-align: center;
    color: #333;
    background-color: #fafafa;
    padding: 40px;
    margin: 0;
}

.testimonial-section {
    height: 300px;
    text-align: center;
    background-color: #fafafa;
}

.testimonial-section img {
    margin: 10px 0 5px 0;
}

.testimonial-section h5 {
    margin: 10px 0 5px 0;
}

.testimonial-section h6 {
    margin: 10px 0 25px 0;
}

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

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

footer {
    padding: 0px;
    background-color: #333;
    min-height: 150px;
    margin: 0;
    text-align: center;
}

footer div {
    padding: 20px 5%;
}

.footer-style {
    font-family: "Lato", sans-serif;
    color: #fafafa;
}

/* -------------------- Company Details Hover */

.phone a {
    color: #fafafa;
}

.phone a:hover {
    text-decoration: none;
    color: #42e3f5
}

.email a {
    color: #fafafa;
}

.email a:hover {
    text-decoration: none;
    color: #42e3f5;
}

/* -------------------- Social Media Links */

.social-links {
    list-style-type: none;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}

.social-links i:hover {
    color: #42e3f5;
}

.social-links li a i {
    margin: 4px;
    padding: 0;
    font-size: 30px;
    text-align: center;
    color: #fafafa;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------ about bp fitness.html CSS */

/* -------------------- Why Choose BP Fitness Section */

.about-us {
    height: 700px;
    width: 100%;
    background-color: #0c1f34;
}

.about-us h2 {
    font-family: "Lato", sans-serif;
    font-size: 250%;
    color: #fafafa;
    text-align: center;
    padding: 40px 40px 20px 40px;
}

.content {
    height: 500px;
    width: 800px;
    background-color: #fafafa;
    margin: 30px auto;
}

.content h4 {
    color: #333;
    text-align: center;
    margin: 0;
    padding-top: 18px;
}

/* -------------------------------------------------------------------------------- Membership Options Section */

.member-options-header {
    font-family: "Lato", sans-serif;
    font-size: 250%;
    text-align: center;
    text-transform: uppercase;
    color: #333;
    background-color: #fafafa;
    padding: 40px 40px 0 40px;
    margin: 0;
}

.member-options {
    background-color: #fafafa;
    height: 400px;
}

.member-options-flex {
    width: 100%;
    justify-content: space-between;
    display: flex;
    align-items: center;  
    background-color: #fafafa;
    margin: auto;
    margin: 0;
}

/* -------------------- Student Offer Section */

.student-offer {
    font-family: "Lato", sans-serif;
    background-color: #333;
    margin-top: 10px;
    height: 300px;
    width: 450px;
    margin-left: auto;
}

.student-offer h3 {
    color: #fafafa;
    text-align: center;
    padding: 20px;
    text-decoration-line: underline;
}

.student-offer h5 {
    color: #fafafa;
    text-align: center;
    padding: 10px 30px 10px 30px;
    text-transform: uppercase;
}

.student-offer h6 {
    color: #fafafa;
    background-color: #0c1f34;
    text-align: center;
    width: 100%;
    height: 60px;
    margin-top: 15px;
    padding: 20px;
}

.student-offer h6 a {
    color: #fafafa;
}

.student-offer h6 a:hover {
    color: #42e3f5;
    text-decoration: none;
}

/* -------------------- Student Fees Section */

.student-prices {
    font-family: "Lato", sans-serif;
    background-color: #333;
    margin-top: 10px;
    height: 300px;
    width: 450px;
    margin-right: auto;
}

.student-prices h3 {
    color: #fafafa;
    text-align: center;
    text-decoration-line: underline;
    padding: 20px;
    margin-top: 10px;
}

.student-prices h5 {
    color: #fafafa;
    text-align: center;
    padding: 1px 30px 14px 30px;
    text-transform: uppercase;
}

.student-prices h6 {
    color: #fafafa;
    background-color: #0c1f34;
    text-align: center;
    width: 100%;
    height: 60px;
    margin-top: 15px;
    padding: 20px 55px 20px 55px;
}

.student-prices h6 a {
    color: #fafafa;
}

.student-prices h6 a:hover {
    color: #42e3f5;
    text-decoration: none;
}

/* -------------------- Membership Offer Section */

.membership-offer {
    font-family: "Lato", sans-serif;
    background-color: #333;
    height: 300px;
    width: 450px;
    margin-bottom: 20px;
    margin-left: auto;
}

.membership-offer h3 {
    color: #fafafa;
    text-align: center;
    text-decoration-line: underline;
    padding: 20px;
}

.membership-offer h5 {
    color: #fafafa;
    text-align: center;
    padding: 10px 30px 22px 30px;
    text-transform: uppercase;
}

.membership-offer h6 {
    color: #fafafa;
    background-color: #0c1f34;
    text-align: center;
    width: 100%;
    height: 60px;
    margin-top: 15px;
    padding: 20px;
}

.membership-offer h6 a {
    color: #fafafa;
}

.membership-offer h6 a:hover {
    color: #42e3f5;
    text-decoration: none;
}

/* -------------------- Membership Fees Section */

.membership-fees {
    font-family: "Lato", sans-serif;
    background-color: #333;
    height: 300px;
    width: 450px;
    margin-bottom: 20px;
    margin-right: auto;
}

.membership-fees h3 {
    color: #fafafa;
    text-align: center;
    text-decoration-line: underline;
    padding: 20px 20px 10px 20px; 
}

.membership-fees h5 {
    color: #fafafa;
    text-align: center;
    padding: 20px 20px 17px 20px;
    text-transform: uppercase;
}

.membership-fees h6 {
    color: #fafafa;
    background-color: #0c1f34;
    text-align: center;
    width: 100%;
    height: 60px;
    margin-top: 15px;
    padding: 20px;
}

.membership-fees h6 a {
    color: #fafafa;
}

.membership-monthly-prices h6 a:hover {
    color: #42e3f5;
    text-decoration: none;
}

/* -------------------------------------------------------------------------------- Why BP Fitness Has To Offer Section */

/* -------------------- Why BP Fitness Has To Offer Title/ Heading */

.we-offer-header {
    font-family: "Lato", sans-serif;
    font-size: 200%;
    text-align: center;
    text-transform: uppercase;
    color: #fafafa;
    background-color: #333;
    padding: 40px;
    margin-top: 30px;
}

.we-offer {
    background-color: #fafafa;
    height: 275px;
}

.offer-flex {
    width: 100%;
    justify-content: space-around;
    display: flex;
    align-items: center;  
    background-color: #fafafa;
}

/* -------------------- Why BP Fitness Has To Offer Strength Machines Section */

.strength-machines {
    font-family: "Lato", sans-serif;
    height: 375px;
    width: 100%;
    padding: 20px;
    background-color: #0c1f34;
    text-align: center;
    margin: 50px auto;
}

.strength-heading {
    color: #fafafa;
    text-decoration-line: underline;
}

.strength-text {
    color: #fafafa;
    margin-top: 30px;
}

.strength-text ul {
    list-style-type: none;
}

.strength-text li {
    font-size: 15px;
}

/* -------------------- Why BP Fitness Has To Offer Weights Section */

.weights {
    font-family: "Lato", sans-serif;
    height: 375px;
    width: 100%;
    padding: 20px;
    background-color: #0c1f34;
    text-align: center;
}

.weights-heading {
    color: #fafafa;
    text-decoration-line: underline;
}

.weights-text {
    color: #fafafa;
    margin-top: 30px;
}

.weights-text ul {
    list-style-type: none;
}

.weights-text li {
    font-size: 17px;
}

/* -------------------- Why BP Fitness Has To Offer Cardio Machines Section */

.cardio-machines {
    font-family: "Lato", sans-serif;
    height: 375px;
    width: 100%;
    padding: 20px;
    background-color: #0c1f34;
    text-align: center;
}

.cardio-heading {
    color: #fafafa;
    text-decoration-line: underline;
}

.cardio-text {
    color: #fafafa;
    margin-top: 30px;
}

.cardio-text ul {
    list-style-type: none;
}

.cardio-text li {
    font-size: 15px;
}

/* -------------------- Why BP Fitness Has To Offer Gym Facilities Section */

.gym-facilities {
    font-family: "Lato", sans-serif;
    height: 375px;
    width: 100%;
    padding: 20px;
    background-color: #0c1f34;
    text-align: center;
}

.gym-heading {
    color: #fafafa;
    text-decoration-line: underline;
}

.gym-text {
    color: #fafafa;
    margin-top: 30px;
}

.gym-text ul {
    list-style-type: none;
}

.gym-text li {
    font-size: 15px;
}

/* -------------------- Inside BP Fitness Section */

.bp-header {
    font-family: "Lato", sans-serif;
    font-size: 250%;
    text-align: center;
    background-color: #333;
    color: #fafafa;
    padding: 40px;
    margin: 0;  
}

.image-section {
    display: flex;
    align-items: center;
}

.image-section img {
    width: 10%;
    padding: 0;
    border: 0.5px solid #000;
}

/* -------------------------------------------------------------------------------- Where You Can Find Us */

.find-us {
    display: flex;
    justify-content: space-around;
    font-family: "Lato", sans-serif;
    margin-bottom: 30px;
}

/* -------------------- Where You Can Find Us/ Memeber Benefit Section */

.benefits {
    height: 600px;
    width: 100%;
    background-color: #0c1f34;
}

.benefits-header {
    color: #fafafa;
    text-align: center;
    padding: 40px 20px 22.5px 20px;
}

.benefits-flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #0c1f34;
}

/* -------------------- Member Benefits/ Personal Training Sessions Section */

.benefits-flex .pt {
    height: 425px;
    width: 30%;
    background: url("../images/personal-training-about.jpg") no-repeat center center ; 
    margin: 5px;
}

.benefits-flex .pt h3 {
    color: #fafafa;
    font-size: 20px;
    text-align: center;
    margin-top: 200px;
}

.benefits-flex .pt h3 a {
    color: #fafafa;
}

.benefits-flex .pt h3 a:hover {
    color: #42e3f5;
    text-decoration: none;
}

/* -------------------- Member Benefits/ Gym Classes Section */

.benefits-flex .gc {
    height: 425px;
    width: 30%;
    background: url("../images/gym-class-about.jpg") no-repeat center center ;
    margin: 5px;
}

.benefits-flex .gc h3 {
    color: #fafafa;
    font-size: 20px;
    text-align: center;
    margin-top: 200px;
}

.benefits-flex .gc h3 a {
    color: #fafafa;
}

.benefits-flex .gc h3 a:hover {
    color: #42e3f5;
    text-decoration: none;
}

/* -------------------- Member Benefits/ Workout & Dietary Plans Section */

.benefits-flex .wd {
    height: 425px;
    width: 30%;
    background: url("../images/workout-diet-about.jpg") no-repeat center center ;
    margin: 5px;
}

.benefits-flex .wd h3 {
    color: #fafafa;
    font-size: 20px;
    text-align: center;
    margin-top: 200px;
}

.benefits-flex .wd h3 a {
    color: #fafafa;
}

.benefits-flex .wd h3 a:hover {
    color: #42e3f5;
    text-decoration: none;
}

/* -------------------- Where You Can Find Us/ Map Section */

.map {
    height: 600px;
    width: 100%;
    background-color: #0c1f34;
}

.map-header {
    color: #fafafa;
    text-align: center;
    padding: 40px;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------ Member Benefits.html CSS */

/* -------------------------------------------------------------------------------- Hero Image Section */

.hero-section-member {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0 ,0, 0, 0.5)), url("../images/about-hero-image.jpg");
    height: 50vh;
    width: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    align-items: center;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 40px;
    position: relative;
}

.member-text {
    width: 816px;
    font-family: "Lato", sans-serif;
    text-align: center;
    position: absolute;
    color: #fafafa;
    margin-top: 90px;
    margin-left: -15px;
    width: 100%;
}

.member-text h2 {
    font-family: "Lato", sans-serif;
    font-size: 37px;
    color: #fafafa;
    background-color: #0c1f34;
    text-align: center;
    padding: 40px;
    margin: 0;
}

/* -------------------------------------------------------------------------------- Personal Trainers at BP Fitness Section */

.personal-trainer-header {
    font-family: "Lato", sans-serif;
    font-size: 250%;
    text-align: center;
    text-transform: uppercase;
    color: #fafafa;
    background-color: #0c1f34;
    padding: 40px 40px 40px 40px;
}

.personal-flex {
    height: 350px;
    width: 100%;
    justify-content: space-between;
    display: flex;
    align-items: center;  
    background-color: #fafafa;
    margin: auto;
}

/* -------------------- Personal Trainer 1 */

.pt-1 {
    height: 300px;
    width: 400px;
    background: url("../images/pt1.jpg") no-repeat center center;
    margin-left: auto;
    margin-top: 5px;
    margin-bottom: 5px; 
}

.pt-1 h3 {
    color: #fafafa;
    font-size: 20px;
    text-align: center;
    background-color: #0c1f34;
    height: 50px;
    width: 400px;
    padding-top: 10px;
    margin-top: 246px;
}

.pt-1 h3 a {
    color: #fafafa;
}

.pt-1 h3 a:hover {
    color: #42e3f5;
    text-decoration: none;
}

/* -------------------- Personal Trainer 2 */

.pt-2 {
    height: 300px;
    width: 400px;
    background: url("../images/pt2.jpg") no-repeat center center;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 5px;
}

.pt-2 h3 {
    color: #fafafa;
    font-size: 20px;
    text-align: center;
    background-color: #0c1f34;
    height: 50px;
    width: 400px;
    padding-top: 10px;
    margin-top: 242px;
}

.pt-2 h3 a {
    color: #fafafa;
}

.pt-2 h3 a:hover {
    color: #42e3f5;
    text-decoration: none;
}

/* -------------------- Personal Trainer 3 */

.pt-3 {
    height: 300px;
    width: 400px;
    background: url("../images/pt3.jpg") no-repeat center left;
    margin-left: auto;
    margin-top: 5px;
    margin-bottom: 5px; 
}

.pt-3 h3 {
    color: #fafafa;
    font-size: 20px;
    text-align: center;
    background-color: #0c1f34;
    height: 50px;
    width: 400px;
    padding-top: 10px;
    margin-top: 234px;
}

.pt-3 h3 a {
    color: #fafafa;
}

.pt-3 h3 a:hover {
    color: #42e3f5;
    text-decoration: none;
}

/* -------------------- Personal Trainer 4 */

.pt-4 {
    height: 300px;
    width: 400px;
    background: url("../images/pt4.jpg") no-repeat center center;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 5px;
}

.pt-4 h3 {
    color: #fafafa;
    font-size: 20px;
    text-align: center;
    background-color: #0c1f34;
    height: 50px;
    width: 400px;
    padding-top: 10px;
    margin-top: 226px;
}

.pt-4 h3 a {
    color: #fafafa;
}

.pt-4 h3 a:hover {
    color: #42e3f5;
    text-decoration: none;
}

/* -------------------- Personal Trainer 5 */

.pt-5 {
    height: 300px;
    width: 400px;
    background: url("../images/pt5.jpg") no-repeat center center;
    margin-left: auto;
    margin-top: 5px;
    margin-bottom: 5px; 
}

.pt-5 h3 {
    color: #fafafa;
    font-size: 20px;
    text-align: center;
    background-color: #0c1f34;
    height: 50px;
    width: 400px;
    padding-top: 10px;
    margin-top: 202px;
}

.pt-5 h3 a {
    color: #fafafa;
}

.pt-5 h3 a:hover {
    color: #42e3f5;
    text-decoration: none;
}

/* -------------------- Personal Trainer 6 */

.pt-6 {
    height: 300px;
    width: 400px;
    background: url("../images/pt6.jpg") no-repeat center center;
    position: relative;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 5px;
}

.pt-6 h3 {
    color: #fafafa;
    font-size: 20px;
    text-align: center;
    background-color: #0c1f34;
    height: 50px;
    width: 400px;
    padding-top: 10px;
    margin-top: 250px;
    position: absolute;
}

.pt-6 h3 a {
    color: #fafafa;
}

.pt-6 h3 a:hover {
    color: #42e3f5;
    text-decoration: none;
}

/* -------------------------------------------------------------------------------- Gym Sessions Table Section */

.gym-class-header {
    font-family: "Lato", sans-serif;
    font-size: 250%;
    text-align: center;
    color: #fafafa;
    background-color: #0c1f34;
    padding: 40px 40px 40px 40px;
    margin-top: 10px;
}

.gym-class table, th, td {
    font-family: "Lato", sans-serif;
    text-align: center;
    font-size: 95%;
    color: #333;
    border: 2px solid  #333;
    border-collapse: collapse;
    padding: 10px;
    margin: 20px auto;
  }

/* -------------------------------------------------------------------------------- Workout & Dietary Plans Section */

.workout-dietary-header {
    font-family: "Lato", sans-serif;
    width: 100%;
    font-size: 250%;
    text-align: center;
    text-transform: uppercase;
    color: #fafafa;
    background-color: #0c1f34;
    padding: 40px;
}

.workout-dietary-flex {
    display: flex;
    align-items: center;
    margin: 20px auto;
}

/* -------------------- Workout Plans */

.workout-plans {
    height: 400px;
    width: 400px;
    background: url("../images/workout-plans.jpg") no-repeat center center;
    margin-left: auto;
    margin-bottom: 10px;
}

.workout-plans h3 {
    font-family: "Lato", sans-serif;
    color: #fafafa;
    font-size: 25px;
    background: none;
    text-align: center;
    padding: 104px 20px;
}

.workout-plans h5 {
    font-family: "Lato", sans-serif;
    color: #fafafa;
    font-size: 20px;
    background: #0c1f34;
    text-align: center;
    padding: 20px;
}

.workout-plans h5 a {
    color: #fafafa;
}

.workout-plans h5 a:hover {
    font-family: "Lato", sans-serif;
    color: #42e3f5;
    text-decoration: none;
    text-align: center;
    padding: 20px;
}

/* -------------------- Dietary Plans */

.dietary-plans {
    height: 400px;
    width: 400px;
    background: url("../images/dietary-plans.jpg") no-repeat center center;
    margin-right: auto;
    margin-bottom: 10px;
}

.dietary-plans h3 {
    font-family: "Lato", sans-serif;
    color: #fafafa;
    font-size: 25px;
    background: none;
    text-align: center;
    padding: 104px 20px;
}

.dietary-plans h5 {
    font-family: "Lato", sans-serif;
    color: #fafafa;
    font-size: 20px;
    background: #0c1f34;
    text-align: center;
    padding: 20px;
}

.dietary-plans h5 a {
    color: #fafafa;
}

.dietary-plans h5 a:hover {
    font-family: "Lato", sans-serif;
    color: #42e3f5;
    text-decoration: none;
    text-align: center;
    padding: 20px;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------ contact us.html CSS */

.form-section {
    background: url("../images/contact-hero-image.jpg");
    height: 90vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

/* -------------------- Contact Form */

.contact-form {
    font-family: "Lato", sans-serif;
    background-color: rgba(60, 60, 60, 0.6);
    color: #fafafa;
    max-width: 700px;
    position: absolute;
    margin-top: 80px;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 40px 20px 40px;
}

.contact-form h2{
    color: #fafafa;
    text-align: center;
    margin-bottom: 25px;
}

/* -------------------- First Name Field */

.first-text{
    background: transparent;
    color: #fafafa;
    width: 100%;
    height: 25px;
    margin: 5px 0 20px 0;
    border: 1px solid #fafafa;
    border-radius: 8px;
    padding-left: 5px;
}

.first-text:hover {
    color: #333;
    background-color: #fafafa;
}

/* -------------------- Last Name Field */

.last-text{
    background: transparent;
    color: #fafafa;
    width: 100%;
    height: 25px;
    margin: 5px 0 20px 0;
    border: 1px solid #fafafa;
    border-radius: 8px;
    padding-left: 5px;
}

.last-text:hover {
    color: #333;
    background-color: #fafafa;
}

/* -------------------- Email Address Field */

.email-text {
    background: transparent;
    color: #fafafa;
    width: 100%;
    height: 25px;
    margin: 5px 0 10px 0;
    border: 1px solid #fafafa;
    border-radius: 8px;
    padding-left: 5px;
}

.email-text:hover {
    color: #333;
    background-color: #fafafa;
}

/* -------------------- Type Your Message Here Field */

.message-text {
    background: transparent;
    color: #fafafa;
    width: 100%;
    height: 150px;
    margin: 5px 0 5px 0;
    border: 1px solid #fafafa;
    border-radius: 8px;
    padding-left: 5px;
}

.message-text:hover {
    color: #333;
    background-color: #fafafa;
    vertical-align: top;
}

/* -------------------- Drop Down Options */

.select-text {
    margin-top: 20px;
}

#reason-for-contacting-us {
    margin-left: 0;
    width: 225px;
}

select {
    background-color: #fafafa;
    color: #333;
    margin: 10px 20px 20px 20px;
    padding: 2px;
    align-items: center;
}

/* -------------------- Send Message Button */

.send-message {
    margin-top: 10px;
    border-radius: 2px;
    padding: 15px 32px 15px 32px;
    text-align: center;
    font-size: 100%;
    background-color: #fafafa;
    color: #333;
    display: block;
}

.send-message:hover {
    background-color: #0c1f34;
    color: #fafafa;
}



@media screen and (max-width: 1220px) {

    /* -------------------- Enjoy What BP Fitness Has To Offer Section on Member Benefits Page */

    .hero-section-member {
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0 ,0, 0, 0.5)), url("../images/about-hero-image.jpg");
        height: 50vh;
        width: 50%;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        align-items: center;
        margin: auto;
        margin-top: 30px;
        margin-bottom: 40px;
        position: relative;
    }
    
    .member-text {
        width: 816px;
        font-family: "Lato", sans-serif;
        text-align: center;
        position: absolute;
        color: #fafafa;
        margin-top: 155px;
        margin-left: -15px;
        width: 100%;
    }
    
    .member-text h2 {
        font-family: "Lato", sans-serif;
        font-size: 24px;
        color: #fafafa;
        background-color: #0c1f34;
        text-align: center;
        padding: 17px;
        margin: 0;
    }
}

@media screen and (max-width: 1150px) {

    /* -------------------- What BP Fitness Has To Offer on About BP Fitness Page */

    .strength-machines {
        font-family: "Lato", sans-serif;
        height: 300px;
        width: 100%;
        padding: 20px;
        background-color: #0c1f34;
        text-align: center;
    }

    .strength-heading {
        font-size: 20px;
    }

    .strength-text {
        margin-top: 20px;
    }

    .strength-machines li {
        font-size: 12px;
    }

    .weights {
        font-family: "Lato", sans-serif;
        height: 300px;
        width: 100%;
        background-color: #0c1f34;
        padding: 20px;
        text-align: center;
    }

    .weights-heading {
        font-size: 20px;
    }

    .weights-text li {
        font-size: 12px;
    }

    .cardio-machines {
        font-family: "Lato", sans-serif;
        height: 300px;
        width: 100%;
        background-color: #0c1f34;
        padding: 20px;
        text-align: center;
        margin: 10px auto;
    }

    .cardio-heading {
        font-size: 20px;
    }

    .cardio-text {
        margin-top: 20px;
    }

    .cardio-text li {
        font-size: 12px;
    }

    .gym-facilities {
        font-family: "Lato", sans-serif;
        height: 300px;
        width: 100%;
        background-color: #0c1f34;
        padding: 20px;
        text-align: center;
        margin: 10px auto;
    }

    .gym-text {
        margin-top: 20px;
    }

    .gym-heading {
        font-size: 20px;
    }
    
    .gym-facilities li {
        font-size: 12px;
    }

}

@media screen and (max-width: 992px) {

    /* -------------------- Membership Offers Section on Home Page */

    .member-fees {
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: #fafafa;
    }

    .membership-fees-header {
        font-family: "Lato", sans-serif;
        font-size: 200%;
        text-align: center;
        text-transform: uppercase;
        color: #fafafa;
        background-color: #0c1f34;
        padding: 40px;
        margin: 0;
    }
    
    .student-membership {
        background: url("../images/student-options.jpg");
        height: 350px;
        width: 350px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        margin: 10px auto;
    }

    .membership-prices {
        background: url("../images/membership-options.jpg");
        height: 350px;
        width: 350px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        margin: 10px auto;
    }

    /* -------------------- Membership Benefits Section on Home Page */

    .member-section {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .member-section .col-lg-4 {
        flex-basis: 40%;
    }
    
    .member-section-header {
        font-family: "Lato", sans-serif;
        font-size: 200%;
        text-align: center;
        background-color: #0c1f34;
        color: #fafafa;
        padding: 40px 40px 40px 40px;
    }

    .img-box1 {
        text-align: center;
        color: #fafafa;
        font-size: 100%;
        background-image: url("../images/personal-training.jpg");
        background-position: center;
        background-repeat: no-repeat;
        height: 250px;
        width: 300px;
        margin-left: 10px auto;
        margin-top: 5px;
        margin-bottom: 70px;
    }
    .img-box2 {
        text-align: center;
        color: #fafafa;
        font-size: 100%;
        background-image: url("../images/gym-class.jpg");
        background-position: center;
        background-repeat: no-repeat;
        height: 250px;
        width: 300px;
        margin: 10px auto;
        margin-top: 5px;
        margin-bottom: 70px;
    }
    .img-box3 {
        text-align: center;
        color: #fafafa;
        font-size: 100%;
        background-image: url("../images/workout-diet.jpg");
        background-position: center;
        background-repeat: no-repeat;
        height: 250px;
        width: 300px;
        margin: 10px auto;
        margin-top: 5px;
        margin-bottom: 100px;
    }

    /* -------------------- Icon Section on Home Page */

    .icon-section {
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        background-color: #0c1f34;
        height: 125px;
    }

    .icon-section span i {
        color: #fafafa;
        font-size: 50px;
        text-align: center;
        padding: 10px 5px 10px 5px;
        margin-right: auto;
        margin-left: auto;
    }
    
    .icon-section h5 {
        font-family: "Lato", sans-serif;
        color: #fafafa;
        padding: 10px;
        font-size: 12px;
        text-align: center;
        margin-right: auto;
        margin-left: auto;
    }

    /* -------------------- Testimonial Section on Home Page/ About BP Fitness Page */

    .testimonial-header {
        font-family: "Lato", sans-serif;
        font-size: 200%;
        text-align: center;
        color: #333;
        background-color: #fafafa;
        padding: 40px;
        margin: 0;
    }

    /* -------------------- Why Choose BP Fitness on About BP Fitness Page */

    .content {
        height: 400px;
        width: 700px;
        background-color: #fafafa;
        margin: 30px auto;
    }
    
    .content h4 {
        font-size: 100%;
        color: #333;
        text-align: center;
        margin: 0;
        padding-top: 18px;
    }

    /* -------------------- Membership Options on About BP Fitness Page */

    
    .member-options-header {
        font-family: "Lato", sans-serif;
        font-size: 200%;
        text-align: center;
        text-transform: uppercase;
        color: #333;
        background-color: #fafafa;
        padding: 40px 40px 0 40px;
        margin: 0;
    }

    .student-offer {
        font-family: "Lato", sans-serif;
        background-color: #333;
        margin-top: 10px;
        height: 300px;
        width: 300px;
        margin-left: auto;
    }
    
    .student-offer h3 {
        font-size: 150%;
        color: #fafafa;
        text-align: center;
        padding: 20px;
        text-decoration-line: underline;
    }
    
    .student-offer h5 {
        font-size: 100%;
        color: #fafafa;
        text-align: center;
        padding: 10px 30px 20px 30px;
        text-transform: uppercase;
    }
    
    .student-offer h6 {
        font-size: 80%;
        color: #fafafa;
        background-color: #0c1f34;
        text-align: center;
        width: 100%;
        height: 60px;
        margin-top: 20px;
        padding: 20px 0 0 0;
    }
    .student-prices {
        font-family: "Lato", sans-serif;
        background-color: #333;
        margin-top: 10px;
        height: 300px;
        width: 300px;
        margin-right: auto;
    }
    
    .student-prices h3 {
        font-size: 150%;
        color: #fafafa;
        text-align: center;
        text-decoration-line: underline;
        padding: 20px;
        margin-top: 10px;
    }
    
    .student-prices h5 {
        font-size: 100%;
        color: #fafafa;
        text-align: center;
        padding: 1px 30px 17px 30px;
        text-transform: uppercase;
    }
    
    .student-prices h6 {
        font-size: 80%;
        color: #fafafa;
        background-color: #0c1f34;
        text-align: center;
        width: 100%;
        height: 60px;
        margin-top: 15px;
        padding: 22px 0 10px 0;
    }
    .membership-offer {
        font-family: "Lato", sans-serif;
        background-color: #333;
        height: 300px;
        width: 300px;
        margin-bottom: 20px;
        margin-left: auto;
    }
    
    .membership-offer h3 {
        font-size: 150%;
        color: #fafafa;
        text-align: center;
        text-decoration-line: underline;
        padding: 20px;
    }
    
    .membership-offer h5 {
        font-size: 100%;
        color: #fafafa;
        text-align: center;
        padding: 10px 30px 22px 30px;
        text-transform: uppercase;
    }
    
    .membership-offer h6 {
        font-size: 80%;
        color: #fafafa;
        background-color: #0c1f34;
        text-align: center;
        width: 100%;
        height: 60px;
        margin-top: 15px;
        padding: 22px 0 20px 0;
    }

    .membership-fees {
        font-family: "Lato", sans-serif;
        background-color: #333;
        height: 300px;
        width: 300px;
        margin-bottom: 20px;
        margin-right: auto;
    }
    
    .membership-fees h3 {
        font-size: 150%;
        color: #fafafa;
        text-align: center;
        text-decoration-line: underline;
        padding: 20px 20px 10px 20px; 
    }
    
    .membership-fees h5 {
        font-size: 100%;
        color: #fafafa;
        text-align: center;
        padding: 20px 20px 17px 20px;
        text-transform: uppercase;
    }
    
    .membership-fees h6 {
        font-size: 80%;
        color: #fafafa;
        background-color: #0c1f34;
        text-align: center;
        width: 100%;
        height: 60px;
        margin-top: 15px;
        padding: 20px;
    }

    /* -------------------- What BP Fitness Has To Offer on About BP Fitness Page */

    .we-offer-header {
        font-family: "Lato", sans-serif;
        font-size: 200%;
        text-align: center;
        text-transform: uppercase;
        color: #fafafa;
        background-color: #333;
        padding: 40px;
        margin-top: 30px;
        margin-bottom: 0;
    }
    
    .offer-flex {
        width: 100%;
        height: 1300px;
        margin: 0;
        flex-direction: column;
        display: flex;
        align-items: center;  
        background-color: #fafafa;
        padding-bottom: 20px;
        margin-top: 0;
    }

    .strength-machines {
        font-family: "Lato", sans-serif;
        height: 300px;
        width: 50%;
        padding: 20px;
        background-color: #0c1f34;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .weights {
        font-family: "Lato", sans-serif;
        height: 300px;
        width: 50%;
        background-color: #0c1f34;
        padding: 20px;
        text-align: center;
        margin: auto;
    }

    .cardio-machines {
        font-family: "Lato", sans-serif;
        height: 300px;
        width: 50%;
        background-color: #0c1f34;
        padding: 20px;
        text-align: center;
        margin-top: 10px;
    }

    .gym-facilities {
        font-family: "Lato", sans-serif;
        height: 300px;
        width: 50%;
        background-color: #0c1f34;
        padding: 20px;
        text-align: center;
    }


    /* -------------------- Personal Trainers Section On Member Benefits Page */

    .personal-trainer-header {
        font-family: "Lato", sans-serif;
        font-size: 200%;
        text-align: center;
        text-transform: uppercase;
        color: #fafafa;
        background-color: #0c1f34;
        padding: 40px 40px 40px 40px;
    }
    
    .personal-flex {
        height: 350px;
        width: 100%;
        justify-content: space-between;
        display: flex;
        align-items: center;  
        background-color: #fafafa;
        margin: auto;
    }
    
    /* -------------------- Personal Trainer 1 */
    
    .pt-1 {
        height: 300px;
        width: 300px;
        background: url("../images/pt1.jpg") no-repeat center center;
        margin-left: auto;
        margin-top: 5px;
        margin-bottom: 5px; 
    }
    
    .pt-1 h3 {
        color: #fafafa;
        font-size: 20px;
        text-align: center;
        background-color: #0c1f34;
        height: 50px;
        width: 300px;
        padding-top: 10px;
        margin-top: 246px;
    }
    
    /* -------------------- Personal Trainer 2 */
    
    .pt-2 {
        height: 300px;
        width: 300px;
        background: url("../images/pt2.jpg") no-repeat center center;
        margin-right: auto;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    
    .pt-2 h3 {
        color: #fafafa;
        font-size: 20px;
        text-align: center;
        background-color: #0c1f34;
        height: 50px;
        width: 300px;
        padding-top: 10px;
        margin-top: 242px;
    }
    
    /* -------------------- Personal Trainer 3 */
    
    .pt-3 {
        height: 300px;
        width: 300px;
        background: url("../images/pt3.jpg") no-repeat center left;
        margin-left: auto;
        margin-top: 5px;
        margin-bottom: 5px; 
    }
    
    .pt-3 h3 {
        color: #fafafa;
        font-size: 20px;
        text-align: center;
        background-color: #0c1f34;
        height: 50px;
        width: 300px;
        padding-top: 10px;
        margin-top: 234px;
    }
    
    /* -------------------- Personal Trainer 4 */
    
    .pt-4 {
        height: 300px;
        width: 300px;
        background: url("../images/pt4.jpg") no-repeat center center;
        margin-right: auto;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    
    .pt-4 h3 {
        color: #fafafa;
        font-size: 20px;
        text-align: center;
        background-color: #0c1f34;
        height: 50px;
        width: 300px;
        padding-top: 10px;
        margin-top: 226px;
    }
    
    /* -------------------- Personal Trainer 5 */
    
    .pt-5 {
        height: 300px;
        width: 300px;
        background: url("../images/pt5.jpg") no-repeat center center;
        margin-left: auto;
        margin-top: 5px;
        margin-bottom: 5px; 
    }
    
    .pt-5 h3 {
        color: #fafafa;
        font-size: 20px;
        text-align: center;
        background-color: #0c1f34;
        height: 50px;
        width: 300px;
        padding-top: 10px;
        margin-top: 202px;
    }

    /* -------------------- Personal Trainer 6 */
    
    .pt-6 {
        height: 300px;
        width: 300px;
        background: url("../images/pt6.jpg") no-repeat center center;
        position: relative;
        margin-right: auto;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    
    .pt-6 h3 {
        color: #fafafa;
        font-size: 20px;
        text-align: center;
        background-color: #0c1f34;
        height: 50px;
        width: 300px;
        padding-top: 10px;
        margin-top: 250px;
        position: absolute;
    }

    /* -------------------- Gym Classes Section */

    .gym-class-header {
        font-family: "Lato", sans-serif;
        font-size: 200%;
        text-align: center;
        color: #fafafa;
        background-color: #0c1f34;
        padding: 20px;
        margin-top: 10px;
    }
    
    .gym-class table, th, td {
        font-family: "Lato", sans-serif;
        text-align: center;
        font-size: 90%;
        color: #333;
        border: 1px solid  #333;
        border-collapse: collapse;
        padding: 5px;
        margin: 0 auto;
        margin-bottom: 20px;
        margin-top: 10px;
    }

    .removal {
        display: none;
    }

    /* -------------------- Inside BP Fitness section on About BP Fitness Page */

    .bp-header {
        font-family: "Lato", sans-serif;
        font-size: 200%;
        text-align: center;
        background-color: #333;
        color: #fafafa;
        padding: 40px;
        margin: 0;
    }

    .image-section {
        display: flex;
    }

    .image-section img {
        width: 10%;
        padding: 0;
        border: 0.5px solid #000;
    }

    /* -------------------- Memeber Benefits & You Can Find Us Here Section on About BP Fitness Page */

    .benefits {
        height: 600px;
        width: 100%;
        background-color: #0c1f34;
        margin-bottom: 30px;
    }

    .benefits-header {
        font-size: 200%;
        color: #fafafa;
        text-align: center;
        padding: 40px 20px 22.5px 20px;
    }

    .map-header {
        font-size: 200%;
        color: #fafafa;
        text-align: center;
        padding: 40px;
    }
    
    /* -------------------- Workout Plans Section */

    .workout-dietary-header {
        font-family: "Lato", sans-serif;
        width: 100%;
        font-size: 200%;
        text-align: center;
        text-transform: uppercase;
        color: #fafafa;
        background-color: #0c1f34;
        padding: 40px;
    }
    
    .workout-dietary-flex {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* -------------------- Workout Plans */
    
    .workout-plans {
        height: 400px;
        width: 400px;
        background: url("../images/workout-plans.jpg") no-repeat center center;
        margin: 10px auto;
    }

    .dietary-plans {
        height: 400px;
        width: 400px;
        background: url("../images/dietary-plans.jpg") no-repeat center center;
        margin: 10px auto;
    }

    /* ------------------------------------------------------------------------------------------------------------------------ Footer Section */
}
    

@media screen and (max-width: 768px) {

    /* -------------------- Member Benefits Section on Home Page */

    .member-section {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .img-box1 {
        text-align: center;
        color: #fafafa;
        font-size: 100%;
        background-image: url("../images/personal-training.jpg");
        background-position: center;
        background-repeat: no-repeat;
        height: 250px;
        width: 300px;
        margin: auto;
        margin-top: 5px;
        margin-bottom: 70px;
    }

    .img-box2 {
        text-align: center;
        color: #fafafa;
        font-size: 100%;
        background-image: url("../images/gym-class.jpg");
        background-position: center;
        background-repeat: no-repeat;
        height: 250px;
        width: 300px;
        margin: auto;
        margin-top: 5px;
        margin-bottom: 70px;
    }

    .img-box3 {
        text-align: center;
        color: #fafafa;
        font-size: 100%;
        background-image: url("../images/workout-diet.jpg");
        background-position: center;
        background-repeat: no-repeat;
        height: 250px;
        width: 300px;
        margin: auto;
        margin-top: 5px;
        margin-bottom: 70px;
    }

    /* -------------------- Why Choose BP Fitness on About BP Fitness Page */

    .content {
        height: 400px;
        width: 400px;
        background-color: #fafafa;
        margin: 30px auto;
    }
    
    .content h4 {
        font-size: 100%;
        color: #333;
        text-align: center;
        margin: 0;
        padding-top: 18px;
    }

     /* -------------------- Membership Options on About BP Fitness Page */

    .member-options-header {
        font-family: "Lato", sans-serif;
        font-size: 200%;
        text-align: center;
        text-transform: uppercase;
        color: #333;
        background-color: #fafafa;
        padding: 40px 40px 40px 40px;
        margin: 0;
    }

    .member-options-flex {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .student-offer {
        font-family: "Lato", sans-serif;
        background-color: #333;
        margin-top: 10px;
        height: 300px;
        width: 300px;
        margin: auto;
    }
    
    .student-offer h3 {
        font-size: 150%;
        color: #fafafa;
        text-align: center;
        padding: 20px;
        text-decoration-line: underline;
    }
    
    .student-offer h5 {
        font-size: 100%;
        color: #fafafa;
        text-align: center;
        padding: 10px 30px 20px 30px;
        text-transform: uppercase;
    }
    
    .student-offer h6 {
        font-size: 80%;
        color: #fafafa;
        background-color: #0c1f34;
        text-align: center;
        width: 100%;
        height: 60px;
        margin-top: 20px;
        padding: 20px 0 0 0;
    }
    .student-prices {
        font-family: "Lato", sans-serif;
        background-color: #333;
        height: 300px;
        width: 300px;
        margin: auto;
    }
    
    .student-prices h3 {
        font-size: 150%;
        color: #fafafa;
        text-align: center;
        text-decoration-line: underline;
        padding: 20px;
        margin-top: 10px;
    }
    
    .student-prices h5 {
        font-size: 100%;
        color: #fafafa;
        text-align: center;
        padding: 1px 30px 17px 30px;
        text-transform: uppercase;
    }
    
    .student-prices h6 {
        font-size: 80%;
        color: #fafafa;
        background-color: #0c1f34;
        text-align: center;
        width: 100%;
        height: 60px;
        margin-top: 15px;
        padding: 22px 0 10px 0;
    }
    .membership-offer {
        font-family: "Lato", sans-serif;
        background-color: #333;
        height: 300px;
        width: 300px;
        margin: 10px auto;
        margin-top: 220px;
    }
    
    .membership-offer h3 {
        font-size: 150%;
        color: #fafafa;
        text-align: center;
        text-decoration-line: underline;
        padding: 20px;
    }
    
    .membership-offer h5 {
        font-size: 100%;
        color: #fafafa;
        text-align: center;
        padding: 10px 30px 22px 30px;
        text-transform: uppercase;
    }
    
    .membership-offer h6 {
        font-size: 80%;
        color: #fafafa;
        background-color: #0c1f34;
        text-align: center;
        width: 100%;
        height: 60px;
        margin-top: 15px;
        padding: 22px 0 20px 0;
    }

    .membership-fees {
        font-family: "Lato", sans-serif;
        background-color: #333;
        height: 300px;
        width: 300px;
        margin: auto;
        margin-bottom: 20px;
    }
    
    .membership-fees h3 {
        font-size: 150%;
        color: #fafafa;
        text-align: center;
        text-decoration-line: underline;
        padding: 20px 20px 10px 20px; 
    }
    
    .membership-fees h5 {
        font-size: 100%;
        color: #fafafa;
        text-align: center;
        padding: 20px 20px 17px 20px;
        text-transform: uppercase;
    }
    
    .membership-fees h6 {
        font-size: 80%;
        color: #fafafa;
        background-color: #0c1f34;
        text-align: center;
        width: 100%;
        height: 60px;
        margin-top: 15px;
        padding: 20px;
    }

    /* -------------------- Member Testimonial Section on Home Page/ About BP Fitness Page */

    .testimonial-header {
        font-family: "Lato", sans-serif;
        font-size: 200%;
        text-align: center;
        color: #333;
        background-color: #fafafa;
        padding: 40px;
        margin: 0;
    }

    .testimonial-section {
        height: 200px;
        background-color: #fafafa;
    }
    
    .testimonial-section .col-md-4 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .testimonial-section img {
        display: none;
    }

    /* -------------------- Enjoy What BP Fitness Has To Offer Section on Member Benefits Page */

    .hero-section-member {
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0 ,0, 0, 0.5)), url("../images/about-hero-image.jpg");
        height: 50vh;
        width: 50%;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        align-items: center;
        margin: auto;
        margin-top: 30px;
        margin-bottom: 40px;
        position: relative;
    }
    
    .member-text {
        width: 816px;
        font-family: "Lato", sans-serif;
        text-align: center;
        position: absolute;
        color: #fafafa;
        margin-top: 160px;
        margin-left: -15px;
        width: 100%;
    }
    
    .member-text h2 {
        font-family: "Lato", sans-serif;
        font-size: 19px;
        color: #fafafa;
        background-color: #0c1f34;
        text-align: center;
        padding: 20px;
        margin: 0;
    }

    /* -------------------- Inside BP Fitness Section */

    .inside-bp-header {
        display: none;
    }

    .image-section img {
        display: none;
    }

    .bp-header {
        display: none;
    }

    /* -------------------- Personal Trainers Section on Member Benefits Page */
    
    .personal-trainer-header {
        font-family: "Lato", sans-serif;
        font-size: 200%;
        text-align: center;
        text-transform: uppercase;
        color: #fafafa;
        background-color: #0c1f34;
        padding: 40px 40px 40px 40px;
    }
    
    .personal-flex {
        height: 640px;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .pt-1 {
        height: 300px;
        width: 400px;
        background: url("../images/pt1.jpg") no-repeat center center;
        margin: auto;
        margin-top: 10px;
        margin-bottom: 10px; 
    }
    .pt-2 {
        height: 300px;
        width: 400px;
        background: url("../images/pt2.jpg") no-repeat center center;
        margin: auto;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .pt-3 {
        height: 300px;
        width: 400px;
        background: url("../images/pt3.jpg") no-repeat center left;
        margin: auto;
        margin-top: 10px;
        margin-bottom: 10px; 
    }
    .pt-4 {
        height: 300px;
        width: 400px;
        background: url("../images/pt4.jpg") no-repeat center center;
        margin: auto;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .pt-5 {
        height: 300px;
        width: 400px;
        background: url("../images/pt5.jpg") no-repeat center center;
        margin: auto;
        margin-top: 10px;
        margin-bottom: 10px; 
    }
    .pt-6 {
        height: 300px;
        width: 400px;
        background: url("../images/pt6.jpg") no-repeat center center;
        position: relative;
        margin: auto;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .pt-1 h3 {
        color: #fafafa;
        font-size: 20px;
        text-align: center;
        background-color: #0c1f34;
        height: 50px;
        width: 400px;
        padding-top: 10px;
        margin-top: 246px;
    }

    .pt-2 h3 {
        color: #fafafa;
        font-size: 20px;
        text-align: center;
        background-color: #0c1f34;
        height: 50px;
        width: 400px;
        padding-top: 10px;
        margin-top: 242px;
    }

    .pt-3 h3 {
        color: #fafafa;
        font-size: 20px;
        text-align: center;
        background-color: #0c1f34;
        height: 50px;
        width: 400px;
        padding-top: 10px;
        margin-top: 234px;
    }

    .pt-4 h3 {
        color: #fafafa;
        font-size: 20px;
        text-align: center;
        background-color: #0c1f34;
        height: 50px;
        width: 400px;
        padding-top: 10px;
        margin-top: 226px;
    }

    .pt-5 h3 {
        color: #fafafa;
        font-size: 20px;
        text-align: center;
        background-color: #0c1f34;
        height: 50px;
        width: 400px;
        padding-top: 10px;
        margin-top: 202px;
    }

    .pt-6 h3 {
        color: #fafafa;
        font-size: 20px;
        text-align: center;
        background-color: #0c1f34;
        height: 50px;
        width: 400px;
        padding-top: 10px;
        margin-top: 250px;
        position: absolute;
    }

    /* -------------------- Gym Classes Section on Member Benefits Page */

    .gym-class-header {
        font-family: "Lato", sans-serif;
        font-size: 200%;
        text-align: center;
        color: #fafafa;
        background-color: #0c1f34;
        padding: 20px;
        margin-top: 10px;
    }
    
    .gym-class table, th, td {
        font-family: "Lato", sans-serif;
        text-align: center;
        font-size: 80%;
        color: #333;
        border: 1px solid  #333;
        border-collapse: collapse;
        padding: 5px;
        margin: 0 auto;
        margin-bottom: 20px;
        margin-top: 10px;
    }

    .removal {
        display: none;
    }

    .contact-form h2{
        color: #fafafa;
        font-size: 125%;
        text-align: center;
        margin-bottom: 25px;
    }

}

@media screen and (max-width: 500px) {

    .we-offer-header {
        font-family: "Lato", sans-serif;
        font-size: 150%;
        text-align: center;
        text-transform: uppercase;
        color: #fafafa;
        background-color: #333;
        padding: 40px;
        margin-top: 30px;
        margin-bottom: 0;
    }
    
    .offer-flex {
        width: 100%;
        height: 1275px;
        margin: 0;
        flex-direction: column;
        display: flex;
        align-items: center;  
        background-color: #fafafa;
        padding-bottom: 20px;
        margin-top: 10px;
    }

    .strength-machines {
        font-family: "Lato", sans-serif;
        height: 325px;
        width: 275px;
        padding: 20px;
        background-color: #0c1f34;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .strength-heading {
        font-size: 20px;
    }

    .strength-text {
        font-size: 10px;
    }

    .weights {
        font-family: "Lato", sans-serif;
        height: 275px;
        width: 275px;
        background-color: #0c1f34;
        padding: 20px;
        text-align: center;
        margin: auto;
        margin-top: 10px;
    }

    .weights-heading {
        font-size: 20px;
    }

    .cardio-machines {
        font-family: "Lato", sans-serif;
        height: 325px;
        width: 275px;
        background-color: #0c1f34;
        padding: 20px;
        text-align: center;
        margin-top: 15px;
    }

    .cardio-heading {
        font-size: 20px;
    }

    .gym-facilities {
        font-family: "Lato", sans-serif;
        height: 275px;
        width: 275px;
        background-color: #0c1f34;
        padding: 20px;
        text-align: center;
    }

    .gym-heading {
        font-size: 20px;
    }

}

@media screen and (max-width: 450px) {

    .hero-section {
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0 ,0, 0, 0.5)), url("../images/hero.jpg");
        height: 700px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
    }

    /* ------------------------------------------------------------  Member Prices - Home Page */

    .membership-fees-header {
        font-family: "Lato", sans-serif;
        font-size: 150%;
        text-align: center;
        text-transform: uppercase;
        color: #fafafa;
        background-color: #0c1f34;
        padding: 20px;
        margin: 0;
        margin-bottom: 10px;
    }
    
    .student-membership {
        height: 275px;
        width: 275px;
        margin: 10px auto;
    }

    .student-membership h2 {
        text-align: center;
        color: #fafafa;
        font-size: 125%;
        padding: 80px 0 20px 0;
    }    
    
    .student-membership h4 {
        text-align: center;
        color: #fafafa;
        font-size: 100%;
        padding: 0 10px 50px 10px;
    }
    
    .student-membership h5 {
        text-align: center;
        color: #fafafa;
        font-size: 100%;
        background-color: #0c1f34;
        padding: 5px;
        width: 275px;
        height: 35px;
        margin: auto;
    }
    
    .membership-prices {
        height: 275px;
        width: 275px;
        margin: 10px auto;
    }

    .membership-prices h2 {
        text-align: center;
        color: #fafafa;
        font-size: 125%;
        padding: 80px 0 20px 0;
    }
    
    .membership-prices h4 {
        text-align: center;
        color: #fafafa;
        font-size: 100%;
        padding: 0 10px 29px 10px;
    }
    
    .membership-prices h5 {
        text-align: center;
        color: #fafafa;
        font-size: 100%;
        background-color: #0c1f34;
        padding: 5px;
        width: 275px;
        height: 35px;
        margin: auto;
    }

    /* ------------------------------------------------------------  Member Benefits - Home Page */
    
    .member-section-header {
        font-family: "Lato", sans-serif;
        font-size: 150%;
        text-align: center;
        background-color: #0c1f34;
        color: #fafafa;
        padding: 20px;
        margin-top: 20px;
    }

    .img-box1 {
        height: 275px;
        width: 275px;
        margin: auto;
        margin-top: 5px;
        padding-bottom: 70px;
    }

    .img-pt-text {
        font-family: "Lato", sans-serif;
        color: #fafafa;
        font-size: 120%;
        padding-top: 100px;
    }
    
    .img-button-pt button {
        border: none;
        color: #fafafa;
        font-size: 90%;
        background-color: #0c1f34;
        margin-top: 130px;
        height: 50px;
        width: 275px;
    }

    .img-box2 {
        height: 275px;
        width: 275px;
        margin: auto;
        margin-top: 40px;
        padding-bottom: 80px;
    }

    .img-gc-text {
        font-family: "Lato", sans-serif;
        color: #fafafa;
        font-size: 120%;
        padding-top: 100px;
    }
    
    .img-button-gc button {
        border: none;
        color: #fafafa;
        font-size: 90%;
        background-color: #0c1f34;
        margin-top: 130px;
        height: 50px;
        width: 275px;
    }
    
    .img-box3 {
        height: 275px;
        width: 275px;
        margin: auto;
        margin-top: 40px;
        margin-bottom: 60px;
        padding-bottom: 70px;
    }

    .img-wd-text {
        font-family: "Lato", sans-serif;
        color: #fafafa;
        font-size: 120%;
        padding-top: 100px;
    }
    
    .img-button-wd button {
        border: none;
        color: #fafafa;
        font-size: 90%;
        background-color: #0c1f34;
        margin-top: 130px;
        height: 50px;
        width: 275px;
    }

    /* ------------------------------------------------------------  Icons Section - Home Page/ */

    .icon-section {
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        background-color: #0c1f34;
        height: 150px;
    }
    
    .icon-section span i {
        color: #fafafa;
        font-size: 30px;
        text-align: center;
        padding: 10px 5px 10px 5px;
        margin-right: auto;
        margin-left: auto;
    }
    
    .icon-section h5 {
        font-family: "Lato", sans-serif;
        color: #fafafa;
        padding: 10px;
        font-size: 10px;
        text-align: center;
        margin-right: auto;
        margin-left: auto;
    }

    /* ------------------------------------------------------------  Member Testimonials Section - Home Page/ About BP Fitness Page */

    .testimonial-header {
        font-family: "Lato", sans-serif;
        font-size: 150%;
        text-align: center;
        color: #333;
        background-color: #fafafa;
        padding: 20px;
        margin: 0;
    }

    .testimonial-section {
        height: 475px;
        background-color: #fafafa;
    }
    
    .testimonial-section img {
        display: none;
    }

    .about-us {
        height: 500px;
        width: 100%;
        background-color: #0c1f34;
    }

    /* ------------------------------------------------------------  About BP Fitness - About BP Fitness Page */
    
    .about-us h2 {
        font-family: "Lato", sans-serif;
        font-size: 150%;
        color: #fafafa;
        text-align: center;
        padding: 40px 40px 10px 40px;
    }
    
    .content {
        height: 325px;
        width: 275px;
        background-color: #fafafa;
        margin: 30px auto;
    }
    
    .content h4 {
        color: #333;
        text-align: center;
        margin: 0;
        padding-top: 18px;
        font-size: 70%;
    }

    /* ------------------------------------------------------------  Membership Section - About BP Fitness Page */

    .member-options-header {
        font-family: "Lato", sans-serif;
        font-size: 150%;
        text-align: center;
        text-transform: uppercase;
        color: #333;
        background-color: #fafafa;
        padding: 20px;
        margin: 0;
        margin-bottom: 10px;
    }

    .student-offer {
        font-family: "Lato", sans-serif;
        background-color: #333;
        height: 275px;
        width: 275px;
        margin: auto;
    }
    
    .student-offer h3 {
        font-size: 125%;
        color: #fafafa;
        text-align: center;
        padding: 20px;
        text-decoration-line: underline;
    }
    
    .student-offer h5 {
        font-size: 90%;
        color: #fafafa;
        text-align: center;
        padding: 10px 30px 20px 30px;
        text-transform: uppercase;
    }
    
    .student-offer h6 {
        font-size: 80%;
        color: #fafafa;
        background-color: #0c1f34;
        text-align: center;
        width: 100%;
        height: 50px;
        margin-top: 20px;
        padding: 20px 0 0 0;
    }

    .student-prices {
        font-family: "Lato", sans-serif;
        background-color: #333;
        height: 275px;
        width: 275px;
        margin: auto;
    }
    
    .student-prices h3 {
        font-size: 125%;
        color: #fafafa;
        text-align: center;
        text-decoration-line: underline;
        padding: 20px;
        margin-top: 10px;
    }
    
    .student-prices h5 {
        font-size: 90%;
        color: #fafafa;
        text-align: center;
        padding: 1px 30px 17px 30px;
        text-transform: uppercase;
    }
    
    .student-prices h6 {
        font-size: 80%;
        color: #fafafa;
        background-color: #0c1f34;
        text-align: center;
        width: 100%;
        height: 50px;
        margin-top: 15px;
        padding: 22px 0 10px 0;
    }

    .membership-offer {
        font-family: "Lato", sans-serif;
        background-color: #333;
        height: 275px;
        width: 275px;
        margin: 10px auto;
        margin-top: 170px;
    }
    
    .membership-offer h3 {
        font-size: 125%;
        color: #fafafa;
        text-align: center;
        text-decoration-line: underline;
        padding: 20px;
    }
    
    .membership-offer h5 {
        font-size: 90%;
        color: #fafafa;
        text-align: center;
        padding: 10px 30px 22px 30px;
        text-transform: uppercase;
    }
    
    .membership-offer h6 {
        font-size: 80%;
        color: #fafafa;
        background-color: #0c1f34;
        text-align: center;
        width: 100%;
        height: 50px;
        margin-top: 15px;
        padding: 22px 0 20px 0;
    }

    .membership-fees {
        font-family: "Lato", sans-serif;
        background-color: #333;
        height: 275px;
        width: 275px;
        margin: auto;
    }
    
    .membership-fees h3 {
        font-size: 125%;
        color: #fafafa;
        text-align: center;
        text-decoration-line: underline;
        padding: 20px 20px 10px 20px; 
    }
    
    .membership-fees h5 {
        font-size: 90%;
        color: #fafafa;
        text-align: center;
        padding: 20px 20px 17px 20px;
        text-transform: uppercase;
    }
    
    .membership-fees h6 {
        font-size: 80%;
        color: #fafafa;
        background-color: #0c1f34;
        text-align: center;
        width: 100%;
        height: 50px;
        margin-top: 15px;
        padding: 20px;
    }

    /* ------------------------------------------------------------  Member Benefits Section - About BP Fitness Page */

    .benefits {
        height: 950px;
        width: 100%;
        background-color: #0c1f34;
        margin-bottom: 30px;
    }
    
    .benefits-header {
        color: #fafafa;
        font-size: 150%;
        text-align: center;
        padding: 20px;
    }
    
    .benefits-flex {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #0c1f34;
    }
    
    /* -------------------- Member Benefits/ Personal Training Sessions Section */
    
    .benefits-flex .pt {
        height: 275px;
        width: 275px;
        background: url("../images/personal-training-about.jpg") no-repeat center center ; 
        margin: 5px;
    }
    
    .benefits-flex .pt h3 {
        color: hsl(0, 0%, 98%);
        font-size: 20px;
        text-align: center;
        margin-top: 110px;
    }
    
    /* -------------------- Member Benefits/ Gym Classes Section */
    
    .benefits-flex .gc {
        height: 275px;
        width: 275px;
        background: url("../images/gym-class-about.jpg") no-repeat center center ;
        margin: 5px;
    }
    
    .benefits-flex .gc h3 {
        color: #fafafa;
        font-size: 20px;
        text-align: center;
        margin-top: 110px;
    }
    
    /* -------------------- Member Benefits/ Workout & Dietary Plans Section */
    
    .benefits-flex .wd {
        height: 275px;
        width: 275px;
        background: url("../images/workout-diet-about.jpg") no-repeat center center ;
        margin: 5px;
        padding: 20px;
    }
    
    .benefits-flex .wd h3 {
        color: #fafafa;
        font-size: 20px;
        text-align: center;
        margin-top: 110px;
    }

    /* ------------------------------------------------------------  Map Section - About BP Fitness */

    .map {
        height: 500px;
        width: 100%;
        background-color: #0c1f34;
        margin-bottom: 20px;
    }
    
    .map-header {
        color: #fafafa;
        font-size: 150%;
        text-align: center;
        padding: 20px;
    }

    /* ------------------------------------------------------------  Hero Member Section - Member Benefits */

    .hero-section-member {
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0 ,0, 0, 0.5)), url("../images/about-hero-image.jpg");
        height: 90vh;
        width: 75%;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        align-items: center;
        margin: auto;
        margin-top: 30px;
        margin-bottom: 40px;
        position: relative;
    }

    /* ------------------------------------------------------------  Personal Training Section - Member Benefits */

    .personal-trainer-header {
        font-family: "Lato", sans-serif;
        font-size: 150%;
        text-align: center;
        text-transform: uppercase;
        color: #fafafa;
        background-color: #0c1f34;
        padding: 20px
    }
    
    .personal-flex {
        height: 620px;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .pt-1 {
        height: 275px;
        width: 275px;
    }

    .pt-2 {
        height: 275px;
        width: 275px;
        margin-bottom: 25px;
    }

    .pt-3 {
        height: 275px;
        width: 275px;
    }

    .pt-4 {
        height: 275px;
        width: 275px;
        margin-bottom: 25px;
    }

    .pt-5 {
        height: 275px;
        width: 275px;
        margin-bottom: 10px;
    }

    .pt-6 {
        height: 275px;
        width: 275px;
        margin-bottom: 20px;
    }

    .pt-1 h3 {
        width: 275px;
        font-size: 15px;
        height: 40px;
    }

    .pt-2 h3 {
        width: 275px;
        font-size: 15px;
        height: 40px;
    }

    .pt-3 h3 {
        width: 275px;
        font-size: 15px;
        height: 40px;
    }

    .pt-4 h3 {
        width: 275px;
        font-size: 15px;
        height: 40px;
    }

    .pt-5 h3 {
        width: 275px;
        font-size: 15px;
        height: 40px;
    }

    .pt-6 h3 {
        width: 275px;
        font-size: 15px;
        height: 40px;
    }

    /* ------------------------------------------------------------  Gym Class - Member Benefits */

    .gym-class-header {
        font-family: "Lato", sans-serif;
        font-size: 150%;
        text-align: center;
        color: #fafafa;
        background-color: #0c1f34;
        padding: 20px;
        margin-top: 10px;
    }
    
    .gym-class table, th, td {
        font-family: "Lato", sans-serif;
        text-align: center;
        font-size: 70%;
        color: #333;
        border: 1px solid  #333;
        border-collapse: collapse;
        padding: 2px;
        margin: 0 auto;
        margin-bottom: 20px;
        margin-top: 10px;
    }

    .removal {
        display: none;
    }

    .contact-form h2{
        color: #fafafa;
        font-size: 125%;
        text-align: center;
        margin-bottom: 25px;
    }

    /* ------------------------------------------------------------  Workout & Dietary Section - Member Benefits Page */

    .workout-dietary-header {
        font-family: "Lato", sans-serif;
        width: 100%;
        font-size: 150%;
        text-align: center;
        text-transform: uppercase;
        color: #fafafa;
        background-color: #0c1f34;
        padding: 20px;
    }

    .workout-plans {
        height: 275px;
        width: 275px;
        background: url("../images/workout-plans.jpg") no-repeat center center;
        margin: 10px auto;
    }

    .workout-plans h3 {
        font-family: "Lato", sans-serif;
        color: #fafafa;
        font-size: 17.5px;
        background: none;
        text-align: center;
        padding: 75px 20px;
    }
    
    .workout-plans h5 {
        font-family: "Lato", sans-serif;
        color: #fafafa;
        font-size: 15px;
        background: #0c1f34;
        text-align: center;
        padding: 10px;
    }
    
    .dietary-plans {
        height: 275px;
        width: 275px;
        background: url("../images/dietary-plans.jpg") no-repeat center center;
        margin: 10px auto;
    }

    .dietary-plans h3 {
        font-family: "Lato", sans-serif;
        color: #fafafa;
        font-size: 17.5px;
        background: none;
        text-align: center;
        padding: 75px 20px;
    }
    
    .dietary-plans h5 {
        font-family: "Lato", sans-serif;
        color: #fafafa;
        font-size: 15px;
        background: #0c1f34;
        text-align: center;
        padding: 10px;
    }

    /* ------------------------------------------------------------  Contact Form */

    .form-section {
        background: url("../images/contact-hero-image.jpg");
        height: 900px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
    }
    
    .contact-form {
        font-family: "Lato", sans-serif;
        background-color: rgba(60, 60, 60, 0.6);
        color: #fafafa;
        max-width: 300px;
        max-height: 900px;
        position: absolute;
        margin-top: 80px;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px 40px 20px 40px;
    }
    
    .contact-form h2{
        color: #fafafa;
        text-align: center;
    }

}