/*
Styling prepared for lading page version 1.1
Author: Ben Peetermans
Website: EvolveConvert.com
*/

/* Declare variables */

:root{
    --color-primary:#167AFA;
    --color-accent:;
    
    --font-color-primary:#0B0C32;
    --font-primary:inter, sans-serif;
    --font-secondary:gabarito, sans-serif;
}
svg .color-primary{
    fill: var(--color-primary);
}

/* Set foundation font-size and colors */

html{
    font-size:16px;
}
body{
    color:var(--font-color-primary);
    font-family:var(--font-primary);
}
h1,h2,h3{
    font-family:var(--font-secondary);
}
.color-primary{
    color:var(--color-primary);
}
.color-accent{
    color:var(--font-color-accent);
}
.no-style{
    text-decoration:none;
    color:var(--font-color-primary);
}

.title-extra-large, .title-large, .title-medium, .title-small, .title-extra-small{
    font-family:var(--font-secondary);
}

@media (max-width: 768px) {
    html {
        font-size: 14px; /* Slightly smaller base size for mobile */
    }
}

/* General CSS */

.header{
    background:#fff;
    border-bottom:1px solid #CFDBE8;
    box-shadow:0px 2px 4px rgba(0,0,0,0.05);
}
.container{
    padding:0 20px;
    width:100%;
    max-width:1140px;
    margin:auto;
}
.logo img {
    box-sizing: border-box;
    display: block;
}
.header .logo {
    transform: translateY(15px);
}


.above-the-fold{
    background:#F1F7FD;
    padding:50px 0 100px;
    background-image: url(../images/header-water-1.jpg);
    background-size:cover;
    
}
.wave-section {
    background: #2A25A0;
    position: relative;
    z-index:3;
    margin-bottom:100px;
    color:#fff;
}
.wave-section .title{
    font-size:20px;
    font-weight:bold;
    margin-bottom:10px;
}
.wave-thumbs-up{
    margin-top:-30px;
}
.wave-section::before {
    background-image: url(../images/double-wave-top.svg);
    content: "";
    position: absolute;
    top: -35px;
    width: 100%;
    height: 37px;
    z-index:1;
    background-repeat:no-repeat;
    background-size:cover;
}
.wave-section::after {
    background-image: url(../images/double-wave-bottom.svg);
    content:"";
    position:absolute;
    bottom:-35px;
    width:100%;
    height:37px;
    z-index:1;
    background-repeat:no-repeat;
    background-size:cover;
    background-position: bottom center;
}
.wave-section .container{
    z-index:3;
    position: relative;
    width:100%;
    max-width:500px;
    margin:auto;
    display:flex;
    flex-direction:column;
    justify-content: space-around;
    align-items: center;
    padding:30px 20px;
    padding-top:0px;
}
.above-the-fold .main-col {
    display: flex;
    flex-direction: column;
}
.above-the-fold .main-col * {
    margin: 0;
}

a.button, a.button-small, button#continue-btn {
    background-color: var(--color-primary);
    display: inline-block;
    flex-grow: 0;
    padding: 20px 40px;
    max-width: fit-content;
    text-decoration: none;
    color: #fff;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1.1em;
}
button#continue-btn{
    max-width:100%;
    border:none;
    cursor:pointer;
}
a.button-small{
    font-size:1em;
    padding:15px 25px;
}

.image-with-overlay {
    text-align: center;
    position:relative;
}
.overlay {
    position: absolute;
    background: #fff;
    padding: 10px 20px;
    color: #167AFA;
    border: #B5C4E8 1px solid;
    display: inline-block;
    border-radius: 100px;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: bold;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}
.gap-5{
    gap:5px;
}
.highlight-blocks {
    display: flex;
    margin:30px 0;
    column-gap:30px;
    row-gap:30px;
}
.highlight-block .title-line {
    display: flex;
    align-items: center;
    column-gap: 10px;
}
.highlight-block {
    padding: 30px 20px;
    background: #EBF1FF;
    border-radius: 20px;
}
.pool-ball-cta {
    max-width: 600px;
    margin: auto;
    text-align: center;
    position:relative;
}


.pool-ball {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 60px;
}

.animate.visible .pool-ball{
    animation-name:pool-ball;
}

.pool-ball-cta-section {
    max-width: 767px;
    margin: auto;
    text-align: center;
}
.pool-ball-cta .pool-ball {
    z-index: 10;
}
@keyframes pool-ball{
    0%{
        transform: translateY(-100vh) translateX(-50%);      
        opacity:0;
            
    }
    100%{
        transform: translateY(0px) translateX(-50%);
        opacity:1;
    }
}
.pool-ball-cta-content p {
    margin-bottom: 30px;
}
.footer{
    background-image:url(../images/footer-background-large.jpeg);
    background-position: center top;
    background-size:cover;
    background-repeat:no-repeat;
    margin-top:100px;
    padding:80px 20px 50px;
}
.footer .container {
    max-width: 650px;
    color:#fff;
}
.footer .title {
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    margin: 20px;
}
.footer p {
    text-align: center;
}
.divider {
    width: 110%;
    height: 1px;
    background: #fff;
    max-width: 100vw;
    margin: 0 -5%;
    opacity: 0.5;
}
.copyright {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 30px;
}
.copyright a{
    color:#fff;
    font-size:13px;
}
.animated.slideUp.visible{
    animation:slideUp 0.5s forwards;
}
.animated.pop.visible{
    animation:pop 0.5s forwards;
}

@keyframes slideUp{
    0%{
        transform: translateY(50vh);
        opacity:0;
    }
    100%{
        transform:translateY(0px);
        opacity:1;
    }
}
@keyframes pop{
    0%{
        transform: scale(1.0);
    }
    50%{
        transform:scale(1.1);
    }
    100%{
        transform:scale(1.0);
    }
}

.mobile-header{
    display:none;
}
@media screen and (max-width:500px){
    .footer{
        background-position:right top;
    }
    .overlay{
        min-width:80%;
        position:relative;
        bottom:-20px;
        left:auto;
        transform:none;
    }
    .header{
        display:none;
    }
    .mobile-header{
        display:block;
        width:100%;
        height:auto;
        display:block;
        background-color:#F1F7FD;
        position:relative;
    }
    .mobile-header .logo {
        position: relative;
        top: 40px;
        z-index:10;
    }
    .mobile-header .background{
        position: absolute;
        top:0;
        z-index:1
    }
}



/* Sticky button */
.sticky{
    display:none;
    position:fixed;
    bottom:10px;
    right:0px;
    width:100%;
    z-index:99;
}
.sticky.sticky-disabled{
    display:block;
    animation:sticky-hide 0.5s forwards;
}
.sticky.sticky-enabled{
    display:block;
    animation:sticky-show 0.5s forwards;
}
.sticky .container-large{
    position: relative;
}
.sticky-button{
    position:absolute;
    right:0px;
}

@keyframes sticky-hide{
    0%{
        opacity:1;
    }
    100%{
        opacity:0;
        bottom:-50px;
    }
}
@keyframes sticky-show{
    0%{
        opacity:0;
        bottom:-50px;
    }
    100%{
        opacity:1;
    }
}

.form-container {
    background: #fff;
    padding: 4%;
    padding-top:0;
    border-radius: 20px;
}
.form-container .logo{
    margin-top:-20px;
}

#form-start .option {
    border: 1px solid #A3A3A3;
    border-radius: 10px;
    display: flex;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.1);
    align-items: center;
    padding:0 10px;
}

#form-start .option.selected {
    border: 1px solid var(--color-primary);
    box-shadow: 0px 3px 2px #167afb2b;
    color:var(--color-primary);
}

#form-start .option label {
    display: block;
    width: 100%;
    padding:20px 0;
    cursor:pointer;
}
#form-start .option input{
    padding:20px 0;
    cursor:pointer;
}
form#form-start{
    width: 100%;
    max-width:400px;
}
.form-container {
    box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
}

@media screen and (max-width:500px){
}