@font-face {
    font-family: 'Coolvetica';
    src: url('../fonts/coolvetica/Coolvetica Rg.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --primary-color: #132670;
    --secondary-color: #FF6120;
    --font-size: 16px;
    --spacing: 10px;
    --font-default: "Montserrat", serif;
    --font-coolvetica: "Coolvetica", "Montserrat", serif;
    --nav-font: var(--font-default);
    --nav-color: #333333;
}

.index-page .header {
    --nav-color: var(--primary-color);
}

.fc-white{color: #FFFFFF;}
.fc-black{color: #222222;}
.fc-primary{color: var(--primary-color)}
.fc-secondary{color: var(--secondary-color)}

.xbg-primary{background-color: var(--primary-color)}
.xbg-secondary{background-color: var(--secondary-color)}

body{
    font-family: var(--font-default);
}
table{width: 100%;}

.header {
    padding: 15px 0;
    background-color: #FFFFFF33;
}
.index-page.scrolled .header {
    background-color: #FFFFFFDD;
    padding: 10px 0;
}
.header .navmenu a, .navmenu a {
    color: #222222;
    padding: 7px 15px;
    font-size: 17px;
}
.header .navmenu li:hover > a, .navmenu .active, .navmenu .active:focus {
    color: var(--secondary-color);
}
.header .btn-getstarted, .header .btn-getstarted {
    color: var(--contrast-color);
    background: var(--secondary-color);
    font-size: 18px;
}
.header .btn-getstarted:hover, .header .btn-getstarted:focus:hover {
    background: color-mix(in srgb, var(--primary-color), transparent 15%);
}
.header .logo img {
    max-height: 40px;
    margin-right: 8px;
}

.footer{
    background: var(--primary-color);
    padding: 50px 0;
}
.footer h1{
    color: #ffffff;
    font-family: var(--font-coolvetica);
    font-size: 30px;
    font-weight: bold;
}
.footer h2{
    color: #ffffff;
    font-family: var(--font-coolvetica);
    font-size: 20px;
    font-weight: bold;
}
.footer p{
    color: #ffffff;
    font-size: 18px;
    border-bottom: 1px solid #FFFFFF;
    padding: 10px 0;
}
.footer .icons{padding: 0; margin: 0;}
.footer .icon{
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--secondary-color);
    color: #FFFFFF;
    padding: 14px 13px;
    margin-right: 20px;
}
.footer .icon i{
    color: #FFFFFF;
    font-size: 24px;
    line-height: 10px;
}
.footer-about.second{padding: 0 0 0 50px;}

@media (max-width: 800px) {
    .footer-about.second{padding: 0}
    .footer .icon {
      margin-bottom: 18px;
    }
}

.container hr{ border: 1px solid #111111;}

.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1000px;
}