/*
Theme Name: BlankSlate
Theme URI: https://opencollective.com/blankslate
Author: Bryan Hadaway
Author URI: https://opencollective.com/blankslate#section-contributors
Description: Donate: https://opencollective.com/blankslate. Learn: https://blankslate.me/. BlankSlate is the definitive WordPress boilerplate starter theme. I've carefully constructed the most clean and minimalist theme possible for designers and developers to use as a base to build websites for clients or to build completely custom themes from scratch. Clean, simple, unstyled, semi-minified, unformatted, and valid code, SEO-friendly, jQuery-enabled, no programmer comments, standardized and as #FAFAFA label as possible, and most importantly, the CSS is reset for cross-browser-compatability, with no intrusive visual CSS styles added whatsoever. A perfect skeleton theme. For support and suggestions, go to: https://github.com/bhadaway/blankslate/issues. Thank you.
Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 2024.2
Requires at least: 5.2
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: blankslate

BlankSlate WordPress Theme 2011-2024
BlankSlate is distributed under the terms of the GNU GPL
*/

@font-face {
    font-family: 'Author';
    src: url('Author-Medium.woff2') format('woff2'),
         url('Author-Medium.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Author';
    src: url('Author-Light.woff2') format('woff2'),
         url('Author-Light.woff') format('woff');
    font-weight: 300;
    font-style: light;
}
@font-face {
    font-family: 'Author';
    src: url('Author-Medium.woff2') format('woff2'),
         url('Author-Medium.woff') format('woff');
    font-weight: 500;
    font-style: medium;
}
@font-face {
    font-family: 'Author';
    src: url('Author-Bold.woff2') format('woff2'),
         url('Author-Bold.woff') format('woff');
    font-weight: 700;
    font-style: bold;
}



html {
    font-size: 10px;
}

#root {
    background-color: #000313;
    color: #FAFAFA;
    max-width: 100%;
}


html {
    font-size: 10px;
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
    max-width: 100%;
}

body {
    font-family: "Author", sans-serif;
    background-color: #F8F5E9;
	margin: 0;
	padding: 0;
	font-weight: 400;
    font-family: 'Author';
}

p, a, span, h1, h2, h3, h4, h5, h6 {
	padding: 0;
	margin: 0;
}

#root a {
	color: #1E1B1B;
    max-width: 100%;
}

#root .kontener, .kontener-maxi {
    max-width: 1500px;
	justify-self: center;
    width: calc(100% - 8rem);
    padding: 0;
}

#root .kontener-sz {
	max-width: 1500px;
    width: calc(100% - 8rem);
	justify-self: center;
}
#white-section {
	background-color: white;
	width: 100%;
}
#gray-section {
	background-color: #E6E6E6;
	width: 100%;
}
#root .black, #root .black h1, #root .black h2, #root .black h3, #root .black h4, #root .black a, #root .black span, #root .black p {
    color: #000313;
}
#root .black-bg {
    background-color: #1E1B1B;
}
#root .white {
    background-color: white;
}
#blue-button .white-text a {
	color: white!important;
}
#root .uppercase {
	text-transform: uppercase;
}
.rozmiar16, .rozmiar16 h1, .rozmiar16 h2, .rozmiar16 h3, .rozmiar16 h4, .rozmiar16 h5, .rozmiar16 h6, .rozmiar16 p, .rozmiar16 a, .rozmiar16 span {
    font-size: 1.6rem;
}

.rozmiar20, .rozmiar20 h1, .rozmiar20 h2, .rozmiar20 h3, .rozmiar20 h4, .rozmiar20 h5, .rozmiar20 h6, .rozmiar20 p, .rozmiar20 a, .rozmiar20 span {
    font-size: 2rem;
}
.rozmiar22, .rozmiar22 h1, .rozmiar22 h2, .rozmiar22 h3, .rozmiar22 h4, .rozmiar22 h5, .rozmiar22 h6, .rozmiar22 p, .rozmiar22 a, .rozmiar22 span {
    font-size: 2rem;
}
.rozmiar24, .rozmiar24 h1, .rozmiar24 h2, .rozmiar24 h3, .rozmiar24 h4, .rozmiar24 h5, .rozmiar24 h6, .rozmiar24 p, .rozmiar24 a, .rozmiar24 span {
    font-size: 2.4rem;
}
.rozmiar26, .rozmiar26 h1, .rozmiar26 h2, .rozmiar26 h3, .rozmiar26 h4, .rozmiar26 h5, .rozmiar26 h6, .rozmiar26 p, .rozmiar26 a, .rozmiar26 span {
    font-size: 2.6rem;
}
.rozmiar28, .rozmiar28 h1, .rozmiar28 h2, .rozmiar28 h3, .rozmiar28 h4, .rozmiar28 h5, .rozmiar28 h6, .rozmiar28 p, .rozmiar28 a, .rozmiar28 span {
    font-size: 2.8rem;
}
.rozmiar32, .rozmiar32 h1, .rozmiar32 h2, .rozmiar32 h3, .rozmiar32 h4, .rozmiar32 h5, .rozmiar32 h6, .rozmiar32 p, .rozmiar32 a, .rozmiar32 span {
    font-size: 3.2rem;
}

.rozmiar48, .rozmiar48 h1, .rozmiar48 h2, .rozmiar48 h3, .rozmiar48 h4, .rozmiar48 h5, .rozmiar48 h6, .rozmiar48 p, #root .rozmiar48 a, .rozmiar48 span {
    font-size: 4.8rem;
}
.rozmiar72, .rozmiar72 h1, .rozmiar72 h2, .rozmiar72 h3, .rozmiar72 h4, .rozmiar72 h5, .rozmiar72 h6, .rozmiar72 p, .rozmiar72 a, .rozmiar72 span {
    font-size: 7.2rem;
	line-height: 95%;
}

.rozmiar80, .rozmiar80 h1, .rozmiar80 h2, .rozmiar80 h3, .rozmiar80 h4, .rozmiar80 h5, .rozmiar80 h6, .rozmiar80 p, .rozmiar80 a, .rozmiar80 span {
    font-size: 8rem;
}

#root .spacing-2 {
    letter-spacing: -2px;
}

#root .spacing-1 {
    letter-spacing: -1px;
}

.line-100, .line-100 p, #root .line-100 h1, .line-100 h2, .line-100 h3, .line-100 h4, .line-100 h5, .line-100 h6, .line-100 a, .line-100 span {
    line-height: 1;
}

.line-120, .line-120 p, .line-120 h1, .line-120 h2, .line-120 h3, .line-120 h4, .line-120 h5, .line-120 h6, .line-120 a, .line-120 span {
    line-height: 1.2;
}

.line-140, .line-140 h1, .line-140 h2, .line-140 h3, .line-140 h4, .line-140 h5, .line-140 h6,  .line-140 p,  .line-140 a, .line-140 span {
    line-height: 1.4;
}

.line-150, .line-150 h1, .line-150 h2, .line-150 h3, .line-150 h4, .line-150 h5, .line-150 h6,  .line-150 p,  .line-150 a, .line-150 span {
    line-height: 1.5;
}

.line-160, .line-160 h1, .line-160 h2, .line-160 h3, .line-160 h4, .line-160 h5, .line-160 h6, .line-160 p, .line-160 a, .line-160 span {
    line-height: 1.6;
}

.regular, .regular h1, .regular h2, .regular h3, .regular h4, .regular h5, .regular h6, #root .regular p, .regular a, .regular span {
    font-weight: 400;
}

#root .light, #root .light h1, #root .light h2, #root .light h3, #root .light h4, #root .light h5, #root .light h6, #root .light p, #root .light a, #root .light span {
    font-weight: 300;
}


.medium, .medium h1, .medium h2, .medium h3, .medium h4, .medium h5, .medium h6, #root .medium p, .medium a, .medium span {
    font-weight: 500;
    font-variation-settings: "wght" 500;
}

.semibold, .semibold h1, .semibold h2, .semibold h3, .semibold h4, .semibold h5, .semibold h6, .semibold p, .semibold a, .semibold span {
    font-weight: 600;
}

.bold, .bold p, .bold a, .bold span {
    font-weight: 700;
}

.width60 {
	width: 60%;
}

#root .center {
	text-align: center;
}


#root .homepage {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#root div#start {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

div#start-top {
    display: flex;
    flex-direction: column;
}

div#start-bottom {
    display: flex;
    flex-direction: column;
    position: relative;
}

div#benefits-frames {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30rem;
}

div#encouragements-to-sign-up {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
    align-items: center;
}

div#simple-steps {
    display: flex;
    flex-direction: row;
}

div#experts-section {
    display: flex;
    flex-direction: row;
    gap: 6.4rem;
	padding-bottom: 27rem;
    width: calc(100% - 8rem);
    justify-content: center;
}

.expert {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    width: 25%;
}

div#opinions {
    display: flex;
    flex-direction: row;
    background: url(https://cohesionindex.com/wp-content/uploads/2025/03/Ellipse-7.png);
    background-repeat: no-repeat;
    background-position: center;
    align-items: center;
    padding-top: 4rem;
    padding-bottom: 10rem;
    background-size: 30%; 
    transition: background-size 0.3s ease-out; 
}

#root span.blue-back, .blue-back {
    background-color: #2D0FDC;
    color: white !important;
    position: relative;
    z-index: 10;
    font-size: inherit;
}

#white-section span.blue-back, #white-section .blue-back {
    background-color: transparent;
}

.blue-back:before {
    content: '';
    width: 100%;
    background-color: #2D0FDC;
    display: flex;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: -1;
    left: 0;
    overflow: hidden;
    transition: all 1s;
    animation: bluestart .5s;
}

#root .homepage {
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    overflow: clip;
}

#video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    z-index: -1;
    opacity: 0.15; 
    top: 30vh;
}
/*
#root .homepage > *:not(#video-background) {
    position: relative;
    z-index: 1;
	width: 58%;
}
*/
div#start-bottom img {
    position: absolute;
    width: 140%;
    transition: transform 0.3s ease-out;
    will-change: transform; 
}

#start-background-image img {
    top: 0;
    left: 0;

}

#start-middle-image img {
    top: 20px;
    left: 0;
}

div#start-front-image img {
    top: 0px;
    left: 0;
}

div#start-bottom {
    width: 40%;
    margin-top: 0;
    margin-right: 20rem;
}

div#start-top {
    width: 35%;
    padding-right: 10rem;
    display: flex;
    justify-content: center;
    justify-content: flex-start;
}

.liczby {
    display: flex;
    gap: 3rem;
    flex-direction: row;
    padding-top: 0;
    padding-bottom: 2.4rem;
}

#faq-section .faq-item {
    border-bottom: 1px solid gray;
}

#faq-section .faq-question {
    background-color: #f0f0f000;
    color: white;
    font-family: 'Author';
    font-size: 2rem;
    padding-bottom: 2rem;
    padding-top: 2rem;
    border: none;
    width: 100%;
    text-align: left;
    cursor: url(https://cohesionindex.com/wp-content/uploads/2025/03/hand_1.png), auto;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
}

#faq-section .faq-answer {
    display: none;
    padding: 10px;
    background-color: #f9f9f9;
}

div#faq-section {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
	gap: 12rem;
    margin-bottom: 20rem;
}

#faq-section .faq-answer.show {
    display: flex;
}

.step {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.step.end {
    width: 15%;
}

.line1, .line2, .line3 {
    position: absolute;
    z-index: -1;
}
.step h3 {
    font-size: 2.8rem;
    font-weight: 400;
	padding-top: 4.8rem;
	padding-bottom: 2.4rem;
}
.step p {
    font-size: 20px;
    font-weight: 300;
	padding-bottom: 3.2rem;
}
.step img {
    width: 80px;
    height: 80px;
    background-color: #000313;
    border-radius: 50%;
}

.line1 {
    left: 120px;
    top: 40px;
    transform: scale(.8);
}

.line2 {
    left: 35%;
    top: 40px;
    transform: scale(.8);
}

.line3 {
    left: 55%;
    top: 12px;
    transform: scale(.8);
}

#opinions .glide {
    position: relative;
    width: 101%;
}

#opinions .glide__slides {
    list-style: none;
    margin: 0;
    padding: 0;
	gap: 0;
}


#opinions .glide__bullets {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

#opinions .glide__bullet {
    width: 10px;
    height: 10px;
    background-color: #ccc;
    border-radius: 50%;
    margin: 0 5px;
    cursor: url(https://cohesionindex.com/wp-content/uploads/2025/03/hand_1.png), auto;
}

#opinions .glide__bullet--active {
    background-color: #333;
}

.left {
    width: 50%;
}

.right {
    width: 30%;
    height: fit-content;
}

div#beta-cta, div#experts-header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

div#footer-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0;
}

div#branding {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 10vh;
}

.header-left, .header-right {
    display: flex;
    width: 50%;
    align-items: center;
    justify-content: space-between;
}
.header-right {
    justify-content: right;
}


ul#menu-main li a {
    color: #FAFAFA;
    text-decoration: none;
    font-size: 2rem;
    cursor: url(https://cohesionindex.com/wp-content/uploads/2025/03/hand_1.png), auto;
}

ul#menu-main {
    list-style: none;
    display: flex;
    gap: 6.5rem;
}

#branding .header-left h1 a {
    color: #FAFAFA;
    cursor: url(https://cohesionindex.com/wp-content/uploads/2025/03/hand_1.png), auto;
}

#root .top-64 {
	margin-top: 6.4rem;
}
#root .top-48 {
	padding-top: 4.8rem;
}
#root .top-8 {
	padding-top: 0.8rem;
}
button#blue-button {
    position: relative;
    background-color: transparent;
    border: 2px solid #3A2EFE; 
    border-radius: 30px;
    color: white;
    font-weight: 400;
    padding: 12px 24px;
    font-size: 2rem;
    font-family: 'Author', sans-serif;
    cursor: url(https://cohesionindex.com/wp-content/uploads/2025/03/hand_1.png), auto;
    overflow: hidden;
    width: fit-content;
}

/* Efekt po�wiaty */
button#blue-button::before {
    content: "";
    position: absolute;
    inset: -2px; /* Drobne rozszerzenie, aby nie przycina�o */
    background: radial-gradient(circle, rgba(58, 46, 254, 0.5) 0%, transparent 80%);
    border-radius: 30px;
    z-index: -1;
    transition: opacity 0.3s ease;
    opacity: 0.8;
}

/* Efekt po najechaniu */
button#blue-button:hover::before {
    opacity: 1;
}

::selection {
    background-color: #0000ff;
    color: white;
}

#benefits-frames p {
    border: 3px solid #b7e4f41f;
    padding: 4rem;
    border-radius: 30px;
    font-weight: 300;
    backdrop-filter: blur(20px);
    width: 18%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
    height: auto;
    transition: all .5s;
    font-size: 1.8rem;
    background: transparent;
    /*background: radial-gradient(circle, rgba(58, 46, 254, 0.5) 0%, transparent 80%);*/

}

.fade-in-down {
    opacity: 0;
    transform: translateY(80px);
    transition: none; /* na wszelki wypadek */
  }

  .fade-in-down-experts {
    opacity: 0;
    transform: translateY(80px);
    transition: none; /* na wszelki wypadek */
  }
  
  .fade-in-down.visible {
    animation: fadeInDown 0.5s ease-in-out 0.5s forwards;
  }

  .fade-in-down-experts.visible {
    animation: fadeInDownExperts 0.1s ease-in-out 0.1s forwards;
  }

  #root .fade-in-downop {
    opacity: 0;
    transform: translateY(150px);
    transition: none; /* na wszelki wypadek */
  }
  
  #root .fade-in-downop.visible {
    animation: fadeFromDownOp 0.5s ease-in-out 0.5s forwards;
  }


#benefits-frames p.benefit-2 {
    background-position: 185px;
}

#benefits-frames p.benefit-4 {
    background-size: 200%;
}

div#benefits-frames p strong {
    font-size: 2.4rem;
}

#benefits-frames p:hover {
    backdrop-filter: blur(5px);
    transition: all .5s;
    border: 1px solid #ffffff80;

}
#benefits-frames {
    padding-bottom: 10rem;
}

#video-section h2 {
    padding-bottom: 10rem;
    width: 60%;
    display: none;
}

#cta-under-video {
    padding-top: 10rem;
    padding-bottom: 10rem;
    width: 50%;
    line-height: 1;
}

#beta-cta h2 {
    padding-top: 0;
    padding-bottom: 5.6rem;
}

#encouragements-to-sign-up {
	color: #000313;
}
#encouragements-to-sign-up {
    padding-top: 15rem;
	padding-bottom: 15rem;
}

#root .left {
    padding-right: 22rem;
    animation-delay: .5s;
}

#root .right {
    background-color: black;
    color: white;
    padding: 7.2rem 6.2rem;
	border-radius: 30px;
    animation-delay: 1.5s;
}

#root p.demo-go {
    padding-bottom: 3.6rem;
    font-weight: 300;
    font-size: 2.4rem;
}

#root form input, #root input:-internal-autofill-selected {
    background-color: transparent !important;
    border: 1px solid white;
    border-radius: 50px;
    height: 45px;
    color: white !important;
    width: 100%;
    padding: 2rem;
    font-size: 1.8rem;
    font-family: 'Author';
}

form.wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    height: 100%;
}

#root textarea {
    background-color: transparent;
    border-radius: 24px;
    width: 100%;
    border: 1px solid white;
}
p.rozmiar48.blue-back.center.black {
    width: fit-content;
    place-self: center;
	margin-top: 7.2rem;
	margin-bottom: 7.2rem;
}

div#logosy {
    display: flex;
}

#simple-steps h2 {
    width: 100%;
    padding-top: 5rem;
    padding-bottom: 5rem;
    text-align: center;
    font-size: 4.8rem;
}

div#simple-steps {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
/*div#ikony {
    display: flex;
    gap: 3px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    width: 25%;
}*/
div#simple-steps a {
    color: white;
    font-size: 2rem;
    text-decoration: underline #2d0fdc;
    cursor: url(https://cohesionindex.com/wp-content/uploads/2025/03/hand_1.png), auto;
}
div#simple-steps a:after {
	content: url();
}

div#simple-steps {
    padding-bottom: 30rem;
    gap: 4rem;
    display: flex;
    justify-content: space-between;
    position: relative;
    padding-top: 20rem;
    margin-top: -100vh;
}

div#tresc-experts {
    width: 60%;
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 8rem;
}
#root .consulted:before {
    content: url(https://cohesionindex.com/wp-content/uploads/2025/05/ikona-1.png);
    display: flex;
    justify-content: center;
	padding-bottom: 0.8rem;
}
#root .finished:before {
    content: url(https://cohesionindex.com/wp-content/uploads/2025/05/ikona-2.png);
    display: flex;
    justify-content: center;
	padding-bottom: 0.8rem;
}
#root .ongoing:before {
    content: url(https://cohesionindex.com/wp-content/uploads/2025/05/ikona-2.png);
    display: flex;
    justify-content: center;
	padding-bottom: 0.8rem;
}

#opinions-main-description h2 {
	padding-bottom: 2rem;
}

#opinions .glide__slide {
    padding: 1rem;
}
#faq-section .faq-answer.show {
    display: flex;
    background-color: transparent;
    font-size: 1.6rem;
    font-weight: 300;
    gap: 2rem;
    padding-bottom: 4.8rem;
    flex-direction: column;
}
#root .faq {
    width: 40%;
}
button.faq-question:after {
    content: url(https://cohesionindex.com/wp-content/uploads/2025/03/Vector-2.svg);
}
div#faq-section {
    padding-bottom: 20rem;
    display: flex;
    justify-content: center;
    gap: 0;
}
button.faq-question {
    position: relative;
}

button.faq-question:after {
    content: "";
    display: inline-block;
    transition: transform .5s ease-in-out;
    transform: rotate(0deg);
    background: url(https://cohesionindex.com/wp-content/uploads/2025/05/plus.png);
    width: 20px;
    height: 20px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

button.faq-question.rotate:after {
    transition: transform .5s ease-in-out;
    transform: rotate(45deg);
}

footer#footer {
    border-top: 1px solid #2D0FDC;
}
footer#footer {
    border-top: 1px solid #2D0FDC;
    padding-top: 4rem;
    padding-bottom: 4rem;
}
#root .column-center {
	padding-bottom: 15rem;
}
#footer p.center {
    font-size: 1.6rem;
}

#footer #blue-button {
    font-size: 1.6rem;
}
.column-left, .column-center, .column-right {
    width: 33%;
}
#root .column-left {
    display: flex;
    gap: 3rem;
    width: 50%;
    text-transform: uppercase;
    align-items: center;
}
.column-right {
    text-align: right;
}
.opinion h3:after {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    background-color: white;
    margin-top: 10px;
	margin-bottom: 20px;
}
p.rozmiar26.regular {
    padding-bottom: 4rem;
}

div#simple-steps a:after {
    content: url(https://cohesionindex.com/wp-content/uploads/2025/03/Frame-51.svg);
    margin-left: 1rem;
}

#blur-cursor {
    position: fixed;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    background: radial-gradient(circle, rgba(0,0,255,0.2) 0%, rgba(0,0,255,0.1) 50%, rgba(0,0,255,0) 100%);
    filter: blur(70px);
    transition: all .05s;
    z-index: 0;
  }

#root {
    cursor: url(https://cohesionindex.com/wp-content/uploads/2025/03/cursor_1.png), auto;
    scroll-behavior: smooth;
}

#header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.header-left h1 a {
    font-size: 1.6rem;
    text-decoration: none;
    display: flex;
}

div#start-text-with-number {
    width: fit-content;
    padding: 0 .3rem;
}

div#video-section iframe {
    width: 100%;
    min-height: 600px;
}

#root .kroki {
    display: flex;
    width: 100%;
    position: relative;
    gap: 4rem;
    justify-content: space-between;
    padding: 0 10rem;
}

.encouragement p {
    font-weight: 300;
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.encouragement {
    border-bottom: 1px solid #BBBBBB;
    padding: 2rem;
}

@keyframes bluestart {
    0% {
        width: 1%;
    }
    100% {
        width: 100%;
    }
}

#mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 30px;
    cursor: url(https://cohesionindex.com/wp-content/uploads/2025/03/hand_1.png), auto;
}

form span.wpcf7-form-control-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
}

form .field {
    position: relative;
    display: flex;
    width: 100%;
}

form .field p {
    width: 100%;
}

#root form input[type="checkbox"] {
    width: 4%;
    height: 100%;
    accent-color: #2D0FDC;
}

form .field  label {
    font-size: 1.8rem;
    position: absolute;
    left: 24px;
    background: #000000;
    z-index: 10;
    padding: .3rem 1rem;
}


.rozmiar72, .rozmiar72 h1, .rozmiar72 h2, .rozmiar72 h3, .rozmiar72 h4, .rozmiar72 h5, .rozmiar72 h6, .rozmiar72 p, .rozmiar72 a, .rozmiar72 span {
    font-size: 4.8rem;
}

form .field label[for="newsletter-consent"] {
    font-size: 1.6rem;
    font-weight: 100;
}

#root input.wpcf7-submit {
    width: fit-content;
    padding: .4rem 4rem .4rem 2rem;
    line-height: 0;
    font-size: 2rem;
    cursor: url(https://cohesionindex.com/wp-content/uploads/2025/03/hand_1.png), auto;
}

form .button p {
    position: relative;
}

form .button p:after {
    content: url(https://cohesionindex.com/wp-content/uploads/2025/03/arrow-right.png);
    transition: all .5s;
    position: absolute;
    right: 10px;
}

form .button p {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid white;
    border-radius: 50px;
    width: fit-content;
    padding-right: 1.6rem;
    transition: all .5s;
    cursor: url(https://cohesionindex.com/wp-content/uploads/2025/03/hand_1.png), auto;
}

#root form input[type="submit"] {
    border:0;
}

form .button {
    position: relative;
    margin-top: 4.4rem;
    display: flex;
    justify-content: center;
}

.encouragement:hover:before {
    transform: rotate(-45deg);
    transition: all .5s;
}

.wpcf7-spinner {
    position: absolute;
    bottom: 0;
    left: 0;
}

.wpcf7-not-valid-tip {
    display: flex;
    font-size: 1.6rem;
    font-family: 'Author';
    padding: 0.3rem 3rem;
}

.glide__slides {
    justify-content: center;
}

img.only-desktop {
    display: flex;
}

img.only-mobile {
    display: none;
}

.expert #blue-button {
    margin-top: 5.6rem;
}

.encouragement:before {
    content: url(https://cohesionindex.com/wp-content/uploads/2025/03/arrow-down-back.png);
    width: 40px;
    display: flex;
    height: 40px;
    transition: all .5s;
}

.encouragement {
    display: flex;
    gap: 3.2rem;
}

span.select2-selection.select2-selection--single {
    background-color: transparent;
    border: 1px solid white;
    border-radius: 50px;
    height: 45px;
    color: white;
    width: 100%;
    padding: 2rem;
    font-size: 1.8rem;
    font-family: 'Author';
    display: flex;
    align-items: center;
    font-weight: 400;
    cursor: url(https://cohesionindex.com/wp-content/uploads/2025/03/hand_1.png), auto;
}

form .button p:hover:after {
    transform: translateX(10px);
    transition: all .5s;
}

form .button p:hover {
    padding-right: 2.2rem;
    transition: all .5s;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px;
    top: 7px;
    right: 10px;
    width: 30px;
    content: url(https://cohesionindex.com/wp-content/uploads/2025/03/arrow-form.png);
}

#root .select2-results {
    display: block;
    background: #000000;
    font-size: 1.6rem;
    font-family: 'Author';
    font-weight: 300;
    border: 1px solid white;
    border-radius: 50px;
    padding: 2rem;
    margin-top: -50px;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #2d0fdc;
}

.select2-container--default .select2-results__option--selected {
    background-color: #2d0fdc;
}

.select2-dropdown {
    background-color: #ffffff00;
    border: 0;
}

#root .select2-container--default .select2-search--dropdown .select2-search__field {
    border: 0;
    background: #00000000;
    padding: 0;
    height: 30px;
}

#root .select2-search--dropdown {
    padding: 0;
}

#blue-button:hover:before {
    transform: scale(1.1);
    transition: all .5s;
    background: radial-gradient(circle, rgba(58, 46, 254, 1.5) 0%, transparent 80%);
}

#blue-button:before, #blue-button {
    transition: all .5s;
}

.faq-cta {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding-top: 4rem;
    width: 40%;
}

.faq-cta img {
    width: 56px;
    height: 56px;
}


#start-bottom img {
    width: 100%;
    height: auto;
    clip-path: inset(0 100% 0 0); /* Początkowa maska (całkowicie ukryta) */
    animation: reveal 1s ease-in-out forwards; /* Animacja odsłaniania */
}

.iframe-container iframe {
    width: 100%;
    height: 600px;
    border: none;
}

/* Klasa aktywna dla widocznego iframe */
#root .iframe-container.active {
    overflow: visible;
}

/* Kluczowe klatki animacji */
@keyframes reveal {
    from {
        clip-path: inset(0 100% 0 0); /* Start (całkowicie ukryty) */
    }
    to {
        clip-path: inset(0 0 0 0); /* Koniec (całkowicie widoczny) */
    }
}

.slider-container {
    position: relative;
}

.slide {
    position: relative;
    width: 100%;
    height: 90vh;
}

.slide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


#root #video-section video.background-video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#root #video-section .video-glide h2 {
    font-size: 3.6rem;
    font-style: italic;
    width: 100%;
    padding-bottom: 3rem;
}

#root #video-section .video-glide p {
    font-size: 2rem;
    font-weight: 100;
    width: 100%;
}

#root #video-section .glide__slide {
    position: relative;
}

.video-glide .glide__slide {
    position: relative;
    height: 100%;
    width: 100vw;
}

.video-glide .background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
}

.video-glide .slide-content {
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
    max-width: 1500px;
    text-align: left;
    height: 100%;
}

#root div#video-section {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw !important;
    margin-top: 5rem;
}

#root .slide-content img {
    position: absolute;
    transition: all .5s;
    opacity: 0; 
}

.glide__slide--active .slide-content img {
    animation: fadeFromDownOp 1s ease-in-out; 
    animation-fill-mode: forwards; 
    opacity: .8;
}

#root #video-section .glide__slides, #root #video-section .video-glide .slide-content {
    height: 90vh;
}

#section-1 img.obraz-opcjonalny-1 {
    left: 0;
    bottom: 28%;
    width: 17%;
    left: 5%;
    animation-delay: 750ms; 
}

#section-1 img.obraz-opcjonalny-2 {
    left: 0;
    bottom: 5%;
    width: 17%;
    left: 5%;
    animation-delay: 1250ms; 
}

#section-1 img.obraz-opcjonalny-3{
    right: 0;
    width: 30%;
    animation-delay: 1450ms; 
    bottom: 0;
}

#section-1 .content {
    backdrop-filter: blur(10px);
    width: 35%;
    padding: 3rem;
    transition: all, 5s;
}


#root #section-1 .content p, #root #section-1 .content h2 {
    width: 100%;
}

#root #section-1 h2 {
    padding-bottom: 3rem;
    opacity: 1; 
}

div#section-1 h2 {
    animation: fadeFromDown 1s ease-in-out; 
    animation-delay: 350ms; 
    animation-fill-mode: forwards; 
}

#root #section-1 .content:hover {
    backdrop-filter: blur(25px);
    transition: all, 5s;
}


#root #section-2 img.obraz-opcjonalny-1.optional-image {
    animation-delay: 550ms; 
}
#root #section-2 img.obraz-opcjonalny-2.optional-image {
    animation-delay: 750ms; 
}
#root #section-2 img.obraz-opcjonalny-3.optional-image {
    animation-delay: 1050ms; 
}

#root #experts-section #blue-button a, div#start-top #blue-button a {
    color: #ffffff;
    cursor: url(https://cohesionindex.com/wp-content/uploads/2025/03/hand_1.png), auto;
    text-decoration: none;
}

p.co-credit {
    font-size: 1.5rem;
}

.button-with-cta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    margin-top: 2.4rem;
    gap: 2.4rem;
}

.extra-module {
    position: relative;
    margin-top: 3.2rem;
    width: 75%;
}

.extra-module p.counter-text {
    position: absolute;
    right: 0;
    width: 23%;
    display: flex;
    background: linear-gradient(180deg, #4429e0, #000313);
    color: white;
    border-radius: 20px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 2.4rem;
    margin: 1.2rem;
}

span.little {
    font-size: 2.4rem;
    width: 60%;
    line-height: 1.2;
    font-weight: 200;
}

span.big {
    font-size: 10rem;
    width: 20%;
    line-height: 1;
    font-weight: 500;
    margin-top: -10px;
}

div#opinions-main-description {
    margin-top: 20rem;
    flex-direction: column;
    align-items: center;
    display: flex;
}


@keyframes fadeFromDown {
    from {
      opacity: 0;
      transform: translateY(50px); /* Przesunięcie w dół */
    }
    to {
      opacity: 1;
      transform: translateY(0); /* Powrót do pozycji początkowej */
    }
  }


  @keyframes fadeFromDownOp {
    from {
      opacity: 0;
      transform: translateY(150px); /* Przesunięcie w dół */
    }
    to {
      opacity: .8;
      transform: translateY(0); /* Powrót do pozycji początkowej */
    }
  }

div#logosy img {
    border-radius: 40px;
    padding: 3rem 6rem;
    background: #ffffff45;
    height: 100px;
    width: 180px;
    animation: fadeFromDown 1s ease-in-out; 
    animation-delay: 350ms; 
    animation-fill-mode: forwards; 
    transition: all .5s;
}

div#logosy {
    gap: 3rem;
    display: flex;
    justify-content: center;
    z-index: 2;
    position: relative;
    margin-top: 5rem;
}

#gray-section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    background: url(https://cohesionindex.com/wp-content/uploads/2025/04/back.jpg);
    background-size: cover;
    background-position: center;
}


div#logos-gallery-privacy p {
    margin-bottom: 3rem;
}

div#logosy img:hover {
    background: #ffffff75;
    transition: all .5s;
}

.wpcf7 form .wpcf7-response-output {
    font-size: 1.5rem;
    font-family: 'Author';
    font-weight: 100;
    border: 0;
    text-align: center;
}

.step img:hover {
    transform: scale(1.01);
    transition: all .5s;
}


.expert p.rozmiar22 {
    font-size: 1.8rem;
    line-height: 1.2;
    min-height: 110px;
}

img.image-under-counter {
    width: 100%;
}

.opinion {
    outline: 1px solid #2D0FDC;
    padding: 4rem;
    border-radius: 30px;
    margin: 1px;
    min-height: 350px;
}

.opinion h3 {
    min-height: 60px;
}

.select2-container {
    width: 100% !important;
}

#root div#start {
    padding-bottom: 0;
    justify-self: center;
    margin-top: 15rem;
    min-height: inherit;
}

div#beta-cta {
    align-items: flex-start;
}

#root p.cta-do-beta {
    font-weight: 300;
    width: 75%;
    margin-bottom: 3rem;
}

#root h2.head-do-beta {
    padding: 2rem;
    padding-bottom: 1rem;
}

#root p.cta-do-beta {
    font-weight: 300;
    width: 70%;
    padding: 2rem;
    margin-bottom: 1rem;
    text-align: left;
}

#root .left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#root .enc h3 {
    font-weight: 300;
}

#root p.counter-new {
    background: #2d0fdc;
    padding: 1rem 2rem;
    border-radius: 25px;
    margin-bottom: 2rem;
    width: fit-content;
}

#root p.counter-new span {
    font-size: 1.6rem;
    color: white;
}

div#logos-gallery-privacy p {
    font-weight: 300;
}

.expert img {
    max-width: 120px;
}

.expert h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.expert p.rozmiar22.light {
    font-size: 1.6rem;
}

.expert button#blue-button {
    font-size: 1.6rem;
    margin-top: 0;
}

div#faq-section {
    margin-top: 20rem;
}

@keyframes fadeInDown {
    0% {
      opacity: 0;
      transform: translateY(80px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }


  @keyframes fadeInDownExperts {
    0% {
      opacity: 0;
      transform: translateY(80px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }



h2.faq-head {
    width: 60%;
}

section#section-1 {
    position: sticky;
    z-index: 10000;
}

.sticky-stack-container {
    position: relative;
    height: 100vh;
}

video.background-video {
    width: 100%;
    position: absolute;
    filter: brightness(0.35);
}

.sticky-stack-container {
    position: relative;
    overflow: visible;
    transform-style: preserve-3d;
  }
  
  .sticky-stack-section {
    position: sticky;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
section#section-1 {
    z-index: 10;
}
section#section-2 {
    z-index: 11;
}
section#section-3 {
    z-index: 12;
}
section#section-4 {
    z-index: 13;
}

#white-section, div#gray-section, div#simple-steps, div#experts-header, div#experts-section, div#opinions-main-description, div#opinions, div#faq-section, footer#footer {
    z-index: 15;
}

.background-sticky {
    position: sticky;
    width: 100vw;
    top: 0;
    height: 100vh;
    z-index: 14;
    background: #ffffff;
}
  
  .homepage {
    overflow: clip;
    min-height: 100vh;
  }

  .section-content {
    max-width: 1500px;
    width: 100%;
    display: flex;
    height: 80%;
    align-items: stretch;
    flex-direction: column;
    justify-content: space-between;
}


.section-images {
    z-index: 1;
    display: flex;    
    opacity: .8;
}

#section-1 .section-images {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

#section-1 .content {
    backdrop-filter: blur(10px);
    width: 25%;
    border-radius: 20px;
    background-position: center;
    padding: 3rem;
    transition: all, 5s;
    font-size: 2.2rem;
    display: flex;
    line-height: 1;
    flex-direction: column;
    align-items: flex-start;
    height: fit-content;
}

#section-2 .section-content {
    max-width: 1500px;
    width: 100%;
    display: flex;
    height: 80%;
    align-items: stretch;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

#section-4 .section-content {
    max-width: 1500px;
    width: 100%;
    display: flex;
    height: 80%;
    align-items: flex-end;
    flex-direction: column;
    justify-content: space-between;
}

#section-2 .content {
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    z-index: 1;
    backdrop-filter: blur(10px);
    width: 25%;
    padding: 2rem;
    transition: all, 5s;
    font-size: 2.2rem;
    line-height: 1;
    height: fit-content;
    backdrop-filter: blur(10px);
    width: 25%;
    border-radius: 20px;
    background-position: center;
    padding: 3rem;
}

#section-3 .content {
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    z-index: 1;
    backdrop-filter: blur(10px);
    width: 25%;
    padding: 2rem;
    transition: all, 5s;
    font-size: 2.2rem;
    line-height: 1;
    height: fit-content;
    backdrop-filter: blur(10px);
    width: 25%;
    border-radius: 20px;
    background-position: center;
    padding: 3rem;
}

#section-4 .content {
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    z-index: 1;
    backdrop-filter: blur(10px);
    width: 25%;
    padding: 2rem;
    transition: all, 5s;
    font-size: 2.2rem;
    line-height: 1;
    height: fit-content;
    backdrop-filter: blur(10px);
    width: 25%;
    border-radius: 20px;
    background-position: center;
    padding: 3rem;
}


#root #section-1 .section-images img {
    width: fit-content;
    animation: fadeFromDownOp 1s ease-in-out;
    animation-fill-mode: forwards;
    height: 28vh;
    opacity: 1 !important;
}

#root #section-1 h2, #root #section-2 h2, #root #section-3 h2, #root #section-4 h2 {
    padding-bottom: 3rem;
    opacity: 1;
    font-weight: 500;
    font-size: 2.8rem;
}

#root #section-1 p, #root #section-2 p, #root #section-3 p, #root #section-4 p {
    font-size: 1.8rem;
    font-weight: 200;
}

#root #section-2 .section-images {
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    z-index: 1;
    display: flex;
    opacity: .8;
    gap: 1rem;
    width: 70%;
}

#root #section-2 .section-images img  {
    width: fit-content;
    height: inherit;
    width: 53vh;
}

#root #section-2 .section-images img.obraz-opcjonalny-2.optional-image {
    margin-bottom: -15px;
}

#root #section-3 img.obraz-opcjonalny-1.optional-image {
    height: 51vh;
    width: max-content;
}

#root #section-3 .section-content {
    justify-content: center;
    gap: 3rem;
}

#root #section-4 .section-images {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    position: absolute;
    align-items: flex-start;
    gap: 1rem;
    left: 5%;
    bottom: 5%;
}
#root #section-4 .section-images img {
    width: 25%;
}

#root #section-4 .section-images img.obraz-opcjonalny-1.optional-image {
    width: 35%;
}

#root .section-content {
    padding-left: 5rem;
    padding-right: 5rem;
}

.scroll-container {
    overflow-y: auto;
    height: 100vh;
    scroll-snap-type: y mandatory;
  }
  
  .sticky-stack-section {
    height: 100vh;
    scroll-snap-align: start;
    position: sticky;
    top: 0; /* lub dowolna wartość dla efektu sticky */
  }

#root #section-1 img.obraz-opcjonalny-3.optional-image {
    position: absolute;
    width: auto;
    height: 51vh;
}

#root #section-1 .section-images {
    gap: 1rem;
}

#root #section-4 .section-images img.obraz-opcjonalny-1.optional-image {
    width: inherit;
    height: 35vh;
    object-fit: contain;
    object-position: left;
}

#root #section-4 .section-images img.obraz-opcjonalny-2.optional-image {
    width: inherit;
    height: 32vh;
    object-fit: contain;
    object-position: left;
}

div#branding span.index {
    font-weight: 500;
}

div#branding span.dot {
    color: #3127d9;
    font-weight: 900;
}

.header-left h1 a {
    font-size: 2.8rem;
}

div#start-top ::marker {
    content: url(https://cohesionindex.com/wp-content/uploads/2025/03/Frame-51.svg);
}

div#start-top ul {
    padding-inline-start: 20px;
}

div#start-top ul li {
    padding-left: 1rem;
}

.step-bottom {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 230px;
}

div#tresc-experts, #root .kroki, #simple-steps h2, div#experts-header, .expert.fade-in-down-experts.visible, .glide__track, div#opinions-main-description, 
div#faq-section, #faq-section .faq-question {
    color: black;
}

.expert button#blue-button::before {
    display: none;
}

.expert button#blue-button {
    color: #2d0fdc;
}

div#opinions {
    background: white;
}

#faq-section .faq-answer.show {
    font-weight: 400;
}

.step img {
    background-color: #ffffff;
}

#faq-section .faq-question {
    font-weight: 500;
}

div#simple-steps a, div#opinions p.rozmiar26.regular {
    color: #2d0fdc;
}

div#simple-steps a:after {
    content: url(https://cohesionindex.com/wp-content/uploads/2025/05/arrow.png);
}

#footer button {
    background: transparent;
    border: 0;
    text-transform: uppercase;
}

#iframe-modal-content {
    min-width: 320px;
    height: 700px;
    overflow: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
  }
  #iframe-modal-content::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }

  #iframe-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh; /* pełna wysokość widoku */
  }
  
  iframe#iframe-modal-content {
    min-width: 520px;
  }

.column-right a {
    font-family: 'Author';
}

#root button.faq-question p {
    width: 95%;
}

.jeden {
    display: flex;
    flex-direction: column;
    align-items: center;
}

button.cmplz-btn.cmplz-accept, button.cmplz-btn.cmplz-deny {
    font-family: 'Author';
}



@media (max-width: 1680px) {

    #section-1 .content {
        width: 20%;
    }

#root .left {
    padding-right: 10rem;
}

#root #section-4 .section-images img {
    width: 20%;
}

#root #section-1 h2, #root #section-2 h2, #root #section-3 h2, #root #section-4 h2 {
    padding-bottom: 2rem;
}

}

@media (max-width: 1535px) { 
    .opinion {
        min-height: 400px;
    }
    
    .opinion h3 {
        min-height: 80px;
    }
#root div#start {
    width: calc(100% - 10rem);
    padding-left: 5rem;
    padding-right: 5rem;
}


}


@media (max-width: 1385px) {

html {
    font-size: 9px;
}

}

@media (max-width: 1290px) {
#root .kontener-sz {
	max-width: 92%;
	padding-left: 4rem;
	padding-right: 4rem;
	justify-self: center;
}
#root .left {
    padding-right: 10rem;
    margin-right: 12rem;
}

html {
    font-size: 9px;
}

#section-1 .section-content, #section-2 .section-content, #section-3 .section-content, #section-4 .section-content {
    height: 65%;
}

#root #section-1 img.obraz-opcjonalny-3.optional-image, #root #section-3 img.obraz-opcjonalny-1.optional-image, #root #section-4 .section-images img.obraz-opcjonalny-1.optional-image, #root #section-4 .section-images img.obraz-opcjonalny-2.optional-image {
    height: 30vh;
}

#root #section-2 .section-images {
    width: 60%;
}

#root #section-1 h2, #root #section-2 h2, #root #section-3 h2, #root #section-4 h2 {
    font-size: 2.2rem;
}

#section-4 .content {
    width: 45%;
}

#benefits-frames p {
    padding: 3rem;
}

}


@media (max-width: 1051px) {
    iframe#iframe-modal-content {
        min-width: 100%;
      }
    html {
        font-size: 8px;
    }

    #root .kontener, .kontener-maxi {
        max-width: 100%;
        padding-left: 2rem;
        padding-right: 2rem;
        justify-self: center;
        display: flex;
        flex-direction: column;
    }
div#start {
    padding-right: 0;
}
div#benefits-frames {
    display: flex;
    flex-flow: wrap;
}	

#benefits-frames p {
    width: 20%;
    padding: 2rem;
}

div#encouragements-to-sign-up {
    display: flex;
    flex-direction: column;
    gap: 4.8rem;
}
.step {
    width: 45%;
}
div#faq-section {
    flex-direction: column;
}
#root #start {
    min-height: 50vh;
    flex-direction: row;
}

#cta-under-video {
    padding-bottom: 10rem;
    width: 75%;
}

#root #branding {
    flex-direction: row;
}

#section-4 .content {
    top: 5%;
    width: 60%;
}

#section-4 img.obraz-opcjonalny-2.optional-image {
    bottom: 5%;
}

.extra-module p.counter-text {
    width: 50%;
}

#root .left {
    padding-right: 0;
    margin-right: 0;
}

#root #encouragements-to-sign-up {
    flex-direction: row;
}

#root .right {
    padding: 4.2rem 3.2rem;
}

.rozmiar32, .rozmiar32 h1, .rozmiar32 h2, .rozmiar32 h3, .rozmiar32 h4, .rozmiar32 h5, .rozmiar32 h6, .rozmiar32 p, .rozmiar32 a, .rozmiar32 span {
    font-size: 2.8rem;
}

#encouragements-to-sign-up {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

#beta-cta h2 {
    padding-top: 10.5rem;
}

#root div#logosy {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#simple-steps h2 {
    padding-top: 7rem;
    padding-bottom: 5rem;
}

.expert {
    width: 100%;
}

div#tresc-experts {
    width: 70%;
}

div#start-bottom img {
    width: 190%;
}

#video-background {
    top: 25vh;
}

#video-section h2 {
    width: 80%;
}

div#simple-steps {
    padding-bottom: 15rem;
}

div#start-top {
    height: 40vh;
    min-height: 40vh;
}

#root .kontener-sz {
    max-width: 100%;
}

video.background-video {
    width: 230%;
}

#section-1 .section-content, #section-2 .section-content, #section-3 .section-content, #section-4 .section-content {
    height: 65vh;
}
#root #section-1 img.obraz-opcjonalny-3.optional-image {
    height: 30vh;
}

#root #section-2 .section-images img {
    height: 20vh;
}

#root #section-2 .section-images {
    align-items: flex-start;
}

#root #section-3 img.obraz-opcjonalny-1.optional-image {
    height: 25vh;
    width: max-content;
}

#root #section-4 .section-images {
    flex-direction: column;
}

#root #section-4 .section-images img.obraz-opcjonalny-1.optional-image, #root #section-4 .section-images img.obraz-opcjonalny-2.optional-image {
    height: 20vh;
}

}

@media (max-width: 1010px) and (min-width: 810px) {
    #benefits-frames p {
        width: 18%;
    }
    div#benefits-frames {
        margin-top: 0;
    }

    .sticky-stack-section {
        height: 60vh;
    }

    #section-1 .section-content, #section-2 .section-content, #section-3 .section-content, #section-4 .section-content {
        height: 50vh;
    }

    #root #section-2 .section-images {
        width: fit-content;
    }

    video.background-video {
        width: 175%;
    }

    ul#menu-main {
        gap: 3rem;
    }

    #root .kroki {
        padding: 0 2rem;
    }

    #root #section-2 .section-images img {
        width: fit-content;
    }

    #root #section-1 .section-images img {
        height: 25vh;
    }

    #section-1 img.obraz-opcjonalny-2.optional-image {
        display: none;
    }

    #root .right {
        width: 45%;
    }

    #gray-section {
        min-height: 45vh;
    }    
    
    .expert {
       width: 27%;
    }

    #root div#experts-section {
        flex-direction: row;
        flex-wrap: wrap;
    }

    form .button p {
        padding-right: 2rem;
    }

    .line1 {
        left: 0;
    }

    .line2 {
        left: 25%;
    }

    .opinion {
        min-height: 250px;
    }

    div#faq-section {
        margin-top: 0;
    }

    #root div#faq-section {
        flex-direction: row;
    }

}

@media (max-width: 768px) {
div#start-bottom img {
    display: none;
}

.step-bottom {
    height: inherit;
}
div#start-top {
    width: calc(100% - 4rem);
    min-height: inherit;
    padding: 0;
    margin-top: 8rem;
    height: fit-content;
}
#root div#start-text-module {
    padding-top: 2.4rem;
}

.button-with-cta {
    margin-top: 1rem;
}

#benefits-frames {
    padding-bottom: 15rem;
}
div#footer-top {
    flex-direction: column;
}	
#root .column-left, #root .column-center, #root .column-right {
    width: 100%;
}
div#footer-top {
    text-align-last: center;
}
#root .column-left {
    padding-bottom: 6.4rem;
}	
#root .column-center {
    padding-bottom: 6.4rem;
}
#root .column-right {
    padding-bottom: 6.4rem;
}	

div#video-section p {
    text-align: left;
    font-size: 64px;
}	
#cta-under-video {
    line-height: 100%;
}
    #root .width60 {
        width: 100%;
        text-align: left;
    }

#root .right {
    width: 100%;
}

#root .left {
    padding: 4rem;
    width: 100%;
    width: calc(100% - 8rem);
}


div#logosy {
    gap: 4rem;
    width: 30%;
	flex-direction: column;
}
#root .step {
    width: calc(100% - 4rem);
}	
    div#tresc-experts {
        width: 100%;
        text-align: center;
    }
div#experts-section {
    flex-direction: column;
}	
div#branding {
    display: flex;
    flex-direction: column;
}	
.header-left, .header-right {
    display: flex;
    width: 100%;
    align-items: flex-start;
}
ul#menu-main {
    list-style: none;
    display: flex;
    gap: 2rem;
    justify-content: space-evenly;
    padding: 0px;
}
.header-right {
    justify-content: center;
}	
div#branding {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}	
   .header-right {
        justify-content: right;
    }	
ul#menu-main li a {
    color: #000000;
}

ul#menu-main {
    list-style: none;
    display: flex;
    gap: 2rem;
    justify-content: space-evenly;
    padding: 0px;
    flex-direction: column;
    width: 100%;
    align-items: anchor-center;
}

#menu.active {
    display: flex;
    margin-top: 7.8rem;
}

#root .homepage {
    padding: 0;
}

span.blue-back, .blue-back {
    display: flex;
}

.encouragement {
    padding: 2rem 0;
}

.encouragement {
    gap: 2rem;
}

#slide-1 .content, #slide-2 .content, #slide-3 .content, #slide-4 .content {
    padding: 2rem;
}

#root #video-section .glide__slides, #root #video-section .video-glide .slide-content {
    height: 60vh;
}

}

@media (max-width: 768px) {
    #menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 0;
        background: white;
        width: 100%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 10px;
        z-index: 1000;
    }

    #menu.active {
        display: flex;
    }

    #mobile-menu-toggle {
        display: block;
        color: white;
    }

    #root .right {
        padding: 0;
    }

    #root p.demo-go {
        padding: 3rem;
    }

    .rozmiar26, .rozmiar26 h1, .rozmiar26 h2, .rozmiar26 h3, .rozmiar26 h4, .rozmiar26 h5, .rozmiar26 h6, .rozmiar26 p, .rozmiar26 a, .rozmiar26 span {
        font-size: 2.2rem;
    }

    form.wpcf7-form.init {
        padding: 3rem;
    }

    form.wpcf7-form {
        gap: 2rem;
    }

    form .button {
        margin-top: 3rem;
    }

    #root .kroki {
        flex-direction: column;
        padding: 2rem;
    }
    .step {
        display: flex;
        flex-direction: column;
    }

    .step img {
        width: 60px;
        height: 60px;
        padding-right: 6rem;
        overflow: visible;
        transition: all .5s;
    }

    .step h3,.step p,div#simple-steps a {
        padding-left: 54px;
        padding-top: 1rem;
        font-size: 2.4rem;
        padding-bottom: 1rem;
    }

    .step p,div#simple-steps a {
        font-size: 1.8rem;
    }

    div#logosy {
        margin-top: 2rem;
    }

    form.wpcf7-form.invalid {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .line1 {
        left: -125px;
        top: 190px;
        transform: rotate(90deg);
    }

    .line2 {
        left: -125px;
        top: 500px;
        transform: rotate(90deg);
    }

    .line3 {
        left: 29px;
        top: 600px;
        transform: rotate(0deg);
    }

    .step.end {
        display: flex;
        align-items: flex-end;
    }

    .step.end img {
        padding-right: 3rem;
        padding-top: 10rem;
    }

    img.only-desktop {
        display: none;
    }

    img.only-mobile {
        display: flex;
    }

    #root .kontener-sz {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .header-right {
        display: none;
    }

    .header-left, .header-right {
        flex-direction: column;
    }

    #header {
        padding: 0;
    }

    div#start {
        margin-top: 0;
    }

    div#start-bottom {
        display: none;
    }

    html, body {
        width: 100%;
        max-width: 100%;
    }

    #benefits-frames p {
        height: 220px;
    }

    .rozmiar28, .rozmiar28 h1, .rozmiar28 h2, .rozmiar28 h3, .rozmiar28 h4, .rozmiar28 h5, .rozmiar28 h6, .rozmiar28 p, .rozmiar28 a, .rozmiar28 span {
        font-size: 2.4rem;
    }

    #root #benefits-frames {
        flex-direction: column;
        align-content: center;
        width: calc(100% - 12rem);
        gap: 1rem;
        margin-top: 10rem;
        padding-bottom: 10rem;
        width: calc(100% - 8rem);
        padding: 4rem;
    }


    #video-background {
        width: 300%;
        object-fit: contain;
        top: 30vh;
    }

    div#beta-cta h2 {
        width: 100%;
        text-align: center;
        padding-top: 9.5rem;
        padding-bottom: 4.8rem;
    }

    div#beta-cta h2 span.blue-back {
        width: fit-content;
    }

    div#beta-cta h2 p {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    #root div#encouragements-to-sign-up .right {
        margin: 0rem;
        width: 100%;
        padding-top: 12px;
        padding-bottom: 12px;
        margin-bottom: 0;
    }

    div#logos-gallery-privacy {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    form .field label {
        font-size: 1.6rem;
    }

    #root form input {
        height: 40px;
        padding: 1rem;
        font-size: 1.6rem;
    }

    span.select2-selection.select2-selection--single {
        height: 40px;
        padding: 1rem;
        font-size: 1.6rem;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 20px;
        top: 10px;
        right: 10px;
        width: 20px;
    }

    #root #logosy {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        gap: 1rem;
    }

    #root .kontener, .kontener-maxi {
        padding-left: 0;
        padding-right: 0;
    }

    div#logosy img {
        width: 20%;
    }

    div#logos-gallery-privacy {
        justify-content: center;
    }

    #root #video-section .video-glide h2 {
        padding-bottom: 1rem;
    }

    #simple-steps h2 {
        padding-top: 8rem;
        padding-bottom: 0rem;
        padding-left: 1rem;
        padding-right: 0rem;
        font-size: 3.6rem;
        display: flex;
        width: fit-content;
        flex-direction: column;
        text-align: left;
    }

    div#simple-steps {
        padding-bottom: 10rem;
        gap: 2rem;
    }

    .rozmiar32, .rozmiar32 h1, .rozmiar32 h2, .rozmiar32 h3, .rozmiar32 h4, .rozmiar32 h5, .rozmiar32 h6, .rozmiar32 p, .rozmiar32 a, .rozmiar32 span {
        font-size: 2.4rem;
    }

    #root div#opinions-main-description p {
        padding: 2rem;
        text-align: center;
    }

    #opinions-main-description h2 {
        padding-bottom: 0;
        text-align: center;
        font-size: 3.6rem;
    }

    #root #slide-1 .content {
        width: 80%;
        left: 10%;
        right: 10%;
    }

    div#faq-section {
        margin-top: 0;
    }

    .faq-cta, h2.faq-head {
        width: 100%;
    }

    #root .faq {
        width: 100%;
        margin-top: 5rem;
    }

    .opinion .rozmiar20.light {
        font-size: 1.6rem;
    }

    .opinion .rozmiar26.regular {
        font-size: 2rem;
    }

    .opinion {
        min-height: 250px;
    }

    #root #video-section .video-glide h2 {
        font-size: 2rem;
        text-align: center;
    }

    #root #video-section .video-glide p {
        font-size: 14px;
        text-align: center;
    }

    #section-1 img.obraz-opcjonalny-2, #section-1 img.obraz-opcjonalny-1 {
        width: 30%;
        bottom: 5%;
    }

    #section-1 img.obraz-opcjonalny-1 {
        left:19%;
        right: inherit;
    }

    #section-1 img.obraz-opcjonalny-2{
        right:19%;
        left: inherit;
    }

    #video-section h2 {
        width: 100%;
    }

    #root #section-2 img {
        width: 60%;
        left: 35%;
    }
    #section-2 .content {
        width: 90%;
    }

    #root #section-2 img.obraz-opcjonalny-2.optional-image {
        top: 25%;
        display: none;
    }

    #root #section-2 img.obraz-opcjonalny-3.optional-image {
        top: 40%;
    }

    #section-2 .content {
        bottom: 5%;
    }

    #section-3 .content {
        width: 70%;
        bottom: 5%;
    }

    #section-3 img.obraz-opcjonalny-1.optional-image {
        width: 65%;
        right: 5%;
        top: 5%;
    }

    #section-4 .content {
        width: 90%;
    }

    #section-4 img.obraz-opcjonalny-1.optional-image {
        width: 70%;
    }

    #section-4 img.obraz-opcjonalny-2.optional-image {
        width: 60%;
        bottom: 25%;
    }

    #benefits-frames p {
        width: 100%;
        min-height: inherit;
        height: fit-content;
        font-size: 2rem;
        padding: 3rem;
    }

    div#video-section p {
        font-size: 3.6rem;
        text-align: center;
        width: fit-content;
    }

    h2.fade-in-down.video-s.visible {
        display: flex;
        justify-content: center;
    }
span.blue-back {
    font-size: inherit;
}

div#cta-under-video {
    width: calc(100% - 8rem);
    font-weight: 200;
    padding: 6rem;
    text-align: left;
    margin-left: 4rem;
    margin-right: 4rem;
}

#video-section h2.video-s {
    width: calc(100% - 8rem);
    margin-left: 4rem;
    margin-right: 4rem;
}

div#encouragements-to-sign-up {
    padding: 0;
}

p.counter-text {
    width: 50%;
    padding: 1rem;
}

p.counter-text span.big {
    font-size: 9rem;
    width: 40%;
}

p.counter-text span.little {
    width: 60%;
}

img.image-under-counter {
    width: 100%;
}

.extra-module p.counter-text {
    width: 55%;
    padding: 1rem 1.5rem;
}

div#logosy img {
    padding: 2rem 4rem;
}

#root h2.rozmiar48.regular p {
    display: flex;
    flex-direction: row;
    column-gap: 1rem;
    flex-wrap: wrap;
    font-size: 3.6rem;
    width: 100%;
}

#root p.rozmiar48.center.black {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: .5rem;
    font-size: 3.2rem;
}

.expert {
    width: 100%;
}

div#beta-cta {
    width: 100%;
    margin-top: 10rem;
}

#root p.cta-do-beta {
    width: 100%;
}

div#opinions {
    padding-top: 0;
    padding-bottom: 5rem;
}

#root .enc .rozmiar20 {
    font-size: 1.6rem;
}

.encouragement:before {
    transform: scale(.7);
}

#root div#encouragements-to-sign-up .right {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    border-radius: 0;
}

#root p.counter-new {
    margin-bottom: 0;
    margin-top: 2rem;
}

#root p.demo-go {
    font-size: 2rem;
}

#root p.cta-do-beta {
    padding: 0;
}

#root h2.head-do-beta {
    padding: 0;
    padding-bottom: 2rem;
}

li.glide__slide--active {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.expert img {
    width: 140px;
}

div#simple-steps {
    padding-top: 0px;
}

.expert p.rozmiar22 {
    width: 100%;
}

#faq-section .faq-answer.show {
    font-size: 1.6rem;
}

div#gray-section {
    min-height: 60vh;
}

#root #encouragements-to-sign-up {
    flex-direction: column;
    padding: 0;
    width: 100%;
}


#faq-section .faq-question {
    font-size: 1.8rem;
    font-weight: 500;
}

#root div#start {
    padding-bottom: 10rem;
    margin-top: 0;
    width: calc(100% - 8rem);
    padding: 4rem;
}

.rozmiar72, .rozmiar72 h1, .rozmiar72 h2, .rozmiar72 h3, .rozmiar72 h4, .rozmiar72 h5, .rozmiar72 h6, .rozmiar72 p, .rozmiar72 a, .rozmiar72 span {
    font-size: 3.6rem;
}

#footer-top {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
}

#root .column-right {
    padding-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    gap: 5px;
}

#root .kontener-sz {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-direction: column-reverse;
}

div#faq-section {
    margin-bottom: 10rem;
}

#footer #blue-button {
    font-size: 1.2rem;
}

#root .column-center {
    padding-bottom: 1.4rem;
}

#root .column-left {
    padding-bottom: 2rem;
}

div#footer-top {
    margin-top: 0;
}

footer#footer h3 {
    font-size: 2.8rem;
}

#footer p.center {
    padding-bottom: 1.4rem;
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 300;
}

#footer #footer-bottom p.rozmiar16.center {
    font-size: 1.6rem;
}

div#benefits-frames p strong {
    font-size: 2.4rem;
}

#root div#video-section {
    margin-top: 0;
}

button#blue-button {
    font-size: 1.6rem;
}

div#footer-top p.rozmiar16.center {
    width: 100%;
}

div#footer-top p.rozmiar24.center.regular {
    width: 45%;
    text-transform: none;
}

#root .column-left {
    gap: 1rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

form .field label[for="newsletter-consent"] {
    font-size: 1.4rem;
}

#root input.wpcf7-submit {
    font-size: 1.8rem;
}

form .button {
    margin-top: 8rem;
}

video.background-video {
    width: 380%;
    max-height: 100vh;
}

#section-1 .content, #section-2 .content, #section-3 .content, #section-4 .content {
    width: fit-content;
    padding: 3rem;
}

#root .sticky-stack-section .section-content {
    padding-left: 0;
    padding-right: 0;
    padding-top: 4rem;
    padding-bottom: 4rem;
    width: calc(100% - 4rem);
}

#root #section-1 .section-images img {
    width: 50%;
    height: max-content;
}

#root #section-2 .section-images img {
    width: 100%;
    height: max-content;
}

#root #section-2 .section-images {
    gap: 1rem;
}

#root #section-1 img.obraz-opcjonalny-3.optional-image {
    position: relative;
    width: 100%;
    bottom: inherit;
    right: inherit;
    border-radius: 30px;
}

#root #section-1 img.obraz-opcjonalny-2 {
    display: none;
}

#root #section-2 .section-images {
    width: 100%;
}

#root #section-2 img.obraz-opcjonalny-1.optional-image {
    display: none;
}

#root #section-2 img.obraz-opcjonalny-3.optional-image {
    border-radius: 30px;
}

#root #section-1 .section-images {
    flex-direction: column;
    align-items: center;
}

#root #section-1 h2, #root #section-2 h2, #root #section-3 h2, #root #section-4 h2 {
    font-size: 2.4rem;
    padding-bottom: 1rem;
}

#root #section-3 img.obraz-opcjonalny-1.optional-image {
    width: 100%;
    border-radius: 30px;
    margin-top: 10vh;
}

#root #section-4 .section-images img.obraz-opcjonalny-1.optional-image {
    width: 90%;
}

#root #section-4 .section-images img {
    width: 50%;
}

#root #section-4 .section-images {
    position: relative;
    left: 0;
}

html {
    font-size: 10px;
}

#root #section-1 img.obraz-opcjonalny-3.optional-image,#root #section-3 img.obraz-opcjonalny-1.optional-image {
    height: inherit;
}

#section-1 .section-content, #section-2 .section-content, #section-3 .section-content, #section-4 .section-content {
    height: 80%;
}

#root #section-4 .section-images img.obraz-opcjonalny-2.optional-image {
    height: inherit;
    width: 60%;
    border-radius: 30px;
    margin-bottom: 5vh;
}

#root #section-4 .section-images img.obraz-opcjonalny-1.optional-image {
    height: inherit;
    width: 100%;
    border-radius: 30px;
    display: none;
}

#section-4 .section-content, #section-3 .section-content {
    align-items: center;
}

#section-3 .section-images, #root #section-4 .section-images {
    display: flex;
    align-items: flex-end;
}

#root #simple-steps, #root div#opinions-main-description {
    flex-direction: column;
}

div#experts-header {
    margin-top: 5rem;
}

div#footer-top {
    flex-direction: column;
}

#footer p.rozmiar16.center {
    padding-bottom: 0;
}

#root #section-1 img.obraz-opcjonalny-1.optional-image {
    display: none;
}

div#opinions-main-description {
    margin-top: 10rem;
}

.opinion h3 {
    min-height: 10px;
}

button.faq-question p {
    width: 95%;
}

#root .opinie p.rozmiar26.regular {
    padding-bottom: 1rem;
}

}


/* Ukryj nawigację poziomą na desktopie, gdy używamy hamburgera */
@media (min-width: 769px) {
    #menu {
        display: flex;
        justify-content: flex-end;
    }

    #mobile-menu-toggle {
        display: none;
    }

    #root #start {
        padding-bottom: 10rem;
    }

    
}

@media (max-width: 376px) {
html {
    font-size: 9px;
}

}