body {
    font-family: 'Roboto', sans-serif;
}

section {
  margin: 100px 20px;
  width: 800px;
  margin: 0 auto;
}

section.withBackground {
  background: #EEF1F1;
  box-sizing: border-box;
  width: 100%;
  min-height: 520px;
  padding: 20px;
  border: 1px solid #fff;
  margin-top: -20px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Horizontally center the content */
  align-items: center; /* Vertically center the content */
}

section.withBackground > p {
  max-width: 800px;
  margin: 0 auto;
  line-height: 130%;
}

section.withBackground h2 {
  padding: initial;
}

section h1 {
    font-weight: 600; /* semi-bold */
    font-size: 33px;
    padding-bottom: 30px;
    text-align: center;
    color: #111;
}

section h2 {
    font-weight: 600; /* semi-bold */
    font-size: 36px;
    padding-top: 25px ;
    text-align: center;
}
section.about p,
section.benefit p {
    font-weight: 300; /* thin */
    font-size: 23px;
    line-height: 30px;
    text-align: center;
    color: #111;
}

section.benefit ul {
  margin-top: 80px;
}

section.benefit li {

  font-size: 23px;
  line-height: 130%;
  margin-bottom: 100px;
  font-weight: 300;
  list-style: none;
  text-align: center;
}

section.benefit li > strong {
  display: block;
  font-size: 26px;
  font-weight: 500;
  height:30px;
  margin-top: 20px;
  margin-bottom: 10px;
  color: #10A3B1;
}

section.about {
width: 90%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  margin-top: 60px;
}

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

  section.withBackground {
    margin-top: 0;
  }

  section {
    margin: 100px 30px;
    width: 85%;
    margin: 0 auto;
  }

  section h1 {
      font-weight: 600;
      font-size: 30px;
  }

  section h2 {
    font-size: 26px;
  }

  section.about p,
  section.benefit p {
    font-size: 20px;
    line-height: 150%;
    padding: 10px 10px;
  }

  section.about {
    margin-top: 40px; /* Adjusted margin-top for mobile devices */
    padding: initial;
  }

  section.benefit ul {
    padding: 20px 0;
    
  }
  section.benefit li {

    font-size: 20px;
    line-height: 150%;
    height:auto;
  }
  section.benefit li > strong {

    font-size: 26px;
    line-height: 35px;
    height:auto;
  }
}

section.footer {
  height: auto;
  width: auto;
  padding: 60px;
  box-sizing: border-box;
  background-color: #040B10;
  color: #EEF1F1;
  font-size: 14px;
  text-align: center;
}

section.footer a {
  text-decoration: none;
  font-weight: bold;
  color: #EEF1F1;
}

@keyframes shift {
0% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

@keyframes double-pulse {
0% { transform: scale(1); }
25% { transform: scale(1.1); }
50% { transform: scale(1); }
75% { transform: scale(1.1); }
100% { transform: scale(1); }
}
@keyframes shift {
from {
background-position: 100% 0;
}
to {
background-position: 0% 0;
}
}

@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
transform: translateX(10px);
}
}

.shake-animation {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}

.Typography {
animation-name: fadeIn, fadeOut;
animation-duration: 300ms;
animation-fill-mode: both;
}

.icon {
    font-size: 48px;
    color: darkgray;
    display: block;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    margin-bottom: 60px;
}