:root{
    --bck: #f16823;
   --light-bck: #f16823;
   /* --Sup-light-bck: #55ff00; */
   /* --light-background: red; */
   --greys: #e3e3e3;
   --grays: #fefeff;
   --shadow-large: 0px 4px 40px #33333359;
   --shadow-small: 0px 4px 6px #33333359;
   --dark-bakground: #013f09;
   --reds: red;
   --light-background: #f16823;
   --light-background2: aquamarine;
   --shadow-large: 0px 4px 40px #33333359;
   --shadow-small: 0px 4px 6px #33333359;
}


.BSlider{
    width: 100%;
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ddd;
    background-size: cover;
    background-position: center;
    color: #fff;
    position: relative;
}

.BSlider::before{
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(rgba(128, 128, 128, 0.014),rgba(0, 0, 0, 0.966));
}

.BS-left,.BS-right{
    position: relative;
}

.BS-left{
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.BS-left h3{
    text-transform: capitalize;
    font-size: 1.6rem;
    backdrop-filter: blur(10px);
    /* padding: 0.5rem;
    box-shadow: 0px 10px 20px #333; */
}

.BS-left h4{
    text-transform: capitalize;
    font-size: 1.1rem;
}

/* .BS-right */
.BS-right{
    width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: left;
    /* align-items: flex-end; */
}
.latestB-highligt{
    backdrop-filter: blur(12px);
    padding: 0.2rem 1.5rem;
    box-shadow: 0px 0px 12px #333;
    border-radius: 20px;
    background: rgba(221, 221, 221, 0.123);
}

.LB-Total-highligt{
    width: 100px;
    padding: 0.2rem 1rem;
    margin-block: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 0px 12px #333;
    border-radius: 20px;
    background: rgba(221, 221, 221, 0.123);
}

.LB-showing-highligt{
    padding: 0.2rem 1rem;
    margin-block: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 0px 12px #333;
    border-radius: 20px;
    background: rgba(221, 221, 221, 0.123);
}

/* .LB-Ac-holder{
    
} */

.LB-active-highligt{
    width: 80px;
    padding: 0.2rem 1rem;
    float: right;
    margin-block: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 0px 12px #333;
    border-radius: 20px;
    background: rgba(221, 221, 221, 0.123);
}

/* trending */
.blog{
    width: 100%;
    display: flex;
    gap: 20px;
}


.trending{
    width: 100%;
    padding-top: 2rem;
    box-shadow: var(--shadow-small);
    background-position: center;
    background-size: cover;
    position: relative;
    border-radius: 12px;
    overflow: clip;
    color: #fff;
}

.trending::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgb(0, 0, 0), transparent );
}

.trending .T-top, .trending .T-mid{
    padding: 2px 24px;
    position: relative;
}

.trending .T-top .T-banner{
    width: 100px;
    backdrop-filter: blur(16px);
    background: #d3d2d210;
    color: #fff;
    font-weight: 500;
    padding-bottom: 5px;
    text-align: center;
    border-radius: 20px;
}

.T-cat{
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block: 5px;
    gap: 5px;
    backdrop-filter: blur(16px);
    background: #d3d2d210;
    color: #fff;
    padding-bottom: 5px;
    text-align: center;
    border-radius: 20px;
}

.T-mid a{
    color: #fff;
    text-decoration: none;
}

.trending .T-foot{
    width: 100%;
    padding: 0px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: right;
}

.trending .T-foot a{
    padding: 12px;
    background: var(--light-background);
    color: #fff;
}

/* .Aside-right */
#Aside-right{
    max-width: 400px;
    height: 80vh;
    box-shadow: var(--shadow-small);
}