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

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;
background:#F7F9FC;
color:#263238;

}

img{

width:100%;
display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

/* NAVBAR */

header{

width:100%;
position:absolute;
top:0;
left:0;
z-index:999;

}

.navbar{

width:90%;
max-width:1300px;

margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

padding:25px 0;

}

.logo img{

width:180px;

}

.nav-links{

display:flex;

gap:40px;

}

.nav-links a{

color:white;

font-weight:600;

transition:.3s;

}

.nav-links a:hover{

color:#FF6A00;

}

.login-btn{

background:#FF6A00;

padding:14px 34px;

border-radius:8px;

color:white;

font-weight:600;

transition:.3s;

}

.login-btn:hover{

background:#e85f00;

}

/* HERO */

.hero{

min-height:100vh;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

padding:120px 8%;

background:#0D1B3D;

overflow:hidden;

}

.hero-content{

max-width:600px;

}

.badge{

display:inline-block;

background:#ffffff20;

padding:10px 18px;

border-radius:40px;

color:#FF6A00;

font-weight:600;

margin-bottom:25px;

}

.hero h1{

font-size:70px;

line-height:1.15;

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

color:white;

margin-bottom:25px;

}

.hero p{

font-size:18px;

line-height:1.8;

color:#d7d7d7;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:20px;

}

.primary-btn{

background:#FF6A00;

padding:18px 36px;

border-radius:10px;

color:white;

font-weight:600;

transition:.3s;

}

.primary-btn:hover{

transform:translateY(-4px);

}

.secondary-btn{

border:2px solid white;

padding:18px 36px;

border-radius:10px;

color:white;

font-weight:600;

transition:.3s;

}

.secondary-btn:hover{

background:white;

color:#0D1B3D;

}

.hero-image{

display:flex;

justify-content:center;

align-items:center;

}

.hero-image img{

max-width:650px;

animation:float 4s ease-in-out infinite;

}

@keyframes float{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-20px);
}

100%{
transform:translateY(0px);
}

}

/* TRACKING */

.tracking{

width:90%;
max-width:1200px;
margin:-70px auto 120px;
position:relative;
z-index:10;

}

.tracking-card{

background:#fff;
padding:50px;
border-radius:20px;
box-shadow:0 20px 40px rgba(0,0,0,.08);

}

.tracking-card h2{

font-size:36px;
color:#0D1B3D;

}

.tracking-card p{

margin:15px 0 30px;
color:#777;

}

.tracking-card form{

display:flex;
gap:20px;

}

.tracking-card input{

flex:1;
padding:18px;
border:1px solid #ddd;
border-radius:10px;
font-size:16px;

}

.tracking-card button{

padding:18px 40px;
background:#FF6A00;
border:none;
color:#fff;
border-radius:10px;
cursor:pointer;
font-weight:600;

}

/* SECTION TITLE */

.section-heading{

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

}

.section-heading span{

color:#FF6A00;
font-weight:700;

}

.section-heading h2{

font-size:42px;
color:#0D1B3D;
margin-top:10px;

}

/* SERVICES */

.services{

width:90%;
max-width:1200px;
margin:auto auto 120px;

}

.service-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}

.service-card{

background:white;
padding:40px;
border-radius:20px;
text-align:center;
box-shadow:0 10px 25px rgba(0,0,0,.05);
transition:.4s;

}

.service-card:hover{

transform:translateY(-10px);

}

.service-card i{

font-size:50px;
color:#FF6A00;
margin-bottom:25px;

}

.service-card h3{

margin-bottom:15px;
color:#0D1B3D;

}

/* WHY */

.why-us{

width:90%;
max-width:1200px;
margin:120px auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;

}

.why-left span{

color:#FF6A00;
font-weight:bold;

}

.why-left h2{

font-size:46px;
margin:20px 0;
color:#0D1B3D;

}

.why-left p{

line-height:1.8;
color:#666;
margin-bottom:30px;

}

.why-left ul{

display:grid;
gap:18px;

}

.why-left li{

font-weight:600;

}

.why-left i{

color:#FF6A00;
margin-right:10px;

}

.experience{

background:#0D1B3D;
padding:90px;
border-radius:25px;
text-align:center;
color:white;

}

.experience h1{

font-size:70px;
color:#FF6A00;

}

/* STATS */

.stats{

background:#0D1B3D;
padding:80px 10%;
display:grid;
grid-template-columns:repeat(4,1fr);
text-align:center;
color:white;

}

.stats h2{

font-size:52px;
color:#FF6A00;

}

.stats p{

margin-top:10px;

}

/* FOOTER */

footer{

background:#09142D;
color:white;
padding:80px 10% 20px;

}

.footer-grid{

display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:50px;

}

.footer-grid h3{

margin-bottom:20px;

}

.footer-grid a{

display:block;
margin-bottom:12px;
color:#ddd;

}

.footer-grid p{

color:#ddd;
line-height:1.8;

}

.copyright{

text-align:center;
margin-top:50px;
padding-top:20px;
border-top:1px solid rgba(255,255,255,.1);

}

/* Sticky Header */

header.sticky{

position:fixed;

background:#ffffff;

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

animation:slideDown .4s;

}

header.sticky .nav-links a{

color:#0D1B3D;

}

@keyframes slideDown{

from{

transform:translateY(-100%);

}

to{

transform:translateY(0);

}

}

/* Fade Animation */

.hidden{

opacity:0;

transform:translateY(80px);

transition:1s;

}

.show{

opacity:1;

transform:translateY(0);

}

.mobile-btn{

display:none;

background:none;

border:none;

font-size:28px;

color:white;

cursor:pointer;

}

header.sticky .mobile-btn{

color:#0D1B3D;

}

@media(max-width:768px){

.mobile-btn{

display:block;

}

.nav-links{

position:absolute;

top:100%;

left:0;

width:100%;

background:white;

display:none;

flex-direction:column;

padding:30px;

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

}

.nav-links.active{

display:flex;

}

.nav-links a{

color:#0D1B3D;

}

}

/* TRACKING */

.tracking{

padding:100px 8%;

background:#fff;

}

.tracking-container{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.tracking-left span{

color:#FF6A00;

font-weight:700;

}

.tracking-left h2{

font-size:46px;

margin:20px 0;

color:#0D1B3D;

}

.tracking-left p{

line-height:1.8;

color:#666;

margin-bottom:35px;

}

#trackingForm{

display:flex;

flex-direction:column;

gap:20px;

}

#trackingForm input{

padding:18px;

font-size:17px;

border-radius:10px;

border:1px solid #ddd;

}

#trackingForm button{

padding:18px;

background:#FF6A00;

border:none;

color:white;

font-size:17px;

border-radius:10px;

cursor:pointer;

font-weight:bold;

transition:.3s;

}

#trackingForm button:hover{

background:#e55b00;

}

.tracking-preview{

background:#F7F9FC;

padding:40px;

border-radius:20px;

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

}

.status{

display:flex;

align-items:center;

gap:20px;

}

.status i{

width:60px;

height:60px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:#FF6A00;

color:white;

font-size:22px;

}

.line{

width:3px;

height:45px;

background:#ddd;

margin:10px 29px;

}

/* TRACKING PAGE */

.tracking-page{

padding:170px 8% 100px;

background:#F7F9FC;

min-height:100vh;

}

.tracking-page h1{

font-size:50px;

color:#0D1B3D;

margin-bottom:10px;

}

.tracking-page p{

color:#666;

}

.tracking-search{

display:flex;

gap:20px;

margin:40px 0;

}

.tracking-search input{

flex:1;

padding:18px;

font-size:17px;

border-radius:10px;

border:1px solid #ddd;

}

.tracking-search button{

padding:18px 35px;

background:#FF6A00;

color:white;

border:none;

border-radius:10px;

cursor:pointer;

}

.shipment-card{

background:white;

padding:30px;

border-radius:18px;

margin-bottom:30px;

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

}

.shipment-grid{

display:grid;

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

gap:25px;

margin-bottom:40px;

}

.shipment-box{

background:white;

padding:25px;

border-radius:15px;

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

}

.timeline{

background:white;

padding:35px;

border-radius:20px;

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

}

.timeline-item{

display:flex;

gap:20px;

padding:20px 0;

}

.dot{

width:18px;

height:18px;

background:#ddd;

border-radius:50%;

margin-top:5px;

}

.complete .dot{

background:#2ecc71;

}

.active .dot{

background:#FF6A00;

}

.login-page{

display:flex;

justify-content:center;

align-items:center;

height:100vh;

background:#0D1B3D;

}

.login-container{

width:420px;

background:white;

padding:45px;

border-radius:20px;

box-shadow:0 20px 40px rgba(0,0,0,.1);

}

.login-container h1{

margin-bottom:30px;

color:#0D1B3D;

text-align:center;

}

.login-container input{

width:100%;

padding:18px;

margin-bottom:20px;

border:1px solid #ddd;

border-radius:10px;

}

.login-container button{

width:100%;

padding:18px;

background:#FF6A00;

border:none;

color:white;

font-weight:bold;

border-radius:10px;

cursor:pointer;

}

.dashboard{

display:grid;

grid-template-columns:260px 1fr;

min-height:100vh;

}

aside{

background:#0D1B3D;

padding:30px;

color:white;

}

aside h2{

margin-bottom:40px;

}

aside ul{

display:grid;

gap:25px;

}

aside li{

cursor:pointer;

}

main{

padding:40px;

background:#F7F9FC;

}

.dashboard-cards{

display:grid;

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

gap:25px;

margin:40px 0;

}

.dashboard-cards div{

background:white;

padding:35px;

border-radius:20px;

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

text-align:center;

}

.dashboard-cards h2{

font-size:45px;

color:#FF6A00;

}
.admin-container{

width:95%;
max-width:1200px;

margin:60px auto;

background:white;

padding:40px;

border-radius:20px;

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

}

.admin-container h1{

margin-bottom:40px;

color:#0D1B3D;

}

.admin-container h2{

margin:40px 0 20px;

color:#FF6A00;

}

.grid{

display:grid;

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

gap:20px;

}

.grid input,
.grid select{

padding:16px;

border:1px solid #ddd;

border-radius:10px;

font-size:16px;

}

textarea{

width:100%;

height:160px;

margin-top:25px;

padding:18px;

border-radius:10px;

border:1px solid #ddd;

resize:none;

}

.admin-container button{

margin-top:30px;

padding:18px 40px;

background:#FF6A00;

color:white;

border:none;

border-radius:10px;

font-size:17px;

cursor:pointer;

font-weight:600;

}

.admin-container button:hover{

background:#e85c00;

}

.shipment-table{

width:100%;

border-collapse:collapse;

margin-top:30px;

background:white;

}

.shipment-table th{

background:#0D1B3D;

color:white;

padding:18px;

}

.shipment-table td{

padding:18px;

border-bottom:1px solid #eee;

}

.shipment-table tr:hover{

background:#fafafa;

}

.action-btn{

padding:10px 18px;

border:none;

border-radius:8px;

cursor:pointer;

margin-right:8px;

}

.edit{

background:#3498db;

color:white;

}

.delete{

background:#e74c3c;

color:white;

}

#search{

width:350px;

padding:15px;

border-radius:10px;

border:1px solid #ddd;

}
/* ===========================
   SHIPMENT STATUS BADGES
=========================== */

.status-badge{

    display:inline-block;

    padding:8px 14px;

    border-radius:30px;

    color:white;

    font-size:13px;

    font-weight:600;

    text-align:center;

}

.status-registered{

    background:#7f8c8d;

}

.status-transit{

    background:#3498db;

}

.status-customs{

    background:#f39c12;

}

.status-delivered{

    background:#2ecc71;

}

.status-out{

    background:#8e44ad;

}

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

.action-btn{

    padding:10px 18px;

    border:none;

    border-radius:8px;

    color:white;

    cursor:pointer;

    transition:.3s;

    font-weight:600;

}

.action-btn:hover{

    transform:translateY(-2px);

}

.edit{

    background:#3498db;

}

.delete{

    background:#e74c3c;

}

.view{

    background:#2ecc71;

}

.shipment-table{

    overflow:hidden;

    border-radius:18px;

}

.shipment-table tr{

    transition:.25s;

}

.shipment-table tr:hover{

    background:#f7fbff;

}

.dashboard-cards div{

    transition:.3s;

}

.dashboard-cards div:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.timeline-item{

    position:relative;

    padding-left:40px;

    margin-bottom:35px;

}

.timeline-item::before{

    content:"";

    position:absolute;

    left:8px;

    top:0;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#FF6A00;

}

.timeline-item::after{

    content:"";

    position:absolute;

    left:16px;

    top:18px;

    width:2px;

    height:100%;

    background:#ddd;

}

.timeline-item:last-child::after{

    display:none;

}

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

.search-bar{

    display:flex;

    justify-content:flex-end;

    margin:25px 0;

}

.search-bar input{

    width:420px;

    max-width:100%;

    padding:14px 20px;

    border:none;

    border-radius:40px;

    background:white;

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

    font-size:15px;

    transition:.3s;

}

.search-bar input:focus{

    outline:none;

    transform:scale(1.02);

    box-shadow:0 15px 35px rgba(13,27,61,.18);

}