body{
    font-family: 'DM Sans', sans-serif;
    height: 100vh;
    margin: 0;
    background: #FFF;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 3em;
    box-sizing: border-box;
}

.green {
    color: #217348; /* Green color same as Excel logo */
    font-weight: 600;
}

.grey {
    color: #808080; /* Grey color */
    font-weight: 400;
}

.content-wrapper {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content-wrapper img {
    max-width: 240px;
    margin-bottom: 10px;
}

.content-wrapper h2 {
    font-weight: 600;
    margin-top: 1em;
}

.content-wrapper p {
    margin-top: 1em;
    color: #333; /* Optional: change this to any color you prefer */
    max-width: 70%;  /*Limit width of the paragraph */
    text-align: start;
}

hr {
    border: 0;
    border-top: 1px solid #D3D3D3; /* Faint grey line (You can adjust color as desired) */
    width: 80%; /* You can adjust the width to your liking */
}

.info-section {
    display: flex;
    justify-content: space-between;
    width: 90%; /* Specify a max-width. Adjust as you need */
    padding: 1em;
    max-width: 1200px; /* This limits the width. Adjust as needed. */
}

.info-section section {
    flex: 1; /* Makes all columns equal width */
    padding: 20px; /* Adds some padding to each section */
    box-sizing: border-box; 
    text-align: center;
}

.info-section h3 {
    font-weight: 600;
}

@media (max-width: 600px) {
  .info-section {
    flex-direction: column;
    align-items: center;
  }

  .info-section section {
    width: 100%;
    max-width: 100%;
    margin-bottom: 2em; /* Create vertical space between the sections */
  }
}

.info-section ul {
    list-style-type: disc; /* You can choose 'circle', 'square', 'disc' */
    padding: 1em; /* Adjusts the list's indentation; you can adjust this as needed */
    text-align: left;
    list-style-position: inside;
}

.info-section li {
    margin-bottom: 0.5em; /* Adds a little space under each list item */
    padding-left: 10px; 
    position: relative;
}

/* These are green bullets instead of default black */
.info-section li::before {

    position: absolute; 
    left: 0;
    width: 5px; 
    height: 5px; 
    border-radius: 50%;
    background: #217348; /* Green color same as Excel logo */
    top: 50%;
    transform: translateY(-50%);
}

.info-section #works ul {
    list-style-type: none; /* this removes the default list bullets */
    padding: 1em;
}

.info-section #works li {
    margin-bottom: 0.5em; /* This adds a little space under each list item */
    padding-left: 10px;
    color: #217348; /* This changes the text color to Excel green, replace it with any color code as you prefer*/
    font-weight: 500; /* This makes the text a bit bolder, adjust as needed*/
    text-decoration: underline; /* This underlines the text. Feel free to remove it if you don't want the underline */
}

.info-section #works li a {
    color: #217348; /* This changes the text color to Excel green, replace it with any color code as you prefer*/
    font-weight: 600; /* This makes the text a bit bolder, adjust as needed*/
    text-decoration: underline; /* This underlines the text. Feel free to remove it if you don't want the underline */
}