/* --- RESET & BODY SETUP --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  background-color: var(--app-bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.app-container {
  width: 100%;
  max-width: none; /* The Constraint */
  min-height: 100dvh;   /* iOS-friendly */
  background-color: var(--bg-color);
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,0.1); 
}

@media (hover: hover) and (pointer: fine) {
  .app-container {
    max-width: 390px;
    margin: 0 auto;
    min-height: 100vh;
  }
}

.app-container::-webkit-scrollbar {
  display: none;
}

/* Hide Scrollbar for IE, Edge and Firefox */
.app-container {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}


/* --- HEADER SECTION --- */

/* .app-header {
  width: 100%;
  height: 60px;
  background: var(--header-gradient);
  
  display: flex;
  align-items: center;
  padding-left: 9px;
  padding-right: 9px;
  
  position: relative;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.menu-btn {
  background: transparent;
  border: none;
  color: var(--black); 
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.logo-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); 
  
  width: 184px; 
  display: flex;
  justify-content: center;
}

.app-logo {
  width: 100%; 
  height: auto;
  object-fit: contain;
} */

/* --- UPDATED HEADER --- */
.app-header {
  width: 100%;
  height: 60px;
  background: var(--header-gradient, #FFCC00); /* Fallback to yellow if var missing */
  
  display: flex;
  align-items: center;
  justify-content: space-between; /* Pushes Menu to left, Search to right */
  padding-left: 15px;
  padding-right: 15px;
  
  position: relative;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 100; /* Ensure header stays on top */
}

/* Menu Button */
.menu-btn {
  background: transparent;
  border: none;
  color: #000; 
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 2; /* Clickable above logo layer */
}

/* Logo (Centered Absolutely) */
.logo-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); 
  width: 184px; 
  display: flex;
  justify-content: center;
  z-index: 1;
}

.app-logo {
  width: 100%; 
  height: auto;
  object-fit: contain;
}

/* Right Search Icon */
.search-toggle-btn {
  background: transparent;
  border: none;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 2;
}

/* --- SEARCH BAR SECTION --- */
.search-bar-container {
  background-color: #FFCC00; /* DHL Yellow Background */
  padding: 10px 15px;
  width: 100%;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  position: absolute;
  z-index: 9999;
  
  /* Initial State: Hidden */
  display: none; 
  /* To animate it later, we usually use max-height or transform, 
     but for now display:none is simplest */
}

/* Class to show it (You can manually add this class in Inspect Element to test) */
.search-bar-container.active {
    display: block;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 4px;
  overflow: hidden; /* Clips the red button corners */
  height: 44px; /* Touch friendly height */
}

.search-input {
  flex-grow: 1;
  border: none;
  padding: 0 15px;
  font-size: 16px;
  height: 100%;
  outline: none;
  color: #333;
  font-family: inherit;
}

.search-input::placeholder {
  color: #888;
}

.search-submit-btn {
  background-color: #D40511; /* DHL Red */
  border: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
}

.search-submit-btn:active {
  background-color: #b0040e; /* Darker red on click */
}


/* --- CATEGORY SECTION --- */
.category-section {
  width: 100%;
  background-color: var(--bg-color);
  display: flex;
  overflow: hidden;

  border-bottom: 1px solid var(--border-color); /* Light grey */
  position: relative;
}

.category-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px; 
  overflow-x: auto;
  scroll-behavior: smooth;
  white-space: nowrap; 
  
  list-style: none;
  position: relative;
  padding-left: 18px; 
  padding-right: 18px;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  margin-bottom: 0px;

}

.category-list::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.category-item {
  font-family: 'Delivery', sans-serif; /* Fallback to sans-serif */
  font-weight: 700;
  font-size: 14px;
  color: #000000;
  padding: 13px 0px;
  
  cursor: pointer;
  flex-shrink: 0;
  
  transition: color 0.3s ease;
}

.active-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: var(--active-color);
  border-radius: 3px 3px 0 0;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  width: 0px;
}

/* Active State */
.category-item.active {
  color: var(--active-color);
}


/* Home Slider Section */
/* --- HOME SLIDER (Swiper) --- */
.home-slider-wrapper {
  width: 100%;
  margin-bottom: 40px;
  margin-top: 7px;
  min-height: 400px;
  position: relative;
}

.swiper-slide {
  width: 100%;
}

.slide-media-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  background: #f0f0f0;
}

.slide-media-wrapper img,
.slide-media-wrapper iframe,
.slide-media-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-content {
  padding: 20px 18px 0;
  text-align: left;
}

.slide-cat {
  display: block;
  font-family: 'Delivery Condensed', sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: #D40511;
  text-transform: uppercase;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.slide-title {
  font-family: 'Delivery Condensed', sans-serif;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
  color: #000;
  margin-bottom: 12px;
  display: block;
  text-decoration: none;
}

.slide-excerpt {
  font-family: 'Delivery', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.swiper-pagination-custom {
  position: absolute;
  top: 200px !important;
  text-align: center;
  width: 100%;
  height: fit-content;
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.6);
  opacity: 1;
  margin: 0 6px !important;
}

.swiper-pagination-bullet-active {
  background: #D40511 !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.8);
}



/* --- BANNER SECTION --- */
.banner-section {
  width: 100%;
  background-color: var(--black);
  color: var(--white);
  display: flex;
  flex-direction: column;

  margin-top: 7px;
}

.banner-image-wrapper {
  width: 100%;
  line-height: 0; 
}

.banner-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.banner-content {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.banner-title {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
  margin: 0;
  color: var(--white);
}

.banner-desc {
  font-family: 'Delivery', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.4; 
  margin: 0;
  opacity: 0.9;
}


/* --- NEWS / INSIGHTS SECTION --- */
.news-section {
  width: 100%;
  background-color: var(--bg-color);
  display: flex;
  flex-direction: column;
}

.news-item {
  padding: 20px 18px; 
  
  display: flex;
  flex-direction: column;
  gap: 8px; 
  
  border-bottom: 1px solid var(--border-color);
}

.news-item:last-child {
  border-bottom: none;
}

.news-title {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--black);
  line-height: 1.3;
  margin: 0;
}

.news-desc {
  font-family: 'Delivery', sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: #333333; 
  line-height: 1.4;
  margin: 0;
}

.news-tag {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 300;
  font-size: 12px;
  
  color: var(--dhl-red); 
  text-transform: uppercase; 
  margin-top: 4px; 
  letter-spacing: 0.5px;
}


.grid-news-section {
  width: 100%;
  padding: 24px 18px; 
  
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 15px; 
  

  border-top: 1px solid var(--border-color);

}

.view-all-stories-button-section {
  padding: 20px 18px;
  border-bottom: 1px solid var(--border-color);
  display: grid;
  place-items: center;

}

.view-all-stories-button-section a {
  color: #d40511;
  text-decoration: none;
  font-family: 'Delivery', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  padding: .6rem .8rem;
  width: 100%;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid #d40511;
  background: #FFFFFF;
}

.grid-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.grid-image-wrapper {
  width: 100%;
  aspect-ratio: 4/3; 
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 4px; 
}

.grid-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grid-title {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--black);
  line-height: 1.3;
  margin: 0 0 12px 0;
}

.grid-tag {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: var(--dhl-red);
  text-transform: uppercase;
  margin-top: auto; 
}


/* categories heading styles */
.category-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.view-stories-button {
  font-family: 'Delivery Condensed';
  font-size: 0.9rem;
  text-align: center;
  display: inline-block;
  width: fit-content;
  margin: 0 auto;
  margin-bottom: 20px;
  padding: .6rem .8rem;
  width: calc(100% - 36px);
  text-align: center;
  border-radius: 4px;
  border: 1px solid #d40511;
  text-decoration: none;
  color: #d40511;
  transition: .3s ease-in-out;
}

.view-stories-button:hover {
  background-color: #d40511;
  color: #FFFFFF;
}


/* --- INSIGHTS HORIZONTAL LIST SECTION --- */
.insights-list-section {
  width: 100%;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
}

.section-header {
  color: var(--dhl-red); 
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 800;
  font-size: 22px;
  padding-left: 18px;
}

.section-description {
  font-family: 'Delivery', sans-serif;
  padding: 0 18px;
  margin-bottom: 12px;

}

.horizontal-item {
  padding: 20px 18px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 15px; 
  border-bottom: 1px solid var(--border-color);
}

.horizontal-item:last-child {
  border-bottom: none;
}

.horizontal-img-wrapper {
  flex: 1; 
  aspect-ratio: 4/3;
  border-radius: 4px;
  overflow: hidden;
}

.horizontal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.horizontal-content {
  flex: 1; 
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.horizontal-title {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--black);
  line-height: 1.3;
  margin: 0 0 8px 0;
  
  display: -webkit-box;
  -webkit-line-clamp: 4; 
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.horizontal-tag {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: var(--dhl-red);
  text-transform: uppercase;
}




/* people section */
.people-section {
  width: 100%;
  background-color: var(--dhl-yellow); 
  padding-top: 24px;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.people-section .section-header {
  color: var(--dhl-red);
  margin-bottom: 16px;
}

.swiper {
  width: 100%;
  padding-bottom: 10px;
}

.people-card {
  width: 194px; 
  height: 340px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.people-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.people-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  
  background: var(--content-box-gradient);
  
  padding: 18px;
  padding-top: 40px;
}

.people-title {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--white);
  line-height: 1.2;
  margin: 0;
  
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}


/* Innovation section */

.innovation-section {
  width: 100%;
  background-color: var(--bg-color);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
}

.innovation-featured {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border-color);
}

.innovation-img-wrapper {
  width: 100%;
  height: 200px; 
  overflow: hidden;
}

.innovation-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.innovation-content {
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.innovation-title {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--black);
  line-height: 1.3;
  margin: 0;
}

.innovation-desc {
  font-family: 'Delivery', sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: #333333;
  line-height: 1.4;
  margin: 0;
}

.innovation-tag {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: var(--dhl-red);
  text-transform: uppercase;
  margin-top: 4px;
  letter-spacing: 0.5px;
}

.innovation-grid-wrapper {
  padding: 24px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  border-top: 1px solid var(--border-color);
}


/* --- OUR MISSION SECTION --- */
.mission-section-wrapper {
  background: linear-gradient(178.87deg, rgba(255, 204, 0, 0.65) 0.99%, rgba(255, 204, 0, 0.65) 30.41%, rgba(255, 204, 0, 0.4225) 78.46%, rgba(255, 204, 0, 0.195) 99.06%);
  padding: 60px 20px;
  text-align: center;
  /* margin-bottom: 40px; */
}

.mission-logo {
  width: 60%;
  max-width: 250px;
  height: auto;
  margin: 0 auto 30px;
  display: block;
}

.mission-headline {
  font-family: 'Delivery Condensed', sans-serif;
  font-size: 32px;
  font-weight: 900;
  color: #000;
  margin-bottom: 15px;
  line-height: 1.1;
}

.mission-desc {
  font-family: 'Delivery', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  margin-bottom: 30px;
  padding: 0 10px;
}

.mission-btn {
  display: inline-block;
  width: 100%; 
  max-width: 300px;
  padding: 12px 0;
  border: 2px solid #D40511;
  color: #D40511;
  font-family: 'Delivery', sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border-radius: 4px;
  background: transparent;
  transition: background 0.3s;
}

.mission-btn:active {
  background: rgba(212, 5, 17, 0.1);
}


/* Resources Section */

.resources-section {
  width: 100%;
  background-color: var(--bg-color);
  
  border-top: 1px solid var(--border-color);
  padding-top: 24px;
  padding-bottom: 24px;
  
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.resources-card {
  width: 193px;
  height: 342px;
  
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.resources-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resources-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  
  background: var(--content-box-gradient);
  
  padding: 18px;
  padding-top: 40px;
}

.resources-title {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--white);
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}


/* Get a Quote Section */

.quote-section {
  width: 100%;
  background: var(--get-a-quote-gradient);
  display: flex;
  flex-direction: column;
  padding-top: 32px;
  padding-bottom: 32px;
}

.quote-text-wrapper {
  padding-left: 28px;
  padding-right: 28px;
  display: flex;
  flex-direction: column;
}

.quote-title {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: var(--black);
  line-height: 1.2;
  margin: 0 0 16px 0;
}

.quote-desc {
  font-family: 'Delivery', sans-serif;
  font-weight: 300;
  font-size: 22px;
  color: var(--black);
  line-height: 1.3;
  margin: 0 0 24px 0;
}

.quote-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-bottom: 32px;
  text-decoration: none;
}

.quote-btn {
  width: 100%;
  background-color: var(--dhl-red);
  color: var(--white);
  border: none;
  padding: 14px;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 800;
  font-size: 16px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: background-color border 0.2s;
  text-decoration: none !important;
}

.quote-btn:active {
  background-color: var(--white);
  border: 1px solid var(--dhl-red);
  color: var(--dhl-red);
}

.quote-image-wrapper {
  width: 100%;
  line-height: 0;
  padding: 0px 28px;
}

.quote-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}



/* --- FOOTER SECTION --- */
.app-footer {
  width: 100%;
  background-color: var(--footer-background);
  padding-top: 32px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
}

.footer-section {
  padding: 0 18px; 
  margin-bottom: 32px;
}

.footer-title {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--black);
  margin: 0 0 16px 0;
}

.footer-desc {
  font-family: 'Delivery', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.4;
  color: #333333;
  margin: 0 0 16px 0;
}

.footer-link-bold {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--black);
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 16px;
}

/* --- FORMS (Search & Newsletter) --- */
.footer-form {
  display: flex;
  width: 100%;
  height: 48px;
  margin-bottom: 16px;
}

.footer-input {
  flex: 1; 
  border: 1px solid var(--black);
  border-right: none;
  padding: 0 16px;
  font-family: 'Delivery', sans-serif;
  font-size: 16px;
  outline: none;
  border-radius: 4px 0 0 4px; 
}

.footer-input::placeholder {
  color: #999;
}

.footer-btn {
  width: 54px; 
  background-color: var(--dhl-red); 
  border: 1px solid var(--dhl-red);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 4px 4px 0; 
  cursor: pointer;
}

/* --- CHECKBOX --- */
.checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.custom-checkbox {
  width: 20px;
  height: 20px;
  border: 1px solid var(--black);
  margin-top: 2px;
}

.checkbox-label {
  font-family: 'Delivery', sans-serif;
  font-size: 14px;
  color: #333333;
  line-height: 1.3;
}

.checkbox-label a {
  color: #333333;
  text-decoration: underline;
}


/* --- FOOTER NAVIGATION --- */
.footer-nav {
  list-style: none;
  margin-top: 10px;
  padding: 0;
}

.footer-nav li {
  border-bottom: 1px solid #DCDCDC;
}

.footer-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px; 
  font-family: 'Delivery', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--black);
  text-decoration: none;
  transition: background-color 0.2s;
}

.footer-link:active {
  background-color: #E0E0E0;
}

.text-red {
  color: var(--dhl-red);
}


/* --- BUSINESS LINKS --- */
.business-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.business-list li a {
  font-family: 'Delivery', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #333333;
  text-decoration: none;
  transition: color 0.2s;
}

.business-list li a:active {
  color: var(--dhl-red); 
}

/* --- SOCIAL MEDIA ICONS --- */
.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.social-circle {
  width: 44px;
  height: 44px;
  background-color: #6c757d; 
  border-radius: 50%; 
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  color: var(--white);
  font-size: 20px;
  text-decoration: none;
  transition: background-color 0.2s;
}

.social-circle:active, .social-circle:hover {
  background-color: var(--dhl-red);
}

/* --- AWARD LOGO --- */
.footer-award-logo {
  width: 80px;
  height: auto;
  display: block;
  margin-top: 10px;
}

/* --- CORPORATE FOOTER --- */
.corporate-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
  padding: 0 18px;
}

.corporate-logo-wrapper {
  margin-bottom: 32px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.corporate-logo {
  width: 160px; 
  height: auto;
}

.corporate-links {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.corporate-links li {
  width: 100%;
  border-bottom: 1px solid var(--border-color);
}

.corporate-links li a {
  display: block;
  padding: 16px 0;
  font-family: 'Delivery', sans-serif;
  font-weight: 400; 
  font-size: 14px;
  color: #333333;
  text-decoration: none;
  background-color: transparent;
  transition: color 0.2s;
}

.corporate-links li a:active {
  color: var(--dhl-red);
}

/* Remove border from the last item if preferred, 
 though screenshot implies lines between all items */
.corporate-links li:last-child {
  border-bottom: 1px solid var(--border-color); 
}

.copyright-text {
  font-family: 'Delivery', sans-serif;
  font-size: 12px;
  color: #333333;
  text-align: center;
  margin-top: 32px;
  margin-bottom: 24px;
  opacity: 0.8;
}





/* --- ------------------------------------------------------------------------------ CATEGORY PAGE STYLES ------------------------------------------------------------------------------ --- */
.category-page {
  width: 100%;
  background-color: var(--bg-color);
  display: flex;
  flex-direction: column;
  padding: 0px 18px;
}

.page-title {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: #000000;
  text-align: center; /* Centered title */
  padding-top: 24px;
  padding-bottom: 24px;
  margin: 0;
}

.page-desc {
  font-family: 'Delivery', sans-serif;
  font-size: 16px;
  color: #333;
  text-align: center;
  line-height: 1.5;
  max-width: 800px;
  margin: 0 auto 30px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border-color);

}

/* --- FEATURED CARD (Top) --- */
.cat-featured {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;
  border-bottom: 1px solid #E5E5E5; /* Separator line */
  margin-top: 18px;
}

.cat-featured-img-wrapper {
  width: 100%;
  margin-bottom: 16px;
  line-height: 0;
}

.cat-featured-img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.cat-featured-content {
  padding: 0 18px; /* Standard Padding */
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers text for the featured item */
  text-align: center;
}

.cat-featured-title {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.3;
  color: var(--black);
  margin: 0 0 8px 0;
  cursor: pointer;
}

/* --- LIST ITEMS (Bottom) --- */
.cat-list-item {
  padding: 20px 0px;
  display: flex;
  flex-direction: row;
  gap: 15px;
  border-bottom: 1px solid var(--border-color);
}

.cat-list-item:last-child {
  border-bottom: none;
}

.cat-list-img-wrapper {
  flex: 1;
  height: 137px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}

.cat-list-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cat-list-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.cat-list-title {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.3;
  color: var(--black);
  margin: 0 0 8px 0;
  cursor: pointer;
  
  /* Limit to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- SHARED DATE STYLE --- */
.article-date {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 400; 
  font-size: 12px;
  color: var(--dhl-red); 
}


/* --- TEXT-ONLY ARTICLES --- */
.cat-text-item {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--border-color);
}

.cat-text-title {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 800;
  font-size: 18px; 
  color: var(--black);
  line-height: 1.2;
  margin: 0;
  cursor: pointer;
}

.cat-text-desc {
  font-family: 'Delivery', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #333333;
  line-height: 1.4;
  margin: 0;
}

/* --- MORE STORIES SECTION --- */
.more-stories-wrapper {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.more-stories-header {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--dhl-red); 
  padding: 24px 0 8px 0; 
  margin: 0;
}



/* --- --------------------------------------------------------------------- STORY PAGE BASICS --------------------------------------------------------------------- --- */

.article-content {
  padding: 24px 18px;
  background-color: var(--bg-color);
}

.article-main-title {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 1.1;
  margin-bottom: 12px;
}

.article-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-size: 14px;
  color: #666;
}

.article-hero-wrapper {
  
  margin-bottom: 24px;
  height: fit-content !important;
  /* aspect-ratio: 16 / 9; */
  object-fit: cover;
  object-position: center;
}

.article-hero-img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.article-body-text p {
  font-family: 'Delivery', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 16px;
  color: #333;
}

/* --- ALSO WORTH READING SECTION --- */
.also-read-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
    /* Smooth transition for the placeholder padding */
  transition: padding-top 0.2s ease;
}

.also-read-header {
  width: 100%;
  /* The yellow background from the screenshot */
  background: var(--header-gradient); 
  padding: 16px 18px;
  display: flex;
  justify-content: center; /* Centered Text */
  align-items: center;
  gap: 10px;
  cursor: pointer;

  width: 100%;
  background-color: #fff;
  z-index: 999;
  cursor: pointer;
  display: none;
  transition: box-shadow 0.3s ease;

}

/* 2. THE PINNED STATE (Applied via JS) */
.also-read-header.is-pinned {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Nice shadow when sticky */
  border-bottom: 1px solid #ddd;
  display: flex;
}

.also-read-title {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--dhl-red); /* Red Text */
  text-transform: inherit;
}

.also-read-header i {
  color: var(--black); /* Chevron is black in screenshot */
  font-size: 14px;
}

/* --- LIST ITEMS --- */
.also-read-list {
  display: flex;
  flex-direction: column;
  background-color: var(--white);

  position: fixed;
  top: 60px;
  height: 100%;
  overflow-y: scroll;
}

.also-read-item {
  display: flex;
  flex-direction: row;
  padding: 20px 18px;
  gap: 15px;
  border-bottom: 1px solid var(--border-color);
  text-decoration: none; /* Removes link underline */
}

.also-read-item:last-child {
  border-bottom: none;
}

.also-read-img-wrapper {
  flex: 1;
  height: 137px;
  flex-shrink: 0;
  overflow: hidden;
  /* Optional: rounded corners not strictly visible in screenshot but looks cleaner */
  border-radius: 2px; 
}

.also-read-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.also-read-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.also-read-item-title {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.3;
  color: var(--black);
  margin: 0 0 8px 0;
  
  /* 3-line limit */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.also-read-date {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: var(--dhl-red);
}

/* --- Sticky & Collapsible Header --- */
.also-read-section {
  position: relative;
  /* Ensure the section acts as a container for the sticky element */
}

.also-read-header {
  position: sticky;
  position: -webkit-sticky;
  top: 0; /* Adjust to 60px if you have a fixed top navbar */
  z-index: 999; /* Ensure it's on top of article content */
  background-color: #fff; /* Required for sticky to hide content behind it */
  cursor: pointer;
}

.also-read-header i {
  transition: transform 0.3s ease; /* Smooth rotation */
}

/* --- Collapsed State Styles --- */

/* Rotate Icon when collapsed */
.also-read-section.is-collapsed .also-read-header i {
  transform: rotate(180deg); 
}

/* Hide List when collapsed */
.also-read-section.is-collapsed .also-read-list,
.also-read-section.is-collapsed .collection-grid-container {
  display: none !important;
}

.related-read-more-container {
  padding: 0px 16px;
}

.accordion-button {
  color :#000 !important;
}

iframe {
  width: 100%;
}

h2 b span {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif !important;
  font-weight: bold;
}

h2 span {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif !important;
  font-weight: bold;
}

figcaption {
  font-size: 0.9rem;
  font-style: italic;
  margin-top: 8px;
}


/* --- ----------------------------------------------------------SEARCH PAGE---------------------------------------------------------- --- */
.search-page {
  width: 100%;
  background-color: var(--bg-color);
  display: flex;
  flex-direction: column;
  padding-bottom: 40px;
}

.search-header-section {
  padding: 24px 18px 0 18px; /* Top padding for header */
}

.search-page-title {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 800;
  font-size: 20px;
  margin: 0 0 16px 0;
}

/* --- SEARCH INPUT --- */
.search-input-container {
  position: relative;
  width: 100%;
  margin-bottom: 16px;
}

.main-search-input {
  width: 100%;
  height: 48px;
  border: 1px solid var(--black);
  border-radius: 4px;
  padding: 0 40px; /* Space for icons on left and right */
  font-family: 'Delivery', sans-serif;
  font-size: 16px;
  outline: none;
  color: #333;
}

.search-icon-left {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--black);
}

.search-icon-right {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #999; /* Grey for 'clear' icon */
  cursor: pointer;
}

/* --- META BAR (Count & Filter) --- */
.search-meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-color); /* Light line below sorting */
  padding-bottom: 16px;
}

.results-count {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-size: 14px;
  color: var(--black);
}

.filter-btn {
  background: none;
  border: none;
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-size: 14px;
  font-weight: 400; /* Regular */
  color: #333;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* --- SEARCH RESULTS --- */
/* Reusing list layout logic for consistency */
.search-item {
  padding: 20px 18px;
  display: flex;
  flex-direction: row;
  gap: 15px;
  border-bottom: 1px solid var(--border-color);
}

.search-img-wrapper {
  flex: 1;
  height: 137px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}

.search-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.search-title {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.3;
  color: var(--black);
  margin: 0 0 8px 0;
  
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-date {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-size: 12px;
  color: var(--dhl-red); /* Red date */
}

/* --- PAGINATION --- */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px; /* Space between numbers */
  margin-top: 32px;
}

.page-link {
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  color: var(--black);
  
  /* Active State Styling (Square Box) */
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.page-link.active {
  background-color: var(--dhl-red); /* Red Background */
  color: var(--white); /* White Text */
}

.next-arrow {
  font-size: 18px;
  color: var(--black);
}



/* --------------------------------------------------- all categories page ----------------------------------------------------------- */
/* --- ALL PAGE HEADER --- */
.term-card-category {
  color: #d40511;
  font-family: 'Delivery Condensed', sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
}
.all-page-header {
  padding: 40px 20px 20px;
  max-width: 800px;
  margin: 0 auto;
}

.all-title {
  font-family: 'Delivery Condensed', sans-serif;
  font-size: 36px;
  font-weight: 900;
  color: #D40511; /* DHL Red */
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}

.all-subtitle {
  font-family: 'Delivery', sans-serif;
  font-size: 16px;
  color: #333;
  margin-top: 5px;
}

/* --- CONTROLS BAR --- */
.controls-bar {
  max-width: 800px;
  margin: 0 auto 30px;
  padding: 0 18px;
  display: flex;
  justify-content: flex-start; /* Push Sort to right */
  position: relative;
}

.sort-dropdown-wrapper {
  position: relative;
}

.sort-btn {
  color: #d40511;
  font-family: 'Delivery', sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 4px 10px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  border: 1px solid #d40511;
  background: #FFFFFF;
}

.sort-menu {
  display: none; /* Hidden by default */
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 100;
  width: 200px;
  margin-top: 5px;
  border: 1px solid #eee;
}

.sort-menu.show {
  display: block;
}

.sort-option {
  padding: 12px 20px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  font-family: 'Delivery', sans-serif;
}

.sort-option:hover {
  background-color: #f5f5f5;
}

.sort-option.active {
  font-weight: 700;
  color: #D40511;
}

/* --- PAGINATION --- */
.pagination-wrapper {
  max-width: 800px;
  margin: 40px auto 60px;
  padding: 0 20px;
  display: flex;
  justify-content: center; /* Center the numbers */
  gap: 8px;
}

.page-num {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #E6E6E6; /* Grey background */
  color: white; /* Number is white? Screenshot looks like white text on grey? Or grey on white? */
  /* Wait, screenshot shows: Active=White bg + Red Border + Red Text. Inactive=Grey bg + White text */
  font-family: 'Delivery Condensed', sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
}

.page-num.active {
  background-color: #fff;
  border: 1px solid #D40511;
  color: #D40511;
}

.page-num:not(.active) {
  color: #fff; /* White text on grey box */
}

.page-next {
  background: none !important;
  color: #D40511 !important;
  font-size: 20px;
  padding: 0 10px;
}

.posts-grid.term-list-view,
.pagination-wrapper {
  padding: 0 18px;
}



/* --------------------------------------------------- Related Topics (Tags) --------------------------------------------------------- */
.related-topics-container {
  margin: 40px 0;
  display: none; /* Hidden by default if empty */
}

.related-topics-title {
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 12px;
  color: #000;
  font-family: "Delivery Condensed", sans-serif; /* Assuming you use this font */
}

.related-topics-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.topic-tag {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid #000;
  border-radius: 5px; /* Pill shape */
  color: #000;
  text-decoration: none;
  font-family: 'Delivery', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
  background: #fff;
}

.topic-tag:hover {
  background-color: #d40511; /* DHL Red */
  border-color: #d40511;
  color: #fff;
}


/* --------------------------------------------------- Expandable Related Card  ------------------------------------------------------ */
.related-expand-card {
  border-top: 1px solid #eee;
  padding: 40px 0;
  margin-bottom: 20px;
}

/* Category Header */
.expand-card-cat {
  color: #D40511;
  font-weight: 100;
  text-align: left;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-size: 0.9rem;
  font-family: "Delivery Condensed Light", sans-serif;
}

/* Title */
.expand-card-title {
  margin-top: 0px;
  font-size: 1.5rem;
  font-weight: 900;
  text-align: left;
  margin-bottom: 15px;
  line-height: 1.2;
  color: #000;
  font-family: "Delivery Condensed", sans-serif;
}

/* Image */
.expand-card-img-wrap {
  width: 100%;
  margin-bottom: 20px;
  border-radius: 4px;
  overflow: hidden;
}
.expand-card-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Meta */
.expand-card-meta {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 15px;
  font-weight: 700;
}

/* Excerpt with Fade Effect */
.expand-card-excerpt {
  position: relative;
  max-height: 80px; /* Limit height */
  overflow: hidden;
  color: #ccc; /* Lighter text as per screenshot design hint */
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 20px;
}
/* The white gradient fade at bottom */
.expand-card-excerpt::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

/* Red Button */
.expand-read-btn {
  display: block;
  width: 100%;
  background-color: #D40511;
  color: #fff;
  font-weight: 500;
  text-transform: uppercase;
  padding: 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.3s;
}
.expand-read-btn:hover {
  background-color: #b0040e;
}

/* --- Expanded Content Container --- */
/* This mimics the main article styles when expanded */
.expanded-article-view {
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------ Collection Section (Grid Layout) --------------------------------------------------------------- */
/* --- Collection Section (Custom 2-Column Grid) --- */
.collection-section-wrapper {
  margin-bottom: 40px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0; /* Optional separator line */
}

.collection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.collection-title-main {
  font-size: 1.2rem;
  font-weight: 800;
  font-family: "Delivery Condensed", sans-serif;
  color: #d40511; /* DHL Red */
  text-transform: uppercase;
}

/* The Grid Container */
.collection-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Force 2 columns always */
  gap: 15px; /* Space between items */
  width: 100%;
}

/* Individual Card */
.collection-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.collection-card-img-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 10px;
  background-color: #f0f0f0;
}

.collection-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.collection-card:hover .collection-card-img {
  transform: scale(1.05);
}

.collection-card-title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 5px 0;
  color: #000;
  font-family: "Delivery Condensed", sans-serif;
  
  /* Limit to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.collection-card-meta {
  font-size: 0.75rem;
  color: #d40511; /* DHL Red for category/date */
  text-transform: uppercase;
  font-weight: 700;
}


/* --- NEWSLETTER SUCCESS BOX --- */
.newsletter-success-box {
  width: 100%;
  background-color: #D1E7DD; 
  border-left: 5px solid #FFCC00; 
  
  padding: 16px;
  margin-bottom: 16px; 
  
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 0 4px 4px 0; 
}

.success-icon-wrapper {
  color: #0F5132; 
  font-size: 24px;
  display: flex;
  align-items: center;
}

.success-message {
  font-family: 'Delivery', sans-serif;
  font-size: 16px;
  color: #0F5132;
  line-height: 1.3;
}

.newsletter-error-msg {
  color: #D40511; /* DHL Red */
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-size: 14px;
  margin-top: 8px;
  display: none; /* Hidden by default */
}

.footer-input.has-error {
  border-color: #D40511;
}

/* Reusing the same error class for both */
.newsletter-error-msg {
  color: #D40511; 
  font-family: 'Delivery Condensed', 'Delivery', sans-serif;
  font-size: 14px;
  margin-top: 8px;
  line-height: 1.2;
  display: none;
}


/* ------------------ Gated Form Modal css ------------------ */

.gated-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Grey Overlay */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.gated-modal-content {
  background-color: #FFFFFF;
  width: 100%;
  height: 100%; /* Full Screen on mobile */
  max-width: 600px; /* Limit on desktop */
  max-height: 100vh;
  overflow-y: auto;
  padding: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .gated-modal-content {
      height: auto;
      max-height: 90vh;
      border-radius: 8px;
  }
}

.gated-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.gated-header h3 {
  font-family: 'Delivery Condensed', sans-serif;
  font-weight: 800;
  font-size: 24px;
  margin: 0;
}

.close-gated-btn {
  background: none;
  border: none;
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
}

.gated-form-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: flex;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.form-group.half {
  width: 50%;
}

.form-group label {
  font-family: 'Delivery Condensed', sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 6px;
}

.req {
  color: #D40511;
}

.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group select {
  width: 100%;
  height: 48px;
  border: 1px solid #CED4DA;
  border-radius: 4px;
  padding: 0 12px;
  font-size: 16px;
  background: #fff;
}

/* Phone Input Overrides */
.iti { width: 100%; }

/* Checkbox Groups */
.checkbox-group {
  border-top: 1px solid #eee;
  padding-top: 12px;
}

.switch-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 400 !important;
}

/* Custom Toggle Switch for checkboxes (optional for modern look) */
.switch-wrapper input {
  width: 40px;
  height: 20px;
  accent-color: #D40511;
}

.checkbox-simple {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
}

.checkbox-simple input {
  margin-top: 4px;
  width: 20px;
  height: 20px;
}

.checkbox-simple label {
  font-weight: 300;
  font-size: 14px;
}


/* --- TOGGLE SWITCHES --- */
.toggle-group-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.toggle-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toggle-label-title {
  font-family: 'Delivery Condensed', sans-serif;
  font-size: 16px;
  color: #333;
  font-weight: 400;
}

.toggle-label-title a {
  text-decoration: underline;
  color: #333;
}

/* The Switch Container */
.custom-toggle-switch {
  position: relative;
  display: inline-block;
  width: 70px; 
  height: 32px;
  cursor: pointer;
  user-select: none;
}

/* Hide default checkbox */
.custom-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

/* The Track (Border & Background) */
.toggle-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 34px;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  box-sizing: border-box;
}

/* The Knob (Circle) */
.toggle-knob {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 4px;
  bottom: 3px;
  background-color: #E0E0E0;
  border-radius: 50%;
  transition: 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Text Labels inside the track */
.track-text-yes, .track-text-no {
  font-family: 'Delivery', sans-serif;
  font-size: 12px;
  font-weight: 700;
  z-index: 1; 
}

.track-text-yes {
  color: #000;
  opacity: 0; /* Hidden by default */
  transform: translateX(-5px);
  transition: 0.3s;
}

.track-text-no {
  color: #000;
  opacity: 1;
  margin-left: auto;
  transition: 0.3s;
}

/* --- CHECKED STATE (YES) --- */
.custom-toggle-switch input:checked + .toggle-track {
  border-color: #4CAF50;
}

.custom-toggle-switch input:checked ~ .toggle-knob {
  transform: translateX(38px);
  background-color: #4CAF50; 
  background-color: #8DBC9C;
}

/* Show 'Yes', Hide 'No' */
.custom-toggle-switch input:checked + .toggle-track .track-text-yes {
  opacity: 1;
  transform: translateX(0);
}

.custom-toggle-switch input:checked + .toggle-track .track-text-no {
  opacity: 0;
}

.gated-error-msg {
  color: #D40511;
  font-size: 14px;
  display: none;
}

.gated-submit-btn {
  width: 100%;
  background-color: #D40511;
  color: white;
  font-family: 'Delivery Condensed', sans-serif;
  font-weight: 800;
  font-size: 18px;
  padding: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}







/* Header Icon Style */
.header-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  color: #333;
  padding: 8px;
}

.header-icon-btn.subscribed {
  color: #D40511; 
}

.btn-label {
  font-family: 'Delivery Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
}




/* --- TERM PAGE STYLES --- */
.term-header-wrapper {
  padding: 40px 20px 20px;
  max-width: 1200px;
  margin: 0 auto;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 30px;
}

.term-title {
  font-family: 'Delivery Condensed', sans-serif;
  font-size: 32px;
  font-weight: 800; /* Black/Bold */
  color: #000;
  text-transform: uppercase;
  margin-bottom: 10px;
  line-height: 1.1;
}

.term-results-count {
  font-family: 'Delivery', sans-serif;
  font-size: 14px;
  color: #000;
  font-weight: 700; /* Bold */
  text-transform: uppercase;
}

.term-results-count span {
  color: #D40511; /* DHL Red numbers */
}

/* Reuse the grid from homepage, but ensure spacing */
#term-posts-grid {
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto 60px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}

/* --- TERM PAGE CARD DESIGN --- */

/* Reset the grid to be a vertical list (1 column) to match screenshot */
#term-posts-grid {
  display: flex;
  flex-direction: column;
  gap: 40px; /* Space between posts */
  max-width: 800px; /* Limit width for better readability */
  margin: 0 auto 60px; /* Center the list */
  padding: 0 20px;
}

.term-post-card {
  border-bottom: 1px solid #E0E0E0; /* The grey separator line */
  padding-bottom: 40px;
}

.term-post-card:last-child {
  border-bottom: none; /* No line for the last item */
}

.term-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.term-card-image {
  width: 100%;
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: 4px; /* Optional slight rounding */
}

.term-card-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16 / 9; /* Keeps consistent image size */
  transition: transform 0.3s ease;
}

.term-card-link:hover .term-card-image img {
  transform: scale(1.02); /* Subtle zoom on hover */
}

.term-card-title {
  font-family: 'Delivery Condensed', sans-serif; /* Your DHL Font */
  font-size: 26px; /* Matches the big bold title */
  font-weight: 900;
  color: #000;
  line-height: 1.2;
  margin-bottom: 12px;
  transition: color 0.2s;
}

.term-card-link:hover .term-card-title {
  color: #D40511; /* Highlight Red on hover */
}

.term-card-excerpt {
  font-family: 'Delivery', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  margin: 0;
}


/* --------------------------------------------------- Video Section ------------------------------------------------------ */
/* --- VIDEO SECTION (Vertical Design) --- */
.video-section-wrapper {
  background-color: #333; /* Dark Grey/Black background */
  color: #fff;
  padding: 30px 20px;
  /* margin-bottom: 40px; */
}

/* MAIN FEATURE */
.video-cat-label {
  font-family: 'Delivery Condensed', sans-serif; /* Standard font */
  font-size: 22px;
  color: #fff;
  margin-bottom: 10px;
  display: block;
}

.video-main-media {
  width: 100%;
  margin-bottom: 15px;
  border-radius: 0; /* Sharp corners per design */
  overflow: hidden;
}

.video-main-media img {
  width: 100%;
  height: auto;
  display: block;
  /* aspect-ratio: 16/9; */
  
  object-fit: cover;
}

.video-main-title {
  font-family: 'Delivery Condensed', sans-serif;
  font-size: 24px; /* Slightly smaller than hero */
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 10px;
  color: #fff;
}

.video-main-desc {
  font-family: 'Delivery', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #ccc;
  margin-bottom: 20px;
}

.video-main-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: #D40511;
  color: #fff;
  font-family: 'Delivery', sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 12px 0;
  border-radius: 4px;
  text-decoration: none;
  text-transform: capitalize; /* "Watch Video" */
}

/* UP NEXT LIST (Vertical) */
.video-up-next-label {
  font-family: 'Delivery Condensed', sans-serif;
  font-weight: 900;
  font-size: 22px;
  color: #fff;
  text-transform: uppercase;
  margin-top: 30px;
  margin-bottom: 15px;
  letter-spacing: 0.5px;
}

.video-list-container {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Space between items */
}

.video-list-item a {
  display: flex;
  text-decoration: none;
  align-items: flex-start; /* Align top */
  gap: 15px;
}

.video-list-thumb {
  flex: 0 0 50%;
  height: 105px; /* Fixed height */
  object-fit: cover;
  flex-shrink: 0; /* Don't shrink image */
  background: #333;
}

.video-list-title {
  font-family: 'Delivery', sans-serif; /* Standard font for list items */
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .term-title {
      font-size: 28px;
  }
}


/* share buttons */
/* --- SHARE TOOLBAR --- */
.share-toolbar-wrapper {
  display: flex;
  align-items: center;
  gap: 25px; /* Space between the main 3 buttons */
  padding: 15px 0; /* Vertical spacing */
  border-bottom: 1px solid #eee; /* Optional line separator */
  position: relative;
}

.share-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  position: relative; /* Anchor for popup */
  border: none;
  background: transparent;
  padding: 0;
}

.share-icon {
  color: #D40511; /* DHL Red */
  font-size: 18px;
}

.share-label {
  font-family: 'Delivery', sans-serif; /* Your font */
  font-weight: 900;
  font-size: 14px;
  color: #333;
  text-transform: uppercase;
}

/* --- SOCIAL POPUP DROPDOWN --- */
.social-share-popup {
  display: none; /* Hidden by default */
  position: absolute;
  top: 35px; /* Below the button */
  left: -10px;
  background: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 5px 25px rgba(0,0,0,0.15); /* Soft shadow */
  width: 260px;
  z-index: 999;
}

/* Arrow Tip */
.share-popup-arrow {
  position: absolute;
  top: -8px;
  left: 20px;
  width: 0; 
  height: 0; 
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid white;
}

.social-icons-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Circular Icons */
.social-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  text-decoration: none;
  transition: transform 0.2s;
}

.social-circle:hover { transform: scale(1.1); }

/* Colors */
.whatsapp { background-color: #25D366; }
.telegram { background-color: #0088cc; }
.facebook { background-color: #3b5998; }
.twitter  { background-color: #1DA1F2; }
.linkedin { background-color: #0077b5; }
.weibo    { background-color: #E6162D; }
.email    { background-color: #999999; }



/* --------------------- about page style ------------------------ */
/* --- ABOUT PAGE STYLES --- */
.about-page-wrapper {
  padding: 30px 15px;
  background-color: #ffffff;
  min-height: 60vh;
}


.about-page-wrapper a {
  color: #000;
  
}

.about-page-wrapper a:hover {
  color: #d40511;
}
.about-main-title {
  font-family: 'Delivery Condensed', sans-serif;
  font-size: 36px;
  font-weight: 900;
  color: #000;
  margin-bottom: 0px;
  line-height: 1.1;
}

.about-body-text {
  font-family: 'Delivery', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

/* Ensure WordPress injected images are responsive */
.about-body-text img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 15px 0;
}

/* Ensure WordPress injected iframes/videos are responsive */
.about-body-text iframe {
  max-width: 100%;
}

/* Style standard WordPress headings inside content */
.about-body-text h2, 
.about-body-text h3 {
  font-family: 'Delivery Condensed', sans-serif;
  font-weight: 900;
  color: #000;
  margin-top: 30px;
  margin-bottom: 15px;
}


/* ------------------------------------ Glossary Page ------------------------------------ *.

/* --- GLOSSARY PAGE STYLES --- */
.glossary-page-wrapper {
  padding: 0 20px; /* Forces side padding on mobile */
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Header */
.glossary-header {
  text-align: center;
  margin-bottom: 30px;
}

.glossary-main-title {
  color: #D40511;
  font-family: 'Delivery Condensed', sans-serif;
  font-weight: 900;
  font-size: 32px;
  text-transform: uppercase;
  margin-bottom: 15px;
  margin-top: 24px;
}

.glossary-desc {
  font-family: 'Delivery', sans-serif;
  font-size: 16px;
  color: #333;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Search Box */
.glossary-search-container {
  max-width: 500px; /* Keeps it from stretching too wide */
  margin: 0 auto 30px auto; 
}

.glossary-search-box {
  display: flex;
  width: 100%;
}

.glossary-search-input {
  flex-grow: 1;
  padding: 12px 15px;
  border: 1px solid #ccc;
  border-right: none;
  border-radius: 0;
  font-family: 'Delivery', sans-serif;
  font-size: 16px;
  outline: none;
}

.glossary-search-input:focus {
  border-color: #D40511; /* Highlight with brand color */
}

.glossary-search-btn {
  background-color: #D40511;
  color: #fff;
  border: none;
  padding: 0 20px;
  border-radius: 0;
  cursor: pointer;
  font-size: 16px;
}

/* Autocomplete Dropdown */
.glossary-autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 55px; /* Aligns with input width */
  background: white;
  border: 1px solid #ccc;
  border-top: none;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.glossary-autocomplete-list li {
  padding: 10px 15px;
  cursor: pointer;
  font-family: 'Delivery', sans-serif;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.glossary-autocomplete-list li:hover {
  background-color: #f1f1f1;
}

/* Alphabet Scroll */
.glossary-alpha-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 15px 0;
  margin: 0 auto 30px auto;
  max-width: 600px;
}

.glossary-alpha-scroll {
  display: flex;
  overflow-x: auto;
  gap: 25px;
  padding: 0 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.glossary-alpha-scroll::-webkit-scrollbar { 
  display: none; 
}

.alpha-letter {
  font-family: 'Delivery Condensed', sans-serif;
  font-size: 24px;
  font-weight: 900;
  color: #666;
  cursor: pointer;
  flex-shrink: 0;
}

.alpha-letter.active {
  color: #D40511;
}

.alpha-arrow {
  color: #ccc;
  font-size: 20px;
  padding: 0 15px;
  cursor: pointer;
}

/* Glossary Cards */
.glossary-results-grid {
  margin: 0; /* Prevents row from expanding past wrapper */
}

.glossary-card {
  position: relative;
  border-radius: 0; /* Sharp corners like the design */
  overflow: hidden;
  margin-bottom: 25px;
  cursor: pointer;
  aspect-ratio: 16 / 9;
  width: 100%;
  display: block;
}

.glossary-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.glossary-card-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
  padding: 50px 20px 15px 20px;
  text-align: left;
}

.glossary-card-title {
  color: #fff;
  font-family: 'Delivery Condensed', sans-serif;
  font-weight: 900;
  font-size: 24px;
  margin: 0;
  text-transform: uppercase;
}

/* --- GLOSSARY PAGINATION STYLES --- */
.custom-dhl-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  margin-bottom: 40px;
  width: 100%;
}

.custom-dhl-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 4px; /* Slight rounded corners */
  font-family: 'Delivery', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #333;
  text-decoration: none;
  background-color: transparent;
  transition: all 0.2s ease;
}

/* Hover state for normal links */
.custom-dhl-pagination a.page-numbers:hover {
  background-color: #f1f1f1;
  color: #D40511;
}

/* Active current page */
.custom-dhl-pagination .current {
  background-color: #D40511;
  color: #fff;
  cursor: default;
}

/* Arrow styling */
.custom-dhl-pagination .prev i, 
.custom-dhl-pagination .next i {
  font-size: 14px;
}

/* --- CUSTOM GLOSSARY MODAL --- */
.glossary-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.75); /* Dark transparent background */
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.glossary-modal-container {
  background: #ffffff;
  width: 100%;
  max-width: 650px; /* Nice width for reading */
  max-height: 90vh; /* Prevents it from being taller than the screen */
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.glossary-modal-close {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  font-size: 32px;
  color: #666;
  cursor: pointer;
  z-index: 10;
  line-height: 1;
}

.glossary-modal-close:hover {
  color: #D40511;
}

.glossary-modal-body {
  padding: 40px 30px 30px 30px;
  overflow-y: auto; /* Allows scrolling if text is very long */
  -webkit-overflow-scrolling: touch;
}

.glossary-modal-title {
  font-family: 'Delivery Condensed', sans-serif;
  font-weight: 900;
  font-size: 32px;
  color: #333;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 25px;
}

.glossary-modal-text {
  font-family: 'Delivery', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

/* Make sure paragraphs inside WordPress content look good */
.glossary-modal-text p {
  margin-bottom: 20px;
}

/* Yellow Footer */
.glossary-modal-footer {
  background-color: #ffcc00; /* DHL Yellow */
  padding: 20px 30px;
  display: flex;
  align-items: center;
  flex-shrink: 0; /* Prevents footer from shrinking when body scrolls */
}

.glossary-share-text {
  font-family: 'Delivery', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #333;
  margin-right: 20px;
}

.glossary-share-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}