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

:root{
--bg:#0B0F19;
--surface:#141A26;
--card:#1C2433;
--gold:#D4AF37;
--gold2:#F4D35E;
--white:#F8FAFC;
--text:#B8C1CC;
--line:#2A3446;
--radius:20px;
--shadow:0 20px 40px rgba(0,0,0,.35);
}
html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}
*{
    box-sizing:border-box;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:var(--bg);
color:var(--white);
line-height:1.7;
}

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

header{
position:sticky;
top:0;
z-index:999;
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 20px;
background:rgba(11,15,25,.96);
backdrop-filter:blur(18px);
border-bottom:1px solid var(--line);
}

.logo{
flex:1;
display:flex;
justify-content:center;
}

.logo h2{
font-size:15px;
font-weight:600;
letter-spacing:2px;
color:var(--gold);
text-transform:uppercase;
}

.menu-btn{
font-size:30px;
color:var(--gold);
cursor:pointer;
}

/*======== MENU ========*/

#mobileMenu{
position:absolute;
top:100%;
left:0;
width:100%;
background:var(--surface);
display:flex;
flex-direction:column;
overflow:hidden;
max-height:0;
transition:.4s;
border-bottom:1px solid var(--line);
}

#mobileMenu.show{
max-height:450px;
}

#mobileMenu a{
padding:18px 25px;
text-decoration:none;
color:var(--white);
font-size:16px;
border-bottom:1px solid var(--line);
}

#mobileMenu a:hover{
background:#20293a;
}

#mobileMenu .btn{
margin:20px;
padding:15px;
text-align:center;
border-radius:50px;
background:linear-gradient(135deg,var(--gold2),var(--gold));
color:#111;
font-weight:700;
}

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

.hero{
padding:80px 8%;
text-align:center;
background:
radial-gradient(circle at top,#2A3446 0%,transparent 60%),
var(--bg);
}

.hero span{
display:inline-block;
padding:10px 22px;
border:1px solid var(--gold);
border-radius:40px;
color:var(--gold);
font-size:13px;
letter-spacing:1px;
margin-bottom:25px;
}

.hero h1{
font-size:42px;
font-weight:600;
line-height:1.15;
max-width:650px;
margin:0 auto 25px;
}

.hero p{
max-width:650px;
margin:0 auto 35px;
font-size:17px;
color:var(--text);
}

/*======== BUTTONS ========*/

.buttons{
display:flex;
flex-direction:column;
gap:18px;
}

.primary,
.secondary{
padding:18px;
border-radius:50px;
text-decoration:none;
font-size:17px;
font-weight:600;
transition:.3s;
}

.primary{
background:linear-gradient(135deg,var(--gold2),var(--gold));
color:#111;
}

.secondary{
border:2px solid var(--gold);
color:var(--gold);
background:transparent;
}

.primary:hover,
.secondary:hover{
transform:translateY(-4px);
}
/*======== STATS ========*/

.stats{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
padding:70px 8%;
}

.stat{
background:var(--surface);
padding:30px 20px;
border:1px solid var(--line);
border-radius:var(--radius);
text-align:center;
transition:.3s;
}

.stat:hover{
transform:translateY(-8px);
border-color:var(--gold);
}

.stat h2{
font-size:34px;
color:var(--gold);
margin-bottom:8px;
}

.stat p{
font-size:15px;
color:var(--text);
}

/*======== SECTIONS ========*/

.about,
.services,
.jobs,
.case{
padding:90px 8%;
}

.about h2,
.services h2,
.jobs h2,
.case h2,
.cta h2{
font-size:34px;
font-weight:600;
text-align:center;
margin-bottom:20px;
color:var(--white);
}

.about p,
.cta p{
max-width:720px;
margin:0 auto 40px;
text-align:center;
color:var(--text);
}

/*======== CARDS ========*/

.cards{
display:grid;
grid-template-columns:1fr;
gap:22px;
}

.card{
background:var(--surface);
padding:32px;
border-radius:var(--radius);
border:1px solid var(--line);
transition:.35s;
}

.card:hover{
transform:translateY(-8px);
border-color:var(--gold);
box-shadow:0 20px 45px rgba(0,0,0,.35);
}

.card h3{
font-size:22px;
color:var(--gold);
margin-bottom:14px;
}

.card p{
color:var(--text);
line-height:1.8;
}

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

.job-grid{
display:grid;
grid-template-columns:1fr;
gap:18px;
}

.job-grid div{
background:var(--surface);
border:1px solid var(--line);
padding:22px;
border-radius:16px;
text-align:center;
font-weight:600;
transition:.3s;
}

.job-grid div:hover{
background:var(--gold);
color:#111;
border-color:var(--gold);
}

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

.cta{
margin:90px 8%;
padding:70px 30px;
border-radius:30px;
background:linear-gradient(135deg,#181F2E,#0B0F19);
border:1px solid var(--gold);
text-align:center;
}

.cta .primary{
display:inline-block;
width:auto;
padding:16px 36px;
}

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

footer{
background:#080B12;
padding:45px 8%;
border-top:1px solid var(--line);
display:flex;
flex-direction:column;
align-items:center;
gap:20px;
text-align:center;
color:var(--text);
}

.footer-links{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:20px;
}

.footer-links a{
color:var(--text);
text-decoration:none;
transition:.3s;
}

.footer-links a:hover{
color:var(--gold);
}

/*======== TABLET ========*/

@media(min-width:768px){

.hero{
display:grid;
grid-template-columns:1.1fr .9fr;
align-items:center;
text-align:left;
gap:60px;
}

.hero span,
.hero h1,
.hero p{
margin-left:0;
}

.hero img{
margin:0;
}

.buttons{
flex-direction:row;
}

.stats{
grid-template-columns:repeat(4,1fr);
}

.cards{
grid-template-columns:repeat(2,1fr);
}

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

}

/*======== DESKTOP ========*/

@media(min-width:1100px){

.hero{
padding:110px 8%;
}

.hero h1{
font-size:56px;
}

.hero p{
font-size:18px;
}

.cards{
grid-template-columns:repeat(3,1fr);
}

.job-grid{
grid-template-columns:repeat(4,1fr);
}

.about h2,
.services h2,
.jobs h2,
.case h2,
.cta h2{
font-size:40px;
}

}

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

@media(max-width:420px){

.logo h2{
font-size:13px;
}

.hero{
padding:60px 7%;
}

.hero h1{
font-size:34px;
}

.hero p{
font-size:15px;
}

.primary,
.secondary{
font-size:16px;
}

.about,
.services,
.jobs,
.case{
padding:70px 7%;
}

}
/* ===== PREMIUM HEALTHCARE THEME ===== */

:root{
--primary:#10B981;
--primary-light:#34D399;
--bg:#07141F;
--surface:#102131;
--card:#16293C;
--text:#C7D4DE;
--white:#FFFFFF;
}

body{
background:linear-gradient(180deg,#07141F,#0E1E2F);
color:var(--white);
}

header{
background:rgba(7,20,31,.96);
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(52,211,153,.15);
}

.logo h2,
.menu-btn{
color:var(--primary-light);
}

.hero{
background:
radial-gradient(circle at top,rgba(16,185,129,.18),transparent 55%),
linear-gradient(180deg,#07141F,#0E1E2F);
}

.hero span{
background:rgba(16,185,129,.12);
color:var(--primary-light);
border:1px solid rgba(52,211,153,.35);
}

.hero h1,
.about h2,
.services h2,
.jobs h2,
.case h2,
.cta h2{
color:#fff;
}

.hero p,
.about p,
.card p,
.stat p,
footer{
color:var(--text);
}

.primary{
background:linear-gradient(135deg,#34D399,#10B981);
color:#fff;
box-shadow:0 15px 35px rgba(16,185,129,.35);
}

.secondary{
background:transparent;
border:2px solid var(--primary);
color:var(--primary-light);
}

.card,
.stat,
.job-grid div{
background:var(--card);
border:1px solid rgba(52,211,153,.12);
box-shadow:none;
}

.card:hover,
.stat:hover,
.job-grid div:hover{
transform:translateY(-8px);
border-color:var(--primary);
box-shadow:0 20px 40px rgba(16,185,129,.15);
}

.card h3,
.stat h2{
color:var(--primary-light);
}

.cta{
background:linear-gradient(135deg,#102131,#07141F);
border:1px solid rgba(52,211,153,.35);
}

footer{
background:#050D15;
border-top:1px solid rgba(52,211,153,.15);
}

.footer-links a{
color:var(--text);
}

.footer-links a:hover{
color:var(--primary-light);
}
/* ===== RESPONSIVE HERO IMAGE ===== */

.hero-image,
.hero-img,
.image-container{
width:100%;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
}

.hero-image img,
.hero-img img,
.image-container img,
.hero img{
display:block;
width:100%;
height:auto;
max-width:100%;
object-fit:contain;
border-radius:24px;
}

/* Mobile */

@media (max-width:768px){

.hero-image img,
.hero-img img,
.image-container img,
.hero img{
width:100%;
height:auto;
max-height:70vh;
object-fit:contain;
}

}
/* Hero image spacing */

.hero-image{
margin-top:70px;
display:flex;
justify-content:center;
}

.hero-image img{
display:block;
width:100%;
max-width:700px;
height:auto;
border-radius:24px;
object-fit:cover;
}
.hero-actions{
margin-top:40px;
display:flex;
flex-direction:column;
gap:20px;
align-items:center;
}

.action-card{
width:100%;
max-width:420px;
background:#13273A;
border:1px solid rgba(16,185,129,.25);
padding:22px 24px;
display:flex;
justify-content:space-between;
align-items:center;
text-decoration:none;
color:#fff;
position:relative;
overflow:hidden;
clip-path:polygon(0 0,92% 0,100% 20%,100% 100%,0 100%);
transition:.35s;
}

.action-card::before{
content:"";
position:absolute;
left:0;
top:0;
width:5px;
height:100%;
background:#10B981;
transition:.35s;
}

.action-card:hover{
transform:translateY(-8px);
border-color:#10B981;
box-shadow:0 18px 40px rgba(16,185,129,.25);
background:#183247;
}

.action-card:hover::before{
width:10px;
}

.action-card h3{
font-size:20px;
font-weight:600;
margin-bottom:6px;
}

.action-card p{
font-size:14px;
color:#AFC5D5;
margin:0;
}

.action-card span{
font-size:34px;
color:#10B981;
transition:.35s;
}

.action-card:hover span{
transform:translate(8px,-6px) scale(1.15);
}

.service-link{
display:inline-block;
color:#10B981;
font-size:17px;
font-weight:600;
text-decoration:none;
position:relative;
padding-bottom:6px;
}

.service-link::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:0;
height:2px;
background:#10B981;
transition:.35s;
}

.service-link:hover::after{
width:100%;
}

.service-link:hover{
color:#fff;
}
.service-link{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 22px;
margin-top:22px;
background:rgba(255,255,255,.03);
border:1px solid rgba(16,185,129,.25);
border-radius:18px;
text-decoration:none;
color:#d9fff5;
transition:.35s ease;
backdrop-filter:blur(12px);
overflow:hidden;
position:relative;
}

.service-link::before{
content:"";
position:absolute;
left:0;
top:0;
width:4px;
height:100%;
background:#10B981;
transition:.35s;
}

.service-link h3{
font-size:18px;
font-weight:600;
margin:0;
}

.service-link span{
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:rgba(16,185,129,.12);
color:#10B981;
font-size:22px;
transition:.35s;
}

.service-link:hover{
transform:translateY(-6px);
border-color:#10B981;
box-shadow:0 18px 40px rgba(16,185,129,.18);
}

.service-link:hover span{
background:#10B981;
color:#08131d;
transform:rotate(-45deg);
}
#mobileMenu{
position:absolute;
top:100%;
left:0;
width:100%;
background:#132536;
display:flex;
flex-direction:column;
max-height:0;
overflow:hidden;
transition:max-height .4s ease;
}

#mobileMenu.show{
max-height:100vh;
}

.menu-search{
padding:22px;
background:#132536;
}

.menu-search input{
width:100%;
padding:16px 18px;
border:none;
border-radius:14px;
font-size:16px;
outline:none;
background:#fff;
}

.menu-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:22px;
text-decoration:none;
font-size:17px;
font-weight:500;
color:#fff;
border-top:1px solid rgba(255,255,255,.08);
transition:.3s;
}

.menu-item:hover{
background:#193145;
}

.menu-item span:last-child{
font-size:24px;
color:#10B981;
}

.menu-footer{
padding:25px;
border-top:1px solid rgba(255,255,255,.08);
}

.menu-btn-primary{
display:block;
width:100%;
text-align:center;
padding:18px;
border-radius:50px;
background:linear-gradient(135deg,#21d4a3,#10B981);
color:#fff;
font-size:18px;
font-weight:700;
text-decoration:none;
box-shadow:0 15px 35px rgba(16,185,129,.35);
transition:.3s;
}

.menu-btn-primary:hover{
transform:translateY(-3px);
}
/* COUNTRIES PAGE */

body{
    margin:0;
    font-family:'Poppins',sans-serif;
    background:#081521;
    color:#fff;
}

header{
    position:sticky;
    top:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 20px;
    background:#0d1d2d;
    border-bottom:1px solid rgba(255,255,255,.08);
    z-index:100;
}

.back-btn{
    color:#32d6a6;
    text-decoration:none;
    font-weight:600;
}

header h2{
    margin:0;
    font-size:22px;
    color:#fff;
}

.hero{
    padding:40px 20px 30px;
    text-align:center;
}

.hero h1{
    font-size:34px;
    line-height:1.2;
    margin-bottom:15px;
}

.hero p{
    color:#b7c3cf;
    line-height:1.7;
    margin-bottom:25px;
}

.country-search{
    width:100%;
    padding:16px 20px;
    border:none;
    border-radius:16px;
    font-size:16px;
    background:#13263a;
    color:#fff;
    outline:none;
}

.country-search::placeholder{
    color:#9fb0bf;
}

.countries{
    padding:20px;
}

.countries h2{
    margin-bottom:18px;
    font-size:22px;
    color:#32d6a6;
}

.countries a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 20px;
    margin-bottom:14px;
    background:#13263a;
    color:#fff;
    text-decoration:none;
    border-radius:16px;
    transition:.3s;
    border:1px solid rgba(50,214,166,.15);
}

.countries a:hover{
    background:#1a3148;
    transform:translateX(5px);
}

.countries span{
    color:#32d6a6;
    font-size:22px;
}

.cta{
    margin:40px 20px;
    padding:35px 25px;
    text-align:center;
    background:linear-gradient(135deg,#0f2436,#13344d);
    border-radius:24px;
    border:1px solid rgba(50,214,166,.2);
}

.cta h2{
    margin-bottom:20px;
    font-size:28px;
}

.primary{
    display:inline-block;
    padding:18px 34px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    color:#fff;
    background:linear-gradient(135deg,#10B981,#32d6a6);
    box-shadow:0 15px 35px rgba(16,185,129,.35);
    transition:.3s;
}

.primary:hover{
    transform:translateY(-3px);
}

footer{
    text-align:center;
    padding:25px;
    color:#94a3b8;
    border-top:1px solid rgba(255,255,255,.08);
}

@media(max-width:768px){

.hero h1{
    font-size:28px;
}

.cta h2{
    font-size:24px;
}

.countries a{
    padding:16px;
}

}
/* EMPLOYERS PAGE */

body{
margin:0;
font-family:Poppins,sans-serif;
background:#081521;
color:#fff;
line-height:1.6;
}

header{
position:sticky;
top:0;
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 20px;
background:#0D1D2D;
border-bottom:1px solid rgba(255,255,255,.08);
z-index:100;
}

header a{
color:#10B981;
text-decoration:none;
font-weight:600;
}

header h2{
margin:0;
font-size:22px;
}

.hero{
padding:50px 20px;
text-align:center;
background:linear-gradient(180deg,#0D1D2D,#081521);
}

.hero h1{
font-size:34px;
margin-bottom:15px;
}

.hero p{
max-width:700px;
margin:0 auto 30px;
color:#B7C3CF;
}

.primary{
display:inline-block;
padding:15px 30px;
background:#10B981;
color:#fff;
text-decoration:none;
border-radius:40px;
font-weight:600;
transition:.3s;
}

.primary:hover{
background:#0EA371;
}

section{
padding:35px 20px;
}

section h2{
margin-bottom:20px;
font-size:28px;
color:#10B981;
}

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

ul li{
background:#102436;
margin-bottom:12px;
padding:16px;
border-radius:14px;
border-left:4px solid #10B981;
}

details{
background:#102436;
margin-bottom:15px;
border-radius:14px;
overflow:hidden;
border:1px solid rgba(255,255,255,.06);
}

summary{
padding:18px;
cursor:pointer;
font-weight:600;
list-style:none;
}

summary::-webkit-details-marker{
display:none;
}

details p{
padding:0 18px 18px;
color:#C7D4DE;
}

form{
background:#102436;
padding:20px;
border-radius:18px;
}

input,
select,
textarea{
width:100%;
padding:15px;
margin-bottom:15px;
border:none;
border-radius:10px;
background:#1B3248;
color:#fff;
font-size:15px;
box-sizing:border-box;
}

input::placeholder,
textarea::placeholder{
color:#B7C3CF;
}

textarea{
min-height:120px;
resize:vertical;
}

button{
width:100%;
padding:16px;
background:#10B981;
color:#fff;
border:none;
border-radius:40px;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:.3s;
}

button:hover{
background:#0EA371;
}

.cta{
margin:40px 20px;
padding:40px 20px;
text-align:center;
background:linear-gradient(135deg,#0D1D2D,#12324A);
border-radius:20px;
}

.cta h2{
color:#fff;
margin-bottom:15px;
}

.cta p{
color:#C7D4DE;
margin-bottom:25px;
}

footer{
padding:25px;
text-align:center;
background:#06111C;
color:#8FA6B8;
border-top:1px solid rgba(255,255,255,.08);
}

@media(max-width:768px){

.hero h1{
font-size:28px;
}

section h2{
font-size:24px;
}

header h2{
font-size:18px;
}

}
/* JOBS PAGE */

body{
margin:0;
font-family:'Poppins',sans-serif;
background:#081521;
color:#fff;
line-height:1.6;
}

header{
position:sticky;
top:0;
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 20px;
background:#0D1D2D;
border-bottom:1px solid rgba(255,255,255,.08);
z-index:100;
}

header a{
text-decoration:none;
color:#10B981;
font-weight:600;
}

header h2{
margin:0;
font-size:22px;
}

.hero{
padding:50px 20px;
text-align:center;
background:linear-gradient(180deg,#0D1D2D,#081521);
}

.hero h1{
font-size:34px;
margin-bottom:15px;
}

.hero p{
max-width:700px;
margin:auto;
color:#B7C3CF;
}

.job-search{
padding:25px 20px;
display:grid;
gap:15px;
}

.job-search input,
.job-search select{
padding:15px;
border:none;
border-radius:12px;
background:#12263A;
color:#fff;
font-size:15px;
outline:none;
}

.job-search input::placeholder{
color:#9EB0BF;
}

.job-search button{
padding:15px;
border:none;
border-radius:12px;
background:#10B981;
color:#fff;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:.3s;
}

.job-search button:hover{
background:#0D9E6E;
}

section{
padding:30px 20px;
}

section h2{
margin-bottom:20px;
font-size:28px;
color:#10B981;
}

.job-card{
background:#102436;
border-radius:18px;
padding:22px;
margin-bottom:20px;
border:1px solid rgba(255,255,255,.06);
transition:.3s;
}

.job-card:hover{
transform:translateY(-6px);
border-color:#10B981;
}

.job-card h3{
margin-top:0;
margin-bottom:12px;
font-size:22px;
}

.job-card p{
margin:8px 0;
color:#C7D4DE;
}

.job-card a{
display:inline-block;
margin-top:15px;
text-decoration:none;
color:#10B981;
font-weight:600;
}

ul{
list-style:none;
padding:0;
margin:0;
display:grid;
gap:12px;
}

ul li{
padding:16px;
background:#102436;
border-radius:14px;
border-left:4px solid #10B981;
}

.cta{
margin:30px 20px;
padding:40px 25px;
text-align:center;
background:linear-gradient(135deg,#0D1D2D,#12324A);
border-radius:20px;
}

.cta h2{
margin-bottom:15px;
color:#fff;
}

.cta p{
margin-bottom:25px;
color:#C7D4DE;
}

.primary{
display:inline-block;
padding:16px 34px;
background:#10B981;
color:#fff;
text-decoration:none;
border-radius:50px;
font-weight:600;
transition:.3s;
}

.primary:hover{
background:#0D9E6E;
}

footer{
margin-top:40px;
padding:25px;
text-align:center;
background:#06111C;
color:#8EA2B3;
border-top:1px solid rgba(255,255,255,.08);
}

@media(min-width:768px){

.job-search{
grid-template-columns:repeat(4,1fr);
}

.job-search button{
grid-column:span 4;
}

.job-card{
display:grid;
grid-template-columns:2fr 1fr;
gap:15px;
align-items:center;
}

ul{
grid-template-columns:repeat(2,1fr);
}

.hero h1{
font-size:42px;
}

}

@media(min-width:1100px){

.job-search button{
grid-column:auto;
}

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

ul{
grid-template-columns:repeat(3,1fr);
}

}
.jobs-list{
padding:25px;
}

.salary{
display:inline-block;
padding:8px 16px;
border:1px solid #1ec98c;
border-radius:30px;
margin:15px 0;
font-weight:600;
color:#1ec98c;
}

.pagination{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
margin:40px 0;
flex-wrap:wrap;
}

.pagination button{
width:46px;
height:46px;
border:none;
border-radius:50%;
background:#14283d;
color:#fff;
cursor:pointer;
font-size:16px;
}

.pagination button.active{
background:#18d18d;
color:#081420;
font-weight:700;
}
.popup{
position:fixed;
inset:0;
background:rgba(0,0,0,.45);
display:flex;
justify-content:center;
align-items:center;
opacity:0;
visibility:hidden;
transition:.3s;
z-index:99999;
}

.popup.show{
opacity:1;
visibility:visible;
}

.popup-card{
width:90%;
max-width:380px;
background:#fff;
border-radius:24px;
padding:30px;
text-align:center;
animation:pop .3s ease;
}

#popupIcon{
width:80px;
height:80px;
margin:auto;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:40px;
color:#fff;
margin-bottom:18px;
}

.popup-card h2{
margin-bottom:10px;
font-size:28px;
}

.popup-card p{
line-height:1.7;
color:#555;
margin-bottom:25px;
}

.popup-card button{
width:100%;
padding:16px;
border:none;
border-radius:50px;
background:#2ed6a8;
color:#fff;
font-size:17px;
font-weight:700;
cursor:pointer;
}

@keyframes pop{

from{
transform:scale(.8);
opacity:0;
}

to{
transform:scale(1);
opacity:1;
}

}
/* ===========================
   HEALTHCARE SPECIALTIES PAGE
=========================== */

details{
background:#17283a;
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
margin:18px 20px;
overflow:hidden;
transition:.3s;
}

details[open]{
border-color:#22d3a6;
box-shadow:0 10px 25px rgba(34,211,166,.12);
}

summary{
list-style:none;
padding:20px;
font-size:19px;
font-weight:600;
color:#fff;
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
}

summary::-webkit-details-marker{
display:none;
}

summary::after{
content:"+";
font-size:24px;
font-weight:700;
color:#22d3a6;
transition:.3s;
}

details[open] summary::after{
content:"−";
}

details ul{
margin:0;
padding:0 20px 20px;
}

details li{
list-style:none;
padding:14px 0;
border-bottom:1px solid rgba(255,255,255,.06);
color:#cfd8e3;
font-size:16px;
}

details li:last-child{
border-bottom:none;
}

details a{
display:block;
margin:20px;
padding:15px;
text-align:center;
text-decoration:none;
background:#22d3a6;
color:#06131f;
font-weight:700;
border-radius:14px;
transition:.3s;
}

details a:hover{
background:#18b88f;
transform:translateY(-2px);
}

.hero{
padding:40px 25px;
text-align:center;
}

.hero h1{
font-size:34px;
color:#fff;
margin-bottom:15px;
}

.hero p{
font-size:17px;
line-height:1.7;
color:#b8c3d1;
max-width:700px;
margin:auto;
}

.cta{
margin:40px 20px;
padding:35px 25px;
background:linear-gradient(135deg,#1a3347,#0e1f30);
border-radius:22px;
text-align:center;
}

.cta h2{
color:#fff;
margin-bottom:12px;
}

.cta p{
color:#b9c7d8;
margin-bottom:25px;
}

.primary{
display:inline-block;
padding:15px 28px;
background:#22d3a6;
color:#07131f;
text-decoration:none;
font-weight:700;
border-radius:14px;
transition:.3s;
}

.primary:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(34,211,166,.25);
}

footer{
padding:30px;
text-align:center;
color:#8fa2b5;
font-size:15px;
}
/* SPECIALTY ACCORDION */

details{
margin:18px 20px;
background:transparent;
border:none;
overflow:hidden;
}

summary{
display:flex;
align-items:center;
justify-content:space-between;
padding:20px 0;
cursor:pointer;
font-size:22px;
font-weight:700;
color:#fff;
border-bottom:1px solid rgba(255,255,255,.08);
list-style:none;
}

summary::-webkit-details-marker{
display:none;
}

summary::after{
content:"↘";
font-size:22px;
color:#25d6a3;
transition:.35s;
}

details[open] summary::after{
transform:rotate(90deg);
}

details ul{
margin:18px 0 10px 22px;
padding:0;
border-left:3px solid #25d6a3;
}

details li{
list-style:none;
position:relative;
padding:18px 18px 18px 28px;
margin:0;
font-size:17px;
color:#d4dde7;
transition:.3s;
}

details li::before{
content:"";
position:absolute;
left:-8px;
top:24px;
width:13px;
height:13px;
background:#25d6a3;
border-radius:50%;
box-shadow:0 0 15px #25d6a3;
}

details li:hover{
background:rgba(37,214,163,.08);
border-radius:0 14px 14px 0;
padding-left:36px;
}

details a{
display:inline-block;
margin:25px 0 10px 24px;
padding:12px 24px;
text-decoration:none;
font-weight:600;
color:#25d6a3;
border:2px solid #25d6a3;
border-radius:40px;
transition:.3s;
}

details a:hover{
background:#25d6a3;
color:#06121f;
box-shadow:0 10px 30px rgba(37,214,163,.35);
transform:translateX(8px);
}
.specialties{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px;
padding:25px;
}

.specialty-card{
background:#fff;
border-radius:20px;
padding:22px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.3s;
color:#111;
}

.specialty-card:hover{
transform:translateY(-8px);
}

.specialty-card h2{
margin:0;
font-size:24px;
}

.job-count{
margin:10px 0;
font-size:15px;
color:#16a085;
font-weight:700;
}

.tags{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:15px 0;
}

.tags span{
background:#eef6ff;
padding:8px 14px;
border-radius:30px;
font-size:13px;
color:#0f172a;
}

.specialty-card a{
display:inline-block;
margin-top:15px;
padding:12px 20px;
background:#1ec997;
color:#fff;
border-radius:12px;
text-decoration:none;
font-weight:600;
}
/* RESOURCES PAGE */

.hero{
padding:40px 20px;
text-align:center;
background:#0f1f31;
}

.hero h1{
font-size:32px;
color:#fff;
margin-bottom:12px;
}

.hero p{
color:#b8c3cf;
font-size:16px;
line-height:1.7;
max-width:700px;
margin:auto;
}

section{
padding:25px 18px;
}

section h2{
color:#ffffff;
font-size:24px;
margin-bottom:18px;
}

.card{
background:#18293c;
border-radius:16px;
padding:18px;
margin-bottom:16px;
border-left:5px solid #2ec7a6;
transition:.3s;
}

.card:hover{
transform:translateY(-3px);
background:#20354b;
}

.card h3{
color:#fff;
font-size:19px;
margin-bottom:10px;
}

.card p{
color:#c4ced9;
line-height:1.6;
font-size:15px;
}

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

ul li{
background:#18293c;
padding:16px 18px;
margin-bottom:12px;
border-radius:14px;
color:#fff;
font-size:16px;
display:flex;
align-items:center;
gap:10px;
}

details{
background:#18293c;
border-radius:14px;
margin-bottom:14px;
overflow:hidden;
}

summary{
padding:18px;
cursor:pointer;
font-size:17px;
font-weight:600;
color:#fff;
list-style:none;
}

summary::-webkit-details-marker{
display:none;
}

summary::after{
content:"+";
float:right;
font-size:24px;
color:#2ec7a6;
}

details[open] summary::after{
content:"−";
}

details p{
padding:0 18px 18px;
color:#c7d1db;
line-height:1.7;
}

.cta{
text-align:center;
background:#18293c;
margin:25px 18px;
padding:35px 20px;
border-radius:20px;
}

.cta h2{
color:#fff;
margin-bottom:12px;
}

.cta p{
color:#c7d1db;
margin-bottom:22px;
line-height:1.7;
}

.primary{
display:inline-block;
background:#2ec7a6;
color:#081521;
padding:15px 30px;
border-radius:40px;
font-weight:700;
text-decoration:none;
}

.primary:hover{
background:#25b595;
}

footer{
text-align:center;
padding:30px 20px;
color:#98a8b8;
font-size:14px;
border-top:1px solid rgba(255,255,255,.08);
}
/* STAFFING SOLUTIONS */

.hero{
padding:70px 25px;
text-align:left;
background:linear-gradient(135deg,#12263a,#0a1623);
border-bottom:4px solid #28d7a3;
}

.hero h1{
font-size:38px;
color:#fff;
margin-bottom:15px;
line-height:1.2;
}

.hero p{
color:#c7d2de;
font-size:17px;
line-height:1.8;
margin-bottom:25px;
}

.primary{
display:inline-block;
padding:14px 30px;
border:2px solid #28d7a3;
border-radius:50px;
color:#28d7a3;
text-decoration:none;
font-weight:700;
transition:.3s;
}

.primary:hover{
background:#28d7a3;
color:#07121c;
}

/* SECTION TITLES */

section{
padding:45px 20px;
}

section h2{
font-size:28px;
color:#fff;
margin-bottom:25px;
position:relative;
padding-left:20px;
}

section h2::before{
content:"";
position:absolute;
left:0;
top:4px;
width:6px;
height:30px;
background:#28d7a3;
border-radius:10px;
}

/* TIMELINE */

.card{
position:relative;
padding:20px 20px 20px 70px;
margin-bottom:18px;
background:transparent;
border-left:2px dashed #28d7a3;
}

.card:last-child{
border-left:none;
}

.card h3{
color:#fff;
margin-bottom:8px;
font-size:20px;
}

.card p{
color:#bcc8d4;
line-height:1.7;
}

.card::before{
content:"";
position:absolute;
left:-10px;
top:28px;
width:18px;
height:18px;
background:#28d7a3;
border-radius:50%;
box-shadow:0 0 12px rgba(40,215,163,.5);
}

/* LISTS */

ul{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:15px;
padding:0;
list-style:none;
}

ul li{
background:#132233;
border:1px solid rgba(255,255,255,.06);
padding:18px;
border-radius:12px;
text-align:center;
font-weight:600;
color:#fff;
transition:.3s;
}

ul li:hover{
transform:translateY(-6px);
border-color:#28d7a3;
}

/* FORM */

input,
select,
textarea{
width:100%;
padding:16px;
margin-bottom:18px;
border:none;
border-bottom:2px solid #28d7a3;
background:transparent;
color:#fff;
font-size:16px;
outline:none;
}

input::placeholder,
textarea::placeholder{
color:#8fa3b6;
}

textarea{
min-height:140px;
resize:vertical;
}

button{
width:100%;
padding:18px;
background:#28d7a3;
color:#07121c;
border:none;
border-radius:10px;
font-size:17px;
font-weight:700;
cursor:pointer;
transition:.3s;
}

button:hover{
transform:scale(1.02);
}

/* FAQ */

details{
margin-bottom:15px;
border-bottom:1px solid rgba(255,255,255,.1);
padding-bottom:12px;
}

summary{
cursor:pointer;
font-size:18px;
font-weight:700;
color:#fff;
padding:15px 0;
}

details p{
color:#bfc9d4;
line-height:1.8;
padding-bottom:10px;
}

/* CTA */

.cta{
margin:50px 20px;
padding:50px 30px;
background:transparent;
border:2px dashed #28d7a3;
border-radius:25px;
text-align:center;
}

.cta h2{
padding-left:0;
}

.cta h2::before{
display:none;
}

.cta p{
color:#bcc8d4;
margin:20px 0 30px;
}

/* FOOTER */

footer{
padding:30px;
text-align:center;
border-top:1px solid rgba(255,255,255,.08);
color:#90a4b8;
font-size:15px;
}
.primary,
button{
background:#28d7a3;
color:#07121c;
font-weight:700;
}
.services-toggle{

width:100%;
padding:20px;
border:none;
border-radius:20px;
cursor:pointer;

background:linear-gradient(135deg,#23d3a6,#18b98d);

color:#fff;

font-size:19px;
font-weight:700;

transition:.4s;

}

.services-toggle:hover{

transform:translateY(-3px);

box-shadow:0 15px 35px rgba(35,211,166,.35);

}

.services-content{

max-height:0;

overflow:hidden;

transition:max-height .7s ease;

background:#162638;

border-radius:20px;

margin-top:15px;

padding:0 22px;

}

.services-content.open{

max-height:3500px;

padding:25px;

}

.services-content h2{

font-size:28px;

margin-bottom:25px;

color:#fff;

}

.service-item{

background:#203449;

border-left:5px solid #23d3a6;

padding:18px;

border-radius:14px;

margin-bottom:18px;

}

.service-item h3{

color:#23d3a6;

margin-bottom:10px;

font-size:20px;

}

.service-item p{

color:#d6dde7;

line-height:1.8;

}

.service-item ul{

margin-top:10px;

padding-left:20px;

}

.service-item li{

color:#d6dde7;

margin-bottom:8px;

}

.industry-tags{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-top:15px;

}

.industry-tags span{

background:#23d3a620;

color:#23d3a6;

padding:10px 16px;

border-radius:30px;

font-size:14px;

}
.stats{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
padding:25px;
width:100%;
max-width:100%;
}

.stat-card{
width:100%;
min-height:170px;
padding:28px 20px;
border-radius:24px;
background:#18283b;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
box-sizing:border-box;
overflow:hidden;
}

.stat-card h2{
font-size:42px;
font-weight:800;
color:#2dd4a8;
margin:0 0 12px;
line-height:1;
word-break:break-word;
}

.stat-card p{
font-size:18px;
color:#cfd7df;
margin:0;
}
/* ===========================
   CHAT PAGE
=========================== */

.chat-page{
    background:#08131f;
    color:#fff;
    font-family:Poppins,sans-serif;
    min-height:100vh;
}

/* Header */

.chat-header{
    position:sticky;
    top:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 22px;
    background:rgba(12,26,40,.92);
    backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,.06);
}

.chat-header a{
    color:#34d5a5;
    text-decoration:none;
    font-weight:600;
}

.chat-header h2{
    margin:0;
    font-size:22px;
}

/* Hero */

.chat-hero{
    padding:40px 24px 20px;
    text-align:center;
}

.assistant-avatar{
    width:90px;
    height:90px;
    margin:auto;
    border-radius:50%;
    background:linear-gradient(135deg,#28d6a8,#18b893);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:42px;
    box-shadow:0 0 40px rgba(40,214,168,.35);
}

.chat-hero h1{
    margin-top:25px;
    margin-bottom:15px;
    font-size:34px;
}

.chat-hero p{
    color:#9db0c2;
    line-height:1.8;
    font-size:17px;
}

/* Chat Box */

.chat-window{
    width:min(94%,720px);
    margin:25px auto 40px;
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(25px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 25px 60px rgba(0,0,0,.45);
}

/* First Bot Message */

.message{
    margin:22px;
    padding:18px;
    border-radius:18px;
    max-width:85%;
    animation:fade .3s;
}

.bot{
    background:#13263a;
    border-left:4px solid #2ad3a7;
}

.bot h4{
    margin:0 0 8px;
    color:#2ad3a7;
}

.bot p{
    margin:0;
    color:#d6e3ef;
    line-height:1.7;
}

.user{
    margin-left:auto;
    background:#27d5a6;
    color:#07131d;
}

.user p{
    margin:0;
    font-weight:600;
}

/* Quick Buttons */

.quick-actions{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    padding:0 22px 22px;
}

.quick-actions button{
    padding:15px;
    border:none;
    border-radius:14px;
    background:#13263a;
    color:#fff;
    font-weight:600;
    cursor:pointer;
    transition:.25s;
}

.quick-actions button:hover{
    background:#28d6a8;
    color:#07131d;
}

/* Chat Messages */

#messages{
    min-height:220px;
    max-height:420px;
    overflow-y:auto;
    padding-bottom:15px;
}

/* Input */

.chat-input{
    display:flex;
    gap:12px;
    padding:20px;
    border-top:1px solid rgba(255,255,255,.06);
    background:#0d1b2a;
}

.chat-input input{
    flex:1;
    border:none;
    border-radius:50px;
    background:#13263a;
    color:#fff;
    padding:16px 22px;
    outline:none;
    font-size:16px;
}

.chat-input input::placeholder{
    color:#89a1b5;
}

.chat-input button{
    border:none;
    border-radius:50px;
    padding:16px 30px;
    background:linear-gradient(135deg,#2ad3a7,#22c39c);
    color:#07131d;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}

.chat-input button:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(42,211,167,.35);
}

/* Scrollbar */

#messages::-webkit-scrollbar{
    width:6px;
}

#messages::-webkit-scrollbar-thumb{
    background:#2ad3a7;
    border-radius:20px;
}

/* Animation */

@keyframes fade{

from{
opacity:0;
transform:translateY(15px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* Mobile */

@media(max-width:700px){

.chat-hero h1{
font-size:28px;
}

.quick-actions{
grid-template-columns:1fr;
}

.chat-input{
flex-direction:column;
}

.chat-input button{
width:100%;
}
}
body{
margin:0;
font-family:Poppins,sans-serif;
background:#07131d;
color:#fff;
height:100vh;
display:flex;
flex-direction:column;
}

header{
display:flex;
align-items:center;
gap:18px;
padding:16px 20px;
background:#102133;
border-bottom:1px solid rgba(255,255,255,.08);
position:sticky;
top:0;
z-index:100;
}

header a{
color:#34d6a7;
font-size:22px;
font-weight:700;
text-decoration:none;
}

header h2{
margin:0;
font-size:30px;
font-weight:700;
}

header p{
margin:4px 0 0;
color:#34d6a7;
font-size:14px;
}

#messages{
flex:1;
overflow-y:auto;
padding:20px;
display:flex;
flex-direction:column;
gap:14px;
scroll-behavior:smooth;
}

#messages::-webkit-scrollbar{
width:0;
}

.message{
max-width:82%;
padding:14px 18px;
border-radius:22px;
line-height:1.6;
font-size:15px;
animation:pop .25s ease;
word-break:break-word;
}

.bot{
background:#15283c;
align-self:flex-start;
border-bottom-left-radius:6px;
box-shadow:0 6px 18px rgba(0,0,0,.25);
}

.user{
background:linear-gradient(135deg,#2fd5a6,#41d9c8);
color:#07131d;
font-weight:600;
align-self:flex-end;
border-bottom-right-radius:6px;
box-shadow:0 6px 18px rgba(47,213,166,.25);
}

.chat-input{
position:sticky;
bottom:0;
display:flex;
align-items:center;
gap:12px;
padding:14px 18px calc(14px + env(safe-area-inset-bottom));
background:#102133;
border-top:1px solid rgba(255,255,255,.06);
}

.chat-input input{
flex:1;
height:54px;
border:none;
outline:none;
border-radius:30px;
padding:0 22px;
background:#1a3047;
color:#fff;
font-size:16px;
}

.chat-input input::placeholder{
color:#9fb3c8;
}

.chat-input button{
width:56px;
height:56px;
border:none;
border-radius:50%;
background:linear-gradient(135deg,#2fd5a6,#41d9c8);
color:#07131d;
font-size:22px;
cursor:pointer;
transition:.25s;
}

.chat-input button:active{
transform:scale(.92);
}

@keyframes pop{
from{
opacity:0;
transform:translateY(10px);
}
to{
opacity:1;
transform:translateY(0);
}
}
body.chat-page{
margin:0;
font-family:Arial,sans-serif;
background:#eef3f8;
display:flex;
flex-direction:column;
height:100vh;
}

/* HEADER */

.chat-header{
display:flex;
align-items:center;
gap:15px;
padding:15px;
background:#0f2238;
color:#fff;
box-shadow:0 2px 10px rgba(0,0,0,.1);
}

.chat-header a{
color:#39d5ad;
text-decoration:none;
font-size:18px;
font-weight:bold;
}

.chat-header h2{
margin:0;
font-size:20px;
}

.chat-header small{
display:block;
color:#9adfcf;
margin-top:4px;
}

/* CHAT AREA */

#messages{
flex:1;
overflow-y:auto;
padding:20px;
display:flex;
flex-direction:column;
gap:18px;
}

/* MESSAGE */

.message{
display:flex;
gap:12px;
align-items:flex-start;
animation:fade .3s ease;
}

.avatar{
width:42px;
height:42px;
border-radius:50%;
background:#34d6ae;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
flex-shrink:0;
}

.content{
flex:1;
}

.name{
font-weight:bold;
color:#0f2238;
margin-bottom:3px;
}

.time{
font-size:12px;
color:#888;
margin-left:8px;
}

.text{
color:#333;
line-height:1.5;
}

/* USER */

.message.user{
flex-direction:row-reverse;
}

.message.user .avatar{
background:#1f6fff;
color:#fff;
}

.message.user .content{
text-align:right;
}

/* INPUT */

.chat-input{
display:flex;
gap:10px;
padding:15px;
background:#fff;
border-top:1px solid #ddd;
}

.chat-input input{
flex:1;
padding:14px 18px;
border:none;
border-radius:30px;
background:#eef3f8;
font-size:16px;
outline:none;
}

.chat-input button{
width:55px;
height:55px;
border:none;
border-radius:50%;
background:#34d6ae;
font-size:22px;
cursor:pointer;
transition:.3s;
}

.chat-input button:hover{
transform:scale(1.05);
}

@keyframes fade{
from{
opacity:0;
transform:translateY(15px);
}
to{
opacity:1;
transform:none;
}
}
.chat-input{
position:sticky;
bottom:0;
display:flex;
gap:12px;
padding:15px;
background:#fff;
border-top:1px solid #ddd;
}
/* ===== CHAT INPUT BAR ===== */

.chat-input{
position:fixed;
left:0;
right:0;
bottom:0;
display:flex;
align-items:center;
gap:10px;
padding:12px 15px;
background:#fff;
border-top:1px solid #ddd;
box-sizing:border-box;
z-index:999;
}

.chat-input input{
flex:1;
height:50px;
padding:0 18px;
border:none;
border-radius:30px;
background:#eef3f8;
font-size:16px;
outline:none;
}

.chat-input button{
width:50px;
height:50px;
border:none;
border-radius:50%;
background:#34d6ae;
color:#fff;
font-size:22px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
flex-shrink:0;
transition:.2s;
}

.chat-input button:hover{
transform:scale(1.05);
}

#messages{
padding:20px;
padding-bottom:90px;
overflow-y:auto;
height:calc(100vh - 90px);
box-sizing:border-box;
}
/* ===== FIX CHAT INPUT ===== */

.chat-input{
position:fixed;
bottom:0;
left:0;
right:0;
display:flex !important;
flex-direction:row !important;
align-items:center;
gap:10px;
padding:10px 15px;
background:#fff;
border-top:1px solid #ddd;
z-index:999;
}

.chat-input input{
flex:1;
height:50px;
padding:0 18px;
border:none;
border-radius:30px;
background:#eef3f8;
font-size:16px;
outline:none;
}

.chat-input button{
width:50px;
height:50px;
border:none;
border-radius:50%;
background:#34d6ae;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
flex:0 0 50px;
margin:0;
padding:0;
}

#messages{
padding:20px;
padding-bottom:85px;
}
.chat-input input{
flex:1;
height:50px;
padding:0 18px;
border:none;
border-radius:30px;
background:#eef3f8;
color:#111;
font-size:16px;
font-weight:500;
outline:none;
caret-color:#34d6ae;
}

.chat-input input::placeholder{
color:#8a94a6;
}
/* Chat messages area */
#messages{
    height:calc(100vh - 180px);
    overflow-y:auto;
    padding:20px;
    padding-bottom:120px; /* Space for input bar */
    box-sizing:border-box;
}

/* Fixed input bar */
.chat-input{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 20px calc(14px + env(safe-area-inset-bottom));
    background:#fff;
    border-top:1px solid #e5e7eb;
    z-index:999;
}
.request-success-popup{

position:fixed;
inset:0;

background:rgba(8,18,34,.65);
backdrop-filter:blur(10px);

display:flex;
justify-content:center;
align-items:center;

padding:24px;

opacity:0;
visibility:hidden;
transition:.35s;

z-index:99999;

}

.request-success-popup.show{

opacity:1;
visibility:visible;

}

.request-success-card{

width:100%;
max-width:360px;

background:#ffffff;

border-radius:28px;

padding:35px 28px;

text-align:center;

box-shadow:0 25px 60px rgba(0,0,0,.25);

animation:popupScale .35s ease;

}

@keyframes popupScale{

from{

transform:scale(.8);
opacity:0;

}

to{

transform:scale(1);
opacity:1;

}

}

.request-success-icon{

width:90px;
height:90px;

margin:auto;

border-radius:50%;

background:linear-gradient(135deg,#2ed6a8,#19b6b0);

display:flex;
align-items:center;
justify-content:center;

font-size:42px;

color:#fff;

box-shadow:0 12px 35px rgba(46,214,168,.45);

margin-bottom:22px;

}

.request-success-card h2{

margin:0;

font-size:28px;

font-family:Poppins,sans-serif;

color:#0d1b2a;

}

.request-success-card p{

margin:18px 0 30px;

font-size:16px;

line-height:1.7;

font-family:Poppins,sans-serif;

color:#5f6c7b;

}

.request-success-btn{

width:100%;

padding:16px;

border:none;

border-radius:16px;

background:linear-gradient(135deg,#2ed6a8,#19b6b0);

color:#fff;

font-size:17px;

font-weight:700;

font-family:Poppins,sans-serif;

cursor:pointer;

transition:.25s;

}

.request-success-btn:hover{

transform:translateY(-2px);

box-shadow:0 10px 25px rgba(46,214,168,.4);

}
.chat-popup{
    position:fixed;
    left:0;
    right:0;
    bottom:-100%;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    padding:20px;
    background:rgba(0,0,0,.35);
    backdrop-filter:blur(4px);
    transition:bottom .35s ease;
    z-index:9999;
}

.chat-popup.show{
    bottom:0;
}

.popup-box{
    width:100%;
    max-width:480px;
    background:rgba(34,44,58,.96);
    border-radius:28px 28px 0 0;
    padding:28px;
    box-shadow:0 -15px 40px rgba(0,0,0,.45);
    animation:slideUp .35s ease;
}

@keyframes slideUp{
    from{
        transform:translateY(100%);
    }
    to{
        transform:translateY(0);
    }
}
.popup-handle{
    width:60px;
    height:6px;
    background:rgba(255,255,255,.3);
    border-radius:50px;
    margin:0 auto 20px;
}
/* ===========================
   CHAT POPUP (BOTTOM SHEET)
=========================== */

.chat-popup{

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    padding:18px;

    background:rgba(0,0,0,.18);

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

    opacity:0;

    visibility:hidden;

    transition:opacity .45s ease,
               visibility .45s ease;

    z-index:9999;

}

.chat-popup.show{

    opacity:1;

    visibility:visible;

}

.popup-box{

    width:100%;

    max-width:480px;

    background:rgba(22,35,52,.72);

    backdrop-filter:blur(28px);

    -webkit-backdrop-filter:blur(28px);

    border:1px solid rgba(255,255,255,.12);

    border-radius:28px 28px 0 0;

    padding:28px;

    box-shadow:0 -20px 60px rgba(0,0,0,.45);

    transform:translateY(120px);

    transition:transform .45s cubic-bezier(.22,1,.36,1);

}

.chat-popup.show .popup-box{

    transform:translateY(0);

}

.popup-handle{

    width:60px;

    height:6px;

    border-radius:100px;

    background:rgba(255,255,255,.35);

    margin:0 auto 20px;

}

.popup-box h3{

    margin:0 0 14px;

    color:#fff;

    font-size:2rem;

    font-weight:700;

}

.popup-box p{

    color:#d7dee8;

    font-size:1.08rem;

    line-height:1.8;

    margin-bottom:24px;

}

.popup-buttons{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.chat-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    padding:18px;

    text-decoration:none;

    color:#fff;

    font-size:1.15rem;

    font-weight:700;

    border-radius:18px;

    background:linear-gradient(135deg,#31d9a9,#20c8c8);

    box-shadow:0 15px 35px rgba(49,217,169,.35);

    transition:.3s;

}

.chat-btn:hover{

    transform:translateY(-2px);

}

.popup-buttons button{

    width:100%;

    padding:18px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:1.05rem;

    font-weight:600;

    transition:.3s;

}

.popup-buttons button:hover{

    background:rgba(255,255,255,.15);

}
/* =========================
   Floating Glass Footer
========================= */

.glass-footer{

position:fixed;

left:15px;
right:15px;
bottom:15px;

z-index:999;

display:flex;
justify-content:space-between;
align-items:center;
gap:20px;

padding:16px 20px;

border-radius:22px;

background:rgba(17,28,44,.55);

backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.12);

box-shadow:
0 10px 35px rgba(0,0,0,.35),
0 0 40px rgba(52,211,153,.08);

animation:footerSlide .7s ease;

}

.footer-location{

color:#ffffff;

font-size:13px;

line-height:1.6;

font-weight:600;

}

.footer-phone{

text-decoration:none;

background:linear-gradient(135deg,#35e0b8,#20c997);

color:#08141f;

padding:12px 18px;

border-radius:14px;

font-weight:700;

white-space:nowrap;

transition:.3s;

box-shadow:0 8px 25px rgba(52,211,153,.35);

}

.footer-phone:hover{

transform:translateY(-2px);

box-shadow:0 12px 35px rgba(52,211,153,.45);

}

@keyframes footerSlide{

from{

opacity:0;

transform:translateY(80px);

}

to{

opacity:1;

transform:translateY(0);

}

}

body{

padding-bottom:120px;

}

@media(max-width:768px){

.glass-footer{

flex-direction:column;

text-align:center;

gap:14px;

padding:18px;

}

.footer-phone{

width:100%;

text-align:center;

}

}
.footer-phone{

text-decoration:none;

background:linear-gradient(135deg,#ff8a8a,#ff6b6b);

color:#ffffff;

padding:12px 18px;

border-radius:14px;

font-weight:700;

white-space:nowrap;

transition:.3s;

box-shadow:0 8px 25px rgba(255,107,107,.35);

}

.footer-phone:hover{

transform:translateY(-2px);

background:linear-gradient(135deg,#ff9d9d,#ff7d7d);

box-shadow:0 12px 35px rgba(255,107,107,.45);

}
/* ===========================
   Salary Guide Pills
=========================== */

.salary-marquee{

overflow:hidden;

padding:14px 0;

background:transparent;

margin-bottom:25px;

}

.salary-track{

display:flex;

gap:14px;

width:max-content;

animation:salaryScroll 28s linear infinite;

}

.salary-marquee:hover .salary-track{

animation-play-state:paused;

}

.salary-pill{

display:flex;

align-items:center;

gap:8px;

padding:12px 22px;

border-radius:999px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

border:1px solid rgba(52,211,153,.25);

color:#34d399;

text-decoration:none;

font-weight:700;

font-size:14px;

white-space:nowrap;

transition:.3s;

}

.salary-pill:hover{

background:#34d399;

color:#08141f;

transform:translateY(-3px);

box-shadow:0 10px 25px rgba(52,211,153,.35);

}

@keyframes salaryScroll{

0%{

transform:translateX(-50%);

}

100%{

transform:translateX(0);

}

}
.salary-marquee{
    overflow: hidden;
    padding: 18px 0;
    min-height: 70px;
}
/* ==============================
   Salary Guide Cards
============================== */

.salary-guides{
    padding:40px 25px;
}

.salary-guides h2{
    color:#fff;
    margin-bottom:25px;
}

.salary-guide-card{
    display:block;
    text-decoration:none;
    background:#18283b;
    border:1px solid rgba(46,214,170,.25);
    border-radius:22px;
    padding:24px;
    margin-bottom:18px;
    transition:.3s ease;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.salary-guide-card:hover{
    transform:translateY(-4px);
    background:#20354d;
    border-color:#2ed6aa;
}

.salary-guide-card h3{
    color:#fff;
    margin:0;
    font-size:22px;
    font-weight:700;
    line-height:1.5;
}
.resource-card-link{
    display:block;
    text-decoration:none;
    color:inherit;
}

.resource-card-link:hover .resource-card{
    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(0,255,180,.15);
    transition:.3s;
}

.resource-card{
    transition:.3s ease;
}
/* Employer Resources */
.employer-resource-card{
    display:block;
    background:#15263a;
    border:1px solid rgba(61,233,190,.15);
    border-radius:24px;
    padding:28px;
    margin:20px 0;
    text-decoration:none;
    color:#fff;
    transition:.35s ease;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.employer-resource-card:hover{
    transform:translateY(-5px);
    border-color:#37e0b3;
    box-shadow:0 15px 40px rgba(55,224,179,.18);
}

.employer-resource-card h3{
    font-size:30px;
    margin:0 0 14px;
    color:#fff;
}

.employer-resource-card p{
    margin:0;
    color:#b8c5d6;
    line-height:1.7;
    font-size:20px;
}
/* Homepage Employer Resources */

.homepage-employer-resources{
    display:grid;
    gap:18px;
    margin:35px 0 40px;
}

.homepage-resource-card{
    display:block;
    text-decoration:none;
    color:#fff;
    background:rgba(20,36,56,.82);
    border:1px solid rgba(61,233,190,.18);
    border-radius:22px;
    padding:24px;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    transition:.35s ease;
    box-shadow:0 12px 35px rgba(0,0,0,.22);
}

.homepage-resource-card:hover{
    transform:translateY(-6px);
    border-color:#35ddb3;
    box-shadow:0 18px 40px rgba(53,221,179,.22);
}

.homepage-resource-card h3{
    margin:0 0 10px;
    font-size:22px;
    color:#fff;
}

.homepage-resource-card p{
    margin:0;
    color:#b9c7d8;
    line-height:1.7;
    font-size:16px;
}
.about-preview{
    margin-top:20px;
}

.about-more{
    max-height:0;
    overflow:hidden;
    transition:max-height .6s ease;
}

.about-preview.open .about-more{
    max-height:1200px;
}

.read-more-btn{
    margin-top:18px;
    background:linear-gradient(135deg,#2fd3a7,#22b895);
    color:#fff;
    border:none;
    padding:14px 26px;
    border-radius:40px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(47,211,167,.25);
    transition:.3s;
}

.read-more-btn:hover{
    transform:translateY(-2px);
}
.talk-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:12px 22px;

    margin:0 0 16px 0;

    border-radius:999px;

    background:rgba(47,211,167,.10);

    border:1px solid rgba(47,211,167,.35);

    color:#34d8ab;

    font-size:16px;
    font-weight:600;
    letter-spacing:.4px;

    text-decoration:none;

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    transition:.3s ease;
}

.talk-pill:hover{
    background:rgba(47,211,167,.18);
    border-color:#34d8ab;
    color:#fff;
}
.hero-pills{
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:flex-start;
}

.hero-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 28px;
    border-radius:999px;
    background:rgba(38,201,167,.08);
    border:1px solid rgba(38,201,167,.35);
    color:#34d6b3;
    font-weight:600;
    text-decoration:none;
    width:fit-content;
}
.talk-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:fit-content;      /* Don't stretch */
    max-width:fit-content;

    padding:14px 28px;      /* Same padding as hero pill */

    border-radius:999px;

    margin:0 0 18px 0;      /* Align with the next pill */

    background:rgba(35,203,170,.08);
    border:1px solid rgba(35,203,170,.35);

    color:#35d3b0;
    text-decoration:none;
    font-weight:600;
}
.hero-gallery{

    width:100%;

    height:240px;

    margin:30px 0;

    position:relative;

}

.gallery-photo{

    position:absolute;

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:28px;

    box-shadow:0 18px 45px rgba(0,0,0,.25);

    opacity:0;

    transition:.6s;

}

.gallery-photo.active{

    opacity:1;

}
.hero-logo{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:20px 0;
}

.hero-logo img{
    width:240px;
    max-width:80%;
    height:auto;
    display:block;
}
.header-brand{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    margin:10px 0;
}

.header-brand img{
    width:220px;      /* Increase to 240px or 260px if needed */
    max-width:85%;
    height:auto;
    display:block;
}
.page-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 20px;
    min-height:70px; /* was probably 100px+ */
}
.header-brand img{
    width:180px;
    height:auto;
}
.home-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 18px;
    background:#7ED321; /* Lime green from the logo */
    color:#0f2235;
    text-decoration:none;
    font-weight:700;
    font-size:0.95rem;
    border-radius:999px;
    transition:0.3s;
    box-shadow:0 4px 12px rgba(126,211,33,.3);
}

.home-pill:hover{
    background:#6BC51A;
    transform:translateY(-2px);
}
.hero-cert-btn{
position:absolute;
left:-320px;
top:68%;
transform:translateY(-50%);
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 22px;
background:linear-gradient(135deg,#f7d774,#d8a500);
color:#10233f;
font-size:15px;
font-weight:800;
text-decoration:none;
border-radius:0 18px 18px 0;
box-shadow:
0 0 10px rgba(255,215,0,.5),
0 0 25px rgba(255,215,0,.35);
animation:
slideCTA 1.4s ease-out forwards,
goldGlow 2.5s ease-in-out infinite;
z-index:100;
}

@keyframes slideCTA{
0%{
left:-320px;
opacity:0;
}
100%{
left:0;
opacity:1;
}
}

@keyframes goldGlow{
0%,100%{
box-shadow:
0 0 8px rgba(255,215,0,.4),
0 0 18px rgba(255,215,0,.2);
}
50%{
box-shadow:
0 0 18px rgba(255,215,0,.8),
0 0 35px rgba(255,215,0,.6);
}
}

.hero-cert-btn:hover{
transform:translateY(-50%) scale(1.03);
}
.hero-cert-btn{
position:fixed;
left:0;
top:48%;
transform:translateY(-50%);
padding:14px 22px;
background:linear-gradient(135deg,#ffd86b,#d9a400);
color:#10233f;
font-weight:800;
font-size:15px;
text-decoration:none;
border-radius:0 18px 18px 0;
box-shadow:0 0 20px rgba(255,215,0,.5);
z-index:999;
transition:transform .45s ease,opacity .35s ease;
animation:slideCTA .9s ease-out;
}

.hero-cert-btn.hide{
transform:translate(-120%, -50%);
opacity:0;
}

@keyframes slideCTA{
from{
left:-260px;
opacity:0;
}
to{
left:0;
opacity:1;
}
}
/* Override Hero CTA */

.hero-cert-btn{
position:fixed !important;
right:0 !important;
left:auto !important;
top:48% !important;
transform:translateY(-50%) !important;

padding:14px 22px;
background:linear-gradient(135deg,#ffd86b,#d9a400);
color:#10233f;
font-size:15px;
font-weight:800;
text-decoration:none;

border-radius:18px 0 0 18px !important;

box-shadow:0 0 20px rgba(255,215,0,.45);

z-index:9999;

transition:transform .45s ease,opacity .35s ease;

animation:slideCTAFromRight .9s ease-out forwards;
}

.hero-cert-btn.hide{
transform:translate(120%,-50%) !important;
opacity:0;
}

@keyframes slideCTAFromRight{

from{
right:-340px;
opacity:0;
}

to{
right:0;
opacity:1;
}

}
.hero-cert-btn{
position:fixed !important;
right:0;
top:48%;
transform:translateX(120%) translateY(-50%);
padding:14px 22px;
background:linear-gradient(135deg,#ffd86b,#d9a400);
color:#10233f;
font-size:15px;
font-weight:800;
font-weight:800;
text-decoration:none;

border-radius:18px 0 0 18px;

box-shadow:0 0 20px rgba(255,215,0,.45);

z-index:9999;

animation:slideInRight 1s ease forwards;

transition:transform .45s ease,opacity .35s ease;
}

.hero-cert-btn.hide{
transform:translateX(120%) translateY(-50%);
opacity:0;
}

@keyframes slideInRight{

from{
transform:translateX(120%) translateY(-50%);
opacity:0;
}

to{
transform:translateX(0) translateY(-50%);
opacity:1;
}

}
/* ===== HERO TRAINING BUTTON ===== */

.hero-cert-btn{

position:fixed !important;

top:48% !important;
right:0 !important;

display:flex;
align-items:center;
justify-content:center;

width:185px;
padding:14px 16px;

background:linear-gradient(135deg,#FFD84D,#E2A700);

color:#12223E;
text-decoration:none;

font-size:16px;
font-weight:800;
line-height:1.3;
text-align:center;

border-radius:18px 0 0 18px;

box-shadow:
0 8px 30px rgba(255,215,0,.35),
0 0 18px rgba(255,215,0,.55);

z-index:99999;

transform:translateX(100%);

opacity:0;

animation:heroSlideIn 1.1s ease forwards;

transition:
transform .45s ease,
opacity .35s ease;

}

.hero-cert-btn.hide{

transform:translateX(110%);

opacity:0;

}

@keyframes heroSlideIn{

0%{

transform:translateX(100%);

opacity:0;

}

100%{

transform:translateX(0);

opacity:1;

}

}

.hero-cert-btn:hover{

transform:translateX(-8px);

}
.hero-cert-btn{
    transform:translateX(0);
    transition:transform .35s ease, opacity .35s ease;
}

.hero-cert-btn.hide{
    transform:translateX(120%);
    opacity:0;
}
.search-wrapper{
position:relative;
width:100%;
}

.search-suggestions{

position:absolute;

top:100%;

left:0;

right:0;

background:#16263d;

border-radius:0 0 18px 18px;

overflow:hidden;

box-shadow:0 12px 30px rgba(0,0,0,.25);

display:none;

z-index:1000;

}

.search-item{

padding:16px;

color:#fff;

cursor:pointer;

border-bottom:1px solid rgba(255,255,255,.08);

transition:.25s;

}

.search-item:hover{

background:#1fc9b8;

}
.hero-chat-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    margin-top:22px;
    padding:14px 22px;
    background:linear-gradient(135deg,#FF5BB0,#FF2F92,#E60073);
    color:#fff;
    text-decoration:none;
    font-size:15px;
    font-weight:700;
    line-height:1.35;
    border-radius:18px;
    max-width:320px;
    box-shadow:0 0 12px rgba(255,47,146,.45);
    transition:.3s ease;
    animation:pinkGlow 2.2s ease-in-out infinite;
}

.hero-chat-btn:hover{
    transform:translateY(-3px) scale(1.03);
    animation-play-state:paused;
}

.hero-chat-btn:active{
    transform:scale(.97);
}

@keyframes pinkGlow{

0%,100%{
    box-shadow:
    0 0 10px rgba(255,47,146,.35),
    0 0 20px rgba(255,47,146,.25);
    filter:brightness(1);
}

50%{
    box-shadow:
    0 0 18px rgba(255,47,146,.75),
    0 0 40px rgba(255,47,146,.55),
    0 0 60px rgba(255,47,146,.35);
    filter:brightness(1.12);
}

}
/* Slide Menu Contact Section */

.menu-contact{
    margin-top:25px;
    padding:18px;
    border-top:1px solid rgba(255,255,255,.12);
}

.contact-item{
    display:flex;
    align-items:flex-start;
    gap:14px;

    text-decoration:none;
    color:#fff;

    padding:14px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

    transition:.3s;
}

.contact-item:last-child{
    border-bottom:none;
}

.contact-item:hover{
    color:#39d98a;
}

.contact-icon{
    width:42px;
    height:42px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:12px;

    background:rgba(57,217,138,.12);

    font-size:22px;

    flex-shrink:0;
}

.contact-item h4{
    margin:0;
    font-size:15px;
    color:#39d98a;
    font-weight:700;
}

.contact-item p{
    margin:4px 0 0;
    font-size:13px;
    color:#d8d8d8;
    line-height:1.5;
    word-break:break-word;
}
/* ============================
   FORCE MOBILE MENU ABOVE EVERYTHING
   ============================ */

#mobileMenu{
    z-index: 999999 !important;
}

#mobileMenu.show{
    z-index: 999999 !important;
}

.menu-btn{
    z-index: 1000000 !important;
}

/* Floating bottom navigation / footer */
.glass-footer,
footer,
.bottom-nav,
.floating-nav,
.floating-footer{
    z-index: 1 !important;
}
/* ===== MOBILE MENU OVERRIDE ===== */

#mobileMenu{
    position:absolute;
    top:100%;
    left:0;
    width:100%;

    background:#132536;

    display:flex;
    flex-direction:column;

    max-height:0;
    overflow:hidden;

    transition:max-height .4s ease;
    z-index:10000;
}

#mobileMenu.show{

    max-height:calc(100vh - 82px);

    overflow-y:auto;
    overflow-x:hidden;

    -webkit-overflow-scrolling:touch;

    padding-bottom:180px;
}
/* ===== MENU REACH US ===== */

.menu-contact-section{
    margin:40px 22px 80px;
    padding:24px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
}

.menu-contact-title{
    color:#36d99f;
    font-size:22px;
    font-weight:700;
    margin-bottom:8px;
}

.menu-contact-subtitle{
    color:#9fb5c5;
    font-size:14px;
    line-height:1.6;
    margin-bottom:22px;
}

.menu-contact-card{
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:18px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.menu-contact-card:last-child{
    border-bottom:none;
}

.contact-icon{
    width:58px;
    height:58px;
    border-radius:16px;
    background:#1e3d43;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    flex-shrink:0;
}

.contact-details{
    display:flex;
    flex-direction:column;
}

.contact-label{
    color:#37d69b;
    font-size:18px;
    font-weight:700;
    margin-bottom:6px;
}

.contact-details a,
.contact-details span{
    color:#ffffff;
    font-size:15px;
    line-height:1.6;
    text-decoration:none;
    word-break:break-word;
}
.contact-icon{
    width:52px;
    height:52px;
    font-size:24px;
}
.menu-contact-card{
    display:flex;
    align-items:flex-start;
    gap:20px;
    padding:20px 0;
}
.contact-details a{
    color:#fff;
    font-size:14px;
    font-weight:500;
    line-height:1.5;
    text-decoration:none;

    word-break:break-word;
    overflow-wrap:anywhere;
}