*{
    /*makes the background color flush against the edges of the page removing the white gap*/
    margin: 0;
    padding: 0;
    /*without adjusting the "box-sizing" the <div> text in footer will continue off-screen*/
    box-sizing: border-box;
}
:root {
    --primary-color: #fce138;
    --secondary-color: #024e76;
    --tertiary-color: #39a6b2;
}
body {
    font-family: Helvetica, Arial, sans-serif;
    color: var(--tertiary-color);
}
header {
    background-image: url("../images/hero-bg.jpg");
    /*"background-size" and "background position are used to negate the clipping issue on the background image"*/
    background-size: cover;
    background-position: 80%;
    background-attachment: fixed;
    padding: 20px 35px;
    background-color: var(--tertiary-color);
    z-index: 9999;
    position: -webkit-sticky; /*Safari specific sticky functionality*/
    position: sticky; /*An element that's sticky will behave relatively until the viewport scrolls past it.*/
    top: 0; /*Then the element will switch to fixed and remain visible even as the user scrolls farther down.*/
    /*flexbox update begins*/
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

header h1 {
    font-weight: bold;
    margin: 0;
    font-size: 36px;
    color: var(--primary-color);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    /*(Obsolete with flexbox)
    changing the display from the default setting to "inline" cleared room for the <nav> text go from under the the box to in it.
    display: inline; */
}

header a {
    /*setting text-decoration to none removes the underline, strikethrough or overline from the <a> in <header>*/
    text-decoration: none;
    color: var(--primary-color);
}

header nav {
    /*(Obsoloete with flexbox)
    float dictates where on the page the text will be positioned
    float: right; */
    margin: 7px 0;
}

/*flexbox update begins*/
header nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    list-style: none;
} /*flexbox update ends*/

/*(obsolete with flexbox)
header nav ul li {
    display: inline;
} */

header nav ul li a {
    padding: 10px 15px;
    font-weight: lighter;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    /*flexbox upadate (changed font-size from 22px to 1.55vw)*/
    font-size: 1.55vw;
}

header nav ul li a:hover {
    background: var(--primary-color);
    color: var(--secondary-color);
    border-radius: 15px;
    text-shadow: none;
}

/*Hero Style Start*/
.hero {
    background-image: url("../images/hero-bg.jpg");
    /*"background-size" and "background position are used to negate the clipping issue on the background image"*/
    background-size: cover;
    background-position: 80%;
    background-attachment: fixed;
    /*flexbox update begins*/
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
    /*flexbox update ends*/
    /*(Obsolete with flexbox)
    position: relative;
    height: 600px;*/
}
/*flexbox update begins*/
.hero-cta {
    width: 35%;
    text-align: right;
    margin: 3.5%;
    color: #fff;
    font-size: 18px;
    line-height: 1.2;
}
.hero-cta h2 {
    font-style: italic;
    font-size: 55px;
    color: var(--primary-color);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
/*flexbox update ends*/
.hero-form {
    border: 3px solid var(--secondary-color);
    border-radius: 15px; /*border radius is used to make the corners of the border curve*/
    background-color: rgba(225, 225, 56, 0.8);
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    /*flexbox update begins*/
    color: var(--secondary-color);
    width: 40%;
    margin: 3.5%;
    /*flexbox update ends*/
    /*(Obsolete with flexbox)
    width: 500px;
    position: absolute;
    bottom: 120px;
    right: 140px;*/
}
.hero-form button:hover {
    background-color: var(--tertiary-color);
}
.hero form h3 {
    font-size: 24px;
    margin: 0;
}
.hero-form p {
    margin: 5px 0 15px 0;
}
.hero-form label {
    margin: 0 5px;
}
.radio-wrapper label::before {
    border-radius: 50%;
}
.radio-wrapper label::after {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--secondary-color);
    position: absolute;
    left: -29px;
    top: -3px;
    background-image: radial-gradient(circle, var(--tertiary-color), var(--secondary-color));
}
.checkbox-wrapper label::after {
    content: "";
    height: 6px;
    width: 14px;
    border-left: 2px solid var(--secondary-color);
    border-bottom: 2px solid var(--secondary-color);
    position: absolute;
    left: -26px;
    top: 1px;
    transform: rotate(-58deg);
}
.checkbox-wrapper input + label::after,
.radio-wrapper input + label::after {
    content: none;
}
.checkbox-wrapper input:checked + label::after,
.radio-wrapper input:checked +label::after {
    content: "";
}
.checkbox-wrapper input, .radio-wrapper input {
    opacity: 0;
}
.checkbox-wrapper label, .radio-wrapper label {
    position: relative;
    left: 10px;
    margin: 10px;
    line-height: 1.6;
}
.checkbox-wrapper label::before, .radio-wrapper label::before {
    content: "";
    height: 20px;
    width: 20px;
    background: rgba(225, 225, 225, 0.75);
    border: 1px solid var(--secondary-color);
    position: absolute;
    top: -4px;
    left: -30px;
}
.form-input {
    border: 1px solid var(--secondary-color);
    border-radius: 15px;
    display: block;
    padding: 7px 15px;
    font-size: 16px;
    color: var(--secondary-color);
    width: 100%;
    margin-bottom: 15px;
    background-color: rgba(225, 225, 225, 0.75);
}
.form-input:focus {
    background-color: rgba(225, 225, 225, 1);
    outline: none;
}
.hero-form button {
    color: var(--primary-color);
    background-color: var(--secondary-color);
    border: none;
    border-radius: 15px;
    padding: 10px 20px;
    font-size: 16px;
}
/*Hero Style End*/


/*WHAT WE DO STYLE BEGINS*/

/*(Obsolete with flexbox)
.intro {
    text-align: center;
}*/
.intro p {
    line-height: 1.7;
    color: var(--tertiary-color);
    width: 80%;
    font-size: 20px;
    /*to center a block element less than 100% width set the "margin" to "0" "auto"*/
    margin: 0 auto;
    /*flexbox update begins*/
    text-align: center;
    /*flexbox update ends*/
}

/*WHAT WE DO STYLE ENDS*/

/*WHAT YOU DO STYLE BEGINS*/

/*flexbox update begins*/
.step {
    margin: 50px;
    padding-bottom: 50px;
    width: 80%;
    border-bottom: 1px solid var(--tertiary-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.step:last-child {
    border-bottom: none;
}
.step:nth-child(even) {
    border-bottom: 1px solid var(--tertiary-color);
}
.step-img { /*without this step, CSS will refuse to render the images*/
    flex: 1 12%;
    margin-right: 20px;
}
.step-img img {
    max-width: 100%;
}
.step-info {
    flex: 2 70%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /*(info)
    Now the child elements have a flex-grow property of 1 and 12, respectively. 
    This means that .step-text will be allotted 12 times more unused space than .step-img, but .step-img at the very least must be 12 percent of the width of .step-info.*/
}
.step-text {/*Steps with less text have a bigger image. This is because there's only one child with the flex property, so it's ignoring the needs of the other child.
    adding this element fixes the issue*/
    flex: 12;
}
/*flexbox update ends*/

.steps {
    /*(Obsolete with flexbox)
    text-align: center;*/
    background: var(--primary-color);
}
/*(Obsolete with flexbox)
.steps div {
    margin-bottom: 80px;
}
.steps img {
    width: 15%;
    margin: 10px 0;
}
.steps span {
    font-size: 38px;
}*/

.step h3 { /*flexbox update begins (renamed .steps/h3 to step/h3)*/
    flex: 1 30%;
    /*flexbox update ends*/
    /*(Obsolete with flexbox)
    margin-top: 10px;*/
    color: var(--secondary-color);
    font-size: 46px;
}
.step-text p { /*flexbox update (renamed .steps/p to step-text/p also changed font-size to 18px instead of 23px)*/
    color: var(--tertiary-color);
    font-size: 18px;
}
.section-title {
    font-size: 48px;
    display: inline-block;
    padding: 0 100px 20px 100px;
    border-bottom: 3px solid;
    margin-bottom: 35px;
    color: var(--secondary-color);
    /*flexbox update begins*/
    padding-bottom: 20px;
    text-align: center;
    margin: 0 auto 35px auto;
    width: 50%;
    /*flexbox update ends*/
    /*(Obsolete with flexbox)
    margin-bottom: 35px;
    padding: 0 100px 20px 100px; 
    /*set "display" to "inline block" to shorten the line above "What we do"
    display: inline-block;*/
}

/*WHAT YOU DO STYLE ENDS*/


/*MEET THE TRAINERS STYLE BEGINS*/
.trainers { /*flexbox update begins*/
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    /*flexbox update ends*/
    /*(Obsolete with flexbox)
    text-align: center;*/
}

.trainer {
    /*(Obsolete by flexbox)
    /*We don't want the content to span the full width of the page because it will run a little too long, so we've given it a set width value of 900px.
    width: 900px;
    overflow: auto;
    /*By using auto as the values for the left and right margin, we're telling the browser to take whatever space is unused and evenly distribute it on those sides, centering the element.*/
    margin: 20px;/*flexbox update (margin changed from 0.auto.30px.auto to just 20px)*/
    flex: 1; /*flexbox update (If all flexbox children have a value of flex: 1, that means they'll share any extra space evenly.)*/
    background: var(--secondary-color);
    color: var(--primary-color);
}
.trainer img {
    width: 100%;/*flexbox update (width changed from 35% to 100%)*/
    /*(Obsolete with flexbox) 
    float: left;*/
}
.trainer-bio { /*flexbox update begins (line-height moved from .trainer-bio/p also padding changed from 35px to 25px)*/
    /*(Obsolete with flexbox)
    float: left;
    width: 65%;*/
    line-height: 1.3;
    padding: 25px;
}
.trainer-bio h3 { /*flexbox update (font-size changed from 32px to 28)*/
    font-size: 28px;
    /*(Obsolete with flexbox)
    margin-bottom: 8px;*/
}
.trainer-bio h4 { /*flexbox update (font-size changed from 26px to 22px, margin-bottom changed from 25px to 15px)*/
    font-weight: lighter;
    font-size: 26px;
    margin-bottom: 15px;
}
.trainer-bio p { /*flexbox update begins (line-height moved to .trainer-bio)*/
    font-size: 17px;
}
.trainer p {
    float: right;
}
/*MEET THE TRAINERS STYLE ENDS*/

/*REACH OUT STYLE BEGINS*/
.contact {
    /*(Obsolete with flexbox)
    text-align: center;*/
    background: var(--secondary-color);
}
.contact-info {/*flexbox update*/
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.contact-info>* { /*flexbox update starts*/
    /*(Info)
    the * selector is saying "select all elements that are direct children of anything with a class of contact-info." 
    The > symbol means it's looking specifically for direct children of the element listed first. 
    Remember, however, that CSS reads right to left. This means that if the first selector it reads is *, 
    it will try and find every element on the page first, then look at the .contact-info, and then filter out the elements that aren't a direct child of it. 
    This wouldn't be a good approach in a big website, but it won't affect performance for a site this size.*/
    flex: 1;
    margin: 15px;
} /*flexbox update ends*/
.contact h2 {
    color: var(--primary-color);
}
.contact-info iframe { 
    /*(Obsolete with flexbox) 
    width: 400px;*/
    height: 400px;
}
.contact-info div {
    /*(Obsolete with flexbox)
    width: 410px;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    margin: 30px 0 0 60px;*/
    color: white;
}
.contact-info h3 {
    color: var(--primary-color);
    font-size: 32px;
}
.contact-info p, .contact-info address { /*flexbox update (font-size changed from 20px to 16px)*/
    margin: 20px 0;
    line-height: 1.5;
    font-size: 16px;
    font-style: normal;
}
.contact-info a {
    color: var(--primary-color);
}
/*flexbox update starts*/
.contact-form input, .contact-form textarea { 
    background-color: rgba(225, 225, 225, 0.75);
    border: 1px solid var(--secondary-color);
    border-radius: 15px;
    display: block;
    padding: 7px 15px;
    font-size: 16px;
    color: var(--secondary-color);
    width: 100%;
    margin-bottom: 15px;
    margin-top: 5px;
}
.contact-form input:focus, .contact-form textarea:focus {
    background-color: rgba(225, 225, 225, 1);
    outline: none;
} 
.contact-form button {
    width: 100%;
    border: none;
    border-radius: 15px;
    background: var(--primary-color);
    color: var(--secondary-color);
    text-align: center;
    padding: 15px;
    font-size: 16px;
}
.contact-form button:hover {
    color: var(--primary-color);
    background: var(--tertiary-color);
}
/*REACH OUT STYLE ENDS*/

footer {
    background: var(--primary-color);
    padding: 40px 35px;
    /*flexbox update begins*/
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    /*flexbox update ends*/
    width: 100%;
}

footer h2 {
    /*(Obsolete with flexbox)
    display: inline;*/
    color: var(--secondary-color);
    font-size: 30px;
    margin: 0;
}

footer div {
    /*(Obsolete with flexbox)
    float: right;*/
    line-height: 1.5;
    text-align: right;
}

footer a {
    color: var(--secondary-color);
}


.primary-border {
   border-color: var(--primary-color);    
}
.secondary-border {
    border-color: var(--tertiary-color);
}
section {
    padding: 60px;
}

.red {
    color: red;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
/*flexbox update begins*/
.flex-row {
    display: flex;
}
/*flexbox update ends*/

/*--MEDIA QUERY FOR SMALLER DESKTOP SCREENS AND SMALLER--*/

@media screen and (max-width: 980px) {/* this will be applied on any screen smaller than 980px */
    header {        
        padding-bottom: 0;
        justify-content: center;
        position: relative;
    }
    header h1 {
        width: 100%;
        text-align: center;
    }
    header nav ul {
        margin-top: 20px;
        width: 100%;
        justify-content: center;
    }
    header nav ul li a {
        font-size: 20px;
    }
    .hero-cta, .hero-form {
        width: 100%;
    }
    .hero-cta {
        text-align: center;
    }
    .section-title {
        width: 80%;
    }
    .trainer {
        flex: 0 70%;
    }
    .contact-info iframe {
        flex: 1 100%;
    }
    footer h2, footer div {
        text-align: center;
        width: 100%;
    }
}

/*--MEDIA QUERY FOR TABLETS AND SMALLER--*/

@media screen and (max-width: 768px) {/*--this will be applied on any screen between 768px and 575px--*/
    section {
        padding: 30px 15px;        
    }
    .step h3 {
        flex: 1 100%;
        text-align: center;
    }
    .step-info {
        flex: 2 100%;
        text-align: center;
        justify-content: center;
    }
    .step-img {
        flex: 0 32%;
        margin-right: 0;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .step-text {
        flex: 100%;
    }
}

/*--MEDIA QUERY FOR MOBILE PHONES AND SMALLER--*/

@media screen and (max-width: 575px) {/*--this will be applied on any screen smaller than 575px--*/
    .hero-form button {
        width: 100%;
    }
    .section-title {
        width: 95%;
    }    
    .intro p {
        width: 100%;
    }
    .trainer {
        flex: 0 100%;
    }
    .contact-info {
        text-align: center;
    }
    .contact-info>* {
        flex: 0 100%;
    }
    .contact-form {
        order: 3;
    }
}