/*============================Start_Default===========================*/
/*============================Body:CSS= width 100%====================*/
/*=============================Font===================================*/
/*============================Start-Navbar  ==========================*/
/*============================Start-Footer ===========================*/
/*==================Justify Content Centre============================*/
/*===================Start-card=======================================*/
/*===================Start-Customised Col=============================*/
/*===================Start-Form-horizontal CSS========================*/
/*===================Start-Search CSS=================================*/
/*===================Start-Search Pagination==========================*/
/*===================Start-Layout Menu/overlay========================*/
/*===================Start-Optional Bootstrap 4.6 xs,sm,md,lg,Xl======*/

/*============================Start_Default===========================*/
/* #region Start_Default */

/* Prevent horizontal scrolling on mobile devices */
html {
    overflow-x: hidden !important;
}

body {
    padding-top: 0px !important;
    padding-bottom: 0px;
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Only apply box-sizing to elements that need it, exclude images and carousel */
*:not(img):not(svg):not(#fullPageCarousel):not(#fullPageCarousel *) {
    box-sizing: border-box;
}

/* ONLY target the main content area to prevent horizontal overflow - but exclude carousel */
.body-content:not(#fullPageCarousel):not(.carousel-container) {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Ensure carousel is protected from any overflow restrictions */
#fullPageCarousel,
.carousel-container,
#fullPageCarousel .carousel,
#fullPageCarousel .carousel-inner,
#fullPageCarousel .item {
    max-width: 100vw !important;
    overflow: visible !important;
}

/* Apply responsive behavior only to content images, NOT navbar/footer logos */
.body-content img:not(.navbar-brand img):not(.image-container .image-fit), 
.body-content video, 
.body-content iframe, 
.body-content object, 
.body-content embed {
    max-width: 100% !important;
    height: auto !important;
}

/* Specific rule for image-container image-fit to maintain height: 100% */
.body-content .image-container .image-fit {
    height: 100% !important;
}

/* EXPLICITLY protect navbar and footer logos from any CSS interference */
.navbar img {
    max-width: none !important;
    width: auto !important;
    box-sizing: content-box !important;
}

/* NUCLEAR OPTION: Lock down footer logo size completely */
footer img[src*="white-logo.svg"] {
    max-width: none !important;
    width: auto !important;
    height: 57px !important;
    min-height: 57px !important;
    max-height: 57px !important;
    box-sizing: content-box !important;
    object-fit: none !important;
    transform: none !important;
    scale: none !important;
}

/* General footer img rule as backup */
footer img {
    max-width: none !important;
    width: auto !important;
    height: 57px !important;
    box-sizing: content-box !important;
    object-fit: none !important;
}

/* Override ANY responsive image class in footer */
footer img.img-responsive,
footer .img-responsive img {
    width: auto !important;
    max-height: 57px !important;
    min-height: 57px !important;
    height: 57px !important;
}

/* ULTIMATE FOOTER LOGO PROTECTION - Target by exact path */
img[src*="Asset/white-logo.svg"],
img[src*="white-logo.svg"] {
    height: 57px !important;
    max-height: 57px !important;
    min-height: 57px !important;
    width: auto !important;
    max-width: none !important;
    min-width: auto !important;
    box-sizing: content-box !important;
    object-fit: none !important;
    display: inline !important;
}

/* Ensure footer paragraph doesn't interfere */
footer p {
    line-height: normal !important;
}

/* Make sure footer container isn't causing issues */
footer .col-md-8 p {
    margin: 1em 0 !important;
    text-align: left !important;
}

/* Ensure the navbar logo container doesn't wrap */
.navbar-header a {
    white-space: nowrap !important;
    display: inline-block !important;
}

/* Mobile-specific fixes */
@media screen and (max-width: 768px) {
    /* Prevent horizontal scrolling on mobile */
    html, body {
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    /* Ensure touch scrolling works properly */
    body {
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
    }
    
    /* Only apply width restrictions to content containers, NOT navbar/footer */
    .body-content .container, 
    .body-content .row, 
    .body-content [class*="col-"] {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Fix for any wide elements in content only */
    .body-content table, 
    .body-content .table-responsive {
        max-width: 100% !important;
        overflow-x: auto !important;
    }
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-top:0px;
    padding-left: 0px;
    padding-right: 0px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}
.font_Color_semi_black {
color:#333333 !important;
}

.shadow {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4) !important; /* Increase shadow on hover */
}
/* #endregion */
/*============================End_Default=============================*/
/*============================Body:CSS= width 100%====================*/
/*Applied on all Body*/
@media (min-width: 768px) {
    .container {
        width: 100% !important;
    }
}

/*=============================Start-Font===================================*/
/* #region Start_Font */
/*To apply the AvenirLTStd-Light Font into shared Layout  */
* {
    font-family: AvenirLTStd-Light,Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
/* #endregion */
/*=============================End-Font===================================*/




/*============================Start-Navbar  ==========================*/
/* #region navbar */
/*
    Remove the black line (border) below the navbar
    Add Hight to the Nav Bar : 100px
    Pading to the LEft and right
*/
/*============================navbar .navbar-inverse  ================*/
.navbar-inverse {
    border-bottom: none;
    min-height: 150px;
    /*Remove display flex to keep logo left on small screen*/
    /*display: flex;*/
    /*As Align-items works only with display=flex*/
    /*align-items: center;*/
    /*to keep items center instead of align-items, padding is used*/
    padding-top: 50px;
    /*============================ Optional: space out the navbar items (logo, links) ====================*/
    justify-content: space-between;
    padding-left: 30px;
    padding-right: 30px;
    /*============================ Gradient background ==============*/
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    font-size: 16px;
}
.navbar-toggle {
    border: none; /* Remove border */
    box-shadow: none; /* Remove any box shadow */
    outline: none; /* Remove outline */
    padding-top:11px !important;
}

.navbar-toggle:hover {
    background-color: transparent!important; /* Remove the background color */
    cursor:none!important;
}

.cursor_pointer {
    color:white;
cursor:pointer!important;
}

.cursor_pointer:hover {
    cursor: pointer!important;
    color:#cac6c6 !important;
}

.Hover_bg_gray:hover {
background-color:gray;
}
/* Media query for smaller screens */
@media (max-width: 930px) {
    .navbar-inverse {
        flex-direction: row; /* Ensures items stay in a row */
        flex-wrap: nowrap; /* Prevents wrapping to the next line */
    }

    .navbar-logo {
        flex: 0 1 auto; /* Ensures the logo doesn't shrink or wrap */
    }

    .navbar-links {
        flex: 1; /* Allows the links to take the remaining space */
        display: flex;
        justify-content: space-between;
    }
}
/*==============================================================*/

/* Custom CSS for screens below 930px */
@media (max-width: 930px) {
        /* show navbar-toggle  when screen is small */
    .navbar-header .navbar-toggle {
        display: block !important; /* Show the hamburger menu */
    }

        /* hide collapse when screen is small */
    .navbar-header .collapse {
        display: none !important; /* Hide the full navigation menu */
    }

        /* Show Collapse when clicked on hamburger icon as a menu */
    .navbar-header .collapse.in {
        display: block !important; /* Display the dropdown menu when toggled */
        position: absolute; /* Position dropdown below the navbar */
        top: 100%; /* Position the dropdown just below the navbar */
        left: 0; /* Align with the left edge of the navbar */
        width: 100%; /* Make it full-width */
        background-color: #000; /* Match your navbar background */
        z-index: 999; /* Ensure it appears above other elements */
        padding: 10px 0; /* Add some spacing */
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for dropdown effect */
    }

        /* Smooth dropdown animation */
        .navbar-header .collapse.in {
            animation: dropdown 0.3s ease-out;
        }
        @keyframes dropdown {
        from {
        transform: translateY(-20px);
        opacity: 0;
        }

        to {
        transform: translateY(0);
        opacity: 1;
        }
        }

        .navbar-collapse {
        display: none !important; /* Hide the full navigation menu */
        }

        .navbar-collapse.in {
        display: block !important;  /*Display the dropdown menu when toggled */
        }

        /* Navbar items styling */
        .navbar-collapse ul {
        list-style: none; /* Remove bullets */
        padding-left: 0; /* Remove padding */
        margin: 0;
        }

        .navbar-collapse ul li {
            padding: 10px 20px; /* Add spacing between items */
            border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Optional: Add dividers */
        }
        .navbar-collapse ul li:last-child {
            border-bottom: none; /* Remove border for the last item */
        }

        .navbar-right {
        float: right !important;
        /* margin-right: -15px;*/
        }
}




.navbar-collapse ul li a {
color: white; /* Set link color */
text-decoration: none; /* Remove underline */
}
.navbar-collapse ul li a:hover {
    color: #ccc; /* Change color on hover */
}
/* For screens wider than 930px */
@media (min-width: 931px) {
    .navbar-toggle {
        display: none !important; /* Hide the hamburger menu */
    }

    .navbar-collapse {
        display: flex !important; /* Show the full navigation menu */
    }
}
/**/
/*==================Navbar Text color================================*/
.navbar-collapse .nav > li > a {
    color: white; /* Sets text color to white */
    text-decoration: none; /* Removes underline, if any */
    cursor: pointer;
}

/*==================Navbar Text hover color==========================*/
.navbar-collapse .nav > li > a:hover {
   color: #ccc; /* Optional: Change text color on hover */
}

/*===============Hide Tab-Pane properly=================================*/
.tab-pane {
    display: none; /* Default state for tabs */
}

.tab-pane.active {
        display: block !important; /* Only display the active tab */
    }

/* #endregion */
/*============================End-Navbar  ===========================*/



/*============================Start-Footer ==========================*/
/* #region Footer */
    /*============================Footer width 100%  ====================*/
    footer {
        width: 100%;
        margin: 0px;
        padding: 0px;
        background-color: black;
        color: white;
    }
        /*============================Footer P:CSS= Margin 
    Paragraphs in footer==============================================*/
        footer p {
            margin-left: 50px;
        }
    /*============================End-Footer width 100%  ==================*/

    /*=============================Font color Footer=======================*/
    .text_gray {
        color: #c4cdd5;
    }
    /*=============================Font color Footer======================*/
    .text_dark_gray {
        color: #85898b;
    }
    /* #endregion */
/*============================End-Footer ==============================*/




/*==================Justify Content Horizontally Centre=============================*/
/*for Card command any other*/
/*used for: Stories images and spinner of admin dash */
.item-centre {
        display: flex;
        justify-content: center;
        text-align: center;
        vertical-align: central;
    }
/*card in centre*/
/*used in: New Products and Latest in Rona*/
.cards-in-centre {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}



/*===================Start-card===================================*/
/* #region Card */
    /*@* font and color of text in card *@*/
    .card-text {
        font-size: 16px;
        color: #333 !important;
    }

/*@* slow transition on hover *@*/
.card, .card-approve {
    transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
}

    /*@* When moving on cards to make them pop *@*/
    .card:hover, .card-approve:hover {
        transform: translateY(-5px); /* Move up on hover */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Increase shadow on hover */
        background-color: #ffffff00; /* Light pale blue */
    }

    /*@* When click on Cards to change the color and move them back to their origin space *@*/
    .card:active {
        transform: translateY(0); /* Reset position on click */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Reset shadow on click */
        background-color: #8cc1ff; /* Slightly darker blue on click */
    }
    /*@* --------------to fit card of icons to each other----------*@*/

    .card-deck .card {
        margin: 0px;
        padding: 0px;
    }

    .card-deck .col-sm-4 {
        margin: 0px;
        padding: 0px;
    }

    .card-deck .col-lg-3 {
        margin: 0px;
        padding: 0px;
    }

    .card-deck .col-sm-12 {
        margin: 0px;
        padding: 0px;
    }

    .card-deck .col-lg-4 {
        margin: 0px;
        padding: 0px;
    }

    .card-deck .col-4 {
        margin: 0px;
        padding: 0px;
    }

    .card-deck .col-sm-3 {
        margin: 0px;
        padding: 0px;
    }


    .card {
        margin: 0px !important;
        padding: 0px !important;
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border: 3px solid rgba(0, 0, 0, 0.125);
        border-radius: 5%;
    }

        .card > hr {
            margin-right: 0;
            margin-left: 0;
        }

        .card > .list-group {
            border-top: inherit;
            border-bottom: inherit;
        }

            .card > .list-group:first-child {
                border-top-width: 0;
                border-top-left-radius: calc(5% - 1px);
                border-top-right-radius: calc(5% - 1px);
            }

            .card > .list-group:last-child {
                border-bottom-width: 0;
                border-bottom-right-radius: calc(5% - 1px);
                border-bottom-left-radius: calc(5% - 1px);
            }

            .card > .card-header + .list-group,
            .card > .list-group + .card-footer {
                border-top: 0;
            }

    .card-body {
        flex: 1 1 auto;
        min-height: 1px;
        padding: 1.25rem;
    }

    .card-title {
        margin-bottom: 0.75rem;
    }

    .card-subtitle {
        margin-top: -0.375rem;
        margin-bottom: 0;
    }

    .card-text:last-child {
        margin-bottom: 0;
    }

    .card-link:hover {
        text-decoration: none;
    }

    .card-link + .card-link {
        margin-left: 1.25rem;
    }

    .card-header {
        padding: 0.75rem 1.25rem;
        margin-bottom: 0;
        background-color: rgba(0, 0, 0, 0.03);
        border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    }

        .card-header:first-child {
            border-radius: calc(5% - 1px) calc(5% - 1px) 0 0;
        }

    .card-footer {
        padding: 0.75rem 1.25rem;
        background-color: rgba(0, 0, 0, 0.03);
        border-top: 1px solid rgba(0, 0, 0, 0.125);
    }

        .card-footer:last-child {
            border-radius: 0 0 calc(5% - 1px) calc(5% - 1px);
        }

    .card-header-tabs {
        margin-right: -0.625rem;
        margin-bottom: -0.75rem;
        margin-left: -0.625rem;
        border-bottom: 0;
    }

    .card-header-pills {
        margin-right: -0.625rem;
        margin-left: -0.625rem;
    }

    .card-img-overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 1.25rem;
        border-radius: calc(5% - 1px);
    }

    .card-img,
    .card-img-top,
    .card-img-bottom {
        flex-shrink: 0;
        width: 100%;
    }

    .card-img,
    .card-img-top {
        border-top-left-radius: calc(5% - 1px);
        border-top-right-radius: calc(5% - 1px);
    }

    .card-img,
    .card-img-bottom {
        border-bottom-right-radius: calc(5% - 1px);
        border-bottom-left-radius: calc(5% - 1px);
    }

    .card-deck .card {
        margin-bottom: 15px;
    }

    .card-deck {
        min-height: 200px;
    }


    .card-group > .card {
        margin-bottom: 15px;
    }

    @media (min-width: 576px) {
        .card-group {
            display: flex;
            flex-flow: row wrap;
        }

            .card-group > .card {
                flex: 1 0 0%;
                margin-bottom: 0;
            }

                .card-group > .card + .card {
                    margin-left: 0;
                    border-left: 0;
                }

                .card-group > .card:not(:last-child) {
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                }

                    .card-group > .card:not(:last-child) .card-img-top,
                    .card-group > .card:not(:last-child) .card-header {
                        border-top-right-radius: 0;
                    }

                    .card-group > .card:not(:last-child) .card-img-bottom,
                    .card-group > .card:not(:last-child) .card-footer {
                        border-bottom-right-radius: 0;
                    }

                .card-group > .card:not(:first-child) {
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0;
                }

                    .card-group > .card:not(:first-child) .card-img-top,
                    .card-group > .card:not(:first-child) .card-header {
                        border-top-left-radius: 0;
                    }

                    .card-group > .card:not(:first-child) .card-img-bottom,
                    .card-group > .card:not(:first-child) .card-footer {
                        border-bottom-left-radius: 0;
                    }
    }

    .card-columns .card {
        margin-bottom: 0.75rem;
    }

    @media (min-width: 576px) {
        .card-columns {
            -moz-column-count: 3;
            column-count: 3;
            -moz-column-gap: 1.25rem;
            column-gap: 1.25rem;
            orphans: 1;
            widows: 1;
        }

            .card-columns .card {
                display: inline-block;
                width: 100%;
            }
    }

    /*@* Card rotation */
.change {
    -ms-transform: rotate(360deg) !important; /* IE 9 */
    -webkit-transform: rotate(360deg) !important; /* Chrome, Safari, Opera */
    transform: rotate(360deg) !important;
    transition-duration: 2s !important;
}

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

/*body {
    font-family: Arial, sans-serif;
    display: flex;
}*/

.sidebar {
    width: 250px;
    background-color: #f4f4f4;
    padding: 15px;
    border-right: 1px solid #ccc;
}

.content {
    flex: 1;
    padding: 15px;
}

/* Removed conflicting grid layout - using flexbox for search advance cards instead */

.card {
    border: 0px solid #ffffff00;
    border-radius: 0px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    .card img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

.card-footer {
    padding: 10px;
    background-color: #ffffff00;
    border-top: 0px solid #ffffff00;
    font-size: 14px;
    color: #555;
}

.navbar {
    height: 60px;
   /* background-color: #ddd;*/
    margin-bottom: 15px;
}

@media (max-width: 768px) {
    .sidebar {
        display: none;
    }

    body {
        flex-direction: column;
    }

    .content {
        padding: 10px;
    }
}
    /* #endregion */
/*===================End-card=========================================*/




/*===================Start-Customised Col=============================*/
/* #region Customised Col */
    .D-flex {
        display: flex !important;
    }


    .ucol-100 {
        width: 100% !important;
        margin: 0px;
        padding: 0px;
    }

    .ucol-90 {
        width: 90% !important;
        margin: 0px;
        padding: 0px;
    }

    .ucol-80 {
        width: 80% !important;
        margin: 0px;
        padding: 0px;
    }

    .ucol-70 {
        width: 70% !important;
        margin: 0px;
        padding: 0px;
    }

    .ucol-60 {
        width: 60% !important;
        margin: 0px;
        padding: 0px;
    }

    .ucol-50 {
        width: 50% !important;
        margin: 0px;
        padding: 0px;
    }

    .ucol-40 {
        width: 40% !important;
        margin: 0px;
        padding: 0px;
    }

    .ucol-30 {
        width: 30% !important;
        margin: 0px;
        padding: 0px;
    }

    .ucol-33 {
        width: 33% !important;
        margin: 0px;
        padding: 0px;
    }

    .ucol-25 {
        width: 25% !important;
        margin: 0px;
        padding: 0px;
    }

    .ucol-20 {
        width: 20% !important;
        margin: 0px;
        padding: 0px;
    }

    .ucol-10 {
        width: 10% !important;
        margin: 0px;
        padding: 0px;
    }
/* #endregion */
/*===================End-Customised Col===============================*/




/*===================Start-Form-horizontal CSS========================*/
/* #region Form-horizontal */

    .form-horizontal .form-group {
        display: flex;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 10px;
    }

    .col-form-label {
        padding-top: calc(0.375rem + 1px);
        padding-bottom: calc(0.375rem + 1px);
        margin-bottom: 0;
        font-size: inherit;
        line-height: 1.5;
    }
    /*make a gap on top of the tab-content under tabs and pills*/
    .tab-content {
        padding-top: 20px;
    }

    /*make labels to the right , remove gaps from label and text boxes*/
    /*.col-form-label {
    justify-content: end;
    display: flex;
}
*/
    /*Align content Right side of Div*/
    .Align_Right {
        justify-content: end;
        display: flex;
        margin-right: 20px;
    }

    .form-control {
        display: block;
        width: 100%;
        height: calc(1.5em + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        /* font-size: 1rem;*/
        /*  font-weight: 400;*/
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: 5%;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    @media (prefers-reduced-motion: reduce) {
        .form-control {
            transition: none;
        }
    }

    .form-control::-ms-expand {
        background-color: transparent;
        border: 0;
    }

    .form-control:-moz-focusring {
        color: transparent;
        text-shadow: 0 0 0 #495057;
    }

    .form-control:focus {
        color: #495057;
        background-color: #fff;
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .form-control::-moz-placeholder {
        color: #6c757d;
        opacity: 1;
    }

    .form-control:-ms-input-placeholder {
        color: #6c757d;
        opacity: 1;
    }

    .form-control::placeholder {
        color: #6c757d;
        opacity: 1;
    }

    .form-control:disabled, .form-control[readonly] {
        background-color: #e9ecef;
        opacity: 1;
    }
    /* #endregion */
/*===================End-Form-horizontal CSS============================*/



/*===================Start-Search CSS===================================*/
/* #region Search CSS */
.bg_sidebar {
    background-color:#f5f3f3 !important;
}
.filter-toggle {
    background: none;
    border: none;
    text-align: left;
    width: 100%;
    font-size: 14px;
    /* font-weight: bold;*/
    cursor: pointer;
    display: flex;
    justify-content: space-between; /* Pushes icon to the right */
    align-items: center;
    padding: 10px;
}

    .toggle-icon {
        font-size: 24px; /* Makes the icon larger */
        margin-left: auto; /* Ensures it sticks to the far right */
    }

.toggle-icon-fa {
    font-size: 12px !important; /* Makes the icon larger */
    margin-left: auto !important; /* Ensures it sticks to the far right */
    font-weight: lighter !important;
}

    .sortable-header {
        display: flex;
        justify-content: space-between !important;
        align-items: center !important;
        cursor: pointer; /* Adds a pointer cursor for interactivity */
    }

    .sort-arrow {
        margin-left: auto !important; /* Ensures the arrow stays at the far right */
        font-size: 12px; /* Adjust font size if needed */
        transition: transform 0.2s ease !important; /* Optional: smooth arrow rotation effect */
    }

    .form-check-label {
        font-weight: lighter;
    }

    .filter-sidebar {
        border-radius: 5px;
        background-color: #f9f9f9;
    }
    /* Custom toggle button styles */
    .custom-toggle-btn {
        text-decoration: none;
        display: flex;
        align-items: center;
        border: none; /* Removes any border when clicked */
        background-color: transparent; /* Ensures no background color by default */
        padding: 8px 0; /* Adds padding for better spacing */
        transition: background-color 0.3s ease, transform 0.3s ease;
        width: 100%; /* Ensures button spans the width for alignment */
        text-align: left; /* Aligns text and arrow to the left */
    }

        .custom-toggle-btn:hover {
            background-color: #e6e6e6; /* Light gray background on hover */
            text-decoration: none; /* Removes underline on hover */
        }

        .custom-toggle-btn:focus {
            outline: none; /* Removes the focus outline when clicked */
        }

    .toggle-arrow {
        margin-right: 8px;
        font-size: 12px;
        transition: transform 0.3s ease;
    }

    .custom-toggle-btn[aria-expanded="true"] .toggle-arrow {
        transform: rotate(90deg); /* Rotates the arrow 90 degrees when expanded */
    }
    /* #endregion */
/*===================End-Search CSS===================================*/



/*===================Start-Search Pagination==========================*/
/* #region Search Pagination */

    .pagination-container {
        /*display: flex;*/
        justify-content: space-between;
        align-items: center;
        margin: 10px 0;
    }

    .pagination-button {
        margin: 0 5px;
        padding: 5px 10px;
        cursor: pointer;
        border: 0px solid white;
        background: #f9f9f9;
        border-radius: 3px;
    }

        .pagination-button.active {
            background: #c7c7c7;
            color: rgba(0, 0, 0, 1);
            /*   border-color: #007bff;*/
        }

    .rows-per-page-selector {
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 3px;
        outline: none;
        cursor: pointer;
    }

    #loadMoreButtonContainer {
        text-align: center;
        margin-top: 15px;
    }

    #loadMoreButton {
        background-color: #000;
        color: #fff;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        display: inline-block;
    }
    /* #endregion */
/*===================End-Search Pagination==========================*/



/*===================Start-Layout Menu/overlay======================*/
/* #region Overlay menu */
    .overlay {
        position: fixed;
        top: 150px;
        left: 0;
        width: 100%;
        height: calc(100% - 0px);
        background-color: rgba(0, 0, 0, 0.8);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 101;
    }

        .overlay.active {
            display: flex;
        }

    .overlay-content {
        background: white;
        width: 100%;
        /*// max-width: 1200px;*/
        height: 100%;
        /*display: flex;*/
        /* flex-direction: column;*/
        padding-left: 50px;
        /* position: relative;*/
        /*  overflow-y: auto;*/
    }

@media (max-width: 575.98px) {
    .overlay-content {
        padding-left: 0px;
        overflow-y: auto;
    }
    .overlay-title > a {
        font-size: 27px;
    }

    .overlay-title.row {
        font-size: 30px;
    }

}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 40px;
    font-weight: bolder;
    cursor: pointer;
    z-index: 102;
}

    .back-btn {
        position: absolute;
        top: 20px;
        left: 20px;
        font-size: 15px;
        font-weight: lighter;
        cursor: pointer;
        z-index: 102;
    }

    .content-container {
        /*  display: flex;*/
        /* flex-wrap: wrap;*/
        /*flex: 1;*/
        align-items: center;
    }

    .overlay-title {
        /* flex: 1;*/
        color: black;
        font-size: 40px;
        font-weight: bold;
        text-align: left;
        margin-bottom: 10px !important;
        padding-left: 0px !important;
    }

    .categories {
        /*   flex: 2;*/
        /*  display: flex;*/
        /*flex-wrap: wrap;*/
        /* gap: 20px;*/
        padding-left: 0px !important;
    }

    .category {
        margin-bottom: 8px;
        padding-left: 0px !important;
    }

    .category-title {
        font-family: AvenirLTStd-Heavy;
        font-weight: 900 !important;
        font-size: 14px;
        color: rgb(145, 158, 171);
        margin-bottom: 8px;
        margin-top: 20px !important;
        line-height: 1.5;
        /*add shadow around font to make it thicker*/
        text-shadow: 0.20px 0 currentColor, -0.20px 0 currentColor, 0 0.20px currentColor, 0 -0.20px currentColor;
        padding-left: 0px !important;
    }

    .option {
        font-weight: 800 !important;
        font-size: 20px;
        color: black;
        margin-bottom: 4px;
        /* margin-left: 10px;*/
        padding-left: 0px !important;
        cursor: pointer;
    }

.overlay-des-file {
    font-family: 'AvenirLTStd-Heavy' !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: rgb(145, 158, 171) !important;
    margin-bottom: 8px !important;
    line-height: 1.5 !important;
    padding-left: 0px !important;

}
/* #endregion */
/*===================End-Layout Menu/overlay==========================*/



/*===================Start-Optional Bootstrap 4.6 xs,sm,md,lg,Xl======*/
/* #region Optional mt pt xs, sm, md,lg,xl */
/* Extra Small (xs) - <576px */
@media (max-width: 575.98px) {
    /* Margin */
    .m-xs-0 {
            margin: 0 !important;
        }

        .m-xs-1 {
            margin: 5% !important;
        }

        .m-xs-2 {
            margin: 10% !important;
        }

        .m-xs-3 {
            margin: 15% !important;
        }

        .m-xs-4 {
            margin: 20% !important;
        }

        .m-xs-5 {
            margin: 25% !important;
        }

        /* Padding */
        .p-xs-0 {
            padding: 0 !important;
        }

        .p-xs-1 {
            padding: 5% !important;
        }

        .p-xs-2 {
            padding: 10% !important;
        }

        .p-xs-3 {
            padding: 15% !important;
        }

        .p-xs-4 {
            padding: 20% !important;
        }

        .p-xs-5 {
            padding: 25% !important;
        }

        /* Margin Top */
        .mt-xs-0 {
            margin-top: 0 !important;
        }

        .mt-xs-1 {
            margin-top: 5% !important;
        }

        .mt-xs-2 {
            margin-top: 10% !important;
        }

        .mt-xs-3 {
            margin-top: 15% !important;
        }

        .mt-xs-4 {
            margin-top: 20% !important;
        }

        .mt-xs-5 {
            margin-top: 25% !important;
        }

        /* Padding Top */
        .pt-xs-0 {
            padding-top: 0px !important;
        }

        .pt-xs-1 {
            padding-top: 5% !important;
        }

        .pt-xs-2 {
            padding-top: 10% !important;
        }

        .pt-xs-3 {
            padding-top: 15% !important;
        }

        .pt-xs-4 {
            padding-top: 20% !important;
        }

        .pt-xs-5 {
            padding-top: 25% !important;
        }

    /* Padding Left */
    .pl-xs-0 {
        padding-left: 0px !important;
    }

    .pl-xs-1 {
        padding-left: 5% !important;
    }

    .pl-xs-2 {
        padding-left: 10% !important;
    }

    .pl-xs-3 {
        padding-left: 15% !important;
    }

    .pl-xs-4 {
        padding-left: 20% !important;
    }

    .pl-xs-5 {
        padding-left: 25% !important;
    }

    /* Padding right */
    .pr-xs-0 {
        padding-right: 0 !important;
    }

    .pr-xs-1 {
        padding-right: 5% !important;
    }

    .pr-xs-2 {
        padding-right: 10% !important;
    }

    .pr-xs-3 {
        padding-right: 15% !important;
    }

    .pr-xs-4 {
        padding-right: 20% !important;
    }

    .pr-xs-5 {
        padding-right: 25% !important;
    }

    }
    /* Small (sm) - ≥576px */
    @media (min-width: 576px) {
        /* Margin */
        .m-sm-0 {
            margin: 0px !important;
        }

        .m-sm-1 {
            margin: 5% !important;
        }

        .m-sm-2 {
            margin: 10% !important;
        }

        .m-sm-3 {
            margin: 15% !important;
        }

        .m-sm-4 {
            margin: 20% !important;
        }

        .m-sm-5 {
            margin: 25% !important;
        }

        /* Padding */
        .p-sm-0 {
            padding: 0px !important;
        }

        .p-sm-1 {
            padding: 5% !important;
        }

        .p-sm-2 {
            padding: 10% !important;
        }

        .p-sm-3 {
            padding: 15% !important;
        }

        .p-sm-4 {
            padding: 20% !important;
        }

        .p-sm-5 {
            padding: 25% !important;
        }

        /* Margin Top */
        .mt-sm-0 {
            margin-top: 0 !important;
        }

        .mt-sm-1 {
            margin-top: 5% !important;
        }

        .mt-sm-2 {
            margin-top: 10% !important;
        }

        .mt-sm-3 {
            margin-top: 15% !important;
        }

        .mt-sm-4 {
            margin-top: 20% !important;
        }

        .mt-sm-5 {
            margin-top: 25% !important;
        }

        /* Padding Top */
        .pt-sm-0 {
            padding-top: 0 !important;
        }

        .pt-sm-1 {
            padding-top: 5% !important;
        }

        .pt-sm-2 {
            padding-top: 10% !important;
        }

        .pt-sm-3 {
            padding-top: 15% !important;
        }

        .pt-sm-4 {
            padding-top: 20% !important;
        }

        .pt-sm-5 {
            padding-top: 25% !important;
        }

        .pt-sm-30per {
            padding-top: 30% !important;
        }

        .pt-sm-50per {
            padding-top: 50% !important;
        }

        /* Padding left */
        .pl-sm-0 {
            padding-left: 0 !important;
        }

        .pl-sm-1 {
            padding-left: 5% !important;
        }

        .pl-sm-2 {
            padding-left: 10% !important;
        }

        .pl-sm-3 {
            padding-left: 15% !important;
        }

        .pl-sm-4 {
            padding-left: 20% !important;
        }

        .pl-sm-5 {
            padding-left: 25% !important;
        }


        /* Padding right */
        .pr-sm-0 {
            padding-right: 0 !important;
        }

        .pr-sm-1 {
            padding-right: 5% !important;
        }

        .pr-sm-2 {
            padding-right: 10% !important;
        }

        .pr-sm-3 {
            padding-right: 15% !important;
        }

        .pr-sm-4 {
            padding-right: 20% !important;
        }

        .pr-sm-5 {
            padding-right: 25% !important;
        }
    }
    /* Medium (md) - ≥768px */
    @media (min-width: 768px) {
        /* Margin */
        .m-md-0 {
            margin: 0 !important;
        }

        .m-md-1 {
            margin: 5% !important;
        }

        .m-md-2 {
            margin: 10% !important;
        }

        .m-md-3 {
            margin: 15% !important;
        }

        .m-md-4 {
            margin: 20% !important;
        }

        .m-md-5 {
            margin: 25% !important;
        }

        /* Padding */
        .p-md-0 {
            padding: 0 !important;
        }

        .p-md-1 {
            padding: 5% !important;
        }

        .p-md-2 {
            padding: 10% !important;
        }

        .p-md-3 {
            padding: 15% !important;
        }

        .p-md-4 {
            padding: 20% !important;
        }

        .p-md-5 {
            padding: 25% !important;
        }

        /* Margin Top */
        .mt-md-0 {
            margin-top: 0 !important;
        }

        .mt-md-1 {
            margin-top: 5% !important;
        }

        .mt-md-2 {
            margin-top: 10% !important;
        }

        .mt-md-3 {
            margin-top: 15% !important;
        }

        .mt-md-4 {
            margin-top: 20% !important;
        }

        .mt-md-5 {
            margin-top: 25% !important;
        }

        /* Padding Top */
        .pt-md-0 {
            padding-top: 0 !important;
        }

        .pt-md-1 {
            padding-top: 5% !important;
        }

        .pt-md-2 {
            padding-top: 10% !important;
        }

        .pt-md-3 {
            padding-top: 15% !important;
        }

        .pt-md-4 {
            padding-top: 20% !important;
        }

        .pt-md-5 {
            padding-top: 25% !important;
        }
    }
    /* Large (lg) - ≥992px */
    @media (min-width: 992px) {
        /* Margin */
        .m-lg-0 {
            margin: 0 !important;
        }

        .m-lg-1 {
            margin: 5% !important;
        }

        .m-lg-2 {
            margin: 10% !important;
        }

        .m-lg-3 {
            margin: 15% !important;
        }

        .m-lg-4 {
            margin: 20% !important;
        }

        .m-lg-5 {
            margin: 25% !important;
        }

        /* Padding */
        .p-lg-0 {
            padding: 0 !important;
        }

        .p-lg-1 {
            padding: 5% !important;
        }

        .p-lg-2 {
            padding: 10% !important;
        }

        .p-lg-3 {
            padding: 15% !important;
        }

        .p-lg-4 {
            padding: 20% !important;
        }

        .p-lg-5 {
            padding: 25% !important;
        }

        /* Margin Top */
        .mt-lg-0 {
            margin-top: 0 !important;
        }

        .mt-lg-1 {
            margin-top: 5% !important;
        }

        .mt-lg-2 {
            margin-top: 10% !important;
        }

        .mt-lg-3 {
            margin-top: 15% !important;
        }

        .mt-lg-4 {
            margin-top: 20% !important;
        }

        .mt-lg-5 {
            margin-top: 25% !important;
        }

        /* Padding Top */
        .pt-lg-0 {
            padding-top: 0 !important;
        }

        .pt-lg-1 {
            padding-top: 5% !important;
        }

        .pt-lg-2 {
            padding-top: 10% !important;
        }

        .pt-lg-3 {
            padding-top: 15% !important;
        }

        .pt-lg-4 {
            padding-top: 20% !important;
        }

        .pt-lg-5 {
            padding-top: 25% !important;
        }
    }
    /* Extra Large (xl) - ≥1200px */
    @media (min-width: 1200px) {
        /* Margin */
        .m-xl-0 {
            margin: 0 !important;
        }

        .m-xl-1 {
            margin: 5% !important;
        }

        .m-xl-2 {
            margin: 10% !important;
        }

        .m-xl-3 {
            margin: 15% !important;
        }

        .m-xl-4 {
            margin: 20% !important;
        }

        .m-xl-5 {
            margin: 25% !important;
        }

        /* Padding */
        .p-xl-0 {
            padding: 0 !important;
        }

        .p-xl-1 {
            padding: 5% !important;
        }

        .p-xl-2 {
            padding: 10% !important;
        }

        .p-xl-3 {
            padding: 15% !important;
        }

        .p-xl-4 {
            padding: 20% !important;
        }

        .p-xl-5 {
            padding: 25% !important;
        }

        /* Margin Top */
        .mt-xl-0 {
            margin-top: 0 !important;
        }

        .mt-xl-1 {
            margin-top: 5% !important;
        }

        .mt-xl-2 {
            margin-top: 10% !important;
        }

        .mt-xl-3 {
            margin-top: 15% !important;
        }

        .mt-xl-4 {
            margin-top: 20% !important;
        }

        .mt-xl-5 {
            margin-top: 25% !important;
        }

        /* Padding Top */
        .pt-xl-0 {
            padding-top: 0 !important;
        }

        .pt-xl-1 {
            padding-top: 5% !important;
        }

        .pt-xl-2 {
            padding-top: 10% !important;
        }

        .pt-xl-3 {
            padding-top: 15% !important;
        }

        .pt-xl-4 {
            padding-top: 20% !important;
        }

        .pt-xl-5 {
            padding-top: 25% !important;
        }
    }
    /* #endregion */
/*=====================End-Optional Bootstrap 4.6 xs,sm,md,lg,Xl=====*/




/*===================Start-Product Style==========================*/
/* #region Product */
.product_title {
    font-family: AvenirLTStd-Heavy;
    font-weight: bolder;
    /*font-size: 2.5rem;*/
    font-size: 24px !important;
}

    .product_des {
        font-family: AvenirLTStd-Medium;
        font-size: 24px !important;
        font-weight: 600;
    }
    /* #endregion */
/*===================End-Product Style==========================*/




/*===================Strat-Profile Style==========================*/
/* #region Profile*/
    /* Scoped styles for the EditProfile tab navigation */
    #id_ul_nav_navtabs_EditProfile {
        border-width: 1px;
    }

        .profile_title {
            font-size: 25px !important;
            font-family: AvenirLTStd-Heavy;
        }

#id_ul_nav_navtabs_EditProfile .tab_pills {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #333333 !important;
    background-color:rgb(238 238 238 / 1) !important;
}
        /* Active tab styling only for EditProfile */
#id_ul_nav_navtabs_EditProfile.nav-tabs > li.active > a,
#id_ul_nav_navtabs_EditProfile.nav-tabs > li.active > a:hover,
#id_ul_nav_navtabs_EditProfile.nav-tabs > li.active > a:focus {
    background-color: #d4d4d4 !important;
}
        /* Scoped submit button styling for EditProfile */
       .submit_btn {
            padding-left: 30px !important;
            padding-right: 30px !important;
            background-color: black !important;
        }
    /* #endregion*/
/*===================End-Profile Style==========================*/




/*===================Strat-Carousel Style==========================*/
/* #region Carousel*/
/* Responsive Carousel Images */

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;  /* Prevent horizontal scrolling */
    overflow-y: auto;    /* Allow vertical scrolling */
}

/*fit the title and text on the middle of carousel*/



#fullPageCarousel .carousel, #fullPageCarousel .item, #fullPageCarousel .carousel-inner {
    height: 100vh !important; /* Force full viewport height */
    min-height: 100vh !important;
    max-height: 100vh !important;
    width: 100vw !important;
    overflow: hidden !important;
}

#fullPageCarousel .item img {
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Additional carousel positioning and sizing fixes */
#fullPageCarousel {
    position: relative !important;
    width: 100vw !important;
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
}

/* Fix carousel container positioning */
#fullPageCarousel .Carousel-Relative-Container {
    width: 100% !important;
    height: 100vh !important;
    position: relative !important;
    overflow: hidden !important;
}


#fullPageCarousel .Carousel-Relative-Container {
    position: relative !important; /* needed for the absolutely-positioned text */
}

#fullPageCarousel .Carousel-Relative-Absolute {
    position: absolute !important;
    top: 50% !important;
    left: 90px !important;
    transform: translateY(-50%) !important;
    color: #fff !important;
    font-family: 'AvenirLTStd-Heavy' !important;
    font-weight: 900 !important;
}

#fullPageCarousel .slide-content {
    /*    position: absolute;
        top: 20%;
        left: 5%;*/
    color: #fff;
    /*text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);*/
}

    #fullPageCarousel .slide-content .carousel_Title {
        font-family: 'AvenirLTStd-Heavy';
        font-size: 6.625rem !important;
        letter-spacing: 2px !important;
        font-weight: 900 !important;
        line-height: 1.25 !important;
        margin: 0;
    }

    #fullPageCarousel .slide-content .carousel_Des {
        font-size: 2.625rem !important;
        font-weight: 300 !important;
        margin: 10px 0;
    }

@media (max-width: 1200px) {
    #fullPageCarousel .slide-content .carousel_Title {
        font-size: 5.625rem !important;
    }

    #fullPageCarousel .slide-content .carousel_Des {
        font-size: 2.625rem !important;
    }
}

@media (max-width: 900px) {
    #fullPageCarousel .slide-content .carousel_Title {
        font-size: 4.625rem !important;
    }

    #fullPageCarousel .slide-content .carousel_Des {
        font-size: 2.025rem !important;
    }

    #fullPageCarousel .Carousel-Relative-Absolute {
        left: 30px !important;
    }
}

@media (max-width: 600px) {
    #fullPageCarousel .slide-content .carousel_Title {
        font-size: 3.625rem !important;
    }

    #fullPageCarousel .slide-content .carousel_Des {
        font-size: 1.625rem !important;
    }

    #fullPageCarousel .Carousel-Relative-Absolute {
        
        left: 20px !important;
        
    }
}

#fullPageCarousel .slide-content .btn {
    font-size: 14px;
    padding: 10px 20px;
    background-color: transparent;
    color: #fff;
    /* Specify border width, style, and color in one property */
    border: 1px solid #fff;
    border-radius: 0;
    text-transform: uppercase;
}

    #fullPageCarousel .slide-content .btn:hover {
        background-color: white;
        color: black;
    }

#fullPageCarousel .carousel-control {
    position: absolute;
    bottom: 10%;
    top: auto;
    width: auto;
}

#fullPageCarousel .left.carousel-control {
    right: -60%;
}

#fullPageCarousel .right.carousel-control {
    right: 5%;
}

#fullPageCarousel .carousel-control span {
    font-size: 24px;
}

/*======================black over lay on the Carousel==============*/
/* Ensure the container is positioned and behind text by default */
#fullPageCarousel .Carousel-Relative-Container {
    position: relative;
    z-index: 0; /* so the overlay can be stacked on top of the image */
}

    /* Create the pseudo-element overlay */
    #fullPageCarousel .Carousel-Relative-Container::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        /* Example gray gradient (adjust colors/opacity as needed) */
        background: linear-gradient( to bottom, rgba(0,0,0,0.7), /* start color/opacity */
        rgba(0,0,0,0.1) /* end color/opacity */
        );
        z-index: 1; /* place above the image but below the text */
    }

    /* Image at a lower z-index than the overlay */
    #fullPageCarousel .Carousel-Relative-Container img {
        position: relative;
        z-index: 0;
    }

/* Text above the overlay */
#fullPageCarousel .slide-content {
    position: relative;
    z-index: 2;
}

/* #endregion */
/*===================End-Carousel Style==========================*/


/*===================Strat-All Tabs Style==========================*/
/* #region All Tabs*/
    /* Default style for the tabs */
    .centered-tabs > li > a {
        color: #d3d3d3 !important; /* Light gray color */
        font-weight: normal !important; /* Normal text */
        text-decoration: none !important; /* Remove underline */
        border: none !important; /* Remove any borders */
        padding: 10px 15px !important; /* Add some padding for spacing */
        font-size: 20px !important;
    }
        /* Hover state for tabs */
        .centered-tabs > li > a:hover {
            color: #000 !important; /* Black color on hover */
            text-decoration: none !important; /* No underline */
        }
    /* Active tab styling */
    /*Remove the under line when it is clicked / activated*/
.centered-tabs > li.active > a,
.centered-tabs > li.active > a:hover,
.centered-tabs > li.active > a:focus {
    color: #000 !important; /* Black text for active tab */
    font-weight: bold !important; /* Bold text */
    /*border-bottom: 2px solid #000 !important;*/ /* Black underline for active tab */
    background-color: transparent !important; /* Ensure no background color */
    text-decoration: none !important; /* Remove underline */
    border-bottom: none !important; /* Remove underline for active tab */
}
    /* Add an underline under all tabs */
    .centered-tabs {
        border-bottom: 1px solid #d3d3d3 !important; /* Light gray underline for all tabs */
        display: inline-block !important; /* Center-align tabs */
        padding-bottom: 0px !important; /* Add some spacing for aesthetics */
        margin-bottom: 20px !important; /* Add space below the tabs */
    }
    /* Optional: Center the tabs within the container */
    /*Used in All Tabs*/
    .text-center {
        text-align: center !important;
    }


.card_footer_bold {
   
    font-weight:900!important;

}

.card_footer_fontSize {
    font-size: 20px !important;
}

/* #endregion */
/*===================End-All Tabs Style==========================*/


/*===================Strat-Collection Title==========================*/
/* #region Collection Title*/

.Collection_Title {
font-size:70px !important;
}

@media(max-width:1200px) {
    .Collection_Title {
        font-size: 60px !important;
    }
}

@media(max-width:620px) {
    .Collection_Title {
        font-size: 50px !important;
    }
}

/* #endregion */
/*===================End-Collection Title==========================*/


/*===================Start-Log Downloades Style==========================*/
/* #region Log Downloades*/
/* Table styling */
.responsive-table {
    width: 60%;
    margin: 20px auto; /* Center the table */
    border-collapse: collapse;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    color: #333333;
  /*  font-family: Arial, sans-serif;*/
}

    .responsive-table th {
        background-color: #666666; /* Slightly darker for header */
        color: white;
        text-align: left;
        padding: 12px;
    }

    .responsive-table td {
        padding: 10px;
        border: 1px solid #ddd; /* Light border color */
        text-align: left;
    }

    /* Zebra striping for rows */
    .responsive-table tr:nth-child(odd) {
        background-color: #f9f9f9;
    }

    .responsive-table tr:nth-child(even) {
        background-color: #ffffff;
    }

/* Make table responsive */
@media (max-width: 768px) {
    .responsive-table {
        width: 100%; /* Fill screen on smaller devices */
        font-size: 14px; /* Adjust font size for smaller screens */
    }
}

/* Button styling */
.btn {
    background-color: black;
    color: white;
    border: none;
    padding: 15px ;
    margin: 10px 0;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-block;
}

    .btn:hover {
        background-color: white !important; /* White background on hover */
        color: black !important; /* Black text on hover */
        border: 1px solid black !important; /* Ensure black border is visible on hover */
    }

    .btn:focus {
        color:#f69320 !important; /* White text on focus */
    }

/* Add margin to text */
.table-text {
    margin-left: 15px;
}

/* #endregion Log Downloades*/
/*===================End-Log Downloades Style==========================*/



/*===================Start-Admin Dash Style==========================*/
/* #region Admin-Sidebar */
#id_div_sidebar_Admin_Dash.sidebar {
    width: 250px; /* Ensure consistent width */
    background-color: #f4f4f4; /* Matches bg_sidebar */
    padding: 0px; /* Padding inside the sidebar */
    border-right: 1px solid #ccc;
    box-sizing: border-box; /* Includes padding in the width calculation */
    height: 100vh; /* Full height of the viewport */
    overflow-y:hidden!important; /* Allow scrolling if content overflows */
}


    #id_div_sidebar_Admin_Dash.sidebar .btn {
        display: flex;
        justify-content: space-between; /* Space between text and icon */
        align-items: center; /* Center items vertically */
        width: 100%; /* Ensure buttons fit within the sidebar */
        margin: 0px; /* Consistent spacing between buttons */
        font-size: 16px;
        color: black; /* Button text color */
        background-color: #f4f4f4; /* Button background */
        border-radius: 0px; /* Remove rounded corners */
        padding: 10px; /* Button padding */
        text-decoration: none !important; /* Ensure no underline or blinking */
        box-sizing: border-box; /* Includes padding in the width */
        border: none !important; /* Reset any other borders */
        border-bottom: 1px solid #d7d7d7 !important; /* Adds a black line below each button */
    }

        #id_div_sidebar_Admin_Dash.sidebar .btn:hover {
            background-color: #e4e4e4; /* Slightly lighter on hover  */
        }

    #id_div_sidebar_Admin_Dash.sidebar .btn-text {
        flex-grow: 1; /* Take up available space */
        text-align: left; /* Align text to the left */
    }

    #id_div_sidebar_Admin_Dash.sidebar .btn-icon {
        margin-left: 10px; /* Add spacing between text and icon */
        color: #666; /* Optional: color for the icon */
    }

/* #endregion */
/*===================End-Admin Dash Style==========================*/





/*===================Start-Category Top IMG Style==========================*/
/* #region Category Top IMG*/
/*Container class to hold the image*/
.top_IMG {
    position: relative !important; /* needed for the absolutely-positioned text */
    width: 100% !important;
    height: 100vh !important;
    /* Using flex to center the image if needed  */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important; /* ensures no scrollbar if image is large */
}

    /*
            Ensure the image fits 100% by 100%,
            using object-fit to manage aspect ratio.
            - cover: image will fill container but may crop
            - contain: will show entire image but may add padding  */
    .top_IMG img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /*
         * This class will overlay the text on top of the image
         * vertically centered but left-aligned
         */
    .top_IMG .overlay-text {
        position: absolute !important;
        top: 50% !important;
        left: 100px !important;
        transform: translateY(-50%) !important;
        color: #fff !important;
        font-family: 'AvenirLTStd-Heavy' !important;
        font-weight: 900 !important;
    }
        /* Default (large screens) */
        .top_IMG .overlay-text .line1 {
            font-size: 20px !important;
        }

        .top_IMG .overlay-text .line2 {
            font-size: 104px !important;
        }

/* Medium screens */
@media (max-width: 1200px) {
    .top_IMG .overlay-text .line1 {
        font-size: 20px !important;
    }

    .top_IMG .overlay-text .line2 {
        font-size: 70px !important;
    }

    .top_IMG .overlay-text {
        left: 70px !important;
    }

    .Row_Title {
        font-size: 64px !important;
        
    }

}

/* Small screens */
@media (max-width: 620px) {
    .top_IMG .overlay-text .line1 {
        font-size: 20px !important;
    }

    .top_IMG .overlay-text .line2 {
        font-size: 50px !important;
    }

    .top_IMG .overlay-text {
        left: 30px !important;
    }

    .Row_Title {
        padding-top: 30px !important;
        font-size: 30px !important;
    }
}
/* #endregion*/
/*===================End-Category Top IMG Style==========================*/


/*===================Start- Projects =============================================*/
/* #region Projects Products*/

/* ================Start- project image of project as body=========================*/
.image-container-middle {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center; /* Center the content horizontally */
}

    /* Make the img adapt to the width while maintaining aspect ratio */
    .image-container-middle .image-fit {
        max-width: 80%; /* Limit image width to 80% of the screen width */
        height: auto; /* Maintain aspect ratio based on width */
        object-fit: contain; /* Ensures the image is not stretched or cropped */
        transition: transform 0.4s ease; /* Smooth transition effect */
    }

/* Zoom in on hover */
        .image-container-middle .image-fit:hover {
            transform: scale(1.05);
        }
/* ================End- project image of project as body=========================*/


/* ================Start- image of products=========================*/
.image-container-square {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 16:9 aspect ratio */
    overflow: hidden;
}

    /* Make the img fill .img-container while maintaining aspect ratio */
    .image-container-square .image-fit {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures the image covers the container */
        /* Smooth transition effect, 0.4s */
        transition: transform 0.4s ease;
    }

        /* Zoom in on hover */
        .image-container-square .image-fit:hover {
            transform: scale(1.05);
        }
/* ================End- image of products=========================*/

/* #endregion*/
/*===================End- Projects image of products=======================*/

/*===================Start-Category Row image text Style==========================*/
/* #region CategoryList*/
/* Container to fix ratio and hide overflow */

.image-container {
    position: relative;
    width: 100%;
    height: 100% !important;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
}


    /* Make the img fill .img-container while maintaining aspect ratio */
    .image-container .image-fit {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Ensures the image covers the container */
        /* Smooth transition effect, 0.4s */
        transition: transform 0.4s ease;
    }

        /* Zoom in on hover */
        .image-container .image-fit:hover {
            transform: scale(1.05);
        }

/*
Row_Title:
Bold, relatively large text.
Adjust font-size to your preference.
*/
.Row_Title {
    font-weight: bold;
    font-size: 64px;
    margin: 0; /* some spacing above/below */
    color: black;
}

/*
Row_Des:
Responsive text size that wraps if it doesn't fit.
By default, text in a <p> will wrap, so just ensure no forced nowrap is set.
Optionally use clamp() or media queries for fluid sizing.
*/
.Row_Des {
    font-size: 16px;
    margin: 0.5em 0;
    /*
    white-space: normal; is default for <p> but
    included here for clarity (and in case of overrides).
    */
    white-space: normal;
    font-weight: 700;
    color: #212B36;
}

/*
Row_Btn:
The container only. We'll style the button inside it.
*/
.Row_Btn {
    font-size: 15px;
    font-weight: 900;
    margin: 0px;
}

    /*
Style the button:
- Black border
- White background
- Black text
- On hover: inverted colors
*/
    .Row_Btn button {
        border: 1px solid #000;
        background-color: #fff;
        color: #000;
        padding: 0.5em 1em;
        cursor: pointer;
        transition: background-color 0.2s, color 0.2s;
        font-weight: 800 !important;
    }

        .Row_Btn button:hover {
            background-color: #000;
            color: #fff;
        }
/* Medium screens */
@media (max-width: 1200px) {
    .Row_Title {
        font-size: 64px !important;
    }
}

/* Small screens */
@media (max-width: 620px) {
    .Row_Title {
        padding-top: 30px !important;
        font-size: 30px !important;
    }
}
/* #endregion*/
/*===================End-Category Row image text Style==========================*/




/*===================Start-Category Record Top side/ SubCat detail==============*/
/* #region Category Record Detail*/

.Row_Title_Thin {
    font-weight: normal !important;
    font-size: 64px !important;
    margin: 0; /* some spacing above/below */
    color: #333333 !important;
}

/*
Row_Des:
Responsive text size that wraps if it doesn't fit.
By default, text in a <p> will wrap, so just ensure no forced nowrap is set.
Optionally use clamp() or media queries for fluid sizing.
*/
.Row_Des_Light {
    font-size: 18px;
    margin: 0.5em 0;
    /*
    white-space: normal; is default for <p> but
    included here for clarity (and in case of overrides).
    */
    white-space: normal;
    font-weight: 400;
    color: #637381;
}

.Row_Des_WithCSS {
    font-size: 16px !important;
    padding-left: 10% !important;
    font-weight: 500 !important;
    color: #212b36 !important;
}

    .Row_Des_WithCSS p b {
      
        font-family: 'AvenirLTStd-Heavy' !important;
        color: #212b36 !important;
        font-size: 17px !important;
        font-weight: 900 !important;
       
    }

.PL_620_1200 {
    padding-left: 7% !important;
}

    /* Medium screens */
    @media (max-width: 1200px) {
        .Row_Title_Thin {
        font-size: 64px !important;
    }
    .Row_Des_WithCSS {
       
        padding-left: 8% !important;
    }
        .PL_620_1200 {
            padding-left: 7% !important;
        }
}

/* Small screens */
@media (max-width: 620px) {
    .Row_Title_Thin {
        padding-top: 30px !important;
        font-size: 30px !important;
    }
    .Row_Des_WithCSS {
       
        padding-left: 20px !important;
    }

    .PL_620_1200 {
    padding-left:3% !important;
    }
}
/* #endregion*/
/*===================End-Category Record Top side/ SubCat detail================*/





/*===================Start-Category / Record / Products style================*/
/* #region Category-Record-Products*/

.Row_Title_Product {
    padding-top: 30px !important;
    font-size: 17px !important;
    font-weight:900 !important;
}

.Row_Des_Product {
    font-size: 17px !important;
}



.Class_btn_Product_View {
    margin-top: 30px !important;
    text-align: end !important;
}

    .Class_btn_Product_View:hover {
        background-color: #d0d0d0 !important;
        color: black !important;
    }

/* #endregion*/
/*===================End-Category / Record / Products style================*/


/*===================Start-Bold style================*/
/* #region Description Bold Style*/
b {
    font-family: 'AvenirLTStd-Heavy'!important;
    font-weight:900 !important;
    font-synthesis-weight:auto!important;
}
/* #endregion*/
/*===================End-Bold style================*/



/*===================Start-Language icon style================*/
/* #region Language icon*/

/* Prevent dropdown items from wrapping */
#languageDropdownMenu .dropdown-item {
    display:block !important;
    white-space: nowrap !important;
    color: black !important; /* Bootstrap's default text color */
    background-color:white !important;
}

    /* Change color on hover */
    #languageDropdownMenu .dropdown-item:hover,
    #languageDropdownMenu .dropdown-item:focus {
        color: #fff !important;
        background-color: black !important; /* Bootstrap's primary color */
    }

/* Ensure flag icons have proper size and alignment */
.flag-icon {
    width: 20px !important;
    height: 15px !important;
    vertical-align: middle !important;
}

/* #endregion*/
/*===================End-Language icon style================*/




/*===================Start-Home Style================*/
/* #region Home*/
.large_title {
    font-size: 40px;
    font-weight: 900;
    color: white;
}

.med_Title {
    font-size: 20px;
    font-weight: 900;
    color: white;
}

.btn_white {
    font-size: 16px;
    color: white;
    background-color: transparent;
    font-weight: 900;
    border: 1px solid white;
}

    .btn_white:hover {
        color: black;
        background-color: white;
    }

.img-responsive {
    max-height: 15vh; /* Adjust max height as needed */
    width: 100%; /* Ensure full width */
    object-fit: cover; /* Maintain aspect ratio */
}
/* Collections page specific image styling - 16:9 aspect ratio */
.card .item-card-image {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    object-fit: cover !important;
    height: auto !important;
}

/* Categories page top image styling - 100vh height */
.top-card-image {
    width: 100% !important;
    height: 100vh !important;
    min-height:100vh !important;
    max-height:100vh !important;
    object-fit: cover !important;
}

.img-responsive-AboutUs {
    
    width: 100%; /* Ensure full width */
    object-fit: cover; /* Maintain aspect ratio */
}
/* #endregion*/
/*===================End-ABC style================*/



/*===================================Sampl============================*/
/*===================Start-ABC style================*/
/* #region ABC*/

/* #endregion*/
/*===================End-ABC style================*/

/*===================Start-Search Advance Card Styles================*/
/* #region Search Advance Cards */
/* Required CSS for Search Advance - Product Cards */

/* Card Styles */
.product-card {
    margin: 0 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    cursor: pointer !important;
    background: white !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.product-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

.card-image-container {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    overflow: hidden !important;
    background-color: #f8f9fa !important;
}

.card-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
}

.product-card:hover .card-image {
    transform: scale(1.05) !important;
}

.card-body {
    padding: 15px !important;
}

.card-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    color: #333 !important;
    line-height: 1.3 !important;
}

.card-description {
    font-size: 14px !important;
    color: #666 !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.card-specs {
    font-size: 12px !important;
    color: #888 !important;
    margin-bottom: 5px !important;
}

.card-specs strong {
    color: #555 !important;
}

.no-image-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    color: #999 !important;
    font-size: 14px !important;
}

/* Responsive Grid for Search Cards */
.cards-container {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    width: 100% !important;
}

.card-wrapper {
    flex: 0 0 100% !important;
    padding: 5px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Large screens (lg and up) - 3 cards per row */
@media (min-width: 992px) {
    .card-wrapper {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }
}

/* Medium screens (md) - 2 cards per row */
@media (min-width: 768px) and (max-width: 991px) {
    .card-wrapper {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
    
    .cards-container {
        justify-content: flex-start !important;
    }
}

/* Small screens (sm and down) - 1 card per row */
@media (max-width: 767px) {
    .card-wrapper {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .cards-container {
        justify-content: flex-start !important;
    }
}

/* Load More Button for Search */
.load-more-container {
    text-align: center !important;
    margin-top: 30px !important;
}

.btn-load-more {
    background-color: #000 !important;
    color: white !important;
    border: 1px solid #000 !important;
    padding: 10px 30px !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}

.btn-load-more:hover {
    background-color: white !important;
    color: #000 !important;
}

/* No results styling */
.no-results {
    text-align: center !important;
    padding: 40px 20px !important;
    color: #666 !important;
}

/* #endregion */
/*===================End-Search Advance Card Styles================*/

/* Filter Sidebar Styles */
.filter-sidebar {
    background-color: #f8f9fa !important;
    padding: 15px !important;
    border-radius: 5px !important;
    border: 1px solid #dee2e6 !important;
    height: fit-content !important;
    position: sticky !important;
    top: 20px !important;
}

/*===================Start-Category Search Card Styles================*/
/* #region Category Search Cards */
/* Required CSS for Category Search - Category Cards */

.card-subtitle {
    font-size: 14px !important;
    color: #666 !important;
    margin-bottom: 8px !important;
    font-style: italic !important;
}

.card-footer {
    font-size: 11px !important;
    color: #888 !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid #eee !important;
    font-style: italic !important;
}

/*===================End-Category Search Card Styles================*/