/*
  Theme Name: FuturFund
  Author: NetGain SEO
  Author URI: https://netgain.agency/
  Description: Wordpress theme for FuturFund. Use of this theme outside of this company's website is strictly prohibited.
  Template: ion
  Text Domain: futurfund
*/

:root {

    --font: "larken", serif;
    --heading: "ivypresto-display", serif;
    --accent: 'Work Sans', sans-serif;
    --forms: 'DM Sans', sans-serif;

    --spacing: 140px;

    --dark: #212049;
    --light: #C5B4E2;

    --text: var(--dark);
    --hover: #bbaf8a;

    --font-size: 23px;
    --font-size--medium: 20px;
    --font-size--large: 26px;
    --font-size--xlarge: 30px;
    --font-size--h1: 62px;
    --font-size--h2: 54px;
    --font-size--h3: 27px;
    --line-height: 1.39;
    --line-height--heading: 1;

    --container-above--1600: 1200px;
    --container-above--1368: 1200px;

    --button-padding--top: 22px;
    --button-padding--bottom: 22px;
    --button-padding--left: 115px;
    --button-padding--right: 115px;
    --button-radius: 43px;
    --button-text--casing: capitalize;
    --button-text--size: 17px;
    --button-text--weight: 600;
    --button-text--font: var(--accent);
    --button-text--colour: #fff;
    --button-border-width: 2px;
    --button-background--primary: #8A59EA;
    --button-hover--background: #000;
    --button-hover--color: #FFF;

    --form-field--border: tranparent;
    --form-field--padding-top: 23px;
    --form-field--padding-bottom: var(--form-field--padding-top);
    --form-field--padding-left: 23px;
    --form-field--padding-right: var(--form-field--padding-left);
    --form-field--radius: 13px;

    --header-adjustment: 32px;
}

body {
    font-family: var(--font);
    font-size: var(--font-size);
    color: var(--text);
    line-height: var(--line-height);
    font-weight: 300;
}

h1, h2, h3 {
    font-family: var(--heading);
    line-height: var(--line-height--heading);
    color: var(--dark);
    font-weight: 600;
}

#hero {
    height: 822px;
    background-color: var(--light);
    position: relative;
    padding: 75px 30px 214px;
    overflow: hidden;
}

#hero:before, #hero:after {
    content: '' !important;
    position: absolute !important;
    top: unset !important;
    bottom: unset !important;
    left: unset !important;
    right: unset !important;
    display: block !important;
    background-size: 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 10 !important;
}

#hero:before {
    top: -211px !important;
    left: -296px !important;
    width: 1297px !important;
    height: 731px !important;
    background-image: url(i/icons/swish-lg.svg) !important;
}

#hero:after {
    bottom: -40px !important;
    right: -441px !important;
    width: 1078px !important;
    height: 546px !important;
    background-image: url(i/icons/swish-sm.svg) !important;
}

#hero .brand svg {
    display: block;
    width: 224px;
    height: 55px;
    margin: 0 0 171px;
    position: relative;
    z-index: 100;
}

#hero .hero-content {
    width: 555px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 100;
}

#hero .hero-content h1 {
    margin: 0 0 30px;
    line-height: 1.09;
    font-weight: 600;
}

#hero .hero-content h1 + p {
    font-weight: 300;
}

#heroGallery {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 50;
}

#heroGallery .gallery img {
    border: none !important;
    display: block;
    width: 125px;
    height: 125px;
    object-fit: contain;
    border-radius: 100%;
}

#heroGallery .elementor-image-gallery,
#heroGallery .elementor-image-gallery .gallery {
    height: 100%;
    position: relative;
}

#heroGallery .gallery .gallery-item {
    margin: 0;
    position: absolute;
    float: unset;
    width: unset;
    text-align: unset;
}

#heroGallery .gallery .gallery-item:nth-child(1) { top: 86px; left: 336px; }
#heroGallery .gallery .gallery-item:nth-child(2) { top: -17px; left: 26px; }
#heroGallery .gallery .gallery-item:nth-child(3) { top: 313px; left: 72px; }
#heroGallery .gallery .gallery-item:nth-child(4) { bottom: 128px; left: 140px; }
#heroGallery .gallery .gallery-item:nth-child(5) { top: -30px; right: 127px; }
#heroGallery .gallery .gallery-item:nth-child(6) { top: 148px; right: 292px; }
#heroGallery .gallery .gallery-item:nth-child(7) { top: 313px; right: 87px; }
#heroGallery .gallery .gallery-item:nth-child(8) { bottom: 138px; right: 189px; }
#heroGallery .gallery .gallery-item:nth-child(9) { bottom: 48px; left: -74px; }
#heroGallery .gallery .gallery-item:nth-child(10) { bottom: -70px; left: 261px; }
#heroGallery .gallery .gallery-item:nth-child(12) { top: 149px; right: -84px; }
#heroGallery .gallery .gallery-item:nth-child(13) { bottom: -9px; right: -38px; }

.pg-section h2, .pg-section h2 + p {
    color: #FFF;
}

.pg-section h2 {
    font-family: var(--font);
    font-style: italic;
    margin: 0 0 27px;
}

.pg-section h2 + p {
    font-size: 26px;
    width: 552px;
    max-width: 100%;
    font-weight: 400;
    line-height: 32px;
    margin: 0 auto 71px;
}

.elementor-form .elementor-field:not(.elementor-form .elementor-field.elementor-select-wrapper, .elementor-form .elementor-field.elementor-acceptance-field),
.elementor-field-group .elementor-select-wrapper select {
    font-family: var(--forms) !important;
    font-size: 16px !important;
    font-weight: 600;
}

.captcha-note {
    margin: 0 0 18px;
}

.captcha-note p, .captcha-note p a {
    font-family: var(--forms) !important;
    font-size: 16px !important;
    font-weight: 600;
    color: #FFF;
}

.captcha-note p a:hover, .captcha-note p a:focus {
    color: #8A59EA;
}

.elementor-form {
    width: 571px;
    max-width: 100%;
    margin: 0 auto;
}

.elementor-form .elementor-button {
    display: block !important;
    width: 291px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    flex-basis: unset !important;
    padding: 22px !important;
}

.elementor-form textarea.elementor-field-textual {
    height: 152px !important;
    resize: none !important;
}

#footer {
    padding: 35px 30px 75px;
}

.elementor-message {
    line-height: 1 !important;
    margin: 20px 0 0 !important;
    color: #FFF !important;
    font-size: 15px !important;
    font-family: var(--accent) !important;
    font-weight: 500 !important;
    border: 1px solid green !important;
    padding: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}