style.scss

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 150px;

    div{
        display: flex;
        align-items: center;
        height: 100%;
        width: 50%;
        h1{
            color: black;
            font-weight: 900;
            font-size: 1.5em;
            padding-left: 50px;
            font-family: sans-serif;
        }
        a {
            text-decoration: none;
            color: #59637a;
            font-size: 1.1em;
            font-weight: 600;
            font-family: sans-serif;
        };
        &#logo
        {
            background-color: white;
        }
        &#links
        {
            background-color: #c4d8e4;
            display: flex;
            justify-content: space-evenly;
        }
    }
    
}
section
{
    display: flex;
    &#slider
    {
        background-color: #c4d8e4;
        div
        { 
                width: 50%;
                &#left-img
                {
                    background-color: #e4eaf2;
                    img
                    {
                        position: relative;
                        margin-left: 30%;
                    }
                   
                }
                &#text-slider
                {
                    background-color: #c4d8e4;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    h1
                    {
                        font-size: 3em;
                        margin-bottom: 10px;
                        color: #59637a;
                    }
                    p{
                        font-size:1.4em;
                        color: #59637a;
                    }
                    input{
                        padding: 20px 60px 20px 60px;
                        background-color: #ff8465;
                        color: white;
                        border: 0;
                    }
                    p,h1,input
                    {
                        z-index: 99;
                        margin-right: 50%;
                    }
                }
        }
    } 
    &#benefits
    {
        background-color: #c4d8e4;
        #benefits-left
        {
            width: 50%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            div
            {
                margin-left: 10%;
            }
        }
        #benefits-rigth
        {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    &#energizing
    {
        background-color: #c4d8e4;
        height: 500px;
        #energizing-text
        {
            background-color: #496096;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            padding: 50px;
            h1
            {
                font-size: 3em;
                color: white;
                margin-bottom: 10px;
                font-weight: 900;
                font-family: sans-serif;
            }
            P
            {
                width: 32%;
                color: #b8e4ff;
                font-size: 1.2em;
                text-align: justify;
                font-family: sans-serif;
            }
            input
            {
                padding: 20px 60px 20px 60px;
                margin-top: 20px;
                background-color: #ff8464;
                color: whitesmoke;
                border: 0;
                
            }
        }
        #free
        {
            width: 20%;
        }
    }
    &#sleep
    {
        background-color: #c4d8e4;
        div
        {
            img{
                z-index: 99;
                position: relative;
            }
        }
        
    }
    &#carry
    {
        background-color: #0692a5;
        height: 500px;
        #free2
        {
            width: 20%;
            background-color: #c4d8e4;
            position: relative;
            z-index: 999;
            margin-top: -5px;
        }
        #carry-text
        {
            background-color: #0692a5;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            padding: 50px;
            position: absolute;
            margin-top: -180px;
            z-index: -0;
            padding-top: 200px;
            h1
            {
                font-size: 3em;
                color: white;
                margin-bottom: 10px;
                font-weight: 900;
                font-family: sans-serif;
            }
            P
            {
                width: 32%;
                color: #b8e4ff;
                font-size: 1.2em;
                text-align: justify;
                font-family: sans-serif;
            }
            input
            {
                padding: 20px 60px 20px 60px;
                margin-top: 20px;
                background-color: #ff8464;
                color: whitesmoke;
                border: 0;
                
            }
        }
    }
    &#walk
     {
        background-color: #0692a5;
        div{
            &#walk-left
            {
                background-color: #c4d8e4;
                width: 25%;
            }
            &#walk-rigth
            {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                :first-child
                {
                    POSITION: relative;
                    TOP: 0;
                    MARGIN-RIGHT: 100PX;
                    MARGIN-LEFT: -600PX;
                    Z-INDEX: 999;
                }
            }
        }
     }
    
}