* {
    box-sizing: border-box;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    background-color: #c1cad9;
}
#wrapper {
    width: 100%;
    margin: auto;
    background-color: #ffffff;
}
header {
    background-color: #ffffff;
    color: #496b81;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}
header img {
    width: 80px;
    height: auto;
}
nav {
    display: flex;
    justify-content: space-around;
    background-color: #8f64d9;
}
nav a {
    color: white;
    text-decoration: none;
    padding: 14px;
}
nav a:hover {
    background-color: #9bd964;
}
main {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
}
main img{
    width: 100%;
    max-width: 1000px;
    height: auto;
} 
.top {
    background-color: #2a095c;
    color: white;
    padding: 20px;
    text-align: center;
}
.top img{
    width: 100%;
    max-width: 1000px;
    height: auto;
}
.row {
    display: flex;
    gap: 10px;
}
.col1 {
    flex: 1;
    background-color: #f1f4f7;
    border: 10px solid #9bd964;
    padding: 15px;
}
.col2 {
    flex: 1;
    background-color: #f1f4f7;
    border: 10px solid #d9a364;
    padding: 15px;
}
.col2 h2 {
    color: #6864d9;
}
.subsections {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}
.sub-card {
    display: flex;
    flex: 50%;
    background-color: #ffffff;
    padding: 10px;
}
.sub-card img {
    width: 140px;
    height: 140px;
}
.sub-content {
    flex: 1;
    padding: 15px;
}
.sub-card h3 {
    color: #6864d9;
}
.button {
    display: block;
    width: fit-content;
    background-color: #6864d9;
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}
.button:hover {
    background-color: #8f64d9;
}
.pricing {
    background-color: #f1f4f7;
    border: 8px solid #8f64d9;
    padding: 20px;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}
th
td {
    border: 2px solid #6864d9;
    padding: 15px;
    text-align: center;
}
th {
    background-color: #6864d9;
    color: white;
}
tr:nth-child(even) {
    background-color: #e9ecf2;
}
.pricing-note {
    margin-top: 15px;
}
.Who {
    flex: 1;
    background-color: #f1f4f7;
    border: 10px solid #9bd964;
    padding: 15px;
}
.Values {
    flex: 1;
    background-color: #f1f4f7;
    border: 10px solid #d9a364;
    padding: 15px;
}
.Approach {
    display: flex;
    flex: 2;
    background-color: #f1f4f7;
    border: 10px solid #8f64d9;
    padding: 15px; 
}
.Approach img {
    float: right;
    width: 400px;
    height: 400px;
}
.research {
    background-color: #f1f4f7;
    border-top: 8px solid #6864d9;
    padding: 20px;
    margin-top: 15px;
}
.research {
    background-color: #f1f4f7;
    border: 8px solid #6864d9;
    padding: 20px;
    margin-top: 15px;
}
.research img {
    display: block;
    width: 1000px;
    max-width: 1000px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
.research h3 {
    text-align: center;
}
.col2 a {
    display: block;
    margin-bottom: 8px;
}
.two-column-list {
    columns: 2;
    column-gap: 40px;
}
.confirmation {
    background-color: #2a095c;
    color: white;
    padding: 20px;
    text-align: center;
}
.confirmation img {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
    margin: 20px auto;
}
footer {
    background-color: #8f64d9;
    color: white;
    padding: 20px;
}
.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}
.footer {
    flex: 1;
    min-width: 200px;
}
.footer h3 {
    margin-bottom: 10px;
}
.footer a {
    color: white;
    text-decoration: none;
}
.footer a:hover {
    text-decoration: underline;
}
.footer-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
@media (max-width: 900px) {

    nav {
        flex-wrap: wrap;
    }
    .row {
        flex-direction: column;
    }
    .subsections {
        flex-direction: column;
    }
    .approach-content {
        flex-direction: column;
        align-items: center;
    }
    .approach-content img {
        width: 80%;
        max-width: 400px;
    }
    .research img {
        width: 100%;
    }
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
    .footer-links {
        justify-content: center;
    }
}
@media (max-width: 510px) {

    nav {
        flex-direction: column;
        align-items: center;
    }
    nav a {
        width: 100%;
        text-align: center;
    }
    .row {
        flex-direction: column;
    }
    .subsections {
        flex-direction: column;
    }
    .sub-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .sub-card img {
        width: 100px;
        height: auto;
    }
    .approach-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .approach-content img {
        width: 100%;
        max-width: 300px;
    }
    .research img {
        width: 100%;
    }
    .two-column-list {
        columns: 1;
    }
    iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
    .footer-links {
        justify-content: center;
    }
}