#mega-sub-menu-3808 {
    position: relative;
}

#mega-sub-menu-3808::before {
    content: "";
    display: block !important;
    position: absolute !important;
    inset: 0;
    background: url("../images/home-menu-img-1.png") !important;
    background-size: 100% 100% !important;
}
.dt-megamenu-wrapper {
    max-height: 75vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 5px;
}
.dt-megamenu-wrapper::-webkit-scrollbar {
    width: 6px;
}
.dt-megamenu-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.dt-megamenu-wrapper::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}
.dt-megamenu-wrapper::-webkit-scrollbar-thumb:hover {
    background: #bbb;
}
    .dt-megamenu-wrapper .dt-mega-row {
        display: flex;
        flex-wrap: wrap;
    }
    .dt-megamenu-wrapper .dt-mega-col {
        flex: 0 0 calc(100% / var(--dmm-cols, 5) - 12px);
    }
    .dt-megamenu-wrapper .single-demo .demo-img img {
        width: 100%;
        height: 150px !important;
        object-fit: cover;
        border-radius: 6px;
        border: 2px solid transparent;
        transition: border-color .2s;
    }
    .dt-mega-no-img {
        width: 100%;
        height: 90px;
        background: #f0f4f8;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 700;
        color: #20c0f3;
        text-transform: uppercase;
    }
    .dt-mega-.single-demo .demo-info a.inner-demo-img {
        font-size: 16px;
        font-weight: 500;
        color: var(--gray-900) !important;
    }
    @media (max-width: 991.98px) {
        .dt-mega-col .single-demo .demo-info .inner-demo-img {
            padding: 0 !important;
            font-weight: 400 !important;
            color: var(--gray-600) !important;
        }
    }
    .dt-mega-col .single-demo.active .inner-demo-img {
        text-decoration: underline !important;
    }

    .dt-mega-col .single-demo.active .demo-info .inner-demo-img {
        color: #1C5B91;
    }

    .dt-mega-col .single-demo .demo-info .inner-demo-img {
        color: var(--gray-900);
        font-weight: 600 !important;
        font-size: 16px !important;
        border-top: 0 !important;
    }
    .dt-mega-col .single-demo .demo-img .inner-demo-img {
    border-radius: 10px;
    height:150px !important;
    }
    .dt-mega-col .single-demo .demo-img .inner-demo-img img {
    border-radius: 10px;
    height:150px !important;
    }
    .dt-mega-col .single-demo.active .demo-info .inner-demo-img {
    color: var(--primary) !important;
    }

    .single-demo.active .demo-img {
    box-shadow: 0px 4.8px 24.4px -12px rgba(19, 16, 34, 0.1), 0px 4px 13px -2px rgba(19, 16, 34, 0.06);
    }

    .single-demo:hover .demo-info {
    opacity: 1;
    bottom: -30px;
    }

    .demo-info {
    /* position: absolute;
    bottom: -30px; */
    width: 100%;
    margin: 0 auto;
    text-align: center;
    z-index: 1;
    /* opacity: 0; */
    transition: 0.4s;
    margin-top: 10px;
    }

    @media (min-width: 992px) {
    .header .header-nav .main-nav li .submenu a.inner-demo-img:hover {
        padding-left: 0 !important;
        color: var(--primary) !important;
    }
    }
    @media (min-width: 992px) {
    .header .header-nav .main-nav > li.megamenu {
        position: unset;
    }
    }

.single-demo {
  margin-top: 20px !important;
  padding: 20px !important;
  margin-top: 20px !important;
  transition: 0.4s !important;
  border: 1px solid #EBECED !important;
  border-radius: 10px !important;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.08) !important;
  margin-bottom: 20px !important;
}
    .dt-megamenu-wrapper .demo-info {
        text-align: center;
        margin-top: 6px;
        font-size: 12px;
        font-weight: 500;
    }
.single-demo:hover {
    transform: translateY(-20px);
}