.hero {
                     width: 100%;
                     padding: 60px 0px;
                     background-color: #EADDCA;
                     text-align: center;
               }
               
               h1 {
                     font-family: "Lato", sans-serif;
                     font-size: 72px;
               }
               
               h2 {
                    font-family: "Lato", sans-serif;
                    font-size: 42px;
               }
               
               p {
                    font-family: "Nata Sans", sans-serif;
                    font-size: 18px;
               }
               
               img {
                    width: 95%;
                    border-radius: 10px;
                    margin-bottom: 25px;
                    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
               }
               
               .wrapper {
                    width: 1280px;
                    margin: 0 auto;
               }
               
               .section {
                    width: 50%;
                    float: left;
               }

               @media only screen and (max-width:800px) {
                 /* For tablets: */
                 .hero, .wrapper, .section {
                   width: 100%;
                 }
               }
               @media only screen and (max-width:500px) {
                 /* For mobile phones: */
                 .hero, .wrapper, .section {
                   width: 100%;
                 }
               }