﻿.dynamicSlider {
    background: linear-gradient(90deg,rgba(23, 76, 120, 1) 0%, rgba(34, 113, 178, 1) 100%);
}

    .dynamicSlider .content {
        padding: 40px 0;
    }

        .dynamicSlider .content .wrapper {
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            flex-direction: column;
            width: 100%;
        }

    .dynamicSlider .menuNav {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        flex-direction: column;
        gap: 15px;
        justify-content: flex-start;
        padding-bottom: 20px;
        width: 100%;
        font-family: 'demos-next-pro-black', Arial, sans-serif;
    }

        .dynamicSlider .menuNav .menuItem {
            text-decoration: none;
            transition: color 0.3s;
            color: #ffffff;
            font-size: 16px;
            transition: all 0.4s ease-out;
            font-weight: 500;
            align-self: flex-start;
        }

            .dynamicSlider .menuNav .menuItem .num {
                padding-right: 5px;
            }

            .dynamicSlider .menuNav .menuItem.active,
            .dynamicSlider .menuNav .menuItem:hover {
                color: #e2be2f;
                font-size: 24px;
            }

    .dynamicSlider .colContainer {
        position: relative;
        width: 100%;
        height: 750px;
        overflow: hidden;
        color: #ffffff;
    }

        .dynamicSlider .colContainer .secGroup {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

            .dynamicSlider .colContainer .secGroup:first-of-type {
                pointer-events: auto !important;
                visibility: visible !important;
                z-index: 5;
                pointer-events: auto !important;
            }

            .dynamicSlider .colContainer .secGroup .columnLeft {
                padding: 30px 30px 0 0;
                user-select: text !important;
                -webkit-user-select: text !important;
                cursor: auto !important;
            }

                .dynamicSlider .colContainer .secGroup .columnLeft .title {
                    color: #e2be2f;
                    font-size: 35px;
                    line-height: 1.2em;
                    font-family: 'demos-next-pro-black', Arial, sans-serif;
                }

                .dynamicSlider .colContainer .secGroup .columnLeft .subtitle {
                    font-weight: 600;
                    font-size: 21px;
                    line-height: 1.2em;
                    margin-bottom: 15px;
                }

                .dynamicSlider .colContainer .secGroup .columnLeft .copy {
                    line-height: 1.7em;
                    font-weight: 100;
                    height: 66%;
                    overflow: auto;
                    scrollbar-width: thin;
                    scrollbar-color: #174c77 transparent;
                     padding-right: 10px;
                }

                    .dynamicSlider .colContainer .secGroup .columnLeft .copy::-webkit-scrollbar {
                        width: 8px;
                        height: 8px;
                    }

                    .dynamicSlider .colContainer .secGroup .columnLeft .copy::-webkit-scrollbar-track {
                        background: transparent;
                        border-radius: 4px;
                    }

                    .dynamicSlider .colContainer .secGroup .columnLeft .copy::-webkit-scrollbar-thumb {
                        background: #174c77;
                        border-radius: 4px;
                    }

                        .dynamicSlider .colContainer .secGroup .columnLeft .copy::-webkit-scrollbar-thumb:hover {
                            background: #174c77;
                        }
                    .dynamicSlider .colContainer .secGroup .columnLeft .copy a {
                        color: #ffffff;
                        text-decoration: underline;

                    }
                    .dynamicSlider .colContainer .secGroup .columnRight {
                        height: 100%;
                        box-sizing: border-box;
                        overflow: hidden;
                        display: -webkit-flex;
                        display: -ms-flexbox;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                    }

                .dynamicSlider .colContainer .secGroup .columnRight img {
                    width: 100%;
                    height: 80%;
                    object-fit: contain;
                    object-position: center;
                    box-sizing: border-box;
                }

            .dynamicSlider .colContainer .secGroup:first-child .columnLeft,
            .dynamicSlider .colContainer .secGroup:first-child .columnRight {
                transform: translateY(0%);
            }

@media (max-width: 767px) {
    .dynamicSlider .content .wrapper {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }

    .dynamicSlider .colContainer {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
    }

        .dynamicSlider .colContainer .secGroup {
            position: relative !important;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex !important;
            flex-direction: column !important;
            height: auto !important;
            opacity: 1 !important;
            pointer-events: auto !important;
        }

    .columnLeft, .columnRight {
        transform: none !important;
        height: auto !important;
    }
}
