:root {
     --primary: #14abe4;
     --bg-light: #f0f2f5;
     --bg-dark: #121212;
     --text-light: #333;
     --text-dark: #f1f1f1;
     --card-light: #fff;
     --card-dark: #1e1e1e;
     --shadow-light: 0 4px 20px rgba(0, 0, 0, 0.1);
     --shadow-dark: 0 4px 20px rgba(255, 255, 255, 0.05);
     --timeline-color: #4caf50;
 }
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
 }
 html,
 body {
     font-family: 'Segoe UI', sans-serif;
     background-color: var(--bg-light);
     color: var(--text-light);
     transition: all 0.3s ease-in-out;
 }
 header {
    background-color: rgb(0, 0, 0);
     color: white;
     padding: .5rem 1.75rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     position: sticky; 
     top: 0; 
     z-index: 999;
 }
 header #companyLogo{
    height: 1.75rem; 
    z-index: 9999;
 }
 header .darkBtn{
    padding: .4rem;
    background: transparent;
    color: white;
    border: 1px solid white;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
 }
 .page-wrapper {
     min-height: calc(100vh - 114px) ;
     background-color: inherit;
 }
 #errMsg #txtapperr{
    text-align: center;
    min-height: calc(100vh - 114px)  ;
 }
 .main-content {
     align-items: center;
     display: flex;
     flex-direction: column;
     /* flex: 1 0 auto; */
 }
 body.dark {
     background-color: var(--bg-dark);
     color: var(--text-dark);
 }
 main {
     max-width: 900px;
     margin: 0 auto 2rem;
     padding: 0 .5rem;
 }

 .shipti h3{
    margin-bottom: 8px;
 }

  .timeline {
    display: flex;
    flex-direction: row;
    position: relative;
 }
 .boxes{
    display: flex;
    flex-direction: column;
    overflow: auto;
    max-width: 52.5rem;
    width: 100%;
 }
 .boxes .timeline-item{
    padding: 15px;
 }
 .boxes .timeline-content{
    width: 100%;
    height: 100%;
 }
.line{
    border: 2px solid #4caf50 ;
    max-width: 52.5rem;
    position: absolute;
    height: 100%;
    left: 6px;
 }
  .grennCircle{
    position: relative;
    color: #28a745;
    font-size: 14px ;
    left: -30px;
    top: 20px;
 }
 footer{
    background-color: #000000;
    color: #ffffff; 
    width: 100%; 
    position: sticky; 
    bottom: 0 !important; 
    z-index: 999;
    text-align: center;
 }

 footer img{
    height: 26px;
 }

 footer p{
     font-size: 10px;
    font-weight: 600;
 }


   @media(min-width:900px) {
    .timeline{
        flex-direction: column;
    }
    .boxes{
        flex-direction: row;
    }
    .boxes .timeline-content{
        width: 260px !important;
    }
    .line{
        width: 100%;
        height: 0;
        top: 4px;
    }
    .grennCircle{
      top: -34px;
      left: 0;
    }
 }


 .card {
     background: var(--card-light);
     border-radius: 15px;
     box-shadow: var(--shadow-light);
     padding: 1rem;
     margin-bottom: 2rem;
     transition: all 0.3s ease-in-out;
 }
 body.dark .card {
     background: var(--card-dark);
     box-shadow: var(--shadow-dark);
 }
 .track-box input[type="text"] {
     width: 100%;
     padding: 12px;
     font-size: 1rem;
     border: 1px solid #ccc;
     border-radius: 8px;
     margin: 10px 0;
 }
 .track-box button {
     padding: 12px 18px;
     background-color: var(--primary);
     color: #fff;
     font-weight: bold;
     border: none;
     border-radius: 8px;
     cursor: pointer;
     width: 100%;
 }
 .summary-info {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
 }
 .summary-info div {
     flex: 1 1 160px;
     background: rgba(0, 0, 0, 0.03);
     padding: 10px 15px;
     border-radius: 10px;
 }
 body.dark .summary-info div {
     background: rgba(255, 255, 255, 0.05);
 }
 .summary-info strong {
     display: block;
     margin-bottom: 4px;
     color: var(--text-light);
 }
 body.dark .summary-info strong {
     color: var(--text-dark);
 }
 .timeline-content {
     background: var(--card-light);
     padding: 1rem;
     border-radius: 10px;
     box-shadow: var(--shadow-light);
 }
 body.dark .timeline-content {
     background: var(--card-dark);
     box-shadow: var(--shadow-dark);
 }
 .timeline-content strong {
     display: block;
     font-size: 1.1rem;
     margin-bottom: 0.3rem;
 }
 .timeline-content span {
     display: block;
     color: inherit;
     margin-bottom: 2px;
 }
 @media (min-width: 600px) {
     .track-box input[type="text"] {
         width: calc(70% - 12px);
         display: inline-block;
         margin-right: 10px;
     }
     .track-box button {
         width: auto;
         display: inline-block;
     }
 }
 @media(max-width:600px) {
     header img {
         width: 10rem;
         height: 7rem;
     }
 }
 .logo-container {
     display: flex;
     justify-content: center;
     padding-top: .25rem ;
 }
 .logo-img {
     max-width: 100%;
     height: auto;
     width: 300px;
     background-color: #f0f2f5;
     border-radius: 8px;
 }
 body.dark input[type="text"],
 body.dark .track-box button {
     background-color: #222;
     color: #f1f1f1;
     border: 1px solid #444;
 }
 body.dark .track-box button:hover {
     background-color: #333;
 }
 body.dark header {
     background-color: #000;
     border-bottom: 1px solid #333;

 }
 body.dark footer {
     background-color: #111;
     border-top: 1px solid #333;
 }
 body.dark .timeline::before {
     background: #66bb6a;
 }
 body.dark .timeline-item::before {
     border-color: #1e1e1e;
 }
 body.dark .timeline-icon {
     color: var(--primary);
 }
 body.dark .card:hover {
     box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
     background-color: #262626;
 }
 body.dark header img {
     filter: brightness(0.8);
 }
 .track-box button:hover {
     background-color: var(--primary);
 }
 header button:hover {
     background-color: rgba(255, 255, 255, 0.2);
 }
 .toast {
     visibility: hidden;
     min-width: 250px;
     margin-left: -125px;
     background-color: var(--primary);
     color: #fff;
     text-align: center;
     border-radius: 8px;
     padding: 12px 20px;
     position: fixed;
     z-index: 9999;
     left: 50%;
     bottom: 30px;
     font-size: 16px;
     opacity: 0;
     transition: opacity 0.5s, bottom 0.5s;
 }
 .toast.show {
     visibility: visible;
     opacity: 1;
     bottom: 50px;
 }
 .toast.success {
     background-color: #28a745;
 }
 .toast.error {
     background-color: #dc3545;
 }
 .icon{
    color: var(--primary) !important;
    font-size: 18px;
 }
 .toast.info {
     background-color: var(--primary);
     ;
 }
 .toast.warn {
     background-color: #ffc107;
     color: #000;
 }

 .logo-text {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    display: block;
    margin-top: 10px;
}

.no-underline {
    text-decoration: none !important;
}