/*
* ======================== ZMIENNE =======================
*/

:root {
    /** Kolory */
    --elf-brand-color-white: #ffffff;
    --elf-brand-color-red: #ea1c53;
    --elf-brand-color-dark-red: rgb(148, 25, 46);
    --elf-brand-color-dark-blue: #1b476b;
    --elf-brand-color-light-blue: #83d0f5;
    --elf-brand-color-blue: #0091c4;
    --elf-brand-color-black: #0a1c2d;
    --elf-brand-color-light-gray: #d4deee;
    --elf-brand-color-mid-gray: #bfc8d8;
    --elf-brand-color-dark-gray: #79838e;
    --elf-brand-color-early-bird: #83D0F5;
    --elf-brand-color-dark-blue-gradient: linear-gradient(40deg, #183552, #0d2236);

    /** Breakpointy */
    --elf-bp-tablet: 768px;
    --elf-bp-desktop: 1024px;
    --elf-bp-desktop-large: 1440px;

    /** Maksymalna szerokość kontenera */
    --elf-container-width: 1200px;
    --elf-container-wide-width: 1520px;
    --elf-container-padding: 15px;

    --elf-gap: 20px; /** odstęp między kolumnani */

    --elf-section-padding: 16px; /** Odstęp pomiędzy sekcjami */

    /** font styles and sizes */
    --elf-font-size-xxxl: 64px;
    --elf-font-size-xxl: 48px;
    --elf-font-size-xl: 38px;
    --elf-font-size-l: 32px;
    --elf-font-size-m: 24px;
    --elf-font-size-s: 18px;
    --elf-font-size-xs: 14px;

    --elf-line-height-s: 12px;
    --elf-line-height-m: 16px;
    --elf-line-height-l: 26px;
    --elf-line-height-xl: 48px;
    --elf-line-height-xxl: 64px;

    --elf-font-regular: 'Outfit', Verdana, Geneva, Tahoma, sans-serif;
    --elf-font-bold: 'Outfit bold', Verdana, Geneva, Tahoma, sans-serif;
    --elf-font-extrabold: 'Outfit extrabold', Verdana, Geneva, Tahoma, sans-serif;
    --elf-font-thin: 'Outfit thin', Verdana, Geneva, Tahoma, sans-serif;
    --elf-font-light: 'Outfit light', Verdana, Geneva, Tahoma, sans-serif;

    /** Others */
    --elf-footer-social-icons-size: 32px;
}


/*
* ==================== ZNACZNIKI I KLASY OGÓLNE =====================
*/

* {
    box-sizing: border-box;
    font-family: var(--elf-font-regular);
}

html, body {
    display: block;
    margin: 0;
    padding: 0;
    color: var(--elf-brand-color-black);
}

html {
  scroll-behavior: smooth;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: top; /** or display: block; */
}

main {
    width: 100%;
    height: auto;
}

main p, main li {
    line-height: 120%;
    font-family: var(--elf-font-light);
}

main a,
main p,
main span,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main ul,
main ol,
main li,
main div
{
    color: var(--elf-brand-color-dark-blue);
}

.main-conference-page .title h2 {
    text-transform: uppercase;
    font-size: var(--elf-font-size-l);
    font-weight: bold;
    font-family: var(--elf-font-extrabold);
}

.color-red {
    color: var(--elf-brand-color-red);
}

.color-darkblue {
    color: var(--elf-brand-color-dark-blue);
}

.textalign-left {
    text-align: left;
}

.textalign-right {
    text-align: right;
}

.textalign-center {
    text-align: center;
}

.textalign-justify {
    text-align: justify;
}

.font-regular {
    font-family: var(--elf-font-regular);
}

.font-light {
    font-family: var(--elf-font-light);
}

.font-bold {
    font-family: var(--elf-font-bold);
}

.font-extrabold {
    font-family: var(--elf-font-extrabold);
}

.no-padding {
    padding: 0;
}

.no-margin-bottom {
    margin-bottom: 0;
}

.no-margin-top {
    margin-top: 0;
}

.no-margin-left {
    margin-left: 0;
}

.no-margin-right {
    margin-right: 0;
}

.no-margin {
    margin: 0;
}

/*
* ====================== KONTENERY =======================
*/

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--elf-container-padding);
    padding-right: var(--elf-container-padding);
}

.container-wide {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--elf-container-padding);
    padding-right: var(--elf-container-padding);
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--elf-container-padding) * -1);
    margin-right: calc(var(--elf-container-padding) * -1);
}

.col {
    flex: 0 0 100%; /* Nie rośnij, nie zmniejszaj się, zajmij 100% szerokości */
    max-width: 100%;
    padding-left: var(--elf-container-padding);
    padding-right: var(--elf-container-padding);
    margin-bottom: var(--elf-container-padding);
}

[class*="col-"] {
    padding: 0 15px;
    box-sizing: border-box;
}

/*
* ====================== MEDIA QUERIES =======================
*/

/* Mobile First */

.col-12 {
    width: 100%;
    flex: 0 0 auto;
}

/* TABLET (od 768px w górę) */
@media (min-width: 768px) {
    .container {
        max-width: 720px; /* Standard dla tabletów */
        --elf-container-padding: 20px; /* Opcjonalnie większy margines wewnętrzny */
    }

    div {
        --elf-section-padding: 24px;
    }
}

/* PC / LAPTOP (od 1024px w górę) */
@media (min-width: 1024px) {
    .container {
        max-width: 960px;
    }

    .container-wide {
        max-width: 1200px;
    }

    .col {
        flex: 1 0 0%;
        max-width: 100%;
    }

    .col-md-6 {
        width: 50%; 
        flex: 0 0 50%;
    }

    div {
        --elf-section-padding: 32px;
    }
}

/* DUŻY MONITOR (od 1440px w górę) */
@media (min-width: 1440px) {
    .container {
        max-width: var(--elf-container-width);
    }
    .container-wide {
        max-width: var(--elf-container-wide-width);
    }
}

.col-1-4 { flex: 0 0 25%; max-width: 25%; }
.col-1-3 { flex: 0 0 33.33%; max-width: 33.33%; }
.col-1-2 { flex: 0 0 50%; max-width: 50%; }
.col-2-3 { flex: 0 0 66.66%; max-width: 66.66%; }
.col-3-4 { flex: 0 0 75%; max-width: 75%; }
.col-1-1 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 768px) {
    .col-md-1-3 { flex: 0 0 33.333%; max-width: 33.333%; }
    .col-md-2-3 { flex: 0 0 66.666%; max-width: 66.666%; }
}

@media (min-width: 1024px) {
    .col-lg-1-4 { flex: 0 0 25%; max-width: 25%; }
    .col-lg-1-3 { flex: 0 0 33.333%; max-width: 33.333%; }
    .col-lg-1-2 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-2-3 { flex: 0 0 66.666%; max-width: 66.666%; }
    .col-lg-3-4 { flex: 0 0 75%; max-width: 75%; }
}


.header.title {
    width: 100%;
    text-align: center;
    text-transform: uppercase;

    font-family: var(--elf-font-light);
    color: var(--elf-brand-color-dark-blue);
}