body {
      background-color: #f3f3f3;
      /* font-family: 'Inter', sans-serif; */
      font-family: 'Open Sauce One', sans-serif;
      color: #333;
}

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

.loader {
     width: 15px;
     height: 15px;
     border: 2px dotted #FFF;
     border-radius: 50%;
     display: inline-block;
     position: relative;
     box-sizing: border-box;
     animation: rotation 2s linear infinite;
}


@keyframes rotation {
     0% {
          transform: rotate(0deg);
     }
     100% {
          transform: rotate(360deg);
     }
} 

h1,h2,h3,h4,h5,h6{
     font-family: 'Open Sauce One', sans-serif;
} 

 .btn:focus,
.btn:active:focus,
.btn.active:focus {
  border: none;
  outline: none !important;
  box-shadow: none !important;
}

#search:focus{

     outline: 0!important;
     border: 0!important;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {

    padding-right: 8px;
    padding-left: 8px;
}


.btn-outline-success {

     background-color: #e5fff1;
}
.btn-outline-danger {

     background-color: #fce3e3;
}

.scroll-area .btn-success{

     background-color: #adf4ce; 
     color: #1d6251;
     border:none;

}
.btn-success:hover{
     background-color: #449644;
     color:#fff;
}

.btn-danger:hover{
     background-color: #d11010!important;
     color:#fff!important;
}

.scroll-area .btn-success:focus{

     outline: none;
     border:none;
     box-shadow: none;
}
.scroll-area .btn-danger{

     background-color: #f67584; 
     color: #5c0909;
     border:none;

}


 /* Custom container width for large screens */
@media (min-width: 1200px) {
  .container {
    max-width: 1350px; /* Change this to your desired width */
  }
}


 .header-wrapper {
      background-color: #ffffff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      position: sticky;
      top: 0;
      z-index: 1000;
 }

 .header-inner {
      max-width: 1350px;
      margin: 0 auto;
      padding: 12px 10px;
 }

 .nav-link {
      color: #007bff !important;
      font-weight: 500;
 }

 .btn-signup {
      background-color: #007bff;
      color: #fff;
      font-weight: 600;
 }

 .category-bar {
      background-color: #f8f9fa;
      border-bottom: 1px solid #ddd;
 }

 .category-inner {
      max-width: 1350px;
      margin: 0 auto;
      padding: 10px 10px;
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
 }

 .category-inner a {
      color: #333;
      font-weight: 500;
      margin-right: 20px;
      white-space: nowrap;
 }

 .market-card {
      background-color: #ffffff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      transition: transform 0.2s ease;
 }

 .market-card:hover {
      transform: scale(1.02);
 }

 .market-title {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 10px;
 }

 .market-stats {
      font-size: 0.9rem;
      color: #666;
      margin-bottom: 15px;
 }

 .btn-yes {
      background-color: #00c896;
      color: #000;
      font-weight: 600;
 }

 .btn-no {
      background-color: #ff4d4f;
      color: #000;
      font-weight: 600;
 }

 .btn:hover {
      opacity: 0.9;
 }

 .logo-img {
      width: 32px;
      height: 32px;
 }

 .flag-img {
      width: 20px;
      margin-left: 8px;
 }

 /* =============Dark Mood Csss============ */

 .dark-mode {
      background-color: #1D2B3A;
      color: #f0f0f0;
 }

 .dark-mode .card-box {
      background-color: #1D2B3A;
      color: #fff;
 }

 .dark-mode .market-card {

      background-color: #314254;
 }

 .dark-mode .header-wrapper {

      background-color: #1D2B3A !important;
 }

 .dark-mode .header-inner .brand-name {
      color: #fff !important;
 }


 .dark-mode .header-inner #search {
      background-color: #3D5266 !important;
      color: #cfd4d8 !important;
 }

 .dark-mode .category-bar {
      background-color: #314254;
 }

 .dark-mode .category-inner a {
      color: #fff !important;
 }

 .dark-mode .card {

      background-color: #314254;
 }

 .dark-mode .nav-tabs .nav-item.show .nav-link,
 .dark-mode .nav-tabs .nav-link.active {

     background-color: #314254;

 }

 .dark-mode .market-card h6,.dark-mode .candidate_name{

     color:#fff!important;
 }

 .dark-mode table td {

      color: #7993af;
 }

 .dark-mode .nav-item a.nav-link {

      color: #fff !important;

 }

 .dark-mode textarea,
 .dark-mode input[type="text"],
 .dark-mode input[type="email"],.dark-mode input[type="password"] {
      background-color: #314254;
      color: #7f90a4;
      border: 1px solid #405b78;
 }

 .dark-mode textarea:focus,
 .dark-mode input[type="text"]:focus,
 .dark-mode input[type="email"]:focus,
 .dark-mode .comment-box:focus {
      background-color: #314254;
      border: none;
      color: #7f90a4;
 }

 /* Hide scrollbar for all elements */
 body,
 * {
      scrollbar-width: none;
      /* Firefox */
      -ms-overflow-style: none;
      /* IE 10+ */
 }

 body::-webkit-scrollbar,
 *::-webkit-scrollbar {
      display: none;
      /* Chrome, Safari, Opera */
 }


 /* Optional: change icon on toggle */
 .dark-mode .custom-control-label i {
      content: "\f185";
      /* sun icon */
 }


 /* Custom active tab styling */
 .nav-pills .nav-link.active {
      background-color: #65798f;
      /* Change to your preferred color */
      color: #fff !important;
      font-weight: 600;
      border-radius: 6px;
 }

 /* Optional: hover effect for all tabs */
 .nav-pills .nav-link:hover {
      background-color: #65798f;
      color: #f4f4f4 !important;
 }

 .nav-item a.nav-link {
      color: #333 !important;
 }


 /* ============Profile custom Dropdown============ */
 /* Enable hover dropdown */
 /* Dropdown visibility on hover */
 .hover-dropdown:hover .dropdown-menu {
      display: block;
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
 }

 /* Smooth dropdown animation */
 .hover-dropdown .dropdown-menu {
      display: block;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: all 0.2s ease-in-out;
      margin-top: 8px;
 }

 /* Icon default and hover swap */
 .dropdown-icon {
      transition: transform 0.2s ease;
      color: #555;
 }

 .hover-dropdown:hover .dropdown-icon {
      transform: rotate(180deg);
      color: #007bff;
 }

 /* Custom dropdown styling */
 .custom-dropdown {
      border-radius: 8px;
      background-color: #fff;
      min-width: 220px;
      padding: 0.5rem 0;
 }

 .custom-dropdown .dropdown-item {
      padding: 0.5rem 1rem;
      font-size: 14px;
      color: #333;
      transition: background 0.2s ease;
 }

 .custom-dropdown .dropdown-item:hover {
      background-color: #f0f0f0;
      color: #007bff;
 }

 .dropdown-item i {
      width: 20px;
      text-align: center;
 }

 .dropdown-item span {
      flex-grow: 1;
 }


 /* ===============Search Box Design================ */

 .search-wrapper .input-group {
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 0 0 1px #ddd;
 }

 .search-wrapper .form-control {
      background-color: #f9f9f9;
      border: none;
      border-radius: 0;
 }

 .search-wrapper .input-group-text {
      background-color: #f9f9f9;
      border: none;
 }


 /* Default: show desktop, hide mobile */
 .desktop-header {
      display: block;
 }

 .mobile-header {
      display: none;
 }

 /* On screens smaller than 768px (mobile/tablet) */
 @media (max-width: 767.98px) {
      .desktop-header {
           display: none;
      }

      .mobile-header {
           display: block;
      }
 }

 /* =================Mobile Side Menu============== */
 .side-menu {
      position: fixed;
      top: 0;
      left: -250px;
      width: 250px;
      height: 100%;
      background: #fff;
      box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
      transition: left 0.3s ease;
      z-index: 1050;
 }

 .side-menu.open {
      left: 0;
 }

 .side-menu-header {
      border-bottom: 1px solid #eee;
 }

 /* =============Mobile Bottom Menu============== */
 .bottom-tab {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #fff;
      border-top: 1px solid #ddd;
      z-index: 1000;
      padding: 6px 0;
 }

 .bottom-tab .nav-link {
      color: #555;
      font-size: 14px;
      padding: 4px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
 }

 .bottom-tab .nav-link i {
      font-size: 18px;
      margin-bottom: 2px;
 }

 .bottom-tab .nav-link.active {
      color: #007bff;
 }

 .tab-label {
      font-size: 12px;
 }