/*--------------------------------------------------------------
>>> GLOBAL - TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Typography
2.0 Elements
3.0 Header
4.0 Content
5.0 Footer
--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/*--------------------------------------------------------------
1.0 Typography
--------------------------------------------------------------*/

:root {
    --blue: #194D7D;
    --blue-dark: #268ECE;
}

h1 {
    font: 500 64px/1.1em 'Poppins', sans-serif;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

h2 {
    font: 500 36px/1.4em 'Poppins', sans-serif;
    color: #194D7D;
}

h3 {
    font: 600 22px/1.4em 'Poppins', sans-serif;
    color: #194D7D;
}

div,
p {
    font: 400 18px/1.4em 'Poppins', sans-serif;
    color: #333333;
}

a {
    color: #333333;
    text-decoration: none;
    transition: all 0.3s;
}

ul {
    list-style-type: none;
    padding-left: 20px;
}

li {
    position: relative;
}

li::before {
    content: '';
    width: 4px;
    height: 4px;
    background: #000000;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: -18px;
}

img {
    max-width: 100%;
}

/*--------------------------------------------------------------
2.0 Elements
--------------------------------------------------------------*/

section.billboard {
    position: relative;
    z-index: 1;
}

section.billboard .billboard-background {
    position: relative;
    background: rgba(35, 87, 135, 0.5);
}

section.billboard .billboard-background .image-wrap {
    background: linear-gradient(0deg, rgba(35, 87, 135, 0.4), rgba(35, 87, 135, 0.4));
}

section.billboard .billboard-background img {
    width: 100%;
    height: auto;
}

section.billboard .content-container {
    position: absolute;
    top: 100px;
    right: 0;
    bottom: 100px;
    left: 0;
    display: flex;
    align-items: center;
    text-align: center;
}

section.billboard .billboard-title {
    max-width: 906px;
    margin: 0 auto;
}

section.billboard .billboard-subtitle {
    font: 500 20px/1.5em 'Poppins', sans-serif;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin: 10px auto 0 auto;
    max-width: 808px;
}

section.billboard .button-wrap {
    margin-top: 30px;
}

a.btn-white {
    display: inline-block;
    background: #FFFFFF;
    color: #000000;
    padding: 12px 25px;
    border-radius: 24px;
    font: 500 16px/1.5em 'Poppins', sans-serif;
    text-transform: uppercase;
}

a.btn-white:hover {
    background: #268ECE;
    color: #FFFFFF;
}

.menu-button a,
a.btn-blue,
a.btn-transparent {
    display: inline-block;
    background: #268ECE;
    color: #FFFFFF;
    padding: 12px 25px;
    border: 1px solid transparent;
    border-radius: 24px;
    font: 500 14px/1.5em 'Poppins', sans-serif;
    text-transform: uppercase;
}

a.btn-transparent {
    background: transparent;
    border-color: #FFFFFF;
}

.buttons-wrap {
    text-align: right;
}

.buttons-wrap a:not(:last-child) {
    margin-right: 25px;
}

.menu-button a:hover,
a.btn-blue:hover,
a.btn-transparent:hover {
    background: #FFFFFF;
    color: #268ECE;
    border-color: #268ECE;
    opacity: 1 !important;
}

section.back-link .link-wrap {
    display: flex;
    align-items: center;
}

section.back-link .link-wrap::before {
    content: '';
    width: 8px;
    height: 12px;
    display: inline-block;
    margin-right: 14px;
}

section.back-link .link-wrap a {
    font: 500 16px/1.6em 'Poppins', sans-serif;
    color: #268ECE;
}

section.back-link .link-wrap a:hover {
    opacity: 0.4;
}

/*--------------------------------------------------------------
3.0 Header
--------------------------------------------------------------*/

#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 30px;
}

#header.no-billboard {
    border-bottom: 1px solid #EEEEEE;
}

section.billboard.grey {
    background: rgba(35, 87, 135, 0.2);
}

#header:not(.no-billboard) {
    position: absolute;
    z-index: 2;
}

#logo a {
    display: block;
}

#logo img {
    width: auto;
}

/*--------------------------------------------------------------
4.0 Content
--------------------------------------------------------------*/

.row-flex {
    display: flex;
    align-items: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.section-title {
    font: 500 36px/1.3em 'Poppins', sans-serif;
    letter-spacing: -0.02em;
    text-transform: capitalize;
    color: #000000;
}

section ul {
    padding-left: 25px;
}

section ul li {
    position: relative;
    margin-top: 20px;
}

section ul:not(.splide__pagination) li:before {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    position: absolute;
    top: 10px;
    left: -25px;
    border-radius: 50%;
}

section.billboard .video-btn-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

section.billboard .video-btn-wrap .video-btn {
    font-size: 0;
    cursor: pointer;
    transition: all 0.3s;
}

section.billboard .video-btn-wrap .video-btn::before {
    content: '';
    display: inline-block;
    width: 86px;
    height: 86px;
}

section.billboard .video-btn-wrap .video-btn:hover {
    opacity: 0.4;
}

.modal-video-container {
    position: fixed;
    align-items: center;
    justify-content: center;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 100;
}

.modal-video-container .modal-wrap {
    width: 90%;
    max-width: 1000px;
}

.modal-video-container.show {
    display: flex;
}

.modal-video-container .modal-content {
    display: inline-block;
    width: 100%;
}

.modal-video-container .button {
    text-align: right;
}

.modal-video-container .button .modal-close {
    color: #FFFFFF;
    font-size: 28px;
    font-weight: bold;
    opacity: 0.6;
    transition: all 0.3s;
}

.modal-video-container .button .modal-close:hover {
    text-decoration: none;
    cursor: pointer;
    opacity: 1;
}

.modal-video-container .iframe-wrap {
    height: 0;
    padding-top: 56.6%;
    position: relative;
}

.modal-video-container .iframe-wrap .youtube {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.modal-video-container .iframe-wrap .youtube iframe {
    width: 100%;
    height: 100%;
}


/*--------------------------------------------------------------
5.0 Footer
--------------------------------------------------------------*/

#cta {
    margin-top: 92px;
    padding: 30px 0;
    background: #235787;
    position: relative;
    border-radius: 10px 10px 0 0;
}

#cta.grey {
    margin-top: 35px;
    position: relative;
}

#cta.grey::before {
    content: '';
    position: absolute;
    top: -35px;
    right: 0;
    bottom: 0;
    left: 0;
    background: #D3DDE7;
    z-index: -2;
}

#cta .cta-bg1 {
    position: absolute;
    display: block;
    top: -26px;
    right: 0;
    bottom: 0;
    left: 0;
}

#cta .cta-bg2 {
    position: absolute;
    display: block;
    top: -36px;
    right: 0;
    bottom: 0;
    left: 0;
}

#cta .bottom-title {
    font: 500 26px/1.8em 'Poppins', snas-serif;
    color: #FFFFFF;
}

#cta .container {
    position: relative;
}

#cta .bottom-btn-wrap {
    text-align: right;
}

#site-footer {
    background: #235787;
    color: #FFFFFF;
}

#site-footer ul {
    padding: 0;
}

#site-footer ul li::before {
    display: none;
}

#site-footer .footer-wrap {
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: space-between;
}

#site-footer p,
#site-footer div {
    font: 400 14px/1.4em 'Poppins', sans-serif;
    color: #FFFFFF;
}

#site-footer #menu-privacy-policy {
    display: flex;
    margin: 0;
}

#site-footer #menu-privacy-policy li:not(:last-child) {
    margin-right: 30px;
}

#site-footer #menu-privacy-policy li a {
    opacity: 1;
}

#site-footer .phone-wrap,
#site-footer .email-wrap {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

#site-footer .phone-wrap::before,
#site-footer .email-wrap::before {
    content: '';
    width: 20px;
    min-width: 20px;
    height: 20px;
    margin-right: 10px;
    background: no-repeat url("../img/phone-ico.svg") center center / contain;
}

#site-footer .email-wrap::before {
    background: no-repeat url("../img/email-ico.svg") center center / contain;
}

#site-footer .footer-logo {
    max-width: 358px;
}

#site-footer .footer-logo a {
    display: block;
    max-width: 180px;
}

#site-footer .footer-logo .footer-content {
    margin-top: 20px;
}

#site-footer .footer-title {
    font-size: 16px;
    font-weight: 600;
}

#site-footer ul {
    padding: 0;
}

#site-footer ul li a {
    color: #FFFFFF;
    opacity: 0.75;
}

#site-footer ul li a:hover {
    color: #268ECE;
}

#site-footer .footer-contacts a {
    display: inline-block;
    color: #FFFFFF;
}

#site-footer .footer-contacts a:hover {
    color: #268ECE;
}

#site-footer .copy-wrap {
    display: flex;
    padding: 35px 0 30px 0;
}

#site-footer #menu-copyright {
    display: flex;
    margin: 0;
}

#site-footer #menu-copyright li {
    margin: 0 0 0 30px;
}

#site-footer .site-info-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

#site-footer .menu li {
    margin-top: 20px;
}

#site-footer .site-info-wrap .social a {
    margin-left: 8px;
    opacity: 0.6;
}

#site-footer .site-info-wrap .social a:hover {
    opacity: 1;
}

#site-footer .footer-logos {
    display: flex;
}

#site-footer .footer-logos .logo {
    margin: 20px 20px 0 0;
}

#site-footer .footer-logos .logo svg {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

section .link-all.mobile {
    display: none;
}

.row > * {
    padding-right: 20px;
    padding-left: 20px;
}


/* MEDIA */
@media only screen and (max-width: 1200px) {
    #header {
        padding: 15px 20px;
    }
}

/* ( < 1200 ) */


@media only screen and (max-width: 991px) {
    h1 {
        font-size: 32px;
    }

    #header {
        padding: 20px 30px;
    }

    a.btn-white {
        font-size: 14px;
    }

    .container .row > .col-sm-6,
    .container .row > .col-6 {
        padding-right: 15px;
    }

    .container .row > .col-sm-6:nth-child(even),
    .container .row > .col-6:nth-child(even) {
        padding-left: 15px;
        padding-right: 20px;
    }

    section .section-title {
        font-size: 26px;
        text-align: center;
    }

    section .section-title br {
        display: none;
    }

    #site-footer .footer-wrap {
        flex-wrap: wrap;
        padding: 20px 0;
    }

    section.billboard {
        padding-bottom: 0;
    }

    section.billboard .billboard-background {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
    }

    section.billboard .billboard-background .image-wrap {
        height: 100%;
    }

    section.billboard .billboard-background .image-wrap img {
        height: 100%;
        object-fit: cover;
    }

    section.billboard .content-container {
        position: relative;
        text-align: center;
        z-index: 10;
    }

    section .link-all.mobile {
        display: block;
        text-align: center;
        margin-top: 20px;
    }

    section.billboard .billboard-subtitle {
        font-size: 18px;
        font-weight: 400;
        margin-top: 10px;
    }

    section.billboard .content-container .video-btn-wrap {
        order: -1;
        margin-bottom: 10px;
    }

    #header #logo {
        max-width: 45%;
    }

    section.billboard .video-btn-wrap .video-btn::before {
        width: 56px;
        height: 56px;
    }

    section.billboard .billboard-background span:last-child {
        bottom: 26px;
    }

    section.billboard .billboard-background span {
        bottom: 12px;
    }

    section.billboard .button-wrap {
        margin-top: 10px;
    }

    #cta {
        text-align: center;
        margin-top: 52px;
        padding: 36px 0 20px 0;
    }

    #cta .bottom-title {
        font-size: 18px;
        letter-spacing: -0.02em;
    }

    #cta .buttons-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    #cta .buttons-wrap a {
        margin: 10px 5px 0 5px;
    }

    #site-footer .container .footer-wrap > div#footer1,
    #site-footer .container .footer-wrap > div.footer-contacts {
        width: calc(50% - 15px);
    }

    #site-footer .copy-nav {
        order: 2;
        margin-top: 5px;
    }

    #site-footer .copyright {
        order: 1;
    }

    #site-footer .social {
        order: 3;
        width: 100%;
        margin-top: 10px;
    }

    #site-footer .site-info-wrap .social a {
        margin: 0 4px;
    }

    #cta .bottom-btn-wrap {
        text-align: center;
        margin-top: 12px;
    }

    #cta .cta-bg1 {
        top: -22px;
    }

    #cta .cta-bg2 {
        top: -36px;
    }

    #site-footer {
        text-align: center;
    }

    #site-footer > .container {
        padding: 0 20px;
    }

    #site-footer .footer-wrap > div {
        max-width: 100%;
    }

    #site-footer .footer-wrap > div#footer1,
    #site-footer .footer-wrap > div#footer2,
    #site-footer .footer-wrap > div#footer3,
    #site-footer .footer-wrap > div.footer-contacts {
        width: calc(50% - 30px);
        text-align: left;
        margin-top: 20px;
    }

    #site-footer .footer-logo a {
        display: inline-block;
    }

    #site-footer .footer-logos {
        justify-content: center;
    }

    #site-footer .footer-logos .logo:last-child {
        margin-right: 0;
    }

    #site-footer .copy-wrap {
        padding: 20px 0 10px 0;
        flex-wrap: wrap;
        justify-content: center;
    }

    #site-footer .copy-wrap > div {
        width: 100%;
    }

    #site-footer #menu-copyright {
        justify-content: center;
    }

    #site-footer .site-info-wrap {
        flex-wrap: wrap;
        justify-content: center;
        padding-bottom: 0;
    }

    #site-footer #menu-copyright li {
        margin: 5px 0 0 15px;
    }

    #site-footer #menu-copyright li:first-child {
        margin-left: 0;
    }

    #site-footer #menu-copyright li a {
        opacity: 1;
    }

    #site-footer #site-info {
        padding-bottom: 20px;
    }

    #site-footer ul {
        margin-bottom: 0;
    }
}

/* ( < 991 ) */
