/** instagram section **/

.houm-instagram {
    background-color: #F9F7F2;


    & .owl-item {
        height: auto;
        background: #efefef;
        padding: 1rem;
        position: relative;

        &::before {
            content: '';
            display: none;
            height: 100px;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 99999;
            background: #efefef;
            opacity: 1;
        }

        &::after {
            content: '';
            display: none;
            height: 100px;
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 99999;
            background: #efefef;
            opacity: 1;
        }
    }

    & .owl-nav {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        display: flex;
        justify-content: space-between;

        @media (min-width: 992px) {
            width: 108%;
            top: 40%;
        }

        & button {
            position: relative;

            & span {

                font-size: 10rem;
                font-weight: 300;
                border-radius: 8px;
                color: #a7b2a0;
                display: flex;
                align-items: center;
                text-shadow: 2px 0px 5px rgba(0, 0, 0, 0.4);
            }
        }
    }

    & .owl-dots {
        display: flex;
        justify-content: center;
        gap: 1.5rem;
        margin-top: 3rem;
        z-index: 99;

        & button {
            display: block;
            width: 30px;
            height: 30px;
            background-color: white !important;
            border-radius: 50%;
            box-shadow: 0px 0px 3px gray;

            &.active {
                background-color: #bacd93 !important;
            }


        }
    }



    & .instagram-sides {
        height: 100%;
        width: 102%;




    }
}

button.owl-prev,
button.owl-next {
    background-color: transparent !important;
}

.owl-nav button .owl-prev,
.owl-nav button .owl-next {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
    padding: 0 !important;

}

@media (max-width: 767px) {
    .houm-instagram .owl-dots button {
        width: 40px;
        height: 40px;
    }

    .houm-instagram .owl-item::after {
        height: 190px;
    }
}

.houm-instagram .owl-item::after {
    height: 198px;
}




.instagram-sides iframe {
    width: 100%;
}