/* =========================
GLOBAL STYLES
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Inter',sans-serif;
background:#f7f9fc;
color:#333;
line-height:1.6;
}

h1,h2,h3,h4{
font-family:'Poppins',sans-serif;
margin-bottom:15px;
}

a{
text-decoration:none;
color:#0066cc;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

/* =========================
TOP BAR
========================= */

.topbar{
background:#0d2c54;
color:white;
font-size:14px;
}

.topbar__inner{
display:flex;
justify-content:space-between;
padding:8px 0;
}

.topbar a{
color:white;
margin-left:15px;
}

/* =========================
HEADER
========================= */

.header{
background:white;
border-bottom:1px solid #ddd;
position:sticky;
top:0;
z-index:100;
}

.header__inner{
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 0;
}

.header__logo{
font-size:22px;
font-weight:700;
color:#0d2c54;
display:flex;
align-items:center;
}

.header__logo img{
height:40px;
margin-right:10px;
}

/* =========================
NAVIGATION
========================= */

.nav__menu{
list-style:none;
display:flex;
gap:20px;
}

.nav__item a{
color:#333;
font-weight:500;
}

.nav__toggle{
display:none;
background:none;
border:none;
font-size:24px;
cursor:pointer;
}

/* =========================
HERO
========================= */

.hero{
    /* default hero background image; overlay applied via ::before */
    background: url('../images/hero.jpg') center/cover no-repeat;
    color:white;
    padding:100px 0 120px;
    text-align:center;
}

.hero__title{
font-size:42px;
}

.hero__subtitle{
font-size:18px;
margin-bottom:20px;
}

/* =========================
SEARCH BAR
========================= */

.hero__search{
margin-top:-40px;
}

.job-search{
display:flex;
justify-content:center;
gap:10px;
background:white;
padding:20px;
border-radius:8px;
box-shadow:0 5px 20px rgba(0,0,0,0.1);
max-width:700px;
margin:auto;
}

.job-search input{
padding:12px;
border:1px solid #ddd;
border-radius:4px;
flex:1;
}

.job-search button{
background:#0066cc;
color:white;
border:none;
padding:12px 20px;
border-radius:4px;
cursor:pointer;
}

/* =========================
TRUSTED SECTION
========================= */

.trusted{
padding:60px 0;
text-align:center;
}

.trusted__logos{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:30px;
margin-top:20px;
}

.trusted__logo{
font-weight:bold;
font-size:18px;
color:#555;
}

/* =========================
CATEGORIES
========================= */

.categories{
background:#fff;
padding:60px 0;
}

.categories__grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
margin-top:30px;
}

.category-card{
background:#f5f7fb;
padding:25px;
border-radius:8px;
text-align:center;
transition:0.3s;
}

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

/* =========================
FEATURED JOBS
========================= */

.featured-jobs{
padding:60px 0;
}

.job-card{
background:white;
padding:20px;
border-radius:8px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
text-align:center;
}

.job-card__location{
display:block;
margin:10px 0;
color:#777;
}

.job-card__btn{
display:inline-block;
margin-top:10px;
background:#0066cc;
color:white;
padding:8px 15px;
border-radius:4px;
}

/* =========================
WHY US
========================= */

.why-us{
background:#f5f7fb;
padding:60px 0;
}

.why-us__grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

.feature{
background:white;
padding:25px;
border-radius:8px;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

/* =========================
STATS
========================= */

.stats{
background:#0d2c54;
color:white;
padding:60px 0;
text-align:center;
}

.stats__grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;
}

.stat__number{
font-size:36px;
font-weight:bold;
}

/* =========================
CTA
========================= */

.cta{
background:#0066cc;
color:white;
}

/* Employers page extras */
.employer-steps {
    list-style: none;
    counter-reset: step;
    padding-left: 0;
}
.employer-steps li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 20px;
}
.employer-steps li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    background: var(--color-primary);
    color: var(--color-white);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
.employer-benefits {
    list-style: none;
    padding-left: 0;
}
.employer-benefits li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}
.employer-benefits li::before {
padding:60px 0;
text-align:center;

    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--color-primary);
}

.applications-section {
    padding:60px 0;
    text-align:center;
}

.cta__btn{
display:inline-block;
margin-top:20px;
background:white;
color:#0066cc;
padding:12px 25px;
border-radius:5px;
font-weight:bold;
}

/* =========================
BLOG PREVIEW
========================= */

.blog-preview{
padding:60px 0;
}

.blog-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

.blog-card{
background:white;
padding:20px;
border-radius:8px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

/* =========================
FOOTER
========================= */

.footer{
background:#0d2c54;
color:white;
padding:50px 0;
}

.footer__grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;
}

.footer a{
color:#ddd;
}

.footer__bottom{
text-align:center;
margin-top:30px;
border-top:1px solid rgba(255,255,255,0.2);
padding-top:20px;
}

/* =========================
MOBILE
========================= */

@media(max-width:768px){

.nav__menu{
display:none;
flex-direction:column;
background:white;
position:absolute;
top:70px;
right:0;
width:200px;
padding:20px;
}

.nav--open .nav__menu{
display:flex;
}

.nav__toggle{
display:block;
}

.job-search{
flex-direction:column;
}

.hero{
padding:80px 0;
}

.hero__title{
font-size:30px;
}

}

/* HERO UPGRADE */

.hero{
background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
url('../images/hero.jpg') center/cover;
padding:120px 0;
color:white;
position:relative;
overflow:hidden;
}

.hero__inner{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
}

.hero__title{
font-size:48px;
margin-bottom:20px;
}

.hero__subtitle{
font-size:20px;
margin-bottom:25px;
}

/* Floating icons */

.hero__icons{
position:absolute;
right:50px;
top:50%;
transform:translateY(-50%);
}

.floating-icon{
font-size:40px;
margin:15px 0;
animation:float 4s ease-in-out infinite;
}

@keyframes float{

0%{transform:translateY(0)}
50%{transform:translateY(-15px)}
100%{transform:translateY(0)}

}

/* JOB CARDS */

.jobs-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
margin-top:30px;
}

.job-card{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 8px 25px rgba(0,0,0,.08);
transition:.3s;
}

.job-card:hover{
transform:translateY(-6px);
box-shadow:0 12px 35px rgba(0,0,0,.12);
}

.apply-btn{
display:inline-block;
margin-top:12px;
background:#0066cc;
color:white;
padding:10px 16px;
border-radius:5px;
}

/* STATS */

.stats{
background:#0d2c54;
color:white;
padding:70px 0;
text-align:center;
}

.stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;
}

.counter{
font-size:40px;
font-weight:bold;
}

.logo-carousel{
overflow:hidden;
background:white;
padding:40px 0;
}

.logo-track{
display:flex;
width:200%;
animation:scroll 20s linear infinite;
}

.logo-track img{
height:50px;
margin:0 60px;
opacity:.7;
}

@keyframes scroll{
0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}

.dashboard-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

.card{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,.1);
}

.jobs-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:25px;
margin-top:30px;
}

.job-meta{
font-size:14px;
color:#666;
margin-bottom:6px;
}

.job-actions{
margin-top:15px;
display:flex;
gap:10px;
}

.job-filters{
margin:40px auto;
}

.filter-form{
display:flex;
gap:15px;
flex-wrap:wrap;
}

.job-page{
display:grid;
grid-template-columns:2fr 1fr;
gap:40px;
margin:40px auto;
}

.job-main{
background:white;
padding:30px;
border-radius:8px;
box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.job-sidebar{
display:flex;
flex-direction:column;
gap:20px;
}

.apply-button{
width:100%;
text-align:center;
display:block;
font-size:18px;
padding:15px;
}

/* GLOBAL BUTTON STYLE */

.button{
display:inline-block;
background:#0d6efd;
color:#fff;
padding:10px 18px;
border-radius:6px;
text-decoration:none;
font-size:14px;
font-weight:500;
border:none;
cursor:pointer;
transition:all .2s ease;
}

.button:hover{
background:#0b5ed7;
transform:translateY(-1px);
}

.button-small{
padding:6px 12px;
font-size:13px;
}

.button-outline{
background:white;
color:#0d6efd;
border:1px solid #0d6efd;
}

.button-outline:hover{
background:#0d6efd;
color:white;
}

.job-filters{
margin:30px 0;
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:center;
}

.job-filters input,
.job-filters select{
padding:8px 10px;
border:1px solid #ccc;
border-radius:5px;
font-size:14px;
}

.job-filters button{
height:36px;
}

.button-large{
padding:14px 24px;
font-size:18px;
}

.applications-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
margin-top:30px;
}

.application-card{
background:white;
padding:25px;
border-radius:8px;
box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.app-date{
color:#777;
font-size:14px;
margin-bottom:10px;
}

.app-status{
font-weight:600;
}

.status-new{color:#0d6efd;}
.status-screening{color:#ffc107;}
.status-interview{color:#17a2b8;}
.status-shortlisted{color:#28a745;}
.status-rejected{color:#dc3545;}
.status-hired{color:#198754;}

.dashboard-summary{
display:flex;
gap:20px;
margin:30px 0;
}

.summary-card{
background:#f8f9fa;
padding:20px;
border-radius:8px;
text-align:center;
min-width:180px;
}

.dashboard-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:40px;
}

.dashboard-card{
display:block;
text-decoration:none;
color:#333;
padding:30px;
transition:all .25s ease;
border-radius:8px;
}

.dashboard-card:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,.1);
}

.dashboard-card h3{
margin-bottom:10px;
}

.button {
    display: inline-block;
    background: #2563eb;
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: 0.2s ease;
}

.button:hover {
    background: #1e4fd6;
}

.button-secondary {
    background: #6b7280;
}

.button-secondary:hover {
    background: #4b5563;
}

.button-danger {
    background: #dc2626;
}

.button-danger:hover {
    background: #b91c1c;
}

.services-intro {
    max-width: 800px;
    margin: 30px auto;
    text-align: center;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

.service-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 25px;
    transition: 0.2s;
}

.service-card h3 {
    margin-top: 0;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
}

.services-intro {
    max-width: 800px;
    margin: 40px auto;
    text-align: center;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.service-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    transition: 0.25s;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.service-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

.service-card h3 {
    margin-top: 10px;
}

.service-card p {
    margin-bottom: 20px;
}

.services-cta {
    margin-top: 60px;
    padding: 50px;
    background: #f3f4f6;
    text-align: center;
    border-radius: 10px;
}

.features-section{
    max-width: 900px;
    margin: 80px auto;
}

.feature{
    margin-bottom: 60px;
}

.feature h2{
    margin-bottom: 10px;
}

.opportunities-cta{
    text-align:center;
    padding:60px;
    background:#f5f7fa;
    border-radius:10px;
    margin:60px 0;
}

.fade-in{
    opacity:0;
    transform:translateY(40px);
    transition:all 0.8s ease;
}

.fade-in.visible{
    opacity:1;
    transform:translateY(0);
}

.clients-section{
    text-align:center;
    margin:80px 0;
}

.clients-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:30px;
    margin-top:40px;
}

.client-logo{
    background:#fff;
    border:1px solid #e5e7eb;
    padding:25px;
    border-radius:8px;
    font-weight:600;
    color:#555;
}

.parallax-section{
    background-image:url('/public/assets/images/MRAHome2.jpg');
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    padding:120px 20px;
    text-align:center;
    color:white;
    position:relative;
}

.parallax-section::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.55);
}

.parallax-content{
    position:relative;
    max-width:700px;
    margin:auto;
}

.fade-in{
    opacity:0;
    transform:translateY(40px);
    transition:all 0.8s ease;
}

.fade-in.visible{
    opacity:1;
    transform:translateY(0);
}

.hero-home{
    /* specific background for home page (image updated to png) */
    background-image:url('../images/MRAHome2.png');
    background-size:cover;
    background-position:center;
    padding:140px 20px;
    /* base color is white but overridden for text elements below */
    color:white;
    text-align:center;
    position:relative;
}

/* job listings and job detail pages use a custom hero image */
.hero.hero-jobs,
.page-jobs .hero.hero-jobs {
    background: url('../images/MRAJobs1.png') center/cover no-repeat !important;
}

/* ensure home hero text color turns blue even if home section long class change */
#hero.hero-home h1,
#hero.hero-home p,
#hero.hero-home .btn {
    color: #0d6efd !important;
}

/* home hero text should appear blue */
.hero-home h1,
.hero-home p,
.hero-home .btn {
    color: #0d6efd !important;
}
.hero-home .btn.btn-warning {
    /* keep warning button yellow text white for contrast */
    color: white !important;
}

.hero-home::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    /* base overlay will be applied via generic rules below */
    background:rgba(0,0,0,0.55);
}

.hero-content{
position:relative;
max-width:800px;
margin:auto;
}

.stats-section{
background:#f5f7fa;
padding:80px 20px;
text-align:center;
}

.stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:30px;
}

.stat h2{
font-size:40px;
color:#2563eb;
}

.container{
max-width:1200px;
margin:auto;
padding:0 20px;
}

section{
padding:80px 0;
}

.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
}

/* ensure about intro has white background */
.about-intro{
    background:white;
    padding:60px 0;
}

/* about intro image should fill its grid cell (half page) */
.about-intro-img,
.about-intro img {
    width:100%;
    height:auto;
    display:block;
    object-fit:cover;
}

.values-grid,
.why-grid,
.process-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
}

.value-card,
.why-item,
.process-step{
background:#fff;
padding:25px;
border-radius:8px;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.cta-section{
text-align:center;
background:#f5f7fa;
}

.cta-buttons{
margin-top:20px;
display:flex;
gap:20px;
justify-content:center;
}

.about-hero{
    text-align:center;
    /* background image; overlay will be provided globally */
    background: url('../images/MRAabout1.png') no-repeat top center;
    background-size: cover;
    color:white;
    /* increase top/bottom padding to double height */
    padding:200px 20px;
}

.services-hero{
    /* services page background image (top align) */
    background: url('../images/MRAServices1.png') no-repeat top center;
    background-size: cover;
    padding:140px 20px;
    text-align:center;
}

/* generic hero overlay and positioning for uniform layout */
.hero,
.about-hero,
.jobs-hero,
.hero-home {
    position:relative;
    overflow:hidden;
    color:white;
    text-align:center;
}

.hero::before,
.about-hero::before,
.jobs-hero::before,
.hero-home::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    /* white semi-transparent overlay for all hero sections */
    background: rgba(255,255,255,0.5);
    z-index:1;
}

.hero > .container,
.about-hero > .container,
.jobs-hero > .container,
.hero-home > .container {
    position:relative;
    z-index:2;
}

.container{
max-width:1200px;
margin:auto;
padding:0 20px;
}

.testimonials-section{
background:#e8f2ff;
padding:80px 0;
text-align:center;
overflow:hidden;
}

.testimonial-slider{
overflow:hidden;
margin-top:40px;
}

.testimonial-track{
display:flex;
gap:30px;
animation:slideTestimonials 25s linear infinite;
}

.testimonial-card{
min-width:320px;
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
text-align:left;
}

@keyframes slideTestimonials{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}

/* video gallery styles */
.video-gallery {
    margin-top: 40px;
}

.video-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    transition: 0.25s;
    height: 100%;
}

.video-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.video-card iframe {
    width: 100%;
    height: 200px;
    border: none;
    border-radius: 10px 10px 0 0;
}

.video-card .card-body {
    padding: 20px;
}

.video-card .card-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 0;
}

.video-pagination .btn {
    min-width: 40px;
    height: 40px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.video-pagination .btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.video-pagination .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .video-pagination {
        gap: 5px !important;
    }

    .video-pagination .btn {
        min-width: 35px;
        height: 35px;
        font-size: 14px;
    }
}


.timeline-section{
padding:80px 0;
background:#f5f9ff;
}

.timeline{
position:relative;
max-width:800px;
margin:auto;
}

.timeline::before{
content:'';
position:absolute;
left:50%;
top:0;
bottom:0;
width:4px;
background:#2563eb;
transform:translateX(-50%);
}

.timeline-item{
display:flex;
align-items:center;
margin:40px 0;
position:relative;
}

.timeline-item:nth-child(odd){
flex-direction:row-reverse;
}

.timeline-year{
background:#2563eb;
color:white;
padding:10px 16px;
border-radius:6px;
font-weight:bold;
min-width:70px;
text-align:center;
z-index:2;
}

.timeline-content{
background:white;
padding:20px;
border-radius:8px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
width:45%;
}

.fade-in{
opacity:0;
transform:translateY(40px);
transition:all .8s ease;
}

.fade-in.visible{
opacity:1;
transform:translateY(0);
}

.jobs-search{
display:flex;
gap:15px;
flex-wrap:wrap;
margin-top:20px;
}

.jobs-search input,
.jobs-search select{
padding:10px;
border:1px solid #ddd;
border-radius:6px;
}

.jobs-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
margin-top:40px;
}

.job-card{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.job-meta{
display:flex;
gap:20px;
font-size:14px;
margin:10px 0;
color:#555;
}

.job-actions{
margin-top:15px;
display:flex;
gap:10px;
}

.pagination{
display:flex;
gap:10px;
justify-content:center;
margin-top:40px;
}

.pagination a{
padding:8px 14px;
border:1px solid #ddd;
border-radius:6px;
text-decoration:none;
}

.pagination a.active{
background:#2563eb;
color:white;
}

.job-layout{
display:grid;
grid-template-columns:2fr 1fr;
gap:40px;
margin-top:40px;
}

.job-main h2{
margin-top:30px;
}

.job-sidebar{
position:relative;
}

.job-summary{
background:#f5f7fa;
padding:25px;
border-radius:10px;
margin-bottom:20px;
}

.job-summary ul{
list-style:none;
padding:0;
margin:0;
}

.job-summary li{
margin-bottom:15px;
}

.apply-box{
background:#e8f2ff;
padding:25px;
border-radius:10px;
text-align:center;
}

.apply-button{
width:100%;
display:inline-block;
}

.dashboard-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:30px;
margin-top:40px;
}

.dashboard-card{
background:white;
padding:30px;
border-radius:10px;
text-decoration:none;
color:#333;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
transition:0.3s;
}

.dashboard-card:hover{
transform:translateY(-5px);
box-shadow:0 6px 18px rgba(0,0,0,0.1);
}

.applications-table{
width:100%;
border-collapse:collapse;
margin-top:30px;
}

.applications-table th,
.applications-table td{
padding:12px;
border-bottom:1px solid #ddd;
text-align:left;
}

.status{
padding:6px 10px;
border-radius:6px;
font-size:13px;
}

.status-applied{background:#e3f2fd;color:#1565c0;}
.status-reviewed{background:#fff3cd;color:#856404;}
.status-interviewed{background:#e8f5e9;color:#2e7d32;}
.status-offered{background:#d4edda;color:#155724;}
.status-rejected{background:#f8d7da;color:#721c24;}

.profile-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
margin-top:40px;
}

.profile-box{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

.profile-box form{
display:flex;
flex-direction:column;
gap:10px;
}

.profile-box input{
padding:10px;
border:1px solid #ccc;
border-radius:6px;
}

.contact-section{
padding:60px 0;
}

.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
margin-top:40px;
}

.contact-info{
background:#f5f7fb;
padding:30px;
border-radius:10px;
}

.contact-form form{
display:flex;
flex-direction:column;
gap:12px;
}

.contact-form input,
.contact-form textarea{
padding:10px;
border:1px solid #ccc;
border-radius:6px;
}

.map-section{
margin-top:40px;
}

.alert-success{
background:#e6f7ec;
color:#1e7e34;
padding:12px;
border-radius:6px;
margin-bottom:15px;
}

.alert-error{
background:#fdecea;
color:#b02a37;
padding:12px;
border-radius:6px;
margin-bottom:15px;
}

.stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
margin-top:30px;
}

.stat-box{
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

.stat-box a{
display:inline-block;
margin-top:10px;
color:#1e3a8a;
font-weight:100;
}

.admin-title{
font-size:28px;
margin-bottom:30px;
}

.admin-stats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:20px;
margin-bottom:40px;
justify-content:center;
}

.admin-card{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
text-align:center;  /* center counters and links */
transition:0.2s;

/* constrain width for better layout on wide screens */
max-width:360px;
width:100%;
margin:0 auto;
}

.admin-card:hover {
    transform: translateY(-3px);
    box-shadow:0 6px 18px rgba(0,0,0,0.15);
}

.admin-card h3{
margin-bottom:10px;
}

.admin-card p{
font-size:28px;
font-weight:700;
color:#1e3a8a;
}

.admin-card a{
display:inline-block;
margin-top:10px;
color:#1e3a8a;
font-weight:600;
}

/* Help Desk card expands vertically rather than becoming very wide */
.admin-card--helpdesk .helpdesk-stats {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    margin-top:12px;
}

.admin-card--helpdesk .helpdesk-row {
    width:100%;
    max-width:280px;
    padding:6px 10px;
    background:rgba(30,58,138,0.06);
    border-radius:8px;
    font-size:0.95rem;
}

.admin-card--helpdesk .helpdesk-total {
    font-size:32px;
    font-weight:800;
    margin:8px 0;
}

.admin-subtitle{
margin-top:40px;
margin-bottom:20px;
}

.admin-actions{
display:flex;
flex-wrap:wrap;
gap:15px;
}

.admin-action{
background:#1e3a8a;
color:white;
padding:12px 20px;
border-radius:6px;
text-decoration:none;
}

.admin-wrapper{
position:relative;
z-index:2;
}

.auth-container{
max-width:420px;
margin:40px auto;
padding:30px;
background:#fff;
border-radius:8px;
box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.form-group{
margin-bottom:18px;
}

.form-group input,
.form-group select{
width:100%;
padding:10px;
border:1px solid #ccc;
border-radius:4px;
}

.alert-danger{
background:#ffe0e0;
padding:10px;
border-radius:4px;
margin-bottom:15px;
}

.auth-note{
margin-top:15px;
}

/* team section */
.team-section{
    padding:60px 0;
    background:#fff;
}
.team-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:30px;
}
.team-member img{
    width:150px;
    height:150px;
    object-fit:cover;
    border-radius:50%;
    display:block;
    margin:0 auto 15px;
}
.team-member h3{
    margin-bottom:5px;
    text-align:center;
}
.team-member p.role{
    font-weight:600;
    color:#1e3a8a;
    text-align:center;
    margin-bottom:10px;
}
.team-member p.bio{
    font-size:14px;
    text-align:center;
    color:#555;
}

/* LOGIN PAGE */

.login-wrapper{
min-height:80vh;
display:flex;
justify-content:center;
align-items:center;
background:#f4f6f9;
padding:40px;
}

.login-card{
width:420px;
background:white;
padding:40px;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
text-align:center;
}

.login-title{
margin-bottom:5px;
font-size:28px;
}

.login-subtitle{
color:#777;
margin-bottom:25px;
}

.login-error{
background:#ffe3e3;
color:#a00;
padding:10px;
border-radius:6px;
margin-bottom:20px;
}

.login-form{
text-align:left;
}

.form-group{
margin-bottom:18px;
}

.form-group label{
display:block;
margin-bottom:5px;
font-weight:600;
}

.form-group input{
width:100%;
padding:10px;
border:1px solid #ccc;
border-radius:6px;
font-size:14px;
}

.form-group input:focus{
border-color:#0077cc;
outline:none;
}

.login-button{
width:100%;
padding:12px;
background:#0077cc;
border:none;
color:white;
font-size:16px;
border-radius:6px;
cursor:pointer;
}

.login-button:hover{
background:#005fa3;
}

.login-divider{
margin:25px 0;
position:relative;
}

.login-divider span{
background:white;
padding:0 10px;
color:#777;
}

.login-divider:before{
content:"";
position:absolute;
left:0;
top:50%;
width:100%;
height:1px;
background:#ddd;
z-index:-1;
}

.social-login{
display:flex;
gap:10px;
justify-content:center;
}

.social-btn{
flex:1;
padding:10px;
border-radius:6px;
text-decoration:none;
color:white;
font-size:14px;
}

.social-btn.google{
background:#db4437;
}

.social-btn.facebook{
background:#3b5998;
}

.social-btn.twitter{
background:#1da1f2;
}

.login-footer{
margin-top:20px;
font-size:14px;
}

/* LOGIN PAGE */

.login-wrapper{
min-height:85vh;
display:flex;
justify-content:center;
align-items:center;
background:#f4f6f9;
padding:40px;
}

.login-card{
width:420px;
background:white;
padding:40px;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
text-align:center;
}

/* BRAND HEADER */

.brand-header{
margin-bottom:20px;
}

.brand-logo{
    width:90px;
    margin-bottom:10px;
}

/* ensure logo fits in navbar without disrupting height */
.navbar-brand .brand-logo,
.navbar-brand img {
    max-height:40px;
    width:auto;
}

/* logo container creates white circular/oval background */
.logo-container {
    display:inline-block;
    background:white;
    border-radius:50%;
    padding:4px;
    vertical-align:middle;
    /* ensure fixed size so shape remains circular if logo varies */
    width:48px;
    height:48px;
    overflow:hidden;
}
.logo-container .brand-logo {
    /* fill container but maintain aspect ratio */
    max-height:100%;
    max-width:100%;
    display:block;
}

.navbar-brand .brand-text {
    margin-left:8px;
    font-weight:700;
    font-size:1.1rem;
    vertical-align:middle;
}

.brand-title{
margin:0;
font-size:20px;
font-weight:700;
}

.brand-subtitle{
color:#777;
font-size:14px;
margin-top:4px;
}

.login-title{
margin-top:10px;
font-size:24px;
}

.login-subtitle{
color:#777;
margin-bottom:25px;
}

.login-error{
background:#ffe3e3;
color:#a00;
padding:10px;
border-radius:6px;
margin-bottom:20px;
}

.login-form{
text-align:left;
}

.form-group{
margin-bottom:18px;
}

.form-group label{
display:block;
margin-bottom:5px;
font-weight:600;
}

.form-group input{
width:100%;
padding:10px;
border:1px solid #ccc;
border-radius:6px;
font-size:14px;
}

.form-group input:focus{
border-color:#0077cc;
outline:none;
}

.login-button{
width:100%;
padding:12px;
background:#0077cc;
border:none;
color:white;
font-size:16px;
border-radius:6px;
cursor:pointer;
}

.login-button:hover{
background:#005fa3;
}

.login-divider{
margin:25px 0;
position:relative;
}

.login-divider span{
background:white;
padding:0 10px;
color:#777;
}

.login-divider:before{
content:"";
position:absolute;
left:0;
top:50%;
width:100%;
height:1px;
background:#ddd;
z-index:-1;
}

.social-login{
display:flex;
gap:10px;
justify-content:center;
}

.social-btn{
flex:1;
padding:10px;
border-radius:6px;
text-decoration:none;
color:white;
font-size:14px;
}

.social-btn.google{
background:#db4437;
}

.social-btn.facebook{
background:#3b5998;
}

.social-btn.twitter{
background:#1da1f2;
}

.login-footer{
margin-top:20px;
font-size:14px;
}

.form-group select{
width:100%;
padding:10px;
border:1px solid #ccc;
border-radius:6px;
font-size:14px;
background:white;
}

.table{
width:100%;
border-collapse:collapse;
margin-top:20px;
}

.table th,
.table td{
border:1px solid #ddd;
padding:10px;
}

.table th{
background:#f4f4f4;
text-align:left;
}

#policyTabs .nav-link {
    color: #0d6efd !important; /* Bootstrap primary blue */
    font-weight: 600;
}

#policyTabs .nav-link:hover {
    color: #084298 !important;
}

/* SOCIAL FLOAT WIDGET */

.social-float {
    position: fixed !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 9999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.4s ease !important;
}

.social-float.show {
    opacity: 1 !important;
    visibility: visible !important;
}

.social-float ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.social-float ul li {
    margin: 5px 0 !important;
    list-style: none !important;
}

.social-float ul li a {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    line-height: 48px !important;
    text-align: center !important;
    color: white !important;
    font-size: 20px !important;
    border-radius: 8px 0 0 8px !important;
    transition: width 0.3s ease !important;
}

.social-float ul li a:hover {
    width: 65px !important;
}

/* Brand colors for social icons */
.facebook { background: #1877F2 !important; }
.twitter { background: #000000 !important; }
.instagram { background: #E4405F !important; }
.linkedin { background: #0077B5 !important; }
.youtube { background: #FF0000 !important; }
.tiktok { background: #111111 !important; }
.whatsapp { background: #25D366 !important; }

/* =========================
BLOG STYLES
========================= */

.blog-content {
    font-size: 1.1rem;
    line-height: 1.8;
}

.blog-content h1, .blog-content h2, .blog-content h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.blog-content p {
    margin-bottom: 1.5rem;
}

.blog-content img {
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
}

.blog-content ul, .blog-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.blog-content blockquote {
    border-left: 4px solid #0066cc;
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
}