/* freeCodeCamp Web Responsive Certification.
- Project Name: Product Landing Page
- GitHub Repository link: 
https://github.com/w3zeblamf/product-landing-page.git
https://w3zeblamf.github.io/product-landing-page/
***************************************** */

/* Set the font size (Google fonts) */

@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600;700;800&family=Roboto:wght@100;300;400;500;700;900&display=swap');

/* --Reset and Common Styles-- */

/* The asterisk (*) is known as the CSS universal selectors. It can be used to select any and all types of elements in an HTML page. The asterisk can also be followed by a selector while using to select a child object. This selector is useful when we want to select all the elements on the page. */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
    outline: none;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
}

/*Color Variables*/

:root {
    --primary-color: #1E2D40;
    --secondary-color: #00FFC3;
    --light-gray-color: #E7E7E7;
}

/* REM: Relative to font-size of the root element: Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property's initial value. This means that 1rem equals the font size of the html element (which for most browsers has a default value of 16px
 
 We are going to use 'rem' as the measurement unit. By default 1 ram = 16 pixels, because the font size of the HTML element  is equal to 16 pixels.
 
 To convert one ram into then pixels, we have to decrease the font size of the HTML element. We need to make it sixty two point five percent. So, in this case, one rem (1rem) will be equal to ten pixels (10px). */


html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    color: var(--primary-color);
    letter-spacing: .1rem;
    font-weight: 300;
    text-align: center;
}

/* background-image */

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    background-image: url(https://w3zeblamf.github.io/product-landing-page/images/white-background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

i {
    color: var(--primary-color);
}

.sombra {
    text-shadow: 5px 5px 10px #777;
}

.heading {
    margin: 5rem auto 3rem auto;
    padding: 1rem;
    width: 60rem;
    text-align: center;
    font-size: 3.6rem;
    font-weight: 300;
}


/* Scroll up Button */

.scroll-up-btn i {
    width: 3rem;
    height: 3rem;
    font-size: 2rem;
    position: fixed;
    bottom: 1rem;
    right: 2rem;
    border-radius: 10%;
    color: var(--light-gray-color);
    background-color: rgb(30, 45, 64, .4);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.5s;
    text-shadow: .5rem .5rem 1rem #777;
}

.scroll-up-btn i:hover {
    color: var(--light-gray-color);
    background-color: var(--primary-color);
    transition: background-color 0.5s;
}

/* End of Scroll up Button */

/* -- End of Reset and Common Styles-- */


/* Header Style */

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

#header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: var(--primary-color);
    padding: 1.6rem 10%;
    align-items: center;
}

#header-img {
    width: 80%;
    max-width: 350px;
}

#nav-bar ul {
    display: flex;
    flex-flow: row wrap;
}

.nav-link {
    color: var(--secondary-color);
    margin-left: 1rem;
    font-size: 1.6rem;
    letter-spacing: .2rem;
    padding: 1rem .5rem;
    font-weight: 600;
    transition: .3s;
}

.nav-link:hover {
    color: var(--light-gray-color);
    transition: .3s;
}

/* End of Header Style*/


/* Main Content Style */

.container {
    margin: 18rem auto 0 auto;
    max-width: 152rem;
}

/* Intro Section Style */

.intro {
    display: flex;
    flex-direction: column;
}

.main-title {
    text-align: center;
    font-family: 'Dosis', cursive;
    font-size: 5.1rem;
    font-style: italic;
    letter-spacing: .2rem;
    font-weight: 500;
    margin-top: 8rem;
    margin-bottom: 8rem;

}

.courses-btn {
    margin: 3rem auto;
    padding: 1.5rem .5rem;
    width: 28rem;
    text-align: center;
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: .3rem;
    color: var(--secondary-color);
    background-color: var(--primary-color);
    border: 2px solid #1E2D40;
    transition: .3seg;
    box-shadow: 1rem 1rem 1rem #999;
}

.courses-btn:hover {
    color: var(--primary-color);
    background-color: var(--secondary-color);
    transition: .3s;
}

/* End of Intro Section Style */


/* About Section Style */

#about {
    padding-top: 6rem;
}

.about-text {
    max-width: 1024px;
    font-size: 2.1rem;
    line-height: 3.5rem;
    margin: 0 auto;
}

/* End of About Section Style */


/** Courses Section Style **/

#courses {
    text-align: center;
    padding-top: 4rem;
}

/* Courses Icons */

.icons {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;

}

.icon-div {
    margin: 5rem 3rem;
    width: 28rem;
}

.fa-courses {
    font-size: 9.6rem;
}

.icon-heading {
    margin-bottom: .5rem;
    font-weight: 500;
    font-size: 2.4rem;
    color: var(--light-gray-color);
    letter-spacing: .3rem;
    background-color: var(--primary-color);
    padding: .5rem 0;
    margin-top: 2rem;
    box-shadow: 1rem 1rem 1rem #999;
}

.icon-text {
    font-size: 1.9rem;
    margin-top: 2rem
}

/* End of Courses Section Style */


/*Video Section Style*/

#video {
    margin-top: 8rem;
    padding: .3rem;
    width: 100%;
    height: 100%;
    max-width: 56rem;
    min-height: 31.5rem;
    border: .2rem solid #999;
    box-shadow: 1.5rem 1.5rem 1.5rem #999;

}

/* End of Video Section Style*/


/* Pricing section Style*/
#pricing {
    text-align: center;
}

.pricing-div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.pricing-plan {
    display: flex;
    flex-direction: column;
    margin: 1rem 1rem;
    padding: 0;
    width: 30rem;
    text-align: center;
    transition: .3s;
}

.pricing-plan li:not(.get):not(.pricing-title) {
    padding: 2rem 0;
    border-left: .2rem solid #1E2D40;
    border-right: .2rem solid #1E2D40;
    border-bottom: .2rem solid #1E2D40;
}

.pricing-plan {
    color: var(--primary-color);
    font-size: 1.8rem;
    font-weight: 400;
}

.pricing-title {
    padding: 2rem 0;
    font-size: 2.7rem;
    font-weight: 600;
    color: var(--secondary-color);
    background-color: var(--primary-color);
}

.price {
    padding: 2rem 0;
    font-size: 2.7rem;
    color: var(--light-gray-color);
    background-color: var(--primary-color);
}

.money {
    font-weight: bolder;
    font-size: 5.4rem
}

.signup {
    padding: 2rem;
    background-color: var(--primary-color);
    transition: .3s;
    border: .2rem solid #00FFC3;
    border-top: none;
    cursor: pointer;
}

.signup:hover {
    background-color: rgb(30, 45, 64, .8);
    transition: .3s;
}

.signup-btn {
    font-size: 1.3em;
    font-weight: 400;
    color: var(--light-gray-color);
    text-decoration: none;
    letter-spacing: .1em;
}

/* End of Pricing Section Style*/


/* Contact Section Style*/

#contact {
    padding-top: 6rem;
    text-align: center;
}

.contact-text {
    text-align: center;
    font-size: 2.1rem;
    line-height: 3.5rem;
}

#form {
    text-align: center;
}

#email {
    padding: 1rem;
    width: 28rem;
    letter-spacing: .1rem;
    border: .2rem solid #1E2D40;
    transition: .3s;
    box-shadow: 1rem 1rem 1rem #999;
    background-color: var(--light-gray-color);
}

#email:focus {
    outline: none;
    border: .2rem solid #00FFC3;
    transition: .3s;
}


#submit {
    margin: 1rem 1rem 1rem 1.2rem;
    padding: 1rem;
    width: 15rem;
    font-weight: 600;
    color: var(--secondary-color);
    letter-spacing: .2rem;
    border: .2rem solid #1E2D40;
    background-color: var(--primary-color);
    box-shadow: 1rem 1rem 1rem #999;
}

#submit:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    cursor: pointer;
    transition: .3s;
}

/* End of Contact Section Style */

/* End of Main Content Style */

/* Footer Style */
footer {
    margin-top: 5rem;
    height: 6rem;
    text-align: center;
    color: var(--light-gray-color);
    background-color: var(--primary-color)
}

.copyright {
    padding-top: 2rem;
    font-size: 2.1rem;

}

/* End of Footer Style */

/** Media Queries **/

/* Media Queries for Tablet layout */

@media only screen and (max-width: 1200px) {
    /* Header Section */

    #header {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }


    /* Nav Bar Section */
    #nav-ar ul {
        padding-left: 0;
        width: 29rem;
    }

    /* Main Container */
    .container {
        margin-top: 15rem;
    }

    .main-title {
        font-size: 4rem;
        line-height: 1.3;
    }

    /* About Section */

    .heading {
        font-size: 2.72rem;
        margin-bottom: .5rem;
    }

    .about-text {
        font-size: 1.76rem;
        margin-bottom: 4rem;
        padding: 0 2rem;
    }

    /* Video Section */

    #video {
        margin-top: 3rem;
    }

    /* Courses Icons */

    .icon-div {
        margin-top: 1rem;
    }

    /* Pricing Section */

    .pricing-div {
        margin-top: 1rem;
    }

    .pricing-plan {
        margin-bottom: 3rem;
    }

    /* Contact Section */
    .contact-text {
        margin-top: 0;
    }

}

/* End of Media Queries for Tablet layout */

/*Media Queries for Mobile layout*/

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

    /* Main Content */
    .main-title {
        font-size: 3.2rem;
        margin: 0 2rem;
    }

    /* About */
    .heading {
        font-size: 2.4rem;
    }

    .about-text {
        font-size: 1.6rem;
        margin-bottom: 4rem;
    }

    /* Contact */
    .contact-text {
        padding: 0 2rem;
        font-size: 1.92rem;
    }

    #email {
        width: 50%;
    }
}

/* End of Media Queries for Mobile layout */

/* Media Queries */