/* =========================================================
EMPLOYMENT AGREEMENT PAGE CSS
FILE : agreement3.css
UNIQUE PREMIUM HR DESIGN
========================================================= */

.page-wrapper{
background:#eef3f9;
padding:40px 0 80px;
font-family:'Poppins',sans-serif;
overflow:hidden;
}

.page-wrapper .container{
max-width:1180px;
}

/* =========================================================
ARTICLE CARD
========================================================= */

.article-card{
background:transparent;
}

/* =========================================================
BREADCRUMB
========================================================= */

.breadcrumb-box{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:22px;
font-size:14px;
font-weight:500;
}

.breadcrumb-box a{
color:#56657d;
text-decoration:none;
}

.breadcrumb-box span{
color:#9aa7b9;
}

/* =========================================================
SECTION TITLE
========================================================= */

.section-title{
font-size:34px;
font-weight:800;
color:#162447;
margin-bottom:24px;
line-height:1.3;
position:relative;
padding-left:18px;
}

.section-title::before{
content:'';
position:absolute;
left:0;
top:5px;
width:6px;
height:34px;
border-radius:30px;
background:linear-gradient(180deg,#ff9800,#ffc107);
}

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

.hero-section{
background:linear-gradient(135deg,#132247,#243f7d);
padding:65px;
border-radius:32px;
position:relative;
overflow:hidden;
margin-bottom:40px;
box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.hero-section::before{
content:'';
position:absolute;
right:-100px;
top:-100px;
width:260px;
height:260px;
border-radius:50%;
background:rgba(255,255,255,0.05);
}

.hero-section::after{
content:'';
position:absolute;
left:-80px;
bottom:-80px;
width:220px;
height:220px;
border-radius:50%;
background:rgba(255,255,255,0.04);
}

.hero-badge{
display:inline-flex;
align-items:center;
gap:10px;
background:rgba(255,255,255,0.12);
padding:10px 18px;
border-radius:50px;
font-size:13px;
font-weight:700;
color:#fff;
margin-bottom:22px;
}

.hero-title{
font-size:54px;
font-weight:800;
line-height:1.12;
color:#fff;
margin-bottom:24px;
max-width:720px;
}

.hero-description{
font-size:17px;
line-height:1.95;
color:rgba(255,255,255,0.88);
margin-bottom:34px;
max-width:760px;
}

.hero-stats{
display:flex;
flex-wrap:wrap;
gap:18px;
margin-bottom:32px;
}

.hero-stats div{
background:rgba(255,255,255,0.08);
padding:20px 24px;
border-radius:18px;
min-width:170px;
backdrop-filter:blur(10px);
}

.hero-stats strong{
display:block;
font-size:28px;
font-weight:800;
color:#fff;
margin-bottom:5px;
}

.hero-stats span{
font-size:14px;
color:#dbe4ff;
}

.hero-buttons{
display:flex;
flex-wrap:wrap;
gap:16px;
margin-bottom:26px;
}

.primary-btn{
display:inline-flex;
align-items:center;
gap:10px;
background:#ff9800;
padding:16px 34px;
border-radius:14px;
font-size:15px;
font-weight:700;
color:#fff;
text-decoration:none;
transition:.3s;
box-shadow:0 10px 20px rgba(255,152,0,0.25);
}

.primary-btn:hover{
transform:translateY(-3px);
background:#ffad1f;
color:#fff;
}

.secondary-btn{
display:inline-flex;
align-items:center;
gap:10px;
background:#fff;
padding:16px 34px;
border-radius:14px;
font-size:15px;
font-weight:700;
color:#162447;
text-decoration:none;
transition:.3s;
}

.secondary-btn:hover{
transform:translateY(-3px);
color:#162447;
}

.trust-strip{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-bottom:18px;
}

.trust-strip div{
background:rgba(255,255,255,0.09);
padding:10px 16px;
border-radius:50px;
font-size:13px;
font-weight:600;
color:#fff;
}

.trust-strip i{
margin-right:6px;
color:#ffd166;
}

.last-updated{
font-size:13px;
color:#c8d6f0;
}

.hero-image-box{
position:relative;
text-align:center;
}

.hero-image{
background:#fff;
padding:16px;
border-radius:26px;
display:inline-block;
box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

.hero-image img{
width:100%;
max-width:350px;
border-radius:18px;
}

.floating-badge{
position:absolute;
right:-10px;
bottom:25px;
background:#fff;
padding:14px 18px;
border-radius:14px;
font-size:14px;
font-weight:700;
color:#162447;
box-shadow:0 10px 25px rgba(0,0,0,0.1);
}

/* =========================================================
QUICK INFO
========================================================= */

.quick-info-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
margin-bottom:42px;
}

.quick-info-card{
background:#fff;
padding:32px 26px;
border-radius:24px;
box-shadow:0 12px 30px rgba(0,0,0,0.04);
transition:.3s;
border:1px solid #edf1f7;
}

.quick-info-card:hover{
transform:translateY(-5px);
}

.quick-info-icon{
width:65px;
height:65px;
border-radius:18px;
background:#fff3e0;
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
color:#ff9800;
margin-bottom:20px;
}

.quick-info-card h3{
font-size:22px;
font-weight:700;
margin-bottom:12px;
color:#162447;
}

.quick-info-card p{
margin:0;
font-size:15px;
line-height:1.8;
color:#555;
}

/* =========================================================
LIST
========================================================= */

.custom-list{
background:#fff;
padding:35px;
border-radius:26px;
margin-bottom:38px;
box-shadow:0 12px 30px rgba(0,0,0,0.04);
}

.custom-list li{
margin-bottom:14px;
font-size:16px;
line-height:1.8;
color:#444;
}

/* =========================================================
CONTENT
========================================================= */

.content-text{
background:#fff;
padding:30px;
border-radius:24px;
font-size:16px;
line-height:2;
color:#444;
margin-bottom:22px;
box-shadow:0 12px 30px rgba(0,0,0,0.04);
}

/* =========================================================
PROCESS
========================================================= */

.process-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:22px;
margin-bottom:40px;
}

.process-card{
background:#fff;
padding:30px 24px;
border-radius:24px;
text-align:center;
box-shadow:0 12px 30px rgba(0,0,0,0.04);
}

.process-number{
width:62px;
height:62px;
border-radius:50%;
background:#162447;
color:#fff;
font-size:24px;
font-weight:800;
display:flex;
align-items:center;
justify-content:center;
margin:auto;
margin-bottom:18px;
}

.process-card h3{
font-size:21px;
font-weight:700;
margin-bottom:12px;
color:#162447;
}

.process-card p{
margin:0;
font-size:15px;
line-height:1.8;
color:#555;
}

/* =========================================================
TABLE
========================================================= */

.feature-table{
background:#fff;
padding:35px;
border-radius:26px;
margin-bottom:40px;
box-shadow:0 12px 30px rgba(0,0,0,0.04);
overflow:auto;
}

.feature-table table{
width:100%;
border-collapse:collapse;
}

.feature-table th{
background:#162447;
padding:18px;
color:#fff;
font-size:15px;
font-weight:700;
}

.feature-table td{
padding:18px;
border-bottom:1px solid #edf1f7;
font-size:15px;
}

/* =========================================================
USES
========================================================= */

.uses-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
margin-bottom:40px;
}

.use-card{
background:#fff;
padding:32px 26px;
border-radius:24px;
box-shadow:0 12px 30px rgba(0,0,0,0.04);
text-align:center;
transition:.3s;
}

.use-card:hover{
transform:translateY(-5px);
}

.use-card i{
font-size:34px;
color:#ff9800;
margin-bottom:18px;
}

.use-card h3{
font-size:22px;
font-weight:700;
margin-bottom:12px;
color:#162447;
}

.use-card p{
margin:0;
font-size:15px;
line-height:1.8;
color:#555;
}

/* =========================================================
CLAUSE BOX
========================================================= */

.clause-box{
background:#fff;
padding:32px;
border-radius:24px;
margin-bottom:22px;
box-shadow:0 12px 30px rgba(0,0,0,0.04);
border-left:6px solid #ff9800;
}

.clause-box h3{
font-size:24px;
font-weight:700;
margin-bottom:12px;
color:#162447;
}

.clause-box p{
margin:0;
font-size:15px;
line-height:1.9;
color:#555;
}

/* =========================================================
RELATED
========================================================= */

.related-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:22px;
margin-bottom:40px;
}

.related-card{
background:#fff;
padding:28px;
border-radius:24px;
text-decoration:none;
box-shadow:0 12px 30px rgba(0,0,0,0.04);
transition:.3s;
}

.related-card:hover{
transform:translateY(-5px);
background:#162447;
}

.related-card:hover h3,
.related-card:hover p{
color:#fff;
}

.related-card h3{
font-size:22px;
font-weight:700;
margin-bottom:10px;
color:#162447;
}

.related-card p{
margin:0;
font-size:15px;
line-height:1.8;
color:#555;
}

/* =========================================================
WARNING
========================================================= */

.legal-warning{
background:linear-gradient(135deg,#162447,#223b74);
padding:45px;
border-radius:28px;
margin-bottom:40px;
color:#fff;
}

.legal-warning h2{
font-size:34px;
font-weight:800;
margin-bottom:18px;
}

.legal-warning p{
margin:0;
font-size:16px;
line-height:2;
color:#dbe4ff;
}

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

.cta-box{
background:linear-gradient(135deg,#ff9800,#ffb22c);
padding:55px;
border-radius:30px;
text-align:center;
margin-bottom:42px;
position:relative;
overflow:hidden;
box-shadow:0 18px 40px rgba(255,152,0,0.2);
}

.cta-box::before{
content:'';
position:absolute;
right:-60px;
top:-60px;
width:220px;
height:220px;
border-radius:50%;
background:rgba(255,255,255,0.1);
}

.cta-box h2{
font-size:42px;
font-weight:800;
color:#fff;
margin-bottom:16px;
}

.cta-box p{
font-size:17px;
color:#fff;
margin-bottom:28px;
}

.cta-btn{
display:inline-flex;
align-items:center;
gap:10px;
background:#fff;
padding:17px 36px;
border-radius:14px;
font-size:16px;
font-weight:700;
color:#162447;
text-decoration:none;
transition:.3s;
}

.cta-btn:hover{
transform:translateY(-3px);
color:#162447;
}

/* =========================================================
IMPORTANT LINKS
========================================================= */

.important-links-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-bottom:40px;
}

.important-links-grid a{
background:#fff;
padding:20px;
border-radius:18px;
text-decoration:none;
font-size:15px;
font-weight:700;
color:#162447;
display:flex;
align-items:center;
gap:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.04);
transition:.3s;
}

.important-links-grid a:hover{
background:#162447;
color:#fff;
transform:translateY(-4px);
}

/* =========================================================
FAQ
========================================================= */

.faq-box{
background:#fff;
padding:28px;
border-radius:24px;
margin-bottom:20px;
box-shadow:0 12px 30px rgba(0,0,0,0.04);
transition:.3s;
}

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

.faq-box h3{
font-size:22px;
font-weight:700;
margin-bottom:12px;
color:#162447;
}

.faq-box p{
margin:0;
font-size:15px;
line-height:1.9;
color:#555;
}

/* =========================================================
AUTHOR
========================================================= */

.author-box{
text-align:center;
padding:24px;
}

.author-box h4{
font-size:22px;
font-weight:700;
margin-bottom:10px;
color:#162447;
}

.author-box p{
font-size:15px;
color:#666;
}

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

.mobile-sticky-btn{
display:none;
}

.desktop-sticky-btn{
position:fixed;
right:20px;
bottom:30px;
z-index:999;
}

.desktop-sticky-btn a{
display:flex;
align-items:center;
gap:10px;
background:#ff9800;
padding:16px 24px;
border-radius:14px;
color:#fff;
font-size:15px;
font-weight:700;
text-decoration:none;
box-shadow:0 10px 25px rgba(255,152,0,0.3);
}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:992px){

.hero-section{
padding:45px;
}

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

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

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

}

@media(max-width:768px){

.page-wrapper{
padding:20px 0 90px;
}

.section-title{
font-size:26px;
}

.hero-section{
padding:32px 24px;
border-radius:24px;
}

.hero-title{
font-size:32px;
line-height:1.2;
}

.hero-description{
font-size:15px;
line-height:1.9;
}

.hero-stats{
flex-direction:column;
}

.quick-info-grid,
.process-grid,
.related-grid,
.important-links-grid{
grid-template-columns:1fr;
}

.custom-list,
.content-text,
.feature-table,
.clause-box,
.faq-box,
.legal-warning{
padding:24px;
}

.cta-box{
padding:38px 22px;
}

.cta-box h2{
font-size:30px;
}

.hero-image-box{
margin-top:30px;
}

.desktop-sticky-btn{
display:none;
}

.mobile-sticky-btn{
display:block;
position:fixed;
bottom:0;
left:0;
width:100%;
padding:12px;
background:#162447;
z-index:999;
box-shadow:0 -5px 20px rgba(0,0,0,0.1);
}

.mobile-sticky-btn a{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
background:#ff9800;
color:#fff;
padding:15px;
border-radius:14px;
font-size:16px;
font-weight:700;
text-decoration:none;
}

}