/**
 * Hero Naloxone Component Styles
 *
 * @package JPK
 */

.two-col-text-with-social {
    .two-col-text-wrapper {
        gap: var(--spacing-lg);

        @media (max-width: 992px) {
            gap: 0;
        }
    }
    .two-col-text {
        width: calc(50% - (var(--spacing-lg) / 2));
        margin-bottom: -1rem;

        @media (max-width: 992px) {
            width: 100%;
        }
    }
    .two-col-social {
        width: calc(50% - (var(--spacing-lg) / 2));
        padding-bottom: 30px;

        @media (max-width: 992px) {
            width: 100%;
            margin-top: var(--spacing-md);
        }
        @media (max-width: 576px) {
            padding-bottom: 20px;
        }
    }
    .videos-slider {
        .glide__slide {
            list-style-type: none;
            border-radius: var(--border-radius-secondary);
            overflow: hidden;

            &:before {
                display: none;
            }
            iframe {
                border-radius: var(--border-radius-secondary);
                overflow: hidden;
            }
        }
        .glide__arrows {
            margin-top: 10px;

            @media (max-width: 992px) {
                text-align: center;
            }
            .glide__arrow {
                position: relative;
                width: 36px;
                height: 36px;
                border-radius: 50%;
                border: 2px solid white;
                background-color: transparent;
                padding: 0px;
                cursor: pointer;
                transition: .3s ease-in-out;

                &:hover, &:focus-visible {
                    background-color: white;
                    transform: scale(1.15);

                    svg {
                        color: black;
                    }
                }
                &.glide__arrow--left {
                    transform: rotate(180deg);

                    &:hover, &:focus-visible {
                        transform: rotate(180deg) scale(1.15);
                    }
                }
                svg {
                    color: white;
                    width: 20px;
                    height: 20px;
                    position: absolute;
                    top: 50%;
                    left: calc(50% + 1px);
                    transform: translate(-50%, -50%);
                    transition: .3s ease-in-out;
                }
            }
            .glide__arrow--left {
                margin-right: 15px;
            }
        }
    }
}
#sb_instagram .sbi_inner_wrap {
    border-radius: var(--border-radius-secondary);
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.sbi_carousel:hover .sbi-owl-nav>div {
    transform: none;
}
.sbi-owl-nav>div {
    top: auto !important;
    bottom: -25px;
    left: 15px !important;
    background: transparent !important;
    border: 2px solid white;

    @media (max-width: 576px) {
        bottom: -40px;
    }
    &:hover, &:focus-visible {
        background-color: white !important;
        transform: scale(1.1) !important;

        .svg-inline--fa {
            color: black !important;
        }
    }
}
#sb_instagram .sbi_carousel .sbi-owl-nav .svg-inline--fa {
    color: white;
}
.sbi-owl-nav .sbi-owl-next {
    right: auto !important;
    left: 65px !important;
}
#sb_instagram, #sbi_images {
    padding: 0 !important;
    transition: all .5s;
}
.sbi-owl-nav {
    @media (max-width: 992px) {
        width: 110px;
        margin: 0px auto;
        position: relative;
    }
}
.sbi-owl-dots.disabled, .sbi-owl-nav.disabled {
    display: block !important;
}