#live_header{
    width: 100%; 
    height: 50vh;
    background: var(--dark-grey);
    overflow: hidden;
}

#live_header .bg_image{
    position: absolute; 
    top: 0; left: 0; 
    width: 100%;
    height: 100%; 
    background-size: cover!important; 
    background-position: center!important;
}

#live_header .bg_image::after, #live_header .bg_carousel::after{
    content: "";
    position: absolute;
    width: 100%; height: 100%; 
    top: 0; left: 0;
    background: linear-gradient(90deg,rgba(37, 37, 37, 0.61) 15%, rgba(37, 37, 37, 0) 57%);

}

#live_header .bg_carousel{
     position: absolute; 
    top: 0; left: 0; 
    width: 100%;
    height: 100%; 
    background: var(--text-color);
}

#live_header .bg_carousel .banner_item{
    position: absolute; 
    top: 0; left: 0; 
    width: 100%;
    height: 100%; 
    background-size: cover!important; 
    background-position: center!important; 
    opacity: 0;
    transition-duration: 0.5s;
}

#live_header .bg_carousel .banner_item.active{
    opacity: 1;
}

.live_body{
    display: block; 
    width: calc(100% - 20px);
    margin: 10px 10px;
}

.live_body.head_body{
    
    display: flex; 
    height: 100%; 
    flex-direction: column;
    justify-content: center;
    padding: 1em 0;
    position: relative;
}

#live_header .copyright{
    position: absolute; 
    bottom: 10px; 
    left: 10px; 
    color: rgba(255,255,255,0.5); 
}

.live_body.head_body .text_wrapper{
    max-width: 480px; 
}

.live_body .live_grid{
    display: grid; 
    grid-gap: 20px;
    grid-template-columns: 1fr ;
}

.live_body .live_grid h3{padding: 0; margin: 0; }

body .live_item{
    background: white;
    border-radius: 10px; 
    overflow: hidden; 
    padding-bottom: 30px; 
    position: relative;
    transition-duration: 0.5s;
    opacity: 0; 
    transform: translateY(100px);
}

body.show .live_item{
    opacity: 1; 
    transform: translateY(0px);
}

.dark .live_item{
    background: var(--dark-grey);
}


#live_body_grid{
    display: grid; 
    gap: 10px;
}

.slick-dots li {
    margin: 0 5px!important; /* adjust to desired spacing, e.g., 5px for 10px total between dots */
    width: 0!important;
}



@media(min-width: 740px){

    

    #live_header{
        height: initial;
        min-height: calc(20vh);
        position: relative;
    }

    .live_body .live_grid{
       grid-template-columns: 1fr 1fr ;
    }

 .live_body .live_item:first-child{
        grid-column: 1 / span 2; /* take first two columns */
    grid-row: 1 / span 2;  
    }
   

}


@media(min-width: 1024px){
    .live_body{
        width: calc(100% - 40px);
        margin: 20px auto;
    }

    .live_body .live_grid{
       grid-template-columns: 1fr 1fr 1fr ;
    }

     #live_body_grid{
        width: 100%; 
        grid-template-columns: 1fr;
        gap: 20px; 
        padding-bottom: 100px; 
    }

}

@media(min-width: 1200px){
    .live_body{width: calc(100% - 260px);}

   

    .live_body .live_item:first-child h3.title{
        /* font-size: 4vh; */
    }

    .live_body.head_body{min-height: calc(20vh);}
}

@media(min-width: 1450px){
    .live_body .live_grid{
       grid-template-columns: 1fr 1fr 1fr 1fr ;
    }
}

@media(min-width: 1900px){
    .live_body .live_grid{
       grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

.live_logo{
    width: 150px; 
    height: 50px; 
    background: url(../images/brand/live-logo-light.svg) no-repeat;
    background-size: contain; 
    background-position: center left;
    display: block; 
    position: relative;
    margin-bottom: 5px;
}



.live_item .live_item_grid{
    margin-bottom: 10px;
}

.price_item{
    padding: 5px 0; padding: 5px 0; 
    border-top: 1px solid var(--text-color);
    border-bottom: 1px solid var(--text-color);
}

.dark .price_item{
    border-top: 1px solid var(--light-grey);
    border-bottom: 1px solid var(--light-grey);
}

/* .live_item .live_item_grid > div:nth-child(2){text-align: right;} */

@media(min-width: 840px){
    /* .price_item h3{font-size: 2em;} */
}

.live_item .img_wrapper{
    background: var(--dark-grey2);
    width: 100%; 
    padding-bottom: 60%;
    background-size: cover!important; 
    background-position: center!important;
}

.live_item .text_wrapper{
    padding: 0 25px 10px 25px; 

}

.live_item .live_item_nav{
    position: absolute; 
    bottom: 25px; left: 25px; 
}

.author_block{
    width: calc(100% - 70px); 
    margin: 5px auto 0 auto;
    padding: 10px 25px;
    background: var(--light-grey);
    border-radius: 10px;
    margin-bottom: 10px;
}

.live_item .excerpt{
    padding: 10px 0;
}

@media(min-width: 1200px){
   .live_item .excerpt p{}
}

.dark .author_block{
    background: var(--dark-grey);
}

.author_block .user_grid{
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
}

.author_block .user_grid p{padding: 0; margin: 0; }

.author_block .user_grid .avatar{
    width: 30px; height: 30px; border-radius: 50%; 
}

.avatar{
        background: url(../images/backgrounds/icon-user-profile.svg) no-repeat;
        background-size: cover !important;
        background-position: center !important;
}

.profile_head_grid{
    grid-template-columns: 60px 1fr!important;
    margin-bottom: 2em;
    align-items: center;
}

.avatar_image{
    width: 50px!important; height: 50px!important; 
    background-size: cover!important; 
    background-position: center!important; 
    border-radius: 50%;
}

.carousel_wrapper {
    width: 100%;
    background: var(--dark-grey);
}

.carousel_wrapper .carousel {
    width: 100%;
    position: relative;
    display: block;
    overflow: hidden;
}

.carousel_wrapper .carousel .carousel_item {
    width: 100%;
    min-height: 200px; /* fallback */
    height: auto;      /* let content inside define it */
    background-size: cover!important; 
    background-position: center!important; 
}


.carousel_wrapper .carousel .carousel_item p.copyright{
    position: absolute;
    bottom: 10px; right: 10px; 
    font-size: 10px; 
    color: rgba(125,125,125,0.6);
}

/* --- Slick dots inside the wrapper --- */
.carousel_wrapper .slick-dots {
    position: absolute;
    bottom: 10px; /* adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    width: auto;
    display: flex !important;
    gap: 6px;
}

.carousel_wrapper .slick-dots li button:before {
    font-size: 10px;
    color: white; /* change to fit your theme */
    opacity: 0.6;
}

.carousel_wrapper .slick-dots li.slick-active button:before {
    opacity: 1;
    color: #fff;
}

body .profile_wrapper{
    
    background-size: 100vh!important;
    background-position: right 33% top!important;
    border-radius: 10px; 
    overflow: hidden; 
    height: 100%;
    transition-duration: 0.5s;
    transform: translateY(100px);
    opacity: 0;
    
}

body.show .profile_wrapper{
    transform: translateY(0px);
    opacity: 1;
}

.profile_wrapper .profile_content{
    display: block; 
    padding: 20px 40px 20px 40px;
}

.profile_wrapper .profile_content .avatar{
    width: 175px; height: 175px; border-radius: 50%;
    background-size: cover!important; 
    background-position: center!important; 
}

.transparent_box{
    padding: 15px;
    transform: translateX(-15px);
    background: rgba(255,255,255,0.7);
    max-width: 650px;
}

.dark .profile_wrapper h1, .dark .profile_wrapper p{color: var(--text-color);}

.profile_wrapper h1{padding-bottom: 0; margin: 0; }

.profile_grid{
    display: grid; 
    grid-gap: 1em;
    width: 100%; 
    grid-template-columns: 175px 1fr;
}

body.dark #mainwrapper{background: var(--light-grey);}