/* ==================================================================================================================================================== */
/* ====================================================================== VARIABLES =================================================================== */
/* ==================================================================================================================================================== */

/*  */
/*  */

:root { 
	--wrapper-width:1320px;
	--gutter:32px;

	--font-size-h1:56px;
	--font-size-h2:36px;
	--font-size-h3:18px;

	--font-poppins:'Poppins', 'Inter', Arial;;
	--font-inter:'Inter', Arial;
	--font-awesome:'Font Awesome 6 Pro';

	--white:#ffffff;
	--color-grey-10:#F4F4F4;
    --color-grey-20:#E9E9E9;
    --color-grey-30:#D7D7D7;
    --color-grey-40:#BEBEBE;
    --color-grey-50:#AEAEAE;
    --color-silver-40:#CCD1EB;
    --color-silver-50:#B1B6D3;
    --color-silver-60:#9095af;
    --color-silver-90:#434A70;
    --color-blue-10:#c1ccfd;
    --color-blue-20:#91a4ff;
    --color-blue-50:#4862E4;
    --color-blue-60:#2D40A0;
    --color-blue-70:#25337D;
    --color-blue-80:#1C2659;
    --color-blue-90:#161F4F;
    --color-blue-100:#111827;
    --color-green-50:#12EEA3;
    --color-green-60:#00D58C;
    --color-green-70:#11A370;
    --color-green-80:#227C5A;
    --color-green-90:#074028;
    --color-yellow-60:#E5EA02;
    --color-yellow-80:#878A29;
    --color-yellow-90:#353A05;

	--tool-time-short:.25s;
	--tool-time-long:.4s;
}


@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/Inter_18pt-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/Inter_18pt-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }


/* ==================================================================================================================================================== */
/* ======================================================================= HTML TAGS ================================================================== */
/* ==================================================================================================================================================== */

*, *::before, *::after{ box-sizing:border-box; }
body, html{ font-family:var(--font-inter); position:relative; color:var(--color-silver-90); margin:0; padding:0; font-size:15px; line-height:1.6; scroll-behavior:smooth; }
body{ overflow-x:hidden; overflow-y:scroll; width:100vw; min-height:100dvh; visibility:visible!important; background:var(--color-grey-10); }
a{ text-decoration:none; color:var(--color-green-70); cursor:pointer; font-weight:bold; }
table, td, th, tr{ margin:0; padding:0; border-collapse:collapse; border-spacing:0; text-align:left; vertical-align:top; font-weight:400; }
p{ margin:0 0 16px 0; }
p:last-child{ margin-bottom:0; }
h1, h2, h3, h4, h5, h6{ font-family:var(--font-poppins);  color:var(--color-blue-80); margin:0; }
h1{ font-size:var(--font-size-h1); line-height:1.2; }
h2{ font-size:var(--font-size-h2); line-height:1.2; margin-bottom:1rem; }
h3{ font-size:var(--font-size-h3); line-height:1.3; }
li, ol, ul{ margin:0; padding:0; list-style:none; }
article, aside, header, main, section{ display:grid; }
input{ font-size:inherit; }
input::placeholder { color:var(--color-silver-60); opacity:1; }
input::-ms-input-placeholder { color:var(--color-silver-60); }
button, .button{ touch-action:manipulation; user-select:none; -webkit-user-select:none; font-size:inherit; line-height:inherit; }
div, section{ display:grid; }
img{ margin:0; display:block; }
section{ width:100%; max-width:var(--wrapper-width); padding:0 var(--gutter); margin:0 auto; }


body.page{ display:grid; min-height:100dvh; grid-template-rows:auto 1fr auto; align-items:flex-start; }
body.scroll_lock{ overflow-y:hidden; }

/* ==================================================================================================================================================== */
/* ==================================================================== NAVIGATION ==================================================================== */
/* ==================================================================================================================================================== */

header .logo img{ width:260px; }
header ul{ display:flex; align-items:center; grid-gap:32px; }
header a{ color:var(--color-silver-90); font-weight:bold; }

header.sub{ background-color:var(--color-grey-10); padding:4px 0; }
header.sub section{ justify-content:flex-end; }
header.sub a{ font-size:12px; }
header.sub .fa-user{ font-size:11px; margin-right:2px; position:relative; top:-1px; }

header.main{ background-color:var(--white); align-content:center; min-height:80px; }
header.main section{ display:flex; justify-content:space-between; align-items:center; }
header.main li{ height:80px; display:grid; align-items:center; }
header.main li.active{ box-shadow:inset var(--color-green-60) 0px -3px 0px 0px; }
header.main li.mobile_only{ display:none; }
header.main .hb_menu{ display:none; }



/* ==================================================================================================================================================== */
/* ====================================================================== FOOTER ====================================================================== */
/* ==================================================================================================================================================== */


footer section{ display:flex; justify-content:space-between; grid-gap:40px; }
footer .top{ background-color:var(--color-blue-80); padding:56px 0; }
footer .top .logo{ max-width:160px; } 
footer .top .buttons{ display:flex; grid-gap:16px; flex-wrap:wrap; justify-content:flex-end; align-content:center; }
footer .top .button.dark .fa-solid{ color:var(--color-green-50); }
footer .bottom{ background-color:var(--color-blue-90); padding:20px 0; }
footer .bottom a{ color:var(--color-silver-50); font-weight:bold; }
footer .bottom ul{ display:flex; grid-gap:16px 32px; width:100%; flex-wrap:wrap; }
footer .bottom li.long{ flex-grow:1; }




/* ==================================================================================================================================================== */
/* ================================================================== GLOBAL ELEMENTS ================================================================= */
/* ==================================================================================================================================================== */


/* Block */
.block{ padding:88px 0; }


/* Brackets */
.brackets{ font-size:1rem; font-family:var(--font-inter); font-weight:normal; color:var(--color-silver-60); transition:color .2s; }


/* Modal */
.modal{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(22,31,79,.0); transition:background-color .2s; padding:0 var(--gutter); justify-items:center; overflow-x:hidden; overflow-y:auto; z-index:999; }
.modal .card{ width:100%; max-width:800px; margin:auto; position:relative; top:24px; opacity:0; transition:top .2s, opacity .2s; }
.modal .x.modal__close{ position:fixed; top:12px; right:12px; cursor:pointer; padding:12px 17px; opacity:0; transition:opacity .2s; } 
.modal .x.modal__close::before{ content:'\f00d'; font-family:var(--font-awesome); display:block; color:var(--color-yellow-90); font-size:24px; line-height:1; }

.modal.modal--open{ background-color:rgba(22,31,79,.85); }
.modal.modal--open .card{ opacity:1; top:0; }
.modal.modal--open .x.modal__close{ opacity:1; }

.modal[data-modal-name="confirm"] .card{ max-width:400px; }
.modal[data-modal-name="confirm"] .card__content{ grid-gap:var(--padding-16); }
.modal[data-modal-name="confirm"] .actions{ display:flex; grid-gap:var(--padding-8); }
.modal[data-modal-name="confirm"] .actions .button{ min-width:64px; justify-content:center; }
.modal[data-modal-name="confirm"] .x.modal__close{ display:none; }


/* Inputs error */
label.error{ position:relative; animation:error_shake 0.6s cubic-bezier(.36,.07,.19,.97) both;  }
label.error input[type="checkbox"] + .label, 
label.error input[type="radio"] + .label { background:#f6ebeb; color:#704444; }
label.error input[type="text"], label.error input[type="email"], label.error input[type="number"], label.error textarea, label.error select{ background:#f6ebeb; }
label.error input + .label .fa-solid { color:#ae9090; }
label.error input + .label .check { border-color:#bfb0b0; }
@keyframes error_shake { 0%, 100% { transform:translateX(0); } 15%, 45%, 75%{ transform:translateX(-8px); } 30%, 60%, 90% { transform:translateX(8px); } }

/* Input button styles */
input + .label{ user-select:none; font-weight:bold; }
input + .label .fa-solid { font-size:18px; color:var(--color-silver-60); transition:color .2s; }
input + .label .text{ display:flex; align-items:center; grid-gap:4px; }
input + .label.ellipsis .text{ display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
input[type="checkbox"], input[type="radio"]{ display:none; width:0; height:0; margin:0; position:absolute; }
input[type="checkbox"] + .label, input[type="radio"] + .label{ display:flex; border-radius:56px; background-color:var(--color-grey-10); padding:18px 24px; height:100%; line-height:1.2; align-items:center; grid-gap:8px; transition:background-color .2s, color .2s; cursor:pointer; text-align:left; }
input[type="checkbox"] + .label.ellipsis, input[type="radio"] + .label.ellipsis{ display:grid; grid-template-columns:auto 1fr; }
input[type="checkbox"] + .label:hover, input[type="radio"] + .label:hover{ background-color:var(--color-grey-20); }
input[type="checkbox"]:checked + .label, input[type="radio"]:checked + .label{ background-color:var(--color-silver-40); }
input[type="checkbox"]:checked + .label:hover, input[type="radio"]:checked + .label:hover{ background-color:#c3c8e5; }
input[type="checkbox"]:checked + .label .fa-solid, input[type="radio"]:checked + .label .fa-solid{ color:var(--color-blue-60); }

/* Radio and checkboxes */
input + .label .check{ display:inline-block; width:16px; min-width:16px; min-height:16px; height:16px; border:2px solid var(--color-grey-40); position:relative; transition:border-color .2s; vertical-align:middle; top:0; margin-right:2px; }
input + .label .check::before{ content:''; position:absolute; width:10px; height:10px; background-color:var(--color-blue-60); top:1px; left:1px; transform:scale(0); transition:transform .2s; }
input:checked + .label{ color:var(--color-blue-80); }
input:checked + .label .check{ border-color:var(--color-blue-80); }
input:checked + .label .check::before{ transform:scale(1); }
input[type="radio"] + .label .check, input[type="radio"] + .label .check::before{ border-radius:100%; }

/* Text inputs */
input[type="text"], input[type="email"], input[type="number"], select{ padding:12px 16px; background-color:var(--color-grey-10); border:0; width:100%; border-radius:8px; font-family:var(--font-inter); font-size:inherit; color:inherit; line-height:inherit; }
textarea{ resize:vertical; padding:12px 16px; background-color:var(--color-grey-10); border:0; width:100%; border-radius:8px; font-family:var(--font-inter); font-size:inherit; color:inherit; line-height:inherit; max-width:720px; }

/* Slider */
.slider{ background-color:var(--color-grey-20); border-radius:8px; height:8px; position:relative; }
.slide .range{ position:absolute; top:0; left:0; width:0%; height:100%; border-radius:8px; background-color:var(--color-blue-60); }
input[type="range"] { -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer; width:100%; margin:0; position:relative; }
input[type="range"]:focus { outline:none; }
input[type="range"]::-webkit-slider-runnable-track { background-color:transparent; border-radius:8px; height:8px; }
input[type="range"]::-moz-range-track { background-color:var(--color-grey-20); border-radius:8px; height:8px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; margin-top:-8px; box-shadow:0px !important; outline:2px solid #fff; pointer-events:all; width:24px; height:24px; border-radius:50%; background:var(--color-blue-60) }
input[type="range"]::-moz-range-thumb { border:none; box-shadow:0px !important; outline:2px solid #fff; pointer-events:all; width:24px; height:24px; border-radius:50%; background:var(--color-blue-60) }


/* Cards */
.card{ border-radius:16px; padding:28px 24px; background-color:var(--white); align-content:flex-start; }
.card.border{ border:3px solid var(--color-grey-20); background-color:transparent; }


/* Blog cards */
.blog_card{ border-radius:16px; background-color:var(--white); padding:8px; align-content:flex-start; display:grid; position:relative; }
.blog_card .image{ background-color:var(--color-grey-10); height:180px; border-radius:8px 8px 0 0; overflow:hidden; position:relative; }
.blog_card .image img{ width:100%; height:100%; object-fit:cover; }
.blog_card .text{ padding:20px 16px 16px 16px; grid-gap:8px; }
.blog_card .text p{ margin:0; color:var(--color-silver-90); font-weight:normal; }
.blog_card .text .fa-solid{ color:var(--color-silver-60); }
.blog_card .text .fa-calendar-days{ position:relative; top:-1px; }


/* Hero */
.hero{ background-color:var(--color-blue-60); background-image:linear-gradient(to right, #334693, #246A9F, #5BC173); padding:104px 0; overflow:hidden; position:relative; }
.hero h1{ color:var(--white); }
.hero .wave{ position:absolute; top:0; }
.hero .wave.right{ right:0%; }
.hero .wave.left{ left:0%; }
.hero .wave svg{ position:absolute; top:0; left:0; width:100%; height:100%; }
.hero section{ position:relative; }


/* Button */
.button{ line-height:1.4; display:flex; width:fit-content; align-items:center; background:var(--color-yellow-60); color:var(--color-yellow-90); font-weight:bold; padding:10px 18px; border:0; border-radius:24px; cursor:pointer; transition:background-color .4s, color .2s; user-select:none; }
.button i{ margin-right:8px; font-size:12px; position:relative; }
.button:hover{ background:#d6da00; }
.button.light{ padding:7px 18px; background:transparent; color:var(--color-silver-90); border:3px solid var(--color-grey-20); }
.button.light:hover{ background:var(--color-grey-20); }
.button.dark{ padding:7px 18px; background:transparent; color:var(--color-silver-40); border:3px solid var(--color-blue-70); }
.button.dark:hover{ background:var(--color-blue-70); }
.button.loading{ color:rgba(255,255,255,0); position:relative; }
.button.loading::after{ content:'\f110'; font-family:var(--font-awesome); color:var(--color-yellow-80); left:calc(50% - 10px); top:calc(50% - 10px); position:absolute; font-size:20px; line-height:1; width:20px; height:20px; animation:rotate infinite 1s linear; }
@keyframes rotate{ 0%{ transform:rotate(0deg); } 60%{ transform:rotate(180deg); } 100%{ transform:rotate(360deg); } }
.button.disabled, .button.disabled:hover{ background-color:var(--color-grey-10) !important; color:var(--color-silver-50); opacity:0.6; cursor:default !important; border-color:var(--color-grey-10) !important; }

.button.fixed{ position:fixed; bottom:16px; right:16px; }


/* Tag */
.tag{ font-size:12px; font-weight:bold; padding:4px 12px; background-color:var(--color-grey-20); color:var(--color-silver-90); border-radius:24px; width:fit-content; display:flex; align-items:center; grid-gap:5px; }
.tag .fa-solid{ color:inherit; font-size:inherit; position:relative; }
.tag.green{ background-color:var(--color-green-70); color:white; }
.tag.green .fa-solid{ color:white; }
.tag.green .fa-star{ top:-1px; margin-left:-1px; }


/* Logo slider */
.logo_slider{ overflow:hidden; padding:32px 0px; }
.logo_slider .scroller{ display:flex; align-items:center; grid-gap:64px; animation:logo_slider 2000s infinite linear; }
.logo_slider img{ width:95px; height:63px; object-fit:contain; user-select:none; }
@keyframes logo_slider { 0%{ transform:translateX(0%); } 50%{ transform:translateX(calc(-100% + var(--wrapper-width))); } 100%{ transform:translateX(0%); } }


/* Review slider */
.reviews{ overflow:hidden; grid-gap:24px; }
.reviews h2{ margin:0; }
.reviews section{ display:flex; justify-content:space-between; align-items:center; }
.reviews .actions{ display:flex; grid-gap:8px; }
.reviews .actions button{ padding:10px 28px; line-height:1; }
.reviews .actions button i{ margin:0; top:0; }
.reviews .reviews_slider{ display:flex; overflow-x:auto; overflow-y:hidden; white-space:nowrap; grid-gap:16px; padding-bottom:20px; margin-bottom:-20px; }
.reviews .review:first-child{ margin-left:clamp(var(--gutter), calc((100vw - var(--wrapper-width)) / 2 + var(--gutter)), calc((100vw - var(--wrapper-width)) / 2 + var(--gutter))); }
.reviews .review:last-child{ margin-right:clamp(var(--gutter), calc((100vw - var(--wrapper-width)) / 2 + var(--gutter)), calc((100vw - var(--wrapper-width)) / 2 + var(--gutter))); }
.reviews .review{ min-width:calc((var(--wrapper-width) - 80px) / 2); white-space:initial; }
.reviews .review .rating_name{ display:flex; align-items:center; grid-gap:16px; }
.reviews .review .rating_name .rating{ display:flex; grid-gap:2px; }
.reviews .review .rating_name .rating i::before{ content:'\f005'; font-family:var(--font-awesome); font-weight:bold; font-style:normal; color:#F4D300; }
.reviews .review .rating_name .name{ display:block; }
.reviews .review .rating_name .name::before{ content:'~ '; display:inline; }


/* Flags  */
.flag{ width:1rem; height:0.66rem; background-image:url('../img/flags.svg'); background-size:19.67rem; box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.1) inset; display:inline-block; }
.flag.en{ background-size:19.67rem; background-position:-17.32rem -20.66rem; }
.flag.be{ background-size:19.67rem; background-position:-5.33rem -10rem; }
.flag.de{ background-size:19.67rem; background-position:-10.67rem -11rem; }
.flag.da{ background-size:19.67rem; background-position:-1.33rem -16rem; }
.flag.fr{ background-size:19.67rem; background-position:-12rem -2rem; }
.flag.ie{ background-size:19.67rem; background-position:0rem -14rem; }
.flag.it{ background-size:19.67rem; background-position:-5.33rem -7rem; }
.flag.lu{ background-size:19.67rem; background-position:0rem -13rem; }
.flag.nl{ background-size:19.67rem; background-position:-5.33rem -5rem; }
.flag.at{ background-size:19.67rem; background-position:-12rem -13rem; }
.flag.es{ background-size:19.67rem; background-position:-6.67rem -9rem; }
.flag.uk{ background-size:19.67rem; background-position:-17.33rem -4rem; }
.flag.ch{ background-size:19.67rem; background-position:-4rem 0rem; }
.flag.sv{ background-size:19.67rem; background-position:-13.33rem 9.67rem; }


/* Change language */
.modal[data-modal-name="change_lang"] .card,
.modal[data-modal-name="change_lang_auto"] .card{ grid-gap:24px; }
.modal[data-modal-name="change_lang"] .list,
.modal[data-modal-name="change_lang_auto"] .list{ display:grid; grid-template-columns:1fr 1fr; grid-gap:8px; }
.modal[data-modal-name="change_lang"] .list .button,
.modal[data-modal-name="change_lang_auto"] .list .button{ width:100%; }
.modal[data-modal-name="change_lang"] .list small,
.modal[data-modal-name="change_lang_auto"] .list small{ font-weight:normal; color:var(--color-silver-60); }
.modal[data-modal-name="change_lang"] .text,
.modal[data-modal-name="change_lang_auto"] .text{ grid-gap:8px; }


/* Pros and cons */
ul.cons, 
ul.pros{ display:grid; grid-gap:8px; margin:0 0 1rem 0; }
ul.cons:last-child, 
ul.pros:last-child{ margin:0; }
ul.cons li, 
ul.pros li{ position:relative; position:relative; padding-left:24px; }
ul.cons li::before, 
ul.pros li::before{ position:absolute; top:-1px; left:0; font-size:16px;font-family:var(--font-awesome); font-weight:bold; }
ul.pros li::before{ content:'\f058'; color:var(--color-green-60); }
ul.cons li::before{ content:'\f057'; color:#F3575A; }


/* Pagination */
.pagination{ display:flex; justify-content:center; grid-gap:8px; }
.pagination .button{ padding:0; width:44px; height:44px; justify-content:center; }
.pagination .button i{ margin:0; }
.pagination .button.active{ background-color:var(--color-green-60); color:white; border:0px; }


/* Accordion */
.accordion{ grid-gap:12px; display:grid; }
.accordion .accordion_item{ cursor:pointer; padding:24px 24px 22px 24px; background-color:white; border-radius:16px; }
.accordion .accordion_item .accordion_title{ font-size:16px; color:var(--color-blue-80); position:relative; padding-left:24px; user-select:none; display:block; }
.accordion .accordion_item .accordion_title::before{ content:'\f078'; font-family:var(--font-awesome); color:var(--color-silver-50); font-size:14px; position:absolute; top:5px; left:1px; line-height:1; transition:transform .1s; transform:scaleY(1); }
.accordion .accordion_item.open .accordion_title::before{ transform:scaleY(-1); }
.accordion .accordion_item .accordion_content{ height:0px; overflow:hidden; transition:height .2s; }
.accordion .accordion_item .accordion_content > div{ padding-top:8px; }


/* Loader */
.loader { position:relative; }
.loader .circle { border:6px solid var(--color-grey-20); border-top-color:var(--color-blue-50); border-radius:50%; width:80px; height:80px; margin:0 auto; transition:border-color .4s; animation:spin 1s cubic-bezier(0, 0, 0.6, 0.8) infinite; }
.loader .check { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) rotate(-45deg); width:27px; height:17px; margin-top:-2px; }
.loader .check i{ background:var(--color-green-70); position:absolute; }
.loader .check i:nth-child(1) { width:6px; height:0; top:0; left:0; transition:height .4s; }
.loader .check i:nth-child(2) { width:0; height:6px; bottom:0; left:0; transition:width .4s; }
.loader.done .circle{ border-color:var(--color-green-70); }
.loader.done .check i:nth-child(1) { height:17px; }
.loader.done .check i:nth-child(2) { width:27px; }
@keyframes spin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }




/* Tooltip */
.tooltip { position:fixed; top:0; left:0; pointer-events:none; z-index:9999; opacity:0; transition:opacity 0.3s ease; }
.tooltip > div{ max-width:280px; min-width:200px; background:var(--color-blue-100); color:var(--color-silver-50); padding:6px 10px; border-radius:6px; position:fixed; transform:translateY(-16px); transition:transform 0.3s ease; }
.tooltip > div::after{ content:''; position:absolute; border:7px transparent solid; }
.tooltip--top > div::after    { border-top-color:var(--color-blue-100);    top:100%;      left:50%;  transform:translateX(-50%); }
.tooltip--bottom > div::after { border-bottom-color:var(--color-blue-100); bottom:100%;   left:50%;  transform:translateX(-50%); }
.tooltip--left > div::after   { border-left-color:var(--color-blue-100);   left:100%;     top:50%;   transform:translateY(-50%); }
.tooltip--right > div::after  { border-right-color:var(--color-blue-100);  right:100%;    top:50%;   transform:translateY(-50%); }
.tooltip strong{ color:#fff; }
.tooltip ul{ padding-left:1rem; }
.tooltip ul li{ list-style-type:disc; padding-left:0rem; }
.tooltip.info_box{ align-items:center; justify-content:center; width:100vw; height:100vh; top:0; left:0; background-color:rgba(28,38,89,0.8); pointer-events:initial; }
.tooltip.info_box > div{ display:grid; height:fit-content; max-width:none; width:calc(100vw - 24px); position:static; background:white; color:var(--color-silver-90); padding:24px; pointer-events:initial; max-height:80vh; overflow-x:hidden; overflow-y:auto; }
.tooltip.info_box a{ font-weight:bold; width:fit-content; margin-top:16px; }
.tooltip.info_box strong{ color:var(--color-blue-80); }
.tooltip.info_box > div::after{ display:none; }


/* Notify */
.notify{ z-index:9999; animation:notify_show .4s both; }
.notify.fixed{ position:fixed; right:16px; bottom:16px; margin:0; border-radius:16px; }
.notify.fixed > div{ padding:12px 18px; }
.notify.fixed.hide{  animation:notify_hide .4s both; }
@keyframes notify_show{ 0%{ bottom:0px; opacity:0; } 100%{ bottom:16px; opacity:1; } }
@keyframes notify_hide{ 0%{ bottom:16px; opacity:1; } 100%{ bottom:0px; opacity:0; } }

.notify > div{ padding:4px 16px; display:flex; align-items:center; grid-gap:4px; background:var(--color-silver-40); font-weight:bold; box-shadow:0px 8px 16px rgba(0, 0, 0, 0.05); border-radius:8px; justify-content:space-between; margin-bottom:18px; cursor:pointer; }
.notify > div::after{ content:'\f00d'; font-family:var(--font-awesome); cursor:pointer; padding:8px; margin-right:-8px; position:relative; top:1px; }
.notify > div.error{ background: #ffd1d1; color: #930909; }
.notify > div.succes { background: var(--color-green-50); color: var(--color-green-90); }

/* ==================================================================================================================================================== */
/* ======================================================================= TOOL ======================================================================= */
/* ==================================================================================================================================================== */


/* Tool */
#tool{ overflow:hidden; position:relative; border-radius:16px; }
#tool .card{ align-content:stretch; padding:0; }
#tool .tool_hero{ position:absolute; opacity:0; top:0; left:0; width:100%; height:100%; background-size:100vw auto; background-repeat:no-repeat; background-position:center clamp(400px, calc(100vh - calc(100vw / 4)), calc(100vh - calc(100vw / 4))); transition:opacity .6s; }

#tool .optional,
#tool input[type="checkbox"]:checked + .label .optional, 
#tool input[type="radio"]:checked + .label .optional,
#tool input[type="checkbox"]:checked + .label .brackets,
#tool input[type="radio"]:checked + .label .brackets{ color:var(--color-silver-90) }
#tool h3{ font-size:1rem; }


/* Close button */
#tool .x{ background-color:var(--color-blue-90); border-radius:100%; pointer-events:none; position:fixed; top:16px; right:16px; cursor:pointer; padding:0; width:48px; height:48px; text-align:center; align-content:center; opacity:0; transition:opacity .2s; z-index:999; } 
#tool .x::before{ content:'\f00d'; font-family:var(--font-awesome); display:block; color:white; font-size:24px; line-height:1; }
#tool .x.enlarge_tool{ position:absolute; width:32px; height:32px; }
#tool .x.enlarge_tool::before{ content:'\e0a0'; font-size:14px; }


/* Slide */
#tool .slide{ position:absolute; display:none; width:100%; top:100%; padding:var(--gutter); height:calc(100% - 80px); grid-template-columns:1fr 0px; align-content:stretch; transition:top var(--tool-time-long); }
#tool .slide.active{ position:relative; left:0; top:0; display:grid; }
#tool .slide .content{ grid-gap:24px; align-content:flex-start; }
#tool .slide h2{ font-size:var(--font-size-h3); margin:0; }
#tool .slide input + .label .check{ display:none; }
#tool .slide *[data-parent]{ display:none; }


/* Answers */
#tool .slide .answers{ grid-gap:8px; align-content:flex-start; }
#tool .slide .answers.list .label { padding:10px 14px; font-weight:normal; width:fit-content; }
#tool .slide .answers.list .label .check{ display:flex; }
#tool .slide .answers.list.numbers{ grid-template-columns:1fr; grid-gap:36px; counter-reset:rows; }
#tool .slide .answers.list.numbers .row{ grid-template-columns:1fr; grid-gap:10px; }
#tool .slide .answers.list.numbers .row:not([data-parent]){ display:grid; }
#tool .slide .answers.list.numbers .row .question{ font-weight:bold; position:relative; padding-left:26px; }
#tool .slide .answers.list.numbers .row .question::before{ content:counter(rows); counter-increment:rows; font-size:12px; background:var(--color-silver-60); color:white; vertical-align:middle; min-width:20px; height:20px; text-align:center; line-height:20px; border-radius:24px; position:absolute; top:1px; left:0; }
#tool .slide .answers.list.numbers .row .options{ display:flex; grid-gap:8px; }


/* Specific slides */
#tool .slide[data-slide-name="software"] .answers{ grid-template-columns:repeat(2, 1fr); }
#tool .slide[data-slide-name="sector"] .answers{ grid-template-columns:repeat(2, 1fr); }
#tool .slide[data-slide-name="users"] .answers{ grid-template-columns:1fr; grid-gap:56px; }
#tool .slide[data-slide-name="users"] .answers.desktop .row{ grid-template-columns:128px 1fr; display:grid; align-items:center; grid-gap:16px; }
#tool .slide[data-slide-name="users"] .answers.mobile{ display:none; }
#tool .slide[data-slide-name="users"] .answers.mobile h2{ margin-bottom:8px; }
#tool .slide[data-slide-name="users"] .answers.mobile .row{ grid-gap:8px; }
#tool .slide[data-slide-name="users"] .answers.mobile .row .check{ display:block; }
#tool .slide[data-slide-name="users"] input{ font-size:20px; text-align:center; }
#tool .slide[data-slide-name="users"] .slider{ grid-column:1 / 3; }
#tool .slide[data-slide-name="erp_production_1"] .answers{ grid-template-columns:1fr 1fr; }
#tool .slide[data-slide-name="bi_1"] .answers{ grid-template-columns:1fr 1fr; }
#tool .slide[data-slide-name="bi_2"] .answers{ grid-template-columns:1fr 1fr; }
#tool .slide[data-slide-name="hrm_1"] .answers{ grid-template-columns:repeat(2, 1fr); }
#tool .slide[data-slide-name="loading"] .content{ justify-content:center; text-align:center; align-content:center; }
#tool .slide[data-slide-name="loading"] .loader{ margin-bottom:16px; }
#tool.maximize .slide[data-slide-name="loading"]{ grid-template-columns:1fr; }
#tool .slide[data-slide-name="form"] .form{ grid-gap:24px; }
#tool .slide[data-slide-name="form"] .loader{ margin-bottom:16px; }
#tool .slide[data-slide-name="form"] .answers{ grid-gap:16px; padding-bottom:16px; }
#tool .slide[data-slide-name="form"] .info_wrap .info{ background:#e2f5ee; text-align:center; grid-gap:4px; align-content:center; }
#tool .slide[data-slide-name="form"] .info_wrap .info h2,
#tool .slide[data-slide-name="form"] .info_wrap .info p{ color:var(--color-green-80); }
#tool .slide[data-slide-name="thanks"] svg{ margin-bottom:24px; }
#tool .slide[data-slide-name="thanks"] .answers{ min-height:180px; align-content:center; }


/* Info */
#tool .slide .info_wrap{ overflow-y:auto; overflow-x:hidden; width:100%; }
#tool .slide .info_wrap .info{ width:480px; height:0px; background-color:var(--color-blue-80); color:var(--color-silver-40); padding:var(--gutter); border-radius:16px; display:none; align-content:flex-start; align-items:flex-start; grid-template-rows:1fr auto; grid-gap:24px; }
#tool .slide .info_wrap .info strong{ color:#ffffff; }
#tool .slide .info_wrap .info .profile{ display:grid; grid-template-columns:auto 1fr; grid-gap:12px; align-items:center; }
#tool .slide .info_wrap .info .profile .image img{ width:64px; height:64px; border-radius:64px; }
#tool .slide .info_wrap .info .profile .name{ font-weight:bold; color:#fff; }


/* Buttons */
#tool .actions{ grid-template-columns:minmax(0, 1280px); justify-content:center; align-items:center; position:absolute; width:100%; padding:0 80px; height:160px; left:0; bottom:-320px; opacity:0; transition:bottom .2s .1s; }
#tool .actions::before{ display:none; content:''; position:absolute; top:0; right:calc((50% - 600px) + 480px); width:100%; height:100%; background-image:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%); pointer-events:none; opacity:1; transition:opacity .2s; }
#tool .actions .buttons{ display:flex; grid-gap:8px; align-items:center; width:fit-content; border-radius:24px; padding:0; background-color:transparent; transition:padding .2s, background-color .2s; }
#tool .actions > *{ position:relative }
#tool .actions .skip i{ margin:0 0 0 8px; }
#tool .actions .next i{ margin:0 0 0 8px; }
#tool .actions .prev{ background-color:white; }
#tool .actions .prev:hover{ background-color:var(--color-grey-10); }
#tool .actions .press_enter{ display:flex; grid-gap:4px; white-space:nowrap; }
#tool .actions .button.info{ display:none; color:var(--color-silver-90); background-color:var(--color-grey-20); border-color:var(--color-grey-20); font-size:22px; height:41px; width:41px; justify-content:center; font-weight:bold; font-family:var(--font-poppins); padding:0; }
#tool .actions .button.info.hide{ display:none !important; }


/* Progress bar */
#tool .progress_bar{ position:absolute; bottom:0; left:0; width:100%; height:0; transition:height .2s; }
#tool .progress_bar .progress{ height:100%; width:0%; transition:width .4s; background-color:var(--color-blue-50); border-radius:0 8px 8px 0; }


/* Animate card */
#tool.maximize .card,
#tool.animate .card{ position:fixed; z-index:99; }
#tool.maximize .card{ top:0 !important; left:0 !important; width:100% !important; height:100% !important; border-radius:0px; overflow:hidden; }
#tool.animate .card{ transition:width var(--tool-time-short), height var(--tool-time-short), left var(--tool-time-short), top var(--tool-time-short), border-radius var(--tool-time-short), padding var(--tool-time-short); }
#tool.animate .slide{ transition:grid-template-columns var(--tool-time-short), grid-gap var(--tool-time-short), padding var(--tool-time-short), top var(--tool-time-long); }
#tool.maximize .slide .content,
#tool.animate .slide .content{ transition:padding-top .2s; }

#tool.maximize h3{ font-size:var(--font-size-h3); }
#tool.maximize .x{ pointer-events:initial; opacity:1; }
#tool.maximize .slide{ grid-template-columns:minmax(0, 720px) 480px; padding:80px 80px 160px 80px; height:100vh; height:100dvh; grid-gap:80px; overflow-y:auto; justify-content:center; }
#tool.maximize .slide .info_wrap .info{ height:fit-content; /*height:auto;*/ display:grid; }
#tool.maximize .actions{ bottom:24px; opacity:1; pointer-events:initial; }
#tool.maximize .actions .buttons{ padding:24px; background-color:#fff; }
#tool.maximize .progress_bar{ height:8px; transition-delay:.2s; }

#tool.maximize .x.enlarge_tool,
#tool.opened.maximize .x.enlarge_tool{ opacity:0; }
#tool.opened .x.enlarge_tool{ opacity:1; cursor:pointer; pointer-events:initial; }

#tool.opened:not(.maximize) .card{ padding-bottom:73px; }
#tool.opened:not(.maximize) .actions{ bottom:0; opacity:1; padding:32px; height:105px; }
#tool.opened:not(.maximize) .actions::before{ opacity:0; right:0; }
    

/* Tool skip modal */
.modal[data-modal-name="skip_question"] .card{ max-width:520px; }
.modal[data-modal-name="skip_question"] .card h3{ margin-bottom:4px; }
.modal[data-modal-name="skip_question"] .actions{ display:flex; grid-gap:8px; }
.modal[data-modal-name="skip_question"] .confirm__yes i{ margin:0 0 0 8px; }


/* ==================================================================================================================================================== */
/* ======================================================================= HOME ======================================================================= */
/* ==================================================================================================================================================== */


body.home .hero{ padding:72px 0; grid-gap:56px; background-image:linear-gradient(to right, #20306d, #246A9F, #5BC173);  }
body.home .hero section.top{ grid-template-columns:720px 1fr; align-items:center; grid-gap:80px; }
body.home .hero .usps .usp{ display:flex; color:var(--white); font-weight:bold; grid-gap:6px; }
body.home .hero .usps .usp::before{ content:'\f00c'; font-family:var(--font-awesome); color:var(--color-green-50); }
body.home .hero .left{ padding-top:40px; grid-gap:24px; }
body.home .hero .left .usps{ display:none; }
body.home .hero .right .image{ background:white; height:580px; border-radius:100px; transform:rotate(7deg); position:relative; overflow:hidden; }
body.home .hero .right .image::before{ content:''; position:absolute; top:-5%; left:-5%; width:110%; height:110%; background-image:url('../img/hero-consultant.jpg'); background-size:cover; transform:rotate(-7deg); background-position:center top;}
body.home .hero .right .usps{ margin:-24px auto 0 auto; background-color:var(--color-blue-80); border-radius:24px; display:flex; grid-gap:32px; justify-content:space-between; padding:14px 24px; position:relative; right:18px; }
body.home .hero section.bottom{ grid-gap:8px; }
body.home .hero section.bottom h3{ color:var(--white); }
body.home .hero .wave.right{ height:100%; }
body.home .hero .wave.left{ height:40%; }

body.home .how_it_works{ background-color:var(--white); grid-gap:32px; }
body.home .how_it_works section{ grid-gap:32px; }
body.home .how_it_works .cards{ grid-template-columns:repeat(3, 1fr); grid-gap:16px; }
body.home .how_it_works .card{ padding-top:40px; grid-gap:8px; position:relative; }
body.home .how_it_works .card .tag{ position:absolute; top:0; left:24px; transform:translateY(-50%); }
body.home .how_it_works .card .image{ height:72px; align-content:center; }

body.home .why h2{ margin:0; }
body.home .why h2 span{ background-image:linear-gradient(to right, #307AE1, #69D864); background-clip:text; -webkit-background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
body.home .why section{ grid-gap:32px; }
body.home .why .cards{ grid-template-columns:repeat(2, 1fr); grid-gap:16px; }
body.home .why .card{ grid-gap:8px; }
body.home .why .card{ grid-gap:20px; }
body.home .why ul{ grid-gap:16px; margin:0; }

body.home .about{ background-color:var(--white); grid-gap:88px; }
body.home .about h2{ margin:0; }
body.home .about section.top{ grid-template-columns:1fr 1fr; grid-gap:80px; }
body.home .about section.top .left{ padding:64px 0; }
body.home .about section.top .text{ grid-gap:16px; }
body.home .about section.top .text p{ margin:0; }
body.home .about section.top .right .image{ transform:rotate(4deg); overflow:hidden; border-radius:64px; position:relative; }
body.home .about section.top .right .image img{ position:absolute; top:-5%; left:-5%; width:110%; height:110%; transform:rotate(-4deg); object-fit:cover; }
body.home .about section.bottom .card{ grid-template-columns:auto 1fr; align-items:center; grid-gap:16px 80px; padding:40px 56px; background-color:var(--color-grey-10); }
body.home .about section.bottom .card .text{ grid-gap:8px; height:100%; align-content:flex-end; }
body.home .about section.bottom .card p{ margin:0; } 
body.home .about section.bottom .buttons{ display:flex; grid-gap:8px; flex-wrap:wrap; height:100%; align-content:flex-start; }
body.home .about section.bottom .buttons .fa-solid{ color:var(--color-grey-50); }
body.home .about section.bottom .images{ display:flex; grid-row:1/3; }
body.home .about section.bottom .profile{ text-align:center; font-size:12px; }
body.home .about section.bottom .profile .image{ width:144px; height:144px; background:var(--color-grey-20); border-radius:100%; border:3px solid var(--color-grey-10); overflow:hidden; position:relative; }
body.home .about section.bottom .profile .image img{ width:100%; height:100%; object-fit:cover; }
body.home .about section.bottom .profile .image::after{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:radial-gradient(transparent 0%, transparent 50%, rgba(0,0,0,0.2) 100%); }
body.home .about section.bottom .profile + .profile{ margin-left:-20px; }

body.home .articles h2{ margin:0; }
body.home .articles section{ grid-template-columns:1fr 2px 2fr; grid-gap:32px; }
body.home .articles .events, body.home .articles .blogs{ grid-gap:16px; grid-template-rows:auto 1fr auto; align-items:stretch; }
body.home .articles .blogs .cards{ grid-template-columns:repeat(2, 1fr); grid-gap:16px; }
body.home .articles .line{ background-color:var(--color-grey-20); }

body.home .reviews_section{ background-color:var(--white); grid-gap:24px; }
body.home .reviews_section section{ grid-gap:24px; }

body.home .final_cta{ padding:64px 0; }
body.home .final_cta section{ grid-template-columns:1fr auto; grid-gap:80px; }
body.home .final_cta{ background-image:linear-gradient(to right, #307AE1, #69D864); }
body.home .final_cta .text{ grid-gap:16px; align-content:center; }
body.home .final_cta h2{ color:var(--white); margin:0; font-size:var(--font-size-h1); margin:0; }
body.home .final_cta p{ color:var(--white); margin:0; }
body.home .final_cta .button{ margin-top:8px; }
body.home .final_cta .right{ align-items:flex-end; align-content:center; }
body.home .final_cta .image{ transform:rotate(4deg); overflow:hidden; border-radius:64px; position:relative; width:400px; height:500px; }
body.home .final_cta .image img{ position:absolute; top:-5%; left:-5%; width:110%; height:110%; transform:rotate(-4deg); object-fit:cover; }
body.home .final_cta .wave.right{ height:100%; }
body.home .final_cta .wave.left{ height:50%; }



/* ==================================================================================================================================================== */
/* ===================================================================== ABOUT US ===================================================================== */
/* ==================================================================================================================================================== */


body.about .hero.main{ grid-gap:24px; }
body.about .hero.main section{ grid-gap:56px; }

body.about .hero.main .image{ width:100%; max-width:780px; aspect-ratio:13 / 6; margin:0 auto; overflow:hidden; position:relative; border-radius:5vw; transform:rotate(-2deg); }
body.about .hero.main .image img{ top:-5%; left:-5%; width:110%; height:110%; position:absolute; object-fit:cover; transform:rotate(2deg); object-position:center 40%; }

body.about .hero.main .title{ text-align:center; justify-items:center; max-width:800px; margin:0 auto; grid-gap:8px; }
body.about .hero.main .title p{ color:rgba(255,255,255,0.8); }

body.about .hero.main .usps{ grid-gap:16px; }
body.about .hero.main .usps h2{ color:white; font-size:var(--font-size-h3); margin:0; }
body.about .hero.main .usps .list{ grid-template-columns:repeat(3, 1fr); grid-gap:16px; }
body.about .hero.main .usps .card{ grid-gap:8px; }
body.about .hero.main .usps .card h3{ position:relative; padding-left:24px; }
body.about .hero.main .usps .card h3::before{ content:'\f058'; font-family:var(--font-awesome); color:var(--color-green-70); margin-right:6px; position:absolute; top:0; left:0; }

body.about .existence h2{ margin-bottom:1rem; }
body.about .existence section{ grid-template-columns:3fr 2fr; grid-gap:80px; }
body.about .existence .blog_card .button{ margin-top:8px; }

body.about .target section{ grid-template-columns:2fr 3fr; grid-gap:80px; }
body.about .target .left img{ width:100%; }
body.about .target .right{ align-content:center; }
body.about .target{ background-color:var(--white); }
body.about .target strong{ color:var(--color-blue-80) }

body.about .about{ position:relative; overflow:hidden; }
body.about .about section{ grid-template-columns:1fr 1fr; }
body.about .about .right .image img{ position:absolute; top:0%; left:calc(50% + 80px); aspect-ratio:1102 / 726; height:100%; object-fit:contain; object-position:left; }
body.about .about .right .image::after{ content:''; position:absolute; top:0; left:calc(50% + 80px); height:100%; aspect-ratio:1102 / 726; background:linear-gradient(90deg,rgba(244, 244, 244, 0) 80%, rgba(244, 244, 244, 1) 100%); }

body.about .mission{ padding:88px 0; }
body.about .mission section{ grid-template-columns:3fr 2fr; grid-gap:80px; }
body.about .mission .text{ grid-gap:16px; align-content:center; }
body.about .mission h2{ color:rgba(255,255,255,0.6); font-size:var(--font-size-h3); margin:0; }
body.about .mission h3{ color:white; font-size:var(--font-size-h1); line-height:1.2; }
body.about .mission p{ color:rgba(255,255,255,.8); margin:0; }
body.about .mission .right .image{ position:relative; transform:rotate(3deg); overflow:hidden; border-radius:80px; height:560px; }
body.about .mission .right .image img{ width:100%; position:absolute; top:-5%; left:-5%; width:110%; height:110%; transform:rotate(-3deg); object-fit:cover; }



/* ==================================================================================================================================================== */
/* =================================================================== HOW IT WORKS =================================================================== */
/* ==================================================================================================================================================== */

body.how_it_works .hero section{ grid-gap:24px; justify-items:center; }
body.how_it_works .hero h1{ text-align:center; }
body.how_it_works .hero .list{ grid-gap:16px; }
body.how_it_works .hero .card{ max-width:1000px; min-height:264px; margin:0 auto; padding:8px; grid-template-columns:1fr 1fr; grid-gap:16px; align-content:stretch; }
body.how_it_works .hero .card .text{ grid-gap:8px; padding:16px; align-content:center; }
body.how_it_works .hero .card h2{ font-size:var(--font-size-h3); margin:16px 0 0 0; }
body.how_it_works .hero .card .image{ background-color:var(--color-grey-20); border-radius:0 8px 8px 0; overflow:hidden; position:relative; }
body.how_it_works .hero .card .image img{ width:100%; height:100%; object-fit:cover; position:absolute; }

body.how_it_works .faq{ background-color:var(--color-grey-10); grid-gap:64px; }
body.how_it_works .faq section.title{ grid-gap:72px; justify-content:center; }
body.how_it_works .faq .text{ align-content:flex-start; position:relative; grid-gap:16px; text-align:center; justify-items:center; max-width:640px; }
body.how_it_works .faq .text h3{ order:-1; color:var(--color-silver-50); }
body.how_it_works .faq .text h2,
body.how_it_works .faq .text p{ margin:0; }
body.how_it_works .faq .text .buttons{ display:flex; flex-wrap:wrap; grid-gap:8px; padding-top:4px; }
body.how_it_works .faq section.list{ grid-template-columns:1fr 1fr; grid-gap:32px; }
body.how_it_works .faq section.list .card{ grid-gap:8px; padding:var(--gutter) }
body.how_it_works .faq section.list h3{ display:flex; grid-gap:8px; font-size:1rem; font-family:var(--font-inter); }
body.how_it_works .faq section.list h3 .fa-solid{ color:var(--color-silver-60); position:relative; top:2px; }


/* ==================================================================================================================================================== */
/* ======================================================================= BLOG ======================================================================= */
/* ==================================================================================================================================================== */


/* Overview page */
body.blog .hero section{ grid-gap:40px; }
body.blog .hero .title{ max-width:560px; margin:0 auto; text-align:center; grid-gap:8px; }
body.blog .hero .title h1{ margin:0; }
body.blog .hero .title p{ color:rgba(255,255,255,0.8); }
body.blog .hero .blog_card{ grid-template-columns:1fr 1fr; align-content:stretch; max-width:880px; margin:0 auto; }
body.blog .hero .blog_card .tag{ margin-bottom:8px; }
body.blog .hero .blog_card .text{ align-content:center; }
body.blog .hero .blog_card .image{ border-radius:0 8px 8px 0; height:100%; min-height:280px; }
body.blog .hero .blog_card .image img{ position:absolute; object-position:center center; }
body.blog .overview{ grid-gap:56px; }
body.blog .overview section.articles{ grid-template-columns:repeat(3, 1fr); grid-gap:16px; }
body.blog .overview section.articles h2{ grid-column:1 / 4; }
body.blog .overview section.articles h2.past{ margin-top:56px; }
body.blog .overview .blog_card .tag{ position:absolute; top:16px; left:16px; }


/* View page */
body.blog_view .hero section{ grid-gap:32px; }
body.blog_view .hero .image{ padding:8px; background-color:white; border-radius:16px; }
body.blog_view .hero .image img{ width:100%; border-radius:8px; }
body.blog_view .hero .title{ text-align:center; max-width:880px; margin:0 auto; grid-gap:12px; }
body.blog_view .hero .title h2{ font-size:var(--font-size-h3); line-height:1.6; color:rgba(255,255,255,0.8); }
body.blog_view .hero .tags{ display:flex; flex-wrap:wrap; grid-gap:8px; justify-content:center; }

body.blog_view .blog_content section{ max-width:768px; }
body.blog_view .blog_content h2{ margin-top:2rem; }
body.blog_view .blog_content h2:first-child{ margin-top:0; }

body.blog_view .blog_content .index{ margin-top:1rem; }
body.blog_view .blog_content .index h2{ font-size:var(--font-size-h3); }
body.blog_view .blog_content .index ul{ padding-left:1rem; display:grid; grid-gap:6px; }
body.blog_view .blog_content .index ul li{ display:list-item; list-style:disc; padding-left:8px; }



/* ==================================================================================================================================================== */
/* ===================================================================== CONTACT ====================================================================== */
/* ==================================================================================================================================================== */


body.contact .hero section{ grid-gap:40px; justify-items:center; }
body.contact .hero .title{ text-align:center; max-width:560px; margin:0 auto; grid-gap:8px; }
body.contact .hero .title p{ color:rgba(255,255,255,0.8); }

body.contact #contact_form{ display:grid; grid-gap:16px; grid-template-columns:1fr 1fr; max-width:880px; }
body.contact #contact_form h2{ font-size:var(--font-size-h3); margin:0; }
body.contact #contact_form .row{ grid-column:1 / 3; display:grid; }
body.contact #contact_form textarea{ width:100%; max-width:none; }

body.contact .offices{ background-color:var(--color-grey-20); }
body.contact .offices section{ grid-gap:24px; }
body.contact .offices .list{ grid-template-columns:repeat(3, 1fr); grid-gap:24px; }
body.contact .offices .card{ grid-gap:8px; }
body.contact .offices .card p{ margin:0; }
body.contact .offices .card .image{ justify-content:center; align-content:center; height:206px; margin-bottom:24px; }
body.contact .offices .card .image svg{ width:auto; height:100%; }


/* ==================================================================================================================================================== */
/* ===================================================================== REGISTER ===================================================================== */
/* ==================================================================================================================================================== */

body.register .hero section{ grid-gap:40px; justify-items:center; }
body.register .hero .title{ text-align:center; max-width:640px; margin:0 auto; grid-gap:8px; }
body.register .hero .title p{ color:rgba(255,255,255,0.8); }

body.register #register_form{ display:grid; grid-gap:16px; grid-template-columns:1fr 1fr; max-width:880px; width:100%; }
body.register #register_form h2{ font-size:var(--font-size-h3); margin:0; } 
body.register #register_form .row{ grid-column:1 / 3; display:grid; padding-top:24px; }
body.register #register_form .row:first-of-type{ padding-top:0; }
body.register #register_form textarea{ width:100%; max-width:none; }

body.register #register_form .street_and_number,
body.register #register_form .city_and_zip{ display:grid; grid-gap:12px; grid-template-columns:2fr 1fr; }


/* ==================================================================================================================================================== */
/* ====================================================================== LEGAL ======================================================================= */
/* ==================================================================================================================================================== */

body.legal main section{ max-width:880px; }
body.legal main ul{ padding-left:1rem; display:grid; grid-gap:6px; margin-bottom:1rem; }
body.legal main li{ display:list-item; list-style:disc; padding-left:8px; }
body.legal main h2{ margin-top:2rem; }
body.legal main h2:first-child{ margin-top:0; }
body.legal main table{ width:fit-content; }

/* ==================================================================================================================================================== */
/* ======================================================================= ERROR ====================================================================== */
/* ==================================================================================================================================================== */

body.error main{ height:100%;  }
body.error .hero{ align-content:center; min-height:400px; }
body.error h1{ font-size:80px; }
body.error h2{ color:rgba(255,255,255,0.7); }



/* ==================================================================================================================================================== */
/* ======================================================================= 1354 ======================================================================= */
/* ==================================================================================================================================================== */


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

	/* Tool */
	#tool.maximize .slide{ grid-template-columns:1fr 35vw; grid-gap:40px; }
	#tool .actions{ grid-template-columns:1fr auto; }
	#tool .actions::before { right:calc(35vw + 80px); }
	#tool .slide .info_wrap .info{ width:35vw; }

}


/* ==================================================================================================================================================== */
/* ======================================================================= 1240 ======================================================================= */
/* ==================================================================================================================================================== */


@media screen and (max-width:1240px) {
	
	/* Navigation */
	header ul{ grid-gap:24px; }

	/* Home */
	body.home .hero section.top{ grid-template-columns:2fr 1fr; }
	body.home .hero .right .image{ border-radius:72px; transform:rotate(5deg); }
	body.home .hero .right .image::before { left:-20%; width:140%; transform:rotate(-5deg); }

	body.home .about section.top{ grid-gap:40px; }
	body.home .about section.bottom .card{ padding:32px; grid-gap:40px; }
	body.home .about section.bottom .card .text{ align-content:center; }
	body.home .about section.bottom .card .images{ grid-row:1/2; }
	body.home .about section.bottom .buttons{ grid-column:1/3; }

	body.home .final_cta section{ grid-gap:40px; }


	/* About */
	body.about .about .right .image img{ left:calc(50% + 24px); height:440px; }
	body.about .about .right .image::after{ left:calc(50% + 24px); }


	/* Footer */
	footer .bottom li.long{ flex-grow:unset; }


}


/* ==================================================================================================================================================== */
/* ======================================================================= 1000 ======================================================================= */
/* ==================================================================================================================================================== */


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


	:root { 
		--font-size-h1:48px;
	}

	body{ padding-top:72px; }
	body.page{ padding-top:72px; grid-template-rows:1fr auto; }

	.hero{ padding:56px 0; }
	.logo_slider .scroller{ animation-duration:800s; }
	.block{ padding:64px 0; }
	
	/* Review */
	.reviews .review{ min-width:80vw; }
	.reviews .review:first-child{ margin-left:var(--gutter); }
	.reviews .review:last-child{ margin-right:var(--gutter); }
	.reviews .review .rating_name{ display:grid; }


	/* Navigation */
	header.sub{ display:none; }

	header .logo img { width:224px; }
	header.main{ height:72px; min-height:auto; position:fixed; top:0; left:0; width:100%; z-index:99; box-shadow:0px 8px 16px rgba(0,0,0,0.05); }
	header.main .hb_menu{ display:flex; cursor:pointer; padding:10px; border-radius:12px; grid-gap:8px; } 
	header.main .hb_menu .lines{ display:grid; grid-gap:3px; }
	header.main .hb_menu .text{ font-family:var(--font-poppins); }
	header.main .hb_menu i{ background-color:var(--color-blue-50); height:3px; width:20px; position:relative; transition:opacity .2s, transform .2s; opacity:1; transform:rotate(0deg); margin:0; }
	header.main .hb_menu i:nth-child(2)::after{ content:''; top:0; left:0; width:100%; height:100%; position:absolute; transform:rotate(0deg); background-color:inherit; transition:transform .2s; }
	header.main .menu{ display:none; align-content:stretch; }
	header.main ul{ display:flex; flex-direction:column; height:100%; align-content:center; padding:32px var(--gutter); grid-gap:16px; align-content:flex-start; overflow-y:auto; overflow-x:hidden; }
	header.main li{ height:auto; font-size:clamp(24px, 3vw, 3vw); font-family:var(--font-poppins); width:100%; }
	header.main li a{ color:var(--color-blue-10); }
	header.main li.long{ flex-grow:1; align-content:flex-start; }
	header.main li.active{ box-shadow:none; }
	header.main li.active a{ color:white; }
	header.main li.mobile_only{ display:grid; }
	header.main li.mobile_only a{ font-size:1rem; font-family:var(--font-inter); font-weight:normal; }
	header.main li a.button{ color:var(--color-yellow-90); font-size:1rem; font-weight:bold; width:100%; }

	header.main input:checked ~ .hb_menu i{ opacity:0; }
	header.main input:checked ~ .hb_menu i:nth-child(2){ opacity:1; transform:rotate(45deg); }
	header.main input:checked ~ .hb_menu i:nth-child(2)::after{ transform:rotate(-90deg); }
	header.main input:checked ~ .menu { display:grid; position:absolute; top:72px; left:0; width:100%; height:calc(100dvh - 72px); background-color:var(--color-blue-80); }
	

	/* Home */
	body.home .hero{ padding:40px 0; overflow:hidden; background-image:linear-gradient(to bottom, #334693, #246A9F, #5BC173); }
	body.home .hero section.top{ padding-right:0; grid-gap:56px; width:110%; grid-template-columns:3fr 2fr; }
	body.home .hero .right .image{ height:460px; }
	body.home .hero .right .usps{ flex-direction:column; grid-gap:4px; right:0; margin:-48px 0 0 0; }
	body.home .hero .wave{ display:none; }
	body.home .about section.top .left{ padding:0; }
	body.home .articles section{ grid-template-columns:1fr; grid-gap:64px; }
	body.home .articles .line{ display:none; }
	body.home .articles .events .cards,
	body.home .articles .blogs .cards{ grid-template-columns:1fr 1fr; grid-gap:16px; }
	body.home .articles .events{ order:1; }
	body.home .final_cta section{ padding-right:0; width:105%; }
	body.home .final_cta h2{ font-size:var(--font-size-h2); }
	body.home .final_cta .image{ width:360px; height:420px; }


	/* About */
	body.about .existence section { grid-gap:40px; }
	body.about .target section{ grid-gap:40px; }
	body.about .mission section{ grid-gap:40px; }
	body.about .mission .right .image{ height:480px; }


	/* How it works */
	body.how_it_works .faq section.list{ grid-gap:16px; }
	body.how_it_works .faq section.list .card{ grid-gap:4px; }
	body.how_it_works .faq section.list h3{ flex-direction:column; grid-gap:24px; top:0; }
	body.how_it_works .faq section.list .fa-solid{ font-size:24px; }


	/* Blog */
	body.blog .overview section.articles{ grid-template-columns:1fr 1fr; }
	body.blog .overview section.articles h2{ grid-column:1 / 3; }


	/* Contact */
	body.contact .offices .list{ grid-template-columns:repeat(2, 1fr); }


	/* Tool */
	input[type="checkbox"] + .label, input[type="radio"] + .label{ padding:14px 18px }

	#tool .tool_hero{ display:none; }
	#tool.maximize .actions .buttons{ padding:0; background-color:transparent; }
	#tool.maximize .actions{ bottom:0; }
	#tool .slide .answers.list.numbers .row .options{ flex-wrap:wrap; }
	#tool.maximize .slide{ padding:40px var(--gutter) 104px var(--gutter); }
	#tool.maximize .actions{ padding:0 var(--gutter); }
	#tool .x{ top:12px; right:12px; }
	#tool .x::before{ font-size:20px;}
	#tool .x.enlarge_tool {  top:4px; right:10px; }
	#tool .actions .press_enter{ display:none; }
	#tool .actions::before { display:block; right:calc(35vw + 40px); }
	#tool .actions{ height:104px; }

	



}


/* ==================================================================================================================================================== */
/* ======================================================================== 900 ======================================================================= */
/* ==================================================================================================================================================== */


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

	/* Home */
	body.home .about section.bottom .card{ grid-template-columns:1fr; grid-gap:32px 0; } 
	body.home .about section.bottom .card .text{ grid-column:1 / 2; text-align:center; }
	body.home .about section.bottom .buttons{ justify-content:center; }
	body.home .about section.bottom .card .images{ justify-content:center; margin-top:-64px; }
	body.home .about section.bottom .profile .name{ display:none; }
	body.home .about section.bottom .profile .image{ width:104px; height:104px; border:0; }

	body.home .about section.top{ padding-right:0; width:105%; }

	/* How it works */

}


/* ==================================================================================================================================================== */
/* ======================================================================== 800 ======================================================================= */
/* ==================================================================================================================================================== */


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

	/* Reviews */
	.reviews section{ display:grid; grid-template-columns:1fr; }
	

	/* Home */
	body.home .hero{ grid-gap:72px; }
	body.home .hero section.top{ grid-template-columns:1fr; width:100%; padding:0 var(--gutter); grid-gap:24px; }
	body.home .hero .left{ order:1; grid-gap:24px; padding-top:0; }
	body.home .hero .left .usps{ display:flex; grid-gap:24px; }
	body.home .hero .right .image{ max-width:500px; width:100%; height:280px; justify-content:center; transform:rotate(3deg); border-radius:40px; }
	body.home .hero .right .image::before{ transform:rotate(-3deg); }
	body.home .hero .right .usps{ display:none; }
	body.home .how_it_works .cards{ grid-template-columns:1fr; grid-gap:32px; }
	body.home .how_it_works .cards .card:nth-child(1){ margin-right:40px; }
	body.home .how_it_works .cards .card:nth-child(2){ margin-left:40px; }
	body.home .how_it_works .cards .card:nth-child(3){ margin-right:40px; }
	body.home .why .cards{ grid-template-columns:1fr; }

	body.home .about section.top{ grid-template-columns:1fr; padding:0 var(--gutter); width:100%; }
	body.home .about section.top .left{ order:1; }
	body.home .about section.top .right .image{ height:256px; border-radius:40px; }
	body.home .about section.top .right .image img{ top:-10%; left:-10%; width:120%; height:120%; object-position:center 25%; }
	body.home .about{ grid-gap:104px; }

	body.home .final_cta section{ grid-template-columns:1fr; padding:0 var(--gutter); width:100%; }
	body.home .final_cta .left{ order:1; }
	body.home .final_cta .text{ padding:0; }
	body.home .final_cta .image{ height:256px; width:100%; max-width:400px; border-radius:40px; }
	body.home .final_cta .image img{ top:-10%; left:-10%; width:120%; height:120%; object-position:center 25%; }


	/* How it works */
	body.how_it_works .hero h1{ text-align:left; }
	body.how_it_works .faq section.list{ grid-template-columns:1fr; }


	/* About */
	body.about .hero.main .usps .list{ grid-template-columns:1fr; }
	body.about .hero.main .title { text-align:left; justify-items:flex-start; }
	body.about .existence section{ grid-template-columns:1fr; }
	body.about .target section{ grid-template-columns:1fr; }
	body.about .target .left img{ max-width:480px; }

	body.about .about{ padding-top:0; }
	body.about .about section{ grid-template-columns:1fr; padding:0; }
	body.about .about .left{ order:1; padding:0 var(--gutter); }
	body.about .about .right .image{ padding-left:var(--gutter); }
	body.about .about .right .image img{ position:static; aspect-ratio:unset; height:auto; width:130%; }
	body.about .about .right .image::after{ display:none; }

	body.about .mission section{ grid-template-columns:1fr; }
	body.about .mission .right{ display:none; }

	/* Blog */
	body.blog .hero .title{ margin:0; text-align:left; }


	/* Contact */
	body.contact .hero section{ justify-items:flex-start; }
	body.contact .hero .title{ margin:0; text-align:left; }
	body.contact .offices .card .image{ height:128px; justify-content:flex-start; margin-bottom:16px; }
	body.contact .offices .card .image svg{ height:100%; }


	/* Register supplier */
	body.register .hero section{ justify-items:flex-start; }
	body.register .hero .title{ margin:0; text-align:left; }

	
	/* Footer */
	footer .top{ padding:48px 0; }
	footer .top section{ display:grid; grid-template-columns:1fr; grid-gap:48px; }
	footer .top .buttons{ display:grid; grid-template-columns:1fr; }
	footer .top .buttons .button{ width:100%; }
	footer .bottom{ padding:48px 0; }
	footer .bottom ul{ display:grid; grid-template-columns:1fr 1fr; }


	/* Tool */
	#tool.maximize .slide{ grid-template-columns:1fr; grid-gap:40px; }
	#tool.maximize .slide .content{ padding-top:20px; }
	#tool .slide .info_wrap{ display:none; }
	#tool .actions .button.info{ display:grid; }
	#tool .actions::before { right:0; }
	
	#tool .slide[data-slide-name="software"] .answers{ grid-template-columns:1fr; }
	#tool .slide[data-slide-name="sector"] .answers{ grid-template-columns:1fr; }
	#tool .slide[data-slide-name="erp_production_1"] .answers{ grid-template-columns:1fr; }
	#tool .slide[data-slide-name="bi_1"] .answers{ grid-template-columns:1fr; }
	#tool .slide[data-slide-name="bi_2"] .answers{ grid-template-columns:1fr; }
	#tool .slide[data-slide-name="hrm_1"] .answers{ grid-template-columns:1fr; }

	#tool .slide[data-slide-name="users"] .answers.desktop{ display:none; }
	#tool .slide[data-slide-name="users"] .answers.mobile{ display:grid; }

	#tool.maximize .slide[data-slide-name="form"] .info_wrap{ order:-1; }
	#tool .slide[data-slide-name="form"] .info_wrap{ display:grid; overflow:unset; }
	#tool .slide[data-slide-name="form"] .info_wrap .info{ width:100%; }
	#tool .slide[data-slide-name="form"] .loader { transform:scale(0.8); margin-bottom:6px; }

	#tool .x{ background-color:transparent; top:0; right:0; padding:12px 16px; }
	#tool .x::before{ color:var(--color-blue-80); font-size:24px; }
}

/* ==================================================================================================================================================== */
/* ======================================================================== 720 ======================================================================= */
/* ==================================================================================================================================================== */


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

	/* Home */
	body.home .articles .events .cards,
	body.home .articles .blogs .cards{ grid-template-columns:1fr; }


	/* How it works */
	body.how_it_works .hero .card{ grid-template-columns:1fr; grid-gap:8px; }
	body.how_it_works .hero .card .image{ height:240px; order:-1; border-radius:8px 8px 0 0; }
	body.how_it_works .hero .card .image img{ object-position:top; }
	body.how_it_works .hero .card h2{ margin:8px 0 0 0; }

	/* Contact */
	body.contact .offices .card .image{ height:104px; }


	/* Blog */
	body.blog .hero .blog_card{ grid-template-columns:1fr; }
	body.blog .hero .blog_card .image{ border-radius:8px 8px 0 0; order:-1; min-height:auto; aspect-ratio:16/9; }
	body.blog .overview section.articles{ grid-template-columns:1fr; }
	body.blog .overview section.articles h2{ grid-column:1 / 2; margin:0; }
	body.blog_view .hero .title{ text-align:left; }
	body.blog_view .hero .tags{ justify-content:flex-start; }

}


/* ==================================================================================================================================================== */
/* ======================================================================== 600 ======================================================================= */
/* ==================================================================================================================================================== */


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

	:root { 
		--font-size-h1:36px;
		--font-size-h2:26px;
		--font-size-h3:17px;
		--gutter:20px;
	}

	/* Tool */
	#tool .actions .skip span,
	#tool .actions .prev span{ display:none; }
	#tool .actions .skip i,
	#tool .actions .prev i{ margin:0; font-size:16px; }
	#tool .actions .buttons{ align-items:stretch; }


	/* Home */
	body.home .hero .card .answers{ grid-template-columns:1fr; }
	body.home .about section.bottom .card{ padding:24px; }
	body.home .about section.bottom .buttons .button{ width:100%; }
	body.home .about section.bottom .card .text{ text-align:left; }
	body.home .how_it_works section{ grid-gap:16px; }
	body.home .why section{ grid-gap:16px; }
	body.home .hero .right .image { height:240px; }


	/* About */
	body.about .hero.main section{ grid-gap:32px; }


	/* Contact */
	body.contact .offices .list{ grid-template-columns:1fr; grid-gap:16px; }


	/* Change language */
	.modal[data-modal-name="change_lang"] .list,
	.modal[data-modal-name="change_lang_auto"] .list{ grid-template-columns:1fr; }

}


/* ==================================================================================================================================================== */
/* ======================================================================== 500 ======================================================================= */
/* ==================================================================================================================================================== */


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

	/* Contact */
	body.contact .hero section{ grid-gap:32px; }
	body.contact #contact_form{ grid-template-columns:1fr; }
	body.contact #contact_form .row{ grid-column:1/2; }
	
	body.register #register_form{ grid-template-columns:1fr; }
	body.register #register_form .row{ grid-column:1/2; }

	/* Footer */
	footer .bottom ul{ grid-template-columns:1fr; }

}

/* ==================================================================================================================================================== */
/* ======================================================================== 400 ======================================================================= */
/* ==================================================================================================================================================== */


@media screen and (max-width:400px) {
	
	:root { 
		--gutter:20px;
	}

	header .logo img { width:200px; }
	header.main .hb_menu .text{ display:none; }

	body.register #register_form .city_and_zip{ grid-template-columns:3fr 2fr; }

}