/* --- General --- */
:root {

--primary: #391E5F;
--secondary: #38A2DA;
--light: #F5F8F9;
--warning: #B75C00;
--danger: #C40A36;
--success: #02843A;

--onSurfaceVar1: #414141;
--altdark: #707070;
--primaryVar1: #4E3183;
--primaryVar2: #6368B5;
--secondaryVar1: #2176A2;
--secondaryVar2: #B8EBFF;
--white: #FFFFFF;

}

body {
font-family: "Open Sans", sans-serif;
}

h1 {
 font-size: 4.5em;    
 line-height: 6.125rem;
 font-weight: 300;
}

h2 {
    font-size: 2.625rem;
    line-height: 3.5625rem;
    font-weight: 400;
}

h3 {
    font-size: 2.125rem;
    line-height: 2.875rem;
    font-weight: 300;
}

h4 {
    font-size: 1.875rem;
    line-height: 2.5625rem;
    font-weight: 400;
}

h5 {
    font-size: 1.5rem;
    line-height: 2.0625rem;
    font-weight: 400;
}

h6 {
    font-size: 1.25rem;
    line-height: 1.6875rem;
    font-weight: 600;
    
}

p {
    margin-bottom:1.5rem;
}

small {
    font-size: 0.875rem;
    line-height: 1.1875rem;
    font-weight: 400;
    letter-spacing: .025rem;
}

.lead{
    font-size: 1.25rem;
    line-height: 1.6875rem;
    font-weight: 400;
    letter-spacing: .1rem;
}

.subtitle2 {
    font-size: 0.875rem;
    line-height: 1.1875rem;
    font-weight: 600;
    letter-spacing: .05rem;

}

.body2{ 
    font-size: 0.875rem;
    line-height: 1.1875rem;
    font-weight: 400;
}

.button {
    font-size: 0.9375rem;
    line-height: 1.25rem;
    font-weight: 600;
    letter-spacing: .1rem;
    text-transform: uppercase;
}

.inlineLink {
    font-weight: 600;
    letter-spacing: .02rem;
    color:#2176A2;
}

.overline {
    font-size: 0.725rem;
    line-height: 1rem;
    font-weight: 400;
    letter-spacing: .1rem;
    text-transform: uppercase;

}

/* --- Buttons --- */
.btn-outline-secondary {
    color:var(--dark);
    background-color: var(--bs-body-bg); 
    border: solid var(--secondary) .3rem;
    text-transform: uppercase;
}

.btn-outline-secondaryVar1 {
    color:var(--dark);
    background-color: var(--bs-body-bg); 
    border: solid var(--secondaryVar1) .3rem;
    text-transform: uppercase;
    font-weight: 600;
}
.btn-outline-tertiary {
    color:var(--secondaryVar1);
    background-color: var(--bs-body-bg); 
    border: solid var(--secondaryVar1) .15rem;
}

.btn-outline-tertiary:hover {
    color:var(--white);
    background-color: var(--secondaryVar1); 
    border: solid var(--secondaryVar1) .15rem;
}


/* a{
    color:#2176A2!important;
} */


.justify-content-center i.bi.bi-patch-check-fill.fs-1 {
font-size: 3rem!important;
}
.bi-patch-check-fill::before {
    color: var(--success);
}

.expiry p.text-left {
 font-size: 0.9rem;
}


/* --- Header ---*/
p.body2 {
    margin-top: 0;
    margin-bottom: 0;
}

/* --- Footer ---*/

footer p {
    font-size: .825rem;
}
svg.bi.bi-linkedin, svg.bi.bi-twitter, svg.bi.bi-facebook, svg.bi.bi-youtube  {
    color: var(--secondaryVar2);

}
.bg-altdark {
    background-color: var(--primary) !important;

}

/* --- Specific ---*/

article.container h6 {
    color: var(--onSurfaceVar1);
}

/* --- Card Render ---*/
.cardRender {
 border-radius: 1em!important;
}

/* --- Marketing strips --- */

.marketing {
    min-height: 480px;
    margin-top: 7rem;
}
.csProduct {
    background: url(../images/png/cs-bg-image.png) no-repeat top center transparent;
    background-size: cover;
}

.genProduct {
    background: url(../images/png/checarda-bg-image.png) no-repeat bottom center transparent;
    background-size: cover;
}

.sgProduct {
    background: url(../images/png/skillguard-bg-image.png) no-repeat top center transparent;
    background-size: cover;
}



/* --- Media Querries ---*/


@media (min-width: 576px) {
h2.lh-lg {
    line-height: 1em!important;
}


h4.text-end {
    font-size: 1rem;
    line-height: 1.2rem;
    margin-top: 1rem;
    margin-bottom: 3rem;
}

footer .col.text-end{
    padding-bottom: 2rem;
}

footer p.fw-bold {
    margin-top: 1rem;

}
}