:root {
    /* hue kolorów primary, secondary*/ 
    --hue-primary: 212;
    --hue-secondary: 32;

    /* kolor primary */
    --primary-050: hsla(var(--hue-primary) 100%, 97%, 1);
    --primary-100: hsla(var(--hue-primary) 100%, 92%, 1);
    --primary-200: hsla(var(--hue-primary) 100%, 87%, 1);
    --primary-300: hsla(var(--hue-primary) 100%, 81%, 1);
    --primary-400: hsla(var(--hue-primary) 100%, 76%, 1);
    --primary-500: hsla(var(--hue-primary) 100%, 71%, 1);
    --primary-600: hsla(var(--hue-primary) 100%, 66%, 1);
    --primary-700: hsla(var(--hue-primary) 100%, 60%, 1);
    --primary-800: hsla(var(--hue-primary) 100%, 55%, 1);
    --primary-900: hsla(var(--hue-primary) 100%, 50%, 1);

    /* kolor secondary */
    --secondary-050: hsla(var(--hue-secondary) 100%, 97%, 1);
    --secondary-100: hsla(var(--hue-secondary) 100%, 92%, 1);
    --secondary-200: hsla(var(--hue-secondary) 100%, 87%, 1);
    --secondary-300: hsla(var(--hue-secondary) 100%, 81%, 1);
    --secondary-400: hsla(var(--hue-secondary) 100%, 77%, 1);
    --secondary-500: hsla(var(--hue-secondary) 100%, 71%, 1);
    --secondary-600: hsla(var(--hue-secondary) 100%, 66%, 1);
    --secondary-700: hsla(var(--hue-secondary) 100%, 60%, 1);
    --secondary-800: hsla(var(--hue-secondary) 100%, 55%, 1);
    --secondary-900: hsla(var(--hue-secondary) 100%, 50%, 1);

    /* kolor neutral light */
    --neutral-light-050: hsl(0, 0%, 99%);
    --neutral-light-100: hsl(0, 0%, 96%);
    --neutral-light-200: hsl(0, 0%, 93%);
    --neutral-light-300: hsl(0, 0%, 90%);
    --neutral-light-400: hsl(0, 0%, 87%);
    --neutral-light-500: hsl(0, 0%, 84%);
    --neutral-light-600: hsl(0, 0%, 81%);
    --neutral-light-700: hsl(0, 0%, 78%);
    --neutral-light-800: hsl(0, 0%, 75%);
    --neutral-light-900: hsl(0, 0%, 72%);

    /* kolor neutral dark */
    --neutral-dark-050: hsl(0, 0%, 3%);
    --neutral-dark-100: hsl(0, 0%, 6%);
    --neutral-dark-200: hsl(0, 0%, 9%);
    --neutral-dark-300: hsl(0, 0%, 12%);
    --neutral-dark-400: hsl(0, 0%, 15%);
    --neutral-dark-500: hsl(0, 0%, 18%);
    --neutral-dark-600: hsl(0, 0%, 21%);
    --neutral-dark-700: hsl(0, 0%, 24%);
    --neutral-dark-800: hsl(0, 0%, 27%);
    --neutral-dark-900: hsl(0, 0%, 30%);

    /* --font-size-h1: calc(1.375rem + 1.5vw);
    --font-size-h2: calc(1.325rem + .9vw);
    --font-size-h3: calc(1.3rem + .6vw);
    --font-size-h4: calc(1.275rem + .3vw);
    --font-size-h5: 1.25rem;
    --font-size-h6: 1rem;
    --font-size-p: 1rem; */

    --font-size-h1: calc(1.375rem + .9vw);
    --font-size-h2: calc(1.325rem + .7vw);
    --font-size-h3: calc(1.3rem + .5vw);
    --font-size-h4: calc(1.275rem + .3vw);
    --font-size-h5: 1.25rem;
    --font-size-h6: 1rem;
    --font-size-p: 1rem;

    --bgc-primary-light-1: var(--primary-050);
    --bgc-primary-light-2: var(--primary-100);

    --bgc-secondary-light-1: var(--secondary-050);
    --bgc-secondary-light-2: var(--secondary-100);

    --bc-primary-light-1: var(--primary-400);
    --bc-primary-light-2: var(--primary-500);

    --bc-secondary-light-1: var(--secondary-400);
    --bc-secondary-light-2: var(--secondary-500);


    --bgc-primary-dark-1: var(--primary-800);
    --bgc-primary-dark-2: var(--primary-900);

    --bgc-secondary-dark-1: var(--secondary-800);
    --bgc-secondary-dark-2: var(--secondary-900);

    --bc-primary-dark-1: var(--primary-400);
    --bc-primary-dark-2: var(--primary-500);

    --bc-secondary-dark-1: var(--secondary-400);
    --bc-secondary-dark-2: var(--secondary-500);


    --bgc-light-1: var(--neutral-light-050);
    --bgc-light-2: var(--neutral-light-100);

    --bgc-dark-1: var(--neutral-dark-050);
    --bgc-dark-2: var(--neutral-dark-100);

    --tc-light-1: var(--neutral-light-200);
    --tc-light-2: var(--neutral-light-300);

    --tc-dark-1: var(--neutral-dark-200);
    --tc-dark-2: var(--neutral-dark-300);

    --bc-light-1: var(--neutral-light-400);
    --bc-light-2: var(--neutral-light-500);

    --bc-dark-1: var(--neutral-dark-400);
    --bc-dark-2: var(--neutral-dark-500);

    --box-shadow-1: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    --box-shadow-2: rgba(0, 0, 0, 0.1) 0px 4px 12px;

    
}

*{
    padding: 0px;
    margin: 0px;
    color: var(--tc-dark-1);
}

body{
    margin-top: 0px !important;
}


/* BACKGROUND (bgc) */
.bgc-p-050{background-color:var(--primary-050)!important}.bgc-p-100{background-color:var(--primary-100)!important}.bgc-p-200{background-color:var(--primary-200)!important}.bgc-p-300{background-color:var(--primary-300)!important}.bgc-p-400{background-color:var(--primary-400)!important}.bgc-p-500{background-color:var(--primary-500)!important}.bgc-p-600{background-color:var(--primary-600)!important}.bgc-p-700{background-color:var(--primary-700)!important}.bgc-p-800{background-color:var(--primary-800)!important}.bgc-p-900{background-color:var(--primary-900)!important}
.bgc-s-050{background-color:var(--secondary-050)!important}.bgc-s-100{background-color:var(--secondary-100)!important}.bgc-s-200{background-color:var(--secondary-200)!important}.bgc-s-300{background-color:var(--secondary-300)!important}.bgc-s-400{background-color:var(--secondary-400)!important}.bgc-s-500{background-color:var(--secondary-500)!important}.bgc-s-600{background-color:var(--secondary-600)!important}.bgc-s-700{background-color:var(--secondary-700)!important}.bgc-s-800{background-color:var(--secondary-800)!important}.bgc-s-900{background-color:var(--secondary-900)!important}
.bgc-nl-050{background-color:var(--neutral-light-050)!important}.bgc-nl-100{background-color:var(--neutral-light-100)!important}.bgc-nl-200{background-color:var(--neutral-light-200)!important}.bgc-nl-300{background-color:var(--neutral-light-300)!important}.bgc-nl-400{background-color:var(--neutral-light-400)!important}.bgc-nl-500{background-color:var(--neutral-light-500)!important}.bgc-nl-600{background-color:var(--neutral-light-600)!important}.bgc-nl-700{background-color:var(--neutral-light-700)!important}.bgc-nl-800{background-color:var(--neutral-light-800)!important}.bgc-nl-900{background-color:var(--neutral-light-900)!important}
.bgc-nd-050{background-color:var(--neutral-dark-050)!important}.bgc-nd-100{background-color:var(--neutral-dark-100)!important}.bgc-nd-200{background-color:var(--neutral-dark-200)!important}.bgc-nd-300{background-color:var(--neutral-dark-300)!important}.bgc-nd-400{background-color:var(--neutral-dark-400)!important}.bgc-nd-500{background-color:var(--neutral-dark-500)!important}.bgc-nd-600{background-color:var(--neutral-dark-600)!important}.bgc-nd-700{background-color:var(--neutral-dark-700)!important}.bgc-nd-800{background-color:var(--neutral-dark-800)!important}.bgc-nd-900{background-color:var(--neutral-dark-900)!important}

/* BORDER (bc) */
.bc-p-050{border-color:var(--primary-050)!important}.bc-p-100{border-color:var(--primary-100)!important}.bc-p-200{border-color:var(--primary-200)!important}.bc-p-300{border-color:var(--primary-300)!important}.bc-p-400{border-color:var(--primary-400)!important}.bc-p-500{border-color:var(--primary-500)!important}.bc-p-600{border-color:var(--primary-600)!important}.bc-p-700{border-color:var(--primary-700)!important}.bc-p-800{border-color:var(--primary-800)!important}.bc-p-900{border-color:var(--primary-900)!important}
.bc-s-050{border-color:var(--secondary-050)!important}.bc-s-100{border-color:var(--secondary-100)!important}.bc-s-200{border-color:var(--secondary-200)!important}.bc-s-300{border-color:var(--secondary-300)!important}.bc-s-400{border-color:var(--secondary-400)!important}.bc-s-500{border-color:var(--secondary-500)!important}.bc-s-600{border-color:var(--secondary-600)!important}.bc-s-700{border-color:var(--secondary-700)!important}.bc-s-800{border-color:var(--secondary-800)!important}.bc-s-900{border-color:var(--secondary-900)!important}
.bc-nl-050{border-color:var(--neutral-light-050)!important}.bc-nl-100{border-color:var(--neutral-light-100)!important}.bc-nl-200{border-color:var(--neutral-light-200)!important}.bc-nl-300{border-color:var(--neutral-light-300)!important}.bc-nl-400{border-color:var(--neutral-light-400)!important}.bc-nl-500{border-color:var(--neutral-light-500)!important}.bc-nl-600{border-color:var(--neutral-light-600)!important}.bc-nl-700{border-color:var(--neutral-light-700)!important}.bc-nl-800{border-color:var(--neutral-light-800)!important}.bc-nl-900{border-color:var(--neutral-light-900)!important}
.bc-nd-050{border-color:var(--neutral-dark-050)!important}.bc-nd-100{border-color:var(--neutral-dark-100)!important}.bc-nd-200{border-color:var(--neutral-dark-200)!important}.bc-nd-300{border-color:var(--neutral-dark-300)!important}.bc-nd-400{border-color:var(--neutral-dark-400)!important}.bc-nd-500{border-color:var(--neutral-dark-500)!important}.bc-nd-600{border-color:var(--neutral-dark-600)!important}.bc-nd-700{border-color:var(--neutral-dark-700)!important}.bc-nd-800{border-color:var(--neutral-dark-800)!important}.bc-nd-900{border-color:var(--neutral-dark-900)!important}

/* TEXT (tc) */
.tc-p-050{color:var(--primary-050)}.tc-p-100{color:var(--primary-100)}.tc-p-200{color:var(--primary-200)}.tc-p-300{color:var(--primary-300)}.tc-p-400{color:var(--primary-400)}.tc-p-500{color:var(--primary-500)}.tc-p-600{color:var(--primary-600)}.tc-p-700{color:var(--primary-700)}.tc-p-800{color:var(--primary-800)}.tc-p-900{color:var(--primary-900)}
.tc-s-050{color:var(--secondary-050)}.tc-s-100{color:var(--secondary-100)}.tc-s-200{color:var(--secondary-200)}.tc-s-300{color:var(--secondary-300)}.tc-s-400{color:var(--secondary-400)}.tc-s-500{color:var(--secondary-500)}.tc-s-600{color:var(--secondary-600)}.tc-s-700{color:var(--secondary-700)}.tc-s-800{color:var(--secondary-800)}.tc-s-900{color:var(--secondary-900)}
.tc-nl-050{color:var(--neutral-light-050)}.tc-nl-100{color:var(--neutral-light-100)}.tc-nl-200{color:var(--neutral-light-200)}.tc-nl-300{color:var(--neutral-light-300)}.tc-nl-400{color:var(--neutral-light-400)}.tc-nl-500{color:var(--neutral-light-500)}.tc-nl-600{color:var(--neutral-light-600)}.tc-nl-700{color:var(--neutral-light-700)}.tc-nl-800{color:var(--neutral-light-800)}.tc-nl-900{color:var(--neutral-light-900)}
.tc-nd-050{color:var(--neutral-dark-050)}.tc-nd-100{color:var(--neutral-dark-100)}.tc-nd-200{color:var(--neutral-dark-200)}.tc-nd-300{color:var(--neutral-dark-300)}.tc-nd-400{color:var(--neutral-dark-400)}.tc-nd-500{color:var(--neutral-dark-500)}.tc-nd-600{color:var(--neutral-dark-600)}.tc-nd-700{color:var(--neutral-dark-700)}.tc-nd-800{color:var(--neutral-dark-800)}.tc-nd-900{color:var(--neutral-dark-900)}

/* FONT SIZES (fs) */
.fs-h1{ font-size: var(--font-size-h1);}.fs-h2{ font-size: var(--font-size-h2);}.fs-h3{ font-size: var(--font-size-h3);}.fs-h4{ font-size: var(--font-size-h4);}.fs-h5{ font-size: var(--font-size-h5);}.fs-h6{ font-size: var(--font-size-h6);}.fs-p{ font-size: var(--font-size-p);}




/* BUTTON - BUTTON - BUTTON - BUTTON - BUTTON */

.basic-button {
    margin: 16px 0px 16px 0px;
    display: inline-block;
    text-decoration: none;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 700;
}


.button-p {
    background-color: var(--bgc-primary-dark-2);
    color: var(--tc-light-2);
}

.button-p i {
    color: var(--tc-light-2);
}

.button-p:hover {
    background-color: var(--bgc-primary-dark-1);
    color: var(--tc-light-1);
}

.button-s {
    background-color: var(--bgc-secondary-dark-2);
    color: var(--tc-light-2);
}

.button-s i {
    color: var(--tc-light-2);
}

.button-s:hover {
    background-color: var(--bgc-secondary-dark-1);
    color: var(--tc-light-1);
}


.button-nl {
    background-color: var(--bgc-light-2);
    color: var(--tc-dark-2);
    border: 1px solid var(--bc-light-2);
}

.button-nl i {
    color: var(--tc-dark-2);
}

.button-nl:hover {
    background-color: var(--bgc-light-1);
    color: var(--tc-dark-1);
    border: 1px solid var(--bc-light-1);
}

.button-nd {
    background-color: var(--bgc-dark-2);
    color: var(--tc-light-2);
    border: 1px solid var(--bc-dark-2);
}

.button-nd i {
    color: var(--tc-light-2);
}

.button-nd:hover {
    background-color: var(--bgc-dark-1);
    color: var(--tc-light-1);
    border: 1px solid var(--bc-dark-1);
}


.icon-button i {
    margin-left: 5px;
    transition: 0.2s;
}

.icon-button:hover.icon-button i {
    margin-left: 10px;
}











/* H2 - H2 - H2 - H2 - H2 - H2 - H2 - H2 */

.basic-h2{
    font-weight: 700;
    display: inline-block;
    margin: 24px 0px 24px 0px;
}

@media screen and (max-width: 991px) {
    .basic-h2{
        font-size: var(--font-size-h3);
    }
}

.basic-h2 span {
    display: block;
    margin-top: 8px;
}

.h2-l {
    color: var(--tc-dark-2);
}

.h2-l span {
    color: var(--primary-900);
    border-top: 1px solid var(--bc-light-2);
}

.h2-d {
    color: var(--tc-light-2);
}

.h2-d span {
    color: var(--primary-900);
    border-top: 1px solid var(--bc-dark-2);
}





/* A - A - A - A - A - A - A - A - A - A - A - A */

.basic-a{
    text-decoration: none !important;
    color: var(--primary-900) !important;
    font-weight: bold;
}






/* HERO - HERO - HERO - HERO - HERO - HERO - HERO - HERO */

.hero{
    position: relative;
    display: grid;
    isolation: isolate;
    overflow: hidden;
}

.hero > img{
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -2;

}

.hero .overlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.9);
    z-index: -1;
}

.hero .content{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    grid-area: 1 / 1;
    color: white;
}











/* IMG - IMG - IMG - IMG - IMG - IMG - IMG - */

.img-wrapper {
    width: 100%;
    overflow: hidden;
}

.img-wrapper > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
































.cardsy {
    width: 100%;
    padding: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.cardsy div {
    width: 40%;
    height: 300px;
    margin: 50px;
    /* background-color: aqua; */
    padding: 20px;
}

.cardsy-1 {
    background-color: var(--bgc-light-1);
    border: 1px solid var(--bc-light-1);
    box-shadow: var(--box-shadow-1);
}

.cardsy-1 h3 {
    color: var(--tc-dark-2);
}

.cardsy-1 p {
    color: var(--tc-dark-1);
}

.cardsy-2 {
    background-color: var(--bgc-light-2);
    border: 1px solid var(--bc-light-2);
    box-shadow: var(--box-shadow-2);
}

.cardsy-2 h3 {
    color: var(--tc-dark-2);
}

.cardsy-2 p {
    color: var(--tc-dark-1);
}

.cardsy-3 {
    background-color: var(--bgc-dark-1);
    border: 1px solid var(--bc-dark-1);
}

.cardsy-3 h3 {
    color: var(--tc-light-1);
}

.cardsy-3 p {
    color: var(--tc-light-2);
}

.cardsy-4 {
    background-color: var(--bgc-dark-2);
    border: 1px solid var(--bc-dark-2);
}

.cardsy-4 h3 {
    color: var(--tc-light-1);
}

.cardsy-4 p {
    color: var(--tc-light-2);
}

.cardsy-5 {
    background-color: var(--bgc-primary-light-1);
    border: 1px solid var(--bc-primary-light-1);
}

.cardsy-5 h3 {
    color: var(--tc-dark-2);
}

.cardsy-5 p {
    color: var(--tc-dark-1);
}

.cardsy-6 {
    background-color: var(--bgc-primary-light-2);
    border: 1px solid var(--bc-primary-light-2);
}

.cardsy-6 h3 {
    color: var(--tc-dark-2);
}

.cardsy-6 p {
    color: var(--tc-dark-1);
}

.cardsy-7 {
    background-color: var(--bgc-secondary-light-1);
    border: 1px solid var(--bc-secondary-light-1);
}

.cardsy-7 h3 {
    color: var(--tc-primary-light-1);
}

.cardsy-7 p {
    color: var(--tc-primary-light-2);
}

.cardsy-8 {
    background-color: var(--bgc-secondary-light-2);
    border: 1px solid var(--bc-secondary-light-2);
}

.cardsy-8 h3 {
    color: var(--tc-secondary-light-1);
}

.cardsy-8 p {
    color: var(--tc-secondary-light-2);
}


.cardsy-9 {
    background-color: var(--bgc-primary-dark-1);
    border: 1px solid var(--bc-primary-dark-1);
}

.cardsy-9 h3 {
    color: var(--tc-dark-2);
}

.cardsy-9 p {
    color: var(--tc-dark-1);
}

.cardsy-10 {
    background-color: var(--bgc-primary-dark-2);
    border: 1px solid var(--bc-primary-dark-2);
}

.cardsy-10 h3 {
    color: var(--tc-dark-2);
}

.cardsy-10 p {
    color: var(--tc-dark-1);
}

.cardsy-11 {
    background-color: var(--bgc-secondary-dark-1);
    border: 1px solid var(--bc-secondary-dark-1);
}

.cardsy-11 h3 {
    color: var(--tc-light-1);
}

.cardsy-11 p {
    color: var(--tc-light-2);
}

.cardsy-12 {
    background-color: var(--bgc-secondary-dark-2);
    border: 1px solid var(--bc-secondary-dark-2);
}

.cardsy-12 h3 {
    color: var(--tc-light-1);
}

.cardsy-12 p {
    color: var(--tc-light-2);
}


.color {
    display: flex;
    flex-direction: row;
}

.color div{
    width: 10%;
    height: 100px;
}