:root {
    --fs-xxs: 8px;
    --fs-xs: 10px;
    --fs-s: 12px;
    --fs-m: 14px;
    --fs-l: 16px;
    --fs-xl: 18px;
    --fs-xxl: 20px;
    --fs-xxxl: 24px;
    --fs-xxxxl: 24px;
    --tc-primary: #007bff;
    --tc-secondary: #6c757d;
    --tc-danger: #dc3545;
    --tc-info: #17a2b8;
    --tc-success: #28a745;
    --tc-warning: #ffc107;
    --tc-light: #f8f9fa;
    --tc-dark: #000;
    --tc-muted: #6c757d;
    --tc-white: #fff;
    --bgc-primary: #007bff;
    --bgc-secondary: #6c757d;
    --bgc-success: #28a745;
    --bgc-danger: #dc3545;
    --bgc-warning: #ffc107;
    --bgc-info: #17a2b8;
    --bgc-light: #f8f9fa;
    --bgc-dark: #343a40;
    --bgc-white: #fff;
    --pdg-xs: 2px;
    --pdg-s: 5px;
    --pdg-m: 10px;
    --pdg-l: 15px;
    --pdg-xl: 20px;
    --pdg-xxl: 25px;
    --pdg-no: 0px;
    --cpt-bgc0: #fff;
    --cpt-bgc1: #8ecae6;
    --cpt-bgc2: #219ebc;
    --cpt-bgc3: #203047;
    --cpt-bgc4: #ffb703;
    --cpt-bgc5: #fb8500;
    --cpt-bgc6: #000000;
    --cpt-tc0: #000;
    --cpt-tc1: #203047;
    --cpt-tc2: #fff;
    --cpt-tc3: #fff;
    --cpt-tc4: #000;
    --cpt-tc5: #fff;
    --cpt-tc6: #fff;
    --cpt-bdc0: #f7eeee;
    --cpt-bdc1: #a0d4ec;
    --cpt-bdc2: #41b3cf;
    --cpt-bdc3: #324663;
    --cpt-bdc4: #ffd877;
    --cpt-bdc5: #fca23d;
    --cpt-bdc6: #212121;
    --cpt-bgc3-hover: #219ebc;
    --cpt-tc3-hover: #ffffff;
    --cpt-bdc3-hover: #41b3cf;
}

body {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.sectionHeader {
    background: var(--bgc-white);
    padding: 5px 0px;
    border-top: 1px solid #ccc;
    box-shadow: 1px 2px 3px #e1e1e1;
}

    .sectionHeader h1 {
        font-size: var(--fs-xxxxl);
        color: var(--tc-dark);
        margin: 5px 0px 5px 0px;
    }

    .sectionHeader h2 {
        font-size: var(--fs-l);
        color: var(--tc-muted);
        margin: 5px 0px 5px 0px;
    }

.sectiontopbar {
    background: var(--cpt-bgc1);
}

    .sectiontopbar ul {
        padding: 0px;
        margin: 0px;
    }

        .sectiontopbar ul li {
            padding: 5px 15px;
        }

            .sectiontopbar ul li a {
                text-decoration: none;
                color: var(--cpt-tc1);
                font-size: var(--fs-s);
            }

.sectioncontent {
    margin: 30px 0px;
}

.sectionfooter {
    background: var(--cpt-bgc1);
}

    .sectionfooter p {
        font-size: var(--cpt-tc1);
        padding: 5px;
        margin: 0px;
    }

.topnavbarsection {
    background: var(--cpt-bgc3);
}

    .topnavbarsection ul.topnav li {
        border-right: 1px solid var(--cpt-bdc3);
    }

        .topnavbarsection ul.topnav li:last-child {
            border-right: none;
        }

        .topnavbarsection ul.topnav li a.nav-link {
            color: var(--cpt-tc2) !important;
            font-size: var(--fs-s);
        }

            .topnavbarsection ul.topnav li a.nav-link.active,
            .topnavbarsection ul.topnav li a.nav-link:hover,
            .topnavbarsection ul.topnav li a.nav-link:focus,
            .topnavbarsection ul.topnav li a.nav-link:focus-visible,
            .topnavbarsection ul.topnav li a.nav-link:focus-within,
            .topnavbarsection ul.topnav li a.nav-link:target {
                background: var( --cpt-bgc3-hover) !important;
                color: var(--cpt-tc3-hover) !important;
            }

.mycard {
    border: 1px solid var(--cpt-bdc5);
}

.cardheader {
    background-color: var(--cpt-bgc5);
    color: var(--cpt-tc5);
    border: 1px solid var(--cpt-bdc5);
}

.cardbody {
    border: 1px solid var(--cpt-bdc5);
}



.aboutHeading {
    padding: 65px 50px;
    background: var(--cpt-bgc3);
}

    .aboutHeading h2 {
        color: var(--cpt-tc3);
    }

.aboutintro {
    background: var(--cpt-bgc2);
    padding: 59px 40px;
}

    .aboutintro p {
        font-size: var(--fs-xl);
        font-weight: 600;
        color: var(--cpt-tc3);
    }

.btn-theme {
    background: var(--cpt-bdc3);
    color: var(--tc-white);
}

    .btn-theme:hover {
        background: var(--cpt-bdc5);
        color: var(--tc-white);
    }

.sidenav {
    background: var(--cpt-bdc2);
}

    .sidenav h5 {
        color: var(--cpt-tc3);
        font-size: var(--fs-l);
    }

    .sidenav ul li a {
        color: var(--cpt-tc3);
        font-size: var(--fs-s);
    }

        .sidenav ul li a.active,
        .sidenav ul li a:hover,
        .sidenav ul li a:focus,
        .sidenav ul li a:focus-visible,
        .sidenav ul li a:focus-within,
        .sidenav ul li a:target {
            background: var( --cpt-bgc3-hover) !important;
            color: var(--cpt-tc3-hover) !important;
        }