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

body{

font-family:'Inter',sans-serif;
background:#ffffff;
color:#1e293b;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

.navbar{

position:fixed;
top:0;
left:0;
width:100%;
padding:20px 8%;
display:flex;
justify-content:space-between;
align-items:center;
background:rgba(8,31,92,.92);
backdrop-filter:blur(10px);
z-index:1000;

}

.logo img{

height:60px;

}

.nav-links{

display:flex;
gap:30px;

}

.nav-links a{

color:#fff;
font-weight:500;
transition:.3s;

}

.nav-links a:hover{

color:#D91C24;

}

.btn-nav{

background:#D91C24;
padding:12px 28px;
border-radius:50px;
color:#fff;
font-weight:600;
transition:.3s;

}

.btn-nav:hover{

transform:translateY(-3px);

}

.menu-btn{

display:none;
color:white;
font-size:28px;
cursor:pointer;

}

.hero{

height:100vh;

background:
linear-gradient(rgba(8,31,92,.72),
rgba(8,31,92,.55)),
url("../images/truck.jpg");

background-size:cover;
background-position:center;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding:0 10%;

}

.hero-content{

max-width:900px;

}

.hero h1{

font-family:'Poppins',sans-serif;
font-size:65px;
color:white;
line-height:1.2;

}

.hero p{

margin:25px 0;

font-size:20px;

color:#f8fafc;

line-height:1.8;

}

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

}

.btn-primary{

background:#D91C24;

color:white;

padding:18px 35px;

border-radius:50px;

font-weight:600;

}

.btn-secondary{

border:2px solid white;

color:white;

padding:18px 35px;

border-radius:50px;

font-weight:600;

transition:.3s;

}

.btn-secondary:hover{

background:white;

color:#081F5C;

}
/* ================= TRUST BAR ================= */

.trust-bar{

padding:45px 8%;

background:#0A1435;

}

.trust-bar p{

text-align:center;

color:#94a3b8;

letter-spacing:2px;

font-size:13px;

text-transform:uppercase;

margin-bottom:30px;

}

.trust-logos{

display:flex;

justify-content:center;

align-items:center;

gap:60px;

flex-wrap:wrap;

}

.trust-logos img{

height:42px;

filter:grayscale(1) brightness(0) invert(1);

opacity:.6;

transition:.3s;

}

.trust-logos img:hover{

opacity:1;

}
/* ================= TRACKING ================= */

.tracking{

padding:100px 8%;

background:#f8fafc;

}

.tracking-container{

max-width:900px;

margin:auto;

text-align:center;

background:white;

padding:60px;

border-radius:20px;

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

}

.tracking h2{

font-size:40px;

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

color:#081F5C;

margin-bottom:15px;

}

.tracking p{

margin-bottom:35px;

font-size:18px;

}

.tracking-form{

display:flex;

gap:20px;

justify-content:center;

flex-wrap:wrap;

}

.tracking-form input{

flex:1;

min-width:300px;

padding:18px;

border:2px solid #ddd;

border-radius:50px;

font-size:17px;

outline:none;

}

.tracking-form button{

background:#D91C24;

color:white;

padding:18px 35px;

border:none;

border-radius:50px;

font-size:16px;

cursor:pointer;

transition:.3s;

}

.tracking-form button:hover{

background:#081F5C;

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

.services{

padding:100px 8%;

text-align:center;

}

.services h2{

font-size:42px;

color:#081F5C;

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

}

.services>p{

margin:20px auto 60px;

max-width:650px;

}

.service-grid{

display:grid;

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

gap:30px;

}

.card{

background:white;

padding:40px;

border-radius:20px;

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

transition:.4s;

}

.card:hover{

transform:translateY(-12px);

}

.card i{

font-size:50px;

color:#D91C24;

margin-bottom:20px;

}

.card h3{

margin-bottom:15px;

font-size:24px;

color:#081F5C;

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

.why-us{

padding:100px 8%;

background:#081F5C;

color:white;

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title h2{

font-size:42px;

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

margin-bottom:20px;

}

.section-title p{

max-width:700px;

margin:auto;

line-height:1.8;

}

.why-grid{

display:grid;

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

gap:30px;

}

.why-card{

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

padding:40px;

border-radius:20px;

transition:.4s;

text-align:center;

backdrop-filter:blur(8px);

}

.why-card:hover{

transform:translateY(-10px);

background:#D91C24;

}

.why-card i{

font-size:55px;

margin-bottom:25px;

}

.why-card h3{

margin-bottom:15px;

font-size:24px;

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

.process{

padding:100px 8%;

background:#F8FAFC;

text-align:center;

}

.process h2{

font-size:42px;

margin-bottom:60px;

color:#081F5C;

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

}

.process-grid{

display:grid;

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

gap:30px;

}

.step{

background:white;

padding:40px;

border-radius:20px;

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

}

.step span{

display:inline-flex;

width:70px;

height:70px;

border-radius:50%;

background:#D91C24;

color:white;

justify-content:center;

align-items:center;

font-size:28px;

font-weight:bold;

margin-bottom:25px;

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

.stats{

padding:80px 8%;

display:grid;

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

gap:30px;

background:#D91C24;

color:white;

text-align:center;

}

.stat h2{

font-size:55px;

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

margin-bottom:10px;

}

.stat p{

font-size:18px;

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

.testimonials{

padding:100px 8%;

background:white;

}

.testimonial-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.testimonial-card{

padding:35px;

background:#F8FAFC;

border-radius:20px;

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

transition:.4s;

}

.testimonial-card:hover{

transform:translateY(-10px);

}

.stars{

font-size:22px;

color:#FFD700;

margin-bottom:20px;

}

.testimonial-card h4{

margin-top:25px;

color:#081F5C;

}

.testimonial-card span{

color:#666;

font-size:15px;

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

.faq{

padding:100px 8%;

background:#F8FAFC;

}

.faq-container{

max-width:900px;

margin:auto;

}

.faq-item{

background:white;

padding:30px;

margin-bottom:20px;

border-left:6px solid #D91C24;

border-radius:12px;

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

}

.faq-item h3{

color:#081F5C;

margin-bottom:15px;

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

.cta{

padding:100px 8%;

text-align:center;

background:#081F5C;

color:white;

}

.cta h2{

font-size:48px;

margin-bottom:20px;

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

}

.cta p{

font-size:20px;

margin-bottom:40px;

}

.cta-btn{

display:inline-block;

padding:18px 45px;

background:#D91C24;

color:white;

border-radius:50px;

font-weight:600;

transition:.3s;

}

.cta-btn:hover{

transform:translateY(-4px);

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

footer{

background:#0A1435;

color:white;

padding:80px 8% 30px;

}

.footer-grid{

display:grid;

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

gap:40px;

}

.footer-grid h3{

margin-bottom:20px;

}

.footer-grid ul{

padding:0;

}

.footer-grid li{

margin-bottom:12px;

cursor:pointer;

}

.footer-grid li:hover{

color:#D91C24;

}

.copyright{

margin-top:50px;

padding-top:20px;

text-align:center;

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

}
/*================ FLEET ================*/

.fleet{

padding:100px 8%;

background:white;

}

.fleet-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.fleet-card{

overflow:hidden;

border-radius:20px;

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

transition:.4s;

}

.fleet-card:hover{

transform:translateY(-10px);

}

.fleet-card img{

width:100%;

height:260px;

object-fit:cover;

transition:.5s;

}

.fleet-card:hover img{

transform:scale(1.08);

}

.fleet-card h3{

padding:25px;

text-align:center;

color:#081F5C;

}
/*================ COVERAGE ================*/

.coverage{

padding:100px 8%;

background:#F8FAFC;

text-align:center;

}

.coverage-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.coverage-grid div{

background:white;

padding:40px;

border-radius:20px;

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

}

.coverage-grid i{

font-size:55px;

color:#D91C24;

margin-bottom:20px;

}
.call-btn,
.top-btn{

position:fixed;

right:25px;

width:60px;

height:60px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:22px;

color:white;

z-index:999;

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

transition:.3s;

}

.call-btn{

bottom:100px;

background:#D91C24;

}

.top-btn{

bottom:25px;

background:#081F5C;

}

.call-btn:hover,
.top-btn:hover{

transform:scale(1.1);

}
#loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:white;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

z-index:99999;

transition:.6s;

}

#loader img{

width:140px;

margin-bottom:25px;

animation:pulse 2s infinite;

}

@keyframes pulse{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

}
.page-header{

padding:150px 8% 70px;

background:#081F5C;

color:white;

text-align:center;

}

.tracking-page{

padding:80px 8%;

background:#F8FAFC;

}

.tracking-box{

max-width:700px;

margin:auto;

display:flex;

gap:15px;

}

.tracking-box input{

flex:1;

padding:18px;

border-radius:10px;

border:1px solid #ddd;

font-size:16px;

}

.tracking-box button{

padding:18px 35px;

background:#D91C24;

border:none;

color:white;

border-radius:10px;

cursor:pointer;

}

.tracking-result{

max-width:700px;

margin:50px auto;

background:white;

padding:40px;

border-radius:15px;

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

}

.status{

display:inline-block;

padding:10px 18px;

background:#22c55e;

color:white;

border-radius:50px;

margin-bottom:25px;

font-weight:600;

}

.info p{

margin:12px 0;

}

.timeline{

margin-top:35px;

display:flex;

flex-direction:column;

gap:15px;

}

.timeline div{

padding:15px;

border-left:4px solid #d1d5db;

background:#f8fafc;

}

.timeline .active{

border-left-color:#22c55e;

font-weight:600;

}
/*================ ADMIN =================*/

.admin-header{

background:#081F5C;

color:white;

padding:30px 8%;

}

.admin{

padding:80px 8%;

background:#F8FAFC;

min-height:100vh;

}

.dashboard-grid{

display:grid;

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

gap:25px;

margin-bottom:50px;

}

.dashboard-card{

background:white;

padding:30px;

border-radius:15px;

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

}

.dashboard-card h3{

font-size:18px;

color:#555;

}

.dashboard-card h2{

margin-top:15px;

font-size:42px;

color:#081F5C;

}

.shipment-form{

background:white;

padding:40px;

border-radius:15px;

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

}

.shipment-form form{

display:grid;

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

gap:20px;

}

.shipment-form input,
.shipment-form select{

padding:15px;

border:1px solid #ddd;

border-radius:10px;

font-size:16px;

}

.shipment-form button{

grid-column:1/-1;

padding:18px;

background:#D91C24;

color:white;

border:none;

border-radius:10px;

font-size:17px;

cursor:pointer;

}
.highlights{

padding:80px 8%;

display:grid;

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

gap:30px;

background:white;

}

.highlight{

text-align:center;

padding:40px;

border-radius:18px;

transition:.3s;

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

}

.highlight:hover{

transform:translateY(-8px);

}

.highlight i{

font-size:45px;

color:#D91C24;

margin-bottom:20px;

}

.highlight h3{

margin-bottom:15px;

color:#081F5C;

}
.newsletter{

padding:100px 8%;

background:#081F5C;

text-align:center;

color:white;

}

.newsletter form{

margin-top:35px;

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

}

.newsletter input{

padding:18px;

width:380px;

border:none;

border-radius:8px;

}

.newsletter button{

padding:18px 35px;

background:#D91C24;

border:none;

color:white;

border-radius:8px;

cursor:pointer;

}
/* ================= ABOUT PAGE ================= */

.page-banner{

background:#081F5C;

color:white;

padding:140px 8% 80px;

text-align:center;

}

.page-banner h1{

font-size:52px;

margin-bottom:20px;

}

.about-company{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

padding:100px 8%;

align-items:center;

}

.about-image img{

width:100%;

border-radius:20px;

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

}

.about-text p{

margin-top:20px;

line-height:1.8;

}

.mission-vision{

display:grid;

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

gap:30px;

padding:80px 8%;

background:#F8FAFC;

}

.box{

background:white;

padding:40px;

text-align:center;

border-radius:20px;

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

}

.box i{

font-size:55px;

color:#D91C24;

margin-bottom:20px;

}

.values{

padding:100px 8%;

text-align:center;

}

.values-grid{

margin-top:50px;

display:grid;

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

gap:25px;

}

.value{

padding:35px;

background:white;

border-radius:20px;

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

}

.value i{

font-size:45px;

color:#081F5C;

margin-bottom:15px;

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

.services-page{

padding:100px 8%;

background:#F8FAFC;

}

.service-item{

display:flex;

gap:30px;

align-items:flex-start;

background:white;

padding:35px;

border-radius:20px;

margin-bottom:30px;

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

transition:.3s;

}

.service-item:hover{

transform:translateY(-6px);

}

.service-icon{

width:90px;

height:90px;

background:#081F5C;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

flex-shrink:0;

}

.service-icon i{

font-size:38px;

color:white;

}

.service-content h2{

margin-bottom:15px;

color:#081F5C;

}

.service-content p{

line-height:1.8;

color:#555;

}
/*================ BOOKING PAGE ================*/

.booking-section{

padding:100px 8%;

background:#F8FAFC;

}

.booking-form{

max-width:1000px;

margin:auto;

background:white;

padding:45px;

border-radius:20px;

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

}

.booking-form h2{

margin:35px 0 20px;

color:#081F5C;

}

.booking-form h2:first-child{

margin-top:0;

}

.form-grid{

display:grid;

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

gap:20px;

}

.booking-form input,
.booking-form select,
.booking-form textarea{

width:100%;

padding:16px;

border:1px solid #ddd;

border-radius:10px;

font-size:16px;

font-family:inherit;

}

.booking-form textarea{

height:140px;

margin-top:20px;

resize:vertical;

}

.booking-form button{

margin-top:30px;

width:100%;

padding:18px;

background:#D91C24;

color:white;

border:none;

border-radius:10px;

font-size:17px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.booking-form button:hover{

background:#081F5C;

}
/*================ PRICING PAGE ================*/

.pricing-section{

padding:100px 8%;

display:grid;

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

gap:35px;

background:#F8FAFC;

}

.pricing-card{

background:white;

padding:45px;

border-radius:20px;

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

text-align:center;

transition:.3s;

}

.pricing-card:hover{

transform:translateY(-8px);

}

.featured{

border:3px solid #D91C24;

}

.pricing-card h1{

font-size:52px;

color:#081F5C;

margin:20px 0;

}

.pricing-card ul{

margin:30px 0;

padding:0;

list-style:none;

}

.pricing-card li{

margin:15px 0;

}

.price-btn{

display:inline-block;

padding:15px 35px;

background:#D91C24;

color:white;

border-radius:10px;

}

.calculator{

padding:100px 8%;

text-align:center;

}

.calculator form{

max-width:900px;

margin:40px auto;

display:grid;

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

gap:20px;

}

.calculator input,
.calculator select{

padding:16px;

border:1px solid #ddd;

border-radius:10px;

}

.calculator button{

grid-column:1/-1;

padding:18px;

background:#081F5C;

color:white;

border:none;

border-radius:10px;

cursor:pointer;

font-size:16px;

}
/*================ CONTACT PAGE ================*/

.contact-page{

padding:100px 8%;

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

background:#F8FAFC;

}

.contact-info,
.contact-form{

background:white;

padding:40px;

border-radius:20px;

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

}

.info-box{

display:flex;

gap:20px;

margin:30px 0;

align-items:flex-start;

}

.info-box i{

font-size:28px;

color:#D91C24;

margin-top:5px;

}

.contact-form form{

display:flex;

flex-direction:column;

gap:20px;

}

.contact-form input,
.contact-form textarea{

padding:16px;

border:1px solid #ddd;

border-radius:10px;

font-size:16px;

}

.contact-form textarea{

height:180px;

resize:vertical;

}

.contact-form button{

padding:18px;

background:#D91C24;

color:white;

border:none;

border-radius:10px;

cursor:pointer;

font-size:16px;

}

.map-section{

padding:80px 8%;

text-align:center;

}

.map-placeholder{

margin-top:30px;

height:400px;

background:#e5e7eb;

border-radius:20px;

display:flex;

justify-content:center;

align-items:center;

font-size:20px;

color:#555;

}
/*================ LOGIN ================*/

.login-page{

display:flex;

justify-content:center;

align-items:center;

min-height:100vh;

background:#F8FAFC;

padding:40px;

}

.login-box{

width:420px;

background:white;

padding:45px;

border-radius:20px;

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

text-align:center;

}

.login-box img{

width:130px;

margin-bottom:20px;

}

.login-box input{

width:100%;

padding:16px;

margin:12px 0;

border:1px solid #ddd;

border-radius:10px;

}

.login-box button{

width:100%;

padding:16px;

background:#D91C24;

border:none;

color:white;

border-radius:10px;

cursor:pointer;

margin-top:15px;

font-size:16px;

}

.login-box a{

display:block;

margin-top:18px;

color:#081F5C;

}
/*================ CUSTOMER DASHBOARD ================*/

.dashboard-header{

background:#081F5C;

color:white;

padding:25px 8%;

display:flex;

justify-content:space-between;

align-items:center;

}

.dashboard-logo img{

height:60px;

}

.dashboard{

padding:80px 8%;

background:#F8FAFC;

min-height:100vh;

}

.dashboard-cards{

display:grid;

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

gap:25px;

margin-bottom:50px;

}

.dashboard-box{

background:white;

padding:35px;

text-align:center;

border-radius:20px;

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

}

.dashboard-box i{

font-size:45px;

color:#D91C24;

margin-bottom:20px;

}

.dashboard-box h2{

font-size:40px;

color:#081F5C;

margin-top:10px;

}

.recent-shipments{

background:white;

padding:35px;

border-radius:20px;

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

overflow-x:auto;

}

.recent-shipments table{

width:100%;

border-collapse:collapse;

margin-top:25px;

}

.recent-shipments th,
.recent-shipments td{

padding:18px;

text-align:left;

border-bottom:1px solid #eee;

}

.recent-shipments th{

background:#081F5C;

color:white;

}
/*================ SHIPMENT DETAILS ================*/

.shipment-details{

padding:80px 8%;

background:#F8FAFC;

}

.shipment-card,
.timeline-card,
.receipt-box{

background:white;

padding:35px;

border-radius:18px;

margin-bottom:30px;

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

}

.shipment-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:35px;

}

.shipment-header span{

background:#081F5C;

color:white;

padding:10px 18px;

border-radius:8px;

}

.details-grid{

display:grid;

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

gap:30px;

}

.details-grid h4{

margin-bottom:8px;

color:#081F5C;

}

.status-badge{

display:inline-block;

background:#22c55e;

color:white;

padding:8px 15px;

border-radius:30px;

}

.shipment-timeline{

list-style:none;

margin-top:30px;

}

.shipment-timeline li{

padding:18px 0;

border-left:3px solid #ddd;

padding-left:25px;

margin-left:15px;

}

.shipment-timeline li.completed{

border-color:#22c55e;

color:#22c55e;

}

.shipment-timeline li.active{

border-color:#D91C24;

font-weight:bold;

}

.receipt-box{

text-align:right;

}

.receipt-box button{

padding:16px 30px;

background:#D91C24;

color:white;

border:none;

border-radius:10px;

cursor:pointer;

font-size:16px;

}
/*================ SHIPMENT HISTORY ================*/

.history-page{

padding:80px 8%;

background:#F8FAFC;

min-height:100vh;

}

.history-top{

display:flex;

justify-content:space-between;

gap:20px;

margin-bottom:35px;

flex-wrap:wrap;

}

.history-top input,
.history-top select{

padding:15px;

border:1px solid #ddd;

border-radius:10px;

font-size:16px;

}

.history-table{

width:100%;

background:white;

border-collapse:collapse;

border-radius:15px;

overflow:hidden;

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

}

.history-table th{

background:#081F5C;

color:white;

padding:18px;

}

.history-table td{

padding:18px;

border-bottom:1px solid #eee;

}

.history-table a{

color:#D91C24;

font-weight:600;

text-decoration:none;

}

.badge{

padding:8px 15px;

border-radius:20px;

color:white;

font-size:14px;

}

.transit{

background:#f59e0b;

}

.delivered{

background:#22c55e;

}

.processing{

background:#3b82f6;

}
/*================ PROFILE PAGE ================*/

.profile-page{

padding:80px 8%;

display:grid;

grid-template-columns:320px 1fr;

gap:40px;

background:#F8FAFC;

}

.profile-card{

background:white;

padding:40px;

border-radius:20px;

text-align:center;

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

}

.profile-card img{

width:130px;

height:130px;

border-radius:50%;

margin-bottom:20px;

object-fit:cover;

}

.profile-form{

background:white;

padding:40px;

border-radius:20px;

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

}

.profile-form form{

display:flex;

flex-direction:column;

gap:20px;

margin-top:30px;

}

.profile-form input{

padding:16px;

border:1px solid #ddd;

border-radius:10px;

font-size:16px;

}

.profile-form button{

padding:16px;

background:#D91C24;

border:none;

color:white;

border-radius:10px;

cursor:pointer;

font-size:16px;

}

.account-actions{

padding:80px 8%;

display:grid;

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

gap:25px;

background:white;

}

.action-card{

padding:35px;

text-align:center;

border-radius:18px;

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

text-decoration:none;

color:#081F5C;

transition:.3s;

}

.action-card:hover{

transform:translateY(-8px);

}

.action-card i{

font-size:42px;

color:#D91C24;

margin-bottom:18px;

}
/*================ ADMIN DASHBOARD ================*/

.admin-topbar{

background:#081F5C;

padding:20px 8%;

color:white;

}

.admin-dashboard{

display:grid;

grid-template-columns:260px 1fr;

min-height:100vh;

}

.admin-sidebar{

background:#0A1435;

padding:30px;

display:flex;

flex-direction:column;

gap:18px;

}

.admin-sidebar a{

color:white;

text-decoration:none;

padding:15px;

border-radius:10px;

transition:.3s;

}

.admin-sidebar a:hover{

background:#D91C24;

}

.admin-content{

padding:50px;

background:#F8FAFC;

}

.stats{

display:grid;

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

gap:25px;

margin-bottom:50px;

}

.stat-card{

background:white;

padding:30px;

border-radius:18px;

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

}

.admin-table{

width:100%;

border-collapse:collapse;

background:white;

border-radius:15px;

overflow:hidden;

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

}

.admin-table th{

background:#081F5C;

color:white;

padding:18px;

}

.admin-table td{

padding:18px;

border-bottom:1px solid #eee;

}

.admin-table button{

padding:10px 20px;

background:#D91C24;

border:none;

color:white;

border-radius:8px;

cursor:pointer;

}
/*================ MANAGE SHIPMENTS ================*/

.manage-page{

padding:50px 8%;

background:#F8FAFC;

min-height:100vh;

}

.table-toolbar{

display:flex;

justify-content:space-between;

gap:20px;

margin-bottom:30px;

flex-wrap:wrap;

}

.table-toolbar input,
.table-toolbar select{

padding:15px;

border:1px solid #ddd;

border-radius:10px;

font-size:16px;

min-width:250px;

}

.admin-btn{

background:#D91C24;

color:white;

padding:12px 24px;

border-radius:8px;

text-decoration:none;

font-weight:600;

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

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:1000;

transition:.35s ease;

}

header.scrolled{

background:#fff;

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

}

.navbar{

max-width:1400px;

margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 8%;

}

.nav-links{

display:flex;

gap:28px;

list-style:none;

}

.nav-links a{

text-decoration:none;

font-weight:500;

color:#081F5C;

transition:.3s;

position:relative;

}

.nav-links a:hover{

color:#D91C24;

}

.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:#D91C24;

transition:.3s;

}

.nav-links a:hover::after{

width:100%;

}

.btn-nav{

background:#D91C24;

color:#fff;

padding:12px 26px;

border-radius:8px;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.btn-nav:hover{

transform:translateY(-2px);

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

.top-btn{

position:fixed;

right:25px;

bottom:25px;

width:52px;

height:52px;

background:#D91C24;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

color:#fff;

text-decoration:none;

font-size:20px;

opacity:0;

visibility:hidden;

transition:.3s;

z-index:999;

}

.top-btn.show{

opacity:1;

visibility:visible;

}
/*================ TRACKING RESULT ================*/

#trackingResult{

margin-top:35px;

display:none;

background:#fff;

padding:25px;

border-radius:12px;

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

text-align:left;

}

#trackingResult h3{

color:#081F5C;

margin-bottom:15px;

}

.timeline{

display:flex;

flex-direction:column;

gap:18px;

}

.timeline div{

display:flex;

align-items:center;

gap:12px;

font-weight:500;

}

.timeline i{

color:#1FAF38;

font-size:18px;

}

.error{

color:#D91C24;

font-weight:600;

}
/*================ TRACKING PAGE ================*/

.page-hero{

padding:170px 20px 80px;

text-align:center;

background:#081F5C;

color:#fff;

}

.page-hero h1{

font-size:48px;

margin-bottom:15px;

}

.page-hero p{

font-size:18px;

opacity:.9;

}

.tracking-page{

padding:80px 8%;

background:#f7f9fc;

min-height:60vh;

}

.tracking-container{

max-width:700px;

margin:auto;

}
/*================ SHIPMENT CARD ================*/

.shipment-card{

background:#fff;

padding:35px;

border-radius:15px;

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

margin-top:30px;

}

.shipment-card h2{

margin-bottom:25px;

color:#081F5C;

}

.shipment-grid{

display:grid;

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

gap:20px;

margin-bottom:35px;

}

.shipment-grid strong{

display:block;

margin-bottom:6px;

color:#081F5C;

}

.status{

display:inline-block;

padding:8px 18px;

border-radius:50px;

font-weight:600;

}

.status.transit{

background:#FFF4D6;

color:#CC8800;

}
/*================ BOOKING PAGE ================*/

.booking-page{

padding:80px 8%;

background:#f5f7fb;

}

.booking-form{

max-width:900px;

margin:auto;

background:#fff;

padding:40px;

border-radius:16px;

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

display:grid;

gap:18px;

}

.booking-form h2{

margin-top:20px;

color:#081F5C;

}

.booking-form input,
.booking-form select,
.booking-form textarea{

padding:15px;

border:1px solid #ddd;

border-radius:8px;

font-size:16px;

font-family:inherit;

}

.booking-form textarea{

min-height:130px;

resize:vertical;

}

.booking-form button{

margin-top:15px;

}
.form-step{

display:none;

animation:fade .4s ease;

}

.form-step.active{

display:block;

}

.progress-bar{

width:100%;

height:8px;

background:#eee;

border-radius:20px;

margin-bottom:35px;

overflow:hidden;

}

.progress{

width:25%;

height:100%;

background:#D91C24;

transition:.4s;

}

.btn-group{

display:flex;

justify-content:space-between;

margin-top:25px;

}

@keyframes fade{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}
/*================ SHIPPING CALCULATOR ================*/

.calculator{

padding:90px 8%;

text-align:center;

background:#f8f9fc;

}

.calculator-box{

max-width:600px;

margin:40px auto;

background:#fff;

padding:40px;

border-radius:16px;

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

}

.calculator-box input,
.calculator-box select{

width:100%;

padding:15px;

margin-bottom:20px;

border:1px solid #ddd;

border-radius:8px;

font-size:16px;

}

.calculator-box button{

width:100%;

padding:15px;

border:none;

background:#D91C24;

color:#fff;

font-size:17px;

border-radius:8px;

cursor:pointer;

transition:.3s;

}

.calculator-box button:hover{

background:#b7171e;

}

#priceResult{

margin-top:25px;

color:#081F5C;

font-size:28px;

}
/* ================= ADMIN TOPBAR ================= */

.admin-topbar{

    background:#081F5C;

    color:white;

    padding:20px 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:80px;

}

.admin-topbar h2{

    margin:0;

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

}

.admin-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#D91C24;

    color:white;

    padding:12px 22px;

    border-radius:8px;

    font-weight:600;

    transition:.3s;

}

.admin-btn:hover{

    background:white;

    color:#081F5C;

    transform:translateY(-2px);

}
/* ================= MANAGE SHIPMENTS ================= */

.admin-topbar{
    background:#081F5C;
    color:white;
    padding:25px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.admin-topbar h2{
    margin:0;
}

.admin-btn{
    background:#D91C24;
    color:white;
    padding:12px 22px;
    border-radius:8px;
    font-weight:600;
}

.manage-page{
    padding:100px 8%;
    background:#F8FAFC;
    min-height:100vh;
}

.table-toolbar{
    display:flex;
    gap:20px;
    margin-bottom:30px;
    background:white;
    padding:25px;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
}

.table-toolbar input,
.table-toolbar select{
    padding:15px;
    border:1px solid #ddd;
    border-radius:8px;
    font-size:16px;
}

.table-toolbar input{
    flex:1;
}

.table-toolbar select{
    min-width:200px;
}

.admin-table{
    width:100%;
    border-collapse:collapse;
    background:white;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
}

.admin-table th{
    background:#081F5C;
    color:white;
    padding:18px;
    text-align:left;
}

.admin-table td{
    padding:18px;
    border-bottom:1px solid #eee;
}

.badge{
    padding:7px 12px;
    border-radius:20px;
    font-size:13px;
    font-weight:600;
}

.badge.transit{
    background:#fef3c7;
    color:#92400e;
}

.badge.delivered{
    background:#dcfce7;
    color:#166534;
}
.admin-topbar {
    position: relative;
    z-index: 10;
}

.manage-page {
    padding: 50px 8%;
    background: #F8FAFC;
    min-height: 100vh;
}

.table-toolbar {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    position: relative;
    z-index: 20;
}

.table-toolbar input,
.table-toolbar select {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 16px;
}

.table-toolbar input {
    flex: 1;
}