/* 

/* community section */

/* @media screen and (min-width:768px) {
    .owl-carousel4 .owl-stage-outer .owl-stage .owl-item {
        width: auto !important;
    }
} */

.community-card {
    max-width: 400px;
    background: var(--blue-500);
    border: 1px solid var(--purple1);
    border-radius: 16px;
    position: relative;
    text-align: center;
    padding: 20px;
    height: 248px;
}

.community-card .communityimg {
    height: 88px !important;
    width: 88px !important;
    border-radius: 50%;
    aspect-ratio: 4/3;
    object-fit: cover;
    margin-top: 1.5rem;
}

.community-card h5 {
    color: var(--white);
    font-weight: 700;
    margin: 1rem 0;
    font-size: var(--h5);
}

.community-card p {
    color: #333;
}

.communityheaderimg {
    position: absolute;
    height: 26px;
    width: 128px !important;
    top: 0;
    left: 0;
    background: var(--secondary-1);
    border-radius: 16px 4px 4px 0px;
    padding: 2px 8px 2px 8px;
}

.community-card button {
    background-color: var(--blue-500);
    border: 1px solid var(--orange);
    border-radius: 44px;
    color: var(--orange);
    font-weight: 600;
    padding: 4px 20px;
    margin: 0.5rem 0rem 1rem 0rem;
    transition: 0.2s ease-in-out;
}

.community-card button:hover {
    background-color: var(--orange);
    color: var(--white);
}

.owl-carousel .owl-item .userImage {
    display: inline-block;
    width: 100%;
    height: 180px;
}

.owl-carousel .owl-dots {
    text-align: center;
    margin-top: 30px;
}

.owl-carousel button.owl-dot {
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit;
    font-size: 6px !important;
    width: 14px;
    height: 14px;
    background: #392e4a;
    border-radius: 20px;
    margin: 5px;
    transition: 0.5s ease-in-out;
}

.owl-carousel button.owl-dot:hover {
    background-color: var(--orange);
}

.owl-carousel button.owl-dot.active {
    background-color: var(--orange);
}

.owl-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    left: 50%;
    top: 53%;
    transform: translate(-50%, 89%);
    width: 100%;
    max-width: 710px;
}

.owl-carousel .owl-nav button.owl-prev {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    left: -5rem;
    top: 1.5rem;
}

.owl-carousel .owl-nav button.owl-next {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    left: 5rem;
    top: 1.5rem;
}

.owl-carousel .owl-nav button.owl-prev>* {
    background-color: white;
    border-radius: 50%;
    display: inline-block;
    line-height: 1.2;
    color: #6914F4;
    margin-top: 9px;
    font-weight: 700;
    width: 33px !important;
    height: 31px !important;
    font-size: 22px;
    transition: 0.5s ease-in-out;
}

.owl-carousel .owl-nav button.owl-prev:hover span {
    background-color: #6914F4;
    color: #fff;
}

.owl-carousel .owl-nav button.owl-next:hover span {
    background-color: #6914F4;
    color: #fff;
}

.owl-carousel .owl-nav button.owl-next>* {
    background-color: white;
    border-radius: 50%;
    display: inline-block;
    line-height: 1.2;
    color: #6914F4;
    margin-top: 9px;
    font-weight: 700;
    width: 33px !important;
    height: 31px !important;
    font-size: 22px;
    transition: 0.5s ease-in-out;
}

.owl-carousel .owl-stage {
    padding-left: 0px !important;
    display: flex;
    height: unset;
}

.owl-carousel0 .owl-stage-outer {
    height: 270px !important;
}

.owl-carousel .owl-stage .owl-item .item {
    height: 100%;
}

.owl-carousel.owl-drag .owl-item {
    height: unset;
}

/* .owl-carousel4 .owl-stage-outer {
    overflow: unset;
} */

/* @media screen and (min-width: 600px) and (max-width: 700px) {
    .owl-carousel4.owl-drag .owl-item {
        width: auto !important;
    }
} */



.center-text {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.center-text p {
    color: var(--purple3) !important;
    font-weight: 600;
}

.center-text h3 {
    font-size: 40px;
    color: transparent;
    -webkit-text-stroke: 2px var(--purple4);
    /* Apply a black border */
    -webkit-text-fill-color: transparent;
    /* Ensure text is transparent */
    letter-spacing: 5px;
    line-height: 49.32px;
    font-weight: 800;
}

.section-spacing {
    margin-top: var(--topMargin);
}

.pt-120 {
    padding-top: 120px;
}

/* filter button */
.filters .dropdown-toggle::after {
    content: none !important;
}

.filters .dropdown-toggle {
    border-radius: 40px;
    padding: 6px 12px 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.1);
    font-size: var(--p);
}

.filters .dropdown-menu-bar.menu {
    width: 500px;
    height: 100%;
    min-height: 375px;
    border: 1px solid #66478F;
    background-color: #312244;
    z-index: 9999;
    border-radius: 8px;
    position: absolute;
    right: 0;
    opacity: 0;
    pointer-events: none;
}
.filters .dropdown-menu-bar.menu.menu-open{
    opacity: 1;
    pointer-events: auto;
}
.filters .dropdown-menu {
    width: 500px;
    height: 100%;
    min-height: 375px;
    border: 1px solid #66478F;
    background-color: #312244;
    z-index: 9999;
}

.filters .nav-pills .nav-link {
    text-align: left;
    padding: 0px;
    margin-top: 0.8em;
    --bs-text-opacity: 1;
    color: rgba(255, 255, 255, .5);
    font-size: var(--p);
}

.filters .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff;
    background-color: transparent;
}

.tab-heading {
    color: var(--darkyellow);
    font-weight: 600;
    padding-top: 1rem;
    padding-left: 1.2rem;
    padding-right: 1.5rem;
}

.filter-detail span {
    border-radius: 40px;
    background: #453856;
    padding: 2px 16px 2px 16px;
    border: 1px solid #584C67;
    margin-top: 0.7rem;
    cursor: pointer;
    font-size: var(--p);
}

.filter-detail span.active {
    background: var(--blue-var1);
}


.filter-detail .filter-rounded {
    border-radius: 40px;
    background: #453856;
    padding: 2px 16px 2px 16px;
    border: 1px solid #584C67;
    margin-top: 0.7rem;
    cursor: pointer;
    font-size: var(--p);
}

.searchInput {
    background: #453856;
    border: none;
    border-radius: 4px;
    color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFFFFF" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path fill="%23FFFFFF" fill-opacity="0.5" d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0a1.06 1.06 0 0 0 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
    background-position: 15px 10px;
    background-repeat: no-repeat;
    padding: 6px 20px 7px 40px;
    -webkit-transition: width 0.8s ease-in-out;
    transition: width 0.8s ease-in-out;
    outline: none;
    background-size: 18px;
}

.searchchannel {
    display: flex;
}

.searchchannel img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50%;
}

.searchchannel span {
    font-size: var(--p);
}

.searchchannel:hover {
    background-color: rgba(43, 174, 216, 0.2);
    cursor: pointer;
}

.searchchannel.active {
    background-color: rgba(43, 174, 216, 0.2);
}

/* btn hover styles */

.btn-style-1 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: var(--secondary);
    border-radius: 40px;
    color: var(--white);
    font-weight: 700;
    /* box-shadow: inset 0 0 20px rgba(255, 255, 255, 0); */
    outline: 1px solid #8740F2;
    outline-offset: -5px;
    text-shadow: none;
    -webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
    width: max-content;
}

.btn-style-1:hover {
    border: 1px solid;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
    outline-offset: 15px;
    outline-color: rgba(255, 255, 255, 0);
    text-shadow: 1px 1px 2px #427388;
}

.btn-style-1:disabled {
    border: none;
    background: var(--secondary);
    color: var(--white);
    outline: 1px solid #8740F2;
    outline-offset: -5px;
    opacity: 0.5;
}

.re-btn {
    color: white;
    padding: 8px 20px;
    background-color: #2BAED8;
    --bs-btn-disabled-bg: #2BAED8;
    --bs-btn-disabled-border-color: transparent;
    border-radius: 32px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    font-size: 14px;
    text-shadow: none;
    -webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
    width: max-content;
}

.re-btn:hover {
    border: 1px solid;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
    outline-color: rgba(255, 255, 255, 0);
    text-shadow: 1px 1px 2px #427388;
}

.userImage {
    width: 96.07px !important;
    height: 96.57px !important;
    border-radius: 50%;
}

.grape-bor-background {
    border: 1px solid #66478F;
    background: #291C3C;
}

.white-button-red {
    background: #fff;
    color: #F04141;
    border-radius: 40px;
    text-shadow: none;
    width: max-content;
    font-size: var(--h6);
}

.white-button-red:hover,
.white-button-red:focus {
    background: #F04141;
    color: #fff;
}

.red-button {
    background: #F04141;
    color: #fff;
    border-radius: 40px;
    text-shadow: none;
    width: max-content;
}

.red-button:hover,
.red-button:focus {
    background: #fff;
    color: #F04141;
}

.fa-heart {
    color: #AAAAAA;
    border-radius: 50%;
    background: #D9D9D933;
    padding: 7px;
    font-size: 12px;
}

.fa-heart.active {
    background-color: #F04141 !important;
    color: white !important;
}

.fa-heart-1 {
    background-color: #F04141;
    color: white;
}

.noDataSection {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    background: rgba(41, 28, 60, 1);
    color: #fff;
    border: 1px solid rgba(102, 71, 143, 1);
    border-radius: 8px;
    padding: 40px;
}

.noDataSection img {
    width: 254px;
    height: 254px;
    object-fit: scale-down;
}

@media screen and (min-width:1800px) {

    .white-button-red,
    .red-button,
    .subscribetxt {
        font-size: 14px;
    }
}


@media screen and (max-width: 424px) {
    .communityheaderimg {
        height: 32px;
    }
}

@media screen and (min-width: 600px) and (max-width: 767px) {

    .owl-carousel .owl-nav.disabled,
    .owl-carousel .owl-dots.disabled {
        display: inline-flex;
    }
}

@media screen and (max-width: 767px) {
    .owl-carousel .owl-dots {
        display: none;
    }

    .community-card {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .owl-carousel .owl-nav button.owl-prev {
        left: 0rem;
    }

    .owl-carousel .owl-nav button.owl-next {
        left: 1rem;
    }

    .owl-nav {
        transform: translate(-50%, 0%);
    }

}

@media screen and (min-width: 768px) and (max-width: 1024px) {

    .communityheaderimg {
        height: 32px;
    }
}

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

    .owl-carousel .owl-stage {
        column-gap: 0px;
    }
}

@media screen and (max-width:550px) {
    .author-details {
        /* width: 350px; */
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
}