/************ Template Info ***************
Template Name: Ecology & Environment
Author:
Support:
Version: 1.0
************ Template Info ***************/
/************ TABLE OF CONTENTS ***************
01 Default CSS
02 Preloader CSS
03 Button CSS
04 Header CSS
05 OffCanvas CSS
06 Footer CSS
07 Topbar CSS
08 Breadcrumb CSS
09 Hero CSS
10 Camping CSS
11 Contact CSS
12 Blog CSS
13 Event CSS
14 Partners CSS
15 Contact Us CSS
16 Testimonial CSS
17 Completed Project CSS
18 What We Do CSS
19 Volunteer CSS
20 Why Us CSS
21 Service CSS
22 Dust Recycling CSS
23 Faq CSS
24 About Us CSS
25 Latest Work CSS
26 News Letter CSS
27 Company Achievements CSS
28 Services We Offer CSS
29 Work Process CSS
30 Make Donate CSS
31 Donate Us CSS
32 We Are Friends CSS
33 Details Content CSS
34 Details Sidebar CSS
35 Camping Donation CSS
36 Donations CSS
37 Blog Standard CSS
************ TABLE OF CONTENTS ***************/
:root {
  --theme-color: #231F20;
  --theme-shade-color: #99EF68;
  --theme-color-2: #F4F4F4;
  --theme-color-3: #007749;
  --title-color: #15161C;
  --body-color: #868681;
  --gray-color: #383838;
  --warning-color: #FFB539;
  --success-color: #28a745;
  --error-color: #dc3545;
  --light-color: #f5f5f5;
  --dark-color: #15161C;
  --white-color: #fff;
  --black-color: #000;
  --hr-color: #000;
  --outfit-font: "Outfit", sans-serif;
  --dm-sans-font: "DM Sans", sans-serif;
  --albert-sans-font: "Albert Sans", sans-serif;
  --icon-font: "Font Awesome 6 Pro";
  --body-fz: 16px;
}

/* 01 Default CSS */
html, body {
  scroll-behavior: smooth !important;
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
  background: #c1c1c1;
}
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
  background-color: #222;
  outline: none;
}
html::-webkit-scrollbar-thumb:active, body::-webkit-scrollbar-thumb:active {
  background: var(--theme-color-2);
}

body {
  color: var(--body-color);
  font-size: var(--body-fz);
  font-family: var(--dm-sans-font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

a {
  text-decoration: none;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
a:active, a:hover {
  text-decoration: none;
}

button,
.btn {
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
button:active, button:hover, button:focus,
.btn:active,
.btn:hover,
.btn:focus {
  outline: 0;
}

button:focus,
input:focus,
input:focus,
textarea,
textarea:focus,
.btn:focus {
  outline: 0;
  box-shadow: none;
}

.form-control:focus {
  color: var(--title-color);
  background-color: transparent;
  outline: 0;
  box-shadow: none;
}

.btn:hover,
.btn:focus {
  outline: 0;
  box-shadow: none;
  color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--outfit-font);
  color: var(--title-color);
  font-weight: 700;
  margin-bottom: 20px;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}

h1 {
  font-size: 48px;
  line-height: 1.3;
}

h2 {
  font-size: 36px;
  line-height: 1.3;
}

h3 {
  font-size: 28px;
  line-height: 1.3;
}

h4 {
  font-size: 24px;
  line-height: 1.2;
}

h5 {
  font-size: 20px;
  line-height: 1.2;
}

h6 {
  font-size: 16px;
  line-height: 1.2;
}

hr {
  margin: 20px 0;
  border-color: var(--hr-color);
}

ol {
  list-style: decimal;
}

p:last-child {
  margin-bottom: 0;
}

/* Form */
label {
  color: var(--gray-color);
  cursor: pointer;
  font-size: var(--body-fz);
  font-weight: 400;
}

*::-moz-selection {
  background: var(--theme-color);
  color: #fff;
  text-shadow: none;
}

::-moz-selection {
  background: var(--theme-color);
  color: #fff;
  text-shadow: none;
}

::selection {
  background: var(--theme-color);
  color: #fff;
  text-shadow: none;
}

/* Placeholder */
*::-moz-placeholder {
  color: var(--body-color);
  font-size: var(--body-fz);
  opacity: 1;
}

*::placeholder {
  color: var(--body-color);
  font-size: var(--body-fz);
  opacity: 1;
}

/* Button */
.btn-theme {
  color: #fff;
  border-color: var(--theme-color);
  background: var(--theme-color);
}
.btn-theme:hover {
  background: var(--theme-color);
  color: #fff;
  border-color: var(--theme-color);
}

.btn-rounded {
  border-radius: 100% !important;
}

.btn-square {
  border-radius: 0 !important;
}

/* Bg Color */
.bg-gray {
  background: var(--gray-color);
}

.bg-white {
  background: #fff;
}

.bg-cream {
  background: #f8f7f0;
}

.bg-black {
  background: #000;
}

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

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

.bg-off-white {
  background-color: #f7f7f7;
}

.bg-off-white-2 {
  background-color: #f1f8ff;
}

.bg-blue {
  background-color: #4c87ff !important;
}

.bg-yellow {
  background-color: #fea116 !important;
}

.bg-pink {
  background-color: #fc4557 !important;
}

.bg-egg-blue {
  background-color: #1cb5a3 !important;
}

.bg-purple {
  background-color: #5851a7 !important;
}

/* Text Color */
.gray-color {
  background: var(--gray-color);
}

.white-color {
  color: #fff;
}

.black-color {
  color: #000;
}

.theme-color {
  color: var(--theme-color);
}

/* Others Common Css Here :) */
.table-row {
  display: table;
  width: 100%;
  height: 100%;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}

.f-left {
  float: left;
}

.f-right {
  float: right;
}

.fix {
  overflow: hidden;
}

.separator {
  border-top: 1px solid #f2f2f2;
}

.overflow-x-clip {
  overflow-x: clip;
}

.overflow-y-clip {
  overflow-y: clip;
}

@keyframes animate-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), 0 0 0 0 rgba(255, 255, 255, 0.5);
  }
  40% {
    box-shadow: 0 0 0 50px rgba(255, 109, 74, 0), 0 0 0 0 rgba(255, 255, 255, 0.5);
  }
  80% {
    box-shadow: 0 0 0 50px rgba(255, 109, 74, 0), 0 0 0 30px rgba(255, 109, 74, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 109, 74, 0), 0 0 0 30px rgba(255, 109, 74, 0);
  }
}
.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
  font-family: inherit;
  line-height: inherit;
}

.common-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  font-size: 22px;
  color: var(--hr-color);
  line-height: 120%;
  margin-bottom: 20px;
}

.common-subtitle i {
    font-size: 20px;
    color: var(--theme-shade-color);
}
@media (min-width: 768px) and (max-width: 991px) {
  .common-subtitle {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 14px;
  }
}
@media (max-width: 767px) {
  .common-subtitle {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 14px;
  }
}
.common-subtitle.style-color-white {
  color: var(--white-color);
}
.common-subtitle.style-color-2 {
  color: var(--theme-color-2);
}
.common-subtitle.style-color-3 {
  color: var(--theme-color-3);
}
.common-subtitle.m-b-0 {
  margin-bottom: 0;
}

.common-title {
  text-align: center;
  margin-bottom: 30px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .common-title {
    margin-bottom: 20px;
  }
}
@media (max-width: 767px) {
  .common-title {
    margin-bottom: 20px;
  }
}
.common-title h2 {
  font-weight: 600;
  font-size: 52px;
  line-height: 60px;
  color: var(--theme-color-3);
  margin-bottom: 0 !important;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .common-title h2 {
    font-size: 44px;
    line-height: 1.2;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .common-title h2 {
    font-size: 42px;
    line-height: 1.2;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .common-title h2 {
    font-size: 30px;
    line-height: 1.2;
  }
}
@media (max-width: 767px) {
  .common-title h2 {
    font-size: 24px;
    line-height: 1.2;
  }
}
.common-title.style-color-white h2 {
  color: var(--white-color);
}
.common-title.style-color-light h2 {
  color: var(--light-color);
}
.common-title.style-color-2 h2 {
  color: var(--theme-color-2);
}
.common-title.style-color-3 h2 {
  color: var(--theme-color-3);
}
.common-title.m-b-0 {
  margin-bottom: 0;
}

@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1392px;
  }
}
.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
  --bs-gutter-x: 30px;
}

.row {
  --bs-gutter-x: 30px;
}

.g-0, .gy-0 {
  --bs-gutter-y: 0;
}

.g-0, .gx-0 {
  --bs-gutter-x: 0;
}

/*====================================================================
    Components
====================================================================*/
/* 02 Preloader CSS */
.dark #preloader {
  background-color: #232323;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--theme-color-2);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Preloader Container ── */
.preloader {
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Logo — fade in + breathe ── */
.preloader img {
    width: 120px;
    position: relative;
    z-index: 2;
    animation: logo-breathe 2s ease-in-out infinite;
}

@keyframes logo-breathe {
    0%   { opacity: 0.85; transform: scale(0.97); }
    50%  { opacity: 1;    transform: scale(1.03); }
    100% { opacity: 0.85; transform: scale(0.97); }
}

/* ── Pulse rings — lime green radiating outward ── */
.preloader span {
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 2px solid var(--theme-shade-color);
    opacity: 0;
    animation: ring-pulse 2s ease-out infinite;
}

.preloader span:last-of-type {
    animation-delay: 1s;
}

@keyframes ring-pulse {
    0%   { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0;   }
}
/* 03 Button CSS */
.e-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--albert-sans-font);
  font-weight: 600;
  font-size: 17px;
  line-height: 100%;
  color: var(--theme-color-3);
  padding: 16px 25px;
  background: var(--theme-color-2);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .e-primary-btn {
    font-size: 16px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .e-primary-btn {
    font-size: 16px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .e-primary-btn {
    font-size: 16px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .e-primary-btn {
    font-size: 16px;
    line-height: 20px;
    gap: 8px;
    padding: 5px 5px 5px 20px;
  }
}
@media (max-width: 767px) {
  .e-primary-btn {
    font-size: 16px;
    line-height: 20px;
    gap: 8px;
    padding: 5px 5px 5px 20px;
  }
}
.e-primary-btn:before {
  content: "";
  position: absolute;
  left: -110%;
  top: 50%;
  width: 200%;
  height: 200%;
  background: var(--theme-color-3);
  z-index: -1;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 200px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.e-primary-btn.has-icon {
  padding: 5px 5px 5px 25px;
  gap: 15px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .e-primary-btn.has-icon {
    gap: 10px;
  }
}
.e-primary-btn .icon-wrap {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--theme-color-3);
  color: var(--white-color);
  border-radius: 100%;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
@media (max-width: 1399px) {
  .e-primary-btn .icon-wrap {
    width: 40px;
    height: 40px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .e-primary-btn .icon-wrap {
    font-size: 15px;
  }
}
@media (max-width: 767px) {
  .e-primary-btn .icon-wrap {
    font-size: 15px;
  }
}
.e-primary-btn .icon-wrap .icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 15px;
  overflow: hidden;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .e-primary-btn .icon-wrap .icon {
    width: 14px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .e-primary-btn .icon-wrap .icon {
    width: 14px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .e-primary-btn .icon-wrap .icon {
    width: 10px;
  }
}
@media (max-width: 767px) {
  .e-primary-btn .icon-wrap .icon {
    width: 10px;
  }
}
.e-primary-btn .icon-wrap .icon i {
  flex: none;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.e-primary-btn.is-hover-white:before {
  background: var(--white-color);
}
.e-primary-btn.is-hover-white:hover {
  color: var(--theme-color-3);
}
.e-primary-btn.is-hover-white:hover .icon-wrap {
  background: var(--theme-color-2);
  color: var(--theme-color-3);
}
.e-primary-btn:hover {
  color: var(--white-color);
}
.e-primary-btn:hover:before {
  left: -10%;
  transform: translateX(0%) translateY(-50%);
}
.e-primary-btn:hover .icon-wrap {
  background: var(--white-color);
  color: var(--theme-color-3);
}
.e-primary-btn:hover .icon-wrap .icon i {
  transform: translateX(100%);
}
.e-primary-btn.has-small .icon-wrap {
  width: 34px;
  height: 34px;
}
@media (max-width: 991px) {
  .e-primary-btn.has-small .icon-wrap {
    width: 40px;
    height: 40px;
  }
}

/* 04 Header Css */
.logo-wrap img {
  width: 100%;
  max-width: 165px;
}

.logo-wrap-2 {
  background: rgba(35, 31, 32, 0.50);
  backdrop-filter: blur(14.75px);
  border-radius: 0 0 16px 0;
  padding: 20px 52px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 1399px) {
  .logo-wrap-2 {
    padding: 20px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .logo-wrap-2 {
    padding: 15px 25px;
  }
}
@media (max-width: 767px) {
  .logo-wrap-2 {
    padding: 15px 20px;
  }
}
.logo-wrap-2 img {
  max-width: 165px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .logo-wrap-2 img {
    max-width: 125px;
  }
}

.header-bottom {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .header-bottom {
    padding: 10px 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .header-bottom {
    padding: 10px 0;
  }
}
@media (max-width: 767px) {
  .header-bottom {
    padding: 10px 0;
  }
}

.header-bottom-2 {
  padding-left: 85px;
  padding-right: 85px;
  padding-top: 20px;
  padding-bottom: 20px;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 2;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .header-bottom-2 {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-bottom-2 {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .header-bottom-2 {
    padding: 10px 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .header-bottom-2 {
    padding: 10px 0;
  }
}
@media (max-width: 767px) {
  .header-bottom-2 {
    padding: 10px 0;
  }
}

.header-bottom-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-bottom-layout-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 100px;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .header-left {
    gap: 40px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-left {
    gap: 10px;
  }
}

.header-left-2 {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .header-left-2 {
    gap: 40px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-left-2 {
    gap: 10px;
  }
}

.header-left-4 {
  display: flex;
  align-items: center;
  gap: 40px;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .header-left-4 {
    gap: 100px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-left-4 {
    gap: 10px;
  }
}

.header-left-3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 69%;
  gap: 20px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-left-3 {
    width: 66%;
  }
}

.header-middle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(14.75px);
  border-radius: 0 0 16px 16px;
  border-left: 1.5px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.1);
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-middle {
    padding: 10px 12px;
  }
}
.header-middle .header-info-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-right {
    gap: 10px;
  }
}

.main-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-menu ul li {
  display: inline-block;
}
.main-menu ul li:hover a {
  background: rgba(0, 69, 64, 0.1);
}
.main-menu ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 16px;
  font-weight: 500;
  font-size: 18px;
  line-height: 167%;
  color: var(--theme-color-3);
  border-radius: 100px;
  gap: 5px;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .main-menu ul li a {
    padding: 5px 12px;
    font-size: 16px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .main-menu ul li a {
    padding: 4px 10px;
    font-size: 16px;
  }
}
.main-menu ul .has-dropdown {
  position: relative;
  z-index: 1;
}
.main-menu ul .has-dropdown > a:after {
  content: "+";
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 12px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.main-menu ul .has-dropdown:hover > a:after {
  transform: rotate(180deg);
  content: "\f068";
}
.main-menu ul .has-dropdown:hover .sub-menu {
  visibility: visible;
  opacity: 1;
  top: 100%;
}
.main-menu ul .has-dropdown .sub-menu {
  position: absolute;
  left: 0;
  top: 120%;
  width: 200px;
  background: #fff;
  border-radius: 10px;
  padding: 10px 0;
  visibility: hidden;
  opacity: 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.main-menu ul .has-dropdown .sub-menu li {
  display: block;
}
.main-menu ul .has-dropdown .sub-menu li:before {
  display: none;
}
.main-menu ul .has-dropdown .sub-menu li a {
  display: block;
  color: #383838;
  font-size: 16px;
  border-radius: 0;
  background: none;
  padding: 5px 20px;
}
.main-menu ul .has-dropdown .sub-menu li a:hover {
  color: #383838;
  background: var(--theme-color-2);
}

.main-menu-2 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-menu-2 ul li {
  display: inline-block;
}
.main-menu-2 ul li:hover a {
  color: var(--theme-color-2);
  background: rgba(217, 217, 217, 0.16);
}
.main-menu-2 ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 16px;
  font-weight: 500;
  font-size: 18px;
  line-height: 167%;
  color: var(--white-color);
  border-radius: 100px;
  gap: 5px;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .main-menu-2 ul li a {
    padding: 5px 12px;
    font-size: 16px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .main-menu-2 ul li a {
    padding: 4px 10px;
    font-size: 16px;
  }
}
.main-menu-2 ul .has-dropdown {
  position: relative;
  z-index: 1;
}
.main-menu-2 ul .has-dropdown > a:after {
  content: "\f0d7";
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 12px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.main-menu-2 ul .has-dropdown:hover > a:after {
  transform: rotate(180deg);
}
.main-menu-2 ul .has-dropdown:hover .sub-menu {
  visibility: visible;
  opacity: 1;
  top: 100%;
}
.main-menu-2 ul .has-dropdown .sub-menu {
  position: absolute;
  left: 0;
  top: 120%;
  width: 200px;
  background: #fff;
  border-radius: 10px;
  padding: 10px 0;
  visibility: hidden;
  opacity: 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.main-menu-2 ul .has-dropdown .sub-menu li {
  display: block;
}
.main-menu-2 ul .has-dropdown .sub-menu li a {
  display: block;
  color: #383838;
  font-size: 16px;
  border-radius: 0;
  background: none;
  padding: 5px 20px;
}
.main-menu-2 ul .has-dropdown .sub-menu li a:hover {
  color: #383838;
  background: var(--theme-color-2);
}

.main-menu-3 {
  padding: 3px;
  background-color: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
}
.main-menu-3 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-menu-3 ul li {
  display: inline-flex;
  align-items: center;
}
.main-menu-3 ul li:hover a {
  color: var(--theme-color-3);
  background: var(--theme-color-2);
}
.main-menu-3 ul li:first-child:before {
  width: 0;
  margin: 0;
}
.main-menu-3 ul li:before {
  content: "";
  width: 1px;
  height: 20px;
  display: inline-flex;
  margin-right: 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
}
.main-menu-3 ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 16px;
  font-weight: 500;
  font-size: 18px;
  line-height: 167%;
  color: var(--white-color);
  border-radius: 100px;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .main-menu-3 ul li a {
    padding: 5px 12px;
    font-size: 16px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .main-menu-3 ul li a {
    padding: 4px 10px;
    font-size: 16px;
  }
}
.main-menu-3 ul .has-dropdown {
  position: relative;
  z-index: 1;
}
.main-menu-3 ul .has-dropdown > a:after {
  content: "+";
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 12px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.main-menu-3 ul .has-dropdown:hover > a:after {
  transform: rotate(180deg);
  content: "\f068";
}
.main-menu-3 ul .has-dropdown:hover .sub-menu {
  visibility: visible;
  opacity: 1;
  top: 100%;
}
.main-menu-3 ul .has-dropdown .sub-menu {
  position: absolute;
  left: 0;
  top: 120%;
  width: 200px;
  background: #fff;
  border-radius: 10px;
  padding: 10px 0;
  visibility: hidden;
  opacity: 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.main-menu-3 ul .has-dropdown .sub-menu li {
  display: block;
}
.main-menu-3 ul .has-dropdown .sub-menu li:before {
  display: none;
}
.main-menu-3 ul .has-dropdown .sub-menu li a {
  display: block;
  color: #383838;
  font-size: 16px;
  border-radius: 0;
  background: none;
  padding: 5px 20px;
}
.main-menu-3 ul .has-dropdown .sub-menu li a:hover {
  color: #383838;
  background: var(--theme-color-2);
}

.header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-info {
    gap: 5px;
  }
}
.header-info .header-info-icon {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: rgba(217, 217, 217, 0.1);
  border: 2px solid rgba(0, 69, 64, 0.1);
  backdrop-filter: blur(4.1px);
  color: var(--theme-color-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .header-info .header-info-icon {
    font-size: 16px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-info .header-info-icon {
    font-size: 16px;
    width: 40px;
    height: 40px;
  }
}
.header-info .header-info-icon-2 {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: rgba(0, 69, 64, 0.1);
  border: 1.5px solid rgba(0, 69, 64, 0.15);
  backdrop-filter: blur(4.1px);
  color: var(--theme-color-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .header-info .header-info-icon-2 {
    font-size: 16px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-info .header-info-icon-2 {
    font-size: 16px;
    width: 40px;
    height: 40px;
  }
}
.header-info .header-info-content span {
  font-size: 14px;
  line-height: 100%;
  color: rgba(56, 56, 56, 0.8);
}
.header-info .header-info-content p {
  font-family: var(--outfit-font);
  font-weight: 500;
  font-size: 18px;
  line-height: 100%;
  color: var(--theme-color-3);
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .header-info .header-info-content p {
    font-size: 16px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-info .header-info-content p {
    font-size: 16px;
  }
}
.header-info .header-info-content p a {
  color: var(--theme-color-3);
}
.header-info .header-info-content p a:hover {
  color: var(--theme-color);
}

.header-info-2 {
  display: flex;
  align-items: center;
  gap: 12px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-info-2 {
    gap: 10px;
  }
}
.header-info-2 .header-info-icon {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: rgba(217, 217, 217, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4.1px);
  color: #f8f7f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .header-info-2 .header-info-icon {
    font-size: 16px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-info-2 .header-info-icon {
    font-size: 16px;
    width: 40px;
    height: 40px;
  }
}
.header-info-2 .header-info-content span {
  font-size: 14px;
  line-height: 100%;
  color: rgba(255, 255, 255, 0.8);
}
.header-info-2 .header-info-content p {
  font-family: var(--outfit-font);
  font-weight: 500;
  font-size: 18px;
  line-height: 100%;
  color: var(--white-color);
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .header-info-2 .header-info-content p {
    font-size: 16px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-info-2 .header-info-content p {
    font-size: 16px;
  }
}
.header-info-2 .header-info-content p a {
  color: var(--white-color);
}
.header-info-2 .header-info-content p a:hover {
  color: var(--theme-color-2);
}

.header-info-3 {
  display: flex;
  align-items: center;
  gap: 12px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-info-3 {
    gap: 10px;
  }
}
.header-info-3 .header-info-icon {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: rgba(217, 217, 217, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4.1px);
  color: var(--theme-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .header-info-3 .header-info-icon {
    font-size: 16px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-info-3 .header-info-icon {
    font-size: 16px;
    width: 40px;
    height: 40px;
  }
}
.header-info-3 .header-info-content span {
  font-size: 14px;
  line-height: 100%;
  color: rgba(255, 255, 255, 0.8);
}
.header-info-3 .header-info-content p {
  font-family: var(--outfit-font);
  font-weight: 500;
  font-size: 18px;
  line-height: 100%;
  color: var(--white-color);
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .header-info-3 .header-info-content p {
    font-size: 16px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-info-3 .header-info-content p {
    font-size: 16px;
  }
}
.header-info-3 .header-info-content p a {
  color: rgba(0, 119, 73, 0.8);
}
.header-info-3 .header-info-content p a:hover {
  color: var(--theme-color-2);
}

.header-bar {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(0, 69, 64, 0.1);
  backdrop-filter: blur(4.1px);
  border-radius: 100%;
  overflow: hidden;
  flex: none;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-bar {
    width: 45px;
    height: 45px;
  }
}
.header-bar .bar {
  background: var(--theme-color-3);
  width: 20px;
  height: 1.6px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-bar .bar {
    width: 18px;
  }
}
.header-bar .bar-1 {
  margin-top: -6px;
}
.header-bar .bar-3 {
  margin-top: 6px;
}
.header-bar.active {
  background: var(--theme-color-3);
  border-color: var(--theme-color-3);
}
.header-bar.active .bar {
  background: var(--white-color);
}
.header-bar.active .bar-1 {
  transform: rotate(45deg) translate(-50%, -50%);
  top: 78%;
  left: 44%;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-bar.active .bar-1 {
    top: 81%;
    left: 45%;
  }
}
.header-bar.active .bar-2 {
  left: 200%;
}
.header-bar.active .bar-3 {
  transform: rotate(-45deg) translate(-50%, -50%);
  top: 22%;
  left: 45%;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-bar.active .bar-3 {
    top: 20%;
    left: 45%;
  }
}

.header-bar-2 {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4.1px);
  border-radius: 100%;
  overflow: hidden;
  flex: none;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-bar-2 {
    width: 45px;
    height: 45px;
  }
}
.header-bar-2 .bar {
  background: var(--white-color);
  width: 20px;
  height: 1.6px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-bar-2 .bar {
    width: 18px;
  }
}
.header-bar-2 .bar-1 {
  margin-top: -6px;
}
.header-bar-2 .bar-3 {
  margin-top: 6px;
}
.header-bar-2.active {
  background: var(--theme-color-3);
  border-color: var(--theme-color-3);
}
.header-bar-2.active .bar {
  background: var(--white-color);
}
.header-bar-2.active .bar-1 {
  transform: rotate(45deg) translate(-50%, -50%);
  top: 78%;
  left: 44%;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-bar-2.active .bar-1 {
    top: 81%;
    left: 45%;
  }
}
.header-bar-2.active .bar-2 {
  left: 200%;
}
.header-bar-2.active .bar-3 {
  transform: rotate(-45deg) translate(-50%, -50%);
  top: 22%;
  left: 45%;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-bar-2.active .bar-3 {
    top: 20%;
    left: 45%;
  }
}

.header-bar-3 {
  width: 81px;
  height: 81px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(14.75px);
  border-radius: 0 0 0 16px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  flex: none;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-bar-3 {
    width: 70px;
    height: 71px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .header-bar-3 {
    width: 70px;
    height: 71px;
  }
}
@media (max-width: 767px) {
  .header-bar-3 {
    width: 70px;
    height: 71px;
  }
}
.header-bar-3 .bar {
  background: var(--white-color);
  width: 22px;
  height: 2px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-bar-3 .bar {
    width: 18px;
  }
}
.header-bar-3 .bar-1 {
  margin-top: -6px;
}
.header-bar-3 .bar-3 {
  margin-top: 6px;
}
.header-bar-3.active {
  background: var(--theme-color-3);
  border-color: var(--theme-color-3);
}
.header-bar-3.active .bar {
  background: var(--white-color);
}
.header-bar-3.active .bar-1 {
  transform: rotate(45deg) translate(-50%, -50%);
  top: 78%;
  left: 44%;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-bar-3.active .bar-1 {
    top: 81%;
    left: 45%;
  }
}
.header-bar-3.active .bar-2 {
  left: 200%;
}
.header-bar-3.active .bar-3 {
  transform: rotate(-45deg) translate(-50%, -50%);
  top: 22%;
  left: 45%;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-bar-3.active .bar-3 {
    top: 20%;
    left: 45%;
  }
}

.header-divider-bar {
  width: 30px;
  height: 1.6px;
  opacity: 0.15;
  border: 1px solid #004540;
  transform: rotate(90deg);
}

.header-section {
  position: relative;
  z-index: 99;
}

.header-section-1 {
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}

.header-section-3 {
  position: relative;
  z-index: 10;
}
.header-section-3 .e-primary-btn {
  background: var(--theme-color-3);
  border: none;
  color: var(--theme-color-2);
}
.header-section-3 .e-primary-btn:before {
  background: var(--theme-color-2);
}
.header-section-3 .e-primary-btn .icon-wrap {
  background: var(--theme-color-2);
  color: var(--theme-color-3);
}
.header-section-3 .e-primary-btn:hover {
  color: var(--theme-color-3);
}
.header-section-3 .e-primary-btn:hover .icon-wrap {
  background: var(--theme-color-3);
  color: var(--theme-color-2);
}

.header-section-4 .e-primary-btn .icon-wrap {
  color: var(--theme-color-2);
}
.header-section-4 .e-primary-btn:hover .icon-wrap {
  color: var(--theme-color-3);
}

.header-section-5 {
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.header-section-5 .e-primary-btn .icon-wrap {
  color: var(--theme-color-2);
}
.header-section-5 .e-primary-btn:hover .icon-wrap {
  color: var(--theme-color-3);
}

/* 05 OffCanvas Css */
.off-canvas-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 99;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.off-canvas-sidebar.active {
  visibility: visible;
  opacity: 1;
}
.off-canvas-sidebar .off-canvas-sidebar-close {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--theme-color-3);
  color: var(--white-color);
  font-size: 20px;
  cursor: pointer;
  border-radius: 0 0 4px 0;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.off-canvas-sidebar .off-canvas-sidebar-close i {
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.off-canvas-sidebar .off-canvas-sidebar-close:hover {
  background: var(--error-color);
}
.off-canvas-sidebar .off-canvas-sidebar-close:hover i {
  transform: rotate(180deg);
}
.off-canvas-sidebar .off-canvas-logo img {
  width: 100%;
  max-width: 165px;
}

.off-canvas-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 20;
  cursor: pointer;
}

.off-canvas-sidebar-body {
  position: fixed;
  right: -100%;
  top: 0;
  width: 400px;
  background: #fff;
  z-index: 30;
  padding: 24px;
  padding-top: 70px;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
@media (max-width: 767px) {
  .off-canvas-sidebar-body {
    max-width: 100%;
  }
}
.off-canvas-sidebar-body.active {
  right: 0;
  visibility: visible;
  opacity: 1;
  z-index: 99999;
  -webkit-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-duration: 0.6s;
}
.off-canvas-sidebar-body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.off-canvas-sidebar-body::-webkit-scrollbar-track {
  background: #c1c1c1;
}
.off-canvas-sidebar-body::-webkit-scrollbar-thumb {
  background-color: #222;
  outline: none;
}
.off-canvas-sidebar-body::-webkit-scrollbar-thumb:active {
  background: var(--theme-color-2);
}

.off-canvas-text p {
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: var(--body-color);
}

.off-canvas-thumb img {
  width: 100%;
  border-radius: 10px;
}

.off-canvas-contact {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.off-canvas-contact-item {
  display: flex;
  align-items: center;
  gap: 20px;
}
.off-canvas-contact-item:hover .icon {
  color: var(--theme-color-3);
  background: var(--theme-color-2);
}
.off-canvas-contact-item .icon {
  width: 50px;
  height: 50px;
  background: var(--theme-color-3);
  color: var(--white-color);
  font-size: 20px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.off-canvas-contact-item .text h6 {
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: var(--title-color);
  margin-bottom: 4px;
}
.off-canvas-contact-item .text p {
  font-style: normal;
  font-weight: 300;
  font-size: 17px;
  line-height: 28px;
  color: var(--body-color);
}

.off-canvas-social-links {
  display: flex;
  align-items: center;
  gap: 10px;
}
.off-canvas-social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--white-color);
  background: var(--theme-color-3);
  border-radius: 50px;
}
.off-canvas-social-links a:hover {
  color: var(--theme-color-3);
  background: var(--theme-color-2);
}

.off-canvas-menubar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 99;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.off-canvas-menubar.active {
  visibility: visible;
  opacity: 1;
}
.off-canvas-menubar .off-canvas-head {
  padding: 0 0 0 24px;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
}
.off-canvas-menubar .off-canvas-menubar-close {
  padding: 20px 30px 20px 30px;
  border-left: 1px solid #E5E5E5;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.off-canvas-menubar .off-canvas-menubar-close i {
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.off-canvas-menubar .off-canvas-menubar-close:hover {
  color: var(--white-color);
  background: var(--error-color);
}
.off-canvas-menubar .off-canvas-menubar-close:hover i {
  transform: rotate(180deg);
}
.off-canvas-menubar .off-canvas-logo img {
  width: 100%;
  max-width: 165px;
}

.off-canvas-menubar-body {
  position: fixed;
  left: -100%;
  top: 0;
  width: 400px;
  background: #fff;
  z-index: 30;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
@media (max-width: 767px) {
  .off-canvas-menubar-body {
    max-width: 100%;
  }
}
.off-canvas-menubar-body.active {
  left: 0;
  visibility: visible;
  opacity: 1;
  z-index: 99999;
  -webkit-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-duration: 0.6s;
}
.off-canvas-menubar-body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.off-canvas-menubar-body::-webkit-scrollbar-track {
  background: #c1c1c1;
}
.off-canvas-menubar-body::-webkit-scrollbar-thumb {
  background-color: #222;
  outline: none;
}
.off-canvas-menubar-body::-webkit-scrollbar-thumb:active {
  background: var(--theme-color-2);
}

.off-canvas-menu {
  overflow-y: scroll;
  max-height: calc(100vh - 200px);
  text-align: left;
  padding: 20px 30px 40px;
}
.off-canvas-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.off-canvas-menu ul li {
  display: block;
  border-bottom: 1px solid #fdedf1;
}
.off-canvas-menu ul li:hover > a {
  color: var(--theme-color-3);
}
.off-canvas-menu ul li a {
  display: block;
  position: relative;
  padding: 12px 0;
  line-height: 1.4;
  font-size: 16px;
  text-transform: capitalize;
  color: var(--title-color);
  padding-left: 0px;
}
.off-canvas-menu ul .has-dropdown > a:after {
  content: "\f078";
  font-family: var(--icon-font);
  font-weight: 900;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.off-canvas-menu ul .has-dropdown.active > a {
  color: var(--theme-color-3);
}
.off-canvas-menu ul .has-dropdown.active > a:after {
  transform: translateY(-50%) rotate(180deg);
}
.off-canvas-menu ul .has-dropdown li {
  padding-left: 20px;
}
.off-canvas-menu ul .has-dropdown li:first-child {
  border-top: 1px solid #fdedf1;
}
.off-canvas-menu ul .has-dropdown li:last-child {
  border-bottom: 0;
}
.off-canvas-menu ul .has-dropdown li a {
  font-size: 14px;
  padding: 10px 0;
}
.off-canvas-menu ul .has-dropdown .sub-menu {
  display: none;
}

.off-canvas-menubar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 20;
  cursor: pointer;
}

/* 06 Footer Css */
.footer-section {
  background-color: var(--theme-color-3);
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

.footer-bottom-layout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 24px 3px 3px;
  background-color: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  overflow: hidden;
  gap: 20px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .footer-bottom-layout {
    gap: 10px;
  }
}
@media (max-width: 767px) {
  .footer-bottom-layout {
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: visible;
    padding: 15px 30px;
  }
}
.footer-bottom-layout .top-btn {
  border-radius: 100px;
  gap: 5px;
  padding: 14px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .footer-bottom-layout .top-btn {
    padding: 8px 14px;
  }
}
@media (max-width: 767px) {
  .footer-bottom-layout .top-btn {
    position: absolute;
    padding: 8px 14px;
    bottom: -60px;
  }
}
.footer-bottom-layout .footer-copyright {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: #F8F7F0;
}
.footer-bottom-layout .footer-bottom-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
.footer-bottom-layout .footer-bottom-menu ul li {
  display: inline-flex;
  align-items: center;
}
.footer-bottom-layout .footer-bottom-menu ul li:first-child:before {
  margin-left: 0;
}
.footer-bottom-layout .footer-bottom-menu ul li:before {
  content: "";
  width: 1px;
  height: 20px;
  display: inline-flex;
  margin: 0 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
}
@media (min-width: 768px) and (max-width: 991px) {
  .footer-bottom-layout .footer-bottom-menu ul li:before {
    margin: 0 10px;
  }
}
@media (max-width: 767px) {
  .footer-bottom-layout .footer-bottom-menu ul li:before {
    margin: 0 10px;
  }
}
.footer-bottom-layout .footer-bottom-menu ul li a {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: #F8F7F0;
}
.footer-bottom-layout .footer-bottom-menu ul li a:hover {
  color: var(--theme-color-2);
}

.footer-widget .w-title {
  font-family: var(--outfit-font);
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: var(--white-color);
  margin-bottom: 32px;
}
@media (max-width: 1399px) {
  .footer-widget .w-title {
    font-size: 20px;
  }
}
.footer-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-widget ul li {
  display: block;
  margin-bottom: 10px;
}
.footer-widget ul li a {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 400;
  font-size: 17px;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.9);
}
@media (max-width: 1399px) {
  .footer-widget ul li a {
    font-size: 16px;
  }
}
.footer-widget ul li a:after {
  content: "\e09f";
  font-family: var(--icon-font);
  opacity: 0;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
  margin-left: 5px;
  line-height: 1;
}
.footer-widget ul li a:hover {
  color: var(--theme-color-2);
}
.footer-widget ul li a:hover:after {
  margin-left: 0;
  opacity: 1;
}

.about-widget .footer-logo {
  margin-bottom: 25px;
}
.about-widget .footer-logo img {
  max-width: 165px;
}
.about-widget .text p {
  font-weight: 400;
  font-size: 17px;
  line-height: 28px;
  color: #fff;
  margin-bottom: 15px;
}
@media (max-width: 1399px) {
  .about-widget .text p {
    font-size: 16px;
  }
}
.about-widget .info p {
  font-weight: 400;
  font-size: 17px;
  line-height: 28px;
  color: #000000;
  margin-bottom: 4px;
}
@media (max-width: 1399px) {
  .about-widget .info p {
    font-size: 16px;
  }
}
.about-widget .info p span {
  color: #000000;
}
.about-widget .social-links {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}
.about-widget .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50px;
}
.about-widget .social-links a:hover {
  color: var(--theme-color-3);
  background: var(--theme-color-2);
}

.about-us-content .text p {
    color: var(--hr-color);
}

.subscribe-form .input-wrap {
  margin-bottom: 15px;
}
.subscribe-form .input-wrap input {
  width: 100%;
  height: 66px;
  background: rgba(0, 69, 64, 0.65);
  border: 2px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(2px);
  border-radius: 53px;
  padding: 10px 24px;
  font-family: var(--albert-sans-font);
  font-weight: 600;
  font-size: 17px;
  line-height: 100%;
  color: var(--white-color);
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.subscribe-form .input-wrap input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.subscribe-form .input-wrap input:-moz-placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.subscribe-form .input-wrap input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.subscribe-form .input-wrap input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.subscribe-form .input-wrap input:focus {
  border-color: var(--theme-color-2);
}
.subscribe-form .input-wrap input:focus::-webkit-input-placeholder {
  color: transparent;
}
.subscribe-form .input-wrap input:focus:-moz-placeholder {
  color: transparent;
}
.subscribe-form .input-wrap input:focus::-moz-placeholder {
  color: transparent;
}
.subscribe-form .input-wrap input:focus:-ms-input-placeholder {
  color: transparent;
}
.subscribe-form .input-button button {
  border: 0;
}
.subscribe-form .input-checkbox {
  margin-top: 20px;
}
.subscribe-form .input-checkbox input {
  display: none;
}
.subscribe-form .input-checkbox input:checked + label .check-mark {
  background: var(--theme-color-2);
}
.subscribe-form .input-checkbox input:checked + label .check-mark:after {
  opacity: 1;
}
.subscribe-form .input-checkbox label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  font-size: 17px;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.8);
}
.subscribe-form .input-checkbox label .check-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--theme-color-2);
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  border-radius: 3px;
}
.subscribe-form .input-checkbox label .check-mark:after {
  content: "\f00c";
  font-family: var(--icon-font);
  font-size: 12px;
  font-weight: 700;
  color: var(--theme-color-3);
  opacity: 0;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.subscribe-form-2 .input-wrap {
  margin-bottom: 15px;
}
.subscribe-form-2 .input-wrap input {
  width: 100%;
  height: 66px;
  background: rgba(0, 69, 64, 0.65);
  border: 2px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(2px);
  border-radius: 53px;
  padding: 10px 24px;
  font-family: var(--albert-sans-font);
  font-weight: 600;
  font-size: 17px;
  line-height: 100%;
  color: var(--white-color);
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.subscribe-form-2 .input-wrap input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.subscribe-form-2 .input-wrap input:-moz-placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.subscribe-form-2 .input-wrap input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.subscribe-form-2 .input-wrap input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.subscribe-form-2 .input-wrap input:focus {
  border-color: var(--theme-color-2);
}
.subscribe-form-2 .input-wrap input:focus::-webkit-input-placeholder {
  color: transparent;
}
.subscribe-form-2 .input-wrap input:focus:-moz-placeholder {
  color: transparent;
}
.subscribe-form-2 .input-wrap input:focus::-moz-placeholder {
  color: transparent;
}
.subscribe-form-2 .input-wrap input:focus:-ms-input-placeholder {
  color: transparent;
}
.subscribe-form-2 .policy-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
}
.subscribe-form-2 .policy-wrap .input-button button {
  border: 0;
}
.subscribe-form-2 .policy-wrap .input-checkbox {
  margin-bottom: 0;
}
.subscribe-form-2 .policy-wrap .input-checkbox input {
  display: none;
}
.subscribe-form-2 .policy-wrap .input-checkbox input:checked + label .check-mark {
  background: var(--theme-color-2);
}
.subscribe-form-2 .policy-wrap .input-checkbox input:checked + label .check-mark:after {
  opacity: 1;
}
.subscribe-form-2 .policy-wrap .input-checkbox label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  font-size: 17px;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.8);
}
.subscribe-form-2 .policy-wrap .input-checkbox label .check-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--theme-color-2);
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  border-radius: 3px;
}
.subscribe-form-2 .policy-wrap .input-checkbox label .check-mark:after {
  content: "\f00c";
  font-family: var(--icon-font);
  font-size: 12px;
  font-weight: 700;
  color: var(--theme-color-3);
  opacity: 0;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.footer-section-2 .footer-widget .w-title {
  display: flex;
  align-items: center;
  color: #000000;
  gap: 8px;
  line-height: 0;
}
.footer-section-2 .footer-bottom {
  border-radius: 12px;
  background-color: var(--theme-color-2);
  margin: 0 50px;
  padding: 18px 0;
}
@media (max-width: 1700px) {
  .footer-section-2 .footer-bottom {
    margin: 0 20px;
  }
}
.footer-section-2 .footer-bottom .footer-bottom-layout {
  display: flex;
  justify-content: space-between;
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: 0;
}
.footer-section-2 .footer-bottom .footer-bottom-layout .footer-copyright {
  color: var(--theme-color-3);
}
.footer-section-2 .footer-bottom .footer-bottom-layout .footer-bottom-menu ul li a {
  color: var(--theme-color-3);
}
.footer-section-2 .footer-bottom .footer-bottom-layout .footer-bottom-menu ul li a:hover {
  color: var(--white-color);
}
.footer-section-2 .footer-bottom .footer-bottom-layout .footer-bottom-menu ul li:before {
  width: 0;
  margin: 0;
}
.footer-section-2 .footer-bottom .footer-bottom-layout .footer-bottom-menu ul li:last-child:before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 100%;
  display: inline-flex;
  margin: 0 20px;
  background: var(--theme-color-3);
  opacity: 0.5;
}

.get-in-touch {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.get-in-touch .footer-address, .get-in-touch .email, .get-in-touch .phone {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 0;
}
@media (max-width: 1399px) {
  .get-in-touch .footer-address, .get-in-touch .email, .get-in-touch .phone {
    gap: 8px;
  }
}
.get-in-touch .footer-address .icon, .get-in-touch .email .icon, .get-in-touch .phone .icon {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 1399px) {
  .get-in-touch .footer-address .icon, .get-in-touch .email .icon, .get-in-touch .phone .icon {
    width: 40px;
    height: 40px;
  }
}
.get-in-touch .footer-address .icon i, .get-in-touch .email .icon i, .get-in-touch .phone .icon i {
  color: var(--theme-color-2);
  font-size: 20px;
}
@media (max-width: 1399px) {
  .get-in-touch .footer-address .icon i, .get-in-touch .email .icon i, .get-in-touch .phone .icon i {
    font-size: 16px;
  }
}
.get-in-touch .text h6 {
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: var(--white-color);
  margin-bottom: 4px;
}
.get-in-touch .text p {
  font-style: normal;
  font-weight: 300;
  font-size: 17px;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.8);
}

.footer-section-3 {
  padding: 80px 70px 86px 80px;
  border-radius: 16px;
}
@media (max-width: 1399px) {
  .footer-section-3 {
    padding: 40px 20px;
  }
}

.footer-bottom-2 {
  border-radius: 0;
  background-color: transparent;
  margin: 0;
  padding: 40px 0;
}
.footer-bottom-2 .footer-bottom-layout {
  display: flex;
  justify-content: space-between;
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: 0;
}
@media (max-width: 991px) {
  .footer-bottom-2 .footer-bottom-layout {
    flex-direction: column;
  }
}
.footer-bottom-2 .footer-bottom-layout .footer-copyright {
  color: var(--theme-color-3);
}
.footer-bottom-2 .footer-bottom-layout .footer-bottom-menu ul li a {
  color: var(--theme-color-3);
}
@media (max-width: 767px) {
  .footer-bottom-2 .footer-bottom-layout .footer-bottom-menu ul li a {
    font-size: 14px;
  }
}
.footer-bottom-2 .footer-bottom-layout .footer-bottom-menu ul li a:hover {
  color: var(--theme-color-2);
}
.footer-bottom-2 .footer-bottom-layout .footer-bottom-menu ul li:before {
  width: 0;
  margin: 0;
}
.footer-bottom-2 .footer-bottom-layout .footer-bottom-menu ul li i {
  color: var(--theme-color-3);
  margin-left: 10px;
}
.footer-bottom-2 .footer-bottom-layout .footer-bottom-menu ul li:before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 100%;
  display: inline-flex;
  margin: 0 20px;
  background: var(--theme-color-3);
  opacity: 0.5;
}
@media (max-width: 767px) {
  .footer-bottom-2 .footer-bottom-layout .footer-bottom-menu ul li:before {
    margin: 0 10px;
  }
}
.footer-bottom-2 .footer-bottom-layout .footer-bottom-menu ul li:first-child:before {
  width: 0;
  margin: 0;
}

.footer-bottom-3 {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 40px 0;
}
@media (max-width: 767px) {
  .footer-bottom-3 {
    padding: 20px 0;
  }
}
.footer-bottom-3 .footer-bottom-layout-2 {
  align-items: center;
  border-radius: 100px;
  overflow: hidden;
  gap: 20px;
  display: flex;
  background: transparent;
  padding: 0;
  border: none;
  justify-content: space-between;
}
@media (min-width: 768px) and (max-width: 991px) {
  .footer-bottom-3 .footer-bottom-layout-2 {
    gap: 10px;
  }
}
@media (max-width: 767px) {
  .footer-bottom-3 .footer-bottom-layout-2 {
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: visible;
    padding: 15px 30px;
  }
}
.footer-bottom-3 .footer-bottom-layout-2 .footer-copyright {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: var(--white-color);
}
.footer-bottom-3 .footer-bottom-layout-2 .footer-bottom-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
.footer-bottom-3 .footer-bottom-layout-2 .footer-bottom-menu ul li {
  display: inline-flex;
  align-items: center;
}
.footer-bottom-3 .footer-bottom-layout-2 .footer-bottom-menu ul li:first-child:before {
  margin-left: 0;
  width: 0;
}
.footer-bottom-3 .footer-bottom-layout-2 .footer-bottom-menu ul li:before {
  content: "";
  display: inline-flex;
  margin: 0 20px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0.5;
  width: 2px;
  height: 14px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .footer-bottom-3 .footer-bottom-layout-2 .footer-bottom-menu ul li:before {
    margin: 0 10px;
  }
}
@media (max-width: 767px) {
  .footer-bottom-3 .footer-bottom-layout-2 .footer-bottom-menu ul li:before {
    margin: 0 10px;
  }
}
.footer-bottom-3 .footer-bottom-layout-2 .footer-bottom-menu ul li a {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: var(--white-color);
}
.footer-bottom-3 .footer-bottom-layout-2 .footer-bottom-menu ul li a:hover {
  color: var(--body-color);
}

.footer-section-5 {
  position: relative;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.footer-section-5::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 69, 64, 0.9) 0%, rgba(0, 51, 47, 0.95) 86.79%, rgba(0, 47, 43, 0.9) 107.82%);
}
.footer-section-5 .shape-1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
@media (max-width: 1700px) {
  .footer-section-5 .shape-1 {
    width: 80%;
  }
}
.footer-section-5 .shape-2 {
  position: absolute;
  bottom: 23%;
  right: 8%;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .footer-section-5 .shape-2 {
    right: 0;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .footer-section-5 .shape-2 {
    right: 0;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .footer-section-5 .shape-2 {
    right: 0;
    bottom: 10%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .footer-section-5 .shape-2 {
    right: 0;
    bottom: 10%;
  }
}
@media (max-width: 767px) {
  .footer-section-5 .shape-2 {
    right: 0;
    bottom: 11%;
  }
}
@media (max-width: 1700px) {
  .footer-section-5 .shape-2 img {
    width: 80%;
  }
}
.footer-section-5 .footer-widget .w-title {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 0;
}
.footer-section-5 .footer-top {
  display: flex;
  justify-content: space-between;
  padding-bottom: 60px;
  margin-bottom: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
@media (max-width: 1199px) {
  .footer-section-5 .footer-top {
    flex-direction: column;
    gap: 20px;
  }
}
@media (max-width: 767px) {
  .footer-section-5 .footer-top {
    padding-bottom: 40px;
    margin-bottom: 40px;
  }
}
.footer-section-5 .footer-top .left {
  max-width: 712px;
  width: 100%;
}
.footer-section-5 .footer-top .left .common-title {
  margin-bottom: 0;
}
.footer-section-5 .footer-top .left .common-title h2 {
  color: var(--light-color);
  margin-bottom: 0;
}
.footer-section-5 .footer-top .right {
  max-width: 460px;
  width: 100%;
}

.adjusted-width {
  width: 20%;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .adjusted-width {
    width: 33.33333333%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .adjusted-width {
    width: 41.66666667%;
  }
}
@media (max-width: 767px) {
  .adjusted-width {
    width: 100%;
  }
}

/* Fix missing dot on footer-address selector */
.get-in-touch .footer-address {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 0;
}
.get-in-touch .footer-address .icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.get-in-touch .footer-address .icon i {
    color: var(--theme-color-2);
    font-size: 20px;
}
@media (max-width: 1399px) {
    .get-in-touch .footer-address {
        gap: 8px;
    }
    .get-in-touch .footer-address .icon {
        width: 40px;
        height: 40px;
    }
    .get-in-touch .footer-address .icon i {
        font-size: 16px;
    }
}

/*====================================================================
    Template
====================================================================*/
/* 07 Topbar Css */
.top-bar {
  background: var(--theme-color-3);
  padding-top: 6px;
  padding-bottom: 6px;
}

.top-bar-content {
  color: var(--white-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
}
.top-bar-content .text-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
@media (max-width: 767px) {
  .top-bar-content .text-wrap {
    align-items: flex-start;
  }
}

.top-btn {
  padding: 7px 10px;
  border-radius: 6px;
}

.top-btn-2 {
  background: #85BF18;
  color: var(--white-color);
}

/* 08 Breadcrumb Css */
.breadcrumb-section {
  padding-left: 85px;
  padding-right: 85px;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .breadcrumb-section {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .breadcrumb-section {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .breadcrumb-section {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .breadcrumb-section {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: 767px) {
  .breadcrumb-section {
    padding-left: 0;
    padding-right: 0;
  }
}

.breadcrumb-thumb {
  overflow: hidden;
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%);
  margin-left: -15px;
  border-radius: 0 10px 10px 0;
  position: relative;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .breadcrumb-thumb {
    margin-left: -10px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .breadcrumb-thumb {
    margin-left: -10px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .breadcrumb-thumb {
    margin-left: -8px;
  }
}
.breadcrumb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.breadcrumb-thumb .video-play-btn {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--light-color);
  padding: 23px 21px;
  border-radius: 100%;
  border: 1px solid var(--light-color);
  font-weight: 500;
  font-size: 25px;
  line-height: 30px;
  background: rgba(255, 255, 255, 0.015);
  backdrop-filter: blur(28px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
  animation: animate-pulse 3s linear infinite;
}
.breadcrumb-thumb .video-play-btn:hover {
  color: var(--theme-color-3);
  background: var(--theme-color-2);
  border-color: var(--theme-color-2);
}

.breadcrumb-content {
  background-color: var(--theme-color-3);
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 180px;
  padding-right: 100px;
  position: relative;
  z-index: 1;
  border-radius: 10px 0 0 10px;
  overflow: hidden;
  margin-right: -15px;
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .breadcrumb-content {
    margin-right: -10px;
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .breadcrumb-content {
    margin-right: -10px;
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .breadcrumb-content {
    margin-right: -8px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .breadcrumb-content {
    margin-right: 0;
    padding: 60px 20px;
    clip-path: none;
    border-radius: 10px;
  }
}
@media (max-width: 767px) {
  .breadcrumb-content {
    margin-right: 0;
    padding: 60px 20px;
    clip-path: none;
    border-radius: 10px;
  }
}
.breadcrumb-content .shape-1 {
  position: absolute;
  right: 0;
  top: 0;
  pointer-events: none;
  z-index: -1;
}
.breadcrumb-content:before {
  content: "";
  height: 100%;
  width: 40px;
  background: var(--theme-color);
  position: absolute;
  right: 0;
  top: 0;
  transform: skewX(-5deg);
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .breadcrumb-content:before {
    width: 30px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .breadcrumb-content:before {
    width: 30px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .breadcrumb-content:before {
    width: 25px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .breadcrumb-content:before {
    display: none;
  }
}
@media (max-width: 767px) {
  .breadcrumb-content:before {
    display: none;
  }
}

.breadcrumb-nav ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .breadcrumb-nav ul {
    margin-bottom: 10px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .breadcrumb-nav ul {
    margin-bottom: 10px;
  }
}
@media (max-width: 767px) {
  .breadcrumb-nav ul {
    margin-bottom: 10px;
  }
}
.breadcrumb-nav ul li {
  display: inline-block;
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: #F8F7F0;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .breadcrumb-nav ul li {
    font-size: 16px;
    line-height: 1.2;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .breadcrumb-nav ul li {
    font-size: 16px;
    line-height: 1.2;
  }
}
@media (max-width: 767px) {
  .breadcrumb-nav ul li {
    font-size: 16px;
    line-height: 1.2;
  }
}
.breadcrumb-nav ul li:after {
  content: "\f178";
  font-family: var(--icon-font);
  font-weight: 400;
  margin-right: 8px;
  margin-left: 10px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .breadcrumb-nav ul li:after {
    font-size: 14px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .breadcrumb-nav ul li:after {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .breadcrumb-nav ul li:after {
    font-size: 14px;
  }
}
.breadcrumb-nav ul li:last-child:after {
  display: none;
}
.breadcrumb-nav ul li a {
  color: #F8F7F0;
}
.breadcrumb-nav ul li a:hover {
  color: var(--theme-color-2);
}

.breadcrumb-title h2 {
  font-weight: 600;
  font-size: 62px;
  line-height: 60px;
  color: #FFFFFF;
  margin-bottom: 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .breadcrumb-title h2 {
    font-size: 40px;
    line-height: 1.2;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .breadcrumb-title h2 {
    font-size: 32px;
    line-height: 1.2;
  }
}
@media (max-width: 767px) {
  .breadcrumb-title h2 {
    font-size: 32px;
    line-height: 1.2;
  }
}

/* 09 Hero Css */
.hero-side {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  z-index: 1;
  padding-top: 344px;
  padding-bottom: 244px;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .hero-side {
    padding-top: 230px;
    padding-bottom: 170px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-side {
    padding-top: 230px;
    padding-bottom: 170px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-side {
    padding-top: 260px;
    padding-bottom: 200px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-side {
    padding-top: 260px;
    padding-bottom: 160px;
  }
}
@media (max-width: 767px) {
  .hero-side {
    padding-top: 140px;
    padding-bottom: 140px;
  }
}
.hero-side .group-shape-1 {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-side .group-shape-1 img {
  width: 100%;
  height: 100%;
}
.hero-side .s-shape-1 {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  pointer-events: none;
}
@media (max-width: 767px) {
  .hero-side .s-shape-1 {
    height: 20px;
  }
}
.hero-side .s-shape-1 img {
  width: 100%;
}

.hero-content-1 .subtitle {
  padding: 9px 15px;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(2px);
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
}
/* Hero subtitle icon sizing */
.hero-content-1 .subtitle i {
    font-size: 20px;
    color: var(--theme-shade-color);
}

@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-1 .subtitle {
    margin-bottom: 12px;
  }
}
@media (max-width: 767px) {
  .hero-content-1 .subtitle {
    margin-bottom: 10px;
  }
}
.hero-content-1 .subtitle span {
  font-weight: 500;
  font-size: 16px;
  line-height: 36px;
  color: var(--light-color);
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-1 .subtitle span {
    line-height: 26px;
  }
}
@media (max-width: 767px) {
  .hero-content-1 .subtitle span {
    line-height: 20px;
  }
}
.hero-content-1 .title {
  max-width: 774px;
  width: 100%;
  margin-bottom: 16px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-content-1 .title {
    max-width: 674px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-1 .title {
    max-width: 474px;
  }
}
@media (max-width: 767px) {
  .hero-content-1 .title {
    max-width: 324px;
  }
}
.hero-content-1 .title h1 {
  font-style: normal;
  font-weight: 600;
  font-size: 80px;
  line-height: 82px;
  color: var(--light-color);
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-content-1 .title h1 {
    font-size: 74px;
    line-height: 1.1;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-content-1 .title h1 {
    font-size: 68px;
    line-height: 1.2;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-1 .title h1 {
    font-size: 52px;
    line-height: 1.1;
    margin-bottom: 14px;
  }
}
@media (max-width: 767px) {
  .hero-content-1 .title h1 {
    font-size: 36px;
    line-height: 1.1;
    margin-bottom: 14px;
  }
}
.hero-content-1 .title span {
  color: var(--theme-color-2);
}
.hero-content-1 .text {
  max-width: 550px;
  width: 100%;
  margin-bottom: 32px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-content-1 .text {
    max-width: 520px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-1 .text {
    max-width: 420px;
    margin-bottom: 24px;
  }
}
@media (max-width: 767px) {
  .hero-content-1 .text {
    max-width: 100%;
    margin-bottom: 20px;
  }
}
.hero-content-1 .text p {
  font-size: 18px;
  line-height: 30px;
  color: var(--light-color);
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-content-1 .text p {
    line-height: 1.5;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-1 .text p {
    font-size: 16px;
    line-height: 1.5;
  }
}
@media (max-width: 767px) {
  .hero-content-1 .text p {
    font-size: 16px;
    line-height: 1.3;
  }
}
.hero-content-1 .join-us {
  display: flex;
  align-items: center;
  gap: 28px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-1 .join-us {
    gap: 20px;
  }
}
@media (max-width: 767px) {
  .hero-content-1 .join-us {
    flex-direction: column;
    align-items: start;
    gap: 14px;
  }
}
.hero-content-1 .join-us .e-primary-btn {
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(248, 247, 240, 0.6);
  backdrop-filter: blur(9.2px);
  color: var(--white-color);
}
.hero-content-1 .join-us .e-primary-btn:before {
  background: var(--theme-color-2);
}
.hero-content-1 .join-us .e-primary-btn .icon-wrap {
  background: var(--theme-color-2);
  color: var(--theme-color-3);
}
.hero-content-1 .join-us .e-primary-btn:hover {
  border: 1.5px solid var(--theme-color-2);
  color: var(--theme-color-3);
}
.hero-content-1 .join-us .e-primary-btn:hover .icon-wrap {
  background: var(--theme-color-3);
  color: var(--white-color);
}
.hero-content-1 .join-us .author-wrap {
  display: flex;
  align-items: center;
  gap: 15px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-1 .join-us .author-wrap {
    gap: 10px;
  }
}
@media (max-width: 767px) {
  .hero-content-1 .join-us .author-wrap {
    gap: 10px;
  }
}
.hero-content-1 .join-us .author-wrap img {
  max-width: 118px;
  width: 100%;
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-1 .join-us .author-wrap img {
    max-width: 90px;
  }
}
@media (max-width: 767px) {
  .hero-content-1 .join-us .author-wrap img {
    max-width: 90px;
  }
}
.hero-content-1 .join-us .author-wrap .author-info h5 {
  font-weight: 600;
  font-size: 20px;
  color: var(--light-color);
  margin-bottom: 0;
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-1 .join-us .author-wrap .author-info h5 {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .hero-content-1 .join-us .author-wrap .author-info h5 {
    font-size: 18px;
  }
}
.hero-content-1 .join-us .author-wrap .author-info p {
  line-height: 22px;
  color: var(--light-color);
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-1 .join-us .author-wrap .author-info p {
    font-weight: 300;
    line-height: 1.4;
  }
}
@media (max-width: 767px) {
  .hero-content-1 .join-us .author-wrap .author-info p {
    font-weight: 300;
    line-height: 1;
  }
}

.hero-slider-active-1 {
  position: relative;
  z-index: 1;
}
.hero-slider-active-1 .hero-slider-pagination-1 {
  position: absolute;
  left: auto;
  right: 90px;
  bottom: 50px;
  z-index: 99;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8.5px);
  border-radius: 100px;
  width: auto;
  padding: 10px 16px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-slider-active-1 .hero-slider-pagination-1 {
    right: 30px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-slider-active-1 .hero-slider-pagination-1 {
    right: 30px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-slider-active-1 .hero-slider-pagination-1 {
    right: 30px;
  }
}
@media (max-width: 767px) {
  .hero-slider-active-1 .hero-slider-pagination-1 {
    left: 20px;
    right: auto;
    bottom: 20px;
  }
}
.hero-slider-active-1 .hero-slider-pagination-1 .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  background: transparent;
  border: 1px solid transparent;
  margin: 0;
  opacity: 1;
  border-radius: 100%;
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.hero-slider-active-1 .hero-slider-pagination-1 .swiper-pagination-bullet:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 100%;
  background: #868681;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: radial-gradient(92.09% 85.42% at 86.3% 87.5%, rgba(0, 0, 0, 0.23) 0%, rgba(0, 0, 0, 0) 86.18%), radial-gradient(65.28% 65.28% at 26.39% 20.83%, rgba(255, 255, 255, 0.413) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%), #FFFFFF;
}
.hero-slider-active-1 .hero-slider-pagination-1 .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: rgba(255, 255, 255, 0.47);
  border: 1px solid #F8F7F0;
  backdrop-filter: blur(4.75px);
}
.hero-slider-active-1 .hero-slider-pagination-1 .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
  background: radial-gradient(92.09% 85.42% at 86.3% 87.5%, rgba(0, 0, 0, 0.23) 0%, rgba(0, 0, 0, 0) 86.18%), radial-gradient(65.28% 65.28% at 26.39% 20.83%, rgba(255, 255, 255, 0.413) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%), #004540;
}
.hero-slider-active-1 .hero-slider-social {
  position: absolute;
  right: 90px;
  bottom: 50%;
  z-index: 99;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  transform: translateY(50%);
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-slider-active-1 .hero-slider-social {
    right: 30px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-slider-active-1 .hero-slider-social {
    right: 30px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-slider-active-1 .hero-slider-social {
    right: 30px;
  }
}
@media (max-width: 767px) {
  .hero-slider-active-1 .hero-slider-social {
    display: none;
  }
}
.hero-slider-active-1 .hero-slider-social .text {
  transform: rotate(-180deg);
  width: auto;
  font-size: 18px;
  line-height: 167%;
  color: #FFFFFF;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.hero-slider-active-1 .hero-slider-social .social-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.hero-slider-active-1 .hero-slider-social .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  color: var(--theme-color-3);
  background: rgba(255, 255, 255, 0.33);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8.5px);
}
.hero-slider-active-1 .hero-slider-social .social-links a:hover {
  background: var(--theme-color-2);
  color: var(--theme-color-3);
}

.hero-slide-2 {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  z-index: 1;
  padding-top: 508px;
  padding-bottom: 120px;
  overflow: hidden;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .hero-slide-2 {
    padding-top: 340px;
    padding-bottom: 120px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-slide-2 {
    padding-top: 340px;
    padding-bottom: 120px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-slide-2 {
    padding-top: 308px;
    padding-bottom: 100px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-slide-2 {
    padding-top: 208px;
    padding-bottom: 80px;
  }
}
@media (max-width: 767px) {
  .hero-slide-2 {
    padding-top: 140px;
    padding-bottom: 140px;
  }
}
.hero-slide-2 .s-shape-1 {
  position: absolute;
  right: 17%;
  bottom: 15%;
  z-index: -1;
  pointer-events: none;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-slide-2 .s-shape-1 {
    right: 7%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-slide-2 .s-shape-1 {
    right: 7%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-slide-2 .s-shape-1 {
    right: 7%;
  }
}
@media (max-width: 767px) {
  .hero-slide-2 .s-shape-1 {
    right: 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-slide-2 .s-shape-1 img {
    width: 70%;
  }
}
@media (max-width: 767px) {
  .hero-slide-2 .s-shape-1 img {
    width: 70%;
  }
}
.hero-slide-2 .s-shape-2 {
  position: absolute;
  left: 13%;
  top: 30%;
  z-index: -1;
  pointer-events: none;
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-slide-2 .s-shape-2 {
    left: 0;
  }
}
@media (max-width: 767px) {
  .hero-slide-2 .s-shape-2 {
    left: 0;
    top: 35%;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-slide-2 .s-shape-2 img {
    width: 60%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-slide-2 .s-shape-2 img {
    width: 60%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-slide-2 .s-shape-2 img {
    width: 60%;
  }
}
@media (max-width: 767px) {
  .hero-slide-2 .s-shape-2 img {
    width: 60%;
  }
}
.hero-slide-2 .blur-circle {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68%;
  height: 100%;
  background: rgba(0, 69, 64, 0.02);
  border-radius: 50%;
  z-index: -2;
  backdrop-filter: blur(8px);
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .hero-slide-2 .blur-circle {
    width: 76%;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-slide-2 .blur-circle {
    width: 88%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-slide-2 .blur-circle {
    width: 90%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-slide-2 .blur-circle {
    width: 90%;
    transform: translate(-50%, -55%);
  }
}
@media (max-width: 767px) {
  .hero-slide-2 .blur-circle {
    width: 0;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-2 {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}
.hero-content-2 .title {
  max-width: 1060px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-content-2 .title {
    max-width: 810px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-content-2 .title {
    max-width: 810px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-2 .title {
    max-width: 480px;
  }
}
.hero-content-2 .title h1 {
  font-style: normal;
  font-weight: 600;
  font-size: 80px;
  line-height: 82px;
  color: var(--light-color);
  margin-bottom: 30px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-content-2 .title h1 {
    font-size: 70px;
    line-height: 1.1;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-content-2 .title h1 {
    font-size: 58px;
    line-height: 1.2;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-2 .title h1 {
    font-size: 42px;
    line-height: 1.1;
    margin-bottom: 14px;
  }
}
@media (max-width: 767px) {
  .hero-content-2 .title h1 {
    font-size: 30px;
    line-height: 1.1;
    margin-bottom: 20px;
  }
}
.hero-content-2 .title span {
  color: var(--theme-color-2);
}
.hero-content-2 .join-us {
  display: flex;
  justify-content: center;
}
.hero-content-2 .join-us .e-primary-btn {
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(248, 247, 240, 0.6);
  backdrop-filter: blur(9.2px);
  color: var(--white-color);
}
.hero-content-2 .join-us .e-primary-btn:before {
  background: var(--theme-color-2);
}
.hero-content-2 .join-us .e-primary-btn .icon-wrap {
  background: var(--theme-color-2);
  color: var(--theme-color-3);
}
.hero-content-2 .join-us .e-primary-btn:hover {
  border: 1.5px solid var(--theme-color-2);
  color: var(--theme-color-3);
}
.hero-content-2 .join-us .e-primary-btn:hover .icon-wrap {
  background: var(--theme-color-3);
  color: var(--white-color);
}

.services-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .services-2 {
    flex-wrap: wrap;
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .services-2 {
    flex-direction: column;
    gap: 10px;
    align-items: center;
    width: 70%;
    margin: 0 auto 40px;
  }
}
.services-2 .service {
  display: flex;
  align-items: center;
  gap: 10px;
}
.services-2 .service i {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background: var(--theme-color-2);
  color: var(--theme-color-3);
}
@media (max-width: 767px) {
  .services-2 .service i {
    width: 20px;
    height: 20px;
    font-size: 14px;
  }
}
.services-2 .service p {
  color: var(--light-color);
}

.hero-slider-active-2 {
  position: relative;
  z-index: 1;
}
.hero-slider-active-2 .hero-slider-pagination-2 {
  position: absolute;
  left: 50px;
  bottom: 50px;
  z-index: 99;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8.5px);
  border-radius: 100px;
  width: auto;
  padding: 10px 16px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-slider-active-2 .hero-slider-pagination-2 {
    left: 20px;
    bottom: 20px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-slider-active-2 .hero-slider-pagination-2 {
    left: 20px;
    bottom: 20px;
  }
}
@media (max-width: 767px) {
  .hero-slider-active-2 .hero-slider-pagination-2 {
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
  }
}
.hero-slider-active-2 .hero-slider-pagination-2 .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  background: transparent;
  border: 1px solid transparent;
  margin: 0;
  opacity: 1;
  border-radius: 100%;
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.hero-slider-active-2 .hero-slider-pagination-2 .swiper-pagination-bullet:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 100%;
  background: #868681;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: radial-gradient(92.09% 85.42% at 86.3% 87.5%, rgba(0, 0, 0, 0.23) 0%, rgba(0, 0, 0, 0) 86.18%), radial-gradient(65.28% 65.28% at 26.39% 20.83%, rgba(255, 255, 255, 0.413) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%), #868681;
}
.hero-slider-active-2 .hero-slider-pagination-2 .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border: 1px solid #F8F7F0;
}
.hero-slider-active-2 .hero-slider-pagination-2 .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
  background: radial-gradient(92.09% 85.42% at 86.3% 87.5%, rgba(0, 0, 0, 0.23) 0%, rgba(0, 0, 0, 0) 86.18%), radial-gradient(65.28% 65.28% at 26.39% 20.83%, rgba(255, 255, 255, 0.413) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%), #FFE175;
}

.hero-slide-3 {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 219px;
  padding-bottom: 219px;
  border-radius: 20px;
  position: relative;
  z-index: 1;
  overflow-x: clip;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .hero-slide-3 {
    padding-top: 145px;
    padding-bottom: 145px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-slide-3 {
    padding-top: 116px;
    padding-bottom: 175px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-slide-3 {
    padding-top: 80px;
    padding-bottom: 175px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-slide-3 {
    padding-top: 80px;
    padding-bottom: 160px;
  }
}
@media (max-width: 767px) {
  .hero-slide-3 {
    padding-top: 60px;
    padding-bottom: 140px;
  }
}
.hero-slide-3 .banner-thumb {
  position: absolute;
  top: -12%;
  right: 0;
  z-index: -1;
  overflow: hidden;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .hero-slide-3 .banner-thumb {
    width: 1088px;
    height: 100%;
    top: 0;
    right: -4%;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-slide-3 .banner-thumb {
    width: 900px;
    height: 100%;
    top: auto;
    right: -3%;
    bottom: 0;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-slide-3 .banner-thumb {
    width: 600px;
    height: 100%;
    top: auto;
    right: -3%;
    bottom: 0;
    display: flex;
    align-items: flex-end;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-slide-3 .banner-thumb {
    display: none;
  }
}
@media (max-width: 767px) {
  .hero-slide-3 .banner-thumb {
    display: none;
  }
}
.hero-slide-3 .shape-1 {
  height: 100%;
  position: absolute;
  top: 0;
  left: 20px;
  z-index: -2;
  pointer-events: none;
}
.hero-slide-3 .shape-1 img {
  height: 100%;
}
.hero-slide-3 .shape-2 {
  position: absolute;
  top: 0;
  right: 80px;
  z-index: -2;
  pointer-events: none;
}

@media (min-width: 1400px) and (max-width: 1700px) {
  .hero-content-3 {
    width: 52%;
    margin-left: 5%;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-content-3 {
    width: 58%;
    margin-left: 2%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-content-3 {
    width: 80%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-3 {
    width: 90%;
  }
}
@media (max-width: 767px) {
  .hero-content-3 {
    width: 90%;
  }
}
.hero-content-3 .subtitle {
  padding: 0;
  background: transparent;
  gap: 10px;
  backdrop-filter: blur(2px);
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-3 .subtitle {
    margin-bottom: 12px;
  }
}
@media (max-width: 767px) {
  .hero-content-3 .subtitle {
    margin-bottom: 10px;
  }
}
.hero-content-3 .subtitle span {
  font-weight: 500;
  font-size: 16px;
  line-height: 36px;
  color: var(--light-color);
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-3 .subtitle span {
    line-height: 26px;
  }
}
@media (max-width: 767px) {
  .hero-content-3 .subtitle span {
    line-height: 20px;
  }
}
.hero-content-3 .title {
  max-width: 774px;
  width: 100%;
  margin-bottom: 16px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-content-3 .title {
    max-width: 674px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-3 .title {
    max-width: 474px;
  }
}
@media (max-width: 767px) {
  .hero-content-3 .title {
    max-width: 324px;
  }
}
.hero-content-3 .title h1 {
  font-style: normal;
  font-weight: 600;
  font-size: 80px;
  line-height: 82px;
  color: var(--light-color);
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-content-3 .title h1 {
    font-size: 74px;
    line-height: 1.1;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-content-3 .title h1 {
    font-size: 68px;
    line-height: 1.2;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-3 .title h1 {
    font-size: 52px;
    line-height: 1.1;
    margin-bottom: 14px;
  }
}
@media (max-width: 767px) {
  .hero-content-3 .title h1 {
    font-size: 30px;
    line-height: 1.1;
    margin-bottom: 14px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-3 .title img {
    width: 50px;
  }
}
@media (max-width: 767px) {
  .hero-content-3 .title img {
    width: 40px;
  }
}
.hero-content-3 .text {
  max-width: 550px;
  width: 100%;
  margin-bottom: 15px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-content-3 .text {
    max-width: 520px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-3 .text {
    max-width: 420px;
    margin-bottom: 24px;
  }
}
@media (max-width: 767px) {
  .hero-content-3 .text {
    max-width: 100%;
    margin-bottom: 20px;
  }
}
.hero-content-3 .text p {
  font-size: 18px;
  line-height: 30px;
  color: var(--light-color);
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-content-3 .text p {
    line-height: 1.5;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-3 .text p {
    font-size: 16px;
    line-height: 1.5;
  }
}
@media (max-width: 767px) {
  .hero-content-3 .text p {
    font-size: 16px;
    line-height: 1.3;
  }
}

.services-3 {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}
@media (max-width: 767px) {
  .services-3 {
    flex-direction: column;
    align-items: start;
    gap: 10px;
    margin-bottom: 30px;
  }
}
.services-3 .service {
  display: flex;
  align-items: center;
  gap: 10px;
}
.services-3 .service i {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background: var(--theme-color);
  color: var(--white-color);
}
.services-3 .service p {
  color: var(--light-color);
}

.hero-slider-active-3 {
  position: relative;
  z-index: 1;
  margin: 0 100px;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .hero-slider-active-3 {
    margin: 0 30px;
  }
}
@media (max-width: 1399px) {
  .hero-slider-active-3 {
    margin: 0 15px;
  }
}
.hero-slider-active-3 .swiper {
  overflow: visible;
  overflow-x: clip;
}
.hero-slider-active-3 .hero-slider-pagination-3 {
  position: absolute;
  left: 6%;
  top: 219px;
  z-index: 99;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 30px;
  width: auto;
  bottom: auto;
  transform: translate(0);
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .hero-slider-active-3 .hero-slider-pagination-3 {
    left: 20px;
    top: 176px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-slider-active-3 .hero-slider-pagination-3 {
    left: 20px;
    top: 116px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-slider-active-3 .hero-slider-pagination-3 {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-slider-active-3 .hero-slider-pagination-3 {
    display: none;
  }
}
@media (max-width: 767px) {
  .hero-slider-active-3 .hero-slider-pagination-3 {
    display: none;
  }
}
.hero-slider-active-3 .hero-slider-pagination-3 .swiper-pagination-bullet {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: #FFFFFF;
  opacity: 0.6;
  background: none;
  width: auto;
  height: auto;
}
.hero-slider-active-3 .hero-slider-pagination-3 .swiper-pagination-bullet.swiper-pagination-bullet-active {
  color: #fff;
  opacity: 1;
}
.hero-slider-active-3 .hero-slider-social {
  position: absolute;
  right: 50px;
  bottom: 50%;
  z-index: 99;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  transform: translateY(50%);
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-slider-active-3 .hero-slider-social {
    right: 30px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-slider-active-3 .hero-slider-social {
    right: 30px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-slider-active-3 .hero-slider-social {
    right: 30px;
  }
}
@media (max-width: 767px) {
  .hero-slider-active-3 .hero-slider-social {
    display: none;
  }
}
.hero-slider-active-3 .hero-slider-social .text {
  transform: rotate(-180deg);
  width: auto;
  font-size: 18px;
  line-height: 167%;
  color: #FFFFFF;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.hero-slider-active-3 .hero-slider-social .social-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.hero-slider-active-3 .hero-slider-social .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  color: var(--theme-color-3);
  background: rgba(255, 255, 255, 0.33);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8.5px);
}
.hero-slider-active-3 .hero-slider-social .social-links a:hover {
  background: var(--theme-color-2);
  color: var(--theme-color-3);
}
.hero-slider-active-3 .hero-slider-navigation {
  display: flex;
  align-items: center;
  gap: 10px;
  position: absolute;
  left: 50px;
  bottom: 50px;
  z-index: 99;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .hero-slider-active-3 .hero-slider-navigation {
    left: 20px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-slider-active-3 .hero-slider-navigation {
    left: 20px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-slider-active-3 .hero-slider-navigation {
    left: 20px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-slider-active-3 .hero-slider-navigation {
    left: 20px;
    bottom: 40px;
  }
}
@media (max-width: 767px) {
  .hero-slider-active-3 .hero-slider-navigation {
    left: 20px;
    bottom: 40px;
  }
}
.hero-slider-active-3 .hero-slider-navigation .hero-slider-button-prev-3,
.hero-slider-active-3 .hero-slider-navigation .hero-slider-button-next-3 {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2.35px);
  border-radius: 100px;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.hero-slider-active-3 .hero-slider-navigation .hero-slider-button-prev-3:hover,
.hero-slider-active-3 .hero-slider-navigation .hero-slider-button-next-3:hover {
  color: var(--theme-color-3);
  background: var(--theme-color-2);
  border-color: var(--theme-color-2);
}

.hero-section-4 {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;
  position: relative;
}
.hero-section-4 .thumb {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  z-index: 10;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .hero-section-4 .thumb {
    width: 48%;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-section-4 .thumb {
    width: 48%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-section-4 .thumb {
    width: 48%;
  }
}
@media (max-width: 991px) {
  .hero-section-4 .thumb {
    position: static;
  }
}
.hero-section-4 .thumb img {
  width: 100%;
  object-fit: cover;
  height: 100%;
}
.hero-section-4 .hero-slider-social {
  position: absolute;
  left: 90px;
  bottom: 50%;
  z-index: 999;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  transform: translateY(50%);
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .hero-section-4 .hero-slider-social {
    left: 30px;
  }
}
@media (min-width: 1400px) and (max-width: 1500px) {
  .hero-section-4 .hero-slider-social {
    left: 0px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-section-4 .hero-slider-social {
    left: 5px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-section-4 .hero-slider-social {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-section-4 .hero-slider-social {
    display: none;
  }
}
@media (max-width: 767px) {
  .hero-section-4 .hero-slider-social {
    display: none;
  }
}
.hero-section-4 .hero-slider-social .social-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.hero-section-4 .hero-slider-social .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  color: var(--theme-color-3);
  background: rgba(0, 69, 64, 0.1);
  border: 1.5px solid rgba(0, 69, 64, 0.05);
  backdrop-filter: blur(8.5px);
}
@media (min-width: 1400px) and (max-width: 1500px) {
  .hero-section-4 .hero-slider-social .social-links a {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-section-4 .hero-slider-social .social-links a {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
}
.hero-section-4 .hero-slider-social .social-links a:hover {
  background: var(--theme-color-2);
  color: var(--theme-color-3);
}

.hero-content-4 {
  padding: 170px 0;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .hero-content-4 {
    padding: 80px 0;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-content-4 {
    padding: 80px 0;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-content-4 {
    padding: 100px 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-4 {
    padding: 80px 0 40px;
  }
}
@media (max-width: 767px) {
  .hero-content-4 {
    padding: 60px 0 30px;
  }
}
.hero-content-4 .subtitle {
  padding: 9px 15px;
  gap: 10px;
  background: rgba(0, 69, 64, 0.06);
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  margin-bottom: 20px;
  backdrop-filter: blur(4.2px);
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-4 .subtitle {
    margin-bottom: 12px;
  }
}
@media (max-width: 767px) {
  .hero-content-4 .subtitle {
    margin-bottom: 10px;
  }
}
.hero-content-4 .subtitle span {
  font-weight: 500;
  font-size: 16px;
  line-height: 36px;
  color: var(--theme-color-3);
}
.hero-content-4 .common-title {
  margin-bottom: 30px;
}
.hero-content-4 .common-title h1 {
  font-style: normal;
  font-weight: 600;
  font-size: 74px;
  line-height: 82px;
  color: var(--theme-color-3);
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .hero-content-4 .common-title h1 {
    font-size: 70px;
    line-height: 1.1;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-content-4 .common-title h1 {
    font-size: 56px;
    line-height: 1.1;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-content-4 .common-title h1 {
    font-size: 46px;
    line-height: 1.1;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-4 .common-title h1 {
    font-size: 42px;
    line-height: 1.1;
  }
}
@media (max-width: 767px) {
  .hero-content-4 .common-title h1 {
    font-size: 38px;
    line-height: 1.1;
  }
}
.hero-content-4 .text {
  max-width: 500px;
  width: 100%;
  margin-bottom: 20px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-content-4 .text {
    max-width: 420px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-4 .text {
    max-width: 95%;
    margin-bottom: 24px;
  }
}
@media (max-width: 767px) {
  .hero-content-4 .text {
    max-width: 100%;
    margin-bottom: 20px;
  }
}
.hero-content-4 .text p {
  font-size: 18px;
  line-height: 30px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-content-4 .text p {
    font-size: 16px;
    line-height: 1.5;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-4 .text p {
    font-size: 16px;
    line-height: 1.5;
  }
}
@media (max-width: 767px) {
  .hero-content-4 .text p {
    font-size: 16px;
    line-height: 1.3;
  }
}

.hero-rating-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (max-width: 767px) {
  .hero-rating-wrap {
    flex-direction: column;
    align-items: start;
    gap: 14px;
  }
}
.hero-rating-wrap .annual-donation {
  display: flex;
  align-items: center;
  gap: 15px;
}
.hero-rating-wrap .annual-donation p {
  margin-bottom: 5px;
}
.hero-rating-wrap .annual-donation h5 {
  margin-bottom: 0;
}
.hero-rating-wrap .annual-donation img {
  padding: 17px 15px;
  border-radius: 100%;
  border: 2px solid rgba(0, 69, 64, 0.1);
}

.hero-section-5 {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  z-index: 1;
  padding-top: 300px;
  padding-bottom: 210px;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .hero-section-5 {
    padding-top: 280px;
    padding-bottom: 160px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-section-5 {
    padding-top: 280px;
    padding-bottom: 160px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-section-5 {
    padding-top: 250px;
    padding-bottom: 150px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-section-5 {
    padding-top: 240px;
    padding-bottom: 120px;
  }
}
@media (max-width: 767px) {
  .hero-section-5 {
    padding-top: 200px;
    padding-bottom: 120px;
  }
}
.hero-section-5::before {
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 51, 47, 0.1) 0%, #00332f 107.37%);
  position: absolute;
  bottom: 0;
  left: 0;
}
.hero-section-5 .shape {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.hero-section-5 .shape img {
  height: 100%;
  width: 100%;
}

.hero-content-5 {
  max-width: 940px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  position: relative;
}
.hero-content-5 .title {
  margin-bottom: 12px;
}
.hero-content-5 .title h1 {
  font-family: "Philosopher";
  text-align: center;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 700;
  font-size: 100px;
  line-height: 90%;
  color: var(--white-color);
  margin-bottom: 0;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .hero-content-5 .title h1 {
    font-size: 80px;
    line-height: 1.1;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-content-5 .title h1 {
    width: 70%;
    margin: 0 auto;
    font-size: 60px;
    line-height: 1.1;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-content-5 .title h1 {
    font-size: 54px;
    margin: 0 auto;
    line-height: 1.1;
    width: 60%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-5 .title h1 {
    width: 70%;
    margin: 0 auto;
    font-size: 48px;
    line-height: 1.1;
  }
}
@media (max-width: 767px) {
  .hero-content-5 .title h1 {
    width: 100%;
    margin: 0 auto;
    font-size: 36px;
    line-height: 1.1;
  }
}
.hero-content-5 .text {
  max-width: 480px;
  width: 100%;
  margin-bottom: 36px;
  text-align: center;
  color: #f8f7f0;
}
.hero-content-5 .icon-1 {
  position: absolute;
  left: -16%;
  bottom: 16%;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .hero-content-5 .icon-1 {
    left: -4%;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-content-5 .icon-1 {
    left: 10%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-content-5 .icon-1 {
    left: 15%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-5 .icon-1 {
    left: 7%;
  }
}
@media (max-width: 767px) {
  .hero-content-5 .icon-1 {
    left: 6%;
    bottom: 88%;
  }
}
@media (max-width: 1399px) {
  .hero-content-5 .icon-1 img {
    width: 80%;
  }
}
@media (max-width: 991px) {
  .hero-content-5 .icon-1 img {
    width: 60%;
  }
}
.hero-content-5 .icon-2 {
  position: absolute;
  right: -25%;
  bottom: 8%;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .hero-content-5 .icon-2 {
    right: -10%;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-content-5 .icon-2 {
    right: 2%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-content-5 .icon-2 {
    right: 7%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-content-5 .icon-2 {
    right: 0;
  }
}
@media (max-width: 767px) {
  .hero-content-5 .icon-2 {
    right: -2%;
    bottom: -20%;
  }
}
@media (max-width: 1399px) {
  .hero-content-5 .icon-2 img {
    width: 80%;
  }
}
@media (max-width: 991px) {
  .hero-content-5 .icon-2 img {
    width: 60%;
  }
}

/* ============================================
   OPERATIONS SECTION OVERRIDES
   ============================================ */

/* Lead text under heading */
.operations-lead {
    color: var(--title-color);
    font-size: 16px;
    margin-top: 12px;
    margin-bottom: 0;
}
.operations-lead strong {
    color: var(--theme-color-3);
}


/* ── Callout Stat Bar ── */
.operations-stat-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    background: rgba(35, 31, 32, 0.7);
    border: 1px solid rgba(153, 239, 104, 0.2);
    border-radius: 12px;
    padding: 24px 40px;
    backdrop-filter: blur(10px);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 40px;
}

.stat-item i {
    font-size: 32px;
    color: var(--theme-shade-color);
    flex-shrink: 0;
}

.stat-item div {
    display: flex;
    flex-direction: column;
}

.stat-item strong {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

.stat-item span {
    font-size: 13px;
    color: var(--body-color);
    line-height: 1.4;
}

.stat-divider {
    width: 1px;
    height: 50px;
    background: rgba(153, 239, 104, 0.2);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .operations-stat-bar {
        padding: 20px;
        gap: 20px;
    }
    .stat-item {
        padding: 0 15px;
    }
    .stat-divider {
        display: none;
    }
}

/* ── Interactive Map ── */
.operations-map-wrap {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(153, 239, 104, 0.2);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

#barberry-map {
    height: 480px;
    width: 100%;
    border-radius: 16px 16px 0 0;
}

.map-caption {
    background: rgba(35, 31, 32, 0.9);
    color: var(--body-color);
    font-size: 13px;
    padding: 12px 20px;
    margin: 0;
    border-top: 1px solid rgba(153, 239, 104, 0.15);
    border-radius: 0 0 16px 16px;
}

.map-caption i {
    color: var(--theme-shade-color);
    margin-right: 6px;
}

@media (max-width: 768px) {
    #barberry-map { height: 320px; }
}

/* ── Custom Leaflet Pin ── */
.barberry-map-pin {
    background: transparent !important;
    border: none !important;
}

.pin-outer {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(153, 239, 104, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #99EF68;
    animation: pin-pulse 2s infinite;
}

.pin-inner {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #007749;
}

@keyframes pin-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(153, 239, 104, 0.5); }
    70%  { box-shadow: 0 0 0 10px rgba(153, 239, 104, 0); }
    100% { box-shadow: 0 0 0 0 rgba(153, 239, 104, 0); }
}

/* ── Leaflet Popup ── */
.barberry-popup {
    min-width: 200px;
    font-family: var(--outfit-font);
}

.popup-type {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--theme-color-3);
    margin-bottom: 6px;
}

.barberry-popup h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--title-color);
    margin: 0 0 6px;
}

.barberry-popup p {
    font-size: 13px;
    color: var(--body-color);
    margin: 0 0 12px;
}

.popup-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--theme-color-3);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s;
}

.popup-btn:hover {
    background: var(--theme-shade-color);
    color: var(--title-color) !important;
}

.popup-btn i {
    font-size: 14px;
}

/* ── Siding Card Footer ── */
.siding-footer {
    padding: 15px 20px 20px;
    border-top: 1px solid rgba(0,0,0,0.08);
    margin-top: 10px;
}


.our-camping-section-3 {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}
.our-camping-section-3 .shape {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
@media (max-width: 1700px) {
  .our-camping-section-3 .shape img {
    width: 80%;
  }
}
.our-camping-section-3 .icon-1 {
  position: absolute;
  top: 18%;
  right: 6%;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .our-camping-section-3 .icon-1 {
    top: 10%;
    right: 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .our-camping-section-3 .icon-1 {
    top: 10%;
    right: 0;
  }
}
@media (max-width: 767px) {
  .our-camping-section-3 .icon-1 {
    top: 8%;
    right: 0;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .our-camping-section-3 .icon-1 img {
    width: 70%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .our-camping-section-3 .icon-1 img {
    width: 70%;
  }
}
@media (max-width: 767px) {
  .our-camping-section-3 .icon-1 img {
    width: 60%;
  }
}


.camping-card-2 {
  background-color: #f8f7f0;
  border-radius: 10px;
  padding: 10px;
}
.camping-card-2.widget-style {
  padding: 0;
  background: none !important;
  box-shadow: none !important;
}
.camping-card-2.widget-style .content .donation-wrap {
  padding-bottom: 0;
}
.camping-card-2.active, .camping-card-2:hover {
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
  background-color: var(--white-color);
  box-shadow: 0 35px 41.5px -16px rgba(0, 69, 64, 0.08);
}
.camping-card-2.active .thumb a img, .camping-card-2:hover .thumb a img {
  transform: scale(1.1);
}
.camping-card-2.active .content .donation-wrap .d-bottom .d-btn, .camping-card-2:hover .content .donation-wrap .d-bottom .d-btn {
  color: var(--theme-color-2);
}
.camping-card-2.active .content .donation-wrap .d-bottom .d-btn:before, .camping-card-2:hover .content .donation-wrap .d-bottom .d-btn:before {
  background: var(--theme-color-3);
  left: -10%;
  transform: translateX(0%) translateY(-50%);
}
.camping-card-2.active .content .donation-wrap .d-bottom .d-btn .icon-wrap, .camping-card-2:hover .content .donation-wrap .d-bottom .d-btn .icon-wrap {
  background: var(--theme-color-2);
  color: var(--theme-color-3);
}
.camping-card-2 .thumb {
  position: relative;
  overflow: hidden;
}
.camping-card-2 .thumb > a {
  display: block;
  border-radius: 10px;
  overflow: hidden;
}
.camping-card-2 .thumb img {
  width: 100%;
  border-radius: 10px;
}
.camping-card-2 .thumb .date {
  position: absolute;
  top: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 17px;
  line-height: 28px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.01);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0px 4px 11px rgba(255, 255, 255, 0.4), inset -1px -4px 23.1px rgba(0, 24, 25, 0.28);
  backdrop-filter: blur(23.9px);
  border-radius: 53px;
  color: var(--white-color);
}
.camping-card-2 .thumb .date:hover {
  background: var(--white-color);
  color: var(--theme-color-3);
}
.camping-card-2 .thumb .date span {
  line-height: 0;
}
@media (max-width: 767px) {
  .camping-card-2 .thumb .date span {
    font-size: 16px;
  }
}
.camping-card-2 .content .title {
  margin-bottom: 15px;
}
.camping-card-2 .content .title h3 {
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: var(--theme-color-3);
  margin-bottom: 5px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .camping-card-2 .content .title h3 {
    font-size: 22px;
    line-height: 1.5;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .camping-card-2 .content .title h3 {
    font-size: 21px;
    line-height: 1.5;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .camping-card-2 .content .title h3 {
    font-size: 20px;
    line-height: 1.5;
  }
}
@media (max-width: 767px) {
  .camping-card-2 .content .title h3 {
    line-height: 1.4;
    font-size: 20px;
  }
}
.camping-card-2 .content .title h3 a {
  color: var(--theme-color-3);
}
.camping-card-2 .content .text p {
  font-size: 17px;
  line-height: 28px;
}
.camping-card-2 .content .donation-wrap {
  padding: 16px 20px 25px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.camping-card-2 .content .donation-wrap .d-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
}
.camping-card-2 .content .donation-wrap .d-top p {
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: var(--theme-color-3);
  margin-bottom: 0;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.camping-card-2 .content .donation-wrap .progress {
  background: rgba(0, 69, 64, 0.1);
  height: 8px;
  border-radius: 100px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.camping-card-2 .content .donation-wrap .progress .progress-bar {
  background: var(--theme-color-3);
  border-radius: 100px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.camping-card-2 .content .donation-wrap .fund {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 24px;
  gap: 20px;
}
.camping-card-2 .content .donation-wrap .fund p {
  font-weight: 400;
  font-size: 15px;
  line-height: 100%;
  color: #868681;
  margin-bottom: 0;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.camping-card-2 .content .donation-wrap .fund p span {
  color: var(--theme-color-3);
  font-weight: 600;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.camping-card-2 .content .donation-wrap .d-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.camping-card-2 .content .donation-wrap .d-bottom .d-btn {
  color: var(--theme-color-3);
  background: var(--theme-color-2);
}
.camping-card-2 .content .donation-wrap .d-bottom .d-btn:before {
  background: var(--theme-color-3);
}
.camping-card-2 .content .donation-wrap .d-bottom .d-btn .icon-wrap {
  background: var(--theme-color-3);
  color: var(--light-color);
}

.recent-course-slider-active {
  margin-left: -30px;
  margin-right: -30px;
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .recent-course-slider-active {
    margin-left: -10px;
    margin-right: -10px;
  }
}
.recent-course-slider-active .recent-course-pagination {
  position: absolute;
  right: 24px;
  left: auto;
  top: -70px;
  bottom: auto;
  z-index: 99;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 100px;
  width: auto;
  padding: 0;
}
@media (max-width: 767px) {
  .recent-course-slider-active .recent-course-pagination {
    right: 10px;
  }
}
.recent-course-slider-active .recent-course-pagination .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  background: transparent;
  border: 1px solid transparent;
  margin: 0;
  opacity: 1;
  border-radius: 100%;
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.recent-course-slider-active .recent-course-pagination .swiper-pagination-bullet:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 100%;
  background: #868681;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.recent-course-slider-active .recent-course-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border: 1px solid var(--theme-color-3);
}
.recent-course-slider-active .recent-course-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
  background: radial-gradient(92.09% 85.42% at 86.3% 87.5%, rgba(0, 0, 0, 0.23) 0%, rgba(0, 0, 0, 0) 86.18%), radial-gradient(65.28% 65.28% at 26.39% 20.83%, rgba(255, 255, 255, 0.413) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%), #004540;
}

.camping-slider-active-3 {
  position: relative;
  z-index: 1;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .camping-slider-active-3 {
    padding-bottom: 80px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .camping-slider-active-3 {
    padding-bottom: 80px;
  }
}
@media (max-width: 767px) {
  .camping-slider-active-3 {
    padding-bottom: 80px;
  }
}
.camping-slider-active-3 .camping-button-prev-3 {
  position: absolute;
  left: -82px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: #FFFFFF;
  color: #868681;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .camping-slider-active-3 .camping-button-prev-3 {
    left: -25px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .camping-slider-active-3 .camping-button-prev-3 {
    left: -25px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .camping-slider-active-3 .camping-button-prev-3 {
    left: -25px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .camping-slider-active-3 .camping-button-prev-3 {
    left: 0;
    top: auto;
    bottom: 0;
    margin-top: 0;
    transform: translateY(0);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .camping-slider-active-3 .camping-button-prev-3 {
    left: 0;
    top: auto;
    bottom: 0;
    margin-top: 0;
    transform: translateY(0);
  }
}
@media (max-width: 767px) {
  .camping-slider-active-3 .camping-button-prev-3 {
    left: 0;
    top: auto;
    bottom: 0;
    margin-top: 0;
    transform: translateY(0);
  }
}
.camping-slider-active-3 .camping-button-prev-3:hover {
  background: var(--theme-color-2);
  color: var(--theme-color-3);
}
.camping-slider-active-3 .camping-button-next-3 {
  position: absolute;
  right: -82px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: #FFFFFF;
  color: #868681;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .camping-slider-active-3 .camping-button-next-3 {
    right: -25px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .camping-slider-active-3 .camping-button-next-3 {
    right: -25px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .camping-slider-active-3 .camping-button-next-3 {
    right: 0;
    top: auto;
    bottom: 0;
    margin-top: 0;
    transform: translateY(0);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .camping-slider-active-3 .camping-button-next-3 {
    right: 0;
    top: auto;
    bottom: 0;
    margin-top: 0;
    transform: translateY(0);
  }
}
@media (max-width: 767px) {
  .camping-slider-active-3 .camping-button-next-3 {
    right: 0;
    top: auto;
    bottom: 0;
    margin-top: 0;
    transform: translateY(0);
  }
}
.camping-slider-active-3 .camping-button-next-3:hover {
  background: var(--theme-color-2);
  color: var(--theme-color-3);
}

.section-top-7 {
  text-align: center;
}
.section-top-7 .common-subtitle span {
  color: var(--theme-color-2);
}
.section-top-7 .common-title h2 {
  color: var(--white-color);
}


.camping-slider-active-2 {
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .camping-slider-active-2 {
    padding-bottom: 80px;
  }
}
.camping-slider-active-2 .camping-button-prev-2 {
  position: absolute;
  left: -82px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: #F8F7F0;
  color: #868681;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .camping-slider-active-2 .camping-button-prev-2 {
    left: -25px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .camping-slider-active-2 .camping-button-prev-2 {
    left: -25px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .camping-slider-active-2 .camping-button-prev-2 {
    left: -25px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .camping-slider-active-2 .camping-button-prev-2 {
    left: -25px;
  }
}
@media (max-width: 767px) {
  .camping-slider-active-2 .camping-button-prev-2 {
    left: 0;
    top: auto;
    bottom: 0;
    margin-top: 0;
    transform: translateY(0);
  }
}
.camping-slider-active-2 .camping-button-prev-2:hover {
  background: var(--theme-color-3);
  color: var(--theme-color-2);
}
.camping-slider-active-2 .camping-button-next-2 {
  position: absolute;
  right: -82px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: #F8F7F0;
  color: #868681;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .camping-slider-active-2 .camping-button-next-2 {
    right: -25px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .camping-slider-active-2 .camping-button-next-2 {
    right: -25px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .camping-slider-active-2 .camping-button-next-2 {
    right: -25px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .camping-slider-active-2 .camping-button-next-2 {
    right: -25px;
  }
}
@media (max-width: 767px) {
  .camping-slider-active-2 .camping-button-next-2 {
    right: 0;
    top: auto;
    bottom: 0;
    margin-top: 0;
    transform: translateY(0);
  }
}
.camping-slider-active-2 .camping-button-next-2:hover {
  background: var(--theme-color-3);
  color: var(--theme-color-2);
}
.camping-slider-active-2 .camping-pagination-wrap-2 {
  display: flex;
  justify-content: center;
}
.camping-slider-active-2 .camping-pagination-wrap-2 .camping-pagination {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #FFFFFF;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8.5px);
  border-radius: 100px;
  width: auto;
  padding: 10px 16px;
  margin-top: 50px;
}
.camping-slider-active-2 .camping-pagination-wrap-2 .camping-pagination .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  background: none;
  border: 1px solid transparent;
  backdrop-filter: blur(4.75px);
  margin: 0;
  opacity: 1;
  border-radius: 100%;
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.camping-slider-active-2 .camping-pagination-wrap-2 .camping-pagination .swiper-pagination-bullet:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 100%;
  background: #868681;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.camping-slider-active-2 .camping-pagination-wrap-2 .camping-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border-color: var(--theme-color-3);
}
.camping-slider-active-2 .camping-pagination-wrap-2 .camping-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
  background: radial-gradient(92.09% 85.42% at 86.3% 87.5%, rgba(0, 0, 0, 0.23) 0%, rgba(0, 0, 0, 0) 86.18%), radial-gradient(65.28% 65.28% at 26.39% 20.83%, rgba(255, 255, 255, 0.413) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%), #004540;
}
.camping-slider-active-2 .swiper {
  overflow: visible;
  overflow-x: clip;
}

.swiper-slide-active .camping-card-2 {
  background-color: var(--white-color);
  box-shadow: 0 35px 41.5px -16px rgba(0, 69, 64, 0.08);
}
.swiper-slide-active .camping-card-2 .thumb a img {
  transform: scale(1.1);
}
.swiper-slide-active .camping-card-2 .content .donation-wrap .d-bottom .d-btn {
  color: var(--theme-color-2);
}
.swiper-slide-active .camping-card-2 .content .donation-wrap .d-bottom .d-btn:before {
  background: var(--theme-color-3);
  left: -10%;
  transform: translateX(0%) translateY(-50%);
}
.swiper-slide-active .camping-card-2 .content .donation-wrap .d-bottom .d-btn .icon-wrap {
  background: var(--theme-color-2);
  color: var(--theme-color-3);
}

/* 11 Camping Css */
.contact-info-section {
  position: relative;
  z-index: 1;
}

.contact-info-layout {
  background: var(--theme-color-2);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: -45px;
  margin-top: 20px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .contact-info-layout {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .contact-info-layout {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
@media (max-width: 991px) {
  .contact-info-layout {
    grid-template-columns: 1fr;
    overflow: hidden;
  }
}

.contact-info {
  padding: 30px;
  border-radius: 12px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.contact-info .icon-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.contact-info .icon-wrap .icon-shape {
  flex: 1;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 69, 64, 0) 0%, var(--theme-color-3) 100%);
}
.contact-info .icon-wrap .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: var(--theme-color-3);
  background: rgba(0, 69, 64, 0.1);
  flex: none;
}
.contact-info h3 {
  font-family: var(--outfit-font);
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: var(--theme-color-3);
  margin-bottom: 10px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .contact-info h3 {
    font-size: 20px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .contact-info h3 {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .contact-info h3 {
    font-size: 18px;
  }
}
.contact-info p {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: var(--theme-color-3);
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
@media (min-width: 768px) and (max-width: 991px) {
  .contact-info p {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .contact-info p {
    font-size: 16px;
  }
}
.contact-info.active {
  background: var(--theme-color-3);
  transform: translateY(-20px);
  box-shadow: 0px 33px 50.3px -27px rgba(0, 69, 64, 0.3);
}
@media (min-width: 768px) and (max-width: 991px) {
  .contact-info.active {
    transform: translateY(0);
  }
}
@media (max-width: 767px) {
  .contact-info.active {
    transform: translateY(0);
  }
}
.contact-info.active .icon-wrap .icon-shape {
  background: linear-gradient(90deg, rgba(0, 69, 64, 0) 0%, var(--theme-color-2) 100%);
}
.contact-info.active .icon-wrap .icon {
  color: var(--theme-color-2);
  background: rgba(255, 225, 117, 0.1);
}
.contact-info.active h3 {
  color: var(--white-color);
}
.contact-info.active p {
  color: var(--white-color);
}

.contact-form-wrap {
  background: #f8f7f0;
  border-radius: 24px;
  padding: 40px 50px 50px;
  text-align: center;
}
.contact-form-wrap h3 {
  font-weight: 600;
  font-size: 48px;
  line-height: 60px;
  color: #010a15;
  margin-bottom: 7px;
}
.contact-form-wrap p {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: #868681;
  margin-bottom: 32px;
}
.contact-form-wrap .input-wrap input {
  background: #ffffff;
}
.contact-form-wrap .input-wrap input:focus {
  background: #ffffff;
}
.contact-form-wrap .input-wrap textarea {
  background: #ffffff;
}
.contact-form-wrap .input-wrap textarea:focus {
  background: #ffffff;
}
.contact-form-wrap .select-wrap select {
  background: #ffffff;
}
.contact-form-wrap .select-wrap select:focus {
  background: #ffffff;
}

.contact-section {
  position: relative;
  z-index: 1;
}

.contact-map {
  width: 100%;
  height: 650px;
}
.contact-map iframe {
  width: 100%;
  height: 100%;
}

.map-section {
  margin-bottom: -165px;
}

/* 12 Blog Css */
.latest-blog-section {
  position: relative;
  background-color: #f8f7f0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow-x: clip;
}
.latest-blog-section .blog-btn .e-primary-btn {
  background: var(--theme-color-3);
  border: none;
  color: var(--theme-color-2);
}
.latest-blog-section .blog-btn .e-primary-btn:before {
  background: var(--theme-color-2);
}
.latest-blog-section .blog-btn .e-primary-btn .icon-wrap {
  background: var(--theme-color-2);
  color: var(--theme-color-3);
}
.latest-blog-section .blog-btn .e-primary-btn:hover {
  color: var(--theme-color-3);
}
.latest-blog-section .blog-btn .e-primary-btn:hover .icon-wrap {
  background: var(--theme-color-3);
  color: var(--theme-color-2);
}
.latest-blog-section .shape {
  position: absolute;
  bottom: -2%;
  width: 100%;
  height: 63px;
}
@media (max-width: 1199px) {
  .latest-blog-section .shape {
    height: 30px;
    bottom: -1%;
  }
}
.latest-blog-section .shape img {
  width: 100%;
  height: 100%;
}

.latest-blog-row-bottom {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(37.93deg, rgba(255, 225, 117, 0) 40.36%, rgba(255, 225, 117, 0.2) 97.89%), rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(7.75px);
  border-radius: 14px;
  padding: 0 50px;
  height: 350px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .latest-blog-row-bottom {
    height: 320px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .latest-blog-row-bottom {
    height: 300px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .latest-blog-row-bottom {
    height: 280px;
  }
}
@media (max-width: 767px) {
  .latest-blog-row-bottom {
    height: 280px;
    padding: 0 20px;
  }
}
.latest-blog-row-bottom .common-title {
  gap: 20px;
  margin-bottom: 10px;
}
.latest-blog-row-bottom .common-title span img {
  width: 42px;
  height: 42px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .latest-blog-row-bottom .common-title span img {
    width: 28px;
    height: 28px;
  }
}
@media (max-width: 767px) {
  .latest-blog-row-bottom .common-title span img {
    width: 20px;
    height: 20px;
    margin: 0 2px;
  }
}
.latest-blog-row-bottom .common-title i {
  font-size: 32px;
  font-weight: 300;
}
@media (min-width: 768px) and (max-width: 991px) {
  .latest-blog-row-bottom .common-title i {
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  .latest-blog-row-bottom .common-title i {
    font-size: 18px;
  }
}
.latest-blog-row-bottom .row-bottom-thumb {
  max-width: 480px;
  width: 100%;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .latest-blog-row-bottom .row-bottom-thumb {
    width: 40%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .latest-blog-row-bottom .row-bottom-thumb {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .latest-blog-row-bottom .row-bottom-thumb {
    display: none;
  }
}
@media (max-width: 767px) {
  .latest-blog-row-bottom .row-bottom-thumb {
    display: none;
  }
}
.latest-blog-row-bottom .row-bottom-thumb .thumb {
  width: 100%;
}

.form-1 {
  margin-left: 50px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .form-1 {
    margin-left: 30px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .form-1 {
    margin-left: 20px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .form-1 {
    margin-left: 20px;
  }
}
@media (max-width: 767px) {
  .form-1 {
    margin-left: 0;
  }
}
.form-1 input {
  width: 100%;
  background: var(--theme-color-3);
  border: 1px solid var(--theme-color-2);
  border-radius: 100px;
  padding: 5px 24px;
  color: var(--white-color);
  line-height: 1;
  font-size: 17px;
  height: 60px;
  font-family: var(--albert-sans-font);
  box-shadow: inset 0px 4px 11px rgba(255, 255, 255, 0.2), inset -1px -4px 23.1px rgba(0, 24, 25, 0.28);
}
.form-1 input::-webkit-input-placeholder {
  color: var(--light-color);
  opacity: 0.8;
}
.form-1 input:-moz-placeholder {
  color: var(--light-color);
  opacity: 0.8;
}
.form-1 input::-moz-placeholder {
  color: var(--light-color);
  opacity: 0.8;
}
.form-1 input:-ms-input-placeholder {
  color: var(--light-color);
  opacity: 0.8;
}
.form-1 input:focus {
  border-color: var(--theme-color-3);
}
.form-1 input:focus::-webkit-input-placeholder {
  color: transparent;
}
.form-1 input:focus:-moz-placeholder {
  color: transparent;
}
.form-1 input:focus::-moz-placeholder {
  color: transparent;
}
.form-1 input:focus:-ms-input-placeholder {
  color: transparent;
}
.form-1 button {
  border: none;
}

@media (max-width: 767px) {
  .latest-blog-content {
    margin-bottom: 40px;
  }
}
.latest-blog-content .text {
  margin-bottom: 30px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .latest-blog-content .text {
    margin-bottom: 20px;
  }
}
@media (max-width: 767px) {
  .latest-blog-content .text {
    margin-bottom: 20px;
  }
}

.blog-card {
  background-color: var(--white-color);
  border-radius: 10px;
  box-shadow: 0 4px 56.5px rgba(0, 0, 0, 0.06);
  z-index: 1;
  overflow: hidden;
}
.blog-card:hover .thumb a img {
  transform: scale(1.1);
}
.blog-card:hover .content .content-bottom .e-primary-btn:hover {
  border: 2px solid var(--theme-color-2);
}
.blog-card .thumb {
  position: relative;
}
.blog-card .thumb > a {
  display: block;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
.blog-card .thumb img {
  border-radius: 10px 10px 0 0;
}
.blog-card .thumb .category {
  position: absolute;
  top: 20px;
  left: 20px;
}
.blog-card .thumb .category a {
  display: inline-block;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.01);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 4px 11px rgba(255, 255, 255, 0.4), inset -1px -4px 23.1px rgba(0, 24, 25, 0.28);
  backdrop-filter: blur(23.9px);
  border-radius: 53px;
  color: var(--white-color);
}
.blog-card .thumb .category a:hover {
  color: var(--theme-color-3);
  background: var(--white-color);
}
.blog-card .event-date {
  display: inline-block;
  align-items: center;
  justify-content: center;
  width: 89px;
  position: absolute;
  right: 20px;
  bottom: -25px;
  z-index: 2;
  text-align: center;
  padding: 5px;
  border-radius: 4px;
  background-color: var(--theme-color-3);
}
.blog-card .event-date h2 {
  color: var(--theme-color-2);
  font-weight: 500;
  font-size: 36px;
  line-height: 48px;
  margin-bottom: 0;
}
@media (min-width: 768px) and (max-width: 991px) {
  .blog-card .event-date h2 {
    font-size: 30px;
    line-height: 1.2;
  }
}
@media (max-width: 767px) {
  .blog-card .event-date h2 {
    line-height: 1.2;
    font-size: 30px;
  }
}
.blog-card .event-date h5 {
  color: var(--light-color);
  line-height: 22px;
  margin-bottom: 4px;
  font-weight: 400;
}
.blog-card .event-date span {
  color: var(--theme-color-3);
  border-radius: 4px;
  background-color: var(--theme-color-2);
  padding: 4px 16px 4px 16px;
  font-weight: 600;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0.36em;
}
.blog-card .content {
  padding: 25px;
}
.blog-card .content .title h3 {
  font-weight: 600;
  font-size: 23px;
  line-height: 36px;
  color: var(--theme-color-3);
  margin-bottom: 5px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .blog-card .content .title h3 {
    font-size: 18px;
    line-height: 1.4;
  }
}
@media (max-width: 767px) {
  .blog-card .content .title h3 {
    font-size: 18px;
    line-height: 1.4;
  }
}
.blog-card .content .title h3 a {
  color: var(--theme-color-3);
}
.blog-card .content .content-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 768px) and (max-width: 991px) {
  .blog-card .content .content-bottom {
    flex-direction: column;
    align-items: start;
    gap: 10px;
  }
}
@media (max-width: 767px) {
  .blog-card .content .content-bottom {
    flex-direction: column;
    align-items: start;
    gap: 10px;
  }
}
.blog-card .content .content-bottom .e-primary-btn {
  color: var(--theme-color-3);
  background-color: transparent;
  border: 2px solid rgba(0, 69, 64, 0.1);
}
.blog-card .content .content-bottom .e-primary-btn:before {
  background-color: var(--theme-color-2);
}
.blog-card .content .content-bottom .e-primary-btn .icon-wrap {
  background-color: var(--theme-color-3);
  color: var(--theme-color-2);
}
.blog-card .content .social-share {
  display: flex;
  align-items: center;
  position: relative;
}
.blog-card .content .social-share.active .social-links {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}
.blog-card .content .social-share.active .total-shared {
  visibility: hidden;
  opacity: 0;
}
.blog-card .content .social-share .total-shared {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1.5px solid rgba(0, 24, 25, 0.1);
  border-radius: 10px;
  padding: 10px;
  background: none;
  color: var(--theme-color-3);
  font-family: var(--albert-sans-font);
  font-weight: 600;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.01em;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.blog-card .content .social-share .social-links {
  display: flex;
  align-items: center;
  gap: 5px;
  position: absolute;
  right: 0;
  transform: translateX(100%);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.blog-card .content .social-share .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50px;
  background: rgba(0, 69, 64, 0.1);
  color: var(--body-color);
}
.blog-card .content .social-share .social-links a:hover {
  color: var(--theme-color-2);
  background: var(--theme-color-3);
}

.blog-card-2 {
  background-color: #f8f7f0;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 4px 56.5px rgba(0, 0, 0, 0.06);
  z-index: 1;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.blog-card-2:hover {
  background-color: var(--white-color);
  box-shadow: 0 35px 41.5px -16px rgba(0, 69, 64, 0.08);
}
.blog-card-2:hover .thumb a img {
  transform: scale(1.1);
}
.blog-card-2:hover .content .content-bottom .read-more-btn {
  border: 2px solid var(--theme-color-2);
}
.blog-card-2:hover .content .content-bottom .read-more-btn::before {
  background-color: var(--theme-color-2);
  left: -10%;
  transform: translateX(0%) translateY(-50%);
}
.blog-card-2 .thumb {
  position: relative;
}
.blog-card-2 .thumb > a {
  display: block;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
.blog-card-2 .thumb > a img {
  width: 100%;
  border-radius: 10px 10px 0 0;
}
.blog-card-2 .thumb .event-date {
  display: inline-block;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 80px;
  padding: 4px 18px;
  bottom: 10px;
  right: 10px;
  z-index: 2;
  text-align: center;
  border-radius: 4px;
  background-color: var(--theme-color-3);
}
.blog-card-2 .thumb .event-date h2 {
  color: var(--theme-color-2);
  font-weight: 500;
  font-size: 36px;
  line-height: 48px;
  margin-bottom: 0;
}
@media (min-width: 768px) and (max-width: 991px) {
  .blog-card-2 .thumb .event-date h2 {
    font-size: 30px;
    line-height: 1.2;
  }
}
@media (max-width: 767px) {
  .blog-card-2 .thumb .event-date h2 {
    line-height: 1.2;
    font-size: 30px;
  }
}
.blog-card-2 .thumb .event-date h5 {
  color: var(--light-color);
  line-height: 22px;
  margin-bottom: 4px;
}
.blog-card-2 .thumb .event-date span {
  color: var(--theme-color-3);
  border-radius: 4px;
  background-color: var(--theme-color-2);
  padding: 4px 16px 4px 16px;
  font-weight: 600;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0.36em;
}
.blog-card-2 .content {
  padding: 25px;
}
.blog-card-2 .content .content-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.blog-card-2 .content .content-bottom .read-more-btn {
  line-height: 102%;
  color: var(--theme-color-3);
  background-color: transparent;
  border: 2px solid rgba(0, 69, 64, 0.1);
}
.blog-card-2 .content .content-bottom .read-more-btn::before {
  background-color: transparent;
}
.blog-card-2 .content .content-bottom .read-more-btn .icon-wrap {
  background-color: var(--theme-color-3);
  color: var(--theme-color-2);
}
.blog-card-2 .content .author {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 5px;
}
.blog-card-2 .content .author .admin,
.blog-card-2 .content .author .solar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.blog-card-2 .content .title h3 {
  font-weight: 600;
  font-size: 23px;
  line-height: 36px;
  color: var(--theme-color-3);
  margin-bottom: 5px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .blog-card-2 .content .title h3 {
    font-size: 19px;
    line-height: 1.4;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .blog-card-2 .content .title h3 {
    font-size: 19px;
    line-height: 1.4;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .blog-card-2 .content .title h3 {
    font-size: 18px;
    line-height: 1.4;
  }
}
@media (max-width: 767px) {
  .blog-card-2 .content .title h3 {
    font-size: 18px;
    line-height: 1.4;
  }
}
.blog-card-2 .content .title h3 a {
  color: var(--theme-color-3);
}

.blog-card-3 {
  background-color: var(--theme-color-3);
  padding: 10px;
  border-radius: 10px;
}
.blog-card-3:hover .thumb a img {
  transform: scale(1.1);
}
.blog-card-3:hover .content .content-bottom .read-more-btn {
  color: var(--theme-color-3);
  border-color: var(--theme-color-2);
}
.blog-card-3:hover .content .content-bottom .read-more-btn::before {
  background-color: var(--theme-color-2);
  left: -10%;
  transform: translateX(0%) translateY(-50%);
}
.blog-card-3:hover .content .content-bottom .read-more-btn .icon-wrap {
  background-color: var(--theme-color-3);
  color: var(--theme-color-2);
}
.blog-card-3 .thumb {
  position: relative;
  overflow: hidden;
}
.blog-card-3 .thumb a {
  border-radius: 10px;
  display: block;
  overflow: hidden;
}
.blog-card-3 .thumb a img {
  border-radius: 10px;
}
.blog-card-3 .date {
  width: 70px;
  height: 70px;
  background: var(--theme-color-2);
  border: 2px solid var(--theme-color-3);
  border-radius: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10px;
  right: 5px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .blog-card-3 .date {
    width: 60px;
    height: 60px;
    top: 0;
    right: 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .blog-card-3 .date {
    width: 60px;
    height: 60px;
    top: 0;
    right: 0;
  }
}
@media (max-width: 767px) {
  .blog-card-3 .date {
    width: 60px;
    height: 60px;
    top: 5px;
    right: 5px;
  }
}
.blog-card-3 .date h4 {
  font-style: normal;
  font-weight: 500;
  font-size: 30px;
  line-height: 100%;
  color: var(--theme-color-3);
  margin-bottom: 0;
}
@media (max-width: 1399px) {
  .blog-card-3 .date h4 {
    font-size: 20px;
  }
}
.blog-card-3 .date p {
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 1;
  color: var(--gray-color);
}
@media (max-width: 1399px) {
  .blog-card-3 .date p {
    font-size: 16px;
    line-height: 1;
  }
}
.blog-card-3 .content {
  padding: 20px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .blog-card-3 .content {
    padding: 10px;
  }
}
@media (max-width: 767px) {
  .blog-card-3 .content {
    padding: 10px;
  }
}
.blog-card-3 .content .author {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 5px;
}
.blog-card-3 .content .author .admin,
.blog-card-3 .content .author .solar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.blog-card-3 .content .author .admin i,
.blog-card-3 .content .author .solar i {
  color: var(--theme-color-2);
}
.blog-card-3 .content .author .admin span,
.blog-card-3 .content .author .solar span {
  color: var(--white-color);
}
.blog-card-3 .content .title h3 {
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: var(--white-color);
}
@media (max-width: 1399px) {
  .blog-card-3 .content .title h3 {
    font-size: 18px;
    line-height: 1.4;
  }
}
.blog-card-3 .content .content-bottom .read-more-btn {
  line-height: 102%;
  color: var(--theme-color-2);
  background-color: transparent;
  border: 2px solid rgba(248, 247, 240, 0.1);
}
.blog-card-3 .content .content-bottom .read-more-btn::before {
  background-color: transparent;
}
.blog-card-3 .content .content-bottom .read-more-btn .icon-wrap {
  background-color: var(--theme-color-2);
  color: var(--theme-color-3);
}

.blog-slider-active {
  margin-right: -280px;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .blog-slider-active {
    margin-right: -180px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .blog-slider-active {
    margin-right: 0;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .blog-slider-active {
    margin-right: 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .blog-slider-active {
    margin-right: 0;
  }
}
@media (max-width: 767px) {
  .blog-slider-active {
    margin-right: 0;
  }
}
.blog-slider-active .blog-pagination {
  height: 5px;
  border-radius: 10px;
  margin-top: 60px;
  background: rgba(0, 69, 64, 0.5);
  display: flex;
  width: calc(100% - 280px);
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .blog-slider-active .blog-pagination {
    width: calc(100% - 180px);
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .blog-slider-active .blog-pagination {
    width: 100%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .blog-slider-active .blog-pagination {
    width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .blog-slider-active .blog-pagination {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .blog-slider-active .blog-pagination {
    margin-top: 30px;
    width: 100%;
  }
}
.blog-slider-active .blog-pagination .swiper-pagination-bullet {
  flex: 1;
  border-radius: 10px;
  height: 100%;
  opacity: 1;
  background: none;
  margin: 0;
}
.blog-slider-active .blog-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--theme-color-3);
}

/* 13 Event Css */
.event-card {
  background: #f8f7f0;
  padding: 10px;
  border-radius: 10px;
}
.event-card.active .thumb a img, .event-card:hover .thumb a img {
  transform: scale(1.1);
}
.event-card .card-content {
  padding: 20px;
}
.event-card .event-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
@media (max-width: 767px) {
  .event-card .event-card-top {
    flex-direction: column;
    align-items: start;
    gap: 15px;
  }
}
.event-card .event-card-top .top-left {
  display: flex;
  gap: 20px;
  align-items: start;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .event-card .event-card-top .top-left {
    gap: 14px;
  }
}
@media (max-width: 767px) {
  .event-card .event-card-top .top-left {
    align-items: center;
    gap: 14px;
  }
}
.event-card .event-card-top .top-left .event-date {
  text-align: start;
}
.event-card .event-card-top .top-left .event-date h3 {
  color: var(--theme-color-3);
  font-weight: 500;
  font-size: 40px;
  line-height: 14px;
  margin-bottom: 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .event-card .event-card-top .top-left .event-date h3 {
    font-size: 28px;
    line-height: 0.8;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .event-card .event-card-top .top-left .event-date h3 {
    font-size: 24px;
    line-height: 0.8;
  }
}
@media (max-width: 767px) {
  .event-card .event-card-top .top-left .event-date h3 {
    font-size: 24px;
    line-height: 0.8;
  }
  .event-card .event-card-top .top-left .event-date h3 br {
    display: none;
  }
}
.event-card .event-card-top .top-left .event-date h3 span {
  color: var(--body-color);
  font-size: 18px;
  line-height: 22px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .event-card .event-card-top .top-left .event-date h3 span {
    font-size: 16px;
    line-height: 1;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .event-card .event-card-top .top-left .event-date h3 span {
    font-size: 16px;
    line-height: 1;
  }
}
@media (max-width: 767px) {
  .event-card .event-card-top .top-left .event-date h3 span {
    font-size: 16px;
    line-height: 1;
  }
}
.event-card .thumb {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.event-card .thumb > a {
  display: block;
  border-radius: 10px;
  overflow: hidden;
}
.event-card .thumb img {
  width: 100%;
  border-radius: 10px;
}
.event-card .thumb .category {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
.event-card .thumb .category a {
  display: inline-block;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.01);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0px 4px 11px rgba(255, 255, 255, 0.4), inset -1px -4px 23.1px rgba(0, 24, 25, 0.28);
  backdrop-filter: blur(23.9px);
  border-radius: 53px;
  color: var(--white-color);
}
.event-card .thumb .category a:hover {
  color: var(--theme-color-3);
  background: var(--white-color);
}
.event-card .thumb .shape-3 {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}

.top-right {
  display: flex;
  align-items: center;
  gap: 15px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .top-right {
    gap: 10px;
  }
}
@media (max-width: 767px) {
  .top-right {
    gap: 10px;
  }
}
.top-right img {
  max-width: 118px;
  width: 100%;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .top-right img {
    max-width: 90px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .top-right img {
    max-width: 90px;
  }
}
@media (max-width: 767px) {
  .top-right img {
    max-width: 80px;
  }
}
.top-right .people-joined {
  text-align: start;
}
.top-right .people-joined h5 {
  font-weight: 600;
  font-size: 20px;
  color: var(--theme-color-3);
  margin-bottom: 0;
  line-height: 30px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .top-right .people-joined h5 {
    font-size: 18px;
    line-height: 1.3;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .top-right .people-joined h5 {
    font-size: 18px;
    line-height: 1.2;
  }
}
@media (max-width: 767px) {
  .top-right .people-joined h5 {
    font-size: 18px;
    line-height: 1;
  }
}

.event-card-2 {
  display: flex;
  align-items: center;
  background: var(--white-color);
  padding: 10px;
  border-radius: 10px;
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) and (max-width: 991px) {
  .event-card-2 {
    flex-direction: column;
  }
}
@media (max-width: 767px) {
  .event-card-2 {
    flex-direction: column;
  }
}
.event-card-2 .event-thumb {
  width: 48%;
  flex: none;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) and (max-width: 991px) {
  .event-card-2 .event-thumb {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .event-card-2 .event-thumb {
    width: 100%;
  }
}
.event-card-2 .event-thumb a img {
  border-radius: 10px;
  width: 100%;
}
.event-card-2 .event-thumb .event-date {
  display: inline-flex;
  padding: 16px 24px;
  background: #f8f7f0;
  border: 1px solid var(--theme-color-2);
  box-shadow: 0 6px 15.9px -3px rgba(0, 69, 64, 0.11);
  border-radius: 0 100px 100px 0;
  position: absolute;
  left: 100%;
  top: 40px;
  width: auto;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .event-card-2 .event-thumb .event-date {
    top: 30px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .event-card-2 .event-thumb .event-date {
    padding: 10px 20px;
    top: 20px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .event-card-2 .event-thumb .event-date {
    padding: 10px 20px;
    top: 15px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .event-card-2 .event-thumb .event-date {
    left: 0;
    top: 30px;
    padding: 10px 20px;
  }
}
@media (max-width: 767px) {
  .event-card-2 .event-thumb .event-date {
    left: 0;
    top: 30px;
    padding: 10px 20px;
  }
}
.event-card-2 .event-thumb .event-date h5 {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 18px;
  line-height: 100%;
  color: var(--theme-color-3);
  white-space: nowrap;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .event-card-2 .event-thumb .event-date h5 {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .event-card-2 .event-thumb .event-date h5 {
    font-size: 14px;
  }
}
.event-card-2 .card-content {
  width: 52%;
  padding: 60px 50px 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .event-card-2 .card-content {
    padding: 50px 30px 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .event-card-2 .card-content {
    width: 100%;
    padding: 30px 20px;
  }
}
@media (max-width: 767px) {
  .event-card-2 .card-content {
    width: 100%;
    padding: 30px 20px;
  }
}
.event-card-2 .card-content .event-card-title h2 {
  font-weight: 500;
  font-size: 36px;
  line-height: 48px;
  color: var(--theme-color-3);
  margin-bottom: 10px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .event-card-2 .card-content .event-card-title h2 {
    font-size: 24px;
    line-height: 1.2;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .event-card-2 .card-content .event-card-title h2 {
    font-size: 24px;
    line-height: 1;
  }
}
@media (max-width: 767px) {
  .event-card-2 .card-content .event-card-title h2 {
    font-size: 20px;
    line-height: 1;
  }
}
.event-card-2 .card-content .join-event {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 6px;
}
@media (max-width: 767px) {
  .event-card-2 .card-content .join-event {
    flex-direction: column;
    align-items: start;
  }
}

.event-card-3 {
  display: flex;
  align-items: center;
  background: var(--white-color);
  padding: 10px;
  border-radius: 10px;
  position: relative;
  overflow-y: clip;
}
.event-card-3:hover .event-thumb a img {
  transform: scale(1.1);
}
@media (max-width: 767px) {
  .event-card-3 {
    margin: 0 0 30px;
  }
}
.event-card-3 .event-thumb a {
  border-radius: 10px;
  display: block;
  overflow: hidden;
}
.event-card-3 .event-thumb a img {
  overflow: hidden;
  border-radius: 10px;
  width: 100%;
}
.event-card-3 .card-content {
  padding: 0 50px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .event-card-3 .card-content {
    padding: 0 20px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .event-card-3 .card-content {
    padding: 20px 10px;
  }
}
@media (max-width: 767px) {
  .event-card-3 .card-content {
    padding: 20px 10px;
  }
}
.event-card-3 .card-content .event-card-title h2 {
  font-weight: 500;
  font-size: 36px;
  line-height: 48px;
  color: var(--theme-color-3);
  margin-bottom: 10px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .event-card-3 .card-content .event-card-title h2 {
    font-size: 28px;
    line-height: 1;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .event-card-3 .card-content .event-card-title h2 {
    font-size: 24px;
    line-height: 1.2;
  }
}
@media (max-width: 767px) {
  .event-card-3 .card-content .event-card-title h2 {
    font-size: 20px;
    line-height: 1.2;
  }
}
.event-card-3 .card-content .join-event {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 6px;
}
.event-card-3 .card-content .category p {
  font-style: normal;
  font-weight: 500;
  font-size: 17px;
  line-height: 28px;
  color: var(--body-color);
  margin-bottom: 12px;
}
.event-card-3 .card-content .event-card-text p {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--body-color);
  margin-bottom: 36px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .event-card-3 .card-content .event-card-text p {
    margin-bottom: 30px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .event-card-3 .card-content .event-card-text p {
    margin-bottom: 30px;
  }
}

.card-number-3 {
  position: absolute;
  right: 60px;
  bottom: -20px;
  justify-content: end;
  display: inline-flex;
}
@media (min-width: 768px) and (max-width: 991px) {
  .card-number-3 {
    right: 20px;
  }
}
@media (max-width: 767px) {
  .card-number-3 {
    right: 20px;
  }
}
.card-number-3 h1 {
  font-family: var(--outfit-font);
  font-style: normal;
  font-weight: 600;
  font-size: 120px;
  line-height: 82px;
  color: var(--theme-color-3);
  opacity: 0.06;
  margin-bottom: 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .card-number-3 h1 {
    font-size: 100px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .card-number-3 h1 {
    font-size: 90px;
  }
}
@media (max-width: 767px) {
  .card-number-3 h1 {
    font-size: 80px;
  }
}

.event-card-middle h2 {
  font-weight: 500;
  font-size: 36px;
  line-height: 48px;
  color: var(--theme-color-3);
  margin: 20px 0 8px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .event-card-middle h2 {
    font-size: 28px;
    line-height: 1;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .event-card-middle h2 {
    font-size: 24px;
    line-height: 1;
  }
}
@media (max-width: 767px) {
  .event-card-middle h2 {
    font-size: 20px;
    line-height: 1;
  }
}

.address {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .address {
    margin-bottom: 20px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .address {
    margin-bottom: 20px;
  }
}
@media (max-width: 767px) {
  .address {
    flex-direction: column;
    align-items: start;
    gap: 6px;
    margin-bottom: 20px;
  }
}
.address .location {
  display: flex;
  align-items: center;
  gap: 8px;
}
.address .time {
  display: flex;
  align-items: center;
  gap: 8px;
}

.our-events-section-2 {
  position: relative;
  background: #f8f7f0;
}
.our-events-section-2 .shape {
  position: absolute;
  bottom: 0;
  left: 0;
  width: fit-content;
}

.section-top-6 {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 60px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .section-top-6 {
    flex-direction: column;
    align-items: start;
    gap: 20px;
  }
}
@media (max-width: 767px) {
  .section-top-6 {
    flex-direction: column;
    align-items: start;
    gap: 20px;
    margin-bottom: 40px;
  }
}
.section-top-6 .left .common-subtitle span {
  color: var(--theme-color-3);
}
.section-top-6 .left .common-title {
  margin-bottom: 0;
}
.section-top-6 .left .common-title h2 {
  color: var(--theme-color-3);
}
@media (min-width: 992px) and (max-width: 1199px) {
  .section-top-6 .left .common-title h2 {
    font-size: 38px;
  }
}
.section-top-6 .right a {
  color: var(--white-color);
  background-color: var(--theme-color-3);
  border: none;
}
.section-top-6 .right a::before {
  background-color: var(--theme-color-2);
}
.section-top-6 .right a .icon-wrap {
  background: var(--theme-color-2);
  color: var(--theme-color-3);
}
.section-top-6 .right a:hover {
  color: var(--theme-color-3);
  background-color: var(--theme-color-2);
}
.section-top-6 .right a:hover .icon-wrap {
  background: var(--theme-color-3);
  color: var(--white-color);
}

.our-events-section-3 {
  position: relative;
  overflow: hidden;
}
.our-events-section-3 .shape {
  position: absolute;
  right: 0;
  bottom: -56%;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .our-events-section-3 .shape {
    bottom: -57%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .our-events-section-3 .shape {
    bottom: -43%;
    text-align: end;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .our-events-section-3 .shape {
    bottom: -23%;
    text-align: end;
  }
}
@media (max-width: 767px) {
  .our-events-section-3 .shape {
    text-align: end;
    bottom: -20%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .our-events-section-3 .shape img {
    width: 70%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .our-events-section-3 .shape img {
    width: 61%;
  }
}
@media (max-width: 767px) {
  .our-events-section-3 .shape img {
    width: 50%;
  }
}

.adjusted-col-gap {
  padding: 0;
}

/* 14 Partners Css */
.major-partners .partners-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.major-partners .partners-title h3 {
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  color: var(--theme-color-3);
  margin-bottom: 0;
  white-space: nowrap;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .major-partners .partners-title h3 {
    max-width: 220px;
    width: 100%;
    text-align: center;
    font-size: 32px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .major-partners .partners-title h3 {
    max-width: 200px;
    width: 100%;
    text-align: center;
    font-size: 28px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .major-partners .partners-title h3 {
    width: 60%;
    text-align: center;
    font-size: 26px;
  }
}
@media (max-width: 767px) {
  .major-partners .partners-title h3 {
    width: 100%;
    text-align: center;
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  .major-partners .partners-title .line-right,
  .major-partners .partners-title .line {
    width: 60%;
  }
}
.major-partners .partners-title .line-right,
.major-partners .partners-title .line {
  display: flex;
  align-items: center;
}
.major-partners .partners-title .line-right img,
.major-partners .partners-title .line img {
  width: 100%;
  display: block;
}
.major-partners .partners-title .line img {
  transform: rotate(180deg);
}
.major-partners .partners-title-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.major-partners .partners-title-2 h3 {
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  color: var(--white-color);
  margin-bottom: 0;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .major-partners .partners-title-2 h3 {
    max-width: 220px;
    width: 100%;
    text-align: center;
    font-size: 32px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .major-partners .partners-title-2 h3 {
    max-width: 200px;
    width: 100%;
    text-align: center;
    font-size: 28px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .major-partners .partners-title-2 h3 {
    width: 60%;
    text-align: center;
    font-size: 26px;
  }
}
@media (max-width: 767px) {
  .major-partners .partners-title-2 h3 {
    width: 100%;
    text-align: center;
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  .major-partners .partners-title-2 .line-right,
  .major-partners .partners-title-2 .line {
    width: 60%;
  }
}
.major-partners .partners-title-2 .line-right img,
.major-partners .partners-title-2 .line img {
  width: 100%;
}
.major-partners .partners-title-2 .line img {
  transform: rotate(180deg);
}
.major-partners.style-2 {
  margin-bottom: -80px;
}
.major-partners.style-3 {
  margin-bottom: -200px;
}

.partner-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25px 30px;
  max-width: 202px;
  height: 119px;
  width: 100%;
  background-color: #ffffff;
  border: 2px solid var(--theme-color-3);
  border-radius: 8px;
}

.partner-2 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 202px;
  height: 119px;
  width: 100%;
  background: #F8F7F0;
  border: 1px solid var(--theme-color-2);
  border-radius: 8px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.partner-2:hover {
  border: 1px solid var(--theme-color-3);
  background-color: var(--theme-color-3);
}
.partner-2:hover .logo-1 {
  visibility: visible;
  opacity: 1;
}
.partner-2:hover .logo-2 {
  visibility: hidden;
  opacity: 0;
}
.partner-2 .logo-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 25px 30px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.partner-2 .logo-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 25px 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: visible;
  opacity: 1;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.partner-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25px 30px;
  max-width: 202px;
  height: 119px;
  width: 100%;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
}
.partner-3:hover {
  background-color: var(--theme-color-3);
}

.partner-marquee {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}
.partner-marquee .partner-marquee-layout {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  -webkit-animation: partner-marquee 20s linear infinite;
  animation: partner-marquee 20s linear infinite;
}
.partner-marquee .partner-marquee-layout .partner-1 {
  width: 200px;
  flex: none;
  margin-right: 30px;
}
.partner-marquee .partner-marquee-layout .partner-2 {
  width: 200px;
  flex: none;
  margin-right: 30px;
}
.partner-marquee .partner-marquee-layout .partner-3 {
  width: 200px;
  flex: none;
  margin-right: 30px;
}

@-webkit-keyframes partner-marquee {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@keyframes partner-marquee {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
/* 15 Contact Us Css */
.contact-us {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;
  padding-top: 20px;
  overflow-x: clip;
}
@media (min-width: 768px) and (max-width: 991px) {
  .contact-us {
    padding: 60px 0;
  }
}
@media (max-width: 767px) {
  .contact-us {
    padding: 40px 0;
  }
}
.contact-us .shape-6 {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
.contact-us .shape-7 {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.contact-form {
  max-width: 580px;
  width: 100%;
  background-color: var(--theme-color-3);
  padding: 60px;
  border: 2px solid var(--light-color);
  border-radius: 10px;
  margin: -40px 0 0 auto;
}
@media (min-width: 768px) and (max-width: 991px) {
  .contact-form {
    margin: 0 auto 0;
    padding: 40px;
  }
}
@media (max-width: 767px) {
  .contact-form {
    margin: 0 auto 0;
    padding: 30px;
  }
}
.contact-form .form-content {
  position: relative;
  z-index: 1;
}
.contact-form .form-content-top h3 {
  font-weight: 500;
  font-size: 36px;
  line-height: 48px;
  color: var(--light-color);
  margin-bottom: 15px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .contact-form .form-content-top h3 {
    font-size: 28px;
    line-height: 1.5;
  }
}
@media (max-width: 767px) {
  .contact-form .form-content-top h3 {
    font-size: 22px;
    line-height: 1.4;
  }
}
.contact-form .form-content-top h3 span {
  color: var(--theme-color-2);
}
.contact-form .form-content-top p {
  max-width: 357px;
  width: 100%;
  font-size: 17px;
  line-height: 28px;
  color: var(--light-color);
  opacity: 0.9;
  margin-bottom: 30px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .contact-form .form-content-top p {
    font-size: 16px;
    line-height: 1.5;
  }
}
@media (max-width: 767px) {
  .contact-form .form-content-top p {
    font-size: 16px;
    line-height: 1.4;
  }
}
.contact-form input,
.contact-form textarea {
  background: rgba(248, 247, 240, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 14px 20px;
  resize: none;
  width: 100%;
  font-size: 17px;
  line-height: 28px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
  color: var(--white-color);
}
.contact-form input::-webkit-input-placeholder,
.contact-form textarea::-webkit-input-placeholder {
  color: #f8f7f0;
}
.contact-form input:-moz-placeholder,
.contact-form textarea:-moz-placeholder {
  color: #f8f7f0;
}
.contact-form input::-moz-placeholder,
.contact-form textarea::-moz-placeholder {
  color: #f8f7f0;
}
.contact-form input:-ms-input-placeholder,
.contact-form textarea:-ms-input-placeholder {
  color: #f8f7f0;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border: 2px solid var(--theme-color-2);
}
.contact-form input:focus::-webkit-input-placeholder,
.contact-form textarea:focus::-webkit-input-placeholder {
  color: transparent;
}
.contact-form input:focus:-moz-placeholder,
.contact-form textarea:focus:-moz-placeholder {
  color: transparent;
}
.contact-form input:focus::-moz-placeholder,
.contact-form textarea:focus::-moz-placeholder {
  color: transparent;
}
.contact-form input:focus:-ms-input-placeholder,
.contact-form textarea:focus:-ms-input-placeholder {
  color: transparent;
}
.contact-form textarea {
  height: 120px;
}
.contact-form button {
  border: none;
}
.contact-form .shape {
  position: absolute;
  top: -220px;
  right: -210px;
  z-index: -1;
  pointer-events: none;
}

.form-message.success {
  margin-bottom: 0;
  color: var(--white-color);
  margin-top: 10px;
}

.form-message.error {
  margin-bottom: 0;
  color: red;
  margin-top: 10px;
}

.contact-us-2 {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;
  margin: 0 85px;
  padding: 120px 0;
  border-radius: 20px;
  background-attachment: fixed;
}
@media (max-width: 1700px) {
  .contact-us-2 {
    margin: 0 20px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .contact-us-2 {
    padding: 100px 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .contact-us-2 {
    padding: 100px 0;
  }
}
@media (max-width: 767px) {
  .contact-us-2 {
    padding: 80px 0;
    margin: 0;
    border-radius: 0;
  }
}
.contact-us-2 .icon img {
  display: inline-block;
  position: absolute;
  top: 27%;
  right: 41.5%;
  transform: rotate(120deg);
  z-index: -1;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .contact-us-2 .icon img {
    right: 43.5%;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .contact-us-2 .icon img {
    right: 53%;
  }
}

.contact-form-2 {
  max-width: 550px;
  width: 100%;
  padding: 50px;
  border: 2px solid var(--light-color);
  border-radius: 10px;
  margin-left: auto;
  margin-top: 0;
  background: rgba(0, 69, 64, 0.2);
  box-shadow: 4px 4px 0 #ffe175;
  backdrop-filter: blur(10px);
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .contact-form-2 {
    margin: 0 60px 0 auto;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .contact-form-2 {
    margin: 0 60px 0 auto;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .contact-form-2 {
    margin: 0 40px 0 auto;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .contact-form-2 {
    padding: 40px;
    margin: 0 auto;
  }
}
@media (max-width: 767px) {
  .contact-form-2 {
    padding: 30px;
    margin: 0 auto;
  }
}
.contact-form-2 .form-content {
  position: relative;
  z-index: 1;
}
.contact-form-2 h3 {
  font-weight: 500;
  font-size: 36px;
  line-height: 48px;
  color: var(--light-color);
  margin-bottom: 15px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .contact-form-2 h3 {
    font-size: 28px;
    line-height: 1.5;
  }
}
@media (max-width: 767px) {
  .contact-form-2 h3 {
    font-size: 22px;
    line-height: 1.4;
  }
}
.contact-form-2 h3 span {
  color: var(--theme-color-2);
}
.contact-form-2 p {
  max-width: 357px;
  width: 100%;
  font-size: 17px;
  line-height: 28px;
  color: var(--light-color);
  opacity: 0.9;
  margin-bottom: 30px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .contact-form-2 p {
    font-size: 16px;
    line-height: 1.5;
  }
}
@media (max-width: 767px) {
  .contact-form-2 p {
    font-size: 16px;
    line-height: 1.4;
  }
}
.contact-form-2 input,
.contact-form-2 textarea {
  background: #f8f7f0;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 14px 20px;
  resize: none;
  font-size: 17px;
  line-height: 28px;
}
.contact-form-2 input::-webkit-input-placeholder,
.contact-form-2 textarea::-webkit-input-placeholder {
  color: var(--body-color);
}
@media (max-width: 991px) {
  .contact-form-2 input::-webkit-input-placeholder,
  .contact-form-2 textarea::-webkit-input-placeholder {
    font-size: 16px;
  }
}
.contact-form-2 input:-moz-placeholder,
.contact-form-2 textarea:-moz-placeholder {
  color: var(--body-color);
}
@media (max-width: 991px) {
  .contact-form-2 input:-moz-placeholder,
  .contact-form-2 textarea:-moz-placeholder {
    font-size: 16px;
  }
}
.contact-form-2 input::-moz-placeholder,
.contact-form-2 textarea::-moz-placeholder {
  color: var(--body-color);
}
@media (max-width: 991px) {
  .contact-form-2 input::-moz-placeholder,
  .contact-form-2 textarea::-moz-placeholder {
    font-size: 16px;
  }
}
.contact-form-2 input:-ms-input-placeholder,
.contact-form-2 textarea:-ms-input-placeholder {
  color: var(--body-color);
}
@media (max-width: 991px) {
  .contact-form-2 input:-ms-input-placeholder,
  .contact-form-2 textarea:-ms-input-placeholder {
    font-size: 16px;
  }
}
.contact-form-2 input:focus,
.contact-form-2 textarea:focus {
  background: #f8f7f0;
  border-color: var(--theme-color-3);
}
.contact-form-2 input:focus::-webkit-input-placeholder,
.contact-form-2 textarea:focus::-webkit-input-placeholder {
  color: var(--theme-color-3);
}
.contact-form-2 input:focus:-moz-placeholder,
.contact-form-2 textarea:focus:-moz-placeholder {
  color: var(--theme-color-3);
}
.contact-form-2 input:focus::-moz-placeholder,
.contact-form-2 textarea:focus::-moz-placeholder {
  color: var(--theme-color-3);
}
.contact-form-2 input:focus:-ms-input-placeholder,
.contact-form-2 textarea:focus:-ms-input-placeholder {
  color: var(--theme-color-3);
}
.contact-form-2 button {
  border: none;
}

/* 16 Testimonial Css */
.testimonial .common-title h2 span i {
  color: var(--theme-color-2);
  padding: 5px 10px;
  background: var(--theme-color-3);
  border-radius: 100%;
}
.testimonial .reviews {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .testimonial .reviews {
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .testimonial .reviews {
    margin-bottom: 20px;
  }
}
.testimonial .reviews h3 {
  font-weight: 600;
  font-size: 42px;
  line-height: 52px;
  margin-bottom: 0;
  color: transparent;
  -webkit-text-stroke: 1px var(--theme-color-3);
  margin-right: 10px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .testimonial .reviews h3 {
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  .testimonial .reviews h3 {
    font-size: 30px;
  }
}
.testimonial .reviews img {
  width: 40px;
  height: 40px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .testimonial .reviews img {
    width: 34px;
    height: 34px;
  }
}
@media (max-width: 767px) {
  .testimonial .reviews img {
    width: 30px;
    height: 30px;
  }
}
.testimonial .reviews h5 {
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: var(--theme-color);
  margin-bottom: 0;
}
@media (min-width: 768px) and (max-width: 991px) {
  .testimonial .reviews h5 {
    font-size: 22px;
  }
}
@media (max-width: 767px) {
  .testimonial .reviews h5 {
    font-size: 18px;
  }
}
.testimonial .review-btn {
  max-width: 240px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border: 2px solid rgba(0, 69, 64, 0.1);
  border-radius: 20px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .testimonial .review-btn {
    max-width: 225px;
    gap: 8px;
    padding: 8px 16px;
  }
}
@media (max-width: 767px) {
  .testimonial .review-btn {
    max-width: 220px;
    gap: 8px;
    padding: 8px 16px;
  }
}
.testimonial .review-btn span {
  color: var(--theme-color-3);
  font-weight: 500;
  line-height: 24px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .testimonial .review-btn span {
    line-height: 1.3;
  }
}
@media (max-width: 767px) {
  .testimonial .review-btn span {
    line-height: 1.3;
  }
}
.testimonial .review-btn img {
  width: 44px;
  height: 44px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .testimonial .review-btn img {
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 767px) {
  .testimonial .review-btn img {
    width: 34px;
    height: 34px;
  }
}

.testimonial-card {
  background-color: var(--theme-color-3);
  padding: 20px;
  border-radius: 16px;
  display: flex;
  gap: 40px;
  align-items: center;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .testimonial-card {
    gap: 30px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .testimonial-card {
    gap: 30px;
  }
}
@media (max-width: 767px) {
  .testimonial-card {
    gap: 30px;
    flex-direction: column;
  }
}
.testimonial-card:hover .thumb .video-play-btn {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.testimonial-card .thumb {
  border-radius: 12px;
  position: relative;
  height: 100%;
  overflow: hidden;
  flex: none;
  width: 300px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .testimonial-card .thumb {
    width: 250px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .testimonial-card .thumb {
    width: 250px;
  }
}
@media (max-width: 767px) {
  .testimonial-card .thumb {
    width: 100%;
  }
}
.testimonial-card .thumb img {
  height: 100%;
  object-fit: cover;
  width: 100%;
  border-radius: 12px;
}
.testimonial-card .thumb .video-play-btn {
  width: 80px;
  height: 80px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  color: var(--light-color);
  padding: 23px 21px;
  border-radius: 100%;
  border: 1px solid var(--light-color);
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  background: rgba(255, 255, 255, 0.015);
  backdrop-filter: blur(2px);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
  animation: animate-pulse 3s linear infinite;
}
.testimonial-card .thumb .video-play-btn:hover {
  color: var(--theme-color-3);
  background: var(--theme-color-2);
  border-color: var(--theme-color-2);
}
.testimonial-card .card-content {
  flex: 1;
}
.testimonial-card .card-content .rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 4px 11px #004540, inset -1px -4px 23.1px rgba(0, 24, 25, 0.28);
  backdrop-filter: blur(23.9px);
  border-radius: 53px;
  margin-bottom: 20px;
}
.testimonial-card .card-content .rating p {
  margin-bottom: 0;
  color: var(--light-color);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}
.testimonial-card .card-content .rating i {
  font-size: 12px;
  line-height: 20px;
  color: var(--theme-color-2);
}
.testimonial-card .card-content .rating span {
  color: var(--theme-color-2);
  font-weight: 500;
  line-height: 20px;
}
.testimonial-card .card-content .review {
  color: var(--light-color);
  margin-bottom: 40px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .testimonial-card .card-content .review {
    margin-bottom: 20px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .testimonial-card .card-content .review {
    margin-bottom: 20px;
  }
}
@media (max-width: 767px) {
  .testimonial-card .card-content .review {
    margin-bottom: 20px;
  }
}
.testimonial-card .card-content .author-details h5 {
  color: var(--light-color);
  margin-bottom: 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
}
.testimonial-card .card-content .author-details h5 span {
  font-weight: 400;
  font-size: 14px;
}
.testimonial-card .card-content .author-details h6 {
  font-size: 16px;
  font-weight: 200;
  color: var(--light-color);
  margin-bottom: 0;
}

.testimonial-content .text {
  margin-bottom: 30px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .testimonial-content .text {
    margin-bottom: 20px;
  }
}
@media (max-width: 767px) {
  .testimonial-content .text {
    margin-bottom: 20px;
  }
}

.testimonial-slider-active {
  overflow: hidden;
}
.testimonial-slider-active .swiper-slide {
  opacity: 0.3;
}
.testimonial-slider-active .swiper-slide.swiper-slide-active {
  opacity: 1;
}
.testimonial-slider-active .swiper-slide.swiper-slide-active .testimonial-card .thumb .video-play-btn {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.testimonial-card-2 {
  background-color: var(--white-color);
  padding: 10px;
  border: 2px solid var(--white-color);
  border-radius: 16px;
  position: relative;
  z-index: 1;
  display: flex;
  gap: 40px;
  align-items: center;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .testimonial-card-2 {
    gap: 30px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .testimonial-card-2 {
    gap: 30px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .testimonial-card-2 {
    gap: 30px;
  }
}
@media (max-width: 767px) {
  .testimonial-card-2 {
    gap: 20px;
    flex-direction: column;
  }
}
.testimonial-card-2:hover {
  border: 2px solid var(--theme-color-2);
}
.testimonial-card-2 .thumb {
  border-radius: 12px;
  position: relative;
  z-index: 1;
  flex: none;
}
@media (max-width: 767px) {
  .testimonial-card-2 .thumb {
    width: 100%;
  }
}
.testimonial-card-2 .thumb img {
  width: 100%;
  border-radius: 12px;
}
.testimonial-card-2 .thumb .video-play-btn {
  width: 80px;
  height: 80px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--light-color);
  padding: 23px 21px;
  border-radius: 100%;
  border: 1px solid var(--light-color);
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  background: rgba(255, 255, 255, 0.015);
  backdrop-filter: blur(6px);
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
  animation: animate-pulse 3s linear infinite;
}
.testimonial-card-2 .thumb .video-play-btn:hover {
  color: var(--theme-color-3);
  background: var(--theme-color-2);
  border-color: var(--theme-color-2);
}
.testimonial-card-2 .card-content h4 {
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: var(--theme-color-3);
  margin-bottom: 16px;
}
.testimonial-card-2 .card-content .review {
  color: var(--light-color);
  margin-bottom: 80px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .testimonial-card-2 .card-content .review {
    margin-bottom: 20px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .testimonial-card-2 .card-content .review {
    margin-bottom: 20px;
  }
}
@media (max-width: 767px) {
  .testimonial-card-2 .card-content .review {
    margin-bottom: 20px;
  }
}
.testimonial-card-2 .card-content .review p {
  color: var(--gray-color);
}
.testimonial-card-2 .card-content .author-details h5 {
  color: var(--theme-color-3);
  margin-bottom: 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
}
.testimonial-card-2 .card-content .author-details h5 span {
  font-weight: 400;
  font-size: 14px;
}
.testimonial-card-2 .card-content .author-details h6 {
  font-size: 16px;
  font-weight: 200;
  color: var(--body-color);
  margin-bottom: 0;
}
.testimonial-card-2 .quote-icon {
  position: absolute;
  bottom: 0;
  right: 50px;
  z-index: -1;
}

.section-top-4 {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 60px;
}
@media (max-width: 767px) {
  .section-top-4 {
    flex-direction: column;
    align-items: start;
    gap: 20px;
    margin-bottom: 40px;
  }
}
.section-top-4 .left .common-subtitle span {
  color: var(--theme-color-3);
}
.section-top-4 .left .common-title {
  margin-bottom: 0;
}
.section-top-4 .left .common-title h2 {
  color: var(--theme-color-3);
}

.section-top-8 {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 60px;
}
@media (max-width: 767px) {
  .section-top-8 {
    flex-direction: column;
    align-items: start;
    gap: 20px;
    margin-bottom: 40px;
  }
}
.section-top-8 .left .common-subtitle span {
  color: var(--white-color);
}
.section-top-8 .left .common-title {
  margin-bottom: 0;
}
.section-top-8 .left .common-title h2 {
  color: var(--white-color);
}

.testimonial-section-2 {
  background-color: #f8f7f0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
}
.testimonial-section-2 .shape-1 {
  position: absolute;
  top: 0;
  left: 0;
}
@media (max-width: 1700px) {
  .testimonial-section-2 .shape-1 {
    width: 80%;
  }
}
.testimonial-section-2 .shape-2 {
  position: absolute;
  bottom: 0;
  right: 2%;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .testimonial-section-2 .shape-2 {
    width: 14%;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .testimonial-section-2 .shape-2 {
    width: 16%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .testimonial-section-2 .shape-2 {
    width: 20%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .testimonial-section-2 .shape-2 {
    width: 25%;
  }
}
@media (max-width: 767px) {
  .testimonial-section-2 .shape-2 {
    width: 30%;
  }
}
.testimonial-section-2 .e-primary-btn {
  color: var(--theme-color-2);
  background: var(--theme-color-3);
}
.testimonial-section-2 .e-primary-btn:before {
  background: var(--theme-color-3);
}
.testimonial-section-2 .e-primary-btn .icon-wrap {
  background: var(--theme-color-2);
  color: var(--theme-color-3);
}
.testimonial-section-2 .e-primary-btn:hover {
  color: var(--theme-color-3);
}
.testimonial-section-2 .e-primary-btn:hover:before {
  background: var(--theme-color-2);
  left: -10%;
  transform: translateX(0%) translateY(-50%);
}
.testimonial-section-2 .e-primary-btn:hover .icon-wrap {
  background: var(--theme-color-3);
  color: var(--theme-color-2);
}

.testimonial-card-3 {
  background-color: var(--theme-color-3);
  border-radius: 10px;
}
.testimonial-card-3:hover .testimonial-card-thumb:before {
  opacity: 1;
}
.testimonial-card-3:hover .testimonial-card-thumb .circled-quote {
  background-color: var(--theme-color-2);
  border: 2px solid var(--theme-color-3);
  color: var(--theme-color-3);
}
.testimonial-card-3:hover .testimonial-card-thumb .author-info {
  border: 1px solid var(--theme-color-2);
}
.testimonial-card-3 .testimonial-card-content {
  padding: 30px;
  margin-bottom: 20px;
}
.testimonial-card-3 .testimonial-card-content h5 {
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: var(--white-color);
  margin-bottom: 10px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .testimonial-card-3 .testimonial-card-content h5 {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .testimonial-card-3 .testimonial-card-content h5 {
    font-size: 20px;
  }
}
.testimonial-card-3 .testimonial-card-content p {
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 32px;
  color: var(--white-color);
  margin-bottom: 0;
}
@media (min-width: 768px) and (max-width: 991px) {
  .testimonial-card-3 .testimonial-card-content p {
    font-size: 16px;
    line-height: 1.6;
  }
}
@media (max-width: 767px) {
  .testimonial-card-3 .testimonial-card-content p {
    font-size: 16px;
    line-height: 1.5;
  }
}
.testimonial-card-3 .testimonial-card-thumb {
  overflow: hidden;
  position: relative;
  z-index: 1;
  padding-top: 10px;
  border-radius: 10px;
}
.testimonial-card-3 .testimonial-card-thumb:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: -30px;
  z-index: -1;
  background: var(--theme-color-2);
  clip-path: url(#c-mask-shape);
  opacity: 0.08;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.testimonial-card-3 .testimonial-card-thumb .clippy {
  position: absolute;
  top: -999px;
  left: -999px;
  width: 0;
  height: 0;
  opacity: 0;
}
.testimonial-card-3 .testimonial-card-thumb img {
  border-bottom-left-radius: 10px;
  overflow: hidden;
  clip-path: url(#c-mask-image);
  margin-left: -20px;
}
.testimonial-card-3 .testimonial-card-thumb .circled-quote {
  width: 80px;
  height: 80px;
  font-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--theme-color-3);
  border-radius: 100%;
  border: 2px solid var(--theme-color-2);
  color: var(--theme-color-2);
  position: absolute;
  top: 0;
  right: 70px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .testimonial-card-3 .testimonial-card-thumb .circled-quote {
    width: 70px;
    height: 70px;
    font-size: 32px;
    top: 10px;
    right: 80px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .testimonial-card-3 .testimonial-card-thumb .circled-quote {
    width: 60px;
    height: 60px;
    font-size: 28px;
    top: 0;
    right: 30px;
  }
}
@media (max-width: 767px) {
  .testimonial-card-3 .testimonial-card-thumb .circled-quote {
    width: 60px;
    height: 60px;
    font-size: 24px;
    top: 10px;
    right: 50px;
  }
}
.testimonial-card-3 .testimonial-card-thumb .author-info {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border-radius: 8px;
  padding: 20px;
  max-width: 280px;
  width: 100%;
  position: absolute;
  bottom: 20px;
  left: 20px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .testimonial-card-3 .testimonial-card-thumb .author-info {
    max-width: 240px;
  }
}
.testimonial-card-3 .testimonial-card-thumb .author-info h5 {
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  color: var(--white-color);
  margin-bottom: 4px;
}
@media (max-width: 991px) {
  .testimonial-card-3 .testimonial-card-thumb .author-info h5 {
    font-size: 18px;
  }
}
.testimonial-card-3 .testimonial-card-thumb .author-info p {
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  color: var(--white-color);
  margin-bottom: 0;
}
@media (max-width: 991px) {
  .testimonial-card-3 .testimonial-card-thumb .author-info p {
    font-size: 16px;
  }
}

.section-top-10 {
  text-align: center;
  width: 50%;
  margin: 0 auto;
  margin-bottom: 50px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .section-top-10 .common-title h2 img {
    width: 32px;
  }
}
@media (max-width: 767px) {
  .section-top-10 .common-title h2 img {
    width: 22px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .section-top-10 {
    width: 60%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .section-top-10 {
    width: 60%;
  }
}
@media (max-width: 767px) {
  .section-top-10 {
    margin-bottom: 40px;
    width: 80%;
  }
}

.testimonial-slider-active-2 .testimonial-pagination-wrap {
  display: flex;
  justify-content: center;
}
.testimonial-slider-active-2 .testimonial-pagination-wrap .testimonial-pagination-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8.5px);
  border-radius: 100px;
  width: auto;
  padding: 10px 16px;
  margin-top: 50px;
}
.testimonial-slider-active-2 .testimonial-pagination-wrap .testimonial-pagination-2 .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  background: none;
  border: 1px solid transparent;
  backdrop-filter: blur(4.75px);
  margin: 0;
  opacity: 1;
  border-radius: 100%;
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.testimonial-slider-active-2 .testimonial-pagination-wrap .testimonial-pagination-2 .swiper-pagination-bullet:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 100%;
  background: #868681;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.testimonial-slider-active-2 .testimonial-pagination-wrap .testimonial-pagination-2 .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border-color: var(--theme-color-3);
}
.testimonial-slider-active-2 .testimonial-pagination-wrap .testimonial-pagination-2 .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
  background: radial-gradient(92.09% 85.42% at 86.3% 87.5%, rgba(0, 0, 0, 0.23) 0%, rgba(0, 0, 0, 0) 86.18%), radial-gradient(65.28% 65.28% at 26.39% 20.83%, rgba(255, 255, 255, 0.413) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%), #004540;
}

/* 18 What we do Css */
.what-we-do-section {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;
}

/* This is the dark overlay — sits between image and content */
.what-we-do-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 119, 73, 0.95);
    z-index: 0;
}

/* Keeps all content sitting above the overlay */
.what-we-do-section .container,
.what-we-do-section .shape-10,
.what-we-do-section .shape-11 {
    position: relative;
    z-index: 1;
}

.what-we-do-section .shape-10 {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
.what-we-do-section .shape-11 {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.section-top-2 {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 60px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .section-top-2 {
    flex-direction: column;
    align-items: start;
    gap: 20px;
    margin-bottom: 50px;
  }
}
@media (max-width: 767px) {
  .section-top-2 {
    flex-direction: column;
    align-items: start;
    gap: 20px;
    margin-bottom: 40px;
  }
}
.section-top-2 .left {
  max-width: 662px;
  width: 100%;
}
.section-top-2 .left .common-subtitle span {
  color: var(--theme-color-2);
}
.section-top-2 .left .common-title {
  margin-bottom: 0;
}
.section-top-2 .left .common-title h2 {
  color: var(--light-color);
  margin-bottom: 0;
}
.section-top-2 .right {
  max-width: 434px;
  width: 100%;
}
.section-top-2 .right p {
  color: var(--light-color);
  font-size: 18px;
  line-height: 30px;
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .section-top-2 .right p {
    margin-bottom: 14px;
  }
}
.section-top-2 .right .service-btn {
  gap: 8px;
  padding: 0;
  background: transparent;
  color: var(--theme-color-2);
}
.section-top-2 .right .service-btn:before {
  background: transparent;
}
.section-top-2 .right .service-btn:hover {
  text-decoration: underline;
}
.section-top-2 .right .service-btn .icon-wrap {
  width: auto;
  height: auto;
  color: var(--theme-color-2);
  background: transparent;
}
.section-top-2 .right .service-btn .icon-wrap:hover {
  background: transparent;
}

.section-top-3 {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 60px;
}
@media (max-width: 767px) {
  .section-top-3 {
    flex-direction: column;
    align-items: start;
    gap: 20px;
    margin-bottom: 40px;
  }
}
.section-top-3 .left {
  max-width: 575px;
  width: 100%;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .section-top-3 .left {
    max-width: 500px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .section-top-3 .left {
    max-width: 500px;
  }
}
.section-top-3 .left .common-subtitle {
  margin-bottom: 20px;
}
.section-top-3 .left .common-subtitle span {
  color: var(--theme-color-2);
}
.section-top-3 .left .common-title {
  margin-bottom: 0;
}
.section-top-3 .left .common-title h2 {
  color: var(--light-color);
  margin-bottom: 0;
}
.section-top-3 .right {
  max-width: 402px;
  width: 100%;
}
@media (min-width: 768px) and (max-width: 991px) {
  .section-top-3 .right {
    max-width: 300px;
  }
}
.section-top-3 .right p {
  color: var(--light-color);
  font-size: 18px;
  line-height: 30px;
  margin-bottom: 20px;
}
.section-top-3 .right .service-btn {
  gap: 8px;
  padding: 0;
  background: transparent;
  color: var(--theme-color-2);
}
.section-top-3 .right .service-btn:before {
  background: transparent;
}
.section-top-3 .right .service-btn:hover {
  text-decoration: underline;
}
.section-top-3 .right .service-btn .icon-wrap {
  width: auto;
  height: auto;
  color: var(--theme-color-2);
  background: transparent;
}
.section-top-3 .right .service-btn .icon-wrap:hover {
  background: transparent;
}

.what-we-do-section-2 {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left;
  position: relative;
  z-index: 1;
  border-radius: 10px;
  margin: 80px 85px 0;
  padding: 100px 0 120px 0;
  background-color: var(--theme-color-3);
}
@media (max-width: 1700px) {
  .what-we-do-section-2 {
    margin: 80px 20px 0;
  }
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .what-we-do-section-2 {
    padding: 100px 40px 120px 40px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .what-we-do-section-2 {
    padding: 80px 40px 100px 40px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .what-we-do-section-2 {
    padding: 80px 20px 100px 20px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .what-we-do-section-2 {
    padding: 80px 20px 100px 20px;
  }
}
@media (max-width: 767px) {
  .what-we-do-section-2 {
    padding: 80px 10px 80px 10px;
    margin: 80px 15px 0;
  }
}
.what-we-do-section-2 .shape {
  position: absolute;
  top: 0;
  right: 12%;
  z-index: -1;
}
.what-we-do-section-2 .we-do-card {
  overflow: hidden;
  background-color: var(--white-color);
  border-radius: 10px;
}
.what-we-do-section-2 .we-do-card:hover .card-content i {
  color: var(--theme-color-3);
}
.what-we-do-section-2 .we-do-card:hover .card-content i span {
  color: var(--theme-color-2);
}
.what-we-do-section-2 .we-do-card:hover .card-thumb img {
  overflow: hidden;
  transform: scale(1.1);
}
.what-we-do-section-2 .we-do-card .card-content {
  padding: 30px;
}
.what-we-do-section-2 .we-do-card .card-content i {
  color: var(--theme-color-2);
  font-size: 40px;
  position: relative;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.what-we-do-section-2 .we-do-card .card-content i span {
  font-size: 14px;
  color: var(--theme-color-3);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.what-we-do-section-2 .we-do-card .card-content h5 {
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: var(--theme-color-3);
  margin-bottom: 20px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .what-we-do-section-2 .we-do-card .card-content h5 {
    font-size: 22px;
  }
}
@media (max-width: 767px) {
  .what-we-do-section-2 .we-do-card .card-content h5 {
    font-size: 20px;
  }
}
.what-we-do-section-2 .we-do-card .card-thumb {
  position: relative;
}
.what-we-do-section-2 .we-do-card .card-thumb img {
  border-radius: 10px;
}
.what-we-do-section-2 .we-do-card .card-thumb .circled-btn {
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  text-align: center;
  color: var(--body-color);
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F8F7F0;
  border-radius: 100%;
  border: 2px solid var(--white-color);
  position: absolute;
  top: 0;
  right: 30px;
}
.what-we-do-section-2 .we-do-card .card-thumb .circled-btn p {
  margin-bottom: 0;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.what-we-do-section-2 .we-do-card .card-thumb .circled-btn .icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: var(--theme-color-2);
  font-size: 24px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.what-we-do-section-2 .we-do-card .card-thumb .circled-btn:hover {
  color: var(--theme-color-2);
  background-color: var(--theme-color-3);
  border: 2px solid var(--theme-color-2);
}
.what-we-do-section-2 .we-do-card .card-thumb .circled-btn:hover p {
  opacity: 0;
}
.what-we-do-section-2 .we-do-card .card-thumb .circled-btn:hover .icon {
  opacity: 1;
  visibility: visible;
}

.whatwedo-slider-active {
  margin-right: -280px;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .whatwedo-slider-active {
    margin-right: -75px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .whatwedo-slider-active {
    margin-right: 0;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .whatwedo-slider-active {
    margin-right: 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .whatwedo-slider-active {
    margin-right: 0;
  }
}
@media (max-width: 767px) {
  .whatwedo-slider-active {
    margin-right: 0;
  }
}
.whatwedo-slider-active .whatwedo-slider-bottom {
  display: flex;
  align-items: center;
  gap: 80px;
  margin-top: 60px;
  width: 100%;
}
@media (min-width: 768px) and (max-width: 991px) {
  .whatwedo-slider-active .whatwedo-slider-bottom {
    margin-top: 40px;
    gap: 40px;
  }
}
@media (max-width: 767px) {
  .whatwedo-slider-active .whatwedo-slider-bottom {
    margin-top: 40px;
    gap: 40px;
  }
}
.whatwedo-slider-active .whatwedo-slider-bottom .whatwedo-navigation {
  display: flex;
  align-items: center;
  gap: 10px;
}
.whatwedo-slider-active .whatwedo-slider-bottom .whatwedo-pagination-wrap {
  width: 100%;
}
@media (max-width: 767px) {
  .whatwedo-slider-active .whatwedo-slider-bottom .whatwedo-pagination-wrap {
    display: none;
  }
}
.whatwedo-slider-active .whatwedo-button-prev,
.whatwedo-slider-active .whatwedo-button-next {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2.35px);
  border-radius: 100px;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.whatwedo-slider-active .whatwedo-button-prev:hover,
.whatwedo-slider-active .whatwedo-button-next:hover {
  color: var(--theme-color-3);
  background: var(--theme-color-2);
  border-color: var(--theme-color-2);
}
.whatwedo-slider-active .whatwedo-pagination {
  height: 5px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
  display: flex;
  width: calc(100% - 280px);
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .whatwedo-slider-active .whatwedo-pagination {
    width: calc(100% - 75px);
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .whatwedo-slider-active .whatwedo-pagination {
    width: 100%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .whatwedo-slider-active .whatwedo-pagination {
    width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .whatwedo-slider-active .whatwedo-pagination {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .whatwedo-slider-active .whatwedo-pagination {
    margin-top: 30px;
    width: 100%;
  }
}
.whatwedo-slider-active .whatwedo-pagination .swiper-pagination-bullet {
  flex: 1;
  border-radius: 10px;
  height: 100%;
  opacity: 1;
  background: none;
  margin: 0;
}
.whatwedo-slider-active .whatwedo-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--theme-color-2);
}

/* 19 Volunteer Css */
.contact-details {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 25px 30px;
  border: 2px solid rgba(0, 69, 64, 0.1);
  border-radius: 20px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .contact-details {
    padding: 20px 25px;
  }
}
@media (max-width: 767px) {
  .contact-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
    border: none;
  }
}
.contact-details .join-us-btn {
  display: flex;
  align-items: center;
  text-align: start;
  gap: 8px;
}
@media (max-width: 767px) {
  .contact-details .join-us-btn {
    padding: 5px 5px 5px 20px;
    border: 1.5px solid rgba(0, 69, 64, 0.1);
    border-radius: 100px;
  }
}
@media (max-width: 767px) {
  .contact-details .join-us-btn img {
    display: none;
  }
}
.contact-details .join-us-btn .review-btn {
  display: flex;
  align-items: center;
  text-align: start;
  gap: 8px;
}
.contact-details .join-us-btn .review-btn:hover i {
  background: var(--theme-color-2);
  border-color: var(--theme-color-2);
  color: var(--white-color);
}
.contact-details .join-us-btn .review-btn span {
  color: var(--theme-color-3);
  max-width: 94px;
  font-weight: 600;
  width: 100%;
  margin-left: 12px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .contact-details .join-us-btn .review-btn span {
    line-height: 24px;
  }
}
@media (max-width: 767px) {
  .contact-details .join-us-btn .review-btn span {
    line-height: 20px;
  }
}
@media (max-width: 767px) {
  .contact-details .join-us-btn .review-btn span {
    margin-left: 0;
    max-width: 100%;
    line-height: 18px;
  }
}
.contact-details .join-us-btn .review-btn i {
  color: var(--theme-color-3);
  font-size: 17px;
  padding: 15px 16px;
  border: 2px solid rgba(0, 69, 64, 0.1);
  border-radius: 100px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .contact-details .join-us-btn .review-btn i {
    padding: 10px 11px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .contact-details .join-us-btn .review-btn i {
    padding: 10px 11px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .contact-details .join-us-btn .review-btn i {
    padding: 5px 6px;
  }
}
@media (max-width: 767px) {
  .contact-details .join-us-btn .review-btn i {
    padding: 5px 6px;
  }
}

@media (min-width: 1200px) {
  .form-row {
    --bs-gutter-x: 20px;
  }
}

.input-wrap {
  margin-bottom: 20px;
}
.input-wrap input {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: var(--theme-color-3);
  padding: 15px 20px;
  background: #f8f7f0;
  border-radius: 12px;
  border: 2px solid transparent;
  outline: none;
  width: 100%;
}
.input-wrap input:focus {
  border: 2px solid var(--theme-color-3);
  background: transparent;
}
.input-wrap input::-webkit-input-placeholder {
  color: #868681;
}
.input-wrap input:-moz-placeholder {
  color: #868681;
}
.input-wrap input::-moz-placeholder {
  color: #868681;
}
.input-wrap input:-ms-input-placeholder {
  color: #868681;
}
.input-wrap textarea {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: var(--theme-color-3);
  padding: 15px 20px;
  background: #f8f7f0;
  border-radius: 12px;
  border: 2px solid transparent;
  outline: none;
  width: 100%;
  height: 160px;
}
.input-wrap textarea:focus {
  border: 2px solid var(--theme-color-3);
  background: transparent;
}
.input-wrap textarea::-webkit-input-placeholder {
  color: #868681;
}
.input-wrap textarea:-moz-placeholder {
  color: #868681;
}
.input-wrap textarea::-moz-placeholder {
  color: #868681;
}
.input-wrap textarea:-ms-input-placeholder {
  color: #868681;
}

.select-wrap {
  position: relative;
}
.select-wrap select {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: #868681;
  padding: 15px 20px;
  background: #f8f7f0;
  border-radius: 12px;
  border: 2px solid transparent;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
}
.select-wrap select:focus {
  border: 2px solid var(--theme-color-3);
  background: transparent;
  color: var(--theme-color-3);
}
.select-wrap .select-icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  right: 18px;
}
.select-wrap .select-icon i {
  color: #868681;
}

.input-checkbox {
  margin-bottom: 25px;
}
.input-checkbox input {
  display: none;
}
.input-checkbox input:checked + label .check-mark {
  background: var(--theme-color-2);
}
.input-checkbox input:checked + label .check-mark:after {
  opacity: 1;
}
.input-checkbox label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  font-size: 17px;
  line-height: 28px;
  color: #868681;
}
.input-checkbox label .check-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid #868681;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  border-radius: 3px;
}
.input-checkbox label .check-mark:after {
  content: "\f00c";
  font-family: var(--icon-font);
  font-size: 12px;
  font-weight: 700;
  color: var(--theme-color-3);
  opacity: 0;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.input-button button {
  border: none;
}

.v-summary-content {
  border-top: 1px solid rgba(0, 69, 64, 0.1);
  padding-top: 50px;
}
.v-summary-content h4 {
  font-weight: 500;
  font-size: 36px;
  line-height: 48px;
  color: #004540;
  margin-bottom: 15px;
}
.v-summary-content .content {
  display: flex;
  gap: 66px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .v-summary-content .content {
    flex-direction: column;
    gap: 20px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .v-summary-content .content {
    flex-direction: column;
    gap: 20px;
  }
}
@media (max-width: 767px) {
  .v-summary-content .content {
    flex-direction: column;
    gap: 20px;
  }
}
.v-summary-content .content p {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: #868681;
  max-width: 696px;
}
.v-summary-content .content .info-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v-summary-content .content .info-wrapper .info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.v-summary-content .content .info-wrapper .info .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  width: 18px;
  height: 18px;
  border-radius: 100%;
  background: var(--theme-color-3);
  color: var(--theme-color-2);
}
.v-summary-content .content .info-wrapper .info .icon i {
  font-size: 10px;
}
.v-summary-content .content .info-wrapper .info p {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: #004540;
}

.why-us-section {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.why-us-section.style-2 {
  margin-bottom: -155px;
}
.why-us-section .c-shape-1 {
  position: absolute;
  z-index: -1;
  right: -26%;
  bottom: -40%;
}

/* 20 Why Us Css */
.why-us-section {
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section {
    background-size: contain;
  }
}
.why-us-section .left {
  width: 100%;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section .left {
    width: 76%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section .left {
    width: 96%;
  }
}
.why-us-section .thumb {
  height: auto;
  position: relative;
}
.why-us-section .thumb .thumb-1 {
  position: relative;
  margin-bottom: 250px;
  text-align: end;
  z-index: 1;
}
@media (max-width: 767px) {
  .why-us-section .thumb .thumb-1 {
    width: 50%;
    margin: 0 60px 120px auto;
  }
}
.why-us-section .thumb .thumb-1 > img {
  border-radius: 10px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section .thumb .thumb-1 > img {
    width: 60%;
  }
}
.why-us-section .thumb .thumb-1 .s-shape-1 {
  position: absolute;
  top: 60px;
  right: -16px;
  z-index: -1;
}
@media (max-width: 767px) {
  .why-us-section .thumb .thumb-1 .s-shape-1 {
    width: 70%;
    top: 40px;
  }
}
.why-us-section .thumb .thumb-2 {
  position: absolute;
  top: 40%;
  left: -16px;
  z-index: 2;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section .thumb .thumb-2 {
    left: 32px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section .thumb .thumb-2 {
    left: 66px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section .thumb .thumb-2 {
    left: 20px;
  }
}
@media (max-width: 767px) {
  .why-us-section .thumb .thumb-2 {
    width: 42%;
    left: 8px;
  }
}
.why-us-section .thumb .thumb-2 img {
  border-radius: 10px;
  border: 5px solid var(--white-color);
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section .thumb .thumb-2 img {
    width: 70%;
  }
}
.why-us-section .thumb .thumb-3 {
  position: absolute;
  bottom: -225px;
  right: 10px;
  z-index: 2;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section .thumb .thumb-3 {
    bottom: -168px;
    right: 20px;
    text-align: end;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section .thumb .thumb-3 {
    bottom: -225px;
    right: -30px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section .thumb .thumb-3 {
    bottom: -225px;
    right: -30px;
  }
}
@media (max-width: 767px) {
  .why-us-section .thumb .thumb-3 {
    bottom: -122px;
    right: 38px;
    text-align: end;
    width: 44%;
  }
}
.why-us-section .thumb .thumb-3 img {
  border-radius: 10px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section .thumb .thumb-3 img {
    width: 75%;
  }
}
.why-us-section .thumb .thumb-3 .shape-wrapped-thumb {
  position: relative;
}
.why-us-section .thumb .thumb-3 .shape-wrapped-thumb .s-shape-1 {
  position: absolute;
  bottom: 0;
  left: 0;
}
.why-us-section .thumb .thumb-3 .shape-wrapped-thumb .s-shape-2 {
  position: absolute;
  bottom: -25px;
  left: -35px;
  z-index: -1;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section .thumb .thumb-3 .shape-wrapped-thumb .s-shape-2 {
    bottom: -24px;
    left: 34px;
  }
}

@media (min-width: 1400px) {
  .why-us-content {
    padding-left: 20px;
  }
}
.why-us-content .text {
  margin-bottom: 20px;
}
.why-us-content .annual-donation-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (max-width: 767px) {
  .why-us-content .annual-donation-wrap {
    flex-direction: column;
    align-items: start;
    gap: 14px;
  }
}
.why-us-content .annual-donation-wrap .annual-donation {
  display: flex;
  align-items: center;
  gap: 15px;
}
.why-us-content .annual-donation-wrap .annual-donation img {
  width: 60px;
  height: 60px;
  padding: 17px 15px;
  border-radius: 100%;
  border: 2px solid rgba(0, 69, 64, 0.1);
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-content .annual-donation-wrap .annual-donation img {
    width: 50px;
    height: 50px;
    padding: 12px 10px;
  }
}
@media (max-width: 767px) {
  .why-us-content .annual-donation-wrap .annual-donation img {
    width: 40px;
    height: 40px;
    padding: 10px 8px;
  }
}
.why-us-content .annual-donation-wrap .annual-donation p {
  margin-bottom: 5px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-content .annual-donation-wrap .annual-donation p {
    margin-bottom: 0;
    line-height: 1;
  }
}
@media (max-width: 767px) {
  .why-us-content .annual-donation-wrap .annual-donation p {
    line-height: 1;
    margin-bottom: 0;
  }
}
.why-us-content .annual-donation-wrap .annual-donation h5 {
  margin-bottom: 0;
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-content .annual-donation-wrap .annual-donation h5 {
    font-size: 18px;
    line-height: 1.5;
  }
}
@media (max-width: 767px) {
  .why-us-content .annual-donation-wrap .annual-donation h5 {
    line-height: 1.2;
    font-size: 18px;
  }
}
.why-us-content .annual-donation-wrap .video-btn {
  border: 1px solid rgba(0, 69, 64, 0.15);
  background: var(--white-color);
  max-height: 60px;
}
.why-us-content .annual-donation-wrap .video-btn .icon-wrap .icon {
  width: 12px;
  color: var(--theme-color-2);
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-content .annual-donation-wrap .video-btn .icon-wrap .icon {
    width: 8px;
  }
}
@media (max-width: 767px) {
  .why-us-content .annual-donation-wrap .video-btn .icon-wrap .icon {
    width: 7px;
  }
}
.why-us-content .annual-donation-wrap .video-btn:hover .icon-wrap .icon {
  color: var(--theme-color-3);
}

.services {
  display: flex;
  align-items: center;
  gap: 70px;
  margin-bottom: 40px;
}
@media (max-width: 767px) {
  .services {
    flex-direction: column;
    align-items: start;
    margin-bottom: 30px;
    gap: 15px;
  }
}
.services .service-left,
.services .service-right {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.services .service {
  display: flex;
  align-items: center;
  gap: 10px;
}
.services .service i {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background: var(--theme-color-3);
  color: var(--theme-color-2);
}

.why-us-section-2 {
  position: relative;
  z-index: 1;
  overflow-x: clip;
}
.why-us-section-2 .c-shape-1 {
  position: absolute;
  right: -30%;
  bottom: -50%;
  z-index: -1;
}
.why-us-section-2 .why-us-section-2-bg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 722px;
  z-index: -1;
  display: flex;
  justify-content: space-between;
  border-radius: 0 0 100px 100px;
  overflow: hidden;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-2 .why-us-section-2-bg {
    border-radius: 0 0 50px 50px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-2 .why-us-section-2-bg {
    border-radius: 0 0 50px 50px;
  }
}
@media (max-width: 767px) {
  .why-us-section-2 .why-us-section-2-bg {
    display: none;
  }
}
.why-us-section-2 .why-us-section-2-bg .left-img {
  width: 100%;
  max-width: 654px;
  height: 100%;
}
.why-us-section-2 .why-us-section-2-bg .left-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.why-us-section-2 .why-us-section-2-bg .right-img {
  width: 100%;
  max-width: 654px;
  height: 100%;
}
.why-us-section-2 .why-us-section-2-bg .right-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.why-us-section-2 .thumb {
  height: auto;
  position: relative;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-2 .thumb {
    margin: 0 90px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-2 .thumb {
    margin: 0 14px;
  }
}
.why-us-section-2 .thumb .thumb-1 {
  position: relative;
  margin-bottom: 250px;
  text-align: end;
  z-index: 1;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-2 .thumb .thumb-1 {
    margin-bottom: 280px;
  }
}
@media (max-width: 767px) {
  .why-us-section-2 .thumb .thumb-1 {
    width: 50%;
    margin: 0 70px 140px auto;
  }
}
.why-us-section-2 .thumb .thumb-1 > img {
  border-radius: 10px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-2 .thumb .thumb-1 > img {
    width: 60%;
  }
}
.why-us-section-2 .thumb .thumb-1 .s-shape {
  position: absolute;
  top: 50px;
  left: 35%;
  z-index: -1;
}
.why-us-section-2 .thumb .thumb-2 {
  position: absolute;
  top: 48%;
  left: -20px;
  z-index: 2;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-2 .thumb .thumb-2 {
    left: 42px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-2 .thumb .thumb-2 {
    left: 66px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-2 .thumb .thumb-2 {
    left: 20px;
  }
}
@media (max-width: 767px) {
  .why-us-section-2 .thumb .thumb-2 {
    width: 42%;
    left: 0;
  }
}
.why-us-section-2 .thumb .thumb-2 img {
  border-radius: 10px;
  border: 5px solid var(--white-color);
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-2 .thumb .thumb-2 img {
    width: 70%;
  }
}
.why-us-section-2 .thumb .thumb-2.style-2 {
  top: 60%;
  left: 45px;
}
.why-us-section-2 .thumb .thumb-2.style-2 .experience-shape {
  position: absolute;
  bottom: 80px;
  right: -160px;
  z-index: 3;
  transform: rotate(15deg);
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid #ffffff;
  box-shadow: 0 21px 40px 13px rgba(133, 191, 24, 0.08);
  backdrop-filter: blur(7.7px);
}
.why-us-section-2 .thumb .thumb-3 {
  position: absolute;
  bottom: -235px;
  right: 4px;
  z-index: 2;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-2 .thumb .thumb-3 {
    bottom: -170px;
    right: 10px;
    text-align: end;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-2 .thumb .thumb-3 {
    bottom: -225px;
    right: 10px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-2 .thumb .thumb-3 {
    bottom: -225px;
    right: -30px;
  }
}
@media (max-width: 767px) {
  .why-us-section-2 .thumb .thumb-3 {
    bottom: -128px;
    right: 38px;
    text-align: end;
    width: 44%;
  }
}
.why-us-section-2 .thumb .thumb-3 img {
  border-radius: 10px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-2 .thumb .thumb-3 img {
    width: 75%;
  }
}
.why-us-section-2 .thumb .thumb-3 .shape-wrapped-thumb {
  position: relative;
}
.why-us-section-2 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 20px 25px;
  border: 4px solid var(--white-color);
  background-color: var(--theme-color-2);
  border-radius: 12px;
  position: absolute;
  top: -70px;
  left: -190px;
  z-index: 3;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-2 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape {
    gap: 10px;
    left: -70px;
    padding: 15px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-2 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape {
    gap: 10px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-2 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape {
    gap: 10px;
  }
}
@media (max-width: 767px) {
  .why-us-section-2 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape {
    left: -100px;
    padding: 15px;
    gap: 10px;
  }
}
.why-us-section-2 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape h3 {
  font-weight: 700;
  font-size: 62px;
  line-height: 86%;
  color: var(--theme-color-3);
  margin-bottom: 0;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-2 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape h3 {
    font-size: 52px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-2 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape h3 {
    font-size: 44px;
  }
}
@media (max-width: 767px) {
  .why-us-section-2 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape h3 {
    font-size: 40px;
  }
}
.why-us-section-2 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape p {
  max-width: 92px;
  width: 100%;
  font-weight: 600;
  font-size: 17px;
  line-height: 26px;
  color: var(--theme-color-3);
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-2 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape p {
    font-size: 16px;
    line-height: 1.4;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-2 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape p {
    font-size: 16px;
    line-height: 1.4;
  }
}
@media (max-width: 767px) {
  .why-us-section-2 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape p {
    font-size: 16px;
    line-height: 1.2;
  }
}

.experience-shape {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 20px 25px;
  border: 4px solid var(--white-color);
  background-color: var(--theme-color-2);
  border-radius: 12px;
}
.experience-shape h3 {
  font-weight: 700;
  font-size: 62px;
  line-height: 86%;
  color: var(--theme-color-3);
  margin-bottom: 0;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .experience-shape h3 {
    font-size: 52px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .experience-shape h3 {
    font-size: 44px;
  }
}
@media (max-width: 767px) {
  .experience-shape h3 {
    font-size: 40px;
  }
}
.experience-shape p {
  max-width: 92px;
  width: 100%;
  font-weight: 600;
  font-size: 17px;
  line-height: 26px;
  color: var(--theme-color-3);
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .experience-shape p {
    font-size: 16px;
    line-height: 1.4;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .experience-shape p {
    font-size: 16px;
    line-height: 1.4;
  }
}
@media (max-width: 767px) {
  .experience-shape p {
    font-size: 16px;
    line-height: 1.2;
  }
}

.shape-wrapped-thumb .experience-shape {
  position: absolute;
  top: -70px;
  left: -190px;
  z-index: 3;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .shape-wrapped-thumb .experience-shape {
    gap: 10px;
    left: -70px;
    padding: 15px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .shape-wrapped-thumb .experience-shape {
    gap: 10px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .shape-wrapped-thumb .experience-shape {
    gap: 10px;
  }
}
@media (max-width: 767px) {
  .shape-wrapped-thumb .experience-shape {
    gap: 10px;
  }
}

.why-us-section-3 {
  background-position: bottom right;
  background-size: auto;
  background-repeat: no-repeat;
  overflow: hidden;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .why-us-section-3 {
    background-position: bottom right -15%;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-3 {
    background-position: bottom right -35%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-3 {
    background-position: bottom right -35%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-3 {
    background-position: bottom right -110%;
  }
}
@media (max-width: 767px) {
  .why-us-section-3 {
    background-position: bottom right 80%;
  }
}
.why-us-section-3 .thumb-wrapper {
  position: relative;
  z-index: 1;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-3 .thumb-wrapper {
    margin: 0 60px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-3 .thumb-wrapper {
    margin: 0 130px 140px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-3 .thumb-wrapper {
    margin: 0 10px 120px;
  }
}
@media (max-width: 767px) {
  .why-us-section-3 .thumb-wrapper {
    margin: 0 0 140px 180px;
  }
}
@media (max-width: 375px) {
  .why-us-section-3 .thumb-wrapper {
    margin: 0 0 120px 160px;
  }
}
.why-us-section-3 .thumb-wrapper .thumb-1 {
  text-align: end;
}
.why-us-section-3 .thumb-wrapper .thumb-1 img {
  border-radius: 10px;
  border: 4px solid var(--white-color);
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-3 .thumb-wrapper .thumb-1 img {
    width: 60%;
  }
}
.why-us-section-3 .thumb-wrapper .thumb-1 .experience-shape {
  position: absolute;
  bottom: -50px;
  right: -30px;
  z-index: 3;
  transform: rotate(15deg);
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid #ffffff;
  box-shadow: 0 21px 40px 13px rgba(133, 191, 24, 0.08);
  backdrop-filter: blur(7.7px);
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-3 .thumb-wrapper .thumb-1 .experience-shape {
    bottom: -60px;
    right: -40px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-3 .thumb-wrapper .thumb-1 .experience-shape {
    bottom: -55px;
    right: -25px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-3 .thumb-wrapper .thumb-1 .experience-shape {
    bottom: -45px;
    right: 0;
  }
}
@media (max-width: 767px) {
  .why-us-section-3 .thumb-wrapper .thumb-1 .experience-shape {
    bottom: -60px;
    transform: rotate(0deg);
    right: 0;
  }
}
@media (max-width: 375px) {
  .why-us-section-3 .thumb-wrapper .thumb-1 .experience-shape {
    bottom: -82px;
  }
}
.why-us-section-3 .thumb-wrapper .thumb-2 {
  position: absolute;
  top: 80px;
  left: 120px;
  z-index: -1;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-3 .thumb-wrapper .thumb-2 {
    width: 60%;
    left: 10px;
  }
}
@media (max-width: 767px) {
  .why-us-section-3 .thumb-wrapper .thumb-2 {
    left: -62%;
    width: 100%;
  }
}
.why-us-section-3 .thumb-wrapper .thumb-2 > img:first-child {
  border-radius: 150px 150px 10px 10px;
  border: 4px solid var(--white-color);
}
.why-us-section-3 .thumb-wrapper .award-winner-shape {
  background: rgba(255, 255, 255, 0.45);
  border: 2px solid #ffffff;
  box-shadow: 0 24px 47px 15px rgba(133, 191, 24, 0.08);
  backdrop-filter: blur(27.0874px);
  border-radius: 8px;
  padding: 20px 30px;
  max-width: 270px;
  width: 100%;
  position: absolute;
  top: 54%;
  left: -6%;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-3 .thumb-wrapper .award-winner-shape {
    padding: 15px 20px;
    max-width: 222px;
    left: -26%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-3 .thumb-wrapper .award-winner-shape {
    padding: 15px 20px;
    max-width: 222px;
    left: -2%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-3 .thumb-wrapper .award-winner-shape {
    padding: 15px 20px;
    max-width: 222px;
    left: -2%;
  }
}
@media (max-width: 767px) {
  .why-us-section-3 .thumb-wrapper .award-winner-shape {
    padding: 15px;
    max-width: 222px;
    left: -90%;
    top: 44%;
  }
}
.why-us-section-3 .thumb-wrapper .award-winner-shape .top {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  margin-bottom: 20px;
}
@media (max-width: 1399px) {
  .why-us-section-3 .thumb-wrapper .award-winner-shape .top img {
    width: 30px;
  }
}
.why-us-section-3 .thumb-wrapper .award-winner-shape .top p {
  color: var(--theme-color-3);
  font-style: normal;
  font-weight: 600;
  font-size: 17px;
  line-height: 26px;
}
@media (max-width: 1399px) {
  .why-us-section-3 .thumb-wrapper .award-winner-shape .top p {
    font-size: 16px;
    line-height: 1.4;
  }
}
.why-us-section-3 .thumb-wrapper .award-winner-shape .authors img {
  width: 140px;
}
.why-us-section-3 .thumb-wrapper .shape-1 {
  width: 50%;
  position: absolute;
  bottom: -80px;
  right: -100px;
  z-index: -1;
}
.why-us-section-3 .thumb-wrapper .shape-2 {
  position: absolute;
  top: 9%;
  left: 30%;
}
@media (max-width: 767px) {
  .why-us-section-3 .thumb-wrapper .shape-2 {
    top: 20%;
    left: -40%;
    width: 20%;
  }
}

.why-us-content-3 .text {
  width: 80%;
}
@media (max-width: 767px) {
  .why-us-content-3 .text {
    width: 100%;
  }
}

.why-us-section-4 {
  position: relative;
  overflow: hidden;
}
.why-us-section-4 .shape {
  position: absolute;
  right: 0;
  bottom: -68%;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-4 .shape {
    bottom: -77%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-4 .shape {
    bottom: -46%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-4 .shape {
    bottom: -37%;
    text-align: end;
  }
}
@media (max-width: 767px) {
  .why-us-section-4 .shape {
    text-align: end;
    bottom: -31%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-4 .shape img {
    width: 80%;
  }
}
@media (max-width: 767px) {
  .why-us-section-4 .shape img {
    width: 60%;
  }
}
.why-us-section-4 .icon-1 {
  position: absolute;
  left: 16%;
  top: 22%;
  z-index: 5;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .why-us-section-4 .icon-1 {
    left: 4%;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-4 .icon-1 {
    left: 9%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-4 .icon-1 {
    left: 14%;
    top: 17%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-4 .icon-1 {
    left: 12%;
    top: 17%;
  }
}
@media (max-width: 767px) {
  .why-us-section-4 .icon-1 {
    left: 8%;
    top: 11%;
  }
}
@media (max-width: 1399px) {
  .why-us-section-4 .icon-1 img {
    width: 80%;
  }
}
@media (max-width: 767px) {
  .why-us-section-4 .icon-1 img {
    width: 60%;
  }
}
.why-us-section-4 .icon-2 {
  position: absolute;
  right: 21%;
  top: 10%;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .why-us-section-4 .icon-2 {
    right: 11%;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-4 .icon-2 {
    right: 11%;
    top: 12%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-4 .icon-2 {
    right: 19%;
    top: 3%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-4 .icon-2 {
    right: -1%;
    top: 3%;
  }
}
@media (max-width: 767px) {
  .why-us-section-4 .icon-2 {
    right: 1%;
    top: 2%;
  }
}
@media (max-width: 1399px) {
  .why-us-section-4 .icon-2 img {
    width: 80%;
  }
}
@media (max-width: 767px) {
  .why-us-section-4 .icon-2 img {
    width: 60%;
  }
}
.why-us-section-4 .left {
  width: 100%;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-4 .left {
    width: 76%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-4 .left {
    width: 96%;
  }
}
.why-us-section-4 .thumb {
  height: auto;
  position: relative;
}
.why-us-section-4 .thumb .thumb-1 {
  position: relative;
  margin-bottom: 250px;
  text-align: end;
  z-index: 1;
}
@media (max-width: 767px) {
  .why-us-section-4 .thumb .thumb-1 {
    width: 50%;
    margin: 0 60px 120px auto;
  }
}
@media (max-width: 767px) {
  .why-us-section-4 .thumb .thumb-1 {
    width: 50%;
    margin: 0 60px 120px auto;
  }
}
.why-us-section-4 .thumb .thumb-1 > img {
  border-radius: 10px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-4 .thumb .thumb-1 > img {
    width: 60%;
  }
}
.why-us-section-4 .thumb .thumb-1 .s-shape-1 {
  position: absolute;
  top: 60px;
  right: -16px;
  z-index: -1;
}
@media (max-width: 767px) {
  .why-us-section-4 .thumb .thumb-1 .s-shape-1 {
    width: 70%;
    top: 40px;
  }
}
.why-us-section-4 .thumb .thumb-2 {
  position: absolute;
  top: 40%;
  left: -16px;
  z-index: 2;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-4 .thumb .thumb-2 {
    left: 32px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-4 .thumb .thumb-2 {
    left: 66px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-4 .thumb .thumb-2 {
    left: 20px;
  }
}
@media (max-width: 767px) {
  .why-us-section-4 .thumb .thumb-2 {
    width: 44%;
    left: 0;
  }
}
.why-us-section-4 .thumb .thumb-2 img {
  border-radius: 10px;
  border: 5px solid var(--white-color);
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-4 .thumb .thumb-2 img {
    width: 70%;
  }
}
.why-us-section-4 .thumb .thumb-3 {
  position: absolute;
  bottom: -225px;
  right: 10px;
  z-index: 2;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-4 .thumb .thumb-3 {
    bottom: -168px;
    right: 20px;
    text-align: end;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-4 .thumb .thumb-3 {
    bottom: -225px;
    right: -30px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-4 .thumb .thumb-3 {
    bottom: -225px;
    right: -30px;
  }
}
@media (max-width: 767px) {
  .why-us-section-4 .thumb .thumb-3 {
    bottom: -122px;
    right: 38px;
    text-align: end;
    width: 44%;
  }
}
.why-us-section-4 .thumb .thumb-3 img {
  border-radius: 10px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-4 .thumb .thumb-3 img {
    width: 75%;
  }
}

@media (min-width: 1400px) {
  .why-us-content-2 {
    padding-left: 40px;
  }
}
.why-us-content-2 .text {
  width: 86%;
  margin-bottom: 20px;
}
.why-us-content-2 .annual-donation-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (max-width: 767px) {
  .why-us-content-2 .annual-donation-wrap {
    flex-direction: column;
    align-items: start;
    gap: 14px;
  }
}
.why-us-content-2 .annual-donation-wrap .annual-donation {
  display: flex;
  align-items: center;
  gap: 15px;
}
.why-us-content-2 .annual-donation-wrap .annual-donation img {
  width: 60px;
  height: 60px;
  padding: 17px 15px;
  border-radius: 100%;
  border: 2px solid rgba(0, 69, 64, 0.1);
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-content-2 .annual-donation-wrap .annual-donation img {
    width: 50px;
    height: 50px;
    padding: 12px 10px;
  }
}
@media (max-width: 767px) {
  .why-us-content-2 .annual-donation-wrap .annual-donation img {
    width: 40px;
    height: 40px;
    padding: 10px 8px;
  }
}
.why-us-content-2 .annual-donation-wrap .annual-donation p {
  margin-bottom: 5px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-content-2 .annual-donation-wrap .annual-donation p {
    margin-bottom: 0;
    line-height: 1;
  }
}
@media (max-width: 767px) {
  .why-us-content-2 .annual-donation-wrap .annual-donation p {
    line-height: 1;
    margin-bottom: 0;
  }
}
.why-us-content-2 .annual-donation-wrap .annual-donation h5 {
  margin-bottom: 0;
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-content-2 .annual-donation-wrap .annual-donation h5 {
    font-size: 18px;
    line-height: 1.5;
  }
}
@media (max-width: 767px) {
  .why-us-content-2 .annual-donation-wrap .annual-donation h5 {
    line-height: 1.2;
    font-size: 18px;
  }
}
.why-us-content-2 .annual-donation-wrap .e-primary-btn {
  background: var(--theme-color-3);
  border: none;
  color: var(--theme-color-2);
}
.why-us-content-2 .annual-donation-wrap .e-primary-btn:before {
  background: var(--theme-color-2);
}
.why-us-content-2 .annual-donation-wrap .e-primary-btn .icon-wrap {
  background: var(--theme-color-2);
  color: var(--theme-color-3);
}
.why-us-content-2 .annual-donation-wrap .e-primary-btn:hover {
  color: var(--theme-color-3);
}
.why-us-content-2 .annual-donation-wrap .e-primary-btn:hover .icon-wrap {
  background: var(--theme-color-3);
  color: var(--theme-color-2);
}

.why-us-section-5 {
  position: relative;
  overflow: hidden;
}
.why-us-section-5 .shape {
  position: absolute;
  left: 0;
  bottom: -67%;
  transform: scaleX(-1);
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-5 .shape {
    bottom: -72%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-5 .shape {
    bottom: -46%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-5 .shape {
    bottom: -34%;
    text-align: end;
  }
}
@media (max-width: 767px) {
  .why-us-section-5 .shape {
    text-align: end;
    bottom: -29%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-5 .shape img {
    width: 80%;
  }
}
@media (max-width: 767px) {
  .why-us-section-5 .shape img {
    width: 60%;
  }
}
.why-us-section-5 .icon-1 {
  position: absolute;
  right: 46%;
  top: 28%;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-5 .icon-1 {
    right: 37%;
    top: 29%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-5 .icon-1 {
    right: 78%;
    top: 55%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-5 .icon-1 {
    right: 81%;
    top: 54%;
  }
}
@media (max-width: 767px) {
  .why-us-section-5 .icon-1 {
    right: 82%;
    top: 65%;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-5 .icon-1 img {
    width: 80%;
  }
}
@media (max-width: 767px) {
  .why-us-section-5 .icon-1 img {
    width: 60%;
  }
}
.why-us-section-5 .left {
  width: 100%;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-5 .left {
    width: 76%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-5 .left {
    width: 96%;
  }
}
.why-us-section-5 .thumb {
  height: auto;
  position: relative;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-5 .thumb {
    width: 80%;
  }
}
.why-us-section-5 .thumb .thumb-1 {
  position: relative;
  margin-bottom: 120px;
  text-align: end;
  z-index: 1;
}
@media (max-width: 767px) {
  .why-us-section-5 .thumb .thumb-1 {
    width: 60%;
    margin: 0 60px 120px auto;
  }
}
.why-us-section-5 .thumb .thumb-1 > img {
  border-radius: 10px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-5 .thumb .thumb-1 > img {
    width: 60%;
  }
}
.why-us-section-5 .thumb .thumb-2 {
  position: absolute;
  bottom: -27%;
  right: 42%;
  z-index: 2;
  width: 52%;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-5 .thumb .thumb-2 {
    width: 45%;
    bottom: -38%;
    right: 35%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-5 .thumb .thumb-2 {
    right: 27%;
    bottom: -30%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-5 .thumb .thumb-2 {
    right: 35%;
  }
}
@media (max-width: 767px) {
  .why-us-section-5 .thumb .thumb-2 {
    width: 50%;
    right: 47%;
    bottom: -30%;
  }
}
.why-us-section-5 .thumb .thumb-2 .btn-wrapped-thumb {
  position: relative;
}
.why-us-section-5 .thumb .thumb-2 .btn-wrapped-thumb img {
  border-radius: 10px;
  border: 5px solid var(--white-color);
}
.why-us-section-5 .thumb .thumb-2 .btn-wrapped-thumb .btn-layer-3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  width: 110px;
  height: 110px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-5 .thumb .thumb-2 .btn-wrapped-thumb .btn-layer-3 {
    width: 90px;
    height: 90px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-5 .thumb .thumb-2 .btn-wrapped-thumb .btn-layer-3 {
    width: 80px;
    height: 80px;
  }
}
@media (max-width: 767px) {
  .why-us-section-5 .thumb .thumb-2 .btn-wrapped-thumb .btn-layer-3 {
    width: 80px;
    height: 80px;
  }
}
.why-us-section-5 .thumb .thumb-2 .btn-wrapped-thumb .btn-layer-3 .play-btn {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-color-3);
  padding: 25px 20px;
  border-radius: 100%;
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  background: var(--theme-color-2);
  border: 2px solid var(--theme-color-2);
  backdrop-filter: blur(6px);
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-5 .thumb .thumb-2 .btn-wrapped-thumb .btn-layer-3 .play-btn {
    width: 65px;
    height: 65px;
    font-size: 16px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-5 .thumb .thumb-2 .btn-wrapped-thumb .btn-layer-3 .play-btn {
    width: 60px;
    height: 60px;
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .why-us-section-5 .thumb .thumb-2 .btn-wrapped-thumb .btn-layer-3 .play-btn {
    width: 60px;
    height: 60px;
    font-size: 16px;
  }
}
.why-us-section-5 .thumb .thumb-2 .btn-wrapped-thumb .btn-layer-3 .play-btn:hover {
  box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.1);
}
.why-us-section-5 .d-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
}
.why-us-section-5 .d-top p {
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: var(--theme-color-3);
  margin-bottom: 0;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.why-us-section-5 .our-progress {
  margin-bottom: 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.why-us-section-5 .progress {
  background: rgba(0, 69, 64, 0.1);
  height: 8px;
}
.why-us-section-5 .progress .progress-bar {
  background: var(--theme-color-3);
}
.why-us-section-5 .services {
  margin-bottom: 24px;
}

.why-us-section-6 {
  background-position: right, left;
  background-repeat: no-repeat, no-repeat;
  background-size: contain, contain;
}
@media (max-width: 1199px) {
  .why-us-section-6 {
    background-size: cover;
  }
}
.why-us-section-6 .thumb {
  height: auto;
  position: relative;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-6 .thumb {
    margin: 0 90px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-6 .thumb {
    margin: 0 14px;
  }
}
.why-us-section-6 .thumb .thumb-1 {
  position: relative;
  margin-bottom: 250px;
  text-align: end;
  z-index: 1;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-6 .thumb .thumb-1 {
    margin-bottom: 280px;
  }
}
@media (max-width: 767px) {
  .why-us-section-6 .thumb .thumb-1 {
    width: 50%;
    margin: 0 70px 140px auto;
  }
}
.why-us-section-6 .thumb .thumb-1 > img {
  border-radius: 10px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-6 .thumb .thumb-1 > img {
    width: 60%;
  }
}
.why-us-section-6 .thumb .thumb-1 .s-shape {
  position: absolute;
  top: 50px;
  left: 35%;
  z-index: -1;
}
.why-us-section-6 .thumb .thumb-2 {
  position: absolute;
  top: 48%;
  left: -20px;
  z-index: 2;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-6 .thumb .thumb-2 {
    left: 42px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-6 .thumb .thumb-2 {
    left: 66px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-6 .thumb .thumb-2 {
    left: 20px;
  }
}
@media (max-width: 767px) {
  .why-us-section-6 .thumb .thumb-2 {
    width: 42%;
    left: 0;
  }
}
.why-us-section-6 .thumb .thumb-2 img {
  border-radius: 10px;
  border: 5px solid var(--white-color);
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-6 .thumb .thumb-2 img {
    width: 70%;
  }
}
.why-us-section-6 .thumb .thumb-2.style-2 {
  top: 60%;
  left: 45px;
}
.why-us-section-6 .thumb .thumb-2.style-2 .experience-shape {
  position: absolute;
  bottom: 80px;
  right: -160px;
  z-index: 3;
  transform: rotate(15deg);
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid #ffffff;
  box-shadow: 0 21px 40px 13px rgba(133, 191, 24, 0.08);
  backdrop-filter: blur(7.7px);
}
.why-us-section-6 .thumb .thumb-3 {
  position: absolute;
  bottom: -235px;
  right: 4px;
  z-index: 2;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-6 .thumb .thumb-3 {
    bottom: -170px;
    right: 10px;
    text-align: end;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-6 .thumb .thumb-3 {
    bottom: -225px;
    right: 10px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-6 .thumb .thumb-3 {
    bottom: -225px;
    right: -30px;
  }
}
@media (max-width: 767px) {
  .why-us-section-6 .thumb .thumb-3 {
    bottom: -128px;
    right: 38px;
    text-align: end;
    width: 44%;
  }
}
.why-us-section-6 .thumb .thumb-3 img {
  border-radius: 10px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-6 .thumb .thumb-3 img {
    width: 75%;
  }
}
.why-us-section-6 .thumb .thumb-3 .shape-wrapped-thumb {
  position: relative;
}
.why-us-section-6 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 20px 25px;
  border: 4px solid var(--white-color);
  background-color: var(--theme-color-2);
  border-radius: 12px;
  position: absolute;
  top: -70px;
  left: -190px;
  z-index: 3;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-6 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape {
    gap: 10px;
    left: -70px;
    padding: 15px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-section-6 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape {
    gap: 10px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-6 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape {
    gap: 10px;
  }
}
@media (max-width: 767px) {
  .why-us-section-6 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape {
    left: -100px;
    padding: 15px;
    gap: 10px;
  }
}
.why-us-section-6 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape h3 {
  font-weight: 700;
  font-size: 62px;
  line-height: 86%;
  color: var(--theme-color-3);
  margin-bottom: 0;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-6 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape h3 {
    font-size: 52px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-6 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape h3 {
    font-size: 44px;
  }
}
@media (max-width: 767px) {
  .why-us-section-6 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape h3 {
    font-size: 40px;
  }
}
.why-us-section-6 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape p {
  max-width: 92px;
  width: 100%;
  font-weight: 600;
  font-size: 17px;
  line-height: 26px;
  color: var(--theme-color-3);
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-6 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape p {
    font-size: 16px;
    line-height: 1.4;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .why-us-section-6 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape p {
    font-size: 16px;
    line-height: 1.4;
  }
}
@media (max-width: 767px) {
  .why-us-section-6 .thumb .thumb-3 .shape-wrapped-thumb .experience-shape p {
    font-size: 16px;
    line-height: 1.2;
  }
}

/* 21 Service Css */
.service-card {
  background-color: #f8f7f0;
  border-radius: 10px;
  padding: 30px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.service-card:hover {
  background-color: var(--white-color);
  box-shadow: 0 35px 41.5px -16px rgba(0, 69, 64, 0.08);
  transition: all 0.3s;
}
.service-card:hover .service-top i,
.service-card:hover .service-top .circled-heading {
  background-color: var(--theme-color-3);
  border: 2px solid var(--theme-color-3);
  color: var(--theme-color-2);
  transition: all 0.3s;
}
.service-card:hover .number {
  background: #004540 !important;
}
.service-card:hover .number span {
  color: #ffe175 !important;
}
.service-card .service-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.service-card .service-top h4 {
  max-width: 118px;
  width: 100%;
  font-weight: 500;
  font-size: 28px;
  line-height: 36px;
  color: var(--theme-color-3);
  margin-bottom: 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .service-card .service-top h4 {
    font-size: 24px;
    line-height: 1.4;
  }
}
@media (max-width: 991px) {
  .service-card .service-top h4 {
    font-size: 22px;
    line-height: 1.3;
  }
}
.service-card .service-top .number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background: #f8f7f0;
  border: 2px solid var(--theme-color-2);
  border-radius: 100%;
  box-shadow: 0px 15px 32.2px -9px rgba(0, 24, 25, 0.2);
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.service-card .service-top .number span {
  font-family: var(--outfit-font);
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: #868681;
}
.service-card .service-top i,
.service-card .service-top .circled-heading {
  width: 70px;
  height: 70px;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 17px 15px;
  background-color: var(--white-color);
  border-radius: 100%;
  border: 2px solid var(--theme-color-2);
  box-shadow: 0px 15px 32.2px -9px rgba(0, 24, 25, 0.2);
}
@media (min-width: 992px) and (max-width: 1199px) {
  .service-card .service-top i,
  .service-card .service-top .circled-heading {
    font-size: 24px;
    width: 60px;
    height: 60px;
  }
}
@media (max-width: 991px) {
  .service-card .service-top i,
  .service-card .service-top .circled-heading {
    font-size: 20px;
    width: 50px;
    height: 50px;
  }
}
.service-card .service-content p {
  width: 80%;
  padding-bottom: 10px;
}
.service-card .i-shape {
  color: rgba(134, 134, 129, 0.05);
  font-size: 110px;
  position: absolute;
  z-index: -1;
  bottom: -70px;
  left: 55%;
}

.service-card-2 {
  background-color: var(--white-color);
  border-radius: 10px;
  padding: 30px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.service-card-2:hover {
  background-color: var(--white-color);
  box-shadow: 0 35px 41.5px -16px rgba(0, 69, 64, 0.08);
  transition: all 0.3s;
}
.service-card-2:hover .service-top .circled-heading {
  background-color: var(--theme-color-3);
  border: 2px solid var(--theme-color-2);
  color: var(--theme-color-2);
  transition: all 0.3s;
}
.service-card-2 .service-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.service-card-2 .service-top h4 {
  max-width: 118px;
  width: 100%;
  font-weight: 500;
  font-size: 28px;
  line-height: 36px;
  color: var(--theme-color-3);
  margin-bottom: 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .service-card-2 .service-top h4 {
    font-size: 24px;
    line-height: 1.4;
  }
}
@media (max-width: 991px) {
  .service-card-2 .service-top h4 {
    font-size: 22px;
    line-height: 1.3;
  }
}
.service-card-2 .service-top .circled-heading {
  width: 70px;
  height: 70px;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 17px 15px;
  background-color: var(--white-color);
  color: var(--body-color);
  border-radius: 100%;
  border: 2px solid var(--theme-color-2);
  box-shadow: 0px 15px 32.2px -9px rgba(0, 24, 25, 0.2);
}
@media (min-width: 992px) and (max-width: 1199px) {
  .service-card-2 .service-top .circled-heading {
    font-size: 24px;
    width: 60px;
    height: 60px;
  }
}
@media (max-width: 991px) {
  .service-card-2 .service-top .circled-heading {
    font-size: 20px;
    width: 50px;
    height: 50px;
  }
}
.service-card-2 .service-content p {
  width: 80%;
  padding-bottom: 10px;
}

.service-card-3 {
  background-color: #f8f7f0;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.service-card-3:hover {
  background-color: var(--white-color);
  box-shadow: 0 35px 41.5px -16px rgba(0, 69, 64, 0.08);
  transition: all 0.3s;
}
.service-card-3:hover .service-top i,
.service-card-3:hover .service-top .circled-heading {
  background-color: var(--theme-color-3);
  border: 2px solid var(--theme-color-3);
  color: var(--theme-color-2);
  transition: all 0.3s;
}
.service-card-3:hover .number {
  background: #004540 !important;
}
.service-card-3:hover .number span {
  color: #ffe175 !important;
}
.service-card-3 .service-top {
  display: flex;
  flex-direction: column-reverse;
  gap: 24px;
  margin-bottom: 15px;
  padding: 14px 14px 0;
}
.service-card-3 .service-top h4 {
  font-weight: 500;
  font-size: 28px;
  line-height: 36px;
  color: var(--theme-color-3);
  margin-bottom: 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .service-card-3 .service-top h4 {
    font-size: 24px;
    line-height: 1.4;
  }
}
@media (max-width: 991px) {
  .service-card-3 .service-top h4 {
    font-size: 22px;
    line-height: 1.3;
  }
}
.service-card-3 .service-top i {
  width: 70px;
  height: 70px;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 17px 15px;
  background-color: var(--white-color);
  border-radius: 100%;
  border: 2px solid var(--theme-color-2);
  box-shadow: 0px 15px 32.2px -9px rgba(0, 24, 25, 0.2);
}
@media (min-width: 992px) and (max-width: 1199px) {
  .service-card-3 .service-top i {
    font-size: 24px;
    width: 60px;
    height: 60px;
  }
}
@media (max-width: 991px) {
  .service-card-3 .service-top i {
    font-size: 20px;
    width: 50px;
    height: 50px;
  }
}
.service-card-3 .service-content p {
  width: 80%;
  padding: 0 14px 14px;
}
@media (max-width: 1399px) {
  .service-card-3 .service-content p {
    width: 100%;
  }
}
.service-card-3 .i-shape {
  position: absolute;
  z-index: -1;
  top: 15%;
  left: 58%;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .service-card-3 .i-shape {
    left: 62%;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .service-card-3 .i-shape {
    left: 54%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .service-card-3 .i-shape {
    left: 62%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .service-card-3 .i-shape {
    left: 66%;
  }
}
@media (max-width: 767px) {
  .service-card-3 .i-shape {
    left: 70%;
  }
}
.service-card-3 .i-shape h1 {
  margin-bottom: 0;
  font-family: var(--outfit-font);
  font-weight: 600;
  font-size: 100px;
  line-height: 82px;
  color: #004540;
  opacity: 0.06;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .service-card-3 .i-shape h1 {
    font-size: 90px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .service-card-3 .i-shape h1 {
    font-size: 90px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .service-card-3 .i-shape h1 {
    font-size: 80px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .service-card-3 .i-shape h1 {
    font-size: 80px;
  }
}
@media (max-width: 767px) {
  .service-card-3 .i-shape h1 {
    font-size: 80px;
  }
}

.service-slider-active {
  position: relative;
  z-index: 1;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .service-slider-active {
    padding-bottom: 80px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .service-slider-active {
    padding-bottom: 80px;
  }
}
@media (max-width: 767px) {
  .service-slider-active {
    padding-bottom: 80px;
  }
}
.service-slider-active .service-button-prev {
  position: absolute;
  left: -82px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: #FFFFFF;
  color: #868681;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
  margin-top: -50px;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .service-slider-active .service-button-prev {
    left: -25px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .service-slider-active .service-button-prev {
    left: -25px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .service-slider-active .service-button-prev {
    left: -25px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .service-slider-active .service-button-prev {
    left: 0;
    top: auto;
    bottom: 0;
    margin-top: 0;
    transform: translateY(0);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .service-slider-active .service-button-prev {
    left: 0;
    top: auto;
    bottom: 0;
    margin-top: 0;
    transform: translateY(0);
  }
}
@media (max-width: 767px) {
  .service-slider-active .service-button-prev {
    left: 0;
    top: auto;
    bottom: 0;
    margin-top: 0;
    transform: translateY(0);
  }
}
.service-slider-active .service-button-prev:hover {
  background: var(--theme-color-2);
  color: var(--theme-color-3);
}
.service-slider-active .service-button-next {
  position: absolute;
  right: -82px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: #FFFFFF;
  color: #868681;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
  margin-top: -50px;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .service-slider-active .service-button-next {
    right: -25px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .service-slider-active .service-button-next {
    right: -25px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .service-slider-active .service-button-next {
    right: 0;
    top: auto;
    bottom: 0;
    margin-top: 0;
    transform: translateY(0);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .service-slider-active .service-button-next {
    right: 0;
    top: auto;
    bottom: 0;
    margin-top: 0;
    transform: translateY(0);
  }
}
@media (max-width: 767px) {
  .service-slider-active .service-button-next {
    right: 0;
    top: auto;
    bottom: 0;
    margin-top: 0;
    transform: translateY(0);
  }
}
.service-slider-active .service-button-next:hover {
  background: var(--theme-color-2);
  color: var(--theme-color-3);
}
@media (min-width: 992px) and (max-width: 1199px) {
  .service-slider-active .service-pagination-wrap {
    padding: 0 100px;
    position: absolute;
    left: 0;
    bottom: 22px;
    width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .service-slider-active .service-pagination-wrap {
    padding: 0 100px;
    position: absolute;
    left: 0;
    bottom: 22px;
    width: 100%;
  }
}
@media (max-width: 767px) {
  .service-slider-active .service-pagination-wrap {
    padding: 0 100px;
    position: absolute;
    left: 0;
    bottom: 22px;
    width: 100%;
  }
}
.service-slider-active .service-pagination {
  height: 5px;
  border-radius: 10px;
  margin-top: 50px;
  background: rgba(255, 255, 255, 0.5);
  display: flex;
}
@media (max-width: 767px) {
  .service-slider-active .service-pagination {
    margin-top: 30px;
  }
}
.service-slider-active .service-pagination .swiper-pagination-bullet {
  flex: 1;
  border-radius: 10px;
  height: 100%;
  opacity: 1;
  background: none;
  margin: 0;
}
.service-slider-active .service-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--theme-color-2);
}

.services-section-2 {
  background: #f8f7f0;
  position: relative;
  z-index: 1;
}
.services-section-2 .shape-1 {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.services-section-2 .shape-2 {
  width: 100%;
  background: var(--white-color);
  height: 50px;
  border-radius: 10px 10px 0 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .services-section-2 .shape-2 {
    height: 40px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .services-section-2 .shape-2 {
    height: 40px;
  }
}
@media (max-width: 767px) {
  .services-section-2 .shape-2 {
    height: 30px;
  }
}

.services-section {
  position: relative;
  z-index: 1;
}
.services-section .c-shape-1 {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
}
.services-section .c-shape-2 {
  position: absolute;
  z-index: -1;
  bottom: 0;
  right: 0;
}

.process-section {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.process-section .c-shape-1 {
  position: absolute;
  z-index: -1;
  top: 35%;
  left: 50%;
  transform: translateX(-50%);
}

.section-top-9 {
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.section-top-9 .common-subtitle span {
  color: var(--body-color);
}
.section-top-9 .common-title {
  margin-bottom: 0;
}
.section-top-9 .common-title h2 {
  color: var(--theme-color-3);
}

.services-section-3 {
  position: relative;
}
.services-section-3 .icon {
  position: absolute;
  top: 25%;
  left: 10%;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .services-section-3 .icon {
    top: 8%;
    left: 25%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .services-section-3 .icon {
    top: 10%;
    left: 23%;
  }
}
@media (max-width: 767px) {
  .services-section-3 .icon {
    top: 5%;
    left: 10%;
  }
}
@media (max-width: 1399px) {
  .services-section-3 .icon img {
    width: 80%;
  }
}
@media (max-width: 1199px) {
  .services-section-3 .icon img {
    width: 70%;
  }
}
@media (max-width: 767px) {
  .services-section-3 .icon img {
    width: 60%;
  }
}

/* 22 Dust Recycling Css */
.dust-recycling-section {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 380px 0 220px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .dust-recycling-section {
    padding: 80px 0 80px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .dust-recycling-section {
    padding: 80px 0 80px;
  }
}
@media (max-width: 767px) {
  .dust-recycling-section {
    padding: 80px 0 80px;
  }
}

.btn-layer {
  margin-top: -50px;
  margin-left: -110%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .btn-layer {
    margin-left: -20%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .btn-layer {
    margin: 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .btn-layer {
    margin: 0;
  }
}
@media (max-width: 767px) {
  .btn-layer {
    margin: 0;
  }
}
.btn-layer .play-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  color: var(--light-color);
  padding: 25px 20px;
  border-radius: 100%;
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(6px);
  animation: animate-pulse 3s linear infinite;
}
.btn-layer .play-btn:hover {
  color: var(--theme-color-3);
  background: var(--theme-color-2);
  border-color: var(--theme-color-2);
}
@media (min-width: 768px) and (max-width: 991px) {
  .btn-layer .play-btn {
    width: 80px;
    height: 80px;
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .btn-layer .play-btn {
    width: 70px;
    height: 70px;
    font-size: 18px;
  }
}

.btn-layer-2 {
  margin-top: -60px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .btn-layer-2 {
    margin-top: 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .btn-layer-2 {
    margin-top: 0;
  }
}
@media (max-width: 767px) {
  .btn-layer-2 {
    margin-top: 0;
  }
}
.btn-layer-2 .play-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  color: var(--theme-color-3);
  padding: 25px 20px;
  border-radius: 100%;
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  background: var(--theme-color-2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(6px);
  animation: animate-pulse 3s linear infinite;
}
.btn-layer-2 .play-btn:hover {
  color: var(--theme-color-3);
  background: var(--theme-color-2);
  border-color: var(--theme-color-2);
}
@media (min-width: 768px) and (max-width: 991px) {
  .btn-layer-2 .play-btn {
    width: 60px;
    height: 60px;
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .btn-layer-2 .play-btn {
    width: 60px;
    height: 60px;
    font-size: 16px;
  }
}

.dust-recycle-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(46.2px);
  border-radius: 16px;
  padding: 50px;
  max-width: 716px;
  width: 100%;
  margin-bottom: -170px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .dust-recycle-card {
    margin-bottom: 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .dust-recycle-card {
    margin-bottom: 0;
  }
}
@media (max-width: 767px) {
  .dust-recycle-card {
    padding: 30px;
    margin-bottom: 0;
  }
}
.dust-recycle-card .dust-recycle-top {
  padding-bottom: 30px;
  border-bottom: 1px solid var(--light-color);
}
.dust-recycle-card .dust-recycle-top h5 {
  font-weight: 500;
  font-size: 28px;
  line-height: 36px;
  color: var(--light-color);
  margin-bottom: 20px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .dust-recycle-card .dust-recycle-top h5 {
    font-size: 24px;
    line-height: 1.4;
  }
}
.dust-recycle-card .dust-recycle-top .services-4 {
  display: flex;
  align-items: center;
  gap: 28px;
}
@media (max-width: 767px) {
  .dust-recycle-card .dust-recycle-top .services-4 {
    gap: 14px;
    flex-direction: column;
    align-items: flex-start;
  }
}
.dust-recycle-card .dust-recycle-top .services-4 .service-2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dust-recycle-card .dust-recycle-top .services-4 .service-2 i {
  color: var(--theme-color-2);
  font-size: 18px;
}
@media (max-width: 767px) {
  .dust-recycle-card .dust-recycle-top .services-4 .service-2 i {
    font-size: 16px;
  }
}
.dust-recycle-card .dust-recycle-top .services-4 .service-2 p {
  font-size: 18px;
  line-height: 30px;
  color: var(--light-color);
}
@media (max-width: 767px) {
  .dust-recycle-card .dust-recycle-top .services-4 .service-2 p {
    font-size: 16px;
    line-height: 1.2;
  }
}
.dust-recycle-card .campaign-progress {
  padding: 30px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.dust-recycle-card .campaign-progress .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.dust-recycle-card .campaign-progress .top p {
  margin-bottom: 0;
  color: var(--light-color);
}
.dust-recycle-card .campaign-progress .progress {
  height: 8px;
  background: rgba(255, 225, 117, 0.1);
}
.dust-recycle-card .campaign-progress .progress .progress-bar {
  background: var(--theme-color-2);
}

/* 23 Faq Css */
.faq-section {
  background-position: right;
  background-repeat: no-repeat;
  background-size: contain;
}
@media (max-width: 1199px) {
  .faq-section {
    background-size: cover;
  }
}
.faq-section.style-service {
  background-position: left;
  margin-bottom: -160px;
}
.faq-section .faq {
  display: flex;
  align-items: center;
  gap: 50px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .faq-section .faq {
    flex-direction: column-reverse;
  }
}
.faq-section .common-subtitle {
  margin-bottom: 20px;
}
.faq-section .common-title {
  max-width: 430px;
  width: 100%;
  margin-bottom: 20px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .faq-section .common-title {
    max-width: 100%;
  }
}
.faq-section .common-title span {
  color: var(--theme-color-2);
}
.faq-section .text {
  max-width: 550px;
  width: 100%;
  margin-bottom: 30px;
}
@media (max-width: 1199px) {
  .faq-section .text {
    max-width: 100%;
  }
}
.faq-section .blog-btn {
  margin-bottom: 50px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .faq-section .blog-btn {
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .faq-section .blog-btn {
    margin-bottom: 30px;
  }
}

.faq-accordion .accordion-item {
  border: 0;
  margin-bottom: 20px;
  background-color: #f8f7f0;
  padding-bottom: 10px;
  border-radius: 40px;
}
.faq-accordion .accordion-item .accordion-header .accordion-button {
  border: 0;
  box-shadow: none;
  padding: 22px 20px 12px 35px;
  border-radius: 0;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--theme-color-3);
  background: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
}
@media (min-width: 768px) and (max-width: 991px) {
  .faq-accordion .accordion-item .accordion-header .accordion-button {
    font-size: 20px;
    padding: 16px 16px 8px 28px;
  }
}
@media (max-width: 767px) {
  .faq-accordion .accordion-item .accordion-header .accordion-button {
    font-size: 18px;
    padding: 16px 16px 8px 28px;
  }
}
.faq-accordion .accordion-item .accordion-header .accordion-button .accordion-title {
  color: var(--body-color);
  margin-right: 5px;
}
.faq-accordion .accordion-item .accordion-header .accordion-button .icon {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--white-color);
  border-radius: 50%;
  margin-left: auto;
  background-color: #f8f7f0;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.faq-accordion .accordion-item .accordion-header .accordion-button .icon .icon-plus,
.faq-accordion .accordion-item .accordion-header .accordion-button .icon .icon-minus {
  position: absolute;
  background-color: var(--body-color);
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.faq-accordion .accordion-item .accordion-header .accordion-button .icon .icon-plus {
  width: 12px;
  height: 2px;
}
.faq-accordion .accordion-item .accordion-header .accordion-button .icon .icon-minus {
  width: 2px;
  height: 12px;
}
.faq-accordion .accordion-item .accordion-header .accordion-button.collapsed .icon .icon-plus {
  opacity: 1;
}
.faq-accordion .accordion-item .accordion-header .accordion-button.collapsed .icon .icon-minus {
  opacity: 1;
}
.faq-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) .icon {
  background-color: var(--theme-color-3);
  transform: rotate(180deg);
}
.faq-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) .icon .icon-plus {
  opacity: 1;
  background-color: var(--white-color);
}
.faq-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) .icon .icon-minus {
  opacity: 0;
  background-color: var(--white-color);
}
.faq-accordion .accordion-item .accordion-header .accordion-button:after {
  display: none;
}
.faq-accordion .accordion-item .accordion-body {
  padding: 0 75px 12px 35px;
}

/* 24 About Us Css */
.shape-wrapped-thumb-1 {
  position: relative;
  z-index: 1;
  margin-bottom: 140px;
}
.shape-wrapped-thumb-1 > img {
  border-radius: 10px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .shape-wrapped-thumb-1 > img {
    width: 70%;
  }
}
.shape-wrapped-thumb-1 .experience-shape-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 20px 25px;
  background-color: var(--theme-color-2);
  border-radius: 12px;
  position: absolute;
  top: 84px;
  right: 50px;
  z-index: 2;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .shape-wrapped-thumb-1 .experience-shape-2 {
    gap: 10px;
    right: 10px;
  }
}
.shape-wrapped-thumb-1 .experience-shape-2 h3 {
  line-height: 86%;
  margin-bottom: 0;
  color: transparent;
  -webkit-text-stroke: 1px var(--theme-color-3);
  font-style: normal;
  font-weight: 600;
  font-size: 70px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .shape-wrapped-thumb-1 .experience-shape-2 h3 {
    font-size: 52px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .shape-wrapped-thumb-1 .experience-shape-2 h3 {
    font-size: 44px;
  }
}
@media (max-width: 767px) {
  .shape-wrapped-thumb-1 .experience-shape-2 h3 {
    font-size: 40px;
  }
}
.shape-wrapped-thumb-1 .experience-shape-2 p {
  max-width: 92px;
  width: 100%;
  font-weight: 600;
  font-size: 17px;
  line-height: 26px;
  color: var(--theme-color-3);
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .shape-wrapped-thumb-1 .experience-shape-2 p {
    font-size: 16px;
    line-height: 1.4;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .shape-wrapped-thumb-1 .experience-shape-2 p {
    font-size: 16px;
    line-height: 1.4;
  }
}
.shape-wrapped-thumb-1 .award-shape {
  position: absolute;
  bottom: 140px;
  left: -60px;
  background-position: left;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 20px 30px;
  border-radius: 6px;
  background-color: var(--theme-color-3);
  z-index: 2;
}
.shape-wrapped-thumb-1 .award-shape img {
  max-width: 36px;
  width: 100%;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .shape-wrapped-thumb-1 .award-shape img {
    max-width: 28px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .shape-wrapped-thumb-1 .award-shape img {
    max-width: 28px;
  }
}
@media (max-width: 767px) {
  .shape-wrapped-thumb-1 .award-shape img {
    max-width: 28px;
  }
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .shape-wrapped-thumb-1 .award-shape {
    left: -20px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .shape-wrapped-thumb-1 .award-shape {
    gap: 12px;
    left: -40px;
  }
}
.shape-wrapped-thumb-1 .award-shape p {
  color: var(--white-color);
  max-width: 140px;
  width: 100%;
}
.shape-wrapped-thumb-1 .box-shape {
  position: absolute;
  bottom: -32px;
  left: -16px;
  z-index: -1;
}

.positioned-shape {
  position: absolute;
  top: 45%;
  right: 70px;
  border-radius: 150px 150px 12px 12px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .positioned-shape {
    right: -20px;
  }
}
.positioned-shape .shape-wrapped-thumb-2 {
  position: relative;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .positioned-shape .shape-wrapped-thumb-2 {
    width: 85%;
  }
}
.positioned-shape .shape-wrapped-thumb-2 .video-thumb {
  position: relative;
  width: fit-content;
}
.positioned-shape .shape-wrapped-thumb-2 .video-thumb img {
  width: 100%;
  border-radius: 150px 150px 12px 12px;
  border: 4px solid var(--white-color);
}
.positioned-shape .shape-wrapped-thumb-2 .video-thumb .video-play-btn {
  width: 80px;
  height: 80px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--light-color);
  padding: 23px 21px;
  border-radius: 100%;
  border: 1px solid var(--light-color);
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  background: rgba(255, 255, 255, 0.015);
  backdrop-filter: blur(13px);
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
  animation: animate-pulse 3s linear infinite;
}
.positioned-shape .shape-wrapped-thumb-2 .video-thumb .video-play-btn:hover {
  color: var(--theme-color-3);
  background: var(--theme-color-2);
  border-color: var(--theme-color-2);
}
.positioned-shape .shape-wrapped-thumb-2 .vector-shape {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.positioned-shape .shape-wrapped-thumb-2 .vector-shape img {
  width: 100%;
}

.about-us-content .text {
  margin-bottom: 20px;
}
.about-us-content .annual-donation-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (max-width: 767px) {
  .about-us-content .annual-donation-wrap {
    flex-direction: column;
    align-items: start;
    gap: 14px;
  }
}
.about-us-content .annual-donation-wrap .annual-donation {
  display: flex;
  align-items: center;
  gap: 15px;
}
.about-us-content .annual-donation-wrap .annual-donation p {
  margin-bottom: 5px;
}
.about-us-content .annual-donation-wrap .annual-donation h5 {
  margin-bottom: 0;
}
.about-us-content .annual-donation-wrap .annual-donation img {
  padding: 17px 15px;
  border-radius: 100%;
  border: 2px solid rgba(0, 69, 64, 0.1);
}

.c-tabs-wrapper .nav-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  border: 0;
}
@media (min-width: 768px) and (max-width: 991px) {
  .c-tabs-wrapper .nav-tabs {
    margin-bottom: 20px;
  }
}
@media (max-width: 767px) {
  .c-tabs-wrapper .nav-tabs {
    margin-bottom: 20px;
  }
}
.c-tabs-wrapper .nav-tabs .nav-item .nav-link {
  background-color: var(--white-color);
  color: var(--body-color);
  border: 1.5px solid transparent;
  padding: 14px 28px;
  font-weight: 600;
  border-radius: 53px;
  line-height: 24px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
@media (max-width: 767px) {
  .c-tabs-wrapper .nav-tabs .nav-item .nav-link {
    padding: 4px 8px;
  }
}
.c-tabs-wrapper .nav-tabs .nav-item .nav-link.active, .c-tabs-wrapper .nav-tabs .nav-item .nav-link:hover {
  background-color: #F8F7F0;
  color: var(--theme-color-3);
  border: 1.5px solid var(--theme-color-2);
  box-shadow: 0 6px 15.9px -3px rgba(0, 69, 64, 0.11);
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.c-tabs-wrapper .tab-content {
  outline: none;
}

.benefits ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}
.benefits ul li {
  position: relative;
  padding-left: 36px;
  display: flex;
  align-items: center;
  color: var(--hr-color);
}
@media (max-width: 767px) {
  .benefits ul li {
    padding-left: 30px;
    line-height: 1.4;
  }
}

.rating-wrap .star-rating {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .rating-wrap .star-rating {
    margin-bottom: 0;
  }
}
@media (max-width: 767px) {
  .rating-wrap .star-rating {
    margin-bottom: 0;
  }
}
.rating-wrap .stars {
  display: flex;
  align-items: center;
  gap: 2px;
}
.rating-wrap .stars i {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-color-2);
  width: 20px;
  height: 20px;
  background-color: var(--theme-color-3);
}

.shape-wrapped-thumb-2 {
  position: relative;
  z-index: 1;
}
.shape-wrapped-thumb-2 .thumb-wrapper {
  display: flex;
  align-items: center;
}
.shape-wrapped-thumb-2 .thumb-wrapper img:first-child {
  border: 4px solid var(--white-color);
  border-radius: 10px;
  width: 42%;
}
.shape-wrapped-thumb-2 .thumb-wrapper img:last-child {
  width: 58%;
}
.shape-wrapped-thumb-2 .positioned-thumb {
  margin: -50px 0 0 25px;
  width: 88%;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .shape-wrapped-thumb-2 .positioned-thumb {
    width: 90%;
  }
}
@media (max-width: 767px) {
  .shape-wrapped-thumb-2 .positioned-thumb {
    margin: -40px 0 0 25px;
  }
}
.shape-wrapped-thumb-2 .positioned-thumb > img {
  border: 4px solid var(--white-color);
  border-radius: 10px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .shape-wrapped-thumb-2 .positioned-thumb > img {
    width: 100%;
  }
}
.shape-wrapped-thumb-2 .shape-1 {
  position: absolute;
  left: -50px;
  top: 45%;
  z-index: -1;
}
@media (max-width: 767px) {
  .shape-wrapped-thumb-2 .shape-1 {
    left: 0;
    top: 58%;
  }
}
.shape-wrapped-thumb-2 .shape-2 {
  position: absolute;
  bottom: 0;
  z-index: -1;
}

.section-top-5 {
  display: flex;
  justify-content: space-between;
}
@media (min-width: 768px) and (max-width: 991px) {
  .section-top-5 {
    flex-direction: column;
    margin-bottom: 50px;
    gap: 10px;
  }
}
@media (max-width: 767px) {
  .section-top-5 {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 50px;
  }
}
.section-top-5 .left {
  max-width: 780px;
  width: 100%;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .section-top-5 .left {
    max-width: 600px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .section-top-5 .left {
    max-width: 80%;
  }
}
@media (max-width: 767px) {
  .section-top-5 .left {
    max-width: 100%;
  }
}
.section-top-5 .left .common-subtitle span {
  color: var(--theme-color-3);
}
.section-top-5 .left .common-title {
  margin-bottom: 0;
}
.section-top-5 .left .common-title h2 {
  color: var(--theme-color-3);
}
@media (min-width: 992px) and (max-width: 1199px) {
  .section-top-5 .left .common-title h2 {
    font-size: 32px;
  }
}
.section-top-5 .right {
  max-width: 440px;
  width: 100%;
}
@media (min-width: 768px) and (max-width: 991px) {
  .section-top-5 .right {
    max-width: 80%;
  }
}
@media (max-width: 767px) {
  .section-top-5 .right {
    max-width: 100%;
  }
}
.section-top-5 .right h6 {
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: var(--theme-color-3);
  margin-bottom: 16px;
}
.section-top-5 .right p {
  margin-bottom: 50px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .section-top-5 .right p {
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .section-top-5 .right p {
    margin-bottom: 30px;
  }
}

.about-us-section-2 {
  padding-bottom: 300px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .about-us-section-2 {
    padding-bottom: 460px;
  }
}
@media (max-width: 767px) {
  .about-us-section-2 {
    padding-bottom: 80px;
  }
}
.about-us-section-2 .thumb {
  position: relative;
  margin-top: -28px;
  border-radius: 12px;
  z-index: -1;
}
@media (min-width: 768px) and (max-width: 991px) {
  .about-us-section-2 .thumb {
    margin-top: 0;
  }
}
@media (max-width: 767px) {
  .about-us-section-2 .thumb {
    margin-top: 0;
  }
}
.about-us-section-2 .thumb img {
  border-radius: 12px;
}
@media (max-width: 767px) {
  .about-us-section-2 .thumb img {
    margin-bottom: 50px;
  }
}

.about-us-section-3 {
  background-position: bottom right, bottom left 30%;
  background-repeat: no-repeat, no-repeat;
  background-size: contain, contain;
}
@media (max-width: 1399px) {
  .about-us-section-3 {
    background-position: bottom right, bottom left 0;
  }
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .about-us-section-3 {
    background-size: 60%;
  }
}
@media (max-width: 1399px) {
  .about-us-section-3 {
    background-size: 50%;
  }
}
@media (max-width: 767px) {
  .about-us-section-3 {
    background-size: 100%, 0;
  }
}
.about-us-section-3 .adjusted-margin {
  margin-left: 32%;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .about-us-section-3 .adjusted-margin {
    margin-left: 26%;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .about-us-section-3 .adjusted-margin {
    margin-left: 5%;
  }
}
@media (max-width: 1199px) {
  .about-us-section-3 .adjusted-margin {
    margin-left: 0;
  }
}
.about-us-section-3 .adjusted-margin .adjusted-padding {
  padding: 185px 50px 230px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .about-us-section-3 .adjusted-margin .adjusted-padding {
    padding: 140px 20px 180px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .about-us-section-3 .adjusted-margin .adjusted-padding {
    padding: 100px 200px 160px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .about-us-section-3 .adjusted-margin .adjusted-padding {
    padding: 100px 80px 150px;
  }
}
@media (max-width: 767px) {
  .about-us-section-3 .adjusted-margin .adjusted-padding {
    padding: 80px 0 80px;
  }
}
.about-us-section-3 .tab-content .year {
  margin-bottom: 8px;
}
.about-us-section-3 .tab-content .year h6 {
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  color: var(--theme-color-3);
  margin-bottom: 0;
}
.about-us-section-3 .tab-content .reward {
  margin-bottom: 10px;
}
.about-us-section-3 .tab-content .reward h5 {
  font-family: var(--outfit-font);
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: var(--theme-color-3);
  margin-bottom: 0;
}
.about-us-section-3 .tab-content .text {
  margin-bottom: 34px;
}

/* 25 Latest Work Css */
.work-card {
  background: var(--theme-color-3);
  display: flex;
  align-items: center;
  gap: 100px;
  border-radius: 10px;
  margin-bottom: 30px;
  position: sticky;
  top: 30px;
  overflow-y: clip;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .work-card {
    gap: 60px;
    padding-right: 20px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .work-card {
    gap: 30px;
    padding-right: 20px;
  }
}
@media (max-width: 767px) {
  .work-card {
    flex-direction: column;
    gap: 10px;
    padding: 0;
  }
}

.work-card-thumb {
  position: relative;
  z-index: 1;
  border-radius: 10px;
  overflow: hidden;
  padding-top: 14px;
  margin-top: 30px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .work-card-thumb {
    width: 75%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .work-card-thumb {
    width: 75%;
  }
}
@media (max-width: 767px) {
  .work-card-thumb {
    margin-top: 14px;
  }
}
.work-card-thumb:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -24px;
  z-index: -1;
  background: var(--theme-color-2);
  clip-path: url(#w-mask-shape);
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
  border-radius: 10px;
  overflow: hidden;
}
.work-card-thumb img {
  width: 100%;
  max-width: 500px;
  border-radius: 10px;
  clip-path: url(#w-mask-image);
}
@media (max-width: 767px) {
  .work-card-thumb img {
    border-radius: 0;
  }
}
.work-card-thumb .clippy {
  position: absolute;
  top: -999px;
  left: -999px;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.work-card-content {
  max-width: 600px;
  width: 100%;
}
@media (max-width: 767px) {
  .work-card-content {
    padding: 20px;
  }
}
.work-card-content p {
  font-style: normal;
  font-weight: 500;
  font-size: 17px;
  line-height: 28px;
  color: var(--white-color);
}
@media (max-width: 1199px) {
  .work-card-content p {
    font-size: 16px;
    line-height: 1.2;
  }
}
.work-card-content h3 {
  font-style: normal;
  font-weight: 500;
  font-size: 36px;
  line-height: 48px;
  color: var(--white-color);
  margin-bottom: 80px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .work-card-content h3 {
    margin-bottom: 60px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .work-card-content h3 {
    font-size: 30px;
    line-height: 1.3;
    margin-bottom: 40px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .work-card-content h3 {
    font-size: 24px;
    line-height: 1.3;
    margin-bottom: 20px;
  }
}
@media (max-width: 767px) {
  .work-card-content h3 {
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 20px;
  }
}

.card-number {
  position: absolute;
  right: 60px;
  bottom: -30px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .card-number {
    right: 20px;
  }
}
@media (max-width: 767px) {
  .card-number {
    right: 20px;
  }
}
.card-number h1 {
  font-family: var(--outfit-font);
  font-style: normal;
  font-weight: 600;
  font-size: 120px;
  line-height: 82px;
  color: #FFE175;
  opacity: 0.2;
  margin-bottom: 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .card-number h1 {
    font-size: 100px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .card-number h1 {
    font-size: 90px;
  }
}
@media (max-width: 767px) {
  .card-number h1 {
    font-size: 80px;
  }
}

/* 26 News Letter Css */
.news-letter {
  margin: 0 50px -300px;
  padding: 50px 0 370px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 16px;
}
@media (max-width: 1399px) {
  .news-letter {
    margin: 0 0 -300px;
  }
}

.news-letter-content {
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  position: relative;
}
.news-letter-content .shape {
  position: absolute;
  bottom: -80px;
  left: -250px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .news-letter-content .shape {
    bottom: -73px;
    left: -170px;
    width: 30%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .news-letter-content .shape {
    bottom: -73px;
    left: -95px;
    width: 25%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .news-letter-content .shape {
    bottom: -73px;
    left: -40px;
    width: 20%;
  }
}
@media (max-width: 767px) {
  .news-letter-content .shape {
    bottom: -72px;
    left: 20px;
    width: 25%;
  }
}

.section-top-12 {
  text-align: center;
  margin-bottom: 40px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .section-top-12 .common-title h2 img {
    width: 32px;
  }
}
@media (max-width: 767px) {
  .section-top-12 .common-title h2 img {
    width: 22px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .form-2 {
    width: 80%;
    margin: 0 auto;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .form-2 {
    width: 70%;
    margin: 0 auto;
  }
}
@media (max-width: 767px) {
  .form-2 {
    width: 80%;
    margin: 0 auto;
  }
}
.form-2 input {
  background: var(--white-color);
  border: 1px solid rgba(0, 69, 64, 0.2);
  border-radius: 53px;
  resize: none;
  padding: 18px 22px;
}
.form-2 input:focus {
  background: var(--white-color);
  border: 1px solid var(--theme-color-2);
}
.form-2 input::placeholder {
  font-size: 17px;
  line-height: 28px;
  color: var(--body-color);
  opacity: 0.8;
}
.form-2 button {
  border: none;
}

/* 27 Company Achievements Css */
.company-achievements {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 767px) {
  .company-achievements {
    grid-template-columns: repeat(2, 1fr);
  }
}
.company-achievements .achievement {
  text-align: center;
}
.company-achievements .achievement i {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 30px;
  background-color: #f8f7f0;
  width: 70px;
  height: 70px;
  padding: 10px;
  border: 2px solid var(--theme-color-2);
  border-radius: 100%;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .company-achievements .achievement i {
    font-size: 24px;
    width: 60px;
    height: 60px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .company-achievements .achievement i {
    font-size: 20px;
    width: 50px;
    height: 50px;
  }
}
@media (max-width: 767px) {
  .company-achievements .achievement i {
    font-size: 20px;
    width: 50px;
    height: 50px;
  }
}
.company-achievements .achievement h2 {
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 60px;
  line-height: 100%;
  color: var(--theme-color-3);
}
@media (min-width: 992px) and (max-width: 1199px) {
  .company-achievements .achievement h2 {
    font-size: 42px;
    line-height: 1;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .company-achievements .achievement h2 {
    font-size: 30px;
    line-height: 1;
  }
}
@media (max-width: 767px) {
  .company-achievements .achievement h2 {
    font-size: 30px;
    line-height: 1;
  }
}
.company-achievements .achievement p {
  font-size: 18px;
  line-height: 26px;
  color: var(--theme-color-3);
}
@media (min-width: 992px) and (max-width: 1199px) {
  .company-achievements .achievement p {
    line-height: 1;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .company-achievements .achievement p {
    font-size: 16px;
    line-height: 1;
  }
}
@media (max-width: 767px) {
  .company-achievements .achievement p {
    font-size: 16px;
    line-height: 1;
  }
}

/* 28 Services We Offer Css */
.services-we-offer-section {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--theme-color-3);
}
.services-we-offer-section .common-title h2 {
  color: var(--white-color);
}
.services-we-offer-section .common-subtitle {
  color: #F8F7F0;
}

.service-card-3 {
  background-color: #F8F7F0;
  border-radius: 10px;
  padding: 10px;
  position: relative;
}
.service-card-3.active, .service-card-3:hover {
  background-color: #F8F7F0;
  box-shadow: 0 35px 41.5px -16px rgba(0, 69, 64, 0.08);
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.service-card-3.active .thumb a img, .service-card-3:hover .thumb a img {
  transform: scale(1.1);
}
.service-card-3.active .content .d-btn, .service-card-3:hover .content .d-btn {
  border: 2px solid var(--theme-color-2);
  color: var(--theme-color-3);
}
.service-card-3.active .content .d-btn:before, .service-card-3:hover .content .d-btn:before {
  background: var(--theme-color-2);
  left: -10%;
  transform: translateX(0%) translateY(-50%);
}
.service-card-3.active .card-number-2 h1, .service-card-3:hover .card-number-2 h1 {
  color: var(--white-color);
  opacity: 1;
}
.service-card-3 .thumb {
  position: relative;
  overflow: hidden;
}
.service-card-3 .thumb > a {
  display: block;
  border-radius: 10px;
  overflow: hidden;
}
.service-card-3 .thumb img {
  width: 100%;
  height: 265px;
  border-radius: 10px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .service-card-3 .thumb img {
    height: 240px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .service-card-3 .thumb img {
    height: 275px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .service-card-3 .thumb img {
    height: 220px;
  }
}
@media (max-width: 767px) {
  .service-card-3 .thumb img {
    height: 240px;
  }
}
.service-card-3 .content {
  padding: 14px 20px 20px;
}
.service-card-3 .content .title {
  margin-bottom: 8px;
}
.service-card-3 .content .title h3 {
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: var(--theme-color-3);
  margin-bottom: 0;
}
@media (max-width: 1399px) {
  .service-card-3 .content .title h3 {
    font-size: 20px;
  }
}
.service-card-3 .content .title h3 a {
  color: var(--theme-color-3);
}
.service-card-3 .content .text {
  width: 98%;
  margin-bottom: 24px;
}
.service-card-3 .content .text p {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--body-color);
}
.service-card-3 .content .d-btn {
  font-size: 16px;
  font-weight: 600;
  color: var(--theme-color-3);
  background: transparent;
  border: 2px solid rgba(0, 69, 64, 0.1);
}
.service-card-3 .content .d-btn:before {
  background: var(--theme-color-2);
}
.service-card-3 .content .d-btn .icon-wrap {
  width: 38px;
  height: 38px;
  background: var(--theme-color-3);
  color: var(--light-color);
}
.service-card-3 .content .d-btn .icon-wrap .icon {
  width: 13px;
  font-size: 14px;
}

.card-number-2 {
  position: absolute;
  right: 50px;
  bottom: -20px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .card-number-2 {
    right: 30px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .card-number-2 {
    right: 30px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .card-number-2 {
    right: 20px;
  }
}
@media (max-width: 767px) {
  .card-number-2 {
    right: 20px;
  }
}
.card-number-2 h1 {
  font-family: var(--outfit-font);
  font-style: normal;
  font-weight: 600;
  font-size: 80px;
  line-height: 82px;
  color: var(--theme-color-3);
  opacity: 0.1;
  margin-bottom: 0;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .card-number-2 h1 {
    font-size: 70px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .card-number-2 h1 {
    font-size: 70px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .card-number-2 h1 {
    font-size: 60px;
  }
}
@media (max-width: 767px) {
  .card-number-2 h1 {
    font-size: 60px;
  }
}

/* 29 Work Process Css */
.work-process {
  overflow: hidden;
}
.work-process .common-title {
  width: 60%;
  margin: 0 auto 50px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .work-process .common-title {
    width: 65%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .work-process .common-title {
    width: 75%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .work-process .common-title {
    width: 75%;
  }
}
@media (max-width: 767px) {
  .work-process .common-title {
    width: 100%;
  }
}

.contact-form-3 {
  background-color: var(--theme-color-3);
  padding: 36px 54px 48px 36px;
  border-radius: 10px;
}
@media (max-width: 1399px) {
  .contact-form-3 {
    padding: 36px 38px 48px 36px;
  }
}
.contact-form-3 .form-content {
  position: relative;
  z-index: 1;
}
.contact-form-3 h3 {
  font-weight: 500;
  font-size: 36px;
  line-height: 48px;
  color: var(--light-color);
  margin-bottom: 15px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .contact-form-3 h3 {
    font-size: 30px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .contact-form-3 h3 {
    font-size: 28px;
    line-height: 1.5;
  }
}
@media (max-width: 767px) {
  .contact-form-3 h3 {
    font-size: 22px;
    line-height: 1.4;
  }
}
.contact-form-3 h3 span {
  color: var(--theme-color-2);
}
.contact-form-3 p {
  max-width: 357px;
  width: 100%;
  font-size: 17px;
  line-height: 28px;
  color: var(--light-color);
  opacity: 0.9;
  margin-bottom: 30px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .contact-form-3 p {
    max-width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .contact-form-3 p {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.5;
  }
}
@media (max-width: 767px) {
  .contact-form-3 p {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.4;
  }
}
.contact-form-3 input,
.contact-form-3 textarea {
  background: rgba(248, 247, 240, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 14px 20px;
  resize: none;
}
.contact-form-3 input:focus,
.contact-form-3 textarea:focus {
  border: 2px solid var(--theme-color-2);
}
.contact-form-3 input:focus::placeholder,
.contact-form-3 textarea:focus::placeholder {
  color: var(--light-color);
}
.contact-form-3 input::placeholder,
.contact-form-3 textarea::placeholder {
  font-size: 17px;
  line-height: 28px;
  color: #f8f7f0;
}
@media (max-width: 991px) {
  .contact-form-3 input::placeholder,
  .contact-form-3 textarea::placeholder {
    font-size: 16px;
  }
}
.contact-form-3 button {
  border: none;
}
.contact-form-3 img {
  position: absolute;
  top: -220px;
  right: -260px;
  z-index: -1;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .contact-form-3 img {
    top: -190px;
    right: -210px;
  }
}
@media (max-width: 767px) {
  .contact-form-3 img {
    top: -160px;
    right: -180px;
  }
}

.work-process-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
@media (max-width: 767px) {
  .work-process-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.work-process-cards .work-process-card {
  background-color: var(--white-color);
  box-shadow: 0 35px 41.5px -16px rgba(0, 69, 64, 0.08);
  border-radius: 10px;
  padding: 35px 30px;
}
@media (max-width: 1399px) {
  .work-process-cards .work-process-card {
    padding: 30px;
  }
}
.work-process-cards .work-process-card:hover {
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.work-process-cards .work-process-card:hover .card-top .number {
  background: #f8f7f0;
}
.work-process-cards .work-process-card:hover .card-top .number h4 {
  color: var(--body-color);
}
.work-process-cards .work-process-card .card-top {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 34px;
}
@media (max-width: 1199px) {
  .work-process-cards .work-process-card .card-top {
    justify-content: end;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .work-process-cards .work-process-card .card-top img {
    max-width: 65%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .work-process-cards .work-process-card .card-top img {
    max-width: 68%;
  }
}
.work-process-cards .work-process-card .card-top .number {
  width: 70px;
  height: 70px;
  border: 2px solid var(--white-color);
  border-radius: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--theme-color-3);
  box-shadow: 0 15px 32.2px -9px rgba(0, 24, 25, 0.2);
}
@media (max-width: 1399px) {
  .work-process-cards .work-process-card .card-top .number {
    width: 60px;
    height: 60px;
  }
}
.work-process-cards .work-process-card .card-top .number h4 {
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: var(--theme-color-2);
  margin-bottom: 0;
}
@media (max-width: 991px) {
  .work-process-cards .work-process-card .card-top .number h4 {
    font-size: 20px;
  }
}
.work-process-cards .work-process-card .card-content h4 {
  max-width: 210px;
  width: 100%;
  font-style: normal;
  font-weight: 500;
  font-size: 28px;
  line-height: 20px;
  color: var(--theme-color-3);
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .work-process-cards .work-process-card .card-content h4 {
    font-size: 24px;
    line-height: 14px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .work-process-cards .work-process-card .card-content h4 {
    font-size: 24px;
    line-height: 14px;
  }
}
@media (max-width: 991px) {
  .work-process-cards .work-process-card .card-content h4 {
    font-size: 20px;
    line-height: 8px;
  }
}
.work-process-cards .work-process-card .card-content p {
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 28px;
  color: var(--body-color);
}

/* 30 Make Donate Css */
.make-donate-section {
  margin-top: -76px;
  z-index: 2;
  position: relative;
}

.make-donate-layout {
  background: var(--theme-color-3);
  border-radius: 8px;
  padding: 36px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .make-donate-layout {
    width: 82%;
    margin: 0 auto;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .make-donate-layout {
    width: 100%;
    padding: 30px;
  }
}
@media (max-width: 767px) {
  .make-donate-layout {
    width: 100%;
    padding: 20px;
  }
}

.donate-left {
  background-position: right;
  background-repeat: no-repeat;
  background-size: contain;
  border-right: 1px solid var(--white-color);
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .donate-left {
    background-size: 30%;
  }
}
@media (max-width: 1199px) {
  .donate-left {
    background-size: 0;
    border: none;
    margin-bottom: 30px;
  }
}
.donate-left h4 {
  width: 70%;
  font-style: normal;
  font-weight: 500;
  font-size: 36px;
  line-height: 48px;
  color: var(--theme-color-2);
  margin-bottom: 12px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .donate-left h4 {
    font-size: 28px;
    line-height: 1.4;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .donate-left h4 {
    font-size: 28px;
    line-height: 1.4;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .donate-left h4 {
    font-size: 24px;
    line-height: 1.4;
  }
}
@media (max-width: 767px) {
  .donate-left h4 {
    font-size: 22px;
    line-height: 1.4;
    width: 100%;
  }
}
.donate-left p {
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: #f8f7f0;
}
@media (max-width: 1399px) {
  .donate-left p {
    font-size: 16px;
  }
}

.donate-right {
  width: 100%;
  max-width: 690px;
  margin-left: auto;
}
@media (max-width: 1199px) {
  .donate-right {
    margin-left: 0;
  }
}
.donate-right .choose-currency {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 24px;
}
@media (max-width: 991px) {
  .donate-right .choose-currency {
    flex-wrap: wrap;
  }
}
.donate-right .choose-currency p {
  font-style: normal;
  font-weight: 500;
  color: #f8f7f0;
  margin-bottom: 0;
}
.donate-right .choose-currency .amount {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  background: rgba(248, 247, 240, 0.1);
  border-radius: 88px;
  font-style: normal;
  font-weight: 600;
  color: #f8f7f0;
  cursor: pointer;
  border: none;
}
.donate-right .choose-currency .amount:hover {
  background: var(--theme-color-2);
  color: var(--theme-color-3);
}
.donate-right .choose-currency .custom-amount {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 88px;
  font-style: normal;
  font-weight: 600;
  color: var(--theme-color-2);
  cursor: pointer;
  background: transparent;
  font-size: 16px;
}
.donate-right .choose-currency .custom-amount i {
  color: var(--theme-color-2);
}
.donate-right .choose-currency .custom-amount p {
  color: var(--theme-color-2);
}
.donate-right .choose-currency .custom-amount:hover {
  border: 2px solid var(--theme-color-2);
}
.donate-right .progress {
  background: rgba(255, 225, 117, 0.1);
  height: 8px;
}
.donate-right .progress .progress-bar {
  background: var(--theme-color-2);
}
.donate-right .bottom {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 24px;
}
@media (max-width: 991px) {
  .donate-right .bottom {
    flex-wrap: wrap;
  }
}
.donate-right .bottom .icon-wrap {
  max-width: 400px;
  width: 100%;
  position: relative;
}
@media (max-width: 991px) {
  .donate-right .bottom .icon-wrap {
    max-width: 100%;
  }
}
.donate-right .bottom .icon-wrap input {
  width: 100%;
  border: none;
  padding: 10px 14px 10px 10px;
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  text-align: right;
  color: var(--theme-color-3);
  background: #ffffff;
  box-shadow: 0px 35px 41.5px -16px rgba(0, 69, 64, 0.12);
  border-radius: 50px;
}
@media (max-width: 767px) {
  .donate-right .bottom .icon-wrap input {
    padding: 6px 14px 6px 10px;
  }
}
.donate-right .bottom .icon-wrap i {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 8px;
  left: 8px;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  color: var(--theme-color-3);
  background: #f8f7f0;
  border: 2px solid var(--theme-color-2);
  box-shadow: 0px 15px 32.2px -9px rgba(0, 24, 25, 0.2);
}
@media (max-width: 767px) {
  .donate-right .bottom .icon-wrap i {
    top: 4px;
    left: 4px;
  }
}
.donate-right .bottom .donate-btn {
  padding: 22px 88px;
  background: var(--theme-color-2);
  border-radius: 100px;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  color: var(--theme-color-3);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .donate-right .bottom .donate-btn {
    padding: 16px 60px;
  }
}
.donate-right .bottom .donate-btn:before {
  content: "";
  position: absolute;
  left: -110%;
  top: 50%;
  width: 200%;
  height: 200%;
  background: var(--white-color);
  z-index: -1;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 200px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.donate-right .bottom .donate-btn:hover {
  color: var(--theme-color-3);
}
.donate-right .bottom .donate-btn:hover:before {
  left: -10%;
  transform: translateX(0%) translateY(-50%);
}

/* 31 Donate Us Css */
.donate-to-us-section {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 210px 0 20px;
}
@media (max-width: 767px) {
  .donate-to-us-section {
    padding: 260px 0 20px;
  }
}

.donate-to-us-layout {
  position: relative;
  z-index: 1;
}
.donate-to-us-layout .icon-shape-1 {
  position: absolute;
  top: -6%;
  left: -2%;
  z-index: -1;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .donate-to-us-layout .icon-shape-1 {
    left: -1.8%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .donate-to-us-layout .icon-shape-1 {
    left: -2.6%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .donate-to-us-layout .icon-shape-1 {
    left: -3%;
  }
}
@media (max-width: 1700px) {
  .donate-to-us-layout .icon-shape-1 img {
    width: 90%;
  }
}
@media (max-width: 1199px) {
  .donate-to-us-layout .icon-shape-1 img {
    width: 70%;
  }
}
.donate-to-us-layout .icon-shape-2 {
  position: absolute;
  bottom: 52%;
  right: -4%;
  z-index: -1;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .donate-to-us-layout .icon-shape-2 {
    bottom: 46%;
    right: -18px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .donate-to-us-layout .icon-shape-2 {
    bottom: 55%;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .donate-to-us-layout .icon-shape-2 {
    bottom: 53%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .donate-to-us-layout .icon-shape-2 {
    bottom: 60%;
    right: -5%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .donate-to-us-layout .icon-shape-2 {
    bottom: 65%;
    right: -5%;
  }
}
@media (max-width: 767px) {
  .donate-to-us-layout .icon-shape-2 {
    bottom: 91%;
    right: -3%;
  }
}
@media (max-width: 1700px) {
  .donate-to-us-layout .icon-shape-2 img {
    width: 90%;
  }
}
@media (max-width: 1199px) {
  .donate-to-us-layout .icon-shape-2 img {
    width: 70%;
  }
}

/* 32 We Are Friends Css */
.we-are-friends-section .common-subtitle {
  margin-bottom: 20px;
}
.we-are-friends-section .common-title {
  margin-bottom: 20px;
}
.we-are-friends-section .text {
  max-width: 550px;
  width: 100%;
  margin-bottom: 30px;
}
.we-are-friends-section .blog-btn {
  margin-bottom: 50px;
}

.friends-left {
  position: sticky;
  top: 20px;
}
.friends-left .shape {
  position: absolute;
  bottom: -30%;
  left: 40%;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .friends-left .shape {
    bottom: 10%;
    width: 5%;
    left: 30%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .friends-left .shape {
    bottom: 10%;
    width: 6%;
    left: 40%;
  }
}
@media (max-width: 767px) {
  .friends-left .shape {
    bottom: 10%;
    width: 10%;
    left: 70%;
  }
}

.friends-card {
  background: #F8F7F0;
  border-radius: 10px;
  padding: 10px;
  position: sticky;
  top: 20px;
}
.friends-card:hover .details-btn-3 {
  right: 10px;
  transition: all 0.3s;
}
.friends-card .author-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px;
  width: 100%;
  height: 100%;
}
.friends-card .author-details .author-info h5 {
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: var(--theme-color-3);
  margin-bottom: 5px;
}
@media (max-width: 767px) {
  .friends-card .author-details .author-info h5 {
    font-size: 20px;
  }
}
.friends-card .author-details .author-info p {
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 16px;
}
.friends-card .author-details .author-info .description p {
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: var(--body-color);
}
.friends-card .author-details .socials {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.friends-card .author-details .socials .social-links {
  display: flex;
  gap: 10px;
  transition: all 0.3s;
}
.friends-card .author-details .socials .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background: var(--white-color);
  color: var(--body-color);
}
.friends-card .author-details .socials .social-links a:hover {
  background: var(--theme-color-2);
  color: var(--theme-color-3);
}
.friends-card .thumb {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  height: 100%;
}
.friends-card .thumb::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  background: linear-gradient(109.34deg, rgba(255, 225, 117, 0) 64.88%, #FFE175 100%);
}
.friends-card .thumb .category {
  position: absolute;
  right: 0;
  bottom: 0;
}
.friends-card .thumb img {
  border-radius: 10px;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.details-btn-3 {
  box-shadow: -7px 9px 31.3px #FFE175;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: var(--theme-color-2);
  color: var(--theme-color-3);
  transform: rotate(-45deg);
  padding: 12px 20px;
  border-radius: 53px;
  transition: all 0.3s;
  position: absolute;
  top: 10px;
  right: -60px;
}

/* 33 Details Content Css */
.services-details-section {
  position: relative;
  z-index: 1;
  margin-bottom: -169px;
}
.services-details-section .d-shape-1 {
  position: absolute;
  z-index: -1;
  bottom: 0;
  right: 0;
}

.details-content .thumb-wrap {
  border-radius: 10px;
}
.details-content .thumb-wrap img {
  border-radius: 10px;
}

.detail-info-wrap {
  background: #f8f7f0;
  border-radius: 10px;
}

.detail-info-contents {
  padding: 30px;
}

.thumb-wrap {
  border-radius: 10px;
}
.count-down-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 19px;
  background: #f8f7f0;
  border: 1px solid rgba(0, 69, 64, 0.15);
  box-shadow: 0 6px 30px rgba(0, 69, 64, 0.09);
  border-radius: 10px;
}
.count-down-date i {
  font-size: 18px;
  color: var(--body-color);
}
.count-down-date p {
  font-style: normal;
  font-weight: 500;
  font-size: 17px;
  line-height: 28px;
  color: var(--body-color);
  margin-bottom: 0;
}

.details-title h2 {
  font-weight: 600;
  font-size: 48px;
  line-height: 60px;
  color: #004540;
  margin-bottom: 0;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .details-title h2 {
    font-size: 40px;
    line-height: 1.2;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .details-title h2 {
    font-size: 32px;
    line-height: 1.2;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .details-title h2 {
    font-size: 26px;
    line-height: 1.2;
  }
}
@media (max-width: 767px) {
  .details-title h2 {
    font-size: 24px;
    line-height: 1.2;
  }
}

.details-subtitle h4 {
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: var(--outfit-font);
  font-style: normal;
  font-weight: 500;
  font-size: 36px;
  line-height: 28px;
  color: var(--theme-color-3);
  margin-bottom: 0;
}
.details-subtitle h4 span img {
  width: 40px;
}

.details-title-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 767px) {
  .details-title-2 {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }
}
.details-title-2 h2 {
  font-weight: 600;
  font-size: 48px;
  line-height: 60px;
  color: #004540;
  margin-bottom: 0;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .details-title-2 h2 {
    font-size: 40px;
    line-height: 1.2;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .details-title-2 h2 {
    font-size: 32px;
    line-height: 1.2;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .details-title-2 h2 {
    font-size: 26px;
    line-height: 1.2;
  }
}
@media (max-width: 767px) {
  .details-title-2 h2 {
    font-size: 24px;
    line-height: 1.2;
  }
}

.donator-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .donator-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  .donator-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
.donator-cards .donator-card {
  background: #f8f7f0;
  border-radius: 10px;
  padding: 20px;
}
.donator-cards .donator-card:hover {
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
  background: var(--white-color);
  box-shadow: 0 35px 41.5px -16px rgba(0, 69, 64, 0.12);
}
.donator-cards .donator-card .thumb {
  margin: 0 auto 15px;
  width: 60px;
  height: 60px;
  border-radius: 100%;
}
.donator-cards .donator-card .thumb img {
  width: 100%;
  border-radius: 100%;
}
.donator-cards .donator-card .donator-name {
  margin-bottom: 2px;
}
.donator-cards .donator-card .donator-name h6 {
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  color: var(--theme-color-3);
  margin-bottom: 0;
}
.donator-cards .donator-card .date-of-donate {
  margin-bottom: 10px;
}
.donator-cards .donator-card .date-of-donate p {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  color: var(--body-color);
  margin-bottom: 0;
}
.donator-cards .donator-card .donation-amount {
  padding: 3px 24px;
  background: var(--white-color);
  border-radius: 6px;
}
.donator-cards .donator-card .donation-amount p {
  display: flex;
  gap: 5px;
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 28px;
  color: var(--body-color);
  margin-bottom: 0;
}
.donator-cards .donator-card .donation-amount p span {
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
  line-height: 28px;
  color: var(--theme-color-3);
}

.detail-text p {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: #868681;
}
.detail-text p b {
  font-family: var(--albert-sans-font);
  font-weight: 600;
}

.donation-card {
  background: #f8f7f0;
  border-radius: 10px;
  padding: 20px 24px 30px 30px;
}
@media (max-width: 767px) {
  .donation-card {
    padding: 20px;
  }
}
.donation-card h4 {
  font-family: var(--outfit-font);
  font-style: normal;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.2;
  color: #004540;
  margin-bottom: 16px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .donation-card h4 {
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  .donation-card h4 {
    font-size: 22px;
  }
}
.donation-card p {
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: var(--body-color);
  margin-bottom: 24px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .donation-card p {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .donation-card p {
    font-size: 16px;
  }
}
.donation-card .donation-wrap-2 {
  background: var(--white-color);
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 30px 40px;
  border-radius: 34px;
}
@media (max-width: 767px) {
  .donation-card .donation-wrap-2 {
    flex-direction: column;
    padding: 20px;
  }
}
.donation-card .donation-wrap-2:hover {
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
  background: var(--theme-color-3);
}
.donation-card .donation-wrap-2:hover .left .d-top p {
  color: var(--theme-color-2);
}
.donation-card .donation-wrap-2:hover .left .progress {
  background: rgba(255, 225, 117, 0.1);
}
.donation-card .donation-wrap-2:hover .left .progress .progress-bar {
  background: var(--theme-color-2);
}
.donation-card .donation-wrap-2:hover .left .d-bottom .fund p {
  color: var(--white-color);
}
.donation-card .donation-wrap-2:hover .left .d-bottom .fund p span {
  color: var(--theme-color-2);
}
.donation-card .donation-wrap-2:hover .left .d-bottom .d-wishlist {
  color: var(--theme-color-2);
  border-color: rgba(255, 225, 117, 0.1);
}
.donation-card .donation-wrap-2:hover .right {
  color: var(--theme-color-3);
  background: var(--theme-color-2);
}
.donation-card .donation-wrap-2 .left {
  width: 100%;
}
.donation-card .donation-wrap-2 .left .d-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
}
.donation-card .donation-wrap-2 .left .d-top p {
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: var(--theme-color-3);
  margin-bottom: 0;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.donation-card .donation-wrap-2 .left .progress {
  margin-bottom: 15px;
  background: rgba(0, 69, 64, 0.1);
  height: 8px;
  border-radius: 100px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.donation-card .donation-wrap-2 .left .progress .progress-bar {
  background: var(--theme-color-3);
  border-radius: 100px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.donation-card .donation-wrap-2 .left .d-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.donation-card .donation-wrap-2 .left .d-bottom .fund {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
}
.donation-card .donation-wrap-2 .left .d-bottom .fund p {
  font-weight: 400;
  font-size: 15px;
  line-height: 100%;
  color: #868681;
  margin-bottom: 0;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.donation-card .donation-wrap-2 .left .d-bottom .fund p span {
  color: var(--theme-color-3);
  font-weight: 600;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.donation-card .donation-wrap-2 .left .d-bottom .d-wishlist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1.5px solid rgba(0, 24, 25, 0.1);
  border-radius: 10px;
  padding: 10px;
  background: none;
  color: var(--theme-color-3);
  font-family: var(--albert-sans-font);
  font-weight: 600;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.01em;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.donation-card .donation-wrap-2 .right {
  width: 110px;
  height: 110px;
  padding: 25px 30px;
  border-radius: 100%;
  color: var(--theme-color-2);
  background: var(--theme-color-3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  font-weight: 500;
}
.donation-card .donation-wrap-2 .right .icon i {
  font-size: 20px;
}

.donation-wrap-3 {
  background: var(--white-color);
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 30px 40px;
  border-radius: 34px;
}
.donation-wrap-3:hover {
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
  background: var(--theme-color-3);
}
.donation-wrap-3:hover .left .d-top p {
  color: var(--theme-color-2);
}
.donation-wrap-3:hover .left .progress {
  background: rgba(255, 225, 117, 0.1);
}
.donation-wrap-3:hover .left .progress .progress-bar {
  background: var(--theme-color-2);
}
.donation-wrap-3:hover .left .d-bottom .fund p {
  color: var(--white-color);
}
.donation-wrap-3:hover .left .d-bottom .fund p span {
  color: var(--theme-color-2);
}
.donation-wrap-3:hover .left .d-bottom .d-wishlist {
  color: var(--theme-color-2);
  border-color: rgba(255, 225, 117, 0.1);
}
.donation-wrap-3:hover .right {
  color: var(--theme-color-3);
  background: var(--theme-color-2);
}
.donation-wrap-3 .left {
  width: 100%;
}
.donation-wrap-3 .left .d-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
}
.donation-wrap-3 .left .d-top p {
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: var(--theme-color-3);
  margin-bottom: 0;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.donation-wrap-3 .left .progress {
  margin-bottom: 15px;
  background: rgba(0, 69, 64, 0.1);
  height: 8px;
  border-radius: 100px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.donation-wrap-3 .left .progress .progress-bar {
  background: var(--theme-color-3);
  border-radius: 100px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.donation-wrap-3 .left .d-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.donation-wrap-3 .left .d-bottom .fund {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
}
.donation-wrap-3 .left .d-bottom .fund p {
  font-weight: 400;
  font-size: 15px;
  line-height: 100%;
  color: #868681;
  margin-bottom: 0;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.donation-wrap-3 .left .d-bottom .fund p span {
  color: var(--theme-color-3);
  font-weight: 600;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.donation-wrap-3 .left .d-bottom .d-wishlist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1.5px solid rgba(0, 24, 25, 0.1);
  border-radius: 10px;
  padding: 10px;
  background: none;
  color: var(--theme-color-3);
  font-family: var(--albert-sans-font);
  font-weight: 600;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.01em;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.donation-wrap-3 .right {
  width: 110px;
  height: 110px;
  padding: 25px 30px;
  border-radius: 100%;
  color: var(--theme-color-2);
  background: var(--theme-color-3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  font-weight: 500;
}
.donation-wrap-3 .right .icon i {
  font-size: 20px;
}

.list-wrapper {
  display: flex;
  align-items: center;
  gap: 90px;
}
@media (max-width: 767px) {
  .list-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}
.list-wrapper .list-wrap {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list-wrapper .list-wrap li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}
.list-wrapper .list-wrap li:last-child {
  margin-bottom: 0;
}
.list-wrapper .list-wrap li .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--theme-color-2);
  width: 18px;
  height: 18px;
  background: var(--theme-color-3);
  border-radius: 50%;
}
.list-wrapper .list-wrap li p {
  font-weight: 400;
  font-size: 17px;
  line-height: 28px;
  color: #868681;
}

.banner-slide-wrap {
  display: block;
}
.banner-slide-wrap .thumb {
  position: relative;
  width: 100%;
}
.banner-slide-wrap .thumb img {
  width: 100%;
  border-radius: 12px;
}
.banner-slide-wrap .thumb .play-btn {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  color: var(--white-color);
  padding: 25px 20px;
  border-radius: 100%;
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(6px);
  animation: animate-pulse 3s linear infinite;
}
.banner-slide-wrap .thumb .play-btn:hover {
  color: var(--theme-color-3);
  background: var(--theme-color-2);
  border-color: var(--theme-color-2);
}
@media (min-width: 768px) and (max-width: 991px) {
  .banner-slide-wrap .thumb .play-btn {
    width: 60px;
    height: 60px;
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .banner-slide-wrap .thumb .play-btn {
    width: 60px;
    height: 60px;
    font-size: 16px;
  }
}

.gallery-slider-active {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.gallery-slider-active .gallery-pagination {
  height: 5px;
  border-radius: 10px;
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 100%;
  z-index: 10;
}
.gallery-slider-active .gallery-pagination .swiper-pagination-bullet {
  width: 100px;
  max-width: 100px;
  border-radius: 10px;
  height: 100%;
  opacity: 1;
  background: #F8F7F0;
  margin: 0;
}
.gallery-slider-active .gallery-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--theme-color-2);
}

.testimonial-wrap {
  text-align: center;
}
.testimonial-wrap .icon {
  width: 80px;
  height: 80px;
  background: #ffe175;
  border: 2px solid rgba(0, 69, 64, 0.1);
  border-radius: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.testimonial-wrap .review {
  font-family: var(--outfit-font);
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: #868681;
  margin-bottom: 16px;
}
.testimonial-wrap .author h3 {
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: #004540;
  margin-bottom: 5px;
}
.testimonial-wrap .author p {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #868681;
}

.d-cta-wrap {
  position: relative;
  z-index: 1;
  padding: 19px 50px 19px 60px;
  background: #f8f7f0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.d-cta-wrap .content-wrap {
  max-width: 427px;
}
.d-cta-wrap .content-wrap .common-title h2 {
  font-weight: 500;
  font-size: 36px;
  line-height: 48px;
  color: #004540;
  margin-bottom: 30px !important;
}
.d-cta-wrap .thumb-wrap {
  width: 100%;
}
.d-cta-wrap .d-shape-1 {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
}

.view-project-wrap {
  display: flex;
  align-items: center;
  gap: 30px;
}

.previous-project,
.next-project {
  max-width: 446px;
  width: 100%;
  background: #f8f7f0;
  border-radius: 87px;
  padding: 10px 50px 10px 10px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.previous-project .project-thumb-wrap,
.next-project .project-thumb-wrap {
  width: 140px;
  height: 140px;
  background: #383838;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 100px;
}
.previous-project .project-thumb-wrap img,
.next-project .project-thumb-wrap img {
  border-radius: 100px;
  width: 100%;
}
.previous-project .project-content-wrap .view-project-btn,
.next-project .project-content-wrap .view-project-btn {
  margin-bottom: 15px;
}
.previous-project .project-content-wrap .view-project-btn a,
.next-project .project-content-wrap .view-project-btn a {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--body-color);
}
.previous-project .project-content-wrap .view-project-btn a .icon-1,
.next-project .project-content-wrap .view-project-btn a .icon-1 {
  transform: rotate(225deg);
}
.previous-project .project-content-wrap .view-project-btn a .icon-2,
.next-project .project-content-wrap .view-project-btn a .icon-2 {
  transform: rotate(315deg);
}
.previous-project .project-content-wrap .project-title,
.next-project .project-content-wrap .project-title {
  margin-bottom: 5px;
}
.previous-project .project-content-wrap .project-title h5,
.next-project .project-content-wrap .project-title h5 {
  font-family: var(--outfit-font);
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: #020231;
  margin-bottom: 0;
}
.previous-project .project-content-wrap .published-date p,
.next-project .project-content-wrap .published-date p {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--body-color);
  margin-bottom: 0;
}

.comment-section .comments {
  padding: 50px 0;
  border-top: 1px solid rgba(0, 69, 64, 0.1);
  border-bottom: 1px solid rgba(0, 69, 64, 0.1);
}
.comment-section .comments .comment-wrap {
  display: flex;
  gap: 30px;
}
@media (max-width: 767px) {
  .comment-section .comments .comment-wrap {
    flex-direction: column;
  }
}
.comment-section .comments .comment-wrap .thumb {
  max-width: 100px;
  width: 100%;
  height: 100px;
  border-radius: 100%;
}
.comment-section .comments .comment-wrap .thumb img {
  width: 100%;
  border-radius: 100%;
}
.comment-section .comments .comment-wrap .info .name {
  margin-bottom: 6px;
}
.comment-section .comments .comment-wrap .info .name p {
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  color: #15161c;
  margin-bottom: 0;
}
.comment-section .comments .comment-wrap .info .date {
  margin-bottom: 14px;
}
.comment-section .comments .comment-wrap .info .date p {
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  color: #737373;
  margin-bottom: 0;
}
.comment-section .comments .comment-wrap .info .text {
  margin-bottom: 14px;
}
.comment-section .comments .comment-wrap .info .text p {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: #737373;
  margin-bottom: 0;
}
.comment-section .comments .comment-wrap .info .reply-btn {
  padding: 6px 14px;
  background: #f8f7f0;
  color: var(--theme-color-3);
  border-radius: 88px;
  cursor: pointer;
}
.comment-section .comments .comment-wrap .info .reply-btn:hover {
  background: var(--theme-color-3);
  color: var(--theme-color-2);
}
.comment-section .leave-comment form .info-input {
  display: flex;
  gap: 20px;
}
@media (max-width: 767px) {
  .comment-section .leave-comment form .info-input {
    flex-direction: column;
  }
}
.comment-section .leave-comment form input,
.comment-section .leave-comment form textarea {
  background: #f8f7f0;
  border: 2px solid #f8f7f0;
  border-radius: 10px;
  padding: 14px 20px;
  resize: none;
}
.comment-section .leave-comment form input:focus,
.comment-section .leave-comment form textarea:focus {
  border: 2px solid rgba(0, 69, 64, 0.8);
}
.comment-section .leave-comment form input:focus::placeholder,
.comment-section .leave-comment form textarea:focus::placeholder {
  color: var(--theme-color-3);
}
.comment-section .leave-comment form input::placeholder,
.comment-section .leave-comment form textarea::placeholder {
  font-size: 17px;
  line-height: 28px;
  color: var(--body-color);
}
@media (max-width: 991px) {
  .comment-section .leave-comment form input::placeholder,
  .comment-section .leave-comment form textarea::placeholder {
    font-size: 16px;
  }
}
.comment-section .leave-comment form button {
  border: none;
}

.make-donate .icon-wrap {
  width: 100%;
  position: relative;
  border-radius: 10px;
}
.make-donate .icon-wrap input {
  width: 100%;
  border: none;
  padding: 26px 40px 26px 26px;
  font-style: normal;
  font-weight: 600;
  font-size: 36px;
  line-height: 48px;
  text-align: right;
  color: var(--theme-color-3);
  background: #ffffff;
  box-shadow: 0 35px 41.5px -16px rgba(0, 69, 64, 0.12);
  border-radius: 10px;
}
.make-donate .icon-wrap i {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 8px;
  left: 8px;
  width: 70px;
  height: 70px;
  border-radius: 100%;
  font-size: 32px;
  color: var(--theme-color-3);
  background: #f8f7f0;
  border: 2px solid var(--theme-color-2);
  box-shadow: 0px 15px 32.2px -9px rgba(0, 24, 25, 0.2);
}
@media (max-width: 767px) {
  .make-donate .icon-wrap i {
    top: 4px;
    left: 4px;
  }
}
.make-donate .icon-wrap:hover {
  background: var(--theme-color-2);
}
.make-donate .icon-wrap:hover i {
  border: 2px solid var(--white-color);
}

/* 34 Details Sidebar Css */
.details-layout-wrap {
  display: flex;
  gap: 60px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .details-layout-wrap {
    flex-direction: column;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .details-layout-wrap {
    flex-direction: column;
  }
}
@media (max-width: 767px) {
  .details-layout-wrap {
    flex-direction: column;
  }
}
.details-layout-wrap .details-content {
  flex: 1;
  width: 100%;
  max-width: 922px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .details-layout-wrap .details-content {
    max-width: 670px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .details-layout-wrap .details-content {
    max-width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .details-layout-wrap .details-content {
    max-width: 100%;
  }
}
@media (max-width: 767px) {
  .details-layout-wrap .details-content {
    max-width: 100%;
  }
}

.detail-sidebar {
  flex: none;
  max-width: 380px;
  width: 100%;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .detail-sidebar {
    max-width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .detail-sidebar {
    max-width: 100%;
  }
}
@media (max-width: 767px) {
  .detail-sidebar {
    max-width: 100%;
  }
}
.detail-sidebar .detail-sidebar-inner {
  position: sticky;
  top: 20px;
}
.detail-sidebar .s-widget-wrap {
  background: #f8f7f0;
  border-radius: 10px;
  padding: 30px 40px;
}
@media (max-width: 767px) {
  .detail-sidebar .s-widget-wrap {
    padding: 20px;
  }
}
.detail-sidebar .s-widget-wrap .w-title h3 {
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: #004540;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.detail-sidebar .s-widget-wrap .w-title .bar-wrap {
  position: relative;
  z-index: 1;
  margin: 10px 0 30px;
}
.detail-sidebar .s-widget-wrap .w-title .bar-wrap .bar-1 {
  border-bottom: 2px solid rgba(0, 69, 64, 0.1);
}
.detail-sidebar .s-widget-wrap .w-title .bar-wrap .bar-2 {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 23%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 69, 64, 0) 0%, #004540 100%);
}
.detail-sidebar .s-widget-wrap .socials {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.detail-sidebar .s-widget-wrap .socials .social-links {
  display: flex;
  gap: 10px;
  transition: all 0.3s;
}
.detail-sidebar .s-widget-wrap .socials .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background: var(--white-color);
  color: var(--body-color);
}
.detail-sidebar .s-widget-wrap .socials .social-links a:hover {
  background: var(--theme-color-2);
  color: var(--theme-color-3);
}
.detail-sidebar .s-widget-wrap .project-info-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.detail-sidebar .s-widget-wrap .project-info-wrap .project-text {
  margin-bottom: 24px;
}
.detail-sidebar .s-widget-wrap .project-info-wrap .project-text p {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: var(--body-color);
  margin-bottom: 0;
}
.detail-sidebar .s-widget-wrap .project-info-wrap .project-info {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 69, 64, 0.1);
  display: flex;
  align-items: center;
  gap: 20px;
}
.detail-sidebar .s-widget-wrap .project-info-wrap .project-info:hover {
  cursor: pointer;
}
.detail-sidebar .s-widget-wrap .project-info-wrap .project-info:hover .icon {
  color: var(--theme-color-2);
  background: var(--theme-color-3);
}
.detail-sidebar .s-widget-wrap .project-info-wrap .project-info .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  width: 60px;
  height: 60px;
  font-size: 26px;
  color: var(--theme-color-3);
  background: var(--white-color);
}
.detail-sidebar .s-widget-wrap .project-info-wrap .project-info .key-value .key {
  margin-bottom: 6px;
}
.detail-sidebar .s-widget-wrap .project-info-wrap .project-info .key-value .key p {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--body-color);
  margin-bottom: 0;
}
.detail-sidebar .s-widget-wrap .project-info-wrap .project-info .key-value .value h6 {
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  color: #004540;
  margin-bottom: 0;
}
.detail-sidebar .s-widget-wrap .project-info-wrap .project-info-last {
  padding: 0;
  border: none;
}
.detail-sidebar .s-widget-wrap .organizer-info-wrap .thumb {
  max-width: 100px;
  width: 100%;
  height: 100px;
  margin: 0 auto 10px;
  border-radius: 100%;
  border: 6px solid var(--white-color);
}
.detail-sidebar .s-widget-wrap .organizer-info-wrap .thumb img {
  width: 100%;
  border-radius: 100%;
}
.detail-sidebar .s-widget-wrap .organizer-info-wrap .name h3 {
  text-align: center;
  font-family: var(--outfit-font);
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: var(--theme-color-3);
  margin-bottom: 0;
}
.detail-sidebar .s-widget-wrap .organizer-info-wrap .text {
  margin-bottom: 24px;
}
.detail-sidebar .s-widget-wrap .organizer-info-wrap .text p {
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  text-align: center;
  color: var(--theme-color-3);
  margin-bottom: 0;
}
.detail-sidebar .s-widget-wrap .organizer-info-wrap .divider {
  width: 100%;
  margin-bottom: 24px;
  height: 2px;
  background: rgba(0, 69, 64, 0.1);
}
.detail-sidebar .s-widget-wrap .organizer-info-wrap .date,
.detail-sidebar .s-widget-wrap .organizer-info-wrap .location {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.detail-sidebar .s-widget-wrap .organizer-info-wrap .date i,
.detail-sidebar .s-widget-wrap .organizer-info-wrap .location i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  padding: 7px;
  background: var(--white-color);
  border: 1px solid rgba(0, 69, 64, 0.15);
}
.detail-sidebar .s-widget-wrap .organizer-info-wrap .date p,
.detail-sidebar .s-widget-wrap .organizer-info-wrap .location p {
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 28px;
  color: var(--body-color);
  margin-bottom: 0;
}
.detail-sidebar .s-widget-wrap .recent-campaigns .campaign {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 2px solid rgba(0, 69, 64, 0.1);
}
.detail-sidebar .s-widget-wrap .recent-campaigns .campaign .thumb {
  max-width: 97px;
  height: 97px;
  width: 100%;
  border-radius: 100%;
}
.detail-sidebar .s-widget-wrap .recent-campaigns .campaign .thumb img {
  width: 100%;
  border-radius: 100%;
}
.detail-sidebar .s-widget-wrap .recent-campaigns .campaign .date {
  margin-bottom: 4px;
}
.detail-sidebar .s-widget-wrap .recent-campaigns .campaign .date p {
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: #6f7174;
  margin-bottom: 0;
}
.detail-sidebar .s-widget-wrap .recent-campaigns .campaign .name h5 {
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  color: #121213;
  margin-bottom: 0;
}
.detail-sidebar .s-widget-wrap .recent-campaigns .campaign-last {
  padding: 0;
  margin: 0;
  border: none;
}

.detail-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.detail-list ul li {
  margin-bottom: 10px;
}
.detail-list ul li:last-child {
  margin-bottom: 0;
}
.detail-list ul li a {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-content: space-between;
  font-family: var(--albert-sans-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: #868681;
  background: #ffffff;
  border-radius: 4px;
  padding: 10px 5px 10px 20px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.detail-list ul li a:hover {
  color: var(--white-color);
  background: var(--theme-color-3);
}
.detail-list ul li a:hover .icon {
  color: var(--theme-color-3);
  background: var(--theme-color-2);
}
.detail-list ul li a .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--body-color);
  width: 30px;
  height: 30px;
  background: #f8f7f0;
  border-radius: 50%;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.detail-contact .icon-info-wrap {
  margin-top: -20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border-radius: 10px;
}
.detail-contact .icon-info-wrap .icon-wrap {
  position: relative;
  z-index: 1;
  height: 30px;
  margin-bottom: 10px;
  display: inline-block;
}
.detail-contact .icon-info-wrap .icon-wrap .icon {
  margin-top: -30px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.21);
  border: 1.5px solid #ffe175;
  backdrop-filter: blur(4.7px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.detail-contact .icon-info-wrap .icon-wrap .bar-wrap .bar-1 {
  position: absolute;
  left: 40px;
  width: 130px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 117, 0) 0%, #ffe175 100%);
  margin-left: -20px;
}
@media (max-width: 767px) {
  .detail-contact .icon-info-wrap .icon-wrap .bar-wrap .bar-1 {
    width: 60px;
  }
}
.detail-contact .icon-info-wrap .icon-wrap .bar-wrap .bar-2 {
  position: absolute;
  right: 40px;
  width: 130px;
  height: 2px;
  background: linear-gradient(90deg, #ffe175 0%, rgba(255, 255, 117, 0) 100%);
  margin-right: -20px;
}
@media (max-width: 767px) {
  .detail-contact .icon-info-wrap .icon-wrap .bar-wrap .bar-2 {
    width: 60px;
  }
}
.detail-contact .icon-info-wrap .info {
  text-align: center;
}
.detail-contact .icon-info-wrap .info h3 {
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  margin-bottom: 0;
}
.detail-contact .icon-info-wrap .info h3 a {
  color: #004540;
}
.detail-contact .icon-info-wrap .info p {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #868681;
}

/* 35 Camping Donation Css */
.choose-currency-2 {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 24px;
}
@media (max-width: 991px) {
  .choose-currency-2 {
    flex-wrap: wrap;
  }
}
.choose-currency-2 p {
  font-style: normal;
  font-weight: 500;
  color: var(--theme-color-3);
  margin-bottom: 0;
}
.choose-currency-2 .amount {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  background: rgba(248, 247, 240, 0.1);
  border-radius: 88px;
  font-style: normal;
  font-weight: 600;
  color: var(--theme-color-3);
  cursor: pointer;
  border: none;
}
.choose-currency-2 .amount.active, .choose-currency-2 .amount:hover {
  background: var(--theme-color-3);
  color: var(--theme-color-2);
}
.choose-currency-2 .custom-amount {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 2px solid rgba(0, 69, 64, 0.1);
  border-radius: 88px;
  font-style: normal;
  font-weight: 600;
  color: var(--theme-color-3);
  cursor: pointer;
  background: transparent;
}
.choose-currency-2 .custom-amount i {
  color: var(--theme-color-3);
}
.choose-currency-2 .custom-amount p {
  color: var(--theme-color-2);
}
.choose-currency-2 .custom-amount:hover {
  border: 2px solid var(--theme-color-3);
}

.thank-you-text p {
  font-family: var(--dm-sans-font);
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 28px;
  color: var(--body-color);
  margin-bottom: 0;
}

.payment-method-form {
  padding-top: 40px;
  border-top: 1px solid rgba(0, 69, 64, 0.1);
}
.payment-method-form .payment-title {
  margin-bottom: 20px;
}
.payment-method-form .payment-title h3 {
  font-family: var(--outfit-font);
  font-style: normal;
  font-weight: 500;
  font-size: 36px;
  line-height: 48px;
  color: var(--theme-color-3);
  margin-bottom: 0;
}
.payment-method-form .select-payment-method {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.payment-method-form .select-payment-method .method {
  display: flex;
  align-items: center;
  gap: 4px;
}
.payment-method-form .select-payment-method .method input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background-color: var(--theme-color-3);
  position: relative;
  cursor: pointer;
  vertical-align: middle;
}
.payment-method-form .select-payment-method .method input[type=checkbox]:checked::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 7px;
  width: 6px;
  height: 10px;
  border: solid var(--theme-color-2);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.payment-method-form .select-payment-method .method label {
  font-family: var(--dm-sans-font);
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 28px;
  color: var(--body-color);
}
.payment-method-form form h5 {
  margin-bottom: 24px;
  font-family: var(--outfit-font);
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: var(--theme-color-3);
}
.payment-method-form form .info-input {
  display: flex;
  gap: 20px;
}
.payment-method-form form input,
.payment-method-form form textarea {
  background: var(--white-color);
  border: 2px solid var(--white-color);
  border-radius: 10px;
  padding: 14px 20px;
  resize: none;
}
.payment-method-form form input:focus,
.payment-method-form form textarea:focus {
  background: var(--white-color);
  border: 2px solid rgba(0, 69, 64, 0.8);
}
.payment-method-form form input:focus::placeholder,
.payment-method-form form textarea:focus::placeholder {
  color: var(--theme-color-3);
}
.payment-method-form form input::placeholder,
.payment-method-form form textarea::placeholder {
  font-size: 17px;
  line-height: 28px;
  color: var(--body-color);
}
@media (max-width: 991px) {
  .payment-method-form form input::placeholder,
  .payment-method-form form textarea::placeholder {
    font-size: 16px;
  }
}
.payment-method-form form button {
  border: none;
}
.payment-method-form form .form-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.payment-method-form form .form-bottom p {
  font-family: var(--albert-sans-font);
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  color: var(--body-color);
  margin-bottom: 0;
}
.payment-method-form form .impact-text p {
  font-family: var(--albert-sans-font);
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  color: var(--body-color);
  margin-bottom: 0;
}
.payment-method-form form .impact-text p span {
  font-weight: 600;
}

.divider-2 {
  width: 100%;
  background: rgba(0, 69, 64, 0.1);
  height: 1px;
}

.sponsor-info-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
}
.sponsor-info-wrap .thumb {
  max-width: 100px;
  width: 100%;
  height: 100px;
  border-radius: 100%;
  border: 6px solid var(--white-color);
}
.sponsor-info-wrap .thumb img {
  width: 100%;
  border-radius: 100%;
}
.sponsor-info-wrap .name h3 {
  font-family: var(--outfit-font);
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: var(--theme-color-3);
  margin-bottom: 0;
}
.sponsor-info-wrap .designation {
  margin-bottom: 10px;
}
.sponsor-info-wrap .designation p {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--body-color);
  margin-bottom: 0;
}
.sponsor-info-wrap .view-profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--albert-sans-font);
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 28px;
  color: var(--body-color);
  background: var(--white-color);
  border-radius: 6px;
  padding: 4px 12px;
  border: 1px solid var(--theme-color-2);
}
.sponsor-info-wrap .view-profile-btn:hover {
  background-color: var(--theme-color-2);
  color: var(--theme-color-3);
}

.sidebar-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.sidebar-gallery .thumb {
  border-radius: 6px;
}
.sidebar-gallery .thumb img {
  border-radius: 6px;
}

/* 36 Donations Css */
.notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #f8f7f0;
  border: 1px solid rgba(0, 69, 64, 0.15);
  box-shadow: 0px 6px 30px rgba(0, 69, 64, 0.09);
  border-radius: 10px;
}
.notice p {
  font-family: var(--dm-sans-font);
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: var(--body-color);
}
.notice p span {
  color: var(--theme-color-3);
}

.services-details-section-2 {
  position: relative;
  z-index: 1;
  margin-bottom: -160px;
}
.services-details-section-2 .d-shape-1 {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
}

/* 37 Blog Standard Css */
.search-bar {
  position: relative;
  margin-bottom: 10px;
}
.search-bar input {
  width: 100%;
  height: 50px;
  padding: 14px;
  border: 0;
  border-radius: 4px;
}
.search-bar input::-webkit-input-placeholder {
  font-weight: 500;
  color: var(--body-color);
}
.search-bar input:-moz-placeholder {
  font-weight: 500;
  color: var(--body-color);
}
.search-bar input::-moz-placeholder {
  font-weight: 500;
  color: var(--body-color);
}
.search-bar input:-ms-input-placeholder {
  font-weight: 500;
  color: var(--body-color);
}
.search-bar i {
  position: absolute;
  top: 7px;
  right: 7px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 16px;
  background: #f8f7f0;
  padding: 11px;
}

.categories button {
  padding: 0px 12px;
  border: 1px solid rgba(0, 69, 64, 0.1);
  border-radius: 88px;
  background: transparent;
  font-family: var(--dm-sans-font);
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 28px;
  color: var(--body-color);
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.categories button:hover {
  background: var(--theme-color-2);
  color: var(--theme-color-3);
  border-color: var(--theme-color-2);
}

.blog-card-4 {
  background-color: #f8f7f0;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 4px 56.5px rgba(0, 0, 0, 0.06);
  z-index: 1;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.blog-card-4:hover {
  background-color: var(--white-color);
  box-shadow: 0 35px 41.5px -16px rgba(0, 69, 64, 0.08);
}
.blog-card-4:hover .content .content-bottom .read-more-btn {
  border: 2px solid var(--theme-color-2);
}
.blog-card-4:hover .content .content-bottom .read-more-btn::before {
  left: -10%;
  transform: translateX(0%) translateY(-50%);
}
.blog-card-4 .thumb {
  position: relative;
}
.blog-card-4 .thumb > a {
  display: block;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
.blog-card-4 .thumb > a img {
  width: 100%;
  border-radius: 10px 10px 0 0;
}
.blog-card-4 .thumb .category {
  position: absolute;
  top: 20px;
  left: 20px;
}
.blog-card-4 .thumb .category a {
  display: inline-block;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.01);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 4px 11px rgba(255, 255, 255, 0.4), inset -1px -4px 23.1px rgba(0, 24, 25, 0.28);
  backdrop-filter: blur(23.9px);
  border-radius: 53px;
  color: var(--white-color);
}
.blog-card-4 .thumb .category a:hover {
  color: var(--theme-color-3);
  background: var(--white-color);
}
.blog-card-4 .content {
  padding: 24px 102px 26px 30px;
}
.blog-card-4 .content .blog-info {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}
.blog-card-4 .content .blog-info p {
  font-family: var(--albert-sans-font);
  color: var(--body-color);
  margin-bottom: 0;
}
.blog-card-4 .content .blog-info .publisher-info,
.blog-card-4 .content .blog-info .date,
.blog-card-4 .content .blog-info .comment,
.blog-card-4 .content .blog-info .view {
  display: flex;
  align-items: center;
  gap: 10px;
}
.blog-card-4 .content .blog-info .publisher-info img,
.blog-card-4 .content .blog-info .date img,
.blog-card-4 .content .blog-info .comment img,
.blog-card-4 .content .blog-info .view img {
  width: 30px;
  height: 30px;
  border-radius: 100%;
}
.blog-card-4 .content .title h3 {
  font-weight: 600;
  font-size: 48px;
  line-height: 60px;
  color: var(--theme-color-3);
  margin-bottom: 12px;
}
.blog-card-4 .content .title h3 a {
  color: var(--theme-color-3);
}
.blog-card-4 .content .text p {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 28px;
  color: var(--body-color);
  margin-bottom: 24px;
}
.blog-card-4 .content .read-more-btn {
  color: var(--theme-color-3);
  background-color: transparent;
  border: 2px solid rgba(0, 69, 64, 0.1);
}
.blog-card-4 .content .read-more-btn:hover {
  color: var(--white-color);
}

.blog-card-5 .thumb {
  margin-bottom: 24px;
}
.blog-card-5 .thumb > a {
  border-radius: 10px;
}
.blog-card-5 .thumb > a img {
  width: 100%;
  border-radius: 10px;
}
.blog-card-5 .content .blog-info {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}
.blog-card-5 .content .blog-info p {
  font-family: var(--albert-sans-font);
  color: var(--body-color);
  margin-bottom: 0;
}
.blog-card-5 .content .blog-info .publisher-info,
.blog-card-5 .content .blog-info .date,
.blog-card-5 .content .blog-info .comment,
.blog-card-5 .content .blog-info .view {
  display: flex;
  align-items: center;
  gap: 10px;
}
.blog-card-5 .content .blog-info .publisher-info img,
.blog-card-5 .content .blog-info .date img,
.blog-card-5 .content .blog-info .comment img,
.blog-card-5 .content .blog-info .view img {
  width: 30px;
  height: 30px;
  border-radius: 100%;
}
.blog-card-5 .content .title h3 {
  font-weight: 600;
  font-size: 48px;
  line-height: 60px;
  color: var(--theme-color-3);
  margin-bottom: 24px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .blog-card-5 .content .title h3 {
    font-size: 19px;
    line-height: 1.4;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .blog-card-5 .content .title h3 {
    font-size: 19px;
    line-height: 1.4;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .blog-card-5 .content .title h3 {
    font-size: 18px;
    line-height: 1.4;
  }
}
@media (max-width: 767px) {
  .blog-card-5 .content .title h3 {
    font-size: 18px;
    line-height: 1.4;
  }
}
.blog-card-5 .content .title h3 a {
  color: var(--theme-color-3);
}
.blog-card-5 .content .text p {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 28px;
  color: var(--body-color);
  margin-bottom: 24px;
}

.detail-thumb-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-bottom: 24px;
}
.detail-thumb-wrap img {
  border-radius: 10px;
}

.blog-tags {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 20px;
}
.blog-tags .tag-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}
.blog-tags .tag-wrap p {
  font-family: var(--dm-sans-font);
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  color: var(--theme-color-3);
  margin-bottom: 0;
}
.blog-tags .tag-wrap .tags {
  display: flex;
  align-items: center;
  gap: 8px;
}
.blog-tags .tag-wrap .tags button {
  font-family: var(--dm-sans-font);
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 100%;
  color: var(--body-color);
  padding: 7px 12px;
  background: #f8f7f0;
  border: 1px solid var(--white-color);
  box-shadow: 0px 6px 30px rgba(0, 69, 64, 0.09);
  border-radius: 10px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.blog-tags .tag-wrap .tags button:hover {
  background: var(--theme-color-3);
  color: var(--theme-color-2);
  border-color: var(--theme-color-3);
}
.blog-tags .socials {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.blog-tags .socials .social-links {
  display: flex;
  gap: 10px;
  transition: all 0.3s;
}
.blog-tags .socials .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background: #f8f7f0;
  color: var(--body-color);
}
.blog-tags .socials .social-links a:hover {
  background: var(--theme-color-3);
  color: var(--theme-color-2);
}

/*# sourceMappingURL=main.css.map */


/* =====================================================================
   HEADER STEP 1  (homepage review, 7 Oct 2026)
   [HOME] = homepage only (.page-home)   [SITE] = site-wide partials
   ===================================================================== */

/* ---------- [HOME] B. Overlay header: tinted glass, legible on any photo ---------- */
.page-home .header-section-1 .logo-wrap-2,
.page-home .header-section-1 .header-middle,
.page-home .header-section-1 .header-bar-3 {
  background: rgba(35, 31, 32, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.12);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .page-home .header-section-1 .logo-wrap-2,
  .page-home .header-section-1 .header-middle,
  .page-home .header-section-1 .header-bar-3 { background: rgba(35, 31, 32, 0.9); }
}
@media (prefers-reduced-transparency: reduce) {
  .page-home .header-section-1 .logo-wrap-2,
  .page-home .header-section-1 .header-middle,
  .page-home .header-section-1 .header-bar-3 {
    background: #231F20;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* [HOME] Nav active + focus on the overlay header */
.page-home .main-menu-2 ul li a[aria-current="page"] {
  color: #99EF68;
  background: rgba(153, 239, 104, 0.14);
}
.page-home .main-menu-2 ul li a:focus-visible {
  outline: 2px solid #99EF68;
  outline-offset: 2px;
}

/* ---------- [SITE] Solid header: sticky, active state ---------- */
.header-section {
  position: sticky;
  top: 0;
  background: #fff;
  transition: box-shadow 0.2s ease;
}
.main-menu ul li a[aria-current="page"] {
  background: rgba(0, 119, 73, 0.08);
  box-shadow: inset 0 -2px 0 #007749;
}
.main-menu ul li a:focus-visible {
  outline: 2px solid #007749;
  outline-offset: 2px;
}

/* ---------- [SITE] C. Customer Portal button ---------- */
.portal-btn {
  --pb-fg: #fff;
  --pb-line: #99EF68;
  --pb-fill: #99EF68;
  --pb-fill-fg: #231F20;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px 6px 6px 20px;
  border: 1.5px solid var(--pb-line);
  border-radius: 999px;
  font-family: var(--albert-sans-font);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--pb-fg);
  text-decoration: none;
  transition: color 0.16s ease, transform 0.1s ease;
}
.portal-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pb-fill);
  opacity: 0;
  transition: opacity 0.16s ease;
}
.portal-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pb-line);
  color: var(--pb-fill-fg);
  font-size: 0.9375rem;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.portal-btn:hover,
.portal-btn:focus-visible { color: var(--pb-fill-fg); }
.portal-btn:hover::before,
.portal-btn:focus-visible::before { opacity: 1; }
.portal-btn:hover .portal-btn__icon,
.portal-btn:focus-visible .portal-btn__icon {
  background: var(--pb-fill-fg);
  color: var(--pb-line);
}
.portal-btn:active { transform: scale(0.97); }
.portal-btn:focus-visible {
  outline: 2px solid var(--pb-line);
  outline-offset: 3px;
}

/* Light variant: inner-page header and panel */
.portal-btn--light {
  --pb-fg: #007749;
  --pb-line: #007749;
  --pb-fill: #007749;
  --pb-fill-fg: #fff;
}

/* Full width (panel) */
.portal-btn--full { width: 100%; justify-content: space-between; }

/* Icon-only, 768-1199 */
.portal-btn--icon {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  gap: 0;
  justify-content: center;
}
.portal-btn--icon .portal-btn__icon {
  width: 100%;
  height: 100%;
  background: transparent;
  color: var(--pb-line);
}
.portal-btn--icon:hover .portal-btn__icon,
.portal-btn--icon:focus-visible .portal-btn__icon {
  background: transparent;
  color: var(--pb-fill-fg);
}
.page-home .header-right .portal-btn--icon {
  margin-right: 12px;
  background: rgba(35, 31, 32, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* ---------- Adjustments the new header markup needs ---------- */

/* [SITE] Menu toggles are now <button>s: clear browser button styles */
.header-bar-3,
.header-bar {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  margin: 0;
  font: inherit;
  color: inherit;
}
.header-bar-3 {
  border-top: 0;
  border-left: 0;
}
.header-bar { padding: 0; }
.header-bar-3:focus-visible {
  outline: 2px solid #99EF68;
  outline-offset: -4px;
}
.header-bar:focus-visible {
  outline: 2px solid #007749;
  outline-offset: 2px;
}

/* [SITE] "Call us" is one <a>; the number is the <p> */
.call-link .header-info-content p {
  -webkit-transition: color 0.3s linear 0s;
  transition: color 0.3s linear 0s;
}
.header-info.call-link:hover .header-info-content p { color: var(--theme-color); }
.header-info.call-link:focus-visible {
  outline: 2px solid #007749;
  outline-offset: 4px;
  border-radius: 999px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .call-link .header-info-content span { display: none; }
}

/* [HOME] Overlay "Call us": white label, #99EF68 number and icon */
.page-home .header-info-3.call-link .header-info-content span { color: rgba(255, 255, 255, 0.85); }
.page-home .header-info-3.call-link .header-info-content p { color: #99EF68; }
.page-home .header-info-3.call-link:hover .header-info-content p { color: #fff; }
.page-home .header-info-3.call-link:focus-visible {
  outline: 2px solid #99EF68;
  outline-offset: 4px;
  border-radius: 999px;
}
.page-home .header-info-3 .header-info-icon {
  color: #99EF68;
  background: rgba(153, 239, 104, 0.12);
  border-color: rgba(153, 239, 104, 0.35);
}

/* [HOME] Keep the glass bar level with the logo and menu tiles */
.page-home .header-section-1 .header-middle { min-height: 81px; }
@media (min-width: 1200px) and (max-width: 1399px) {
  .page-home .header-section-1 .header-middle { min-height: 71px; }
}


/* ---------- [SITE] D. Unified off-canvas panel (partials/offcanvas.html) ---------- */
/* Uses Bootstrap 5's .visually-hidden (already loaded), so no utility class here. */
.bh-panel {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.28s;
}
.bh-panel.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s;
}
.bh-panel__overlay {
  position: absolute;
  inset: 0;
  background: rgba(35, 31, 32, 0.6);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.24s ease;
}
.bh-panel.is-open .bh-panel__overlay { opacity: 1; }
.bh-panel__body {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(400px, 100%);
  height: 100%;
  background: #fff;
  box-shadow: -24px 0 48px -24px rgba(35, 31, 32, 0.45);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  overscroll-behavior: contain;
}
.bh-panel.is-open .bh-panel__body { transform: translateX(0); }

/* Head: logo + close, stays put while the panel scrolls */
.bh-panel__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  min-height: 72px;
  padding: 0 12px 0 24px;
  background: #fff;
  border-bottom: 1px solid #EDEDEA;
}
.bh-panel__logo { display: block; line-height: 0; }
.bh-panel__logo img { display: block; width: 125px; height: 50px; }
.bh-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #231F20;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background-color 0.16s ease, transform 0.1s ease;
}
.bh-panel__close:hover  { background: #F4F4F4; }
.bh-panel__close:active { transform: scale(0.94); }

/* Scrolling content */
.bh-panel__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 24px 32px;
}

/* Nav (below 1200px only; the header shows it at 1200px and up) */
.bh-panel__nav ul { list-style: none; margin: 0; padding: 0; }
.bh-panel__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  border-bottom: 1px solid #EDEDEA;
  font-family: var(--outfit-font);
  font-weight: 500;
  font-size: 1.125rem;
  color: #231F20;
}
.bh-panel__nav a::after {
  content: "\f054";
  font-family: var(--icon-font);
  font-weight: 400;
  font-size: 0.75rem;
  color: #868681;
}
.bh-panel__nav a:hover { color: #007749; }
.bh-panel__nav a[aria-current="page"] {
  color: #007749;
  padding-left: 12px;
  box-shadow: inset 3px 0 0 #99EF68;
}
@media (min-width: 1200px) {
  .bh-panel__nav { display: none; }
}

/* Actions: Customer Portal (portal-btn--light portal-btn--full) */
.bh-panel__actions { display: grid; gap: 12px; margin-top: 24px; }

/* Intro line */
.bh-panel__intro {
  margin: 28px 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #4A4A46;
}

/* Contact rows: one 40px icon column, so every row shares a left edge */
.bh-panel__contact {
  list-style: none;
  display: grid;
  gap: 4px;
  margin: 28px 0 0;
  padding: 0;
}
.bh-panel__contact a {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 16px;
  align-items: center;
  min-height: 56px;
  padding: 8px 0;
  color: #231F20;
}
.bh-panel__contact .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #007749;
  color: #fff;
  font-size: 1rem;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.bh-panel__contact a:hover .icon { background: #99EF68; color: #231F20; }
.bh-panel__contact small {
  display: block;
  margin-bottom: 2px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #4A4A46;
}
.bh-panel__contact .value { display: block; font-size: 1rem; line-height: 1.4; }

/* Social row: 44px brand circles */
.bh-panel__social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.bh-panel__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #007749;
  color: #fff;
  font-size: 1rem;
  transition: background-color 0.16s ease, color 0.16s ease, transform 0.1s ease;
}
.bh-panel__social a:hover { background: #99EF68; color: #231F20; }
.bh-panel__social a:active { transform: scale(0.94); }
.bh-panel__social a:focus-visible { outline-offset: 3px; border-radius: 50%; }

/* Focus ring for everything in the panel (main.css removes button outlines on :focus) */
.bh-panel :focus-visible {
  outline: 2px solid #007749;
  outline-offset: 2px;
  border-radius: 6px;
}
.bh-panel__close:focus-visible { border-radius: 50%; }
.bh-panel .portal-btn:focus-visible { border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .bh-panel__body,
  .bh-panel__overlay { transition: none; }
}


/* Panel office photo */
.bh-panel__photo {
  display: block;
  width: 100%;
  height: auto;               /* overrides the height="600" attribute so aspect-ratio applies */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 12px;
  margin-top: 24px;
  background: #EDEDEA;
}


/* ---------- [SITE] Panel typography refinements ---------- */
.bh-panel .bh-panel__intro {
  font-size: 1rem;
  line-height: 1.6;
  color: #3A3637;                 /* ~11:1 on white */
}
.bh-panel .bh-panel__contact small {
  display: block;
  margin-bottom: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #007749;                 /* 5.6:1, clearly distinct from the value */
}
.bh-panel .bh-panel__contact .value {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  color: #231F20;
}
.bh-panel .bh-panel__contact a:hover .value { color: #007749; }

/* Thin, subtle scrollbar inside the panel */
.bh-panel .bh-panel__scroll {
  scrollbar-width: thin;
  scrollbar-color: #C9C9C4 transparent;
}
.bh-panel .bh-panel__scroll::-webkit-scrollbar { width: 6px; }
.bh-panel .bh-panel__scroll::-webkit-scrollbar-thumb {
  background: #C9C9C4;
  border-radius: 3px;
}
.bh-panel .bh-panel__scroll::-webkit-scrollbar-track { background: transparent; }

/* ---------- [SITE] Panel: intro matches values, portal only on phones ---------- */
.bh-panel .bh-panel__intro {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  color: #231F20;
}

/* Header shows the portal button from 768px up, so hide the panel copy there */
@media (min-width: 768px) {
  .bh-panel .bh-panel__actions { display: none; }
  .bh-panel .bh-panel__intro { margin-top: 24px; }
}

/* Thin scrollbar, whichever element scrolls */
.bh-panel .bh-panel__body,
.bh-panel .bh-panel__scroll {
  scrollbar-width: thin;
  scrollbar-color: #C9C9C4 transparent;
}
.bh-panel .bh-panel__body::-webkit-scrollbar,
.bh-panel .bh-panel__scroll::-webkit-scrollbar { width: 6px; }
.bh-panel .bh-panel__body::-webkit-scrollbar-thumb,
.bh-panel .bh-panel__scroll::-webkit-scrollbar-thumb {
  background: #C9C9C4;
  border-radius: 3px;
}
.bh-panel .bh-panel__body::-webkit-scrollbar-button,
.bh-panel .bh-panel__scroll::-webkit-scrollbar-button { display: none; }


/* ---------- [HOME] E. Hero ---------- */

/* Equal slide heights: stretch both slides to the tallest */
.page-home .hero-slider-active-1 .swiper-slide { height: auto; }
.page-home .hero-slider-active-1 .hero-side   { height: 100%; }

/* Image-independent scrim */
.page-home .hero-side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(35, 31, 32, 0.55) 0%, rgba(35, 31, 32, 0) 22%),
    linear-gradient(90deg, rgba(35, 31, 32, 0.80) 0%, rgba(35, 31, 32, 0.55) 38%,
                           rgba(35, 31, 32, 0.15) 68%, rgba(35, 31, 32, 0) 100%);
}
.page-home .hero-side > .container { position: relative; z-index: 1; }
@media (max-width: 767px) {
  .page-home .hero-side::before {
    background: linear-gradient(180deg, rgba(35, 31, 32, 0.60) 0%,
                                        rgba(35, 31, 32, 0.72) 40%,
                                        rgba(35, 31, 32, 0.85) 100%);
  }
  .page-home .hero-slider-active-1 .container { padding-left: 16px; padding-right: 16px; }
}

/* Slide 2's heading is an <h2>: give it the slide 1 <h1> styles at every width */
.page-home .hero-content-1 .title h2 {
  font-style: normal;
  font-weight: 600;
  font-size: 80px;
  margin-bottom: 20px;
  color: var(--light-color);
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .page-home .hero-content-1 .title h2 { font-size: 74px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .page-home .hero-content-1 .title h2 { font-size: 68px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .page-home .hero-content-1 .title h2 { font-size: 52px; margin-bottom: 14px; }
}
@media (max-width: 767px) {
  .page-home .hero-content-1 .title h2 { font-size: 36px; margin-bottom: 14px; }
}

/* Headline: green accent on its own line (both slides) */
.page-home .hero-content-1 .title h1,
.page-home .hero-content-1 .title h2 {
  letter-spacing: -0.02em;
  line-height: 1.04;
  text-wrap: balance;
}
.page-home .hero-content-1 .title h1 span,
.page-home .hero-content-1 .title h2 span {
  display: block;
  color: var(--theme-shade-color);
}

/* Hero stats are <p class="author-stat"> now: keep the old <h5> look */
.page-home .hero-content-1 .join-us .author-wrap .author-info .author-stat {
  margin: 0;
  font-family: var(--outfit-font);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  color: var(--light-color);
}
@media (max-width: 991px) {
  .page-home .hero-content-1 .join-us .author-wrap .author-info .author-stat { font-size: 18px; }
}

/* Badge */
.page-home .hero-content-1 .subtitle {
  background: rgba(35, 31, 32, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 767px) {
  .page-home .hero-content-1 .subtitle span { font-size: 0.875rem; }
}

/* Slider controls: pagination + pause in one group, on the image */
.page-home .hero-controls {
  position: absolute;
  right: 90px;
  bottom: 50px;
  z-index: 99;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.page-home .hero-controls .hero-slider-pagination-1 { position: static; }
@media (max-width: 1399px) { .page-home .hero-controls { right: 30px; } }
@media (max-width: 767px)  { .page-home .hero-controls { left: 16px; right: auto; bottom: 20px; } }
.page-home .hero-autoplay-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(35, 31, 32, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.16s ease, transform 0.1s ease;
}
.page-home .hero-autoplay-toggle:hover  { background: rgba(35, 31, 32, 0.8); }
.page-home .hero-autoplay-toggle:active { transform: scale(0.94); }
.page-home .hero-slider-pagination-1 .swiper-pagination-bullet::after {
  content: "";
  position: absolute;
  inset: -10px;     /* 40px+ hit area */
}
.page-home .hero-slider-pagination-1 .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
  background: #007749;
}
.page-home .hero-autoplay-toggle:focus-visible,
.page-home .hero-slider-pagination-1 .swiper-pagination-bullet:focus-visible {
  outline: 2px solid #99EF68;
  outline-offset: 2px;
}

/* Social rail: 44px links */
.page-home .hero-slider-active-1 .hero-slider-social { width: 44px; }
.page-home .hero-slider-active-1 .hero-slider-social .social-links a {
  width: 44px;
  height: 44px;
}
.page-home .hero-slider-active-1 .hero-slider-social .social-links a:focus-visible {
  outline: 2px solid #99EF68;
  outline-offset: 3px;
}


/* =====================================================================
   [SITE] INNER-PAGE BANNER (partials/breadcrumb.html)
   ===================================================================== */
/* Fixed heights: the banner no longer grows with the image's aspect ratio.
   The diagonal cut follows the height (~5 degrees), not the width. */
   @media (min-width: 992px) {
    .breadcrumb-section { --bc-h: 240px; }
    .breadcrumb-section .row { height: var(--bc-h); }
    .breadcrumb-section .row > [class*="col-"] { height: 100%; }
    .breadcrumb-thumb,
    .breadcrumb-thumb img { height: 100%; }
    .breadcrumb-thumb img { display: block; object-fit: cover; object-position: 50% 50%; }
    .breadcrumb-content {
      clip-path: polygon(0 0, 100% 0, calc(100% - var(--bc-h) * 0.0875) 100%, 0 100%);
    }
    .breadcrumb-thumb {
      clip-path: polygon(calc(var(--bc-h) * 0.0875) 0, 100% 0, 100% 100%, 0 100%);
    }
    .breadcrumb-content:before { display: none; }   /* drop the heavy dark stripe */
  }
  @media (min-width: 1200px) { .breadcrumb-section { --bc-h: 260px; } }
  @media (min-width: 1400px) { .breadcrumb-section { --bc-h: 280px; } }
  
  /* Title: the banner title is the page's <h1> */
  .breadcrumb-title h1 {
    margin-bottom: 0;
    font-weight: 600;
    font-size: 52px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
    text-wrap: balance;
  }
  @media (min-width: 1200px) and (max-width: 1399px) {
    .breadcrumb-title h1 { font-size: 46px; }
  }
  @media (min-width: 992px) and (max-width: 1199px) {
    .breadcrumb-title h1 { font-size: 40px; }
  }
  /* Below 992px the photo is hidden: a minimum height keeps plain pages consistent,
     and pages with a meta line (sidings) grow to fit. */
  @media (max-width: 991px) {
    .breadcrumb-title h1 { font-size: 34px; }
    .breadcrumb-section .breadcrumb-content { min-height: 170px; padding: 40px 24px; }
  }
  @media (max-width: 767px) {
    .breadcrumb-title h1 { font-size: 28px; }
    .breadcrumb-section .breadcrumb-content { min-height: 150px; padding: 32px 20px; }
  }
  
  /* Breadcrumb trail is now <nav><ol>: same look as the old <ul> */
  .breadcrumb-nav ol {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
  }
  .breadcrumb-nav ol li {
    display: inline-block;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    color: #F8F7F0;
  }
  .breadcrumb-nav ol li:after {
    content: "\f178";
    content: "\f178" / "";          /* separator is decorative for screen readers */
    font-family: var(--icon-font);
    font-weight: 400;
    margin-right: 8px;
    margin-left: 10px;
  }
  .breadcrumb-nav ol li:last-child:after { display: none; }
  @media (max-width: 1199px) {
    .breadcrumb-nav ol { margin-bottom: 10px; }
    .breadcrumb-nav ol li { font-size: 16px; line-height: 1.2; }
    .breadcrumb-nav ol li:after { font-size: 14px; }
  }
  
  /* Links look like links; the current page is distinct */
  .breadcrumb-nav a {
    color: #F8F7F0;
    text-decoration: underline;
    text-decoration-color: rgba(248, 247, 240, 0.5);
    text-underline-offset: 4px;
  }
  .breadcrumb-nav a:hover { color: #fff; text-decoration-color: currentColor; }
  .breadcrumb-nav a:focus-visible { outline: 2px solid #99EF68; outline-offset: 2px; border-radius: 2px; }
  .breadcrumb-nav [aria-current="page"] { font-weight: 600; color: #fff; }
  
  /* Meta line under the title (siding pages: type, province, location) */
  .breadcrumb-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
  }
  /* The dot follows each item except the last, so when the line wraps the dot
     stays at the end of the line and a new line always starts with an item. */
  .breadcrumb-meta li:not(:last-child)::after {
    content: "\00B7";
    content: "\00B7" / "";
    margin: 0 10px;
    color: #99EF68;
    font-weight: 700;
  }
  
  /* Space between the banner and the first section */
  .breadcrumb-section + section { padding-top: 72px; }
  @media (max-width: 991px) { .breadcrumb-section + section { padding-top: 56px; } }
  @media (max-width: 767px) { .breadcrumb-section + section { padding-top: 48px; } }
  
  /* =====================================================================
     [SITE] ACTIVE NAV ITEM: straight underline, no pill
     (replaces the earlier pill + inset-line rules; same specificity, later wins)
     ===================================================================== */
  .main-menu ul li a[aria-current="page"] {
    background: none;
    box-shadow: none;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #007749;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }
  .page-home .main-menu-2 ul li a[aria-current="page"] {
    background: none;
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #99EF68;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }

  
  /* =====================================================================
   [SITE] Banner image blend (partials/breadcrumb.html)
   The photo melts into the green panel so the title and breadcrumb lead.
   One pseudo-element + one static filter; no markup changes.
   The photo panel only exists at 992px and up, so everything is scoped there.
   ===================================================================== */
@media (min-width: 992px) {
  /* Seam fix, part 1. The photo had its own diagonal clip next to the panel's,
     and the two anti-aliased edges left a pale hairline plus a ~4.5px gap.
     The photo now tucks under the green panel instead: the panel's own clipped
     edge still sets the diagonal, and the photo shows only to its right.
     The photo's right-hand rounded corners (border-radius + overflow) remain. */
  .breadcrumb-thumb {
    clip-path: none;
  }

  /* Seam fix, part 2. Near the bottom the panel's diagonal sits a few px left
     of the photo's edge. A 96px brand-green strip behind the column boundary
     (50% of the row) fills that gap. Only the middle is painted, so no green
     shows at the outer rounded corners or along the photo's right edge. */
  .breadcrumb-section .row {
    background: linear-gradient(90deg,
      transparent calc(50% - 48px),
      #007749 calc(50% - 48px) calc(50% + 48px),
      transparent calc(50% + 48px));
  }

  /* Soften the photo a touch so it supports rather than competes:
     20% less colour, 8% less contrast. Still clearly a photo, not grey. */
  .breadcrumb-thumb img {
    filter: saturate(0.8) contrast(0.92);
  }

  /* Brand-green wash over the photo (#007749 = the panel colour).
     95deg makes the colour bands run parallel to the ~5deg diagonal, so the
     fade follows the panel edge. It is solid where the photo meets the panel
     (the panel edge falls about 20-25px into the photo box), falls away quickly
     so the photo appears, then settles at a light tint across the rest so the
     whole image reads as on-palette. Plain alpha blending (no mix-blend-mode)
     reaches exactly the panel colour on any photo, light or dark. */
  .breadcrumb-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;            /* never blocks clicks or selection */
    background: linear-gradient(95deg,
      rgba(0, 119, 73, 1)    0,      /* hidden under the panel */
      rgba(0, 119, 73, 0.95) 28px,   /* the panel edge: matches it, no seam */
      rgba(0, 119, 73, 0.6)  90px,   /* quick fall-off so the photo appears soon */
      rgba(0, 119, 73, 0.28) 220px,  /* gentle tail */
      rgba(0, 119, 73, 0.14) 55%,    /* light tint from here to the right edge */
      rgba(0, 119, 73, 0.14) 100%);
  }
}

/* Calmer, flatter treatment for people who ask for less transparency or more
   contrast: an even green layer and a quieter photo, no gradient. The text is
   on the solid panel, so its contrast is unaffected either way. */
@media (min-width: 992px) and (prefers-reduced-transparency: reduce),
       (min-width: 992px) and (prefers-contrast: more) {
  .breadcrumb-thumb::after {
    background: rgba(0, 119, 73, 0.72);
  }
  .breadcrumb-thumb img {
    filter: saturate(0.6) contrast(0.9);
  }
}


/* =====================================================================
   [SITE] Banner image blend: Option A "Strong tint" (OVERRIDE)
   Paste AFTER the [SITE] Banner image blend block. Same single pseudo-element
   and filter; only the values change, so the photo recedes into the green.
   ===================================================================== */
   @media (min-width: 992px) {
    /* Quieter, darker photo: much less colour, softer contrast, 10% darker. */
    .breadcrumb-thumb img {
      filter: saturate(0.55) contrast(0.85) brightness(0.9);
    }
  
    /* Same shape as before (solid at the panel edge, 95deg so it follows the
       diagonal), but it settles at 0.42 instead of 0.14, so the whole photo
       reads as green with the scene showing through. */
    .breadcrumb-thumb::after {
      background: linear-gradient(95deg,
        rgba(0, 119, 73, 1)    0,      /* hidden under the panel */
        rgba(0, 119, 73, 0.95) 28px,   /* the panel edge: no seam */
        rgba(0, 119, 73, 0.75) 90px,
        rgba(0, 119, 73, 0.55) 220px,
        rgba(0, 119, 73, 0.42) 55%,    /* strong tint across the rest */
        rgba(0, 119, 73, 0.42) 100%);
    }
  }
  
  /* Fallbacks must be repeated: the rule above would otherwise override them.
     Flat and calm, a step stronger than the main tint. */
  @media (min-width: 992px) and (prefers-reduced-transparency: reduce),
         (min-width: 992px) and (prefers-contrast: more) {
    .breadcrumb-thumb::after {
      background: rgba(0, 119, 73, 0.8);
    }
    .breadcrumb-thumb img {
      filter: saturate(0.4) contrast(0.85) brightness(0.9);
    }
  }
  

/* =====================================================================
   [SIDING] Siding detail pages (templates/pages/siding_detail.html)
   Everything is scoped to .siding-detail.
   Brand: #231F20 near-black, #99EF68 bright green, #007749 deep green.
   Neutrals already in use: #4A4A46 body text (8.9:1 on white),
   #F8F7F0 card background, #EDEDEA hairlines.
   ===================================================================== */

/* --- Overlap fix (root cause) ---------------------------------------
   The theme gives .services-details-section margin-bottom: -169px so a
   following call-to-action block can tuck under it. Siding pages have no
   such block (info_section is emptied), so that pull-up dragged the footer
   169px up over the end of the content. Siding pages end where they end. */
   .siding-detail {
    margin-bottom: 0;
  }
  
  /* --- Layout: two columns from 992px (sidebar was stacked until 1200px) - */
  @media (min-width: 992px) {
    .siding-detail .details-layout-wrap {
      flex-direction: row;
      gap: 48px;
    }
    .siding-detail .details-layout-wrap .details-content {
      max-width: none;
      min-width: 0;          /* lets the grid and map shrink inside the flex row */
    }
    .siding-detail .detail-sidebar {
      max-width: 320px;
    }
  }
  @media (min-width: 1400px) {
    .siding-detail .details-layout-wrap { gap: 60px; }
    .siding-detail .detail-sidebar { max-width: 360px; }
  }
  
  /* --- Section headings: clearly below the 52px banner h1 ------------- */
  .siding-detail .details-title h2 {
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #007749;                 /* was off-palette teal #004540 */
  }
  @media (max-width: 991px) {
    .siding-detail .details-title h2 { font-size: 28px; }
  }
  @media (max-width: 767px) {
    .siding-detail .details-title h2 { font-size: 24px; }
  }
  
  /* --- Body copy and lists: readable contrast and line length ---------- */
  .siding-detail .detail-text p {
    max-width: 68ch;                /* ~70 characters per line instead of ~120 */
    font-size: 17px;
    line-height: 1.7;
    color: #4A4A46;                 /* was #868681, 3.6:1 */
  }
  .siding-detail .list-wrapper .list-wrap li p {
    font-size: 16px;
    line-height: 1.6;
    color: #4A4A46;
  }
  
  /* --- Main image: 16:9 at every width, no fixed height --------------- */
  .siding-detail .siding-hero__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
  }
  
  /* --- Stats grid (replaces inline styles and the 4px side-tab) -------- */
  .siding-detail .siding-stats {
    margin-bottom: 40px;
  }
  .siding-detail .siding-stat {
    height: 100%;
    padding: 16px 18px;
    background: #F8F7F0;
    border: 1px solid #EDEDEA;
    border-radius: 12px;
  }
  .siding-detail .siding-stat__label {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: #4A4A46;
  }
  .siding-detail .siding-stat__value {
    margin: 0;
    font-family: var(--outfit-font);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: #231F20;
  }
  @media (max-width: 991px) {
    .siding-detail .siding-stats { margin-bottom: 24px; }
  }
  @media (max-width: 767px) {
    .siding-detail .siding-stat { padding: 14px; }
    .siding-detail .siding-stat__value { font-size: 16px; }
  }
  
  /* --- Enquire button below 992px, straight after the stats ----------- */
  .siding-detail .siding-enquire-mobile {
    margin-bottom: 40px;
  }
  
  /* --- Map: softer frame, readable caption, shorter on phones ---------- */
  .siding-detail .operations-map-wrap {
    border-color: #EDEDEA;
    box-shadow: 0 12px 32px -18px rgba(35, 31, 32, 0.45);   /* was a heavy 0.4 black glow */
  }
  .siding-detail .siding-map {
    width: 100%;
    height: 420px;
  }
  @media (max-width: 767px) {
    .siding-detail .siding-map { height: 300px; }
  }
  .siding-detail .map-caption {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);   /* was #868681 on dark, 3.2:1 */
  }
  
  /* --- Gallery: responsive grid, consistent 4:3 tiles, Fancybox -------- */
  .siding-detail .siding-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
  }
  @media (max-width: 575px) {
    .siding-detail .siding-gallery {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
  }
  .siding-detail .siding-gallery__figure {
    margin: 0;
  }
  .siding-detail .siding-gallery__link {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    background: #EDEDEA;            /* shows while the image loads */
  }
  .siding-detail .siding-gallery__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  /* Small "expand" badge so the tile reads as openable */
  .siding-detail .siding-gallery__link::after {
    content: "\f065";
    content: "\f065" / "";
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(35, 31, 32, 0.65);
    color: #fff;
    font-family: var(--icon-font);
    font-weight: 400;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .siding-detail .siding-gallery__link:hover .siding-gallery__img { transform: scale(1.04); }
  .siding-detail .siding-gallery__link:hover::after,
  .siding-detail .siding-gallery__link:focus-visible::after { opacity: 1; }
  .siding-detail .siding-gallery__link:focus-visible {
    outline: 2px solid #007749;
    outline-offset: 3px;
  }
  .siding-detail .siding-gallery__caption {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.4;
    color: #4A4A46;
  }
  @media (prefers-reduced-motion: reduce) {
    .siding-detail .siding-gallery__img { transition: none; }
    .siding-detail .siding-gallery__link:hover .siding-gallery__img { transform: none; }
  }
  
  /* --- Sidebar: brand colours, quieter title rule ---------------------- */
  .siding-detail .detail-sidebar .s-widget-wrap {
    padding: 28px 32px;
  }
  .siding-detail .detail-sidebar .s-widget-wrap .w-title h3 {
    color: #231F20;                 /* was off-palette teal #004540 */
  }
  .siding-detail .detail-sidebar .s-widget-wrap .w-title .bar-wrap {
    margin: 10px 0 20px;
  }
  .siding-detail .detail-sidebar .s-widget-wrap .w-title .bar-wrap .bar-1 {
    border-bottom-color: #EDEDEA;
  }
  .siding-detail .detail-sidebar .s-widget-wrap .w-title .bar-wrap .bar-2 {
    width: 40px;
    background: #007749;            /* straight brand accent instead of a teal fade */
  }
  .siding-detail .siding-enquire__text {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.6;
    color: #4A4A46;
  }
  
  /* --- Other Sidings: <details>, open on desktop, collapsed on phones -- */
  .siding-detail .detail-sidebar .siding-others.s-widget-wrap {
    padding: 0;
  }
  .siding-detail .siding-others__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 24px 32px;
    list-style: none;
    cursor: pointer;
    font-family: var(--outfit-font);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    color: #231F20;
  }
  .siding-detail .siding-others__summary::-webkit-details-marker { display: none; }
  .siding-detail .siding-others__summary:focus-visible {
    outline: 2px solid #007749;
    outline-offset: -4px;
    border-radius: 12px;
  }
  .siding-detail .siding-others__chevron {
    font-size: 16px;
    color: #007749;
    transition: transform 0.2s ease;
  }
  .siding-detail .siding-others[open] .siding-others__chevron { transform: rotate(180deg); }
  .siding-detail .siding-others__list {
    margin: 0;
    padding: 0 32px 20px;
    list-style: none;
  }
  .siding-detail .siding-others__list li + li {
    border-top: 1px solid #EDEDEA;
  }
  .siding-detail .siding-others__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;               /* comfortable tap target */
    padding: 8px 0;
    font-size: 15px;
    line-height: 1.4;
    color: #231F20;
  }
  .siding-detail .siding-others__list a i {
    flex: none;
    font-size: 12px;
    color: #007749;
    transition: transform 0.2s ease;
  }
  .siding-detail .siding-others__list a:hover { color: #007749; }
  .siding-detail .siding-others__list a:hover i { transform: translate(2px, -2px); }
  .siding-detail .siding-others__list a:focus-visible {
    outline: 2px solid #007749;
    outline-offset: 2px;
    border-radius: 4px;
  }
  @media (max-width: 767px) {
    .siding-detail .detail-sidebar .s-widget-wrap { padding: 20px; }
    .siding-detail .siding-others__summary { padding: 18px 20px; font-size: 20px; }
    .siding-detail .siding-others__list { padding: 0 20px 16px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .siding-detail .siding-others__chevron,
    .siding-detail .siding-others__list a i { transition: none; }
  }
  

/* =====================================================================
   [SIDING] Refinements: tick lists, gallery filter chips, video tiles.
   Paste after the [SIDING] block already in main.css. New and changed
   rules only; everything stays scoped to .siding-detail.
   ===================================================================== */

/* --- Tick lists: one grid for both columns ---------------------------
   Items are in column order in the HTML (left column, then right), and
   grid-auto-flow: column fills them down a fixed number of rows, so row 2
   on the left shares a grid row with row 2 on the right. The rows-N class
   comes from the longer column. One column below 768px, in source order. */
   .siding-detail .siding-ticks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: column;
    column-gap: 48px;
    row-gap: 16px;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
  }
  .siding-detail .siding-ticks--rows-1 { grid-template-rows: repeat(1, auto); }
  .siding-detail .siding-ticks--rows-2 { grid-template-rows: repeat(2, auto); }
  .siding-detail .siding-ticks--rows-3 { grid-template-rows: repeat(3, auto); }
  .siding-detail .siding-ticks--rows-4 { grid-template-rows: repeat(4, auto); }
  .siding-detail .siding-ticks--rows-5 { grid-template-rows: repeat(5, auto); }
  .siding-detail .siding-ticks--rows-6 { grid-template-rows: repeat(6, auto); }
  @media (max-width: 767px) {
    .siding-detail .siding-ticks {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: none;
      grid-auto-flow: row;
      row-gap: 14px;
    }
  }
  
  /* Every item: 20px icon, 12px gap, icon centred on the FIRST line.
     Text is 16px on a 26px line, so the 20px icon sits 3px down. */
  .siding-detail .siding-ticks__item {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
    margin: 0;
  }
  .siding-detail .siding-ticks__icon {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    border-radius: 50%;
    background: #007749;
    color: #fff;
    font-size: 10px;
    line-height: 1;
  }
  .siding-detail .siding-ticks__text {
    font-size: 16px;
    line-height: 26px;
    color: #4A4A46;
  }
  
  /* --- Gallery filter chips -------------------------------------------- */
  .siding-detail .siding-gallery-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
  }
  .siding-detail .siding-gallery-filter[hidden] { display: none; }
  .siding-detail .siding-gallery-filter__chip {
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid #EDEDEA;
    border-radius: 999px;
    background: #F8F7F0;
    color: #231F20;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }
  .siding-detail .siding-gallery-filter__chip:hover {
    border-color: #007749;
    color: #007749;
  }
  .siding-detail .siding-gallery-filter__chip[aria-pressed="true"] {
    border-color: #007749;
    background: #007749;
    color: #fff;                     /* 5.6:1 on #007749 */
  }
  .siding-detail .siding-gallery-filter__chip:focus-visible {
    outline: 2px solid #007749;
    outline-offset: 2px;
  }
  @media (max-width: 575px) {
    .siding-detail .siding-gallery-filter__chip {
      min-height: 44px;              /* touch target */
      padding: 10px 14px;
      font-size: 14px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .siding-detail .siding-gallery-filter__chip { transition: none; }
  }
  
  /* Filtered-out items (the chip script sets [hidden]) */
  .siding-detail .siding-gallery__item[hidden] { display: none; }
  
  /* --- Video tiles: play badge, always visible ------------------------- */
  .siding-detail .siding-gallery__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(35, 31, 32, 0.72);
    color: #fff;
    font-size: 18px;
    transform: translate(-50%, -50%);
    transition: background-color 0.2s ease;
    pointer-events: none;
  }
  .siding-detail .siding-gallery__play i { margin-left: 3px; }  /* optical centre of the triangle */
  .siding-detail .siding-gallery__link--video:hover .siding-gallery__play,
  .siding-detail .siding-gallery__link--video:focus-visible .siding-gallery__play {
    background: #007749;
  }
  /* The expand badge would compete with the play badge */
  .siding-detail .siding-gallery__link--video::after { display: none; }


  /* =====================================================================
   [ABOUT] About page polish (templates/home/about.html)
   Paste at the very bottom of static/css/main.css.
   Scoped to the about-only classes (about-intro, about-services,
   about-how, about-safety, about-cta, achievement__value). Only the
   .bh-title-icon rule is shared (homepage eyebrows and footer titles).
   Brand: #231F20 near-black, #99EF68 bright green, #007749 deep green.
   ===================================================================== */

/* --- Shared: title icons that used inline styles --------------------- */
.common-subtitle .bh-title-icon,
.w-title .bh-title-icon {
  font-size: 18px;
  margin-right: 8px;
}

/* --- Eyebrows on light about sections: brand near-black text --------- */
.about-intro .common-subtitle,
.about-how .common-subtitle,
.about-safety .common-subtitle {
  color: #231F20;
}

/* --- Stats: numbers are paragraphs now, styled like the old h2 ------- */
.company-achievements .achievement .achievement__value {
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 60px;
  line-height: 1;
  color: #007749;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .company-achievements .achievement .achievement__value { font-size: 42px; }
}
@media (max-width: 991px) {
  .company-achievements .achievement .achievement__value { font-size: 30px; }
}

/* --- What we do: solid brand green, white cards ----------------------
   White on #007749 is 5.6:1; #231F20 on white 16.3:1; #4A4A46 on white
   8.9:1. The #99EF68 icon on #007749 is 4.0:1 (decorative). */
.about-services::before {
  background: #007749;
}
.about-services .common-subtitle,
.about-services .common-title h2 {
  color: #fff;
}
.about-services .common-subtitle i {
  color: #99EF68;
}
.about-services .about-services__grid > [class*="col-"] {
  display: flex;                 /* equal-height cards in each row */
}
.about-services .about-services__card {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 32px;
  border-radius: 12px;
  background: #fff;
  transition: box-shadow 0.2s ease;
}
@media (max-width: 767px) {
  .about-services .about-services__card { padding: 28px; }
}
.about-services .about-services__title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: #231F20;
}
@media (max-width: 767px) {
  .about-services .about-services__title { font-size: 20px; }
}
.about-services .about-services__card .text p {
  margin: 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.6;
  color: #4A4A46;
}

/* One link per card, stretched over the whole card */
.about-services .about-services__link {
  display: inline;
  color: inherit;
}
.about-services .about-services__link i {
  margin-left: 10px;
  font-size: 16px;
  color: #007749;
  transition: transform 0.2s ease;
}
.about-services .about-services__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
}
.about-services .about-services__card--link:hover {
  box-shadow: 0 10px 28px -8px rgba(35, 31, 32, 0.35);
}
.about-services .about-services__card--link:hover .about-services__link {
  color: #007749;
}
.about-services .about-services__card--link:hover .about-services__link i {
  transform: translateX(3px);
}
.about-services .about-services__link:focus-visible {
  outline: none;
}
.about-services .about-services__link:focus-visible::after {
  outline: 3px solid #99EF68;     /* 4.0:1 against the green section */
  outline-offset: 3px;
}
.about-services .about-services__card--link:active {
  box-shadow: 0 4px 12px -6px rgba(35, 31, 32, 0.35);
  transition-duration: 0.1s;
}

/* --- Photo slots: 3:2 when stacked, 4:5 from 1200px ------------------ */
.about-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
}
@media (min-width: 1200px) {
  .about-photo img { aspect-ratio: 4 / 5; }
}
@media (max-width: 1199px) {
  .about-photo { margin-top: 32px; }
}
/* Keep the helmet in frame when the safety photo is cropped to 3:2 */
.about-safety .about-photo img {
  object-position: 50% 25%;
}


/* --- Safety, compliance and community: background moved out of the
   template's inline style ---------------------------------------------- */
.about-safety {
  background-color: #F8F7F0;
}

/* --- Closing band ----------------------------------------------------- */
.about-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 48px 56px;
  border-radius: 16px;
  background: #231F20;
}
.about-cta__title {
  margin: 0 0 8px;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
}
.about-cta__lead {
  margin: 0;
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
.about-cta .e-primary-btn {
  flex-shrink: 0;
}
@media (max-width: 991px) {
  .about-cta__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 36px 28px;
  }
  .about-cta__title { font-size: 28px; }
  .about-cta__lead { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-services .about-services__card,
  .about-services .about-services__link i { transition: none; }
  .about-services .about-services__card--link:hover .about-services__link i { transform: none; }
}



/* =====================================================================
   [SERVICES] Services overview and service detail pages
   (templates/home/services.html, templates/pages/service_detail.html)
   Paste at the very bottom of static/css/main.css, then delete the
   [SERVICES] Stage 2 block it replaces.
   Reused, not repeated here: the detail section also carries
   .siding-detail, so the [SIDING] layout, h2 scale, hero, tick list,
   Enquire card, mobile Enquire button and the collapsible list apply
   as they are. The /services closing band is the [ABOUT] .about-cta.
   Brand: #231F20 near-black, #99EF68 bright green, #007749 deep green.
   Contrast: #4A4A46 on white 8.9:1, on #F8F7F0 8.3:1; #007749 on white
   5.6:1, on #F8F7F0 5.2:1; white on #007749 5.6:1; #99EF68 on #007749
   4.0:1 (step numbers only, 28px, large text).
   ===================================================================== */

/* --- Shared: eyebrows on light sections, section h2 scale ------------
   The theme h2 is 52px, the same as the banner h1; these sit a step
   below it at every width (banner h1: 52 / 46 / 34 / 28px). */
   .services-overview .common-subtitle,
   .services-cards .common-subtitle,
   .service-detail .common-subtitle {
     color: #231F20;
   }
   .services-overview .common-title h2,
   .services-cards .common-title h2,
   .service-steps .common-title h2 {
     font-size: 40px;
     line-height: 1.15;
     letter-spacing: -0.01em;
     color: #007749;
   }
   @media (max-width: 1399px) {
     .services-overview .common-title h2,
     .services-cards .common-title h2,
     .service-steps .common-title h2 { font-size: 36px; }
   }
   @media (max-width: 991px) {
     .services-overview .common-title h2,
     .services-cards .common-title h2,
     .service-steps .common-title h2 { font-size: 28px; }
   }
   @media (max-width: 767px) {
     .services-overview .common-title h2,
     .services-cards .common-title h2,
     .service-steps .common-title h2 { font-size: 24px; }
   }
   
   /* Text link with an arrow: "See our sidings", "View service" */
   .services-link {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     min-height: 44px;
     font-size: 16px;
     font-weight: 600;
     line-height: 1.3;
     color: #007749;
   }
   .services-link i {
     font-size: 14px;
     transition: transform 0.2s ease;
   }
   .services-link:hover {
     color: #007749;
     text-decoration: underline;
     text-underline-offset: 4px;
   }
   .services-link:hover i { transform: translateX(3px); }
   .services-link:focus-visible {
     outline: 2px solid #007749;
     outline-offset: 2px;
     border-radius: 4px;
   }
   
   /* --- /services intro: text left, 2x2 fact tiles right ---------------- */
   .services-overview__lead {
     max-width: 60ch;
     margin: 0 0 12px;
     font-size: 18px;
     line-height: 1.65;
     color: #4A4A46;
   }
   .services-facts {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 16px;
     margin: 0;
     padding: 0;
     list-style: none;
   }
   .services-facts__item {
     display: flex;
     flex-direction: column;
     gap: 6px;
     padding: 24px;
     border: 1px solid #EDEDEA;
     border-radius: 12px;
     background: #F8F7F0;
   }
   .services-facts__value {
     font-family: var(--outfit-font);
     font-size: 36px;
     font-weight: 600;
     line-height: 1.1;
     letter-spacing: -0.01em;
     color: #007749;
   }
   .services-facts__label {
     font-size: 15px;
     line-height: 1.4;
     color: #4A4A46;
   }
   @media (max-width: 767px) {
     .services-overview__lead { font-size: 17px; }
     .services-facts { gap: 12px; }
     .services-facts__item { padding: 18px 16px; }
     .services-facts__value { font-size: 26px; }
     .services-facts__label { font-size: 14px; }
   }
   
   /* --- /services cards: cream band, white cards, one visible link ------ */
   .services-cards {
     background: #F8F7F0;
   }
   .services-cards__grid {
     display: grid;
     grid-template-columns: minmax(0, 1fr);
     gap: 20px;
     margin: 0;
     padding: 0;
     list-style: none;
   }
   @media (min-width: 768px) {
     .services-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
   }
   @media (min-width: 1200px) {
     .services-cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
   }
   .service-card {
     display: flex;
     flex-direction: column;
     padding: 32px;
     border: 1px solid #EDEDEA;
     border-radius: 12px;
     background: #fff;
   }
   .service-card__icon {
     display: grid;
     place-items: center;
     width: 48px;
     height: 48px;
     margin-bottom: 20px;
     border-radius: 10px;
     background: #E8F3EE;
     color: #007749;
     font-size: 22px;
   }
   .service-card__title {
     margin: 0 0 10px;
     font-size: 22px;
     font-weight: 600;
     line-height: 1.3;
     letter-spacing: -0.005em;
     color: #231F20;
   }
   .service-card__text {
     flex-grow: 1;
     margin: 0 0 16px;
     font-size: 16px;
     line-height: 1.6;
     color: #4A4A46;
   }
   .service-card__link {
     align-self: flex-start;
   }
   @media (max-width: 767px) {
     .service-card { padding: 24px; }
     .service-card__title { font-size: 20px; }
   }
   
   /* --- /services how we work: green band, four numbered steps --------- */
   .service-steps {
     background: #007749;
   }
   .service-steps .common-subtitle,
   .service-steps .common-title h2 {
     color: #fff;
   }
   .service-steps .common-subtitle i {
     color: #99EF68;
   }
   .service-steps__list {
     display: grid;
     grid-template-columns: minmax(0, 1fr);
     gap: 32px;
     margin: 0;
     padding: 0;
     list-style: none;
   }
   @media (min-width: 768px) {
     .service-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
   }
   @media (min-width: 1200px) {
     .service-steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
   }
   .service-steps__item {
     padding-top: 20px;
     border-top: 2px solid #99EF68;
   }
   .service-steps__number {
     display: block;
     margin-bottom: 8px;
     font-family: var(--outfit-font);
     font-size: 28px;
     font-weight: 600;
     line-height: 1;
     color: #99EF68;
   }
   .service-steps__title {
     margin: 0 0 8px;
     font-size: 22px;
     font-weight: 600;
     line-height: 1.3;
     color: #fff;
   }
   .service-steps__text {
     max-width: 36ch;
     margin: 0;
     font-size: 16px;
     line-height: 1.6;
     color: #fff;
   }
   
   /* --- Detail page: overview lead -------------------------------------- */
   .service-detail .common-subtitle {
     margin-bottom: 12px;
   }
   .service-detail__lead {
     max-width: 68ch;
     margin: 0 0 16px;
     font-size: 19px;
     font-weight: 500;
     line-height: 1.6;
     color: #231F20;
   }
   @media (max-width: 767px) {
     .service-detail__lead { font-size: 18px; }
   }
   
   /* --- Detail page: what you get (three outcome tiles) ----------------- */
   .service-outcomes {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 16px;
     margin: 0 0 48px;
     padding: 0;
     list-style: none;
   }
   @media (max-width: 767px) {
     .service-outcomes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
   }
   .service-outcomes__item {
     padding: 20px 22px;
     border: 1px solid #EDEDEA;
     border-radius: 12px;
     background: #F8F7F0;
   }
   .service-outcomes__title {
     margin: 0 0 6px;
     font-size: 18px;
     font-weight: 600;
     line-height: 1.3;
     color: #231F20;
   }
   .service-outcomes__text {
     margin: 0;
     font-size: 15px;
     line-height: 1.55;
     color: #4A4A46;
   }
   
   /* --- Detail page: where we do this, siding chips --------------------- */
   .service-sidings {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin: 8px 0 0;
     padding: 0;
     list-style: none;
   }
   .service-sidings__chip {
     display: inline-flex;
     align-items: center;
     min-height: 44px;
     padding: 10px 16px;
     border: 1px solid #EDEDEA;
     border-radius: 999px;
     background: #F8F7F0;
     color: #231F20;
     font-size: 15px;
     font-weight: 500;
     line-height: 1.2;
     transition: border-color 0.2s ease, color 0.2s ease;
   }
   .service-sidings__chip:hover {
     border-color: #007749;
     color: #007749;
   }
   .service-sidings__chip:focus-visible {
     outline: 2px solid #007749;
     outline-offset: 2px;
   }
   
   /* --- Detail sidebar: the current service ----------------------------- */
   .service-detail .service-nav a[aria-current="page"] {
     padding-left: 12px;
     font-weight: 700;
     color: #007749;
     box-shadow: inset 3px 0 0 #007749;
   }
   
   @media (prefers-reduced-motion: reduce) {
     .services-link i,
     .service-sidings__chip { transition: none; }
     .services-link:hover i { transform: none; }
   }

   
   /* =====================================================================
   [SERVICES] Stage 4 polish (templates/pages/service_detail.html and
   templates/pages/siding_detail.html)
   Paste at the very bottom of static/css/main.css, after the [SERVICES]
   block. Colours use the :root tokens (--theme-color #231F20,
   --theme-shade-color #99EF68, --theme-color-3 #007749).
   ===================================================================== */

/* Sidebar lists ("Other sidings" and "Our services") now end in a plain
   right arrow (was up-right, which read as an external link). The
   [SIDING] hover nudged the icon up and right; a right arrow moves right
   only. Service pages carry .siding-detail too, so this covers both. */
.siding-detail .siding-others__list a:hover i {
  transform: translateX(3px);
}
.service-detail .service-nav a[aria-current="page"] i {
  color: var(--theme-color-3);
}
@media (prefers-reduced-motion: reduce) {
  .siding-detail .siding-others__list a:hover i { transform: none; }
}

/* Key figures in the service proof paragraphs (<strong> in serviceData.py) */
.service-detail .detail-text strong {
  font-weight: 600;
  color: var(--theme-color);
}


/* =====================================================================
   [CONTACT] Stage 1: contact cards, form panel rail line, map
   Append to the bottom of static/css/main.css.

   Delete from main.css first (bottom-up, so the numbers stay valid):
     1. lines 6671-6676  .contact-section .c-shape-2 { ... }
     2. lines 6665-6670  .contact-section .c-shape-1 { ... }
   The tree images they positioned are gone from contact.html and nothing
   else uses these rules. Keep .contact-section (6661-6664): the rail line
   panel and the form still sit inside it.
   ===================================================================== */

/* --- Contact details: three cards, one link each, equal height ------- */
/* main.css 10834-10855 has an unused template rule on .contact-details
   (inline-flex, padding, 2px border, radius); reset it here. The top
   spacing comes from the site-wide ".breadcrumb-section + section" rule
   (72/56/48px), the same as before; the 120px gap to the form comes from
   the form section's p-t-120. */
   .contact-details {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
  }
  .contact-details__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  @media (min-width: 992px) {
    .contact-details__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  }
  .contact-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 28px;
    border: 1px solid #EDEDEA;
    border-radius: 12px;
    background: #fff;
  }
  .contact-card__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: #E8F3EE;
    color: var(--theme-color-3);
    font-size: 22px;
  }
  .contact-card__title {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--theme-color);
  }
  .contact-card__value {
    flex-grow: 1;
    margin: 0 0 12px;
    font-size: 1rem;
    line-height: 1.6;
    color: #4A4A46;
  }
  .contact-card__link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--theme-color-3);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .contact-card__link:hover {
    color: var(--theme-color);
  }
  .contact-card__link:focus-visible {
    outline: 2px solid var(--theme-color-3);
    outline-offset: 3px;
    border-radius: 4px;
  }
  @media (max-width: 767px) {
    .contact-card { padding: 24px; }
  }
  
  /* --- Form panel: white section, cream panel, faint rail-track line ---- */
  .contact-section {
    background: #fff;
  }
  .contact-form-wrap--rail {
    --rail-opacity: 0.1;
    position: relative;
    padding-bottom: 80px;
  }
  /* The empty message line added 32px under the button; keep the space
     predictable so the rail line never meets the button. */
  .contact-form-wrap--rail .form-message:empty {
    margin-bottom: 0;
  }
  /* Two 2px rails 10px apart, sleepers every 24px. Inset to the panel's
     side padding and 24px above the bottom edge, so it stays well inside
     the 24px corner radius and needs no clipping. */
  .contact-form-wrap--rail::after {
    content: "";
    position: absolute;
    left: 50px;
    right: 50px;
    bottom: 24px;
    height: 14px;
    background:
      linear-gradient(to bottom,
        var(--theme-color-3) 0 2px,
        transparent 2px calc(100% - 2px),
        var(--theme-color-3) calc(100% - 2px) 100%),
      repeating-linear-gradient(to right,
        var(--theme-color-3) 0 3px,
        transparent 3px 24px);
    opacity: var(--rail-opacity);
    pointer-events: none;
  }
  @media (forced-colors: active) {
    .contact-form-wrap--rail::after { display: none; }
  }
  
  /* --- Map: placeholder tone while the iframe loads, no strip overlap ---- */
  .contact-map {
    height: 450px;
    background: var(--theme-color-2);
  }
  @media (max-width: 767px) {
    .contact-map { height: 320px; }
  }
  .map-section {
    margin-bottom: 0;
  }


  /* =====================================================================
   [CONTACT] Stages 1b + 1c: coal train on the form panel rail line,
   and the solid submit button on the cream panel.
   Append to the bottom of static/css/main.css, after the Stage 1 block
   (it relies on .contact-form-wrap--rail and its ::after rail line).
   This one block replaces contact-stage1b.css and contact-stage1c.css.

   Train
   - The rail ::after is bottom: 24px, height: 14px, so the top rail sits
     38px above the panel bottom; the SVG's bottom edge is the wheels'.
   - Height: 30px, 24px below 768px, and never more than 7.5% of the
     track (7.5cqi), so the train (160 x 30 viewBox) is at most 1/2.5 of
     the rail at any width. Bottom-aligned so the wheels stay on the rail.
   - 25s loop: 22s travel, then 3s with the track empty.
   - Reduced motion: parked, centred at 70% of the track.
   - Tune with --train-opacity, --train-duration, --train-height.

   Submit button (.contact-form-wrap only; the homepage form is not inside
   it). The site's .e-primary-btn light pill is 1.02:1 on #F8F7F0, so this
   uses the theme's solid variant. Contrast: button #007749 vs panel
   5.24:1; white text on #007749 5.62:1; #007749 arrow on the #F4F4F4
   circle 5.11:1; hover white on #231F20 16.3:1; focus ring #231F20 vs
   panel 15.18:1.
   ===================================================================== */

/* --- Train ---------------------------------------------------------- */
.contact-form-wrap--rail {
  --train-opacity: 0.45;
  --train-duration: 25s;
  --train-height: 30px;
}
.rail-train {
  position: absolute;
  left: 50px;
  right: 50px;
  bottom: 38px;
  height: var(--train-height);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--train-opacity);
  color: var(--theme-color-3);
  container-type: inline-size;
  container-name: rail-train;
  z-index: 1;
}
.rail-train__svg {
  display: block;
  flex: none;
  height: min(var(--train-height), 7.5cqi);
  width: auto;
  will-change: transform;
  animation: rail-train-run var(--train-duration) linear infinite;
}
.rail-train__body {
  fill: currentColor;
}
.rail-train__coal,
.rail-train__wheels {
  fill: var(--theme-color);
}
.rail-train__stripe {
  fill: var(--theme-shade-color);
}
@keyframes rail-train-run {
  0% {
    transform: translateX(-100%);
  }
  88%,
  100% {
    transform: translateX(100cqi);
  }
}
@media (max-width: 767px) {
  .contact-form-wrap--rail {
    --train-height: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rail-train__svg {
    animation: none;
    will-change: auto;
    transform: translateX(calc(70cqi - 50%));
  }
}
@media (forced-colors: active) {
  .rail-train {
    display: none;
  }
}

/* --- Submit button -------------------------------------------------- */
.contact-form-wrap .e-primary-btn {
  min-height: 44px;
  background: var(--theme-color-3);
  color: var(--white-color);
}
.contact-form-wrap .e-primary-btn .icon-wrap {
  background: var(--theme-color-2);
  color: var(--theme-color-3);
}
.contact-form-wrap .e-primary-btn:before {
  background: var(--theme-color);
}
.contact-form-wrap .e-primary-btn:hover {
  color: var(--white-color);
}
.contact-form-wrap .e-primary-btn:hover .icon-wrap {
  background: var(--white-color);
  color: var(--theme-color);
}
.contact-form-wrap .e-primary-btn:focus-visible {
  outline: 2px solid var(--theme-color);
  outline-offset: 3px;
}

/* =====================================================================
   [CONTACT] Stage 2: working contact forms (/contact and the homepage)
   Append to the bottom of static/css/main.css, after the Stages 1b + 1c
   block. Nothing to delete from main.css.

   /contact panel (#F8F7F0): labels #231F20; intro, hint and privacy line
   #4A4A46 8.29:1; errors and the error status #B42318 6.12:1; success
   status #007749 5.24:1; input border #868681 3.66:1 on white (UI 3:1);
   invalid border #B42318 6.57:1 on white.
   Homepage card (#007749): error text and invalid borders #FFECE8 4.93:1;
   success status white 5.62:1; focus rings white 5.62:1.
   ===================================================================== */

/* --- /contact: heading, intro, layout ---------------------------------- */
.contact-form-wrap h2 {
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 3rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--theme-color);
}
.contact-form-wrap .form-intro {
  color: #4A4A46;
}
.contact-form-wrap .input-wrap {
  text-align: left;
}

/* --- /contact: labels, fields, hint, errors ---------------------------- */
.contact-form-wrap .input-wrap label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--theme-color);
}
.contact-form-wrap .input-wrap input,
.contact-form-wrap .input-wrap textarea {
  border: 1px solid var(--body-color);
  padding: 16px 20px;              /* 1px border + 1px padding = the old 2px border */
}
.contact-form-wrap .input-wrap input:focus-visible,
.contact-form-wrap .input-wrap textarea:focus-visible {
  border-color: var(--theme-color-3);
  outline: 2px solid var(--theme-color-3);
  outline-offset: 1px;
}
.contact-form-wrap .input-wrap [aria-invalid="true"] {
  border-color: #B42318;
}
.contact-form-wrap .input-wrap [aria-invalid="true"]:focus-visible {
  border-color: #B42318;
  outline-color: #B42318;
}
.contact-form-wrap .field-hint,
.contact-form-wrap .field-error {
  margin: 6px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
}
.contact-form-wrap .field-hint {
  color: #4A4A46;
}
.contact-form-wrap .field-error {
  font-weight: 600;
  color: #B42318;
}

/* --- /contact: button, privacy line, status ---------------------------- */
.contact-form-wrap .e-primary-btn {
  transition-property: color, background-color;   /* focus ring appears at once */
}
.contact-form-wrap .form-privacy {
  margin: 12px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #4A4A46;
}
.contact-form-wrap .form-message {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
}
.contact-form-wrap .form-message:not(:empty) {
  margin-top: 16px;
}
.contact-form-wrap .form-message.success {
  color: var(--theme-color-3);
}
.contact-form-wrap .form-message.error {
  color: #B42318;
}

/* --- /contact: mobile panel; rail and train follow the new inset ------- */
@media (max-width: 767px) {
  .contact-form-wrap {
    padding: 28px 20px 80px;
  }
  .contact-form-wrap h2 {
    font-size: 2rem;
  }
  .contact-form-wrap--rail::after,
  .contact-form-wrap--rail .rail-train {
    left: 20px;
    right: 20px;
  }
}

/* --- Homepage form (green card), scoped to .contact-us ----------------- */
.contact-us .contact-form .field-error {
  margin: 6px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 600;
  color: #FFECE8;
  text-align: left;
}
.contact-us .contact-form [aria-invalid="true"] {
  border-color: #FFECE8;
}
.contact-us .contact-form input:focus-visible,
.contact-us .contact-form textarea:focus-visible {
  border-color: var(--white-color);
  outline: 2px solid var(--white-color);
  outline-offset: 2px;
}
.contact-us .contact-form .e-primary-btn {
  transition-property: color, background-color;
}
.contact-us .contact-form .e-primary-btn:focus-visible {
  outline: 2px solid var(--white-color);
  outline-offset: 3px;
}
.contact-us .contact-form .form-message {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
}
.contact-us .contact-form .form-message:not(:empty) {
  margin-top: 16px;
}
.contact-us .contact-form .form-message.success {
  color: var(--white-color);
}
.contact-us .contact-form .form-message.error {
  color: #FFECE8;
}


/* =====================================================================
   [CONTACT] Stage 2b: success panel in place of the form fields
   Append to the bottom of static/css/main.css, after the Stage 2 block.
   Nothing to delete from main.css.

   /contact panel #E8F3EE: heading #231F20 14.35:1; text #4A4A46 7.84:1;
   icon #007749 4.95:1; button (Stage 1c solid style) white on #007749
   5.62:1, and #007749 against the panel 4.95:1.
   Homepage card #007749 (no fill on the panel): heading, text and icon
   white 5.62:1; button #F4F4F4 pill 5.11:1 against the card, its text
   #007749 on #F4F4F4 5.11:1.
   The heading takes focus from script only (tabindex="-1"); it is not a
   control, so it shows no focus ring.
   ===================================================================== */

/* --- Shared ------------------------------------------------------------ */
.form-success {
  text-align: center;
}
.form-success__icon {
  display: block;
  margin: 0 auto 12px;
  font-size: 40px;
  line-height: 1;
}
.form-success__title:focus {
  outline: none;
}
/* "Send another message" has no arrow icon: plain padding at every width
   (the theme's mobile .e-primary-btn padding assumes the icon), and no
   native button border. */
.form-success .e-primary-btn {
  min-height: 44px;
  padding: 12px 28px;
  border: 0;
  white-space: nowrap;   /* the label wrapped by a fraction of a pixel at 375 */
}

/* --- /contact panel ---------------------------------------------------- */
.contact-form-wrap .form-success {
  padding: 40px 24px;
  border: 1px solid #D3E8DD;
  border-radius: 12px;
  background: #E8F3EE;
}
.contact-form-wrap .form-success__icon {
  color: var(--theme-color-3);
}
.contact-form-wrap .form-success__title {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--theme-color);
}
.contact-form-wrap .form-success__text {
  margin: 0 auto 24px;
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.6;
  color: #4A4A46;
}
@media (max-width: 767px) {
  .contact-form-wrap .form-success {
    padding: 32px 16px;
  }
}

/* --- Homepage panel (green card) -------------------------------------- */
.contact-us .contact-form .form-success {
  padding: 32px 24px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
}
.contact-us .contact-form .form-success__icon,
.contact-us .contact-form .form-success__title,
.contact-us .contact-form .form-success__text {
  color: var(--white-color);
}
.contact-us .contact-form .form-success__title {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}
.contact-us .contact-form .form-success__text {
  margin: 0 auto 24px;
  font-size: 1rem;
  line-height: 1.6;
}


/* =====================================================================
   [FOOTER] Stage 2: direction A (charcoal), spacing and polish
   Append to the bottom of static/css/main.css.

   Delete from main.css first, bottom-up so the numbers stay valid.
   Items 2-7 are used only by templates/partials/footer.html; item 1 by
   nothing (checked across templates/, static/js/, views/, tests/ and
   instance/content.db):
     1. lines 17221-17226 .services-details-section .d-shape-1: positioned
                         the forest image (shape-31.webp), now removed from
                         siding_detail.html and service_detail.html. The
                         image file stays.
     2. lines 2927-2960  "Fix missing dot on footer-address selector":
                         duplicate .get-in-touch .footer-address rules (the
                         combined selector at 2595 already covers them; the
                         one extra, flex-shrink: 0, is restated below)
     3. lines 2630-2637  .get-in-touch .text h6 (labels are p.footer-label now)
     4. lines 2540-2589  .footer-section-2 overrides: #000 headings with
                         line-height 0, the #F4F4F4 pill bar, its layout
                         and the legal-link dot separators
     5. lines 2309-2323  .about-widget .info p and its span (#000 text)
     6. lines 2273-2289  .footer-widget ul li a hover arrow and the
                         #F4F4F4 hover colour
     7. lines 2140-2236  .footer-section green background, the
                         .footer-bottom-layout pill (+ media queries), the
                         unused .top-btn, the old copyright and legal-menu
                         rules
   Keep the "06 Footer Css" comment (2139) and the base .footer-widget,
   .about-widget and .get-in-touch rules; this block builds on them.

   Also in this block: homepage .contact-us bottom spacing (the green
   form card sat flush on the footer at 992px+) and the /contact map
   focus ring, which needs static/js/script.js section 21 to show in Chrome.

   Contrast on #231F20 (all pass WCAG AA, most AAA):
     headings, "Operations desk", contact values  #FFFFFF   16.30:1
     body text, list and legal links              #D6D6D1   11.18:1
     labels, copyright                            #A3A29C    6.37:1
     lime: icons, "24/7", hover, focus ring       #99EF68   11.57:1
     contact icons on their 8% circle (#353132)   #99EF68    9.10:1
     social icon on its 8% circle (#353132)       #D6D6D1    8.80:1
     social hover: charcoal icon on lime          #231F20   11.57:1
     hairline rgba(255,255,255,.12) is decorative, not a control.
   ===================================================================== */

/* --- Frame: charcoal, top spacing now that the contact strip is gone ---
   footer.footer-section-2 outranks the p-t-125 / p-t-md-100 / p-t-xs-80
   utilities still on the markup (left there so the HTML snapshots hold). */
   footer.footer-section-2 {
    --footer-text: #D6D6D1;
    --footer-muted: #A3A29C;
    --footer-line: rgba(255, 255, 255, 0.12);
    --footer-chip: rgba(255, 255, 255, 0.08);
    background-color: var(--theme-color);
    padding-top: 96px;
    padding-bottom: 40px;
  }
  footer.footer-section-2 > .container > .row {
    padding-bottom: 72px;
  }
  @media (max-width: 991px) {
    footer.footer-section-2 { padding-top: 72px; }
    footer.footer-section-2 > .container > .row { padding-bottom: 64px; }
  }
  @media (max-width: 767px) {
    footer.footer-section-2 { padding-top: 56px; padding-bottom: 32px; }
    footer.footer-section-2 > .container > .row { padding-bottom: 48px; }
  }
  
  /* --- Headings (h2.w-title) --------------------------------------------- */
  .footer-section-2 .footer-widget .w-title {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.25;
    margin-bottom: 24px;
    color: var(--white-color);
  }
  .footer-section-2 .w-title .bh-title-icon {
    color: var(--theme-shade-color);
  }
  
  /* --- About column -------------------------------------------------------- */
  .footer-section-2 .about-widget .footer-logo a {
    display: inline-block;
    padding: 2px 0;
  }
  .footer-section-2 .about-widget .text p {
    color: var(--footer-text);
  }
  .footer-section-2 .about-widget .info p {
    margin: 0;
    font-size: 17px;
    line-height: 28px;
    color: var(--footer-text);
  }
  .footer-section-2 .about-widget .info p b {
    font-weight: 600;
    color: var(--white-color);
  }
  .footer-section-2 .about-widget .info p span {
    font-weight: 600;
    color: var(--theme-shade-color);
  }
  @media (max-width: 1399px) {
    .footer-section-2 .about-widget .info p { font-size: 16px; }
  }
  
  /* Social: 44px circles */
  .footer-section-2 .about-widget .social-links {
    gap: 12px;
    margin-top: 24px;
  }
  .footer-section-2 .about-widget .social-links a {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    background: var(--footer-chip);
    color: var(--footer-text);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  }
  .footer-section-2 .about-widget .social-links a:hover {
    border-color: var(--theme-shade-color);
    background: var(--theme-shade-color);
    color: var(--theme-color);
  }
  
  /* --- Link lists: 44px rows, underline + lime on hover ------------------ */
  .footer-section-2 .footer-widget ul {
    margin-top: -8px;        /* the 44px row adds 8px above the first label */
  }
  .footer-section-2 .footer-widget ul li {
    margin-bottom: 0;
  }
  .footer-section-2 .footer-widget ul li a {
    display: inline-flex;    /* focus ring hugs the label, not the column */
    min-height: 44px;
    color: var(--footer-text);
    transition: color 0.2s ease;
  }
  .footer-section-2 .footer-widget ul li a:hover {
    color: var(--theme-shade-color);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
  
  /* --- Contact column ------------------------------------------------------ */
  .footer-section-2 .get-in-touch {
    gap: 20px;
  }
  .footer-section-2 .get-in-touch a .icon {
    flex-shrink: 0;
    background: var(--footer-chip);
  }
  .footer-section-2 .get-in-touch a .icon i {
    color: var(--theme-shade-color);
  }
  .footer-section-2 .get-in-touch .text p {
    margin: 0;
    font-weight: 400;
    color: var(--white-color);
    transition: color 0.2s ease;
  }
  .footer-section-2 .get-in-touch .text .footer-label {
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.02em;
    color: var(--footer-muted);
  }
  .footer-section-2 .get-in-touch a:hover .text p:last-child {
    color: var(--theme-shade-color);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
  
  /* --- Bottom bar: full-width hairline, plain text ------------------------ */
  .footer-section-2 .footer-bottom {
    padding-top: 24px;
    border-top: 1px solid var(--footer-line);
  }
  /* The .row here has no container around it, so its negative gutters ran
     15px past the viewport at 375 once the pill's side margin went.
     Zero both sides; the inner .container keeps the text on the grid. */
  .footer-section-2 .footer-bottom > .row {
    margin-inline: 0;
  }
  .footer-section-2 .footer-bottom > .row > [class*="col-"] {
    padding-inline: 0;
  }
  .footer-section-2 .footer-bottom-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 24px;
  }
  .footer-section-2 .footer-copyright {
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    color: var(--footer-muted);
  }
  .footer-section-2 .footer-bottom-menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .footer-section-2 .footer-bottom-menu ul li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
    line-height: 22px;
    color: var(--footer-text);
    transition: color 0.2s ease;
  }
  .footer-section-2 .footer-bottom-menu ul li a:hover {
    color: var(--theme-shade-color);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
  @media (max-width: 767px) {
    .footer-section-2 .footer-bottom-layout {
      flex-direction: column;
      align-items: flex-start;
    }
  }
  
  /* --- Focus: 2px lime ring on every footer link -------------------------
     The global "a { transition: all }" animated the ring in from the
     link's blue currentColor on the logo and contact links; transition
     colours only. */
  .footer-section-2 a {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  }
  .footer-section-2 a:focus-visible {
    outline: 2px solid var(--theme-shade-color);
    outline-offset: 3px;
  }
  
  /* --- Pages that end on the dark .about-cta card (/about, /services) ---- */
  /* Direction C's spacing treatment: the footer adds 24px at each width, so
     the dark card, the white band below it (.about-cta p-b-100 / 80) and
     the start of the footer content read as three separate steps. */
  footer.footer-section-2.footer-section--after-dark { padding-top: 120px; }
  @media (max-width: 991px) {
    footer.footer-section-2.footer-section--after-dark { padding-top: 96px; }
  }
  @media (max-width: 767px) {
    footer.footer-section-2.footer-section--after-dark { padding-top: 80px; }
  }
  
  /* --- Homepage: the green form card ended flush on the footer at 992px+
     (.contact-us has no bottom padding there). Give it the photo band
     below so the card reads as an accent above the charcoal footer:
     72px desktop, 60px tablet (unchanged), 48px mobile (was 40px). ----- */
  @media (min-width: 992px) {
    .contact-us { padding-bottom: 72px; }
  }
  @media (max-width: 767px) {
    .contact-us { padding-bottom: 48px; }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .footer-section-2 .about-widget .social-links a,
    .footer-section-2 .footer-widget ul li a,
    .footer-section-2 .get-in-touch .text p,
    .footer-section-2 .footer-bottom-menu ul li a { transition: none; }
  }
  
  /* --- /contact map: visible focus when the iframe takes keyboard focus --
     Chrome moves focus into the cross-origin map document, so the <iframe>
     here never matches :focus-visible. .is-keyboard-focus is set by
     static/js/script.js (21 Map Keyboard Focus); :focus-visible stays for engines
     that do match it. Inset so the full-width map does not clip the ring. */
  .contact-map {
    position: relative;
  }
  .contact-map iframe:focus-visible {
    outline: 3px solid var(--theme-color-3);
    outline-offset: -3px;
  }
  .contact-map.is-keyboard-focus::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid var(--theme-color-3);
    pointer-events: none;
  }

  /* [HOME] Hero: content sits on one baseline across slides.
   Slides already share the tallest height (main.css 19818-19819). */
.page-home .hero-side { display: flex; flex-direction: column; justify-content: flex-end; }
.page-home .hero-side > .container { width: 100%; }

/* 120px clear between the button row and the dots/pause control.
   Bottom padding = 120 + the control's offset and height (50 + 44 = 94;
   20 + 44 = 64 under 768px). Where the header allows, the top padding
   gives up the same amount, so the hero height does not change.
   1701px+ keeps the theme's 344/244 (150px clear already). */
@media (min-width: 1200px) and (max-width: 1700px) {
  .page-home .hero-side { padding-top: 186px; padding-bottom: 214px; }   /* was 230 / 170 */
}
@media (min-width: 992px) and (max-width: 1199px) {
  .page-home .hero-side { padding-top: 246px; padding-bottom: 214px; }   /* was 260 / 200 */
}
@media (min-width: 768px) and (max-width: 991px) {
  .page-home .hero-side { padding-top: 206px; padding-bottom: 214px; }   /* was 260 / 160 */
}
@media (max-width: 767px) {
  /* Top stays 140: slide 2's eyebrow is only 69px below the header.
     The hero grows by 44px here instead. */
  .page-home .hero-side { padding-bottom: 184px; }                       /* was 140 */
}

/* [HOME] Who we are: shared tabs and fixed panel height
   Append to the bottom of static/css/main.css, after the Stage 1 hero block.
   Run .playwright-mcp/home-stage2-delete.ps1 first. It removes:
     20863-20911  [ABOUT] How we work tabs: clear selected state
     20784-20809  /about "How we work" chips (one row from 1200px)
     15215-15238  .benefits ul li::before / ::after (old bullet markers)
   The shared tab block below replaces both /about blocks, so /about and
   the homepage use one tab style.

   Contrast: #4A4A46 on white 8.90:1; white on #007749 5.62:1;
   #007749 on the #E8F3EE hover tint 5.00:1; #007749 focus ring and
   bullet dot on white 5.62:1.
   ===================================================================== */

/* --- Shared tabs: /about "How we work" and the homepage "Who we are" -- */
:is(.about-how, .page-home .about-us-section) .c-tabs-wrapper .nav-tabs {
  flex-wrap: wrap;
  gap: 8px;
}
:is(.about-how, .page-home .about-us-section) .c-tabs-wrapper .nav-tabs .nav-item .nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px var(--bh-tab-pad-x, 16px);
  border: 1px solid #E2E2DC;
  background-color: var(--white-color);
  color: #4A4A46;
  font-size: 15px;
  white-space: nowrap;
  box-shadow: none;                 /* no Bootstrap blue focus glow */
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* Hover (inactive only): pale green tint, reads as clickable, not selected */
:is(.about-how, .page-home .about-us-section) .c-tabs-wrapper .nav-tabs .nav-item .nav-link:not(.active):hover {
  border-color: #B9DACB;
  background-color: #E8F3EE;
  color: var(--theme-color-3);
  box-shadow: none;
}
:is(.about-how, .page-home .about-us-section) .c-tabs-wrapper .nav-tabs .nav-item .nav-link:not(.active):active {
  background-color: #D6EAE0;        /* press feedback */
  transition-duration: 0.1s;
}
/* Selected: solid brand green (Bootstrap toggles .active and aria-selected together) */
:is(.about-how, .page-home .about-us-section) .c-tabs-wrapper .nav-tabs .nav-item .nav-link.active,
:is(.about-how, .page-home .about-us-section) .c-tabs-wrapper .nav-tabs .nav-item .nav-link[aria-selected="true"] {
  border-color: var(--theme-color-3);
  background-color: var(--theme-color-3);
  color: var(--white-color);
  box-shadow: 0 4px 12px -4px rgba(0, 119, 73, 0.45);
}
/* Keyboard focus on any tab, selected or not */
:is(.about-how, .page-home .about-us-section) .c-tabs-wrapper .nav-tabs .nav-item .nav-link:focus-visible {
  outline: 2px solid var(--theme-color-3);
  outline-offset: 3px;
}
@media (min-width: 1200px) {
  :is(.about-how, .page-home .about-us-section) .c-tabs-wrapper .nav-tabs { flex-wrap: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.about-how, .page-home .about-us-section) .c-tabs-wrapper .nav-tabs .nav-item .nav-link { transition: none; }
}

/* Homepage only: three short labels stay on one row down to 375px.
   /about keeps 16px, so its longer labels wrap as before. */
@media (max-width: 1199px) {
  .page-home .about-us-section .c-tabs-wrapper { --bh-tab-pad-x: 14px; }
}
@media (max-width: 575px) {
  .page-home .about-us-section .c-tabs-wrapper { --bh-tab-pad-x: 10px; }
  .page-home .about-us-section .c-tabs-wrapper .nav-tabs { gap: 6px; }
  .page-home .about-us-section .c-tabs-wrapper .nav-tabs .nav-item .nav-link { font-size: 14px; }
}
@media (max-width: 399px) {
  /* 360px phones: 284px of chips in a 289px row */
  .page-home .about-us-section .c-tabs-wrapper { --bh-tab-pad-x: 8px; }
  .page-home .about-us-section .c-tabs-wrapper .nav-tabs { gap: 4px; }
}

/* --- Homepage: fixed panel height --------------------------------------
   All panels share one grid cell, so the tallest sets the height and
   switching tabs moves nothing. Inactive panels are visibility: hidden,
   which also takes them out of the Tab order and the accessibility tree.
   Bootstrap's .fade / .show still fades the incoming panel in (and its
   own reduced-motion rule turns that off). */
.page-home .about-us-section .tab-content {
  display: grid;
}
.page-home .about-us-section .tab-content > .tab-pane {
  display: block;
  grid-area: 1 / 1;
  visibility: hidden;
}
.page-home .about-us-section .tab-content > .tab-pane.active {
  visibility: visible;
}

/* --- Homepage: body text and bullets ----------------------------------- */
.page-home .about-us-section .about-us-content .text p {
  color: #4A4A46;
}
.page-home .about-us-section .benefits ul li {
  display: block;
  padding-left: 22px;
  line-height: 1.5;
  color: #4A4A46;
}
/* 6px dot centred on the first line (line-height 1.5 = 0.75em to its middle) */
.page-home .about-us-section .benefits ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: calc(0.75em - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--theme-color-3);
}

/* --- Homepage: years badge value (was an <h3>, now a <p>) -------------- */
.page-home .shape-wrapped-thumb-1 .experience-shape-2 .experience-shape-2__value {
  max-width: none;
  width: auto;
  margin: 0;
  font-family: var(--outfit-font);
  font-style: normal;
  font-weight: 600;
  font-size: 70px;
  line-height: 86%;
  color: transparent;
  -webkit-text-stroke: 1px var(--theme-color-3);
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .page-home .shape-wrapped-thumb-1 .experience-shape-2 .experience-shape-2__value { font-size: 52px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .page-home .shape-wrapped-thumb-1 .experience-shape-2 .experience-shape-2__value { font-size: 44px; }
}


/* [HOME] Who we are: polish
   Append to the bottom of static/css/main.css, after the Stage 2
   "Who we are: shared tabs and fixed panel height" block.

   Layout:
     1200+     two columns, overlap composition as before. The video card is
               now anchored to the photo's bottom edge (bottom: -drop) instead
               of top: 45%, so the wrapper's bottom margin equals the overhang
               exactly and the section spacing below is predictable.
     768-1199  stacked; the image group (photo + badges + video card) is
               centred: 434px photo, 120px overhang on each side (674px).
     <768      stacked; no overlap. Full-width photo with the badges inside
               its top-right and bottom-left corners (sky and gravel in the
               current photo), video card below it, play button centred.

   Gap to the next section matches the section rhythm (m-t-120 / md-100 /
   xs-80): section padding-bottom 60 / 40 / 20 + the next section's m-t-60.

   Contrast: white on #007749 5.62:1 (badge text, focus ring against its
   green halo); #99EF68 icon on #007749 4.20:1. The white focus ring alone
   is 1.39:1 at worst on this photo (bright poles), so it gets a #007749
   halo on both sides and never depends on the photo.
   ===================================================================== */

   .page-home .about-us-section {
    --bh-video-drop: 140px;           /* how far the video card hangs below the photo */
    padding-bottom: 60px;             /* + next section m-t-60 = 120 */
  }
  
  /* --- Images: the width/height attributes set the ratio, CSS the size ---- */
  .page-home .shape-wrapped-thumb-1 {
    margin-bottom: var(--bh-video-drop);
  }
  .page-home .shape-wrapped-thumb-1 > img {
    display: block;
    max-width: min(100%, 434px);
    height: auto;
  }
  .page-home .positioned-shape {
    top: auto;
    bottom: calc(-1 * var(--bh-video-drop));
  }
  .page-home .positioned-shape .shape-wrapped-thumb-2 {
    margin: 0;                        /* generic 80 / 60 / 40px bottom margins lifted the card */
  }
  .page-home .positioned-shape .shape-wrapped-thumb-2 .video-thumb img {
    display: block;
    height: auto;
  }
  
  /* --- B-BBEE badge: plain green panel, no leaf --------------------------- */
  .page-home .shape-wrapped-thumb-1 .award-shape {
    bottom: 48px;                     /* on the gravel below the wheel, not on the loader */
    gap: 14px;
    padding: 18px 22px 18px 18px;
    border-radius: 12px;              /* matches the years badge */
    background-color: var(--theme-color-3);
    background-image: none;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.18),
      0 10px 24px -10px rgba(0, 0, 0, 0.45);
  }
  .page-home .shape-wrapped-thumb-1 .award-shape__icon {
    flex: none;
    font-size: 28px;
    color: var(--theme-shade-color);
  }
  .page-home .shape-wrapped-thumb-1 .award-shape p {
    max-width: 132px;
    margin: 0;
    font-weight: 600;
    line-height: 1.25;
    color: var(--white-color);
  }
  
  /* --- Play button: visible focus, pulse off under reduced motion ---------
     Full chain: main.css sets the pulse at (0,4,0). */
  .page-home .positioned-shape .shape-wrapped-thumb-2 .video-thumb .video-play-btn:focus-visible {
    outline: 2px solid var(--white-color);
    outline-offset: 3px;
    box-shadow: 0 0 0 7px var(--theme-color-3);   /* green either side of the white ring */
    animation: none;                               /* the pulse animates box-shadow */
  }
  @media (prefers-reduced-motion: reduce) {
    .page-home .positioned-shape .shape-wrapped-thumb-2 .video-thumb .video-play-btn {
      animation: none;
      transition: none;
    }
  }
  
  /* --- Type and vertical rhythm: 16 / 32 / 24 / 20 ------------------------ */
  .page-home .about-us-section .common-subtitle {
    margin-bottom: 16px;
  }
  .page-home .about-us-section .common-title {
    margin-bottom: 32px;
  }
  .page-home .about-us-section .common-title h2 {
    letter-spacing: -0.015em;
  }
  .page-home .about-us-section .c-tabs-wrapper .nav-tabs {
    margin-bottom: 24px;
  }
  .page-home .about-us-section .about-us-content .text {
    margin-bottom: 20px;
  }
  .page-home .about-us-section .about-us-content .text p {
    max-width: 62ch;
    margin-bottom: 0;
  }
  .page-home .about-us-section .benefits {
    margin-bottom: 0;                 /* the section padding sets the gap below */
  }
  
  /* --- 768-1199: stacked, image group centred ----------------------------- */
  @media (min-width: 768px) and (max-width: 1199px) {
    .page-home .shape-wrapped-thumb-1 {
      width: 434px;
      max-width: 100%;
      margin: 0 auto calc(var(--bh-video-drop) + 48px);   /* 48px to the text */
    }
    .page-home .shape-wrapped-thumb-1 > img {
      width: 100%;
    }
    .page-home .shape-wrapped-thumb-1 .experience-shape-2 {
      gap: 10px;
      right: -120px;
    }
    .page-home .shape-wrapped-thumb-1 .award-shape {
      gap: 12px;
      left: -120px;
    }
    .page-home .positioned-shape {
      right: -120px;
    }
    .page-home .positioned-shape .shape-wrapped-thumb-2 {
      width: auto;
    }
  }
  @media (min-width: 768px) and (max-width: 991px) {
    .page-home .about-us-section { padding-bottom: 40px; }   /* + 60 = 100 */
  }
  
  /* --- <768: stacked, no overlap ------------------------------------------
     One grid column: the photo and both badges share row 1 (the badges sit in
     its corners), the video card is row 2. No absolute offsets, so nothing
     depends on the photo's rendered height. */
  @media (max-width: 767px) {
    .page-home .about-us-section { padding-bottom: 20px; }   /* + 60 = 80 */
  
    .page-home .shape-wrapped-thumb-1 {
      display: grid;
      margin: 0 0 48px;               /* 48px to the text */
    }
    .page-home .shape-wrapped-thumb-1 > img {
      grid-area: 1 / 1;
      width: 100%;
      max-width: none;
    }
    .page-home .shape-wrapped-thumb-1 .experience-shape-2,
    .page-home .shape-wrapped-thumb-1 .award-shape {
      grid-area: 1 / 1;
      position: relative;
      inset: auto;
      transform: none;
    }
    .page-home .shape-wrapped-thumb-1 .experience-shape-2 {
      align-self: start;
      justify-self: end;
      margin: 12px 12px 0 0;
      gap: 8px;
      padding: 12px 16px;
    }
    .page-home .shape-wrapped-thumb-1 .experience-shape-2 .experience-shape-2__value {
      font-size: 34px;
    }
    .page-home .shape-wrapped-thumb-1 .experience-shape-2 p {
      max-width: 84px;
      font-size: 14px;
      line-height: 1.25;
    }
    .page-home .shape-wrapped-thumb-1 .award-shape {
      align-self: end;
      justify-self: start;
      margin: 0 0 12px 12px;
      gap: 10px;
      padding: 12px 16px 12px 12px;
    }
    .page-home .shape-wrapped-thumb-1 .award-shape__icon {
      font-size: 24px;
    }
    .page-home .shape-wrapped-thumb-1 .award-shape p {
      max-width: 112px;
      font-size: 14px;
    }
  
    /* Video card: its own row, centred, never wider than the still (1x) */
    .page-home .positioned-shape {
      grid-area: 2 / 1;
      position: relative;
      inset: auto;
      justify-self: center;
      width: min(100%, 334px);
      margin-top: 24px;
    }
    .page-home .positioned-shape .shape-wrapped-thumb-2,
    .page-home .positioned-shape .shape-wrapped-thumb-2 .video-thumb {
      width: 100%;
    }
  
    /* Dot grid: behind the card's lower-left corner, inside the gutter */
    .page-home .shape-wrapped-thumb-1 .box-shape {
      left: -8px;
      bottom: -16px;
    }
  }

  
  /* [HOME] Our services: stage 1 structure
   Append to the bottom of static/css/main.css.

   Markup (templates/home/index.html, section.home-services):
     ul.home-services__grid > li.home-services__card
       .home-services__media > img.home-services__img   (decorative, alt="")
       .home-services__body  > h3 + p + a.services-link.home-services__link
   The section keeps .what-we-do-section and .section-top-2 for now, so
   the green band, header layout and torn edges are unchanged until Stage 2.

   Stage 1 is structure only: photo on top, solid body below, link always
   visible, 4 / 2 / 1 columns (1200+ / 768-1199 / <768). No glass, no
   overflow on anything that holds a link, so focus never scrolls or clips.
   Stage 2 does the colour line, row alignment, rhythm and the flat band.

   Contrast: #99EF68 on #231F20 11.6:1 (card link and its focus ring);
   #fff on #231F20 16.1:1; #f5f5f5 on #231F20 14.9:1;
   #fff on the green band 5.13:1 at its brightest pixel (section link).
   ===================================================================== */

/* --- Grid: 1 column, 2 at 768-1199, 4 from 1200 ------------------------ */
.page-home .home-services__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .page-home .home-services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .page-home .home-services__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --- Card: photo on top, body below; equal heights per row ------------- */
.page-home .home-services__card {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background-color: var(--theme-color);
}
.page-home .home-services__media {
  overflow: hidden;                 /* rounds the photo only; holds no link */
  border-radius: 10px 10px 0 0;
}
.page-home .home-services__img {
  display: block;
  width: 100%;
  height: auto;
}
.page-home .home-services__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 24px 16px;
}
.page-home .home-services__title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--white-color);
}
.page-home .home-services__text {
  margin: 0 0 8px;
  color: var(--light-color);
}

/* --- Links: always visible, 44px tall (from .services-link) ------------
   .services-link is #007749 for light pages; both links here sit on dark
   or green, so they get their own colour, hover and focus. */
.page-home .home-services .home-services__link {
  margin-top: auto;                 /* pinned to the bottom of the body */
  align-self: flex-start;
  color: var(--theme-shade-color);
}
.page-home .home-services .home-services__all {
  color: var(--white-color);
}
.page-home .home-services .home-services__link:hover {
  color: var(--theme-shade-color);
}
.page-home .home-services .home-services__all:hover {
  color: var(--white-color);
}
.page-home .home-services .home-services__link:focus-visible {
  outline: 2px solid var(--theme-shade-color);
  outline-offset: 2px;
}
.page-home .home-services .home-services__all:focus-visible {
  outline: 2px solid var(--white-color);
  outline-offset: 2px;
}


/* [HOME] Our services: card images
   Append to the bottom of static/css/main.css, after
   "[HOME] Our services: stage 1 structure".

   Photos come from the CMS keys home.services.{rsmh,mh,rlim,cm}.image
   (defaults: static/img/services/home-card-{code}.webp, 960x720).
   The wrapper fixes the frame at 4:3 and the photo fills it, so any image
   marketing uploads later crops the same way and the card never jumps
   while the photo loads (the img also carries width/height 960x720).
   ===================================================================== */

   .page-home .home-services__media {
    aspect-ratio: 4 / 3;
  }
  .page-home .home-services__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* [HOME] Our operations: map gestures
   Append to the bottom of static/css/main.css.

   static/js/map-gestures.js keeps the page scrolling past Leaflet maps:
   a plain wheel and a one-finger swipe go to the page; Ctrl/Cmd + wheel,
   a click inside the map, or two fingers move the map. It adds
   .map-gestures to the map container and a .map-gestures__hint status
   element. The hint rules are not page-scoped because the siding detail
   maps use the same helper; everything else is homepage only.

   Contrast: #fff on the hint (#231F20 at 90% over the map) 14:1+;
   #231F20 on #fff (reset button) 16.1:1; #007749 on #fff (popup link,
   attribution links) 5.6:1; focus rings #007749 / #231F20 on the map
   tiles >= 3:1.
   ===================================================================== */

/* --- Gesture hint (all pages with map-gestures.js) ---------------------- */
.map-gestures__hint {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1000;                      /* above panes (400-700) and controls (800) */
  max-width: calc(100% - 32px);
  padding: 10px 18px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--theme-color) 90%, transparent);
  color: var(--white-color);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  pointer-events: none;               /* never blocks clicks or taps */
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease-out;
}
.map-gestures__hint.is-visible {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .map-gestures__hint {
    transition: none;
  }
}

/* --- Focus ring on the map: drawn on the wrapper, which clips its
       children (overflow: hidden), so the ring is never cut off -------- */
.page-home #barberry-map:focus-visible {
  outline: none;
}
.page-home .operations-map-wrap:has(#barberry-map:focus-visible) {
  outline: 3px solid var(--theme-color-3);
  outline-offset: 3px;
}

/* --- Pins, zoom, layer toggle: visible keyboard focus ------------------- */
.page-home #barberry-map .barberry-map-pin:focus-visible {
  outline: 3px solid var(--theme-color);
  outline-offset: 3px;
  border-radius: 50%;
}
.page-home #barberry-map .leaflet-bar a:focus-visible,
.page-home #barberry-map .leaflet-control-layers-selector:focus-visible {
  outline: 3px solid var(--theme-color-3);
  outline-offset: 2px;
}

/* --- "Show all sidings" reset (Leaflet control, top left under zoom) ---- */
.page-home #barberry-map .map-reset__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid rgba(0, 0, 0, 0.2);   /* matches Leaflet's .leaflet-bar edge */
  border-radius: 6px;
  background: var(--white-color);
  background-clip: padding-box;
  color: var(--theme-color);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.page-home #barberry-map .map-reset__btn:hover {
  background: var(--theme-color-3);
  color: var(--white-color);
}
.page-home #barberry-map .map-reset__btn:focus-visible {
  outline: 3px solid var(--theme-color-3);
  outline-offset: 2px;
}

/* --- Popup link to the siding page --------------------------------------- */
.page-home .barberry-popup .popup-link {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-height: 44px;
  margin: -6px 0 6px;                  /* the <p> above already leaves 12px */
  color: var(--theme-color-3);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.page-home .barberry-popup .popup-link:hover {
  color: var(--theme-color-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-home .barberry-popup .popup-link:focus-visible {
  outline: 2px solid var(--theme-color-3);
  outline-offset: 2px;
}

/* --- Attribution: readable at every width --------------------------------- */
.page-home #barberry-map .leaflet-control-attribution {
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--theme-color);
  font-size: 12px;
  line-height: 1.5;
}
.page-home #barberry-map .leaflet-control-attribution a {
  color: var(--theme-color-3);
  text-decoration: underline;
}


/* [HOME] Our operations: stage 3 design
   Append to the bottom of static/css/main.css, AFTER running
   .playwright-mcp\home-ops-stage3-delete.ps1. That script removes the
   "[HOME] Our operations: stage 2 structure" block; this snippet replaces
   all of it (section, eyebrow icon, row, card, play button, focus).

   Markup (templates/home/index.html, section.home-ops):
     .home-ops__header (eyebrow, h2, intro) + .home-ops__map
     .home-ops__controls > button.home-ops__nav x2      (768px+, aria-controls the row)
     div#home-ops-row.home-ops__row[role=region][aria-label="Rail sidings"][tabindex=0]
       ul.home-ops__list > li.home-ops__card
         .home-ops__media > img.home-ops__img              (decorative, alt="")
         .home-ops__body  > p.home-ops__location + h3.home-ops__title
                            + p.home-ops__text + dl.home-ops__stat
                            + a.services-link.home-ops__link
         .home-ops__play-wrap > a.home-ops__play           (Fancybox video)
     .home-ops__progress > .home-ops__progress-thumb      (decorative, aria-hidden)
   The inline script after the map script sizes the progress thumb, pages
   the row on the buttons and sets aria-disabled at either end.

   Layout: one scroll-snap row at every width, one card tall: 4 cards and a
   peek from 1200, 3 at 992-1199, 2 at 768-991, 1 below 768 (as Stage 2).
   Title fixed at 2 lines and summary at 5, so title, summary, tonnage and
   link start on the same line across the row. 5 lines is the longest
   summary at the narrowest card in every range, so no summary is cut.

   Header rhythm (as "Who we are"): eyebrow 16, h2 to intro 24, intro to
   map 32, row to progress bar 20. Map to row 48 (40 below 768).

   Contrast on #fff: #4A4A46 (location, summary, tonnage label) 8.9:1;
   #231F20 (title) 16.1:1; #007749 (tonnage figure, link, focus rings,
   progress thumb) 5.6:1. Map info bar: #f5f5f5 on #231F20 at 90% over
   white (#393536) 11.1:1, was #868681 at 3.3:1.
   ===================================================================== */

/* --- Section and header ----------------------------------------------- */
.page-home .home-ops {
  --ops-muted: #4A4A46;
  background-color: var(--white-color);
}
.page-home .home-ops .common-subtitle {
  margin-bottom: 16px;
}
.page-home .home-ops .common-subtitle i {
  font-size: 20px;
  color: var(--theme-shade-color);
  margin-right: 8px;
}
.page-home .home-ops .common-title h2 {
  letter-spacing: -0.015em;
}
.page-home .home-ops .operations-lead {
  max-width: 62ch;
  margin: 24px auto 0;
}
.page-home .home-ops__header {
  margin-bottom: 32px;
}

/* --- Map info bar: readable on the charcoal bar --------------------------- */
.page-home .home-ops .map-caption {
  color: var(--light-color);
  font-size: 14px;
  line-height: 1.5;
}
.page-home .home-ops__map {
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .page-home .home-ops__map {
    margin-bottom: 48px;
  }
}

/* --- Previous / next (768px+; swipe only below) -------------------------- */
.page-home .home-ops__controls {
  display: none;
}
@media (min-width: 768px) {
  .page-home .home-ops__controls {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 16px;
  }
}
.page-home .home-ops__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--theme-color);
  border-radius: 50%;
  background-color: var(--white-color);
  color: var(--theme-color);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.page-home .home-ops__nav:hover:not([aria-disabled="true"]) {
  background-color: var(--theme-color);
  color: var(--white-color);
}
.page-home .home-ops__nav[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
}
.page-home .home-ops__nav:focus-visible {
  outline: 2px solid var(--theme-color-3);
  outline-offset: 2px;
}

/* --- Row: native scroll-snap at every width, scrollbar hidden ------------
   Still scrolls by trackpad, touch, keyboard (arrows when focused) and the
   buttons. Card width comes from the row's own width (container units). */
.page-home .home-ops__row {
  --ops-gap: 24px;
  --ops-per-view: 4;
  --ops-peek: 72px;
  container-type: inline-size;
  padding-block: 4px;               /* room for focus rings */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.page-home .home-ops__row::-webkit-scrollbar {
  display: none;
}
.page-home .home-ops__list {
  display: flex;
  gap: var(--ops-gap);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-home .home-ops__card {
  flex: 0 0 auto;
  width: calc((100cqi - var(--ops-gap) * var(--ops-per-view) - var(--ops-peek)) / var(--ops-per-view));
  scroll-snap-align: start;
}
@media (min-width: 992px) and (max-width: 1399.98px) {
  .page-home .home-ops__row {           /* the container is narrowest here */
    --ops-gap: 20px;
    --ops-peek: 56px;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .page-home .home-ops__row { --ops-per-view: 3; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .page-home .home-ops__row { --ops-per-view: 2; }
}
/* Below 768: one card and a peek, the row running to the screen edges */
@media (max-width: 767.98px) {
  .page-home .home-ops__row {
    --ops-gap: 16px;
    margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
    padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    scroll-padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  }
  .page-home .home-ops__card {
    width: min(82vw, 340px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-home .home-ops__row {
    scroll-behavior: auto;
  }
  .page-home .home-ops__nav {
    transition: none;
  }
}

/* --- Progress: decorative, shows the row's position ---------------------- */
.page-home .home-ops__progress {
  height: 4px;
  margin-top: 20px;
  overflow: hidden;
  border-radius: 2px;
  background-color: color-mix(in srgb, var(--theme-color) 10%, transparent);
}
.page-home .home-ops__progress-thumb {
  display: block;
  width: 25%;                       /* set by the script from the visible share */
  height: 100%;
  border-radius: 2px;
  background-color: var(--theme-color-3);
}

/* --- Card: white, 1px border, photo 4:3, body a flex column -------------- */
.page-home .home-ops__card {
  position: relative;               /* holds the play button over the photo */
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--theme-color) 12%, transparent);
  border-radius: 10px;
  background-color: var(--white-color);
}
.page-home .home-ops__media {
  overflow: hidden;                 /* rounds the photo only; holds no link */
  border-radius: 9px 9px 0 0;
}
.page-home .home-ops__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.page-home .home-ops__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 20px 12px;
}
.page-home .home-ops__location {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 8px;
  color: var(--ops-muted);
  font-size: 14px;
  line-height: 1.4;
}
.page-home .home-ops__location i {
  color: var(--theme-color-3);
}
/* Title: always 2 lines tall, so everything below lines up */
.page-home .home-ops__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  height: 2.6em;
  margin: 0 0 8px;
  overflow: hidden;
  color: var(--theme-color);
  font-size: 20px;
  line-height: 1.3;
}
/* Summary: always 5 lines tall, at every width */
.page-home .home-ops__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  height: 7.5em;
  margin: 0 0 16px;
  overflow: hidden;
  color: var(--ops-muted);
  font-size: 15px;
  line-height: 1.5;
}
/* Tonnage: label and figure on one line where they fit */
.page-home .home-ops__stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.4;
}
.page-home .home-ops__stat dt {
  color: var(--ops-muted);
  font-weight: 400;
}
.page-home .home-ops__stat dd {
  margin: 0;
}
.page-home .home-ops__stat strong {
  color: var(--theme-color-3);
  font-weight: 600;
}
.page-home .home-ops__link {
  margin-top: auto;                 /* pinned to the bottom of the card */
}

/* 992-1399: narrower cards. At 1200-1399 (4 cards in a 1140px container,
   244px each) "Kazerne, Johannesburg, Gauteng" wraps, so every card
   reserves a second location line there. */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .page-home .home-ops__body {
    padding-inline: 16px;
  }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .page-home .home-ops__location {
    min-height: 2.8em;              /* 2 lines */
  }
}

/* --- Play button: 56px, centred on the 4:3 photo ------------------------- */
.page-home .home-ops__play-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 4 / 3;              /* same box as the photo */
  display: grid;
  place-items: center;
  pointer-events: none;             /* only the button takes clicks */
}
.page-home .home-ops__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--white-color);
  box-shadow: 0 4px 16px rgba(35, 31, 32, 0.25);
  color: var(--theme-color);
  pointer-events: auto;
}
.page-home .home-ops__play:hover {
  color: var(--theme-color-3);
}

/* --- Focus: link, play button and the row ------------------------------- */
.page-home .home-ops__link:focus-visible {
  outline: 2px solid var(--theme-color-3);
  outline-offset: 2px;
}
.page-home .home-ops__play:focus-visible {
  outline: 2px solid var(--white-color);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--theme-color-3);   /* green either side of the white ring */
}
.page-home .home-ops__row:focus-visible {
  outline: 2px solid var(--theme-color-3);
  outline-offset: -2px;             /* inside the row, so the screen edge never clips it */
}


/* [HOME] Stage 4: images and performance
   Append to the bottom of static/css/main.css.

   The hero photos are now <img class="hero-side__img"> (WebP, srcset) instead of
   an inline background-image. This puts the image exactly where the background
   was: it fills .hero-side (cover, centred, like background-size: cover and
   background-position: center center) and sits under everything else in the
   slide. .hero-side is position: relative with z-index: 1, so it is the stacking
   context; inside it the theme already uses -2 (.group-shape-1) and -1
   (.s-shape-1), and the scrim (::before) is 0. -3 keeps the photo below all
   three, which is where the background painted.
   ===================================================================== */
   .page-home .hero-side__img {
    position: absolute;
    inset: 0;
    z-index: -3;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
  }
  

  .operations-map-wrap {
    isolation: isolate;
  }

  /* [HOME] Our operations: stage 5 follow-ups
   Append to the bottom of static/css/main.css, after the Stage 4 block. Adds to
   "[HOME] Our operations: stage 3 design"; it deletes nothing. Every Stage 3 rule
   it touches is still used, so there is no delete script.

   Markup (templates/home/index.html, section.home-ops):
     .home-ops__controls > button.home-ops__nav x2
                         + button.home-ops__autoplay        (new, aria-controls the row,
                                                             aria-pressed, icon fa-pause/fa-play)
   The section's bottom padding is now p-b-100 (was p-b-120 p-b-md-100) in the
   template. From 992px the card bottoms are then 224px from "Our people"
   (20 + 4 progress bar + 100 + 100), in line with the 220px from "What we
   do" to this section above; it was 248. 768-991 (100) and below 768 (80)
   do not change.

   1. Pause / play: the arrows' 44px circle, after them (Tab: arrows, pause, row).
   2. Peek to the screen edge from 768px: the row runs to the right edge of the
      section (the viewport less any scrollbar), its left edge still on the
      container. Margin and padding cancel, so the cards keep their Stage 3
      widths (100cqi in the row is still the content box). The section is the
      size container for the margin; overflow-x-clip on it already stops any
      horizontal page scroll. At the end of the row the last card stops on the
      container's right edge.
   3. Title height: all 14 titles fit on one line at 20px from 1400px (the
      longest, "Musina Intermodal Terminal", is 257px in a 257px column) and
      below 768px from 375px, and at 18px from 768 to 1199 (Musina is 231px in
      a 238-243px column), so one line is reserved there. min-height, not
      height: a title that wraps (Musina at 360, Broodsnyersplaas and Musina at
      320) makes its own card one line taller instead of being cut. 1200-1399
      keep Stage 3's two lines at 20px (Musina and Broodsnyersplaas wrap in
      210px, Musina even at 18px).
   4. Map at 768px and below: 420px tall (was 320), so a popup fits under the
      controls; see the note on the rule.
   ===================================================================== */

/* --- 1. Pause / play ---------------------------------------------------- */
.page-home .home-ops__autoplay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--theme-color);
  border-radius: 50%;
  background-color: var(--white-color);
  color: var(--theme-color);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.page-home .home-ops__autoplay:hover {
  background-color: var(--theme-color);
  color: var(--white-color);
}
.page-home .home-ops__autoplay:focus-visible {
  outline: 2px solid var(--theme-color-3);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .page-home .home-ops__autoplay {
    transition: none;
  }
}

/* --- 2. Peek to the screen edge from 768px ------------------------------- */
.page-home .home-ops {
  container-type: inline-size;
}
@media (min-width: 768px) {
  .page-home .home-ops__row {
    margin-right: calc(50% - 50cqi);   /* to the section's right edge */
    padding-right: calc(50cqi - 50%);  /* same width back, so card sizes do not change */
  }
}

/* --- 3. Title: one line where all 14 fit --------------------------------- */
@media (max-width: 767.98px), (min-width: 1400px) {
  .page-home .home-ops__title {
    height: auto;
    min-height: 1.3em;                 /* 1 line */
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .page-home .home-ops__title {
    height: auto;
    min-height: 1.3em;                 /* 1 line */
    font-size: 18px;                   /* the longest title fits in the column at 18px */
  }
}

/* --- 4. Map: room for a popup under the controls, 768px and below -------
   At 320px tall the controls take the top 128px and a popup with its video
   button is 194px plus a 34px tip and pin, so no pan could keep it clear.
   420 fits 8 + 128 + 194 + 34 with the 2-line attribution below the pin.
   The homepage script (keepPopupInView) pans the popup under the controls
   once the fly-to ends. Homepage only; the siding pages' map is unchanged. */
@media (max-width: 768px) {
  .page-home #barberry-map {
    height: 420px;
  }
}


/* [HOME] Proof bar: stage 1
   Append to the bottom of static/css/main.css, AFTER running
   .playwright-mcp\home-proof-delete.ps1 (which removes the dead
   .why-us-section-2 .company-achievements, .achievement-2 and
   .company-achievements-2 rules; this snippet re-sets none of them).

   Markup (templates/home/index.html, section.home-proof.m-t-100.m-t-xs-60):
     h2#home-proof-title.visually-hidden          "Barberry in numbers"
     ul.home-proof__list[role=list] > li.home-proof__item x4
       strong.home-proof__value + span.home-proof__label
   Real values in the HTML: no PureCounter, no AOS, no icons.

   Layout: 4 columns from 992px, 2x2 below (32px column gap, 40px row gap;
   24px column gap and viewport-scaled figures below 576px).
   A 1px rule across the top (#231F20 at 12%), and a 32x3 #99EF68 tick on
   the rule above each item, which ties the strip to the green band below
   (its eyebrow icon is #99EF68). Spacing: 100px above (60 below 768),
   the services band keeps its 80px.

   Contrast on #fff: #007749 (value) 5.6:1; #231F20 (label) 16.1:1. The rule
   and ticks are decoration, not text.
   ===================================================================== */

   .page-home .home-proof__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(35, 31, 32, 0.12);
  }
  @media (min-width: 992px) {
    .page-home .home-proof__list {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .page-home .home-proof__item {
    position: relative;
    padding-top: 28px;
  }
  .page-home .home-proof__item::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 32px;
    height: 3px;
    background-color: var(--theme-shade-color);
  }
  .page-home .home-proof__value {
    display: block;
    margin-bottom: 12px;
    font-family: var(--outfit-font);
    font-weight: 700;
    font-size: clamp(40px, 2.4vw + 18px, 56px);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--theme-color-3);
  }
  .page-home .home-proof__label {
    display: block;
    max-width: 22ch;
    font-family: var(--dm-sans-font);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--theme-color);
  }
  /* "11 million" is 169px at 40px; the 2x2 columns are 124-152px at
     320-375. Scale the figures with the viewport and close the gap a little. */
  @media (max-width: 575px) {
    .page-home .home-proof__list {
      column-gap: 24px;
    }
    .page-home .home-proof__value {
      font-size: clamp(30px, 8.6vw, 40px);
    }
  }
  
  /* Testimonial: "Since 2003" (was the "23+" counter) stays on one line;
     "Delivering results" moves under it when the row is too narrow. */
  .page-home .testimonial .reviews {
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 4px;
  }
  .page-home .testimonial .reviews h3 {
    white-space: nowrap;
  }
  
  /* /about: the stats figure is a <p> (.achievement__value), which set no
     font-family and fell back to DM Sans. Outfit, as the old h2. */
  .company-achievements .achievement .achievement__value {
    font-family: var(--outfit-font);
  }
  

  
/* [HOME] Proof bar: stage 2
   Append to the bottom of static/css/main.css, after "[HOME] Proof bar:
   stage 1". It deletes nothing and re-sets only the spacing above the bar.

   Spacing: "Who we are" to the proof bar's top rule, matching the section
   rhythm: 80px from 992px, 60px at 768-991, 48px below 768. The section's
   bottom padding (60 / 40 / 20, from "Who we are: polish") goes to 0, and
   the bar's own margin sets the whole gap. The 140px video-card overhang is
   already inside the section (the image group's margin-bottom equals it),
   so the gap is measured from the card's bottom edge at 1200+ and from the
   text below that. The m-t-100 / m-t-xs-60 classes are gone from the markup.

   Motion (homepage inline script "Proof bar"): the script adds
   .home-proof--animate (the hidden start state) and, when 30% of the list
   is in view, .home-proof--in. Once only. Each tick grows 0 -> 32px
   (scaleX from the left, 500ms) and each figure and label fade up 12px
   (500ms), 100ms apart per item. Transforms and opacity only: no layout
   shift. No class without JS, and the script adds none under reduced
   motion, so no-JS readers, crawlers and reduced motion get the final
   state. The reduced-motion block below is a second guard.

   Count-up (data-countup="true" on the section; "false" by default): the
   script splits each [data-count-to] figure into a visually hidden final
   value and an aria-hidden counting copy (.home-proof__digits). "24/7"
   has no data-count-to and never counts.
   ===================================================================== */

/* --- Spacing ----------------------------------------------------------- */
.page-home .about-us-section {
  padding-bottom: 0;
}
.page-home .home-proof {
  margin-top: 80px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .page-home .home-proof {
    margin-top: 60px;
  }
}
@media (max-width: 767px) {
  .page-home .home-proof {
    margin-top: 48px;
  }
}

/* --- Entrance ------------------------------------------------------------ */
.page-home .home-proof--animate .home-proof__item::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--proof-delay, 0ms);
}
.page-home .home-proof--animate .home-proof__value,
.page-home .home-proof--animate .home-proof__label {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 500ms ease-out,
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--proof-delay, 0ms);
}
.page-home .home-proof__item:nth-child(2) { --proof-delay: 100ms; }
.page-home .home-proof__item:nth-child(3) { --proof-delay: 200ms; }
.page-home .home-proof__item:nth-child(4) { --proof-delay: 300ms; }

.page-home .home-proof--in .home-proof__item::before {
  transform: scaleX(1);
}
.page-home .home-proof--in .home-proof__value,
.page-home .home-proof--in .home-proof__label {
  opacity: 1;
  transform: none;
}

/* Count-up digits hold the final width while counting (min-width set
   inline by the script, cleared at the end), so "+" and " million" never
   move. */
.page-home .home-proof__digits {
  display: inline-block;
  text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-proof--animate .home-proof__item::before,
  .page-home .home-proof--animate .home-proof__value,
  .page-home .home-proof--animate .home-proof__label {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* [HOME] Our people: stage 1
   Append to the bottom of static/css/main.css, AFTER running
   .playwright-mcp\home-people-delete.ps1. That script removes the
   "Our People section" block (.volunteer-section .common-subtitle i,
   .people-lead, .people-slider-active, .people-swiper) and the dead
   .volunteer-card-2/-3/-4 block. This snippet re-sets the eyebrow icon here.
   Later, .playwright-mcp\people-pages-delete.ps1 deleted .volunteer-card and
   un-scoped the card and grid rules below (.home-people__*), which
   /pages/volunteers and the person pages share: see [PEOPLE] Listing,
   person pages, shared card. The section and header rules stay .page-home.

   Markup (templates/home/index.html, section.home-people):
     .home-people__header (eyebrow, h2#home-people-title, p.home-people__lead)
     ul.home-people__list > li.home-people__card
       .home-people__media > img.home-people__img       (decorative, alt="", aria-hidden)
       .home-people__body  > h3.home-people__name + p.home-people__role
                             + p.home-people__credential
                             + a.services-link.home-people__link
   No script and no AOS: the grid is static and never moves.

   Layout: 4 columns from 992, 2 at 576-991, photo-left rows below 576
   (photo 112px wide). 4 from 992, not 1200: at 992-1199 two columns made
   455px cards and upscaled the 298px photos about 1.5x; four keep them at
   or below their own width. Photo 4:5, cover, top-centred, so all four crops
   share one eye line. The link is pinned to the bottom of the body, so
   the links sit on one line across a row.

   Spacing: no top padding on the section; "Our operations" keeps its
   p-b-100 (80 below 768), so the gap above is 100 / 80. The section's
   p-b-100 / p-b-xs-80 sets the gap to the CSR band.

   Contrast on #fff: #231F20 (name) 16.3:1; #4A4A46 (role, credential)
   8.9:1; #007749 (link, focus ring) 5.6:1; #15161C (intro) 18.1:1. The
   #99EF68 tick is decorative.
   ===================================================================== */

/* --- Section and header ----------------------------------------------- */
.page-home .home-people {
  --people-muted: #4A4A46;
  background-color: var(--white-color);
}
.page-home .home-people .common-subtitle {
  margin-bottom: 16px;
}
.page-home .home-people .common-subtitle i {
  font-size: 20px;
  color: var(--theme-shade-color);
  margin-right: 8px;
}
.page-home .home-people .common-title h2 {
  letter-spacing: -0.015em;
}
.page-home .home-people__lead {
  max-width: 680px;
  margin: 24px auto 0;
  color: var(--title-color);
  font-size: 16px;
  line-height: 1.6;
}
.page-home .home-people__header {
  margin-bottom: 40px;
}
@media (max-width: 767.98px) {
  .page-home .home-people__header {
    margin-bottom: 32px;
  }
}

/* --- Grid: 4 from 992, 2 at 576-991, rows below 576 -------------------- */
.home-people__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 992px) and (max-width: 1399.98px) {
  .home-people__list {
    gap: 20px;
  }
}
@media (max-width: 991.98px) {
  .home-people__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Card: white, 1px border, photo 4:5, body a flex column -------------- */
.home-people__card {
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--theme-color) 12%, transparent);
  border-radius: 10px;
  background-color: var(--white-color);
}
.home-people__media {
  overflow: hidden;                 /* rounds the photo only; holds no link */
  border-radius: 9px 9px 0 0;
  background-color: var(--light-color);
}
.home-people__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}
.home-people__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 20px 12px;
}
/* Tick: the proof bar's accent */
.home-people__body::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 16px;
  border-radius: 2px;
  background-color: var(--theme-shade-color);
}
.home-people__name {
  margin: 0 0 4px;
  color: var(--theme-color);
  font-family: var(--outfit-font);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.home-people__role {
  margin: 0;
  color: var(--people-muted);
  font-family: var(--dm-sans-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}
.home-people__credential {
  margin: 8px 0 0;
  color: var(--people-muted);
  font-family: var(--dm-sans-font);
  font-size: 15px;
  line-height: 1.5;
}
.home-people__link {
  margin-top: auto;                 /* pinned to the bottom of the card */
  padding-top: 12px;
}
.home-people__link:focus-visible {
  outline: 2px solid var(--theme-color-3);
  outline-offset: 2px;
}

@media (min-width: 992px) and (max-width: 1399.98px) {
  .home-people__body {
    padding-inline: 16px;
  }
}

/* --- Below 576: compact rows, photo left ---------------------------------- */
@media (max-width: 575.98px) {
  .home-people__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .home-people__card {
    flex-direction: row;
  }
  .home-people__media {
    flex: 0 0 112px;
    border-radius: 9px 0 0 9px;
  }
  .home-people__img {
    height: 100%;
    min-height: 140px;              /* 4:5 at 112px; taller rows crop from the top */
    aspect-ratio: auto;
  }
  .home-people__body {
    min-width: 0;
    padding: 14px 16px 4px;
  }
  .home-people__body::before {
    margin-bottom: 10px;
  }
  .home-people__name {
    font-size: 18px;
  }
  .home-people__role,
  .home-people__credential {
    font-size: 14px;
  }
  .home-people__credential {
    margin-top: 4px;
  }
  .home-people__link {
    padding-top: 4px;
  }
}


/* [SITE] Header: hide on scroll, compact, back to top
   Append to the bottom of static/css/main.css, AFTER running
   .playwright-mcp\header-delete.ps1. That script removes the old
   .sticky-header rules (the homepage "[HOME] Sticky state" block with its
   bh-header-in keyframes, and the solid header's .sticky-header shadow):
   script.js no longer adds .sticky-header.

   Script: static/js/script.js, section 03. It sets on the header
   (header.header-section-1 on the homepage, header.header-section elsewhere):
     .is-hidden    slid up out of view (scrolling down, past its own height)
     .is-compact   the slim bar it comes back as (scrolling up); removed at
                   the very top, where the header is full size again
     --bh-header-gap  the height the solid header lost when compact. It is
                   sticky (in the page flow), so a bottom margin of that much
                   keeps its slot at full height and nothing below it moves.
   The header stays put while something in it has keyboard focus, while the
   pointer is over it and while the off-canvas panel is open (script).

   Heights (full -> compact):
     solid header (inner pages)   99 -> 64 at 1200+,   79 -> 56 below
     overlay header (homepage)    81 -> 64 at 1400+,   71 -> 64 at 1200-1399,
                                  81 -> 56 at 992-1199, 71 -> 56 below 992
   Compact: smaller logo, same nav, call link, Customer Portal and menu.

   Only transform moves (the slide); the compact switch is made while the
   header is out of view, and the change back to full size at the top is not
   animated. Reduced motion: no slide (instant), no smooth scrolling.

   Overlay header: position fixed from the start instead of absolute. At the
   top it sits exactly where it was (top 0, full width, over the hero).

   Map stacking: .operations-map-wrap keeps isolation: isolate, so the Leaflet
   panes (z-index up to 1000) stay under the header (90 here, 99 solid). The
   off-canvas panel (.bh-panel, 1000) stays above the header.

   Anchors: scroll-padding-top is the compact height plus 16px, so a #hash
   jump (/#csr, #contact-form) lands with the target below the header.

   Back to top: button.back-to-top at the end of the footer (partials/
   footer.html). 44px, charcoal with a lime arrow (11.57:1) and a 2px lime
   ring (3.99:1 on the green footer; the charcoal alone is 2.9:1 there).
   Hover reverses the colours. Focus: charcoal outline with a white halo, so
   it shows on white (16.3:1) and on the green footer (white 5.67:1). It sits
   under the header and the panel. */

   .header-section-1 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
  }
  .header-section,
  .header-section-1 {
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease;
  }
  .header-section.is-hidden,
  .header-section-1.is-hidden {
    transform: translateY(-100%);
    box-shadow: none;
  }
  /* Menu buttons change size with the header: snap, keep the colour fades.
     The logo snaps too (the theme gives every img "transition: all 0.3s"),
     so the script measures the compact height at once. */
  .header-section .header-bar,
  .header-section-1 .header-bar-3 {
    transition-property: background-color, border-color, color;
  }
  .header-section .logo-wrap img,
  .header-section-1 .logo-wrap-2 img {
    transition: none;
  }
  
  /* --- Compact: solid header ------------------------------------------------ */
  .header-section.is-compact {
    margin-bottom: var(--bh-header-gap, 0px);
    box-shadow: 0 10px 24px -18px rgba(35, 31, 32, 0.45);
  }
  .header-section.is-compact .header-bottom {
    padding-top: 7px;
    padding-bottom: 7px;
  }
  .header-section.is-compact .logo-wrap img {
    max-width: 123px;               /* 44px tall */
  }
  @media (max-width: 1199px) {
    .header-section.is-compact .header-bottom {
      padding-top: 6px;
      padding-bottom: 6px;
    }
    .header-section.is-compact .logo-wrap img {
      max-width: 110px;             /* 39px tall */
    }
    .header-section.is-compact .header-bar {
      width: 44px;
      height: 44px;
    }
  }
  
  /* --- Compact: overlay header (homepage) ----------------------------------- */
  .header-section-1.is-compact .logo-wrap-2 {
    display: flex;
    align-items: center;
    height: 64px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .header-section-1.is-compact .logo-wrap-2 img {
    max-width: 140px;               /* 34px tall */
  }
  .page-home .header-section-1.is-compact .header-middle {
    min-height: 64px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .header-section-1.is-compact .header-bar-3 {
    width: 64px;
    height: 64px;
  }
  @media (min-width: 1200px) and (max-width: 1399px) {
    .header-section-1.is-compact .logo-wrap-2 img {
      max-width: 110px;             /* 27px tall */
    }
  }
  @media (max-width: 1199px) {
    .header-section-1.is-compact .logo-wrap-2 {
      height: 56px;
    }
    .header-section-1.is-compact .logo-wrap-2 img {
      max-width: 120px;             /* 29px tall */
    }
    .header-section-1.is-compact .header-bar-3 {
      width: 56px;
      height: 56px;
    }
  }
  /* Over page content, not the hero: near-solid glass, as the old sticky state. */
  .page-home .header-section-1.is-compact .logo-wrap-2,
  .page-home .header-section-1.is-compact .header-middle,
  .page-home .header-section-1.is-compact .header-bar-3 {
    background: rgba(35, 31, 32, 0.92);
  }
  @media (prefers-reduced-transparency: reduce) {
    .page-home .header-section-1.is-compact .logo-wrap-2,
    .page-home .header-section-1.is-compact .header-middle,
    .page-home .header-section-1.is-compact .header-bar-3 {
      background: #231F20;
    }
  }
  
  /* --- Anchors land below the compact header -------------------------------- */
  html {
    scroll-padding-top: 80px;
  }
  @media (max-width: 1199px) {
    html {
      scroll-padding-top: 72px;
    }
  }
  /* A #hash target inside an AOS block (#contact-form sits in a fade-up
     .contact-form-wrap): the browser would scroll to the block's start
     position, 100px low, and the block then rises past the padding. Skip the
     entrance for the block that holds the target, so the jump uses its real
     position. */
  [data-aos]:target,
  [data-aos]:has(:target) {
    opacity: 1 !important;
    transform: none !important;
  }
  
  /* --- Back to top ------------------------------------------------------------ */
  .back-to-top {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 80;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid #99EF68;
    border-radius: 50%;
    background: #231F20;
    color: #99EF68;
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 8px 20px -10px rgba(35, 31, 32, 0.6);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s,
      background-color 0.2s ease, color 0.2s ease;
  }
  .back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s,
      background-color 0.2s ease, color 0.2s ease;
  }
  .back-to-top:hover {
    background: #99EF68;
    color: #231F20;
  }
  .back-to-top:focus-visible {
    outline: 2px solid #231F20;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px #fff;
  }
  
  /* --- Reduced motion: same logic, no movement ------------------------------ */
  @media (prefers-reduced-motion: reduce) {
    html,
    body {
      scroll-behavior: auto !important;
    }
    .header-section,
    .header-section-1,
    .back-to-top,
    .back-to-top.is-visible {
      transition: none;
    }
  }

  

/* [PEOPLE] Listing, person pages, shared card
   Append to the bottom of static/css/main.css, AFTER running
   .playwright-mcp\people-pages-delete.ps1. That script:
     - deletes the theme's volunteer rules no template uses any more
       (.volunteer-card, .volunteer-detail-card, .volunteer-detail-content)
       and the already-unused .volunteer-form-content, .volunteer-cta-wrap,
       .become-volunteer-card and .donate-us-card blocks;
     - un-scopes the card and grid rules of "[HOME] Our people: stage 1"
       (.page-home .home-people__list/__card/__media/__img/__body/__name/
       __role/__credential/__link become .home-people__*), so that block is
       the one source for the card on every page. The section and header
       rules there stay .page-home only. The homepage renders unchanged.

   Markup:
     partials/_person_card.html   li.home-people__card (+ --compact), shared by
                                  the homepage, /pages/volunteers and the
                                  person pages' "Other leaders"
     pages/volunteer.html         section.people-index > .people-index__header
                                  (h2#people-index-title, p.people-index__lead)
                                  + ul.home-people__list
     pages/volunteerDetails.html  section.person-profile > .person-profile__layout
                                    .person-profile__aside  img + a.person-profile__linkedin
                                    .person-profile__main   dl.person-facts, h2, .person-profile__text
                                  + .person-others (h2, ul.home-people__list.person-others__list)
   The banner h1 is the person's name; the role is the banner meta line.

   Person page layout: two columns from 992 (as the siding pages), portrait
   column 320px, gap 48 (60 from 1400), top-aligned, portrait sticky at
   top: 88px (compact header 64 + 24). One column below 992: portrait,
   LinkedIn, facts, profile, other leaders.

   Portrait: 320x400 (4:5, cover, top-centred), no frame. The source is
   298x345, so that is a 1.16x upscale (the homepage cards run about 1.13x
   at 1440). Stage 2 takes it to 400px when 800x1000 sources arrive.

   Other leaders: compact cards (photo 112px on the left) at every width,
   3 columns from 992, 1 below. Photos stay at or under their own size.

   Type: h2 32 / 28 below 992 / 24 below 768, #007749, as the siding pages.
   Body 17px / 1.7, #4A4A46, 68ch.
   Contrast on #fff: #231F20 16.3:1; #4A4A46 8.9:1; #007749 (h2, links,
   focus ring) 5.6:1. The #99EF68 tick is decorative.
   ===================================================================== */

/* --- Shared card ------------------------------------------------------- */
/* The homepage sets --people-muted on its section; the card needs it on
   every page. Same value, so the homepage is unchanged. */
.home-people__list {
  --people-muted: #4A4A46;
}

/* Compact: the homepage's below-576 row layout, at every width */
.home-people__card--compact {
  flex-direction: row;
}
.home-people__card--compact .home-people__media {
  flex: 0 0 112px;
  border-radius: 9px 0 0 9px;
}
.home-people__card--compact .home-people__img {
  height: 100%;
  min-height: 140px;                /* 4:5 at 112px; taller rows crop from the top */
  aspect-ratio: auto;
}
.home-people__card--compact .home-people__body {
  min-width: 0;
  padding: 14px 16px 4px;
}
.home-people__card--compact .home-people__body::before {
  margin-bottom: 10px;
}
.home-people__card--compact .home-people__name {
  font-size: 18px;
}
.home-people__card--compact .home-people__role,
.home-people__card--compact .home-people__credential {
  font-size: 14px;
}
.home-people__card--compact .home-people__credential {
  margin-top: 4px;
}
.home-people__card--compact .home-people__link {
  padding-top: 4px;
}

/* --- Shared h2 on both pages: clearly below the 52px banner h1 ----------- */
.people-index .common-title h2,
.person-profile__heading {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #007749;
}
@media (max-width: 991.98px) {
  .people-index .common-title h2,
  .person-profile__heading {
    font-size: 28px;
  }
}
@media (max-width: 767.98px) {
  .people-index .common-title h2,
  .person-profile__heading {
    font-size: 24px;
  }
}

/* --- Listing (/pages/volunteers) -------------------------------------- */
.people-index__header {
  max-width: 720px;
  margin-bottom: 40px;
}
.people-index .common-title {
  text-align: left;                 /* the theme centres it; the lead and grid start at the left edge */
}
.people-index__lead {
  margin: 16px 0 0;
  color: var(--title-color);
  font-size: 17px;
  line-height: 1.7;
}
@media (max-width: 767.98px) {
  .people-index__header {
    margin-bottom: 32px;
  }
  .people-index__lead {
    font-size: 16px;
    line-height: 1.6;
  }
}

/* --- Person page: layout ------------------------------------------------ */
.person-profile__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
@media (min-width: 992px) {
  .person-profile__layout {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    align-items: start;
    gap: 48px;
  }
  .person-profile__aside {
    position: sticky;
    top: 88px;                      /* compact header 64 + 24 */
  }
}
@media (min-width: 1400px) {
  .person-profile__layout {
    gap: 60px;
  }
}

/* --- Person page: portrait and LinkedIn -------------------------------- */
.person-profile__img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: 10px;
  background-color: var(--light-color);
}
.person-profile__linkedin {
  margin-top: 12px;
}
.person-profile__linkedin i {
  font-size: 18px;                  /* the brand mark, not the arrow size */
}
.person-profile__linkedin:hover i {
  transform: none;                  /* .services-link nudges an arrow; this is a logo */
}

/* --- Person page: facts ------------------------------------------------- */
.person-facts {
  margin: 0 0 40px;
  border-top: 1px solid color-mix(in srgb, var(--theme-color) 12%, transparent);
}
.person-facts__row {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 4px 24px;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-color) 12%, transparent);
}
.person-facts dt {
  color: var(--theme-color);
  font-family: var(--dm-sans-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.person-facts dd {
  margin: 0;
  color: #4A4A46;
  font-size: 16px;
  line-height: 1.5;
}
.person-facts__item {
  display: block;
}
.person-facts__item + .person-facts__item {
  margin-top: 4px;
}
@media (max-width: 575.98px) {
  .person-facts__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Person page: profile text ------------------------------------------ */
.person-profile__heading {
  margin: 0 0 16px;
}
.person-profile__text p {
  max-width: 68ch;                  /* about 70 characters a line */
  margin: 0 0 16px;
  color: #4A4A46;
  font-size: 17px;
  line-height: 1.7;
}
.person-profile__text p:last-child {
  margin-bottom: 0;
}

/* --- Person page: other leaders ---------------------------------------- */
.person-others {
  margin-top: 64px;
}
.person-others .person-profile__heading {
  margin-bottom: 24px;
}
.person-others .person-others__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 991.98px) {
  .person-others .person-others__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}
@media (max-width: 767.98px) {
  .person-others {
    margin-top: 48px;
  }
}


/* [HOME] CSR: stage 1
   Append to the bottom of static/css/main.css, AFTER running
   .playwright-mcp\home-csr-delete.ps1. That script removes the theme's
   "17 Completed project Css" section (.completed-project-top/-bottom,
   .csr-lead, .csr-stat(s), .csr-card-logo, .csr-card-wrapper, .project-card
   and the already-unused .project-card-2, .completed-project-slider-active(-2),
   .details-btn-2, .project-pagination and .completed-project-2 rules).

   Markup (templates/home/index.html, section.home-csr#csr):
     .home-csr__header (eyebrow, h2#home-csr-title, p.home-csr__lead)
     ul.home-csr__list > li.home-csr__card
       .home-csr__media > img.home-csr__logo        (decorative, alt="", aria-hidden)
       .home-csr__body  > p.home-csr__kind + h3.home-csr__title + p.home-csr__text
                          + dl.home-csr__stats (optional)
                          + a.services-link.home-csr__link (new tab, named for
                            screen readers)
     p.home-csr__tagline > span.home-csr__tagline-hash + "StrongerTogether"
                          (the CEO's tagline for Barberry, closing the band)
   Data: views/csrData.py CSR_INITIATIVES. No script and no AOS: the band is
   static and never moves. id="csr" is the footer's "CSR initiatives" target.

   Layout: a solid #231F20 band (no gradient, no shapes), header left-aligned
   at 720px with the lead at 64ch. Cards: 3 columns from 992, logo-left rows
   (logo tile 220px) at 576-991, stacked below 576. White cards in the shared
   people/ops language: radius 10, the #99EF68 tick, Outfit 20/600 h3, DM Sans
   body, figures in #007749, one link pinned to the bottom so the links sit on
   one line across a row. Stage 1 shows partner logos on a white tile with a
   hairline below it (on the left in rows): two of the logo files have opaque
   white grounds, so a tinted tile would box them. Stage 2 swaps in photos.

   Tagline: Outfit 600 20px (18 below 768), white, 0.02em, left-aligned with
   the header, 40px below the cards (32 below 768); the "#" in #99EF68.

   Spacing: band 100 top and bottom (80 below 768). "Our people" keeps its
   p-b-100 / p-b-xs-80 above; Testimonials is now p-t-100 / p-t-xs-80 below.

   Contrast on #231F20: #fff eyebrow and h2 16.3:1; lead
   rgba(255,255,255,.8) 10.7:1; tagline #fff 16.3:1 and its "#" #99EF68
   11.6:1; the #99EF68 icon is decorative. In the white
   card: #231F20 (h3) 16.3:1; #4A4A46 (kind, text, labels) 8.9:1; #007749
   (figures, link, focus ring) 5.6:1. The logos are decorative.
   ===================================================================== */

/* --- Band and header -------------------------------------------------- */
.page-home .home-csr {
  padding: 100px 0;
  background-color: var(--theme-color);
}
.page-home .home-csr__header {
  max-width: 720px;
  margin-bottom: 40px;
}
.page-home .home-csr .common-subtitle {
  margin-bottom: 16px;
  color: var(--white-color);
}
.page-home .home-csr .common-subtitle span {
  color: var(--white-color);
}
.page-home .home-csr .common-subtitle i {
  font-size: 20px;
  color: var(--theme-shade-color);
  margin-right: 8px;
}
.page-home .home-csr .common-title {
  text-align: left;                 /* the theme centres it; the lead and cards start at the left edge */
}
.page-home .home-csr .common-title h2 {
  color: var(--white-color);
  letter-spacing: -0.015em;
}
.page-home .home-csr__lead {
  max-width: 64ch;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 17px;
  line-height: 1.7;
}

/* --- Grid: 3 from 992, rows at 576-991, stacked below 576 ---------------- */
.page-home .home-csr__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 992px) and (max-width: 1399.98px) {
  .page-home .home-csr__list {
    gap: 20px;
  }
}

/* --- Card: white, logo tile on top, body a flex column ------------------- */
.page-home .home-csr__card {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background-color: var(--white-color);
}
.page-home .home-csr__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  padding: 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-color) 12%, transparent);
  border-radius: 10px 10px 0 0;
  background-color: var(--white-color);   /* two of the logo files have opaque white grounds */
}
.page-home .home-csr__logo {
  display: block;
  width: auto;
  max-width: 200px;
  height: auto;
  max-height: 64px;
}
.page-home .home-csr__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 24px 12px;
}
/* Tick: the proof bar's accent, as on the people cards */
.page-home .home-csr__body::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 16px;
  border-radius: 2px;
  background-color: var(--theme-shade-color);
}
.page-home .home-csr__kind {
  margin: 0 0 4px;
  color: #4A4A46;
  font-family: var(--dm-sans-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.page-home .home-csr__title {
  margin: 0 0 8px;
  color: var(--theme-color);
  font-family: var(--outfit-font);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.page-home .home-csr__text {
  margin: 0;
  color: #4A4A46;
  font-family: var(--dm-sans-font);
  font-size: 15px;
  line-height: 1.6;
}

/* --- Figures: value above label; dt stays first in the source ------------ */
.page-home .home-csr__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 16px 0 0;
}
.page-home .home-csr__stats div {
  display: flex;
  flex-direction: column-reverse;
}
.page-home .home-csr__stats dt {
  color: #4A4A46;
  font-family: var(--dm-sans-font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}
.page-home .home-csr__stats dd {
  margin: 0;
  color: var(--theme-color-3);
  font-family: var(--outfit-font);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}

/* --- Link: always visible, 44px tall (from .services-link) ---------------- */
.page-home .home-csr__link {
  margin-top: auto;                 /* pinned to the bottom of the card */
  padding-top: 16px;
}
.page-home .home-csr__link:hover i {
  transform: translate(2px, -2px);  /* the external arrow points up and right */
}
.page-home .home-csr__link:focus-visible {
  outline: 2px solid var(--theme-color-3);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .page-home .home-csr__link:hover i {
    transform: none;
  }
}

/* --- Tagline: closes the band, on the header's left edge ----------------- */
.page-home .home-csr__tagline {
  margin: 40px 0 0;
  color: var(--white-color);
  font-family: var(--outfit-font);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.page-home .home-csr__tagline-hash {
  color: var(--theme-shade-color);
}

/* --- 576-991: one column of rows, logo tile on the left ------------------- */
@media (max-width: 991.98px) {
  .page-home .home-csr__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .page-home .home-csr__card {
    flex-direction: row;
  }
  .page-home .home-csr__media {
    flex: 0 0 220px;
    height: auto;
    border-right: 1px solid color-mix(in srgb, var(--theme-color) 12%, transparent);
    border-bottom: 0;
    border-radius: 10px 0 0 10px;
  }
}

/* --- Below 768: tighter band and header ---------------------------------- */
@media (max-width: 767.98px) {
  .page-home .home-csr {
    padding: 80px 0;
  }
  .page-home .home-csr__header {
    margin-bottom: 32px;
  }
  .page-home .home-csr__lead {
    font-size: 16px;
    line-height: 1.6;
  }
  .page-home .home-csr__tagline {
    margin-top: 32px;
    font-size: 18px;
  }
}

/* --- Below 576: stacked, shorter logo tile -------------------------------- */
@media (max-width: 575.98px) {
  .page-home .home-csr__media {
    height: 112px;
  }
  .page-home .home-csr__body {
    padding: 16px 16px 8px;
  }
}


/* [HOME] Testimonials: stage 1
   Append to the bottom of static/css/main.css. It deletes nothing (no delete
   script this stage) and keeps the theme's look: the Swiper "cards" stack,
   the #007749 cards and the two-column layout. The theme rules it overrides
   stay in "16 Testimonial Css" for now; the ones the markup no longer uses
   are listed at the end of this comment for the homepage clean-up.

   Markup (templates/home/index.html, section.testimonial,
   aria-labelledby="home-testimonials-title"):
     .testimonial__layout                       (grid; replaces .row/.col-xl-*)
       .testimonial-content    eyebrow, h2#home-testimonials-title
                               ("What our clients [quote icon] say", icon
                               aria-hidden), .text > p (the lead)
       .testimonial__controls  button.testimonial__prev, button.testimonial__next,
                               button.testimonial__autoplay (aria-pressed),
                               p.testimonial__counter[aria-hidden] "01 / 04"
       .testimonial-slider-active > .swiper > .swiper-wrapper
         > .swiper-slide x4 > .testimonial-card
             .thumb > img (alt="", 828x600, lazy)
             .card-content > .review > p          (quote, verbatim)
                           + .author-details > p.author-name + p.author-role
   No heading below the h2, no AOS. Script: static/js/script.js
   "11 Testimonial Slider Active JS" (autoplay 7 s, pause on hover and focus,
   pause/play button, arrow keys while focus is in the slider or controls,
   inactive cards aria-hidden + inert, reduced motion = no autoplay, speed 0).

   1. Layout: ONE set of controls. From 1200px a 1fr / 2fr grid (24px gap):
      the intro and the controls sit in the left column, centred as a pair
      against the stack (empty 1fr rows above and below). Below 1200px one
      column: intro, cards, then the controls centred under the front card.
      The controls come before the slider in the source, so Tab goes
      previous, next, pause on every width.
   2. Controls: the "Our operations" sidings controls (44px circles, 1px
      #231F20 border, white, hover fills #231F20, #007749 focus ring) and a
      counter in Outfit 500 16px, tabular figures.
   3. Cards: all four the height of the tallest (slides stretch, the card
      fills the slide), so the stack never jumps. A 32x3 #99EF68 tick tops
      the text column, as on the CSR and proof-bar items (a pseudo-element,
      so nothing for screen readers). Name Outfit 600 20/32, role Outfit 400
      16 (was an h6 at 200).
   4. Logo tiles: one treatment for all four. White, 24px padding (20 below
      768), 16px radius (the card's), logo centred with object-fit: contain.
      828x600 tile ratio from 768 (300px wide, 250 at 768-991 and 1200-1399,
      as the theme), 2:1 and full width below 768 so a phone card is not
      mostly logo. The logo FILES still carry uneven baked-in margins, and
      testimon_3.webp (Liberty Coal) is a white logo on a #808080 plate,
      which shows as a grey box inside the white tile until Stage 2 trims it.
   5. Ghost cards: the cards behind the front one show only their tinted
      plate. Their logo and text fade out (opacity, then visibility, so no
      clipped words), and fade in on the new front card. No fade under
      reduced motion.
   6. Soft text on the front card was the 3D transform, not CSS: with
      fractional slide sizes (slidesPerView 1.3) the front card kept a
      -0.02px Z offset under Swiper's 1200px perspective and was resampled.
      Fixed in the script with roundLengths: true (whole-pixel sizes, Z 0).

   Spacing: section keeps p-t-100 / p-t-xs-80, Partners keeps its p-t-80.
   Below 1200: 40px intro to cards, 32px cards to controls.

   Contrast: #fff on #007749 5.6:1 and #F5F5F5 (--light-color: quote, name,
   role) on #007749 5.2:1, both AA for body text. Lead #4A4A46 on white
   8.9:1 (the site's body-text neutral; there is no token for it). Controls
   and counter #231F20 on white 16.3:1. The #99EF68 tick (4.0:1 on #007749)
   is decorative. Ghost plates carry no text (#F5F5F5 on a ghost plate
   would be 2.9:1).

   Dead theme rules after this stage (line numbers in main.css at
   commit 04cbb55), for the later homepage clean-up:
     8366-8433  .testimonial .reviews, .reviews h3 / img / h5 + their media
                queries ("Since 2003" badge, removed)
     8434-8488  .testimonial .review-btn and its span / img (never used)
     8514-8518  .testimonial-card:hover .thumb .video-play-btn (no button)
     8548-8576  .testimonial-card .thumb .video-play-btn (+ :hover)
     8580-8608  .testimonial-card .card-content .rating, p, i, span
                ("Rating 5.0" pill, removed)
     8628-8644  .testimonial-card .card-content .author-details h5, h5 span,
                h6 (now p.author-name / p.author-role, styled below)
     8669-8673  .testimonial-slider-active .swiper-slide-active
                .testimonial-card .thumb .video-play-btn
     20794-20803 the "Since 2003" block inside "[HOME] Proof bar: stage 1"
                (comment + .page-home .testimonial .reviews and .reviews h3)
   ===================================================================== */

/* --- 1. Layout ------------------------------------------------------------ */
.page-home .testimonial .testimonial__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "intro"
    "slider"
    "controls";
}
.page-home .testimonial .testimonial-content {
  grid-area: intro;
  margin-bottom: 40px;
}
.page-home .testimonial .testimonial-slider-active {
  grid-area: slider;
}
.page-home .testimonial .testimonial__controls {
  grid-area: controls;
  justify-content: center;
  margin-top: 32px;
}
@media (min-width: 1200px) {
  .page-home .testimonial .testimonial__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
      ".        slider"
      "intro    slider"
      "controls slider"
      ".        slider";
    column-gap: 24px;
  }
  .page-home .testimonial .testimonial-content {
    margin-bottom: 0;
  }
  .page-home .testimonial .testimonial__controls {
    justify-content: flex-start;
    margin-top: 0;
  }
}

/* Lead: was an inline style="color: black;" */
.page-home .testimonial .testimonial-content .text p {
  color: #4A4A46;
}
@media (min-width: 1200px) {
  .page-home .testimonial .testimonial-content .text {
    margin-bottom: 32px;
  }
}

/* --- 2. Controls (as the "Our operations" sidings controls) ------------- */
.page-home .testimonial .testimonial__controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-home .testimonial .testimonial__nav,
.page-home .testimonial .testimonial__autoplay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--theme-color);
  border-radius: 50%;
  background-color: var(--white-color);
  color: var(--theme-color);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.page-home .testimonial .testimonial__autoplay {
  font-size: 15px;
}
.page-home .testimonial .testimonial__nav:hover,
.page-home .testimonial .testimonial__autoplay:hover {
  background-color: var(--theme-color);
  color: var(--white-color);
}
.page-home .testimonial .testimonial__nav:focus-visible,
.page-home .testimonial .testimonial__autoplay:focus-visible {
  outline: 2px solid var(--theme-color-3);
  outline-offset: 2px;
}
.page-home .testimonial .testimonial__counter {
  margin: 0 0 0 8px;
  font-family: var(--outfit-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--theme-color);
  white-space: nowrap;
}

/* --- 3. Cards: equal height, tick, name and role ------------------------- */
.page-home .testimonial .testimonial-slider-active .swiper-slide {
  height: auto;
}
.page-home .testimonial .testimonial-card {
  height: 100%;
}
.page-home .testimonial .testimonial-card .card-content::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 20px;
  border-radius: 2px;
  background-color: var(--theme-shade-color);
}
.page-home .testimonial .testimonial-card .author-name {
  margin: 0;
  font-family: var(--outfit-font);
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
  color: var(--light-color);
}
.page-home .testimonial .testimonial-card .author-role {
  margin: 0;
  font-family: var(--outfit-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--light-color);
}

/* --- 4. Logo tiles ------------------------------------------------------- */
.page-home .testimonial .testimonial-card .thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  aspect-ratio: 828 / 600;
  padding: 24px;
  border-radius: 16px;
  background-color: var(--white-color);
}
.page-home .testimonial .testimonial-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}
@media (max-width: 767px) {
  .page-home .testimonial .testimonial-card .thumb {
    aspect-ratio: 2 / 1;
    padding: 20px;
  }
}

/* --- 5. Ghost cards: plate only ------------------------------------------ */
.page-home .testimonial .testimonial-slider-active .testimonial-card > * {
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}
.page-home .testimonial .testimonial-slider-active .swiper-slide:not(.swiper-slide-active) .testimonial-card > * {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
@media (prefers-reduced-motion: reduce) {
  .page-home .testimonial .testimonial-slider-active .testimonial-card > *,
  .page-home .testimonial .testimonial-slider-active .swiper-slide:not(.swiper-slide-active) .testimonial-card > * {
    transition: none;
  }
  .page-home .testimonial .testimonial__nav,
  .page-home .testimonial .testimonial__autoplay {
    transition: none;
  }
}




/* [HOME] Partner logos: stage 1
   Append to the bottom of static/css/main.css. It deletes nothing (no delete
   script this stage) and keeps the theme's look and motion: the
   line | heading | line title and the CSS marquee from "14 Partners Css".
   The theme rules it overrides stay there for now; the dead ones are listed
   at the end of this comment for the homepage clean-up.

   Markup (templates/home/index.html, section.major-partners,
   aria-labelledby="home-partners-title"; no AOS):
     .partners-title  .line-right > img (shape-4, decorative)
                      h2#home-partners-title "Who counts on us"
                      .line > img
     .row > .col-xl-12
       .partner-marquee
         ul.partner-marquee-layout[role=list]           first track
           li.partner-1 > img (alt = company name, 110x69, lazy)
         ul.partner-marquee-layout[aria-hidden=true]    copy for the loop, alt=""
       .partners__controls > button.partners__autoplay (aria-pressed)
   Logos and order: views/partnerData.py PARTNERS. Script: static/js/script.js
   "11a Partner Logos JS" (toggles .is-paused, label, aria-pressed, icon).

   1. Title: an h2 now (was an h3 under the Testimonials h2), sentence case,
      same sizes as the theme h3. The theme capped the heading box at 200px
      (992-1199) and 220px (1200-1399) while the text stayed nowrap, so the
      text ran 5px (1100) and 17px (1280, 1366) into the right rule. The box
      now fits the text and the rules take the rest. The rule images are
      530x1, so at 375 they were scaled to 0.1px tall; they are now 1px.
   2. Marquee: one loop is 30s (was 20s), about 45px/s with six 224px tiles.
      Below 576px the tiles are 168px a step, so 22s keeps the same speed.
      It pauses on hover, while focus is anywhere in the section (the pause
      button), and with the button (.is-paused). Edge fade instead of the
      hard cut at the container edges.
   3. Tiles: the theme tile, quieter, in line with the Testimonials plates:
      white, 1px rgba(0,119,73,.35) border (was 2px #007749), 16px radius
      (was 8px), 200x112 with a 24px step (152x88 and 16px below 576px).
      Logos are never scaled up: the files are 110x69, so they render at
      110x69 from 576px and shrink to fit (96x60) below.
   4. Pause button: as the Testimonials autoplay button (44px circle).
   5. Reduced motion: no animation, no edge fade, the copy track and the
      button hidden; the first track wraps into a centred grid.

   Spacing (template): section p-t-100 p-b-100 / p-t-xs-80 p-b-xs-80, row
   p-t-60 p-b-0, so the contact section starts 100px (80px on phones) below
   the pause button.

   Contrast on #fff: #007749 heading 5.6:1; #007749 button icon and border
   5.6:1 (UI 3:1 needed). The tile border is decorative (tiles are not
   interactive).

   Dead theme rules (main.css at commit 33e2693), for the later clean-up:
     7769-7824  .major-partners .partners-title-2 (+ h3, lines, media queries)
     7825-7830  .major-partners.style-2, .major-partners.style-3
     7845-7901  .partner-2 (+ :hover, .logo-1, .logo-2)
     7903-7916  .partner-3 (+ :hover)
     7937-7946  .partner-marquee .partner-marquee-layout .partner-2 / .partner-3
     7712-7749  .major-partners .partners-title h3 (+ media queries): the
                heading is an h2 now, styled below
   ===================================================================== */

/* --- 1. Title ------------------------------------------------------------- */
.page-home .major-partners .partners-title h2 {
  flex: none;
  width: auto;
  max-width: none;
  margin: 0;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--theme-color-3);
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 1399px) {
  .page-home .major-partners .partners-title h2 { font-size: 32px; }
}
@media (max-width: 1199px) {
  .page-home .major-partners .partners-title h2 { font-size: 28px; }
}
@media (max-width: 991px) {
  .page-home .major-partners .partners-title h2 { font-size: 26px; }
}
@media (max-width: 767px) {
  .page-home .major-partners .partners-title h2 { font-size: 24px; }
}
.page-home .major-partners .partners-title .line-right,
.page-home .major-partners .partners-title .line {
  flex: 1 1 0;
  width: auto;
  min-width: 32px;
}
.page-home .major-partners .partners-title .line-right img,
.page-home .major-partners .partners-title .line img {
  height: 1px;
}

/* --- 2. Marquee: speed, edge fade, pause --------------------------------- */
.page-home .major-partners .partner-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.page-home .major-partners .partner-marquee .partner-marquee-layout {
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-animation-duration: 30s;
          animation-duration: 30s;
}
@media (max-width: 575px) {
  .page-home .major-partners .partner-marquee .partner-marquee-layout {
    -webkit-animation-duration: 22s;
            animation-duration: 22s;
  }
}
.page-home .major-partners .partner-marquee:hover .partner-marquee-layout,
.page-home .major-partners:focus-within .partner-marquee-layout,
.page-home .major-partners .partner-marquee.is-paused .partner-marquee-layout {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

/* --- 3. Tiles ------------------------------------------------------------- */
.page-home .major-partners .partner-marquee .partner-1 {
  width: 200px;
  max-width: none;
  height: 112px;
  margin: 0 24px 0 0;
  padding: 20px 24px;
  border: 1px solid rgba(0, 119, 73, 0.35);
  border-radius: 16px;
  background-color: var(--white-color);
}
/* Never larger than the file (110x69); shrinks to fit the smaller tile. */
.page-home .major-partners .partner-1 img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
@media (max-width: 575px) {
  .page-home .major-partners .partner-marquee .partner-1 {
    width: 152px;
    height: 88px;
    margin-right: 16px;
    padding: 14px 18px;
  }
}

/* --- 4. Pause button (as the Testimonials autoplay button) --------------- */
.page-home .major-partners .partners__controls {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.page-home .major-partners .partners__autoplay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--theme-color);
  border-radius: 50%;
  background-color: var(--white-color);
  color: var(--theme-color);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.page-home .major-partners .partners__autoplay:hover {
  background-color: var(--theme-color);
  color: var(--white-color);
}
.page-home .major-partners .partners__autoplay:focus-visible {
  outline: 2px solid var(--theme-color-3);
  outline-offset: 2px;
}

/* --- 5. Reduced motion: static grid, one track, no button ---------------- */
@media (prefers-reduced-motion: reduce) {
  .page-home .major-partners .partner-marquee {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .page-home .major-partners .partner-marquee .partner-marquee-layout {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 24px;
    -webkit-animation: none;
            animation: none;
  }
  .page-home .major-partners .partner-marquee .partner-marquee-layout[aria-hidden="true"],
  .page-home .major-partners .partners__controls {
    display: none;
  }
  .page-home .major-partners .partner-marquee .partner-1 {
    margin-right: 0;
  }
}



/* [HOME] Contact form: stage 1
   Append to the bottom of static/css/main.css. It deletes nothing (no delete
   script this stage). The markup moved off the theme classes (.contact-us,
   .contact-form, .form-content*, .input-wrap-3, .shape-7), so the theme rules
   no longer match it; they are listed at the end of this comment for Stage 2.

   Markup (templates/home/index.html, section.home-contact,
   aria-labelledby="home-contact-title"; no AOS):
     .home-contact__photo > img      decorative (alt="", aria-hidden), lazy,
                                     Barberry's locomotive render, overlay
                                     ::before
     .container.home-contact__grid > .home-contact__panel
       h2#home-contact-title, p.home-contact__lead
       form#contact-form (ids, names, data-* hooks, csrf_token,
                          source_page=home and the honeypot unchanged)
         .home-contact__fields  > .home-contact__field (label above input,
                                  .field-error), --wide for the message
                                  (+ p#message-hint), .home-contact__actions
                                  (submit + p.home-contact__privacy)
         .form-success           h3 "Message sent"
       p#home-status.form-message
     .home-contact__grid > .home-contact__aside (after the panel; no
       heading, no links, so it adds nothing to the outline or Tab order):
       p.home-contact__tagline with spans: "SMART Rail" / "in Motion"
       (lime) / #StrongerTogether under a 48x4 lime bar (concept A)
     .home-contact__edge > img     the theme's torn edge (shape-7), decorative
   Script: static/js/script.js "20 Ajax Form", unchanged.

   1. Panel: #231F20 (variant B). Overlay on the photo: rgba(35,31,32) .65
      behind the left-hand block easing to .30 near the card (flat .30 at
      768-991, 0 to .25 top to bottom on phones). Green is the accent only: the #99EF68 submit button, focus ring and
      success tick. The #007749 button fails 3:1 against the panel (2.90:1).
   2. Layout: no negative margin (the theme card rose 20px into Partner
      logos). Section 100px top, 72px bottom. From 992px a grid: tagline
      block left, 600px panel right, 48px apart, centred vertically;
      below 992px the tagline is hidden (the footer follows the card)
      and the panel is centred 768-991. Two columns (name | email, phone | company)
      from 992px, one below. Phones: the photo is a 340px band above the
      card, which overlaps its lower 70px; 48px below the card.
   3. Fields: visible labels above, no placeholders (email shows
      name@company.co.za), the /contact hint under the message, the
      /contact privacy line under the button.
   4. States: focus = #99EF68 border and 2px #99EF68 outline (outline so it
      survives forced colours); invalid = 2px #FFB4A8 border, no outline.
      Invalid and focused shows both. Disabled (sending) button at 70%.
   5. Autofill keeps the dark field and white text. Reduced motion: no
      transitions here, including the button's hover sweep.

   Contrast on #231F20 (WCAG AA; all pass):
     heading, labels, field text (on #2E2A2B)      #FFFFFF  16.30 / 14.17:1
     lead, hint, privacy, success text             #D6D6D1  11.18:1
     placeholder on #2E2A2B                        #A3A29C   5.54:1
     field border (UI, 3:1)                        #8A8687   4.53:1
     submit #99EF68 against the panel; its text    #231F20  11.57:1
     focus ring, success tick                      #99EF68  11.57:1
     errors and invalid border                     #FFB4A8   9.58:1
   Left-hand block over the photo (worst case: brightest backdrop pixel
   under the text, .65 overlay, 1024-2200px):
     "SMART Rail" (large, 50-68px)               #FFFFFF    5.78:1  (needs 3:1)
     "in Motion" (large)                         #99EF68    3.89:1  (needs 3:1)
     #StrongerTogether (18px, 90% white)         #FFFFFF    4.63:1  (needs 4.5:1)

   Stage 2 deletes from main.css (bottom-up; numbers as of commit 69c8586,
   before this snippet is appended):
     1. lines 19564-19573  .contact-us bottom padding (in the footer block)
     2. lines 19279-19300  homepage success panel (.contact-us .contact-form)
     3. lines 19169-19208  homepage form overrides (.contact-us .contact-form)
     4. lines 7969-8132    .contact-us, .shape-6 (already dead), .shape-7,
                           the .contact-form theme card and .shape (dead)
   Keep: the "15 Contact Us Css" comment (7968), .form-message base rules
   (8134-8144, shared with /contact) and the shared success panel
   (19226-19247). Optional, already dead theme blocks: 14069-14186
   (.contact-form-3) and 8146-8357 (.contact-us-2, .contact-form-2).
   ===================================================================== */

   .page-home .home-contact {
    --hc-text: #D6D6D1;
    --hc-field: #2E2A2B;
    --hc-border: #8A8687;
    --hc-placeholder: #A3A29C;
    --hc-error: #FFB4A8;
    position: relative;
    isolation: isolate;
    padding: 100px 0 72px;
    overflow-x: clip;
  }
  
  /* --- Photo, overlay and torn edge -------------------------------------- */
  .page-home .home-contact__photo {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
  }
  .page-home .home-contact__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Cab first: the photo is scaled by the section height (about 1.37x from
       992px), so a fixed offset pushes the logo (and the garbled lettering
       under it) off the left edge and keeps the cab front left of the card;
       max() with 100% stops the offset from opening a gap on the right on very
       wide screens. */
    object-position: max(-600px, 100%) 50%;
  }
  .page-home .home-contact__photo::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Dark behind the left-hand block (left third), easing toward the card so
       the locomotive still reads. Phones override this below. */
    background: linear-gradient(90deg,
      rgba(35, 31, 32, 0.65) 0%,
      rgba(35, 31, 32, 0.65) 35%,
      rgba(35, 31, 32, 0.30) 60%,
      rgba(35, 31, 32, 0.30) 100%);
  }
  .page-home .home-contact__edge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    line-height: 0;
    pointer-events: none;
  }
  .page-home .home-contact__edge img {
    display: block;
    width: 100%;
    height: auto;
  }
  
  /* --- Panel -------------------------------------------------------------- */
  .page-home .home-contact__panel {
    position: relative;
    max-width: 600px;
    margin: 0 0 0 auto;
    padding: 48px;
    background: var(--theme-color);
    border-radius: 12px;
    box-shadow: 0 24px 48px -20px rgba(35, 31, 32, 0.45);
  }
  .page-home .home-contact__title {
    margin: 0 0 12px;
    font-size: clamp(1.625rem, 1.2rem + 1.1vw, 2.25rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--white-color);
  }
  .page-home .home-contact__lead {
    max-width: 46ch;
    margin: 0 0 28px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--hc-text);
  }
  
  /* --- Left-hand block, concept A: brand statement ------------------------
     From 992px, left of the card and after it in the DOM. One <p> with spans,
     not a heading; no links. The headline is large text (3:1), so the left
     overlay is lighter than concept B's .75; .55 was tried and fails at 1920+
     (lime 2.89:1, tag 3.30:1), so .65. The 18px tag is normal text (4.5:1),
     hence 90% white rather than 85%. */
  .page-home .home-contact__aside {
    display: none;   /* below 992px the footer follows the card directly */
  }
  .page-home .home-contact__tagline {
    margin: 0;
    font-family: var(--outfit-font);
    font-size: clamp(3rem, 0.25rem + 4.5vw, 4.25rem);   /* 50px at 1024, 62 at 1280, 68 at 1440 */
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--white-color);
  }
  .page-home .home-contact__tagline-line {
    display: block;
    white-space: nowrap;
  }
  .page-home .home-contact__tagline-accent {
    color: var(--theme-shade-color);
  }
  .page-home .home-contact__tagline-tag {
    display: block;
    margin-top: 28px;
    font-family: var(--dm-sans-font);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.9);
  }
  .page-home .home-contact__tagline-tag::before {   /* the 48x4 lime bar */
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    margin-bottom: 20px;
    border-radius: 2px;
    background: var(--theme-shade-color);
  }
  
  /* --- Fields ------------------------------------------------------------- */
  .page-home .home-contact__fields:not([hidden]) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .page-home .home-contact__label {
    display: block;
    margin: 0 0 6px;
    font-family: var(--dm-sans-font);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--white-color);
  }
  .page-home .home-contact input:not([type="hidden"]),
  .page-home .home-contact textarea {
    display: block;
    width: 100%;
    padding: 11px 14px;
    font-family: var(--dm-sans-font);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--white-color);
    background: var(--hc-field);
    border: 1px solid var(--hc-border);
    border-radius: 8px;
    transition: border-color 0.15s ease, outline-color 0.15s ease;
  }
  .page-home .home-contact textarea {
    height: 128px;
    resize: vertical;
  }
  .page-home .home-contact input::placeholder,
  .page-home .home-contact textarea::placeholder {
    color: var(--hc-placeholder);
    opacity: 1;
  }
  /* :focus, not :focus-visible: a text field always shows where the caret is,
     also when script moves focus there after a click (first invalid field). */
  .page-home .home-contact input:not([type="hidden"]):focus,
  .page-home .home-contact textarea:focus {
    border-color: var(--theme-shade-color);
    outline: 2px solid var(--theme-shade-color);
    outline-offset: 2px;
  }
  .page-home .home-contact input[aria-invalid="true"],
  .page-home .home-contact textarea[aria-invalid="true"] {
    border: 2px solid var(--hc-error);
    padding: 10px 13px;   /* keeps the box size with the 2px border */
  }
  .page-home .home-contact input[aria-invalid="true"]:focus,
  .page-home .home-contact textarea[aria-invalid="true"]:focus {
    border-color: var(--hc-error);
  }
  .page-home .home-contact input:-webkit-autofill,
  .page-home .home-contact input:-webkit-autofill:hover,
  .page-home .home-contact input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--white-color);
    -webkit-box-shadow: 0 0 0 1000px var(--hc-field) inset;
    caret-color: var(--white-color);
  }
  .page-home .home-contact__hint,
  .page-home .home-contact__privacy,
  .page-home .home-contact .field-error {
    margin: 6px 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .page-home .home-contact__hint,
  .page-home .home-contact__privacy {
    color: var(--hc-text);
  }
  .page-home .home-contact .field-error {
    font-weight: 600;
    color: var(--hc-error);
  }
  .page-home .home-contact__privacy {
    margin-top: 12px;
  }
  
  /* --- Submit: lime pill, charcoal icon disc, white hover sweep ---------- */
  .page-home .home-contact .e-primary-btn {
    border: 0;
    color: var(--theme-color);
    background: var(--theme-shade-color);
  }
  .page-home .home-contact .e-primary-btn .icon-wrap {
    background: var(--theme-color);
    color: var(--theme-shade-color);
  }
  .page-home .home-contact .e-primary-btn:before {
    background: var(--white-color);
  }
  .page-home .home-contact .e-primary-btn:hover,
  .page-home .home-contact .e-primary-btn:focus-visible {
    color: var(--theme-color);
  }
  .page-home .home-contact .e-primary-btn:hover .icon-wrap {
    background: var(--theme-color);
    color: var(--theme-shade-color);
  }
  .page-home .home-contact .e-primary-btn:focus-visible {
    outline: 2px solid var(--theme-shade-color);
    outline-offset: 3px;
  }
  .page-home .home-contact .e-primary-btn[disabled] {
    opacity: 0.7;
    cursor: progress;
  }
  
  /* --- Status line and success panel (dark card) -------------------------- */
  .page-home .home-contact .form-message {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 600;
  }
  .page-home .home-contact .form-message:not(:empty) {
    margin-top: 16px;
  }
  .page-home .home-contact .form-message.success {
    color: var(--white-color);
  }
  .page-home .home-contact .form-message.error {
    color: var(--hc-error);
  }
  .page-home .home-contact .form-success {
    padding: 32px 24px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
  }
  .page-home .home-contact .form-success__icon {
    color: var(--theme-shade-color);
  }
  .page-home .home-contact .form-success__title {
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--white-color);
  }
  .page-home .home-contact .form-success__text {
    margin: 0 auto 24px;
    max-width: 46ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--hc-text);
  }
  
  /* --- Widths ------------------------------------------------------------- */
  @media (min-width: 992px) {
    .page-home .home-contact__grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
      column-gap: 48px;
      align-items: center;
    }
    .page-home .home-contact__grid > .home-contact__panel {
      grid-column: 2;
      grid-row: 1;
      margin: 0;
    }
    .page-home .home-contact__aside {
      display: block;
      grid-column: 1;
      grid-row: 1;
    }
    .page-home .home-contact__fields:not([hidden]) {
      grid-template-columns: 1fr 1fr;
      gap: 18px 16px;
    }
    .page-home .home-contact__field--wide,
    .page-home .home-contact__actions {
      grid-column: 1 / -1;
    }
  }
  @media (min-width: 768px) and (max-width: 991px) {
    .page-home .home-contact__photo::before {
      background: rgba(35, 31, 32, 0.30);   /* card centred: no dark side */
    }
    .page-home .home-contact__panel {
      margin: 0 auto;
      padding: 40px;
    }
  }
  @media (max-width: 767px) {
    .page-home .home-contact {
      padding: 270px 0 48px;   /* cab and nose clear the card's top edge */
    }
    .page-home .home-contact__photo {
      bottom: auto;
      height: 340px;
    }
    .page-home .home-contact__photo img {
      object-position: 45% 50%;
    }
    .page-home .home-contact__photo::before {
      background: linear-gradient(180deg, rgba(35, 31, 32, 0) 0%, rgba(35, 31, 32, 0.25) 100%);
    }
    .page-home .home-contact__panel {
      padding: 28px 20px;
    }
    .page-home .home-contact__title {
      font-size: 1.5rem;   /* one line from 360px (26px wrapped at 375) */
    }
  }
  
  /* --- Reduced motion ----------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .page-home .home-contact input:not([type="hidden"]),
    .page-home .home-contact textarea,
    .page-home .home-contact .e-primary-btn,
    .page-home .home-contact .e-primary-btn:before,
    .page-home .home-contact .e-primary-btn .icon-wrap,
    .page-home .home-contact .e-primary-btn .icon-wrap .icon i {
      transition: none;
    }
  }

  

/* [HOME] Partner logos: stage 2
   Append to the bottom of static/css/main.css, after "[HOME] Partner logos:
   stage 1". It adds no rules and deletes nothing: the pause button is gone
   from the markup (templates/home/index.html) and its script block ("11a
   Partner Logos JS") from static/js/script.js, so its stage 1 rules no longer
   match anything.

   Markup now: .row > .col-xl-12 > .partner-marquee (two tracks), no
   .partners__controls. Spacing: the 24px + 44px controls row is gone, so the
   contact section starts 100px (80px on phones) below the tiles.

   Kept from stage 1: hover pause, the :focus-within pause (nothing in the
   section takes focus now, so it never fires; harmless), the edge fade, the
   hidden copy track and the reduced-motion grid.

   Stage 1 header comment, to update in the clean-up: drop the
   .partners__controls line from the markup list and the script reference,
   "the pause button" / "with the button (.is-paused)" from item 2, item 4,
   "and the button" from item 5, and "below the pause button" from Spacing.

   Dead rules in "[HOME] Partner logos: stage 1", for the clean-up:
     §2  the selector .page-home .major-partners .partner-marquee.is-paused
         .partner-marquee-layout (keep the :hover and :focus-within ones)
     §4  .partners__controls, .partners__autoplay, .partners__autoplay:hover,
         .partners__autoplay:focus-visible (the whole section)
     §5  the selector .page-home .major-partners .partners__controls in the
         reduced-motion display:none rule (keep the [aria-hidden] track)
   ===================================================================== */


/* [HOME] Our operations: stage 6 contained row
   Append to the bottom of static/css/main.css, after "[HOME] Our operations:
   stage 5 follow-ups". The sidings row now sits inside the container at every
   width: its right edge is the container's right edge, in line with the
   controls and the progress bar. It deletes nothing.

   1. From 768px: stage 5 §2 ran the row to the section's right edge with a
      negative margin and the same padding back. Both are 0 now, so card widths
      do not change (the two cancelled out).
   2. Below 768: stage 3 ran the row edge to edge (-gutter margin, gutter
      padding). Both are 0 now. Cards are the row less a 16px gap and a 44px
      peek of the next card, capped at 340px:
        414: row 375, card 315    375: row 336, card 276    360: row 320, card 260
      (the row is the container's content box; measured). 260px still holds a
      one-line title, the full copy and the tonnage line; Musina wraps its
      title, as it did before.
   3. Right-edge fade from 768px, as the partner logos: the last 48px fade out
      while there is more to scroll. Off at the end of the row (.is-at-end, set
      by the "Sidings row" script in templates/home/index.html from update()),
      while the row has keyboard focus (so its inset focus ring is not faded),
      under reduced motion, and below 768 (it would hide the peek). Right only:
      the left edge always snaps to a card start.

   Dead rules, for the clean-up:
     "stage 5 follow-ups" §2: the @media (min-width: 768px) .home-ops__row
       margin-right / padding-right (keep .page-home .home-ops
       container-type, the cards use it); its header item 2 is replaced by this.
     "stage 3 design", below 768: .home-ops__row margin-inline, padding-inline,
       scroll-padding-inline, and .home-ops__card width min(82vw, 340px).
   ===================================================================== */

/* --- 1. From 768px: inside the container --------------------------------- */
@media (min-width: 768px) {
  .page-home .home-ops__row {
    margin-right: 0;
    padding-right: 0;
  }
}

/* --- 2. Below 768: inside the container, one card and a 44px peek -------- */
@media (max-width: 767.98px) {
  .page-home .home-ops__row {
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
  .page-home .home-ops__card {
    width: min(calc(100cqi - var(--ops-gap) - 44px), 340px);
  }
}

/* --- 3. Right-edge fade while there is more to scroll -------------------- */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .page-home .home-ops__row:not(.is-at-end):not(:focus-visible) {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  }
}


/* [SITE] Eyebrows: stage 1
   Append to the bottom of static/css/main.css. Every .common-subtitle eyebrow
   (rail icon + label above a section h2) on /, /about, /services and the
   service pages. Same style as before (DM Sans, the rail icon, sentence case),
   made to stand out: larger, darker, a little heavier. It deletes nothing.

   Markup: .common-subtitle > i.fa-light.fa-train-track[aria-hidden] + span.
   The testimonials eyebrow no longer has .bh-title-icon (template), so all
   icons match.

   1. Text: 24px (20px below 768; was 22 / 18 / 16), weight 500 (was 400),
      line height 1.25. Colour #231F20 on light sections. The base rule read
      var(--hr-color), which is #000 (the border colour), so the eyebrows were
      black by accident; the colour is now set here. The span inherits it
      (the theme's .section-top-2 span colour no longer applies).
   2. Dark and green bands: white text on .home-services (green photo),
      .home-csr (#231F20), .about-services and .service-steps (#007749).
   3. Icon: #99EF68, 22px (18px below 768), 10px from the label (the gap
      only; the per-section 8px margins are reset). The label keeps its own
      line breaks: "Corporate social responsibility" fits on one line from
      360px (319 of 336px at 375). "Safety, compliance and community"
      (/about) wraps to two lines below 400px; the icon then sits on the
      first line (flex-start, its line box the label's line height: 30px,
      25px below 768), not centred between the two.

   Contrast: #231F20 on #fff 16.3:1, on #F8F7F0 15.2:1; #fff on #231F20
   16.3:1, on #007749 5.6:1, on the services photo 5.5:1 or more. The lime
   icon is decorative (aria-hidden).

   The extra selectors in 1 and 3 match the per-section rules below, so these
   win without !important; drop them with those rules in the clean-up.

   Dead rules (main.css at commit 1787c39), for the clean-up:
     399-427    in .common-subtitle the align-items, font-size, color and
                line-height declarations (keep display, gap, justify-content,
                margin-bottom), .common-subtitle i, and font-size and
                line-height in the two size media queries (keep their
                margin-bottom: 14px); all restated here. 428-439 stay.
     9253-9255  .section-top-2 .left .common-subtitle span colour
     18253-18257 .common-subtitle .bh-title-icon (keep the .w-title one,
                the footer titles use it)
     18260-18264 .about-intro/.about-how/.about-safety .common-subtitle colour
     18287-18293 .about-services .common-subtitle colour and its i colour
                (keep the .common-title h2 selector)
     18458-18462 .services-overview/.services-cards/.service-detail
                .common-subtitle colour
     18624-18630 .service-steps .common-subtitle colour and its i colour
                (keep the .common-title h2 selector)
     20280-20284 .page-home .home-ops .common-subtitle i
     20950-20954 .page-home .home-people .common-subtitle i
     21643-21654 .page-home .home-csr .common-subtitle colour, its span
                and its i (keep margin-bottom: 16px)
     (19858, 20277, 20947 and 18674 set margin-bottom only; they stay.)
   ===================================================================== */

/* --- 1. Text --------------------------------------------------------------- */
.common-subtitle {
  align-items: flex-start;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  color: #231F20;
}
.common-subtitle span,
.section-top-2 .left .common-subtitle span {
  color: inherit;
}
@media (max-width: 767.98px) {
  .common-subtitle {
    font-size: 20px;
  }
}

/* --- 2. Dark and green bands ------------------------------------------------ */
.home-services .common-subtitle,
.home-csr .common-subtitle,
.about-services .common-subtitle,
.service-steps .common-subtitle {
  color: #fff;
}

/* --- 3. Icon ----------------------------------------------------------------- */
.common-subtitle i,
.page-home .home-ops .common-subtitle i,
.page-home .home-people .common-subtitle i,
.page-home .home-csr .common-subtitle i {
  margin-right: 0;
  font-size: 22px;
  line-height: 30px;                 /* the label's line: 24px x 1.25 */
  color: #99EF68;
}
@media (max-width: 767.98px) {
  .common-subtitle i,
  .page-home .home-ops .common-subtitle i,
  .page-home .home-people .common-subtitle i,
  .page-home .home-csr .common-subtitle i {
    font-size: 18px;
    line-height: 25px;               /* 20px x 1.25 */
  }
}

/* =====================================================================
   [NEWS] Index and post: stage 1
   /news, /news/category/<slug> and /news/<slug> (views/newsViews.py).
   Markup: templates/news/index.html, templates/news/post.html,
   templates/partials/_news_card.html; article HTML from views/newsRender.py
   (.news-figure-row, figure.news-quote, .news-nowrap, .news-ext).
   Base: the Stage 0 mock-up (.playwright-mcp/news-mock/), our card language.

   Colours: --theme-color (charcoal) text and headings, --theme-color-3
   (green) links, h2s, badge and focus, --theme-shade-color (lime) accent only.
   --news-muted is body copy (#4A4A46, as --ops-muted and --people-muted).
   --news-poster is the panel behind hero_fit 'contain' images (posters and
   graphics shown whole): a light warm neutral, so dark posters sit in a clear
   frame and white posters still show their edge.
   Reduced motion: no transitions and no hover movement.
   ===================================================================== */

   .news-index,
   .news-post {
     --news-hairline: color-mix(in srgb, var(--theme-color) 12%, transparent);
     --news-muted: #4A4A46;
     --news-panel: color-mix(in srgb, var(--theme-shade-color) 6%, var(--theme-color-2));
     --news-poster: color-mix(in srgb, var(--theme-color) 8%, var(--theme-color-2));
   }
   
   /* --- Index header: eyebrow, h2, lead ------------------------------------ */
   .news-index__header {
     max-width: 720px;
     margin-bottom: 32px;
   }
   .news-index__header .common-subtitle {
     justify-content: flex-start;
     margin-bottom: 12px;
   }
   .news-index__header .common-title {
     text-align: left;
   }
   .news-index .common-title h2,
   .news-heading {
     font-size: 32px;
     line-height: 1.2;
     letter-spacing: -0.01em;
     color: var(--theme-color-3);
   }
   .news-index__lead {
     margin: 16px 0 0;
     color: var(--title-color);
     font-size: 17px;
     line-height: 1.7;
   }
   @media (max-width: 991.98px) {
     .news-index .common-title h2,
     .news-heading { font-size: 28px; }
   }
   @media (max-width: 767.98px) {
     .news-index .common-title h2,
     .news-heading { font-size: 24px; }
     .news-index__lead { font-size: 16px; line-height: 1.6; }
   }
   
   /* --- Category filter: wrapping pills, 44px tall ------------------------- */
   .news-filter {
     margin-bottom: 40px;
   }
   .news-filter ul {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin: 0;
     padding: 0;
     list-style: none;
   }
   .news-filter a {
     display: inline-flex;
     align-items: center;
     min-height: 44px;
     padding: 0 18px;
     border: 1px solid var(--news-hairline);
     border-radius: 999px;
     background-color: var(--white-color);
     color: var(--theme-color);
     font-size: 15px;
     font-weight: 500;
     line-height: 1.2;
     transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
   }
   .news-filter a:hover {
     border-color: var(--theme-color-3);
     color: var(--theme-color-3);
   }
   .news-filter a[aria-current="page"] {
     border-color: var(--theme-color);
     background-color: var(--theme-color);
     color: var(--white-color);
   }
   .news-filter a:focus-visible {
     outline: 2px solid var(--theme-color-3);
     outline-offset: 2px;
   }
   @media (max-width: 767.98px) {
     .news-filter { margin-bottom: 32px; }
     .news-filter a { padding: 0 14px; font-size: 14px; }
   }
   
   /* --- Grid: 3 from 992, 2 at 576-991, 1 below ---------------------------- */
   .news-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 24px;
     margin: 0;
     padding: 0;
     list-style: none;
   }
   @media (max-width: 991.98px) {
     .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
   }
   @media (max-width: 575.98px) {
     .news-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
   }
   
   /* --- Card: white, 16px radius, hairline; the theme's date badge ---------- */
   .news-card {
     display: flex;
     flex-direction: column;
     border: 1px solid var(--news-hairline);
     border-radius: 16px;
     background-color: var(--white-color);
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
   }
   .news-card:hover {
     border-color: color-mix(in srgb, var(--theme-color) 24%, transparent);
     box-shadow: 0 24px 40px -24px color-mix(in srgb, var(--theme-color) 18%, transparent);
   }
   .news-card__media {
     position: relative;
     border-radius: 15px 15px 0 0;
     background-color: var(--light-color);
   }
   .news-card__frame {
     overflow: hidden;                 /* rounds and clips the photo only */
     border-radius: 15px 15px 0 0;
   }
   .news-card__img {
     display: block;
     width: 100%;
     height: auto;
     aspect-ratio: 3 / 2;
     object-fit: cover;
     transition: transform 0.4s ease;
   }
   .news-card:hover .news-card__img {
     transform: scale(1.04);
   }
   /* Posters and graphics: the whole image, never cropped */
   .news-card--contain .news-card__img {
     object-fit: contain;
     background-color: var(--news-poster);
   }
   .news-card--contain:hover .news-card__img {
     transform: none;
   }
   /* No main photo: a quiet panel with a train icon */
   .news-card__img--none {
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: var(--news-poster);
     color: color-mix(in srgb, var(--theme-color) 35%, transparent);
     font-size: 40px;
   }
   
   /* Date badge: from blog-card-2, straddling the photo's bottom edge.
      Day on top, month and year below (the year always shows). */
   .news-card__date {
     position: absolute;
     right: 20px;
     bottom: 0;
     transform: translateY(50%);
     display: flex;
     flex-direction: column;
     align-items: center;
     min-width: 72px;
     padding: 8px 10px 7px;
     border-radius: 10px;
     background-color: var(--theme-color-3);
     color: var(--white-color);
     text-align: center;
     box-shadow: 0 0 0 4px var(--white-color);
   }
   .news-card__day {
     font-family: var(--outfit-font);
     font-size: 26px;
     font-weight: 600;
     line-height: 1;
   }
   .news-card__month {
     margin-top: 4px;
     font-size: 13px;
     font-weight: 600;
     line-height: 1;
     letter-spacing: 0.02em;
     white-space: nowrap;
   }
   
   .news-card__body {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
     align-items: flex-start;
     padding: 24px 24px 12px;
   }
   .news-card__category {
     margin: 0 96px 10px 0;            /* clears the badge */
     color: var(--theme-color-3);
     font-size: 14px;
     font-weight: 600;
     line-height: 1.4;
   }
   .news-card__title {
     margin: 0 0 10px;
     color: var(--theme-color);
     font-family: var(--outfit-font);
     font-size: 21px;
     font-weight: 600;
     line-height: 1.3;
     letter-spacing: -0.01em;
     text-wrap: balance;
   }
   .news-card__excerpt {
     display: -webkit-box;
     overflow: hidden;
     margin: 0 0 8px;
     color: var(--news-muted);
     font-size: 16px;
     line-height: 1.6;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
   }
   .news-card__link {
     margin-top: auto;
   }
   @media (min-width: 992px) and (max-width: 1199.98px) {
     .news-card__title { font-size: 19px; }
     .news-card__body { padding: 22px 20px 10px; }
   }
   @media (max-width: 767.98px) {
     .news-card__title { font-size: 19px; }
     .news-card__body { padding: 22px 20px 10px; }
   }
   
   /* Compact (More news): no excerpt, smaller title */
   .news-card--compact .news-card__title {
     font-size: 18px;
   }
   .news-card--compact .news-card__body {
     padding: 22px 20px 8px;
   }
   
   /* --- Pager: the theme's project-pagination, 44px squares ---------------- */
   .news-pager {
     margin-top: 48px;
   }
   .news-pager ul {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 8px;
     margin: 0;
     padding: 0;
     list-style: none;
   }
   .news-pager a {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 44px;
     height: 44px;
     padding: 0 12px;
     border: 1px solid var(--news-hairline);
     border-radius: 10px;
     background-color: var(--white-color);
     color: var(--theme-color);
     font-family: var(--outfit-font);
     font-size: 16px;
     font-weight: 500;
     transition: border-color 0.2s ease, color 0.2s ease;
   }
   .news-pager a:hover {
     border-color: var(--theme-color-3);
     color: var(--theme-color-3);
   }
   .news-pager a[aria-current="page"] {
     border-color: var(--theme-color);
     background-color: var(--theme-color);
     color: var(--white-color);
   }
   .news-pager a:focus-visible {
     outline: 2px solid var(--theme-color-3);
     outline-offset: 2px;
   }
   
   /* --- Empty state (the header above stays) ------------------------------- */
   .news-empty {
     max-width: 720px;
     padding: 48px;
     border-radius: 16px;
     background-color: var(--news-panel);
   }
   .news-empty__icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 56px;
     height: 56px;
     margin-bottom: 20px;
     border-radius: 12px;
     background-color: var(--theme-color);
     color: var(--theme-shade-color);
     font-size: 24px;
   }
   .news-empty h3 {
     margin: 0 0 12px;
     color: var(--theme-color);
     font-size: 28px;
     line-height: 1.2;
     letter-spacing: -0.01em;
   }
   .news-empty p {
     max-width: 56ch;
     margin: 0 0 8px;
     color: var(--news-muted);
     font-size: 17px;
     line-height: 1.7;
   }
   @media (max-width: 767.98px) {
     .news-empty { padding: 32px 24px; }
     .news-empty h3 { font-size: 24px; }
     .news-empty p { font-size: 16px; line-height: 1.6; }
   }
   
   /* --- Post: editors' draft preview bar ------------------------------------ */
   .news-preview-bar {
     max-width: 1080px;
     margin: 0 auto 32px;
     padding: 12px 16px;
     border-radius: 10px;
     background-color: var(--theme-shade-color);
     color: var(--theme-color);
     font-size: 16px;
     line-height: 1.5;
   }
   .news-preview-bar a {
     color: var(--theme-color);
     font-weight: 600;
     text-decoration: underline;
     text-underline-offset: 3px;
   }
   .news-preview-bar a:focus-visible {
     outline: 2px solid var(--theme-color);
     outline-offset: 2px;
   }
   
   /* --- Post: hero (16:9; 'contain' shows the whole poster on a panel) ------ */
   .news-post__hero {
     max-width: 1080px;
     margin: 0 auto 56px;
   }
   .news-post__hero img {
     display: block;
     width: 100%;
     height: auto;
     aspect-ratio: 16 / 9;
     object-fit: cover;
     border-radius: 16px;
     background-color: var(--light-color);
   }
   .news-post__hero--contain img {
     object-fit: contain;
     background-color: var(--news-poster);
   }
   @media (max-width: 767.98px) {
     .news-post__hero { margin-bottom: 36px; }
     .news-post__hero img { border-radius: 12px; }
   }
   
   /* --- Post: article column, 680px ------------------------------------------ */
   .news-article {
     max-width: 680px;
     margin: 0 auto;
     font-size: 17px;
   }
   .news-article > p:first-child {
     margin-bottom: 28px;
     color: var(--theme-color);
     font-size: 20px;
     line-height: 1.6;
   }
   .news-article p,
   .news-article li {
     color: var(--news-muted);
     font-size: 17px;
     line-height: 1.7;
   }
   .news-article p {
     margin: 0 0 20px;
   }
   .news-article strong {
     color: var(--theme-color);
   }
   .news-article h2 {
     margin: 48px 0 16px;
     color: var(--theme-color-3);
     font-size: 28px;
     line-height: 1.2;
     letter-spacing: -0.01em;
   }
   .news-article h3,
   .news-article h4 {
     margin: 32px 0 12px;
     color: var(--theme-color);
     font-size: 21px;
     line-height: 1.3;
   }
   .news-article h4 { font-size: 18px; }
   .news-article a {
     color: var(--theme-color-3);
     font-weight: 500;
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-underline-offset: 3px;
   }
   .news-article a:hover {
     text-decoration-thickness: 2px;
   }
   .news-article a:focus-visible {
     outline: 2px solid var(--theme-color-3);
     outline-offset: 2px;
     border-radius: 2px;
   }
   .news-article .news-nowrap {
     white-space: nowrap;
   }
   .news-article a .news-ext {
     margin-left: 3px;
     font-size: 0.75em;
   }
   .news-article img {
     display: block;
     max-width: 100%;
     height: auto;
     border-radius: 12px;
     background-color: var(--news-poster);
   }
   .news-article p:has(> img:only-child) {
     margin: 32px 0;
   }
   .news-article hr {
     margin: 40px 0;
     border: 0;
     border-top: 1px solid var(--news-hairline);
     opacity: 1;
   }
   
   /* Lists: the theme's check-icon list-wrap for ul; plain numbers for ol */
   .news-article ul,
   .news-article ol {
     margin: 0 0 24px;
   }
   .news-article ul {
     padding: 0;
     list-style: none;
   }
   .news-article ol {
     padding-left: 1.4em;
   }
   .news-article ul li {
     position: relative;
     padding-left: 32px;
   }
   .news-article li + li {
     margin-top: 10px;
   }
   .news-article ul li::before {
     content: "\f00c";
     position: absolute;
     left: 0;
     top: 4px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background-color: var(--theme-shade-color);
     color: var(--theme-color);
     font-family: var(--icon-font);
     font-size: 11px;
     font-weight: 900;
     line-height: 1;
   }
   
   /* A plain (unattributed) blockquote stays quiet */
   .news-article blockquote {
     margin: 32px 0;
     padding: 4px 0 4px 20px;
     border-left: 3px solid var(--news-hairline);
   }
   .news-article blockquote p:last-child {
     margin-bottom: 0;
   }
   
   /* Pull quote (figure.news-quote): attributed quotes only */
   .news-article .news-quote {
     position: relative;
     margin: 40px 0;
     padding: 28px 32px 28px 36px;
     border-left: 4px solid var(--theme-shade-color);
     border-radius: 0 16px 16px 0;
     background-color: var(--news-panel);
   }
   .news-article .news-quote::before {
     content: "\f10e";
     position: absolute;
     top: -18px;
     right: 24px;
     color: var(--theme-color-3);
     font-family: var(--icon-font);
     font-size: 32px;
     font-weight: 900;
     line-height: 1;
   }
   .news-article .news-quote blockquote {
     margin: 0;
     padding: 0;
     border: 0;
   }
   .news-article .news-quote blockquote p {
     margin: 0 0 12px;
     color: var(--theme-color);
     font-family: var(--outfit-font);
     font-size: 24px;
     font-weight: 500;
     line-height: 1.4;
     letter-spacing: -0.01em;
   }
   .news-article .news-quote figcaption {
     margin-top: 16px;
     color: var(--news-muted);
     font-size: 15px;
     font-weight: 600;
     line-height: 1.5;
   }
   
   /* Tables and code, should a post use them */
   .news-article table {
     width: 100%;
     margin: 0 0 24px;
     border-collapse: collapse;
     font-size: 16px;
   }
   .news-article th,
   .news-article td {
     padding: 10px 12px;
     border-bottom: 1px solid var(--news-hairline);
     text-align: left;
     vertical-align: top;
   }
   .news-article th {
     color: var(--theme-color);
   }
   .news-article pre {
     overflow-x: auto;
     margin: 0 0 24px;
     padding: 16px;
     border-radius: 10px;
     background-color: var(--theme-color-2);
     font-size: 14px;
   }
   
   @media (max-width: 767.98px) {
     .news-article { font-size: 16px; }
     .news-article > p:first-child { font-size: 18px; }
     .news-article p,
     .news-article li { font-size: 16px; line-height: 1.65; }
     .news-article h2 { margin-top: 40px; font-size: 24px; }
     .news-article .news-quote { padding: 24px 20px 24px 24px; }
     .news-article .news-quote blockquote p { font-size: 20px; }
   }
   
   /* Two-image row (two image-only paragraphs in a row): side by side from
      576px, stacked below. Images keep their own shape (never cropped). */
   .news-figure-row {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     align-items: start;
     gap: 16px;
     margin: 32px 0;
   }
   @media (max-width: 575.98px) {
     .news-figure-row { grid-template-columns: minmax(0, 1fr); }
   }
   
   /* --- Post: footer (share, back) -------------------------------------------- */
   .news-post__footer {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 16px 24px;
     max-width: 680px;
     margin: 48px auto 0;
     padding-top: 24px;
     border-top: 1px solid var(--news-hairline);
     font-size: 17px;
   }
   .news-share {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 8px 12px;
   }
   .news-share__label {
     margin: 0;
     color: var(--theme-color);
     font-size: 16px;
     font-weight: 600;
   }
   .news-share ul {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin: 0;
     padding: 0;
     list-style: none;
   }
   .news-share a {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     min-height: 44px;
     padding: 0 16px;
     border: 1px solid var(--news-hairline);
     border-radius: 999px;
     color: var(--theme-color);
     font-size: 15px;
     font-weight: 500;
     transition: border-color 0.2s ease, color 0.2s ease;
   }
   .news-share a i {
     font-size: 16px;
     color: var(--theme-color-3);
   }
   .news-share a:hover {
     border-color: var(--theme-color-3);
     color: var(--theme-color-3);
   }
   .news-share a:focus-visible {
     outline: 2px solid var(--theme-color-3);
     outline-offset: 2px;
   }
   .news-back i {
     transition: transform 0.2s ease;
   }
   .news-back:hover i {
     transform: translateX(-3px);
   }
   
   /* --- Post: more news (3 cards; 2 at 576-991 with the third hidden) ---------- */
   .news-more {
     margin-top: 80px;
     padding-top: 64px;
     border-top: 1px solid var(--news-hairline);
   }
   .news-more__head {
     display: flex;
     flex-wrap: wrap;
     align-items: baseline;
     justify-content: space-between;
     gap: 8px 24px;
     margin-bottom: 28px;
   }
   .news-more__head .news-heading {
     margin: 0;
   }
   @media (min-width: 576px) and (max-width: 991.98px) {
     .news-more .news-grid > li:nth-child(3) { display: none; }
   }
   @media (max-width: 767.98px) {
     .news-more { margin-top: 56px; padding-top: 48px; }
   }
   
   /* --- Reduced motion: nothing moves ------------------------------------------ */
   @media (prefers-reduced-motion: reduce) {
     .news-card,
     .news-card__img,
     .news-filter a,
     .news-pager a,
     .news-share a,
     .news-back i { transition: none; }
     .news-card:hover .news-card__img,
     .news-back:hover i { transform: none; }
   }
   
   /* =====================================================================
      [SITE] Header: news nav item
      "News" (between Operations and Contact Us) left the homepage overlay
      header (.main-menu-2) 6px between the last link and the call pill at
      1200px. 8px link padding (theme: 10px) at 1200-1399 gives it 29px back.
      The solid inner-page header (.main-menu) keeps 42px at 1200 and needs
      nothing. Both stay on one line at 1200, 1280, 1366 and 1440.
      ===================================================================== */
   @media (min-width: 1200px) and (max-width: 1399.98px) {
     .main-menu-2 ul li a {
       padding: 4px 8px;
     }
   }