/********************************* CTS Style Specific *********************************/

:root {
    --cts-navy-color: #000048;
    --cts-teal-color: #1E728C;
    --cts-cyan-color: #36C0CF;
    --cts-blue-color: #3C66CE;
    --heading-color: #2f78c4;
    --link-color: #2f78c4;
    --link-hover-color: #000048;
    --white: #FFFFFF;
    --primary: #000048;
    --accent1-dark: #2E308E;
    --accent2-dark: #2F78C4;
    --accent3-dark: #06C7CC;
    --accent1-medium: #7373D8;
    --accent2-medium: #6AA2DC;
    --accent3-medium: #26EFE9;
    --accent1-light: #85A0F9;
    --accent2-light: #92BBE6;
    --accent3-light: #97F5F7;
    --grey-very-dark: #53565A;
    --grey-dark: #97999B;
    --grey-medium: #D0D0CE;
    --grey-light: #E8E8E6;
    --grey-very-light: #F7F7F5;
    --red: #B81F2D;
    --yellow: #E9C71D;
    --green: #2DB81F;
    --blue-very-light: #E6EFF6;
    --red-light: #F1D2D5;
    --font-family: "Gellix-Regular";
    --font-family-regular: "Gellix-Regular";
    --font-family-regularItalic: "Gellix-RegularItalic";
    --font-family-light: "Gellix-Light";
    --font-family-lightItalic: "Gellix-LightItalic";
    --font-family-semiBold: "Gellix-SemiBold";
    --font-family-semiBoldItalic: "Gellix-SemiBoldItalic";
    --container-background:#F0F8FF;
    --btnGrp-background: #7373D8;
    --btnGrp-txt: #000048;

    --sidebar-height: 100.0vh;
    --top-nav-height:   10.0vh;
    --main-div-height: 90.0vh;
}


/*************************** FONTS ****************************/
@font-face {
    font-display: swap;
    font-family: Gellix;
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/cognizant-dot-com/clientlibs/clientlib-font-global/Gellix-Light.woff2) format("woff2"),
         url(../fonts/cognizant-dot-com/clientlibs/clientlib-font-global/Gellix-Light.woff) format("woff"),
         url(../fonts/cognizant-dot-com/clientlibs/clientlib-font-global/Gellix-Light.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Gellix;
    font-style: italic;
    font-weight: 300;
    src: url(../fonts/cognizant-dot-com/clientlibs/clientlib-font-global/Gellix-LightItalic.woff2) format("woff2"),
         url(../fonts/cognizant-dot-com/clientlibs/clientlib-font-global/Gellix-LightItalic.woff) format("woff"),
         url(../fonts/cognizant-dot-com/clientlibs/clientlib-font-global/Gellix-LightItalic.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Gellix;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/cognizant-dot-com/clientlibs/clientlib-font-global/Gellix-Regular.woff2) format("woff2"),
         url(../fonts/cognizant-dot-com/clientlibs/clientlib-font-global/Gellix-Regular.woff) format("woff"),
         url(../fonts/cognizant-dot-com/clientlibs/clientlib-font-global/Gellix-Regular.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Gellix;
    font-style: italic;
    font-weight: 400;
    src: url(../fonts/cognizant-dot-com/clientlibs/clientlib-font-global/Gellix-RegularItalic.woff2) format("woff2"),
         url(../fonts/cognizant-dot-com/clientlibs/clientlib-font-global/Gellix-RegularItalic.woff) format("woff"),
         url(../fonts/cognizant-dot-com/clientlibs/clientlib-font-global/Gellix-RegularItalic.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Gellix;
    font-style: normal;
    font-weight: 600;
    src: url(../fonts/cognizant-dot-com/clientlibs/clientlib-font-global/Gellix-SemiBold.woff2) format("woff2"),
         url(../fonts/cognizant-dot-com/clientlibs/clientlib-font-global/Gellix-SemiBold.woff) format("woff"),
         url(../fonts/cognizant-dot-com/clientlibs/clientlib-font-global/Gellix-SemiBold.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Gellix;
    font-style: italic;
    font-weight: 600;
    src: url(../fonts/cognizant-dot-com/clientlibs/clientlib-font-global/Gellix-SemiBoldItalic.woff2) format("woff2"),
         url(../fonts/cognizant-dot-com/clientlibs/clientlib-font-global/Gellix-SemiBoldItalic.woff) format("woff"),
         url(../fonts/cognizant-dot-com/clientlibs/clientlib-font-global/Gellix-SemiBoldItalic.ttf) format("truetype")
}

body, body * {
    font-family: Gellix,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji
}
body {
    background-color: var(--container-background);
}

/**************************** COLOR & BACKGROUND ****************************/
.text-navy { color: var(--cts-navy-color) !important; }
.text-teal { color: var(--cts-teal-color) !important; }
.text-cyan { color: var(--cts-cyan-color) !important; }
.text-blue { color: var(--cts-blue-color) !important; }
.text-white { color: var(--white) !important; }
.text-primary { color: var(--primary) !important; }
.text-accent1-dark { color: var(--accent1-dark) !important; }
.text-accent2-dark { color: var(--accent2-dark) !important; }
.text-accent3-dark { color: var(--accent3-dark) !important; }
.text-accent1-medium { color: var(--accent1-medium) !important; }
.text-accent2-medium { color: var(--accent2-medium) !important; }
.text-accent3-medium { color: var(--accent3-medium) !important; }
.text-accent1-light { color: var(--accent1-light) !important; }
.text-accent2-light { color: var(--accent2-light) !important; }
.text-accent3-light { color: var(--accent3-light) !important; }
.text-grey-very-dark { color: var(--grey-very-dark) !important; }
.text-grey-dark { color: var(--grey-dark) !important; }
.text-grey-medium { color: var(--grey-medium) !important; }
.text-grey-light { color: var(--grey-light) !important; }
.text-grey-very-light { color: var(--grey-very-light) !important; }
.text-red { color: var(--red) !important; }
.text-yellow { color: var(--yellow) !important; }
.text-green { color: var(--green) !important; }
.text-blue-very-light { color: var(--blue-very-light) !important; }
.text-red-light { color: var(--red-light) !important; }
.text-yellow-light { color: var(--yellow-light) !important; }
.text-green-light { color: var(--green-light) !important; }

.bg-cts-navy { background-color: var(--cts-navy-color) !important; }
.bg-cts-teal { background-color: var(--cts-teal-color) !important; }
.bg-cts-cyan { background-color: var(--cts-cyan-color) !important; }
.bg-cts-blue { background-color: var(--cts-blue-color) !important; }
.bg-white { background-color: var(--white) !important; }
.bg-primary { background-color: var(--primary) !important; }
.bg-accent1-dark { background-color: var(--accent1-dark) !important; }
.bg-accent2-dark { background-color: var(--accent2-dark) !important; }
.bg-accent3-dark { background-color: var(--accent3-dark) !important; }
.bg-accent1-medium { background-color: var(--accent1-medium) !important; }
.bg-accent2-medium { background-color: var(--accent2-medium) !important; }
.bg-accent3-medium { background-color: var(--accent3-medium) !important; }
.bg-accent1-light { background-color: var(--accent1-light) !important; }
.bg-accent2-light { background-color: var(--accent2-light) !important; }
.bg-accent3-light { background-color: var(--accent3-light) !important; }
.bg-grey-very-dark { background-color: var(--grey-very-dark) !important; }
.bg-grey-dark { background-color: var(--grey-dark) !important; }
.bg-grey-medium { background-color: var(--grey-medium) !important; }
.bg-grey-light { background-color: var(--grey-light) !important; }
.bg-grey-very-light { background-color: var(--grey-very-light) !important; }
.bg-red { background-color: var(--red) !important; }
.bg-yellow { background-color: var(--yellow) !important; }
.bg-green { background-color: var(--green) !important; }
.bg-blue-very-light { background-color: var(--blue-very-light) !important; }
.bg-red-light { background-color: var(--red-light) !important; }
.bg-yellow-light { background-color: var(--yellow-light) !important; }
.bg-green-light { background-color: var(--green-light) !important; }




/**************************** CUSTOM ****************************/

#wrapper-dark {
    /* make the background to fit width, no repeat */
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../images/hp-banner-cog-platforms-desktop.webp);
    
}

.heroSection1CBackground {
    width: 100%;
    /* max-width: 1440px; */
    height: 248px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: linear-gradient(89deg, #5E93EF 11.51%, #C7EDB8 65.48%, #EEE2A0 85.52%, #EFE34A 98.91%);
    border-top: 1px solid #6aa2dc;
}


.containerBackground {
    left: 0;
    right: 0;
    top: 248px;
    background-color: var(--container-background) !important;
}

.group-header {
    color: var(--cts-navy-color);
    font-size: calc(1.275rem + .3vw);
    font-weight: 600;
}

.group-header:hover {
    font-size: calc(1.4rem + .3vw);
    font-weight: 800;
    transition: font-size 0.3s ease;
}


.fancy-tile {
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
    padding: 16px;
    margin-bottom: 24px;
}
.fancy-tile-header{
    height: 10vh;
    overflow-y: hidden;
    scroll-behavior: smooth;
}
.fancy-tile-header:hover {
    overflow-y: auto;
}
.fancy-tile-body {
    font-size: 90%;
    margin-top: 0.5rem;
    height: 15vh;
    overflow-y: hidden;
    scroll-behavior: smooth;
}
.fancy-tile-body:hover {
    overflow-y: auto;
}