@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=DM+Sans:wght@400;700&display=swap');

 * {
     box-sizing: border-box;
 }

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

 .marginset {
     margin: 0px 92px 0px 92px;
 }

 /* style the section*/
 section h1 {
     text-align: center;
 }

 section {
     margin-bottom: 120px;
     scroll-margin-top: 160px;
 }

 /* Clear floats after the columns */
 section::after {
     content: "";
     display: table;
     clear: both;
 }

 /* containerstyle*/
 .container {
     display: flex;
     background-color: rgb(255, 255, 255);
     flex-direction: row;
     justify-content: space-evenly;
 }

 .container div {
     flex: 1;
     background-color: #f1f1f1;
     margin: 12px;
     padding: 0px 32px 0px;
     font-size: 60px;
     width: 100%;
     text-align: left;
 }

 .container h2 {
     color: #101828;
     font-size: 60px;
     margin: 0px;
 }

 .container h3 {
     color: #101828;
     font-size: 32px;
     text-align: center;
     margin: 8px 0px 0px 0px;
 }

 .container p {
     color: #4a5565;
     font-size: 20px;
 }

 .container button {
     background-color: #4a43b6;
     color: white;
     border: none;
     padding: 12px 24px;
     font-size: 20px;
     border-radius: 4px;
     cursor: pointer;
     transition-duration: 0.3s;
 }

 .container h4 {
     color: #101828;
     font-size: 28px;
     margin-bottom: 12px;
 }

 .container ul {
     color: #4a5565;
     font-size: 20px;
 }

 .mulcontainer {
     display: flex;
     background-color: rgb(255, 255, 255);
     flex-direction: row;
     justify-content: space-evenly;
 }

 .mulcontainer div {
     flex: 1;
     background-color: #4a43b6;
     margin: 12px;
     padding: 0px 24px 0px;
     font-size: 60px;
     width: 100%;
     text-align: left;
     border-radius: 12px;
 }

 .bordercolor {
     border-color: #b8b5df;
     border-width: 2px;
     border-style: solid;
     border-radius: 12px;
 }

 .bordercolor ul li {
     padding-bottom: 12px;
 }

 .mulcontainer h2 {
     color: #ffffff;
     font-size: 60px;
     margin: 0px;
 }

 .mulcontainer p {
     color: #ffffff;
     font-size: 16px;
     font-weight: 10;
 }

 .mulcontainer h3 {
     color: #ffffff;
     font-size: 20px;
     margin-bottom: 12px;
 }


 .nexcontainer {
     display: flex;
     background-color: rgb(255, 255, 255);
     flex-direction: row;
     justify-content: space-evenly;
 }

 .nexcontainer div {
     flex: 1;
     background-color: #ffffff;
     margin: 12px;
     font-size: 60px;
     width: 100%;
     text-align: left;
     border-radius: 12px;
 }

 .nexcontainer h2 {
     color: #101828;
     font-size: 60px;
     margin: 0px;
 }

 .nexcontainer p {
     color: #4a5565;
     font-size: 16px;
     font-weight: 10;
     padding-bottom: 8px;
 }

 .nexcontainer h3 {
     color: #101828;
     font-size: 20px;
     margin-bottom: 12px;
 }


 .keyadvantages {
     color: #101828;
     font-size: 24px;
     text-align: center;
     font-weight: bold;
     padding: 20px 0px 0px;
 }

 .tablecontainer {
     display: flex;
     background-color: rgb(255, 255, 255);
     flex-direction: row;
     justify-content: space-evenly;
 }

 .tablecontainer div {
     flex: 1;
     background-color: #ffffff;
     margin: 12px;
     padding: 0px 24px 0px;
     font-size: 20px;
     width: 100%;
     border-radius: 12px;
 }

 .tablecontainer p {
     color: #4a5565;
     font-size: 16px;
     padding: 0px 0px 0px;
     text-align: center;
     margin: 4px;
 }


 .tablecontainer h6 {
     color: #4a43b6;
     font-size: 32px;
     font-weight: bold;
     padding: 0px;
     text-align: center;
     margin: 0px;
 }

 .tablecontainer ul li {
     padding-bottom: 12px;
     color: #4a5565;
     font-size: 20px;

 }

 .tablecontainer h3 {
     color: #101828;
     font-size: 20px;
     text-align: center;
 }

 /* tablestyle*/
 .tablecontainer table {
     background-color: #ffffff;
     border-collapse: separate;
     width: 100%;
     border: 1px solid #4a43b6;
     border-radius: 20px;
     padding: 0px 16px 0px;
 }

 .tablecontainer th {
     padding: 8px;
     color: rgb(0, 0, 0);
     text-align: left;
     border-bottom: 1px solid #4a43b6;
 }

 td {
     padding: 16px;
     text-align: left;
 }

 .tablepurple table {
     background-color: #4a43b6;
     border: 1px solid #9791e2;
     color: white;
 }

 .tablepurple th {
     color: rgb(255, 255, 255);
     border-bottom: 1px solid #9791e2;
 }

 /* navbarstyle */
 .navbar {
     position: sticky;
     top: 0;
     z-index: 1000;
     background-color: rgba(255, 255, 255, 0.87);
     width: 100%;
     min-height: 150px;
 }

 .navbar-content {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 12px;
     margin: 0 92px;
     max-width: 100%;
 }

 .navlinks {
     display: flex;
     list-style: none;
     margin: 0;
     padding: 0;
     align-items: center;
 }

 .navlinks li {
     margin-left: 40px;
 }

 .navlinks li a {
     text-decoration: none;
     color: #4a5565;
     padding: 12px 24px;
     font-size: 20px;
 }

 .navlinks li a:hover {
     background-color: #4a43b6;
     border-radius: 4px;
     color: white;
 }

 .navlinks .icon {
     display: none;
 }

 .logo {
     height: auto;
     max-width: 120px;
 }

 .picture {
     height: auto;
     width: 100%;
     border-radius: 12px;
     box-shadow: 5px 5px 8px #888888;

 }

 .contact {
     background-color: #4a43b6;
     text-align: center;
     color: white;
     padding: 24px;
     padding-bottom: 60px;
     margin-bottom: 0px;
 }

 .contact button {
     background-color: white;
     color: #4a43b6;
     border: none;
     padding: 12px 24px;
     font-size: 20px;
     border-radius: 4px;
     cursor: pointer;
     transition-duration: 0.3s;
 }

 button:hover {
     background-color: #857eed;
     border-radius: 4px;
     color: white;
 }

 /* Style the footer footerstyle */
 footer {
     background-color: #18243c;
     padding: 40px 92px;
     text-align: center;
     color: #888888;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .footer-columns {

     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: flex-start;
     width: 100%;
     margin-bottom: 30px;
 }

 footer div {
     flex: 1;
     flex-direction: row;

     font-size: 16px;
     width: auto;
     text-align: left;
 }

 .footer-title {
     color: white;
     font-weight: 700;
 }

 footer div:not(:last-child) {
     padding-right: 20px;
 }

 footer hr {
     border: 0;
     border-top: 1px solid #333;
     width: 100%;
     margin: 20px 0;
 }

 /* sectiontitlestyle */
 .section-title {
     color: #101828;
     text-align: center;
     font-size: 40px;
     margin-bottom: 12px;
     padding-top: 12px;
 }

 .section-par {
     text-align: center;
     font-size: 20px;
     color: #4a5565;

 }

 /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
 @media (max-width: 600px) {
     .container {
         flex-direction: column;
         align-items: center;
     }

     .container div {
         height: auto;
     }

     .mulcontainer {
         flex-direction: column;
         align-items: center;
     }

     .mulcontainer div {
         height: auto;
     }

     .nexcontainer {
         flex-direction: column;
         align-items: center;
     }

     .nexcontainer div {
         height: auto;
     }

     .tablecontainer {
         flex-direction: column;
     }

     .tablecontainer div {
         height: auto;
     }

 }


 @media screen and (max-width: 600px) {
     .navbar-content {
         margin: 0 12px;
     }

     .navlinks {
         flex-direction: column;
         position: absolute;
         right: 12px;
         top: 60px;
         background-color: white;
         padding: 12px;
         border-radius: 4px;
     }

     .navlinks li:not(:last-child) {
         display: none;
     }

     .navlinks .icon {
         display: block;
     }
 }

 @media screen and (max-width: 600px) {
     .navlinks.responsive {
         flex-direction: column;
         align-items: stretch;
         width: 200px;
         padding: 12px;
         top: 60px;
     }

     .navlinks.responsive li {
         display: block;
         width: 100%;
         margin: 0;
         margin-bottom: 8px;
     }

     .navlinks.responsive li a {
         display: block;
         text-align: left;
         width: 100%;
         padding: 12px 16px;
     }

     .navlinks.responsive li:last-child {
         margin-bottom: 0;
     }

     .navlinks.responsive li a:hover {
         background-color: #4a43b6;
         color: white;
     }
 }