/* =========================================
   O MARCE - HERO
========================================= */

.sasha-about {
    background: #ffffff;
}

.about-hero {
    position: relative;
    overflow: visible;

    padding: 90px 6vw 0;

    background:
        radial-gradient(
            circle at 75% 40%,
            rgba(255,255,255,.11) 0%,
            rgba(255,255,255,.045) 28%,
            rgba(255,255,255,0) 58%
        ),
        #7251a2;
}

.about-hero .container {
    max-width: 1400px;
    margin: 0 auto;
}


/* =========================================
   GRID
========================================= */

.about-hero-grid {
    display: grid;
    grid-template-columns: 58% 42%;
    align-items: center;

    gap: 30px;

    min-height: 500px;
}


/* =========================================
   TEKST
========================================= */

.about-hero-content {
    position: relative;
    z-index: 5;

    max-width: 820px;

    padding-bottom: 80px;
}

.about-hero .section-label {
    display: inline-block;

    margin-bottom: 24px;

    color: rgba(255,255,255,.82);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.about-hero h1 {
    margin: 0 0 28px;

    color: #ffffff;

    font-size: clamp(56px, 5.3vw, 86px);
    line-height: .98;
    letter-spacing: -2px;
}

.about-hero p {
    max-width: 640px;

    margin: 0;

    color: rgba(255,255,255,.88);

    font-size: 18px;
    line-height: 1.75;
}


/* =========================================
   PRAWA STRONA
========================================= */

.about-hero-visual {
    position: relative;

    align-self: stretch;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    min-width: 0;
}


/* =========================================
   NASIONA SACHA INCHI
========================================= */

.about-hero-visual img {
    position: relative;
    z-index: 5;

    display: block;

    width: 125%;
    max-width: 700px;
    height: auto;

    margin-bottom: -105px;

    transform: translateX(5%);

    filter: drop-shadow(
        0 25px 30px rgba(35,25,50,.24)
    );
}


/* =========================================
   DUŻY NAPIS SACHA INCHI W TLE
========================================= */

.about-hero-word {
    position: absolute;

    top: 35px;
    right: -40px;

    z-index: 1;

    color: rgba(255,255,255,.065);

    font-size: clamp(82px, 8vw, 135px);
    font-weight: 800;

    line-height: .78;
    letter-spacing: -5px;

    text-align: right;

    pointer-events: none;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .about-hero {
        padding-top: 90px;
    }

    .about-hero-grid {
        grid-template-columns: 1fr;

        min-height: auto;

        gap: 20px;
    }

    .about-hero-content {
        padding-bottom: 20px;
    }

    .about-hero-visual {
        min-height: 370px;

        justify-content: flex-end;
    }

    .about-hero-visual img {
        width: 70%;
        max-width: 600px;

        margin-bottom: -65px;
        transform: translateX(3%);
    }

    .about-hero-word {
        right: 0;
        top: 20px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .about-hero {
        padding: 75px 24px 0;
    }

    .about-hero-grid {
        gap: 25px;
    }

    .about-hero-content {
        padding-bottom: 10px;
    }

    .about-hero h1 {
        font-size: 48px;

        letter-spacing: -1.3px;
    }

    .about-hero p {
        font-size: 16px;
    }

    .about-hero-visual {
        min-height: 290px;
    }

    .about-hero-visual img {
        width: 105%;
        max-width: 480px;

        margin-bottom: -45px;
        transform: translateX(8%);
    }

    .about-hero-word {
        top: 20px;
        right: -20px;

        font-size: 72px;

        letter-spacing: -3px;
    }
}

/* =========================================
   O MARCE - HISTORIA
========================================= */

.about-story {
    padding: 165px 6vw 120px;
    background: #ffffff;
}

.about-story .container {
    max-width: 1400px;
    margin: 0 auto;
}

.about-story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: start;
}

.about-story-heading .section-label {
    display: inline-block;
    margin-bottom: 22px;
    color: #7251a2;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.about-story-heading h2 {
    margin: 0;
    color: #282236;
    font-size: clamp(44px, 4.5vw, 68px);
    line-height: 1.03;
    letter-spacing: -1.5px;
}

.about-story-content {
    padding-top: 38px;
}

.about-story-content p {
    margin: 0 0 24px;
    color: #686270;
    font-size: 18px;
    line-height: 1.8;
}

.about-story-content p:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {

    .about-story-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .about-story-content {
        padding-top: 0;
    }

}

@media (max-width: 767px) {

    .about-story {
        padding: 125px 24px 80px;
    }

    .about-story-heading h2 {
        font-size: 42px;
    }

    .about-story-content p {
        font-size: 16px;
    }

}

/* =========================================
   O MARCE - SACHA INCHI
========================================= */

.about-inchi {
    padding: 120px 6vw;
    background: #f7f7f7;
}

.about-inchi .container {
    max-width: 1400px;
    margin: 0 auto;
}

.about-inchi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
}

.about-inchi-image img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.about-inchi-content .section-label {
    display: inline-block;
    margin-bottom: 22px;
    color: #7251a2;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.about-inchi-content h2 {
    margin: 0 0 28px;
    color: #282236;
    font-size: clamp(42px, 4vw, 62px);
    line-height: 1.03;
    letter-spacing: -1.5px;
}

.about-inchi-content > p {
    max-width: 620px;
    margin: 0 0 38px;
    color: #686270;
    font-size: 18px;
    line-height: 1.8;
}

.about-inchi-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 30px;
}

.about-inchi-features div {
    padding-top: 18px;
    border-top: 1px solid #d9d5df;
}

.about-inchi-features strong {
    display: block;
    margin-bottom: 7px;
    color: #7251a2;
    font-size: 12px;
    letter-spacing: 1.2px;
}

.about-inchi-features span {
    color: #686270;
    font-size: 15px;
    line-height: 1.55;
}

@media (max-width: 900px) {

    .about-inchi-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

}

@media (max-width: 767px) {

    .about-inchi {
        padding: 80px 24px;
    }

    .about-inchi-content h2 {
        font-size: 42px;
    }

    .about-inchi-content > p {
        max-width: 100%;
        font-size: 16px;
    }

    .about-inchi-features {
        grid-template-columns: 1fr;
    }

}

/* =========================================
   O MARCE - FILOZOFIA
========================================= */

.about-values {
    padding: 125px 6vw 130px;
    background: #ffffff;
}

.about-values .container {
    max-width: 1400px;
    margin: 0 auto;
}

.about-values-header {
    max-width: 850px;
    margin-bottom: 75px;
}

.about-values-header .section-label {
    display: inline-block;
    margin-bottom: 22px;
    color: #7251a2;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.about-values-header h2 {
    margin: 0 0 28px;
    color: #282236;
    font-size: clamp(46px, 4.6vw, 70px);
    line-height: 1.03;
    letter-spacing: -1.5px;
}

.about-values-header p {
    max-width: 650px;
    margin: 0;
    color: #686270;
    font-size: 18px;
    line-height: 1.8;
}


/* 3 wartości */

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #e5e2e8;
    border-bottom: 1px solid #e5e2e8;
}

.about-value {
    position: relative;
    min-height: 280px;
    padding: 38px 40px 45px;
    border-right: 1px solid #e5e2e8;
}

.about-value:last-child {
    border-right: 0;
}


/* numer */

.about-value-number {
    display: block;
    margin-bottom: 55px;
    color: #aaa3b0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
}


/* tytuł */

.about-value h3 {
    margin: 0 0 18px;
    color: #7251a2;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 1px;
}


/* opis */

.about-value p {
    max-width: 300px;
    margin: 0;
    color: #686270;
    font-size: 16px;
    line-height: 1.7;
}


/* subtelny efekt hover */

.about-value::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 0;
    height: 3px;
    background: #7251a2;
    transition: width .3s ease;
}

.about-value:hover::before {
    width: 100%;
}


/* TABLET */

@media (max-width: 900px) {

    .about-values-grid {
        grid-template-columns: 1fr;
    }

    .about-value {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid #e5e2e8;
    }

    .about-value:last-child {
        border-bottom: 0;
    }

}


/* MOBILE */

@media (max-width: 767px) {

    .about-values {
        padding: 85px 24px 90px;
    }

    .about-values-header {
        margin-bottom: 50px;
    }

    .about-values-header h2 {
        font-size: 42px;
    }

    .about-values-header p {
        font-size: 16px;
    }

    .about-value {
        padding: 32px 0 35px;
    }

    .about-value-number {
        margin-bottom: 30px;
    }

}

/* =========================================
   O MARCE - NATURA + PROFESJONALNA PIELĘGNACJA
========================================= */

.about-nature {
    position: relative;
    background: #3a2b50;
}


/* UKŁAD */

.about-nature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 650px;
}


/* LEWA STRONA */

.about-nature-content {
    display: flex;
    align-items: center;
    padding: 100px 7vw;
}

.about-nature-copy {
    max-width: 620px;
    margin-left: auto;
}


/* MAŁY NAGŁÓWEK */

.about-nature .section-label {
    display: inline-block;
    margin-bottom: 22px;

    color: #d4da23;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.4px;
}


/* GŁÓWNY NAGŁÓWEK */

.about-nature h2 {
    margin: 0 0 30px;

    color: #ffffff;

    font-size: clamp(44px, 4.3vw, 66px);
    line-height: 1.03;
    letter-spacing: -1.5px;
}


/* TEKST */

.about-nature p {
    margin: 0 0 22px;

    color: rgba(255,255,255,.78);

    font-size: 17px;
    line-height: 1.8;
}


/* PRZYCISK */

.about-nature-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 54px;
    margin-top: 16px;
    padding: 0 30px;

    background: #ffffff;
    color: #282236;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-decoration: none !important;

    transition:
        transform .25s ease,
        background-color .25s ease,
        color .25s ease;
}

.about-nature-btn::after {
    content: "→";
    margin-left: 12px;

    transition: transform .25s ease;
}

.about-nature-btn:hover {
    transform: translateY(-3px);

    background: #d4da23;
    color: #282236;

    text-decoration: none !important;
}

.about-nature-btn:hover::after {
    transform: translateX(5px);
}


/* PRAWA STRONA - AMAZONIA */

.about-nature-image {
    min-height: 650px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .about-nature-grid {
        grid-template-columns: 1fr;
    }

    .about-nature-copy {
        margin-left: 0;
    }

    .about-nature-image {
        min-height: 500px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {
.about-nature-content {
        padding: 80px 24px;
    }

    .about-nature h2 {
        font-size: 42px;
    }

    .about-nature p {
        font-size: 16px;
    }

    .about-nature-btn {
        width: 100%;
        margin-top: 12px;
    }

    .about-nature-image {
        min-height: 380px;
    }

}