/* ==========================================================================
   Smart Hero Banner
   ========================================================================== */

.shb-slider{
    position:relative;
    overflow:hidden;
    border-radius:10px;
    margin:20px 0;
    background:#f7f8fc;
    min-height:520px;
    box-shadow:
        0 10px 40px rgba(0,0,0,.06);
}

.shb-track{
    position:relative;
    min-height:520px;
}

.shb-slide{

    position:absolute;

    inset:0;

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    transition:

    opacity .55s ease,

    transform .55s ease;

    transform:translateY(10px);

}
.shb-bg{

    position:absolute;

    inset:-35%;

    background-repeat:no-repeat;

    background-position:center;

    background-size:cover;

    filter:

    blur(2px)

    saturate(22%)

    brightness(120%);
    opacity:.40;

    transform:scale(2.2);

    z-index:0;

    pointer-events:none;

}
.shb-right img{

    will-change:transform,opacity;

}
.shb-slide.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    z-index:2;
}

.shb-content{

    position:relative;

    z-index:5;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

    padding:70px;

    min-height:520px;

}
.shb-bg::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        rgba(247,248,252,.92),

        rgba(247,248,252,.45),

        rgba(247,248,252,.92)

    );

}

/* ==========================================================================
   Left
   ========================================================================== */

.shb-left{
    width:50%;
    max-width:550px;
}

.shb-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 14px;
    border-radius:30px;
    background:#e8efff;
    color:#2563eb;
    font-size:12px;
    font-weight:700;
    letter-spacing:.5px;
    margin-bottom:20px;
}

.shb-title{
    margin:0 0 10px;
    font-size:24px;
    line-height:1.1;
    font-weight:700;
    color:#0f172a;
}

.shb-desc{
    font-size:16px;
    line-height:1.8;
    color:#64748b;
    margin:0 0 14px;
}

.shb-price{
    font-size:24px;
    font-weight:800;
    color:#111827;
    margin-bottom:12px;
}

.shb-price del{
    opacity:.5;
    margin-right:10px;
}

.shb-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 28px;
    border-radius:10px;
    background:#ff9800;
    color:#fff !important;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.shb-btn:hover{
    transform:translateY(-2px);
    background:#111;
}

/* ==========================================================================
   Right
   ========================================================================== */

.shb-right{

    position:relative;

    width:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}
.shb-glow{

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    filter:blur(55px);

    transform:scale(1.4);

    z-index:1;

}
.shb-main-img{

    position:relative;

    z-index:5;

    max-width:92%;

    max-height:430px;

    object-fit:contain;

    animation:shbFloat 3s ease-in-out infinite;
    border-radius: 20px !important;

}




/* ==========================================================================
   Navigation
   ========================================================================== */

.shb-nav{
    position:absolute;
    right:30px;
    bottom:25px;
    z-index:20;
    display:flex;
    align-items:center;
    gap:12px;
}

.shb-prev,
.shb-next{
    width:42px;
    height:42px;
    border:none;
    cursor:pointer;
    border-radius:50%;
    background:#fff;
    color:#111827;
    font-size:20px;
    box-shadow:
        0 5px 15px rgba(0,0,0,.08);
    transition:.3s;
}

.shb-prev:hover,
.shb-next:hover{
    transform:translateY(-2px);
}

.shb-counter{
    min-width:60px;
    text-align:center;
    font-size:14px;
    font-weight:700;
    color:#475569;
}

/* ==========================================================================
   Decorative Waves
   ========================================================================== */

.shb-slider::after{
    content:"";
    position:absolute;
    left:-10%;
    right:-10%;
    bottom:-180px;
    height:350px;
    border-radius:50%;
    border:1px solid rgba(37,99,235,.08);
}

.shb-slider::before{
    content:"";
    position:absolute;
    left:-20%;
    right:-20%;
    bottom:-220px;
    height:420px;
    border-radius:50%;
    border:1px solid rgba(37,99,235,.05);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media(max-width:991px){

    .shb-content{
        text-align:center;
        padding:10px 10px;
    }

    .shb-left,
    .shb-right{
        width:100%;
        max-width:100%;
    }

    .shb-title{
        font-size:18px;
    }

    .shb-price{
        font-size:18px;
    }

    .shb-right img{
        max-height:320px;
    }

}

@media(max-width:576px){
    .shb-content{
        flex-direction:column-reverse;
        text-align:center;
        gap:5px;

    }
    .shb-slider{
        min-height:auto;
    }

    .shb-content{
        padding:30px 20px;
    }

    .shb-title{
        font-size:16px;
    }

    .shb-desc{
        font-size:14px;
        line-height:1.7;
    }

    .shb-price{
        font-size:16px;
    }

    .shb-btn{
        width:100%;
    }

    .shb-nav{
        position:static;
        justify-content:center;
        padding:20px;
    }

}





/* ==========================================================
   Smart Hero Categories
========================================================== */

.shc-wrap{

    width:100%;

    background:#fff;

    border-radius:10px;

    overflow:hidden;

    box-shadow:

    0 8px 25px rgba(0,0,0,.08);

}

/*==========================================================*/

.shc-header{

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px 18px;

    background:#d6d7d9;

    color:#111;

    font-size:16px;

    font-weight:700;

}

/*==========================================================*/

.shc-icon{

    font-size:20px;

    line-height:1;

}

/*==========================================================*/

.shc-list{

    margin:0;

    padding:0;

    list-style:none;

}

/*==========================================================*/

.shc-list li{

    margin:0;

    padding:0;

}

/*==========================================================*/

.shc-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:12px 18px;

    text-decoration:none;

    color:#222;

    transition:.25s;

    border-bottom:

    1px solid #f1f1f1;

}

/*==========================================================*/

.shc-item:hover{

    background:#d6d7d9;
    padding-left:24px;

}

/*==========================================================*/

.shc-item img{

    width:34px;

    height:34px;

    min-width:34px;

    border-radius:8px;

    object-fit:cover;

    background:#fafafa;

    border:1px solid #eee;

    transition:.3s;

}

/*==========================================================*/

.shc-item:hover img{

    transform:scale(1.08);

}

/*==========================================================*/

.shc-item span{

    font-size:15px;

    font-weight:600;

    line-height:1.3;

}

/*==========================================================*/

.shc-more{

    background:#fafafa;

    font-weight:700;

}

/*==========================================================*/

.shc-more:hover{

    background:#111;

    color:#fff;

}

/*==========================================================*/

.shc-more-icon{

    width:34px;

    height:34px;

    min-width:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:8px;

    background:#eee;

    font-size:18px;

    transition:.3s;

}

/*==========================================================*/

.shc-more:hover .shc-more-icon{

    background:#fff;

    color:#16a34a;

}

/*==========================================================*/

@media(max-width:991px){

    .shc-item{

        padding:11px 15px;

    }

}

/*==========================================================*/

@media(max-width:768px){

    .shc-header{

        font-size:16px;

        padding:14px;

    }

    .shc-item{

        gap:10px;

    }

    .shc-item img{

        width:30px;

        height:30px;

        min-width:30px;

    }

    .shc-item span{

        font-size:14px;

    }

}

/*==========================================================*/

@media(max-width:576px){

    .shc-wrap{

        border-radius:10px;

    }

}