@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Cormorant+SC:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Newsreader:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

:root {
    --font-1: "Newsreader", Serif;
    --font-2: "Cormorant Garamond", Serif;
    --font-3: "Inter", Sans-serif;
    --font-4: "Cormorant SC", Serif;

    --color-1                     : hsla(12, 75%, 45%, 1);
    --color-1-light               : hsla(12, 75%, 55%, 1);
    --color-1-darker              : hsla(12, 75%, 25%, 1);
    --color-2                     : hsla(28, 25%, 76%, 1);
    --color-3-darker              : hsla(240, 8%, 10%, 1);
    --color-black                 : #000000;
    --color-gray-19               : #151312;
    --color-gray-15               : #69615a;
    --color-gray-10               : #d1c1b3;
    --color-gray-3                : #f1ece8;
    --color-gray-1                : #faf9f7;
    --color-text                  : var(--color-gray-19);
    --color-text-dark             : var(--color-black);
    --color-text-light            : var(--color-gray-15);
    --color-link                  : var(--color-1);
    --color-link-hover            : var(--color-1-darker);
    --color-body-bg               : var(--color-gray-1);
    --color-border                : rgba(0, 0, 0, .1);

    --base-size       : 62.5%;
    --multiplier      : 1;
    --base-font-size  : calc(2.4rem * var(--multiplier));
    --space           : calc(3.4rem * var(--multiplier));

    --vspace-0_125    : calc(0.125 * var(--space));
    --vspace-0_25     : calc(0.25 * var(--space));
    --vspace-0_375    : calc(0.375 * var(--space));
    --vspace-0_5      : calc(0.5 * var(--space));
    --vspace-0_625    : calc(0.625 * var(--space));
    --vspace-0_75     : calc(0.75 * var(--space));
    --vspace-0_875    : calc(0.875 * var(--space));
    --vspace-1        : calc(var(--space));
    --vspace-1_25     : calc(1.25 * var(--space));
    --vspace-1_5      : calc(1.5 * var(--space));
    --vspace-1_75     : calc(1.75 * var(--space));
    --vspace-2        : calc(2 * var(--space));
    --vspace-2_5      : calc(2.5 * var(--space));
    --vspace-3        : calc(3 * var(--space));
    --vspace-3_5      : calc(3.5 * var(--space));
    --vspace-4        : calc(4 * var(--space));
    --vspace-4_5      : calc(4.5 * var(--space));
    --vspace-5        : calc(5 * var(--space));
    --vspace-5_5      : calc(5.5 * var(--space));
    --vspace-6        : calc(6 * var(--space));
    --vspace-6_5      : calc(6.5 * var(--space));
    --vspace-7        : calc(7 * var(--space));
    --vspace-7_5      : calc(7.5 * var(--space));
    --vspace-8        : calc(8 * var(--space));
    --vspace-8_5      : calc(8.5 * var(--space));
    --vspace-9        : calc(9 * var(--space));
    --vspace-9_5      : calc(9.5 * var(--space));
    --vspace-10       : calc(10 * var(--space));

    --text-scale-ratio: 1.2;
    --text-size       : var(--base-font-size);
    --text-xs         : calc((var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio));
    --text-sm         : calc(var(--text-xs) * var(--text-scale-ratio));
    --text-md         : calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-lg         : calc(var(--text-md) * var(--text-scale-ratio));
    --text-xl         : calc(var(--text-lg) * var(--text-scale-ratio));
    --text-xxl        : calc(var(--text-xl) * var(--text-scale-ratio));
    --text-xxxl       : calc(var(--text-xxl) * var(--text-scale-ratio));
    --text-display-1  : calc(var(--text-xxxl) * var(--text-scale-ratio));
    --text-display-2  : calc(var(--text-display-1) * var(--text-scale-ratio));
    --text-display-3  : calc(var(--text-display-2) * var(--text-scale-ratio));
    --text-huge-1     : calc(var(--text-display-3) * var(--text-scale-ratio));
    --text-huge-2     : calc(var(--text-huge-1) * var(--text-scale-ratio));
    --text-huge-3     : calc(var(--text-huge-2) * var(--text-scale-ratio));

    --vspace-btn      : var(--vspace-1_75);

    --width-default     : 1400px;
    --width-wide        : 1600px;
    --width-grid-max    : var(--width-default);
    --gutter            : 2.6rem;
}

html,
body,
div,
span,
iframe,
h1,
h2,
h4,
h5,
p,
a,
img,
b,
u,
i,
ul,
li,
embed,
footer,
header,
section,
audio,
video {
    margin        : 0;
    padding       : 0;
    border        : 0;
    font-size     : 100%;
    font          : inherit;
    vertical-align: baseline;
}

footer,
header,
section {
    display: block;
}

ul {
    list-style: none;
}

.row {
    display  : flex;
    flex-flow: row wrap;
    width    : 100%;
    max-width: 1400px;
    margin   : 0 auto;
}

.row .row {
    width       : auto;
    margin-left : calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
}

.column {
    flex   : 1;
    padding: 0 16px;
}

.row.row-x-center {
    justify-content: center;
}

.xl-6 {
    flex : none;
    width: 50%;
}

.xl-10 {
    flex : none;
    width: 83.3333333333%;
}

.xl-12 {
    flex : none;
    width: 100%;
}

html {
    font-size : var(--base-size);
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    background-color          : var(--color-body-bg);
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust  : 100%;
    -webkit-font-smoothing    : antialiased;
    -moz-osx-font-smoothing   : grayscale;
    font-family: var(--font-1);
    font-size  : var(--base-font-size);
    font-weight: 400;
    line-height: var(--vspace-1);
    color      : var(--color-text);
    min-width: 360px;
}

p {
    font-size     : inherit;
    text-rendering: optimizeLegibility;
}

a {
    text-decoration: none;
}

svg,
img,
video {
    max-width: 100%;
    height   : auto;
}

div,
ul,
li,
h1,
h2,
h4,
h5,
p {
    margin : 0;
    padding: 0;
}

.u-screen-reader-text {
    clip             : rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path        : inset(50%);
    height           : 1px;
    width            : 1px;
    margin           : -1px;
    overflow         : hidden;
    padding          : 0;
    border           : 0;
    position         : absolute;
    word-wrap        : normal !important;
}

a {
    color     : var(--color-link);
    transition: all 0.3s ease-in-out;
}

a:focus,
a:hover,
a:active {
    color: var(--color-link-hover);
}

a:hover,
a:active {
    outline: 0;
}

h1,
h2,
h4,
h5,
.h1,
.h2,
.h4,
.h5 {
    font-family: var(--font-2);
    font-weight: 600;
    color      : var(--color-text-dark);
}

h1,
.h1 {
    margin-top   : var(--vspace-2_5);
    margin-bottom: var(--vspace-1_5);
}

h2,
.h2,
h4,
.h4 {
    margin-top   : var(--vspace-2);
    margin-bottom: var(--vspace-1);
}

h5,
.h5 {
    margin-top   : var(--vspace-1_75);
    margin-bottom: var(--vspace-0_75);
}

h1,
.h1 {
    font-size     : var(--text-display-2);
    line-height   : 1.0233;
    letter-spacing: -0.02em;
}

h2,
.h2 {
    font-size     : var(--text-xxxl);
    line-height   : normal;
    letter-spacing: -0.01em;
}

h4,
.h4 {
    font-size  : var(--text-xl);
    line-height: 1.061;
}

h5,
.h5 {
    font-size  : var(--text-md);
    line-height: 1.1111;
}

i,
b {
    font-size  : inherit;
    line-height: inherit;
}

i {
    font-style: italic;
}

b {
    font-weight: 600;
    color      : var(--color-text-dark);
}

p img {
    margin        : 0;
    vertical-align: bottom;
}

/* --------------------------------------------------------------------
 * ## additional typography & helper classes
 * -------------------------------------------------------------------- */
.attention-getter {
    font-family: var(--font-1);
    font-size  : var(--text-md);
    line-height: calc(1.25 * var(--space));
}

/* --------------------------------------------------------------------
 * ## lists
 * -------------------------------------------------------------------- */

ul {
    list-style: disc;
}

li {
    display: list-item;
}


ul {
    margin-left: 1.6rem;
}

ul li {
    padding-left: 0.4rem;
}

ul ul {
    margin: 1.6rem 0 1.6rem 1.6rem;
}

p,
ul,
img {
    margin-bottom: var(--vspace-1);
}

/* ===================================================================
 * # PROJECT-WIDE SHARED STYLES
 * ------------------------------------------------------------------- */

.text-display-title {
    font-size     : 80px;
    letter-spacing: -0.02em;
    margin-top    : 0;
    margin-bottom : var(--vspace-1_25);
}

/* -------------------------------------------------------------------
 * ## section header
 * ------------------------------------------------------------------- */
.section-header {
    margin-bottom: var(--vspace-1);
    position     : relative;
}

.section-header .text-display-title.with-line {
    position: relative;
}

.section-header .text-display-title.with-line:before {
    content         : '';
    width           : 8rem;
    height          : 1px;
    background-color: var(--color-1);
    position        : absolute;
    top             : 50%;
    left            : -11rem;
}

/* -------------------------------------------------------------------
 * ## list grid
 * ------------------------------------------------------------------- */
.grid-list-items {
    gap                : 48px;
    justify-content: space-around;
    display              : flex;
}

@media all and (max-width: 960px) {
    .grid-list-items {
        gap: 16px;
    }

    .grid-list-items .grid-list-items__item:last-of-type {
        display: none;
    }
}

@media all and (max-width: 640px) {
    .grid-list-items .grid-list-items__item:nth-last-child(-n + 2) {
        display: none;
    }
}

@media all and (max-width: 490px) {
    .grid-list-items .grid-list-items__item:nth-last-child(-n + 2) {
        display: none;
    }
}

/* --------------------------------------------------------------------
 * # HEADER
 * -------------------------------------------------------------------- */
.s-header {
    --header-height : 72px;
    --logo-width    : 15rem;
    background-color: transparent;
    width           : 100%;
    top             : 64px;
    left            : 0;
    display        : flex;
    align-items    : center;
    justify-content: center;
    position       : absolute;
    z-index : 3;
}

.s-header img {
    width         : 210px;
    margin        : 0;
    vertical-align: top;
}

/* ===================================================================
 * # INTRO
 * ------------------------------------------------------------------- */
.s-intro {
    --content-padding-top   : max(12rem, 10vh);
    --content-padding-bottom: 8rem;
    --content-min-height    : calc(var(--vspace-1) * 26);
    z-index                 : 2;
    background-color        : var(--color-gray-19);
    width                   : 100%;
    min-height: 100vh;
    overflow                : hidden;
    position                : relative;
}

.s-intro__bg {
    display            : block;
    position           : absolute;
    top                : 0;
    left               : 0;
    right              : 0;
    bottom             : 0;
    width              : 100%;
    height             : 100%;
    background-image   : url(../images/bg.jpg);
    background-repeat  : no-repeat;
    background-position: center;
    background-size    : cover;
}

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

    .s-intro__bg {
        height: 460%;
        background-repeat: no-repeat;
        background-position: right -1020px;
    }
}

.s-intro__bg::before {
    display       : block;
    content       : "";
    position      : absolute;
    top           : 0;
    left          : 0;
    right         : 0;
    bottom        : 0;
    width         : 100%;
    height        : 100%;
    background    : black;
    pointer-events: none;
    opacity       : 0.3;
}

.s-intro__bg::after {
    display       : block;
    content       : "";
    position      : absolute;
    top           : 0;
    left          : 0;
    right         : 0;
    bottom        : 0;
    width         : 100%;
    height        : 100%;
    background    : linear-gradient(90deg, rgb(0, 0, 0) 2%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    opacity       : 0.75;
}

.s-intro__bg::before,
.s-intro__bg::after {
    mix-blend-mode: multiply;
}

.s-intro__content {
    --width-grid-max: var(--width-wide);
    z-index         : 2;
    align-items     : center;
    justify-content : center;
    text-align      : center;
    height          : 100%;
    color           : var(--color-body-bg);
    position        : relative;
    padding: 245px 16px var(--content-padding-bottom) 16px;
}

.s-intro__pretitle {
    display       : inline-flex;
    align-items   : center;
    font-family   : var(--font-4);
    font-size     : var(--text-md);
    font-weight   : 400;
    letter-spacing: 0.05em;
    line-height   : 1;
    text-align    : center;
    position      : relative;
    text-wrap: balance;
}

.s-intro__pretitle:before,
.s-intro__pretitle:after {
    content         : "";
    display         : inline-block;
    height          : 1px;
    width           : 2.5em;
    background-color: rgba(255, 255, 255, 0.2);
}

.s-intro__pretitle::before {
    margin-right: 0.5em;
}

.s-intro__pretitle::after {
    margin-left: 0.5em;
}

.s-intro__title {
    color      : var(--color-body-bg);
    font-weight: 700;
    font-size  : 168px;
    line-height: 1;
    margin     : 48px 0;
}

@media all and (max-width: 1410px) {
    .s-intro__title {
        font-size  : 100px;
        line-height: 1;
        margin     : 42px 0;
    }
}

@media all and (max-width: 460px) {
    .s-intro__title {
        font-size  : 72px;
        margin     : 32px 0;
    }
}

.s-intro__desc {
    max-width: 600px;
    margin: 0 auto;
    font-size: 28px;
    line-height: 42px;
}

@media all and (max-width: 640px) {
    .s-intro__desc {
        font-size: 24px;
        text-wrap: balance;
        line-height: 38px;
    }
}

/* ===================================================================
 * # ABOUT
 * ------------------------------------------------------------------- */
.s-about {
    padding-top   : var(--vspace-2);
    padding-bottom: 0;
}

.s-about__content-header {
    grid-column  : 1/span 6;
    align-self   : start;
    margin-bottom: 0;
}

.s-about__content-main {
    grid-column: 7/span 6;
    align-self : center;
    margin-top : 72px;
    width: 100%;
    max-width: 1070px;
    padding: 0 72px;
}

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

    .s-about__content-main .attention-getter {
        font-size: 24px;
        line-height: 38px;
        margin-bottom: 26px;
    }
}

@media all and (max-width: 640px) {

    .s-about__content-main {
        margin-top : 48px;
        padding: 0 48px;
    }
}

@media all and (max-width: 540px) {

    .s-about__content-main {
        margin-top : 32px;
        padding: 0 24px;
    }

    .s-about__content-main .attention-getter {
        margin-bottom: 20px;
    }
}


.s-about__content-main p:last-child {
    margin-bottom: 0;
}

/* ===================================================================
 * # TESTIMONIALS
 * ------------------------------------------------------------------- */
.s-testimonials {
    margin-top     : 72px;
    padding-top     : var(--vspace-3);
    padding-bottom  : var(--vspace-1);
    background-color: var(--color-gray-3);
}

@media all and (max-width: 640px) {

    .s-testimonials {
        margin-top : 48px;
    }
}

@media all and (max-width: 540px) {

    .s-testimonials {
        margin-top : 32px;
    }
}


.s-testimonials .s-menublock__top {
    justify-content: center;
}

.s-testimonials .s-menublock__top p.attention-getter {
    text-wrap: balance;
    text-align: center;
    padding: 0 96px;
    line-height: 36px;
}

@media all and (max-width: 540px) {

    .s-testimonials .s-menublock__top p.attention-getter {
        padding: 0;
    }
}

.s-testimonials h5 {
    font-size: 58px;
}

.s-testimonials p {
    font-size: 26px;
    padding-left: 17px;
}

.s-testimonials .content-block {
    margin-bottom: var(--vspace-0_5);
}

.s-testimonials .content-block:last-child {
    margin-bottom: 0;
}

.s-testimonials .content-block img {
    vertical-align: bottom;
}

.s-testimonials .content-block .column:first-child>*:first-child {
    margin-top: 0;
}

.s-testimonials .menu-block {
    margin       : 0;
    counter-reset: ctr;
}

.s-testimonials .menu-block__group {
    margin-bottom: 24px;
}

.menu-list {
    list-style : none;
    margin-left: 0;
    border-top : 2px solid var(--color-text-light);
    padding-top: var(--vspace-0_5);;
}

.menu-list__item {
    display        : flex;
    justify-content: space-between;
    border-bottom  : 1px solid var(--color-border);

    max-width: 1070px;
    padding: 0 72px;
    padding-top    : var(--vspace-1);
    margin-left: auto;
    margin-right: auto;

}

@media all and (max-width: 640px) {

    .menu-list__item {
        padding: 0 48px;
    }
}

@media all and (max-width: 540px) {

    .menu-list__item {
        padding: 0 12px;
    }
}

.menu-list__item:last-child {
    border-bottom: 0;
}

.menu-list__item h4 {
    margin-top   : 0;
    margin-bottom: var(--vspace-0_75);
    font-size: 34px;
    font-weight: 700;
}

.menu-list__item p {
    font-weight  : 300;
    font-size    : 24px;
    line-height  : 1.4;
    margin-bottom: var(--vspace-1);
}

.menu-list__item:first-child p {
    display: block;
}

/* ===================================================================
 * # GALLERY
 * ------------------------------------------------------------------- */
.s-gallery {
    background-color: var(--color-gray-19);
    margin-top      : auto;
    position        : relative;
}

.s-gallery::before {
    content         : "";
    display         : block;
    background-color: var(--color-body-bg);
    width           : 100%;
    height          : 50%;
    position        : absolute;
    top             : 0;
    left            : 0;
}

.s-testimonials+.s-gallery::before {
    background-color: var(--color-gray-3);
}

.gallery-items {
    --gap   : 48px;
    z-index : 2;
    position: relative;
}

.gallery-items__item {
    margin-bottom: 0;
    pointer-events: none;

    border-radius: 12px;

}

.gallery-items__item img {
    margin        : 0;
    vertical-align: bottom;
    transition    : all, 0.5s;

    border: 7px solid #f1ece8;

    border-radius: 20px;
}

/* ===================================================================
 * # FOOTER
 * ------------------------------------------------------------------- */
.s-footer {
    --bottom-padding: var(--vspace-1_5);
    background-color: var(--color-gray-19);
    color           : #a0978f;
    padding: 64px 0px;
}

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

    .s-footer {
        padding: 48px 0;
    }
}


.s-footer h5 {
    color     : var(--color-body-bg);
    margin-top: 0;
    margin-bottom: 12px;
}

.s-footer a {
    color: var(--color-gray-10);
}

.s-footer a:focus,
.s-footer a:hover {
    color: var(--color-1);
}

.s-footer__logo a {
    display: block;
    margin : 0;
    padding: 0;
    outline: 0;
    border : none;
}

.s-footer__logo img {
    width         : 16rem;
    margin        : 0;
    vertical-align: bottom;
}

.s-footer__top {
    margin-bottom: 48px;
    position     : relative;
}

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

    .s-footer__top {
        margin-bottom: 32px;
    }
}

.s-footer__top::before {
    content         : "";
    display         : block;
    height          : 1px;
    width           : calc(100% - 32px);
    background-color: rgba(255, 255, 255, 0.2);
    position        : absolute;
    top             : 50%;
    left            : 16px;
}

.s-footer__info .row {
    margin-left: 0;
    margin-right: 0;
}

.s-footer__main-content {
    display: flex;
    gap: 48px;
    justify-content: space-between;
}

.s-footer__main-content div {
    flex: 1 1 auto;
}




.s-footer.footer-section {
    padding-bottom: 34px;
}

.s-footer__social {
    width: 100%;
    max-width: 1400px;
    margin: 30px auto 0;
    padding: 22px 16px 0;
    text-align: center;
    position: relative;
}

.s-footer__social::before {
    content: "";
    display: block;
    width: 96px;
    height: 1px;
    margin: 0 auto 18px;
    background: var(--color-gray-10);
}

.s-footer__social-label {
    margin: 0 0 15px;
    color: var(--color-gray-15);
    font-family: var(--font-3);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.s-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
    color: var(--color-1-darker) !important;
    font-family: var(--font-2);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;
}

.s-footer__social-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    opacity: 0.9;
    position: relative;
    top: 2px;
    transition: opacity 0.2s ease-in-out, filter 0.2s ease-in-out;
}

.s-footer__social-link:hover,
.s-footer__social-link:focus {
    color: var(--color-1) !important;
}

.s-footer__social-link:hover .s-footer__social-icon,
.s-footer__social-link:focus .s-footer__social-icon {
    opacity: 1;
    filter: saturate(1.25);
}

/*@media all and (max-width: 800px) {
    .s-footer.footer-section {
        padding-bottom: 30px;
    }

    .s-footer__social {
        margin-top: 26px;
        padding-top: 18px;
    }

    .s-footer__social::before {
        margin-bottom: 16px;
    }

    .s-footer__social-link {
        font-size: 21px;
    }
}

@media all and (max-width: 460px) {
    .s-footer.footer-section {
        padding-bottom: 28px;
    }

    .s-footer__social {
        margin-top: 24px;
        padding-top: 16px;
    }

    .s-footer__social-label {
        font-size: 10px;
        letter-spacing: 0.09em;
    }

    .s-footer__social-link {
        font-size: 20px;
        gap: 8px;
    }

    .s-footer__social-icon {
        width: 19px;
        height: 19px;
        top: 1px;
    }
}*/


/*VIDEO*/


.player-wrapper {
    width: 100%;
    max-width: 900px;
}

.plyr {
    --plyr-color-main: #ef828c;
}

.plyr--video.plyr--stopped .plyr__controls {
    display: none !important;
}

/* ========== POWIĘKSZENIE DUŻEGO PLAY ========== */
.plyr .plyr__control--overlaid {
    padding: 32px;
    background: #ef828c33;

}

.plyr .plyr__control--overlaid svg {
    width: 42px;
    height: 42px;
    left: 3px;
    fill: #fff;
}