/********************** Homepage ********************* *
 *  1. Structural
 *      1.1. Sections
 *      1.2. Pagetitles
 *  2. Builder Blocks
 *      2.1. Homepage 
 *          2.1.1. Hero
 *  3. WordPress pages
*****************************************************/

/****************** 1. Structural *******************/

/**** 1.1. Sections ****/

.uk-section {}

/**** 1.2. Pagetitles ****/

#pagetitle .uk-overlay-default {
    background: rgba(60, 60, 66, 0.7);
}

/******************** 2. Builder Blocks **********************/
#hero {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    padding: 60px 0;
}
.hero-images {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
}
.hero-image {
    position: relative;
    position: absolute;
}
.hero-image1 {
    top: 90px;
    left: 10px;
}
.hero-image2 {
    top: 40px;
    left: 24%;
}
.hero-image3 {
    top: 60px;
    left: 50%;
}
.hero-block {
    animation: uk-fade 0.5s ease-out 0.1s both;
}
/* Animate each hero image only after its own data has loaded. The .is-loaded
   class is toggled by an inline script in builder/blocks/hero.php on the IMG's
   load event. Without this gate, the animation can start scaling an empty
   IMG box and the actual image content pops in mid-animation when the PNG
   finishes streaming. Pre-loaded state: scale(0.85) with the same fill so
   the image is invisible-ish until ready, then animates in once gated. */
.hero-image,
.hero-images-small > img,
.hero-images > img {
    transform: scale(0.85);
    opacity: 0;
}
/* Fade and scale together in one keyframe so the image doesn't flip from
   opacity:0 to opacity:1 instantly when .is-loaded toggles, then animate
   scale separately — that read as a "pop, then animate". hero-fade-scale-in
   has both properties on the timeline so the two happen as one motion. */
.hero-image.is-loaded,
.hero-images-small > img.is-loaded,
.hero-images > img.is-loaded {
    animation: hero-fade-scale-in 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes hero-fade-scale-in {
    0%   { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1);    opacity: 1; }
}
/* Stagger the reveal once all images are loaded — the JS toggles .is-loaded
   simultaneously on all three, the delay produces the cascade. Safe here
   because there's no images-not-yet-loaded window: animation only starts
   after every PNG has decoded. */
.hero-image1.is-loaded { animation-delay: 0s;    }
.hero-image2.is-loaded { animation-delay: 0.15s; }
.hero-image3.is-loaded { animation-delay: 0.3s;  }
#hero-landing ul li {
    margin-bottom: 30px;
}
.main-grid .uk-card-body {
    padding: 25px;
}
.main-grid .uk-button {
    width: fit-content;
}
.pagetitle-block img {
    position: relative;
    z-index: 0;
    top: -80px;
}
.splide-logos p {
    font-size: 16px;
}
.content-block p {
    font-size: 20px;
    font-weight: 400;
}
span.position {
    display: block;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}
.cta-block {
    background-color: #56565E;;
}
.cta-block-content {
    padding: 60px;
}
.tile-wrap {
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 0px 50px -19px rgba(0, 0, 0, 0.20);
    padding: 30px;
}
.tile-box {
    border-radius: 4px;
    padding: 18px 20px;
    margin-bottom: 13px;
}
.tile-box.arrow-style p {
    margin-bottom: 0;
}
.arrow-style {
    color: #fff;
    text-align: center;
    margin: 66px auto 0;
    position: relative;
}
.arrow-style:last-of-type .triangle{
    display: none;
}
.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 30px solid transparent;
    border-left: 30px solid transparent;
    border-top: 36px solid #555555;
    border-bottom: 0;
    bottom: -35px;
}
.logo-box {
    border-radius: 4px;
    padding: 15px 20px;
    background-color: #eee;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.stats-card {
    box-shadow: 0px 19px 25px -19px rgba(0, 0, 0, 0.25);
    height: 150px;
}
.stats-box {
    margin-top: 50px;
    z-index: 1;
    position: relative;
    background-image: url(../../img/separator.svg);
    background-repeat: no-repeat;
    background-position-y: 17px;
}
.stats-box span {
    font-size: 12px;
}
.stats-checkbox {
    width: 36px;
    height: 36px;
    background-color: #E5575B;
    border-radius: 999px;
    display: block;
    padding: 7px;
    margin: 0 auto 20px;
}
.stats-checkbox.stats-checked {
    background-color: #34CC6F;
}
.stats-checkbox.stats-large {
    height: 130px;
    width: 130px;
    align-items: center;
    display: flex;
    position: absolute;
    top: -60px;
    text-align: center;
    color: #fff;
    padding: 0;
}
span.stats {
    font-size: 27px;
    font-weight: 600;
}
.support-block ul li {
    font-size: 16px;
    margin-bottom: 8px;
}
.logo-wrap {
    display: inline-block;
    border: 1px solid #D7D7D7;
    border-radius: 12px;
    padding: 30px 40px;
}
.list-content ul {
    margin-left: -35px;
}
.list-content ul > :nth-child(n+2),
.list-style ul > :nth-child(n+2) {
    margin-top: 10px;
}
.blockquote-block {
    border-radius: 4px;
    background: #F8F8F8;
    padding: 60px;
}
.article-content p:not(.blockquote),
.article-content li {
    font-size: 14px;
}
.blockquote {
    color: #E5575B;
    font-size: 20px;
    font-style: italic;
    font-weight: 500;
    line-height: 1.4;
}
.cover-image {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.video-btn {
    margin-left: -30px;
	display: inline-block;
}
.team-modal p {
    font-size: 15px;
}
.media-card {
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 -5px 25px -21px rgba(0, 0, 0, 0.25);
    padding: 35px;
    background-color: #f4f4f4;
}
.news-card {
    box-shadow: 0px 19px 25px -19px rgba(0, 0, 0, 0.25);
}
.news-card h3 {
    font-size: 22px;
}
/* .news-card p,
.privacy-content p {
    font-size: 15px;
} */
.iframe-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.disclaimer {
	font-size: 10px;
}
.grecaptcha-badge {
	display: none;
}

/*************** 3. WordPress pages ****************/