/*
Theme Name: Viola Swoboda
Author: Dziewczyna od Dizajnu
Version: 1.0
*/

/* --- RESET & VARIABLES --- */

:root {
    --color-primary: #808FAD;
    --color-bg: #F9F9F9;
    --color-gray: #D9D7D7;
    --color-accent: #734939;
    --color-dark: #1C1C1C;
    
    --font-headers: 'Gabarito', sans-serif;
    --font-body: 'Inter', sans-serif;

    --size-circle-md: 12.8125rem;
    --size-circle-lg: 19.21875rem;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

::selection {
    background-color: transparent;
    color: var(--color-dark);
    text-shadow: 0 0 8px rgba(128, 143, 173, 1);
}

html {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    background-color: var(--color-bg);
    margin: 0;
    overflow-x: hidden;
    font-family: var(--font-body);
    color: var(--color-dark);
}

a {
    text-decoration: none;
    color: var(--color-dark);
}

strong {
    font-weight: 600;
}

p, li, h1, h2, h3, h4, h5, h6 {
    text-wrap: pretty;
}


/* --- TYPOGRAPHY & LAYOUT --- */

.container {
    width: 100%;
    max-width: 1536px;
    margin: 0 auto;
}

.intro-container {
    position: relative;
}

.title-xl {
    font-family: var(--font-headers);
    font-weight: 600;
    font-size: 5.25rem;
    line-height: 1;
    text-transform: uppercase;
}

.theme-blue .title-xl {
    font-weight: 500;
}

.title-l {
    font-family: var(--font-headers);
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 1.5rem;
}

.theme-blue .title-l {
    font-weight: 200;
}

.title-s {
    font-family: var(--font-headers);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.3;
}

.text-base {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.3;
}

.text-l {
    font-weight: 300;
    font-size: 1.6875rem;
    line-height: 1.2;
}

.text-number {
    font-family: var(--font-headers);
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: .5rem;
}


/* --- GLOBAL COMPONENTS --- */

.theme-blue {
    background-color: var(--color-primary);
    color: var(--color-bg);
}

.btn-oval {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-width: 243px;
    height: 52.19px;
    line-height: 1;
    padding: 1.1rem 2.35rem;
    background-color: transparent;
    text-decoration: none;
    text-align: center;
}

.btn-ellipse-geo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
    transform-origin: center;
    transition: transform 0.5s ease-in-out;
}

.btn-ellipse-geo ellipse {
    fill: transparent;
    stroke: var(--color-dark);
    stroke-width: 2px;
    transition: stroke 0.3s ease;
}

.btn-oval:hover .btn-ellipse-geo {
    transform: rotate(180deg);
}

.btn-oval span {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-dark);
    position: relative;
    z-index: 2;
}

.btn-oval--white .btn-ellipse-geo ellipse {
    stroke: var(--color-bg);
}

.btn-oval--white span {
    color: var(--color-bg);
}

.btn-arrow {
    height: 0.52rem;
    width: 0.55rem;
    display: inline-block;
    transition: transform 0.3s ease;
    overflow: visible;
}

.btn-arrow-down {
    width: 0.55rem;
    height: 0.55rem;
    display: inline-block;
    transition: transform 0.3s ease;
    overflow: visible;
}

.hamburger-btn {
    display: none;
}


/* --- HEADER & NAVIGATION --- */

.header-top-segment {
    width: 100%;
    padding: 1.25rem 1.25rem 0;
    position: relative;
    z-index: 2;
}

.logo-and-menu-area {
    position: relative;
    width: 100%;
    max-width: 79.5%;
    container-type: inline-size;
}

.logo-link {
    display: block;
    width: 100%;
    text-decoration: none;
}

.logo-vector {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.logo-vector .cls-1 {
    fill: none;
    stroke: var(--color-dark);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

.navigation-circle-layer {
    position: absolute;
    top: 1cqw; 
    left: 42.21%;    
    width: 47.01%;  
    height: 17.25cqw; 
    display: flex;
    justify-content: center;
    z-index: 10;
}

.navigation-wrapper {
    width: max-content;
    height: 100%;
    position: relative;
}

.navigation-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    transform: translate(-50%, -50%);
    width: var(--size-circle-md);
    height: var(--size-circle-md);
    border-radius: 50%;
    background-color: var(--color-primary);
    filter: blur(calc(var(--size-circle-md) * 0.065));
    z-index: -1;
}

.gabarito-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start; 
    height: 100%;
}

.gabarito-menu a {
    font-family: var(--font-headers);
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
}


/* --- HERO --- */

.hero-segment {
    width: 100%;
    padding: 6.25rem 1.25rem 6.25rem 1.25rem;
}

.hero-container {
    padding: 0 0 0 3.75rem;
    width: 100%;
    max-width: 70%;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 5rem;
    align-items: flex-start;
    position: relative;
    z-index: 2;
}

.hero-text-block {
    display: flex;
    flex-direction: column;
    align-self: end;
    margin-bottom: 0.5rem;
}

.hero-lead {
    font-weight: 600;
    margin-bottom: 1.4rem;
}

.hero-btn-oval {
    position: absolute;
    z-index: 15;
    top: 1.65rem; 
    right: -17.5%; 
    transform: rotate(15deg);
    transform-origin: center;
}

.hero-right-area {
    position: absolute;
    top: 1.25rem;        
    right: 0.625rem; 
    width: 24%;
    isolation: isolate; 
}

.hero-img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
}

.hero-bottom-circle {
    position: absolute;
    bottom: -14rem; 
    right: 4.375rem;
    width: var(--size-circle-lg); 
    height: var(--size-circle-lg);
    border-radius: 50%;
    background-color: var(--color-primary);
    z-index: 1;
}


/* --- MARQUEE --- */

.marquee-divider-section {
    width: 100%;
    position: relative;
    margin-top: -.75rem;
}

.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    display: flex;
    position: relative;
}

.marquee-wrapper a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee-move 50s linear infinite;
    position: relative;
    z-index: -1;
}

.marquee-list {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-right: 1.25rem;
    flex-shrink: 0;
}

.marquee-list span {
    font-weight: 200;
    font-size: 2.5rem;
    white-space: nowrap;
}

.marquee-avatar-wrap {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marquee-avatar-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.marquee-bottom-inner {
    padding: 0 15rem 16.5rem;
}

.btn-for-whom {
    transform: rotate(-7.5deg);
    transform-origin: center;
    position: absolute;
    top: 7.5rem;
}


/* --- PRINCIPLES --- */

.principles-section {
    width: 100%;
    position: relative; 
    padding: 0;
}

.principles-container {
    padding: 0 1.25rem; 
}

.principles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 1fr; 
    column-gap: 5rem;
    row-gap: 0; 
    padding: 10.5rem 0;
    width: 100%;
}

.principles-item {
    grid-row: span 2;
    display: grid;
    grid-template-rows: subgrid;
}

.principles-header-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.principles-header-group .text-number {
    margin-bottom: 0.5rem; 
}

.principles-header-group .title-l {
    margin-bottom: 1.5rem; 
}

.hand-graphic {
    position: absolute;
    height: auto;
    pointer-events: none;
    z-index: 1;
}

.hand-left {
    left: 0;
    top: 12rem;
    width: 20.5rem;
}

.hand-right {
    right: 0;
    top: 11rem;
    width: 20.5rem;
}

.principles-cta-block {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 5rem;
    align-items: center;
    width: 100%;
    padding-bottom: 11rem;
}

.principles-cta-text {
    position: relative;
    z-index: 2; 
}

.principles-cta-btn-wrap {
    position: relative;
    display: flex;
    justify-content: flex-end; 
    width: 100%;
    z-index: 1;
}

.btn-cta-oval {
    position: relative;
    transform: rotate(15deg);
    transform-origin: center;
    transform-style: preserve-3d; 
}

.btn-cta-oval::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(-1px);
    width: var(--size-circle-md);
    height: var(--size-circle-md);
    border-radius: 50%;
    background-color: var(--color-primary);
    filter: blur(calc(var(--size-circle-md) * 0.065));
    pointer-events: none;
}

.circle-separator-wrap {
    position: absolute;
    bottom: 0;   
    left: 50%;   
    width: 0;
    height: 0;   
    z-index: 10;
}

.circle-separator-link {
    display: block;
    position: absolute;
    width: calc(var(--size-circle-md) / 0.8);   
    height: calc(var(--size-circle-md) / 0.8);
    transform: translate(-50%, -50%);
    border-radius: 50%;              
    cursor: pointer;
}

.circle-separator-text {
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: spinCircle 35s linear infinite;
    will-change: transform;
}

.circle-separator-text text {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16.4px; 
    fill: var(--color-dark);
    text-transform: uppercase;
    dominant-baseline: alphabetic; 
}


/* --- PATHS --- */

.paths-section {
    padding: 11rem 0;
}

.paths-container {
    padding: 0 5rem;
}

.paths-header-block {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 5rem;
    align-items: flex-start;
    margin-bottom: 5.25rem;
}

.paths-header-text {
    margin-top: .5rem;
}

.paths-header-text p + p {
    margin-top: 2.25rem;
}

.paths-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto 1fr; 
    column-gap: 5rem;
    row-gap: 0;
}

.paths-item {
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
}

.paths-header-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.paths-header-group .text-number {
    margin-bottom: 0.5rem;
}

.paths-header-group .title-l {
    margin-bottom: 1.5rem;
}

.paths-btn-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-top: 5.25rem;
}

.btn-oval--white {
    border-color: var(--color-bg);
}

.btn-oval--white span {
    color: var(--color-bg);
}

.btn-more--left {
    transform: rotate(-7.5deg);
    transform-origin: center;
}

.btn-more--right {
    transform: rotate(5deg);
    transform-origin: center;
}


/* --- COACHING & ADHD --- */

.coaching-section {
    width: 100%;
    padding: 11rem 0;
    position: relative;
}

.coaching-container {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    container-type: inline-size;
    position: relative;
    z-index: 2;
}

.coaching-master-grid {
    display: grid;
    grid-template-columns: 35vw 1fr calc(35vw * 0.65);
    column-gap: 7.5rem;
    align-items: start;
    width: 100%;
}

.coaching-header-wrapper {
    display: contents;
}

.coaching-master-grid .text-number {
    grid-column: 2 / 4;
    grid-row: 1;
    margin-bottom: 0;
    margin-top: -3px;
}

.coaching-master-grid .coaching-title {
    grid-column: 2 / 4;
    grid-row: 2;
    text-transform: none; 
    font-weight: 500;
    margin-top: 5.25rem;
    margin-bottom: 2.25rem;
    padding-right: 12.5rem;
}

.coaching-master-grid .coaching-subtitle {
    grid-column: 2 / 4;
    grid-row: 3;
    margin-bottom: 6.25rem;
}

.coaching-img-wrapper {
    grid-column: 1;
    grid-row: 1 / 5;
    width: 100%;
    position: relative;
}

.coaching-img {
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 1;
}

.blur-circle {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(50%, 50%);
    width: var(--size-circle-lg);
    height: var(--size-circle-lg);
    border-radius: 50%;
    background-color: var(--color-primary);
    filter: blur(calc(var(--size-circle-md) * 0.065));
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: darken;
}

.coaching-lead-text {
    grid-column: 2;
    grid-row: 4;
    max-width: none;
    align-self: start;
}

.coaching-lead-text p + p {
    margin-top: 1.5rem; 
}

.coaching-viola-wrapper {
    grid-column: 3;
    grid-row: 4 / 6;
    height: 100%;
}

.coaching-author-img {
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 0.65;
}

.coaching-about-wrapper {
    position: relative;
    grid-column: 1 / 4;
    grid-row: 5;
    width: 100%;
    max-width: 1536px;
    margin-top: 7.875rem;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 5rem;
    padding: 0 5rem;
    align-self: end;
}

.arrow-decor {
    position: absolute;
    width: var(--size-circle-md);
    height: var(--size-circle-md);
}

.arrow-decor svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.arrow-head-inline {
    position: absolute;
    width: 0.55rem;
    height: 0.55rem;
    color: inherit;
    right: 0;
    bottom: 0;
    transform: translateY(50%);
}

.arrow-head-inline svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.coaching-about-wrapper .arrow-decor {
    bottom: 50%;
    left: -3.75rem;
}

.coaching-practice-wrapper .arrow-decor {
    top: -17.35rem;
    left: -5rem;
    transform: rotate(-90deg) scale(-1, 1);
}

.coaching-small-text-top {
    padding-left: 7.5rem;
    padding-right: 5rem;
}

.coaching-bottom-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 5rem;
    align-items: end;
    width: 100%;
    max-width: 1536px;
    margin: 0 auto;
    padding: 0 5rem 0 5rem;
}

.coaching-topics-wrapper {
    position: relative;
    padding-left: 7.5rem;
    padding-right: 5rem;
    padding-bottom: 5.4rem;
}

.coaching-row-heading {
    margin-bottom: 2.25rem;
}

.coaching-topics-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.coaching-topics-list li {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.topic-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.3rem;
    flex-shrink: 0;
}

.coaching-practice-wrapper {
    position: relative;
}

.coaching-arrow-center-decor {
    position: absolute;
    top: -6rem;
    left: -2rem;
    width: 7rem;
    height: auto;
    color: var(--color-dark);
}

.coaching-practice-block {
    max-width: 480px;
}

.coaching-practice-block p + p {
    margin-top: 1.5rem;
}

.coaching-buttons-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 3rem 5rem 5.5rem 5rem;
}

.coaching-btn-session,
.coaching-btn-consultation {
    width: 100%;
    padding: 1.1rem 3.35rem;
}

.coaching-btn-session {
    transform: rotate(-5deg);
    transform-origin: center;
}

.coaching-btn-consultation {
    transform: rotate(10deg) translateY(5rem);
    transform-origin: center;
}

.adhd-mirrored-grid {
    display: grid;
    grid-template-columns: calc(35vw * 0.65) 1fr 35vw;
    column-gap: 7.5vw;
    align-items: start;
}

.coaching-top-circle {
    position: absolute;
    top: calc(var(--size-circle-lg) / -2);
    left: calc((100cqw - 1536px) / 2 + 12.5rem);
    width: var(--size-circle-lg);
    height: var(--size-circle-lg);
    border-radius: 50%;
    background: linear-gradient(to bottom, #FFFFFF 50%, #808FAD 50%);
    isolation: isolate;
    z-index: 1;
}

.coaching-top-circle .hand-graphic--top-adhd {
    background: url(img/decor-hand-top.png) no-repeat;
    background-size: contain;
    background-position: center top -2.25rem;
    height: 20.5rem;
    width: var(--size-circle-lg);
    top: calc(var(--size-circle-lg) / 2);
    left: 0;
    position: absolute;
    z-index: 1;
}

.coaching-top-circle .coaching-circle-blend-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #86B0C5;
    mix-blend-mode: difference;
    border-radius: 50%;
    z-index: 2;
}

.coaching-section .hand-graphic--bottom-page {
    height: 20.5rem;
    width: auto;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    z-index: 1;
}

.coaching-section .circle-separator-wrap {
    left: auto;
    right: calc((100cqw - 1536px) / 2 + 6.25rem);
}

.adhd-mirrored-grid .coaching-header-wrapper {
    display: contents;
}

.adhd-mirrored-grid .text-number,
.adhd-mirrored-grid .coaching-title,
.adhd-mirrored-grid .coaching-subtitle {
    grid-column: 1 / 3;
    padding-left: 5rem;
}

.adhd-mirrored-grid .text-number {
    grid-row: 1;
}

.adhd-mirrored-grid .coaching-title {
    grid-row: 2;
    margin-top: 5.25rem;
    margin-bottom: 2.25rem;
}

.adhd-mirrored-grid .coaching-subtitle {
    grid-row: 3;
    margin-bottom: 6.25rem;
}

.adhd-mirrored-grid .coaching-img-wrapper {
    grid-column: 3;
    grid-row: 1 / 5;
}

.adhd-mirrored-grid .blur-circle {
    left: 0;
    bottom: 0;
    transform: translate(0, calc(100% - 5.25rem));
    background-color: var(--color-accent);
    filter: blur(calc(var(--size-circle-md) * 0.065));
    mix-blend-mode: darken;
}

.adhd-mirrored-grid .coaching-lead-text {
    grid-column: 2;
    grid-row: 4;
    max-width: 520px;
}

.adhd-mirrored-grid .coaching-viola-wrapper {
    grid-column: 1;
    grid-row: 4 / 6;
    height: 100%;
    aspect-ratio: 0.65;
}

.adhd-mirrored-grid .coaching-viola-wrapper .coaching-author-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.adhd-mirrored-grid .coaching-about-wrapper {
    grid-column: 1 / 4;
    grid-row: 5;
    grid-template-columns: 1fr 1.5fr;
    margin-top: 7.875rem;
    align-self: end;
}

.adhd-mirrored-grid .coaching-small-text-top {
    grid-column: 2;
    padding-left: 5rem;
    padding-right: 10.5rem;
}

.coaching-bottom-row.adhd-mirrored-bottom {
    grid-template-columns: 1fr 1.5fr;
}

.adhd-mirrored-bottom .coaching-topics-wrapper {
    padding-left: 5rem;
    padding-bottom: 8rem;
    padding-right: 0;
}

.adhd-buttons-row {
    padding: 0rem 5rem 5.5rem 5rem;
    position: relative;
    z-index: 2;
}

.adhd-buttons-row .coaching-btn-session {
    transform: rotate(-7.5deg) translateY(5rem);
    transform-origin: center;
}

.adhd-buttons-row .coaching-btn-consultation {
    transform: rotate(5deg);
    transform-origin: center;
}

.adhd-mirrored-grid .coaching-about-wrapper .arrow-decor {
    bottom: 50%;
    right: -1.4rem;
    left: auto;
    transform: scale(-1, 1);
}

.adhd-mirrored-bottom .coaching-topics-wrapper .arrow-decor {
    top: -5rem;
    left: -15.15rem;
    transform: rotate(60deg);
}


/* --- ABOUT --- */

.about-section {
    position: relative;
    overflow: hidden;
}

.about-section .about-content-wrapper {
    position: relative;
    grid-row: 3;
    display: grid;
    margin-top: 6.25rem;
    row-gap: 0;
}

.about-section .about-content-wrapper .coaching-row-heading {
    grid-column: 1;
    grid-row: 1;
    padding-left: 7.5rem;
    padding-right: 5rem;
    position: relative;
    z-index: 2;
}

.about-section .about-content-wrapper .coaching-topics-list {
    grid-column: 1;
    grid-row: 2;
    padding-left: 7.5rem;
    padding-right: 5rem;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.about-section .blur-circle--about {
    position: absolute;
    grid-column: 2;
    grid-row: 1 / 3;
    top: -7.25rem;
    left: 0;
    margin-left: -5rem;
    transform: none;
    height: calc(100% + 10.5rem);
    width: auto;
    aspect-ratio: 1;
    filter: blur(calc(var(--size-circle-md) * 0.065 * 2));
    z-index: 1;
    mix-blend-mode: normal;
}

.about-section .about-main-title {
    grid-column: 2 / 4;
    grid-row: 1;
    font-family: var(--font-headers);
    font-size: 3.5rem;
    line-height: 1;
    font-weight: 400;
    margin-bottom: 3.375rem;
    text-transform: none;
}

.about-section .coaching-lead-text {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
}

.about-section .coaching-img-wrapper {
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: start;
}

.about-section .coaching-img {
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 1;
}

.about-section .coaching-viola-wrapper {
    grid-column: 3;
    grid-row: 2 / 4;
    align-self: start;
    position: relative;
    z-index: 3;
}

.about-section .coaching-author-img {
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 0.65;
}

.about-section .coaching-about-wrapper .arrow-decor {
    top: -7.875rem;
    left: -3.75rem;
    z-index: 3;
}


/* --- QUALIFICATIONS --- */

.about-section .qualifications-wrapper {
    margin-top: 7.875rem;
    padding: 0 5rem;
    position: relative;
    z-index: 3;
}

.about-section .qualifications-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 5rem;
    align-items: flex-start;
}

.about-section .qualifications-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.about-section .qualifications-title {
    text-transform: none;
    font-size: 7.25rem;
    line-height: .9;
    font-weight: 400;
}

.about-section .btn-view-offer {
    display: inline-flex;
    transform: rotate(-15deg);
    margin-top: .35rem;
    margin-left: 22rem;
}

.about-section .qualifications-right .coaching-topics-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-left: 0;
    margin: 0;
}

.qualifications-img-sidebar {
    display: none;
}


/* --- ANIMATIONS --- */

@keyframes marquee-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes spinCircle {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* --- UNIFIKACJA PIONOWYCH ZDJĘĆ NA DESKTOPIE (1920px) --- */

.adhd-mirrored-grid {
    column-gap: 7.5rem;
}

.coaching-viola-wrapper,
.adhd-mirrored-grid .coaching-viola-wrapper,
.about-section .coaching-viola-wrapper {
    align-self: start;
    height: auto;
    aspect-ratio: 0.65;
}

.coaching-author-img,
.adhd-mirrored-grid .coaching-viola-wrapper .coaching-author-img {
    width: 100%;
    height: auto;
    aspect-ratio: 0.65;
    object-fit: cover;
}


/* --- BANNER --- */

.hands-banner-section {
    width: 100%;
    min-height: 660px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.hands-text-block {
    text-align: center;
    position: relative;
    z-index: 1;
}

.hands-logo-svg {
    width: 260px;
    height: auto;
    display: block;
}

.hands-banner-section .hand-graphic--top-banner {
    background: url(img/decor-hand-top.png) no-repeat;
    background-size: contain;
    background-position: center top -2.25rem;
    position: absolute;
    top: 0;
    height: 20.5rem;
    width: 260px;
    margin-left: 3.5rem;
}

.hands-banner-section .hand-graphic--bottom-banner {
    background: url(img/decor-hand-bottom.png) no-repeat;
    background-size: contain;
    background-position: left bottom -2rem;
    transform: scaleX(-1);
    position: absolute;
    bottom: 0;
    height: 20.5rem;
    width: 260px;
    margin-left: -1rem;
}


/* --- OFFER --- */

.offer-section {
    width: 100%;
    padding: 11rem 0;
    position: relative;
}

.offer-container {
    position: relative;
    padding: 0 5rem;
}

.offer-header {
    position: relative;
    width: max-content;
    margin-bottom: 6.25rem;
}

.offer-title {
    text-transform: none;
    font-size: 7.25rem;
    font-weight: 400;
    line-height: .9;
}

.btn-go-faq {
    position: absolute;
    right: -12.35rem;
    bottom: -.25rem;
    transform: rotate(-15deg);
    z-index: 2;
}

.offer-circles-wrapper {
    position: relative;
    width: 100%;
}

.offer-circles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.25rem;
    padding-right: 5rem;
    position: relative;
    z-index: 1;
}

.offer-circle {
    background-color: var(--color-primary);
    color: var(--color-bg);
    border-radius: 50%;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1.5rem 3rem;
}

.offer-circle-title {
    font-family: var(--font-headers);
    line-height: 1.1;
    font-weight: 400;
    margin-bottom: 1.25rem;
}

.offer-circle-desc {
    font-size: 0.9375rem;
    font-weight: 300;
    margin-bottom: 1.25rem;
}

.offer-circle-note {
    font-size: 0.9375rem;
    font-weight: 300;
    font-style: italic;
}

.offer-viola-img {
    position: absolute;
    top: 8.25rem;
    right: 7.25rem;
    height: calc(100% - 16.5rem);
    width: auto;
    pointer-events: none;
    transform: scaleX(-1);
}


/* --- FAQ --- */

.faq-section {
    width: 100%;
    padding: 10.5rem 0 11rem;
    position: relative;
    overflow: hidden;
}

.faq-container {
    position: relative;
    padding: 0 12.5rem;
}

.faq-header {
    position: relative;
    width: 100%;
    margin-bottom: 5.25rem;
    display: flex;
    align-items: flex-end;
}

.faq-arrow-decor {
    top: 14px;
    left: -3.75rem;
}

.faq-title-block {
    display: flex;
    flex-direction: column;
}

.faq-title-block .text-number {
    margin-bottom: 5.25rem;
}

.btn-chat-action {
    transform: rotate(-30deg);
    position: absolute;
    right: 0;
    bottom: 3.65rem;
}

.faq-circle-graphic {
    position: absolute;
    left: calc(100% - 9.375rem);
    top: -6.25rem;
    width: calc(var(--size-circle-md) * 2.6);
    height: calc(var(--size-circle-md) * 2.6);
    z-index: -1;
    pointer-events: none;
}

.faq-circle-graphic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transform: scaleX(-1);
}

.faq-circle-overlay {
    position: absolute;
    top: -40px;
    left: -40px;
    width: calc(100% + 80px);
    height: calc(100% + 80px);
    border-radius: 50%;
    background: radial-gradient(circle at center, transparent 44%, var(--color-bg) 48%);
    filter: blur(calc(var(--size-circle-md) * 0.065));
}

.faq-circle-graphic {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transform: translate3d(0, 0, 0);
}

.faq-circle-graphic img {
    transform: scaleX(-1) translate3d(0, 0, 0);
    will-change: transform;
}

.faq-circle-overlay {
    transform: translate3d(0, 0, 0);
    will-change: filter;
}

.faq-questions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 7.5rem;
    row-gap: 5.25rem;
    width: 100%;
    align-items: start;
}

.faq-item {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.faq-question {
    font-size: 1.35rem;
    font-weight: 400;
}


/* --- CONVERSATION --- */

.conversation-section {
    width: 100%;
    padding: 16.25rem 0;
    position: relative;
}

.conversation-section::before {
    content: '';
    background: url(img/conversation-bg.jpg) no-repeat;
    background-size: cover;
    background-position: top -2.75rem center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: -5.25rem;
}

.conversation-container {
    padding: 0 12.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
}

.conversation-title {
    text-transform: none;
    font-size: 7.25rem;
    font-weight: 400;
    line-height: .9;
    margin-bottom: 5.25rem;
}

.conversation-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 6rem;
    align-items: flex-start;
}

.conversation-text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 27rem;
}

.conversation-actions {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3.5rem;
}

.btn-free-call {
    transform: rotate(-15deg);
}

.btn-session-call {
    transform: rotate(15deg);
    margin-left: 13rem;
    margin-top: -3rem;
}

.conversation-arrow-decor {
    position: absolute;
    top: -.75rem;
    right: 15rem;
    transform: scaleX(-1) rotate(45deg);
    pointer-events: none;
}


/* --- CONTACT --- */

.contact-section {
    width: 100%;
    padding: 11rem 0;
    position: relative;
}

.contact-container {
    padding: 0 12.5rem;
    position: relative;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 8rem;
    align-items: start;
    position: relative;
    z-index: 2;
}

.contact-info {
    display: flex;
    flex-direction: column;
}

.contact-lead {
    font-family: var(--font-headers);
    line-height: 1.1;
    font-weight: 400;
    margin-top: 3.375rem;
    margin-bottom: 1.5rem;
}

.contact-text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 420px;
}

.contact-form-block {
    width: 100%;
}

.contact-dry-form {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    width: 100%;
}

.form-group {
    width: 100%;
}

.form-input,
.form-textarea {
    width: 100%;
    background: transparent !important;
    border: 2px solid var(--color-dark) !important;
    padding: 1.1rem 1.1rem !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    color: var(--color-dark);
    text-transform: none !important;
    border-radius: 0 !important;
    box-sizing: border-box;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--color-dark);
    opacity: 1;
    text-transform: uppercase !important;
}

.form-textarea {
    min-height: 180px;
    resize: vertical;
}

.btn-form-submit {
    align-self: flex-start !important;
    background: var(--color-dark) !important;
    color: var(--color-bg) !important;
    border: 2px solid var(--color-dark) !important;
    padding: 1.1rem 3.35rem !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    cursor: pointer;
    transition: 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-form-submit:hover {
    background: transparent !important;
    color: var(--color-dark) !important;
}

.contact-section .blur-circle--contact {
    position: absolute;
    top: -16.5rem;
    left: 80%;
    margin-left: -5rem;
    transform: none;
    height: calc(100% + 33rem);
    width: auto;
    aspect-ratio: 1;
    filter: blur(calc(var(--size-circle-md) * 0.065 * 2));
    z-index: 1;
    mix-blend-mode: normal;
    pointer-events: none;
}

/* --- CF7 --- */

.contact-form-block form {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    width: 100%;
}

.contact-form-block .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.contact-form-block p {
    margin: 0;
    padding: 0;
}

.contact-form-block .wpcf7-response-output {
    margin: 2.25rem 0 0 0 !important;
    padding: 0 !important;
    font-family: var(--font-body) !important;
    text-transform: uppercase !important;
    font-size: 0.875rem !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    text-align: left !important;
    border: none !important;
}

.contact-form-block form.sent .wpcf7-response-output {
    color: var(--color-dark) !important;
    background-color: transparent !important;
}

.contact-form-block form.invalid .wpcf7-response-output,
.contact-form-block form.failed .wpcf7-response-output {
    color: var(--color-dark) !important;
    background-color: transparent !important;
}

.contact-form-block form.spam .wpcf7-response-output {
    color: var(--color-dark) !important;
    background-color: transparent !important;
}


/* --- EMAIL --- */

.big-email-section {
    width: 100%;
    padding: 0;
    background: transparent;
    position: relative;
    z-index: 3;
}

.big-email-container {
    padding: 0 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    container-type: inline-size;
    width: 100%;
}

.giant-email-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 100%;
    font-size: clamp(1.5rem, 9.1cqw, 8.5rem);
    font-family: var(--font-headers);
    font-weight: 400;
    color: var(--color-dark);
    line-height: 1;
    white-space: nowrap;
}

.email-avatar-at {
    display: inline-block;
    width: 0.78em;
    height: 0.78em;
    margin: 0 0.04em;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.email-avatar-at img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* --- SITE FOOTER --- */

.site-footer {
    width: 100%;
    padding: 11rem 0 5.25rem;
}

.site-footer .faq-circle-graphic {
    display: none;
}

.footer-container {
    padding: 0 1.25rem;
    display: flex;
    justify-content: space-between;
    gap: 5rem;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-logo-link {
    display: block;
    max-width: 6.25rem;
}

.footer-logo-vector {
    width: 100%;
    height: auto;
    display: block;
}

.footer-copyright {
    font-size: 0.875rem;
    line-height: 1.3;
}

.footer-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.footer-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.footer-nav-list a {
    font-family: var(--font-headers);
    font-weight: 500;
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--color-dark);
}

.footer-credits {
    display: flex;
    flex-direction: column;
    text-align: right;
    align-items: flex-end;
}

.credits-label {
    font-size: 0.875rem;
    line-height: 1.3;
}

.credits-author {
    font-size: 0.875rem;
    white-space: nowrap;
    font-weight: 600;
    line-height: 1.3;
}





/* --- MEDIA QUERIES --- */

/* --- DO 1535PX --- */
@media (max-width: 1535px) {
    .adhd-mirrored-grid .text-number,
    .adhd-mirrored-grid .coaching-title,
    .adhd-mirrored-grid .coaching-subtitle {
        padding-left: 5rem;
    }
}

/* --- OD 1536PX --- */
@media (min-width: 1536px) {
    .adhd-mirrored-grid .text-number,
    .adhd-mirrored-grid .coaching-title,
    .adhd-mirrored-grid .coaching-subtitle {
        padding-left: calc((100cqw - 1536px) / 2 + 5rem);
    }
}

/* --- OD 1921PX (Szerokie ekrany) --- */
@media (min-width: 1921px) {
    .principles-section {
        width: 100%;
        max-width: 1536px;
        margin: 0 auto;
    }
    .hand-left {
        left: 5rem;
        width: 17rem;
    }
    .hand-right {
        right: 5rem;
        width: 17rem;
    }
}

/* --- DO 1366PX --- */
@media screen and (max-width: 1366px) {
    .hero-container {
        gap: 2.25rem;
        padding-left: 0;
    }

    .principles-container,
    .paths-container,
    .offer-container,
    .conversation-container,
    .coaching-container {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .faq-container,
    .contact-container {
        padding-right: 8.75rem;
        padding-left: 8.75rem;
    }

    .principles-grid,
    .paths-grid,
    .contact-grid,
    .coaching-master-grid {
        column-gap: 3.75rem;
    }

    .adhd-mirrored-grid {
        column-gap: 3.75rem !important;
    }

    .coaching-master-grid .coaching-title {
        padding-right: 5rem;
    }

    .adhd-mirrored-grid .coaching-small-text-top {
        padding-right: 0;
    }

    .adhd-mirrored-grid .coaching-about-wrapper .arrow-decor {
        bottom: 120%;
        right: -1.4rem;
        left: auto;
        transform: scale(-1, 1) rotate(45deg);
    }

    .adhd-mirrored-bottom .coaching-topics-wrapper .arrow-decor {
        top: 0;
    }

    .about-section .about-content-wrapper .coaching-row-heading,
    .about-section .about-content-wrapper .coaching-topics-list {
        padding-right: 0;
    }

    .offer-circles-grid {
        padding-right: 0;
    }

    .offer-viola-img {
        right: 0;
    }

    .faq-arrow-decor {
        left: -5.1rem;
    }

    .faq-circle-graphic {
        left: calc(100% - 12.5rem);
    }
}

/* --- DO 1280PX --- */
@media screen and (max-width: 1280px) {
    html {
        font-size: 92%;
    }

    .adhd-mirrored-grid .coaching-about-wrapper .arrow-decor {
        right: -4.4rem;
    }

    .coaching-section .circle-separator-wrap {
        right: 0;
    }
}

/* --- DO 1024PX --- */
@media screen and (max-width: 1024px) {
    
    /* --- ZMIENNE I PARAMETRY BAZOWE --- */
    :root {
        --size-circle-md: 10.5rem;
        --size-circle-lg: 15.75rem;
    }

    html {
        font-size: 92%;
    }

    /* --- TYPOGRAFIA GLOBALNA --- */
    .title-xl {
        font-size: calc(5.25rem * 0.7);
        line-height: 1;
    }

    .offer-title,
    .about-section .qualifications-title,
    .conversation-title {
        font-size: calc(7.25rem * 0.7);
        line-height: 1;
    }

    .title-l {
        font-size: calc(2.5rem * 0.8);
        line-height: 1.1;
    }

    .text-l,
    .paths-header-text .title-l {
        font-family: var(--font-body);
        font-size: calc(1.6875rem * 0.8);
        font-weight: 400;
        line-height: 1.2;
    }

    /* --- KONTENERY I SEKCJE GLOBALNE --- */
    .principles-container,
    .paths-container,
    .offer-container,
    .conversation-container,
    .coaching-container {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .faq-container,
    .contact-container {
        padding-right: 8.75rem;
        padding-left: 8.75rem;
    }

    .principles-grid,
    .paths-grid,
    .contact-grid {
        column-gap: 3.75rem;
    }

    /* --- NAWIGACJA I MENU --- */
    .logo-and-menu-area {
        max-width: 72%;
    }

    .logo-link {
        position: relative;
        z-index: 11;
    }

    .navigation-wrapper::before {
        left: auto;
        right: 0;
        transform: translate(50%, -50%);
    }

    .navigation-circle-layer {
        top: 0.5cqw;
        height: 17.75cqw;
    }

    .gabarito-menu {
        display: grid;
        grid-template-columns: repeat(2, max-content);
        gap: 1.25rem 3.5rem;
        height: auto;
        width: 100%;
    }

    .gabarito-menu li {
        width: auto;
    }

    .gabarito-menu li:last-child {
        grid-column: auto;
        border-top: none;
        padding-top: 0;
        margin-top: 0;
        width: auto;
    }

    .gabarito-menu a {
        font-size: 0.875rem;
        font-weight: 600;
        display: inline-block;
    }

    /* --- SEKCJA HERO --- */
    .hero-segment {
        padding: 5.25rem 1.25rem;
    }

    .hero-container {
        max-width: 72%;
        gap: 3.25rem;
        padding-left: 0;
    }

    .hero-btn-oval {
        right: -15%;
        top: -0.5rem;
    }

    .hero-bottom-circle {
        bottom: -12.25rem;
        right: 2.5rem;
    }

    .hero-lead {
        margin-bottom: 1.25rem;
    }

    .btn-for-whom {
        display: none;
    }

    /* --- BANNER MARQUEE I ELEMENTY GRAFICZNE --- */
    .marquee-bottom-inner {
        padding: 0 15rem 10.75rem;
    }

    .hand-left,
    .hand-right {
        top: 9.5rem;
        width: 17.5rem;
    }

    /* --- SEKCJA ŚCIEŻKI --- */
    .paths-header-text {
        margin-top: 0;
    }

    .paths-header-text p + p {
        margin-top: 1.5rem;
    }

    /* --- COACHING KOGNITYWNY --- */
    .coaching-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.65fr);
        grid-template-rows: auto 1fr max-content auto auto;
        column-gap: 3.75rem;
        row-gap: 3.75rem;
        width: 100%;
        padding: 0 1.25rem;
        align-items: start;
    }

    .coaching-top-circle {
        left: 50%;
        transform: translateX(-50%);
    }

    .coaching-container .arrow-decor {
        display: none;
    }

    .coaching-master-grid, 
    .coaching-bottom-row {
        display: contents;
    }

    .coaching-title {
        padding-right: 0;
        position: static;
    }

    .coaching-small-text-top {
        padding-left: 0;
        padding-right: 0;
    }

    .coaching-master-grid .coaching-img-wrapper {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
    }

    .coaching-master-grid .coaching-header-wrapper {
        display: flex;
        flex-direction: column;
        grid-column: 2;
        grid-row: 1;
    }

    .coaching-master-grid .coaching-about-wrapper {
        grid-column: 1;
        grid-row: 2;
        display: block;
        padding: 0;
        margin: 0;
        align-self: end;
    }

    .coaching-master-grid .coaching-about-wrapper p {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .coaching-master-grid .coaching-viola-wrapper {
        grid-column: 2;
        grid-row: 2 / span 2;
        width: 100%;
        height: auto;
        align-self: end;
    }

    .coaching-bottom-row .coaching-topics-wrapper {
        grid-column: 1;
        grid-row: 3;
        padding: 0;
        align-self: start;
    }

    .coaching-bottom-row .coaching-topics-wrapper h3,
    .coaching-bottom-row .coaching-topics-wrapper .coaching-row-heading {
        margin-top: 0;
        padding-top: 0;
    }

    .coaching-master-grid .text-number {
        margin-top: 0;
    }

    .coaching-master-grid .coaching-title {
        margin-top: 2.25rem;
        margin-bottom: 2.25rem;
        line-height: 1;
    }

    .coaching-master-grid .coaching-subtitle {
        margin-bottom: 3.25rem;
    }

    /* --- COACHING ADHD --- */
    .coaching-section.theme-blue {
        margin-top: calc(var(--size-circle-lg) / 2);
    }

    .coaching-top-circle .hand-graphic--top-adhd,
    .coaching-section .hand-graphic--bottom-page {
        height: 17.5rem;
    }

    .adhd-mirrored-grid {
        display: contents;
    }

    .adhd-mirrored-grid .coaching-img-wrapper {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
    }

    .adhd-mirrored-grid .blur-circle {
        transform: translate(0, 50%);
    }

    .adhd-mirrored-grid .coaching-header-wrapper {
        display: flex;
        flex-direction: column;
        grid-column: 2;
        grid-row: 1;
    }

    .adhd-mirrored-grid .text-number,
    .adhd-mirrored-grid .coaching-title,
    .adhd-mirrored-grid .coaching-subtitle {
        grid-column: auto;
        grid-row: auto;
        padding-left: 0;
        padding-right: 0;
    }

    .adhd-mirrored-grid .coaching-lead-text {
        grid-column: auto;
        grid-row: auto;
        max-width: none;
    }

    .adhd-mirrored-grid .coaching-about-wrapper {
        grid-column: 1;
        grid-row: 2;
        display: block;
        padding: 0;
        margin: 0;
        align-self: end;
        z-index: 2;
    }

    .adhd-mirrored-grid .coaching-about-wrapper p {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .adhd-mirrored-grid .coaching-small-text-top {
        grid-column: auto;
        padding-left: 0;
        padding-right: 0;
    }

    .adhd-mirrored-grid .coaching-viola-wrapper {
        grid-column: 2;
        grid-row: 2 / span 2;
        width: 100%;
        height: auto;
        align-self: end;
    }

    .coaching-bottom-row.adhd-mirrored-bottom {
        display: contents;
    }

    .adhd-mirrored-bottom .coaching-topics-wrapper {
        grid-column: 1;
        grid-row: 3;
        padding: 0;
        align-self: start;
    }

    .adhd-mirrored-bottom .coaching-topics-wrapper h3,
    .adhd-mirrored-bottom .coaching-topics-wrapper .coaching-row-heading {
        margin-top: 0;
        padding-top: 0;
    }

    /* --- SEKCJA O MNIE --- */
    .about-section .blur-circle--about {
        display: none;
    }

    .about-section .coaching-img-wrapper {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
    }

    .about-section .coaching-header-wrapper {
        display: flex;
        flex-direction: column;
        grid-column: 2;
        grid-row: 1;
    }

    .about-section .about-main-title {
        position: static;
        margin-top: 0;
        padding-right: 0;
        font-size: calc(2.5rem * 0.8);
        line-height: 1.1;
    }

    .about-section .about-content-wrapper {
        grid-column: 1;
        grid-row: 2;
        display: block;
        padding: 0;
        margin: 0;
        width: 100%;
        align-self: end;
    }

    .about-section .about-content-wrapper .coaching-row-heading,
    .about-section .about-content-wrapper .coaching-topics-list {
        padding-left: 0;
        padding-right: 0;
    }

    .about-section .coaching-viola-wrapper {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        height: auto;
        align-self: end;
    }

    .about-section .coaching-about-wrapper .arrow-decor {
        top: -3.5rem;
        left: 0;
    }

    /* --- STRUKTURY DOLNE: PRAKTYKA I INTERWENCJE VISTY --- */
    .coaching-practice-wrapper,
    .qualifications-wrapper {
        grid-column: 1 / span 2;
        grid-row: 4;
        padding: 0;
        max-width: 100%;
        margin-top: 0;
    }

    .coaching-practice-block,
    .qualifications-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.65fr);
        column-gap: 3.75rem;
        width: 100%;
        max-width: none;
    }

    .coaching-practice-block p + p {
        margin-top: 0;
    }

    .coaching-buttons-row,
    .adhd-buttons-row {
        grid-column: 1 / span 2;
        grid-row: 5;
        justify-self: center;
        padding: 2.25rem 5rem 3.25rem 5rem;
    }

    .coaching-btn-session {
        transform: rotate(-5deg) translateY(3rem);
    }

    .coaching-btn-consultation {
        transform: rotate(10deg) translateY(0);
    }

    /* --- SPECYFICZNY UKŁAD: PRZYGOTOWANIE I KWALIFIKACJE --- */
    .about-section .qualifications-wrapper {
        margin-top: 0;
        padding: 0 1.25rem;
    }

    .about-section .qualifications-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.65fr); 
        column-gap: 3.75rem;
        row-gap: 3.75rem;
    }

    .about-section .qualifications-left {
        position: relative;
    }

    .about-section .qualifications-title {
        margin-bottom: 1.5rem;
    }

    .about-section .btn-view-offer {
        position: absolute;
        margin-top: 0;
        margin-left: 0;
        bottom: -1.25rem;
        right: 5rem;
    }

    /* --- SPERSONALIZOWANE BLOKI (OFERTA / FAQ / KONTAKT) --- */
    .hands-banner-section {
        min-height: 613px;
    }

    .btn-go-faq {
        right: -13.35rem;
    }

    .offer-circles-grid {
        padding-right: 0;
        column-gap: 1.25rem;
    }

    .offer-circle-desc {
        font-weight: 400;
    }

    .offer-circle-title {
        margin-bottom: 1rem;
    }

    .offer-circle-note {
        font-weight: 400;
    }

    .offer-viola-img {
        top: 5.5rem;
        right: 1.25rem;
        height: calc(100% - 11rem);
    }

    .faq-arrow-decor {
        left: -4rem;
    }

    .faq-circle-graphic {
        width: calc(var(--size-circle-lg) * 2);
        height: calc(var(--size-circle-lg) * 2);
        top: -9.375rem;
        left: auto;
        right: calc(-12.5rem - var(--size-circle-lg) / 2);
    }

    .conversation-arrow-decor {
        top: -3.75rem;
        transform: scaleX(-1) rotate(60deg);
    }

    .btn-free-call {
        margin-top: -2rem;
    }

    .contact-grid {
        grid-template-columns: 1fr 1fr;
    }

    .contact-section .blur-circle--contact {
        width: calc(var(--size-circle-lg) * 2);
        height: calc(var(--size-circle-lg) * 2);
    }

    /* --- STOPKA (FOOTER) --- */
    .site-footer {
        padding-bottom: 2.25rem;
    }

    .footer-copyright {
        width: 205px;
    }

    .footer-credits {
        width: 150px;
    }
}

/* --- DO 960PX --- */
@media screen and (max-width: 960px) {
    
    /* --- TYPOGRAFIA I PARAMETRY BAZOWE --- */
    .title-xl br {
        display: none;
    }

    .title-xl:not(.hero-title) {
        font-size: calc(7.25rem * 0.6);
        font-weight: 400;
        line-height: 1;
        text-transform: none;
    }

    .hero-title {
        font-size: calc(7.25rem * 0.6);
    }

    .coaching-master-grid .coaching-title {
        font-size: calc(7.25rem * 0.375);
        line-height: 1.1;
    }

    .faq-container,
    .contact-container {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .btn-oval span {
        max-width: 12rem;
        white-space: wrap;
    }

    .btn-oval span svg
    /*,
    .btn-form-submit*/ {
        display: none;
    }

    /* --- MAŁE LOGO I MENU SZKLANE --- */
    .header-top-segment {
        padding: 1.25rem 1.25rem 0;
        z-index: 9999 !important;
    }

    .logo-and-menu-area {
        max-width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        container-type: none !important;
    }

    .logo-link {
        width: 140px;
        height: 59px;
        display: block;
        background: url(img/logo-3.svg) no-repeat center/contain;
        position: relative;
        z-index: 10000;
    }

    .logo-link svg {
        display: none;
    }

    .navigation-circle-layer {
        position: static;
        width: auto;
        height: auto;
        display: flex;
        align-items: center;
    }

    .navigation-wrapper::before {
        display: none; 
    }

    .hamburger-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 14px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 10000;
        position: relative;
    }

    .hamburger-btn span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--color-dark);
        transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
    }

    .hamburger-btn.is-active span {
        background-color: var(--color-dark) !important;
    }

    .gabarito-menu {
        display: none !important; 
    }

    .gabarito-menu.is-active {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(249, 249, 249, 0.75); 
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 0;
        gap: 2.25rem;
        z-index: 9993;
        list-style: none;
        overflow: hidden;
    }

    .gabarito-menu.is-active li {
        width: auto;
        text-align: center;
    }

    .gabarito-menu.is-active a {
        font-family: var(--font-headers);
        font-size: 2.25rem;
        font-weight: 500;
        text-transform: uppercase;
        color: var(--color-dark);
        display: inline-block;
        position: relative;
        transition: color 0.3s ease, transform 0.3s ease;
    }

    .hamburger-btn.is-active span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .hamburger-btn.is-active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger-btn.is-active span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* --- SEKCJA HERO --- */
    .hero-segment {
        padding: 6.25rem 1.25rem 12.5rem;
    }

    .hero-container {
        grid-template-columns: 1fr;
        max-width: 58%;
        gap: 1.5rem;
        padding-left: 0;
    }

    .hero-text-block {
        align-self: start;
        margin-bottom: 0;
    }

    .hero-right-area {
        position: absolute;
        top: 1.25rem;
        top: 1.25rem;
        right: 1.25rem;
        width: 15rem;
        display: block;
    }

    .hero-img {
        width: 100%;
        height: auto;
    }

    .hero-btn-oval {
        top: auto;
        right: -28%;
        bottom: -5.5rem;
        margin-top: 1rem;
        transform: rotate(-15deg);
    }

    .hero-bottom-circle {
        bottom: -11rem;
        right: calc(var(--size-circle-lg) * -1 + 2.25rem);
        filter: blur(calc(var(--size-circle-md) * 0.065 * 2));
        width: calc(var(--size-circle-lg) * 2.6);
        height: calc(var(--size-circle-lg) * 2.6);
    }

    .marquee-divider-section {
        position: relative;
        z-index: 2;
    }

    .marquee-bottom-inner {
        padding: 0 15rem 7.5rem;
    }

    /* --- SEKCJA ZASADY --- */
    .principles-grid,
    .paths-grid,
    .contact-grid {
        column-gap: 1.75rem;
    }

    .principles-cta-block {
        gap: 2.25rem;
    }

    /* --- SEKCJA ŚCIEŻKI --- */
    .paths-header-block {
        grid-template-columns: 1fr;
        gap: 2.25rem;
        margin-bottom: 5.25rem;
    }

    .paths-header-text .title-l {
        display: inline;
    }

    /* --- SIATKI MATKI --- */
    .coaching-container {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr);
        column-gap: 1.75rem;
        row-gap: 2.25rem;
    }

    .coaching-practice-block,
    .qualifications-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr);
        column-gap: 1.75rem;
    }

    .coaching-row-heading {
        margin-bottom: 2.25rem;
    }

    .coaching-practice-block,
    .qualifications-grid {
        column-gap: 1.25rem;
    }

    .coaching-lead-text .text-l {
        font-family: var(--font-body);
        font-weight: 400;
        font-size: 1rem;
        line-height: 1.3;
    }

    .coaching-master-grid .coaching-title {
        margin-top: 1.25rem;
        margin-bottom: 1.75rem;
    }

    .coaching-master-grid .coaching-about-wrapper {
        margin-top: .5rem;
    }

    .adhd-mirrored-grid .coaching-about-wrapper {
        grid-column: 2;
    }

    .about-section .about-main-title {
        margin-top: 0;
        font-family: var(--font-body);
        font-size: calc(1.6875rem * 0.8);
        font-weight: 400;
        line-height: 1.2;
    }

    .about-section .coaching-master-grid .coaching-viola-wrapper {
        display: none;
    }

    .about-section .about-content-wrapper {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .about-section .qualifications-wrapper {
        margin-top: 0;
        padding: 0 1.25rem;
    }

    .about-section .qualifications-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr);
        grid-template-rows: min-content 1fr;
        column-gap: 1.75rem;
        row-gap: 3.25rem;
        align-items: start;
    }

    .about-section .qualifications-left {
        grid-column: 1;
        grid-row: 1;
    }

    .about-section .qualifications-right {
        grid-column: 1;
        grid-row: 2;
    }

    .about-section .qualifications-title {
        margin-bottom: 0;
        font-size: calc(7.25rem * 0.375);
        line-height: 1.1;
    }

    .about-section .qualifications-img-sidebar {
        grid-column: 2;
        grid-row: 1 / span 2;
        display: block;
        align-self: stretch;
    }

    .about-section .qualifications-img-sidebar img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        aspect-ratio: .65; 
    }

    .about-section .btn-view-offer {
        display: none;
    }

    /* --- SEKCJA OFERTA I CENNIK --- */
    .offer-section {
        padding-bottom: 4.75rem;
    }

    .offer-header {
        margin-bottom: 8.25rem;
        width: 31rem;
    }

    .btn-go-faq {
        right: -2.25rem;
        bottom: auto;
        transform: rotate(-22.5deg);
    }

    .offer-circles-grid {
        display: flex;
        flex-direction: column;
        gap: 3.75rem;
        padding-right: 0;
    }

    .offer-circle {
        background-color: transparent;
        color: var(--color-dark);
        border-radius: 0;
        aspect-ratio: auto;
        display: block;
        text-align: left;
        padding: 0;
        margin-bottom: 5.25rem;
    }

    .offer-viola-img {
        display: none;
    }

    .offer-circle-title {
        font-size: calc(2.5rem * 0.8);
        font-family: var(--font-headers);
        line-height: 1.1;
        margin-bottom: 1.5rem;
    }

    .offer-circle-desc {
        margin-bottom: 0;
    }

    .offer-circle-note {
        margin-top: 1.5rem
    }

    .offer-circle-title br {
        display: none;
    }

    /* --- SEKCJA FAQ --- */
    .faq-section {
        overflow: visible;
    }

    .faq-title-block .text-number {
        margin-bottom: 1.25rem;
    }

    .faq-questions-grid {
        column-gap: 2.25rem;
    }

    .faq-circle-graphic {
        top: -14.25rem;
        right: -7.5rem;
    }

    .faq-container .faq-circle-graphic {
        display: none;
    }

    .faq-arrow-decor {
        display: none;
    }

    .btn-chat-action {
        display: none;
    }

    /* --- ROZMOWA WSTĘPNA & KONTAKT --- */
    .conversation-section {
        padding: 11rem 0;
    }

    .conversation-container {
        margin-right: 0;
        margin-left: 0;
        max-width: 40rem;
    }

    .conversation-grid {
        display: block;
    }

    .conversation-arrow-decor {
        display: none;
    }

    .btn-free-call {
        margin-top: 6.25rem;
    }

    .conversation-section::before {
        background-position: top left;
        left: -9.5rem;
    }

    .contact-grid {
        display: block;
    }

    .contact-lead {
        margin-top: 5.25rem;
    }

    .contact-lead br {
        display: none;
    }

    .contact-text {
        max-width: 100%;
    }

    .contact-form-block {
        margin-top: 5.75rem;
    }

    .contact-section .blur-circle--contact {
        top: -13.5rem;
        left: auto;
        right: calc(var(--size-circle-lg) * -.75);
        margin-left: 0;
    }

    /* --- STOPKA --- */
    .site-footer {
        overflow: hidden;
    }

    .footer-container {
        flex-direction: column;
        position: relative;
    }

    .site-footer {
        padding-bottom: 5.25rem;
    }

    .site-footer .faq-circle-graphic {
        display: block;
        width: calc(var(--size-circle-lg) * 2.6);
        height: calc(var(--size-circle-lg) * 2.6);
        top: -5.5rem;
        right: -7.5rem;
    }

    .site-footer .faq-circle-overlay {
        filter: blur(calc(var(--size-circle-md) * 0.065 * 2));
        top: -80px;
        left: -80px;
        width: calc(100% + 160px);
        height: calc(100% + 160px);
    }

    .footer-container > div {
        text-align: left;
    }

    .footer-logo-link {
        margin-bottom: 3.25rem;
        width: 140px;
        max-width: 140px;
    }

    .footer-links-grid {
        width: max-content;
    }

    .footer-credits,
    .footer-copyright {
        display: block;
        width: auto;
    }

    .footer-credits p {
        display: inline;
    }

    .credits-author {
        white-space: wrap;
    }
}

/* --- DO 767PX (Mobile) --- */
@media screen and (max-width: 767px) {
    
    /* --- TYPOGRAFIA I PARAMETRY BAZOWE --- */
    .hero-title,
    .offer-title,
    .about-section .qualifications-title,
    .conversation-title {
        font-size: 2.25rem;
        line-height: 1.1;
    }

    .title-xl,
    .title-xl:not(.hero-title) {
        font-size: calc(5.25rem * 0.55);
        line-height: 1;
    }

    .title-l {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    .text-l, 
    .paths-header-text .title-l {
        font-size: 1.25rem;
        line-height: 1.4;
    }

    .text-base {
        line-height: 1.4;
    }

    .principles-container,
    .paths-container,
    .offer-container,
    .conversation-container,
    .coaching-container,
    .faq-container,
    .contact-container {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .coaching-section {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }

    .offer-section,
    .contact-section,
    .site-footer {
        padding-top: 8rem;
    }

    .paths-section,
    .conversation-section,
    .principles-cta-block,
    .faq-section {
        padding-bottom: 8rem;
    }

    .paths-section,
    .conversation-section,
    .faq-section {
        padding-top: 7.5rem;
    }

    .offer-section {
        padding-bottom: 7.5rem;
    }

    .coaching-section.theme-blue {
        padding-bottom: 11rem;
    }

    /* --- UKŁAD JEDNOKOLUMNOWY (HURTOWY CRASH GRIDA) --- */
    .principles-grid, 
    .paths-grid, 
    .coaching-container, 
    .coaching-practice-block, 
    .qualifications-grid, 
    .contact-grid, 
    .faq-questions-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 3.75rem;
    }

    /* --- MAŁE LOGO I MENU PEŁNOEKRANOWE --- */
    .logo-and-menu-area {
        max-width: 100%;
    }

    .gabarito-menu.is-active a {
        font-size: 1.75rem;
    }

    /* --- SEKCJA HERO --- */
    .hero-right-area {
        width: 13.5rem;
    }

    /* --- CZYSZCZENIE DEKORACJI (ZABIJAMY DUCHY) --- */
    .contact-section .blur-circle--contact,
    .btn-cta-oval::before {
        display: none;
    }

    .circle-separator-wrap {
        left: auto;
        right: 0;
    }

    .coaching-master-grid .coaching-header-wrapper {
        width: 100%;
        position: relative;
        z-index: 3;
    }

    .adhd-mirrored-grid .blur-circle {
        left: -5.25rem;
        transform: translate(0, calc(100% - 5.25rem));
    }

    .offer-header {
        width: 23rem;
    }

    /* --- SEKCJE --- */
    .principles-grid {
        padding: 10.5rem 0 5.25rem;
    }

    .principles-item,
    .paths-item {
        display: block;
    }

    .principles-cta-block {
        display: block;
    }

    .principles-cta-btn-wrap {
        justify-content: center;
        margin-top: 5.25rem;
    }

    .principles-title {
        max-width: 30rem;
    }

    .hand-left {
        left: -6rem;
        top: 7rem;
    }

    .hand-right {
        right: -2rem;
        top: 6.5rem;
    }

    .btn-cta-oval,
    .btn-more--right {
        transform: rotate(-7.5deg);
    }

    .paths-grid {
        gap: 5.25rem;
    }

    .paths-btn-wrap {
        padding-top: 3.75rem;
        justify-content: flex-end;
    }

    .coaching-container {
        display: flex;
        flex-direction: column;
    }

    .coaching-master-grid .coaching-header-wrapper {
        width: 100%;
    }

    .coaching-master-grid .coaching-about-wrapper {
        margin-top: 0;
    }

    .coaching-lead-text .text-l {
        font-size: 1.25rem;
        line-height: 1.4;
    }

    .coaching-practice-block {
        gap: 1.5rem;
    }

    .coaching-top-circle {
        left: auto;
        right: 1.25rem;
        transform: none;
    }

    .coaching-buttons-row,
    .conversation-actions {
        display: flex;
        flex-direction: column;
        padding-right: 0;
        padding-left: 0;
        padding-bottom: 0;
        gap: 2.25rem;
        width: 100%;
        max-width: 360px;
    }

    .coaching-section:not(.theme-blue) .coaching-buttons-row {
        margin-left: 0;
    }

    .coaching-section.theme-blue {
        margin-top: calc(var(--size-circle-lg) / 3);
        padding-top: calc(8rem + var(--size-circle-lg) / 3);
    }

    .coaching-btn-session,
    .coaching-btn-consultation {
        width: auto;
    }

    .coaching-btn-session,
    .adhd-buttons-row .coaching-btn-session,
    .btn-free-call {
        transform: rotate(-7.5deg);
        margin-right: auto;
    }

    .coaching-btn-consultation,
    .adhd-buttons-row .coaching-btn-consultation,
    .btn-session-call {
        transform: rotate(7.5deg);
        margin-left: auto;
    }

    .btn-free-call {
        margin-top: 5.25rem;
    }

    .coaching-lead-text .text-l.about-lead-space {
        font-size: 1rem;
        line-height: 1.3;
    }

    .coaching-master-grid,
    .coaching-bottom-row {
        display: flex;
        flex-direction: column;
        row-gap: 3.75rem;
    }

    .coaching-bottom-row {
        padding-right: 0;
        padding-left: 0;
    }

    .about-section .qualifications-grid {
        display: flex;
        flex-direction: column;
        row-gap: 3.75rem;
    }

    .about-section .qualifications-wrapper {
        margin-top: 5.25rem;
    }

    .hands-banner-section .hand-graphic--bottom-banner {
        margin-left: -3rem;
    }

    .offer-circle {
        margin-bottom: 0;
    }

    .faq-header,
    .conversation-title {
        margin-bottom: 3.75rem;
    }

    .conversation-container,
    .conversation-text {
        max-width: 100%;
    }

    .conversation-section::before {
        background-position: bottom right;
        background-size: auto 155%;
        left: 0;
    }

    .conversation-actions {
        max-width: 25rem;
    }

    .btn-session-call {
        margin-top: 0;
    }

    .contact-lead {
        margin-top: 3.375rem;
    }

    .contact-section {
        padding-bottom: 5.25rem;
    }

    .email-avatar-at {
        width: 1.5em;
        height: 1.5em;
        margin: 0 0.04em;
    }

    .giant-email-link {
        font-size: clamp(1.5rem, 8.4cqw, 8.5rem);
    }

    .site-footer .faq-circle-graphic {
        display: none;
    }

    .footer-nav-list:first-child,
    .footer-nav-list:last-child li:not(:last-child) {
        display: none;
    }

    .footer-container {
        gap: 2.25rem;
    }

    .site-footer {
        padding-bottom: 2.75rem;
    }

    .footer-logo-link {
        margin-bottom: 2.25rem;
    }
}

/* --- DO 670PX --- */
@media screen and (max-width: 670px) {
    .conversation-section {
        padding-bottom: calc(8rem + var(--size-circle-lg) / 3);
    }
    
    .conversation-section::before {
        background-size: auto 127%;
    }
}

/* --- DO 560PX --- */
@media screen and (max-width: 560px) {
    .conversation-section::before {
        background-size: cover;
    }
}

/* --- DO 520PX --- */
@media screen and (max-width: 520px) {
    .hero-container {
        max-width: 62%;
    }

    .hero-segment {
        padding-bottom: 15.5rem;
    }

    .hero-title {
        font-size: 7.25vw;
    }

    .hero-btn-oval {
        bottom: -6.5rem;
        right: auto;
        left: -.4rem;
    }

    .hero-right-area {
        top: 5.25rem;
        right: -.5rem;
        width: 43%;
    }

    .hero-bottom-circle {
        bottom: -12.5rem;
        right: -1rem;
        filter: blur(calc(var(--size-circle-md) * 0.065));
        width: var(--size-circle-lg);
        height: var(--size-circle-lg);
    }

    .coaching-top-circle {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
}

/* --- DO 430PX --- */
@media screen and (max-width: 430px) {
    .btn-go-faq {
        right: .35rem;
        bottom: auto;
        transform: rotate(-15deg);
        top: 3rem;
    }

    .coaching-buttons-row,
    .conversation-actions {
        max-width: 100%;
    }
}

/* --- DO 389PX --- */
@media screen and (max-width: 389px) {
    .principles-title {
        max-width: 20rem;
    }

    .hand-left {
        top: 10rem;
    }

    .hand-right {
        top: 9.5rem;
    }
}

/* --- KLAMRA BEZPIECZEŃSTWA POWYŻEJ 1920PX --- */
@media screen and (min-width: 1921px) {
    .coaching-master-grid {
        grid-template-columns: 672px 1fr calc(672px * 0.65);
    }

    .adhd-mirrored-grid {
        grid-template-columns: calc(672px * 0.65) 1fr 672px;
    }

    .offer-section {
        max-width: 1920px;
        margin-left: auto;
        margin-right: auto;
    }

    .conversation-section {
        max-width: 1920px;
        margin-left: auto;
        margin-right: auto;
    }

    .conversation-section::before {
        background-size: calc(100% + 5rem) auto;
        background-position: top -5.5rem left -5rem;
        left: 0;
    }
}