
/* Colours */

:root {
    --primary-color: #222;
    --secondary-color: #FFBF00;
    --text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    --OTC-Amber-Gold: #FFBF00;
    --OTC-Amber-Gold-mouseover: #FF9500;
    --OTC-Carbon-Black: #222;
    --OTC-Magenta-Bloom: #E83F6F;
    --OTC-Magenta-Bloom-mouseover: #A20531;
    --OTC-Company-Blue: #005A83;
    --OTC-Company-Blue-mouseover: #003F5C;
    --OTC-light-grey: #F2F2F2;
    --OTC-greyed-out: #CBCBCB;
}
.primary {
    color: var(--primary-color);
}
.bg-primary {
    background-color: var(--primary-color);
}
.secondary {
    color: var(--secondary-color);
}
.bg-secondary {
    background-color: var(--secondary-color);
}
.pink {
    color: var(--OTC-Magenta-Bloom);
}
.pink-bg {
    background-color: var(--OTC-Magenta-Bloom);
}
.text-shadow {
    text-shadow: var(--text-shadow);
}
.blue {
    color: var(--OTC-Company-Blue);
}
.blue-bg {
    background-color: var(--OTC-Company-Blue);
}
.bg-grey {
    background-color: var(--OTC-light-grey);
}
.mouseover-darken {
    transition: background-color 0.3s ease;
}
.mouseover-darken:hover {
    background-color: rgba(0, 0, 0, 0.30);
}
.white {
    color: #fff;
}
.white > * {
    color: #fff;
}
body {
    background-color: #fff;
    font-size: 16px;
    line-height: 24px;
    color: var(--OTC-Carbon-Black);
}
a {
    text-decoration: none;
    color: var(--OTC-Company-Blue);
}
a:hover {
    text-decoration: underline;
}
p {
    margin-top:0;
}
.fw-900 {
    font-weight: 900;
}

.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-3 { z-index: 3; }

ul {
    list-style: none;
    padding-left: 0;
}
h1,h2,h3,h4,h5,h6 {
    color: var(--OTC-Carbon-Black);
     font-family: "Work Sans";
     font-weight: 800;
     font-style: normal;
     margin-top:0;
     margin-bottom:16px;
}
h1 {
    font-size: 72px;
    line-height: 80px;}
h2 {
    font-size: 52px;
    line-height: 46px; /* 88.462% */
}
h3 {
    font-size: 36px;
    line-height: 36px;
}
h4 {
    font-size:26px;
    line-height: 26px; /* 100% */
}
p {
    color: var(--OTC-Carbon-Black);
    /* OTC Body med */
    font-family: "Work Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
.body-med {
    font-size: 16px;
    line-height: 24px;
}

.container {
    max-width: 1240px;
    margin: 0 auto;
}
.grey-bottom {
    border-bottom:2px solid var(--OTC-light-grey);
}
.position-absolute, .absolute { position:absolute; }
.position-relative, .relative { position:relative; }
.w-100 { width:100%; }
.h-100 { height:100%; }
.object-position-top { object-position: top; }
.object-position-bottom { object-position: bottom; }
.object-position-left { object-position: left; }
.object-position-right { object-position: right; }
.object-position-center { object-position: center; }

/*####### ####### ####### ####### ####### ####### ####### ####### ####### ####### ####### ####### ####### #######
/* Header */


#main-header {
    background-color: transparent;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}
header.scroll #main-header {
    background-color: #fff;
}
header.scroll #main-header * {
    color: var(--OTC-Carbon-Black);
}
#main-header * {
    color:#fff;
}
header.scroll #site-logo-scroll,
#site-logo {
    display: block;
}
header.scroll #site-logo,
#site-logo-scroll {
    display: none;
}
.header-logo {
    max-width: 224px;
    height: auto;
}

.main-menu {
    display: flex;
    gap:0;
    align-items: center;
}
.main-menu > li {
    padding:15px 24px;
    position: relative;
    border-bottom:4px solid transparent;
} 
header.scroll #main-header .main-menu > li,
header.scroll #main-header .contact a {
    color: var(--OTC-Carbon-Black);
}

header.scroll #main-header .contact a h3 {
    color:var(--OTC-Company-Blue);
}
.main-menu > li.menu-item-has-children::after {
    content: '\f078';
    font-family: 'Font Awesome 7 Pro';
    font-size: 10px;
    margin-left: 5px;
}
.main-menu > li:hover {
    border-bottom: 4px solid #fff;
}
.main-menu ul.sub-menu {
    display: none;
    position: absolute;
    background-color: #000;
    padding: 10px 0;
    top: 100%;
    left: 0;
}

section.builder-section {
    padding-top:100px;
    padding-bottom:100px;
}


footer {
    padding-top:100px;
    padding-bottom:100px;
}
footer.white-bg * {
    color: var(--OTC-Company-Blue);
}
#footer-logo-section {
    gap:24px;
}
.pb-40 {
    padding-bottom:40px;
}
.pt-40 {
    padding-top:40px;
}
#footer-logo-section h4 {
    margin-bottom: 5px;
}
#footer-logo-section p {
    margin-bottom: 0;
}
.footer-logo {
    max-height: 50px;
}

.footer-column h4 {
    margin-bottom:16px;
    margin-top:0;
    min-height: 26px;
}
.footer-column ul {
    margin-top:16px;
}
#footer-banner {
    position: relative;
}
.dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 90, 131, 0.30) 0%, rgba(0, 90, 131, 0.30) 100%);
    z-index: 1;
}
.section-padding {
    padding-top: 100px;
    padding-bottom: 100px;
}
#footer-banner .white > * {
    color: inherit;
}
.btn-group {
    display: flex;
    gap: 32px;
    
}
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 54px;
    padding: 0 24px;
    border-radius:8px;
    font-family: 'Work Sans';
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color:var(--OTC-Carbon-Black);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-white {
    background-color: transparent;
    border:3px solid #fff;
    color: #fff;
    text-shadow: var(--text-shadow);
    
}
.btn-white:hover {
    background-color: var(--OTC-Company-Blue);
    color: #fff;
    text-decoration: none;
}
.btn-amber {
    background-color: var(--OTC-Amber-Gold);
    color: var(--primary-color);
}
.btn-amber:hover {
    background-color: var(--OTC-Amber-Gold-mouseover);
    color: var(--primary-color);
    text-decoration: none;
}
.btn-pink {
    background-color: var(--OTC-Magenta-Bloom);
    color: #fff;
}
.btn-pink:hover {
    background-color: var(--OTC-Magenta-Bloom-mouseover);
    color: #fff;
    text-decoration: none;
}

.footer-icon-list {
    grid-template-columns: repeat(3 , 1fr);
    column-gap: 20px;
    row-gap: 24px;
}
.footer-icon-list-content.white > * {
    color: #fff;
}
.icon-list-item {
    gap:16px;
}
.icon-text {
    flex-shrink: 3;
}
.icon-list-item-icon {
    width:50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    color: var(--OTC-Magenta-Bloom);
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-list-item-icon i {
    font-size:18px;
    line-height: 24px;
}

.absolute-zero {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


#footer-newsletter {
    position: relative;
    background-size: cover;
    background-position: center;
}

#form_newsletter .frm_fields_container {
    max-width: 820px;
    margin: auto;
}
.frm_fields_container input {
    padding:0 16px;
    height: 54px;
    border-radius: 8px;
    background-color: var(--OTC-light-grey);
    border:2px solid var(--OTC-light-grey);
    color: var(--OTC-Carbon-Black);
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}
#form_newsletter #field_newsletter_email,
#form_newsletter #field_newsletter_name {
    padding-left: 42px;
}
#form_newsletter #field_newsletter_email::before,
#form_newsletter #field_newsletter_name::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    font-family: "Font Awesome 7 Pro";
    color:var(--OTC-greyed-out);
}
#form_newsletter #field_newsletter_email::before {
    content: '\f0e0';
}
#form_newsletter #field_newsletter_name::before {
    content: '\f007';
}