html {
    border: 0; 
    margin: 0; 
    width: 100%; 
    height: 550vh; 
    max-height: fit-content;
    max-width: fit-content; 
    background-color: rgb(9, 9, 54);
}

/* nav style start */
.nav-wrapper {
    width: 100%; 
    height: 30%; 
}

nav {
    width: 100%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
}

h3 {
    width: 35%; 
    min-width: 100px; 
    height: 100%; 
    font-size: 2.2rem;  
    font-weight: 200;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 
    display: flex; 
    justify-content: center;
    align-items: center; 
    position: relative; 
    left: 3%; 
    padding: 1.5rem;
    color: white; 
    border: 3px solid white; 
}

h3:hover {
    font-weight: 500;
    color: purple; 
    border: 3px solid purple;
}

.nav-ul {
    width: 50%; 
    min-width: 200px;
    height: 100%; 
    padding: 5px; 
    font-size: 1.3rem;
    text-align: center; 
    display: flex; 
    justify-content: space-around; 
    align-items: flex-end; 
    flex-wrap: wrap;
    margin: 0;
    position: relative; 
    left: 5px; 
}

.nav-ul a {
    color: white; 
    font-family: 'Courier New', Courier, monospace; 
    text-decoration: none;
    padding: 0.9rem; 
}

.nav-ul a:hover {
    color: purple;
    border-bottom: 3px solid purple; 
    font-weight: 700; 
}

/* header styles start */
header {
    width: 100%; 
    height: 100%; 
    margin-top: 10vh; 
}

.h1-wrapper {
    width: 100%; 
    height: 100%; 
    text-align: center; 
    margin-top: 45px; 
}

h1 {
    width: 100%;
    height: 100%;
    color: rgb(255, 255, 255);   
    font-size: 2.9rem; 
    font-weight: 700; 
    font-family: Arial, sans-serif;
    /* border: 3px solid purple;  */
}

h1:hover {
    color: purple; 
}

.header-emblem-wrapper {
    width: 100%; 
    height: 10%; 
    display: flex; 
    justify-content: center;
    position: relative; 
    top: 40px; 
}

.header-emblem-wrapper img {
    width: 12%; 
    height: 12%;
    max-width: 80px; 
    max-height: 80px;  
}

.header-img-wrapper {
    width: 100%; 
    height: 100%;  
    display: flex; 
    justify-content: center;  
    padding-bottom: 80px; 
}

.header-img-wrapper img {
    width: 80%; 
    height: 50%; 
    min-width: 470px; 
    min-height: 400px;
    border: 7px solid purple; 
}


/* main style start */
main {
    width: 100%; 
    height: 50vh; 
    min-height: 680px;
    display: flex; 
    border-bottom: 15px solid purple; 
}

/* main wrapper 1 (left side) */
.main-wrapper1 {
    width: 50%;
    height: 100%; 
    display: flex; 
    flex-direction: column;
    justify-content: center; 
}

.main-wrapper1 img {
    max-width: 40px; 
    max-height: 40px; 
    height: 100%; 
    position: relative; 
    top: 65px; 
    left: 30px; 
}
 
.main-wrapper1 h2 {
    color: white; 
    font-size: xx-large;
    font-family:'Courier New', Courier, monospace;
    text-align: center; 
    border-bottom: 3px solid purple;
    padding-bottom: 5px; 
    margin: 4%;  
    display: flex; 
    justify-content: center; 
}

.main-wrapper1 h2:hover { 
    color: purple; 
}

.main-wrapper1 p {
    color: white; 
    font-family: 'Courier New', Courier, monospace;
    font-size: large; 
    padding: 25px;  
    margin: 0; 
}

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

.main-wrapper1 button {
    background-color: rgb(128, 30, 128);
    color: white; 
    padding: 10px; 
    border: 3px solid purple; 
}

.main-button button:hover {
    background-color: rgb(53, 16, 80);
    border: 3px solid rgb(53, 16, 80); 
    color: purple
}

/* main wrapper 2 (right side) */
.main-wrapper2 {
    width: 50%; 
    height: 100%; 
    min-height:fit-content; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.main-wrapper2 img {
    width: 50%; 
    height: 50%; 
    min-width: 230px; 
    border: 5px solid purple;
}

.paragraph-wrapper {
    width: 50%; 
    height: 50%; 
    z-index: 3; 
    min-width: 230px;
    min-height: 200px;
    background-color: rgb(67, 23, 149);
    text-align: center; 
    display: flex;
    justify-content: center; 
    align-items: center;
    border: 5px solid purple; 
}

.paragraph-wrapper p {
    color: white; 
    font-size: x-large;
    font-family: Courier, monospace;
    width: 100%; 
    height: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    min-width: 200px;
    max-height: 150px; 
}

.paragraph-wrapper:hover {
    background-color: rgb(53, 16, 80);
}

.paragraph-wrapper p:hover {
    color: purple; 
    
}

@media (max-width: 850px) {
    main {
        padding-bottom: 10%; 
    }

    .main-wrapper2 {
        flex-wrap: wrap; 
        display: flex; 
        justify-content: center; 
        align-items: center; 
        padding: 10px; 
    }

    .main-wrapper2 img {
        height: 50%; 
        width: 85%; 
        max-height: 330px; 
    }

    .paragraph-wrapper {
        height: 50%; 
        width: 85%; 
        max-height: 330px; 
    }

}

@media (min-width: 850px) {
    .main-wrapper2 img {
        position: relative; 
        bottom: 80px; 
        right: 30px; 
        max-width: 400px; 
        max-height: 600px; 
    }

    .paragraph-wrapper {
        position: relative;  
        left: 30px;
        top: 90px;
        max-width: 400px; 
        max-height: 600px; 
    }
}

/* main section 2 style (Exercises) */
.main-section2 {
    width: 100%; 
    height: 100%; 
    display: flex; 
    position: relative; 
    top: 40px; 
    flex-direction: column;
}

h4 {
    color: white; 
    width: 20%; 
    display: flex; 
    justify-content: center; 
    position: relative; 
    left: 50px; 
    padding: 10px; 
    font-size: xx-large;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    border-bottom: 3px solid purple;
}

h4:hover {
    color: purple; 
}

.main-section2-paragraph {
    width: 100%; 
    height: fit-content;
    max-width: 800px;
    display: flex; 
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

.main-section2-paragraph p {
    color: white; 
    width: 80%; 
    text-align: center;
    font-family: 'Courier New', Courier, monospace; 
    font-size: larger; 
    padding: 15px; 
}

/* main section2 images */
.main-section2-images {
    width: 100%; 
    height: 100%; 
}

/* row1 - Running and Yoga */
.images-row1 {
    width: 100%; 
    display: flex; 
    justify-content: space-evenly; 
    align-items: flex-start;
    margin: 0; 
    padding: 20px 0;
    gap: 10px;
    border-bottom: 15px solid purple;
    list-style: none;
}

.running-img, .yoga-img {
    width: 48%;
    min-width: unset;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden; 
}

.running-img img, .yoga-img img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border: 2px solid purple;
    display: block;
}

.running-img li, .yoga-img li {
    font-size: large;
    font-weight: 700;
    color: white;
    list-style: none;
    padding: 8px 12px;
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 4px;
}

.running-img li:hover, .yoga-img li:hover {
    color: purple;
}


@media (max-width: 1100px) {
    .images-row1 {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .running-img, .yoga-img {
        width: 90%;
        margin: 0 auto; 
    }

    .running-img img, .yoga-img img {
        height: 400px;
        object-fit: cover;
    }
}




/* row2 - Boxing, Crossfit, Strength */
.images-row2 {
    width: 100%; 
    display: flex; 
    flex-wrap: wrap;
    justify-content: space-evenly; 
    align-items: flex-start;
    padding: 30px 0;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.boxing-img, .crossfit-img, .strength-img {
    width: 30%;
    min-width: unset;
    position: relative;
    display: flex;
    flex-direction: column;
}

.boxing-img img, .crossfit-img img, .strength-img img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border: 2px solid purple;
    display: block;
}

.boxing-img li, .crossfit-img li, .strength-img li {
    font-size: large;
    font-weight: 700;
    color: white;
    list-style: none;
    padding: 8px 12px;
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 4px;
    width: auto;
}

.boxing-img li:hover, .crossfit-img li:hover, .strength-img li:hover {
    color: purple;
}

@media (max-width: 1100px){
    .boxing-img, .crossfit-img, .strength-img {
        width: 80%;
        min-width: unset;
    }
}



/* images row 2 media */
@media(max-width: 1100px) {
    .images-row2 {
        flex-wrap: wrap; 
        display: flex; 
        justify-content: center; 
        align-items: center; 
    }
}


/* main-section3 style start */
.main-section3 {
    width: 100%; 
    height: 100%; 
    min-height: fit-content; 
    background-image: url(../Option2-assets/image7.jpg);
    z-index: 1; 
    opacity: 90%;
    /* border: 3px solid palevioletred;  */
}

h5 {
    font-size: xx-large;
    color: white;
    width: 40%; 
    text-align: center; 
    border-bottom: 3px solid purple;
    padding-bottom: 5px; 
    /* border: 3px solid green; */
}

h5:hover {
    color: purple; 
}

.main-section3 p {
    width: 75%; 
    height: 40%; 
    max-width: 800px; 
    color: white; 
    font-size: x-large;
    padding: 15px; 
    display: flex; 
    position: relative; 
    bottom: 50px; 
    /* border: 3px solid orange;  */
}


/* Footer */
footer {
    width: 100%;
    height: fit-content;
    padding: 40px 0 20px 0;
}

.section3-forms {
    border: 8px solid purple;
    width: 90%;
    min-width: unset;
    margin: 0 auto;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    box-sizing: border-box;
}

.firstName, .Email {
    color: white;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.firstName input, .Email input {
    padding: 10px;
    background-color: rgb(9, 9, 54);
    border: 2px solid purple;
    color: white;
    font-size: 1rem;
}

.Comment {
    color: white;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}

.Comment input {
    min-height: 120px;
    width: 100%;
    padding: 10px;
    background-color: rgb(9, 9, 54);
    border: 2px solid purple;
    color: white;
    font-size: 1rem;
}

.name {
    width: 100%;
    text-align: center;
    color: white;
    padding: 20px 0 15px 0;
}

@media (max-width: 700px){
    .section3-forms {
        width: 90%;
    }
}