.card-description {
    transition: all 0.5s ease-in-out !important;
    text-align: justify;
}
/* Enable mouse grab scrolling */
.info-body {
    cursor: grab;
}
.info-body {
    max-height: 600px;
    overflow-y: auto;
}

.info-body:active {
    cursor: grabbing;
}

.info-body::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.info-body::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Prevent hover effect on .card-body */
.info-body:hover {
        background-color: transparent !important;
        color: inherit;
}

    /* Hover effect on card elements */
.card:hover p,
.card:hover span,
.card:hover i,
.card:hover label {
    color: white !important;
}
.card:hover button {
    color: #000 !important;
    background: white;
}


/* Primary button styles */
.btn-outline-primary {
    cursor: pointer;
}

    .card:hover .text-secondary.fw-bold span {
        color: white !important;
    }

    .card:hover .btn-outline-primary {
        background-color: inherit !important; /* No background change */
        color: inherit !important; /* Keep the original color */
        border-color: inherit !important;
    }

    /* Hover effect for buttons */
    .btn:hover {
        color: #0056b3;
        background-color: #dbe2e9;
        border-color: #0056b3;
    }
/* Normal state for the icon */
.btn-outline-primary .bi-plus-square-fill {
    color: #0053a9 !important; /* Default blue color */
    transition: transform 0.3s ease-in-out; /* Smooth transition */
}

.btn-outline-primary:hover .bi-plus-square-fill {
    transform: rotate(180deg); /* Rotates 180 degrees */
}


/* Ensure HR Management icon changes color on hover */
#hrManagementLabel:hover #hrManagementIcon {
    color: rgb(0, 83, 169) !important;  /* Change icon color on hover */
}


.responsive {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out;
        display: block; /* Keep structure but hide content */

    }
    .responsive.show {
            max-height: 500px; /* Adjust as needed based on content height */

    }
.responsive .option-btn {
        width: 260px; /* Ensure buttons match label */
    }
.responsive ul {
        margin-left: 45px !important; /* Same alignment as Marketplace */
        padding: 0 !important;
        list-style: none;
    }
    /* Ensure HR Options match Marketplace */
.responsive ul li {
        margin-bottom: 0 !important;
    }
    /* Adjust HR option button styling */
.responsive ul li button {
    width: 90% !important; /* Match card-description width */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px !important;
    font-size: 0.80rem;
    text-transform: uppercase;
    line-height: 0.9 !important;
    border: 0;
    color: #fff !important;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    position: relative; /* Needed for absolute positioning */
}
.responsive ul li button:hover {
        background-color: white !important;
        color: rgb(0, 83, 169) !important;
        border: 1px solid rgb(0, 83, 169) !important;
        width: 90% !important;
        padding-left: 5px !important; /* Keeps text alignment */
    }
    /* Ensure icon remains aligned and moves to the right on hover */
.responsive ul li button i {
    font-size: 1rem;
    margin-right: 8px;
}
/* Adjust spacing between spans (Text and Icon) */
.responsive ul li button .toggle-text {
    flex-grow: 1; /* Allow text to take full width */
    text-align: left; /* Ensure proper alignment */
}

/* Ensure icons change color on hover */
.responsive ul li button:hover i {
    color: rgb(0, 83, 169) !important;
}
/* Ensure icon span is flush with the right side */
.responsive ul li button .ms-auto {
    width: 20px !important; /* Set fixed width */
    display: flex;
    align-items: center;
    justify-content: center; /* Center the icon */
    position: absolute;
    right: 0; /* Stick to the right */
    top: 0;
    bottom: 0;
    background-color: transparent; /* No bg by default */
    transition: background-color 0.3s ease-in-out
}
.responsive ul li button:hover .ms-auto {
    width: 16px !important;
}

    /* When options are visible */
    #marketplaceOptions.show,
    #accountManagementOptions.show {
        max-height: 700px; /* Adjust as needed based on content height */
    }
    /* Fix Marketplace button hover animation */

    /* Hover effect for buttons in the list */
    .list-unstyled .btn-outline-primary:hover {
        color: #0056b3 !important;
        background-color: #dbe2e9 !important;
        border-color: #0056b3 !important;
    }

    /* Pricing text default style */
    .pricing-text .icon,
    .pricing-text .per-year {
        font-size: 0.8rem;
        color: #aaa; /* Default color */
    }

    /* Hover effect for pricing text */
    .card:hover .pricing-text .icon,
    .card:hover .pricing-text .per-year,
    .card:hover .pricing-text {
        color: white !important; /* Force white color on hover */
    }

    .card:hover .pricing-text img {
        filter: invert(1);
    }
    /* Normal state */
/* Default card header */
.card-header h5 {
    width: 100%;
    border-radius: 0.25rem;
    transition: all 0.5s;
    background-size: 200%;
    color: black !important;  /* Default text color */
    display: block;
    position: relative;
    box-shadow: 5px 0 15px var(--rgba-primary-4);
    font-size: 14px;
    font-weight: 600;
    background-color: transparent !important; /* No background change */

}

/* Default underline effect on hover */
/*.card-header h5::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 0;*/
/*    bottom: -22px; !* Adjust distance from text *!*/
/*    width: 100%;*/
/*    height: 1px;*/
/*    background-color: transparent; !* Hide underline initially *!*/
/*    transition: background-color 0.3s ease-in-out;*/
/*}*/
.card:hover .card-header h5::after {
    background-color: white; /* Show underline only on hover */
}
/* Hide underline when hovering over buttons inside the card */
.card:hover .toggle-btn:hover ~ .card-header h5::after,
.card:hover .toggle-btn:focus ~ .card-header h5::after,
.card:hover .btn-outline-primary:hover ~ .card-header h5::after,
.card:hover .btn-outline-primary:focus ~ .card-header h5::after {
    background-color: transparent !important; /* Hide underline */
}

/* Keep text white when hovering over buttons */
.card-header:hover h5,
.card-header h5:hover,
.card:hover .card-header h5,
.info-body:hover ~ .card-header h5,
.info-body:focus-within ~ .card-header h5,
button:hover ~ .card-header h5,
button:focus ~ .card-header h5 {
    color: white !important; /* Keep text white on any interaction */
}

.info-expand, .info-body {
    width: 95% !important; /* Ensure it matches the card width */
    max-width: 95%; /* Set maximum width for better alignment */
    margin: 0 auto; /* Center the content */
}
.info-body .card-description {
    width: 100% !important; /* Ensure uniformity */
    max-width: 100%; /* Match collapsible content width */
    text-align: left; /* Ensure proper text alignment */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    padding: 0 !important;  /* Ensure no extra padding when hidden */
    margin-top: 5px !important; /* Remove extra margin */
}

/* When expanded */
.info-body .card-description.show {
    max-height: 400px;
    opacity: 1;
    padding: 15px 20px !important; /* Apply padding only when visible */
    text-align: justify;
}

    /* Card header clickable effect */
    .card-header h5.clickable {
        cursor: pointer;
        margin: 0;
        padding: 10px;
        text-transform: uppercase;
        margin-top: 10px;

    }
    .card, .card-header {
        cursor: default;
    }
    .card-header {
        border-bottom: none !important; /* Remove bottom border */
        background-color: transparent !important; /* Ensure no background */
        height: 75px;
    }
    /* Card body styles */
    .card {
        background-color: white;
        color: black;
        overflow: hidden;
        border: none !important; /* Ensure no border by default */
        border-radius: 10px;
        transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }
      /* Hover effect for the card */
      .card:hover {
        background-color: rgb(0, 83, 169) !important;
        color: white !important;
        transition: background-color 0.3s ease-in-out;
        border: none !important; /* Ensure no border on hover */
    }

    .info-body {
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 10px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    /* Price styles */
    .price {
        font-size: 0.8rem;
        color: #aaa;
    }
    .btn:focus,
    .btn:active {
        outline: none; /* Remove the outline */
        box-shadow: none; /* Remove any box shadow */
        border: none; /* Remove the border */
        background-color: transparent; /* Make the background transparent */
    }

/* Toggle button styles */
.toggle-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    padding: 10px;
    font-size: 0.85rem;
    color: black;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, padding 0.2s ease-in-out;
    padding: 4px 8px; /* Reduce padding */
    line-height: 1; /* Ensures minimal line spacing */
}
.toggle-btn span {
    line-height: 1;
}

.toggle-btn:hover {
    color: #0053a9;
}

/* Toggle icon styling */
.toggle-icon i {
    transition: transform 0.4s ease-in-out;
}
.toggle-btn.active .toggle-icon i {
    transform: rotate(180deg);
}

    .toggle-text {
        cursor: pointer;
        display: inline-block !important;
    line-height: 1 !important;  /* Ensure no extra spacing */
    vertical-align: middle !important;
    padding: 0 !important; /* Remove unnecessary padding */
    margin: 0 !important;
    }

    /* New rule for blue text on hover */
    .btn-outline-primary:hover .toggle-text {
        color: #0056b3 !important; /* Blue color on hover */
    }

.badge-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.badge-container label {
    width: 90%;
    height: 54px;
    display: flex;
}

@media (min-width: 992px) {
    .custom-margin {
        margin-left: -50px;
    }
}
/* Badge Styling */
.badge {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 290px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background-color: rgb(0, 83, 169);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

/*.badge i {*/
/*    font-size: 18px;*/
/*    color: #fff;*/
/*    transition: color 0.3s ease-in-out;*/
/*    margin-right: 15px;*/
/*}*/

/* Badge hover effect */
.badge:hover {
    background-color: white !important;
    color: rgb(0, 83, 169) !important;
    border: 1px solid rgb(0, 83, 169);
}

/* Ensure icon also changes color */
.badge:hover i {
    color: rgb(0, 83, 169) !important; /* Change icon color on hover */
}

/* Hover effect for the badge when the card is hovered */
.card:hover .badge {
    background-color: white !important;
    color: rgb(0, 83, 169) !important;
    border: 1px solid rgb(0, 83, 169);
}
.card:hover .badge i {
    color: rgb(0, 83, 169) !important;
}
/* Apply hover styles permanently to badges in this card */
/* Make entire card blue */
.static-hover-card {
    background-color: rgb(0, 83, 169) !important;
    color: white !important; /* Default text color for card */
}

/* Permanent hover state for badges (unchanged from your perfect version) */
.static-hover-card .badge,
.static-hover-card .badge:hover,
.static-hover-card:hover .badge {
    background-color: white !important;
    color: rgb(0, 83, 169) !important;
    border: 1px solid rgb(0, 83, 169) !important;
}

.static-hover-card .badge i,
.static-hover-card .badge:hover i,
.static-hover-card:hover .badge i {
    color: rgb(0, 83, 169) !important;
}

/* Optional: Remove hover transition */
.static-hover-card .badge {
    transition: none !important;
}

/* Ensure white text for other elements (adjust as needed) */
.static-hover-card .card-title,
.static-hover-card .price-amount,
.static-hover-card .custom-subscription-title {
    color: white !important;
}
@media (max-width: 992px) {  /* For tablets and smaller */
    .badge-container label {
        width: 100%;   /* Full width in small screens */
    }
}
.option-btn {
        display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 290px; /* Match label width */
    padding: 8px 10px; /* Adjust padding */
    background-color: transparent;
    border: 1px solid rgb(0, 83, 169);
    color: rgb(0, 83, 169);
    transition: all 0.3s ease-in-out;
    border-radius: 4px;
    cursor: pointer
    }
    .option-btn .bi-plus-square-fill {
        margin-left: 5px; /* Reduce left spacing */
        font-size: 1rem; /* Adjust icon size */
        color: rgb(0, 83, 169);
    }
    .option-btn .toggle-text {
        flex-grow: 1; /* Ensures text expands */
    }

    .option-btn .d-flex {
        align-items: center;
    }

    .option-btn i.bi-plus-square-fill {
        margin-left: auto; /* Push icon to the right */
        color: rgb(0, 83, 169);
    }

    .option-btn:hover {
        background-color: white !important;
        color: rgb(0, 83, 169) !important;
        border-color: rgb(0, 83, 169) !important;
        width: 300px !important; /* Ensuring the width remains consistent on hover */
    }

    .option-btn:hover i {
        color: rgb(0, 83, 169) !important;
    }

.company-subscription {
    background-color: rgb(0, 83, 169);
    color: white;
    border-radius: 5px;
    border: 1px solid transparent;
    cursor: pointer;
    overflow: hidden;
    height: 68px; /* Adjust initial smaller height as desired */
    transition: background-color 0.3s, color 0.3s, border 0.3s, height 0.3s;
    display: flex;
    align-items: center;
    padding: 5px;
}

/* PNG Image Default state (white) */
.company-subscription img {
    filter: brightness(0) invert(1);
    opacity: 1;
    transition: filter 0.3s, opacity 0.3s;
}
/* Text color Normal (White) */
.company-subscription p,
.company-subscription .pricing-text span,
.company-subscription .pricing-text .per-year {
    color: white !important;
    transition: color 0.3s;
}
/* Image hover state: Blue (Exact Match) */
.company-subscription:hover img {
    filter: brightness(0) saturate(100%) invert(18%) sepia(64%) saturate(3318%) hue-rotate(195deg) brightness(94%) contrast(104%);
    opacity: 1;
}
.container {
    max-height: 100vh; /* Ensures scrolling is possible */
    padding-bottom: 50px;
}
.row {
    max-height: 100vh; /* Ensures row can scroll */
}
hr.my-2 {
    margin: 0; /* Removes space above and below the line */
}
    /* When Administration Center options are visible */
    #adminCenterOptions.show {
        max-height: 500px;
    }

    /* When Approval Management options are visible */
    #approvalManagementOptions.show {
        max-height: 500px;
    }
.underline-hr {
    width: 104%;  /* Increase this value for more width */
    margin-left: 0; /* Align left */
}

#localContentLabel {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 350px; /* Match other sections */
    padding: 10px;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background-color: rgb(0, 83, 169);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
    /* Local Content Label Hover Effect */
    #localContentLabel:hover {
        color: rgb(0, 83, 169) !important;
        background-color: white !important;
        border: 1px solid rgb(0, 83, 169);
    }

    /* Ensure Local Content icon changes color on hover */
    #localContentLabel:hover #localContentIcon {
        color: rgb(0, 83, 169) !important;
    }

    /* Align UL with Marketplace & HR */
#localContentOptions ul {
    margin-left: 40px !important; /* Same alignment as Marketplace */
    padding: 0 !important;
    list-style: none;
}

/* Ensure Local Content buttons match Marketplace & HR */
#localContentOptions ul li {
    margin-bottom: 0 !important;
}

/* Styling for Local Content Buttons */
#localContentOptions ul li button {
    width: 300px !important; /* Match HR & Marketplace */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px !important;
    font-size: 0.80rem;
    text-transform: uppercase;
    line-height: 0.9 !important;
    border: 0;
    color: rgb(108, 117, 125);
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    position: relative; /* Needed for absolute positioning */
}

/* Hover Effect for Local Content Buttons */
#localContentOptions ul li button:hover {
    background-color: white !important; /* Ensure white background */
    color: rgb(0, 83, 169) !important; /* Text turns blue */
    border: 1px solid rgb(0, 83, 169) !important;
    width: 300px !important; /* Keep width fixed */
    padding-left: 5px !important;
}

/* Ensure icons are properly aligned */
#localContentOptions ul li button i {
    font-size: 1rem;
    margin-right: 8px; /* Keep spacing consistent */
}

/* Ensure icon color changes on hover */
#localContentOptions ul li button:hover i {
    color: rgb(0, 83, 169) !important;
}

/* Ensure text stays left-aligned */
#localContentOptions ul li button .toggle-text {
    flex-grow: 1;
    text-align: left !important;
}
#localContentOptions ul li button .ms-auto {
    width: 15px !important; /* Set fixed width */
    display: flex;
    align-items: center;
    justify-content: center; /* Center the icon */
    position: absolute;
    right: 0; /* Stick to the right */
    top: 0;
    bottom: 0;
    background-color: transparent; /* No bg by default */
    transition: background-color 0.3s ease-in-out;
}
#localContentOptions ul li button:hover .ms-auto {
    width: 15px !important;
}

    /* Smooth transition for expandable Local Content options */
    #localContentOptions {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out;
        display: block;
    }

    /* When Local Content options are visible */
    #localContentOptions.show {
        max-height: 500px;
    }


    /* Local Content Description Box */
#localContentDescription {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 1s ease-in-out, opacity 0.8s ease-in-out;
    padding: 0 15px;
    font-size: 14px;
    background-color: #f8f9fa;
    border-top: 1px solid #ddd;
    border-radius: 12px;
    width: 300px !important; /* Match UL width */
}

/* When expanded, allow smooth appearance */
#localContentDescription.show {
    max-height: 600px; /* Adjust based on content */
    opacity: 1;
    padding-top: 15px;
    padding-bottom: 15px;
}

/* Ensure card text remains readable */
#localContentDescription p {
    margin: 0;
    line-height: 1.5;
    font-size: 0.85rem;
    font-weight: 400;
    color: rgb(94, 94, 94);
}
.currency-icon {
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
}
.price-amount {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.5rem;
}

    .company-subscription .pricing-text {
        font-weight: normal;
        font-size: 1rem;
        padding: 0.5rem;
        border-radius: 5px;
    }

    .company-subscription .pricing-text img {
        width: 16px;
        height: 16px;
        vertical-align: middle;
    }

    .company-subscription .per-year {
        font-weight: 100;
        font-size: 14px !important;
    }

    .mb-2 {
        margin-bottom: 0.5rem !important;
    }
 /* Riyal PNG turns white on hover */
 .card:hover .price img {
    filter: brightness(0) invert(1); /* Turns the image white */
    transition: filter 0.3s ease; /* Smooth transition */
}

/* - and + buttons turn white on hover */
.card:hover .btn-outline-secondary {
    background-color: #2196F3; /* Change to your preferred hover color */
    border-color: #2196F3;
    color: black !important; /* Change text color to black */
}

/* - and + buttons turn white when focused (selected) */
.card .btn-outline-secondary:focus {
    background-color: #2196F3; /* Change to your preferred focus color */
    border-color: #2196F3;
    color: black !important; /* Change text color to black */
    box-shadow: none; /* Removes the default Bootstrap focus shadow */
}

/* Switch button styles */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Styles for ON and OFF labels */
.on-off-labels {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center labels */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* Ensure labels don't interfere with the toggle */
}
span {
    line-height: 1.5 !important; /* Increase line height */
    font-size: 0.85rem; /* Adjust font size slightly for better readability */
}
.on-off-labels span {
    font-size: 10px;
    color: white;
    padding: 0 5px;
    transition: opacity 0.3s ease;
}

.on-off-labels .on {
    opacity: 0; /* Hide ON label by default */
}

.on-off-labels .off {
    opacity: 1; /* Show OFF label by default */
}

/* Show ON label when the switch is checked */
input:checked + .slider + .on-off-labels .on {
    opacity: 1;
}

input:checked + .slider + .on-off-labels .off {
    opacity: 0;
}

.custom-toggle-position {
    top: 2.1rem;
    transform: translateX(-10px);
}
.custom-price-position {
    top: 5px;
    transform: translateX(-3px);
    margin: 4px;
}
.custom-toggle-bottom {
    top: 1.9rem;
    transform: translateX(-3px);
}
.custom-package-title {
    font-size: 1.5rem;
}
/* Card Border & Radius */
.custom-card-border {
    border: 1px solid #ddd;
    border-radius: 10px;
}

/* Subscription Box */
.custom-subscription-box {
    line-height: 1.2;
    margin-bottom: 0;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
}

/* Subscription Title */
.custom-subscription-title {
    line-height: 0.8;
    text-transform: capitalize;
}

/* Subscription Sub Text */
.custom-subscription-subtext {
    font-size: 10px;
    font-weight: normal;
    text-align: center;
    text-transform: capitalize;
    line-height: 2 !important;
}
.customproduct-title {
    font-size: 0.80rem;
    text-transform: uppercase;
}
.custom-card {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 10px;
    position: relative;
}
.custom-card-header {
    height: 75px;
}
.custom-card-title {
    margin-top: 10px;
    text-transform: uppercase;
}
.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 4px; /* Box-type shape */
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 4px; /* Box-type shape */
}

input:checked + .slider {
    background-color: #1565C0; /* Dark blue background when checked */
}

input:checked + .slider:before {
    transform: translateX(36px); /* Adjusted for increased width */
}

/* Updated user counter box */
.user-counter-box {
    background-color: white;
    padding: 0px 15px; /* Reduced padding */
    border: 1px solid gainsboro; /* Removed border */
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* - and + buttons inside the white box with no background and no border */
.btn-outline-secondary {
    background-color: transparent !important;
    border: none !important; /* Removed border */
    color: #2196F3;
}

/* - and + buttons turn blue on hover */
.btn-outline-secondary:hover {
    background-color: #2196F3;
    color: white !important;
}

/* - and + buttons turn blue when focused */
.btn-outline-secondary:focus {
    background-color: #2196F3;
    color: white !important;
    box-shadow: none;
}

/* User count style */
#userCount {
    font-size: 1.2rem;
    margin: 0 10px;
    color: black !important; /* Ensure the counter number is always black */
}

/* Ensure counter number remains black when card is hovered */
.card:hover #userCount {
    color: black !important; /* Forces counter number to remain black on hover */
}

.bi-square {
    color: black; /* Icon color */
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5); /* Light black border effect */
}
 /* Riyal PNG turns white on hover */
 .card:hover .price img {
    filter: brightness(0) invert(1); /* Turns the image white */
    transition: filter 0.3s ease; /* Smooth transition */
}

/* - and + buttons turn white on hover */
.card:hover .btn-outline-secondary {
    background-color: #2196F3; /* Change to your preferred hover color */
    border-color: #2196F3;
    color: black !important; /* Change text color to black */
}

/* - and + buttons turn white when focused (selected) */
.card .btn-outline-secondary:focus {
    background-color: #2196F3; /* Change to your preferred focus color */
    border-color: #2196F3;
    color: black !important; /* Change text color to black */
    box-shadow: none; /* Removes the default Bootstrap focus shadow */
}

/* Switch button styles */
.switch {
    position: relative;
    display: inline-block;
    width: 60px; /* Increased width for box-type shape */
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Styles for ON and OFF labels */
.on-off-labels {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center labels */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* Ensure labels don't interfere with the toggle */
}

.on-off-labels .on {
    opacity: 0; /* Hide ON label by default */
}

.on-off-labels .off {
    opacity: 1; /* Show OFF label by default */
}

/* Show ON label when the switch is checked */
input:checked + .slider + .on-off-labels .on {
    opacity: 1;
}

input:checked + .slider + .on-off-labels .off {
    opacity: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 4px; /* Box-type shape */
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 4px; /* Box-type shape */
}

input:checked + .slider {
    background-color: #1565C0; /* Dark blue background when checked */
}

input:checked + .slider:before {
    transform: translateX(36px); /* Adjusted for increased width */
}

/* Updated user counter box */
.user-counter-box {
    background-color: white;
    padding: 2px 15px; /* Reduced padding */
    border: 1px solid gainsboro; /* Removed border */
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* - and + buttons inside the white box with no background and no border */
.btn-outline-secondary {
    background-color: transparent !important;
    border: none !important; /* Removed border */
    color: #2196F3;
}

/* - and + buttons turn blue on hover */
.btn-outline-secondary:hover {
    background-color: #2196F3;
    color: white !important;
}

/* - and + buttons turn blue when focused */
.btn-outline-secondary:focus {
    background-color: #2196F3;
    color: white !important;
    box-shadow: none;
}

/* User count style */
#userCount {
    font-size: 1.2rem;
    margin: 0 10px;
    color: black !important; /* Ensure the counter number is always black */
}

/* Ensure counter number remains black when card is hovered */
.card:hover #userCount {
    color: black !important; /* Forces counter number to remain black on hover */
}

.bi-square {
    color: black; /* Icon color */
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5); /* Light black border effect */
}

     /* Collapsible description styles */
     .card-description {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 1s ease-in-out, opacity 0.8s ease-in-out;
        padding: 0 15px;
        font-size: 14px;
        background-color: #f8f9fa;
        border-top: 1px solid #ddd;
        border-radius: 12px;
        width: 90% !important; /* Match UL width */

    }

    /* When expanded, allow smooth appearance */
    .card-description.show {
        max-height: 650px; /* Adjust based on content */
        opacity: 1;
        padding-top: 10px;
        padding-bottom: 10px;
        border-radius: 10px; /* Ensures rounded corners when shown */
        display: block;
        margin-bottom: 15px;
    }

    /* Ensure card text remains readable */
    .card-description p {
        margin: 0;
        line-height: 1.5;
        font-size: 0.85rem;
        font-weight: 400;
        color: rgb(94, 94, 94);
    }
      /* Icon styles for toggling */
      #toggleDescription {
        cursor: pointer;
    }

    /* Ensure text color is always black and visible */
    .card-description,
    .card-description p {
        color: black !important; /* Force black text color */
    }

    .card:hover .card-description {
        color: black !important; /* Keep the text black even on hover */
    }

/* Ensure hover state keeps text color consistent */
.card:hover .card-description p {
    color: rgb(94, 94, 94) !important;
    line-height: 1.5;
}
/* Collapsible content styles */
.info-expand {
    max-height: 0;
    display: block !important;
    overflow: hidden;
    transition: max-height 1s ease-in-out; /* Slower transition */
}


.info-expand.show {
    max-height: 800px; /* Adjust based on content height */
}

/* Styling for collapsible section buttons */
.info-expand .btn-outline-primary {
    width: 100%;
    text-align: left;
    font-size: 0.75rem; /* Reduced font size */
    font-weight: 100; /* Added font weight */
    text-transform: uppercase;
    padding: 3px 12px;
    border-radius: 5px;
    display: flex;
    align-items: center;

    color: inherit;
    border: 1px solid #ddd;
    transition: all 0.3s ease-in-out;
}

/* Hover effect for buttons */
.info-expand .btn-outline-primary:hover {
    background-color: white !important; /* White background */
    color: #0056b3 !important; /* Keep text blue */
    border-color: #0056b3 !important; /* Keep border blue */
    padding: 3px 12px !important;
}

/* Active button when section is expanded */
.info-expand .btn-outline-primary.active {
    background: #0056b3;
    color: #fff;
}
/* Fix: Keep the icon visible on hover */
.info-expand .btn-outline-primary:hover i {
    color: #0056b3 !important; /* Keep icon blue */
}

/* Styling for the toggle icon inside buttons */
.info-expand .toggle-icon i {
    transition: all 0.6s ease-in-out;
    font-size: 1rem; /* Reduced icon size for balance */
}

/* Rotate icon when active */
.info-expand .btn-outline-primary.active .toggle-icon i {
    transform: rotate(180deg);
}
/* Add margin-left for mobile screens */

.card:hover h3 {
    color: white !important;
}

.card:hover .text-red {
    color: white !important;

}

.text-red {
    color: red;
}

.card:hover .text-red {
    color: white !important;
}
#additionalUserSection strong {
    font-size: 1.1rem; /* ✅ Increase font size */
    font-weight: bold; /* ✅ Make it more prominent */
}
#totalPrice {
    font-size: 1.1rem; /* ✅ Increased font size */
    font-weight: bold; /* ✅ Make it more prominent */
}
#additionalUserText {
    font-size: 1.1rem; /* ✅ Increased font size */

}
#vatAmount{
    font-size: 1.1rem; /* ✅ Increased font size */
    font-weight: bold; /* ✅ Make it more prominent */
}
#totalWithVat{
    font-size: 1.1rem; /* ✅ Increased font size */
    font-weight: bold; /* ✅ Make it more prominent */
}
.card:hover .base-price-img {
    filter: brightness(0) invert(1); /* White on hover */
    transition: filter 0.3s ease-in-out;
}

.base-price-img {
    filter: brightness(0) saturate(100%) invert(14%) sepia(94%) saturate(7484%) hue-rotate(-7deg) brightness(96%) contrast(123%);
    /* Red color */
    transition: filter 0.3s ease-in-out;
}
.underline-hr {
    margin-top: -8px; /* Adjust this value for more or less space */

}
.new-width {
    width: 105%;
}

.dynamic-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dynamic-card:hover {
    transform: scale(1.05); /* Slight zoom effect */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); /* More prominent shadow */
}
.list-unstyled li strong {
    transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
}

.list-unstyled li strong:hover {
    transform: scale(1.08); /* Slight zoom effect */
    opacity: 1; /* Ensure it stays visible */
}
.custom-btn {
    background-color: rgb(0, 83, 169);
    border-color: rgb(0, 83, 169);
}
.custom-btn:hover {
    background-color: #fff; /* Optional: darker on hover */
    border-color: rgb(0, 70, 140);
    font-weight: bold;
}

@media (max-width: 768px) { /* For small screens */
    .col-sm-6 {
        width: 100% !important;
        margin-top: 80px !important;
    }
}
@media (max-width: 767.98px) {
    #localContentOptions btn
    {
        margin-right: 90px; /* Adjust the value as needed */
    }

    #localContentOptions .card-description
    {
        margin-right: 20px; /* Reduce margin for smaller screens */
        max-width: calc(100% - 20px); /* Adjust max-width accordingly */
        margin-left: 5px; /* Reduce left margin for smaller screens */
    }
    .responsive{
        margin-right: 20px; /* Reduce margin for smaller screens */
        max-width: calc(100% - 20px); /* Adjust max-width accordingly */
        margin-left: 5px; /* Reduce left margin for smaller screens */
    }
    .responsive .card-description {
        margin-right: 20px; /* Reduce margin for smaller screens */
        max-width: calc(100% - 20px); /* Adjust max-width accordingly */
        margin-left: 5px; /* Reduce left margin for smaller screens */
    }

    #chatVideoOptions .bi,
    #localContentOptions .bi
    {
        margin-right: 90px; /* Adjust the value as needed */
    }
    .responsive{
        margin-right: 90px;
    }
    .responsive ul li button .ms-auto {
        width: 25px !important; /* Adjust width for smaller screens */
    }

}