body {
    background: #f3f3f3;
    display: grid;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

p {
    font-size: 11px;
    margin: 0;
}

h1 {
    font-size: 20px;
}

h2 {
    font-size: 16px;
}

.header {
    margin: 10px;
}

.header>h1 {
    font-size: 32px;
    text-align: center;
}

.footer {
    margin: 10px;
}

.footer>p {
    font-size: 9px;
    text-align: center;
}

.maincontainer {
    display: grid;
    /* grid-template-columns: auto auto auto auto auto;*/
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas:
        'channels channels channels channels channels'
        'aiandiot aiandiot aiandiot aiandiot aiandiot'
        'industries industries industries industries industries'
        'marketing sales commerce service engagement'
        'analytics analytics appsecosystem support platform'
        'integration integration integration integration integration';
    gap: 10px;
    padding: 5px;
    margin: 20px;
}

.subcontainer {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5px;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px 0px;
    display: inline;
    align-items: center;
    /* Aligns text and image vertically */
    gap: 10px;
    /* Adds spacing between text and image */
}

.subcontainer>h1 {
    text-align: left;
    margin-top: 5px;
    margin-left: 5px;
}

.subcontainer>img {
    height: 30px;
    /* Adjust image size */
}

.subcontainer>h1,
img {
    display: inline-block;
    vertical-align: middle;
}

.fullwidth {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas: auto auto auto auto auto auto;
}

.mainitem {
    background-color: rgb(203, 182, 219);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 2px;
    margin: 2px;
    text-align: center;
    border-radius: 3px;
}

.item {
    background-color: rgba(255, 255, 255);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 2px;
    margin: 2px;
    text-align: center;
    border-radius: 3px;
}

.disabled {
    text-decoration: line-through;
    background-color: rgba(21, 21, 21, 0.5) !important;
    border: 1px solid rgba(21, 21, 21, 0.5) !important;
}

.red {
    background-color: red !important;
}

.amber {
    background-color: orange !important;
}

.green {
    background-color: green !important;
}

.items>div>p {
    text-transform: capitalize;
}

.channels {
    grid-area: channels;
    background-color: pink;
}

.aiandiot {
    grid-area: aiandiot;
    background-color: rgba(117, 170, 206, 0.80);
}

.industries {
    grid-area: industries;
    background-color: rgba(188, 127, 253, 0.931);
}

.marketing {
    grid-area: marketing;
    background-color: rgba(230, 128, 61, 0.8);
}

.sales {
    grid-area: sales;
    background-color: rgba(146, 231, 120, 0.8);
}

.commerce {
    grid-area: commerce;
    background-color: #8a69eccc;
}

.service {
    grid-area: service;
    background-color: rgb(216, 105, 151, 0.8);
}

.engagement {
    grid-area: engagement;
    background-color: rgb(247, 247, 179, 0.8);
}

.analytics {
    grid-area: analytics;
    background-color: rgb(14, 175, 175, 0.8);
}

.appsecosystem {
    grid-area: appsecosystem;
    background-color: rgb(110, 24, 24, 0.8);
}

.support {
    grid-area: support;
    background-color: rgb(173, 7, 173, 0.8);
}

.platform {
    grid-area: platform;
    background-color: rgb(83, 154, 196, 0.8);
}

.integration {
    grid-area: integration;
    background-color: white;
}