/* Parent of .header-area — filter is avoided (it would break position:fixed sticky). */
header:has(.header-area) {
  position: relative;
  z-index: 10000;
  box-shadow: 0 8px 24px rgba(18, 32, 24, 0.12);
}

header:has(.header-area) .header-area {
  box-shadow: 0 8px 24px rgba(18, 32, 24, 0.12);
}

.navbar-brand{
    max-width: 250px;
}
.navbar-brand img{
    max-width: 100%;
}
.slider-area{
    background:none;
}
.slider-area .slide-btn a{
    min-width:180px;
    display: inline-block;
    padding-right:20px;
    padding-left:20px;
    width: inherit;
}
.home1 .about-area .heading-title{
    text-align: center;
    margin-bottom: 20px;
}

.top-title {
    max-width: 500px;
    margin:auto;
}
.top-title p{
    color: #fff;
}

.breadcrumbs .overlay{
    background: rgba(0, 0, 0, 0.6);
}
.about-text .first-text{
    margin-bottom:20px;
}
.solution_area .s-box1{
    background: #00A859;
}
.solution_area .s-box .first-text{
    margin-bottom:25px;
}
.aboutEventArea{
    padding: 83px 0px 30px;
}
.vision-mission-values{
    background-size: cover;
    padding: 50px 0px;
    background-attachment: fixed;
    position: relative;
    color:#000;
    text-align: center;
    background-color: #E8E8E8;
}
.vision-mission-values h4{
    margin:10px 0px;
    font-weight: 700;
}

.seminar-item{
    margin-bottom:30px;
}
.seminar-item .img-box::after{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60%;
    content: "";
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000', GradientType=0 );    
}
.serminars-wrapper{
    padding:60px 0px;
    background-color: #F3F3F3;
}
.seminar-item .img-box{
    height: 0px;
    overflow: hidden;
    padding-bottom:85%;
    margin-bottom:0px;
    position: relative;
}
.seminar-item img{
    width:100%;
    transition: transform .5s ease;
}
.seminar-item:hover a{
    color:#F58634;
}
.seminar-item:hover img{
    transform: scale(1.2);
}
.seminar-item .venue{
    position: absolute;
    top:10px;
    right:10px;
    z-index: 1;
    display: inline-block;
    background-color:#F58634;
    padding:3px 10px;
    color:#fff;
    border-radius:5px;
}
.seminar-item .venue i{
    margin-right:4px;
}

.seminar-item .info{
    position: absolute;
    bottom:0px;
    left:0px;
    padding:10px;
    color:#fff;
    z-index: 2;
}
.seminar-item .info .date{
    font-size: 12px;
}
.seminar-item .info a{
    color:#fff;
}
.seminar-item .info a:hover{
    color:#F58634;
}
.seminar-item .bottom-info{
    background-color:#fff;
    padding:20px;
}
.seminar-item .bottom-info p{
    margin-bottom: 10px;
}
.seminar-wrapper{
    padding:60px 0px;
}
.seminar-wrapper .thumbnail-box{
    margin-bottom:20px;
}
.seminar-wrapper .thumbnail-box img{
    width:100%;
}
.seminar-detail ul{
    margin-bottom: 20px;
}
.seminar-detail p{
    margin-bottom: 20px;
}
.seminar-detail h2, 
.seminar-detail h3{
    color: #016FB6;
}
.seminar-detail h2{
    margin: 10px 0px;
    font-size: 18px;
    font-weight: 700;
}
.seminar-detail h3{
    margin: 10px 0px;
    font-size: 18px;
    font-weight: 700;
}
.seminar-detail ul{
    list-style: initial;
    padding-left: 20px;
    margin-top: 15px;
}
.seminar-detail h4{
    font-weight: bold;
    margin-bottom: 7px;
    font-size: 15px;
}
.seminar-detail-sidebar li{
    padding:5px 0px;
}
.seminar-detail-sidebar h5{
    font-weight: bold;
}
.seminar-detail-sidebar .seminar-price {
    padding-bottom:13px;
}
.seminar-detail-sidebar .seminar-price h5{
    margin-bottom:10px;
}
.seminar-detail-sidebar .seminar-price p{
    font-size: 40px;
}
.btn-reg-seminar {
    padding:10px 15px;
    background-color: #00A759;
    border-color: #00A759;
}
.btn-reg-seminar {
    background-color: #048E4E;
    border-color: #048E4E;    
}
.upcoming-event-area{
    padding: 96px 0px 100px;
    background-color:#F3F3F3;
}
.upcoming-event-area .img-box{
    margin-bottom:0px;
}
.footer-contact-info li a{
    padding: 0px 28px 0px 30px;
}

.recent-post-item .thumb{
    width:100px;
}
.recent-post-item img{
    width:100%;
}

.blog-post.single .img-fluid{
    width:100%;
}

.silder .slide-item::before{
    content: '';
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    background: rgba(0, 0, 0, 0);
}

.btn-sol{
    border: 1px solid #fff;
    color: #fff;
    padding: 5px 10px;
    border-radius: 20px;    
}
.btn-sol:hover{
    color: #000;
    background: #fff;
}

.event-widget-sidebar h4{
    margin-bottom:15px;
}
.event-widget-sidebar .event-details{
    margin-bottom:15px;
}
.event-widget-sidebar .event-details h5{
    font-weight: bold;
}
.event-widget-sidebar .event-details a:hover{
    text-decoration: underline;
}
.event-widget-sidebar .event-details p{
    font-size: 12px;
    line-height: 1.5em;
}
.event-widget-sidebar .event-details span{
    font-size: 12px;
    color:#FF2D55;
}
.index_1.home1.latest-news-area.home-latest-news{
    background-color: #016fb6;
}

#register-success{
    padding: 100px 0px;
    background-color:#EFF0F1;
}
#register-success header{
    text-align: center;
    margin-bottom: 60px;
}
#register-success .content{
    text-align: center;
}
#register-success button{
    background-color:#B90017;
    border-color:#B90017;
    border-radius: 20px;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: bold;
    padding:10px 20px;
}
#register-success button:hover{
    background-color:#222222;
    border-color:#222222;
}
.management-team header{
    text-align: center;
    margin-bottom: 30px;
}
.management-team .single-team-member{
    text-align: center;
}
.management-team .img-box{
    padding-bottom: 57%;
    height: 0px;
    overflow: hidden;
}
.management-team .img-box img{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: inline-block;
}
.management-team .text-box h4{
    padding: 12px 0px;
    font-weight: bold;
}
.management-team .text-box p{
    margin-bottom: 10px;
}

.custom-file label{
    display: none;
}

/* Video grid: Helpy play button centered on blog-style thumbs */
.vl-video-grid .vl-blg-thumb,
.vl-blog-inner .vl-blg-thumb {
  position: relative;
}
.vl-blog-inner .vl-blg-thumb .video-play-button {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  box-sizing: content-box;
  display: block;
  width: 32px;
  height: 44px;
  border-radius: 50%;
  padding: 18px 20px 18px 28px;
  margin: 0;
}
.vl-blog-inner .vl-blg-thumb .video-play-button:before,
.vl-blog-inner .vl-blg-thumb .video-play-button:after {
  background: #fff;
}
.vl-blog-inner .vl-blg-thumb .video-play-button span {
  border-left-color: var(--ztc-text-text-6, #0a3d2e);
}
.vl-video-player {
  border-radius: 8px;
  overflow: hidden;
}
.vl-video-player iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Our Team / Management Team */
.vl-team-page .vl-team-thumb {
  overflow: hidden;
  border-radius: 8px;
  background: var(--ztc-bg-bg-4, #f3f6f4);
}
.vl-team-page .vl-team-thumb a {
  display: block;
}
.vl-team-page .vl-team-thumb img,
.vl-team-page .vl-team-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.vl-team-page .vl-team-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #0a3d2e 0%, #1a6b4f 100%);
  color: #fff;
  font-size: 3rem;
  font-weight: 700;
  font-family: var(--ztc-family-font2, Georgia, serif);
}
.vl-team-page .vl-team-content {
  background: #fff;
  box-shadow: 0 8px 24px rgba(10, 61, 46, 0.08);
  padding: 20px 16px;
}
.vl-team-page .vl-team-content .title {
  padding-bottom: 8px;
  margin: 0;
}
.vl-team-page .vl-team-content .title a {
  color: inherit;
  text-decoration: none;
}
.vl-team-page .vl-team-content .title a:hover {
  color: var(--ztc-text-text-6, #0a3d2e);
}
.vl-team-page .vl-team-role {
  display: block;
  color: var(--ztc-text-text-2, #667066);
  font-size: 15px;
  line-height: 1.4;
}
.vl-team-page .vl-choose5 .vl-icon-box {
  height: 100%;
}

/* Team member detail */
.vl-team-profile-card {
  background: var(--ztc-bg-bg-4, #f3f6f4);
  border-radius: 8px;
  overflow: hidden;
}
.vl-team-profile-photo img,
.vl-team-profile-photo .vl-team-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.vl-team-profile-photo .vl-team-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #0a3d2e 0%, #1a6b4f 100%);
  color: #fff;
  font-size: 4rem;
  font-weight: 700;
  font-family: var(--ztc-family-font2, Georgia, serif);
}
.vl-team-profile-meta {
  padding: 24px 20px 28px;
}
.vl-team-profile-meta .title {
  color: var(--ztc-text-text-3, #122018);
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0 0 8px;
  font-family: var(--ztc-family-font2, Georgia, serif);
  font-weight: 700;
}
.vl-team-profile-body {
  max-width: 42rem;
}
.vl-team-profile-body p {
  margin-bottom: 1rem;
}

/* Homepage hero auto-slide (works before webpack rebuild) */
/* Owl hides .owl-carousel until .owl-loaded; keep the hero visible either way. */
#heroBanner.owl-carousel {
  display: block;
}
.vl-hero-banner-wrap {
  position: relative;
}
.vl-hero-banner .owl-item img {
  width: auto;
  display: inline-block;
}
.vl-hero-banner .vl-banner5 {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  padding-bottom: 80px;
}
.vl-hero-banner .vl-banner5::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 42%, rgba(255, 255, 255, 0.2) 68%, rgba(255, 255, 255, 0) 100%);
}
.vl-hero-banner .vl-banner5 .container {
  position: relative;
  z-index: 1;
}
.vl-hero-banner .animated {
  animation-duration: 0.8s;
  animation-fill-mode: both;
}
.vl-hero-banner .fadeOut {
  animation-name: vlHeroFadeOut;
}
.vl-hero-banner .fadeIn {
  animation-name: vlHeroFadeIn;
}
@keyframes vlHeroFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes vlHeroFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.vl-hero-banner .owl-nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #01715d !important;
  box-shadow: 0 4px 16px rgba(1, 113, 93, 0.16);
}
.vl-hero-banner .owl-nav button.owl-prev { left: 16px; }
.vl-hero-banner .owl-nav button.owl-next { right: 16px; }
.vl-hero-banner .owl-nav button:hover {
  background: #01715d !important;
  color: #fff !important;
}
.vl-hero-banner .owl-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 3;
  text-align: center;
}
.vl-hero-banner .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: rgba(1, 113, 93, 0.28);
  border-radius: 50px;
  display: inline-block;
}
.vl-hero-banner .owl-dots .owl-dot.active span,
.vl-hero-banner .owl-dots .owl-dot:hover span {
  background: #01715d;
}
.vl-hero-toggle {
  position: absolute;
  right: 24px;
  bottom: 16px;
  z-index: 4;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(1, 113, 93, 0.92);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.vl-hero-toggle:hover,
.vl-hero-toggle:focus-visible {
  background: #191a55;
}
@media (max-width: 767px) {
  .vl-hero-banner .vl-banner5 {
    min-height: 480px;
    padding-top: 150px;
    padding-bottom: 72px;
  }
  .vl-hero-banner .vl-banner5::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.78) 55%, rgba(255, 255, 255, 0.35) 100%);
  }
  .vl-hero-toggle {
    right: 12px;
    bottom: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vl-hero-banner .animated,
  .vl-hero-banner .fadeOut,
  .vl-hero-banner .fadeIn {
    animation: none !important;
  }
}

/* Home: Dedicated to a Healthier Communities — intro + thumbnail, then 5 cards */
.vl-choose5 .vl-choose-intro {
  margin-bottom: 8px;
}
.vl-choose5 .vl-choose-thumb img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 10px;
}
.vl-choose5 .vl-choose-cards .vl-icon-box {
  height: 100%;
  padding: 20px 16px 22px;
}
.vl-choose5 .vl-choose-cards .vl-icon-box .icon span {
  height: 52px;
  width: 52px;
  line-height: 52px;
  margin-bottom: 16px;
}
.vl-choose5 .vl-choose-cards .vl-icon-box .icon span img {
  max-height: 28px;
  max-width: 28px;
  width: auto;
  height: auto;
  filter: brightness(0) invert(1);
}
.vl-choose5 .vl-choose-cards .content .title {
  font-size: 17px;
  line-height: 1.35;
  display: block;
}
.vl-choose5 .vl-choose-cards .content .para {
  font-size: 14px;
  line-height: 1.5;
  padding-top: 10px;
  padding-bottom: 16px;
}
.vl-choose5 .vl-choose-cards .content .readmore {
  font-size: 14px;
}
@media (max-width: 991px) {
  .vl-choose5 .vl-choose-thumb img {
    height: 220px;
  }
}

/* Home: news carousel after strategic approach */
.vl-home-news {
  background: var(--ztc-bg-bg-4, #f3f6f4);
}
.vl-home-news .vl-section-title5 .title {
  padding-bottom: 12px;
}
.vl-home-news-cta {
  text-align: right;
}
#homeNewsCarousel.owl-carousel {
  display: block;
}
.vl-home-news-carousel {
  position: relative;
}
.vl-news-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(10, 61, 46, 0.08);
  height: 100%;
}
.vl-news-card-thumb {
  display: block;
  overflow: hidden;
}
.vl-news-card-thumb img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}
.vl-news-card:hover .vl-news-card-thumb img {
  transform: scale(1.06);
}
.vl-news-card-body {
  padding: 22px 22px 24px;
}
.vl-news-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 10px;
  color: var(--ztc-text-text-2, #667066);
  font-size: 14px;
  line-height: 1;
}
.vl-news-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  line-height: 1;
}
/* Beat Owl's `.owl-carousel .owl-item img { width: 100% }` so icons stay 16px. */
.owl-carousel .owl-item .vl-news-card-meta img,
.vl-news-card-meta img {
  width: 16px;
  max-width: 16px;
  height: 16px;
  display: inline-block;
  object-fit: contain;
  flex-shrink: 0;
}
.vl-news-card-title {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.35;
  font-family: var(--ztc-family-font2, Georgia, serif);
  font-weight: 700;
}
.vl-news-card-title a {
  color: var(--ztc-text-text-3, #122018);
  text-decoration: none;
}
.vl-news-card-title a:hover {
  color: #01715d;
}
.vl-news-card-excerpt {
  margin: 0 0 16px;
  color: var(--ztc-text-text-2, #667066);
  font-size: 16px;
  line-height: 1.6;
}
.vl-news-card-more {
  color: var(--ztc-text-text-3, #122018);
  font-weight: 700;
  display: inline-block;
}
.vl-news-card-more span {
  display: inline-block;
  margin-left: 6px;
  transform: rotate(-45deg);
  transition: transform 0.3s;
}
.vl-news-card-more:hover {
  color: #01715d;
}
.vl-news-card-more:hover span {
  transform: rotate(0deg);
}
.vl-home-news-carousel .owl-nav button {
  position: absolute;
  top: 110px;
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff !important;
  color: #01715d !important;
  box-shadow: 0 4px 16px rgba(1, 113, 93, 0.16);
}
.vl-home-news-carousel .owl-nav button.owl-prev { left: -12px; }
.vl-home-news-carousel .owl-nav button.owl-next { right: -12px; }
.vl-home-news-carousel .owl-nav button:hover {
  background: #01715d !important;
  color: #fff !important;
}
.vl-home-news-carousel .owl-dots {
  margin-top: 20px;
  text-align: center;
}
.vl-home-news-carousel .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: rgba(1, 113, 93, 0.28);
  border-radius: 50px;
  display: inline-block;
}
.vl-home-news-carousel .owl-dots .owl-dot.active span,
.vl-home-news-carousel .owl-dots .owl-dot:hover span {
  background: #01715d;
}
@media (max-width: 991px) {
  .vl-home-news-cta {
    text-align: left;
  }
  .vl-home-news-carousel .owl-nav button.owl-prev { left: 0; }
  .vl-home-news-carousel .owl-nav button.owl-next { right: 0; }
}

.vl-blog-inner .row > [class*="col-"] {
  display: flex;
}
.vl-blog-inner .vl-news-card {
  width: 100%;
  background: #fff;
}
.vl-news-archive {
  background: var(--ztc-bg-bg-4, #f3f6f4);
}

/* FAQ accordion lists: match paragraph colour/inset (theme only styles `p`).
   Theme `ul li { list-style: none }` must be overridden on the `li`. */
.vl-faq5 .vl-accordion3 .accordion-body ul,
.vl-faq5 .vl-accordion3 .accordion-body ol {
  margin: 0 0 16px;
  padding: 0 48px 32px 72px;
}
.vl-faq5 .vl-accordion3 .accordion-body li {
  list-style: disc;
  list-style-position: outside;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--ztc-font-size-font-s18, 18px);
  line-height: var(--ztc-specing-height28, 28px);
  font-family: var(--ztc-family-font1, inherit);
  font-weight: var(--ztc-weight-semibold);
  margin-bottom: 8px;
}
.vl-faq5 .vl-accordion3 .accordion-body ol > li {
  list-style: decimal;
}
.vl-faq5 .vl-accordion3 .accordion-body li:last-child {
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .vl-faq5 .vl-accordion3 .accordion-body ul,
  .vl-faq5 .vl-accordion3 .accordion-body ol {
    padding: 0 15px 16px 36px;
  }
}
/* ---- Downloadable document lists (Reports / Publications / National Documents) ---- */
.documents-area {
  background: #fff;
}

.documents-area__empty {
  text-align: center;
  color: var(--ztc-text-text-5, #72706c);
  font-size: 18px;
  margin: 0;
}

.documents-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 920px;
  margin: 0 auto;
}

a.document-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border: 1px solid var(--ztc-border-border-1, #e5e7eb);
  border-radius: 12px;
  background: #fff;
  text-decoration: none !important;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

a.document-item:hover {
  border-color: var(--ztc-bg-bg-2, #01715d);
  box-shadow: 0 10px 24px rgba(1, 113, 93, 0.12);
  transform: translateY(-1px);
}

.document-item__icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(1, 113, 93, 0.1);
  color: var(--ztc-bg-bg-2, #01715d);
  font-size: 22px;
  line-height: 1;
}

.document-item__icon svg {
  width: 1em;
  height: 1em;
}

.document-item__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.document-item__title {
  display: block;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--ztc-text-text-3, #181713);
}

.document-item__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ztc-text-text-5, #72706c);
}

.document-item__meta svg {
  width: 14px;
  height: 14px;
}

.document-item__action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ztc-bg-bg-2, #01715d);
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.document-item__action svg {
  width: 14px;
  height: 14px;
}

a.document-item:hover .document-item__action {
  background: #015a4a;
}

@media (max-width: 767px) {
  a.document-item {
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
  }

  .document-item__action {
    margin-left: auto;
  }

  .document-item__action-label {
    display: none;
  }
}