﻿body {
	font-family: "Helvetica";
	padding-top: 90px;
	background-color:#fafafa;

}
html {
	scroll-padding-top: 140px;
	scroll-behavior: smooth;
}

@media (max-width:768px) {
	html {
		scroll-padding-top: 210px;
		scroll-behavior: smooth;
	}
}
.bannerbg {
	background: linear-gradient(90deg, rgba(28, 102, 59, 1) 0%, rgba(111, 193, 86, 1) 100%);
	background-image: url(../images/bannerbg.png) !important;
	overflow-y: auto;
	padding: 3rem 1rem;
	height: 100%;
	min-height: 230px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
h1,h2,h3,p{ font-family: "Helvetica";}
h1 {
	 color: #102e0b;
}

/* 8 Aug changes */
@media(max-width:768px) {
	.bannerbg h1 {
		font-size: 2em !important;
		/* font-weight: bold;  */
		color: rgb(255, 255, 255);
	}
	.bannerbg {
		padding: 5rem 1rem;
	}
}
/* 18 Nov start */
p {
	font-size: 15px;
}
/* 18 Nov end */
/* 8 Aug changes */
.bannerbg h1 {
	font-size: 3.2em;
	color: rgb(255, 255, 255);
}

#cdmo-text {
	color: #69c941;
	font-weight: bold;
	border-bottom: 4px solid #ffffff;
}

.bannerbg p {
	line-height: 30px;
	font-size: 20px;
	color: #e9f6e7;
	text-shadow: 1px 1px 3px rgb(0 0 0 / 79%);
}

.btn-success {
	background-color: #69c941;
	border: #69c941;
}

.btn-info {
	background-color: #1C663B;
	border: #1C663B;
}

/* 25 sep changes */

/* ===== OUTER CARDS (main container) ===== */
.biocardbg,
.microcardbg,
.card,
.card2 {
	background: #ffffff;
	border: 1px solid #B1DC98; /* green outline */
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease-in-out;
}

/* ===== INNER CARDS (always same style) ===== */
.card1 {
	background: #fbfdfb;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 15px 20px;
	margin-bottom: 15px; /* spacing between multiple card1s */
	transition: all 0.3s ease-in-out;
}

.card3 {
	background: #ffffff;
	border: 1px solid #f0f0f0; /* very light gray border */
	border-radius: 12px;
	padding: 15px 20px;
	margin-bottom: 15px; /* spacing between multiple card1s */
	transition: all 0.3s ease-in-out;
}

	/* Remove border if card1 contains a table */
	.card1:has(table) {
		border: none;
		box-shadow: none;
		padding: 0;
		background: transparent;
		margin-bottom: 0;
	}
/* 27 Nov */
table {
	font-size: 14px;
}

	/* Default h4 style inside cards */
	/*.card h4,
	.card2 h4,
	.card1 h4 {
		font-weight: 600;
		margin-bottom: 10px;
		color: #198754;
	}*/

	/* Hover effect only for h4 inside card1 */
	/*.card1:hover h4 {
		background: linear-gradient(90deg, #198754, #000000);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}*/

/* ===== TEXT STYLES ===== */

.label {
	font-size: 11px;
	text-transform: uppercase;
	color: gray;
}

.value {
	font-weight: 700;
	color: green;
	font-size:15px;
}

/* ===== SAFE FOR TABLES ===== */
.card1 table {
	border: none;
	box-shadow: none;
	margin: 0;
	width: 100%;
}

	.card1 table th,
	.card1 table td {
		border: none;
		padding: 10px 15px;
	}
	
	.card1 table tr + tr td {
		border-top: 1px solid #f0f0f0; /* row separator */
	}
	.card1 table thead tr {
		border-bottom: 1px solid #f0f0f0;
	}
	
/* 25 sept changes end */

.card-title {
	font-family: "Nunito Sans", sans-serif;
	font-size: 1.4em;
	padding-left: 2px;
}

.choosebg {
	background-color: #f4f4f4;
	border: 1px solid #69c940;
}

.biocardbg img {
	width: 30%;
	height: auto;
}

.card-body p {
	margin: 0px;
}

.microcardbg img {
	width: 30%;
	height: auto;
}

.w-70 {
	width: 70% !important;
}

.tab-pane ul {
	padding: 0px;
}
/*----------------------search box -------------------------------------------*/
.search-box {
  width: fit-content;
  height: fit-content;
  position: relative;
}
.input-search {
  height:40px;
  width:40px;
  border-style: none;
  padding: 10px;
  font-size: 15px; 
  outline: none;
  border-radius: 25px;
  transition: all 0.5s ease-in-out;
  padding-right: 40px;
  color: #000000;
}
.input-search::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  letter-spacing: 2px;
  font-weight: 100;
}
.btn-search {
  width:40px;
  height:40px;
  border-style: none;
  font-size: 20px; 
  outline: none;
  cursor: pointer;
  border-radius: 50%;
  position: absolute;
  right: 0px;
  color: #000000;
  background-color: transparent;
  pointer-events: painted;
}
.btn-search:focus ~ .input-search {
  width: 300px;
  border-radius: 0px;
  background-color: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  transition: all 500ms cubic-bezier(0, 0.11, 0.35, 2);
}
.input-search:focus {
  width: 300px;
  border-radius: 0px;
  background-color: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  transition: all 500ms cubic-bezier(0, 0.11, 0.35, 2);
}
/*-------------------------------------------grid box--------------------------------------*/
.mission-box {
	background-color: #e4f7d9;
	padding: 20px;
	height: 100%;
	width: 100%;
}

	.mission-box h3 {
		font-weight: bold;
	}

	.mission-box a {
		color: green;
		font-weight: bold;
		text-decoration: none;
	}
/*---------------------------footer ----------------------------------------------*/
 
.footer {
  position: relative;
  padding-top:10px;
  background: #121518;
}
 

.footer .footer-blog h3,
.footer .footer-insta h3,
.footer .footer-tags h3,
.footer .footer-newsletter h3 {
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 10px;
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
}

.footer .footer-blog h3::after,
.footer .footer-insta h3::after,
.footer .footer-tags h3::after,
.footer .footer-newsletter h3::after {
  position: absolute;
  content: \"\";
  width: 50px;
  height: 2px;
  left: 0;
  bottom: 0;
  background: #ffffff;
}

.footer .footer-blog div {
  position: relative;
  padding-left: 15px;
}

 
.footer .footer-blog div a {
  display: contents;
  margin-bottom: 5px;
  font-size: 16px;
  color: #cccccc;
}

.footer .footer-blog div a:hover {
  color: #0085ff;
}

.footer .footer-blog div p { 
  color: #757575;
  font-size: 13px; }
 /*------------------------------header-----------------------------------*/
 
 .btn-sm-expand {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding:9px 12px; 
        background: #1C663B;
    color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 0.35rem;
    transition: width 0.3s ease;
    overflow: hidden;
    white-space: nowrap; text-decoration: none;
    width: 40px;
  }

  .btn-sm-expand i {
    flex-shrink: 0;
  }

  .btn-sm-expand span {
    margin-left: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .btn-sm-expand:hover {
    width:auto;
  }

  .btn-sm-expand:hover span {
    opacity: 1; color: #ffffff;
  }

  .btn-sm-expandmob {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding:3px 8px;  font-size: 12px;;
     color: #ffffff; 
    border-radius: 0.35rem;
    transition: width 0.3s ease;
    overflow: hidden;
    white-space: nowrap; text-decoration: none;
    width:30px;
  }

  .btn-sm-expandmob i {
    flex-shrink: 0;
  }

  .btn-sm-expandmob span {
    margin-left: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .btn-sm-expandmob:hover {
    width:160px;
  }

  .btn-sm-expandmob:hover span {
    opacity: 1; color: #ffffff;
  }
  .nav-link {
    display: block;
    padding: 7px 8px; 
    font-weight:400;
    color: rgb(100, 100, 100); 
    border-right: 1px solid #ccc;
    line-height: 21px;
}

 .navlink {
    display: block;
    padding: 7px 8px;  width: 100%;
    font-weight:400;
    color: rgb(255, 255, 255); 
   border: 1px solid #ccc;
    line-height: 21px; margin-bottom: 10px;
    background-color: #000000;
}

.bg-light {
  background-color: #f0f0f0 !important; overflow: hidden;
}

.btn {
  font-weight: 500;
  transition: 0.5s;
}

.btn.btn-primary {
  color: #ffffff;
}

.btn-sm-square {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-weight: normal;
}
 
.text-primary{color: #1C663B !important;}
.submenu {
	 list-style: none;
  margin: 0;
  padding: 0;  
  max-width: 300px; 
}

.submenu li {
  border-bottom: 1px solid #212121;
  transition: background-color 0.3s ease;
}

.submenu li:last-child {
  border-bottom: none;
}
	/*  22 oct*/

	.submenu li a {
		display: flex;
		align-items: center;
		/*  padding:0px 3px;*/
		padding: 0px 1px;
		text-decoration: none;
		color: #ffffff;
		/*		font-size: 15px;*/
		font-size: 14px;
		transition: color 0.3s ease;
	}

.submenu li a i {
/*  margin-right: 10px;*/ 
  margin-right: 6px;
color: #1C663B;
  transition: transform 0.3s ease;
}

	.submenu li:hover {
		background-color: #69c941;
		border-radius: 4px;
	}

.submenu li:hover a {
  color: #1C663B;
}

.submenu li:hover i {
  transform: translateX(5px);
}
.tab-pane li {list-style:none; }
.tab-pane li h5{color:#1C663B; font-size: 18px;}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{ background-color:#1C663B;}
  
 
:root {
	--color-primary: rgba(5, 249, 255, 1);
	--transition: 0.4s;
}
 

.base-template__wrapper {
 
	justify-content: flex-start; 
}

header a {
	color: #fff;
	text-decoration: none;
}

a {
	text-decoration: none;
}

.novicon a {
	color: white;
	text-decoration: none;
}
 

.header { 
	align-items: center;
	position: relative;
	padding: 0 20px 0 40px;  
	background-color: rgb(16 46 11)
}

.header__logo {
	max-width: 90px;
}

.header__wrapper {
	width: 100%;
	display: flex;
	align-items: center;
}

.header__navigation-wrapper {
	display: flex;
	width: 100%; justify-content: space-between;
	padding-left: 0px;
}

.header__list {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 0;
}

.header__list-item {
	display: flex;
	padding: 10px 0 10px;
	margin-bottom: -20px;
	gap: 8px;
	font-size: 16px;
}

.header__list-item > a {
	display: flex;
	align-items: center;
	gap: 8px;
	transition: var(--transition);
}

.header__list-item > a svg path {
	transition: var(--transition);
}

	.header__list-item .submenu-wrapper {
		position: absolute;
		width: 100%;
		top: 100%;
		left: 0;
		/*border-radius: 33px;*/
		padding: 30px 30px 50px 30px;
		border-radius: 0px 0px 33px 33px;
		background-color: rgba(25, 27, 36, 1);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		/*transition: var(--transition);*/
		z-index: 1031;
		height: max-content;
		max-height: auto;
		overflow: hidden;
		/*transition: max-height 0.4s ease;*/
		transition-delay: 550ms;
	}

.header__buttons-wrapper {
	display: flex;
	align-items: center;
	gap: 30px;
	margin-left: auto;
}

.header__button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	width: max-content;
	padding: 6px 20px;
	border-radius: 100px;
	gap: 8px;
	font-size: 16px;
	font-weight: 400;
	transition: var(--transition);
}

.submenu-list__title {
	width: max-content;
	margin-bottom: 25px;
	font-size: 12px;
	text-transform: uppercase;
	color: rgba(160, 161, 165, 1);
}
.submenu-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 295px;
	padding-left: 0;
	/*transform left menu bg remove 2 aug 25*/
	/* background-image: url(../images/mega-background.jpg);*/
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.submenu-list {
	display: flex;
	flex-direction: column;
	gap: 19px;
	/*	max-width: 275px; 
*/
	max-width: 280px; /*22 oct*/
	padding-left: 0;
}

/*.submenu-list__item {
	display: flex;
	padding-right: 100px;
	margin-right: -100px;
	cursor: pointer;
}*/

/*.submenu-list__item-wrapper {
	width: 100%;
	display: flex;
	align-items: center;
	padding: 6px 16px 6px 6px;
	gap: 16px;
	border-radius: 14px;
	transition: var(--transition);
}

.submenu-list__item-wrapper > svg {
	margin-left: auto;
	opacity: 0;
	visibility: hidden;
	transition: var(--transition);
}*/

.submenu-list__item-wrapper {
	width: 100%;
	display: flex;
	align-items: center;
	padding: 6px 16px 6px 6px;
	gap: 16px;
	border-radius: 14px;
	transition: var(--transition);
}

	.submenu-list__item-wrapper > svg {
		margin-left: auto;
		opacity: 0;
		visibility: hidden;
		transition: var(--transition);
	}

/* Laptop view - arrow right end mein */
@media (min-width: 1025px) {
	.submenu-list__item-wrapper {
		justify-content: flex-start;
		position: relative;
	}

		.submenu-list__item-wrapper > svg {
			position: absolute;
			right: 16px !important;
			top: 50%;
			transform: translateY(-50%);
			margin-left: 0; /* Reset mobile margin */
			opacity: 0;
			visibility: hidden;
		}
}

/* Mobile view adjustments */
@media (max-width: 1024px) {
	.submenu-list__item-wrapper > svg {
		visibility: visible;
	}
}

.submenu-list__wrapper {
	position: relative;
}

.submenu-content {
	position: absolute;
	right: 0;
	top: 0;
	max-width: calc(100% - 320px);
	opacity: 0;
	visibility: hidden;
	transition: var(--transition);
	width: 100%;
	transition-delay: 550ms;
}

.submenu-list__item.has-submenu.active .submenu-content {
	opacity: 1;
	visibility: visible;
}

.submenu-list__item.has-submenu.active .submenu-list__item-wrapper {
	background-color: rgba(255, 255, 255, 0.04);
	    /* width: auto; */
}

.submenu-list__item.has-submenu.active .submenu-list__item-wrapper > svg {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.submenu-list__item-link {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.submenu-list__item-title {
	font-size: 16px;
	font-weight: 500;
	color: #fff;
}

.submenu-list__item-icon {
	display: flex;
}

.submenu-list__item-subtile {
	font-size: 12px;
	font-weight: 400;
	color: rgba(160, 161, 165, 1);
}

.submenu-content__title {
	width: max-content;
	margin-bottom: 25px;
	font-size: 12px;
	text-transform: uppercase;
	color: rgba(160, 161, 165, 1);
}

.submenu-content__list:not(.events) {
	width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 7px;
    padding: 0;
}

.submenu-content__list.events {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	padding: 0;
}

.submenu-content__list-item {
	display: block;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.05);
	cursor: auto;
}

.submenu-content__link {
	display: flex;
	flex-direction: column;
	border-radius: 20px;
	padding: 10px 10px 20px;
	border: 1px solid transparent;
	transition: var(--transition);
}

.submenu-content__link-img { 
	border-radius:5px;
	overflow: hidden;
	transition: var(--transition);
}

.submenu-content__link-img img {
	transition: 0.4s ease-in;
}

.submenu-content__link-title {
	padding: 0 10px;
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 12px;
}
.submenu-content__link-img h5{padding: 0px; margin: 0px; color:#69c940; font-size: 16px;}
.submenu-content__link-text {
	padding: 0 0px;
	font-size: 13px;
	color: rgba(160, 161, 165, 1);
}
.submenu-content__link-text ul{padding: 0px; margin: 0px; color: #fff;}
.submenu-content__link-text ul li, .submenu-content__link-text ul li ul li{padding: 0px; margin: 0px; color: #fff; list-style: none;}
.submenu-content__link-wrapper {
	display: flex;
	gap: 20px;
	padding: 10px;
	border-radius: 20px;
	background-color: rgba(255, 255, 255, 0.05);
}

.submenu-content__list.events .submenu-content__link-img {
	width: 100%;
	max-width: 220px;
	flex: 1;
	border-radius: 13px;
	margin-bottom: 0;
}

.submenu-content__info {
	display: flex;
	flex-direction: column;
	flex: 1 0;
}

.submenu-content__category {
	display: flex;
	align-items: center;
	gap: 10px;
	width: max-content;
	padding: 10px 20px;
	margin-bottom: 20px;
	border-radius: 30px;
	font-size: 12px;
	font-weight: 500;
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.7);
}

.submenu-content__list.events .submenu-content__link-title,
.submenu-content__list.events .submenu-content__link-text {
	padding: 0;
	margin-bottom: 12px;
}

.submenu-content__link-address,
.submenu-content__link-date {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 12px;
	font-size: 12px;
	font-weight: 400;
	color: rgba(160, 161, 165, 1);
}

.submenu-content__link-address span,
.submenu-content__link-date span {
	line-height: 0.9;
}

.submenu-content__url {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	margin-bottom: 20px;
	color: rgba(255, 255, 255, 1);
	font-size: 14px;
	transition: var(--transition);

	svg,
	svg path {
		transition: var(--transition);
	}
}

.header__burger {
	display: none;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	width: 24px;
	margin-left: auto;
}

.header__burger i {
	width: 100%;
	height: 2px;
	background-color: #fff;
	border-radius: 13px;
	transition: var(--transition);
}

.header__burger.active i:nth-child(1) {
	transform: rotate(45deg) translate(4px, 4px);
}

.header__burger.active i:nth-child(2) {
	opacity: 0;
}

.header__burger.active i:nth-child(3) {
	transform: rotate(-45deg) translate(4px, -5px);
}

@media (hover: hover) and (pointer: fine) {
	.header__list-item:hover .submenu-wrapper {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.header__list-item:hover ~ .header__list-item .submenu-wrapper {
		display: none;
	}

	.header__list-item:hover > a,
	.header__list-item:hover > a svg path {
		color: var(--color-primary);
		fill: var(--color-primary);
	}

	.header__button:hover {
		background-color: rgba(255, 255, 255, 0.05);
	}

	.submenu-list__item.has-submenu:hover .submenu-list__item-wrapper {
		background-color: rgba(255, 255, 255, 0.04);
	}

	.submenu-list__item.has-submenu:hover .submenu-content,
	.submenu-list__item.has-submenu:hover .submenu-list__item-wrapper > svg {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.submenu-content__list-item:hover .submenu-content__link {
		border-color: rgba(255, 255, 255, 0.3);
	}

	.submenu-content__list-item:hover .submenu-content__link-img img {
		transform: scale(1.05);
	}

	.submenu-content__url:hover,
	.submenu-content__url:hover svg path {
		color: var(--color-primary);
		stroke: var(--color-primary);
	}

	.submenu-content__url:hover svg {
		transform: translateX(5px);
	}
}

@media screen and (max-width: 1280px) {
	.header__navigation-wrapper {
		padding-left: 25px;
	}

	.submenu-list {
		max-width: 250px;
	}

	.submenu-content {
		max-width: calc(100% - 270px);
	}

	.submenu-content__url {
		margin-bottom: 0;
	}
}

@media screen and (max-width: 1024px) {
	.base-template__wrapper {
		max-height: 105vh;
	}
	.searchform {
    margin: 10px 6px;
	}
	ul.nav.justify-content-end.mt-2 {
    margin-top: 0px !important;
}

	.header {
		/* min-height: 64px; */
		padding: 16px 14px;
	}

	.header__burger {
		display: flex;
	}

	.header__navigation-wrapper {
		flex-direction: column;
		align-items: center;
		position: absolute;
		top: 100%;
		left: 0;
		padding: 20px;
		background-color: rgba(25, 27, 36, 1);
		/*border-radius: 20px;*/
		border-radius: 0px 0px 33px 33px;
		opacity: 0;
		visibility: hidden;
		transition: var(--transition);
	}

		.header__navigation-wrapper.open {
			opacity: 1;
			visibility: visible;
			padding-bottom: 100px; /* 22 oct */ 
		}

	.header__list {
		flex-direction: column;
		gap: 30px;
	}

	.header__buttons-wrapper {
		flex-direction: column;
		margin-left: unset;
		margin-top: 50px;
		gap: 8px;
	}

	.header__navigation,
	.header__list {
		width: 100%;
	}

	.header__list-item {
		flex-direction: column;
		width: 100%;
		padding: 0;
		gap: 0;
		margin: 0;
	}

	.header__list-item.active a,
	.header__list-item.active a > svg path {
		fill: var(--color-primary);
		color: var(--color-primary);
	}

	.header__list-item .submenu-wrapper {
		position: static;
		padding: 0;
		max-height: 0;
		border-radius: 0;
		opacity: 1;
		visibility: visible;
		pointer-events: all;
		overflow: hidden;
		transition: max-height var(--transition);
	}

	.submenu-list {
		width: 100%;
		max-width: 100%;
		gap: 5px;
	}

	.submenu-list__wrapper {
		margin-top: 30px;
		display: flex;
		flex-direction: column; /* Stack submenu list and content vertically */
	}

	.submenu-list__item {
		width: 100%;
		padding: 0;
		margin: 0;
	}

	.submenu-list__item:active .submenu-list__item-wrapper {
		background-color: rgba(255, 255, 255, 0.04);
	}

	.submenu-list__item:active .submenu-list__item-wrapper > svg {
		opacity: 1;
		visibility: visible;
	}

	.submenu-list__title {
		display: none;
	}

	.submenu-content {
		position: static; /* Change from absolute to static */
		right: auto; /* Reset right positioning */
		top: auto; /* Reset top positioning */
		max-width: 100%; /* Adjust max-width for mobile */
		width: 100%; /* Full width on mobile */
		margin-top: 20px; /* Add space between list and content */
		opacity: 1; /* Always visible when active */
		visibility: visible; /* Always visible when active */
		pointer-events: auto; /* Allow interactions */
		overflow: hidden; /* Keep overflow hidden for smooth transitions */
		max-height: 0; /* Control height with JS */
	}

	.header__button {
		border: 1px solid rgba(255, 255, 255, 1);
	}
}
@media screen and (max-width: 1024px) {
    .submenu-list__item:active .submenu-list__item-wrapper {
        background-color: rgba(255, 255, 255, 0.04);
        /* width: auto !important; */
    }
}
.submenu-list__item-wrapper > svg {
    margin-left: inherit !important;
}
@media (width:768px){
	li.nav-item a.btn {
    font-size: 12px;
    padding: 9px 4px;
}
.detection-accordi {
	display: flex;
    flex-wrap: wrap !important;
}
}
@media screen and (max-width: 767.9px) {
	.header__buttons-wrapper,
	.header__button {
		width: 100%;
	}


	.lftmenu {
		left: 0%;
	}

    .submenu-content__list:not(.events) {
        grid-template-columns: repeat(1, 1fr); /* Single column for mobile */
    }
}

.searchform {
  height: 46px;
  border: 1px solid rgba(79, 79, 79, 0.889);
  overflow: hidden;
  border-radius:50px; }
  .searchform .form-control {
    width: calc(100% - 46px);
    border: none;
    background: #fff !important;
    color: rgba(0, 0, 0, 0.7) !important;
    font-size: 14px; }
    .searchform .form-control::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: rgba(0, 0, 0, 0.7) !important; }
    .searchform .form-control::-moz-placeholder {
      /* Firefox 19+ */
      color: rgba(0, 0, 0, 0.7) !important; }
    .searchform .form-control:-ms-input-placeholder {
      /* IE 0+ */
      color: rgba(0, 0, 0, 0.7) !important; }
    .searchform .form-control:-moz-placeholder {
      /* Firefox 18- */
      color: rgba(0, 0, 0, 0.7) !important; }
  .searchform .search {
    width: 46px;
    height: 46px; }
    .searchform .search span {
      font-size: 18px; }

/*.form-control {
  height: 46px;*//* !important;*/
  /*background: #fff !important;
  color: #000 !important;
  font-size: 14px;
  border-radius: 0px;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: 1px solid rgba(0, 0, 0, 0.1); }
  .form-control:focus, .form-control:active {
    border-color: #000; }*/
 
.oligo-bg-icon {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 220px;
      opacity: 0.2;
      pointer-events: none;
    }

	/* .oligo-bg-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    pointer-events: none;
} */
.novicon {
    display: none;
}

	 @media only screen and (max-width: 600px) {
		.btn-sm-expandmob{
			    padding: 12px 0px;
    font-size: 16px;
		}
            .submenu-content {
                padding: 8px !important;
                margin: 10px auto !important;
            }
            
            .submenu-content__link-img {
                padding: 10px 12px !important;
            }
            
            .submenu-content__link-img h5 {
                font-size: 16px !important;
            }
            
            .submenu a {
                font-size: 15px !important;
            }
			.submenu-list__item-wrapper {
    /* width: 181%; */
    display: flex
;
    align-items: start;
			}
		.submenu-content {
			padding: 0px !important;
			margin: 64px 0px 0px -100% !important;
			position: relative;
			left: 0% !important;
		}
	.submenu-list__item.has-submenu.active .submenu-list__item-wrapper {
	background-color: unset;
	    /* width: auto; */
}
.submenu-content__link-text ul li, .submenu-content__link-text ul li ul li {
    padding: 10px 6px;
}
.header__navigation-wrapper.open {
    z-index: 1;
}
.submenu-list__item.has-submenu.active .submenu-list__item-wrapper > svg{
	margin-top:6px;
	        transform: rotate(90deg);
        transition: transform 0.3s ease;
}
.searchform {
    height: 40px;
    border-radius: 50px;
}
.form-control {
    height: 40px !important;
}
a.navbar-brand.d-flex.align-items-center {
    margin: 0px;
    padding-top: 12px;
}
section.header {
    display: flex;
    justify-content: space-between;
}
.novicon {
    color: #fff;
    font-size: 16px;

}
	.novicon i.fa.fa-phone {
		transform: rotate(100deg);
		transition: transform 0.3s ease;
		font-size: 12px;
		padding-inline: 5px;
	}
.novicon {
    display: block;
}
.col-md-5.col-12.justify-content-end.text-end.offset-md-1 {
    padding-bottom: 3px;
}
		.d-flex
		Specificity{
			display: flex !important;
			flex-direction: column;
		}
}
        



/* responsive for tablet */

@media (min-width: 768px) and (max-width: 1024px) {
	.submenu-content__list:not(.events) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
	/*.submenu-list__item {
		display: flex;
		cursor: pointer;
	}*/
.submenu-list__item-wrapper {
    width: 100%;
    display: flex;
    align-items: start !important;
}
	.submenu-content {
		padding: 0px !important;
		margin: 60px 0px 0px -100% !important; /* 22 Oct */
		position: relative;
	}
.submenu-list__item.has-submenu.active .submenu-list__item-wrapper {
    background-color: unset;
}
.submenu-content__link-text ul li, .submenu-content__link-text ul li ul li {
    padding: 10px 6px;
}
.submenu-content__link-img h5 {
    font-size: 16px;
}
.header__navigation-wrapper.open {
    z-index: 1;
}
.submenu-list__item.has-submenu.active .submenu-list__item-wrapper > svg{
	margin-top:6px;
	 transform: rotate(90deg);
        transition: transform 0.3s ease;
}
.searchform {
    height: 40px;
    border-radius: 50px;
}
.form-control {
    height: 40px !important;
}
a.navbar-brand.d-flex.align-items-center {
    margin: 0px;
    padding-top: 12px;
}
section.header {
    display: flex;
    justify-content: space-between;
}
.novicon {
    color: #fff;
    font-size: 16px;

}
.novicon i.fa.fa-phone {
    transform: rotate(100deg);
    transition: transform 0.3s ease;
}
.novicon {
    display: block;
}
}

/* megane bg in mobile */

@media(max-width:767px){
	ul.header__list a {
    color: #000000;
}
    .header__list-item.active a, .header__list-item.active a > svg path{
		fill: rgb(28 102 59);
		color: rgb(28 102 59);
	}
	    .header__navigation-wrapper {
			background-color: rgb(255, 255, 255);
		}
		.header__buttons-wrapper .header__button {
        border: 1px solid rgb(28 102 59);
		color: rgb(28 102 59);
		fill: rgb(28 102 59);
    }
			.header__buttons-wrapper .header__button:hover {
				background: rgb(28 102 59);
				color: #fff;
			}
	.lftmenu {
		left: 0%;
	}

	.submenu-list__item {
		display: flex;
		margin-right: -100px;
		padding-bottom: 2px;
		cursor: pointer
	}
		
.header__buttons-wrapper a, svg {
	color: #1C663B;
	fill: #1C663B;
}
    .submenu-list__item.has-submenu.active .submenu-list__item-wrapper > svg {
        color: #000;
        fill: #000 !important;
    }
	.header__list-item .submenu-wrapper {
    background: unset;
}
ul.submenu-list {
    background: none !important;
}
.submenu-list__item-title {
    color: #000000;
}
.submenu-content__link{
border: 1px solid #69c940;
}
.submenu-list__item-wrapper svg path {
    stroke: #000 !important;
}
    li.header__list-item.has-submenu svg path {
    stroke: #000 !important;
}
.header__buttons-wrapper a.header__button.text-end svg path {
    stroke: rgb(28 102 59) !important;
    fill: rgb(28 102 59);
}
a.header__button.text-end:hover svg path {
    stroke: #fff !important;
    fill: #fff;
}
}


@media (min-width:768px) and (max-width:1024px){
	.submenu-list{
		 background: unset !important;
	}
	.lftmenu {
		left: 0%;
	}
}

.submenu-list__item {
	display: flex;
	cursor: pointer;
}
.lftmenu
{
	left:24%;
}
/* 22 Oct */

	.contact-item {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}

.contact-icon {
	color: limegreen;
	font-size: 24px;
	margin-right: 5px;
	width: 30px;
	flex-shrink: 0;
	text-align: center;
}

.contact-text {
	margin-left: 12px;
	font-size: 16px;
	line-height: 2.4;
}

@media (min-width:1025px) and (max-width:2560px) {
	ul#company-submenu-list {
		min-height: 400px;
	}

	#company-submenu-wrapper {
		height: 460px;
	}
	.submenu-content.lftmenu {
		
		background-image: url(../images/mega-background.jpg);
		min-height: 400px;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top;
	}

	.submenu-content.resources-submenu-content {
		background-image: url(../images/mega-background.jpg);
		min-height: 370px;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top;
	}

	.submenu-content {
		background-image: url(../images/mega-background.jpg);
		min-height: 466px;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top;
	}
}


@media (max-width:1024px) {
	.lftmenu {
		left: 0%;
	}
}
/* 3 Aug updated css */
.oligo-main-subhead {
	padding: 6px 10px;
	background: #69c941;
	border-radius: 4px;
	margin-bottom: 5px;
	line-height: 1.1;
	width:max-content;
}
/* 3 Aug latest added css */
.oligo-main-subhead:hover {
	background: #157347;
}
/* 3 Aug latest added css */
.oligo-main-subhead a {
	color: #fff !important;
	font-size: 14px;
}
.oligo-services-note {
	color: #000;
	margin-top: 10px;
}

.oligo-services-note {
	background-color: #f8f9fa;
	border-left: 4px solid #28a745;
	padding: 8px 8px;
	display: flex;
	align-items: start;
	font-size: 1rem;
}

	.oligo-services-note i {
		margin-top: 5px;
	}
/* detection page css */


@media (min-width: 1200px) {
	.h1, h1 {
		font-size: 2.0rem;
		font-weight:bold;
	}
	.h2, h2 {
		font-size: 2.0rem;
		
	}
}


.breadcumb {
	color: #53b728;
	font-weight: 500;
	padding: 7px;
	transition: color 0.3s ease; /* smooth hover effect */
}

	.breadcumb:hover {
		color: green; /* hover color */
		/*text-decoration:underline;*/
	}


.breadcrumb a {
	text-decoration: none;
	color: green;
	margin-right: 8px;
	position: relative;
}

	.breadcrumb a::after {
		margin-left: 8px;
		color: #666;
	}

.breadcrumb span {
	color: #555;
	font-weight: 500;
}

.breadcrumb a:hover {
	text-decoration: underline;
	color: black;
}

.check {
	color: green;
	font-weight: bold;
}

/*left menu*/
.accordion {
	border: solid 1px lightgray;
}

	.accordion .accordion-item1 {
		padding: 1px 0;
	}

.accordion-header {
	font-weight: bold;
	color: black;
	padding-bottom: 2px;
}

/* 18 nov start */
.accordion-body h5 {
	font-size: 14px;
	margin: 0 0 6px;
	color: #214b32;
	text-transform: uppercase;
	letter-spacing: .02em;
}
/* 18 nov end */
.menuitems {
	display: block;
	text-decoration: none;
	color: #2f9c2f; /* Green color matching image */
	transition: background-color 0.3s, color 0.3s;
	padding-bottom: 2px;
}

	.menuitems:hover {
		background-color: #e6f4e6; /* light green hover background */
		color: #1b6e1b; /* darker green on hover */
		font-weight: bold;
		text-decoration: none;
		padding-left: 10px;
		padding-bottom:2px;

	}

.accordion .accordion-item1 {
	line-height: 1.1;
	padding-left: 5px;
}

.menuitems.active {
	background-color: #cce5cc;
	font-weight: bold;
	color: #145214;
	padding-bottom: 2px;
}
/*----------------------*/

.text {
	color: #004000;
}

.capability-card {
	border: 1px solid #4CAF50;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	margin-left: 10px;
	width: 95%;
	margin-bottom: 20px;
	padding: 0;
	background: #fff;
	transition: transform 0.3s ease;
}

	.capability-header, .capability-card:hover {
		background: #d7fecf;
	}

.capability-header {
	background: linear-gradient(90deg, #4CAF50, #2E7D32);
	color: #fff;
	text-align: center;
	font-size: 1.2rem;
	font-weight: bold;
	padding: 2px;
	border-radius: 10px 10px 0 0;
}

@media (max-width: 600px) {
	.a {
		padding-top: 25px;
	}

	.c {
		margin-left: 0px !important;
	}
}

/*----------------------*/
.card_img {
	width: 60px;
	height: 60px;
}

.logo_img {
	width: 250px;
}
/* Oligonucleotide page css start for Drop Down List*/
Select {
	width: 300px;
	padding: 5px;
	margin-top: 5px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background-color: #f9f9f9;
	transition: border-color 0.3s;
}

	select:focus {
		border-color: #28a745;
		outline: none;
	}

.selected-option {
	background-color: #d4edda !important;
	color: #155724;
}
/* Oligonucleotide page css end*/

/*Detection page css start*/
.submenu-item {
	cursor: pointer;
	padding: 5px 15px;
}

	.submenu-item:hover {
		background-color: #f8f9fa;
	}

.active-menu {
	font-weight: bold;
	color: #4db827;
}

.breadcumb {
	color: #53b728;
	font-weight: 500;
	padding: 7px;
}

.accordion-button {
	background-color: #b4e5a2;
}

	.accordion-button:not(.collapsed) {
		background-color: #b4e5a2;
	}

.bannerbg {
	background-color: #333; /* Example background */
	color: white;
}
/*Detection page css end*/

/*7 Aug 25*/
.card-title {
	font-size: 1.4em;
}

.breadcumb {
	color: #53b728;
	font-weight: 500;
	padding: 7px;
}

.d-flex.oligomodification {
	display: block !important;
	line-height: 2;
}

.card:hover .card-body a {
	font-size: 1em;
	color: #53b728;
}

.card .card-body a {
	font-size: 1em;
	color: #000;
}

/*.card:hover {
	box-shadow: 0px 0px 7px 1px #aba6a6;
}*/

.oligo-bg-icon {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	opacity: 0.3;
	pointer-events: none;
}

@media (max-width:767px) {
	.has-submenu.active .submenu-wrapper .oligo-bg-icon {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 100%;
		height: auto;
		opacity: 0.3;
		pointer-events: none;
	}
}

/*7 Aug 25*/


/*8 Aug 25*/
.sub-description-index p {
	font-size: 20px;
}


.feature-section {
	position: relative;
}

.curve-arrow {
	position: absolute;
	top: 580px; /* overlaps cards slightly */
	left: 50%;
	transform: translateX(-50%);
	width: 100%; /* scales with container */
	max-width: 1250px;
	z-index: 2; /* arrow on top of cards */
	pointer-events: none;
}

@media (max-width: 768px) {
	.curve-arrow {
		display: none; /* hide on mobile if space is tight */
	}

	.tqm {
		display: none;
	}
}



/* ====== DETAILS/FAQ == 11 aug 25==== */
details {
	border: 1px solid var(--bs-border);
	border-radius: 8px;
	background: #fff;
	margin-bottom: 12px;
	border: solid 1px lightgray;
}
@media (max-width: 576px) {
	details {
		width: 100%;
	
		
	}
}
		summary {
	cursor: pointer;
	padding: 9px 15px;
	font-weight: 700;
	font-size:14px;
	color: var(--bs-green);
	list-style: none;
}

	summary::marker, summary::-webkit-details-marker {
		display: none;
	}

	summary::before {
		content: '\25B6';
		display: inline-block;
		margin-right: 8px;
		transition: transform 0.2s ease;
	}

details[open] summary::before {
	transform: rotate(90deg);
}

details .content {
	padding: 0 15px 3px;
	color: var(--bs-ink-soft);
}
/*26 nov 25*/
.content p {
	font-size: 13px;
	margin: 0px;
	padding-left: 14px;
	padding-bottom: 3px;
	color: #676363 !important;
}

/* ====== DETAILS/FAQ == 13 aug 25==== */

.bg-light-green {
	background-color: #d7fecf;
}

/* ====== DETAILS/FAQ == 14 aug 25==== */
.icon {
	width: 28px;
	height: 28px;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	top: -3px;
}

.stroke {
	stroke: var(--bs-green);
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round
}

/* ====== DETAILS/FAQ == 20 aug 25====Form CSS */
.checks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px
}

	.checks label {
		display: flex;
		align-items: center;
		gap: 6px
	}

/*textarea {
	min-height: 120px;
	resize: vertical
}

textarea {
	width: 100%;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 14px;
	background: #fff;
	border: 1px solid rgb(216, 215, 215);
}*/


/* start 26 Aug*/
summary {
	cursor: pointer;
}

#toTopBtn {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 1;
}

.pill {
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid #dfe9ff;
	border-radius: 999px;
	background: #f7fbff;
	margin-bottom: 10px;
	margin-right: 5px;
	font-size: .78rem
}

/* End 26 Aug*/
/* Form CSS*/

/* Header Bgcolor*/
/* Header Bgcolor*/


.header-bgcolor {
	background: linear-gradient(135deg, #0a5f24 0%, #1d7a34 40%, #4caf50 100%);
	padding-top: 50px;
	padding-bottom: 50px;
	color: white;
}

	.header-bgcolor h1 {
		font-size: 3.2em;
		color: rgb(255, 255, 255);
	}

	.header-bgcolor p {
		line-height: 30px;
		font-size: 20px;
		color: #e9f6e7;
		text-shadow: 1px 1px 3px rgb(0 0 0 / 79%);
	}

@media(max-width:768px) {
	.header-bgcolor h1 {
		font-size: 2em !important;
		/* font-weight: bold;  */
		color: rgb(255, 255, 255);
	}
}
/* Theme button */
.theme-btn {
	background-color: #f5f5f5; /* very light gray */
	color: #000;
	border: 1px solid lightgray; /* Bootstrap-like border */
	border-radius: 0.375rem; /* Bootstrap rounded corners */
	padding: 0.375rem 0.75rem; /* Bootstrap padding */
	margin-right:10px;
	margin-top:5px;
	margin-bottom:5px;	
	text-decoration:none;
}

	.theme-btn:hover,
	.theme-btn.active {
		background-color: #e0e0e0; /* normal light gray */
		color: #000;
		border: 1px solid lightgray; /* Bootstrap-like border */
	}


/* Theme button */
.theme-green-btn {
	background-color: #69c941; /* very light gray */
	color: white;
	border: 1px solid lightgray;
	border-radius: 0.375rem; /* Bootstrap rounded corners */
	padding: 0.375rem 0.75rem; /* Bootstrap padding */
	margin-right: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
	text-decoration: none;
	display: inline-block;
	border-radius: 5px;
	transition: 0.2s;
	font-weight: 300;
}

	.theme-green-btn:hover,
	.theme-green-btn.active {
		background: #157347;
		color: #fff;
		border-color: #157347;
	}


/* Filled and Outline button */
.custom-btn {
	margin-right: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 0.4em 1em;
	text-decoration: none;
	display: inline-block;
	border-radius: 5px;
	transition: 0.2s;
	font-weight: 300;
}

	/* Filled button */
	.custom-btn.filled {
		background: #69c941;
		border: 1px solid #69c941;
		color: #fff;
	}

	/* Outline button */
	.custom-btn.outline {
		background: #fff;
		color: #157347;
		border: 1px solid #157347;
	}

		/* Hover for both */
		.custom-btn.filled:hover,
		.custom-btn.outline:hover {
			background: #157347;
			color: #fff;
			border-color: #157347;
		}

.text-imp {
	color: green;
	font: bold;
}
.a:hover{
	text-decoration:underline;
}
/* 16 Sep */
/*.sticky-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1030;
	background: white;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	height: 100px;
}*/
.badge-success-custom {
	display: inline-block;
	padding: 0.5rem 1rem; /* py-2 px-3 equivalent */
	border: 1px solid #dfe9ff;
	border-radius: 999px;
	background-color: #198754; /* Bootstrap bg-success */
	color: #fff; /* Bootstrap text-light */
	margin-bottom: 10px;
	margin-right: 5px;
	font-size: 0.78rem;
}
.header-fixed {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1050;
	background-color: #fff;
	
}
@media screen and (max-width: 1024px) {
	.header__navigation-wrapper {
		max-height: 80vh; /* Maximum height for mobile menu */
		overflow-y: auto; /* Enables vertical scroll */
		-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
	}

	/* Optional: limit submenu height too */
	.submenu-wrapper {
		max-height: 70vh;
		overflow-y: auto;
	}
}
.chip {
	display: inline-block;
	border: 1px solid #e6eee8;
	border-radius: 999px;
	padding: 6px 10px;
	background: #fff;
	font-weight: 700;
	color: green;
	cursor: pointer;
}

	.chip.active {
		background: #f3faf4;
		border-color: #1E5631;
		color: #1E5631;
	}
.note {
	background: #fbfdfb;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 14px;
}
.notes {
	border-left: 3px solid green;
	background: #f0fdf4;
	padding: 12px;
	border-radius: 10px;
	margin-top: 10px
}
.notes-border {
	border-left: 4px solid green;
	background: #f0fdf4;
	padding: 12px;
	border-radius: 10px;
	margin-top: 10px;
	border-right: 1px solid #e6ece7;
	border-top: 1px solid #e6ece7;
	border-bottom: 1px solid #e6ece7;
}
.note-border {
	background: #fbfdfb;
	border: 1px solid #B1DC98; /* green outline */
	border-radius: 12px;
	padding: 14px;
}

.note-imp {
	font-family: Arial, sans-serif;
	background: #f5f7f5;
	/*display: flex;*/
	flex-wrap: wrap;
	background: #fbfdfb;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 8px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

	/* Gradient overlay at right edge */
	.note-imp::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 40px; /* adjust gradient width */
		height: 100%;
		background: linear-gradient(to left, rgba(0,128,0,0.15), transparent);
		pointer-events: none;
	}



.table-search {
	width: 280px;
	max-width: 100%;
	padding: 8px 10px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	font-size: .95rem
}

.dot {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid #1E5631;
	box-shadow: 0 6px 18px rgba(0,0,0,.08);
	font-weight: 800;
	color: #1E5631;
	margin: 0 auto 8px
}

.icons {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: inline-grid;
	place-items: center;
	background: linear-gradient(120deg,#1E5631,#4A913C);
	color: #fff;
	font-weight: 800;
	margin-right: 4px;
}

.tag {
	background: #eef7fc;
	color: #095b7d;
	border: 1px solid #d4ecfb;
	padding: .35rem .55rem;
	border-radius: 999px;
	font-size: .82rem;
	font-weight: bold;
	margin-right:5px;
	margin-top:5px;
	margin-bottom:5px;
}

.tag-green {
	background: #e8f7ee;
	color: #03624b;
	border: 1px solid #B1DC98; /* green outline */
	padding: .35rem .55rem;
	border-radius: 999px;
	font-size: .82rem;
	font-weight: bold;
	margin-right: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
}
.num {
	display: flex;
	align-items: baseline;
	gap: 8px;
	line-height: 1;
	font-weight: 900;
	font-size: 28px;
	letter-spacing: -.01em;
	color: green;
}

.stat-pill {
	background: #eef7fc;
	color: #095b7d;
	border: 1px solid #d4ecfb;
	padding: .35rem .55rem;
	border-radius: 999px;
	font-size: .82rem;
	font-weight: bold;
}

.step {
	position: relative;
}

	.step:not(:last-child)::after {
		content: "→";
		position: absolute;
		top: 0px;
		right: -30px;
		font-size: 38px;
		color: #1E5631;
		font-weight: bolder;
	}

/* Mobile (↓ arrow, centered) */
@media (max-width: 768px) {
	.step {
		width: 100%; /* full width for stacking */
		margin-bottom: 40px; /* space for down arrow */
	}

		.step:not(:last-child)::after {
			display: none;
			content: "↓";
			position: absolute;
			top: auto;
			bottom: -28px;
			left: 50%; /* center align */
			right: auto;
			transform: translateX(-50%);
			font-size: 22px;
			color: #1E5631;
			font-weight: bold;
		}
}


.step .label {
	font-weight: 700;
	color: #10301b;
}

/* Accordion container with green border */

.accordion-item {
	border-radius: 15px;
	overflow: hidden;
	margin-bottom: 1rem;
}

.accordion-button {
	border: none;
	background-color: transparent !important;
	border-radius: 0;
	box-shadow: none;
	padding: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

	.accordion-button::after {
		position: static;
		margin-left: auto;
		transition: transform 0.3s ease;
	}

	.accordion-button:not(.collapsed)::after {
		transform: rotate(-90deg);
	}

	.accordion-button:focus {
		box-shadow: none;
	}

.accordion-collapse .accordion-body:last-child {
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}


.step .label {
	font-weight: bold;
	color: #10301b;
	font-size: 14px;
}

.step .sub {
	font-size: .9rem;
	color: #4c5b54;
	margin-top: 2px;
}


.chips {
	background: #eef7f1;
	color: #104b2e;
	border: 1px solid #d8efe2;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 14px;
	white-space: nowrap;
	/*font-weight: bold;*/
}

.chips-imp {
	background: #eef7f1;
	color: black;
	border: 1px solid #d8efe2;
	padding: 6px 16px;
	border-radius: 10px;
	font-size: 14px;
	white-space: nowrap;
	margin-top: 6px;
	font-weight: bold;
	display: inline-flex; /* center content */
	align-items: center; /* vertical center */
	justify-content: center; /* horizontal center */
	line-height: 1.4; /* better spacing */
	transition: all 0.2s ease; /* smooth hover */
}

	.chips-imp:hover {
		border: 1px solid #104b2e;
		cursor: pointer;
		background: #eaf3ee; /* subtle hover background */
	}

.chips-imp-outline {
	color: black;
	border: 1px solid #d8efe2;
	padding: 6px 16px;
	border-radius: 10px;
	font-size: 14px;
	white-space: nowrap;
	margin-top: 6px;
	font-weight: bold;
	background: #eef7f1;
	display: inline-flex; /* center content */
	align-items: center;
	justify-content: center;
	line-height: 1.4;
	transition: all 0.2s ease;
	text-decoration: none; /* for <a> clean look */
}

	.chips-imp-outline:hover {
		background: black;
		color: #ffffff;
	}


.text-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, #00B050, #4A913C);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 16px rgba(0, 176, 80, .25);
	border: 2px solid #e6eee8;
	margin-bottom: 8px;
	color: white;
}


/* ===== Arrow Styling ===== */
.arrow-right {
	width: 18px;
	height: 18px;
	border-top: 3px solid #00B050; /* green */
	border-right: 3px solid #00B050; /* green */
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	position: absolute;
	right: -6px;
	margin-top: -20px;
}

/* Remove arrow for last card */
.cards .col-lg-3:last-child .arrow-right {
	display: none;
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 992px) {
	/* Stack cards vertically on tablets/mobile */
	.cards .col-lg-3 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* Hide arrows on mobile */
	.arrow-right {
		display: none;
	}
}

/* Optional: spacing between cards in vertical layout */
.cards .col-12 {
	margin-bottom: 15px;
}

/*03 oct */
.track {
	position: relative;
}

	.track::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 5%;
		right: 5%;
		height: 3px;
		background-color: #d9f0e5;
		z-index: 0;
		transform: translateY(-50%);
		border-radius: 2px;
	}

.circle {
	width: 25px;
	height: 25px;
	background-color: #00b050;
	border-radius: 50%;
	text-align: center;
	line-height: 24px;
	font-weight: bold;
	z-index: 1;
	position: relative;
	color: white;
}

	.circle.active {
		background-color: #1e5631;
		color: white;
	}

/* 04 oct */
.bottom-left-link {
	position: fixed;
	bottom: 15px;
	left: 15px;
	background: #198754; /* green background */
	color: white;
	padding: 10px 15px;
	border-radius: 8px;
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	transition: 0.1s;
	scroll-behavior: smooth;
}

	.bottom-left-link:hover {
		background: #145c32; /* darker green on hover */
	}


/* 06 Oct */
.fab {
	position: fixed;
	right: 15px;
	bottom: 15px;
	display: flex;
	flex-direction: column; /* stack buttons vertically */
	gap: 10px; /* space between buttons */
	z-index: 50;
}

	.fab a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border-radius: 10px;
		background: green;
		color: #fff;
		text-decoration: none;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
	}

		.fab a.secondary {
			background: #0f172a;
			color: #fff !important;
		}

		/* Force all SVG icons to white */
		.fab a svg {
			fill: #fff !important;
		}

/* Responsive for small screens */
@media (max-width: 400px) {
	.fab a {
		width: 40px;
		height: 40px;
	}
}

/* Hide Back-to-Top initially */



/* 07 Oct */

.big {
	font-weight: 700;
	font-size: 1.2rem;
	color: #1e5631;
}

/* 08 Oct */

.node {
	filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .12));
}

.tag-box {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	fill: #5b6b64;
}

.title-box {
	font-size: 16px;
	font-weight: 700;
	fill: #1e5631; /* green title */
}

.sub-box {
	font-size: 12px;
	font-weight: 500;
}


/* 10 Oct */
.floating-icons {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 1000;
}

#upBtn {
	display: none;
}

#msgBtn,
#upBtn {
	width: 45px;
	height: 45px;
	align-items: center;
	justify-content: center;
}

	#msgBtn svg,
	#upBtn svg {
		pointer-events: none;
	}

/* 11 oct*/
.cta-banner {
	background: linear-gradient(180deg, #e8f7ee, #eafcf2);
	border: 1px solid #B1DC98;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease-in-out;
}

/* 31 oct */
.searchform .form-control {
	border: none !important;
	background: #fff !important;
	height: 46px !important;
}

.searchform input.form-control {
	border-radius: 50px 0 0 50px !important;
}

.searchform .form-control.search {
	border-radius: 0 50px 50px 0 !important;
	/*	border-left: 1px solid #e0e0e0 !important;
*/
}
.header_right:hover {
	color: var(--color-primary);
}
#refs .list li {
	font-size: 14px;
	color: #4b5563; /* muted gray tone */
	line-height: 1.5;
}
#refs li {
	font-size: 14px;
	color: #4b5563; /* muted gray tone */
	line-height: 1.5;
}
#refs h3 {
	font-size: 24px;
	
}
/*	14 Nov*/
@media (max-width: 700px) {
	.d-grid[style] {
		grid-template-columns: 1fr !important;
	}

	.d-grid svg {
		transform: rotate(90deg);
	}
}

.fw-normal {
	font-size: 13px;
}

.list li::marker {
	color: green;
}
/*####----18 nov 25*/
.scheme, .scheme.capsules {
	margin: 12px 0 22px !important;
}

	.scheme.capsules {
		display: grid;
		grid-template-columns: 1fr 30px 1fr 30px 1.2fr;
		gap: 2px;
		align-items: center;
		border: 1px solid #e6ece7;
		border-radius: 14px;
		padding: 10px;
		background: linear-gradient(180deg, #fbfefc, #ffffff);
	}

@media (max-width: 700px) {
	.scheme.capsules {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto !important;
		padding: 5px;
	}

	.cap-arrow svg {
		transform: rotate(90deg);
	}
}

@media (max-width: 768px) {
	.grid-layout {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto !important;
	}
}

.cap-pill.carrier {
	background: linear-gradient(180deg, #e9f9ef, #d8f2e3);
}

.cap-pill {
	border-radius: 999px;
	padding: 10px 14px;
	font-weight: 800;
	text-align: center;
	color: #0f2a1b;
	border: 1px solid rgba(16, 75, 46, .12);
	box-shadow: 0 6px 14px rgba(0, 0, 0, .06), inset 0 0 0 1px rgba(255, 255, 255, .4);
}

	.cap-pill.linker {
		background: linear-gradient(180deg, #fff4d8, #ffe7a8);
		border-color: rgba(171, 126, 0, .25);
	}

	.cap-pill.payload {
		background: linear-gradient(180deg, #efe9ff, #e0d2ff);
		border-color: rgba(91, 45, 201, .25);
	}

.cap-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

	.cap-arrow svg {
		width: 26px;
		height: 26px;
		stroke: #1a6b3e;
		stroke-width: 2;
		fill: none;
		opacity: .9;
	}
.custom-btn.active {
	background-color: #198754 !important;
	color: #fff !important;
	border-color: #198754 !important;
}
/*27 Nov*/
.wf-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: #e9f6ed;
	color: #1E5631;
	font-size: .85rem;
	font-weight: 800;
	border: 1px solid #cfe9d4;
	margin-right: 6px
}