/*==================================================
GET QUICK JOB
Professional Recruitment Website
Version 2.0
Foundation Styles
===================================================*/

/* Google Font */

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

/*========================
RESET
=========================*/

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

/*========================
ROOT COLORS
=========================*/

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;

    --secondary:#0f172a;

    --light:#ffffff;

    --background:#f8fafc;

    --border:#e5e7eb;

    --text:#374151;

    --heading:#111827;

    --success:#16a34a;

    --danger:#dc2626;

    --shadow:0 8px 30px rgba(0,0,0,.08);

    --radius:12px;

}

/*========================
BODY
=========================*/

body{

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

    background:var(--background);

    color:var(--text);

    line-height:1.7;

    overflow-x:hidden;

    font-size:16px;

}

/*========================
CONTAINER
=========================*/

.container{

    width:92%;

    max-width:1200px;

    margin:auto;

}

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

a{

    text-decoration:none;

    transition:.3s;

}

a:hover{

    color:var(--primary);

}

/*========================
IMAGES
=========================*/

img{

    max-width:100%;

    height:auto;

    display:block;

}

/*========================
LISTS
=========================*/

ul{

    list-style:none;

}

/*========================
HEADINGS
=========================*/

h1{

    font-size:52px;

    color:var(--heading);

    line-height:1.2;

    margin-bottom:20px;

    font-weight:700;

}

h2{

    font-size:38px;

    color:var(--heading);

    margin-bottom:20px;

    font-weight:700;

}

h3{

    font-size:24px;

    color:var(--heading);

    margin-bottom:15px;

    font-weight:600;

}

h4{

    font-size:20px;

    color:var(--heading);

}

p{

    margin-bottom:18px;

    color:var(--text);

}

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

section{

    padding:80px 0;

}

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

.section-title{

    text-align:center;

    max-width:760px;

    margin:0 auto 60px;

}

.section-title h2{

    margin-bottom:15px;

}

.section-title p{

    font-size:18px;

}

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

.btn,

button,

input[type=submit]{

    background:var(--primary);

    color:#fff;

    border:none;

    border-radius:8px;

    padding:15px 32px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

    display:inline-block;

}

.btn:hover,

button:hover,

input[type=submit]:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

}

/* Outline Button */

.btn-outline{

    background:#fff;

    color:var(--primary);

    border:2px solid var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

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

.card{

    background:#fff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:30px;

}

/*========================
FORM
=========================*/

input,

select,

textarea{

    width:100%;

    padding:15px;

    border:1px solid var(--border);

    border-radius:8px;

    font-size:15px;

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

    transition:.3s;

    background:#fff;

}

input:focus,

select:focus,

textarea:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(37,99,235,.12);

}

textarea{

    resize:vertical;

}

/*========================
LABEL
=========================*/

label{

    display:block;

    margin-bottom:8px;

    font-weight:500;

}

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

.grid{

    display:grid;

    gap:30px;

}

/*========================
TEXT ALIGNMENT
=========================*/

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

/*========================
MARGINS
=========================*/

.mt-1{

    margin-top:10px;

}

.mt-2{

    margin-top:20px;

}

.mt-3{

    margin-top:30px;

}

.mt-4{

    margin-top:40px;

}

.mb-1{

    margin-bottom:10px;

}

.mb-2{

    margin-bottom:20px;

}

.mb-3{

    margin-bottom:30px;

}

.mb-4{

    margin-bottom:40px;

}

/*========================
SHADOW
=========================*/

.shadow{

    box-shadow:var(--shadow);

}

/*========================
BORDER RADIUS
=========================*/

.rounded{

    border-radius:var(--radius);

}

/*========================
ANIMATION
=========================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-up{

    animation:fadeUp .7s ease;

}
/*==================================================
HEADER & NAVIGATION
==================================================*/

/* Top Header */

.top-header{

    background:#0f172a;

    color:#fff;

    font-size:14px;

    padding:10px 0;

}

.top-header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

}

.top-header p{

    margin:0;

    color:#fff;

}

.top-header a{

    color:#fff;

    margin-left:18px;

}

.top-header a:hover{

    color:#93c5fd;

}


/*=========================
NAVBAR
=========================*/

.navbar{

    background:#fff;

    position:sticky;

    top:0;

    left:0;

    width:100%;

    z-index:999;

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

    transition:.35s;

}

.navbar.scrolled{

    box-shadow:0 8px 30px rgba(0,0,0,.08);

}

.navbar .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}


/*=========================
LOGO
=========================*/

.logo{

    font-size:30px;

    font-weight:700;

    color:#2563eb;

    line-height:1;

}

.logo:hover{

    color:#2563eb;

}

.logo span{

    display:block;

    color:#111827;

    font-size:14px;

    font-weight:500;

    letter-spacing:3px;

    margin-top:5px;

    text-transform:uppercase;

}


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

.nav-links{

    display:flex;

    align-items:center;

    gap:35px;

}

.nav-links li{

    list-style:none;

}

.nav-links a{

    color:#374151;

    font-weight:500;

    position:relative;

    transition:.3s;

}

.nav-links a:hover{

    color:#2563eb;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#2563eb;

    transition:.3s;

}

.nav-links a:hover::after{

    width:100%;

}


/* Active Page */

.nav-links a.active{

    color:#2563eb;

}

.nav-links a.active::after{

    width:100%;

}


/*=========================
LOGIN BUTTON
=========================*/

.login-btn{

    padding:10px 18px;

    border:1px solid #dbe3ec;

    border-radius:8px;

    transition:.3s;

}

.login-btn:hover{

    border-color:#2563eb;

}


/*=========================
APPLY BUTTON
=========================*/

.apply-btn{

    background:#2563eb;

    color:#fff!important;

    padding:12px 25px;

    border-radius:8px;

    box-shadow:0 10px 25px rgba(37,99,235,.18);

    transition:.3s;

}

.apply-btn:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

    color:#fff!important;

}

.apply-btn::after{

    display:none;

}


/*=========================
MOBILE MENU BUTTON
=========================*/

.menu-toggle{

display:none;

font-size:30px;

cursor:pointer;

color:#2563eb;

}

@media(max-width:991px){

.menu-toggle{

display:block;

z-index:1001;

}

.nav-links{

position:absolute;

top:80px;

left:0;

width:100%;

background:#fff;

display:flex;

flex-direction:column;

align-items:center;

padding:25px 0;

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

transform:translateY(-150%);

opacity:0;

visibility:hidden;

transition:.35s ease;

z-index:1000;

}

.nav-links.active{

transform:translateY(0);

opacity:1;

visibility:visible;

}

.nav-links li{

margin:12px 0;

}

.nav-links li a{

display:block;

padding:12px 20px;

width:100%;

text-align:center;

}

}


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

@media(max-width:991px){

.menu-toggle{

display:block;

}

.nav-links{

position:absolute;

top:100%;

left:0;

width:100%;

background:#fff;

display:none;

flex-direction:column;

align-items:flex-start;

padding:25px;

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

gap:20px;

}

.nav-links.active{

display:flex;

}

.nav-links a{

font-size:17px;

}

.apply-btn{

width:100%;

text-align:center;

}

}


/*=========================
SMALL PHONES
=========================*/

@media(max-width:576px){

.logo{

font-size:24px;

}

.logo span{

font-size:12px;

letter-spacing:2px;

}

.top-header{

display:none;

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

.hero{

padding:90px 0;

background:#f8fafc;

overflow:hidden;

}

.hero-content{

display:flex;

align-items:center;

justify-content:space-between;

gap:70px;

}

.hero-text{

flex:1;

animation:fadeUp .8s ease;

}

.hero-text h1{

font-size:55px;

font-weight:700;

line-height:1.2;

margin-bottom:20px;

}

.hero-text h1 span{

color:#2563eb;

}

.hero-text p{

font-size:18px;

margin-bottom:35px;

max-width:620px;

}

.hero-image{

flex:1;

text-align:center;

}

.hero-image img{

width:100%;

max-width:540px;

margin:auto;

}
.search-box{

display:flex;

gap:15px;

background:#fff;

padding:20px;

border-radius:14px;

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

margin-top:35px;

flex-wrap:wrap;

}

.search-box input{

flex:2;

}

.search-box select{

flex:1;

}

.search-box button{

padding:16px 35px;

}
/*=================================
STATISTICS
==================================*/

.stats{

background:#fff;

padding:60px 0;

}

.stats .container{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.stat-card{

background:#fff;

padding:35px;

text-align:center;

border-radius:12px;

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

transition:.3s;

}

.stat-card:hover{

transform:translateY(-8px);

}

.stat-card h2{

font-size:42px;

color:#2563eb;

margin-bottom:8px;

}

.stat-card p{

margin:0;

font-weight:500;

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

.categories{

background:#f8fafc;

}

.category-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:30px;

margin-top:50px;

}

.category-card{

background:#fff;

padding:35px;

border-radius:14px;

text-align:center;

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

transition:.3s;

}

.category-card:hover{

transform:translateY(-8px);

}

.category-card i{

font-size:45px;

color:#2563eb;

margin-bottom:20px;

}

.category-card h3{

margin-bottom:0;

}
/*=================================
JOB CARDS
==================================*/

.featured{

background:#fff;

}

.job-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(330px,1fr));

gap:30px;

margin-top:45px;

}

.job-card{

background:#fff;

padding:30px;

border-radius:14px;

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

transition:.35s;

border-top:4px solid #2563eb;

}

.job-card:hover{

transform:translateY(-8px);

}

.job-card h3{

margin-bottom:18px;

}

.job-card p{

display:flex;

align-items:center;

gap:10px;

margin-bottom:14px;

font-size:15px;

}

.job-card a{

display:inline-block;

margin-top:15px;

background:#2563eb;

color:#fff;

padding:12px 22px;

border-radius:8px;

font-weight:600;

}

.job-card a:hover{

background:#1d4ed8;

}
/*=================================
PRIORITY SECTION
==================================*/

.priority{

padding:90px 0;

background:linear-gradient(135deg,#2563eb,#1d4ed8);

color:#fff;

text-align:center;

}

.priority h2{

color:#fff;

font-size:40px;

margin-bottom:20px;

}

.priority p{

color:#fff;

max-width:760px;

margin:auto;

font-size:18px;

margin-bottom:40px;

}

.priority .btn{

background:#fff;

color:#2563eb;

}

.priority .btn:hover{

background:#f3f4f6;

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

.cta{

padding:90px 0;

text-align:center;

background:#f8fafc;

}

.cta h2{

margin-bottom:20px;

}

.cta p{

max-width:760px;

margin:0 auto 40px;

font-size:18px;

}

.cta .btn{

padding:18px 40px;

}
.newsletter{

background:#fff;

text-align:center;

}

.newsletter form{

max-width:650px;

margin:35px auto 0;

display:flex;

gap:15px;

}

.newsletter input{

flex:1;

}

.newsletter button{

padding:15px 35px;

}
/*=================================
HOME RESPONSIVE
==================================*/

@media(max-width:991px){

.hero-content{

flex-direction:column;

text-align:center;

}

.hero-text p{

margin:auto auto 30px;

}

.stats .container{

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

}

.search-box{

flex-direction:column;

}

.search-box button{

width:100%;

}

}

@media(max-width:768px){

.hero{

padding:70px 0;

}

.hero-text h1{

font-size:38px;

}

.hero-text p{

font-size:16px;

}

.stats .container{

grid-template-columns:1fr;

}

.category-grid{

grid-template-columns:1fr;

}

.job-grid{

grid-template-columns:1fr;

}

.newsletter form{

flex-direction:column;

}

.newsletter button{

width:100%;

}

.cta{

padding:70px 0;

}
/*==================================
APPLY HERO
===================================*/

.apply-hero{

background:linear-gradient(rgba(15,23,42,.75),rgba(15,23,42,.75)),
url("../images/apply.jpg") center center/cover no-repeat;

padding:110px 0;

text-align:center;

color:#fff;

}

.apply-hero h1{

font-size:48px;

color:#fff;

margin-bottom:20px;

}

.apply-hero p{

max-width:760px;

margin:auto;

font-size:18px;

color:#f1f5f9;

line-height:1.8;

}

.hero-buttons{

margin-top:40px;

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}
/*==================================
WHY APPLY
===================================*/

.apply-benefits{

background:#fff;

}

.benefit-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

margin-top:50px;

}

.benefit-card{

background:#fff;

padding:35px;

border-radius:14px;

box-shadow:0 10px 30px rgba(0,0,0,.06);

transition:.3s;

text-align:center;

}

.benefit-card:hover{

transform:translateY(-6px);

}

.benefit-card .icon{

width:75px;

height:75px;

margin:auto auto 20px;

border-radius:50%;

background:#eff6ff;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

color:#2563eb;

}

.benefit-card h3{

margin-bottom:15px;

}
/*==================================
APPLICATION FORM
===================================*/

.apply-page{

background:#f8fafc;

}

.apply-box{

background:#fff;

padding:55px;

border-radius:16px;

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

max-width:950px;

margin:auto;

}

.apply-box h2{

text-align:center;

margin-bottom:15px;

}

.apply-box .intro{

text-align:center;

max-width:700px;

margin:0 auto 45px;

}
.form-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

margin-bottom:25px;

}

.form-group{

display:flex;

flex-direction:column;

}

.form-group label{

margin-bottom:8px;

font-weight:600;

color:#374151;

}

.form-group input,

.form-group select,

.form-group textarea{

padding:16px;

border-radius:10px;

border:1px solid #dbe3ec;

background:#fff;

font-size:15px;

transition:.3s;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

border-color:#2563eb;

box-shadow:0 0 0 4px rgba(37,99,235,.12);

}
.form-group input[type=file]{

padding:14px;

background:#f8fafc;

border:2px dashed #cbd5e1;

cursor:pointer;

}

.form-group input[type=file]:hover{

border-color:#2563eb;

}
.terms{

margin:30px 0;

}

.terms label{

display:flex;

align-items:flex-start;

gap:12px;

font-size:15px;

line-height:1.6;

}

.terms input{

width:auto;

margin-top:4px;

}
.apply-btn{

display:block;

width:100%;

padding:18px;

border:none;

background:#2563eb;

color:#fff;

font-size:18px;

font-weight:600;

border-radius:10px;

cursor:pointer;

transition:.3s;

}

.apply-btn:hover{

background:#1d4ed8;

transform:translateY(-2px);

}
.success-box{

background:#ecfdf5;

border-left:5px solid #16a34a;

padding:30px;

border-radius:10px;

margin-top:40px;

display:none;

}

.success-box h3{

color:#15803d;

margin-bottom:15px;

}

.success-box p{

margin-bottom:10px;

}
.application-note{

margin-top:45px;

background:#f8fafc;

padding:35px;

border-radius:14px;

}

.application-note h3{

margin-bottom:20px;

}

.application-note ul{

padding-left:20px;

list-style:disc;

}

.application-note li{

margin-bottom:12px;

}
@media(max-width:768px){

.apply-hero{

padding:80px 0;

}

.apply-hero h1{

font-size:34px;

}

.apply-box{

padding:30px;

}

.form-row{

grid-template-columns:1fr;

gap:20px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons a{

width:100%;

text-align:center;

}

.apply-btn{

font-size:16px;

}
/*==================================
JOBS HERO
===================================*/

.jobs-hero{

padding:90px 0;

background:linear-gradient(rgba(15,23,42,.78),rgba(15,23,42,.78)),
url("../images/jobs-banner.jpg") center/cover;

text-align:center;

color:#fff;

}

.jobs-hero h1{

font-size:48px;

color:#fff;

margin-bottom:20px;

}

.jobs-hero p{

max-width:700px;

margin:auto;

font-size:18px;

color:#f1f5f9;

line-height:1.8;

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

.job-search{

background:#fff;

padding:25px;

border-radius:15px;

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

margin-top:-45px;

position:relative;

z-index:20;

}

.job-search form{

display:grid;

grid-template-columns:2fr 1fr auto;

gap:20px;

align-items:center;

}

.job-search button{

padding:16px 30px;

}
/*==================================
JOB GRID
===================================*/

.jobs{

padding:80px 0;

background:#f8fafc;

}

.jobs-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(330px,1fr));

gap:30px;

}
/*==================================
JOB CARD
===================================*/

.job-item{

background:#fff;

border-radius:15px;

padding:30px;

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

transition:.35s;

border-top:4px solid #2563eb;

}

.job-item:hover{

transform:translateY(-6px);

}

.job-item h3{

margin-bottom:15px;

font-size:24px;

}

.job-meta{

display:flex;

flex-wrap:wrap;

gap:15px;

margin-bottom:20px;

}

.job-meta span{

background:#eff6ff;

padding:8px 14px;

border-radius:30px;

font-size:14px;

color:#2563eb;

font-weight:500;

}

.job-description{

margin-bottom:25px;

line-height:1.8;

color:#6b7280;

}
.job-item .btn{

display:inline-block;

padding:12px 24px;

border-radius:8px;

background:#2563eb;

color:#fff;

font-weight:600;

}

.job-item .btn:hover{

background:#1d4ed8;

}
.job-category{

display:inline-block;

background:#2563eb;

color:#fff;

padding:8px 16px;

border-radius:30px;

font-size:13px;

margin-bottom:20px;

}
.no-jobs{

background:#fff;

padding:60px;

border-radius:15px;

text-align:center;

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

}

.no-jobs img{

width:180px;

margin:auto;

margin-bottom:25px;

}

.no-jobs h2{

margin-bottom:15px;

}
.why-jobs{

padding:90px 0;

background:#fff;

}

.why-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

margin-top:50px;

}

.why-card{

padding:35px;

background:#fff;

border-radius:15px;

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

text-align:center;

transition:.3s;

}

.why-card:hover{

transform:translateY(-5px);

}

.why-card i{

font-size:42px;

color:#2563eb;

margin-bottom:20px;

}
.pagination{

display:flex;

justify-content:center;

gap:12px;

margin-top:60px;

}

.pagination a{

width:45px;

height:45px;

display:flex;

justify-content:center;

align-items:center;

background:#fff;

border-radius:10px;

box-shadow:0 6px 15px rgba(0,0,0,.06);

font-weight:600;

}

.pagination a.active{

background:#2563eb;

color:#fff;

}
@media(max-width:991px){

.job-search form{

grid-template-columns:1fr;

}

.job-search button{

width:100%;

}

}

@media(max-width:768px){

.jobs-hero{

padding:70px 0;

}

.jobs-hero h1{

font-size:36px;

}

.jobs-grid{

grid-template-columns:1fr;

}

.job-item{

padding:25px;

}

.job-meta{

flex-direction:column;

align-items:flex-start;

}

.pagination{

flex-wrap:wrap;

}
/*==================================
SERVICES HERO
===================================*/

.services-hero{

padding:100px 0;

background:
linear-gradient(rgba(15,23,42,.82),rgba(15,23,42,.82)),
url("../images/services.jpg") center center/cover;

text-align:center;

color:#fff;

}

.services-hero h1{

font-size:48px;

color:#fff;

margin-bottom:20px;

}

.services-hero p{

max-width:760px;

margin:auto;

font-size:18px;

line-height:1.8;

color:#f1f5f9;

}
/*==================================
SERVICES
===================================*/

.services{

background:#f8fafc;

}

.services-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(330px,1fr));

gap:35px;

margin-top:60px;

}
.service-card{

background:#fff;

padding:40px;

border-radius:16px;

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

transition:.35s;

position:relative;

overflow:hidden;

}

.service-card:hover{

transform:translateY(-8px);

}

.service-card i{

font-size:48px;

color:#2563eb;

margin-bottom:25px;

}

.service-card h3{

margin-bottom:18px;

}

.service-card p{

margin-bottom:25px;

line-height:1.8;

}
.service-features{

margin-bottom:35px;

}

.service-features li{

display:flex;

align-items:center;

gap:12px;

margin-bottom:15px;

font-size:15px;

}

.service-features i{

color:#16a34a;

font-size:18px;

}
.service-price{

font-size:42px;

font-weight:700;

color:#2563eb;

margin-bottom:10px;

}

.service-price span{

font-size:18px;

font-weight:500;

color:#6b7280;

}
.service-card .btn{

display:block;

width:100%;

text-align:center;

margin-top:15px;

padding:16px;

font-size:17px;

}
.popular{

position:absolute;

top:20px;

right:-35px;

background:#2563eb;

color:#fff;

padding:8px 45px;

font-size:13px;

transform:rotate(45deg);

font-weight:600;

}
.priority-benefits{

padding:90px 0;

background:#fff;

}

.priority-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

margin-top:50px;

}

.priority-card{

background:#fff;

padding:35px;

border-radius:15px;

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

text-align:center;

transition:.3s;

}

.priority-card:hover{

transform:translateY(-6px);

}

.priority-card i{

font-size:45px;

color:#2563eb;

margin-bottom:20px;

}
.faq{

background:#f8fafc;

padding:90px 0;

}

.faq-item{

background:#fff;

padding:30px;

margin-bottom:20px;

border-radius:12px;

box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.faq-item h4{

margin-bottom:12px;

color:#111827;

}
.service-cta{

padding:100px 0;

text-align:center;

background:linear-gradient(135deg,#2563eb,#1d4ed8);

color:#fff;

}

.service-cta h2{

color:#fff;

margin-bottom:20px;

}

.service-cta p{

max-width:700px;

margin:0 auto 40px;

color:#fff;

}

.service-cta .btn{

background:#fff;

color:#2563eb;

}

.service-cta .btn:hover{

background:#f8fafc;

}
@media(max-width:768px){

.services-hero{

padding:70px 0;

}

.services-hero h1{

font-size:36px;

}

.services-grid{

grid-template-columns:1fr;

}

.service-card{

padding:30px;

}

.priority-grid{

grid-template-columns:1fr;

}
/*==================================
ABOUT HERO
===================================*/

.about-hero{

padding:110px 0;

background:
linear-gradient(rgba(15,23,42,.80),rgba(15,23,42,.80)),
url("../images/about-team.jpg") center center/cover;

text-align:center;

color:#fff;

}

.about-hero h1{

font-size:50px;

margin-bottom:20px;

color:#fff;

}

.about-hero p{

max-width:760px;

margin:auto;

font-size:18px;

line-height:1.9;

color:#f1f5f9;

}
/*==================================
OUR STORY
===================================*/

.about-story{

padding:100px 0;

background:#fff;

}

.story-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.story-image img{

border-radius:16px;

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

}

.story-content h2{

margin-bottom:20px;

}

.story-content p{

margin-bottom:18px;

line-height:1.9;

}
/*==================================
MISSION
===================================*/

.mission{

background:#f8fafc;

padding:90px 0;

}

.mission-grid{

display:grid;

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

gap:35px;

}

.mission-card{

background:#fff;

padding:40px;

border-radius:15px;

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

transition:.3s;

}

.mission-card:hover{

transform:translateY(-6px);

}

.mission-card i{

font-size:46px;

color:#2563eb;

margin-bottom:20px;

}
/*==================================
CORE VALUES
===================================*/

.values{

padding:100px 0;

background:#fff;

}

.value-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

margin-top:50px;

}

.value-card{

background:#fff;

padding:35px;

text-align:center;

border-radius:14px;

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

transition:.3s;

}

.value-card:hover{

transform:translateY(-6px);

}

.value-card i{

font-size:42px;

color:#2563eb;

margin-bottom:20px;

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

.why-us{

background:#f8fafc;

padding:100px 0;

}

.why-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

margin-top:50px;

}

.why-card{

background:#fff;

padding:35px;

border-radius:15px;

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

text-align:center;

}

.why-card i{

font-size:42px;

color:#2563eb;

margin-bottom:18px;

}
/*==================================
STATISTICS
===================================*/

.company-stats{

padding:90px 0;

background:#2563eb;

}

.company-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

text-align:center;

}

.company-grid h2{

font-size:46px;

color:#fff;

margin-bottom:10px;

}

.company-grid p{

color:#dbeafe;

margin:0;

}
/*==================================
ABOUT CTA
===================================*/

.about-cta{

padding:100px 0;

text-align:center;

background:#fff;

}

.about-cta p{

max-width:720px;

margin:0 auto 40px;

}
@media(max-width:991px){

.story-grid{

grid-template-columns:1fr;

}

.mission-grid{

grid-template-columns:1fr;

}

.company-grid{

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

}

}

@media(max-width:768px){

.about-hero{

padding:70px 0;

}

.about-hero h1{

font-size:36px;

}

.company-grid{

grid-template-columns:1fr;

}

.value-grid{

grid-template-columns:1fr;

}

.why-grid{

grid-template-columns:1fr;

}

}
/*==================================
CONTACT HERO
===================================*/

.contact-hero{

padding:110px 0;

background:
linear-gradient(rgba(15,23,42,.82),rgba(15,23,42,.82)),
url("../images/contact.jpg") center center/cover no-repeat;

text-align:center;

color:#fff;

}

.contact-hero h1{

font-size:50px;

color:#fff;

margin-bottom:20px;

}

.contact-hero p{

max-width:720px;

margin:auto;

font-size:18px;

line-height:1.8;

color:#e2e8f0;

}
/*==================================
CONTACT CARDS
===================================*/

.contact-info{

background:#f8fafc;

padding:90px 0;

}

.contact-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

}

.contact-card{

background:#fff;

padding:35px;

border-radius:15px;

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

text-align:center;

transition:.3s;

}

.contact-card:hover{

transform:translateY(-6px);

}

.contact-card i{

font-size:42px;

color:#2563eb;

margin-bottom:20px;

}

.contact-card h3{

margin-bottom:15px;

}

.contact-card p{

margin:0;

line-height:1.7;

}
/*==================================
CONTACT FORM
===================================*/

.contact-section{

background:#fff;

padding:100px 0;

}

.contact-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:flex-start;

}

.contact-form{

background:#fff;

padding:40px;

border-radius:15px;

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

}

.contact-form h2{

margin-bottom:25px;

}
.contact-form .form-group{

margin-bottom:20px;

}

.contact-form input,

.contact-form textarea{

width:100%;

padding:16px;

border:1px solid #dbe3ec;

border-radius:10px;

font-size:15px;

transition:.3s;

}

.contact-form input:focus,

.contact-form textarea:focus{

border-color:#2563eb;

box-shadow:0 0 0 4px rgba(37,99,235,.12);

outline:none;

}

.contact-form textarea{

resize:vertical;

min-height:160px;

}
.contact-form button{

width:100%;

padding:16px;

font-size:17px;

border-radius:10px;

background:#2563eb;

color:#fff;

border:none;

transition:.3s;

}

.contact-form button:hover{

background:#1d4ed8;

}
/*==================================
BUSINESS HOURS
===================================*/

.office-hours{

background:#f8fafc;

padding:35px;

border-radius:15px;

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

}

.office-hours h3{

margin-bottom:20px;

}

.office-hours ul{

list-style:none;

padding:0;

}

.office-hours li{

display:flex;

justify-content:space-between;

padding:12px 0;

border-bottom:1px solid #e5e7eb;

}

.office-hours li:last-child{

border-bottom:none;

}
/*==================================
CONTACT FAQ
===================================*/

.contact-faq{

padding:90px 0;

background:#f8fafc;

}

.contact-faq .faq-item{

background:#fff;

padding:30px;

margin-bottom:20px;

border-radius:15px;

box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.contact-faq h4{

margin-bottom:15px;

}
/*==================================
MAP
===================================*/

.map{

padding:0;

}

.map iframe{

width:100%;

height:450px;

border:none;

}
.success-alert{

background:#dcfce7;

color:#166534;

padding:18px;

border-left:5px solid #16a34a;

border-radius:8px;

margin-bottom:25px;

}

.error-alert{

background:#fee2e2;

color:#991b1b;

padding:18px;

border-left:5px solid #dc2626;

border-radius:8px;

margin-bottom:25px;

}
@media(max-width:991px){

.contact-wrapper{

grid-template-columns:1fr;

gap:40px;

}

}

@media(max-width:768px){

.contact-hero{

padding:70px 0;

}

.contact-hero h1{

font-size:36px;

}

.contact-grid{

grid-template-columns:1fr;

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

.footer{

background:#0f172a;

color:#cbd5e1;

padding:80px 0 0;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1.5fr;

gap:45px;

}

.footer h3{

color:#fff;

margin-bottom:25px;

font-size:22px;

}

.footer p{

line-height:1.8;

color:#cbd5e1;

}

.footer ul{

list-style:none;

padding:0;

margin:0;

}

.footer ul li{

margin-bottom:14px;

}

.footer ul li a{

color:#cbd5e1;

transition:.3s;

}

.footer ul li a:hover{

color:#60a5fa;

padding-left:6px;

}
.footer-logo{

font-size:30px;

font-weight:700;

color:#fff;

margin-bottom:20px;

}

.footer-logo span{

color:#60a5fa;

}
.footer-social{

margin-top:25px;

display:flex;

gap:15px;

}

.footer-social a{

width:42px;

height:42px;

display:flex;

justify-content:center;

align-items:center;

background:#1e293b;

border-radius:50%;

color:#fff;

transition:.3s;

}

.footer-social a:hover{

background:#2563eb;

transform:translateY(-3px);

}
.footer-contact li{

display:flex;

align-items:flex-start;

gap:12px;

margin-bottom:18px;

}

.footer-contact i{

color:#60a5fa;

margin-top:4px;

}
.newsletter-box{

margin-top:20px;

}

.newsletter-box input{

width:100%;

padding:15px;

border:none;

border-radius:8px;

margin-bottom:15px;

}

.newsletter-box button{

width:100%;

padding:15px;

background:#2563eb;

border:none;

border-radius:8px;

color:#fff;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.newsletter-box button:hover{

background:#1d4ed8;

}
.footer-bottom{

margin-top:60px;

padding:25px 0;

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

}

.footer-bottom-content{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:15px;

}

.footer-bottom p{

margin:0;

font-size:14px;

}

.footer-bottom a{

color:#60a5fa;

}
.footer-badges{

display:flex;

gap:20px;

margin-top:25px;

flex-wrap:wrap;

}

.badge{

background:#1e293b;

padding:12px 18px;

border-radius:30px;

font-size:14px;

color:#fff;

display:flex;

align-items:center;

gap:10px;

}

.badge i{

color:#60a5fa;

}
@media(max-width:991px){

.footer-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.footer{

text-align:center;

}

.footer-grid{

grid-template-columns:1fr;

}

.footer-social{

justify-content:center;

}

.footer-contact li{

justify-content:center;

}

.footer-bottom-content{

flex-direction:column;

text-align:center;

}

.footer-badges{

justify-content:center;

}
/*==================================
SMOOTH SCROLL
===================================*/

html{

scroll-behavior:smooth;

}
/*==================================
SCROLLBAR
===================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f1f5f9;

}

::-webkit-scrollbar-thumb{

background:#2563eb;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#1d4ed8;

}
/*==================================
IMAGES
===================================*/

img{

max-width:100%;

height:auto;

display:block;

transition:.35s;

}

img:hover{

transform:scale(1.02);

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

.job-card,
.category-card,
.service-card,
.benefit-card,
.value-card,
.why-card,
.contact-card{

transition:.35s ease;

}

.job-card:hover,
.category-card:hover,
.service-card:hover,
.benefit-card:hover,
.value-card:hover,
.why-card:hover,
.contact-card:hover{

transform:translateY(-8px);

box-shadow:0 18px 40px rgba(0,0,0,.10);

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

.btn,
button{

transition:.35s;

}

.btn:hover,
button:hover{

transform:translateY(-3px);

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

}
/*==================================
FORM
===================================*/

input,
textarea,
select{

transition:.3s;

}

input:hover,
textarea:hover,
select:hover{

border-color:#93c5fd;

}

input:focus,
textarea:focus,
select:focus{

transform:translateY(-1px);

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

section{

padding:90px 0;

}

@media(max-width:768px){

section{

padding:70px 0;

}
table{

width:100%;

overflow-x:auto;

display:block;

}
@media(max-width:991px){

.container{

width:94%;

}

h1{

font-size:40px;

}

h2{

font-size:32px;

}

.hero-content,
.story-grid,
.contact-wrapper{

grid-template-columns:1fr;

display:grid;

gap:40px;

}

.hero-image{

order:-1;

text-align:center;

}

.hero-image img{

max-width:420px;

margin:auto;

}
@media(max-width:768px){

body{

font-size:15px;

}

h1{

font-size:34px;

}

h2{

font-size:28px;

}

h3{

font-size:22px;

}

.btn{

width:100%;

text-align:center;

}

.hero-buttons{

display:flex;

flex-direction:column;

gap:15px;

}
@media(max-width:576px){

.container{

width:95%;

}

.hero{

padding:60px 0;

}

.hero-text h1{

font-size:30px;

}

.hero-text p{

font-size:15px;

}

.stat-card{

padding:25px;

}

.job-card,
.service-card,
.apply-box,
.contact-form{

padding:25px;

}
@media(max-width:380px){

h1{

font-size:26px;

}

.logo{

font-size:22px;

}

.btn{

padding:14px;

font-size:15px;

}
.fade-up{

opacity:0;

transform:translateY(30px);

animation:fadeUp .8s forwards;

}
/*==================================
BACK TO TOP
===================================*/

.back-top{

position:fixed;

right:25px;

bottom:25px;

width:48px;

height:48px;

background:#2563eb;

color:#fff;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

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

cursor:pointer;

transition:.3s;

z-index:999;

}

.back-top:hover{

background:#1d4ed8;

transform:translateY(-3px);

}
.menu-toggle{

display:none;

font-size:28px;

cursor:pointer;

color:#1e3a8a;

}

@media(max-width:991px){

.menu-toggle{

display:block;

}

.nav-links{

position:absolute;

top:80px;

left:0;

width:100%;

background:#fff;

display:none;

flex-direction:column;

padding:20px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

z-index:999;

}

.nav-links.active{

display:flex;

}

.nav-links li{

margin:12px 0;

}

}
}
}
}
}
}
}

}
}
}

}
}
}