/*==================================================
  RSA DRIVERS
  Premium Recruitment Website
  STYLE.CSS - PART 1
===================================================*/

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

/* ===============================
   VARIABLES
================================ */

:root{

    --primary:#002B5B;
    --primary-light:#0B5ED7;

    --gold:#F4B400;

    --silver:#dfe4ea;

    --dark:#071A2E;

    --white:#ffffff;

    --text:#5b6570;

    --glass:rgba(255,255,255,.12);

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

    --radius:18px;

}

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

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:#f5f7fb;

color:#222;

overflow-x:hidden;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#ececec;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(var(--primary),var(--gold));

border-radius:50px;

}

/* ===============================
GENERAL
================================ */

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

section{

padding:100px 8%;

}

.container{

max-width:1300px;

margin:auto;

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title h2{

font-size:42px;

font-weight:700;

color:var(--primary);

margin-bottom:15px;

}

.section-title p{

max-width:720px;

margin:auto;

line-height:1.8;

color:var(--text);

font-size:18px;

}

/* ===============================
PRELOADER
================================ */

#loader{

position:fixed;

top:0;
left:0;

width:100%;
height:100vh;

background:linear-gradient(135deg,#001B3A,#003366);

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

}

.loader-logo{

text-align:center;

color:white;

}

.loader-logo h1{

font-size:52px;

font-weight:800;

letter-spacing:3px;

margin-bottom:30px;

}

.loader-bar{

width:320px;

height:8px;

background:rgba(255,255,255,.15);

border-radius:50px;

overflow:hidden;

}

.loader-progress{

height:100%;

width:0;

background:linear-gradient(90deg,var(--gold),white);

animation:loading 3s forwards;

}

@keyframes loading{

100%{

width:100%;

}

}

/* ===============================
PARTICLES BACKGROUND
================================ */

#particles{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;

background-image:

radial-gradient(circle,rgba(255,255,255,.15) 2px,transparent 2px),

radial-gradient(circle,rgba(255,255,255,.08) 3px,transparent 3px),

radial-gradient(circle,rgba(255,255,255,.10) 2px,transparent 2px);

background-size:

180px 180px,

260px 260px,

220px 220px;

animation:particleMove 25s linear infinite;

z-index:-1;

}

@keyframes particleMove{

from{

transform:translateY(0);

}

to{

transform:translateY(-250px);

}

}

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

nav{

position:fixed;

top:0;

left:0;

width:100%;

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 8%;

background:rgba(0,25,70,.45);

backdrop-filter:blur(14px);

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

transition:.4s;

z-index:999;

}

.logo{

display:flex;

align-items:center;

gap:12px;

font-size:30px;

font-weight:800;

color:white;

}

.logo i{

color:var(--gold);

}

nav ul{

display:flex;

gap:35px;

}

nav ul a{

font-weight:500;

color:white;

transition:.35s;

position:relative;

}

nav ul a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:var(--gold);

transition:.3s;

}

nav ul a:hover{

color:var(--gold);

}

nav ul a:hover::after{

width:100%;

}

.nav-btn{

padding:14px 30px;

border-radius:50px;

background:linear-gradient(135deg,var(--gold),#FFD966);

font-weight:700;

color:#002147;

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

transition:.4s;

}

.nav-btn:hover{

transform:translateY(-4px);

box-shadow:0 25px 50px rgba(244,180,0,.5);

}

.menu{

display:none;

font-size:30px;

color:white;

cursor:pointer;

}

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

.hero{

position:relative;

height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

overflow:hidden;

}

.hero video{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

object-fit:cover;

z-index:-3;

}

.overlay{

position:absolute;

width:100%;

height:100%;

background:linear-gradient(rgba(0,20,60,.72),rgba(0,20,60,.86));

z-index:-2;

}

.hero-content{

max-width:900px;

padding:20px;

color:white;

}

.badge{

display:inline-block;

padding:12px 24px;

border-radius:50px;

background:rgba(255,255,255,.15);

backdrop-filter:blur(12px);

border:1px solid rgba(255,255,255,.15);

margin-bottom:25px;

font-size:15px;

}

.hero h1{

font-size:72px;

font-weight:800;

line-height:1.1;

margin-bottom:25px;

}

.typing{

color:var(--gold);

}

.hero p{

font-size:22px;

line-height:1.8;

margin-bottom:40px;

opacity:.95;

}

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

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.btn-primary{

display:inline-block;

padding:18px 42px;

border-radius:50px;

background:linear-gradient(135deg,var(--gold),#FFD966);

color:#002147;

font-weight:700;

transition:.35s;

box-shadow:0 20px 40px rgba(244,180,0,.35);

}

.btn-primary:hover{

transform:translateY(-6px);

box-shadow:0 30px 60px rgba(244,180,0,.45);

}

.btn-secondary{

display:inline-block;

padding:18px 42px;

border-radius:50px;

border:2px solid white;

font-weight:600;

color:white;

transition:.35s;

}

.btn-secondary:hover{

background:white;

color:var(--primary);

}

/* ===============================
SCROLL INDICATOR
================================ */

.scroll-down{

position:absolute;

bottom:35px;

left:50%;

transform:translateX(-50%);

font-size:32px;

color:white;

animation:bounce 2s infinite;

}

@keyframes bounce{

0%,20%,50%,80%,100%{

transform:translate(-50%,0);

}

40%{

transform:translate(-50%,-12px);

}

60%{

transform:translate(-50%,-6px);

}

}

/*==================================================
    PART 2
    Statistics • About • Driver Categories
==================================================*/

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

.stats{

display:grid;

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

gap:30px;

padding:80px 8%;

background:linear-gradient(135deg,#001B3A,#003C7A);

color:white;

}

.stat{

background:rgba(255,255,255,.08);

backdrop-filter:blur(12px);

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

border-radius:20px;

padding:40px 20px;

text-align:center;

transition:.4s;

}

.stat:hover{

transform:translateY(-10px);

background:rgba(255,255,255,.15);

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

}

.stat h2{

font-size:55px;

font-weight:800;

color:var(--gold);

margin-bottom:10px;

}

.stat p{

font-size:17px;

opacity:.95;

}

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

.about{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.about-left h2{

font-size:48px;

color:var(--primary);

margin-bottom:25px;

}

.about-left p{

font-size:18px;

line-height:1.9;

color:var(--text);

margin-bottom:35px;

}

.about-left ul{

display:grid;

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

gap:20px;

margin-bottom:40px;

}

.about-left ul li{

font-weight:600;

display:flex;

align-items:center;

gap:10px;

color:#333;

}

.about-left ul li i{

color:var(--gold);

font-size:20px;

}

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

.about-right{

display:grid;

grid-template-columns:1fr;

gap:25px;

}

.glass-card{

padding:35px;

background:rgba(255,255,255,.65);

backdrop-filter:blur(15px);

border-radius:20px;

border:1px solid rgba(255,255,255,.4);

box-shadow:var(--shadow);

transition:.4s;

position:relative;

overflow:hidden;

}

.glass-card::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:linear-gradient(90deg,

transparent,

rgba(255,255,255,.35),

transparent);

transition:.8s;

}

.glass-card:hover::before{

left:100%;

}

.glass-card:hover{

transform:translateY(-10px);

}

.glass-card i{

font-size:48px;

color:var(--gold);

margin-bottom:20px;

}

.glass-card h3{

font-size:28px;

margin-bottom:15px;

color:var(--primary);

}

.glass-card p{

color:var(--text);

line-height:1.8;

}

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

.drivers{

background:#eef4fb;

}

.driver-grid{

display:grid;

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

gap:30px;

}

.driver-card{

background:white;

border-radius:22px;

padding:40px 30px;

text-align:center;

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

transition:.4s;

position:relative;

overflow:hidden;

}

.driver-card::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:100%;

height:5px;

background:linear-gradient(90deg,var(--gold),var(--primary));

transform:scaleX(0);

transition:.4s;

}

.driver-card:hover::after{

transform:scaleX(1);

}

.driver-card:hover{

transform:translateY(-15px);

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

}

.driver-card i{

font-size:55px;

color:var(--gold);

margin-bottom:25px;

transition:.4s;

}

.driver-card:hover i{

transform:scale(1.15) rotate(-5deg);

}

.driver-card h3{

font-size:26px;

margin-bottom:12px;

color:var(--primary);

}

.driver-card p{

color:var(--text);

line-height:1.7;

}

/* ===========================
CARD GLOW
=========================== */

.driver-card:hover{

background:linear-gradient(180deg,

white,

#f8fbff);

}

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

@keyframes floating{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0px);

}

}

.glass-card:nth-child(1){

animation:floating 6s ease-in-out infinite;

}

.glass-card:nth-child(2){

animation:floating 7s ease-in-out infinite;

}

.glass-card:nth-child(3){

animation:floating 8s ease-in-out infinite;

}

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

.section-divider{

width:120px;

height:5px;

background:linear-gradient(90deg,var(--gold),var(--primary));

margin:20px auto 0;

border-radius:20px;

}

/*==================================================
    PART 3
    Pricing • Employers • Testimonials
    FAQ • Contact • Footer
==================================================*/

/* ===============================
PRICING
=============================== */

.pricing{

background:linear-gradient(180deg,#ffffff,#eef4fb);

}

.pricing-grid{

display:grid;

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

gap:40px;

max-width:1100px;

margin:auto;

}

.pricing-card{

position:relative;

background:white;

border-radius:25px;

padding:45px;

text-align:center;

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

transition:.4s;

overflow:hidden;

}

.pricing-card:hover{

transform:translateY(-12px);

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

}

.package{

display:inline-block;

padding:8px 18px;

background:var(--primary);

color:white;

border-radius:30px;

font-size:13px;

font-weight:700;

letter-spacing:1px;

margin-bottom:20px;

}

.popular{

position:absolute;

top:20px;

right:-45px;

background:var(--gold);

color:#002147;

padding:10px 55px;

font-size:12px;

font-weight:700;

transform:rotate(45deg);

}

.featured{

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

}

.pricing-card h3{

font-size:30px;

color:var(--primary);

margin-bottom:10px;

}

.pricing-card h1{

font-size:64px;

color:var(--gold);

margin:20px 0;

}

.pricing-card small{

display:block;

color:var(--text);

margin-bottom:25px;

font-size:18px;

}

.pricing-card ul{

text-align:left;

margin:30px 0;

}

.pricing-card li{

padding:12px 0;

border-bottom:1px solid #eee;

}

.pricing-card li i{

color:var(--gold);

margin-right:10px;

}

/* ===============================
EMPLOYERS
=============================== */

.employers{

background:linear-gradient(rgba(0,25,70,.92),rgba(0,25,70,.92)),
url("images/truck-bg.jpg") center/cover;

color:white;

text-align:center;

}

.employer-content{

max-width:900px;

margin:auto;

}

.employer-content h2{

font-size:50px;

margin-bottom:25px;

}

.employer-content p{

font-size:20px;

line-height:1.8;

margin-bottom:40px;

}

.features{

display:grid;

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

gap:20px;

margin-bottom:40px;

}

.features div{

background:rgba(255,255,255,.08);

padding:18px;

border-radius:15px;

backdrop-filter:blur(10px);

font-weight:600;

transition:.3s;

}

.features div:hover{

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

transform:translateY(-6px);

}

.features i{

color:var(--gold);

margin-right:8px;

}

/* ===============================
TESTIMONIALS
=============================== */

.testimonials{

background:#f8fbff;

}

.testimonial-slider{

display:grid;

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

gap:35px;

}

.testimonial{

background:white;

padding:40px;

border-radius:20px;

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

transition:.35s;

}

.testimonial:hover{

transform:translateY(-10px);

}

.testimonial i{

font-size:42px;

color:var(--gold);

margin-bottom:20px;

}

.testimonial p{

line-height:1.8;

margin-bottom:20px;

color:var(--text);

}

.testimonial h4{

color:var(--gold);

font-size:22px;

margin-bottom:8px;

}

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

.faq{

background:white;

max-width:900px;

margin:auto;

}

.faq-item{

margin-bottom:20px;

border-radius:16px;

overflow:hidden;

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

}

.faq-question{

width:100%;

padding:22px 25px;

background:var(--primary);

color:white;

border:none;

cursor:pointer;

font-size:18px;

font-weight:600;

text-align:left;

}

.faq-answer{

display:none;

padding:25px;

background:white;

line-height:1.8;

color:var(--text);

}

/* Toggle with JS */
.faq-item.active .faq-answer{

display:block;

}

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

.contact{

background:#eef4fb;

}

.contact-grid{

display:grid;

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

gap:30px;

}

.contact-card{

background:white;

padding:35px;

text-align:center;

border-radius:20px;

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

transition:.35s;

}

.contact-card:hover{

transform:translateY(-8px);

}

.contact-card i{

font-size:48px;

color:var(--gold);

margin-bottom:20px;

}

.contact-card h3{

margin-bottom:15px;

color:var(--primary);

}

.contact-card p{

line-height:1.8;

color:var(--text);

}

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

footer{

background:#071A2E;

color:white;

padding:70px 8% 30px;

}

.footer-grid{

display:grid;

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

gap:40px;

margin-bottom:40px;

}

.footer-grid h3{

margin-bottom:18px;

color:var(--gold);

}

.footer-grid p,

.footer-grid a{

color:#d7dce3;

line-height:2;

transition:.3s;

}

.footer-grid a:hover{

color:var(--gold);

}

footer hr{

border:none;

height:1px;

background:rgba(255,255,255,.12);

margin:30px 0;

}

.copyright{

text-align:center;

color:#bfc7d2;

}

/* ===============================
FLOATING WHATSAPP
=============================== */

.whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

border-radius:50%;

background:#25D366;

display:flex;

justify-content:center;

align-items:center;

font-size:30px;

color:white;

box-shadow:0 20px 40px rgba(37,211,102,.4);

z-index:999;

animation:pulse 2s infinite;

transition:.3s;

}

.whatsapp:hover{

transform:scale(1.1);

}

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(37,211,102,.5);

}

70%{

box-shadow:0 0 0 20px rgba(37,211,102,0);

}

100%{

box-shadow:0 0 0 0 rgba(37,211,102,0);

}

}

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

#topBtn{

position:fixed;

left:25px;

bottom:25px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:var(--primary);

color:white;

font-size:22px;

cursor:pointer;

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

transition:.3s;

z-index:999;

}

#topBtn:hover{

background:var(--gold);

color:#002147;

transform:translateY(-5px);

}

/*==================================================
  PART 4
  Responsive Design • Utilities • Animations
==================================================*/

/* ===============================
NAVBAR SCROLL EFFECT
================================ */

nav.scrolled{

background:rgba(0,28,70,.96);

padding:14px 8%;

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

}

/* ===============================
FADE IN ANIMATION
================================ */

.fade-up{

opacity:0;

transform:translateY(60px);

transition:all .8s ease;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

/* ===============================
IMAGE HOVER
================================ */

img{

transition:.4s;

}

img:hover{

transform:scale(1.02);

}

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

.btn-primary,
.btn-secondary{

position:relative;

overflow:hidden;

}

.btn-primary::after,
.btn-secondary::after{

content:"";

position:absolute;

width:0;

height:0;

border-radius:50%;

background:rgba(255,255,255,.35);

left:50%;

top:50%;

transform:translate(-50%,-50%);

transition:.6s;

}

.btn-primary:hover::after,
.btn-secondary:hover::after{

width:320px;

height:320px;

}

/* ===============================
TEXT SELECTION
================================ */

::selection{

background:var(--gold);

color:#002147;

}

/* ===============================
SMOOTH SECTION HOVER
================================ */

section{

transition:.4s;

}

/* ===============================
CARD HOVER
================================ */

.glass-card,
.driver-card,
.contact-card,
.pricing-card,
.stat,
.testimonial{

transition:all .35s ease;

}

.glass-card:hover,
.driver-card:hover,
.contact-card:hover,
.pricing-card:hover,
.stat:hover,
.testimonial:hover{

transform:translateY(-10px);

}

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

@media(max-width:991px){

nav{

padding:16px 5%;

}

nav ul{

display:none;

position:absolute;

top:75px;

left:0;

width:100%;

background:#002147;

flex-direction:column;

padding:25px;

}

nav ul.active{

display:flex;

}

nav ul li{

padding:12px 0;

text-align:center;

}

.menu{

display:block;

}

.nav-btn{

display:none;

}

.hero h1{

font-size:54px;

}

.hero p{

font-size:18px;

}

.about{

grid-template-columns:1fr;

}

.about-left ul{

grid-template-columns:1fr;

}

.driver-grid{

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

}

.pricing-grid{

grid-template-columns:1fr;

}

.features{

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

}

.contact-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.stats{

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

}

.testimonial-slider{

grid-template-columns:1fr;

}

}

/* ===============================
PHONE
================================ */

@media(max-width:768px){

section{

padding:80px 6%;

}

.hero{

padding:100px 20px;

}

.hero h1{

font-size:42px;

line-height:1.2;

}

.hero p{

font-size:17px;

}

.section-title h2{

font-size:34px;

}

.about-left h2{

font-size:34px;

}

.driver-grid{

grid-template-columns:1fr;

}

.features{

grid-template-columns:1fr;

}

.stats{

grid-template-columns:1fr;

}

.stat{

padding:30px;

}

.stat h2{

font-size:42px;

}

.pricing-card{

padding:35px;

}

.contact-card{

padding:30px;

}

.logo{

font-size:24px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.btn-primary,
.btn-secondary{

width:260px;

text-align:center;

}

.whatsapp{

width:58px;

height:58px;

font-size:26px;

right:18px;

bottom:18px;

}

#topBtn{

left:18px;

bottom:18px;

width:50px;

height:50px;

}

}

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

@media(max-width:480px){

.hero h1{

font-size:34px;

}

.hero p{

font-size:16px;

}

.badge{

font-size:13px;

padding:10px 18px;

}

.section-title h2{

font-size:28px;

}

.pricing-card h1{

font-size:50px;

}

}

/* ===============================
LOADER FADE OUT
================================ */

body.loaded #loader{

opacity:0;

visibility:hidden;

transition:.8s;

}

/* ===============================
UTILITY CLASSES
================================ */

.text-center{

text-align:center;

}

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:50px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:50px;}

.shadow{

box-shadow:var(--shadow);

}

.rounded{

border-radius:var(--radius);

}

.gold{

color:var(--gold);

}

.primary{

color:var(--primary);

}

.bg-primary{

background:var(--primary);

color:#fff;

}

.bg-gold{

background:var(--gold);

color:#002147;

}