.header-wrapper {
  display: flex ;
  align-items: center ;
  justify-content: space-between ; /* already spreads logo left + right content */
}

.menu-area {
  margin-left: auto ; /* push menu to the right */
}

.header-right-item {
  margin-left: 20px; /* small spacing between menu and search */
}

.copyright-content-area {
  display: flex;
  justify-content: center !important;  /* center horizontally */
  align-items: center !important;      /* center vertically if needed */
  width: 100% !important;
  text-align: center !important;
}

.copyright-content-area p {
  margin: 0 !important;
  color: #fff !important;
}

.footer-yellow {
  color: #ffcc00 !important;
  text-decoration: none !important;
  margin: 0 5px	!important;
}

.footer-white {
  color: #fff !important;
  text-decoration: none !important;
  margin: 0 5px	!important;
}

.copyright-content-area a:hover {
  text-decoration: underline !important;
}


.topbar {
  background: #00984A; /* green */
  color: #fff;
  font-size: 14px;
  padding: 6px 15px;
  /* border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;  */
}

.topbar i {
  margin-right: 6px;
  color: #fff;
}

.topbar a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  margin: 0 1px;
  cursor: pointer;   /* ✅ show pointer on hover */
}

.topbar a:hover {
  color: #000; /* hover effect */
  text-decoration: none;
}

.topbar-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.topbar-links li {
  margin: 0 2px;
    display: flex;
  align-items: center;
}

.topbar-links li:not(:last-child)::after {
  content: "|";
  color: #fff;
  margin-left: 8px;
  margin-right: 8px;
  opacity: 0.8;
}

.topbar-socials a {
  margin-left: 2px;
  font-size: 14px;
}

/* .topbar-socials a:hover {
  color: #000;
  text-decoration: none;
} */

/* ✅ Responsive for small screens */
@media (max-width: 768px) {
  .topbar {
    padding: 0;
    text-align: center;
    border-radius: 0; /* keep flat on mobile */
  }
  .topbar .col-12 {
    justify-content: center !important;
    text-align: center;
    padding: 0px;
  }
  .topbar-links {
    justify-content: center;
    margin-top: 5px;
  }
  .topbar-socials {
    margin-top: 5px;
  }
}

/* Wrapper for topbar + header */
.header-wrapper-sticky {
  position: sticky;
  top: 0;
  z-index: 1;
  width: 100%;
}

/* Add shadow when scrolling */
.header-wrapper-sticky.sticky-active {
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

/* footer css */

.footer-subtitle{
     color: #fff !important;
}

.footer-main-area {
  background: #00984A;
  color: #fff;
  padding: 50px 0 30px;
  font-size: 14px;
}

.footer-widget .title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #fff;
}

.footer-text p {
  font-size: 14px;
  line-height: 22px;
}

/* .footer-links {
  list-style: disc;
  padding-left: 18px;
  margin: 0;
} */

.footer-links {
  list-style: disc;
  padding-left: 18px;
  margin: 0;
  text-align: left;
}

.footer-links li {
  margin-bottom: 8px;
  color: #fff;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.export-flags img {
  width: 32px;
  height: 20px;
  margin: 3px;
  border-radius: 3px;
}

.footer-socials a {
  color: #fff;
  margin-right: 10px;
  font-size: 16px;
}

/* .subscribe-form {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 10px;
}


.subscribe-form input {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 4px 0 0 4px;
  min-width: 0;
}

.subscribe-form button {
  background: #006439;
  border: none;
  padding: 10px 18px;
  color: #fff;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  white-space: nowrap;
} */

.subscribe-form {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 10px;
}

.subscribe-form input {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 4px 0 0 4px;
  min-width: 0;
}

.subscribe-form button {
  background: #006439;
  border: none;
  padding: 10px 18px;
  color: #fff;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  white-space: nowrap;
}

.footer-cta .cta-btn {
	padding: 5px;
	padding-right: 10px !important;
    background-color: #006439;
}

.footer-cta .cta-btn .customers ul li img {
    width: 36px;
    height: 36px;
}


/* Responsive fixes */
@media (max-width: 768px) {
  .footer-cta {
    text-align: center;
  }

  /* ✅ Center the container, but keep li left */
  /* .footer-links {
    text-align: left;
    display: inline-block;
  } */

  /* ✅ Stack input + button nicely */
  /* .subscribe-form {
    flex-direction: column;
  }

  .subscribe-form input {
    border-radius: 4px;
    margin-bottom: 8px;
    width: 100%;
  }

  .subscribe-form button {
    border-radius: 4px;
    width: 100%;
  } */

  .subscribe-form {
    flex-direction: column;
    /* align-items: center; */
  }

  .subscribe-form input {
    border-radius: 4px;
    margin-bottom: 8px;
    width: 100%;
  }

  .subscribe-form button {
    border-radius: 4px;
    /* width: 100%; */
  }
}


.tj-footer-section{
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}


/* width adjust */

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1180px;
    }
}


@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1380px;
    }
}

.header-area{
	margin-inline-start: 0px;
    margin-inline-end: 0px;
}


/* @media (min-width: 992px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 974px;
    }
}

@media (min-width: 768px) {
    .container, .container-md, .container-sm {
        max-width: 754px;
    }
}

@media (min-width: 576px) {
    .container, .container-sm {
        max-width: 560px;
    }
} */


/* blogs */


.tj-blog-section {
  /* background-color: #fff; */
}

.sec-title {
  font-weight: 700;
  font-size: 28px;
  color: #111;
  margin-bottom: 20px;
}

.blog-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  border: 1px solid #eaeaea;
}

.blog-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}

.blog-thumb {
  position: relative;
}

.blog-thumb img {
  width: 100%;
  height: 270px;
  object-fit: cover;
  border-radius: 10px;
}

.blog-date {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 4px 10px;
  text-align: center;
  font-weight: 600;
  line-height: 1.2;
}

.blog-date .date {
  display: block;
  font-size: 16px;
  color: #000;
}

.blog-date .month {
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
}

.blog-content {
  padding: 15px 15px 20px;
  text-align: left;
}

.blog-meta {
  font-size: 13px;
  color: #777;
  margin-bottom: 6px;
}

.blog-meta .badge {
  background: #f5f5f5;
  color: #333;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
  margin-right: 6px;
}

.blog-title a {
  color: #000;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.4;
}

.blog-title a:hover {
  color: #198754;
}

.blog-desc {
  color: #666;
  font-size: 14px;
  margin: 8px 0 10px;
}

.read-more {
  color: #198754;
  font-weight: 600;
  text-decoration: none;
}

.read-more:hover {
  text-decoration: underline;
}

/* health  start*/

		.health-card {
			position: relative;
			border-radius: 10px;
			background: #fff;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
			overflow: hidden;
			transition: transform 0.2s ease-in-out;
		}
		.health-card:hover {
			transform: translateY(-4px);
		}

		.health-card-header {
			position: absolute;
			top: 12px;
			left: 12px;
			z-index: 5;
		}

		.health-card-header .upazila {
			background-color: #f4c542;
			color: #000;
			font-weight: 600;
			font-size: 12px;
			padding: 4px 8px;
			border-radius: 3px;
			display: inline-block;
		}

		.health-card-header .thana {
			background-color: #fff;
			color: #444;
			font-size: 12px;
			padding: 4px 8px;
			border-radius: 3px;
			border: 1px solid #eee;
			display: inline-block;
		}

		.health-card-thumb img {
			width: 100%;
			height: 220px;
			object-fit: cover;
			display: block;
		}

		.health-card-footer {
			padding: 14px 16px;
			text-align: left;
			position: relative;
		}

		.health-card-footer .branch-name {
			font-size: 14px;
			margin-top: 0.5rem;
			font-weight: 600;
			width: 80%;
			color: #000;
		}

		.health-card-footer .branch-phone {
			color: #555;
			font-size: 12px;
			margin-top: 1rem;
		}

		.health-card-footer .map-icon {
			position: absolute;
			right: 10px;
			bottom: 5rem;
			width: 36px;
			height: 36px;
			color: #2e86de;
		}

		.health-card-footer .card-product-price{
			position: absolute;
			right: 10px;
			bottom: 4rem;
			width: 36px;
			height: 36px;
			color: #2e86de;
		}

	.team-thumbnails img {
		cursor: pointer;
		border: 1px solid transparent;
		border-radius: 6px;
		transition: all 0.3s ease;
	}

	.team-thumbnails img:hover,
	.team-thumbnails img.active {
		border-color: #007b7f;
		transform: scale(1.05);
	}

	.sec-title {
		font-size: 28px;
		font-weight: 700;
		color: #555;
	}

	.sec-title span {
		color: #00984A;
	}

	.choose-box {
		border: 2px dashed #00984A;
		border-radius: 10px;
		padding: 30px 20px;
		transition: all 0.3s ease;
		background: #fff;
		box-shadow: 0 0 0 rgba(0, 0, 0, 0);
	}

	.choose-box:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
		border-color: #00984A;
	}

	.icon-wrap {
		width: 80px;
		height: 80px;
		margin-bottom: 20px;
		border: 3px solid #00984A;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon-wrap img {
		width: 50px;
		height: 50px;
	}

	.title {
		font-size: 18px;
		font-weight: 600;
		color: #222;
		margin-bottom: 10px;
	}

	.desc {
		font-size: 14px;
		color: #666;
		margin-bottom: 20px;
	}

	.explore-btn {
		display: inline-block;
		padding: 4px 14px;
		background: #00984A;
		color: #fff;
		border-radius: 25px;
		font-size: 14px;
		text-decoration: none;
		transition: all 0.3s;
	}

	.choose-box:hover .explore-btn {
		color: #00984A;
		background: #fff;
		border-color: #00984A;
	}

	.explore-btn:hover {
	  color: #00984A;
	  background: #fff;
	}

	/* health care details */

	.doctor-card {
		border: none;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		background: #ffffff;
	}

	.doctor-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
	}

	.doctor-card img {
		width: 100%;
		height: auto;
		display: block;
		border-bottom: 1px solid #eee;
	}

	.stars {
		position: absolute;
		top: 12px;
		right: 15px;
		color: #fbc02d;
		background: rgba(255, 255, 255, 0.85);
		padding: 4px 6px;
		border-radius: 8px;
		font-size: 14px;
	}

	.doctor-info {
		padding: 15px;
		background-color: #e8f5e9;
	}

	.doctor-name {
		font-weight: 600;
		text-transform: uppercase;
		margin-bottom: 4px;
	}

	.degree {
		font-size: 14px;
		color: #555;
	}

	.image-container {
		position: relative;
	}

    /* health care details end */

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .top-social-media {
    padding: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .topbar{
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    border-radius: 0;
  }
  .topbar .col-12 {
    justify-content: center !important;
    text-align: center;
    padding: 0px;
  }
  .container-fluid{
    padding: 0;
  }
  .top-social-media {
    padding: 0;
  }
  .me-4 {
    margin-right: 1.2rem !important;
  }
  .topbar i {
    margin-right: 3px;
    color: #fff;
}
}