:root {
	--primary--color: #2f7238;
	--secondary--color: #ff9c00;
	--dark-secondary-color:#ff5722;
	--tertiary--color: #fff;
	--line--color: #12346b21;
	--nav--color: #009688;
	--dark-grey:#313131;
	--yellow--color:#fdbf14;
	/* Extras */
	--light--clr: #F2F2F2;
	--cross-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='40' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 100%, 0)'/><path d='M11 6a5 5 0 01-5 5 5 5 0 01-5-5 5 5 0 015-5 5 5 0 015 5'  stroke-width='1' stroke='none' fill='hsla(259, 11%, 65%, 1)'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
	--web-green: #6fb22e;
	--color-light:#ffff;
	/* Social media icon colors */
	--fb--color: #3b5998;
--whatsapp--color: #25d366;
--tweet--color: #000;
--google--color: #009fdd;
--instagram--color: #d82f83;
--linkedin--color: #0077B5;
--threads--color: #000;
--tiktok--color: #69C9D0;
--youtube--color: #FF0000;
--snapchat--color: #FFFC00;
--quora--color: #B92B27;
--pinterest--color: #E60023;
--discord--color: #7289DA;
--dribble--color: #EA4C89;
--github--color: #181717;
--telegram--color: #0088cc;
--spotify--color: #1DB954;
--vimeo--color: #1ab7ea;
	
}

html {
    min-height: 100%;
}
body {
    min-height: 100%;
}


* {
	box-sizing: border-box;
	font-family: "Inter", sans-serif;
}

html{
	scroll-behavior: smooth;
}
p{
	font-family: "Inter", sans-serif;
  
}

.text-primary{
	color: var(--primary--color) !important;
}

.text-grey{
	color: #5e5e5e !important; /* WCAG AA: 7:1 on #fff (was #adadad = 2.6:1) */
}

.text-secondary{
	color: var(--secondary--color) !important;
}

h3{
	font-size: 22px;
	
}


 #navbar {
    background-color: #e3f3ff52;
    position: fixed;
    top: -150px;
    width: 100%;
    display: block;
    transition: top 0.5s;
    z-index: 99999;
    backdrop-filter: blur(15px);
}
  
  #navbar a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	text-decoration: none;
	font-size: 1em;
  }
  
  #navbar a:hover {
	color: var(--primary--color);
  }


  .accordion-button:not(.collapsed) {
    color: #000;
    background-color: #c6a5601a;
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}

 .text-white{
	 color: #fff !important;
 }

.modal-content {
    margin: auto;
    display: block;
    width: 100%;
    max-width: 800px;
	
}
.modal {
    z-index: 1050 !important;
}
.modal-backdrop {
    z-index: 1040 !important;
}
.font-1-2em{
    font-size: 1.2em !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NHB SUBSIDY — BUTTON SYSTEM
   ───────────────────────────────────────────────────────────────────────────────
   HOW TO USE
   ──────────
   DARK BG    →  .btn-light-outlined   ghost white border, gradient fills on hover
   DARK BG    →  .white-button         solid white pill,   gradient fills on hover
   ANY BG     →  .btn-dark             gradient always visible, slides on hover
   LIGHT BG   →  .btn-dark-outlined    ghost dark border,  gradient fills on hover
   NAVBAR     →  .header-button        identical to .btn-dark

   ARROW ICON CIRCLES (round icon-only — not text pills)
              →  .btn-link-light            green ring  — light bg
              →  .btn-link-categories       orange ring — rotates ↗ on hover
              →  .btn-link-white-categories white ring  — dark bg, rotates ↗
              →  .btn-link-dark             dark ring   — light bg

   BOOTSTRAP  →  .btn-success  .btn-warning  .btn-outline-warning
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────────────────── */
:root {
    --btn-gradient: linear-gradient(
        to right,
        var(--secondary--color),
        var(--nav--color),
        var(--nav--color),
        var(--primary--color)
    );
    --btn-transition: background-position 1s ease,
                      transform 0.25s ease,
                      box-shadow 0.25s ease,
                      border-color 0.25s ease,
                      color 0.25s ease;
    --btn-shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.18);
}


/* ══════════════════════════════════════════════════════════════════════════════
   TIER 1 — Primary pill CTAs
   ══════════════════════════════════════════════════════════════════════════════ */

/* Shared base */
.btn-dark,
.btn-light-outlined,
.btn-dark-outlined,
.white-button,
.header-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none !important;
    padding: 14px 30px;
    border-radius: 999px;
    cursor: pointer;
    background-size: 200% 100%;
    position: relative;
    overflow: hidden;
    transition: var(--btn-transition);
}

/* .btn-dark — gradient visible at rest, slides right on hover. Use on any bg. */
.btn-dark {
    color: #fff;
    border: none;
    background-position: 10% 0%;
	background: var(--btn-gradient);
}
.btn-dark:hover {
    color: #fff;
    background-position: 100% 0%;
    transform: translateY(-3px);
    box-shadow: var(--btn-shadow-hover);
}

/* .header-button — identical to .btn-dark, kept so navbar HTML needs no changes */
.header-button {
    color: #fff;
    border: none;
    background-position: 10% 0%;
	background: var(--secondary--color);
}
.header-button:hover {
    color: #fff;
    background-position: 100% 0%;
    transform: translateY(-3px);
    background: var(--primary--color);
    box-shadow: var(--btn-shadow-hover);
}

/* .btn-light-outlined — ghost white border, gradient slides in on hover. Use on dark bg. */
.btn-light-outlined {
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.80);
    background-position: -100% 0%;
    backdrop-filter: saturate(140%) blur(5px);
}
.btn-light-outlined:hover {
    color: #000000;
    border-color: transparent;
    background-position: 0% 0%;
    transform: translateY(-3px);
    box-shadow: var(--btn-shadow-hover);
	background: #fff;
}

/* .btn-dark-outlined — ghost dark border, gradient slides in on hover. Use on light bg. */

/* .white-button — solid white at rest, gradient fills on hover. Use on dark bg. */


/* ══════════════════════════════════════════════════════════════════════════════
   TIER 2 — Arrow / icon circle buttons
   ══════════════════════════════════════════════════════════════════════════════ */

/* Shared base */

/* Green ring — for light backgrounds */

/* Orange ring — rotates ↗ on hover */

/* White ring — for dark backgrounds */

/* Dark ring — for light backgrounds */

/* Icon circles + arrow icons (group-hover driven) */
.group-hover-trigger {
    transition: transform 0.3s ease;
}

/* Category tile */


/* ══════════════════════════════════════════════════════════════════════════════
   TIER 3 — Bootstrap overrides (colour only)
   ══════════════════════════════════════════════════════════════════════════════ */

.btn-success {
    background-color: var(--primary--color);
    border-color: var(--primary--color);
    color: #fff;
    transition: filter 0.2s ease, transform 0.2s ease;
}
.btn-success:hover {
    background-color: var(--primary--color);
    border-color: var(--primary--color);
    color: #fff;
    filter: brightness(1.12);
    transform: translateY(-2px);
}
.btn-success:focus {
    box-shadow: 0 0 0 0.25rem rgba(47, 114, 56, 0.35);
}

.btn-warning {
    background-color: var(--secondary--color);
    border-color: var(--secondary--color);
    color: #fff;
    transition: filter 0.2s ease, transform 0.2s ease;
}
.btn-warning:hover {
    background-color: var(--secondary--color);
    border-color: var(--secondary--color);
    color: #fff;
    filter: brightness(1.12);
    transform: translateY(-2px);
}
.btn-warning:active:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 156, 0, 0.35);
}

.btn-light:hover {
    background-color: var(--secondary--color);
    color: #fff;
}


/* ══════════════════════════════════════════════════════════════════════════════
   TIER 4 — Specialized / utility (intentionally not standardised)
   ══════════════════════════════════════════════════════════════════════════════ */

/* .arrow-hover-button — text span inside pill that slides right to reveal arrow */
.arrow-hover-button {
    padding-right: 0;
    transition: padding-right 0.4s ease;
}
.arrow-hover-button:hover {
    padding-right: 65px;
}

/* .subcat-btn — card-hover reveal pill */

/* .btn-whatsapp — WhatsApp brand colour */

/* .btn-floating — FAB circle */

/* .icon-button — square icon chip */

/* .btn-lg — Bootstrap size override */

/* .btn-web-primary — inline nav tab text buttons */

/* .gradient--btn — simple solid green fill */

/* .button_bt — orange fill chip */

/* .button_adjust — light utility filter button */

/* .project-button — product listing card button */

/* .btn-border — outline filter badge */

/* .btn-products — product category text-colour link */

/* .rtin-btn — legacy rounded outline CTA */

/* .link__btn — inline text link with animated arrow icon */

/* .cta-name / .cta-name-two — offer card label (not a button) */

.bg-primary-light {
    background: #f2f2f2 !important;
}

.bg-counter{
	background: #ffffff29;
    backdrop-filter: saturate(1.8) blur(5px);
    border-radius: 6px;
    border: 1px solid #ffffff42;
	box-shadow: 0px 10px 25px #0000000f;
}

.gradient-wave-bg {
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.gradient-wave-bg::before {
    content: "";
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    z-index: -1;
    background: conic-gradient(from 230deg at 40% 90%, var(--secondary--color), var(--secondary--color), var(--nav--color), var(--primary--color));
    background-size: 150% 100%;
    filter: blur(30px);
    animation: wave-gradient 10s ease-in-out infinite alternate;
}

.gradient-wave-short-bg {
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.gradient-wave-short-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: conic-gradient(from 150deg at 70% 250%, var(--dark-secondary-color), var(--secondary--color), var(--nav--color), var(--yellow--color));
    background-size: 100% 100%;
    animation: wave-gradient 10s ease-in-out infinite alternate;
}

.text-gradient {
  /* exactly the same conic-gradient + animation you used on the background */
  background: conic-gradient(from 230deg at 40% 90%, var(--secondary--color), var(--secondary--color), var(--nav--color), var(--primary--color));
  background-size: 120% 100%;
  animation: wave-gradient 10s ease-in-out infinite alternate;

  /* mask the gradient to the text */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* for non-WebKit browsers: */
  background-clip: text;
  color: transparent;
}

.text-gradient-light {
  /* exactly the same conic-gradient + animation you used on the background */
  background: conic-gradient(from 230deg at 40% 90%, #fff, #fff, #ffbf00, #cdfcd396);

  
  background-size: 150% 100%;
  animation: wave-gradient 10s ease-in-out infinite alternate;

  /* mask the gradient to the text */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* for non-WebKit browsers: */
  background-clip: text;
  color: transparent;
}
@keyframes wave-gradient {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 0%;
    }
}


.gradient-wave-light-bg {
    position: relative;
    z-index: 0;
}

.gradient-wave-light-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: conic-gradient(
        from 240deg at 50% 120%,
        #afc6ff,
        #ffffff,
        #ffffff,
        #ffffff,
        var(--primary--color),
        #ffffff,
        #ffffff,
        #ffffff,
        var(--primary--color)
    );
	opacity: 0.1;
    background-size: 150% 100%; /* double width for motion */
    animation: light-wave-gradient 10s ease-in-out infinite alternate;
}
@keyframes light-wave-gradient {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 0%;
    }
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
}


/* Light background for hero */

/* Container for floating images */

/* Base style for each chip image */

/* Shape types – image itself is set from JS */

/* When active, the animation runs once */

/* Floating + fade-in + fade-out – NO rotation */
@keyframes float-pop-no-tilt {
    0% {
        opacity: 0;
        transform: translate3d(0, 18px, 0) scale(0.7);
    }
    10% {
        opacity: 1;
        transform: translate3d(6px, 0, 0) scale(1);
    }
    40% {
        opacity: 1;
        transform: translate3d(-10px, -22px, 0) scale(1.05);
    }
    70% {
        opacity: 0.9;
        transform: translate3d(10px, 12px, 0) scale(0.98);
    }
    100% {
        opacity: 0;
        transform: translate3d(0, 28px, 0) scale(0.65);
    }
}

/* Hover: pause + zoom + stronger glow */

/* Image */

/* Black-transparent gradient overlay from bottom */

/* Title + button animation states */


/* Hover effects */


/* IMAGE MOVE ONSCROLL */


  /* IMAGE MOVE ONSCROLL */


.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}


.modal {
    display: none;
    position: fixed;
    z-index: 999999 !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
	backdrop-filter: saturate(100%) blur(3px);
    background: #00000085;
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #ffffffef;
    background-clip: padding-box;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 1.5rem;
    outline: 0;
}

.bg-secondary {
    background-color: var(--secondary--color)!important;
}
.custom{
	width: 50%;
}


.navbar .dropdown-menu{
	max-height: inherit;
    overflow-y: auto;
	overflow: visible;
}

.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 0;
}


/* Timeline CSS */

/* (A) TIMELINE CONTAINER */
  
  /* (B) DRAW VERTICAL LINE USING ::BEFORE */
  
  /* (C) COSMETICS FOR EVENTS */
  div.event {
	/* padding: 20px 30px;
	background-color: #ffebeb; */
	position: relative;
	border-radius: 6px;
	margin-bottom: 10px;
  }
  
  /* (D) COSMETICS FOR EVENT DATE & TEXT */
  p.date {
	font-size: 1.1em;
	font-weight: 300;
	color: #000;
  }
  p.txt {
	margin: 0px 0 0 0;
	color: #222;
  }
  

  
  /* (F) CIRCLE ON TIMELINE */
  div.event::after {
	/* (F1) "MAGIC CIRCLE" */
	content: "";
	background: var(--primary--color);
	border: 4px solid #fff;
	width: 25px; height: 25px;
	border-radius: 50%;
   
	/* (F2) POSITION TO THE LEFT */
	position: absolute;
	top: 20%; left: -45px;
  }


/* Timeline CSS */


.slided::-webkit-scrollbar, .navbar .dropdown-menu::-webkit-scrollbar {
	display: none;
}
@keyframes stroke {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
}

body {
	margin: 0;
	padding: 0;
	background-color: #fff;
}

h1,
h2,
h3,
h4 {
	letter-spacing: 0px;
}

    /* First, override Bootstrap's default positioning for carousel controls */
	.carousel-control-prev,
	.carousel-control-next {
	  position: static !important; /* Remove the absolute positioning from Bootstrap */
	  display: inline-block;       /* So they can sit side by side */
	  margin: 0 5px;               /* Spacing between them */
	  z-index: 999;                /* Ensure they're clickable above other elements */
	}
	
	/* Now position the container of both buttons in the bottom-right corner */


footer.footer {
	background-color: var(--primary--color);
}
footer.footer {
	background-color: var(--primary--color);
}

.dropdown-item {
    display: block;
    width: 100%;
    clear: both;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border-bottom: 0.5px solid #00000038 !important;
    line-height: 2;
    min-width: 250px;
}

.dropdown-item:focus,
.dropdown-item:hover {
	color: var(--secondary--color) !important;
    background-color: transparent;
}

/* Links look like links.

   This rule was `a { text-decoration: none !important }` — every link on the
   site, stripped of its underline, with an !important no template could
   override. That is why a title link read as a sentence and why "Directorate
   of Horticulture, Department of Agriculture, Government of Bihar" looked like
   the end of a paragraph rather than the door it is. It is also WCAG 1.4.1:
   with the underline gone and the ink identical to the body, nothing but a
   hover distinguished a link at all.

   Chrome that is obviously a control already — a button, a pill, a nav item, a
   card, a breadcrumb — says so with its own shape, so those opt out by class
   below. Everything else gets an underline drawn faintly in its own colour,
   which reads as an affordance rather than as emphasis. */
a {
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a[class*="btn"], a[class*="pill"], a[class*="tag"], a[class*="chip"],
a[class*="card"], a[class*="nav"], a[class*="tab"], a[class*="__more"],
a[class*="thumb"], a[class*="logo"], a[class*="brand"],
.breadcrumb a, .ft a, .xc__card, .fq__card, .rw__title a, .bv-more,
.mob-nav-link, .hd__locbtn, .sh__float, .sh-ask__btn, .lb__btn,
.se-card, .gl-row a, .ql-row a, .dl-doc, .sr__title, .st__doc, .st__btn,
.dt-pills a, .blog-tag-pill, .blog-category-item, .blog-recent-item, .skip-to-content {
    text-decoration: none;
}

.glide__arrow {
	position: absolute;
    display: block;
    top: 50%;
    z-index: 2;
    color: #3b3b3b !important;
    text-transform: uppercase;
    padding: 9px 12px;
    background-color: #ffffff !important;
    border: 1px solid rgb(199 199 199 / 50%) !important;
    border-radius: 0px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    opacity: 1;
    cursor: pointer;
    transition: opacity 150ms ease, border 300ms ease-in-out;
    transform: translateY(-50%);
    line-height: 1;
}

.hover--float-up,
#course .card {
	transition: all 0.25s ease-out 0s;
}

.dynamic-content table {
	width: 100% !important;
	border-collapse: collapse;
	margin-bottom: 40px;
}
/* Only the first item in a selector list carries the prefix, so what was
   written here as ".dynamic-content thead, tbody, tr, th, td" put a 1px box and
   a 6px padding on every table row and cell on the public site, including the
   cost-norm tables in articles that style themselves. Each part is scoped now. */
/* A CMS page body had three competing definitions of the same prose: this
   one, a block in the dynamic-page template, and web/_shared/prose. This was
   the one that won where they disagreed, so every table on a policy page had a
   full cell grid at 6px padding and a solid green bar behind its header, and
   the body was 16px black — none of which is the site's table or its ink. The
   partial owns it now; only the paragraph spacing inside a table cell, which
   is genuinely about CMS markup, stays. */
.dynamic-content table p {
	margin: .5rem .3rem !important;
}
 

/* Zebra striping */

/* .dynamic-content tr:nth-of-type(odd) {
	background: #fff;
} */

.powered {
	color: var(--secondary--color);
}




/* .news-title{
    min-height: 2rem;
} */

.shadow {
	box-shadow: none !important;
	border: 1px solid #dfdfdf;
}

.card-title span {
	position: relative;
	transition: all 0.3s ease-out 0s;
	-webkit-transition: all 0.3s ease-out 0s;
	z-index: 1;
}

.card-title {
	margin-bottom: 1.5rem;
}

.card-title span img {
	position: absolute;
	left: 20px;
	bottom: -13px;
	z-index: -1;
	width: 34%;
}


/* .blink_img {
    -webkit-animation: section-animation-2 3s infinite;
    animation: section-animation-2 6s infinite;
    
  } */
@keyframes section-animation-2 {
	0% {
		width: 0px;
		height: 20px;
	}
	20% {
		width: 250px;
		height: 20px;
	}
	100% {
		width: 250px;
		height: 20px;
	}
}

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* max-height: 830px !important; */
}

.iti {
    position: relative;
    display: inline-block;
    width: 100%;
}

.iti--allow-dropdown .iti__flag-container, .iti--show-selected-dial-code .iti__flag-container {
    right: auto;
    left: 20px !important;
}

.iti__flag-box, .iti__country-name {
    margin-right: 8px;
    color: #000 !important;
}

.color {
	height: 10px;
	margin: -17px -17px 0px -17px;
	/* clip-path: circle(64% at 50% 2%); */
}

hr {
    margin: 0rem 0;
    color: inherit;
    background-color: #ddd;
    border: 0;
    opacity: 1 !important;
}

#courses .card:hover {
	transform: scale(1.03);	
	/* box-shadow: 0.5rem 4rem 2rem rgba(0,0,0,.15), 0.5rem 3rem 2rem rgba(0,0,0,.15); */
	transition: .25s ease-in-out;
}

#courses .card:hover .card-title {
	color: var(--primary--color) !important;
}

#courses .card:active {
	transform: translateY(.1em);
	box-shadow: none;
	transition: all ease-in-out .15s;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .3;
    z-index: 1;
    background-color: #000000;
}

.rounded--4 {
	border-radius: .5rem;
}

.fw-bold {
    font-weight: 600!important;
}

.fw-light {
    font-weight: 300!important;
}

.nav--logo {
	width: 170px;
	padding: 10px;
	height: auto;
}

.fs-6 {
    font-size: 12px!important;
}

.user-img {
	width: 100px;
	/* margin-left: 125px !important; */
	position: relative;
	/* margin: -120px auto 10px auto */
}

.bg-primary{
	background: var(--primary--color) !important;
}

.fs-5 {
    font-size: 15px!important;
}

.position-absolute{
	position: absolute !important;
	z-index: 99;
}


.text-purple{
	color: var(--purple);
}

/* MAP CSS */

/* MAP CSS */
  
  /* Global Presence Section */
  
  /* Large, semi-transparent background text */
  
  /* Stats Box Design */
@keyframes moveGradient {
	0% {
	  background-position: 0% 0%;
	}
	100% {
	  background-position: 100% 0%;
	}
  }
  
  /* Radar Pin Base */
  
  /* Merged popup effect on both the country name text and the radar pulse */
@keyframes popupEffect {
	0%, 40%, 100% { opacity: 0; }
	45%, 75% { opacity: 1; }
  }
  
  /* Apply the popup effect to the country name text */
  
  /* Use ::after on the radar-pin for the pulsing effect */
  
  /* Map container: relative so that pins are positioned within */
  
  /* Pin container: fill the map container */
  
  /* Pin elements: position absolute relative to .map-container; using a custom property for delay */
  
  /* Optional: Hover effect on pins */
  
	
  /* Place name styling */
	
  /* Responsive adjustments */
  

/* MAP CSS */

    /* Add your custom CSS here */
   /* Container for the box-style radio buttons */
/* Hide default radio inputs */
/* Style the label as a box */
/* On hover, change border-color slightly */
/* When the radio is checked, style the label with your primary color */

/* ICON BOX */


/* Fixed-size image container */

/* Make sure the image fills the container while maintaining its aspect ratio */

.badge-subtext {
	background: var(--secondary--color);
    color: #ffffff;
	border-radius: 5em;
    padding: 10px 20px;
    font-weight: 400;
    font-size: 1em;
}

.badge-subtext-green {
	background: var(--primary--color);
	border-radius: 5em;
    color: #fff;
    padding: 10px 20px;
    font-weight: 400;
    font-size: 1em;
	  white-space: normal !important;  /* allow wrapping */
  word-break: break-word;          /* break really long words */
  line-height: 1.35; /* adjust line height for better readability */
}

  
  /* Ensure the carousel item is positioned relatively to contain the absolute overlay */


.bg-overlay {
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	bottom: 0;
	right: 0;
	top: 0;
	opacity: 0.4;
	background-color: #000;
  }

.font-sub{
	font-size: 3.5em !important;
}
.adjust_img,
.adjust_card-img{
	object-fit: cover;
	object-position: center;
}
.adjust_card-img{
	width: 100%;
	height: 13rem;
	margin: 0;
}

.navbar-light .navbar-toggler {
    color: rgb(255 255 255 / 0%);
    border-color: transparent;
}


/* course feature */


.carousel .carousel-inner .carousel-item {
	overflow: hidden;
}

.c-wrapper {
    overflow: visible; /* Ensure overflow doesn’t interfere */
    min-height: 100vh; /* Ensure it’s tall enough */
}

.z-index-top{
	z-index: 999999 !important;
}


.items {
    width: 90%;
    margin: 0px auto;
    margin-top: 100px
}


.bottom-left {
	position: absolute;
	bottom: 10px;
  }

.nav-item:hover .nav-link {
	transition: color .15s ease-in-out;
}

.nav-item .nav-link {
	color: #000000;
	transition: color .15s ease-in-out;
	font-size: 1em;
    font-weight: 300;
}

.navtext:hover {
	transition: color .15s ease-in-out;
	font-size: 1em;
    font-weight: 300;
}

.navbar-light .navbar-nav .nav-link.active {
	color: var(--secondary--color);
}

.border-top {
    border-top: 1px solid #ddd!important;
}

.border-left {
    border-left: 1px solid #ddd!important;
}

.border-right {
    border-right: 1px solid #dddddd5c !important;
}


	  


.card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;

	background-clip: border-box;
	border: none;
	box-shadow: none;
	border-radius: 0;
	transition: .25s ease-in-out;
}


.list-style-none{
	list-style: none !important;
}

a:hover {
    color: var(--primary--color); 
}

.font-base{
	font-family: "Inter", sans-serif;
}

.form-control-lg {
    min-height: calc(1.5em + (1rem + 2px));
    padding: 0.5rem 1rem;
    font-size: 14px !important;
    border-radius: 0rem;
}

.form-select-lg {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    font-size: 14px !important;
    border-radius: 3rem;
    line-height: 2.5;
}

.w-50{
	width: 50%;
}

/* Form fields.
   These were pills — border-radius 3rem — with a 2.5em line-height, so every
   input on the site was a tall lozenge. Nothing else on the site is a lozenge
   any more: the header search, the page heads and the cards are all 10-11px.
   A field that does not match the field beside it is the kind of detail people
   cannot name but do notice. This file is loaded only by the public site, so
   the admin keeps its own Bootstrap defaults. */
.form-control {
    display: block;
    width: 100%;
    padding: 0.6rem 0.85rem;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #e4e9e5;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 10px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary--color, #2f7238);
    box-shadow: 0 0 0 3px rgba(47, 114, 56, .12);
    outline: 0;
}
.form-select {
    border-radius: 10px;
    border-color: #e4e9e5;
    padding: 0.6rem 2rem 0.6rem 0.85rem;
    font-size: 13.5px;
}

.bordered {
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
}

.adjusting {
	margin-bottom: 2px;
	margin-top: 0px;
}

.paragraph {
	margin-bottom: 9px;
}
.h-320{
	height: 320px !important;
}
.w-40{
	width: 40%;
}

/* Emphasis is 600, not 700.

   700 is the one weight this site reserves for prose headings inside an
   article body, and this rule handed it to every <strong> on the site with an
   !important that no template could override — every header dropdown label,
   every lead-in inside a notice, every emphasised phrase in CMS content, all
   heavier than the headings above them. The article body had already set its
   own strong to 600 and could only do so because it is more specific. This is
   that, for everywhere else. app.css is loaded only by the public site, so the
   admin keeps Bootstrap's defaults. */
b, strong {
    font-weight: 600 !important;
    font-family: inherit !important;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: var(--secondary--color);
}
.nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--primary--color);
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

  /* Ensure the sidebar can scroll with the page */
.sidebar {
  /* no overflow on the sidebar or its parents! */
}

/* Only apply on medium+ screens */

/* Background Image With Reduced Opacity */
  
  /* The text container */

.dynamic-content .accordion{
	display: block !important;
}


.dropdown-menu li {
	position: relative !important;
	}
	.dropdown-menu .dropdown-submenu {
	/* display: none; */
	position: absolute;
	
	}
		.dropdown-menu > li:hover > .dropdown-submenu {
		display: block;
		}
		/* slick */

		.lazy{
			width:100%;
			margin:0 auto;
		}
		
		/*Edit, forgot this important bit.  This keeps the other slides visible*/

		    .accordion-button:not(.collapsed) {
        color: #fff;
        background-color: var(--secondary--color);
    }
    a {
    color: var(--primary--color);
    text-decoration: underline;
}

/* Merged and Sorted Media Queries */
@media screen and (max-width: 478px) {
	.font-1-2em {
    font-size: 1em !important;
}
}
@media screen and (max-width: 768px) {
/* .user-img{
		margin-left: 35% !important;
	} */

.chatbox {
    margin-top: -40% !important;
    min-height: 40vh !important;
}
	.nav--logo{
		width: 150px;
	}

	.font-sub {
		font-size: 2.5em !important;
	}

	.carousel .carousel-inner .carousel-item {
		overflow: hidden;
	}


	.navbar-margin{
		margin-top: 1rem;
	}
	
	/* .mob-service-height{
		height: auto !important;
		overflow: hidden;
	} */


	.row {
		--bs-gutter-x: 1.5rem;
		--bs-gutter-y: 0;
		display: flex
	;
		flex-wrap: wrap;
		margin-top: calc(var(--bs-gutter-y)* -1);
		margin-right: auto;
		margin-left: auto;
	}


.dropdown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0px !important;
    font-size: 15px;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: rgba(255, 174, 53, 0.24) !important;
    background-clip: padding-box;
    border: 1px solid rgb(0 0 0 / 15%);
    border-radius: 0;
    box-shadow: none;
}
	.nav-item .nav-link {
		color: white;
		transition: color .15s ease-in-out;
	}

	.dynamic-content {
		overflow: hidden;
	}
	.dynamic-content table{
		display: block;
		/* width: 88vw !important;		 */
		overflow: scroll;
	}
	.dynamic-content div{
	    /* display: flex; */
	    width: 100% !important;
	}
	.dynamic-content p{
		margin-bottom: 0 !important;
	}
	.ps--sm-0 {
		padding-left: 0 !important;
	}
	
		.carousel-inner {
		position: relative;
		width: 100%;
		overflow: hidden;
		max-height: 800px !important;
	}
}
@media screen and (max-width: 900px) {
.dropdown-menu {
			width: 100%;
			}
		.dropdown-menu .dropdown-item{
			line-height: 1;
			border-bottom: 0 !important;
        padding: 1em;
			}
		.dropdown-menu .dropdown-submenu{
			width: 100%;
			}
	
}
@media screen and (max-width: 992px) {
.modal-lg, .modal-xl {
    max-width: 992px;
}

}
@media screen and (max-width: 1024px) {
.font-sub {
    font-size: 2em !important;
}


}
@media screen and (max-width: 1440px) {
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1440px;}
}
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1400px;
    }
}
 /* ═══════════════════════════════════════════════════════════════════
      MISSION & VISION — BENTO GRID
      ═══════════════════════════════════════════════════════════════════ */

   .mv-bento { background: #fff; }

   /* 3-column, 3-row grid */

   /* ── Base cell ──────────────────────────────────────────────────── */
   .mv-cell {
     border-radius: 6px;
     padding: 2rem;
     display: flex;
     flex-direction: column;
     position: relative;
     overflow: hidden;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
   }
   .mv-cell:hover {
     transform: translateY(-4px);
     box-shadow: 0 18px 45px rgba(0, 0, 0, 0.10);
   }

   /* ── ① Mission — dark green, spans all 3 rows ───────────────────── */
   .mv-cell--mission {
     grid-column: 1 / 2;
     grid-row: 1 / 4;
     background: linear-gradient(145deg, #163d1b, var(--primary--color) 70%);
     color: #fff;
     min-height: 480px;
   }
   .mv-cell--mission::before {
     content: '01';
     position: absolute;
     top: -10px; right: 16px;
     font-size: 64px;
     font-weight: 900;
     color: rgba(255, 255, 255, 0.05);
     line-height: 1;
     pointer-events: none;
     user-select: none;
   }

   /* ── ② Stat A — orange, row 1 centre ───────────────────────────── */
   .mv-cell--stat-a {
     grid-column: 2 / 3;
     grid-row: 1 / 2;
     background: var(--secondary--color);
     color: #fff;
     justify-content: flex-end;
     min-height: 170px;
   }

   /* ── ③ Stat B — light grey, row 1 right ────────────────────────── */
   .mv-cell--stat-b {
     grid-column: 3 / 4;
     grid-row: 1 / 2;
     background: #f2f4f0;
     color: #111;
     justify-content: flex-end;
     min-height: 170px;
   }

   /* ── ④ Vision — cream, rows 2–3 centre ─────────────────────────── */
   .mv-cell--vision {
     grid-column: 2 / 3;
     grid-row: 2 / 4;
     background: #fafaf7;
     border: 1px solid #e5ece5;
     min-height: 310px;
   }

   /* ── ⑤ Accent A — warm orange-brown, row 2 right ───────────────── */
   .mv-cell--accent-a {
     grid-column: 3 / 4;
     grid-row: 2 / 3;
     background: linear-gradient(145deg, var(--primary--color), var(--secondary--color));
     color: #fff;
     justify-content: flex-end;
     min-height: 150px;
   }

   /* ── ⑥ Accent B — teal, row 3 right ────────────────────────────── */

   /* ── Tag / eyebrow pill ─────────────────────────────────────────── */

   /* ── Titles ─────────────────────────────────────────────────────── */

   /* ── Description ────────────────────────────────────────────────── */

   /* ── Link ───────────────────────────────────────────────────────── */

   /* ── Big stat numbers (top row cells) ───────────────────────────── */

   /* ── Accent cell internals (shared by accent-a and accent-b) ────── */

   /* ── Tablet (≤991px) ────────────────────────────────────────────── */
@media (max-width: 991px) {
     .mv-cell--mission  { grid-column: 1 / 3; grid-row: 1 / 2; min-height: 260px; }
     .mv-cell--stat-a   { grid-column: 1 / 2; grid-row: 2 / 3; }
     .mv-cell--stat-b   { grid-column: 2 / 3; grid-row: 2 / 3; }
     .mv-cell--vision   { grid-column: 1 / 2; grid-row: 3 / 4; min-height: 240px; }
     .mv-cell--accent-a { grid-column: 2 / 3; grid-row: 3 / 4; min-height: 240px; }
   }

   /* ── Mobile (≤575px) ────────────────────────────────────────────── */
@media (max-width: 575px) {
     .mv-cell--mission,
     .mv-cell--stat-a,
     .mv-cell--stat-b,
     .mv-cell--vision,
     .mv-cell--accent-a,
     .mv-cell--accent-b { grid-column: 1 / 2; grid-row: auto; }
     .mv-cell--mission   { min-height: 300px; }
     .mv-cell--accent-a,
     .mv-cell--accent-b  { min-height: 150px; }
   }

   .hero-v3__btn-cta {
  display: inline-flex; align-items: center; gap: 10px; color: #fff !important;
  font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 500; padding: 14px 30px;
  border-radius: 999px; border: none; cursor: pointer; text-decoration: none !important;
  position: relative; overflow: hidden;
  background: linear-gradient(to right, var(--secondary--color), var(--nav--color), var(--nav--color), var(--primary--color));
  background-size: 200% 100%; background-position: 10% 0%;
  transition: background-position 1s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}
.hero-v3__btn-cta:hover { background-size: 300% 100%; transform: translateY(-3px); box-shadow: 0 14px 32px rgba(47,114,56,0.45); transition: 0.3s ease !important; }
.hero-v3__btn-cta span, .hero-v3__btn-cta svg { position: relative; z-index: 1; }

/* ====================================================================
   Pagination
   ──────────────────────────────────────────────────────────────────────
   Bootstrap ships .page-link in its own blue. This used to be overridden
   to orange, on request, back when orange was half the palette. It is not
   any more — the only orange left on the site is inside the logo — and a
   bright orange chip at the foot of a list of guides was the loudest thing
   on the page for the least important control on it.
==================================================================== */
.pagination .page-link {
    color: var(--primary--color, #2f7238) !important;
    border-color: #e4e9e5;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pagination .page-link:hover {
    color: var(--primary--color, #2f7238) !important;
    background-color: #eaf4ec !important;
    border-color: #cfe0d5 !important;
}
.pagination .page-link:focus {
    color: var(--primary--color, #2f7238);
    box-shadow: 0 0 0 0.2rem rgba(47, 114, 56, 0.2);
    border-color: var(--primary--color, #2f7238);
    outline: 0;
}
.pagination .page-item.active .page-link {
    color: #fff !important;
    background-color: var(--primary--color, #2f7238) !important;
    border-color: var(--primary--color, #2f7238) !important;
}
.pagination .page-item.disabled .page-link {
    color: #65726b !important;
    background-color: #fff;
    border-color: #e4e9e5;
}
/* ── Never let a phone zoom itself on a tap ──────────────────────────────────
   iOS Safari zooms the whole page in when a focused text field computes below
   16px, and it does not zoom back out afterwards. Every field on this site was
   between 12 and 15.2px, so tapping the search box — the most common first act
   on any page here — left the reader at about 130% with the layout off the
   right edge, and the only way back was a pinch.

   This is the one rule that has to win, because each page's own <style> block
   is parsed after this file and would otherwise take it back, so it carries
   !important deliberately. It applies to phones only; on a desktop the site
   keeps its 13px scale. Checkboxes and radios are left alone: they have no
   text to zoom for. */
@media (max-width: 767px) {
    input[type="text"], input[type="search"], input[type="email"],
    input[type="tel"], input[type="url"], input[type="number"],
    input[type="password"], input[type="date"], input:not([type]),
    textarea, select {
        font-size: 16px !important;
    }
}

/* ── Form labels and small print, in the site's voice ────────────────────────
   The form pages carried Bootstrap's own: `form-label fw-bold` at 700 on every
   label of the ask and assistance forms, and `.text-muted` (#6c757d) for the
   small print. Nothing on this site is 700 outside a prose heading, and
   #6c757d is not the ink that was checked against these grounds — #65726b is
   the faint ink the contrast pass settled on, and it is what the header, the
   footer and every shared partial already use.

   It was #6a7670 until the page gained a ground. That value was picked against
   white and lands at 4.44:1 on the tint, so the twelve page references in an
   article's sources box failed the moment the body stopped being white — the
   same failure, in the same ink, that the hero's proof line had. This file was
   missed by the sweep that fixed the Blade partials, which is the argument for
   keeping the faint ink in one place rather than in twenty-eight.

   These live here rather than in a page's own <style> block because app.css is
   loaded only by the public site, so `.form-label` here is the site's own; the
   admin keeps Bootstrap's defaults. Same reasoning as `.form-control` above. */
.form-label {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -.1px;
    color: var(--ink, #0f172a);
    margin-bottom: 5px;
}

.form-check-label { font-size: 12.5px; color: var(--ink, #0f172a); }

.text-muted { color: #65726b !important; }

/* A required marker should read as a marker, not as an error. */
.form-label .text-danger { color: #a3320b !important; font-weight: 500; }