@import url("nav.css");
@import url("footer.css");

/* Fonts */
@font-face {
    font-family: 'SourceSansPro';
    src: url('../fonts/SourceSansPro-Light.eot');
    src: url('../fonts/SourceSansPro-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SourceSansPro-Light.ttf') format('ttf'),
        url('../fonts/SourceSansPro-Light.woff2') format('woff2'),
        url('../fonts/SourceSansPro-Light.woff') format('woff'),
        url('../fonts/SourceSansPro-Light.svg#SourceSansPro-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SourceSansPro';
    src: url('../fonts/SourceSansPro-SemiBold.eot');
    src: url('../fonts/SourceSansPro-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SourceSansPro-SemiBold.woff2') format('woff2'),
        url('../fonts/SourceSansPro-SemiBold.woff') format('woff'),
        url('../fonts/SourceSansPro-SemiBold.ttf') format('truetype'),
        url('../fonts/SourceSansPro-SemiBold.svg#SourceSansPro-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SourceSansPro';
    src: url('../fonts/SourceSansPro-Bold.eot');
    src: url('../fonts/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SourceSansPro-Bold.woff2') format('woff2'),
        url('../fonts/SourceSansPro-Bold.woff') format('woff'),
        url('../fonts/SourceSansPro-Bold.ttf') format('truetype'),
        url('../fonts/SourceSansPro-Bold.svg#SourceSansPro-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Core */
html{
    overflow-x: hidden;
}
body{
    font-family: 'SourceSansPro', sans-serif;
    color: #130c38;
    font-weight: 300;
    overflow-x: hidden;
    overflow-wrap:break-word;
}
.elementor-column-gap-default>.elementor-column>.elementor-element-populated{
    padding:0 !important;
}
p, ul{
    font-size: 1.5em;
    line-height: 1.5;
    margin-bottom: 15px;
}
a{
    transition: .3s ease;
    text-decoration: none !important;
    overflow-wrap:anywhere;
}
b{
    font-weight: 700;
}
h1, h2, h3, h4{
    font-weight: 700;
    margin-bottom: 15px;
}
h1{
    font-size: 3.5em;
}
h2{
    font-size: 2.7em;
}
h3{
    font-size: 2.3em;
}
h4{
    font-size: 1.7em;
}
h5{
    font-size: 2.3em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-bottom: 15px;
}
img{
    width:100%;
}
:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}
.grecaptcha-badge{
    z-index: 99999999;
}
.padding-h{
    padding-left: calc(15px + 5%);
    padding-right: calc(15px + 5%);
}
.padding-v{
    padding-top: calc(15px + 2.5%);
    padding-bottom: calc(15px + 2.5%);
}
.text-align-center{
    text-align: center;
}
.text-align-right{
    text-align: right;
}
.text-align-left{
    text-align: left;
}
.background-img{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.blue-back{
    background-color:#151fe8;
}
.blue-text{
    color:#151fe8;
}
.blue-text a{
    color:#151fe8;
}
.dark-blue-back{
    background-color:#130c38;
}
.dark-blue-text{
    color:#130c38;
}
.dark-blue-text a{
    color:#130c38;
}
.light-blue-back{
    background-color:#1557e8;
}
.light-blue-text{
    color:#1557e8;
}
.light-blue-text a{
    color:#1557e8;
}
.purple-back{
    background-color:#5400db;
}
.purple-text{
    color:#5400db;
}
.purple-text a{
    color:#5400db;
}
.light-purple-back{
    background-color:#960cf2;
}
.light-purple-text{
    color:#960cf2;
}
.light-purple-text a{
    color:#960cf2;
}
.pink-back{
    background-color:#c002eb;
}
.pink-text{
    color:#c002eb;
}
.pink-text a{
    color:#c002eb;
}
.gradient-back{
    background: #130c38;
    background: linear-gradient(90deg, #c002eb 0%, #130c38 100%);
}
.white-back{
    background-color: #fff;
}
.white-text{
    color: #fff;
}
.white-text a{
    color: #fff;
}
.white-btn, .purple-btn, .blue-btn{
    display: inline-block;
    transition: .3s ease;
    padding: 10px 60px;
    line-height: 1;
    border-radius: 0;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 1.5em;
    margin-top: 15px;
    margin-bottom: 0;
}
.white-btn{
    color: #151fe8 !important;
    background-color: #fff;
    border:1px solid #fff;
}
.white-btn:hover{
    color: #fff !important;
    background-color: #151fe8;
    border:1px solid #151fe8;
}
.white-btn-rev{
    color: #fff !important;
    background-color: transparent;
    border:1px solid #fff;
}
.white-btn-rev:hover{
    color: #151fe8 !important;
    background-color: #fff;
}
.purple-btn{
    color: #fff !important;
    background-color: #5400db;
    border:1px solid #5400db;
}
.purple-btn:hover{
    color: #fff !important;
    background-color: #c002eb;
    border:1px solid #c002eb;
}
.blue-btn{
    color: #fff !important;
    background-color: #151fe8;
    border:1px solid #151fe8;
}
.blue-btn:hover{
    color: #151fe8 !important;
    background-color: #fff;
    border:1px solid #fff;
}

@media (max-width:995px) {
    .white-btn, .light-blue-btn, .blue-btn{
        font-size: 1em;
    }
    h1, h2, h3, h4, p{
        margin-bottom: 10px;
    }
    h1, h2{
        font-size: 2em;
    }
    h3{
        font-size: 1.7em;
    }
    h5{
        font-size: 1.7em;
    }
    p, ul{
        font-size: 1.2em;
        line-height: 1.2;
        margin-bottom: 15px;
    }
}

/* 404 */
.error404 .nav-container{
    background-color: #fff;
    border-bottom:1px solid #5400db;
}
.error-row{
    min-height: 70vh;
    padding-top:10vh;
    position: relative;
    z-index: 2;
}
.error-header{
    color: #5400db;
    font-size: 5em;
    font-weight: 700;
    margin-bottom: 10px !important;
}
.error-sub-header{
    font-size: 3em;
    margin-bottom: 25px;
}
.error-row p{
    max-width: 600px;
}
.error-row a{
    color: #151fe8;
}
.error-row a:hover{
    color: #5400db;
}

/* Home */
.header{
    margin-top: 9.5vh;
    overflow: hidden;
    position: relative;
}
.background-wave{
    position: absolute;
    width: 100%;
    top:0;
    right:0;
    z-index: 1;
}
.header .header-text-row{
    min-height: 40vh;
    position: relative;
    z-index: 2;
}
hr{
    width: 20%;
    height: 4px;
    background-color: #151fe8;
    opacity: 1;
}
.who-needs-it{
    background-image: url('/img/who-needs-it.svg');
    background-size: 100%;
    background-position: 0 -1px;
    background-repeat: no-repeat;
}
.useful-terms{
    background-image: url('/img/terms-wave.svg');
    background-size: 100%;
    background-position: 0 -1px;
    background-repeat: no-repeat;
}
.timeline-item{
    position: relative;
    padding-bottom:20px;
}
.timeline-item:last-of-type{
    padding-bottom:0px;
}
.timeline-item:before{
    content: "";
    position: absolute;
    top: 10px;
    width:6px;
    height:100%;
    background-color: #c002eb;
}
.timeline-item:last-of-type:before{
    height:10px;
}
.timeline-item.left:before{
    right:-3px;
}
.timeline-item.right:before{
    left:-3px;
}
.timeline-item:after{
    content: "";
    position: absolute;
    top: 10px;
    border-radius: 30px;
    width:30px;
    height:30px;
    background-color: #c002eb;
}
.timeline-item.left:after{
    right:-15px;
}
.timeline-item.right:after{
    left:-15px;
}
.timeline-item.left{
    text-align: right;
    padding-right: calc(var(--bs-gutter-x) * 2);
}
.timeline-item.right{
    padding-left: calc(var(--bs-gutter-x) * 2);
}
.timeline-item h3{
    margin-bottom: 0;
}
.marketing-needs{
    position: relative;
}
.marketing-needs-wave{
    position: absolute;
    width:100%;
    left:0;
    z-index: 1;
}
.marketing-needs-wave.top{
    top:-1px;
}
.marketing-needs-wave.bottom{
    bottom:-3px;
}
.marketing-needs-inner{
    z-index: 2;
}

#message-success{
    display: block;
    text-align: center;
}
#message-success p{
    text-align: center;
    margin: 15px auto 0;
    display: inline-block;
    padding: 10px 30px;
    border: 2px solid green;
}
#message-success p i{
    margin-right: 10px;
}
.contact p a{
    color: #130c38;
}
.contact p a:hover{
    color: #5400db;
}
.form-field{
    margin-bottom: 15px;
}
.form-field input{
    width: 100%;
    border:1px solid #130c38;
    border-radius: 0;
    padding:10px 15px;
    color:#130c38;
    font-size: 1.5em;
    font-weight: 300;
}
::placeholder{
    color: #130c38;
    opacity: .9;
}

@media (max-width:1400px) {
    .background-wave{
        top:8vh;
    }
}
@media (max-width:1280px) {
    .background-wave{
        top:18vh;
    }
}
@media (max-width:1050px) {
    .background-wave{
        top:24vh;
    }
}
@media (max-width:995px) {
    .header{
        margin-top:6.5vh;
    }
    .background-wave{
        top:45vh;
    }
    .header .header-text-row-2{
        margin-top: 8vh;
    }
    .who-needs-it img{
        margin-bottom: 15px;
    }
    .timeline-item.left, .timeline-item.right {
        text-align: left;
        padding-left: calc(var(--bs-gutter-x) * 1.2);
    }
    .timeline-item.left:before {
        left: -3px;
        right: unset;
    }
        .timeline-item.left:after {
        left: -15px;
        right: unset;
    }
    .marketing-needs-wave{
        width:calc(100% + 6px);
        left:-6px;
    }
    .marketing-needs-wave img{
        width:calc(100% + 6px);
        left:-3px;
    }
    .marketing-needs-wave.top img{
        vertical-align: top;
    }
    .marketing-needs-wave.bottom img{
        vertical-align: bottom;
    }
    .form-field input {
        padding: 5px 10px;
        font-size: 1.2em;
    }
}