body {
     background-image: url(Product\ image.png);
     background-position-x: 100%;
     background-position-y: 0px;
     background-repeat: no-repeat;
 }

 .homepage {
     width: 850px;
     margin-left: auto;
     margin-right: 660px;
     display: block;
 }

 header {
     display: flex;
     flex-wrap: nowrap;
     flex-direction: row;
     align-items: center;
     width: 847px;
     height: 45px;
     margin-top: 30px;
 }

 #menu-icon {
     display: none;
 }


 .logo {
     background-image: url(logo.png);
     width: 162.194px;
     height: 45px;
     margin-right: 120px;
 }

 .menubar>ul {
     display: flex;
 }


 .menubar li {
     margin-left: 16px;
     list-style: none;
 }

 #home {
     color: #F16214;
 }

 .menubar a {
     color: #000;
     font-family: Product Sans;
     font-size: 16px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     text-decoration: none;
 }

 #register {
     margin-left: 30px;
     border-radius: 120px;
     border: 1.5px solid #F16214;
     background: #F16214;
     text-align: center;
     padding: 5px 20px 5px 20px;
     position: static;
 }

 #register>span {
     color: #FFF;
     font-family: Product Sans;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 #title {
     margin-top: 141px;
     width: 488px;
     height: 273px;
     color: #000;
     font-family: Product Sans;
     font-size: 75px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
 }

 .subtext {
     max-width: 570px;
     margin-top: 15px;
     margin-bottom: 30px;
     color: #888;
     font-family: Product Sans;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 150%;
 }

 .getStarted {
     text-decoration: none;
 }

 .getStarted>div {
     width: 165px;
     height: 50px;
     border-radius: 54px;
     border: 1.5px solid #F16214;
     background: #F16214;
     display: flex;
     flex-direction: row;
     justify-content: end;
     align-items: center;
     padding-right: 5px;

 }

 .getStarted p {
     color: #FFF;
     font-family: Product Sans;
     font-size: 16px;
     font-style: normal;
     font-weight: 700;
     line-height: 150%;

     margin-right: 25px;
 }

 #icons {
     margin-top: 40px;
     width: 229px;
     height: 40px;
 }

 #feature {
     margin-top: 110px;
     width: 1170px;
     height: 217px;
     display: flex;
     border-radius: 60px 0px;
     background: #FFF;
     box-shadow: 0px 22px 52px 0px rgba(0, 0, 0, 0.07);
     align-items: center;
 }

 .element,
 #last {
     border-right: none;
 }

 .element {

     width: 400px;
     height: 97px;
     border-right-style: groove;
     border-right-color: #DDDDDD;
     border-right-width: 1.5px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;

 }

 .element>svg {
     width: 40px;
     height: 40px;
 }

 .element>p {
     margin: 0px;
     margin-top: 6px;
     color: #888;
     font-family: Product Sans;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 .element>.main {
     color: #000;
     font-family: Product Sans;
     font-size: 16px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
 }

 @media (max-width: 1534px) {
     body {
         background: #FFF;
     }

     #feature {
         width: 850px;
     }

     .homepage {
         margin-left: auto;
         margin-right: auto;
     }

     .content {
         margin-bottom: auto;
         margin-right: auto;
     }

     .logo {
         margin-right: 100px;
     }
 }

 @media (max-width: 865px) {
     .homepage {
         width: 100%;
     }

     .content {
         width: 100%;
     }

     #title {
         margin-top: 40px;
         width: 100%;
         height: auto;
     }

     #subtext {
         width: 100%;
         height: auto;

     }


     header {
         width: 100%;
     }

     #menu-icon {
         width: 45px;
         height: 45px;
         display: block;
         margin-left: auto;
     }

     .menubar>ul {
         display: none;
     }

     #register {
         display: none;
     }

     #feature {
         flex-direction: column;
         width: 400px;
         height: 470px;
         margin-left: auto;
         margin-right: auto;
     }

     .element {
         width: 95%;
         height: 33%;
         border-top-style: groove;
         border-top-color: #DDDDDD;
         border-top-width: 1.5px;
         border-right: none;
     }

     #first.element {
         border-top: none;
     }


     .logo {
         display: block;
     }

     .show>ul {
         display: flex;
         flex-direction: column;
         position: absolute;
         top: 60px;
         right: 0px;
     }

     .show li {
         border-top-style: groove;
         border-top-color: #DDDDDD;
         border-top-width: 1.5px;
         border-right: none;
         padding: 3px;
         background-color: #f7f7f7;
         border-radius: 10px 0px;
         box-shadow: 0px 22px 52px 0px rgba(0, 0, 0, 0.07);

     }

     .show a {
         font-size: 20px;
         margin-left: 8px;
     }

     .show #register {
         display: block;
         margin-left: 0px;
         border-radius: 0px;
         border: 0px;
         background: 0px;
         padding: 0px;
         text-align: start;
     }

     .show #register>span {
         color: #000;
         font-family: Product Sans;
         font-size: 16px;
         font-style: normal;
         font-weight: 700;
         line-height: normal;
         text-decoration: none;
         font-size: 20px;
         margin-left: 8px;
     }

 }

 @media (max-width:420px) {
     #feature {
         width: 95%;
     }
 }

 .howToWork {
     width: 570px;
     margin-left: 938px;
     margin-right: auto;
     margin-top: 158px;
 }

 .howToWork>img {
     position: absolute;
     left: 0px;
     top: 1070px
 }

 .howToWork h1 {
     color: #000;
     font-family: Product Sans;
     font-size: 40px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     width: 527px;
 }

 .howToWork #sector-name {

     color: #F16214;
     font-family: Product Sans;
     font-size: 14px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
 }

 @media (max-width: 1534px) {
     .howToWork>img {
         display: none;
     }

     .howToWork {
         display: flex;
         width: 100%;
         justify-content: center;
         margin-top: 153px;
         margin-left: 0px;
         margin-right: 0px;
     }

     .howToWork>div {
         width: 850px;
     }

 }

 @media (max-width: 865px) {
     .howToWork>div {
         width: auto;
     }
 }

 @media (max-width: 572px) {
     .howToWork {
         width: auto;
     }

     .howToWork h1 {
         width: auto;
     }
 }

 #services {
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-top: 147px;
 }

 #services>p {
     color: #F16214;
     font-family: Product Sans;
     font-size: 14px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     margin-bottom: 0px;
 }

 #services>h1 {
     color: #000;
     font-family: Product Sans;
     font-size: 40px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     margin-top: 0px;
     margin-bottom: 59px;
 }

 #services>div {
     display: flex;
     flex-direction: row;
 }

 .service-element>p {
     color: #888;
     text-align: center;
     font-family: Product Sans;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 160%;
     width: 330px;
 }

 .service-element>h2 {
     color: #000;
     font-family: Product Sans;
     font-size: 26px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
 }

 .service-element {
     border-radius: 60px 0px;
     border: 2px solid #EEE;
     width: 370px;
     height: 395px;
     margin-left: 30px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;

 }

 .shadow {
     box-shadow: 5px 15px 45px 0px rgba(0, 0, 0, 0.10);
 }

 @media(max-width: 1250px) {
     #services>div {
         flex-direction: column;
     }

     .service-element {
         width: 430px;
         margin-top: 30px;
         margin-left: 0px;
     }

     #services>h1 {
         margin-bottom: 0px;
     }
 }

 @media(max-width: 450px) {
     .service-element {
         width: 370px;
     }

 }

 #product {
     margin-top: 130px;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 #product>p {
     color: #F16214;
     font-family: Product Sans;
     font-size: 14px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     margin-bottom: 0px;
 }

 #product>h1 {
     margin-top: 0px;
     margin-bottom: 59px;
     color: #000;
     font-family: Product Sans;
     font-size: 40px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
 }

 #product>div {
     width: 1170px;
     display: flex;
     flex-wrap: wrap;
     margin-bottom: 50px;
 }

 .product-element {
     margin-left: 20px;
     border-radius: 50px 0px;
     background: #FFF;

     background-repeat: no-repeat;
     box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.07);
     width: 370px;
     height: 419px;
 }

 .product-element#elem1 {
     background-image: url(image\ 4.png);

 }

 .product-element#elem2 {
     background-image: url(image\ 2.png);

 }

 .product-element#elem3 {
     background-image: url(image\ 1.png);

 }

 .product-element#elem4 {
     background-image: url(image\ 5.png);

 }

 .product-element#elem5 {
     background-image: url(image\ 8.png);

 }

 .product-element#elem6 {
     background-image: url(image\ 9.png);

 }

 .product-element>div {
     position: relative;
     top: 274px;
     left: 10px;
 }

 .product-element h3 {
     color: #000;
     font-family: Product Sans;
     font-size: 20px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     margin-bottom: 0px;
 }

 .rate {
     display: flex;
     justify-content: end;
     align-items: center;
     flex-wrap: nowrap;
     margin-right: 25px;
 }

 .rate p {
     color: #000;
     font-family: Product Sans;
     font-size: 13px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     margin-top: 0px;
     margin-bottom: 0px;
 }

 .product-element>div>div {
     display: flex;
     align-items: center;
 }

 .product-element>div>div>a {
     border-radius: 50px;
     background: #F16214;
     color: #FFF;
     font-family: Product Sans;
     font-size: 11px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     padding: 12px;
     text-decoration: none;
 }

 .price {
     margin-left: auto;
     margin-right: 32px;
     color: #000;
     font-family: Product Sans;
     font-size: 20px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;

 }

 #product .getStarted div {
     width: 200px;
 }

 @media(max-width: 1250px) {
     #product {
         width: 100%;
     }

     #product>div {
         justify-content: center;
         width: 100%;
     }
 }

 @media (max-width:450px) {
     .product-element {
         margin-left: 0px;
     }

 }

 #download-app {
     width: 1169px;
     height: 400px;
     border-radius: 60px 0px;
     background-image: url(background.png);
     margin-left: auto;
     margin-right: auto;
     display: flex;
     align-items: center;
     margin-top: 210px;
 }

 #download-app h2 {
     width: 321px;
     color: #FFF;
     font-family: Product Sans;
     font-size: 40px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     margin-left: 30px;
     display: block;
     margin-top: 0px;
 }

 #download {
     display: flex;
 }

 #download>a {
     text-decoration: none;
 }

 #download>a>div {
     border-radius: 13px;
     width: 200px;
     height: 80px;
     background-color: #EEE;
     margin-left: 20px;
     align-items: center;
     justify-content: center;
     display: flex;
 }

 #download>a>div>svg {
     margin-right: 18px;
 }

 #download p {
     color: #000;
     font-family: Product Sans;
     font-size: 20px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     margin: 0px;
 }

 #download p.upper {
     color: #000;
     font-family: Product Sans;
     font-size: 11px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 #pict1 {
     border-radius: 50px;
     width: 330px;
     height: 650px;
     background: url(Mine\ Page.png);
 }

 #pict2 {
     border-radius: 50px;
     position: relative;
     top: 30px;
     width: 342px;
     height: 650px;
     background: url(Food\ Details.png);
 }

 #download-app .pictures {
     display: flex;
 }

 @media(max-width: 1210px) {
     #download-app {
         width: 90%;
     }

     #pict2 {
         display: none;
     }
 }

 @media(max-width: 950px) {
     #download-app .pictures {
         display: none;
     }

     #download-app {
         width: 100%;
         margin-top: 100px;
     }
 }

 @media(max-width:500px) {
     #download-app>div {
         width: 100%;
     }

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

     #download>a {
         margin-top: 20px;
         margin-left: auto;
         margin-right: auto;
     }

     #download-app h2 {
         width: 95%;
         margin-left: 10px;
     }
 }

 .subscribe-box {
     margin-top: 400px;
     display: flex;
     background-image: url(background.png);
     width: 1170px;
     height: 300px;
     border-radius: 60px 0px;
     margin-left: auto;
     margin-right: auto;
     justify-content: end;

 }

 .subscribe-box>div {
     margin-right: 50px;
 }

 .subscribe-box h2 {
     color: #FFF;
     font-family: Product Sans;
     font-size: 40px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     margin-top: 70px;
     margin-bottom: 0px;

 }

 .subscribe-box p {
     color: #888;
     font-family: Product Sans;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 150%;
     width: 500px;
     /* 24px */
 }

 .subscribe-box form {
     border-radius: 13px;
     background: #FFF;
     width: 500px;
     height: 50px;
     display: flex;
     align-items: center;
 }

 .subscribe-box input[type=submit] {
     border: none;
     width: 100px;
     height: 40px;
     border-radius: 13px;
     background: #F16214;
     color: #FFF;
     font-family: Product Sans;
     font-size: 16px;
     font-style: normal;
     font-weight: 700;
     line-height: 150%;
     margin-left: 10px;
     margin-right: 10px;
     /* 24px */
 }

 .subscribe-box input[type=text] {
     width: 370px;
     margin-left: 10px;
     border: none;
     height: 30px;
     font-size: 16px;
 }

 .subscribe-box input[type=text]::placeholder {
     color: #CCC;
     font-family: Product Sans;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 150%;
     /* 19.5px */
 }

 input:focus {
     outline: none;
 }

 .subscribe-box img {
     position: relative;
     width: 460px;
     height: 460px;
     bottom: 95px;
     right: 106px;
 }

 @media(max-width: 1210px) {
     .subscribe-box img {
         display: none;
     }

     .subscribe-box {
         justify-content: center;
         margin-top: 280px;
         width: 90%;
     }
 }

 @media(max-width: 950px) {
     .subscribe-box {
         width: 100%;
         margin-top: 100px;
     }
 }

 @media(max-width:610px) {

     .subscribe-box {
         height: auto;
     }

     .subscribe-box>div {
         margin-right: 0px;
         margin-left: 15px;
     }

     .subscribe-box p {
         width: 95%;
     }

     .subscribe-box h2 {
         margin-top: 30px;
     }

     .subscribe-box form {
         width: 95%;
         margin-bottom: 30px;
     }

     .subscribe-box input[type=text] {
         width: 90%;
     }
 }

 footer {
     margin-top: 100px;
     background: #F5F5F5;
     padding-top: 130px;
 }

 footer>div {
     width: 1200px;
     margin-left: auto;
     margin-right: auto;
 }

 footer>div>div {
     display: flex;
     justify-content: center;
 }

 footer>div>div>div {
     display: flex;
     justify-content: center;

 }

 footer>div>div p {
     color: #888;
     font-family: Product Sans;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 150%;
     width: 270px;
     /* 24px */
 }

 footer>div>div h3 {
     color: #000;
     font-family: Product Sans;
     font-size: 22px;
     font-style: normal;
     font-weight: 700;
     line-height: 150%;
     margin-bottom: 36px;
     margin-top: 0px;
     /* 33px */
 }

 #col1 p {
     width: 250px;
 }

 #col2 {
     margin-right: 50px;
 }

 #col2 p {
     line-height: 200%;
     width: 216px;
 }

 #col3 {
     margin-right: 160px;
 }

 #col3 ul {
     list-style: none;
     padding-left: 0px;
 }

 #col3 a {
     text-decoration: none;
     color: #888;
     font-family: Product Sans;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 200%;
     /* 32px */
 }

 #col3 a:hover {
     text-decoration: underline;
 }

 #col4 p {
     line-height: 200%;
     width: 156px;
 }

 #underline {
     width: 1170px;
     height: 1.5px;
     background: #DDD;
 }

 footer>div>p {
     color: #888;
     font-family: Product Sans;
     font-size: 15px;
     font-style: normal;
     font-weight: 400;
     line-height: 170%;
     /* 25.5px */
     text-align: center;
 }

 @media(max-width: 1240px) {
     footer {
         padding-top: 15px;
     }

     footer>div {
         width: 90%;
     }


     #underline {
         width: 100%;
     }
 }

 @media(max-width: 1090px) {
     #col3 {
         margin-right: auto;
     }

     footer>div>div {
         flex-wrap: wrap;
     }

     footer>div>div>div {
         width: 90%;
     }

     #col2 {
         margin-right: 0px;
         margin-left: 50px;
     }

     #col1 {
         margin-right: auto;
         margin-bottom: 20px;
     }

     #col4 {
         margin-right: 60px;
         margin-left: 194px;
     }

 }

 @media(max-width:680px) {
     footer>div>div>div {
         flex-wrap: wrap;
     }

     #col1 {
         margin-right: 0px;
         margin-left: 90px;
     }

     #col3 {
         margin-right: 45px;
     }

     #col4 {
         margin-right: 200px;
     }

 }

 @media(max-width:430px) {
     #col4 {
         margin-right: auto;
         margin-left: 10px;
     }

     #col3 {
         margin-right: auto;
         margin-left: 10px;
     }

     #col2 {
         margin-right: auto;
         margin-left: 10px;
     }

     #col1 {
         margin-right: auto;
         margin-left: 10px;
     }

     footer>div>div>div {
         flex-direction: column;
     }
 }