@import url('../fonts/darker-grotesque/stylesheet.css');

* {
    box-sizing: border-box;
}

:root {
    --primary: #384c48;
    --secondary: #91c6b3;
    --ex1: #cfe8e0;
    --ex2: #f2d1c2;
    --ex3: #ff8e50;
    --ex4: #98c9bc;
    --tertiary1: #e9c56e;
    --tertiary2: #874d99;
    --tertiary3: #a8b6cc;
    --tertiary4: #2c9984;
    --tertiary5: #d3c2da;
    --tertiary6: #95c69d;
    --tertiary7: #231354;
    --tertiary8: #6d1d1b;
    --black: #000;
    --white: #fff;

    --fontFamily: 'Darker Grotesque', sans-serif;
    --fontSize: 20px;
    --fontWeight: 500;
    --lineHeight: 130%;
    --letterSpacing: 1px;

    --radius: 20px;

    --scrollbarTrackColor: var(--themeColor);
    --scrollbarThumbColor: var(--theme);
    
    --theme: #384C48;
    --themeColor: #fff;
}

::-webkit-scrollbar {
	width: 12px;
}

::-webkit-scrollbar-track {
	background: var(--scrollbarTrackColor);
	border-radius: 100px;
}

::-webkit-scrollbar-thumb {
	background: var(--scrollbarThumbColor);
	border-radius: 100px;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--theme);
    color: var(--themeColor);

    font-family: var(--fontFamily);
    font-size: var(--fontSize);
    font-weight: var(--fontWeight);
    line-height: var(--lineHeight);
    letter-spacing: var(--letterSpacing);
    
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 0.5em;
    line-height: 100%;
}

.btn {
	padding: 12px 20px 15px 20px;
	background: #ffffff;
	color: #35423f;
	border-radius: 20px;
	margin-top: 20px;
	float: left;
	text-decoration: none;
	cursor: pointer;
	font-weight: bold;
}

.btn:hover{
	background: #e8e1db;	
}

.btn + .btn {
	margin-left: 1rem;
}

h1,
.h1 {
    font-weight: 500;
    font-size: 5rem;
}

h2,
.h2 {
    font-weight: 500;
    font-size: 3rem;
}

h3,
.h3 {
    font-weight: 600;
    font-size: 2rem;
}

p:first-child {
    margin-top: 0;
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: inherit;
}

.wrapper {
    width: 95%;
    max-width: 1420px;
    margin: 0 auto;
}

.theme-default {
    --theme: #384C48;
    --themeColor: #fff;
}

.theme-green {
    --theme: #4E9781;
    --themeColor: #fff;
}

.theme-red {
    --theme: #64231E;
    --themeColor: #fff;
}

.theme-blue {
    --theme: #201451;
    --themeColor: #fff;
}

header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    background: var(--theme);
    color: var(--themeColor);
    padding: 1em;
}

header .menubtn {
    text-transform: uppercase;
    cursor: pointer;
    color: var(--color);
    flex: 1;
}

header .logo {
    cursor: pointer;
    text-decoration: none;
    
}

header .cta {
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
}

header .sidebuttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 2em;
    flex: 1;
}

.page-home header {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 10;
    background: transparent;
}

nav {
    position: fixed;
    inset: 0;
    z-index: 100;
    background-color: rgba(0,0,0,0.5);
    display: none;
    overflow: hidden;
    font-size: 40px;
    line-height: 44px;
}

nav .inner {
    padding: 1em;
    color: var(--themeColor);
    background: var(--theme);
    width: 90%;
    max-width: 500px;
    height: 100%;
    overflow: auto;
}

nav .close {
    font-size: 20px;
    line-height: 27px;
    cursor: pointer;
    margin: 0 0 2em 0;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding-right: 40px;
}

nav li {
    margin: 0;
    padding: 0;
}

nav li a {
    text-decoration: none;
    font-size: 1.5rem;
    line-height: 100%;
    display: block;
}

nav .socials {
    display: flex;
    flex-direction: row;
    gap: 1em;
    margin-top: 2em;
}

.menu-open {
    overflow: hidden;
}

.menu-open nav {
    display: block;
}

footer {
    background: var(--theme);
    color: var(--themeColor);
    padding: 0em 0;
}

footer .wrapper {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

footer a {
    text-decoration: none;
}

footer .upper,
footer .lower {
    display: flex;
    flex-direction: row;
    gap: 2em;
    align-items: center;
    justify-content: space-between;
}

footer .upper {
    padding: 3em 0;
}

footer .upper > div,
footer .lower > div {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

footer .lower {
    border-top: 1px solid var(--white);
    padding: 2em 0;
}

footer .upper svg {
    max-width: 100%;
    height: auto;
}


/**** HERO ***********************************************************************/

.hero {
    --color: var(--white);
    --accent: #91C6B3;
    position: relative;
	z-index: 0;
    height: auto;
    padding: 8em 0;
    color: var(--color);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: var(--tertiary3);
    background-image: var(--image);
/*	background-attachment: fixed;*/
}

.hero[data-style="full"] {
    height: 100vh;
    padding: 0;
}

.hero[data-lightveil="enabled"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 1;
}

.hero .wrapper {
    max-width: 1200px;
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
	flex-direction: column;
	gap: 2em;
    z-index: 2;
}

.hero h1 {
    margin: 0;
}

.hero h1 strong {
    font-weight: inherit;
    color: var(--accent);
}

.hero .ctablock {
	display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.hero .findoutmore {
    text-transform: uppercase;
    position: absolute;
    bottom: 1em;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    display: none;
}

.hero[data-style="full"] .findoutmore {
    display: block;
}


/**** IMAGE_TEXT_CTA ***********************************************************************/

.image_text_cta {
    background: var(--primary);
    color: var(--white);
    padding: 4em 0;
    overflow: hidden;
    position: relative;
}

.image_text_cta[data-style="beige"] {
    background: #EBD39B;
    color: var(--primary);
}

.image_text_cta .wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2em;
    position: relative;
    z-index: 2;
}

.image_text_cta[data-position="imageright"] .wrapper {
    flex-direction: row-reverse;
}

.image_text_cta-image {
    flex: 1;
    aspect-ratio: 1/1.2;
    border-radius: var(--radius);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-color: #f0f0f0;
    background-image: var(--image);
}

.image_text_cta-content {
    flex: 1;
    padding-left: 3em;
    padding-right: 3em;
}

.image_text_cta-graphic {
    position: absolute;
    left: 73%;
    top: 0;
    bottom: 0;
    z-index: 1;
    animation: rotate 120s linear infinite;
    aspect-ratio: 1/1;
    transform-origin: center center;
}
.image_text_cta-graphic svg {
    width: auto;
    height: 100%;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}


/**** COLUMNED_CONTENT ***********************************************************************/

.columned_content {
    background: #ECE5DF;
    color: var(--primary);
    padding: 4em 0;
}

.columned_content .wrapper {

}

.columned_content .title {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    margin-bottom: 1em;
}

.columned_content .icon{
  margin-bottom: 20px;
}

.columned_content .columns {
    display: flex;
    flex-direction: row;
    gap: 1em;
    align-items: stretch;
}

.columned_content .column {
    flex: 1;
    border-radius: var(--radius);
    background: var(--white);
    padding: 2em;
    padding-bottom: 3em;
    display: flex;
    flex-direction: column;
    gap: 1em;
    justify-content: space-between;
}

.columned_content .findoutmore {
    text-transform: uppercase;
    text-decoration: none;
}

.columned_content .cta_footer {
	display: flex;
	justify-content: center;
	padding: 1em 0 0 0;
}


/**** ACCORDION ***********************************************************************/

.accordion {
    padding: 3em 0;
}

.accordion .wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.accordion .item {
    display: flex;
    flex-direction: column;
    gap: 1em;
    border-top: 1px solid var(--themeColor);
    padding: 1em 0;
}
.accordion .item:last-child {
    border-bottom: 1px solid var(--themeColor);
}

.accordion .item .title {
    font-weight: 500;
    font-size: 2rem;
    line-height: 100%;
    letter-spacing: 1px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    cursor: pointer;
}
.accordion .item .title em {
    display: block;
    width: 24px;
    height: 24px;
    position: relative;
    transition: transform 500ms ease;
    flex: 0 0 auto;
}
.accordion .item .title em::before,
.accordion .item .title em::after {
	content: "";
	display: block;
	background: var(--themeColor);
	width: 24px;
	height: 4px;
	position: absolute;
	inset: 0;
	top: calc(50% - 2px);
	transition: transform 0.35s linear;
}
.accordion .item .title em::after {
	width: 4px;
	height: 24px;
	top: 0;
	left: calc(50% - 2px);
	transform-origin: center;
}

.accordion .item .content {
    font-size: 24px;
    display: none;
	padding: 0;
	max-height: 0px;
	overflow: hidden;
	transition: all 0.35s linear;
}

.accordion .item.open .content {
    display: block;
	max-height: 100em;
}

.accordion .item.open .title em {
	transform: rotate(180deg);
}
.accordion .item.open .title em::after {
	transform: rotate(90deg);
}


/**** CONTENT ***********************************************************************/

.standardcontent {
    padding: 3em 0;
    background: #384C48;
    color: #fff;
}

.standardcontent--light {
	background: #ECE5DF;
    color: #384C48;
}

.standardcontent h2 {
	text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    padding-bottom: 0.25em
}


/**** TESTIMONIALS ***********************************************************************/

.testimonials {
	background: #CCE3DB;
	color: var(--primary);
	padding: 5rem 0;
}

.testimonials h3 {
	font-size: 70px;
	font-weight: 500;
	text-align: left;
}

.testimonials .items {
	display: flex;
	flex-direction: row;
	gap: 2rem;
	justify-content: space-between;
	align-items: stretch;
	margin-top: 3rem;
}

.testimonials .item {
	flex: 1;
	background: var(--white);
	color: var(--primary);
	padding: 1rem;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
}

.testimonials .item .readmore {
	text-decoration: none;
	text-transform: uppercase;
}


/**** CLIENT LOGOS ***********************************************************************/

.client_logos {
	background: var(--white);
	color: var(--primary);
	padding: 5rem 0 7rem 0;
	text-align: center;
}

.client_logos .images {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4rem;
	margin-top: 4rem;
}







.with_frm_style .frm_primary_label {
    --label-color: #fff;
}

.frm_style_formidable-style.with_frm_style .frm_submit button {
    background: var(--theme) !important;
    border-width: 1px;
    border-color: var(--themeColor) !important;
    box-shadow: none !important;
}