*, *::after, *::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --color-primary: #0067a6;
    --color-primaryMedium: #4d95c1;
    --color-grey: #f2f2f2;
    --font-inter: 'Inter 18pt', sans-serif;
    --font-javanese: 'Javanese Text', serif;
}

body {
    font-family: var(--font-inter);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.5;
}

h1, h2, h3, h4 {
    font-family: var(--font-javanese);
}

img {
    width: 100%;
}

ul {
    list-style: none;
    padding-left: 0;
}

a {
    color:#000;
    text-decoration: none;
}

    a:hover{
        color:#000;
    }

    .icon {
        display: block;
        width: 35px;
    }

h2.headline {
    font-size: 2.7rem;
    color: var(--color-primary);
}

p {    
    font-weight: 300;
}

@media(max-width:1199px) {
    h2.headline {
        text-align: center;
    }
}

@media(max-width:991px) {
    h2.headline {
        font-size: 2.1rem;
    }

    p {
        font-size: 1rem;
    }
}

.mb-64 {
    margin-bottom: 4rem;
}

.btn-div {
    /*background-color: var(--color-primary);*/
    background-color: #fff;
    color: var(--color-primary);
    padding: 0.5rem 2rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    column-gap: 0.25rem;
    width: fit-content;
    margin-inline: auto;
    margin-top: 1rem;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

a.btn-div:hover{
    color:#fff;
}

.arrow {
    display: inline-block;
    width: 25px;
    transition: transform 0.3s ease-in-out;
    animation: move-arrow 0.4s infinite alternate;
}

.btn-div:hover {
/*    animation: move-arrow 0.4s infinite alternate;*/
    transform:scale(1.1);
}

@keyframes move-arrow {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(5px); /* Adjust the value to make it move further */
    }
}

.empty-div {
    height: 138px;
}
@media(max-width:991px){
    .empty-div {
        height: 208px;
    }   
}

@media(max-width:576px) {
    .empty-div {
        height: 157px;
    }
}

/*inner-banner*/

.innerBanner {
    width: 100%;
    height: 450px;
    position: relative;
}

    .innerBanner .bannerImg {
        width: 100%;
        height: 100%;
    }

        .innerBanner .bannerImg img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

    .innerBanner .banner-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        display:flex;
        align-items:center;
        flex-direction:column;
    }

        .innerBanner .banner-content h2.headline {
            color: #fff;
            font-family: var(--font-inter);
            text-align:center;
            white-space:nowrap;
        }

        .innerBanner .banner-content p {
            color: #fff;
            text-align: center;
            /*            font-weight:500;*/
        }

    .innerBanner .btn-div {
        margin: 0;
        margin-top:3rem;
    }

    .innerBanner a.btn-div:hover {
        color: #fff;
    }


        /*inner-banner*/
        @media (min-width: 1300px) {
            .container {
        max-width: 1600px;
    }
}

/***** header *****/
.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    z-index: 99;
}

header .top-bar_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header .top-bar .logo, .navbar-brand {
    width: 200px;
}

header .top-bar .right-menu {
    display: flex;
    align-items: center;
    column-gap: 2rem;
}

header .top-bar .social-icons {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
}

header .top-bar .contact-div {
    display: flex;
    align-items: center;
    column-gap: 1rem;
}

    header .top-bar .contact-div .contact1, header .top-bar .contact-div .contact2 {
        display: flex;
        align-items: center;
        column-gap: 0.5rem;
    }

        header .top-bar .contact-div .contact1 p, header .top-bar .contact-div .contact2 p {
            white-space: nowrap;
            display: block;
            margin-bottom: 0;
        }

/*navbar*/
header .navbar {
    background-color: var(--color-primary);
    color: #fff;
    padding-block: 0;
}

.navbar-nav {
    justify-content: center;
    column-gap: 1.3rem;
}

.navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
    color: #fff;
    white-space: nowrap;
    padding-block: 0.75rem;
}

.loanOfficers_Img {
    width: 50px;
}

.masterMenu_item, .masterMenu_item2 {
    position: relative;
}

    .masterMenu_item .navLink-div .icon, .masterMenu_item2 .submenu-item_div .icon {
        width: 20px;
    }

    .masterMenu_item .navLink-div {
        display: flex;
        align-items: center;
        column-gap: 0;
    }

    

    .submenu {
        position: absolute;
        top: 48px;
        left: 0;
        height: auto;
        width: auto;
        background-color: var(--color-primary);
        z-index: 99;
        display: none;
        padding-left:0;
        /*        overflow: hidden;*/
    }

        .submenu .submenu-item {
            display: block;
            color: #fff;
            padding: 0.75rem 1rem;
            white-space: nowrap;
            width: 100%;
            height:100%;
            background-color: transparent;
            margin-bottom:0.25rem;
            transition: 300ms ease;
            text-decoration:none;
            /*padding-left:0;*/
            cursor: pointer;
        }
            

            .submenu .submenu-item:hover {
                background-color: var(--color-primaryMedium);
            }

.masterMenu_item:hover .submenu {
    display: block;    
}

/*.masterMenu_item2*/

.masterMenu_item2 .submenu-item_div .submenu-item {
    display: flex;
    align-items: center;
    /*column-gap:0.25rem;*/
}

.masterMenu_item2 .submenu-item_div .icon {
    transform: rotate(-90deg);
}

.masterMenu_item2 .submenu2 {
    position: absolute;
    left: 100%;
    top: 0;
    width: auto;
    height: auto;
    padding-left:0;
    background-color: var(--color-primary);
}

    .masterMenu_item2 .submenu2 .submenu-item2 {
        display: block;
        color: #fff;
        padding: 0.75rem 1rem;
        white-space: nowrap;
        transition: 300ms ease;
        cursor: pointer;
        text-decoration:none;        
        display: none;
    }

        .masterMenu_item2 .submenu2 .submenu-item2:hover {
            background-color: var(--color-primaryMedium);
        }

.masterMenu_item2:hover .submenu2 .submenu-item2 {
    display: block;
}

/*.masterMenu_item2*/

.dropdown-menu {
    background-color: var(--color-primary) !important;
    border: 0;
}

.dropdown-item {
    color: #fff;
    padding-block: 0.75rem;
}
/*navbar*/
@media(max-width:1199px) {
    .navbar-nav {
        column-gap: 0.5rem;
    }
}

@media(max-width:991px) {

    header .top-bar_wrapper {
        flex-direction: column;
        row-gap: 1rem;
        margin-bottom: 1rem;
    }

    .navbar > .container {
        justify-content: center !important;
        padding-block: 0.5rem;
        column-gap: 1rem;
    }

    .navbar-light .navbar-toggler-icon {
        background-image: url('../images/svg/mobilemenu.svg');
    }

    .navbar-light .navbar-toggler {
        border-color: #fff;
        border-radius: 0.3rem;
    }

    .navbar-nav {
        row-gap: 1rem;
    }

    .nav-link {
        color: #fff;
        white-space: nowrap; 
        padding:0;
    }

    .nav-link .icon{
        width:25px;
    }
    .navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
        padding-left: 2rem;
        padding-right: 0.5rem;
    }

        .nav-link:focus, .nav-link:hover {
            color: #fff;
        }

    .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        width: 400px;
        height: 100%;
        background-color: var(--color-primary);
        /*background-color:#fff;*/
        /*padding:2rem;*/
        z-index: 99;
        transition: 300ms ease;
        transform: translateX(-100%);        
    }

    .collapse:not(.show) {
        display: block;
    }

    .collapse.show {
        display: block;
        transform: translateX(0);        
    }

    .masterMenu_item .navLink-div {
        justify-content: space-between;
    }

    .submenu {
        position: unset;
    }
        .submenu .submenu-item {
            background-color: var(--color-primaryMedium);
            padding: 0.75rem 1rem;
            margin-left: 2rem;
            width: calc(100% - 2rem);            
        }

    .masterMenu_item2 .submenu-item {
        background-color: var(--color-primaryMedium);
        /*width: fit-content !important;
        display: block !important;*/
    }
            .masterMenu_item:hover .submenu {
                display: none;
            }
    .masterMenu_item .navLink-div .icon, .masterMenu_item .submenu-item_div .icon {
        display: block;
        width: 100%;
        /*margin-right: 1rem;*/
        padding-block: 0.75rem;
    }

    .masterMenu_item .submenu-item_div .icon {
        margin-bottom: 0.25rem;
        background-color: var(--color-primaryMedium);
    }

        .masterMenu_item .navLink-div .icon img, .masterMenu_item .submenu-item_div .icon img {
            width: 20px;
            pointer-events: none;
        }
    .masterMenu_item2 .submenu-item_div .icon{
        transform:rotate(0deg);
    }
}

@media(max-width:576px) {
    header .top-bar .right-menu {
        display: none;
    }
}

/***** End of header *****/

/****** banner-section ******/
.carousel.slide {
    height: 650px;
}

.carousel-item, .carousel-img {
    height: 100%;
    transition:700ms ease;
}

    /*.carousel-item a.btn-div{
        font-weight:500;
    }
    .carousel-item a:hover {
        color: var(--color-primary);
    }*/

    .carousel-item:hover .carousel-img{
        transform:scale(1.1);
    }

    .carousel-img img {
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

.carousel-caption {
    bottom: 40%;
    transform: translateY(50%);
}

    .carousel-caption h2.headline {
        color: #fff;
        width: 60%;
        margin-inline: auto;
        font-size:3.5rem;
    }

    .carousel-caption p {
        width: 60%;
        margin-inline: auto;
    }

@media(max-width:1400px) {
    .carousel-caption h2.headline {
        width: 80%;
    }

    .carousel-caption p {
        width: 90%;
    }
}

@media(max-width:1024px) {
    .carousel-caption h2.headline {
        width: 90%;
    }

    .carousel-caption p {
        width: 100%;
    }
}

/****** End of banner-section ******/

/******About-section******/
.about .btn-div {
    border: 1px solid var(--color-primary);
    font-weight:500;
    margin-inline: unset;
    margin-top: 2rem;
}
.about-imgDiv{
    display:grid;
}
.imgDiv-flex{
    display:flex;
    flex-direction:column;
    row-gap:0.5rem;
}
    .imgDiv-flex .imgDiv {
        position: relative;
        overflow:hidden;
    }

    .imgDiv-flex img {
        display: block; 
        transition:500ms ease;
    }
.img-content h5, .img-content p {
    margin-bottom: 0.15rem;
    text-align: center;
    font-size: 0.9rem;
}
.img-content h5{
    font-size:1rem;
}
.imgDiv-flex .imgDiv .img-content {
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    padding-block: 0.5rem;
    background-color: var(--color-primary);
    color:#fff;
    z-index: 1;
    transition: 500ms ease;
}
.imgDiv-flex .imgDiv.img-sm .img-content{
    width:90%;
}
.imgDiv-flex .imgDiv:hover .img-content {
    bottom: 0;
}

.imgDiv-flex .imgDiv:hover img{
    transform:scale(1.1);
}
.imgDiv-flex .imgDiv.img-sm img {
    width: 85%;
}

    .about a.btn-div:hover {
        color: var(--color-primary);
    }

.meetTeam-btn{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    column-gap:0.5rem;    
}

    .meetTeam-btn a {
        font-weight: 600;
        color: var(--color-primary);
        transition: 500ms ease;
        border-bottom: 2px solid #fff;
    }

        .meetTeam-btn a:hover {            
            border-bottom: 2px solid var(--color-primary);
        }

    @media(max-width:1199px) {
        .about-img {
    width: 60%;
    margin-inline: auto;

    }
}

@media(max-width:991px) {
    .about .btn-div {
        margin-inline: auto;
    }
}

@media(max-width:767px) {
    .about-img {
        width: 90%;
        margin-inline: auto;
    }
}



/****** About-section ******/

/****** services ******/

.services .service-card {
    text-align: center;
    border: 1px solid var(--color-primary);
    padding: 1rem;
    height: 210px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .services .service-card .serviceIcon {
        background-color: var(--color-primary);
        width: 100px;
        height: 100px;
        border-radius: 50%;
        padding: 1.3rem;
        margin-bottom: 0.75rem;
        transition:500ms ease;
    }

        .services .service-card:hover .serviceIcon {
            background-color: var(--color-primaryMedium);
            box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
        }

    .services h2 {
        margin-bottom: 0;
    }

.services .service-card h4 {
    font-size: 1.3rem;
    font-family: var(--font-inter);
    margin-bottom: 0.25rem;
}
/****** services ******/

/****** experience ******/
.experience {
    background-color: var(--color-primaryMedium);
    color: #fff;
    text-align: center;
    padding: 5rem 2rem;
}

    .experience h2.headline {
        color: #fff;
    }

    .experience .btn-div {
        border: 1px solid #fff;
        background-color: transparent;
        color: #fff;
        margin-top:2rem;
    }

    .experience .experience-card {
        position: relative;
        transition: 300ms ease;
        overflow: hidden;
    }

        .experience .experience-card .card-content {
            text-align: left;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 95%;
            height: auto;
            background-color: var(--color-primary);
            border-radius: 0 100px 0 0;
            padding: 0.35rem;
            z-index: 1;
            transition: 300ms ease;
            overflow: hidden;
        }

            .experience .experience-card .flex-div {
                display: flex;
                align-items: center;
                column-gap: 0.5rem;
                transition: 300ms ease;
            }

            .experience .experience-card .card-content .card-icon {
                width: 30px;
            }
        .experience .experience-card .hiddenCard-div{
            justify-content:start;
        }

        .experience .experience-card .hiddenCard-div .card-icon {
            width: 45px;
            margin-bottom: 0.25rem;
        }

        .experience .experience-card .card-content .header {
            text-align: left;
            font-size: 0.9rem;
            font-weight: 300;
            width: 80%;
            line-height: 1.4;
            margin-bottom:0;
        }        

.hiddenCard-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    height: 95%;
    /*background-color:var(--color-grey);*/
    padding: 1rem;
    overflow: hidden;
    z-index:1;
}

.hiddenCard-div p {
    font-size: 0.9rem;
}

.experience .experience-card .hiddenCard-div {
    position: absolute;
    bottom: -100%;
    left: 50%;
    transform: translate(-50%);
    height: 100%;
    width: 100%;
    background-color: var(--color-primary);
    color: #fff;
    text-align: left;
    transition: 400ms ease;
    transform-origin: bottom;
    overflow:auto;
    z-index: 99;
}

.about-page.experience .experience-card .hiddenCard-div{
    background-color:var(--color-primary);
    color:#fff;
    flex-direction:column;
}

.experience .experience-card:hover .card-content {
    opacity: 0;
}

.experience .experience-card:hover .hiddenCard-div {
    bottom: 0%;
    padding: 1rem;
}

    .experience .experience-card:hover .hiddenCard-div .header {
        font-size: 0.95rem;
        font-weight: 600;
    }

@media(max-width:1199px) {

    .experience .experience-card:hover .hiddenCard-div p {
        text-align: left;
    }
}
/****** experience ******/
/****** review ******/
.review {
    position: relative;
    height: 700px;
    overflow: hidden;
}

    .review .reviewBg-img {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -1;
        transition: transform 900ms ease;
        will-change: transform;
    }

        .review .reviewBg-img img {
            height: 100%;
            object-fit: cover;
            object-position: center;
            transform-origin: center;
            transition: transform 900ms ease;
            will-change: transform;
        }
    .review.active .reviewBg-img img {
        transform: scale(1.5);
    }


    .review .container {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
    }

.reviewcontent-container {
    width: 50%;
    color: #fff;
}

    .reviewcontent-container .headline {
        color: #fff;
    }

.review-card {
    background-color: #fff;
    color: #000;
    padding: 3rem;
    height: 300px;
}

    .review-card p {
        height: 65%;
    }

.clientName {
    font-family: var(--font-javanese);
    font-size: 1.5rem;
    color: var(--color-primary);
}

.btn-div.review-btn {
    background-color: var(--color-primary);
    color: #fff;
}

@media(max-width:1199px) {
    .reviewcontent-container {
        width: 100%;
    }
}

@media(max-width:576px) {
    .review-card {
        padding: 1.2rem;
    }
}
/****** review ******/

/****** contact ******/
/*.contact input{
    background-color:var(--color-grey);    
}*/


section.contact {
    background-color: #efefef;
    margin-bottom: 0;
    padding-block: 5rem;
}

.home-page section.contact {
    background-color: #fff;
}
.contact sup {
    color: red;
    font-size: 1rem;
}

.form-label {
    margin-bottom: 0.25rem;
}

.contact .btn-div {
    background-color: var(--color-primary);
    color: #fff;
    border: 0;
    margin-inline: unset;
    margin-top: 1rem;
}

.contact-img {
    height: 650px;
    overflow: hidden;
    transition:500ms ease;
}
    .contact-img:hover {
        transform: translateY(-11px);
        box-shadow: 11px 11px 2px rgba(0, 0, 0, 0.2);
    }

    .contact-img img {
        height: 100%;
        object-fit: cover;
        object-position: bottom;
    }

@media (max-width:991px) {
    .contact-img {
        height: 500px;
    }

    .contact-row {
        flex-direction: column-reverse;
    }
}

@media (max-width:576px) {
    .contact-img {
        height: 400px;
    }
}
/****** contact ******/

/****** Slick-Slider ******/
.slick-track {
    display: flex !important;
    align-items: stretch;
    column-gap: 1rem;
}

.slick-slide {
    height: auto !important;
}

.slick-slider .slide {
    display: flex;
    flex: 1 0 auto;
    height: 100%;
}

.slider-div .slick-prev, .slider-div .slick-next {
    width: 50px;
    height: 50px;
    background: var(--color-grey);
    top: -2.5rem;
    padding: 0.6rem;
}

.slider-div .slick-prev {
    left: unset;
    right: 3.7rem;
}

.slider-div .slick-next {
    right: 0;
}

    .slider-div .slick-prev:before, .slider-div .slick-next:before {
        content: '';
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        display: block;
        height: 100%;
    }

    .slider-div .slick-prev:hover, .slider-div .slick-prev:focus, .slider-div .slick-next:hover, .slider-div .slick-next:focus {
        background: var(--color-grey);
    }

.slider-div .slick-prev:before {
    background-image: url('../images/svg/left-arrow_blue.svg');
}

.slider-div .slick-next:before {
    background-image: url(../images/svg/right-arrow_blue.svg);
}

.slider-div .slick-dots {
    bottom: -35px;
}

    .slider-div .slick-dots li button {
        width: 10px;
        height: 10px;
        border: 1px solid #fff;
        border-radius: 50%;
    }

    .slider-div .slick-dots li.slick-active button {
        background: var(--color-grey);
    }

/****** Slick-Slider ******/


/****** Rate-Us_Page ******/
.testimonials h2.headline{
    text-align:center;
    margin-bottom:1rem;
}
.testimonials .review-card {
    border: 1px solid #ccc;
    padding: 2rem;
}

    .testimonials .review-card p {
        height: 75%;
    }
/****** Rate-Us_Page ******/

/****** refer-friend ******/
.refer-friend form{
    background-color:#fff;
    margin-top:-5rem;
    padding:2rem;
    border-radius:0.5rem;
    position:relative;
    z-index:2;
}
.refer-friend h4 {
    color: var(--color-primary);
    text-align: center;
    font-size: 1.5rem;
    font-family: 'Inter 18pt';
}
.refer-friend label sup{
    color:red;
    font-size:0.9rem;
}
.refer-friend .btn-div {
    border: 0;
    background-color: var(--color-primary);
    color: #fff;
    margin-top: 1rem;
}
/****** refer-friend ******/


/****** Accordion Css ******/
/*.accordion{
    padding-bottom:70px;
}*/
.accordion-title {
    color: var(--color-primary);
}

h4.accordion-header button {
    font-size: 1.2rem;
    font-family: 'Inter 18pt';
    font-weight: 600;
    box-shadow: none;
}

.accordion-button, .accordion-button:not(.collapsed) {
    color: #000;
    background-color: #fff;
    box-shadow: none;
}
    .accordion-button .icon {
        width: 20px;
        height: 20px;
        position:relative;
    }

        .accordion-button .icon .plus-icon {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
        }
        .accordion-button .icon .minus-icon {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
        }
    .accordion-button.show .icon .plus-icon {
        display: none;
    }
    .accordion-button.show .icon .minus-icon {
        display: block;
    }

        .accordion-body {
            padding-block: 0;
            padding: 1rem 2rem;
        }    
    .accordion-body ul {
        padding-left: 2rem;
    }

    .accordion-button .icon {
        width: 25px;
/*        margin-right: 0.25rem;*/
    }

.accordion-body p strong{
    font-weight:600;
}

.accordion-item {
    border: 0;
    border-bottom: 1px solid #ccc;
}

    .accordion-item:last-child{
        border:0;
    }

    .accordion-button:focus {
        border-color: #fff;
        box-shadow: none;
    }

.accordion ul, .accordion ol {
    list-style: disc;
    padding-left: 2rem;
    margin-bottom: 1rem;
}
.accordion ol {
    list-style: circle;
}
    .accordion ul li, .accordion ol li {
        padding-block: 0.25rem;
    }
    @media(max-width:991px) {
        .accordion .collapse:not(.show) {
        display: none;
    }

    .accordion .collapse.show {
        display: block;
        transform: translateX(0);
    }
}
/*.form-control{
    height:48px;
}*/
/****** Accordion Css ******/
section:not(.mb-64) {
    margin-bottom: 4rem;
}

.bracket {
    font-family: var(--font-inter);
    font-weight:300;
    
}

.styled-char {
    font-family: var(--font-inter); /* Or your preferred font */
    font-weight:300;
    /*color: #d12;*/ /* Optional */
}

.advantage-disadvantage .card{
    height:100%;
}

.commercialDivision-innerPages .btn-div, .mortgage-innerPages .btn-div {
    margin-top: 3rem;
}

/***** customscroll *****/

.custom-scrollbar-js,
.custom-scrollbar-css {
    height: 100%;
}

.custom-scrollbar-css {
    /* max-height:500px;*/
    height: inherit;
}
/* Custom Scrollbar using CSS */
.custom-scrollbar-css {
    overflow-y: scroll;
}

    /* scrollbar width */
    .custom-scrollbar-css::-webkit-scrollbar {
        width: 7px;
        height: auto;
    }

    /* scrollbar track */
    .custom-scrollbar-css::-webkit-scrollbar-track {
        background: #eee;
        background:transparent;
        border-radius: 1rem;
    }

    .custom-scrollbar-css::-webkit-scrollbar-thumb:horizontal {
        border-radius: 1rem;
        background-color: #00d2ff;
        background-image: linear-gradient(to left, #c4c4c4 0%, #6c757d 50%);
        background-image: linear-gradient(to left, #c4c4c4 0%, var(--color-primaryMedium) 50%);
        mix-blend-mode: multiply;
    }

    /* scrollbar handle */
    .custom-scrollbar-css::-webkit-scrollbar-thumb {
        border-radius: 1rem;
        background-color: #00d2ff;
        background-image: linear-gradient(to top, #c4c4c4 0%, #6c757d 50%);
        background-image: linear-gradient(to top, #c4c4c4 0%, var(--color-primaryMedium) 50%);
        mix-blend-mode: multiply;
    }

/***** customscroll *****/