/* ==========================================================================
   Main Stylesheet
   ========================================================================== */

/* ==========================================================================
   1. Font Imports
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

   /* ==========================================================================
         2. Root Variables & Colors
         ========================================================================== */
   :root {
     --primary-bg-color: #07242b;
     --primary-bg-hover-color: #10313a;
     --hero-text-bg-color:#175a6a;
     --primary-color: #292929;
     --secondary-color: #6c7187;
     --tertiary-color: #8998be;
     --quaternary-color: #57688b;
     --quinary-color: #d4fe00;
     --quinary-hover-color: #abcc07;
     --footer-color: #ffffff;
     --footer-hover-color: #c5c5c5;
     --orange-color: #f57f1e;
     --orange-hover-color: #d16b17;
     --senary-color: #606060;
     --card-bg: #f4f5f9;
     --default-text-color: #202020;
     --light-bg-color: #e1e1e140;
     --color-white: #ffffff;
     --color-black: #141414;
     --sidebar-text-color: #cccccc;
     --sidebar-text-hover-color: #afafaf;
   }

   /* ==========================================================================
         3. Base Styles & Reset
         ========================================================================== */
   body {
     font: 14px/25px "inter";
     font-weight: 400;
     background-color: #fff;
     color: var(--default-text-color);
   }

   a {
     text-decoration: none;
     color: inherit;
   }

   .show-item {
     display: block;
   }
   .hide-item {
     display: none;
   }

   @keyframes shake {
     0% {
       transform: rotate(0deg);
     }
     10% {
       transform: rotate(-10deg);
     }
     20% {
       transform: rotate(10deg);
     }
     30% {
       transform: rotate(-10deg);
     }
     40% {
       transform: rotate(10deg);
     }
     50% {
       transform: rotate(0deg);
     }
     100% {
       transform: rotate(0deg);
     }
   }

   .content-breadcrumb{
    text-align: right;
   }

   .not-found{
    color: var(--primary-bg-color);
   }

   .not-found p{
    margin-bottom: -5px;
   }

   .not-found h5{
    font-size: 17px;
   }


   .shake-animation {
     display: inline-block;
     animation: shake 0.6s infinite;
   }

   .height-300 {
     max-height: 300px;
     min-height: 300px;
   }

   .height-500 {
     max-height: 500px;
     min-height: 300px;
   }

   .pagination {
     --bs-pagination-color: #9196a5;
     --bs-pagination-bg: #ffffff;
     --bs-pagination-border-color: #d3d3d3;
     --bs-pagination-hover-color: #9196a5;
     --bs-pagination-hover-bg: #e5e5e5;
     --bs-pagination-hover-border-color: #d3d3d3;
     --bs-pagination-focus-color: #8b95a5;
     --bs-pagination-focus-bg: var(--primary-bg-color);
     --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var;
     --bs-pagination-active-color: #fff;
     --bs-pagination-active-bg: var(--primary-bg-hover-color);
     --bs-pagination-active-border-color: var(--primary-bg-hover-color);
     --bs-pagination-disabled-color: rgb(145 150 165);
     --bs-pagination-disabled-bg: #dfdfdf;
     --bs-pagination-disabled-border-color: #d3d3d3;
   }
   .accordion {
     --bs-accordion-btn-active-icon: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgMzMwIDMzMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9IiI+PGc+PHBhdGggZD0iTTMyNS42MDcgNzkuMzkzYy01Ljg1Ny01Ljg1Ny0xNS4zNTUtNS44NTgtMjEuMjEzLjAwMWwtMTM5LjM5IDEzOS4zOTNMMjUuNjA3IDc5LjM5M2MtNS44NTctNS44NTctMTUuMzU1LTUuODU4LTIxLjIxMy4wMDEtNS44NTggNS44NTgtNS44NTggMTUuMzU1IDAgMjEuMjEzbDE1MC4wMDQgMTUwYTE0Ljk5OSAxNC45OTkgMCAwIDAgMjEuMjEyLS4wMDFsMTQ5Ljk5Ni0xNTBjNS44NTktNS44NTcgNS44NTktMTUuMzU1LjAwMS0yMS4yMTN6IiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIxIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iIi8+PC9nPjwvc3ZnPg==);
     --bs-accordion-btn-focus-box-shadow: none;
    }

   .card {
     --bs-card-title-spacer-y: 0.5rem;
     --bs-card-title-color: ;
     --bs-card-subtitle-color: ;
     --bs-card-border-width: var(--bs-border-width);
     --bs-card-border-color: var(--bs-border-color-translucent);
     --bs-card-border-radius: var(--bs-border-radius);
     --bs-card-box-shadow: ;
     --bs-card-inner-border-radius: calc(
       var(--bs-border-radius) - (var(--bs-border-width))
     );
     --bs-card-cap-padding-y: 0.5rem;
     --bs-card-cap-padding-x: 1rem;
     --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
     --bs-card-cap-color: ;
     --bs-card-height: ;
     --bs-card-color: ;
     --bs-card-bg: var(--bs-body-bg);
     --bs-card-img-overlay-padding: 1rem;
     --bs-card-group-margin: 0.75rem;
     position: relative;
     display: flex;
     flex-direction: column;
     min-width: 0;
     word-wrap: break-word;
     background-clip: border-box;
     box-shadow: 0px 0px 3px 1px rgb(0 0 0 / 4%);
     border-radius: 0.8rem;
     transition: 0.3s;
     border: none;
   }
   .card:hover {
     --bs-card-title-spacer-y: 0.5rem;
     --bs-card-title-color: ;
     --bs-card-subtitle-color: ;
     --bs-card-border-width: var(--bs-border-width);
     --bs-card-border-color: var(--bs-border-color-translucent);
     --bs-card-border-radius: var(--bs-border-radius);
     --bs-card-box-shadow: ;
     --bs-card-inner-border-radius: calc(
       var(--bs-border-radius) - (var(--bs-border-width))
     );
     --bs-card-cap-padding-y: 0.5rem;
     --bs-card-cap-padding-x: 1rem;
     --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
     --bs-card-cap-color: ;
     --bs-card-height: ;
     --bs-card-color: ;
     --bs-card-bg: var(--bs-body-bg);
     --bs-card-img-overlay-padding: 1rem;
     --bs-card-group-margin: 0.75rem;
     position: relative;
     display: flex;
     flex-direction: column;
     min-width: 0;
     word-wrap: break-word;
     background-clip: border-box;
     box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 8%);
     border-radius: 0.3rem;
   }

   .dropdown-menu {
     --bs-dropdown-zindex: 1000;
     --bs-dropdown-min-width: 13.5rem;
     --bs-dropdown-padding-x: 0;
     --bs-dropdown-padding-y: 0.65rem;
     --bs-dropdown-spacer: 0.125rem;
     --bs-dropdown-font-size: 0.875rem;
     --bs-dropdown-bg: #ffffff;
     --bs-dropdown-border-color: rgb(183 183 183 / 18%);
     --bs-dropdown-border-radius: 0.3rem;
     --bs-dropdown-divider-margin-y: 0.5rem;
     --bs-dropdown-link-active-color: #fff;
     --bs-dropdown-link-active-bg: var(--primary-color);
     --bs-dropdown-item-padding-x: 1rem;
     --bs-dropdown-item-padding-y: 0.25rem;
     --bs-dropdown-header-color: #6c757d;
     --bs-dropdown-header-padding-x: 1rem;
     --bs-dropdown-header-padding-y: 0.4rem;
     position: absolute;
     display: none;
     margin: 0;
     text-align: left;
     list-style: none;
     background-clip: padding-box;
     border-radius: 0.675rem;
   }

   /* ==========================================================================
         4. Typography & Text Utilities
         ========================================================================== */

   /**** Font Weights ***/
   .fw-200 {
     font-weight: 200;
   }
   .fw-300 {
     font-weight: 300;
   }
   .fw-400 {
     font-weight: 400;
   }
   .fw-500 {
     font-weight: 500;
   }
   .fw-600 {
     font-weight: 600;
   }
   .fw-700 {
     font-weight: 700;
   }
   .fw-800 {
     font-weight: 800;
   }
   .fw-900 {
     font-weight: 900;
   }
   .fw-bold {
     font-weight: bold;
   }

   /**** Font Sizes ***/
   .fs-12 {
     font-size: 0.75rem;
   }
   .fs-14 {
     font-size: 0.875rem;
   }
   .fs-nav-14 {
     font-size: 0.875rem;
   }
   .fs-nav-15 {
     font-size: 0.938rem;
   }
   .fs-15 {
     font-size: 0.938rem;
   }
   .fs-16 {
     font-size: 1rem;
   }
   .fs-17 {
    font-size: 1.063rem;
  }
   .fs-18 {
     font-size: 1.125rem;
   }
   .fs-20 {
     font-size: 1.25rem;
   }
   .fs-22 {
     font-size: 1.375rem;
   }
   .fs-24 {
     font-size: 1.5rem;
   }
   .fs-26 {
     font-size: 1.625rem;
   }
   .fs-28 {
     font-size: 1.75rem;
   }
   .fs-30 {
     font-size: 1.875rem;
   }
   .fs-32 {
     font-size: 2rem;
   }
   .fs-34 {
     font-size: 2.125rem;
   }
   .fs-36 {
     font-size: 2.2rem;
   }
   .fs-40 {
     font-size: 2.5rem;
   }

   /* ==========================================================================
         5. Text Colors & Links
         ========================================================================== */
   .text-system-color {
     color: var(--primary-color);
   }
   .text-single-color {
     color: var(--senary-color);
   }
   .text-green {
     color: #46c557;
   }
   .text-orange {
     color: var(--orange-color);
   }
   .light-bg {
     background-color: var(--light-bg-color);
   }

   .text-footer-color {
     color: var(--footer-color);
     text-decoration: none;
   }

   .text-footer-color:hover {
    color: var(--footer-hover-color);
    text-decoration: none;
   }

   .user-link {
     margin-right: 1rem;
   }

   .account-link {
     color: var(--primary-color);
     text-decoration: none;
     margin-right: 1rem;
   }

   .login-link {
     text-decoration: none;
     margin-right: 1rem;
   }

   /* ==========================================================================
         6. Form Elements
         ========================================================================== */

   .forms {
     display: block;
     width: 100%;
     padding: 0.375rem 0.75rem;
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
     color: var(--primary-bg-color);
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     background-clip: padding-box;
     border: #dfdfdf 1px solid;
     border-radius: 0.375rem;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   }

   .forms:focus {
     border-color: #dfdfdf;
     outline: 0;
   }

   .form-control {
     display: block;
     width: 100%;
     padding: 0.375rem 0.75rem;
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
     color: var(--bs-body-color);
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     background-color: var(--bs-body-bg);
     background-clip: padding-box;
     border: var(--bs-border-width) solid var(--bs-border-color);
     border-radius: 0.375rem;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   }

   .form-control[type="file"] {
     overflow: hidden;
   }
   .form-control[type="file"]:not(:disabled):not([readonly]) {
     cursor: pointer;
   }
   .form-control:focus {
     color: var(--bs-body-color);
     background-color: var(--bs-body-bg);
     border-color: var(--secondary-color);
     outline: 0;
     box-shadow: 0 0 0 0.25rem rgba(13, 109, 253, 0);
   }

   .form-select-search {
     background-color: var(--secondary-color);
     border-color: var(--secondary-color);
     color: var(--color-white);
   }
   .form-select-search:focus {
     background-color: var(--secondary-color);
     border-color: var(--secondary-color);
     color: var(--color-white);
   }

   .form-round {
     display: block;
     width: 100%;
     padding: 0.475rem 0.95rem;
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
     color: #757676;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     background-clip: padding-box;
     border: #dfdfdf 1px solid;
     border-radius: 0.375rem;
     height: 3rem;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   }

   .form-round:focus {
     border-color: #dfdfdf;
     outline: 0;
   }


   .form-login {
     display: block;
     width: 100%;
     padding: 0.475rem 2.95rem;
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
     color: var(--primary-bg-color);
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     background-clip: padding-box;
     border: #dfdfdf 1px solid;
     border-radius: 0.375rem;
     height: 3rem;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   }

   .form-login:focus {
     border-color: #dfdfdf;
     outline: 0;
   }

   .form-textarea {
     width: 100%;
     border: none;
     border-radius: 1rem;
     box-shadow: 0px 0px 5px 1px #0000001f;
     padding: 1rem;
     color: #707070;
   }

   .form-textarea:focus {
     border: 0 none #fff;
     overflow: hidden;
     outline: none;
   }

   .form-check-input:checked {
     background-color: var(--primary-color);
     border-color: var(--primary-color);
   }

   /* ==========================================================================
         7. Search Components
         ========================================================================== */


   .search-container {
     background-color: white;
     border-radius: 0.375rem;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
     padding: 10px;
     max-width: 500px;
     width: 100%;
     transition: all 0.3s ease;
    }

    .search-container:hover {
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }

    .form-control.search-input {
     border: none;
     background: transparent;
     padding-left: 20px;
     font-size: 1rem;
     height: 50px;
    }

    .form-control.search-input:focus {
     box-shadow: none;
     outline: none;
    }

    .search-icon {
     color: #6c757d;
     position: absolute;
     left: 15px;
     top: 50%;
     transform: translateY(-50%);
    }

   /* ==========================================================================
         8. Button Styles
         ========================================================================== */
   .button {
     display: inline-block;
     padding: 0.5rem 1rem;
     border-radius: 0.375rem;
     text-align: center;
     text-decoration: none;
     cursor: pointer;
     transition: background-color 0.3s;
     border: none;
     outline: none;
   }

   .btn-system-primary {
     background-color: var(--primary-bg-color);
     color: var(--color-white);
     border-radius: 0.375rem;
   }
   .btn-system-primary:hover {
     background-color: var(--primary-bg-hover-color);
     color: var(--color-white);
     border-radius: 0.375rem;
   }

   .btn-system-round-primary {
     background-color: var(--primary-bg-color);
     color: var(--color-white);
     border-radius: 2rem;
   }
   .btn-system-round-primary:hover {
     background-color: var(--primary-bg-hover-color);
     color: var(--color-white);
     border-radius: 2rem;
   }

    .btn-mobile-account {
     background-color: var(--primary-bg-color);
     color: var(--color-white);
     border-radius: 2rem;
     width: 38px;
     height: 38px;
     padding: 5px;
    }

    .btn-mobile-account:hover{
     background-color: var(--primary-bg-color);
     color: var(--color-white);
     border-radius: 2rem;
     width: 38px;
     height: 38px;
     padding: 5px;
    }

   .btn-outline-default {
     border: 1px solid var(--primary-color);
     color: var(--primary-color);
     border-radius: 1rem;
     padding: 16px;
   }
   .btn-outline-default:hover {
     border: 1px solid var(--primary-color);
     background-color: #e9effc;
     color: var(--primary-color);
     border-radius: 1rem;
     padding: 16px;
   }

   .btn-outline-message {
     border: 1px solid var(--quaternary-color);
     color: var(--quaternary-color);
     border-radius: 1rem;
     padding: 16px;
   }
   .btn-outline-message:hover {
     border: 1px solid var(--primary-color);
     background-color: #e9effc;
     color: var(--primary-color);
     border-radius: 1rem;
     padding: 16px;
   }
   .btn-system-contact {
     background-color: var(--primary-bg-color);
     color: var(--color-white);
   }
   .btn-system-contact:hover {
     background-color: var(--primary-bg-hover-color);
     color: var(--color-white);
     border-radius: 2rem;
   }

   .btn-green {
     background-color: var(--quinary-color);
     color: var(--primary-bg-color);
     border-radius: 2rem;
   }

   .btn-green:hover {
     background-color: var(--quinary-hover-color);
     color: var(--primary-bg-color);
     border-radius: 2rem;
   }

   .btn-my-complaint {
     background-color: #f1ad2f1c;
     color: #f1ad2f;
     border-radius: 2rem;
   }

   .btn-my-complaint:hover {
     background-color: #f1ad2f3a;
     color: #f1ad2f;
     border-radius: 2rem;
   }

   .btn-back-home {
     background-color: #e6497812;
     color: #e64978;
     border-radius: 2rem;
   }

   .btn-back-home:hover {
     background-color: #e6497831;
     color: #e64978;
     border-radius: 2rem;
   }

   .btn-to-complaint {
     background-color: var(--quinary-color);
     color: var(--primary-bg-color);
     border-radius: 0.375rem;
   }

   .btn-to-complaint:hover {
     background-color: var(--quinary-hover-color);
     color: var(--primary-bg-color);
     border-radius: 0.375rem;
   }

   .btn-custom {
     background-color: var(--quinary-color);
     color: var(--color-white);
     font-weight: bold;
   }
   .btn-custom:hover {
     background-color: var(--quinary-hover-color);
   }
   .btn-brand-primary {
     background-color: var(--primary-bg-color);
     color: var(--color-white);
     border-radius: 0.375rem;
   }

   .btn-brand-action {
     background-color: var(--quinary-color);
     color: var(--color-white);
     border-radius: 0.375rem;
   }

   .btn-border-custom {
     background-color: var(--primary-bg-color);
     border-radius: 2rem;
     width: 3rem;
     height: 3rem;
     color: var(--color-white);
   }

   .btn-border-custom:hover {
     background-color: var(--primary-bg-hover-color);
     border-radius: 2rem;
     width: 3rem;
     height: 3rem;
     color: var(--color-white);
   }

   .btn-border {
     background-color: var(--primary-bg-color);
     border-radius: 2rem;
     color: var(--color-white);
     padding: 10px 35px 10px 35px;
   }

   .btn-border:hover {
     background-color: var(--primary-bg-hover-color);
     border-radius: 2rem;
     color: var(--color-white);
   }

   .btn-search {
     background: var(--primary-bg-color);
     color: var(--color-white);
     padding: 0.775rem;
     border-radius: 0.575rem;
   }

   .btn-search:hover {
    background: var(--primary-bg-hover-color);
    color: var(--color-white);
    padding: 0.775rem;
    border-radius: 0.575rem;
  }

   .btn-read {
     background-color: var(--primary-bg-color);
     border-radius: 2rem;
     color: var(--color-white);
     padding: 10px 35px 10px 35px;
   }

   .btn-read:hover {
     background-color: var(--primary-bg-hover-color);
     border-radius: 2rem;
     color: var(--color-white);
   }

   .btn-brand-save {
    background-color: var(--primary-bg-color);
    border-radius: 0.375rem;
    color: var(--color-white);
  }

  .btn-brand-save:hover {
    background-color: var(--primary-bg-hover-color);
    border-radius: 0.375rem;
    color: var(--color-white);
  }

  .btn-more-brand{
    background-color: var(--quinary-color);
    color: var(--primary-bg-color);
  }
  .btn-more-brand:hover{
    background-color: var(--quinary-hover-color);
    color: var(--primary-bg-color);
  }

   .btn-table-action {
     background-color: var(--primary-bg-color);
     color: var(--color-white);
     border-radius: 2rem;
     font-size: 13px;
   }

   .btn-table-action:hover {
     background-color: var(--primary-bg-hover-color);
     color: var(--color-white);
   }

   .btn-outline-custom-primary {
     background-color: var(--color-white);
     border-color: var(--primary-bg-color);
     color: var(--primary-color);
     border-radius: 7px;
   }

   .btn-outline-custom-primary:hover {
     background-color: var(--color-white);
     border-color: var(--primary-bg-color);
     color: var(--primary-color);
     border-radius: 7px;
   }

   .btn-outline-custom-primary.active {
     background-color: var(--primary-bg-color);
     border-color: var(--primary-bg-color);
     color: var(--color-white);
     border-radius: 7px;
   }

   .accordion-button {
    border-bottom: 1px solid #ddd;
   }

   .accordion-button:not(.collapsed) {
     color: var(--color-white);
     background-color: var(--primary-bg-color);
   }

   .faq-primary {
     position: relative;
     display: flex;
     align-items: center;
     width: 100%;
     padding: 1rem 1rem;
     font-size: 1rem;
     color: var(--color-dark);
     text-align: left;
     border: 0;
     border-radius: 0;
     overflow-anchor: none;
     transition: 0.3s;
     background-color: var(--color-white);
   }

   .faq-primary:not(.collapsed) {
     color: var(--color-white);
     background-color: var(--primary-bg-color);
   }
   .faq-primary:not(.collapsed)::after {
     background-image: var(--bs-accordion-btn-active-icon);
     transform: var(--bs-accordion-btn-icon-transform);
   }
   .faq-primary::after {
     flex-shrink: 0;
     width: var(--bs-accordion-btn-icon-width);
     height: var(--bs-accordion-btn-icon-width);
     margin-left: auto;
     content: "";
     background-image: var(--bs-accordion-btn-icon);
     background-repeat: no-repeat;
     background-size: var(--bs-accordion-btn-icon-width);
     transition: var(--bs-accordion-btn-icon-transition);
   }

   .faq-primary:hover {
     z-index: 2;
   }
   .faq-primary:focus {
     z-index: 3;
     outline: 0;
   }

   .btn-item-default {
     border: 1px solid var(--tertiary-color);
     color: var(--primary-color);
     border-radius: 1rem;
     padding: 16px;
   }
   .btn-item-default:hover {
     border: 1px solid var(--quaternary-color);
     background-color: #e9effc;
     color: var(--primary-color);
     border-radius: 1rem;
     padding: 16px;
   }

   /** SOCIAL BUTTON */

   .btn-google {
     background-color: #db4437;
     color: var(--color-white);
     border-radius: 0.375rem;
   }
   .btn-google:hover {
     background-color: #c7392d;
     color: var(--color-white);
     border-radius: 0.375rem;
   }

   .btn-github {
     background-color: #333333;
     color: var(--color-white);
     border-radius: 0.375rem;
   }
   .btn-github:hover {
     background-color: #242323;
     color: var(--color-white);
     border-radius: 0.375rem;
   }


   /* ==========================================================================
         9. Background Styles
         ========================================================================== */
   .bg-default {
     background-color: var(--primary-bg-color);
   }
   .bg-default-secondary {
     background-color: var(--primary-bg-hover-color);
   }
   .bg-admin {
     background-color: var(--color-black);
   }
   .bg-orange {
     background-color: rgb(240, 125, 30);
   }
   .bg-gr-complaint {
     background: url("../../../img/slide1.webp") center center / cover no-repeat;
     position: relative;
   }
   .bg-brand {
     background: linear-gradient(8deg, var(--primary-bg-color), var(--primary-bg-hover-color));
   }
   .bg-gr-default {
     background: var(--primary-bg-color);
     border-radius: 0px 120px 0px 120px;
   }
   .bg-hero{
    background-color: var(--quinary-color);
   }
   .user-panel {
     background-color: #f0f0f0;
   }

   /* ==========================================================================
      10. Card & Content & Miscellaneous Components
      ========================================================================== */
   .custom-container {
     --bs-gutter-x: 1.5rem;
     --bs-gutter-y: 0;
     width: 88%;
     padding-right: calc(var(--bs-gutter-x) * 0.5);
     padding-left: calc(var(--bs-gutter-x) * 0.5);
     margin-right: auto;
     margin-left: auto;
   }

   .or h6 {
     color: var(--quaternary-color);
     position: relative;
     background-color: #f9f9f9;
     padding: 0 14px;
     display: inline-block;
     text-transform: uppercase;
   }

   .or {
     margin: 0.9rem;
     text-align: center;
     position: relative;
   }

   .or::before {
     content: "";
     position: absolute;
     top: 50%;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     width: 100%;
     height: 1px;
     left: 0;
     background-color: #ddd;
     z-index: 0;
   }

   .hero-image {
     position: absolute;
     right: 5%;
     bottom: -5%;
     width: 35%;
   }
   .popular-searches {
     font-size: 0.9rem;
     color: var(--color-white);
     margin-top: 1rem;
   }
   .slick-slider {
     z-index: 999;
   }

   .slider-subtitle {
     background: var(--primary-bg-color);
     padding: 0.438rem;
     border-radius: 2rem;
     color: var(--color-white);
    }

   .content-header {
     background-color: #f0f0f08f;
     padding: 10px;
   }

   .hero-section {
     text-align: left;
     padding: 4rem 0;
     position: relative;
     z-index: 9;
     color: var(--primary-bg-color);
   }

   .hero-section .form-control{
    padding: 0.775rem 0.75rem;
    border-radius: 0.575rem;
   }

   .hero-section p{
    font-size: 20px;
   }
    .hero-title {
     font-size: 70px;
     font-weight: bold;
     margin-bottom: 1rem;
     line-height: 80px;
    }

   .hero-title span {
     color: var(--hero-text-bg-color);
   }
   .search-bar {
     margin-top: 2rem;
     background: var(--color-white);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     border-radius: 2rem;
   }

   .search-bar .form-select,
   .search-bar .form-control {
     border-radius: 0.5rem;
   }

   .search-bar {
     margin: auto auto;
   }

   .search-bar .input-group {
     border-radius: 30px;
     overflow: hidden;
   }

   .search-bar .form-control {
     border: none;
     padding-left: 20px;
     width: 250px;
   }

   .search-bar .btn {
     border: none;
     padding: 10px 20px;
   }

   .list-group-item.active {
     z-index: 2;
     color: var(--color-white);
     background-color: var(--primary-bg-color);
     border-color: var(--primary-bg-color);
     padding: 14px;
     font-size: 16px;
   }
   .content-breadcrumb a {
     position: relative;
     display: inline-block;
     text-decoration: none;
     color: #333;
     transition: color 0.3s ease;
    }

    .content-breadcrumb a::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -2px;
     width: 0;
     height: 2px;
     background-color: var(--primary-bg-color);
     transition: width 0.3s ease;
    }

    .content-breadcrumb a:hover::after {
     width: 50%;
    }

   .category-section .card{
     transition: 0.3s;
     border-radius: 20px;
   }

   .category-section .card:hover{
     margin-top: -5px;
     border-radius: 20px;
   }

   .category-section .card-body{
     border-radius: 20px;
     padding: 50px 0px;
     transition: 0.3s;
     border: 1px solid #dfdfdf;
   }

   .category-section .card-image{
     background: #07242bb8;
     border-radius: 10px;
     padding: 10px;
     width: 64px;
     margin: auto;
     margin-bottom: 10px;
   }

   .category-section .card-text{
     margin-top: -12px;
    }

   .category-section .card:hover .card-image {
     background: var(--primary-bg-color);
     transition: 0.3s;
    }

    .category-section h5{
        font-size: 16px;
    }

   .accordion-item {
     margin-top: 8px;
     border: none;
   }

   .help-accordion {
     background-color: var(--color-white);
     padding: 10px;
     box-shadow: 0px 0px 4px 1px #0000000d;
   }
   .help-accordion .accordion-item {
     margin-bottom: 15px;
   }
   .help-accordion .accordion-flush > .accordion-item:first-child {
     border-bottom: 1px solid #edf0ff;
   }
   .help-accordion .accordion-flush > .accordion-item:last-child {
     border-bottom: 1px solid #edf0ff;
   }

   .help-accordion .accordion-item {
     border-bottom: 1px solid #edf0ff;
   }
   .card-custom {
     padding: 20px;
   }
   .card:hover .go-comment {
     background-color: var(--quinary-color);
     color: var(--color-white);
   }

   .badge-custom {
     background-color: #ffc107;
     color: var(--color-white);
     font-weight: bold;
     border-radius: 20px;
     padding: 5px 15px;
   }

   .go-comment {
     width: 2rem;
     height: 2rem;
     background: #f4f5f9;
     border-radius: 2rem;
     text-align: center;
     transition: 0.3s;
     padding-top: 2px;
   }

   .comment-avatar {
     width: 3.125rem;
     height: 3.125rem;
   }

   .sticky-top {
     top: 80px;
   }

   .border-user-hr {
     width: 3rem;
     height: 0.325rem;
     border-radius: 4rem;
     background-color: #c2d8ec9f;
   }

   .category-card {
     background-color: var(--color-white);
     border-radius: 0.25rem;
     padding: 1rem;
     box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
   }
   .category-title {
     font-size: 16px;
     font-weight: 500;
   }
   .category-divider {
     height: 2px;
     background-color: var(--primary-bg-color);
     width: 50px;
   }
   .category-divider-container {
     display: flex;
     align-items: center;
     margin-top: 0.5rem;
     margin-bottom: 1rem;
   }
   .category-divider-line {
     flex-grow: 1;
     height: 2px;
     background-color: #e9ecef;
   }
   .category-item {
     font-size: 14px;
     color: var(--secondary-color);
     display: flex;
     align-items: center;
     margin-bottom: 0.5rem;
   }
   .category-item a {
     position: relative;
     display: inline-block;
     transition: color 0.5s;
   }

   .category-item a::after {
     content: "";
     position: absolute;
     bottom: -2px;
     left: 0;
     width: 0;
     height: 2px;
     background-color: currentColor;
     transition: width 0.5s;
   }

   .category-item a:hover::after {
     width: 100%;
   }
   .category-item i {
     margin-right: 0.5rem;
     font-size: 11px;
   }
   .category-item span {
     margin-left: auto;
   }

   .recent-posts {
     background-color: var(--color-white);
     border-radius: 0.25rem;
     padding: 1rem;
     box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
   }

   .recent-post {
     display: flex;
     flex-wrap: wrap;
     padding-bottom: 20px;
     margin-bottom: 20px;
     border-bottom: 1px solid hsl(var(--black) / 0.1);
   }

   .recent-post:last-of-type {
     padding-bottom: 0px;
     margin-bottom: 0px;
     border-bottom: 0;
   }

   .post-thumb-img {
     width: 80px;
     max-height: 80px;
     display: flex;
     border-radius: 5px;
     overflow: hidden;
   }

   .section-brand .progress {
     height: 8px;
     width: 100%;
   }

   .brand-wire .card{
    border-radius: 10px;
    transition: 0.3s;
   }

   .brand-wire .card:hover{
    margin-top: -5px;
   }

   .brand-wire .card-image{
     width: 120px;
     margin: auto;
   }

   .brand-wire .card-image img{
    border-radius: 4rem;
  }

   .post-thumb-img a {
     display: block;
     height: 100%;
     width: 100%;
   }

   .post-thumb-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }

   .post-content {
     width: calc(100% - 80px);
     padding-left: 15px;
   }

   .post-title {
     margin-bottom: 5px;
   }

   .post-title a {
     font-weight: 500;
     font-size: 14px;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     line-clamp: 2;
     -webkit-box-orient: vertical;
     background-image: linear-gradient(
       to right,
       hsl(var(--base)) 0%,
       hsl(var(--base)) 100%
     );
     background-position: 0 calc(100% - 0.02em);
     background-size: 0 2px;
     transition: background-size 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
     padding: 0;
     display: inline;
     background-repeat: no-repeat;
     box-sizing: border-box;
   }

   .post-title a:hover {
     background-size: 100% 2px;
     color: inherit;
   }

   .blog-row .card-header {
     background-color: var(--color-white);
     border: none;
   }

   .blog-row .card {
     border: none;
     box-shadow: none;
     border-bottom: 1px solid #dddddd4a;
     border-radius: 0;
   }

    .blog-row .card img {
    border-radius: 20px;
    transition: transform 0.3s ease;
    }
    .col-blog img {
    transition: transform 0.3s ease;
    }

    .col-blog:hover img {
    transform: scale(0.98);
    }

   .image-section img {
     border-radius: 20px;
   }

   .border-footer-hr {
     width: 3rem;
     height: 0.325rem;
     border-radius: 4rem;
     background-color: var(--footer-color);
     margin-top: 0.5rem;
   }

   .lang-image {
     width: 1.125rem;
     margin: -0.25rem 0.313rem 0 0;
   }

   .item-notfound {
     width: 48px;
   }

   /** Contact page */
   #contact {
     display: block;
   }

   .contact-info {
     padding: 20px;
   }
   .contact-info p {
     color: #6c757d;
   }
   .contact-item {
     display: flex;
     align-items: center;
     margin-bottom: 20px;
   }
   .contact-item i {
     font-size: 24px;
     color: #6c63ff;
     margin-right: 15px;
   }
   .contact-item hr {
     width: 100%;
     margin: 10px 0;
     border: 0;
     border-top: 1px solid #e9ecef;
   }

   /** Contact page */

   /* ==========================================================================
      11. Brand & Logo Components
      ========================================================================== */
   .brand-img {
     width: 10rem;
   }
   .brand-card-align {
     text-align: left;
   }
   .logo-img {
     width: 11rem;
   }

   .logo-frame {
     width: 15rem;
     background-color: var(--color-white);
     padding: 2rem;
     border-radius: 2rem;
     margin-left: 1rem;
   }

   .login-logo {
     width: 14rem;
   }

   .login-icon {
     margin-top: 12px;
     position: absolute;
     margin-left: 15px;
   }

   .brand {
     background-color: #f4f5f9;
     padding: 20px;
     border-radius: 0.925rem;
   }

   .complaint-image {
     padding: 1rem;
     border: 1px solid #ddd;
     border-radius: 1rem;
     margin-top: -12px;
   }

   .brand-logos {
     max-height: 50px;
   }

   .search-brand-logo {
     width: 2.5rem;
   }

   .brand-detail-logo {
     width: 100px;
     height: 100px;
   }

   /* ==========================================================================
      12. Complaints
      ========================================================================== */

   .day-complaint {
     background: linear-gradient(
       90deg,
       rgb(241 241 241) 0%,
       rgb(245 245 245) 35%,
       rgb(243 243 243) 100%
     );
     padding: 20px;
     border-radius: 0.925rem;
   }

   .card-complaint-detail {
     position: relative;
     display: flex;
     flex-direction: column;
     min-width: 0;
     height: var(--bs-card-height);
     color: var(--bs-body-color);
     word-wrap: break-word;
     background-color: var(--bs-card-bg);
     background-clip: border-box;
     transition: 0.3s;
   }

   .card-complaint {
     position: relative;
     display: flex;
     flex-direction: column;
     min-width: 0;
     height: var(--bs-card-height);
     color: var(--bs-body-color);
     word-wrap: break-word;
     background-color: var(--bs-card-bg);
     background-clip: border-box;
     border-bottom: 1px solid #e2e2e2;

     transition: 0.3s;
   }
   .card-complaint:hover {
     position: relative;
     display: flex;
     flex-direction: column;
     min-width: 0;
     height: var(--bs-card-height);
     color: var(--bs-body-color);
     word-wrap: break-word;
     background-color: var(--bs-card-bg);
     background-clip: border-box;
     box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 8%);
     border-radius: 0.3rem;
   }
   .fast-write-card .accordion-body {
     margin-bottom: 20px;
   }

   .complaint-section .modal-content {
     border-radius: 25px;
     border: none;
   }

   .complaint-section .modal-header {
     border-bottom: none;
   }

   .complaint-section .share-icon .col-md-2 {
     background-color: #7c7b85;
     padding: 10px;
     margin: 4px;
     text-align: center;
     border-radius: 10px;
     font-size: 20px;
     color: var(--color-white);
   }

   .complaint-section .share-icon .col-md-2:hover {
     background-color: #4d4b5e;
     padding: 10px;
     margin: 4px;
     text-align: center;
     border-radius: 10px;
     font-size: 20px;
     color: var(--color-white);
   }
   .complaint-action{
    margin-top: -35px;
   }
   .square-img {
     width: 100%;
     height: auto;
     aspect-ratio: 1 / 1;
     object-fit: cover;
   }

   .brand-answer {
     width: 3.125rem;
     height: 3.125rem;
     border-radius: 50%;
     overflow: hidden;
     margin-right: 10px;
   }
   .brand-answer img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }

   .answer {
     background: #eaf9e8;
     padding: 1rem;
     border-radius: 1rem;
     border-left: 6px solid #4cb753;
   }

   .alert-complaint {
     position: relative;
     padding: 1rem;
     margin-bottom: 1rem;
     border-radius: 1rem;
   }

   .alert-error {
     color: #ec7070;
     border: 1px solid #ec7070;
   }

   .alert-solved {
     color: #528947;
     border: 1px solid #528947;
     background: #5289472b;
    }

   .alert-pending {
     color: #fb9858;
     border: 1px solid #fb9858;
   }

   .alert-brand {
     color: var(--color-white);
     padding: 15px;
     border-radius: 10px;
     background: var(--primary-bg-color);
   }

   .comment-send-icon {
     margin-left: -1px;
   }

   .write-avatar {
     width: 30px;
     height: 30px;
   }

   .write-card {
     padding: 14px 10px 0px 10px;
   }

   .write-pen {
     width: 48px;
     height: 48px;
     border-radius: 2rem;
     background-color: var(--primary-bg-color);
     padding: 10px 10px 10px 15px;
   }

   .write-text {
     font-size: 18px;
     font-weight: 600;
     color: var(--primary-bg-color);
   }

   /* ==========================================================================
      13. Header & Navigation
      ========================================================================== */
   header {
     background-color: #343a40;
     color: var(--color-white);
   }

   header span {
     font-weight: bold;
   }

   .sticky-header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 70px;
     z-index: 1030;
     transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
     background-color: transparent;
    }

    .sticky-header-other {
     position: sticky;
     top: 0;
     z-index: 1030;
     background-color: var(--color-white);
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
     height: 70px;
    }

.sticky-header.scrolled {
    background-color: white;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

   .breadcrumb-header {
     background: #07242b0d;
   }

   .offcanvas-header {
    background: #f1f1f1;
    }

    .offcanvas-title{
        font-size: 16px;
    }
    .offcanvas.offcanvas-end{
        width: 250px;
    }

   .user-icon {
     margin-right: 5px;
     font-size: 17px;
    }

    .nav-link {
        position: relative;
    }

   .nav-link:hover::after {
     content: "";
     position: absolute;
     bottom: 0;
     margin-bottom: -14px;
     left: 0;
     width: 100%;
     height: 3px;
     background-color: var(--primary-bg-color);
   }
   .user-border {
     border-bottom: 1px solid #f3f3f3;
   }

   .navbar-brand {
     font-weight: bold;
     font-size: 1.5rem;
   }

   .navbar-toggler {
    border: none;
   }

   .navbar-toggler:focus {
     box-shadow: 0 0 0 transparent;
     outline: none;
   }

    .navbar .container {
     display: flex;
     justify-content: space-between;
     align-items: center;
    }

    .navbar .menu-account-complaint {
        display: flex;
        gap: 20px;
    }

   .my-bar {
     background: var(--color-white);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     border-radius: 1.5rem;
   }

   .my-bar .form-select,
   .my-bar .form-control {
     border-radius: 0.5rem;
   }

   .my-bar {
     margin: auto auto;
   }

   .my-bar .input-group {
     border-radius: 30px;
     overflow: hidden;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
   }

   .my-bar .form-control {
     border: none;
     padding-left: 20px;
   }

   .my-bar .btn {
     border: none;
     padding: 10px 20px;
   }

   .dropdown-item {
     display: block;
     width: 100%;
     padding: 0.438rem 0.313rem 0.5rem 0.625rem;
     clear: both;
     font-weight: 410;
     color: #606060;
     text-align: inherit;
     text-decoration: none;
     white-space: nowrap;
     background-color: transparent;
   }
   .dropdown-item:hover {
     color: #606060;
   }
   .dropdown-item:focus {
     color: #f0f0f0;
   }
   .dropdown-item.active,
   .dropdown-item:active {
     text-decoration: none;
   }
   .dropdown-item.disabled,
   .dropdown-item:disabled {
     pointer-events: none;
     background-color: transparent;
   }

   .dropdown-menu.show {
     display: block;
   }

   .dropdown-header {
     display: block;
     margin-bottom: 0;
     font-size: 0.875rem;
     white-space: nowrap;
   }

   .dropdown-item-text {
     display: block;
   }

   .dropdown-menu.show {
     z-index: 9999;
   }

   /* ==========================================================================
      14. Login & Register Styles
      ========================================================================== */

   .login-box {
     background: #f8fafc;
     padding: 2rem;
     border-radius: 1rem;
   }

   .toggle-password {
     cursor: pointer;
     float: right;
     margin-top: -35px;
     margin-right: 25px;
   }

   /* ==========================================================================
      15. User Styles
      ========================================================================== */
   .dashboard {
     display: flex;
   }

   .avatar-container {
     position: relative;
     display: inline-block;
   }

   .change-avatar-label {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background-color: rgba(0, 0, 0, 0.5);
     color: var(--color-white);
     text-align: center;
     padding: 15px;
     cursor: pointer;
     opacity: 0;
     transition: opacity 0.3s;
     border-radius: 8rem;
     width: 80px;
     height: 80px;
     font-size: 12px;
   }

   .avatar-container:hover .change-avatar-label {
     opacity: 1;
   }

   .brand-logo {
     width: 3.125rem;
     height: 3.125rem;
   }

   .brand-big-logo {
     width: 9.125rem;
   }
   .sidebar {
     width: 15rem;
     background-color: var(--primary-bg-color);
     color: var(--color-white);
     padding: 1.25rem 1.25rem 1.25rem 1rem;
     height: 100vh;
     position: fixed;
     left: 0;
     transition: left 0.3s ease;
     border-radius: 0rem 3.125rem 3.125rem 0rem;
     border-right: 0.375rem solid var(--quinary-color);
     z-index: 999;
     @media (max-width: 768px) {
       border-radius: 0;
       border-right: 0;
       padding: 20px;
     }
   }

   .sidebar .close-sidebar {
     background: none;
     border: none;
     color: var(--color-white);
     font-size: 12px;
     cursor: pointer;
     margin-bottom: 20px;
     display: none; /* Başlangıçta gizli */
     margin-right: 2.5rem;
   }

   .sidebar .logo {
     display: flex;
     align-items: center;
     margin-bottom: 20px;
   }

   .sidebar .logo img {
     width: 10rem;
     margin-right: 10px;
   }

   .sidebar ul {
     list-style: none;
     padding: 3.125rem 0px 0px 0px;
     @media (max-width: 768px) {
       padding: 0;
     }
   }

   .sidebar ul li {
     margin-bottom: 15px;
   }

   .sidebar ul li a {
     color: var(--sidebar-text-color);
     text-decoration: none;
     display: block;
     padding: 7px;
     border-radius: 5px;
   }

   .sidebar ul li a:hover {
     color: var(--sidebar-text-hover-color);
   }

   .sidebar ul li .btn {
     background-color: #6c63ff;
     text-align: center;
   }

   .main-content {
     flex: 1;
     padding: 25px;
     margin-left: 15rem;
     transition: margin-left 0.3s ease;
   }

   .table {
     --bs-table-color: #9196a5;
     --bs-table-bg: #ffffff;
     --bs-table-border-color: #ffffff00;
     --bs-table-accent-bg: #ffffff00;
     --bs-table-striped-color: #000000;
     --bs-table-striped-bg: rgb(241 243 255 / 35%);
   }

   .user-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
     color: #000;
     background-color: var(--color-white);
     border-radius: 1rem;
   }

   .user-avatar {
     width: 1.25rem;
     height: 1.25rem;
   }

   .auth-user-image {
     width: 1.5rem;
     border-radius: 2rem;
   }

   .user-hr {
     width: 100%;
     height: 1px;
     background: #c7d5f333;
   }

   .user-header .user-nav-profile {
     padding: 1rem;
   }

   .user-nav-profile svg{
     margin-top: -4px;
    }

   .content {
     background-color: var(--color-white);
     padding: 0.925rem 0.925rem;
     border-radius: 10px;
   }

   .content h2 {
     margin-bottom: 20px;
   }

   .complaint-title-text {
     margin-top: -35px;
   }

   .complaint-card {
     background-color: var(--color-white);
     border-radius: 10px;
     padding: 20px;
     margin-bottom: 20px;
     transition: 0.3s;
     border: 1px solid #f0f0f0;
   }
  .complaint-section .complaint-card:hover {
    margin-top: -5px;
     box-shadow: 0px 0px 3px 1px #7c7c7c36;
   }

    .complaint-card:hover {
     box-shadow: 0px 0px 3px 1px #7c7c7c36;
   }

   .complaint-card img {
     width: 50px;
     height: 50px;
     border-radius: 2rem;
   }
   .complaint-card .badge {
     margin-right: 5px;
   }
   .complaint-card .salary {
     font-weight: bold;
   }
   .complaint-card .days-left {
     color: #888;
   }
   .complaint-card .rating {
     color: #f39c12;
   }
   .complaint-card .location,
   .complaint-card .date-posted {
     color: #888;
   }
   .complaint-card .company-name {
     color: #28a745;
   }
   .complaint-card .complaint-title {
     margin-top: 15px;
   }

   .complaint-card .complaint-title p {
     margin-top: -5px;
   }
   .complaint-nav {
     float: right;
   }

   .complaint-list-item {
     float: left;
     padding: 10px;
     list-style: none;
   }

   .complaint-list-link {
     background: #e8e8e8a1;
     border-radius: 10px;
     padding: 12px 20px;
     border-bottom: 2px solid var(--primary-color);
     color: #0d0d0d;
     font-weight: 500;
     transition: 0.3s;
   }

   .complaint-list-link:hover {
     background: var(--primary-color);
     border-bottom: 2px solid #e8e8e8a1;
     color: var(--color-white);
     font-weight: 500;
   }

   .complaint-list-link.active-btn {
     background: var(--primary-color);
     border-bottom: 2px solid #e8e8e8a1;
     color: var(--color-white);
     font-weight: 500;
   }

   .action-card {
     background: var(--primary-color);
     padding: 20px;
     border-radius: 2rem;
     width: 13rem;
     text-align: center;
     margin: auto;
   }

   .toggle-sidebar {
     background: none;
     border: none;
     font-size: 14px;
     cursor: pointer;
     display: none;
     margin-left: 15px;
   }

   .user-panel-avatar {
     width: 5rem;
     margin-right: 1rem;
   }

   .stat-card {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     cursor: pointer;
     box-shadow: 0px 0px 2px 2px #9898980f;
     border-radius: 1rem;
   }

   .stat-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
   }

   .progress {
     height: 8px;
   }

   .trend-badge {
     position: absolute;
     top: 20px;
     right: 20px;
   }

   .badge-text-active {
     background: #b9eeb92e;
     padding: 6px;
     border-radius: 2rem;
     color: #18ad18;
     font-size: 13px;
   }

   .badge-text-wait {
     background: #eeb9b930;
     padding: 6px;
     border-radius: 2rem;
     color: #f3901f;
     font-size: 13px;
   }

   .stat-icon {
     width: 48px;
     height: 48px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 12px;
   }

   .my-comment .card-header {
     background: #2c2f3f;
     color: var(--color-white);
     border-bottom: 2px solid #6fd986;
   }

   .notification .card {
     box-shadow: none;
   }

   .notification-view {
     float: right;
     background: #6fd986;
     padding: 4px 14px;
     border-radius: 5px;
     color: var(--color-white);
   }

   .notification button {
     float: left;
     margin-right: 10px;
     margin-top: 8px;
   }

   .avatar-container img {
     border-radius: 50%;
     width: 80px;
     height: 80px;
     object-fit: cover;
   }

   /** Write compalint */
   .faq-image {
     width: 30rem;
     margin-top: -60px;
   }

   .select2-container--default .select2-selection--single {
     height: 40px;
     border-radius: 5px;
     border: 1px solid #ccc;
   }

   .select2-container--default
     .select2-selection--single
     .select2-selection__rendered {
     line-height: 38px;
     padding-left: 10px;
   }

   .select2-container--default
     .select2-selection--single
     .select2-selection__arrow {
     height: 38px;
   }

   /* ==========================================================================
      16. Footer Styles
      ========================================================================== */
   footer {
     background-color: var(--primary-bg-color);
     color: var(--color-white);
   }

   .footer-logo {
     width: 14rem;
   }

   .footer-hr {
     width: 100%;
     height: 0.125rem;
     border-radius: 4rem;
     background-color: var(--footer-color);
   }

   footer h6 {
     font-weight: bold;
   }

   footer ul {
     padding: 0;
     list-style: none;
   }

   footer ul li {
     margin-bottom: 0.5rem;
   }

   footer ul li a {
     color: var(--color-white);
     text-decoration: none;
   }

   footer ul li a:hover {
     text-decoration: underline;
   }

   footer .text-center {
     font-size: 0.875rem;
   }

   .widget-title svg{
        display: none;
    }

    #scroll-top {
        z-index: 99;
        display: none;
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: var(--quinary-color);
        color: var(--color-black);
        border: none;
        padding: 10px 15px;
        border-radius: 2rem;
        cursor: pointer;
        font-size: 16px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
        transition: opacity 0.3s, transform 0.3s;
    }

    #scroll-top:hover {
        background-color: var(--quinary-hover-color);
    }

   /* ==========================================================================
      17. Responsive Styles
      ========================================================================== */

    @media (max-width: 991px) {
    .navbar .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .navbar .menu-account-complaint {
        flex: 1;
        justify-content: flex-end;
    }
    .navbar .search-bar {
        display: none;
    }

    .navbar .navbar-brand {
        flex: 1;
       }

    .hero-section p{
        font-size: 16px;
    }
    .hero-title {
        font-size: 40px;
        font-weight: bold;
        margin-bottom: 1rem;
        line-height: 40px;
    }
    }

   @media (max-width: 768px) {
     #contact {
       display: none;
     }
     .show-item {
       display: none;
     }
     .hide-item {
       display: block;
     }
     .content-breadcrumb{
        text-align: left;
       }
     .col-6 {
       flex: 0 0 50%;
       max-width: 50%;
     }

     .widget ul {
        display: none;
    }

    .widget-title svg{
        display: block;
        float: right;
    }

     .card {
       margin-bottom: 1rem;
     }

     .brand-card-align {
       text-align: center;
     }

     .widget-left {
       border-right: none;
     }
     .sidebar {
       left: -15rem;
     }
     .sidebar.active {
       left: 0;
     }
     .main-content {
       margin-left: 0;
       padding: 8px;
     }
     .toggle-sidebar {
       display: block;
     }
     .sidebar .close-sidebar {
       display: block;
     }

     .content {
       background-color: var(--color-white);
       padding: 0.425rem 0.225rem;
       border-radius: 10px;
     }

     .height-300 {
       max-height: 400px;
       min-height: 300px;
     }

     .height-500 {
       max-height: 600px;
       min-height: 300px;
     }

     .user-header .btn-system-primary{
        display: none;
      }
   }

   @media (max-width:993px) {
    .offcanvas-body{
        padding: 0;
     }

     .offcanvas-body li{
        border-bottom: 1px solid #ddd;
     }

     .offcanvas-body li a{
        padding: 10px 12px;
     }

     .side-account{
        display: block;
     }

    .side-account li{
        list-style: none;
    }

    .side-account li a{
        color: #000000a6;
    }

     .nav-link:hover::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #ffffff00;
      }
   }


   @media (max-width:516px) {

    .navbar .container{
        justify-content: flex-end;
    }

    .desktop-account {
        display: none;
    }

    .desktop-write {
        display: none;
    }

    .fs-15{
        font-size: 14px;
    }

    .category-section h5{
        font-size: 14px;
    }

   }

   @media (min-width: 517px) {
     .mobile-account {
        display: none;
     }

     .mobile-write {
        display: none;
     }
    }
   @media (min-width: 769px) and (max-width: 993px) {
     .height-300 {
       max-height: 400px;
       min-height: 300px;
     }

     .height-500 {
       max-height: 600px;
       min-height: 300px;
     }
   }

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

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

   @media (prefers-reduced-motion: reduce) {
     .faq-primary::after {
       transition: none;
     }
   }

   @media screen and (max-width: 424px) {
     .post-content {
       width: calc(100% - 60px);
     }
   }

   @media screen and (max-width: 424px) {
     .post-thumb-img {
       width: 60px;
     }
   }