@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --skBlue: #1a54c8;
    --skLightBlue: #4eb3d3;
    --skDarkBlue: #0d5469;
    --skRed: rgb(180, 23, 23);
    --skLightRed: rgb(230, 78, 78);
    --skOrange: #f26522;
    --skLightOrange: #ef9e77;
    --skDarkOrange: #9f3706;
    --skDarkGrey: #4e4e4e;

    --appDark: #202020;
    --appLight: #f1f1f1;
    --appWhite: #fff;
    --appGrey: #dddddd;

    --appBorderRadius: 5px;
    --sk-gutter: 1.5rem;
    --bs-body-font-family: Inter;
}


body {
    background-color: #011d25;
    font-size: 14px;
}
* {
    font-family: var(--bs-body-font-family);
}
a {
    text-decoration: none;
}
.section {
    padding-right: calc(var(--sk-gutter));
    padding-left: calc(var(--sk-gutter));
    padding-top: var(--sk-gutter);
    padding-bottom: var(--sk-gutter);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    display: flex;
}
.section-black {
    background-color: var(--appDark);
}
.section-lightblue {
    background-color: var(--skLightBlue);
}
.section-title {
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
}


.squadr-footer {
    background-color: var(--appLight);
}


.team-photo {
    width: 100%;
    max-width: 100%;
}

/* Iconbox feature grid (icon above title, outlined circle) */
.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border: 2px solid var(--skBlue);
    border-radius: 50%;
    color: var(--skBlue);
    font-size: 2rem;
    margin-bottom: 1.25rem;
}

/* Vertical/horizontal divider lines between feature columns */
.feature-grid > [class*="col-"]:not(:last-child) {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}
@media (min-width: 768px) {
    .feature-grid > [class*="col-"] {
        border-bottom: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .feature-grid > [class*="col-"]:not(:last-child) {
        border-right: 1px solid rgba(255, 255, 255, 0.8);
    }
}

/* Element coloring */
.text-blue {
    color: var(--skBlue);
}
.text-lightblue {
    color: var(--skLightBlue);
}
.btn-red {
    background-color: var(--skRed);
    color: var(--skWhite);
}
.btn-red:hover {
    background-color: var(--skLightRed);
}
.btn-blue {
    background-color: var(--skBlue);
    color: var(--skWhite);
}
.btn-blue:hover {
    background-color: var(--skLightBlue);
}
.bg-lightblue {
    background-color: var(--skLightBlue);
}

.border-lightblue {
    border-color: var(--skLightBlue) !important;
}

.squadr-footer-logo {
    height: 25px;
    width: auto;
}
.squadr-social {
    margin-right: 20px;
}

@media (min-width: 576px) /******* SM ********/
{
    #sm { display: block; }
}
@media (min-width: 768px)  /******* MD ********/
{
    #sm { display: none; }
    #md { display: block; }
}
@media (min-width: 992px) /******* LG ********/
{
    #sm { display: none; }
    #md { display: none; }
    #lg { display: block; }
}
@media (min-width: 1200px) /******* XL ********/ 
{
    #sm { display: none; }
    #md { display: none; }
    #lg { display: none; }
    #xl { display: block; }
}
@media (min-width: 1400px) /******* XXL ********/ 
{
    #sm { display: none; }
    #md { display: none; }
    #lg { display: none; }
    #xl { display: none; }
    #xxl { display: block; }
}	
@media (min-width: 1600px) /******* XXXL ********/ 
{
    #sm { display: none; }
    #md { display: none; }
    #lg { display: none; }
    #xl { display: none; }
    #xxl { display: none; }
    #xxxl { display: block; }

    .section {
        padding-right: calc(var(--sk-gutter) * 5);
        padding-left: calc(var(--sk-gutter) * 5);
    }
}