/* Global Variables */

:root {
  --font-primary: "Archivo", sans-serif;
  --font-secondary: "GalanoGrotesque-Regular7", sans-serif;
  --color-primary: #094e8e;
  --color-secondary: #5ca980;
  --color-bg-light: #abd0f4;
  --color-body: #001d3d;
  --bg-primary-color: linear-gradient(to bottom, #5ca980 100%, #0b447f00 0%);
  --bg-light-gray: #bcbdc0;
  --border-light-gray: #bcbdc0;
  --border-gray: rgba(188, 189, 192, 1);
  --gray-cover-title: #f6f8fa;
  --color-secondary-gray-heading: #595a5c;
  --color-secondary-gray-topic: #66696a;
  --color-secondary-gray-body: #565759;
  --black: #231f20;
  --white: #fff;
  --transition: all ease 0.4s;
  --box-shadow-double: 0 4px 32px 0 rgba(0, 0, 0, 0.08);
  --theme-gradient: linear-gradient(to right, #0c4d90 0%, #58aa7e 100%);
  --af-teal:    #2a7f7f;
  --af-green:   #3aafa9;
  --af-navy:    #1a3352;
  --af-dark:    #0d2233;
  --af-light:   #f4f8f8;
  --af-accent:  #e8f5f4;
  --af-text:    #3a3a3a;
  --af-muted:   #6b7a85;
}

/* 

   Typography Scale (pt to px conversion: 1pt = 1.333px):
   - Title:     48pt = 64px   (Light weight)
   - Heading 1: 40pt = 53px   (Regular weight)
   - Heading 2: 30pt = 40px   (Regular weight)
   - Heading 3: 20pt = 27px   (Regular weight)
   - Topic:     16pt = 21px   (Regular weight)
   - Body text: 12pt = 16px   (Regular weight)
   ============================================ */

/* Thin */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* Light */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Regular */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* SemiBold */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Archivo Thin Italic */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-ThinItalic.woff2") format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

/* Archivo Light Italic */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-Italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Archivo SemiBold Italic */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* Global Rules */

body {
  font-family: var(--font-primary);
  color: var(--color-secondary-gray-body);g
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
}

p {
  font-size: 18px;
  line-height: 28px;
  font-weight: 300;
  font-family: var(--font-primary);
}

h1 {
  font-family: var(--font-primary), sans-serif;
  font-size: 64px;
  font-weight: 100;
  line-height: 1.2;
}

h2 {
  font-family: var(--font-primary), sans-serif;
  font-size: 54px;
  font-weight: 100;
  line-height: 1.2;
}

h3 {
  font-family: var(--font-primary), sans-serif;
  font-size: 40px;
  font-weight: 100;
  line-height: 1.2;
}

h4 {
  font-family: var(--font-primary), sans-serif;
  font-size: 32px;
  font-weight: 100;
  line-height: 36px;
}

h5 {
  font-size: 22px;
  line-height: 28px;
  font-weight: 300;
}

h4.subtitle,
h3.subtitle {
  font-style: italic;
  color: var(--color-secondary-gray-heading);
}

h3 > span {
  font-weight: 400;
}

h1 > span {
  color: var(--color-secondary) !important;
}

h3 span {
  color: var(--color-secondary);
  font-weight: 400;
}

h2 span {
  font-weight: 700;
}

.new-line span {
  display: block;
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
}

p:last-of-type {
  margin-bottom: 0;
}

/* Fonts - Brand Guidelines */

.font-primary {
  font-family: var(--font-primary);
}

.font-secondary {
  font-family: var(--font-secondary);
}

.font-thin {
  font-weight: 100;
}

.font-light {
  font-weight: 300;
}

.font-regular {
  font-weight: 400;
}

.font-italic {
  font-style: italic;
}

.font-semibold {
  font-weight: 600;
}

.font-sm {
  font-size: 16px;
  line-height: 24px;
}

.font-lg {
  font-size: 18px;
  line-height: 1.5;
}

.font-topic {
  font-size: 22px;
  line-height: 1.5;
}

.font-xl {
  font-size: 28px;
  line-height: 1.5;
}

.font-xxl {
  font-size: 40px;
  line-height: 1.5;
}

.font-32 {
  font-size: 32px;
  line-height: 1.2;
}

.font-40 {
  font-size: 40px;
  line-height: 1.2;
}

.font-44 {
  font-size: 44px;
  line-height: 1.2;
}

.fancy-font-lg {
  font-size: 10rem;
}

strong {
  font-weight: 500;
}

/* Spacing */

.line-height-28 {
  line-height: 28px;
}

.mb-08 {
  margin-bottom: 8px;
}

.mb-50 {
  margin-bottom: 8px;
}

.mt-6 {
  margin-top: 60px;
}

.pe-6 {
  padding-right: 4rem;
}

.pl-4 {
  padding-left: 4rem;
}

.section-spacing {
  padding-top: 96px;
  padding-bottom: 96px;
}

.p-100 {
  padding: 100px 0;
}

/* Colors and Weights */

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

.text-topic {
  color: var(--color-secondary-gray-topic);
}

.text-heading {
  color: var(--color-secondary-gray-heading);
}

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

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

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

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

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

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

.text-gray {
  color: var(--color-secondary-gray-heading);
}

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

.bg-gray {
  background-color: var(--bg-light-gray);
}

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

.bg-theme-grad {
  background-color: var(--theme-gradient);
}

.bg-image-light-grad {
  background-image: url("../images/section-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--gray-cover-title);
}

.bg-image-grad {
  background-image: url("../images/section-bg-main.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--gray-cover-title);
}

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

.fw-400 {
  font-weight: 400 !important;
}

b {
  font-weight: 600;
}

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

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

.border-gray {
  border-color: var(--border-gray);
}

.filter-primary {
  filter: var(--img-filter-primary);
}

/* Button */
.btn {
  position: relative;
  display: inline-block;
  color: var(--white);
  text-transform: capitalize;

  font-family: var(--font-primary);

  font-size: 20px;

  text-align: center;

  border-radius: 6px;

  font-weight: 300;

  background-color: var(--color-secondary);

  height: 60px;

  line-height: 60px;

  padding: 0 32px 0 32px;

  border: 0;
  cursor: pointer;
  transition: 0.4s;
}

.btn-primary {
   background-color: transparent;
   border: 2px solid var(--color-primary);
   color: var(--color-primary);
}

.btn-primary:hover {
  color: white;
  background-color: var(--color-primary);
 
}

.btn-sm {
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  font-weight: 500;
  font-size: 16px;
}

a.btn.btn-sm.with-icon {
  padding-right: 48px;
}

.with-icon:before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
  background-image: url("../images/big-arrow-right-white.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

.btn-plain {
  position: relative;
  padding-right: 24px;
}

.btn-link {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-secondary);
}

a.btn-link::after {
  content: url("../images/big-arrow-right.png");
  display: inline-block;
  margin-left: 8px;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

/* Header */

/* Parent menu styles */
.menu {
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
  gap: 48px;
  align-items: center;
}

.menu-item {
  position: relative;
}

.menu-item a {
  padding-top: 30px;
  padding-bottom: 34px;
  font-weight: 600;
  font-size: 16px;
  display: block;
  color: inherit;
  text-decoration: none;
  color: #ccc;
}

.menu-item a.is-active {
    color: black;
}

.menu-item .menu li a.is-active {
    background-color: var(--color-secondary);
    color: white;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

.menu-item .menu li:last-child a.is-active {
    border-bottom: none;
}


.menu-item.menu-item--expanded:has(> ul > li > a.is-active) > .menu-focus-areas, .menu-item.menu-item--expanded:has(> ul > li > a.is-active) > a {
    color: black; 
}


.menu > .menu-item > a.is-active::after,
.menu > .menu-item > a:hover::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 30px;
    width: 65%;
    height: 1px;
    background-color: var(--color-secondary);
}

.menu-item.menu-item--expanded:has(> ul > li > a.is-active) > .menu-focus-areas::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 30px;
    width: 65%;
    height: 1px;
    background-color: var(--color-secondary);
}


.menu-item--expanded a {
  padding-right: 6px;
}

.menu-item--expanded a:hover::after,
.menu-item--expanded a.is-active::after {
  display: none;
}

span.menu-focus-areas {
    padding-top: 30px;
    padding-bottom: 34px;
    font-weight: 600;
    font-size: 16px;
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    color: #bbbdbf;
}

.contact-us.menu-item a { 
    padding: 16px 60px;
    background-color: var(--color-primary);
    color: var(--white);
    border-radius: 8px;
}

/* Chevron icon styles */
.chevron-icon {
  float: right;
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
  padding-top: 3px;
  margin-left: 8px;
}

.expandable.active .chevron-icon {
  transform: rotate(180deg);
}

/* Inner menu styles */
.menu-item--expanded ul {
  display: none;
  position: absolute;
  background-color: var(--white);
  box-shadow: var(--box-shadow-double);
  top: 78%;
  width: 220px;
  left: 0;
  border-radius: 6px;
  overflow: hidden;
  z-index: 11;
}

.menu-item--expanded ul li {
  padding: 0;
}

.menu-item--expanded ul li a {
  position: relative;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  display: block;
  padding: 16px;
  color: var(--black);
}

.menu-item--expanded ul li:hover {
  background-color: var(--color-secondary);
}

.menu-item--expanded ul li:hover a {
  color: var(--white);
}

.menu-item--expanded ul li:first-child:hover {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.menu-item--expanded ul li:last-child:hover {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.menu.d-menu > li:last-child:not(.menu-item--expanded) a {
  padding: 16px 60px;
  background-color: var(--color-primary);
  color: var(--white);
  /* border-radius: 8px; */
}

.menu > li:last-child:not(.menu-item--expanded) a:hover::after,
.menu > li:last-child:not(.menu-item--expanded) a.is-active::after {
  display: none;
}


.main-nav .container > div {
  padding-top: 8px;
  padding-bottom: 8px;
}

.menu-item.menu-item--expanded:has(> ul > li > a.is-active) > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 30px;
    width: 65%;
    height: 1px;
    background-color: var(--color-secondary);
}



/* Header close */

.hero {
  position: relative;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  display: flex;
  align-items: center;
  color: #1d4f91;
  overflow: hidden;
}

.hero .container-fluid {
  margin-top: 227px;
}

.heading-with-bg,
.page-heading-with-bg {
  position: relative;
  display: inline-block;
  color: var(--white);
  z-index: 1;
}

.heading-with-bg span::before {
  content: "";
  position: absolute;
  width: 390px;
  height: 92px;
  top: -10px;
  right: -10px;
  background-image: url("../images/text-Shape.png");
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.page-heading-with-bg span::before {
  content: "";
  position: absolute;
  width: 292px;
  height: 72px;
  top: 0;
  right: 0;
  left: 50%;
  background-image: url(../images/text-Shape.png);
  background-size: cover;
  background-position: center;
  z-index: -1;
  transform: translateX(-50%);
}

.aboutus {
  background-repeat: no-repeat;
  background-size: cover;
}

/* .footer-bottom-area {
  padding-top: 64px;
  padding-bottom: 64px;
} */

.social-share ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 0;
  margin: 0;
}

footer .social-share ul li a {
  background-color: var(--white);
  display: inline-block;
  padding: 4px;
  border-radius: 4px;
  line-height: 0;
}

.language-switcher .form-select {
  padding: 0.13rem 2.25rem 0.13rem 0.75rem !important;
}

.review {
  font-family: "Akzidenz Grotesk italic";
  font-size: 20px;
  line-height: 28px;
  font-weight: bold;
}

.clients-carousel {
  padding: 24px;
  background-color: rgba(255, 255, 255, 0.64);
}

.clients-carousel .slick-slide img {
  display: block;
  margin: 0 auto;
}

ul#about-us li button {
  font-size: 40px;
  font-family: var(--font-secondary);
  color: var(--white);
  border-left: 1px solid;
  border-radius: 0px;
  opacity: 0.3;
  padding-top: 0px;
  padding-bottom: 48px;
}

ul#about-us li button.active {
  opacity: 1;
}

.testimonial::before {
  content: url("../images/quote.png");
  display: inline-block;
  width: 48px;
  height: 48px;
}

.image-wrapper-testimonial {
  position: relative;
  display: inline-block;
  background-image: url("../images/image-bg-pattern.png");
  background-size: contain;
  padding: 0 40px;
  background-repeat: no-repeat;
  background-position: center;
  width: 359px;
}

.image-wrapper-testimonial img {
  position: relative;
  z-index: 1;
  display: block;
}

.image-wrapper-testimonial img {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.testimonial-carousel .slick-dots {
  position: relative;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  max-width: calc(100% - 61.5%);
  padding-left: 30px;
  margin-top: -63px;
}

.testimonial-carousel .slick-dots li {
  margin: 0 5px;
}

.testimonial-carousel .slick-dots li button:before {
  content: "" !important;
}

.testimonial-carousel .slick-dots li button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--bg-light-gray);
}

.testimonial-carousel .slick-dots li.slick-active button {
  background-color: var(--color-secondary);
  width: 20px;
  height: 8px;
  border-radius: 16px;
}

/* inner pages */

.page-cover {
  height: 372px;
  background-color: var(--color-primary);
  background-size: cover;
  background-position: top center;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.our-work {
  background-repeat: no-repeat;
  background-size: cover;
}
.page-education span {
    color: var(--color-secondary);
}

.community-development h3 {
    letter-spacing: -1px;
}

.team-member {
  position: relative;
  overflow: hidden;
  text-align: center;
  margin: auto;
}

.overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    #929497 0%,
    #929497 86%,
    #a6a8ab 86%,
    #a6a8ab 100%
  );

  color: var(--black);
  padding: 16px;
  min-height: 67px;
  text-align: left;
}

.team-image {
  display: block;
  width: 100%;
  max-height: 400px;
  filter: grayscale(100%);
  transition: filter 0.3s ease-in-out;
  object-fit: cover;
  object-position: top;
}

.team-member:hover .team-image {
  filter: none;
}

.team-member:hover .overlay {
  position: absolute;
  background: linear-gradient(
    to bottom,
    #929496 0%,
    #929496 86%,
    #5ca980 86%,
    #5ca980 100%
  );
}

.Whoweare-slider .slider-image {
  height: 559px !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-image > .container,
.slider-image > .container > .row {
  height: 100%;
}

.Whoweare .slick-dotted.slick-slider {
  margin-bottom: 0px;
}

/* time line */

.timeline-container {
  display: flex;
  flex-direction: column;
  padding: 20px;
  width: 100%;
}

.timeline-item {
  display: flex;
  margin-bottom: 50px;
  position: relative;
  justify-content: flex-start;
}

.timeline-year {
  font-size: 28px;
  line-height: 30px;
  font-weight: 300;
  color: var(--color-secondary);
  padding-right: 70px;
  text-align: right;
  width: 40%;
}

.timeline-line {
  flex: 0 0 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline-dot {
  width: 16px;
  height: 16px;
  background-color: #5eb5a6;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  margin-top: 8px;
  margin-bottom: 18px;
}

.timeline-connector {
  width: 2px;
  flex-grow: 1;
  background-color: #d0d0d0;
  margin-top: -8px;
  height: 67px;
}

/* .timeline-item:last-child .timeline-connector {
            display: none;
        } */

.timeline-content {
  flex: 1;
  /* max-width: 350px; */
  padding-left: 20px;
}

.timeline-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.timeline-content li {
  color: var(--color-secondary-gray);
  font-size: 1rem;
  margin-bottom: 8px;
  padding-left: 0;
}

.timeline-content li:before {
  content: "- ";
  color: var(--color-secondary-gray);
}

@media (max-width: 768px) {
  .timeline-year {
    min-width: 100px;
    font-size: 1.2rem;
    padding-right: 10px;
  }

  .timeline-line {
    flex: 0 0 30px;
  }

  .timeline-content {
    padding-left: 10px;
    max-width: 400px;
  }

  .timeline-content li {
    font-size: 0.9rem;
  }
}

@media (max-width: 576px) {
  .timeline-item {
    flex-direction: column;
    margin-bottom: 40px;
    align-items: flex-start;
    max-width: 90%;
  }

  .timeline-year {
    min-width: auto;
    text-align: left;
    padding-right: 0;
    margin-bottom: 10px;
  }

  .timeline-line {
    position: absolute;
    left: 0;
    top: 34px;
    height: calc(100% - 40px);
    flex: none;
  }

  .timeline-content {
    padding-left: 30px;
    max-width: 100%;
  }
}

.list-style-square {
  list-style-type: square;
  padding: 24px 48px;
}

.list-style-square li {
  font-size: 20px;
  line-height: 1.4;
}

.slider-btn {
  font-family: var(--font-primary);
  font-size: 54px;
  color: var(--color-primary);
  font-weight: 700;
  margin-bottom: 48px;
}

.slider-btn img {
  width: 48px;
  height: 48px;
}

.title-initial {
  background-color: var(--color-secondary);
  font-size: 40px;
  font-weight: 700;
  color: var(--white);
  line-height: 56px;
  text-align: center;
  min-width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.last-slide .title-initial {
  min-width: 32px;
  height: 32px;
}

.slide-detail .details {
  font-size: 32px;
  color: var(--white);
  font-weight: 400;
  line-height: 40px;
}

.last-slide .slide-detail .details {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}

.last-slide .slide-detail .title-initial {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  padding: 0px 8px;
}

.last-slide .slide-detail {
  padding-bottom: 20px;
}

.stacked-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* gallery page pagination */

.custom-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: auto;
  padding: 0;
  list-style: none;
}

.page-numbers {
  display: flex;
  gap: 8px;
}

.pagination .page-link {
  padding: 10px 15px;
  text-align: center;
  font-weight: normal;
  position: relative;
  font-family: var(--font-secondary);
}

.pagination .page-item.active .page-link {
  background-color: var(--color-secondary);
  color: white;
  border: 0px;
  border-radius: 50%;
}

.pagination .page-link:hover {
  background-color: var(--color-secondary);
  color: white;
  border-radius: 50%;
}

.prev-btn,
.next-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: 0px;
  font-weight: bold;
  text-decoration: none;
}

.prev-btn::before {
  content: "";
  position: absolute;
  left: 10px;
  width: 20px;
  height: 20px;
  background-image: url(../images/arrow-right.svg);
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateX(-50%) scaleX(-1);
}

.next-btn::before {
  content: "";
  position: absolute;
  right: 10px;
  width: 20px;
  height: 20px;
  background-image: url(../images/arrow-right.svg);
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateX(50%);
}

.prev-btn {
  padding-left: 30px !important;
}

.next-btn {
  padding-right: 30px !important;
}

.prev-btn:hover,
.next-btn:hover {
  background-color: transparent !important;
  color: var(--black) !important;
  opacity: 0.8;
}

.post-listing {
  padding-top: 20px;
  padding-bottom: 64px;
  border-top: 1px solid var(--border-gray);
}

/* pagination end */

/* Mobile menu css  */
.mobile-navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  overflow-y: auto;
}

.mobile-navigation-wrapper {
  background: #fff;
  width: 100%;
  height: 100vh;
  margin-left: auto;
  padding: 20px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.mobile-menu .menu {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
}

/* Header Section */

header {
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.09);
  position: relative;
  z-index: 10;
}

.mobile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.mobile-close {
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

/* Menu Structure */
.mobile-menu-list {
  list-style: none;
  padding: 20px 0;
}

.mobile-menu-item {
  border-bottom: 1px solid #eee;
}

/*.mobile-menu-link {*/
/*  display: block;*/
/*  padding: 15px 0;*/
/*  color: #333;*/
/*  text-decoration: none;*/
/*  position: relative;*/
/*}*/

/*.mobile-expandable {*/
/*  padding-right: 30px !important;*/
/*}*/

/* Submenu Styling */
.mobile-submenu {
  list-style: none;
  padding-left: 20px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/*.mobile-submenu-item {*/
/*  border-bottom: none;*/
/*}*/

/*.mobile-submenu-link {*/
/*  padding: 12px 0 !important;*/
/*  font-size: 14px;*/
/*}*/

/* Chevron Icon */
/*.mobile-chevron {*/
/*  position: absolute;*/
/*  right: 0;*/
/*  top: 50%;*/
/*  transform: translateY(-50%);*/
/*  transition: transform 0.3s ease;*/
/*}*/

/*.mobile-chevron.active {*/
/*  transform: translateY(-50%) rotate(180deg);*/
/*}*/

/* Social Links */
.mobile-social-list {
  display: flex;
  gap: 20px;
  list-style: none;
  justify-content: center;
  padding: 20px 0;
}

.mobile-navigation.active .mobile-navigation-wrapper {
  transform: translateX(0);
}



/*new mobile css */
/* Hide nested ul inside menu-item--expanded */
.mobile-menu .menu-item.menu-item--expanded > ul.menu {
    display: none;
    overflow: hidden;
    position: unset;
    background-color: transparent;
    box-shadow: none;
}

/* Parent link arrow (for a or span if any) */
.mobile-menu .menu-item.menu-item--expanded > a::after,
.mobile-menu .menu-item.menu-item--expanded > span.menu-focus-areas::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 46%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M16 12L12 16L8 12" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}


/* Rotate arrow when active */
.mobile-menu .menu-item.menu-item--expanded.active > a::after,
.mobile-menu .menu-item.menu-item--expanded.active > span.menu-focus-areas::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Optional: make parent relative for arrow positioning */
.mobile-menu .menu-item.menu-item--expanded > a,
.mobile-menu .menu-item.menu-item--expanded > span.menu-focus-areas {
    position: relative;
    display: block;
    padding-right: 20px;
}

/* Show submenu when parent has active class */
.mobile-menu .menu-item.menu-item--expanded.active > ul.menu {
    display: block;
}
.mobile-footer {
    margin-top: 12px;
}



/* Mobile menu css  ends*/

/* css for newsletter section */

.newsletter input[type="email"] {
  padding: 0px 32px;
}

.newsletter input[type="submit"] {
  font-size: 16px;
  margin-right: -2px;
}

form#contact-message-newsletter-form-form {
  background-color: white;
  border-radius: 50rem;
}

.newsletter .form-control:focus {
  outline: none;
  box-shadow: none;
  border-color: inherit;
}

/* ends here  */

.newsletter {
  background: var(--theme-gradient);
  text-align: center;
  padding-top: 64px;
  padding-bottom: 64px;
}

.dot-paragraph {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot-paragraph::before {
  content: "";
  width: 4px;
  height: 4px;
  background-color: var(--color-secondary-gray);
  border-radius: 50%;
  display: inline-block;
}

.blog-thumb {
  width: 163px;
  height: 124px;
  object-fit: cover;
}

.post-meta {
  width: calc(100% - 163px - 32px);
}

#contact-message-contact-us-form input[type="email"],
#contact-message-contact-us-form input[type="text"] {
  padding: 5px;
  width: 100%;
  margin: 0px;
  border-radius: 0;
  font-size: 16px;
  border: 0;
  border-bottom: 1px solid var(--border-light-gray);
}

#contact-message-contact-us-form .form-textarea {
  width: 100%;
  border-radius: 0;
  padding: 16px 24px;
  border: 0;
  border-bottom: 1px solid var(--border-light-gray);
}

/* #edit-field-full-name-0-value {
  background-image: url('../images/icons/user.svg');
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-left: 30px;
  padding-right: 40px;
}

#edit-field-email-0-value {
  background-image: url('../images/icons/email.svg');
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-left: 30px;
  padding-right: 40px;
}

#edit-field-phone-0-value {
  background-image: url('../images/icons/phone.svg');
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-left: 30px;
  padding-right: 40px;
}

#edit-field-location-0-value {
  background-image: url('../images/icons/map.svg');
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-left: 30px;
  padding-right: 40px;
}

#edit-field-how-we-can-help-you-0-value {
  background-image: url('../images/icons/chat.svg');
  background-repeat: no-repeat;
  background-position: calc(100% - 16px) 14px;
  padding-left: 30px;
  padding-right: 40px;
} */

.contact-message-contact-us-form input#edit-submit {
  padding: 16px 24px;
    font-size: 18px;
    line-height:18px;
    color: var(--color-secondary-gray-body);
    background-color: transparent;
    border: 1px solid var(--color-secondary-gray-body);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 400;
}

.contact-message-contact-us-form input#edit-submit:hover {
    background-color: var(--color-secondary);
    color: white;
    border-color: var(--color-secondary);
    transition: none !important;
}

.contact-message-contact-us-form #edit-actions {
  position: relative;
  display: inline-block;
  width: 25%;
}

/*.contact-message-contact-us-form #edit-actions::after {*/
/*  content: "";*/
/*  position: absolute;*/
/*  width: 20px;*/
/*  height: 20px;*/
/*  top: 50%;*/
/*  right: 16px;*/
/*  left: 53%;*/
/*  background-image: url("../images/big-arrow-right-white.svg");*/
/*  background-repeat: no-repeat;*/
/*  background-position: center;*/
/*  pointer-events: none;*/
/*}*/

.vm-text {
  color: var(--color-secondary-gray);
}

.vm-icon img {
  width: 48px !important;
  height: 48px !important;
}

.vm-card {
  border-radius: 10px;
}

.vm-card:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(96%) saturate(1654%)
    hue-rotate(193deg) brightness(86%) contrast(93%);
}

.vm-card:hover h3 {
  color: var(--color-primary);
}

.img-frame {
  position: relative;
  display: inline-block;
  padding: 20px 0;
  z-index: 2;
  overflow: visible; 
}

.img-frame::before {
  content: "";
  position: absolute;
  top: 9px;
  left: -15px;
  width: calc(51% + 25px);
  height: calc(100% + -16px);
  border: 2px solid #66696a;
  border-radius: 20px;
  z-index: 1;
  transition: all 0.4s ease;
}

.img-frame img {
  display: block;
  border-radius: 20px;
  box-shadow: 15px 10px 25px rgba(0, 0, 0, 0.18);
  position: relative;
  z-index: 3;
  transition: all 0.4s ease;
}



.img-frame:hover::before {
    left: -35px;
   
}
.img-frame:hover img {
    transform: translate(-6px, 0px);
}

.color-scheme-1 .img-frame::before {
  border-color: var(--color-secondary);
}

.color-scheme-2 .img-frame::before {
  border-color: var(--color-primary);
}

.color-scheme-3 .img-frame::before {
  border-color: var(--color-secondary-gray);
}

.color-scheme-1 h4.subtitle {
  color: var(--color-secondary-gray-heading);
}

.color-scheme-1 h4.subtitle span {
  color: var(--color-secondary);
  font-weight: 400;
}

.color-scheme-2 h4.subtitle span {
  color: var(--color-primary);
  font-weight: 400;
}

.color-scheme-3 h4.subtitle span {
  font-weight: 400;
}

.color-scheme-1 .btn-read-more:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--white);
}

.color-scheme-2 .btn-read-more:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
}

.color-scheme-3 .btn-read-more:hover {
  background-color: var(--color-secondary-gray-heading);
  border-color: var(--color-secondary-gray-heading);
  color: var(--white);
}

.color-scheme-1 .btn-read-more {
  background-color: transparent;
  border: 2px solid var(--color-secondary-gray-body);
  color: var(--color-secondary-gray-heading);
}

.color-scheme-2 .btn-read-more {
  background-color: transparent;
  border: 2px solid var(--color-secondary-gray-body);
  color: var(--color-secondary-gray-heading);
}

.color-scheme-3 .btn-read-more {
  background-color: transparent;
  border: 2px solid var(--color-secondary-gray-body);
  color: var(--color-secondary-gray-heading);
}

.even-service,
.bg-gray-dotted {
  background-image: url("../images/section-bg-main.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--gray-cover-title);
}

.shadow-box {
  background: white;
  border-radius: 20px;
  box-shadow: 0 15px 20px rgb(0 0 0 / 20%);
  padding: 40px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.shadow-box:hover {
  transform: translateY(-5px);
}

.page-our-work .img-frame::before {
  border: 2px solid var(--color-secondary);
}

/* key partnership section css */
.partnerships-section {
  padding: 64px 0;
}

.section-title {
  text-align: center;
  margin-bottom: 64px;
}

.partnership-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  align-content: space-between;
  flex-wrap: wrap;
  align-items: stretch;
}

.partnership-container::before {
    content: "";
    position: absolute;
    left: 100px;
    top: var(--dot-top, 0);
    width: 24px;
    height: 24px;
    background: linear-gradient(to bottom, #0c4d90 0%, #0c4d90 10%, #58aa7e 100%);
    border-radius: 50%;
    z-index: 2;
    transition: top 0.5s ease;
}


.partnership-container::after {
  content: "";
  position: absolute;
  left: 111px;
  top: 8px;
  width: 2px;
  /* height: calc(100% - 24px); */
  height: 91%;
  background-color: #d0d0d0;
  z-index: 1;
}

.partnership-item {
  display: flex;
  margin-bottom: 80px;
  position: relative;
  align-items: flex-start;
  gap: 0;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: 100%;
}

/* .partnership-item:last-child {
  margin-bottom: 0;
} */

.partnership-number {
  width: 120px;
  flex-shrink: 0;
  font-size: 28px;
  font-weight: 400;
  line-height: 0.9;
}

.partnership-content {
  /*flex: 1;*/
  /*max-width: 750px;*/
  /*padding-right: 5px;*/
  width: calc(100% - 240px - 120px - 48px);
}

.partnership-content h5 {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-secondary-gray);
}

.partnership-content p {
  margin-bottom: 0;
}

.partnership-content span {
  font-weight: 600;
}

.detail-link {
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: 500;
}

.detail-link:hover {
  text-decoration: underline;
}

.partnership-logo {
  /*flex: 0 0 202px;*/
  /*display: flex;*/
  align-items: self-end;
  /*justify-content: center;*/
  gap: 24px !important;
  padding-top: 40px;
  min-width: 240px;
  width: 240px;
}

.partnership-logo img {
  max-width: 120px;
  max-height: 120px;
  object-fit: contain;
}

 .region-healthcare-page-content .partnership-logo img {
  max-width: 160px;
  max-height: 120px;
  object-fit: contain;
}

 .region-healthcare-page-content .partnership-logo img:nth-child(2) {
  height: 80px;
}
.region-healthcare-page-content .partnership-logo {
    align-items: center;
}

.region-healthcare-page-content h3 span {
  color: var(--color-primary);
}

.region-healthcare-page-content .partnership-content span {
  color: var(--color-primary);
}

.region-community-development-page-content h3 span {
  color: var(--color-secondary-gray-heading);
}

.region-community-development-page-content .partnership-content span {
  color: var(--color-secondary-gray-heading);
}
.region-community-development-page-content {
    padding-top: 0 !important;
}
.organic-section p.mb-3 {
    display: none;
}

.region.region-community-development-page-content strong {
    font-weight: 600 !important;
}


@media screen and (min-width: 1199px) {
  .region-community-development-page-content .partnership-logo {
    display: flex;
    flex-direction: column !important;
    gap: 75px;
  }
  .region-community-development-page-content .partnership-2 .partnership-logo{
        flex-direction: row-reverse !important;
        gap: 16px;
  }
}
.banner-wrapper img {
    float: right;
    height: auto;
    opacity: 0;
    transform: translateX(80px);
    animation: slideInRight 1s ease-out forwards;
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(80px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ///contact page css */

/* Form styling */
.form-wrapper {
  margin-bottom: 25px;
}

.form-required::after {
  content: "";
  display: none;
}

.form-element {
  width: 100%;
  padding: 12px 16px;
  font-size: 1rem;
  color: #495057;
  background-color: #ffffff;
  /* border: 1px solid #d0d0d0; */
  border-radius: 8px;
  transition: all 0.3s ease;
}

.form-element:focus {
  outline: none;
  border: 1px solid var(--color-secondary);
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--color-secondary, transparent);
}

.form-element::placeholder {
  color: transparent !important;
}


.form-textarea {
  min-height: 150px;
  resize: vertical;
}
#contact-message-contact-us-form input[type="email"] {
  margin-top: 4px;
}

.form-row-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}


.button--primary {
  padding: 14px 24px;
  font-size: 18px;
  color: var(--color-secondary-gray-body);
  background-color: transparent;
  border: 1px solid var(--color-secondary-gray-body);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 400;
}

.button--primary:hover {
  background-color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
  color: #ffffff;
  transform: translateY(-2px);
}

/* Wrap the first 4 fields in a fake grid container */
#edit-field-full-name-wrapper,
#edit-field-email-wrapper,
#edit-field-phone-wrapper,
#edit-field-location-wrapper {
  margin-bottom: 0 !important;
}

/* Turn their parent into a 2-column grid */
#edit-field-full-name-wrapper,
#edit-field-email-wrapper,
#edit-field-phone-wrapper,
#edit-field-location-wrapper {
  display: contents !important; /* allow children to share same grid */
}

/* Apply grid to the form itself */
#contact-message-contact-us-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 30px;
}

/* Force only first 4 fields into the grid */
#edit-field-how-we-can-help-you-wrapper,
#edit-actions {
  grid-column: 1 / -1; /* full width */
}

/* Fix spacing inside fields */
.js-form-item {
  margin: 0;
  padding: 0;
}

/* Input fields stretch */
.form-element,
.form-text,
input,
textarea {
  width: 100%;
}

/* Mobile */
@media (max-width: 768px) {
  #contact-message-contact-us-form {
    grid-template-columns: 1fr;
  }
}


/* Responsive */
@media (max-width: 768px) {
  .form-row-wrapper {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .contact-intro {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .form-element {
    padding: 10px 14px;
  }

  .button--primary {
    width: 100%;
    padding: 14px 40px;
  }
}

 .stats-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
        margin-top:46px;
    }

    .stat-item {
        flex: 1;
        text-align: center;
    }

    .stat-number {
        font-size: 40px;
        font-weight: 100;
        display: block;
        line-height: 40px;
    }

    .stat-label {
        font-size: 18px;
        display: block;
    }


    @media (max-width: 992px) {
        .stats-container {
            gap: 20px;
        }

        .stat-number {
            font-size: 2.5rem;
        }
    }

    @media (max-width: 768px) {
        .stats-container {
            flex-direction: column;
            gap: 24px;
        }

        .stat-item {
            width: 100%;
        }
    }

    @media (min-width: 992px) {
        .img-container {
            display: flex;
            gap: 15px;
            align-items: center;
            justify-content: flex-end;
            height: 100%;
        }
    }

 /* Timeline Navigation */
    .timeline-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 55px;
        position: relative;
    }

    .timeline-line-news {
        position: absolute;
        height: 2px;
        background-color: #ddd;
        width: 99%;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
    }

    .timeline-dots {
        display: flex;
        justify-content: space-between;
        width: 70%;
        position: relative;
        z-index: 2;
    }

    .timeline-dot-news {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: linear-gradient(to bottom, #0C4D90 0%, #0C4D90 10%, #58AA7E 100%);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    /* Carousel Styles */
    .post-card {
        margin: 0 15px;
        position: relative;
        overflow: hidden;
        padding-bottom:20px;
    }

    .post-image-wrapper {
        position: relative;
        overflow: hidden;
        border-radius: 8px 8px 0px 0px;
    }

    .post-image {
        width: 100%;
        height: 300px;
        object-fit: cover;
        display: block;
    }

    .post-image-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.35); /* black overlay */
        opacity: 1;
        /*transition: opacity 0.4s ease-in-out, background 0.4s ease-in-out;*/
        pointer-events: none;
    }
    
    .post-card:hover .post-image-overlay {
    opacity: 0;
}

    .post-card:hover .post-image-overlay {
        height: 6px;
        background-color: var(--color-secondary);
    }

    .post-content {
        padding: 0 16px;
        background-color: white;
        border-radius: 0;
        margin-top: 34px;
        border-left: 1px solid var(--color-secondary-gray-body);
    }

    .post-title {
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 6px;
        color: #3d3d3d;
    }
    .post-card:hover .post-title {
        color: var(--color-secondary);
    }

    .post-description {
        line-height: 1.6;
        margin-bottom: 20px;
        margin-bottom: 18px !important;
        color: #3d3d3d;
    }

    .read-more-btn {
        padding: 10px 25px;
        border: 1px solid var(--color-secondary-gray-body);
        background-color: transparent;
        color: var(--color-secondary-gray-heading);
        border-radius: 6px;
        cursor: pointer;
        font-size: 16px;
        transition: all 0.3s ease;
    }

    .post-card:hover .read-more-btn {
        background-color: var(--color-secondary);
        border-color: var(--color-secondary);
        color: white;
    }
    
/*    .post-image-wrapper img {*/
/*    filter: grayscale(100%);*/
/*    transition: filter 0.4s ease-in-out;*/
/*}*/

.post-card:hover .post-image-wrapper img {
    filter: none;
}

.page-node-type-news-and-events h2 {
    font-size: 48px !important;
}
.page-node-type-news-and-events h3 {
    font-size: 32px !important;
}

    /* Slick Arrow Styles */
    .slick-prev,
    .slick-next {
        width: 32px !important;
        height: 32px !important;
        background-color: #adb5bd !important;
        border-radius: 50%;
        z-index: 10;
        top: -69px !important;
        transition: all 0.3s ease;
        opacity: 1 !important;
        display: block !important;
    }

    .slick-prev:hover,
    .slick-next:hover {
        background-color: var(--color-secondary);
    }

    .slick-prev {
        left: 0;
    }

    .slick-next {
        right: 0;
    }

    .slick-prev:before,
    .slick-next:before {
        content: '';
        display: none;
    }

    .slick-prev svg,
    .slick-next svg {
        width: 24px;
        height: 24px;
        fill: white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* Force arrows to always be visible */
    .slick-prev.slick-disabled,
    .slick-next.slick-disabled {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }

    @media (max-width: 768px) {
        .timeline-dots {
            justify-content: center;
        }

        .timeline-dot-news:nth-child(2),
        .timeline-dot-news:nth-child(3) {
            display: none;
        }
          .slick-prev {
        left: 0 !important;
    }

    .slick-next {
        right: 0 !important;
    }
    }

form#user-login-form input#edit-submit, form#user-pass input#edit-submit {
    margin-top: 20px;
    background-color: #5ca980;
    border: 0;
    border-radius: 6px;
    height: 54px;
    color: white;
}
form#user-login-form, form#user-pass {
    padding-top: 96px;
    padding-bottom: 96px;
}
.login-wrapper {
    max-width: 480px;
    margin: 0 auto;
    background-color: #fff;
    padding: 32px;
    border-radius: 8px;
    box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 29px 0px;
}
a.forgot-password-link:hover, a.login-link:hover {
    color: #0c4c91;
}

/* Toast container styles for status + error */
.messages.messages--status,
.messages.messages--error {
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    z-index: 999;
    max-width: 420px;
    margin: 0 auto;
    padding: 14px 20px 14px 45px;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.4;
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
    overflow: hidden;
    backdrop-filter: blur(4px);

    /* Fade in then fade out */
    animation: toastFadeIn 0.35s ease-out, toastFadeOut 0.4s ease 5s forwards;
}

/* SUCCESS */
.messages--status {
    background-color: #e8f6ef;
    border: 1px solid #5ca98033;
    color: #2c634a;
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'><circle cx='12' cy='12' r='11' stroke='%235ca980' stroke-width='2'/><path d='M7 12.5L10.5 16L17 9' stroke='%235ca980' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ERROR — optional styling */
.messages--error {
    background-color: #fdecec;
    border: 1px solid #ff6b6b33;
    color: #8a2020;
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'><circle cx='12' cy='12' r='11' stroke='%23ff6b6b' stroke-width='2'/><path d='M8 8L16 16M16 8L8 16' stroke='%23ff6b6b' stroke-width='2' stroke-linecap='round'/></svg>");
}

.messages__header {
    display: none !important;
}

.messages__content {
    margin: 0 !important;
}

@keyframes toastFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade-out animation (starts after 5s) */
@keyframes toastFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}




/* Fade-out animation (starts after 5s) */
/* ── Section wrapper ── */
    .af-testimonials {
        background: var(--af-light);
        padding: 90px 0 100px;
      position: relative;
      overflow: hidden;
    }

    /* subtle textured overlay */
     .af-testimonials::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232a7f7f' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      pointer-events: none;
    } 

    /* ── Section header ── */
    .af-section-label {
      font-family: 'DM Sans', sans-serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--af-teal);
      margin-bottom: 12px;
    }

    .af-section-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(28px, 3.5vw, 42px);
      font-weight: 600;
      color: var(--af-navy);
      line-height: 1.25;
      margin-bottom: 16px;
    }

    .af-section-sub {
      font-family: 'DM Sans', sans-serif;
      font-size: 15px;
      color: var(--af-muted);
      max-width: 540px;
      margin: 0 auto 50px;
      line-height: 1.7;
    }

    /* ── Slick track fix ── */
    .af-slider .slick-list { overflow: visible; }
    .af-slider .slick-track { display: flex; align-items: stretch; }
    .af-slider .slick-slide { height: auto; padding: 0 12px; }
    .af-slider .slick-slide > div { height: 100%; }

    /* Make the *gap* between slides match the slide theme (no section backdrop flash). */
    .af-review-item {
      position: relative;
      height: 100%;
      display: flex;
    }
    .af-review-item::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: -12px;
      right: -12px;
      /* Ensure the spacing area between cards stays pure white. */
      /*background: #ffffff;*/
      border-radius: 16px;
      z-index: 0;
      pointer-events: none;
    }
    .af-review-item > .af-card {
      position: relative;
      z-index: 1;
    }

    /* ── Base card ── */
    .af-card {
      border-radius: 16px;
      overflow: hidden;
      height: 100%;
      min-height: 320px;
      display: flex;
      flex-direction: column;
      background: var(--af-card-bg, #ffffff);
      box-shadow: 0 4px 14px rgba(26, 51, 82, 0.06);
      transition: transform 0.35s ease, box-shadow 0.35s ease;
    }
    .af-card:hover {
      /* transform: translateY(-6px); */
      box-shadow: 0 18px 36px rgba(26, 51, 82, 0.12) !important;
    }

    /* ── Theme (light/dark) ── */
    .af-theme-light {
      --af-card-bg: #ffffff;
      --af-card-quote-color: var(--af-text);
      --af-card-author-name: var(--af-navy);
      --af-card-author-role: var(--af-teal);
    }
    .af-theme-dark {
      --af-card-bg: var(--af-dark);
      --af-card-quote-color: rgba(255,255,255,0.82);
      --af-card-author-name: #ffffff;
      --af-card-author-role: var(--af-green);
    }
    .af-theme-dark .af-card {
      box-shadow: 0 4px 14px rgba(26, 51, 82, 0.12);
    }

    /* ── Unified review card parts ── */
    .af-review-text {
      padding: 22px 24px 26px;
      display: flex;
      flex-direction: column;
      position: relative;
      flex: 1;
    }
    .af-review-text blockquote {
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
      line-height: 1.65;
      color: var(--af-card-quote-color, var(--af-text));
      flex: 1;
      border: none;
    }

    .af-review-video {
      position: relative;
      cursor: pointer;
      flex: 0 0 auto;
    }

    /* ── TEXT testimonial card ── */
    .af-card-text {
      background: #ffffff;
      padding: 36px 32px 30px;
      display: flex;
      flex-direction: column;
      box-shadow: 0 4px 24px rgba(26, 51, 82, 0.07);
      position: relative;
    }

    .af-quote-mark {
      font-family: 'Playfair Display', serif;
      font-size: 80px;
      line-height: 0.6;
      color: var(--af-green);
      opacity: 0.25;
      position: absolute;
      top: 24px;
      left: 20px;
      pointer-events: none;
      user-select: none;
    }

    .af-card-text blockquote {
      font-family: 'DM Sans', sans-serif;
      font-size: 15px;
      line-height: 1.75;
      color: var(--af-text);
      margin: 0 0 24px;
      padding-top: 28px;
      flex: 1;
      border: none;
    }

    .af-stars {
      color: #f4b942;
      font-size: 13px;
      margin: 16px 0;
      letter-spacing: 2px;
    }

    .af-divider {
      width: 36px;
      height: 2px;
      background: linear-gradient(90deg, var(--af-teal), var(--af-green));
      border-radius: 2px;
      margin-bottom: 18px;
    }

    .af-author {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: auto;
    }

    .af-author-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
      object-position: top;
      border: 2px solid var(--af-green);
    }

    .af-author-initials {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--af-teal), var(--af-green));
      color: #fff;
      font-family: 'DM Sans', sans-serif;
      font-weight: 500;
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .af-author-name {
      font-family: 'DM Sans', sans-serif;
      font-weight: 500;
      font-size: 14px;
      color: var(--af-card-author-name, var(--af-navy));
      margin: 0;
      line-height: 1.3;
    }

    .af-author-role {
      font-family: 'DM Sans', sans-serif;
      font-size: 12px;
      color: var(--af-card-author-role, var(--af-teal));
      margin: 0;
      letter-spacing: 0.5px;
    }

    /* ── VIDEO testimonial card ── */
    .af-card-video {
      position: relative;
      background: var(--af-dark);
      box-shadow: 0 4px 24px rgba(26, 51, 82, 0.15);
      cursor: pointer;
      min-height: 320px;
      display: flex;
      flex-direction: column;
    }

    .af-video-thumb {
      width: 100%;
      height: 200px;
      object-fit: cover;
      display: block;
      filter: brightness(0.72);
      transition: filter 0.3s ease;
    }
    .af-review-video:hover .af-video-thumb { filter: brightness(0.55); }

    .af-play-btn {
      position: absolute;
      top: 88px;
      left: 50%;
      transform: translateX(-50%);
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: rgba(255,255,255,0.95);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease, background 0.3s ease;
      box-shadow: 0 4px 18px rgba(0,0,0,0.3);
    }
    .af-review-video:hover .af-play-btn {
      transform: translateX(-50%) scale(1.12);
      background: #fff;
    }

    .af-play-btn svg {
      width: 20px;
      height: 20px;
      fill: var(--af-teal);
      margin-left: 3px;
    }

    .af-video-badge {
      position: absolute;
      top: 14px;
      right: 14px;
      background: rgba(42, 127, 127, 0.92);
      color: #fff;
      font-family: 'DM Sans', sans-serif;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 20px;
    }

    .af-card-video-body {
      padding: 22px 24px 26px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .af-video-quote {
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
      line-height: 1.65;
      color: rgba(255,255,255,0.82);
      margin: 0 0 18px;
      flex: 1;
    }

    .af-video-author {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .af-video-author-initials {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--af-teal), #56c5bf);
      color: #fff;
      font-family: 'DM Sans', sans-serif;
      font-weight: 500;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .af-video-author-name {
      font-family: 'DM Sans', sans-serif;
      font-weight: 500;
      font-size: 13px;
      color: #fff;
      margin: 0;
      line-height: 1.3;
    }

    .af-video-author-role {
      font-family: 'DM Sans', sans-serif;
      font-size: 11px;
      color: var(--af-green);
      margin: 0;
    }

    /* ── Slick custom arrows ── */
    .af-slider-nav {
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: center;
      margin-top: 44px;
    }

    .af-nav-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1.5px solid var(--af-teal);
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.25s, color 0.25s, transform 0.2s;
      color: var(--af-teal);
    }
    .af-nav-btn:hover {
      background: var(--af-teal);
      color: #fff;
      transform: scale(1.08);
    }
    .af-nav-btn svg { width: 18px; height: 18px; }

    .af-dots-wrap {
      display: flex;
      gap: 7px;
      align-items: center;
    }

    .af-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #c8dada;
      transition: background 0.3s, transform 0.3s;
      cursor: pointer;
    }
    .af-dot.active {
      background: var(--af-teal);
      transform: scale(1.35);
    }

    /* ── Modal override ── */
    .af-video-modal .modal-content {
      background: #000;
      border: none;
      border-radius: 12px;
      overflow: hidden;
    }
    .af-video-modal .btn-close {
      filter: invert(1);
      opacity: 0.8;
    }
    .af-video-modal iframe {
      width: 100%;
      aspect-ratio: 16/9;
      border: none;
      display: block;
      border-radius: 12px;
    }

    /* slick overflow clip for outer */
    .af-slider-outer { overflow: hidden; }

    /* fade in on load */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .af-testimonials .container { animation: fadeUp 0.7s ease both; }




.af-theme-dark .af-review-text blockquote {
  max-height: 150px;
  overflow-y: auto;
  margin: 0;
  padding-right: 6px;

  white-space: pre-wrap;
  word-break: break-word;
}

.af-theme-light .af-review-text blockquote {
  max-height: 300px;
  overflow-y: auto;
  margin: 0;
  padding-right: 6px;

  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 18px;
}

/* Scrollbar - Webkit (Chrome, Edge, Safari) */
/*.af-review-text blockquote::-webkit-scrollbar {*/
/*  width: 5px;*/
/*}*/

/*.af-review-text blockquote::-webkit-scrollbar-track {*/
  background: var(--af-accent); /* soft background */
/*  border-radius: 10px;*/
/*}*/

/*.af-review-text blockquote::-webkit-scrollbar-thumb {*/
/*  background: linear-gradient(*/
/*    to bottom,*/
/*    var(--af-teal),*/
/*    var(--af-green)*/
/*  );*/
/*  border-radius: 10px;*/
/*  transition: var(--transition);*/
/*}*/

/*.af-review-text blockquote::-webkit-scrollbar-thumb:hover {*/
/*  background: var(--af-navy);*/
/*}*/

/* Firefox समर्थन */
/*.af-review-text blockquote {*/
/*  scrollbar-width: thin;*/
/*  scrollbar-color: var(--af-teal) var(--af-accent);*/
/*}*/

/* Webkit browsers (Chrome, Edge, Safari) */
.af-review-text blockquote::-webkit-scrollbar {
  width: 6px;
}

.af-review-text blockquote::-webkit-scrollbar-track {
  background: transparent; /* ✅ transparent track */
}

.af-review-text blockquote::-webkit-scrollbar-thumb {
  background: linear-gradient(
    to bottom,
    var(--af-teal),
    var(--af-green)
  );
  border-radius: 10px;
  transition: var(--transition);
}

.af-review-text blockquote::-webkit-scrollbar-thumb:hover {
  background: var(--af-navy);
}

/* Firefox */
.af-review-text blockquote {
  scrollbar-width: thin;
  scrollbar-color: var(--af-teal) transparent; /* ✅ transparent track */
}