/* =========================================
REPLACE YOUR COMPLETE style.css WITH THIS
PREMIUM CAREERLIVE UI
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

html{
scroll-behavior:smooth;
}

body{
background:#f5f7ff;
overflow-x:hidden;
color:#111827;
}


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

.header{
position:sticky;
top:0;
z-index:999;
height:85px;
padding:0 6%;
background:#04133b;
display:flex;
align-items:center;
justify-content:space-between;
box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.logo{
display:flex;
align-items:center;
gap:12px;
}

.logo i{
font-size:30px;
color:#ffb100;
}

.logo h2{
font-size:34px;
font-weight:800;
color:#ffb100;
letter-spacing:.5px;
}

.nav{
display:flex;
align-items:center;
gap:34px;
}

.nav a{
text-decoration:none;
color:#fff;
font-size:18px;
font-weight:600;
transition:.3s;
position:relative;
letter-spacing:.3px;
}

.nav a:hover{
color:#ffb100;
}

.nav a::after{
content:'';
position:absolute;
left:0;
bottom:-8px;
width:0%;
height:2px;
background:#ffb100;
transition:.3s;
}

.nav a:hover::after{
width:100%;
}

.header-right{
display:flex;
align-items:center;
gap:20px;
color:#fff;
}

.header-right i{
font-size:18px;
cursor:pointer;
}

.header-right button{
padding:13px 28px;
border:none;
border-radius:50px;
background:linear-gradient(45deg,#7b2ff7,#f107a3);
color:#fff;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:.3s;
box-shadow:0 10px 20px rgba(241,7,163,.25);
}

.header-right button:hover{
transform:translateY(-3px);
}

.menu-btn{
display:none;
font-size:30px;
cursor:pointer;
}


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

.hero{
padding:90px 6%;
display:flex;
justify-content:space-between;
align-items:center;
min-height:92vh;
background:
radial-gradient(circle at top left,#ffffff,#edf1ff 50%,#fde7ff);
position:relative;
overflow:hidden;
}

.hero::before{
content:'';
position:absolute;
width:500px;
height:500px;
background:rgba(255,255,255,.4);
border-radius:50%;
right:-150px;
top:-150px;
}

.hero-left{
max-width:650px;
z-index:2;
}

.hero-left h1{
font-size:82px;
line-height:1.08;
font-weight:800;
color:#08142f;
}

.hero-left span{
background:linear-gradient(45deg,#4f46e5,#ec4899);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero-left p{
margin-top:30px;
font-size:22px;
line-height:1.9;
color:#555;
max-width:620px;
}

.hero-buttons{
margin-top:45px;
display:flex;
gap:20px;
}

.explore-btn,
.learn-btn{
padding:18px 38px;
border:none;
border-radius:60px;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:.35s;
}

.explore-btn{
background:linear-gradient(45deg,#5b4bff,#ff4fd8);
color:#fff;
box-shadow:0 15px 35px rgba(91,75,255,.35);
}

.learn-btn{
background:#fff;
color:#111827;
box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.explore-btn:hover,
.learn-btn:hover{
transform:translateY(-6px);
}

.hero-right{
z-index:2;
}

.hero-right img{
width:500px;
animation:float 4s ease-in-out infinite;
filter:drop-shadow(0 30px 50px rgba(0,0,0,.15));
}

@keyframes float{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-18px);
}

100%{
transform:translateY(0px);
}

}


/* =========================
TRENDING
========================= */

.trending{
background:#04133b;
padding:14px 0;
overflow:hidden;
white-space:nowrap;
border-top:1px solid rgba(255,255,255,.1);
border-bottom:1px solid rgba(255,255,255,.08);
}

.trending-text{
display:inline-block;
font-size:15px;
font-weight:600;
color:#fff;
animation:marquee 28s linear infinite;
}

@keyframes marquee{

0%{
transform:translateX(100%);
}

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

}


/* =========================
CATEGORY GRID
========================= */

.categories{
padding:80px 6%;
}

.category-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}

.card{
background:#fff;
padding:18px;
border-radius:32px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
transition:.35s;
cursor:pointer;
position:relative;
overflow:hidden;
text-align:center;
}

.card::before{
content:'';
position:absolute;
top:-100px;
right:-100px;
width:220px;
height:220px;
background:rgba(255,255,255,.25);
border-radius:50%;
}

.card:hover{
transform:translateY(-12px);
box-shadow:0 25px 50px rgba(0,0,0,.12);
}

.card img{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
border-radius:25px;
}

.card h3{
margin-top:24px;
font-size:24px;
font-weight:800;
text-align:center;
line-height:1.3;
letter-spacing:-0.5px;
}

.card p{
margin-top:16px;
font-size:15px;
line-height:1.9;
color:#555;
text-align:center;
font-weight:500;
padding:0 10px;
}

.card::after{
content:'➜';
position:absolute;
bottom:22px;
right:22px;
width:42px;
height:42px;
border-radius:50%;
background:#5b4bff;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:18px;
font-weight:700;
}


/* CARD COLORS */

.card:nth-child(1){
background:linear-gradient(180deg,#f1efff,#fff);
}

.card:nth-child(2){
background:linear-gradient(180deg,#eafcff,#fff);
}

.card:nth-child(3){
background:linear-gradient(180deg,#fff5df,#fff);
}

.card:nth-child(4){
background:linear-gradient(180deg,#ffeef4,#fff);
}

.card:nth-child(5){
background:linear-gradient(180deg,#f6f1ff,#fff);
}

.card:nth-child(6){
background:linear-gradient(180deg,#e8fff2,#fff);
}

.card:nth-child(7){
background:linear-gradient(180deg,#eef5ff,#fff);
}

.card:nth-child(8){
background:linear-gradient(180deg,#fff3e8,#fff);
}

.card:nth-child(9){
background:linear-gradient(180deg,#f2edff,#fff);
}

.card:nth-child(10){
background:linear-gradient(180deg,#ffeef1,#fff);
}

.card:nth-child(11){
background:linear-gradient(180deg,#ebfcff,#fff);
}


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

.stats{
padding:10px 6% 70px;
display:grid;
grid-template-columns:repeat(5,1fr);
gap:22px;
}

.stat-box{
background:#fff;
padding:35px 25px;
border-radius:28px;
text-align:center;
box-shadow:0 10px 25px rgba(0,0,0,.06);
transition:.3s;
}

.stat-box:hover{
transform:translateY(-8px);
}

.stat-box h2{
font-size:42px;
font-weight:800;
background:linear-gradient(45deg,#4f46e5,#ec4899);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.stat-box p{
margin-top:14px;
font-size:18px;
font-weight:600;
color:#555;
}


/* =========================
SUBSCRIBE
========================= */

.subscribe{
margin:0 6% 90px;
padding:55px 60px;
border-radius:35px;
background:linear-gradient(45deg,#08142f,#4c1d95);
display:flex;
justify-content:space-between;
align-items:center;
gap:30px;
color:#fff;
position:relative;
overflow:hidden;
}

.subscribe::before{
content:'';
position:absolute;
width:300px;
height:300px;
background:rgba(255,255,255,.06);
border-radius:50%;
right:-80px;
top:-80px;
}

.subscribe-left{
z-index:2;
}

.subscribe-left h2{
font-size:44px;
font-weight:800;
}

.subscribe-left p{
margin-top:16px;
font-size:19px;
line-height:2;
color:#e9e9ff;
}

.subscribe-right{
display:flex;
gap:15px;
z-index:2;
}

.subscribe-right input{
width:350px;
padding:18px 25px;
border:none;
border-radius:50px;
outline:none;
font-size:15px;
}

.subscribe-right button{
padding:18px 35px;
border:none;
border-radius:50px;
background:linear-gradient(45deg,#ff4fd8,#ff6b6b);
color:#fff;
font-size:15px;
font-weight:600;
cursor:pointer;
}


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

.footer{
background:#04133b;
padding:85px 6% 20px;
color:#fff;
position:relative;
overflow:hidden;
}

.footer::before{
content:'';
position:absolute;
width:450px;
height:450px;
background:rgba(255,255,255,.03);
border-radius:50%;
top:-180px;
right:-180px;
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:50px;
position:relative;
z-index:2;
}

.footer h2{
font-size:34px;
font-weight:800;
color:#ffb100;
}

.footer p{
margin-top:18px;
line-height:2;
color:#d5dbea;
font-size:17px;
max-width:380px;
font-weight:400;
}

.footer h3{
margin-bottom:25px;
font-size:22px;
}

.footer ul{
list-style:none;
}

.footer ul li{
margin-bottom:18px;
font-size:17px;
color:#d5dbea;
cursor:pointer;
transition:.3s;
font-weight:500;
}

.footer ul li:hover{
color:#fff;
transform:translateX(5px);
}

.footer-bottom{
margin-top:60px;
padding-top:25px;
border-top:1px solid rgba(255,255,255,.08);
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:15px;
position:relative;
z-index:2;
}

.footer-bottom p{
margin:0;
font-size:14px;
color:#c9d0e0;
}

.footer-love{
color:#ff5ca8;
font-weight:600;
}


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

@media(max-width:1200px){

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

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

.hero{
flex-direction:column;
text-align:center;
padding-top:120px;
}

.hero-left{
max-width:100%;
}

.hero-left p{
margin-left:auto;
margin-right:auto;
}

.hero-buttons{
justify-content:center;
}

.subscribe{
flex-direction:column;
text-align:center;
}

.footer-grid{
grid-template-columns:1fr 1fr;
}

}



@media(max-width:768px){

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

.header{
padding:1 14px;
height:72px;
}

.logo{
gap:8px;
}

.logo i{
font-size:22px;
}

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

.nav{
position:absolute;
top:72px;
left:-100%;
width:100%;
background:#04133b;
flex-direction:column;
padding:28px 20px;
transition:.4s;
gap:22px;
}

.nav a{
font-size:16px;
}

.nav.active{
left:0;
}

.menu-btn{
display:block;
color:#fff;
font-size:24px;
}

.header-right{
gap:14px;
}

.header-right button{
padding:10px 18px;
font-size:13px;
}


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

.hero{
padding:40px 18px 20px;
min-height:auto;
flex-direction:column;
text-align:center;
gap:10px;
}

.hero-left{
max-width:100%;
}

.hero-left h1{
font-size:42px;
line-height:1.08;
letter-spacing:-1px;
}

.hero-left p{
margin-top:20px;
font-size:15px;
line-height:1.8;
max-width:100%;
}

.hero-buttons{
margin-top:28px;
justify-content:center;
gap:14px;
flex-wrap:wrap;
}

.explore-btn,
.learn-btn{
padding:15px 28px;
font-size:15px;
}

.hero-right{
margin-top:15px;
}

.hero-right img{
width:100%;
max-width:320px;
}


/* =========================
TRENDING
========================= */

.trending{
padding:10px 0;
}

.trending-text{
font-size:13px;
}


/* =========================
LATEST JOBS MARQUEE
========================= */

.jobs-marquee{
padding:12px 0;
}

.jobs-track{
font-size:13px;
animation:jobsMove 50s linear infinite;
}

.jobs-track span{
padding:6px 14px;
font-size:13px;
}


/* =========================
CATEGORY GRID
========================= */

.categories{
padding:35px 16px;
}

.category-grid{
grid-template-columns:1fr 1fr;
gap:14px;
}

.card{
padding:12px;
border-radius:20px;
}

.card img{
border-radius:18px;
}

.card h3{
margin-top:14px;
font-size:17px;
line-height:1.35;
text-align:center;
}

.card p{
margin-top:10px;
font-size:13px;
line-height:1.6;
padding:0 4px;
text-align:center;
}

.card::after{
width:32px;
height:32px;
font-size:13px;
right:14px;
bottom:14px;
}


/* =========================
SUCCESS CARD
========================= */

.success-card{
min-height:200px;
padding:22px;
border-radius:24px;
}

.success-content h2{
font-size:20px;
line-height:1.3;
}

.success-content p{
font-size:13px;
line-height:1.7;
max-width:100%;
}

.success-content a{
padding:10px 24px;
font-size:10px;
margin-top:18px;
}

.rocket{
font-size:70px;
right:12px;
bottom:10px;
}


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

.stats{
padding:0 16px 40px;
grid-template-columns:1fr 1fr;
gap:14px;
}

.stat-box{
padding:22px 15px;
border-radius:20px;
}

.stat-box h2{
font-size:28px;
}

.stat-box p{
font-size:14px;
margin-top:8px;
}


/* =========================
SUBSCRIBE
========================= */

.subscribe{
margin:10px 16px 50px;
padding:30px 20px;
border-radius:24px;
flex-direction:column;
text-align:center;
gap:25px;
}

.subscribe-left h2{
font-size:28px;
line-height:1.3;
}

.subscribe-left p{
font-size:14px;
line-height:1.8;
margin-top:10px;
}

.subscribe-right{
flex-direction:column;
width:100%;
gap:12px;
}

.subscribe-right input{
width:100%;
padding:15px 20px;
font-size:14px;
}

.subscribe-right button{
width:100%;
padding:15px;
font-size:14px;
}


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

.footer{
padding:10px 20px 20px;
}

.footer-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
align-items:start;
}

.footer h3{
font-size:20px;
margin-bottom:14px;
}

.footer ul li{
font-size:15px;
line-height:1.8;
}

.footer h2{
font-size:26px;
}

.footer p{
font-size:12px;
line-height:1.8;
}

.footer h3{
font-size:19px;
margin-bottom:16px;
}

.footer ul li{
font-size:12px;
margin-bottom:12px;
}

.footer-bottom{
margin-top:35px;
padding-top:20px;
text-align:center;
justify-content:center;
gap:5px;
}

.footer-bottom p{
font-size:13px;
}

}

/* =========================
SUCCESS CARD
========================= */

.success-card{
position:relative;
overflow:hidden;
border-radius:32px;
padding:35px;
min-height:420px;
background:
linear-gradient(135deg,#22004d,#3b0f7a,#5b21b6);
display:flex;
flex-direction:column;
justify-content:space-between;
box-shadow:0 20px 40px rgba(59,15,122,.25);
transition:.4s;
}

.success-card:hover{
transform:translateY(-12px);
box-shadow:0 30px 60px rgba(59,15,122,.35);
}

.success-card::before{
content:'';
position:absolute;
width:260px;
height:260px;
background:rgba(255,255,255,.05);
border-radius:50%;
top:-80px;
right:-80px;
}

.success-content{
position:relative;
z-index:2;
}

.success-content h2{
font-size:30px;
line-height:1.2;
font-weight:800;
color:#fff;
}

.success-content p{
margin-top:18px;
font-size:16px;
line-height:1.8;
color:#d9ccff;
max-width:260px;
}

.success-content a{
display:inline-block;
margin-top:28px;
padding:16px 34px;
background:#fff;
color:#3b0f7a;
text-decoration:none;
border-radius:50px;
font-weight:700;
font-size:15px;
transition:.3s;
box-shadow:0 10px 20px rgba(0,0,0,.15);
}

.success-content a:hover{
transform:translateY(-4px);
}

.rocket{
position:absolute;
right:25px;
bottom:10px;
font-size:120px;
animation:rocketMove 4s ease-in-out infinite;
filter:drop-shadow(0 20px 30px rgba(0,0,0,.2));
}

@keyframes rocketMove{

0%{
transform:translateY(0px) rotate(-8deg);
}

50%{
transform:translateY(-18px) rotate(5deg);
}

100%{
transform:translateY(0px) rotate(-8deg);
}

}


/* MOBILE */

@media(max-width:768px){

.success-card{
min-height:320px;
padding:25px;
}

.success-content h2{
font-size:20px;
}

.success-content p{
font-size:12px;
}

.rocket{
font-size:80px;
right:15px;
bottom:20px;
}

}

/* =========================
LATEST JOBS MARQUEE
========================= */

.jobs-marquee{
background:linear-gradient(45deg,#5b21b6,#7c3aed);
padding:16px 0;
overflow:hidden;
white-space:nowrap;
position:relative;
border-bottom:1px solid rgba(255,255,255,.08);
}

.jobs-track{
display:inline-block;
color:#fff;
font-size:17px;
font-weight:600;
animation:jobsMove 58s linear infinite;
padding-left:100%;
}

.jobs-track span{
background:#fff;
color:#5b21b6;
padding:8px 18px;
border-radius:30px;
margin-right:20px;
font-weight:700;
}

@keyframes jobsMove{

0%{
transform:translateX(0%);
}

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

}

/* JOB MARQUEE LINKS */

.job-link{
color:#fff;
text-decoration:none;
transition:.3s;
font-weight:600;
}

.job-link:hover{
color:#ffe066;
}

/* =========================
FOOTER HOVER EFFECTS
========================= */

.footer ul li{
position:relative;
transition:.35s ease;
cursor:pointer;
width:fit-content;
}

.footer ul li::before{
content:'';
position:absolute;
left:0;
bottom:-4px;
width:0%;
height:2px;
background:linear-gradient(45deg,#ffb100,#ff4fd8);
border-radius:20px;
transition:.35s;
}

.footer ul li:hover{
transform:translateX(8px);
color:#ffffff;
text-shadow:0 0 12px rgba(255,255,255,.35);
}

.footer ul li:hover::before{
width:100%;
}


/* DIFFERENT COLORS */

.footer-grid div:nth-child(2) ul li:hover{
color:#ffb100;
}

.footer-grid div:nth-child(3) ul li:hover{
color:#5b8cff;
}

.footer-grid div:nth-child(4) ul li:hover{
color:#ff4fd8;
}

/* =========================
LATEST JOBS POSTS SECTION
========================= */

.jobs-section{
padding:70px 6%;
display:none;
animation:fadeIn .4s ease;
}

.section-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:35px;
gap:20px;
flex-wrap:wrap;
}

.section-top h2{
font-size:42px;
font-weight:800;
background:linear-gradient(45deg,#4f46e5,#ec4899);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.section-top button{
padding:14px 28px;
border:none;
border-radius:50px;
background:#04133b;
color:#fff;
font-weight:600;
cursor:pointer;
}

.jobs-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;
}

.job-post{
background:#fff;
border-radius:28px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.06);
transition:.35s;
cursor:pointer;
}

.job-post:hover{
transform:translateY(-10px);
box-shadow:0 25px 50px rgba(0,0,0,.12);
}

.job-post img{
width:100%;
height:230px;
object-fit:cover;
}

.job-content{
padding:22px;
}

.job-content h3{
font-size:20px;
line-height:1.5;
font-weight:700;
color:#111827;
}

.job-content p{
margin-top:12px;
font-size:14px;
line-height:1.8;
color:#666;
}

.job-content a{
display:inline-block;
margin-top:18px;
padding:12px 24px;
background:linear-gradient(45deg,#5b4bff,#ff4fd8);
color:#fff;
text-decoration:none;
border-radius:50px;
font-size:14px;
font-weight:600;
}

@keyframes fadeIn{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
}


/* MOBILE */

@media(max-width:768px){

.jobs-section{
padding:40px 16px;
}

.section-top h2{
font-size:28px;
}

.jobs-grid{
grid-template-columns:1fr 1fr;
gap:16px;
}

.job-post img{
height:150px;
}

.job-content{
padding:14px;
}

.job-content h3{
font-size:15px;
line-height:1.5;
}

.job-content p{
font-size:12px;
line-height:1.6;
}

.job-content a{
padding:10px 18px;
font-size:12px;
}

}

/* STOP JOB MARQUEE ON HOVER */

.jobs-marquee:hover .jobs-track{
animation-play-state:paused;
}


/* SUBSCRIBE FORM */

#subscribeForm{
display:flex;
gap:15px;
}

@media(max-width:768px){

#subscribeForm{
flex-direction:column;
width:100%;
}

}