/* =========================================
   JobPlacement Professional CSS
   Part 1
========================================= */

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;

background:#f4f7fb;

color:#222;

line-height:1.6;

}

.container{

width:90%;

max-width:1200px;

margin:auto;

}

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

.header{

background:#004aad;

padding:15px 0;

position:sticky;

top:0;

z-index:999;

box-shadow:0 2px 10px rgba(0,0,0,.15);

}

.header .container{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

}

.logo h2{

color:#fff;

font-size:32px;

}

.logo p{

color:#dce8ff;

font-size:14px;

}

nav ul{

display:flex;

list-style:none;

gap:25px;

}

nav ul li a{

text-decoration:none;

color:#fff;

font-weight:600;

transition:.3s;

}

nav ul li a:hover{

color:#ffd700;

}

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

.hero{

background:linear-gradient(135deg,#0057d8,#0099ff);

padding:90px 20px;

text-align:center;

color:#fff;

}

.hero h1{

font-size:48px;

margin-bottom:15px;

}

.hero p{

font-size:20px;

margin-bottom:35px;

}

.search-box{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

margin-bottom:30px;

}

.search-box input{

width:280px;

padding:15px;

border:none;

border-radius:8px;

font-size:16px;

outline:none;

}

.search-box button{

padding:15px 30px;

border:none;

border-radius:8px;

background:#ffd700;

font-size:16px;

font-weight:bold;

cursor:pointer;

transition:.3s;

}

.search-box button:hover{

background:#ffb800;

}

.hero-buttons{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

margin-top:20px;

}

.hero-buttons a{

text-decoration:none;

}

.hero-buttons button{

padding:14px 24px;

border:none;

border-radius:8px;

background:#fff;

color:#004aad;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.hero-buttons button:hover{

background:#ffd700;

color:#000;

transform:translateY(-2px);

}

/* =========================================
   Part 2 : Latest Jobs & Categories
========================================= */

/* Latest Jobs */

.latest-jobs{
padding:70px 20px;
background:#ffffff;
}

.latest-jobs h2{
text-align:center;
font-size:38px;
color:#004aad;
margin-bottom:40px;
}

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

.job-card{
background:#fff;
padding:25px;
border-radius:12px;
box-shadow:0 5px 15px rgba(0,0,0,.1);
transition:.3s;
}

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

.job-card h3{
color:#004aad;
margin-bottom:10px;
}

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

.job-card button{
margin-top:15px;
padding:12px 20px;
background:#004aad;
color:#fff;
border:none;
border-radius:8px;
cursor:pointer;
font-weight:bold;
transition:.3s;
}

.job-card button:hover{
background:#0066ff;
}

/* Job Categories */

.categories{
padding:70px 20px;
background:#f5f7fa;
}

.categories h2{
text-align:center;
font-size:38px;
color:#004aad;
margin-bottom:40px;
}

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

.category-card{
background:#fff;
padding:25px;
text-align:center;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,.1);
transition:.3s;
cursor:pointer;
}

.category-card:hover{
background:#004aad;
color:#fff;
transform:scale(1.05);
}

.category-card h3{
margin-bottom:10px;
font-size:22px;
}

/* Statistics */

.statistics{
padding:70px 20px;
background:#004aad;
color:#fff;
}

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

.stats-card{
background:rgba(255,255,255,.12);
padding:30px;
text-align:center;
border-radius:12px;
}

.stats-card h1{
font-size:40px;
margin-bottom:10px;
color:#ffd700;
}

.stats-card p{
font-size:18px;
}

/* =========================================
   Part 3 : Selected Candidates, Partners,
            Companies & Success Stories
=========================================*/

/* Selected Candidates */

.selected-candidates{
padding:70px 20px;
background:#ffffff;
}

.selected-candidates h2{
text-align:center;
font-size:36px;
color:#004aad;
margin-bottom:40px;
}

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

.selected-card{
background:#fff;
padding:25px;
text-align:center;
border-radius:12px;
box-shadow:0 5px 15px rgba(0,0,0,.10);
transition:.3s;
}

.selected-card:hover{
transform:translateY(-8px);
border-top:5px solid #004aad;
}

.selected-card h3{
color:#004aad;
margin-bottom:10px;
}

.selected-card p{
color:#555;
margin:6px 0;
}

/* Placement Partners */

.placement-partners{
padding:70px 20px;
background:#f4f7fb;
}

.placement-partners h2{
text-align:center;
font-size:36px;
color:#004aad;
margin-bottom:40px;
}

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

.partner-card{
background:#fff;
padding:30px;
text-align:center;
font-size:22px;
font-weight:bold;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,.10);
transition:.3s;
}

.partner-card:hover{
background:#004aad;
color:#fff;
}

/* Top Companies */

.top-companies{
padding:70px 20px;
background:#fff;
}

.top-companies h2{
text-align:center;
font-size:36px;
color:#004aad;
margin-bottom:40px;
}

/* =========================================
   Part 4 : Why Choose Us, Contact,
            Newsletter & Footer
=========================================*/

/* Why Choose Us */

.why-choose{
padding:70px 20px;
background:#ffffff;
}

.why-choose h2{
text-align:center;
font-size:36px;
color:#004aad;
margin-bottom:40px;
}

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

.why-card{
background:#fff;
padding:25px;
border-radius:12px;
text-align:center;
box-shadow:0 5px 15px rgba(0,0,0,.10);
transition:.3s;
}

.why-card:hover{
background:#004aad;
color:#fff;
transform:translateY(-8px);
}

.why-card h3{
margin-bottom:12px;
}

/* Contact */

.contact{
padding:70px 20px;
background:#f4f7fb;
}

.contact h2{
text-align:center;
font-size:36px;
color:#004aad;
margin-bottom:30px;
}

.contact-box{
max-width:700px;
margin:auto;
background:#fff;
padding:35px;
border-radius:12px;
box-shadow:0 5px 15px rgba(0,0,0,.10);
text-align:center;
}

.contact-box p{
margin:12px 0;
font-size:18px;
}

/* Newsletter */

.newsletter{
padding:70px 20px;
background:#004aad;
text-align:center;
color:#fff;
}

.newsletter h2{
font-size:36px;
margin-bottom:15px;
}

.newsletter p{
margin-bottom:25px;
}

.newsletter input{
width:320px;
max-width:90%;
padding:15px;
border:none;
border-radius:8px;
margin-bottom:15px;
font-size:16px;
}

.newsletter button{
padding:15px 30px;
border:none;
background:#ffd700;
border-radius:8px;
font-weight:bold;
cursor:pointer;
transition:.3s;
}

.newsletter button:hover{
background:#ffb800;
}

/* Footer */

footer{
background:#002b70;
color:#fff;
padding:30px 20px;
text-align:center;
}

footer p{
margin:8px 0;
font-size:15px;
}

footer a{
color:#ffd700;
text-decoration:none;
}

footer a:hover{
text-decoration:underline;
}
/* =========================================
   Part 5 : Responsive Design
=========================================*/

/* Tablets */

@media (max-width:992px){

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

nav ul{
flex-wrap:wrap;
justify-content:center;
margin-top:15px;
}

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

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

.search-box{
flex-direction:column;
align-items:center;
}

.search-box input{
width:90%;
}

.hero-buttons{
flex-direction:column;
align-items:center;
}

.hero-buttons a{
width:90%;
}

.hero-buttons button{
width:100%;
}

}

/* Mobile */

@media (max-width:768px){

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

.hero{
padding:60px 15px;
}

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

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

.latest-jobs h2,
.categories h2,
.statistics h2,
.selected-candidates h2,
.placement-partners h2,
.top-companies h2,
.success-stories h2,
.why-choose h2,
.contact h2,
.newsletter h2{

font-size:28px;

}

.job-card,
.category-card,
.company-card,
.selected-card,
.story-card,
.why-card{

padding:20px;

}

.contact-box{

padding:25px;

}

.newsletter input{

width:95%;

}

.newsletter button{

width:95%;

}

footer{

font-size:14px;

}

}

/* Small Mobile */

@media (max-width:480px){

.hero h1{

font-size:28px;

}

.hero p{

font-size:15px;

}

.logo h1{

font-size:24px;

}

nav ul{

flex-direction:column;

gap:10px;

}

.search-box input{

width:100%;

}

.hero-buttons button{

font-size:15px;

padding:12px;

}

.job-card button{

width:100%;

}

}

/* Smooth Animation */

section{

animation:fadeIn 0.7s ease;

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* Button Transition */

button{

transition:0.3s ease;

}

button:hover{

transform:translateY(-2px);

}

/* Image */

img{

max-width:100%;

height:auto;

display:block;

}

/* ==========================
   Registration & Login Form
========================== */

.form-box{
max-width:900px;
margin:50px auto;
background:#fff;
padding:40px;
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,.15);
}

.form-box h1{
text-align:center;
color:#004aad;
margin-bottom:10px;
}

.form-box p{
text-align:center;
margin-bottom:25px;
color:#555;
}

#candidateForm{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}

#candidateForm input,
#candidateForm select,
#candidateForm textarea{

width:100%;
padding:14px;
border:1px solid #ccc;
border-radius:8px;
font-size:16px;
outline:none;

}

#candidateForm textarea{

grid-column:1/3;
height:100px;
resize:none;

}

#candidateForm label{

grid-column:1/3;
font-weight:bold;
color:#004aad;

}

#registerBtn{

grid-column:1/3;

padding:15px;

background:#004aad;

color:#fff;

font-size:18px;

border:none;

border-radius:8px;

cursor:pointer;

transition:.3s;

}

#registerBtn:hover{

background:#0066ff;

}

.form-box a{

color:#004aad;

text-decoration:none;

font-weight:bold;

}

.form-box a:hover{

text-decoration:underline;

}

@media(max-width:768px){

.form-box{

margin:20px;
padding:20px;

}

#candidateForm{

grid-template-columns:1fr;

}

#candidateForm textarea,
#candidateForm label,
#registerBtn{

grid-column:1;

}
}