@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --black : #1B1B1B;
    --white: #fff;
    --purple: #00004E;
    --mauve: #CED5FF;
    --orange: #F47A20;
    --light-grey: #fff7eb;
    --darkgrey: #8b8b8b;
    --body-font: "Poppins", sans-serif;
    --heading-font: "Poppins", sans-serif;
}
body, html{
    overflow-x: hidden;
    scroll-behavior: smooth;
}
body{
    background: var(--white);
    color: var(--darkgrey);
    font-size: 13px;
    line-height: 1.5;
    font-family: var(--body-font);
    font-weight: 400;
}
p{
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    font-family: var(--body-font);
    color: var(--darkgrey);
}
a{
    text-decoration: none !important;
    font-family: var(--body-font);
}
img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.disabled-link {
    opacity: 0.6;
    cursor: not-allowed;
}
.sec-space{
    padding: 98px 0;
}
.section-heading h2, h2{
    font-size: 32px;
    font-weight: 600;
    color: var(--black);
    text-transform: capitalize;
}
.section-heading h2 strong, h2 strong{
    color: var(--orange);
    font-weight: 600;
}
.section-heading p{
    font-size: 16px;
    font-weight: 500;
    color: var(--black);
    text-transform: capitalize;
}

/* Form  */
.form-control{
    height: 42px !important;
    font-size: 13px;
    border-radius: 8px;
    background: var(--white);
    border: 1px solid transparent;
    padding: 0 12px;
    color: var(--darkgrey);
    font-weight: 500;
}
.form-control::placeholder{
    color: var(--darkgrey);
    text-transform: uppercase;
    font-size: 11px;
}
textarea {
    width: 100%;
    height: 80px;
    border-radius: 12px;
    background: #F5F5F5;
    border: 1px solid transparent;
    padding: 12px 12px;
}
.form-control:focus, textarea:focus{
    border-color: var(--light-grey) !important;
    background: #F5F5F5;
    box-shadow: none;
    outline: none;
}
.login-form{
    background: #E9E9E9;
    border-radius: 20px;
    padding: 40px;
}
/* --------- Login Page Enhancements --------- */

.login-sec {
    padding: 80px 0;
    background: linear-gradient(135deg, #f5f6ff, #ffffff);
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.login-sec .login-form {
    background: #ced5ff40;
    border-radius: 20px;
    padding: 32px 32px 26px;
    border: 1px solid var(--mauve);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

/* small badge above heading */
.auth-pill {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--mauve);
    color: var(--purple);
    font-weight: 500;
}

/* tweak heading in auth card only */
.login-form .section-heading h2 {
    font-size: 28px;
}
.login-form .section-heading p {
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
}

/* Optional: better checkbox label size */
.custom-control-label {
    font-size: 12px;
    color: var(--darkgrey);
}




/* Button  */
.btn {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    border: 1px solid transparent;
    text-transform: capitalize;
    font-family: var(--body-font);
    padding: 8px 24px;
    min-width: 124px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.btn-primary, .recent-job .card .btn-outline-primary{
    background: var(--orange);
    color: var(--white);
    border: none;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.recent-job .card .btn-outline-primary:hover, .recent-job .card .btn-outline-primary:focus, 
.recent-job .card .btn-outline-primary:active{
    background: var(--black);
    color: var(--orange);
    border-color: var(--black);
}
.btn-outline{
    color: var(--orange);
    border-color: var(--orange);
}
.btn-outline:hover, .btn-outline:focus, .btn-outline:active{
    border-color: var(--orange);
    background: var(--orange);
    color: var(--black);
}

/* Header  */
.myHeader{
    padding: 8px 0;
}
.navbar-brand img{
    height: 20px;
    width: auto;
    object-fit: contain;
}
.navbar-nav li{
    margin: 0 8px;
    transition: 0.3s ease-in-out;
    position: relative;
}
.navbar-nav li a {
    font-size: 13px;
    font-weight: 400;
    text-transform: capitalize;
    font-family: var(--heading-font);
    color: var(--purple);
    position: relative;
    transition: 0.4s ease-in-out;
}
.navbar-nav li a:hover, .navbar-nav li.active a{
    color: var(--orange);
} 

/* Banner  */
.banner, .employer-testimonial {
    min-height: 600px;
    background-attachment: fixed !important;
    background-size: cover !important;
    z-index: 1;
    display: flex;
    align-items: center;
}
.banner::before, .employer-testimonial::before{
    content: "";
    width: 100%;
    height: 100%;
    background: #1b1b1bcf;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.banner-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    bottom: 0;
    left: 0;
}
.banner-text{
    max-width: 75%;
    margin: 0 auto;
}
.banner-text h1 {
    font-size: 44px;
    line-height: 1.2;
    color: var(--white);
    font-weight: 600;
    font-family: var(--heading-font);
    text-transform: capitalize;
}
.banner-text h1 strong{
    color: var(--orange);
    font-weight: 600;
}
.banner-text p{
    font-size: 20px;
    color: #ffffffe0;
    font-weight: 300;
}

/* Login Page  */
.about-img{
    position: relative;
    padding-top: 80%;
}
.about-img img{
    border-radius: 12px;
    position: absolute;
    top: 0;
    left: 0;
}

/* Statistics  */
.statistics{
    margin-top: -40px;
    z-index: 1;
}
.stat-box{
    padding: 32px 20px;
    background: var(--white);
    border: 1px solid var(--mauve);
    border-radius: 12px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.stat-box::before{
    content: "";
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: #ced5ff3b;
    position: absolute;
    bottom: -200px;
    right: -120px;
    z-index: -1;
}
.stat-icon img{
    height: 42px;
    width: 42px;
    object-fit: contain;
}
.stat h4{
    font-weight: 600;
    color: var(--purple);
    margin-bottom: 0;
}
.stat p{
    margin-bottom: 0;
}

/* Job category  */
.category-slider .item{
    padding: 12px 0;
}
.category-box{
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    transition: 0.3s ease-in-out;
}
.cat-icon{
    height: 80px;
    width: 80px;
    background: var(--mauve);
    border-radius: 50%;
    padding: 20px;
    margin-bottom: 20px;
    transition: 0.3s ease-in-out;
}
.cat-icon img{
    object-fit: contain;
}
.category-box a{
    color: var(--black);
    text-transform: capitalize;
}
.category-box:hover{
    background: var(--orange);
}
.category-box:hover .cat-icon{
    background: #ffffff60;
    filter: brightness(0) invert(1);
}
.category-box:hover a{
    color: var(--white);
}
.category-slider .owl-nav {
    position: absolute;
    top: -60px;
    right: 0;
}
.category-slider button.owl-prev span, .category-slider button.owl-next span {
    display: block;
    height: 32px;
    width: 32px;
    line-height: 32px;
    font-size: 24px;
    color: var(--purple);
    border-radius: 4px;
    border: 1px solid var(--purple);
    background: var(--white);
    transition: 0.3s ease-in-out;
}
.category-slider button.owl-prev span:hover, .category-slider button.owl-next span:hover{
    background: var(--purple);
    color: var(--white);
}


/* Job  */
.job-box, .recent-job .card{
    padding: 14px;
    border: 1px solid var(--mauve);
    border-radius: 12px;
    transition: 0.3s ease-in-out;
}
.recent-job .card{
    padding: 24px;
}
.recent-job .card .card-body{
    padding: 0;
}
.cat-list li{
    padding: 2px 10px;
    font-size: 12px;
    margin-left: 4px;
    border-radius: 12px;
    background: var(--mauve);
    color: var(--purple);
}
.job-box .candidate-profile {
    height: 40px;
    width: 40px;
    border: 2px solid var(--mauve);
}
.job-box .candidate-data h5 {
    font-size: 14px;
}
.job-title, .recent-job .card-title{
    font-size: 18px;
    color: var(--purple);
    font-weight: 400;
    margin-top: 26px;
}
.recent-job .card-title{
    margin-top: 0;
}
.post-date{
    margin-bottom: 4px;
    font-size: 12px;
}
.post-date .bi{
    color: var(--purple);
}
.job-box .btn {
    font-size: 12px;
    font-weight: 400;
    padding: 8px 12px;
    min-width: auto;
    border-radius: 4px;
}
.salary{
    color: var(--purple);
}
.salary span{
    font-size: 13px;
    color: var(--darkgrey);
}
.job-box:hover{
    border-color: var(--purple);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.job-slider .item{
    padding: 20px 0;
}

/* Testimonials  */
.test-box{
    background: #f5f5f5;
    padding: 40px 28px 120px;
    border-radius: 20px;
}
.quote{
    height: 36px;
    width: 36px !important;
    object-fit: contain;
    margin-bottom: 24px;
}
.review, .review p{
    font-size: 16px;
    color: var(--darkgrey);
}
.candidate-info {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    padding: 20px;
    border-radius: 0 20px 0 0;
    min-width: 75%;
}
.candidate-profile{
    height: 68px;
    width: 68px;
    border-radius: 50%;
    border: 4px solid var(--mauve);
    overflow: hidden;
}
.candidate-data h5{
    font-size: 16px;
    color: var(--purple);
    margin-bottom: 0;
}
.candidate-data p{
    margin-bottom: 0;
}
.testimonial-slider .owl-item.active.center .test-box{
    background: var(--mauve);
}

/* Why Us  */
.why-icon {
    height: 40px;
    width: 40px;
    background: var(--orange);
    border-radius: 4px;
    padding: 9px;
}
.why-icon img{
    filter: brightness(0) invert(1);
    object-fit: contain;
}
.whyus-text h4{
    font-size: 18px;
    font-weight: 500;
    color: var(--purple);
    margin: 14px 0 4px;
}
.why-list{
    row-gap: 20px;
}
.why-list li{
    max-width: 45%;
}

/* Employer Testimonial  */
.employer-testimonial{
    min-height: 400px;
}
.emp-test-box{
    max-width: 75%;
}
.employer-testimonial h5, .employer-testimonial p{
    color: var(--white);
    font-weight: 300;
}
.employer-testimonial .candidate-data p{
    color: var(--orange);
    font-weight: 300;
}
.employer-testimonial .review p{
    font-size: 16px;
}

/* Teams  */
.team-slider .item{
    padding: 20px 0;
}
.team-box{
    border: 1px solid var(--mauve);
    border-radius: 12px;
    overflow: hidden;
    transition: 0.3s ease-in-out;
}
.team-box:hover, .category-box:hover{
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    margin-top: -12px;
}
.member-img{
    position: relative;
    padding-top: 100%;
    margin-bottom: 12px;
}
.member-img img{
    position: absolute;
    top: 0;
    left: 0;
}
.member-info{
    background: var(--mauve);
    padding: 12px;
    border-radius: 8px;
    width: 90%;
    margin-bottom: 12px;
}
.member-info h4{
    font-size: 18px;
    color: var(--purple);
    margin-bottom: 4px;
}
.member-info p{
    margin-bottom: 0;
}
.team-box .social-list{
    position: absolute;
    top: 12%;
    left: 0;
}
.social-list li {
    background: var(--purple);
    height: 28px;
    width: 28px;
    text-align: center;
    border-radius: 4px;
    padding: 4px;
    margin-bottom: 4px;
}
.social-list li:hover{
    background: var(--orange);
}
.social-list li .bi{
    color: var(--white);
}

.faq .card-header{
    padding: 0;
    border-radius: 0;
    border: none;
    background: var(--mauve);
}
.faq .card:not(:last-child){
    margin-bottom: 12px;
}
.faq .btn-link{
    font-weight: 500;
    color: #1B1B1B;
}
.faq .btn-link[aria-expanded="true"]{
    color: var(--purple);
}

/* Footer Top  */
.ftop-wrap{
    background: var(--orange);
    border-radius: 12px;
    padding: 48px 175px;
    z-index: 1;
    margin-bottom: -60px;
}
.ftop-wrap::before{
    content: "";
    width: 100%;
    height: 100%;
    background: #f47a20ba;
    border-radius: 12px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.ftop-wrap h2, .ftop-wrap p{
    color: var(--white);
}
.ftop-wrap .btn-primary{
    background: var(--purple);
}

/* Footer  */
.myfooter{
    background-attachment: fixed !important;
    background-size: cover !important;
    background-blend-mode: multiply;
    padding-top: 140px;
}
.footer-logo img{
    height: 24px;
    filter: brightness(0) invert(1);
    width: auto;
    object-fit: contain;
}
.myfooter .social-list li{
    background: transparent;
    border: 1px solid var(--darkgrey);
}
.myfooter .social-list li .bi{
    color: var(--darkgrey);
}
.myfooter .social-list li:hover{
    background: var(--orange);
    border-color: var(--orange);
}
.myfooter .social-list li:hover .bi{
    color: var(--white);
}
.myfooter .social-list li:not(:last-child){
    margin-right: 4px;
}
.myfooter h3{
    font-size: 18px;
    font-weight: 600;
    font-family: var(--heading-font);
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 20px;
}
.myfooter .navbar-nav li a{
    color: var(--gray) !important;
    font-weight: 500 !important;
    padding: 6px 0 !important;
}
.myfooter .navbar-nav li.active a{
    color: var(--white) !important;
}
.myfooter .navbar-nav li{
    background: transparent !important;
    margin: 0;
}
.con-list .con-box {
    position: relative;
    padding-left: 50px;
}
.con-box h5 , .timing h5{
    font-size: 12px;
    color: var(--gray);
    font-weight: 400;
    margin-bottom: 2px;
}
.con-box, .con-box a , .timing span{
    font-size: 13px;
    line-height: 1.4;
    color: var(--white);
}
.con-box .bi , .copyright li .bi{
    display: block;
    color: var(--gray);
    height: 36px;
    width: 36px;
    line-height: 36px;
    text-align: center;
    border: 1px solid var(--darkgrey);
    border-radius: 4px;
    background: transparent;
    font-size: 18px;
    position: absolute;
    top: 0;
    left: 0;
}
.con-list .con-box:not(:last-child), .timing li:not(:last-child){
    margin-bottom: 12px;
}
.footer-row{
    margin-bottom: 42px;
}
.copyright li .bi{
    position: static;
}
.copyright li{
    margin-left: 12px;
}
.myfooter hr{
    border-color: var(--darkgrey);
}
.copyright{
    padding: 0 0 20px 0;
}
.myfooter p{
    color: var(--white);
    margin-bottom: 0;
}
.copyright p a{
    color: var(--orange);
}

/* ..............contact.......... */

/* Support Page Buttons */
.quick-btn {
    background: var(--purple);
    color: var(--white);
    padding: 16px 18px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: rgba(0,0,0,0.09) 0px 4px 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
}
.quick-btn i {
    font-size: 20px;
}

/* Email + phone formatting */
.contact-info p {
    margin-bottom: 6px;
    color: var(--purple);
    font-weight: 600;
}

/* .................myjobs........ */

/* Inner Banner  */
.inner-banner{
    background-size: cover !important;
    background-attachment:  fixed !important;
    width: 100%;
    height: 100%;
    padding: 60px 0;
    position: relative;
    z-index: 1;
}
.inner-banner::before {
    content: "";
    background: linear-gradient(312deg, var(--purple), var(--orange));
    opacity: 0.9;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.inner-banner-text h2 {
    color: var(--white);
    font-family: var(--heading-font);
    text-transform: capitalize;
}
.breadcrumb-item a, .breadcrumb-item.active{
    color: var(--white);
}

/* Job Listing Page  */
.job-row{
    row-gap: 20px;
}
.filter-left label.filter-title{
    color: var(--purple);
    font-weight: 600;
    background: var(--mauve);
    padding: 8px 12px;
    width: 100%;
}

/* post job section */

/* Force all form fields to always show a clear border */
#postJobForm input,
#postJobForm select,
#postJobForm textarea {
    border: 1.5px solid #d4d9e2 !important;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff !important;
}

/* On focus: stronger border (optional) */
#postJobForm input:focus,
#postJobForm select:focus,
#postJobForm textarea:focus {
    border-color: #00004E !important;
    box-shadow: none !important;
}

/* Placeholder color darker (optional) */
#postJobForm ::placeholder {
    color: #999 !important;
    opacity: 1;
}


/* About Page  */
.success h5{
    color: var(--purple);
}
.success-box {
    border: 2px solid var(--mauve);
    padding: 40px !important;
}
.success-box p{
    margin-bottom: 0;
}
.contact-right h5, .contact-right a{
    color: var(--purple);
}
.contact-right a{
    font-weight: 600;
}
.contact-right .row{
    row-gap: 8px;
}

/* Dashboard  */
.dropdown-item {
    font-size: 14px;
    font-weight: 600 !important;
}
.dashboard-space{
    padding: 40px 0 !important;
    border-top: 1px solid var(--mauve);
}
.dashboard-space .dash-row .card, .dashboard-space .dash-row .dash-card{
    background: var(--light-grey);
    border-radius: 8px;
    border: none;
    border: 1px solid #F47A2040;
}
.dashboard-space .dash-row .card h3, .dashboard-space .dash-row .dash-card h3,
.dash-label{
    color: var(--purple);
    font-weight: 600;
    margin-bottom: 0;
}
.dashboard-space .dash-row .card h6, .dashboard-space .dash-row .dash-card h6, .dash-label{
    color: var(--orange);
}
.section-heading h4, .applied-title{
    color: var(--black);
    font-weight: 600;
}
.dash-icon{
    height: 40px;
    width: 40px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(48%) sepia(82%) saturate(1328%) hue-rotate(350deg) brightness(102%) contrast(91%);
    position: absolute;
    top: 20px;
    left: 20px;
}
.dash-row .card-body{
    position: relative;
    padding-left: 84px;
}
.dashboard-space .dash-row .dash-card{
    padding: 20px 20px 20px 84px;
}
.dash-card-icon{
    font-size: 42px;
    color: var(--orange);
    position: absolute;
    top: 20px;
    left: 40px;
}
.dash-hint{
    margin-bottom: 0;
}
.recent-job{
    row-gap: 20px;
}
.recent-job [class*="col-"]{
    margin-bottom: 0 !important;
}
.job-row {
    margin: 0 -8px;
}
.job-row [class*="col-"]{
    padding: 0 8px;
}

/* Post Job  */
.posting-job-card h5{
    background: var(--orange);
    color: var(--white);
    padding: 12px;
    border-radius: 12px 12px 0 0;
}
.posting-job-card .bi{
    color: var(--orange);
}

/* Modal  */
.modal-title{
    color: var(--purple);
}
.modal-header {
    background: var(--mauve);
    padding-bottom: 12px !important;
}