style.css

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


 /*-----------------------------------------------------------------------------*\
 
                                 HEADER SECTION
 
 \*-----------------------------------------------------------------------------*/
 
 .menu {
     width: 100%;
     height: 80px;
     background-color: #ee8572;
     line-height: 80px;  /* to center the text in the nav */
     /*position: fixed;*/
     justify-content: space-around;
     position: absolute;
 }
 
 .logo {
     width: 100%;
     height: 50px;
     background-color: #d9455f;
     line-height: 50px;
 }
 
 .logo-title {
     margin: 0 auto;
     padding: 0;
     color: #d4f3ef;
     text-transform: uppercase;
     text-align: center;
    /* background-color: rgb(36, 32, 28);  */
     font-family: 'Roboto', sans-serif;
     font-weight: 900;
     font-size: 35px;
     letter-spacing: 1.5px;
     height: 60px;
     
 }
 
 #logo-new-position {
     display: none;
     text-transform: uppercase;
     text-align: left;
     font-family: 'Roboto', sans-serif;
     font-weight: 700;
     font-size: 30px;
     letter-spacing: 1.5;
 
 }
 
 .nav-link {
     text-decoration: none;
     color:#d4f3ef;
     text-transform: uppercase;
     font-weight: 700;
     padding: 0;
     margin: 0 15px;
     transition: all 0.3s ease-in-out;
     border-top: 1px solid transparent;
     border-bottom: 1px solid transparent;
 }
 
 .nav-link:hover {
     border-top: 1px solid;
     border-bottom: 1px solid;
     color: #9a1f40;
 }
 
 .nav-link .fa {
     margin-right: 5px;
 }
 
 .nav-btn {
     float: right;
     color: #d4f3ef;
     height: 80px;
     line-height: 80px;
     margin: 0 15px;
     cursor: pointer; /*  mouse cursor to be displayed when pointing over an element.  */
     display: none;
 }
 
 
 
 
 /*-----------------------------------------------------------------------------*\
 
                                 MAIN SECTION
 
 \*-----------------------------------------------------------------------------*/
 
 
 html, body {
     margin: 0;
     padding: 0;
     font-family: 'Lato', sans-serif;
     box-sizing: border-box;
     color: rgb(88, 83, 83);
     background-color: #ffffff;
 }
 img {
     border-radius: 5%;
 }
 .inner {
     margin: auto;
     width: 95%;
 }
 
 section {
     padding: 15px;
 }
 
 
 /* First section MOBILE   */
 .mobile {
     width: 95%;
     height: 400px;
     background-color: #ffffff;
     margin: 0 auto;
     margin-top: 60px;
 }
 .mobile > h2 {
     text-align: left;
     font-family: 'Roboto', sans-serif;
     font-weight: 400;
     font-size: 35px;
     
 }
 #mobile-photo {
     height: 400px;
     width: auto;
     float: right;
     margin-top: -80px;
 }
 
 /*  Second section PERSONAL-BUSINESS   */
 .personal-business {
     width: 95%;
     height: 400px;
     margin: 0 auto;
 }
 
 .p-b-left{
     float: left;
     width: 40%;
     height: 400px;
 }
 
 .p-b-right  {
     float: right;
     width: 40%;
     height: 400px;
 }
 .p-b-left img {
     height: 400px;
     width: auto;
 }
 
 .personal-business h2 {
     font-family: 'Roboto', sans-serif;
     color: #1d1d1f;
     font-weight: 700;
     font-size: 35px;
     letter-spacing: 1.5px;
 }
  h2 > article {
     font-weight: 600;
     font-size: 30px;
     letter-spacing: 1.3px;
     color: #1d1d1f;
 }
 
 
 /*  Third section PERSONAL   */
 .personal {
     width: 95%;
     height: 350px;
     margin: 0  auto;
     /*display: flex;*/
 }
 .p-account-right {
     width: 45%;
     float: right;
 
 }
 .p-account-right img {
     width: 90%;
 }
 
 .p-account-left {
     width: 45%;
     text-align: justify;
     /*margin-right: 20px;
     padding-right: 20px;*/
     float: left;
 }
 
 
 /*  Fourth section BUSINESS   */
 .business {
     width: 95%;
     height: 350px;
     margin: 0  auto;
 }
 .business-right {
     width: 45%;
     float: right;
 }
 .business-left img {
     width: 45%;
     float: left;
 }
 
 /*  Fifth section MANAGE-MONEY   */
 .manage-money {
     width: 95%;
     height: 450px;
     margin: 0  auto;
     text-align: center;
 }
 
 
 
 hr {
     width: 40%;
     color: #342ead;
     border: 25px 0;
 }
 
 .fa-arrow-circle-up {
     float: right;
     margin-right: 50px;
     font-weight: 600;
 }
 
 
 /*-----------------------------------------------------------------------------*\
 
                                 FOOTER SECTION
 
 \*-----------------------------------------------------------------------------*/
 
 footer{
     width: 100%;
     height: 220px;
     background-color: #ee8572;
     font-family: Lato, sans-serif;
     font-weight: 400;
     color: black;
 }
 .footer-link{
     display: inline-block;
     margin: 15px;
     color: honeydew;
 }
 
 
 
 
 
 /*-----------------------------------------------------------------------------*\
 
                                 MEDIA QUERY SECTION
 
 \*-----------------------------------------------------------------------------*/
 
 
 /*  If the browser window is 952 px or smaller  */
 
   @media (max-width: 858px){ 
     .logo{
         display: none;
     }
     .logo-title{
         float: left;
     
     }
     .nav-btn{
         display: block;
     }
     .inner{
         float: none;
         position: fixed;
         width: 100%;
         height: 100vh;
         background-color: #2c3e50;
         top: 80px;
         left: 0;
         text-align: center;
     }
     .nav-link{
         display: block;
         margin: 0 auto;
     }
     .facebook:first-child {
         color: rgb(192, 192, 31);
       }
     /*
     #logo-new-position {
         display: -moz-inline-box;
     }*/
   }