body {
    font-family: 'Segoe UI', Arial, sans-serif;
    outline: none;
    background-color: var(--cWhite);
}

a {
    text-decoration: none;
}

/**/
/**/
/**/

.TopTableLinks {
    padding-bottom: 8px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 8px;
    vertical-align: top;
    white-space: nowrap;
    width: 100%;
}



    .TopTableLinks td a:link, .TopTableLinks td a:visited, .TopTableLinks td a:active {
        color: #1e2d58;
        border-color: #1e2d58;
        border-radius: 4px;
        border-style: solid;
        border-width: 1px;
        display: inline-block;
        font-size: 8pt;
        font-weight: bold;
        text-align: center;
        padding-bottom: 4px;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 4px;
        min-width: 55px;
    }

    .TopTableLinks td a:hover {
        border-color: red;
        color: red;
    }

/**/
/**/
.containervIntro {
    display: grid;
    /* 1 items per row on mobile */
    grid-template-columns: 1fr;
    padding: 8px;
    background-color: darkblue;
    border-radius: 8px;
}

@media (min-width: 768px) {
    .containervIntro {
        grid-template-columns: 33% 67%;
    }
}

.Intro td {
    color: white;
    display: inline-block;
    font-size: 18pt;
    font-weight: bold;
    outline: none;
    padding-bottom: 0px;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 0px;
    text-align: center;
}

.headerS {
    font-weight: bold;
    text-align: center;
}
/**/
.hCard {
    border: 1px solid #CCCCCC;
    border-radius: 8px;
    padding: 8px;
    vertical-align: middle;
    white-space: nowrap;
    text-align: center;
    width: 100%;
    background-color: burlywood;
}

.image-container {
    display: inline-block;
    position: relative;
    text-align: center;
}


    .image-container img {
        display: block;
        width: 100%;
        height: auto;
        text-align: center;
    }

.overlay-text {
    /* Optional: semi-transparent background */
    background-color: rgb(216, 13, 13, 0.70);
    border-radius: 8px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    left: 50%;
    padding: 8px 16px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.containerxCard {
    display: grid;
    /* 1 items per row on mobile */
    grid-template-columns: 1fr;
    gap: 16px;
}

    /* mobile width 300*/
    .containerxCard img {
        width: 300px;
    }

@media (min-width: 768px) {
    .containerxCard {
        /* 2 items per row on desktop */
        grid-template-columns: repeat(2, 1fr);
    }
        /*dektop width 500*/
        .containerxCard img {
            width: 560px;
        }
}


.xCard {
    border: 1px solid #CCCCCC;
    border-radius: 8px;
    padding: 8px 8px 8px 8px;
    vertical-align: top;
    white-space: nowrap;
    text-align: center;
    text-wrap: auto;
    width: auto;
}

    .xCard.C1 {
        background: linear-gradient(90deg, #eefcfc 60%, white);
    }

    .xCard.C2 {
        background: linear-gradient(90deg, #f6edfe 60%, white);
    }

    .xCard.C3 {
        background: linear-gradient(90deg, #edf1ff 60%, white);
    }

    .xCard.C4 {
        background: linear-gradient(90deg, #fff5f5 60%, white);
    }

    .xCard.C5 {
        background: linear-gradient(90deg, #e3ffe5 60%, white);
    }

.xCardLabel1 {
    font-weight: bold;
    color: #7b7b7b;
    font-size: 13pt;
}

.xCardLabel2 {
    font-weight: bold;
    color: darkgoldenrod;
    font-size: 20pt;
}

.xCardLabel3 {
    font-weight: bold;
    color: darkslateblue;
    font-size: 13pt;
    text-wrap: wrap;
}

.xCardLabel4 {
    font-weight: bold;
    color: darkgoldenrod;
    font-size: 18pt;
}

.xCardLabelx {
    color: #1e2d58;
    font-size: 16pt;
    font-weight: bold;
}


.mCard {
    border: 1px solid #CCCCCC;
    border-radius: 8px;
    padding: 8px 4px 0px 8px;
    vertical-align: top;
    white-space: nowrap;
    text-align: center;
    text-wrap: auto;
    width: 100%;
    white-space: wrap;
}
/* for modules */
.containervCard {
    display: grid;
    /* 1 items per row on mobile */
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .containervCard {
        /* 2 items per row on destop */
        grid-template-columns: repeat(2, 1fr);
    }
}

.vCard {
    border: 1px solid #CCCCCC;
    border-radius: 8px;
    padding: 8px 8px 8px 8px;
    white-space: nowrap;
    text-align: left;
    text-wrap: auto;
    width: 100%;
    white-space: wrap;
}

    .vCard td {
        vertical-align: top;
        white-space: wrap;
    }




    .vCard.C1 {
        background: linear-gradient(90deg, #eefcfc 60%, white);
    }

    .vCard.C2 {
        background: linear-gradient(90deg, #f6edfe 60%, white);
    }

    .vCard.C3 {
        background: linear-gradient(90deg, #edf1ff 60%, white);
    }

    .vCard.C4 {
        background: linear-gradient(90deg, #fff5f5 60%, white);
    }

    .vCard.C5 {
        background: linear-gradient(90deg, #e3ffe5 60%, white);
    }


.vCardLabel1 {
    font-weight: bold;
    color: #7b7b7b;
    font-size: 16pt;
}

.vCardLabel2 {
    font-weight: bold;
    color: darkslateblue;
    font-size: 20pt;
}

.vCardLabel3 {
    font-weight: normal;
    color: darkslateblue;
    font-size: 9pt;
}

.vCardLabel4 {
    font-weight: bold;
    color: darkgoldenrod;
    font-size: 18pt;
}

.vCardLabelx {
    color: #1e2d58;
    font-size: 16pt;
    font-weight: bold;
}



.Bottom {
    font-size: 8pt;
}

    .Bottom a:link, a:visited, a:active {
    }

    .Bottom a:hover {
    }

    .Bottom td {
        border-top: 2px solid #d5d5d5;
        border-bottom: 2px solid #d5d5d5;
        font-size: 13pt;
    }