/* @import url('https://fonts.googleapis.com/css2?family=Petrona:wght@200;400&family=Varela+Round&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@800&family=Petrona:wght@200;400&family=Varela+Round&display=swap');

:root {
	/*GRID*/
	--grid-width: 1200px !important;
	--grid-gutter: 20px;
	
	/*TEXT*/
	--text-family: 'Varela Round', sans-serif;
	
    --text-fsize: 19px;
	--text-md-fsize: 17px;
	--text-sm-fsize: 15px;

	--text-lheight: 1.79rem;
	--text-md-lheight: 1.69rem;
	--text-sm-lheight: 1.59rem;

	--text-family-alt: 'Petrona', serif;
	--text-family-bold: 'Nunito', sans-serif;
	
	/*BASE BUTTON*/
	--btn-padding: 15px 25px;
	--btn-fsize: 0.8rem;
	--btn-lheight: 1.2rem;

	/*COLORS*/
	--color-primary: #242B57;
	--color-secondary: #199CD9;
	--color-alt: #254977;
	--color-black: #1d1d1d;
	--color-white: #fff;
	--color-gray: #afaeae;
	--color-light-gray: #ececec;


    /*CUSTOM VARS*/
    --gallery-img-height: 1;
}

@keyframes animatedBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -10000px -10000px;
    }
}

[data-animation]{
    transition-property: opacity;
    transition-duration: 0.8s;
    opacity: 0;
}
[data-animation].animated {
    opacity: 1;
}


html, body{
    font-family: var(--text-family);
    font-size: var(--text-fsize);
    line-height: var(--text-lheight);
    color: var(--color-black);
}
    
body{overflow-x: hidden;}
  
.row{ max-width: var(--grid-width); margin: auto;}
.row.wide{ max-width: 85% }
.row.fullwidth{ max-width: 100% }

a{
    text-decoration: none;
    color: var(--color-secondary);
    transition: 0.25s;
}

a:hover{
    color: var(--color-primary);
}

a img{transition: 0.25s;}

h1, h2, h3, h4, h5, h6{
    font-family: var(--text-family);
    margin-bottom: 20px;
    color: var(--color-primary)
}

h1{font-size: 3rem;margin-top:30px;}
h2 strong{font-size: 2.57rem;}

h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong{
    font-family: var(--text-family-bold);
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{
    color: var(--color-primary)
}
h1:hover a, h2:hover a, h3:hover a, h4:hover a, h5:hover a, h6:hover a{
    color: var(--color-secondary)
}

.h5, h5 {
    font-size: 1.19rem;
}


.text-alt{font-family: var(--text-family-alt);}

.button{
    background: var(--color-secondary);
    padding: var(--btn-padding); 
    font-size: var(--btn-fsize); 
    line-height: var(--btn-lheight); 
    color: var(--color-white);
    text-align: center;
    box-shadow: none;
    border: 0;
}
.button, button{transition: 0.25s;}
.button:hover{background: var(--color-alt);color:var(--color-white)}

.button.pill{border-radius: 500px;}

label{
    display: block;
    margin-bottom: 5px;
    color: var(--color-primary)
}
input, textarea, select{
    border: 1px solid var(--color-gray);
    border-radius: 8px;
    transition: 0.35s;
    padding-left: 15px;
}
input:focus, textarea:focus, select:focus{
    box-shadow: 0 0 2px var(--color-secondary) !important;
    border-color: var(--color-secondary);
}

.form-floating, .input-group {margin-bottom: 20px;}
.form-floating > .form-control, .form-floating > .form-select {
    height: calc(2.5rem + 2px);
    font-size: 0.9rem;
}

.form-floating > label {
    padding: 0.5rem .75rem;
    font-size: 0.9rem;
}
.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
    opacity: .65;
    transform: scale(.60) translateY(-.45rem) translateX(0.5rem);
}
.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 1.3rem;
    padding-bottom: .5rem;
}


.zIndex1{position: relative;z-index: 1;}
.zIndex0{position: relative;z-index: 0;}
.zIndex-1{position: relative;z-index: -1;}

/* ----- Bootstrap fixs ------- */
img{max-width: 100%;}
a{display: inline-block;}

ul.il-list{padding-left: 0;}

.text-left{text-align: left !important;}
.text-right{text-align: right !important;}

.c-primary{color: var(--color-primary) !important}
.c-secondary{color: var(--color-secondary) !important}
.c-gray{color: var(--color-gray) !important}
.c-white{color: var(--color-white) !important}
.c-black{color: var(--color-black) !important}

.bg-black{background: var(--color-black) !important;}
.bg-white{background: var(--color-white) !important;}

.row .row{margin: 0 -0.75rem;}

.modal-footer {display: block;}
input, textarea, select{width: 100%;outline: 0 !important;}

.btn-success{background-color: #198754;}
.btn-success:hover, .btn-success:focus{background-color: #157347;}

/* ------------------------------------- */

header{
    padding: 30px 0;
    position: fixed;
    top: 30px;
    width: 100%;
    z-index: 999;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-light-gray);
}

header.nospace{top:0}

.hero-pattern {
    width: 100%;
    height: 650px;
    background-image: url("/img/pattern.png");
    background-color: var(--color-primary);
    background-repeat: repeat;
    background-position: 0 0;
    background-size: auto 25%;
    background-blend-mode: soft-light;
    animation: animatedBackground 700s linear infinite;
    position: relative;
}

.hero-pattern::after{
    content: "";
    width: 100%;
    height: 100%;
    bottom: -1px;
    background-image: url("/img/overlay-curve.svg");
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: 110%;
    position: absolute;
    z-index: 1;
}

.hero-pattern h1, .hero-pattern h2{
    font-family: var(--text-family);
    font-size:2.8rem;
    line-height: 3.5rem;
    text-transform: uppercase;
    color: var(--color-white);
}

header nav a, header nav .button{
    color: var(--color-black);
    margin-right: 25px;
}
header nav a:hover:not(.button), header nav a:not(.button).active{color: var(--color-secondary)}

header .dropdown-menu{min-width: 70px;}

header nav .button{
    background: var(--color-black);
    color: var(--color-white);
    font-size: 0.65rem;
    padding: 12px 16px;
    font-weight: 700;
}
header nav .button:hover, header nav .button.active{background: var(--color-secondary);}


label[for=menu-toggle]{
    font-size: 2.6rem;
    cursor: pointer;
    transition: 0.35s;
}
label[for=menu-toggle]:hover{
    color: var(--color-secondary)
}
label[for="menu-toggle"].active i:before{
    content: "\f659";
}
#menu-toggle{
    margin: -13px 0 0;
    position: absolute;
    visibility: hidden;
    z-index: -9999;
}
div.mobile-menu{
    display: none;
    position: absolute;
    width: 100%;
    background: var(--color-white);
    padding: 15px 0;
}
div.mobile-menu ul{
    list-style: none;
}
#menu-toggle:checked+div.mobile-menu{
    display: block;
    z-index: 999;
    border-bottom: 1px solid var(--color-light-gray);
}
#menu-toggle:checked+div.mobile-menu ul{
    list-style: none;
    margin-left: 0;
    margin-bottom: 0;
    padding-left: 0;
}
#menu-toggle:checked+div.mobile-menu a{
    font-size: 1.2rem;
    padding: 13.5px 18px;
    display: block;
    color: var(--color-black);
}
#menu-toggle:checked+div.mobile-menu button{
    background: var(--color-black);
    color: var(--color-white);
    margin: 13.5px 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
#menu-toggle:checked+div.mobile-menu li a:hover, #menu-toggle:checked+div.mobile-menu li.active a{
    background: var(--color-secondary);
    color: var(--color-white)
}

.cover-video{
    height:100vh;
    object-fit:cover;
    width:100%;
}




.bg-gradient{
    background: linear-gradient(90deg, var(--color-primary), var(--color-alt), var(--color-secondary)) !important;
}
.cta{
    padding: 100px 0;
    color: var(--color-white);
    border-top-right-radius: 500px;
    border-bottom-right-radius: 500px;
}

.cta.right{
    border-radius: 0;
    border-top-left-radius: 500px;
    border-bottom-left-radius: 500px;
    margin-left: auto;
}

.cta h2{font-size: 3rem;margin-bottom: 0;}


.bg-triangle, .bg-triangle-light{position: relative;z-index: 0;}
.bg-triangle:after{
    content: " ";
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--color-primary), var(--color-alt), var(--color-secondary));
    position: absolute;
    right: 0;
    bottom: 150px;
    z-index: -2;
    clip-path: polygon(100% 0%, 9.95% 100%, 100% 100%);
}


.bg-triangle-light::after{
    content: " ";
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, var(--color-white),  var(--color-secondary));
    position: fixed;
    right: 0;
    top: 0;
    z-index: -2;
    clip-path: polygon(100% 35%, 9.95% 100%, 100% 100%);
    opacity: 0.2;
}


[class^="flex-list-"]{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    width: calc(100% + (2 * var(--grid-gutter)));
    max-width: 100%;
}

[class^="flex-list-"] li{
    padding: 0 var(--grid-gutter) 20px;
}

.flex-list-4 li{width: 25%;}

.gallery-grid-2{
    column-count: 2;
    column-gap: 0;
    width: 100%;
    position:relative;
}

.gallery-grid-2 img{
    object-fit: cover;
    width: 100%;
}


.icon-list i{
    font-size: 2.5rem;
    color: var(--color-primary);
}
.icon-list i+p{color: var(--color-primary);}


.hero-mockup{
    height:700px;
    width:100%;
    object-fit:contain
}

.animation-frame{
    border:2px solid var(--color-primary);
    padding:10px 5px;
    border-radius:10px
}

.media-icons a{
    color: var(--color-white);
    font-size: 1.8rem;
    margin-right: 15px;
}

.hover-card{padding: 20px 15px;cursor: pointer;}
.hover-card:hover{
    background-image: url("/img/pattern.png");
    background-color: var(--color-light-gray);
    background-repeat: repeat;
    background-position: 0 0;
    background-size: auto 25%;
    background-blend-mode: soft-light;
    border-radius: 15px;
}

.blob{
    height:150px;
    width:150px;
    min-width:150px;
    object-fit:cover;
	box-shadow:0 0 0 2px var(--color-light-gray);
	transition:all ease 1s;
	transition-property:border-radius;
	transition-duration:2s;
    border-radius: 50%;
}

.hover-card:hover .blob{
    border-radius: 50% !important;
}

.hero-blog{
    width:100%;height:550px;object-fit:cover;border-radius:10px
}


footer{
    background: linear-gradient(90deg, var(--color-primary), var(--color-alt), var(--color-secondary)) !important;
    padding: 70px 0 25px;
    margin-top: 60px;
    color: var(--color-white);
    position: relative;
    z-index: 0;
}

footer p, footer a, footer h2{color: var(--color-white);}
footer a:hover{color: var(--color-secondary)}

footer h2{
    font-size: 3rem;
    margin-bottom: 2rem;
}

footer:after{
    content: "";
    display: block;
    position:absolute;
    left:0;
    bottom:0;
    width: 100%;
    height: 100%;
    background-image: url('/img/pattern.png');
    background-size: 15%;
    clip-path: polygon(67.1% 0, 100% 0px, 100% 100%, 81% 100%);
    z-index: -1;
}



/* Mobile only */
@media (max-width: 575.98px) {
    :root{
        --gallery-img-height: 0.3;
    }

    html, body{
        font-size: var(--text-sm-fsize);
        line-height: var(--text-sm-lheight);
    }
    .cta h2{font-size: 2rem;}
    
    .row.wide{max-width: 95%;margin-left: auto;margin-right: auto;}
    
    .cta{padding: 45px 0;}

    .bg-triangle:after{bottom: 55px;}

    .flex-list-4 li{width: 100%;}

    .hero-mockup{height: 350px;}

    .blob{
        --tamanho: 100px;
        height: var(--tamanho);
        width: var(--tamanho);
        min-width: var(--tamanho);
    }
    
    .hero-blog{height: 300px;}

    .cover-video{
        height:50vh;
        object-fit:cover;
        object-position: 0;
    }

    footer:after{
        clip-path: polygon(0 0, 100% 0px, 100% 22%, 0 9.5%);
        background-size: 40%;
    }
}

/* Tablet only */
@media (min-width: 576px) and (max-width: 991.98px) { 
    html, body{
        font-size: var(--text-md-fsize);
        line-height: var(--text-md-lheight);
    }
    
    .flex-list-4 li{width: 50%;}
    
}

/* Desktop only */
@media (min-width: 992px) { 

}