:root {
     --primary-color: #1890ff;
     --primary-hover: #1478d1;
     --black-color: #1C1819;
     --light-gray: #F6F9FF;
     --light-white: 255, 255, 255;
     --border-color: #e5e5e5;
     --gray-color: #767F8C;
     --secondary-rgb: 179, 55, 64;
 }

 .cred {
     color: var(--primary-color);
 }

 .f18 {
     font-size: 1.25rem !important;
 }
 .closesvg{display:none;cursor:pointer}

 .btn-check:checked+.btn,
 btn.active,
 .btn.show,
 btn:first-child:active,
 :not(.btn-check)+.btn:active {
     color: var(rgba(var(-light-white)));
     background-color: var(--primary-color);
     border-color: var(--primary-color);
 }

 .font-12 {
     font-size: 0.75rem !important;
 }

 .font-10 {
     font-size: 0.725rem !important;
 }

 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     background-color: var(--light-gray);
 }

 .navbar {
     padding: 0;
     border-bottom: 1px solid var(--border-color);
 }

 .navbar-brand {
     color: var(--primary-color) !important;
     font-weight: bold;
     font-size: 1.25rem;

 }

 .navbar-nav li {
     margin-right: 1.5rem;
 }

 .navbar-nav li .nav-active {
     color: var(--primary-color) !important;
     font-weight: bold;
     border-bottom: 2px solid var(--primary-color);
 }

 .navbar-nav li a:hover {
     color: var(--primary-hover) !important;
     text-decoration: none;
 }



 .hero-section {
     /* background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); */
     min-height: 100vh;
     display: flex;
     align-items: center;
 }

 .hero-illustration {
     text-align: center;
     margin-bottom: 2rem;
     background: url(../image/Illustration.png) no-repeat center right;
     background-size: 100%;
     height: 454px;
     width: 584px;
     /* max-width: 640px; */
 }

 .hero-text {
     padding-top: 6rem;
     padding-left: 23rem;
     display: none;
 }

 .hero-text h2 {
     text-align: left;
     margin-top: 1rem;
     font-size: 1.10rem;
     color: #333;
     font-weight: normal;
 }

 .stats-row {
     display: flex;
     gap: 8px;
     justify-content: space-around;
     padding-top: 23rem;
     /* margin-top: 9rem; */
     /* flex-wrap: wrap; */
 }

 .stat-item {
     text-align: center;
     margin: 0.3rem 0;
     border-radius: .5rem;
     border: 0;
     /* background-color: var(--light-white); */
     background-color: rgba(var(--light-white), 0.6) !important;
     box-shadow: 0 .125rem 1rem rgba(10, 10, 10, .04);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     padding: 1rem;
     transition: transform 0.2s ease;
     padding-left: 1.75rem;
 }

 .bg-secondary-transparent {
     background-color:var(--light-gray) !important;
 }
#account-login button[type="submit"].disabled{
	background:rgb(177,207,247) ;border:none;cursor:not-allowed
	
}
#account-login .text-danger{display:none}
 .rounded svg {
     width: 1.75rem;
     height: 1.75rem;
     /* padding: .35rem; */
     border-radius: .5rem;
 }
 .rounded svg path{ 
    stroke: var(--primary-color);
    /* fill: var(--primary-bg); */
 }
 .stat-number {
     font-size: 1.45rem;
     font-weight: bold;
     color: var(--black-color);
     /* margin-bottom: 0.45rem; */
     text-align: left;
 }

 .stat-label {
     color: #18191C;
     font-size: 0.9rem;
 }

 .login-card {
     text-align: center;
     background: white;
     border-radius: 15px;
     padding: 2rem 2rem;
     box-shadow: 0 10px 30px rgba(0, 44, 109, 0.05);
     border: 1px solid var(--border-color);
     width: 28rem;
     height: 31.5rem;
 }
 p.text-title{margin-bottom:0.5rem !important;}

 .login-card h4 {
     margin-bottom: 0.4rem;
     font-size: 1.05rem;
     color: var(--primary-color);
     #font-weight: bold;
     text-align: center;
 }
 input.form-control:focus {
    border-color: var(--primary-color);;
    outline: none !important;;
}
 .login-card p.text-title {
     font-size: 1.175rem;
     color:#1c2149 !important;font-weight: bold;
 }

 .login-tabs {
  
     margin-bottom: 0;
     margin: 0 auto;
 }.login-tabs {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid #e8e8e8;width:80%
}


.login-tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
    color: #999;
    position: relative;
}
.login-tab.active {
    color: var(--primary-color);
}
a.login-tab{ text-decoration: none;}

.login-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
}
 .tip.font-10 span {
     position: absolute;
     left: 0;
     top: 53px;
     width: 100%;
     text-align: left;
 }

 .lefticon {
     position: absolute;
     left: 0.5rem;
     top: 0.925rem;
 }

 .tab-content {
     display: none;
 }

 .closesvg {
     position: absolute;
     right: 0.5rem;
     top: 0.925rem;
 }

 .tab-content .form-control {
     font-size: 0.825rem;
     border-radius: 8px;
     padding: 0.825rem 1rem 0.875rem 2rem;
     border: 1px solid var(--border-color);
 }
.form-control:focus{
    box-shadow: none !important;
    outline: none !important;
}
 .btn-primary {
     background-color: var(--primary-color);
     border-color: var(--primary-color);
     border-radius: 8px;
     padding: 0.75rem 2rem;
     font-weight: 500;
 }

 .btn-primary:hover {
     background-color: var(--primary-hover);
     border-color: var(--primary-hover);
 }

 .qr-code {
     width: 220px;
     height: 220px;
     /* background: #000; */
     margin: 1rem auto 0.5rem;
     /* border-radius: 8px; */
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 1.2rem;overflow:hidden;background:#4A90E2;border-radius:12px
 }

 .pr {
     position: relative;
 }

 .text-end {
     font-size: 0.85rem;
     position: absolute;
     right: 0;
     top: 6px;
     padding-right: 1rem;
     padding-top: 0.5rem;
 }

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

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

 /* .qr-code .text-muted{ color: #6c757d;} */
 .job-search-section {
     /* background: white; */
     padding: 1rem 0 2rem;
     /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
 }

 .search-bar {
     background: white;
     border-radius: 12px;
     /* padding: 0.5rem; */
     /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
     border: 1px solid var(--border-color);
 }

 .job-card {
     background: white;
     border-radius: 12px;
     padding: 1.5rem;
     margin-bottom: 1rem;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
     border: 1px solid var(--border-color);
     transition: transform 0.2s ease;
 }

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

 .job-title {
     font-size: 1.25rem;
     font-weight: 600;
     color: #2c3e50;
     margin-bottom: 0.5rem;
 }

 .job-company {
     color: #6c757d;
     margin-bottom: 1rem;
 }

 .job-tags {
     display: flex;
     gap: 0.5rem;
     flex-wrap: wrap;
     margin-bottom: 1rem;
 }

 .job-tag {
     background: #f8f9fa;
     color: var(--primary-color);
     padding: 0.25rem 0.75rem;
     border-radius: 15px;
     font-size: 0.85rem;
     border: 1px solid var(--border-color);
 }

 .job-meta {
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: #18191C;
     font-size: 0.9rem;
 }

 .modal-content {
     border-radius: 15px;
     border: none;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
 }

 .modal-header {
     border-bottom: 1px solid var(--border-color);
     padding: 2rem 2rem 1rem;
 }

 .modal-body {
     padding: 2rem;
 }

 .job-info-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
     gap: 1.5rem;
     margin: 2rem 0;
 }

 .nav-link {
     color: var(--black-color);
 }

 .info-item {
     text-align: center;
     padding: 1rem;
     background: #f8f9fa;
     border-radius: 10px;
 }

 .info-icon {
     font-size: 1.5rem;
     color: var(--primary-color);
     margin-bottom: 0.5rem;
 }

 .filter-section {
     background: white;
     padding: 1.5rem;
     border-radius: 12px;
     margin-bottom: 2rem;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 }

 .filter-tag {
     background: var(--primary-color);
     color: white;
     padding: 0.5rem 1rem;
     border-radius: 20px;
     font-size: 0.9rem;
     display: inline-block;
     margin: 0.25rem;
     text-decoration: none;
 }

 .filter-tag.active {
     background: var(--primary-hover);
 }

 @media (max-width: 768px) {
     .hero-section {
         padding: 2rem 0;
     }

     .login-card {
         padding: 1.5rem;
         margin: 1rem;
     }

     .stats-row {
         /* flex-direction: column;
         align-items: center; */
         display: flex;
         justify-content: space-around;
         margin-top: 9rem;
         flex-wrap: wrap;
     }

     .job-info-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 1rem;
     }

     .search-bar {
         border-radius: 12px;
     }
 }
 

 @media (max-width: 576px) {
     .hero-character {
         width: 150px;
         height: 150px;
         font-size: 3rem;
     }

     .stat-number {
         font-size: 1.5rem;
     }

     .login-tab {
         padding: 0.5rem 1rem;
     }

     .job-info-grid {
         grid-template-columns: 1fr;
     }
 }

 input:-internal-autofill-selected {background-color: #fff !important;}