/* 
Theme Name: TJ Baník Lubná
Author: Petr Svoboda
Version: 1.0
Description: Vlastní šablona pro webové stránky TJ Baník Lubná.
*/

:root {
    --background-color: #F3F4F6;
    --primary-color: #009640;
    --light-green-color: #F0FDF4;
    --black-color: #1A1A1A;
    --light-gray-color: #9CA3AF;
    --dark-gray-color: #4B5563;
    --white-color: #FFFFFF;
    --yellow-color: #FCD34D;


    --header-font: 'Teko', sans-serif;
    --body-font: 'Roboto', sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--body-font);
    background-color: var(--background-color);
    color: var(--black-color);
    line-height: 1.6;


    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

main p {
    margin-bottom: 8px;
}

main ul {
    margin-left: 15px;
    list-style-position: inside;
}

main a {
    color: var(--primary-color);
}

/* ! ----------------------------------------------- */
/* ! ------------ OPAKUJÍCÍ SE STYLY --------------- */
/* ! ----------------------------------------------- */

.page-heading {
    width: 100%;
    border-bottom: 2px solid var(--light-gray-color);
    padding: 0px 0 7px 0;

    margin-bottom: 25px;

    h2,
    h1 {
        font-size: 36px;
        font-weight: 600;
        font-family: var(--header-font);
        text-transform: uppercase;
    }

    &.has-link {
        display: flex;
        justify-content: space-between;
        align-items: center;

        a {
            text-decoration: none;
            color: var(--primary-color);
            font-size: 15px;
            font-weight: 500;

            display: flex;
            align-items: center;
            gap: 5px;


            transition: text-decoration 0.3s ease;

            .icon {
                font-size: 25px;
                vertical-align: middle;
                transition: transform 0.3s ease;
            }

            &:hover .icon {
                transform: translateX(5px);
                scale: 1.1;
            }
        }
    }
}

@media screen and (max-width: 550px) {
    .page-heading.has-link {
        flex-direction: column;
        align-items: flex-start;
    }
}

h1 {
    font-size: 36px;
    font-weight: 600;
    font-family: var(--header-font);
    text-transform: uppercase;
}

.match-wide-box-item {
    width: 100%;

    background-color: var(--white-color);
    border-radius: 10px;
    padding: 15px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: minmax(20px, 100%);

    margin-bottom: 15px;

    .match-info {
        display: grid;
        grid-template-columns: 50px 50px 100px auto;
        align-items: center;
        gap: 30px;

        .match-date {
            display: flex;
            align-items: center;
            flex-direction: column;
            gap: 5px;

            color: var(--primary-color);

            font-family: var(--header-font);

            line-height: 1.2;

            .day {
                font-size: 18px;
                font-weight: 300;
                text-transform: lowercase;
            }

            .date {
                font-weight: 600;
                font-size: 23px;
            }
        }

        .match-time {
            font-size: 23px;
            font-weight: 600;
            color: var(--primary-color);

            font-family: var(--header-font);
        }

        .match-desc {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;

            font-size: 16px;
            font-weight: 400;
            color: var(--dark-gray-color);
            white-space: pre-line;

            text-align: center;
            text-transform: uppercase;
        }

        .match-teams {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;


            img {
                height: 60px;
                width: auto;
                border-radius: 50%;
                /* border: 2px solid var(--primary-color); */
            }

            .match-vs {
                font-size: 24px;
                font-weight: 500;
                font-family: var(--header-font);
            }

            .match-location {
                font-size: 14px;
                font-style: italic;
                font-weight: 200;
                text-align: center;
            }
        }
    }

    .match-score {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 30px;
        font-weight: 700;


        span {
            color: #000000;
        }

        a span {
            color: var(--primary-color);
            vertical-align: middle;
        }

    }
}

@media screen and (max-width: 1150px) {
    .match-wide-box-item {
        flex-direction: column;
        gap: 15px;

        .match-info {
            width: 100%;
            grid-template-columns: auto auto auto;



            .match-teams {
                grid-column: 1 / 4;
            }

            .match-time {
                text-align: center;
            }
        }
    }
}

@media screen and (max-width: 600px) {
    .match-teams {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        place-items: center;

        img:nth-child(1) {
            order: 1;
            justify-self: end;
        }

        img:nth-child(3) {
            order: 2;
            justify-self: start;
        }

        div {
            order: 3;
            grid-column: 1 / 3;
            text-align: center;
        }
    }
}

.subnav-tym {
    width: 100%;

    background-color: var(--primary-color);

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

    margin-bottom: 40px;

    position: relative;

    .container {
        width: 100%;
        max-width: 1300px;

        height: 80px;

        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 50px;

        margin: 0 20px !important;


        h1 {
            color: var(--white-color);

            font-size: 40px;
            font-family: var(--header-font);

            text-transform: uppercase;
            letter-spacing: 1.5px;

        }

        .subnav-active-item {
            display: none;

            color: var(--white-color);

            position: relative;


            &::after {
                content: "";

                position: absolute;
                left: -15%;
                bottom: -7px;

                width: 130%;
                height: 2px;

                background-color: var(--white-color);
            }
        }

        nav ul {
            display: flex;
            align-items: center;
            justify-content: flex;
            gap: 25px;

            list-style-type: none;

            li {
                position: relative;

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

                }
            }

            li.active::after {
                content: "";

                position: absolute;
                left: -15%;
                bottom: -7px;

                width: 130%;
                height: 2px;

                background-color: var(--white-color);


            }
        }

        p {
            margin-bottom: 0;
        }

        #subnav-btn-icon {
            display: none;
            margin-left: auto;
            font-size: 30px;
            color: var(--white-color);

            cursor: pointer;

            transition: 0.3s ease-in-out;
        }

    }
}

@media screen and (max-width: 600px) {
    #subnav-btn-icon {
        display: block !important;
    }

    .subnav-active-item {
        display: block !important;
    }

    .subnav-menu {
        display: none;
    }

    .subnav-menu.mobile-active {
        position: absolute;
        top: 100%;
        left: 0;

        width: 100%;
        height: auto;

        display: block;

        padding: 20px;

        background-color: var(--primary-color);

        z-index: 900;

        ul {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-direction: column;
            gap: 30px;
        }
    }


    .subnav-menu.mobile-active+#subnav-btn-icon {
        transform: rotate(135deg);
    }
}

.news-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: var(--white-color);
    transition: box-shadow 0.3s ease;

    text-decoration: none !important;

    &:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    &:hover img {
        transform: scale(1.05);
    }

    .news-card__image {
        width: 100%;
        height: 200px;
        overflow: hidden;

        position: relative;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;

            z-index: -1;
        }

        .badge {
            position: absolute;
            top: 10px;
            right: 10px;
        }
    }

    .news-card__content {
        /* height: 100%; */

        padding: 15px;

        display: flex;
        flex-direction: column;
        flex-grow: 1;
        gap: 10px;

        color: var(--black-color);

        .title {
            font-size: 20px;
            line-height: 1;
            font-weight: 600;
            font-family: var(--header-font);
        }

        .excerpt {
            font-size: 14px;
            font-weight: 400;
            color: var(--dark-gray-color);
        }

        .news-card__footer {
            display: flex;
            align-items: center;
            gap: 10px;
            justify-content: space-between;

            padding: 10px 0 0 0;
            border-top: 1px solid var(--light-gray-color);

            margin-top: auto;

            time {
                font-size: 12px;
                color: var(--light-gray-color);

                display: flex;
                align-items: center;
                gap: 5px;
            }

            >span {
                font-size: 14px;
                font-weight: 500;
                color: var(--primary-color);
            }
        }
    }
}

.pagination,
.nav-links {
    width: 100%;

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

    gap: 30px;

    font-family: var(--header-font);

    font-size: 25px;

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

        text-transform: uppercase;
    }

    span {
        height: 40px;
        width: 40px;

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

        color: white;

        background-color: var(--primary-color);

        border-radius: 5px;

    }

}

/* ! ----------------------------------------------- */
/* ! ----------------- HLAVIČKA -------------------- */
/* ! ----------------------------------------------- */

header {
    width: 100%;
    display: flex;
    flex-direction: column;

    background-color: var(--white-color);

    position: relative;

    .logo {
        position: absolute;
        top: 0;
        left: calc(((100% - 1300px) / 2) - 40px);

        img {
            height: 100px;
            width: auto;
        }
    }

    .top-menu {
        width: 100%;
        height: 40px;

        background-color: var(--primary-color);
        color: var(--white-color);


        .container {
            width: 90%;
            max-width: 1300px;
            margin: 0 auto;

            padding-left: 100px;

            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100%;

            >a {
                font-size: 24px;
                font-weight: 500;
                font-family: var(--header-font);

                color: var(--white-color);
                text-decoration: none;
            }

            ul.upper-menu-items {
                list-style: none;
                display: flex;
                gap: 30px;

                li {
                    font-size: 14px;
                    font-weight: 400;
                    cursor: pointer;

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

                        transition: text-decoration 0.3s ease;
                    }

                    a:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }

    .main-menu {
        width: 100%;
        height: 80px;

        background-color: var(--white-color);
        color: var(--black-color);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

        .container {
            width: 90%;
            max-width: 1300px;
            margin: 0 auto;

            padding-left: 100px;

            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100%;

            >a {
                font-size: 45px;
                font-weight: 700;
                font-family: var(--header-font);
                text-transform: uppercase;
                color: var(--primary-color);

                text-decoration: none;
            }

            ul.main-menu-items {
                list-style: none;
                display: flex;
                gap: 40px;

                position: relative;

                li {
                    font-size: 16px;
                    font-weight: 500;
                    cursor: pointer;

                    position: relative;

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

                        text-transform: uppercase;

                        transition: color 0.3s ease;
                    }

                    a:hover {
                        color: var(--primary-color);
                    }

                    &.current-menu-item,
                    &.current-page-ancestor,
                    &.current-menu-ancestor {
                        > a {
                            color: var(--primary-color);
                            font-weight: 700;

                            position: relative;
                        }

                        > a::after {
                            content: "";

                            position: absolute;
                            left: -20%;
                            bottom: -8px;

                            display: block;
                            margin: 0 auto;

                            width: 140%;
                            height: 2px;
                            background-color: var(--primary-color);
                        }
                    }

                    .sub-menu {
                        display: none;
                    }

                    .sub-menu.active {
                        display: flex;
                        flex-direction: column;
                        gap: 10px;

                        min-width: 150px;
                        width: max-content;

                        position: absolute;
                        top: calc(100% + 27px);
                        left: 0;

                        z-index: 1000;

                        background-color: var(--white-color);
                        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

                        padding: 10px 20px;

                        list-style-type: none;

                        a::after {
                            width: 110%;
                            left: -5%;
                        }
                    }
                }
            }
        }
    }

    #menu-icon {
        display: none;
        font-family: 'Material Symbols Rounded' !important;

        cursor: pointer;

        font-size: 30px;
        color: var(--primary-color);
    }

    nav.mobile-nav {
        display: none;
    }

    nav.mobile-nav.active {
        position: absolute;
        top: 120px;
        left: 0;
        z-index: 1000;

        display: block;

        width: 100%;

        background-color: var(--white-color);
        /* background-color: blue; */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

        .mobile-main-menu-items {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 5px;

            padding: 10px;

            border-top: 2px solid var(--primary-color);

            li {
                font-size: 16px;
                font-weight: 500;
                cursor: pointer;

                a {
                    display: block;
                    width: 100%;

                    padding: 10px 0;

                    text-decoration: none;
                    color: var(--black-color);

                    text-transform: uppercase;

                    transition: color 0.3s ease;

                    text-align: center;
                }

                a:hover {
                    color: var(--primary-color);
                }

                &.menu-item-464>a {
                    display: none !important;
                }
            }
        }

        .mobile-bottom-bar-menu-items {
            list-style: none;

            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;

            background-color: var(--primary-color);
            padding: 10px 20px;

            li {
                font-size: 15px;
                cursor: pointer;

                a {
                    display: block;
                    width: 100%;

                    text-decoration: none;
                    color: var(--white-color);


                    transition: color 0.3s ease;

                    text-align: center;
                }

                a:hover {
                    color: var(--white-color);
                }
            }
        }

    }
}

@media screen and (max-width: 1460px) {
    header {
        .logo {
            left: 50px;
        }

        .top-menu {
            .container {
                padding-left: 130px;
            }
        }

        .main-menu {
            .container {
                padding-left: 130px;
            }
        }
    }
}

@media screen and (max-width: 1150px) {

    .desktop-nav ul {
        display: none !important;
    }

    #menu-icon {
        display: block !important;
    }
}

@media screen and (max-width: 500px) {
    header {
        .logo {
            left: 30px;
        }

        .top-menu {
            .container {
                padding-left: 130px;
            }
        }

        .main-menu {
            .container {
                padding-left: 130px;
            }
        }
    }
}






/* ! ----------------------------------------------- */
/* ! ------------- DOMOVSKÁ STRÁNKA ---------------- */
/* ! ----------------------------------------------- */

main.front-page {
    section.hero-section {
        width: 100%;
        /* height: 500px; */

        padding: 50px 0;

        background-image: url('./imgs/klubovna.png');
        background-size: cover;
        background-position: center;

        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 25px;

        color: var(--white-color);
        text-align: center;

        h1 {
            font-size: clamp(60px, 15vw, 90px);
            ;
            font-weight: 700;
            font-family: var(--header-font);
            text-shadow: 2px 2px 4px #009640b3;
            letter-spacing: 2px;
            word-spacing: 10px;

            padding: 0 20px;

            line-height: 1;
        }

        .lead-text {
            font-size: clamp(18px, 4vw, 24px);
            font-weight: 400;

            font-style: italic;

            color: var(--light-green-color);

            padding: 0 20px;
        }

        .match-box {
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(4px);

            width: 90%;
            max-width: 800px;

            border-radius: 10px;

            border-top: 5px solid var(--primary-color);

            .category-selector {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;

                padding: 8px;

                background-color: var(--black-color);

                span {
                    color: var(--white-color);
                    font-size: 14px;
                    font-weight: 400;

                    text-transform: uppercase;
                    letter-spacing: 2px;

                    position: relative;

                    &.heading {
                        font-weight: 700;
                    }

                    &.separator {
                        color: var(--primary-color);
                        font-size: 20px;
                        line-height: 10px;

                        cursor: default;
                    }

                    &.active::after,
                    &.clickable:hover::after {
                        content: "";

                        position: absolute;

                        left: -1px;
                        bottom: -2px;

                        width: 100%;
                        height: 2px;
                        background-color: var(--primary-color);

                    }

                    &.clickable {
                        cursor: pointer;

                        transition: color 0.3s ease;
                    }
                }
            }

            .next-match-info {
                /* display: flex;
                align-items: center;
                justify-content: center;
                gap: 50px; */

                display: grid;
                grid-template-columns: auto 150px auto;
                justify-items: center;
                align-items: center;
                gap: 20px;

                padding: 20px 0;

                .team {
                    max-width: 110px;

                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    gap: 15px;

                    flex: 1;
                    justify-content: center;

                    .team-logo {
                        height: 90px;
                        width: auto;

                        border-radius: 50%;
                        border: 2px solid var(--primary-color);
                    }

                    .team-name {
                        font-size: 28px;
                        font-weight: 600;
                        color: var(--black-color);
                        text-transform: uppercase;

                        line-height: 1;

                        font-family: var(--header-font);
                    }
                }

                .info {
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    gap: 10px;

                    line-height: 1;

                    .vs {
                        font-size: 50px;
                        font-weight: 700;
                        /* color: var(--primary-color); */
                        color: var(--black-color);
                        font-family: var(--header-font);
                    }

                    .date-time {
                        font-size: 15px;
                        color: white;

                        background-color: var(--primary-color);
                        padding: 10px 15px;
                        border-radius: 20px;
                    }

                    .place {
                        font-size: 15px;
                        font-weight: 500;
                        color: var(--dark-gray-color);
                    }
                }

            }
        }

    }

    @media screen and (max-width: 550px) {
        section.hero-section {
            .match-box {
                .next-match-info {
                    grid-template-columns: 1fr;

                    .info {
                        width: 100%;
                        display: grid;
                        grid-template-columns: 1fr auto 1fr;
                        place-items: center;


                        .vs {
                            order: 2;
                        }

                        .place {
                            order: 3;
                            width: max-content;
                        }


                    }
                }

                .team {
                    max-width: 90% !important;
                }
            }
        }
    }

    section.main-partners-bar {
        width: 100%;

        min-height: 60px;
        height: auto;

        padding: 15px 0;

        background-color: var(--primary-color);

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

        color: var(--white-color);

        .container {
            width: 90%;
            max-width: 1300px;

            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 0px;

            h2 {
                font-size: 24px;
                font-weight: 600;
                font-family: var(--header-font);
                text-transform: uppercase;

                margin-right: 30px;
            }

            div {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                column-gap: 20px;

            }

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

                font-size: 16px;
                /* font-weight: 500; */

                transition: text-decoration 0.3s ease;
            }

            a:hover {
                text-decoration: underline;
            }
        }
    }

    section.main-content-area {
        width: 100%;

        padding: 50px 0;

        .container {
            width: 90%;
            max-width: 1300px;
            margin: 0 auto;

            display: flex;
            flex-direction: column;
            gap: 50px;
        }

        .news-plus-aside-section {
            width: 100%;
            display: grid;
            grid-template-columns: 5fr 2fr;
            gap: 50px;

            .news-subsection {

                .news {
                    display: grid;
                    grid-template-columns: repeat(2, minmax(250px, 1fr));
                    gap: 30px;

                    .badge {
                        font-size: 14px;
                        font-weight: 400;
                        background-color: var(--black-color);
                        color: var(--white-color);
                        padding: 3px 10px;
                        border-radius: 5px;
                        text-shadow: none;

                        &.badge--muzi {
                            background-color: var(--primary-color);
                        }

                        &.badge--klub {
                            background-color: var(--yellow-color);
                            color: var(--black-color);
                        }
                    }

                    .first-news-card {
                        grid-column: span 2;

                        width: 100%;
                        min-height: 400px;
                        position: relative;
                        overflow: hidden;
                        border-radius: 10px;
                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

                        background-color: rgb(0, 0, 0, 0.3);

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

                        text-decoration: none;

                        img {
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            z-index: -1;
                            transition: transform 0.3s ease;
                        }

                        &:hover img {
                            transform: scale(1.05);
                        }

                        .news-main__content {
                            /* position: absolute; */
                            bottom: 20px;
                            left: 20px;
                            color: var(--white-color);
                            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);

                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                            gap: 10px;

                            max-width: 80%;

                            padding: 20px;


                            h3 {
                                font-size: 32px;
                                font-weight: 700;
                                margin-bottom: 10px;
                                font-family: var(--header-font);
                            }

                            p {
                                font-size: 16px;
                                font-weight: 400;
                            }

                            time {
                                font-size: 14px;

                                display: flex;
                                align-items: center;
                                gap: 5px;
                            }
                        }
                    }
                }
            }

            aside {
                display: flex;
                flex-direction: column;
                gap: 30px;

                .results-program-container {
                    display: flex;
                    flex-direction: column;

                    background-color: var(--white-color);

                    border-radius: 10px;
                    overflow: hidden;

                    .head {
                        min-height: 60px;

                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        background-color: var(--black-color);
                        color: var(--white-color);

                        padding: 10px 15px;
                        text-transform: uppercase;



                        h2 {
                            font-size: 20px;
                            font-weight: 600;
                            font-family: var(--header-font);
                        }
                    }

                    .section h2 {
                        height: 60px;
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        background-color: var(--primary-color);
                        color: var(--white-color);
                        padding: 10px 15px;
                        text-transform: uppercase;
                        font-size: 20px;
                        font-weight: 600;
                        font-family: var(--header-font);

                    }

                    p.err {
                        padding: 15px;
                        font-size: 14px;
                        color: var(--dark-gray-color);
                    }

                    .match-item {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        flex-direction: column;
                        padding: 10px 15px;
                        /* border-bottom: 1px solid var(--light-gray-color); */

                        .match-result {
                            display: grid;
                            grid-template-columns: 1fr 100px 1fr;
                            justify-items: center;
                            align-items: center;
                            gap: 10px;

                            .team {
                                display: flex;
                                align-items: center;
                                flex-direction: column;
                                gap: 10px;

                                .team-name {
                                    font-size: 14px;
                                    font-weight: 500;
                                    color: var(--black-color);
                                    text-align: center;
                                }

                                img {
                                    height: 40px;
                                    width: auto;
                                    border-radius: 100%;
                                }
                            }

                        }

                        .score {
                            font-size: 16px;
                            font-weight: 700;
                            color: var(--primary-color);
                        }

                        .date {
                            font-size: 12px;
                            color: var(--dark-gray-color);
                        }
                    }
                }

                .socials {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;

                    background-color: var(--white-color);
                    border-radius: 10px;
                    padding: 15px;

                    h2 {
                        font-size: 20px;
                        font-weight: 600;
                        font-family: var(--header-font);
                        text-transform: uppercase;
                    }

                    .page-heading {
                        margin-bottom: 5px;
                    }



                    .links {
                        display: flex;
                        align-items: center;
                        gap: 10px;

                        a {
                            cursor: pointer;
                            transition: 0.3s ease;

                            img {
                                height: auto;
                                width: 100%;
                                max-width: 150px;
                            }


                            &:hover {
                                scale: 1.05;
                            }

                        }


                    }


                }
            }
        }

        .partners-logos-section {
            .partners-list {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
                grid-auto-rows: minmax(180px, 1fr);

                background-color: var(--white-color);

                a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 15px;

                    /* border: 1px solid #E5E7EB; */

                    img {
                        max-width: 150px;
                        height: auto;
                        object-fit: contain;
                    }
                }
            }
        }
    }

    @media screen and (max-width: 1150px) {
        .news-plus-aside-section {
            grid-template-columns: 1fr !important;
        }
    }

    @media screen and (max-width: 880px) {
        .news {
            grid-template-columns: 1fr !important;

            .first-news-card {
                grid-column: 1 !important;
            }
        }
    }
}


/* ! ----------------------------------------------- */
/* ! ------------- KLASICKÁ STRÁNKA ---------------- */
/* ! ----------------------------------------------- */

main.page {
    width: 100%;

    padding: 30px 0;

    .container {
        width: 90%;
        max-width: 1300px;
        margin: 0 auto;

        &.has-sidebar {
            display: grid;
            grid-template-columns: 3fr minmax(250px, 1fr);
            gap: 50px;
        }

        .main-content {
            width: 100%;

            display: flex;
            flex-direction: column;
        }
    }

    aside.sidebar {
        width: 100%;
        height: max-content;

        background-color: var(--white-color);
        border-radius: 10px;
        padding: 20px 20px 0 20px;
        margin-bottom: 30px;

        h3 {
            font-size: 25px;
            font-weight: 600;
            font-family: var(--header-font);
            text-transform: uppercase;
            margin-bottom: 5px;

            border-bottom: 2px solid var(--primary-color);

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

                &:hover {
                    text-decoration: underline;
                }
            }

        }

        >ul {
            list-style: none;

            >li {
                padding: 10px 5px;

                border-bottom: 1px solid var(--light-gray-color);

                &:last-of-type {
                    border-bottom: none;
                }

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

                    transition: color 0.3s ease;

                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    transition: 0.3s ease-in-out;


                    .text {
                        font-size: 16px;
                        font-weight: 400;
                    }

                    .icon {
                        font-size: 23px;
                        vertical-align: middle;
                        transition: transform 0.3s ease;
                        color: var(--primary-color);
                    }
                }

                a:hover {
                    color: var(--primary-color);

                    .icon {
                        transform: translateX(5px);
                        scale: 1.1;
                    }
                }

                &.active.has-children>a,
                &.current-ancestor>a {
                    font-weight: 600;
                    color: var(--primary-color);

                    .icon {
                        transform: rotate(90deg);
                    }
                }

                &.active>a {
                    font-weight: 600;
                    color: var(--primary-color);
                }

                &:not(.active):not(.current-ancestor) {
                    >ul {
                        display: none;
                    }
                }

                ul {
                    list-style: none;
                    margin-top: 10px;
                    padding-left: 15px;

                    li {
                        padding: 3px 0;

                        a {
                            font-size: 14px;
                            font-weight: 400;
                            color: var(--dark-gray-color);

                            transition: color 0.3s ease;
                        }

                        a:hover {
                            color: var(--primary-color);
                        }

                        &.active>a {
                            font-weight: 600;
                            color: var(--primary-color);
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width: 800px) {
        .container {
            &.has-sidebar {
                grid-template-columns: 1fr !important;
            }
        }

    }
}

/* ! ----------------------------------------------- */
/* ! --------------- VÝPIS ZÁPASŮ ------------------ */
/* ! ----------------------------------------------- */

.nejblizsi-zapas-link {
    display: flex;
    align-items: center;
    gap: 10px;

    width: fit-content;
    margin-left: auto;

    padding: 8px 15px;

    background-color: var(--primary-color);
    color: var(--white-color);

    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;

    font-size: 14px;

    margin-bottom: 10px;
    margin-left: auto;

    span {
        vertical-align: center;
        transition: transform 0.3s ease;
    }

    &:hover span {
        transform: translateX(5px);
        scale: 1.1;
    }
}

#nejblizsi-zapas {
    scroll-margin-top: 25vh;
    /* nechá 25% výšky viewportu nad prvkem */
}

.match-wide-box-item.is-highlighted {
    background-color: var(--light-green-color) !important;
    position: relative;
    border-left: 4px solid var(--main-green-color);
}





/* ! ----------------------------------------------- */
/* ! --------------- TÝMOVÁ STRÁNKA ---------------- */
/* ! ----------------------------------------------- */

main.template-page-template-team {
    padding: 0;

    >.container {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;

        padding: 10px 25px;


        .main-content {
            display: flex;
            align-items: stretch;
            justify-content: flex-start;
            flex-direction: column;

            gap: 20px;

            section.news-table {
                display: grid;
                grid-template-columns: minmax(0, 5fr) minmax(0, 2fr);
                column-gap: 50px;

                max-width: 1300px;


                .news {
                    /* max-width: 879px; */

                    .first-news-card {
                        width: 100%;
                        min-height: 400px;
                        position: relative;
                        overflow: hidden;
                        border-radius: 10px;
                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

                        background-color: rgb(0, 0, 0, 0.3);

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

                        text-decoration: none;

                        img {
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            z-index: -1;
                            transition: transform 0.3s ease;
                        }

                        &:hover img {
                            transform: scale(1.05);
                        }

                        .news-main__content {
                            /* position: absolute; */
                            bottom: 20px;
                            left: 20px;
                            color: var(--white-color);
                            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);

                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                            gap: 10px;

                            max-width: 80%;

                            padding: 20px;


                            h3 {
                                font-size: 32px;
                                font-weight: 700;
                                margin-bottom: 10px;
                                font-family: var(--header-font);
                            }

                            p {
                                font-size: 16px;
                                font-weight: 400;
                            }

                            time {
                                font-size: 14px;

                                display: flex;
                                align-items: center;
                                gap: 5px;
                            }
                        }
                    }

                    .news-slider {
                        width: 100%;
                        /* max-width: 879px; */

                        display: grid;
                        grid-auto-flow: column;
                        grid-auto-columns: clamp(260px, 40%, 320px);
                        gap: 15px;

                        padding: 10px;
                        overflow-x: auto;

                        overscroll-behavior-inline: contain;
                        scroll-snap-type: inline mandatory;

                        a {
                            scroll-snap-align: start;
                        }

                    }

                    .badge {
                        display: none;
                    }


                }

                .table {
                    width: 100%;

                    .table-container {
                        width: 100%;

                        background-color: var(--white-color);

                        border-radius: 10px;
                        overflow: hidden;

                        .head {
                            background-color: var(--black-color);
                            color: var(--white-color);

                            padding: 15px;

                            border-top: 4px solid var(--primary-color);

                            border-radius: 10px 10px 0 0;

                            h2 {
                                font-family: var(--header-font);
                                font-size: 24px;

                                text-transform: uppercase;
                            }
                        }

                        table {
                            width: 100%;

                            border-collapse: collapse;

                            thead {
                                th {
                                    background-color: #f1f3f5;
                                    color: #495057;

                                    padding: 12px 15px;

                                    text-transform: uppercase;
                                    font-weight: 700;
                                    text-align: left;

                                    font-size: 15px;


                                    border-bottom: 2px solid #dee2e6;
                                }
                            }

                            tbody {
                                td {
                                    padding: 10px 15px;
                                    border-bottom: 1px solid #e9ecef;

                                    font-size: 14px;
                                }

                                td:first-child {
                                    font-weight: 800;
                                    width: 30px;
                                }

                                td:last-child {
                                    font-weight: 800;
                                }

                                td:nth-child(2) {
                                    font-weight: 500;
                                }

                                tr.our-team {
                                    background-color: var(--light-green-color);
                                    color: var(--primary-color);
                                }

                                tr.our-team td {
                                    font-weight: 700;
                                }

                                tr:hover {
                                    background-color: #f8f9fa;
                                }
                            }
                        }

                        a {
                            width: 100%;

                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 10px;

                            padding: 8px;

                            background-color: var(--light-green-color);
                            color: var(--primary-color);

                            text-decoration: none;
                            text-transform: uppercase;
                            font-weight: 600;

                            font-size: 14px;


                            span {
                                font-size: 18px;
                            }

                        }
                    }

                }



            }

            @media (max-width: 1250px) {
                .news-table {
                    grid-template-columns: 1fr !important;

                    gap: 20px;
                }
            }

            section.program,
            section.results {
                width: 100%;

                background-color: var(--white-color);

                border-radius: 10px;
                overflow: hidden;

                .section-head {
                    width: 100%;

                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    background-color: var(--primary-color);

                    border-top: 4px solid var(--black-color);

                    padding: 8px 15px;

                    border-radius: 10px 10px 0 0;



                    h2 {
                        font-size: 32px;
                        font-weight: 600;
                        color: var(--white-color);
                        font-family: var(--header-font);
                        text-transform: uppercase;
                    }
                }

                .matches-list {
                    width: 100%;

                    /* padding: 10px 15px; */

                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));


                    .match-overview-item {
                        width: 100%;

                        display: flex;
                        flex-direction: column;
                        gap: 10px;

                        padding: 15px;

                        position: relative;

                        transition: 0.2s;


                        .match-overview-item__info {
                            width: 100%;

                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            .match-overview-item__kolo {
                                font-size: 12px;
                                font-weight: 500;

                                color: var(--dark-gray-color);

                                text-transform: uppercase;
                            }

                            .match-overview-item__misto {
                                font-size: 12px;

                                color: var(--dark-gray-color);

                                padding: 3px 10px;
                                border-radius: 10px;

                                &.Venku {
                                    background-color: #E5E7EB;
                                }

                                &.Doma {
                                    background-color: var(--primary-color);
                                    color: var(--white-color);
                                }
                            }

                        }

                        .match-overview-item__date {
                            width: 100%;

                            display: flex;
                            justify-content: center;
                            align-items: center;
                            flex-direction: column;

                            .match-overview-item__datum {
                                font-size: 26px;
                                font-weight: 800;

                                font-family: var(--header-font);
                            }

                            .match-overview-item__cas {
                                font-size: 16px;
                                font-weight: 500;

                                color: var(--primary-color);

                                margin-top: -10px;
                            }
                        }


                        .match-overview-item__teams {
                            width: 100%;

                            display: grid;
                            grid-template-columns: 1fr 70px 1fr;

                            .match-overview-item__team {
                                display: flex;
                                align-items: center;
                                flex-direction: column;
                                gap: 10px;

                                img {
                                    height: 40px;
                                    width: 40px;

                                    border-radius: 50%;
                                    object-fit: cover;
                                }

                                p {
                                    font-size: 14px;
                                    font-weight: 500;
                                    text-align: center;

                                    overflow-wrap: break-word;
                                }
                            }


                            .match-overview-item__score {
                                width: 100%;

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


                                &.match-overview-item__score--vs {
                                    font-size: 15px;
                                    font-weight: 700;

                                    color: var(--light-gray-color);
                                }


                                &.match-overview-item__score--result {
                                    font-size: 26px;
                                    font-weight: 800;

                                    font-family: var(--header-font);
                                }
                            }
                        }

                        .match-overview-item__place {
                            display: none;
                        }

                        &:hover {
                            background-color: #dee2e65b;
                        }

                        &:not(:last-of-type)::after {
                            content: "";

                            position: absolute;
                            right: 0;
                            top: 10%;

                            height: 80%;
                            width: 1px;

                            background-color: var(--light-gray-color);
                        }
                    }
                }
            }

            @media (max-width: 549px) {
                .match-overview-item:not(:last-of-type)::after {
                    height: 1px !important;
                    width: 80% !important;

                    top: 100% !important;
                    right: auto !important;
                    left: 10% !important;
                }
            }


            section.coaches-trainings {
                width: 100%;

                display: grid;
                grid-template-columns: 3fr 1fr;
                gap: 5px;

                .coaches {
                    .coaches-list {
                        width: 100%;

                        display: flex;
                        align-items: stretch;
                        flex-direction: column;
                        gap: 10px;
                    }

                    .coach {
                        width: 100%;

                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        gap: 20px;

                        padding: 15px;

                        background-color: var(--white-color);

                        border-radius: 10px;

                        line-height: 1;

                        transition: 0.2s;

                        &:hover {
                            background-color: #dee2e65b;
                        }

                        .pozice {
                            color: var(--primary-color);
                            font-family: var(--header-font);

                            font-size: 20px;
                            font-weight: 600;

                            margin-bottom: 0;
                        }

                        .jmeno {
                            font-family: var(--header-font);

                            font-size: 28px;
                            font-weight: 600;

                            text-transform: uppercase;

                            margin-bottom: 0;

                        }

                        .email,
                        .telefon {
                            font-size: 14px;
                            font-weight: 400;

                            color: var(--light-gray-color);

                            margin-bottom: 0;

                        }
                    }
                }


                .trainings {
                    .trainings-box {
                        ul {
                            list-style: none;

                            background-color: var(--white-color);

                            padding: 15px;

                            border-radius: 10px;

                            li {
                                margin-bottom: 5px;
                                font-family: var(--header-font);

                                display: flex;
                                align-items: center;
                                gap: 10px;

                                span:nth-child(1) {
                                    font-size: 28px;
                                    font-weight: 800;

                                    color: var(--primary-color);

                                }

                                span:nth-child(2) {
                                    font-size: 25px;
                                    font-weight: 600;
                                }
                            }
                        }
                    }
                }
            }

            @media (max-width: 950px) {
                section.coaches-trainings {
                    grid-template-columns: 1fr !important;
                }
            }

            section.players {
                width: 100%;

                .team-image {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    margin-bottom: 30px;

                    img {
                        /* height: 100%; */
                        height: auto;
                        max-height: 450px;

                        width: 100%;
                        max-width: 1000px;

                        object-fit: cover;
                    }
                }

                &.kompletni .players-list {
                    width: 100%;

                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                    gap: 20px;
                    justify-items: center;


                    .player {
                        width: 100%;
                        max-width: min(275px, 60vw);
                        height: auto;
                        aspect-ratio: 3 / 4;

                        position: relative;

                        border: 2px solid var(--primary-color);
                        border-radius: 10px;

                        overflow: hidden;

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

                        background-color: white;

                        /* box-shadow: 3px 3px 10px var(--primary-color); */


                        img {
                            position: absolute;
                            top: 0;
                            left: 0;

                            width: 100%;
                            height: 100%;

                            object-fit: cover;

                            z-index: 20;
                        }

                        .cislo-dresu {
                            position: absolute;
                            bottom: 10px;
                            right: 20px;

                            font-family: var(--header-font);

                            font-size: 7rem;
                            font-weight: 600;

                            line-height: 1;

                            color: var(--primary-color);

                            text-shadow: 3px 3px 3px var(--black-color);

                            z-index: 50;
                        }

                        div {
                            width: 100%;
                            min-height: 30%;

                            padding-left: 10px;
                            padding-bottom: 20px;

                            display: flex;
                            align-items: flex-end;

                            background: linear-gradient(8deg, rgba(0, 150, 64, 1) 0%, rgba(0, 150, 64, 0.4) 56%, rgba(0, 150, 64, 0) 75%, rgba(0, 150, 64, 0) 100%);

                            z-index: 30;

                            padding-top: 30%;


                            .jmeno {
                                max-width: 60%;

                                font-size: 2rem;
                                font-weight: 600;
                                color: var(--white-color);
                                font-family: var(--header-font);

                                /* margin-right: 100px; */

                                line-height: 1;
                            }
                        }
                    }

                }

                &.zjednodusena .players-list {
                    width: 100%;

                    /* display: flex;
                    align-items: center;
                    flex-direction: column;
                    gap: 20px; */

                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                    gap: 20px;
                    justify-items: center;

                    .player {
                        width: 100%;
                        max-width: 500px;

                        display: grid;
                        grid-template-columns: 30px auto;
                        gap: 10px;
                        align-items: center;

                        background-color: var(--white-color);
                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                        padding: 10px 20px;
                        border-radius: 10px;

                        .cislo-dresu {
                            font-family: var(--header-font);

                            font-size: 2rem;
                            font-weight: 600;

                            color: var(--primary-color);

                            line-height: 1;
                            margin-bottom: 0;

                            text-align: center;
                        }

                        .jmeno {
                            font-size: 20px;
                            font-weight: 600;

                            line-height: 1;
                            margin-bottom: 0;
                        }

                        .pozice {
                            font-size: 14px;
                            font-weight: 500;

                            color: var(--dark-gray-color);

                            margin-bottom: 0;
                        }


                        img {
                            display: none;
                        }
                    }

                }

                &.skryta .players-list {
                    display: none;
                }
            }
        }
    }
}


/* ! ----------------------------------------------- */
/* ! ----------------- ARCHIVE --------------------- */
/* ! ----------------------------------------------- */

main.archive {
    width: 100%;

    &.team-category {
        .page-container {
            width: 90%;
            max-width: 1300px;
            margin: 0 auto;

            padding-bottom: 40px;

            .posts-list {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: 20px;

                place-items: center;

                margin-bottom: 50px;

                a {
                    max-width: 350px;
                }

                .badge {
                    display: none;
                }
            }
        }

    }

    &.taxonomy-soutez {
        .matches-list-container {
            width: 90%;
            max-width: 1300px;
            margin: 0 auto;

            margin-bottom: 20px;
        }
    }


}

main.home {
    width: 100%;

    .page-container {
        width: 90%;
        max-width: 1300px;
        margin: 0 auto;

        padding: 30px 0;

        .posts-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;

            place-items: center;


            margin-bottom: 50px;

            a {
                max-width: 350px;
            }

            .badge {
                display: none;
            }
        }
    }
}


/* ! ----------------------------------------------- */
/* ! ------------------ SINGLE --------------------- */
/* ! ----------------------------------------------- */


main.single {
    width: 100%;

    .container {
        width: 90%;
        max-width: 1300px;
        margin: 0 auto;


        padding: 30px 0;

        h1 {
            /* text-align: center; */
        }

        .post-info {
            color: var(--primary-color);
            font-weight: 600;
            font-size: 15px;
            font-style: italic;
        }

        .post-thumbnail {
            display: block;
            width: 100%;
            max-width: 800px;

            height: auto;
            max-height: 500px;

            object-fit: cover;

            margin: 0 auto;

            margin-top: 10px;
        }

        .content {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 10px;

            margin-top: 20px;
        }
    }
}

/* ! ----------------------------------------------- */
/* ! ---------------- MERCH PAGE ------------------- */
/* ! ----------------------------------------------- */

main.post-id-226 {

    .merch-list {
        width: 100%;

        padding: 30px 0;

        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 30px;

        .merch-item {
            width: 100%;
            max-width: 300px;

            /* display: flex;
            flex-direction: column; */

            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 300px auto auto;

            gap: 10px;

            background-color: var(--white-color);

            padding: 10px;

            border-radius: 10px;

            img {
                width: 100%;
                height: auto;
                max-height: 300px;
                object-fit: contain;

                align-self: center;
                justify-self: center;
            }

            .merch-title {
                font-size: 20px;
                font-weight: 600;
                text-align: center;
                color: var(--primary-color);

                margin-top: auto;
            }

            .merch-price {
                font-size: 15px;
                /* font-weight: 600; */
                text-align: center;
                color: var(--light-gray-color);

                margin-top: -10px;
            }
        }

    }
}


/* ! ----------------------------------------------- */
/* ! ---------------- LIST KONTAKTŮ ---------------- */
/* ! ----------------------------------------------- */

main .kontakty-container {
    width: 100%;

    padding: 30px 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

    .kontakt-item {
        width: 100%;
        max-width: 800px;

        display: grid;
        grid-template-columns: 50px auto 1fr;
        gap: 10px;

        align-items: center;

        background-color: var(--white-color);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

        padding: 10px 20px;

        border-radius: 10px;

        img {
            width: 45px;
            height: auto;
            border-radius: 50%;
            object-fit: cover;

            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .foto-icon span {
            display: flex;
            justify-content: center;
            align-items: center;

            width: 45px;
            height: 45px;


            font-size: 30px;
            font-weight: 400;
            color: black;

            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .jmeno {
            font-size: 18px;
            font-weight: 600;
            color: var(--primary-color);

            margin-bottom: 0;
        }

        .pozice {
            font-size: 14px;
            font-weight: 500;

            margin-bottom: 0;
        }

        .kontakt-info {
            display: flex;
            align-items: center;
            /* flex-direction: column; */
            gap: 20px;

            justify-self: right;

            a {
                display: flex;
                align-items: center;
                gap: 5px;

                font-size: 14px;
                font-weight: 400;

                text-decoration: none;
                /* color: var(--primary-color); */
                color: var(--light-gray-color);

                transition: color 0.3s ease;

                .icon {
                    font-size: 18px;
                }
            }
        }




    }
}


/* ! ----------------------------------------------- */
/* ! ------------------- 404 ----------------------- */
/* ! ----------------------------------------------- */

main.not-found {
    width: 100%;

    .main-content {
        width: 90%;
        max-width: 1300px;
        margin: 0 auto;
        padding: 100px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 20px;

        text-align: center;

        h1 {
            font-size: 72px;
            font-weight: 800;
            color: var(--primary-color);
            font-family: var(--header-font);
        }

        p {
            font-size: 24px;
            font-weight: 500;
            color: var(--light-gray-color);
        }
    }
}

/* ! ----------------------------------------------- */
/* ! ------------------ FOOTER --------------------- */
/* ! ----------------------------------------------- */

footer {
    width: 100%;

    padding: 0 50px;

    background-color: var(--black-color);
    border-top: 4px solid var(--primary-color);
    color: var(--light-gray-color);

    display: flex;
    align-items: center;
    flex-direction: column;

    section {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .container {
        width: 90%;
        max-width: 1300px;

        padding: 40px 0;


    }

    .content-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 50px;
        width: 100%;

        h2 {
            font-size: 32px;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--white-color);
            font-family: var(--header-font);
            text-transform: uppercase;
        }

        h3 {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--primary-color);
            font-family: var(--header-font);
            text-transform: uppercase;

        }

        ul {
            list-style: none;

            li {
                margin-bottom: 15px;

                a {
                    text-decoration: none;
                    color: var(--light-gray-color);

                    transition: color 0.3s ease;
                }

                a:hover {
                    color: var(--primary-color);
                    text-decoration: underline;
                    text-decoration-color: #009640;
                    text-decoration-thickness: 2px;
                }
            }
        }

        p,
        a {
            display: flex;
            align-items: center;
            gap: 10px;

            margin-bottom: 15px;

            text-decoration: none;
            color: var(--light-gray-color);

            span {
                font-weight: 400;
                color: var(--primary-color);
            }
        }

    }

    >span {
        background-color: #1F2937;
        height: 1px;
        width: 90%;
        max-width: 1300px;
    }

    .bottom-info-container {
        width: 90%;
        max-width: 1300px;

        padding: 20px 0;

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

        font-size: 14px;
        color: var(--dark-gray-color);

        ul {
            list-style: none;
            display: flex;
            gap: 0px;

            li {
                cursor: pointer;

                a {
                    /* text-decoration: none; */
                    color: var(--dark-gray-color);

                    transition: color 0.3s ease;
                }

                &:not(:last-child)::after {
                    content: "|";
                    margin: 0 5px;
                    color: var(--dark-gray-color);
                }

                a:hover {
                    color: var(--primary-color);
                }
            }
        }
    }
}


@media screen and (max-width: 1200px) {
    footer {
        .content-container {
            grid-template-columns: 1fr 1fr;

            .team-info {
                grid-column: 1 / 3;
            }
        }
    }
}

@media screen and (max-width: 650px) {
    footer {
        .content-container {
            grid-template-columns: 1fr;
        }

        .team-info {
            grid-column: 1 / 2 !important;
        }
    }
}