/*-----------------------------------------------------------------------------------------
                                  APPLICATION CSS
-----------------------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');


/*-----------nav link----------------*/
.nav-link{
   color:#fff inherit
}

/*----------------------slider css---------------*/
.splide{
    height:500px;
    
}

.splide__slide{
    position: relative;
}

.splide__slide>img{
    position: absolute;
    z-index: -999;
    width:100%;
    height:100%;
}

.splide__slide>article{
    background-color:rgba(0,0,0,0.9);
    width:100%;
    height:500px;
    border:0px solid gray;
    box-shadow:1px 2px 10px gray;
    padding:10px;
    box-sizing:border-box;

}

.slide-article h1{
    font-size:50px;
    color:#fff;
    font-weight: bold;
    margin:150px 0px;
    text-transform: capitalize;
    font-family: 'Roboto', sans-serif;
}

/*-----------------Testimony slider--------------------------*/
#testify{
    height:500px;
    border:0px solid brown;
}
#testify li article{
  height:auto;
  background-color:#fff;
}

#testify li article img{
    width:100px;
    height:100px;
    border-radius:50%;
    border:1px double gray;
}



@media screen and (max-width:550px) {

    .splide{
        height:400px;
    }

    .splide__slide>article{
        background-color:rgba(0,0,0,0.5);
        width:100%;
        height:400px;
    
    }

    .slide-article h1{
        font-size:30px;
        color:#fff;
        font-weight: bold;
        margin:120px 0px;
        font-family: 'Roboto', sans-serif;
    }
    
}



/*-----------------Tracking facilities---------------*/
div.tracking div section{
   border:0px solid green;
}

div.tracking div section h2{
   font-family: 'Roboto', sans-serif;
}

div.tracking div section p{
   font-size:18px;
}

/*-----------------Services facilities---------------*/
div.services div section article{
    border:0x solid gray;
    padding:10px;
    box-sizing: border-box;
    border-radius:4px;
    box-shadow: 1px 2px 5px gray;
    background-color: #0a0a0f;
    color:#fff !important;
    padding:10px 15px;
    box-sizing: border-box;
 }

 div.services h2{
   font-family: 'Roboto', sans-serif;
   font-size:30px;
   text-transform: capitalize;
 }

 div.services div section article h5,div.services div section article h4{
   color:#1a56db;
   font-weight: bolder;
 }



 /*------------------TrackingPage----------------------*/
 .list-class>li{
   font-family: 'Roboto', sans-serif;
   color:#292828
 }

 .list-class2>li{
   font-family: 'Roboto', sans-serif;
   color:#292828
 }

 section.mapping{
   position: relative;

 }

 section.mapping article{
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    background-color: rgba(0,0,0,0.5);
    z-index:9999;
 }

 section.mapping article>button{
    margin:50% auto;
 }

 

 .list-class>li span{
   float:right;
 }




 /*------------------Footer------------------------*/
 div.footer{
    height:auto;
    background-color:#0a0a0f;
    /* background-image: url('/images/worldimage.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size:100% 100%; */
 }

 div.footer div>section{
    margin:50px 0px;
    border:0px solid green;
    color:#fff
 }

 div.footer div>section ul{
   padding:0px;
 }

 div.footer div>section ul li{
   list-style: none;
 }

 div.footer div>section ul li>a{
    color:#fff;
    text-decoration: none;
    
 }


 /* ── Admin Design Tokens ─────────────────────────── */
 :root {
   --admin-primary: #1a56db;
   --admin-primary-dk: #1340a8;
   --admin-primary-lt: #3b82f6;
   --admin-accent: #0ea65c;
   --admin-dark: #0a0a0f;
   --admin-dark2: #111118;
   --admin-dark3: #1a1a24;
   --admin-surface: #ffffff;
   --admin-border: rgba(26,86,219,.15);
   --admin-text: #1f2937;
   --admin-text-muted: #6b7280;
   --admin-radius: 14px;
   --admin-font: 'Segoe UI', system-ui, -apple-system, sans-serif;
 }

 /* ── Admin Login Page ────────────────────────────── */
 .admin-login-wrapper {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #0a0a0f 0%, #0a1628 50%, #0a0a0f 100%);
   position: relative;
   overflow: hidden;
   font-family: var(--admin-font);
 }
 .admin-login-wrapper::before {
   content: '';
   position: absolute;
   width: 600px; height: 600px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(26,86,219,.18) 0%, transparent 65%);
   top: 30%; left: 50%;
   transform: translate(-50%, -50%);
   pointer-events: none;
 }
 .admin-login-card {
   position: relative;
   z-index: 2;
   width: 100%;
   max-width: 440px;
   background: rgba(255,255,255,.03);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
   border: 1px solid rgba(255,255,255,.08);
   border-radius: 24px;
   padding: 48px 40px 40px;
   box-shadow: 0 32px 80px rgba(0,0,0,.5);
 }
 .admin-login-card .login-logo {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 36px;
 }
 .admin-login-card .login-logo .logo-icon {
   width: 48px; height: 48px;
   border-radius: 14px;
   background: linear-gradient(135deg, var(--admin-primary), var(--admin-primary-dk));
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.4rem;
   color: #fff;
   box-shadow: 0 4px 20px rgba(26,86,219,.4);
 }
 .admin-login-card .login-logo h3 {
   color: #fff;
   font-size: 1.35rem;
   font-weight: 700;
   margin: 0;
   letter-spacing: -.02em;
 }
 .admin-login-card .login-logo p {
   color: rgba(255,255,255,.4);
   font-size: .82rem;
   margin: 2px 0 0;
 }
 .admin-login-card label {
   color: rgba(255,255,255,.6);
   font-size: .82rem;
   font-weight: 600;
   letter-spacing: .04em;
   text-transform: uppercase;
   margin-bottom: 8px;
   display: block;
 }
 .admin-login-card .form-control {
   background: rgba(255,255,255,.06);
   border: 1.5px solid rgba(255,255,255,.1);
   border-radius: 12px;
   color: #fff;
   padding: 13px 16px;
   font-size: .95rem;
   transition: all .25s;
 }
 .admin-login-card .form-control:focus {
   border-color: var(--admin-primary);
   background: rgba(255,255,255,.08);
   box-shadow: 0 0 0 3px rgba(26,86,219,.15);
   color: #fff;
 }
 .admin-login-card .form-control::placeholder {
   color: rgba(255,255,255,.25);
 }
 .admin-login-card .btn-admin-login {
   width: 100%;
   background: linear-gradient(135deg, var(--admin-primary), var(--admin-primary-dk));
   border: none;
   border-radius: 12px;
   color: #fff;
   padding: 14px;
   font-size: .95rem;
   font-weight: 700;
   cursor: pointer;
   transition: all .3s;
   box-shadow: 0 6px 24px rgba(26,86,219,.35);
   position: relative;
   overflow: hidden;
 }
 .admin-login-card .btn-admin-login:hover {
   transform: translateY(-2px);
   box-shadow: 0 10px 36px rgba(26,86,219,.5);
 }
 .admin-login-card .btn-admin-login:disabled {
   opacity: .6;
   transform: none;
 }
 .admin-login-card .login-footer {
   text-align: center;
   margin-top: 20px;
 }
 .admin-login-card .login-footer a {
   color: var(--admin-primary-lt);
   font-weight: 600;
   text-decoration: none;
   transition: color .2s;
 }
 .admin-login-card .login-footer a:hover {
   color: #fff;
 }
 .admin-login-card .login-footer p {
   color: rgba(255,255,255,.35);
   font-size: .85rem;
   margin: 0;
 }
 .admin-login-card .alert {
   border-radius: 12px;
   border: none;
   font-size: .88rem;
   padding: 12px 16px;
 }
 .admin-login-card .alert-success {
   background: rgba(34,197,94,.12);
   color: #22c55e;
 }
 .admin-login-card .alert-danger {
   background: rgba(239,68,68,.12);
   color: #ef4444;
 }

 @media (max-width: 480px) {
   .admin-login-card { padding: 32px 24px 28px; margin: 16px; }
 }

 /* ── Admin Dashboard Header/Nav ──────────────────── */
 .admin-topbar {
   background: linear-gradient(135deg, var(--admin-dark) 0%, #0a1628 100%);
   border-bottom: 2px solid var(--admin-primary);
   padding: 0 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 64px;
 }
 .admin-topbar .brand { display: flex; align-items: center; gap: 12px; }
 .admin-topbar .brand img { height: 36px; object-fit: contain; }
 .admin-topbar .brand-name {
   color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: -.01em;
 }

 .nav-dashboard {
   background: linear-gradient(180deg, var(--admin-dark) 0%, var(--admin-dark2) 100%) !important;
   border-right: 1px solid rgba(255,255,255,.06);
   padding-top: 8px !important;
 }

 .main-nav-list {
   gap: 4px;
 }
 .main-nav-list li {
   background: transparent;
   border: none;
   border-radius: 10px;
   color: rgba(255,255,255,.7);
   padding: 12px 16px !important;
   font-size: .9rem;
   font-weight: 500;
   transition: all .2s;
   margin: 2px 6px;
   cursor: pointer;
 }
 .main-nav-list li:hover {
   background: rgba(26,86,219,.1);
   color: #fff;
 }
 .main-nav-list li i {
   color: var(--admin-primary-lt);
   margin-right: 4px;
 }
 .main-nav-list a.text-decoration-none:has(li:hover) li,
 .main-nav-list li.active-nav {
   background: linear-gradient(135deg, rgba(26,86,219,.15), rgba(26,86,219,.06));
   color: #fff;
   border-left: 3px solid var(--admin-primary);
 }

 /* ── Dashboard Cards ────────────────────────────── */
 .article-container {
   background: var(--admin-surface);
   padding: 24px;
   box-sizing: border-box;
   border-radius: var(--admin-radius);
   margin: 8px;
   color: var(--admin-text);
   border: 1px solid rgba(0,0,0,.06);
   box-shadow: 0 1px 3px rgba(0,0,0,.06);
   transition: all .3s;
   position: relative;
   overflow: hidden;
 }
 .article-container::before {
   content: '';
   position: absolute;
   top: 0; left: 0; right: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--admin-primary), var(--admin-primary-lt));
 }
 .article-container:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 40px rgba(0,0,0,.1);
 }
 .article-container h4 {
   font-size: .88rem;
   font-weight: 600;
   color: var(--admin-text-muted);
   text-transform: uppercase;
   letter-spacing: .06em;
   margin-bottom: 10px;
 }
 .article-container h4 i {
   color: var(--admin-primary);
 }
 .article-container h5 {
   font-size: 2rem;
   font-weight: 800;
   color: var(--admin-text);
   letter-spacing: -.02em;
   margin-bottom: 4px;
 }
 .article-container p {
   font-size: .82rem;
   color: var(--admin-text-muted);
   margin-bottom: 12px;
 }
 .article-container .progress {
   height: 6px;
   border-radius: 6px;
   background: rgba(0,0,0,.06);
 }

 .dashboard-contents {
   background: #f8f9fb;
   min-height: calc(100vh - 64px);
 }

 .form-label {
   color: var(--admin-primary) !important;
   font-weight: 600;
   font-size: .85rem;
 }

 /* ── Admin Manager ──────────────────────────────── */
 .adminManager h4 {
   font-size: 1.1rem;
   color: var(--admin-primary);
   border-bottom: 2px solid var(--admin-border);
   padding: 8px 0;
   box-sizing: border-box;
   font-weight: 700;
 }

 .modal-header {
   background: linear-gradient(135deg, var(--admin-primary), var(--admin-primary-dk));
   color: #fff;
   border: none;
 }

 .modal-body div label {
   color: var(--admin-primary) !important;
   font-weight: 600;
 }

 .modal-content {
   border-radius: 16px;
   overflow: hidden;
   border: none;
 }

 /* ── Admin btn overrides (scoped to admin) ─────── */
 .dashboard-container .btn-primary,
 .admin-login-card .btn-admin-login {
   background: linear-gradient(135deg, var(--admin-primary), var(--admin-primary-dk)) !important;
   border: none !important;
 }

 /* ── Table improvements ─────────────────────────── */
 .dashboard-contents table thead {
   background: linear-gradient(135deg, var(--admin-dark), var(--admin-dark2)) !important;
   color: #fff;
 }
 .dashboard-contents table thead th {
   font-size: .8rem;
   font-weight: 600;
   letter-spacing: .04em;
   text-transform: uppercase;
   padding: 14px 12px;
   white-space: nowrap;
   border: none;
 }
 .dashboard-contents .table-striped > tbody > tr:nth-of-type(odd) > * {
   background-color: rgba(26,86,219,.03);
 }
 .dashboard-contents .sortdashboard {
   border: 1.5px solid var(--admin-border);
   border-radius: 10px;
   padding: 10px 14px;
   font-weight: 600;
   max-width: 240px;
 }
 .dashboard-contents .sortdashboard:focus {
   border-color: var(--admin-primary);
   box-shadow: 0 0 0 3px rgba(26,86,219,.1);
 }

 /* ── Password Eye Toggle ──────────────────────── */
 .pwd-wrap {
   position: relative;
 }
 .pwd-wrap .form-control {
   padding-right: 48px;
 }
 .pwd-toggle {
   position: absolute;
   top: 50%; right: 14px;
   transform: translateY(-50%);
   background: none;
   border: none;
   color: rgba(255,255,255,.4);
   font-size: 1.05rem;
   cursor: pointer;
   padding: 4px;
   line-height: 1;
   transition: color .2s;
   z-index: 2;
 }
 .pwd-toggle:hover {
   color: var(--admin-primary-lt);
 }