/*=========================
VILYER STAR RECRUITMENT
==========================*/

:root{

--gold:#D4AF37;
--gold2:#F7D774;
--dark:#121212;
--gray:#6B7280;
--bg:#FAFAFA;
--white:#FFFFFF;

}

*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:'Be Vietnam Pro',sans-serif;

}

html{

scroll-behavior:smooth;

}

body{

background:var(--bg);
color:#222;
overflow-x:hidden;

}

.container{

width:90%;
max-width:1280px;
margin:auto;

}

a{

text-decoration:none;

}

img{

max-width:100%;
display:block;

}

section{

padding:100px 0;

}

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

header{

position:fixed;
top:0;
left:0;
width:100%;

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

backdrop-filter:blur(18px);

z-index:999;

transition:.3s;

}

header .container{

display:flex;

justify-content:space-between;

align-items:center;

height:85px;

}

.logo img{

height:60px;

}

nav{

display:flex;
gap:40px;

}

nav a{

color:white;

font-weight:600;

transition:.3s;

position:relative;

}

nav a::after{

content:"";

position:absolute;

left:0;
bottom:-8px;

width:0;

height:2px;

background:var(--gold);

transition:.3s;

}

nav a:hover{

color:var(--gold);

}

nav a:hover::after{

width:100%;

}

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

.btn,
.gold-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

background:linear-gradient(
135deg,
#FFD95A,
#D4AF37
);

color:#111;

border-radius:999px;

font-weight:700;

transition:.35s;

box-shadow:

0 15px 40px rgba(212,175,55,.28);

}

.btn:hover,
.gold-btn:hover{

transform:translateY(-5px);

box-shadow:

0 25px 60px rgba(212,175,55,.45);

}

.border-btn{

padding:15px 34px;

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

border-radius:999px;

color:var(--gold);

font-weight:700;

transition:.3s;

margin-left:15px;

}

.border-btn:hover{

background:var(--gold);

color:#111;

}

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

.hero{

min-height:100vh;

display:flex;

align-items:center;

background:

linear-gradient(

135deg,

#FFFDF8,

#FFF3C8

);

position:relative;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

width:600px;

height:600px;

border-radius:50%;

background:

rgba(212,175,55,.18);

right:-150px;

top:-120px;

filter:blur(60px);

}

.hero-content{

display:flex;

justify-content:space-between;

align-items:center;

gap:60px;

}

.hero-left{

flex:1;

}

.badge{

display:inline-block;

padding:10px 22px;

background:#fff;

border-radius:999px;

color:var(--gold);

font-weight:700;

margin-bottom:30px;

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

}

.hero h1{

font-size:70px;

line-height:1.1;

margin-bottom:25px;

}

.hero h1 span{

color:var(--gold);

}

.hero p{

font-size:19px;

color:var(--gray);

max-width:620px;

line-height:1.8;

margin-bottom:40px;

}

.hero-right{

flex:1;

display:flex;

justify-content:center;

}

.hero-image{

width:500px;

height:650px;

border-radius:35px;

background:white;

box-shadow:

0 30px 70px rgba(0,0,0,.08);

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

}

.hero-image img{

width:100%;

height:100%;

object-fit:cover;

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

.section-title{

text-align:center;
margin-bottom:70px;

}

.section-title h2{

font-size:52px;
font-weight:800;
color:#111;
margin-bottom:15px;

}

.section-title p{

color:#777;
font-size:18px;

}

/*=========================
ABOUT
==========================*/

.about-box{

background:#fff;

border-radius:30px;

padding:60px;

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

text-align:center;

position:relative;

overflow:hidden;

}

.about-box::before{

content:"";

position:absolute;

top:-120px;
right:-120px;

width:250px;
height:250px;

border-radius:50%;

background:rgba(212,175,55,.12);

}

.about-box h3{

font-size:38px;

margin-bottom:25px;

}

.about-box p{

font-size:18px;

color:#666;

line-height:1.9;

}

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

.stats{

margin-top:-80px;

position:relative;

z-index:20;

}

.stats .container{

display:grid;

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

gap:30px;

}

.stat{

background:white;

padding:40px;

border-radius:25px;

text-align:center;

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

transition:.35s;

}

.stat:hover{

transform:translateY(-10px);

}

.stat h2{

font-size:55px;

color:var(--gold);

margin-bottom:10px;

}

.stat p{

font-weight:600;

color:#777;

}

/*=========================
JOB
==========================*/

.job-grid{

display:grid;

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

gap:35px;

}

.job-card{

background:white;

border-radius:28px;

overflow:hidden;

transition:.35s;

box-shadow:

0 20px 60px rgba(0,0,0,.08);

}

.job-card:hover{

transform:translateY(-12px);

box-shadow:

0 30px 80px rgba(212,175,55,.20);

}

.job-image{

height:260px;

background:

linear-gradient(
135deg,
#FFF6D8,
#FFFFFF
);

display:flex;

justify-content:center;

align-items:center;

}

.job-image img{

width:90%;

height:90%;

object-fit:contain;

}

.job-content{

padding:35px;

}

.job-tag{

display:inline-block;

padding:8px 18px;

background:#FFF4CF;

color:#B8860B;

font-size:13px;

border-radius:50px;

margin-bottom:20px;

font-weight:700;

}

.job-content h3{

font-size:30px;

margin-bottom:15px;

}

.job-content p{

color:#666;

margin-bottom:20px;

line-height:1.7;

}

.job-content ul{

margin-left:18px;

margin-bottom:30px;

}

.job-content li{

margin-bottom:10px;

color:#555;

}

.apply-job{

display:block;

text-align:center;

padding:15px;

border-radius:50px;

background:linear-gradient(
135deg,
#FFD95A,
#D4AF37
);

color:#111;

font-weight:700;

transition:.35s;

}

.apply-job:hover{

background:#111;

color:#D4AF37;

}
/*=========================
BENEFITS
==========================*/

.benefit-grid{

display:grid;

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

gap:30px;

}

.benefit-card{

background:#fff;

padding:40px;

border-radius:30px;

transition:.35s;

border:1px solid #EFEFEF;

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

position:relative;

overflow:hidden;

}

.benefit-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:5px;

background:linear-gradient(
90deg,
#FFD95A,
#D4AF37
);

}

.benefit-card:hover{

transform:translateY(-10px);

border-color:#D4AF37;

}

.benefit-card h3{

font-size:26px;

margin-bottom:15px;

}

.benefit-card p{

color:#666;

line-height:1.8;

}

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

.cta{

padding:120px 0;

background:

linear-gradient(
135deg,
#1B1B1B,
#2A2A2A
);

text-align:center;

color:white;

}

.cta h2{

font-size:58px;

margin-bottom:25px;

}

.cta p{

font-size:19px;

opacity:.85;

margin-bottom:45px;

}

.cta .gold-btn{

font-size:18px;

}

/*=========================
CONTACT
==========================*/

.contact-grid{

display:grid;

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

gap:30px;

}

.contact-card{

background:#fff;

padding:40px;

border-radius:25px;

text-align:center;

box-shadow:
0 20px 50px rgba(0,0,0,.07);

transition:.3s;

}

.contact-card:hover{

transform:translateY(-8px);

}

.contact-card .icon{

font-size:48px;

margin-bottom:20px;

}

.contact-card h3{

margin-bottom:10px;

}

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

footer{

background:#111;

padding:80px 0 30px;

color:white;

}

.footer-content{

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:50px;

margin-bottom:50px;

}

.footer-logo{

height:70px;

margin-bottom:20px;

}

.footer-left h2{

color:#D4AF37;

margin-bottom:10px;

font-size:34px;

}

.footer-left p{

color:#AAA;

}

.footer-right{

display:flex;

flex-direction:column;

gap:15px;

}

.footer-right a{

color:#DDD;

transition:.3s;

}

.footer-right a:hover{

color:#D4AF37;

padding-left:8px;

}

.copyright{

text-align:center;

padding-top:30px;

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

color:#777;

}

/*=========================
TOP BUTTON
==========================*/

#topBtn{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#D4AF37;

color:#111;

font-size:22px;

cursor:pointer;

display:none;

box-shadow:
0 10px 30px rgba(212,175,55,.35);

transition:.3s;

z-index:999;

}

#topBtn:hover{

transform:translateY(-6px);

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:#D4AF37;

border-radius:50px;

}

::-webkit-scrollbar-track{

background:#EFEFEF;

}

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

@media(max-width:992px){

nav{

display:none;

}

.hero-content{

flex-direction:column;

text-align:center;

}

.hero h1{

font-size:48px;

}

.stats .container{

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

}

.contact-grid{

grid-template-columns:1fr;

}

.footer-content{

flex-direction:column;

}

}

@media(max-width:768px){

.job-grid{

grid-template-columns:1fr;

}

.benefit-grid{

grid-template-columns:1fr;

}

.stats .container{

grid-template-columns:1fr;

}

.hero-image{

width:100%;
height:450px;

}

.hero h1{

font-size:40px;

}

.section-title h2{

font-size:38px;

}

.cta h2{

font-size:40px;

}

}
.hidden{

opacity:0;

transform:translateY(70px);

transition:.8s;

}

.show{

opacity:1;

transform:translateY(0);

}