/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.container {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;   
}
/* TOP HEADER */
.top-header {
  background-color: #000;
  color: #fff;
  font-size: 14px;
  padding: 6px 0;
}

/* Flex container just for the top bar */
.top-container {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Left side: contact */
.top-header .contact-info {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.top-header .contact-info a {
  color: #fff;
  text-decoration: none;
}

.top-header .contact-info span {
  display: inline-flex;
  align-items: center;
}

.top-header i {
  color: orange;
  margin-right: 6px;
  font-size: 15px;
}

/* Right side: auth links */
.top-header .auth-links {
  display: flex;
  gap: 15px;
}

.top-header .auth-links a {
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
}

.top-header .auth-links a:hover {
  color: #1d6cff;
}

/* Header: center nav under logo, keep existing items */
.top-header .top-container {
  display: grid;
  grid-template-columns: auto 1fr auto; /* logo | nav | auth/extra */
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 5px     10px;
}

/* Keep logo left */
.top-header .logo {
  justify-self: start;
  display: flex;
  align-items: center;
}

/* Center navigation and make it full width for spacing */
.top-header .nav-links {
  justify-self: center;
  width: 100%;
  max-width: 920px;
}

/* Evenly spaced nav items across the center column */
.top-header .nav-links ul {
  display: flex;
  gap: 40px;
  justify-content: space-evenly;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

/* Basic link look */
.top-header .nav-links a {
  color: #111;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.6px;
  text-decoration: none;
  padding: 6px 4px;
  border-bottom: 3px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}



/* Keep auth/login area on the right */
.top-header .auth-links {
  justify-self: end;
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Responsive: collapse gap for smaller screens */
@media (max-width: 880px) {
  .top-header .nav-links ul { gap: 18px; }
  .top-header .top-container { grid-template-columns: auto 1fr; } /* hide auth if no area */
  .top-header .auth-links { display: none; } /* your existing mobile menu button should replace */
}

/* TABLET: tighten spacing a bit */
@media (max-width: 992px) {
  .top-header {
    font-size: 13px;
  }

  .top-container {
    width: 95%;
  }
}

/* MOBILE: stack items & center them */
@media (max-width: 600px) {
  .top-container {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
  }

  .top-header .contact-info,
  .top-header .auth-links {
    justify-content: center;
  }

  .top-header .contact-info {
    gap: 8px;
  }

  .top-header .auth-links {
    gap: 10px;
  }
}

/* PROMO SLIDING BANNER */
.promo-banner {
    width: 100%;
    background: linear-gradient(90deg, #0f3686, #1d6cff);
    color: #fff;
    overflow: hidden;
    padding: 0 14px;
    position: relative;
    z-index: 40;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.promo-slide {
    display: flex;
    gap: 70px;
    white-space: nowrap;
    animation: slideText 15s linear infinite;
    align-items: center;
    padding-inline: 22px;
    
}

.promo-slide span {
    font-size: 15px;
    font-weight: 500;
     padding: 0 20px;
}

@keyframes slideText {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* NAVIGATION */
.nav-bar {
    background-color: #fff;
    padding: 16px 0;
    border-bottom: 1px solid #eee;
    min-height: 88px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
:root{
  --logo-h: 70px;       /* visual header/logo height */
  --logo-box: 290px;    /* tuned visible logo width */
}
.logo{
     
    height: var(--logo-h);
  width: var(--logo-box);
  overflow: hidden;              /* crop the transparent padding */
  display: flex;
  align-items: center;

}

.logo a {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}

.logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}
     

.nav-links ul {
    display: flex;
  justify-content: center; /* center items for better spacing */
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 40px;
}

/* Font, sizing and subtle spacing */
.nav-links a {
    color: #111;
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: 0.35px;
    text-decoration: none;
    padding: 8px 8px;
    display: inline-block;
    transition: color .14s ease, transform .14s ease;
    text-transform: uppercase;
}

/* Hover effect for all nav links (no underline) */
.nav-bar .nav-links a:hover {
  color: #1d6cff;
  transform: translateY(-3px); /* subtle lift */
  box-shadow: 0 10px 18px rgba(124,58,237,0.06);
  text-decoration: none;
}

/* Active link: purple color only (no underline/bottom-border) */
.nav-bar .nav-links a.active {
  color: #1d6cff;
  border-bottom: none; /* remove underline */
  transform: none;
  box-shadow: none;
}

/* Right side auth/menu controls */
.nav-bar .menu-toggle,
.nav-bar .auth-links {
  justify-self: end;
}

/* Responsive: collapse nav to hamburger at small widths */
@media (max-width: 880px) {
  .nav-bar .container {
    padding: 8px 16px;
  }
  .nav-bar .nav-links ul { display: none; }
  .nav-bar .nav-links ul.show {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: #fff;
    width: 100%;
  }
  .nav-bar .logo img { height: 52px; }
  .nav-bar .nav-links a { font-size: 14px; }
}

/* ===================== RESPONSIVE ===================== */

/* Tablet and below */
@media (max-width: 992px) {
  .container {
    width: 95%;
  }

  .menu-toggle {
    display: block;
  }

  .nav-links ul {
    display: none;
    flex-direction: column;
    background: #fff;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border-top: 1px solid #eee;
    z-index: 1000;
    padding: 15px 0;
  }

  .nav-links ul.show {
    display: flex;
  }

  .nav-links li {
    margin: 10px 0;
    text-align: center;
  }

  .nav-bar .container {
    flex-wrap: wrap;
  }

  .logo img {
    height: 60px;
    transform: scale(1.4);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .top-header {
    font-size: 12px;
    text-align: center;
  }

  .top-header .container {
    flex-direction: column;
    align-items: center;
  }

  .logo {
    justify-content: center;
    width: 100%;
    margin-bottom: 10px;
  }

  .nav-bar {
    padding: 5px 0;
  }

  .logo img {
    height: 50px;
    transform: scale(1.3);
  }
}
.top-header .top-container {
    padding: 10px 18px; /* Reduce padding for a slightly smaller container */
}
/* HERO SECTION */
.hero {
  position: relative;
  background:linear-gradient(135deg, #0047ab, #0a2b6d);
  color: #fff;
  text-align: center;
  padding: 76px 0 52px;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 26px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.22), rgba(255,255,255,0));
  pointer-events: none;
}

.hero-container {
  width: min(1100px, 92%);
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  line-height: 1.12;
  margin-bottom: 6px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* TABS */
.parcel-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.parcel-tabs button {
  background: #dbe7ff;
  color: #0f3686;
  border: 1px solid #bfdbfe;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
  font-size: 0.84rem;
}

.parcel-tabs button.active,
.parcel-tabs button:hover {
  background: #1d6cff;
  color: #fff;
}

/* FORM BOX */
.parcel-form {
  background: #fff;
  color: #333;
  border-radius: 14px;
  padding: 24px 26px;
  box-shadow: 0 12px 30px rgba(0, 28, 72, 0.11);
  text-align: left;
  border: 1px solid #dbe3f0;
}

.parcel-type {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.parcel-type button {
  border: 1px solid #d0dcf7;
  background: #f6f9ff;
  color: #1f3b6b;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
  font-size: 0.86rem;
}

.parcel-type button.active,
.parcel-type button:hover {
  background: #1d6cff;
  color: #fff;
  border-color: #1d6cff;
}

/* INPUTS */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.form-group {
  flex: 1;
  min-width: 150px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.87rem;
  color: #334155;
}

.form-group select,
.form-group input {
  width: 100%;
  padding: 10px 11px;
  border-radius: 8px;
  border: 1px solid #cfd8ea;
  outline: none;
  font-size: 0.95rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.form-group select:focus,
.form-group input:focus {
  border-color: #1d6cff;
  box-shadow: 0 0 0 3px rgba(29, 108, 255, 0.14);
}

/* ADD PACKAGE BUTTON */
.add-package {
  background: #fff;
  color: #1d6cff;
  border: 2px solid #1d6cff;
  border-radius: 20px;
  padding: 6px 20px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.3s;
  margin-top: 10px;
}

.add-package:hover {
  background: #1d6cff;
  color: #fff;
}
.submit-btn {
  background-color: #1d6cff;
  color: #fff;
  border: none;
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: 0.3s;
}

.submit-btn:hover {
  background-color: #1242a6;
}
/* Show only the selected calculator */
.parcel-form { display: none; }
.parcel-form.active { display: block; }

.tab-btn.active { background: #1d6cff; color: #fff; }
.package-block {
  background: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
  border: 1px solid #e0e0e0;
  position: relative;
}

.package-block h4 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* REMOVE BUTTON */
.remove-package {
  position: absolute;
  top: 10px;
  right: 12px;
  background: #ff4d4d;
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  padding: 0;
  transition: 0.3s;
}

.remove-package:hover {
  background: #cc0000;
  transform: scale(1.1);
}

/* Add package button */
.add-package {
  margin-top: 10px;
  background: #1d6cff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s ease;
}

.add-package:hover {
  background: #1d6cff;
}

/* LOGISTICS SECTION - NATURAL BLENDED DESIGN */
.logistics-section {
    padding: 24px 0 18px;
    background: white; /* White base to blend naturally with the page */
    position: relative;
    overflow: hidden;
}

/* Soft fade of light blue from bottom upward (very subtle) */
.logistics-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55%;
    background: linear-gradient(to top, #eef3ff 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Optional ultra-faint texture overlay */
.logistics-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url("https://www.transparenttextures.com/patterns/cubes.png");
    opacity: 0.03;
    pointer-events: none;
}

/* FLEX LAYOUT */
.logistics-container {
    width: 90%;
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    position: relative;
    z-index: 2; /* ensures content stays above soft background */
}

/* LEFT TEXT BLOCK */
.logistics-text {
    flex: 1;
    animation: fadeInLeft 1s ease-out forwards;
    opacity: 0;
    border-left: 5px solid #1d6cff;
    padding-left: 20px;
}

.logistics-text h2 {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 800;
    line-height: 1.2;
    color: #0e0e0e;
    margin-bottom: 12px;
}

.logistics-text p {
    font-size: 1.02rem;
    line-height: 1.7;
    color: #444;
    max-width: 600px;
}

/* IMAGE BLOCK */
.logistics-image {
    flex: 1;
    animation: fadeInRight 1s ease-out forwards;
    opacity: 0;
}

.logistics-image img {
    width: 100%;
    max-height: 410px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    object-fit: cover;
}

.logistics-image img:hover {
    transform: scale(1.03);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
}

/* ANIMATIONS */
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .logistics-container {
        flex-direction: column;
        text-align: center;
    }

    .logistics-text {
        border-left: none;
        padding-left: 0;
        border-top: 5px solid #1d6cff;
        padding-top: 20px;
    }

    .logistics-text p {
        margin: 0 auto;
    }
}



/* ================================
   SERVICES SECTION
=================================*/
.value-services {
  padding: 36px 5% 42px;
  background: linear-gradient(135deg, #f3f7ff, #ffffff);
  font-family: 'Poppins', sans-serif;
  
}

.section-title {
  text-align: center;
  font-size: clamp(1.9rem, 3.2vw, 2.4rem);
  font-weight: 700;
  color: #2a1a47;
  margin-bottom: 34px;
}

/* 3×3 GRID */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

@media screen and (max-width: 1024px) {
  .value-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .value-grid {
    grid-template-columns: 1fr;
  }
}


.value-card {
  background:#ffffff;
  padding: 20px;
  border-radius: 18px;
  border: 1.5px solid #eaeaea;
  box-shadow: 0 10px 20px rgba(0,0,0,0.06);
  transition: all .35s ease;
  text-align: left;
  position: relative;
}

/* Hover Effects */
.value-card:hover {
  transform: translateY(-12px);
  border-color: #1d6cff;
  box-shadow: 0 25px 55px rgba(139, 92, 246, .25);
  background: #f3f7ff;
}

.service-icon svg {
  width: 55px;
  height: 55px;
  stroke: #1d6cff;
  stroke-width: 2px;
  margin-bottom: 20px;
  transition: .35s ease;
}

.value-card:hover .service-icon svg {
  stroke: #1242a6;
  transform: scale(1.1);
  filter: drop-shadow(0px 0px 8px rgba(139, 92, 246, .35));
}

.service-card h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #2d1847;
  transition: .3s;
}

.service-card:hover h3 {
  color: #1242a6;
}

.service-card p {
  font-size: 1rem;
  color: #555;
  margin-bottom: 20px;
  line-height: 1.6;
}
.service-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  position: relative;
   background:#ffffff;
  padding: 20px;
  border-radius: 18px;
  border: 1.5px solid #eaeaea;
  box-shadow: 0 10px 20px rgba(0,0,0,0.06);
  text-align: left;
}

.service-card:hover {
  transform: translateY(-10px) scale(1.015);
  box-shadow: 0 18px 45px rgba(0,0,0,0.15);
}

/* Glowing border effect */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #1d6cff, #22c55e);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.service-card:hover::before {
  opacity: 0.18;
}

/* Button hover effect */
.service-btn {
  transition: transform 0.3s ease, background 0.3s ease;
   display: inline-block;
  margin-top: 18px;
  padding: 12px 26px;
  background: linear-gradient(135deg, #1242a6, #1d6cff);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(98, 0, 255, 0.25);
  transition: all 0.3s ease;
}

.service-btn:hover {
  background: linear-gradient(135deg, #1242a6, #1d6cff);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(98, 0, 255, 0.35);
}

.service-btn:active{
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(98, 0, 255, 0.25);
}
.service-icon {
  font-size: 42px;
  color: #1d6cff;
  transition: transform 0.8s ease, opacity 0.8s ease;
  transform: translateY(25px) rotate(-8deg);
  opacity: 0;
}

.service-card.show .service-icon {
  transform: translateY(0) rotate(0deg);
  opacity: 1;
}



/* Stores Section */
.stores-section {
  text-align: center;
  padding: 42px 0 50px;
  background: linear-gradient(to bottom, #f7faff, #ffffff);
}

.stores-section h2 {
  font-size: 2.2rem;
  font-weight: 800;
  color: #0b1b3f;
  margin-bottom: 18px;
}

.stores-section h2 span {
  font-size: 1.1rem;
  color: #6a5af9;
  font-weight: 500;
}

/* Slider Wrapper */
.stores-slider {
  width: 100%;
  overflow: hidden;
  padding: 25px 0;
}

/* Track */
.stores-track {
  display: flex;
  gap: 40px;
  animation: scrollStores 25s linear infinite;
}

@keyframes scrollStores {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Store Card */
.store-card {
  min-width: 140px;
  height: 90px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transition: .3s ease;
}

.store-card img {
  width: 90px;
  height: auto;
  object-fit: contain;
  filter: grayscale(20%);
  opacity: 0.9;
  transition: .3s ease;
}

.store-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

.store-card:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* Button */
.store-btn-wrap {
  margin-top: 40px;
}

.store-btn {
  background: #6a5af9;
  color: #fff;
  padding: 12px 32px;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 600;
  transition: .3s ease;
}

.store-btn:hover {
  background: #4c3ceb;
}

/* FOOTER */
.footer {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #e2e8f0;
  font-family: 'Poppins', sans-serif;
  margin-top: 80px;
}

.footer-main {
  padding: 60px 5% 30px;
}

.footer-container {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr;
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ABOUT COLUMN */
.footer-about {
  padding-right: 20px;
}

.footer-logo {
  width: 160px;
  height: auto;
  margin-bottom: 20px;
  filter: brightness(1.1);
}

.footer-desc {
  font-size: 14px;
  line-height: 1.7;
  color: #cbd5e1;
  margin-bottom: 25px;
}

/* COLUMN HEADINGS */
.footer-col h4 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  padding-bottom: 10px;
}

.footer-col h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #1d6cff, #60a5fa);
  border-radius: 2px;
}

/* LINKS */
.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li {
  margin-bottom: 12px;
}

.footer-col ul li a {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
  display: inline-block;
  position: relative;
}

.footer-col ul li a:hover {
  color: #60a5fa;
  padding-left: 5px;
}

/* CONTACT INFO */
.footer-contact-list {
  list-style: none;
  padding: 0;
}

.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.6;
}

.footer-contact-list i {
  color: #60a5fa;
  font-size: 16px;
  min-width: 20px;
  margin-top: 2px;
}

.footer-contact-list span {
  flex: 1;
}

.footer-contact-list a {
  color: #93c5fd;
  text-decoration: none;
  border-bottom: 1px dashed rgba(147, 197, 253, 0.45);
}

.footer-contact-list a:hover {
  color: #dbeafe;
  border-bottom-color: rgba(219, 234, 254, 0.8);
}

/* SOCIAL ICONS */
.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.1);
  color: #60a5fa;
  font-size: 16px;
  transition: all 0.3s ease;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.footer-social a:hover {
  background: #1d6cff;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4);
  border-color: #1d6cff;
}

/* FOOTER BOTTOM */
.footer-bottom {
  background: rgba(0, 0, 0, 0.3);
  padding: 20px 5%;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.footer-bottom p {
  color: #94a3b8;
  font-size: 14px;
  margin: 0;
}

.footer-bottom-links {
  display: flex;
  gap: 20px;
}

.footer-bottom-links a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
  color: #60a5fa;
}

/* FOOTER RESPONSIVE */
@media (max-width: 1200px) {
  .footer-container {
    grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
    gap: 35px;
  }
  
  .footer-col:nth-child(4) {
    display: none;
  }
}

@media (max-width: 900px) {
  .footer-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
  
  .footer-about {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .footer-main {
    padding: 40px 5% 25px;
  }
  
  .footer-container {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  
  .footer-about {
    grid-column: 1;
    text-align: center;
  }
  
  .footer-logo {
    width: 140px;
  }
  
  .footer-social {
    justify-content: center;
  }
  
  .footer-col h4::after {
    left: 0;
  }
  
  .footer-bottom-container {
    flex-direction: column;
    text-align: center;
  }
  
  .footer-bottom-links {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .footer-social a {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  
  .footer-contact-list li {
    font-size: 13px;
  }
}
/*auth login page*/
/* ============================
   AUTH PAGE (Login & Register)
   ============================ */

.auth-page {
    background: url("/images/auth-background.jpg") no-repeat center center/cover;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Poppins", sans-serif;
    padding: 20px;
}

/* White card container */
.auth-wrapper {
    width: 420px;
    background: #ffffff;
    padding: 25px 35px;
    border-radius: 16px;
    box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.12);
    text-align: center;
    animation: fadeIn 0.6s ease-in-out;
}

/* Logo styling */
.auth-logo {
    width: 300px;
    margin-bottom: 5px;
}

/* Main headings */
.auth-wrapper h2 {
    font-size: 28px;
    color: #111827;
    margin-bottom: 5px;
}

.auth-wrapper p {
    font-size: 14px;
    color: #4b5563;
    margin-bottom: 25px;
}

/* Form styling */
.auth-wrapper form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Input fields */
.auth-wrapper input {
    width: 100%;
    padding: 13px 15px;
    font-size: 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    outline: none;
    transition: 0.25s ease;
    background: #f9fafb;
}

.auth-wrapper input:focus {
    border-color: #1d6cff;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

/* Password field wrapper */
.password-container {
    position: relative;
    width: 100%;
}

.password-container i.toggle-password {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    cursor: pointer;
    font-size: 15px;
}

/* Forgot password link */
.forgot-link {
    font-size: 13px;
    color: #1242a6;
    text-align: left;
    display: inline-block;
    margin-bottom: 10px;
}

/* Login button */
.auth-wrapper button {
    width: 100%;
    padding: 12px 0;
    background: #1d4ed8;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s;
}

.auth-wrapper button:hover {
    background: #1e40af;
}

/* Register redirect text */
.auth-wrapper a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

.auth-wrapper a:hover {
    text-decoration: underline;
}

/* Small screens */
@media (max-width: 480px) {
    .auth-wrapper {
        width: 90%;
        padding: 30px 20px;
    }
    .auth-logo {
        width: 120px;
    }
}

/* Smooth fade animation */
@keyframes fadeIn {
    from {opacity: 0; transform: translateY(20px);}
    to {opacity: 1; transform: translateY(0);}
}

/* ====== Consolidated header / nav styles (replace conflicting blocks) ====== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: rgba(255,255,255,0.98);
  box-shadow: 0 6px 18px rgba(12, 30, 60, 0.04);
}

.header .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 24px; /* Increase padding for a slightly larger container */
  display: grid;
  grid-template-columns: auto 1fr auto; /* logo | nav | actions */
  align-items: center;
  gap: 24px;
}

/* Logo left, larger and controlled by CSS (no inline styles needed) */
.logo {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo img {
  height: 160px; /* Increase height for better visibility */
  max-width: 240px; /* Adjust max-width if needed */
  object-fit: contain;
  display: block;
}

/* Nav centered and constrained so items stay inside the container */
.nav-links {
  justify-self: center;
  width: 100%;
  max-width: 920px;
}
.nav-links ul {
  list-style: none;
  display: flex;
  justify-content: center; /* center items across the middle column */
  gap: 26px;
  align-items: center;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

/* Duplicate removed - using main nav-links a rule above */
.nav-links a:hover {
  color: #1d6cff;
  transform: translateY(-3px);
}
.nav-links a.active {
  color: #1d6cff; /* active shows color only, no underline */
  transform: none;
  box-shadow: none;
}

/* Right-side controls (menu toggle / auth) */
.menu-toggle {
  justify-self: end;
  display: none;
}

/* Responsive: collapse to hamburger on narrow screens */
@media (max-width: 992px) {
  .menu-toggle { display: block; }
  .nav-links ul { display: none; }
  .nav-links ul.show {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    padding: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    z-index: 2500;
  }
  .logo img { height: 52px; }
}

/* Remove/override any later conflicting rules that set .nav-bar/.header container to flex.
   If there are duplicate blocks lower in the file, keep this block later in the file (near the end)
   so it wins, or remove the older conflicting block. */
/* ...existing code... */
.result-card { display:none; }
.result-card.track-visible { display:block; }   /* fine with the JS change */
/* or use this more robust rule:
.result-card:not([hidden]) { display:block; }
*/

/* ===== Final Responsive Overrides (authoritative) ===== */
.nav-bar .logo {
  width: auto !important;
  height: 46px !important;
  overflow: visible !important;
}

.nav-bar .logo a {
  display: block !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

.nav-bar .logo img {
  width: auto !important;
  height: 46px !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: none !important;
  margin: 0 !important;
}

@media (max-width: 1280px) {
  .nav-links ul {
    gap: 28px !important;
  }
  .nav-links a {
    font-size: 14.5px !important;
  }
}

@media (max-width: 992px) {
  .nav-bar {
    min-height: 80px;
    padding: 14px 0;
  }

  .nav-bar .logo {
    width: auto !important;
    height: 42px !important;
  }

  .nav-links ul {
    gap: 12px !important;
  }
}

@media (max-width: 768px) {
  .nav-bar {
    min-height: 72px;
    padding: 12px 0;
  }

  .nav-bar .logo {
    width: auto !important;
    height: 40px !important;
    margin: 0 auto !important;
  }

  .nav-bar .logo img {
    height: 40px !important;
  }
}

@media (max-width: 480px) {
  .nav-bar {
    min-height: 64px;
    padding: 10px 0;
  }

  .nav-bar .logo {
    width: auto !important;
    height: 34px !important;
  }

  .nav-bar .logo img {
    height: 34px !important;
  }
}

/* ===== Administration Dropdown (home nav) ===== */
.nav-links li.has-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  border: none;
  background: transparent;
  color: #111;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  padding: 8px 8px;
  cursor: pointer;
  transition: color .14s ease, transform .14s ease;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.active,
.nav-links li.has-dropdown.open > .nav-dropdown-toggle,
.nav-links li.has-dropdown:focus-within > .nav-dropdown-toggle {
  color: #1d6cff;
  transform: translateY(-3px);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 190px;
  background: #fff;
  border: 1px solid #dbe3f0;
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.15);
  padding: 8px 0;
  z-index: 2200;
}

.nav-dropdown-menu li {
  margin: 0 !important;
}

.nav-dropdown-menu a {
  display: block;
  text-transform: none;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 14px !important;
  color: #0f172a;
  transform: none !important;
}

.nav-dropdown-menu a:hover {
  background: #eff6ff;
  color: #1d6cff;
  box-shadow: none !important;
}

.nav-links li.has-dropdown:hover > .nav-dropdown-menu,
.nav-links li.has-dropdown:focus-within > .nav-dropdown-menu,
.nav-links li.has-dropdown.open > .nav-dropdown-menu {
  display: block;
}

@media (max-width: 992px) {
  .nav-links li.has-dropdown {
    width: 100%;
  }

  .nav-dropdown-toggle {
    width: 100%;
    text-align: center;
  }

  .nav-dropdown-menu {
    position: static;
    min-width: 100%;
    margin-top: 8px;
    border-radius: 8px;
    box-shadow: none;
    border: 1px solid #e2e8f0;
  }
}

/* ===== Mobile Nav Click Fix ===== */
.menu-toggle {
  border: none;
  background: transparent;
  cursor: pointer;
  color: #1d6cff;
  font-size: 24px;
  line-height: 1;
  padding: 8px;
}

@media (max-width: 992px) {
  .nav-bar .container {
    position: relative;
    align-items: center;
  }

  .nav-bar .menu-toggle {
    display: block;
    margin-left: auto;
    z-index: 3000;
  }

  .nav-bar .nav-links {
    width: 100%;
    max-width: none;
    order: 3;
  }

  .nav-bar .nav-links ul {
    display: none !important;
    position: static !important;
    width: 100% !important;
    margin-top: 10px;
    padding: 12px 0;
    background: #fff;
    border-top: 1px solid #eee;
  }

  .nav-bar .nav-links ul.show {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}