.elementor-1156 .elementor-element.elementor-element-f70deba{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1156 .elementor-element.elementor-element-f70deba:not(.elementor-motion-effects-element-type-background), .elementor-1156 .elementor-element.elementor-element-f70deba > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://shahjalaldc.com/wp-content/uploads/2023/10/banner_bg-6.svg");background-position:center center;background-repeat:repeat;background-size:100% auto;}.elementor-1156 .elementor-element.elementor-element-f70deba.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1156 .elementor-element.elementor-element-a8694ba{--display:flex;}.elementor-widget-gallery .elementor-gallery-item__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-gallery .elementor-gallery-item__description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-gallery{--galleries-title-color-normal:var( --e-global-color-primary );--galleries-title-color-hover:var( --e-global-color-secondary );--galleries-pointer-bg-color-hover:var( --e-global-color-accent );--gallery-title-color-active:var( --e-global-color-secondary );--galleries-pointer-bg-color-active:var( --e-global-color-accent );}.elementor-widget-gallery .elementor-gallery-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-1156 .elementor-element.elementor-element-6715e09 .e-gallery-item:hover .elementor-gallery-item__overlay, .elementor-1156 .elementor-element.elementor-element-6715e09 .e-gallery-item:focus .elementor-gallery-item__overlay{background-color:rgba(0,0,0,0.5);}.elementor-1156 .elementor-element.elementor-element-6715e09{--image-transition-duration:800ms;--overlay-transition-duration:800ms;--content-text-align:center;--content-padding:20px;--content-transition-duration:800ms;--content-transition-delay:800ms;}@media(min-width:768px){.elementor-1156 .elementor-element.elementor-element-f70deba{--width:100.321%;}}/* Start custom CSS for shortcode, class: .elementor-element-d87ed41 *//* =========================================
   ULTIMATE FINAL PATHOLOGY TABLE UI
   MOBILE + PAGINATION PERFECT
========================================= */

/* =========================
   MAIN CONTAINER
========================= */

.elementor-widget-container{

    position: relative;

    padding: 35px 18px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.16),
            rgba(255,255,255,0.08)
        );

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(255,255,255,0.22);

    box-shadow:
        0 8px 32px rgba(31,38,135,0.10);

    overflow: hidden;
}

/* Glow Effect */
.elementor-widget-container::before{

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    background:
        radial-gradient(
            circle,
            rgba(0,119,255,0.16),
            transparent 70%
        );

    top: -160px;
    right: -130px;

    animation: glowMove 6s ease-in-out infinite;
}

.elementor-widget-container::after{

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    background:
        radial-gradient(
            circle,
            rgba(0,200,255,0.10),
            transparent 70%
        );

    bottom: -140px;
    left: -100px;

    animation: glowMove2 7s ease-in-out infinite;
}

/* Animation */
@keyframes glowMove{

    0%{transform: translateY(0px);}
    50%{transform: translateY(15px);}
    100%{transform: translateY(0px);}
}

@keyframes glowMove2{

    0%{transform: translateX(0px);}
    50%{transform: translateX(15px);}
    100%{transform: translateX(0px);}
}

/* =========================
   HEADING
========================= */

.elementor-widget-container h2{

    position: relative;

    display: inline-block;

    font-size: 32px;
    font-weight: 800;

    color: #083b66;

    margin-bottom: 22px;

    animation: headingFloat 3s ease-in-out infinite;
}

/* Animated Line */
.elementor-widget-container h2::after{

    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 75px;
    height: 4px;

    border-radius: 50px;

    background:
        linear-gradient(
            90deg,
            #0077ff,
            #00d4ff,
            #0077ff
        );

    background-size: 250% 250%;

    animation:
        lineMove 4s linear infinite,
        glowPulse 2s ease-in-out infinite;
}

/* Dot */
.elementor-widget-container h2::before{

    content: "";

    position: absolute;

    right: -15px;
    top: 14px;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #00bfff;

    box-shadow:
        0 0 10px #00bfff;

    animation: pulseDot 2s infinite;
}

/* Heading Animation */
@keyframes headingFloat{

    0%{transform: translateY(0px);}
    50%{transform: translateY(-2px);}
    100%{transform: translateY(0px);}
}

@keyframes lineMove{

    0%{background-position: 0% 50%;}
    100%{background-position: 100% 50%;}
}

@keyframes glowPulse{

    0%{
        box-shadow:
            0 0 8px rgba(0,119,255,0.3);
    }

    50%{
        box-shadow:
            0 0 18px rgba(0,119,255,0.5);
    }

    100%{
        box-shadow:
            0 0 8px rgba(0,119,255,0.3);
    }
}

@keyframes pulseDot{

    0%{
        transform: scale(1);
        opacity: 1;
    }

    50%{
        transform: scale(1.3);
        opacity: 0.6;
    }

    100%{
        transform: scale(1);
        opacity: 1;
    }
}

/* =========================
   TABLE
========================= */

table.dataTable{

    width: 100% !important;

    border-collapse: separate !important;

    border-spacing: 0 4px !important;

    background: transparent !important;
}

/* Header */
table.dataTable thead th{

    background:
        linear-gradient(
            135deg,
            #1d3f91,
            #284fb5
        ) !important;

    color: #fff !important;

    padding: 8px 10px !important;

    font-size: 12px;
    font-weight: 700;

    border: none !important;
}

/* Rounded Header */
table.dataTable thead th:first-child{

    border-radius: 8px 0 0 8px;
}

table.dataTable thead th:last-child{

    border-radius: 0 8px 8px 0;
}

/* Odd Row */
table.dataTable tbody tr:nth-child(odd) td{

    background:
        linear-gradient(
            135deg,
            rgba(238,243,250,0.96),
            rgba(220,232,248,0.90)
        ) !important;
}

/* Even Row */
table.dataTable tbody tr:nth-child(even) td{

    background:
        linear-gradient(
            135deg,
            rgba(214,232,255,0.95),
            rgba(194,220,255,0.90)
        ) !important;
}

/* Body Cell */
table.dataTable tbody td{

    padding: 7px 10px !important;

    font-size: 12px;
    font-weight: 600;

    color: #16324a;

    white-space: nowrap;

    border-top:
        1px solid rgba(255,255,255,0.4) !important;

    border-bottom:
        1px solid rgba(255,255,255,0.15) !important;

    transition: 0.3s ease;
}

/* Rounded */
table.dataTable tbody td:first-child{

    border-radius: 7px 0 0 7px;
}

table.dataTable tbody td:last-child{

    border-radius: 0 7px 7px 0;

    font-weight: 700;

    color: #0056b3;
}

/* Hover */
table.dataTable tbody tr:hover td{

    background:
        linear-gradient(
            135deg,
            rgba(180,220,255,0.98),
            rgba(150,205,255,0.95)
        ) !important;

    color: #003f88 !important;
}

/* =========================
   SEARCH
========================= */

.dataTables_filter{

    margin-bottom: 12px;
}

.dataTables_filter input{

    background:
        rgba(255,255,255,0.45) !important;

    border:
        1px solid rgba(255,255,255,0.4) !important;

    border-radius: 50px !important;

    padding: 6px 12px !important;

    color: #003f88 !important;

    font-size: 12px;

    width: 110px;
}

/* Dropdown */
.dataTables_length select{

    background:
        rgba(255,255,255,0.45);

    border-radius: 8px;

    padding: 4px 7px;

    font-size: 11px;
}

/* ===================================
   PERFECT PAGINATION
=================================== */

/* Pagination Area */
.dataTables_paginate{

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    width: 100%;

    margin-top: 18px;
}

/* Keep Horizontal */
.dataTables_paginate span{

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 6px;

    flex-wrap: nowrap !important;
}

/* Buttons */
.dataTables_paginate .paginate_button{

    display: inline-flex !important;

    justify-content: center;
    align-items: center;

    min-width: 30px;
    height: 30px;

    padding: 0 8px !important;

    border-radius: 8px !important;

    background:
        rgba(255,255,255,0.45) !important;

    border:
        1px solid rgba(255,255,255,0.35) !important;

    color: #083b66 !important;

    font-size: 11px !important;

    font-weight: 700;

    transition: 0.3s ease !important;
}

/* Hover */
.dataTables_paginate .paginate_button:hover{

    background:
        linear-gradient(
            135deg,
            #0077ff,
            #00bfff
        ) !important;

    color: #fff !important;

    transform: translateY(-2px);
}

/* Active */
.dataTables_paginate .paginate_button.current{

    background:
        linear-gradient(
            135deg,
            #005bea,
            #008cff
        ) !important;

    color: #fff !important;

    box-shadow:
        0 5px 14px rgba(0,119,255,0.22);
}

/* ===================================
   PREVIOUS & NEXT BUTTON TEXT
=================================== */

/* Previous বাটনে "Previous" লেখা দেখানো */
.dataTables_paginate .paginate_button.previous{

    font-size: 0 !important; /* আইকন/পুরনো টেক্সট লুকানো */
}

.dataTables_paginate .paginate_button.previous::after{

    content: "Previous";

    font-size: 11px !important;

    font-weight: 700;

    color: #000000 !important;
}

/* Next বাটনে "Next" লেখা দেখানো */
.dataTables_paginate .paginate_button.next{

    font-size: 0 !important; /* আইকন/পুরনো টেক্সট লুকানো */
}

.dataTables_paginate .paginate_button.next::after{

    content: "Next";

    font-size: 11px !important;

    font-weight: 700;

    color: #000000 !important;
}

/* Hover এ Previous/Next টেক্সট সাদা থাকবে */
.dataTables_paginate .paginate_button.previous:hover::after,
.dataTables_paginate .paginate_button.next:hover::after{

    color: #ffffff !important;
}

/* =========================
   MOBILE RESPONSIVE
========================= */

@media(max-width:768px){

    .elementor-widget-container{

        padding: 18px 6px;

        border-radius: 14px;
    }

    .elementor-widget-container h2{

        font-size: 22px;
    }

    .dataTables_wrapper{

        overflow-x: auto;

        width: 100%;
    }

    table.dataTable{

        min-width: 100% !important;
    }

    table.dataTable thead th,
    table.dataTable tbody td{

        font-size: 10px !important;

        padding: 6px 6px !important;
    }

    .dataTables_filter input{

        width: 90px;

        font-size: 10px;

        padding: 5px 10px !important;
    }

    .dataTables_length,
    .dataTables_filter,
    .dataTables_info{

        font-size: 10px;
    }

    /* MOBILE PAGINATION FIX */
    .dataTables_wrapper .dataTables_paginate{

        display: flex !important;

        justify-content: center !important;

        align-items: center !important;

        width: 100% !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        white-space: nowrap !important;

        padding-top: 12px;

        padding-bottom: 10px;

        -webkit-overflow-scrolling: touch;
    }

    .dataTables_wrapper .dataTables_paginate span{

        display: inline-flex !important;

        flex-direction: row !important;

        align-items: center !important;

        gap: 4px;

        white-space: nowrap !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button{

        display: inline-flex !important;

        justify-content: center !important;

        align-items: center !important;

        min-width: 28px !important;

        height: 28px !important;

        padding: 0 8px !important;

        margin: 0 2px !important;

        border-radius: 7px !important;

        font-size: 10px !important;

        font-weight: 700 !important;

        flex: 0 0 auto !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
    .dataTables_wrapper .dataTables_paginate .paginate_button.next{

        min-width: auto !important;

        padding: 0 10px !important;
    }

    /* Mobile: Previous/Next টেক্সট সাইজ */
    .dataTables_paginate .paginate_button.previous::after,
    .dataTables_paginate .paginate_button.next::after{

        font-size: 10px !important;
    }

}/* End custom CSS */