.hero{
    background:
    linear-gradient(
        135deg,
        rgba(10,22,40,.95),
        rgba(13,31,60,.90)
    ),
    url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d');

    background-size:cover;
    background-position:center;
    color:#fff;
    text-align:center;
    padding:110px 0 80px;
    position:relative;
}

.hero::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:4px;
    background:linear-gradient(
        90deg,
        var(--gold),
        var(--gold-light),
        var(--gold)
    );
}

.hero h1{
    font-size:48px;
    font-weight:800;
    margin-bottom:15px;
}

.hero h1 span{
    color:var(--gold);
}

.hero .lead{
    color:var(--muted);
    font-size:16px;
}

.hero form{
    max-width:650px;
    margin:35px auto 0;
}

.track-input-group{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(200,168,75,.35);
    padding:6px;
    display:flex;
    gap:6px;
    border-radius:4px;
    align-items: stretch;
}

.track-input{
   flex: 1; 
   min-width: 0;
   background: transparent;
   border: none;
   color: #fff;
   padding: 14px 18px;
   box-sizing: border-box;
    
}

.hero input{
    background:transparent;
    border:none;
    color:#fff;
    flex:1;
    padding:14px 18px;
}


.hero input::placeholder{
    color:#8798b2;
}

.hero input:focus{
    outline:none;
    box-shadow:none;
}

.btn-track{
    background:var(--gold);
    color:var(--navy-deep);
    border:none;
    font-weight:700;
    padding:14px 28px;
    letter-spacing:1px;
    text-transform:uppercase;
    white-space: nowrap;
}

.btn-track:hover{
    background:var(--gold-light);
}

/* TRACK CARD */

.tracking-card{
    width:100%;
    max-width:650px;
    margin:35px auto 0;
    background:#fff;
    border-radius:4px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
    text-align:left;
}

.tc-header{
    background:var(--navy-deep);
    border-bottom:1px solid var(--gold);
    padding:20px;
}

.tc-label{
    color:var(--muted);
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
}

.tc-code{
    color:var(--gold);
    font-size:18px;
    font-weight:700;
    font-family:monospace;
}

.tc-body{
    padding:24px;
}

.card-box{
    margin-top:20px;
}

.card-box h6{
    font-family:'Inter',sans-serif;
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#9aa5b1;
    border-bottom:1px solid var(--line);
    padding-bottom:10px;
    margin-bottom:14px;
}

.card-box p {
    color: #c8a84b;
}

/* TIMELINE */

.timeline{
    display:flex;
    justify-content:space-between;
    margin:20px 0;
}

.step{
    flex:1;
    text-align:center;
    position:relative;
}

.step i{
    width:40px;
    height:40px;
    line-height:40px;
    border-radius:50%;
    background:#dce2ea;
    color:#fff;
}

.step.active i{
    background:var(--navy);
    color:var(--gold);
}

.step.completed i{
    background:var(--gold);
    color:var(--navy-deep);
}

.step p{
    margin-top:8px;
    font-size:11px;
    color:#8893a2;
}

.step::after{
    content:'';
    position:absolute;
    top:20px;
    right:-50%;
    width:100%;
    height:2px;
    background:#dce2ea;
}

.step:last-child::after{
    display:none;
}

.progress{
    height:5px;
    background:#edf1f5;
}

.progress-bar{
    background:var(--gold);
}

/* HISTORY */

.tracking-history-box{
    background:#fafbfc;
    border:1px solid var(--line);
    border-radius:6px;
    padding:18px;
}

.history-icon{
    background:var(--navy-deep);
    color:var(--gold);
    border:1px solid var(--gold);
}

.history-message{
    background:#fff;
    border:1px solid var(--line);
    border-radius:6px;
}

.history-time{
    color:#8f9aa8;
    font-size:11px;
}

/* BADGES */

.badge.bg-primary{
    background:var(--navy-deep)!important;
    border:1px solid var(--gold);
}

.badge.bg-danger{
    background:#a3322a!important;
}

/* BUTTON */

#toggleBtn{
    border:1px solid var(--navy-deep);
    background:#fff;
    color:var(--navy-deep);
    font-size:11px;
    letter-spacing:1px;
    text-transform:uppercase;
    font-weight:700;
}

#toggleBtn:hover{
    background:var(--navy-deep);
    color:#fff;
}

/* STATS */

.stats-section{
    margin-top:-45px;
    position:relative;
    z-index:5;
}

.stats-card{
    background:#fff;
    border-top:3px solid var(--gold);
    border-radius:4px;
    padding:28px 20px;
    box-shadow:0 10px 30px rgba(10,22,40,.08);
}

.stats-card h2{
    color:var(--navy-deep);
    font-size:34px;
    font-weight:800;
}

.stats-card p{
    color:#8f9aa8;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:12px;
    font-weight:600;
}

/* ===== SECTION HEADERS ===== */
.section-head{
    text-align:center;
    margin-bottom:50px;
}

.section-head .eyebrow-line{
    font-size:11px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:700;
    margin-bottom:10px;
}

.section-head h2{
    font-weight:800;
    color:var(--navy-deep);
    font-size:32px;
    margin-bottom:10px;
}

.section-head p{
    color:#8a93a3;
    font-size:15px;
    max-width:560px;
    margin:0 auto;
}


/* ===== PRICING ===== */
.pricing-section{
    background:var(--navy-deep);
    color:#fff;
    border-radius:6px;
    padding:50px 30px;
    position:relative;
    overflow:hidden;
}

.pricing-section::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:4px;
    background:linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);
}

.pricing-section h2{
    font-weight:800;
    margin-bottom:6px;
}

.pricing-section p.sub{
    color:var(--muted);
    margin-bottom:28px;
    font-family:'Inter', sans-serif;
    font-size:14px;
}

.pricing-section input{
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(200,168,75,0.35);
    color:#fff;
    border-radius:2px;
    padding:13px 16px;
}

.pricing-section input::placeholder{
    color:#7a8aa3;
}

.pricing-section input:focus{
    outline:none;
    box-shadow:none;
    border-color:var(--gold);
    background:rgba(255,255,255,0.06);
    color:#fff;
}

#result{
    font-family:'Playfair Display', serif;
    color:var(--gold);
    margin-top:20px;
    font-size:24px;
}

/* ===== WHY CHOOSE US ===== */
.why-box{
    background:#fff;
    border-radius:4px;
    border-bottom:3px solid transparent;
    padding:36px 30px;
    box-shadow:0 5px 25px rgba(10,22,40,0.06);
    height:100%;
    transition:0.3s;
}

.why-box:hover{
    transform:translateY(-5px);
    border-bottom:3px solid var(--gold);
}

.why-box .icon-wrap{
    width:56px;
    height:56px;
    border-radius:50%;
    background:var(--navy-deep);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:20px;
}

.why-box .icon-wrap i{
    font-size:22px;
    color:var(--gold);
}

.why-box h5{
    font-weight:700;
    color:var(--navy-deep);
    margin-bottom:10px;
}

.why-box p{
    color:#8a93a3;
    font-size:14px;
    margin:0;
    font-family:'Inter', sans-serif;
}

/* ===== TESTIMONIALS ===== */
.testimonial{
    background:#fff;
    border-radius:4px;
    border-left:3px solid var(--gold);
    padding:28px;
    box-shadow:0 5px 20px rgba(10,22,40,0.05);
    height:100%;
}

.testimonial .stars{
    color:var(--gold);
    font-size:14px;
    margin-bottom:14px;
    letter-spacing:3px;
}

.testimonial p.quote{
    font-family:'Playfair Display', serif;
    font-size:16px;
    color:var(--ink);
    line-height:1.6;
    margin-bottom:16px;
}

.testimonial .author{
    font-size:12px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#9aa5b1;
    font-weight:600;
}

/* ===== LIVE MAP ===== */
.live-map{
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(10,22,40,0.12);
    border:1px solid var(--line);
}

/* ===== CTA ===== */
.cta-section{
    background:linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);
    color:#fff;
    border-radius:6px;
    padding:64px 30px;
    text-align:center;
    position:relative;
    overflow:hidden;
}

.cta-section::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:4px;
    background:linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);
}

.cta-section .eyebrow{
    display:inline-block;
    background:rgba(200,168,75,0.12);
    border:1px solid rgba(200,168,75,0.4);
    border-radius:30px;
    padding:8px 22px;
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    font-weight:700;
    color:var(--gold);
    margin-bottom:20px;
}

.cta-section h2{
    font-weight:800;
    margin-bottom:14px;
    font-size:32px;
}

.cta-section p.sub{
    color:var(--muted);
    margin-bottom:30px;
    font-family:'Inter', sans-serif;
}

.online-dot{
    width:9px;
    height:9px;
    background:#28c76f;
    border-radius:50%;
    display:inline-block;
    margin-right:5px;
}

.badge.bg-success{
    background:#198754 !important;
    color:#fff !important;
}

.badge.bg-danger{
    background:#b42318 !important;
    color:#fff !important;
}

.timezone-note{
    background:#555;
    border-left:4px solid #0d6efd;
    padding:10px 15px;
    margin-bottom:20px;
    font-size:13px;
    color:#f8f9fa; 
    border-radius:4px;
}



@keyframes fadeIn{
    from{opacity:0; transform:translateY(15px);}
    to{opacity:1; transform:translateY(0);}
}

/* ===== MOBILE ===== */
@media(max-width:768px){
    .hero h1{font-size:32px;}
    .hero .track-input-group{flex-direction:column;}
    .track-input {width: 100%;}
    .btn-track {width: 100%;}
    .hero .btn-track{width:100%;}
    .step p{font-size:9px;}
    .section-head h2{font-size:26px;}
}