*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,Helvetica,sans-serif;
}


body#tracking-page{

    background:#f4f6f9;

    padding:20px;

}



.map-container{

    max-width:900px;

    margin:auto;

    background:white;

    padding:30px;

    border-radius:10px;

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

    text-align:center;

}



.map-container h1{

    color:#0b2c54;

    margin-bottom:25px;

}



.map-container form{

    display:flex;

    gap:10px;

    margin-bottom:30px;

}



.map-container input{

    flex:1;

    padding:14px;

    border:1px solid #ccc;

    border-radius:6px;

}



.map-container button{

    padding:14px 25px;

    background:#0b2c54;

    color:white;

    border:none;

    border-radius:6px;

    cursor:pointer;

}



.tracking-result{

    background:#f8f9fa;

    padding:25px;

    border-radius:8px;

}



.tracking-result h2{

    color:#0b2c54;

    margin-bottom:15px;

}



.progress{

    width:100%;

    height:20px;

    background:#ddd;

    border-radius:20px;

    overflow:hidden;

    margin:20px 0;

}



.progress-line{

    height:100%;

    background:#0b2c54;

    transition:width 1s ease;

}



.error{

    background:#ffdddd;

    color:#a00000;

    padding:15px;

    border-radius:6px;

}



.shipment-animation{

    max-width:900px;

    margin:20px auto;

    background:white;

    padding:25px;

    border-radius:10px;

}



.map-route{

    width:100%;

    height:100px;

    background:#e8eef5;

    border-radius:10px;

    position:relative;

}



.ship-marker{

    position:absolute;

    top:35px;

    font-size:35px;

    transition:left 2s ease;

}



@media(max-width:600px){

    .map-container form{

        flex-direction:column;

    }

}


/* ==========================================
   WORLD MAP
========================================== */

#world-map{

    width:100%;

    height:450px;

    margin-top:30px;

    border-radius:12px;

    overflow:hidden;

    border:1px solid #d5dce5;

    background:#e8eef5;

}


/* Leaflet map */

#world-map .leaflet-container{

    width:100%;

    height:100%;

    border-radius:12px;

}


/* Shipment marker */

#ship-marker{

    font-size:35px;

    text-align:center;

    line-height:35px;

}


/* ==========================================
   LEAFLET SHIPMENT MARKER
========================================== */

.shipment-map-marker{

    background:transparent;

    border:none;

    display:flex;

    align-items:center;

    justify-content:center;

}


.shipment-map-marker div{

    font-size:35px;

    line-height:40px;

    text-align:center;

    filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));

}


/* Mobile map */

@media(max-width:600px){

    #world-map{

        height:350px;

    }

}
/* RESPONSIVE SAFETY OVERRIDES */
*,*::before,*::after{box-sizing:border-box;}
img,video,iframe{max-width:100%;}
body#tracking-page{overflow-x:hidden;}
.map-container{width:100%;max-width:900px;margin-left:auto;margin-right:auto;padding-left:12px;padding-right:12px;}
.map-container form{width:100%;}
.map-container input{min-width:0;max-width:100%;}
#world-map{width:100%;max-width:100%;}
@media(max-width:600px){
  .map-container{padding-left:8px;padding-right:8px;}
  .map-container h1{font-size:24px;line-height:1.25;}
  .map-container form{gap:10px;}
  .map-container input,.map-container button{width:100%;max-width:100%;}
  #world-map{height:320px;}
}

/* Responsive hero cover sizing */
.hero-cover, .hero-cover img, .hero img.cover, .hero-image img {
    max-width: 100%;
    height: auto;
}
@media (max-width: 768px) {
    .hero {
        min-height: 62vh;
        height: auto;
    }
    .hero-cover, .hero-cover img, .hero img.cover, .hero-image img {
        max-height: 62vh;
        object-fit: cover;
    }
}
@media (min-width: 769px) {
    .hero {
        min-height: 72vh;
    }
}