@media screen and ( max-width: 400px ){

    li.page-item {

        display: none;
    }

    .page-item:first-child,
    .page-item:nth-child( 2 ),
    .page-item:nth-last-child( 2 ),
    .page-item:last-child,
    .page-item.active,
    .page-item.disabled {

        display: block;
    }
}

.table_form{
    width: 70%;
    border-radius: 20px;
    background-color: #FFF;
}
.table_form td{
    border-radius: 20px;
    padding: 15px;
}
.table_form tr{
    border-radius: 20px;
}

@media (max-width: 576px) {
    .table_form{
        width: 100%;
    }
  }

.ck-editor__editable[role="textbox"] {
    /* editing area */
    min-height: 300px;
}
.ck-content .image {
    /* block images */
    max-width: 80%;
    margin: 20px auto;
}

.breadcrumb-hero {
    position: relative; /* Crucial for positioning the pseudo-element */
    background-image: url('https://via.placeholder.com/1920x300/6c757d/ffffff?text=Your+Background+Image'); /* Your original image URL */
    background-size: cover;
    background-position: center;
    padding: 80px 0; /* Adjust padding as needed for vertical spacing */
    color: #fff; /* Text color for the breadcrumb and heading */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Optional: add text shadow for readability */
    z-index: 1; /* Ensure the content (breadcrumb, heading) is above the overlay */
    overflow: hidden; /* Important for some scenarios, prevents pseudo-element overflow */
}

/* --- Start: Code to reduce background image brightness --- */
.breadcrumb-hero::before {
    content: ""; /* Essential for pseudo-elements */
    position: absolute; /* Position relative to .breadcrumb-hero */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* This is the key: a semi-transparent black overlay */
    background-color: rgba(0, 0, 0, 0.4); /* 0.4 means 40% opacity black. Adjust this value! */
                                        /* Higher value (e.g., 0.6) = darker image */
                                        /* Lower value (e.g., 0.2) = less dark image */
    z-index: -1; /* Places the overlay *behind* the content of .breadcrumb-hero */
}
/* --- End: Code to reduce background image brightness --- */


.breadcrumb-hero .breadcrumb {
    background-color: transparent; /* Make Bootstrap's default breadcrumb background transparent */
    padding: 0; /* Remove default padding */
    margin-bottom: 1rem; /* Adjust margin as needed */
}

.breadcrumb-hero .breadcrumb-item a {
    color: #dee2e6; /* Lighter color for links */
    text-decoration: none;
}

.breadcrumb-hero .breadcrumb-item a:hover {
    color: #ffffff; /* White on hover */
}

.breadcrumb-hero .breadcrumb-item.active {
    color: #ffffff; /* White for the active item */
}

.breadcrumb-hero .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.7); /* Lighter separator */
}

/* Ensure the content inside the hero is above the overlay */
.breadcrumb-hero > .container {
    position: relative; /* Necessary if children elements need to have their own z-index context */
    z-index: 2; /* Ensures content is definitely above the -1 z-index of ::before */
}

.bg-primary {
    background-color: #ff914d !important;
}

.form-control {
   font-size: 1.8rem;
}

.btn-gradient {
  background: linear-gradient(90deg, #28a745 0%, #00c851 100%);
  color: #fff;
  border: none;
  transition: box-shadow 0.2s;
}
.btn-gradient:hover,
.btn-gradient:focus {
  box-shadow: 0 4px 16px rgba(40, 167, 69, 0.2);
  color: #fff;
}

.form-select,
.form-control {
  border-radius: 0.4rem;
  min-height: 44px;
}

.card {
  border-radius: 0.5rem;
}

.card-header {
  border-bottom: none;
}

.btn-outline-primary {
color: #ff914d;
}

.text-primary {
color: #ff914d !important;
}

.btn-outline-primary {
    --bs-btn-color: #ff914d;
    --bs-btn-border-color: #ff914d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ff914d;
    --bs-btn-hover-border-color: #ff914d;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ff914d;
    --bs-btn-active-border-color: #ff914d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ff914d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #ff914d;
    --bs-gradient: none;
}