/*=========================================================
    HOMEPAGE SIDEBAR
=========================================================*/

.homepage-sidebar{
    display: flex;

    flex-direction: column;

    gap: 25px;
}


/*=========================================================
    SIDEBAR WIDGET
=========================================================*/

.homepage-sidebar .sidebar-widget{
    position: relative;

    overflow: hidden;

    padding: 24px;

    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.08);

    transition: all 0.35s ease;
}


/*=========================================================
    HOVER EFFECT
=========================================================*/

.homepage-sidebar .sidebar-widget:hover{
    transform: translateY(-5px);

    box-shadow:
        0 18px 45px rgba(0,0,0,0.14);
}


/*=========================================================
    WIDGET TITLE
=========================================================*/

.homepage-sidebar .widget-title{
    position: relative;

    margin-bottom: 22px;

    padding-bottom: 12px;

    color: #0f172a;

    font-size: 22px;
    font-weight: 700;
}


.homepage-sidebar .widget-title::after{
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 60px;
    height: 4px;

    border-radius: 50px;

    background:
        linear-gradient(
            to right,
            #2563eb,
            #38bdf8
        );
}


/*=========================================================
    LIST STYLE
=========================================================*/

.homepage-sidebar ul{
    margin: 0;
    padding: 0;

    list-style: none;
}


.homepage-sidebar ul li{
    padding: 10px 0;

    border-bottom:
        1px solid #e2e8f0;
}


.homepage-sidebar ul li:last-child{
    border-bottom: none;
}


/*=========================================================
    LINK STYLE
=========================================================*/

.homepage-sidebar ul li a{
    color: #334155;

    font-size: 15px;

    transition: all 0.3s ease;
}


.homepage-sidebar ul li a:hover{
    color: #2563eb;

    padding-left: 5px;
}


/*=========================================================
    TABLET DEVICE
=========================================================*/

@media (max-width: 991px){

    .homepage-sidebar{
        margin-top: 30px;
    }

}


/*=========================================================
    MOBILE DEVICE
=========================================================*/

@media (max-width: 767px){

    .homepage-sidebar{
        gap: 20px;
    }

    .homepage-sidebar .sidebar-widget{
        padding: 20px;

        border-radius: 18px;
    }

    .homepage-sidebar .widget-title{
        font-size: 20px;
    }

}


/*=========================================================
    SMALL MOBILE DEVICE
=========================================================*/

@media (max-width: 575px){

    .homepage-sidebar .sidebar-widget{
        padding: 18px;

        border-radius: 16px;
    }

    .homepage-sidebar .widget-title{
        font-size: 18px;
    }

}