@charset "UTF-8";
@import url("bootstrap.min.css");
@import url("../fonts/css/all.min.css");

@import url("magnific-popup.css");
@import url("aos.css");
@import url("nice-select.css");
@import url("odometer.css");
@import url("swiper-bundle.min.css");
@font-face {
  font-family: 'Recoleta';
  src: url('../fonts/webfonts/recoleta-font-family.otf') format('opentype');
}
@font-face {
  font-family: 'satoshi';
  src: url('../fonts/webfonts/Satoshi-Black.otf') format('opentype');
  src: url('../fonts/webfonts/Satoshi-BlackItalic.otf') format('opentype');
  src: url('../fonts/webfonts/Satoshi-Bold.otf') format('opentype');
  src: url('../fonts/webfonts/Satoshi-BoldItalic.otf') format('opentype');
  src: url('../fonts/webfonts/Satoshi-Italic.otf') format('opentype');
  src: url('../fonts/webfonts/Satoshi-Light.otf') format('opentype');
  src: url('../fonts/webfonts/Satoshi-LightItalic.otf') format('opentype');
  src: url('../fonts/webfonts/Satoshi-Medium.otf') format('opentype');
  src: url('../fonts/webfonts/Satoshi-MediumItalic.otf') format('opentype');
  src: url('../fonts/webfonts/Satoshi-Regular.otf') format('opentype');
}
@import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@100..900&display=swap");
/* ==== 
 --------- (1.01) mixins start ---------
 ==== */
/* ==== 
 --------- (1.01) mixins end ---------
 ==== */
/* ==== 
 --------- (1.02) variables start ---------
 ==== */ :root {
  --nunito: "Nunito", sans-serif;
  --nunito-sans: "Nunito Sans", sans-serif;
  --caveat: "Caveat", cursive;
  --outfit: "Outfit", sans-serif;
  --recoleta: "Nunito", sans-serif;
  --satoshi: "Satoshi", sans-serif;
  --kumbh: "Kumbh Sans", sans-serif;
  --template-font: var(--nunito);
  --template-bg: #ffffff;
  --template-color: #2c2c2c;
  --white: #ffffff;
  --black: #000000;
  --primary-color: #046a58;
  --secondary-color: #1b325c;
  --tertiary-color: #046a58;
  --quaternary-color: #00715d;
  --quinary-color: #061408;
  --septenary-color: #0c141f;
  --senary-color: #d9d9d9;
  --hover-color: #6b5103;
  --transition: all 0.5s ease;
  --shadow: 0px 10px 25px 0px rgba(37, 42, 52, 0.08);
  --shadow-secondary: 0px 10px 30px 0px rgba(0, 0, 0, 0.05);
  --shadow-tertiary: 0px 4px 8px 0px rgba(0, 0, 0, 0.07);
  --primary-six: #479F10;
  --primary-six-title: #0B3D19;
  --primary-six-light: #0B3D19;
  --primary-seven-heading: #0E253A;
  --primary-seven-text: #4B5563;
  --primary-seven-body: #fcf8ed;
  --primary-eight: #ED5A2F;
}
.recoleta-font {
  font-family: var(--recoleta);
}
.satoshi-font {
  font-family: var(--satoshi);
}
h3.fw-7 {
  font-size: 21px;
  line-height: 29px;
  padding-bottom: 10px;
}
h3.fw-6 {
  font-size: 21px;
  line-height: 29px;
  padding-bottom: 10px;
}
/* ==== 
 --------- (1.02) variables end ---------
 ==== */
/* ==== 
 --------- (2.01) reset styles start ---------
 ==== */
* {
  margin: 0px;
  padding: 0px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
*::-moz-selection {
  color: #ffffff;
  background-color: #1770c8;
}
*::selection {
  color: #ffffff;
  background-color: #1770c8;
}
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}
body {
  font-family: var(--template-font);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: #fef6f3;
  background-color: var(--template-bg);
  overflow-x: clip;
  text-transform: none;
}
body::-webkit-scrollbar {
  width: 5px;
}
body::-webkit-scrollbar-track {
  background-color: #b5c8d4;
  border-radius: 5px;
}
body::-webkit-scrollbar-button, body::-webkit-scrollbar-thumb {
  background-color: #076051;
  border-radius: 5px;
}
.body-active {
  height: 100vh;
  overflow: clip;
}
button {
  background-color: transparent;
  border: 0px;
  outline: 0px;
}
a, button {
  text-decoration: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  outline: 0px;
  border: 0px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  cursor: pointer;
  color: var(--template-color);
}
a i, a span, button i, button span {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
a:hover, button:hover {
  text-decoration: none;
  border: 0px;
  outline: 0px;
}
a:focus, button:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: 0px;
}
ul, ol {
  list-style-type: none;
  list-style-position: inside;
  margin: 0px;
  padding: 0px;
}
hr, blockquote, textarea {
  margin: 0px;
  opacity: 1;
}
input, textarea {
  border: 0px;
  outline: 0px;
}
input:focus, textarea:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0px;
}
input[type=number] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  appearance: textfield;
}
input[type=checkbox] {
  width: initial;
  height: initial;
}
textarea {
  min-height: 110px;
  resize: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0px;
}
iframe {
  border: 0px;
  width: 100%;
}
h1, h2, h3, h4, h5, h6, p {
  padding: 0px;
  margin: 0px;
  color: var(--template-color);
  font-family: var(--nunito);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--nunito);
}
/* ==== 
 --------- (2.01) reset styles end ---------
 ==== */
/* ==== 
 --------- (2.02) typography styles start ---------
 ==== */
p, th, td, li, input, textarea, select, label, blockquote, span {
  font-size: 17px;
  line-height: 33px;
  font-weight: 400;
  color: var(--template-color);
}
a, button {
  font-size: 16px;
  line-height: 24px;
}
h1 {
  font-size: 30px;
  line-height: 40px;
}
h2 {
  font-size: 30px;
  line-height: 40px;
}
h3 {
  font-size: 24px;
  line-height: 34px;
}
h4 {
  font-size: 20px;
  line-height: 30px;
}
h5 {
  font-size: 20px;
  line-height: 30px;
}
h6 {
  font-size: 18px;
  line-height: 28px;
}
h1 a, h1 span, h2 a, h2 span, h3 a, h3 span, h4 a, h4 span, h5 a, h5 span, h6 a, h6 span, p a, p span {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--nunito);
}
/* ==== 
 --------- (2.02) typography styles end ---------
 ==== */
/* ==== 
 --------- (2.03) global styles start ---------
 ==== */
img {
  max-width: 100%;
  height: auto;
  border: 0px;
  outline: 0px;
  -o-object-fit: cover;
  object-fit: cover;
}
i {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
span {
  display: inline-block;
}
.gutter-12 {
  row-gap: 12px;
}
.gutter-24 {
  row-gap: 24px;
}
.gutter-30 {
  row-gap: 30px;
}
.gutter-40 {
  row-gap: 40px;
}
.gutter-60 {
  row-gap: 60px;
}
.gutter-80 {
  row-gap: 80px;
}
div {
  line-height: 0px;
}
.cursor-outer {
  -webkit-margin-start: -12px;
  margin-inline-start: -12px;
  margin-top: -12px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--quaternary-color);
  background-color: var(--quaternary-color);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 10000000;
  opacity: 0.34;
  -webkit-transition: all 0.4s ease-out 0s;
  transition: all 0.4s ease-out 0s;
}
.cursor-outer.cursor-hover {
  opacity: 0.14;
}
.cursor-outer.cursor-big {
  opacity: 0;
}
.mouseCursor {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  pointer-events: none;
  border-radius: 50%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  visibility: hidden;
  text-align: center;
}
.mouseCursor.cursor-big {
  width: 20px;
  height: 20px;
  -webkit-margin-start: -12px;
  margin-inline-start: -12px;
  margin-top: -12px;
}
.cursor-inner {
  -webkit-margin-start: -3px;
  margin-inline-start: -3px;
  margin-top: -3px;
  width: 10px;
  height: 10px;
  z-index: 10000001;
  background-color: var(--quaternary-color);
  opacity: 1;
  -webkit-transition: all 0.24s ease-out 0s;
  transition: all 0.24s ease-out 0s;
}
.cursor-inner span {
  color: var(--theme-color);
  line-height: 60px;
  opacity: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
}
.cursor-inner.cursor-big span {
  opacity: 1;
}
.cursor-inner.cursor-hover {
  -webkit-margin-start: -10px;
  margin-inline-start: -10px;
  margin-top: -10px;
  width: 30px;
  height: 30px;
  background-color: transparent;
  border: 1px solid #686363;
  opacity: 0;
}
.progress-wrap {
  position: fixed;
  inset-inline-end: 30px;
  bottom: 30px;
  height: 50px;
  width: 50px;
  padding: 6px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  background-color: #acd5ce;
  -webkit-box-shadow: inset 0 0 0 8px #acd5ce;
  box-shadow: inset 0 0 0 8px #acd5ce;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(15px);
  -ms-transform: translateY(15px);
  transform: translateY(15px);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
  z-index: 99;
  overflow: hidden;
}
.progress-wrap span {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  background-color: var(--white);
  border-radius: 50%;
  overflow: hidden;
}
.progress-wrap span::after {
  content: "\f176";
  font-family: "Font Awesome 6 Free";
  font-weight: 700;
  position: absolute;
  text-align: center;
  line-height: 34px;
  font-size: 18px;
  border-radius: 50%;
  color: #076051;
  inset-inline-start: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, 200%);
  -ms-transform: translate(-50%, 200%);
  transform: translate(-50%, 200%);
  height: 34px;
  width: 34px;
  cursor: pointer;
  display: block;
  z-index: 1;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}
.progress-wrap span::before {
  position: absolute;
  content: "\f176";
  font-family: "Font Awesome 6 Free";
  font-weight: 700;
  text-align: center;
  line-height: 34px;
  font-size: 18px;
  border-radius: 50%;
  color: #076051;
  inset-inline-start: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: 34px;
  width: 34px;
  cursor: pointer;
  display: block;
  z-index: 2;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}
.progress-wrap:hover span::before {
  -webkit-transform: translate(-50%, -200%);
  -ms-transform: translate(-50%, -200%);
  transform: translate(-50%, -200%);
}
.progress-wrap:hover span::after {
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.progress-wrap path {
  fill: none;
}
.progress-wrap .progress-circle path {
  stroke: #076051;
  stroke-width: 4;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}
.active-progress {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
.pt-200 {
  padding-top: 200px !important;
}
.social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
}
.social a {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.72);
}
.social a:hover {
  color: var(--base-color);
}

.sidenav-bar-visible .search-popup {
  width: 80%;
}
.search-active .search-popup {
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
  margin-top: 0;
}
.search-active .search-popup form {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-delay: 1200ms;
  transition-delay: 1200ms;
}
.search-active .search-popup .close-search {
  visibility: visible;
  opacity: 1;
  top: 50%;
  -webkit-transition-delay: 1500ms;
  transition-delay: 1500ms;
}
.section__header {
  margin-bottom: 34px;
}
.section__header span {
  font-weight: 700;
  color: var(--quaternary-color);
}
.section__header h2 {
  color: var(--secondary-color);
  font-weight: 800;
  margin-top: 15px;
}
.section__header h2 span {
  color: var(--base-color);
}
.section__header p {
  font-weight: 500;
  /*max-width: 780px;*/
  margin-inline: auto;
  margin-top: 20px;
}
.section__header-secondary {
  margin-bottom: 40px;
}
.section__header-light {
  margin-bottom: 40px;
}
.section__header-light span {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-top: -8px;
}
.section__header-light h2 {
  color: var(--white);
  font-weight: 600;
  margin: 16px 0px 30px;
}
.section__header-light .icon-thumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  gap: 12px;
}
.section__header-light .icon-thumb .icon-thumb-single {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  gap: 3px;
  line-height: 0px;
  padding-bottom: 4px;
}
.section__header-light .icon-thumb .icon-thumb-single:nth-of-type(2) {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.section__header-light .icon-thumb span {
  width: 70px;
  height: 1px;
  background-color: var(--white);
  display: inline-block;
  line-height: 0px;
}
.section__header-light .icon-thumb span:nth-of-type(2) {
  width: 56px;
}
.section__content .sub-title {
  color: var(--quaternary-color);
}
.section__content h2 {
  font-weight: 800;
  color: var(--secondary-color);
  margin-top: 16px;
}
.section__content h2 span {
  color: var(--base-color);
}
.section__content p {
  margin-top: 10px;
  max-width: 630px;
}
.video-btn-wrapper {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 4;
}
.video-btn-wrapper .open-video-popup {
  width: 80px;
  height: 80px;
  background: var(--base-color);
  border-radius: 100%;
  position: relative;
  -webkit-animation: pulse-shadow 3s 2s linear infinite;
  animation: pulse-shadow 3s 2s linear infinite;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 1;
}
.video-btn-wrapper .open-video-popup i {
  font-size: 20px;
  color: var(--secondary-color);
}
@-webkit-keyframes pulse-shadow {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.6);
  }
  100% {
    -webkit-box-shadow: 0 0 0 85px rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 85px rgba(0, 0, 0, 0);
  }
}
@keyframes pulse-shadow {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.6);
  }
  100% {
    -webkit-box-shadow: 0 0 0 85px rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 85px rgba(0, 0, 0, 0);
  }
}
.pagination-one .swiper-pagination-bullets {
  text-align: center;
}
.pagination-one .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: var(--white);
  border: 1px solid #1b325c;
  border-radius: 0px;
  opacity: 1;
  margin: 0px 5px;
}
.pagination-one .swiper-pagination-bullet-active {
  background-color: var(--base-color);
  border-radius: 50%;
}
.slider-navigation-two {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  gap: 10px;
  height: 100%;
}
.slider-navigation-two button {
  padding: 12px;
  background-color: var(--white);
  color: var(--base-color);
  font-size: 16px;
  font-weight: 700;
}
.slider-navigation-two button span {
  line-height: 1;
  font-weight: 700;
}
.slider-navigation-two button i {
  font-size: 16px;
}
.slider-navigation-two .prev-testimonial, .slider-navigation-two .prev-area, .slider-navigation-two .prev-testimonial-t, .slider-navigation-two .prev-team-t, .slider-navigation-two .prev-slide {
  background-color: var(--quaternary-color);
  color: var(--white);
}
.slider-navigation-two .prev-testimonial span, .slider-navigation-two .prev-area span, .slider-navigation-two .prev-testimonial-t span, .slider-navigation-two .prev-team-t span, .slider-navigation-two .prev-slide span {
  display: none;
}
.slider-navigation-two .active span {
  display: block;
}
.slider-navigation-two .next-testimonial-t, .slider-navigation-two .next-team-t {
  border: 1px solid var(--base-color);
}
.slider-navigation-two .prev-testimonial-t, .slider-navigation-two .prev-team-t {
  border: 1px solid var(--quaternary-color);
}
.breadcrumb {
  margin-bottom: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.breadcrumb .breadcrumb-item, .breadcrumb a {
  color: #ffffff;
}
.breadcrumb a:hover {
  color: var(--white);
}
.breadcrumb .breadcrumb-item + .breadcrumb-item {
  -webkit-padding-start: 0px;
  padding-inline-start: 0px;
  color: var(--white);
}
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  -webkit-padding-end: 12px;
  padding-inline-end: 12px;
  font-size: 20px;
  content: "::";
  font-family: "Font Awesome 6 Free";
  font-weight: 700;
  color: #ffffff;
  margin-top: -2px;
}
.breadcrumb .active {
  color: var(--white) !important;
}
.main-pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 12px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 40px;
}
.main-pagination button, .main-pagination a {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 1px solid #9eb3af;
  background-color: transparent;
  color: var(--black);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  font-weight: 800;
  font-size: 14px;
}
.main-pagination button:hover, .main-pagination a:hover {
  border-color: var(--base-color);
  background-color: var(--base-color);
  color: var(--black);
}
.main-pagination .active {
  border-color: var(--base-color);
  background-color: var(--base-color);
  color: var(--black);
}
.main-pagination button {
  background-color: var(--quaternary-color);
  color: var(--white);
}
.main-pagination button:hover {
  background-color: var(--base-color);
  color: var(--black);
}
.parallax-image {
  -webkit-transform: scale(1.6);
  -ms-transform: scale(1.6);
  transform: scale(1.6);
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
.parallax-image-wrap, .parallax-image-inner {
  border-radius: inherit;
}
.title-animation {
  text-transform: none !important;
}
.title-animation > div > div:nth-child(1) {
  text-transform: none;
}
.title-animation > span > div > div:nth-child(1) {
  text-transform: none;
}

.sub-title {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  font-family: var(--caveat);
  color: var(--base-color);
  font-size: 20px;
  line-height: 34px;
  margin-top: -8px;
  font-weight: 800;
}
.cta {
  margin-top: 45px;
}
.slider-navigation .slider-btn {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #6c8ac3;
  color: var(--white);
  font-size: 16px;
}
.slider-navigation .slider-btn:hover {
  background-color: var(--base-color);
  color: #fff;
}
.slider-navigation .slider-btn-next {
  background-color: #eab7a0;
  color: #fff;
}
.slider-navigation .slider-btn-next:hover {
  background-color: var(--secondary-color);
  color: var(--white);
}
.bottom-line {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='196' height='15' viewBox='0 0 196 15' fill='none'%3E %3Cpath d='M1 13C42.1844 2.92057 142.978 -3.87406 195 9.2668' stroke='%23FBAD17' stroke-width='4'/%3E %3C/svg%3E");
}
.pagination-one {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.pagination-one .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #d6d1d1;
  opacity: 1;
  border: 0px solid transparent;
  display: inline-block;
}
.pagination-one .swiper-pagination-bullet-active {
  width: 25px;
  height: 25px;
  border: 1px solid var(--quaternary-color);
  background-color: transparent;
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.pagination-one .swiper-pagination-bullet-active::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--quaternary-color);
  border-radius: 50%;
}
.progress-bar {
  width: 100%;
  height: 8px;
  background-color: #e9e9e9;
  border-radius: 10px;
  position: relative;
}
.progress-bar .progress-bar-percent {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  background-color: var(--base-color);
  border-radius: inherit;
}
.section__cta .btn--primary {
  padding: 18px 50px;
  border-radius: 60px;
  font-weight: 700;
  gap: 8px;
}
.section__cta .btn--primary::before, .section__cta .btn--primary::after {
  border-radius: 0px;
}
.section__cta .btn--primary i {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: transform 0.5s ease, color 0s ease;
  transition: transform 0.5s ease, color 0s ease, -webkit-transform 0.5s ease;
  font-size: 18px;
}
.section__cta .btn--primary:hover i {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.privacy {
  padding: 100px 0px;
  background-color: var(--white);
}
.privacy .privacy-group {
  margin-bottom: 60px;
  margin-top: -7px;
}
.privacy .privacy-group:nth-last-of-type(1) {
  margin-bottom: 0px;
}
.privacy .privacy-group h3 {
  font-weight: 600;
  color: var(--black);
}
.privacy .privacy-group p {
  margin-top: 20px;
  font-size: 18px;
}
/* ==== 
 --------- (2.03) global styles end ---------
 ==== */
/* ==== 
 --------- (3.01) buttons styles start ---------
 ==== */
.btn--primary {
  padding: 13px 24px;
  background-color: var(--base-color);
  color: #fff;
  position: relative;
  font-weight: 800;
  z-index: 1;
  gap: 16px;
  overflow: hidden;
}
.btn--primary svg {
  width: 25px;
  height: 25px;
}
.btn--primary path {
  fill: black;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.btn--primary::before, .btn--primary::after {
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  inset-inline-start: 0px;
  width: 50%;
  height: 100%;
  border-radius: inherit;
  background-color: var(--base-color);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  z-index: -1;
}
.btn--primary::after {
  inset-inline-start: unset;
  inset-inline-end: 0px;
}
.btn--primary:hover {
  color: var(--white);
  background-color: var(--quaternary-color);
}
.btn--primary:hover path {
  fill: white;
}
.btn--primary:hover::before, .btn--primary:hover::after {
  width: 0%;
}
.btn--secondary {
  padding: 13px 30px;
  background-color: var(--secondary-color);
  color: var(--white);
  position: relative;
  font-weight: 700;
  z-index: 1;
  gap: 14px;
  overflow: hidden;
  border-radius: 60px;
}
.btn--secondary svg {
  width: 25px;
  height: 25px;
}
.btn--secondary path {
  fill: white;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.btn--secondary::before, .btn--secondary::after {
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  inset-inline-start: 0px;
  width: 50%;
  height: 100%;
  border-radius: 0px;
  background-color: var(--secondary-color);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  z-index: -1;
}
.btn--secondary::after {
  inset-inline-start: unset;
  inset-inline-end: 0px;
}
.btn--secondary:hover {
  color: var(--secondary-color);
  background-color: var(--base-color);
}
.btn--secondary:hover path {
  fill: var(--secondary-color);
}
.btn--secondary:hover::before, .btn--secondary:hover::after {
  width: 0%;
}
.btn--tertiary {
  padding: 13px 24px;
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--white);
  position: relative;
  font-weight: 800;
  z-index: 1;
  gap: 16px;
  overflow: hidden;
}
.btn--tertiary::before, .btn--tertiary::after {
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  inset-inline-start: 0px;
  width: 50%;
  height: 100%;
  border-radius: inherit;
  background-color: rgba(255, 255, 255, 0.04);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  z-index: -1;
}
.btn--tertiary::after {
  inset-inline-start: unset;
  inset-inline-end: 0px;
}
.btn--tertiary:hover {
  color: var(--black);
  background-color: var(--base-color);
}
.btn--tertiary:hover::before, .btn--tertiary:hover::after {
  width: 0%;
}
/* ==== 
 --------- (3.01) buttons styles end ---------
 ==== */
/* ==== 
 --------- (3.02) forms styles start ---------
 ==== */
.input-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
}
.input-group .input-single {
  width: 100%;
}
.input-group input, .input-group textarea {
  width: 100%;
  padding: 9px 16px;
  background-color: var(--white);
  border: 1px solid #1b325c;
  color: var(--quaternary-color);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.input-group input:focus, .input-group textarea:focus {
  border-color: var(--base-color);
}
.input-group input::-webkit-input-placeholder, .input-group textarea::-webkit-input-placeholder {
  color: var(--quaternary-color);
}
.input-group input::-moz-placeholder, .input-group textarea::-moz-placeholder {
  color: var(--quaternary-color);
}
.input-group input:-ms-input-placeholder, .input-group textarea:-ms-input-placeholder {
  color: var(--quaternary-color);
}
.input-group input::-ms-input-placeholder, .input-group textarea::-ms-input-placeholder {
  color: var(--quaternary-color);
}
.input-group input::placeholder, .input-group textarea::placeholder {
  color: var(--quaternary-color);
}
.input-group textarea {
  min-height: 300px;
}
.contact__form .input-single, .checkout__form .input-single {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  padding: 0px 16px;
  border-radius: 8px !important;
  border: 2px solid #7e7e7e;
  background: #046150;
  width: auto;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  margin-bottom: 30px;
}
.contact__form .input-single:nth-last-of-type(1), .checkout__form .input-single:nth-last-of-type(1) {
  margin-bottom: 15px;
}
.contact__form .input-single input, .contact__form .input-single textarea, .contact__form .input-single .nice-select, .checkout__form .input-single input, .checkout__form .input-single textarea, .checkout__form .input-single .nice-select {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  background-color: transparent;
  color: var(--white);
  border: 0px;
  padding: 11px 16px;
}
.contact__form .input-single input::-webkit-input-placeholder, .contact__form .input-single textarea::-webkit-input-placeholder, .contact__form .input-single .nice-select::-webkit-input-placeholder, .checkout__form .input-single input::-webkit-input-placeholder, .checkout__form .input-single textarea::-webkit-input-placeholder, .checkout__form .input-single .nice-select::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5647058824);
}
.contact__form .input-single input::-moz-placeholder, .contact__form .input-single textarea::-moz-placeholder, .contact__form .input-single .nice-select::-moz-placeholder, .checkout__form .input-single input::-moz-placeholder, .checkout__form .input-single textarea::-moz-placeholder, .checkout__form .input-single .nice-select::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5647058824);
}
.contact__form .input-single input:-ms-input-placeholder, .contact__form .input-single textarea:-ms-input-placeholder, .contact__form .input-single .nice-select:-ms-input-placeholder, .checkout__form .input-single input:-ms-input-placeholder, .checkout__form .input-single textarea:-ms-input-placeholder, .checkout__form .input-single .nice-select:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5647058824);
}
.contact__form .input-single input::-ms-input-placeholder, .contact__form .input-single textarea::-ms-input-placeholder, .contact__form .input-single .nice-select::-ms-input-placeholder, .checkout__form .input-single input::-ms-input-placeholder, .checkout__form .input-single textarea::-ms-input-placeholder, .checkout__form .input-single .nice-select::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5647058824);
}
.contact__form .input-single input::placeholder, .contact__form .input-single textarea::placeholder, .contact__form .input-single .nice-select::placeholder, .checkout__form .input-single input::placeholder, .checkout__form .input-single textarea::placeholder, .checkout__form .input-single .nice-select::placeholder {
  color: rgba(255, 255, 255, 0.5647058824);
}
.contact__form .input-single i, .checkout__form .input-single i {
  font-size: 18px;
  color: var(--base-color);
}
.contact__form .alter-input, .checkout__form .alter-input {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.contact__form .alter-input i, .checkout__form .alter-input i {
  margin-top: 20px;
}
.contact__form .input-group, .checkout__form .input-group {
  margin-bottom: 30px;
}
.contact__form .input-group .input-single, .checkout__form .input-group .input-single {
  margin-bottom: 0px;
}
.contact__form .form-cta, .checkout__form .form-cta {
  margin-top: 0px;
}
.contact__form .btn--primary, .checkout__form .btn--primary {
  padding: 18px 40px;
  border-radius: 60px;
  font-weight: 700;
  gap: 8px;
  background-color: var(--black);
}
.contact__form .btn--primary::before, .contact__form .btn--primary::after, .checkout__form .btn--primary::before, .checkout__form .btn--primary::after {
  border-radius: 0px;
}
.contact__form .btn--primary i, .checkout__form .btn--primary i {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: transform 0.5s ease, color 0s ease;
  transition: transform 0.5s ease, color 0s ease, -webkit-transform 0.5s ease;
  font-size: 18px;
}
.contact__form .btn--primary:hover, .checkout__form .btn--primary:hover {
  color: var(--white);
}
.contact__form .btn--primary:hover i, .checkout__form .btn--primary:hover i {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.contact__form .input-single {
  border: 2px solid rgba(255, 255, 255, 0.15);
}
.checkout__form .input-group .input-single {
  width: 100%;
}
.checkout__form .input-single {
  padding: 0px 0px;
  background-color: #efefef;
  border: 0px solid transparent;
}
.checkout__form .input-single input, .checkout__form .input-single textarea {
  color: var(--black);
}
.checkout__form .input-single input::-webkit-input-placeholder, .checkout__form .input-single textarea::-webkit-input-placeholder {
  color: #667471;
}
.checkout__form .input-single input::-moz-placeholder, .checkout__form .input-single textarea::-moz-placeholder {
  color: #667471;
}
.checkout__form .input-single input:-ms-input-placeholder, .checkout__form .input-single textarea:-ms-input-placeholder {
  color: #667471;
}
.checkout__form .input-single input::-ms-input-placeholder, .checkout__form .input-single textarea::-ms-input-placeholder {
  color: #667471;
}
.checkout__form .input-single input::placeholder, .checkout__form .input-single textarea::placeholder {
  color: #667471;
}
.checkout__form .input-single i {
  color: #adadad;
}
.checkout__form .nice-select {
  z-index: 9;
}
.checkout__form .btn--primary {
  width: 100%;
  border-radius: 8px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.footer__newsletter-form {
  margin-top: 40px;
}
.footer__newsletter-form form {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 16px;
}
.footer__newsletter-form form .input-icon {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 100%;
}
.footer__newsletter-form form input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1.2px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: white;
}
.footer__newsletter-form form input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.footer__newsletter-form form input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.footer__newsletter-form form input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.footer__newsletter-form form input::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.footer__newsletter-form form input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.footer__newsletter-form form input:focus {
  border-color: var(--base-color);
}
.footer__newsletter-form form button {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 16px 24px;
  border-radius: 8px;
  min-width: 150px;
}
.footer__newsletter-form form button::before {
  border-radius: inherit;
}
.input-icon {
  position: relative;
}
.input-icon input {
  -webkit-padding-start: 44px !important;
  padding-inline-start: 44px !important;
}
.input-icon i {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  inset-inline-start: 16px;
}
.footer-two__newsletter-form form {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
}
.footer-two__newsletter-form form .input-icon {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 100%;
}
.footer-two__newsletter-form form input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--white);
  color: var(--secondary-color);
}
.footer-two__newsletter-form form input::-webkit-input-placeholder {
  color: var(--template-color);
}
.footer-two__newsletter-form form input::-moz-placeholder {
  color: var(--template-color);
}
.footer-two__newsletter-form form input:-ms-input-placeholder {
  color: var(--template-color);
}
.footer-two__newsletter-form form input::-ms-input-placeholder {
  color: var(--template-color);
}
.footer-two__newsletter-form form input::placeholder {
  color: var(--template-color);
}
.footer-two__newsletter-form form button {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 16px 24px;
  border-radius: 8px;
  min-width: 60px;
  height: 54px;
}
.footer-two__newsletter-form form button::before, .footer-two__newsletter-form form button::after {
  border-radius: 0px;
}
/* ==== 
 --------- (3.02) forms styles end ---------
 ==== */
/* ==== 
 --------- (3.03) preloader styles start ---------
 ==== */
.preloader {
  background-color: #fff;
  position: fixed;
  z-index: 99999;
  height: 100vh;
  width: 100vw;
  inset: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 24px;
}
.preloader i {
  width: 100px;
  min-width: 100px;
  height: 100px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #fff;
  font-size: 40px;
  color: var(--black);
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  -webkit-animation: flipY 3s linear infinite;
  animation: flipY 3s linear infinite;
}
.preloader p {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 5px;
  background: -webkit-gradient(linear, left top, right top, from(#1b325c), color-stop(#1b325c), color-stop(#1b325c), to(#1b325c));
  background: linear-gradient(90deg, #1b325c, #1b325c, #1b325c, #1b325c);
  background-size: 300%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  -webkit-animation: moveBg 5s ease-in-out infinite;
  animation: moveBg 5s ease-in-out infinite;
}
@-webkit-keyframes flipY {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}
@keyframes flipY {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}
@-webkit-keyframes moveBg {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes moveBg {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* ==== 
 --------- (3.03) preloader styles end ---------
 ==== */
/* ==== 
 --------- (4.01) header styles start ---------
 ==== */
.topbar {
  background-color: var(--secondary-color);
  padding-top: 11px;
  padding-bottom: 24px;
  position: absolute;
  top: 0px;
  inset-inline-start: 0px;
  inset-inline-end: 0px;
}
.topbar .topbar__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 40px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.topbar .topbar__list li {
  line-height: 0px;
}
.topbar .topbar__list li:nth-of-type(1) i {
  font-size: 18px;
  margin-bottom: -2px;
}
.topbar .topbar__list a {
  font-size: 15px;
  line-height: 25px;
  color: var(--white);
  font-weight: 500;
  gap: 8px;
  text-transform: lowercase;
}
.topbar .topbar__list a i {
  color: var(--base-color);
}
.topbar .topbar__list a:hover {
  color: var(--base-color);
}
.topbar .topbar__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 40px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.topbar .select {
  background-color: transparent;
  border-radius: 0px;
  border: 0px;
  padding: 0px;
  -webkit-padding-end: 16px;
  padding-inline-end: 16px;
  z-index: 999;
}
.topbar .select .option {
  padding-inline: 18px !important;
}
.topbar .select::after {
  right: unset;
  inset-inline-end: 0px !important;
  width: 7px;
  height: 7px;
  border-color: var(--white);
  margin-top: -5px;
}
.topbar .select .option, .topbar .select .current {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  line-height: 0px;
}
.topbar .select .option span, .topbar .select .option i, .topbar .select .current span, .topbar .select .current i {
  width: 30px;
  height: 20px;
}
.topbar .select .current {
  color: var(--white);
  line-height: 1;
}
.topbar .select .list {
  padding: 12px 0px;
}
.topbar--secondary {
  padding: 0px;
  background-color: var(--white);
}
.topbar--secondary .topbar__inner {
  padding: 12px 24px 13px;
  width: calc(100% - 80px);
  margin-inline: auto;
  border-radius: 0px 0px 20px 17px;
  background-color: var(--secondary-color);
}
.topbar--secondary .container {
  max-width: 1800px !important;
}
.topbar--secondary .topbar__extra {
  direction: ltr;
}
.topbar--secondary .topbar__extra p {
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  color: var(--white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.topbar--secondary .topbar__extra p i {
  font-size: 18px;
  color: var(--base-color);
}
.topbar--secondary .topbar__list, .topbar--secondary .topbar__items {
  gap: 20px;
}
.topbar--secondary .country-select .current i {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  border: 4px solid rgba(88, 88, 88, 0.92);
  border-radius: 50%;
}
.topbar--tertiary {
  background-color: #ececec;
  overflow: hidden;
  padding: 0px;
}
.topbar--tertiary .container {
  max-width: 1564px !important;
}
.topbar--tertiary .topbar__list a, .topbar--tertiary .topbar__items a {
  color: var(--secondary-color);
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
}
.topbar--tertiary .topbar__list a i, .topbar--tertiary .topbar__items a i {
  color: var(--hover-color);
  margin-bottom: 0px !important;
  font-size: 20px;
}
.topbar--tertiary .topbar__list a:hover, .topbar--tertiary .topbar__items a:hover {
  color: var(--hover-color);
}
.topbar--tertiary .topbar__list li:nth-of-type(2) a i, .topbar--tertiary .topbar__items li:nth-of-type(2) a i {
  margin-bottom: -2px !important;
}
.topbar--tertiary .topbar__items {
  position: relative;
  z-index: 1;
}
.topbar--tertiary .topbar__items::before {
  content: "";
  position: absolute;
  inset-inline-start: 100%;
  z-index: -1;
  min-width: 400%;
  height: 100%;
  background-color: var(--base-color);
}
.topbar--tertiary .topbar__items p {
  line-height: 1;
}
.topbar--tertiary .topbar__items .social {
  -webkit-padding-start: 40px;
  padding-inline-start: 40px;
  padding-top: 12px;
  padding-bottom: 12px;
  position: relative;
  z-index: 1;
}
.topbar--tertiary .topbar__items .social::before {
  content: "";
  position: absolute;
  inset-inline-start: 0px;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: var(--base-color);
  -webkit-clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%, 10% 0%);
  clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%, 10% 0%);
}
.topbar--tertiary .topbar__items .social a {
  color: var(--secondary-color);
}
.topbar--tertiary .topbar__items .social a i {
  color: inherit;
  font-size: 18px !important;
}
.topbar--tertiary .topbar__items .social a:hover {
  color: var(--hover-color);
}
.header {
  z-index: 99;
}
.header .main-header__menu-box {
  padding-top: 27px;
  padding-bottom: 27px;
  position: relative;
  background-color: var(--white);
}
.header .navbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 20px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.header .navbar-logo img {
  max-width: 160px;
  height: 36px;
}
.header .navbar__menu {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-margin-start: -15px;
  margin-inline-start: -15px;
}
.header .navbar__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.header .navbar__item a {
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
  padding: 42px 15px;
  width: 100%;
  line-height: 1;
  color: #16171a;
}
.header .navbar__item a:hover {
  color: var(--hover-color);
}
.header .navbar__item .dropdown-label-alter {
  position: relative;
}
.header .navbar__item .dropdown-label-alter::before {
  content: "";
  position: absolute;
  bottom: 0px;
  inset-inline-start: 50%;
  border: 10px solid transparent;
  border-bottom-color: var(--hover-color);
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(100%);
  -ms-transform: translateX(-50%) translateY(100%);
  transform: translateX(-50%) translateY(100%);
  -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
}
.header .navbar__item:hover .dropdown-label-alter::before {
  opacity: 1;
  -webkit-transform: translateX(-50%) translateY(0%);
  -ms-transform: translateX(-50%) translateY(0%);
  transform: translateX(-50%) translateY(0%);
}
.header .navbar__item--has-children {
  position: relative;
}
.header .navbar__item--has-children:hover > .navbar__dropdown-label {
  color: var(--hover-color);
}
.header .navbar__item--has-children:hover > .navbar__dropdown-label::after {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.header .navbar__item--has-children:hover > .navbar__dropdown-label-sub::after {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.header .navbar__item--has-children:hover > .navbar__sub-menu {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  pointer-events: all;
}
.header .navbar__dropdown-label {
  position: relative;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.header .navbar__dropdown-label::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f107";
  border: none;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  font-size: inherit;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.header .navbar__sub-menu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0px;
  min-width: 230px;
  max-width: 260px;
  background-color: var(--white);
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(30px);
  -ms-transform: translateY(30px);
  transform: translateY(30px);
  pointer-events: none;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -webkit-box-shadow: var(--shadow);
  box-shadow: var(--shadow);
  padding: 20px 0px;
  border-radius: 5px;
  z-index: 9;
}
.header .navbar__sub-menu li:nth-last-of-type(1) > a {
  border-bottom: 0px;
}
.header .navbar__sub-menu a {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 16px 32px;
  color: var(--black);
  position: relative;
  font-size: 15px;
  border-bottom: 1px solid rgba(228, 218, 218, 0.4784313725);
  text-transform: capitalize;
}
.header .navbar__sub-menu a::before {
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  inset-inline-start: 20px;
  height: 1px;
  margin-top: 0px;
  width: 0px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background-color: var(--hover-color);
}
.header .navbar__sub-menu a:hover {
  color: var(--hover-color);
  -webkit-padding-start: 40px;
  padding-inline-start: 40px;
}
.header .navbar__sub-menu a:hover::before {
  opacity: 1;
  -webkit-transform: translateY(-50%) scaleX(1);
  -ms-transform: translateY(-50%) scaleX(1);
  transform: translateY(-50%) scaleX(1);
  width: 10px;
}
.header .navbar__sub-menu .active > a {
  -webkit-padding-start: 40px;
  padding-inline-start: 40px;
}
.header .navbar__sub-menu .active > a::before {
  opacity: 1;
  -webkit-transform: translateY(-50%) scaleX(1);
  -ms-transform: translateY(-50%) scaleX(1);
  transform: translateY(-50%) scaleX(1);
  width: 10px;
}
.header .navbar__sub-menu .navbar__item--has-children:hover > .navbar__dropdown-label-sub {
  color: var(--hover-color);
}
.header .navbar__sub-menu__nested {
  top: 0%;
  inset-inline-start: 100%;
  min-width: 230px;
}
.header .navbar__sub-menu__nested::before {
  content: "";
  position: absolute;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  z-index: -1;
  inset-inline-start: -20px;
  border: 10px solid transparent;
  top: 12px;
  border-inline-end-color: var(--hover-color);
}
.header .active > .navbar__dropdown-label, .header .active > a {
  color: var(--hover-color);
}
.header .contact-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 15px;
}
.header .contact-btn div {
  line-height: 0px;
}
.header .contact-btn i {
  font-size: 30px;
  color: var(--secondary-color);
  margin-bottom: -5px;
}
.header .contact-btn p {
  font-size: 12px;
  text-transform: uppercase;
  line-height: 1;
  font-weight: 700;
  color: #828a8d;
  margin-bottom: 8px;
}
.header .contact-btn a {
  color: #2c2c2c;
  line-height: 1;
}
.header .contact-btn a:hover {
  color: var(--hover-color);
}
.header .navbar__options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
}
.header .navbar__mobile-options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.header .search-box button {
  font-size: 20px;
  color: var(--black);
}
.header .search-box button:hover {
  color: var(--hover-color);
}
.header .open-offcanvas-nav {
  padding: 0px;
  display: inline-block;
  background-color: transparent;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
}
.header .open-offcanvas-nav span {
  height: 2px;
  background-color: var(--quaternary-color);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.header .open-offcanvas-nav .top-bar {
  width: 30px;
}
.header .open-offcanvas-nav .middle-bar {
  width: 34px;
}
.header .open-offcanvas-nav .bottom-bar {
  width: 16px;
}
.header .open-offcanvas-nav:hover span {
  background-color: var(--hover-color);
}
.header .open-offcanvas-nav-active .middle-bar {
  opacity: 0;
}
.header .open-offcanvas-nav-active .top-bar, .header .open-offcanvas-nav-active .bottom-bar {
  width: 30px !important;
}
.header .open-offcanvas-nav-active .top-bar {
  -webkit-transform: rotate(45deg) translateY(5px) translateX(9px);
  -ms-transform: rotate(45deg) translateY(5px) translateX(9px);
  transform: rotate(45deg) translateY(5px) translateX(9px);
  background-color: var(--base-color);
}
.header .open-offcanvas-nav-active .bottom-bar {
  -webkit-transform: rotate(-45deg) translateY(-5px) translateX(9px);
  -ms-transform: rotate(-45deg) translateY(-5px) translateX(9px);
  transform: rotate(-45deg) translateY(-5px) translateX(9px);
  background-color: var(--base-color);
}
.header-primary {
  -webkit-filter: drop-shadow(0px 4px 19px rgba(0, 0, 0, 0.07));
  filter: drop-shadow(0px 4px 19px rgba(0, 0, 0, 0.07));
  background-color: white;
  position: absolute;
  inset-inline-start: 0px;
  inset-inline-end: 0px;
  top: 0px;
}
.header-primary .navbar__options .btn--primary {
  padding: 20px 20px 19px;
}
.header-primary .navbar__options .btn--primary i {
  font-size: 25px;
}
.header-secondary {
  top: 0px;
  position: absolute;
  inset-inline-start: 0px;
  inset-inline-end: 0px;
  background-color: var(--white);
}
.header-secondary .container {
  max-width: 1800px !important;
}
.header-secondary .navbar__item > a {
  padding-top: 27px;
  padding-bottom: 27px;
  font-weight: 700;
}
.header-secondary .navbar__sub-menu a {
  padding-top: 16px;
  padding-bottom: 16px;
}
.header-secondary .contact-btn {
  padding: 16px 60px;
  position: relative;
}
.header-secondary .contact-btn::before, .header-secondary .contact-btn::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 14px;
  background-color: var(--white);
  top: 0px;
  inset-inline-end: 100%;
}
.header-secondary .contact-btn::before {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.header-secondary .contact-btn::after {
  top: unset;
  bottom: 0px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.header-secondary .contact-btn p {
  color: var(--secondary-color);
}
.header-secondary .contact-btn a {
  font-weight: 800;
  font-size: 18px;
  color: var(--secondary-color);
}
.header-secondary .main-header__menu-box {
  -webkit-filter: none !important;
  filter: none !important;
}
.header-secondary .navbar__options .btn--primary {
  padding: 16px 40px;
  border-radius: 30px;
  gap: 12px;
}
.header-secondary .navbar__options .btn--primary::after, .header-secondary .navbar__options .btn--primary::before {
  border-radius: 0px;
}
.header-secondary .navbar__options .btn--primary i {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: transform 0.5s ease, color 0s ease;
  transition: transform 0.5s ease, color 0s ease, -webkit-transform 0.5s ease;
}
.header-secondary .navbar__options .btn--primary:hover i {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.header-secondary .navbar__menu-wrapper {
  background-color: var(--base-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 40px;
  border-radius: 60px;
}
.header-secondary .navbar__menu {
  -webkit-padding-end: 80px;
  padding-inline-end: 80px;
}
.header-tertiary {
  top: 0px;
  position: absolute;
  inset-inline-start: 0px;
  inset-inline-end: 0px;
}
.header-tertiary .container {
  max-width: 1564px !important;
}
.header-tertiary .select {
  background-color: transparent;
  border-radius: 0px;
  border: 0px;
  padding: 0px;
  -webkit-padding-end: 16px;
  padding-inline-end: 16px;
  z-index: 999;
}
.header-tertiary .select .option {
  padding-inline: 18px !important;
}
.header-tertiary .select::after {
  right: unset;
  inset-inline-end: 0px !important;
  width: 7px;
  height: 7px;
  border-color: var(--secondary-color);
  margin-top: -5px;
}
.header-tertiary .select .option, .header-tertiary .select .current {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  line-height: 0px;
}
.header-tertiary .select .option span, .header-tertiary .select .option i, .header-tertiary .select .current span, .header-tertiary .select .current i {
  width: 30px;
  height: 20px;
}
.header-tertiary .select .current {
  color: var(--secondary-color);
  line-height: 1;
}
.header-tertiary .select .current i {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  border: 3px solid rgba(236, 230, 230, 0.92);
  border-radius: 50%;
}
.header-tertiary .select .list {
  padding: 12px 0px;
}
.header-tertiary .open-cart {
  position: relative;
}
.header-tertiary .open-cart span {
  position: absolute;
  bottom: 60%;
  inset-inline-start: 60%;
  width: 20px;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: var(--secondary-color);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
}
.header-tertiary .navbar__options, .header-tertiary .navbar__mobile-options {
  gap: 30px;
}
.header-tertiary .navbar__options .btn--secondary i, .header-tertiary .navbar__mobile-options .btn--secondary i {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: transform 0.5s ease, color 0s ease;
  transition: transform 0.5s ease, color 0s ease, -webkit-transform 0.5s ease;
}
.header-tertiary .navbar__options .btn--secondary:hover i, .header-tertiary .navbar__mobile-options .btn--secondary:hover i {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

.sticky-header {
  position: fixed !important;
  top: 0px !important;
  inset-inline-start: 0px;
  inset-inline-end: 0px;
  width: 100%;
  -webkit-animation: stickyNavbar 0.5s linear;
  animation: stickyNavbar 0.5s linear;
  background: var(--white) !important;
  -webkit-filter: drop-shadow(0px 4px 19px rgba(0, 0, 0, 0.07)) !important;
  filter: drop-shadow(0px 4px 19px rgba(0, 0, 0, 0.07)) !important;
}
.sticky-header .main-header__menu-box {
  -webkit-filter: none !important;
  filter: none !important;
}
@-webkit-keyframes stickyNavbar {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes stickyNavbar {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
.sticky-header .topbar {
  display: none;
}
.sticky-header.header-secondary .main-header__menu-box {
  padding-inline: 0px !important;
  width: 100%;
}
.sticky-header.header-tertiary .main-header__menu-box {
  padding-inline: 0px !important;
  width: 100%;
}

.show-menu {
  opacity: 1;
  visibility: visible;
}
.show-menu .mobile-menu__wrapper {
  inset-inline-start: 0px;
  -webkit-transition-delay: 600ms;
  transition-delay: 600ms;
}
.show-menu .nav-fade {
  -webkit-animation: navLinkFade 0.5s ease forwards;
  animation: navLinkFade 0.5s ease forwards;
  -webkit-transition: all 0.7s ease-in-out !important;
  transition: all 0.7s ease-in-out !important;
}
.nav-fade-active {
  animation: navLinkFade 1s ease reverse !important;
}
@-webkit-keyframes navLinkFade {
  from {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes navLinkFade {
  from {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes navLinkFadeReverse {
  from {
    opacity: 0;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  to {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}
@keyframes navLinkFadeReverse {
  from {
    opacity: 0;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  to {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .header-secondary .navbar__menu-wrapper {
    background-color: transparent;
  }
  .header-secondary .main-header__menu-box {
    padding-inline: 0px !important;
  }
  .header-secondary .navbar__menu {
    -webkit-padding-end: 0px !important;
    padding-inline-end: 0px !important;
  }
  .header-secondary .navbar__item > a {
    padding-inline: 10px !important;
  }
  .header-secondary .navbar__sub-menu a {
    padding-inline: 32px !important;
  }
}
/* ==== 
 --------- (4.01) header styles end ---------
 ==== */
/* ==== 
 --------- (4.02) banner styles start ---------
 ==== */
.banner {
  margin-top: 0px;
  padding: 120px 0px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.banner::before {
  content: "";
  position: absolute;
  inset-block: 0px;
  inset-inline-start: 0px;
  width: 100%;
  height: 100%;
  background: linear-gradient(-104deg, rgba(12, 26, 23, 0) 1.9%, rgba(9, 31, 27, 0.08) 9.94%, rgba(9, 31, 27, 0.17) 22.52%, rgba(9, 31, 27, 0.37) 36.84%, rgba(9, 31, 27, 0.67) 56.36%, #091f1b 79.8%, #091f1b 95.2%, rgba(9, 31, 27, 0.91) 103.44%);
  z-index: -3;
}
.banner .circle-shape {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: linear-gradient(138deg, rgba(18, 47, 42, 0) 23.66%, #1b325c 91.54%);
  -webkit-backdrop-filter: blur(6.5px);
  backdrop-filter: blur(6.5px);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  z-index: -2;
}
.banner h1, .banner p {
  color: var(--white);
}
.banner h1 {
  font-weight: 800;
  margin-block: 15px 20px;
}
.banner h1 span {
  color: var(--base-color);
}
.banner p {
  max-width: 800px;
  margin-inline: auto;
}
.banner .banner__content-cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 24px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.banner .banner__content span, .banner .banner__content h1, .banner .banner__content p, .banner .banner__content .banner__content-cta {
  opacity: 0;
  -webkit-transform: translateX(-20px);
  -ms-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: all 1000ms ease;
  transition: all 1000ms ease;
}
.banner .swiper-slide-active .banner__content span {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-delay: 600ms;
  transition-delay: 600ms;
}
.banner .swiper-slide-active .banner__content h1 {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-delay: 1000ms;
  transition-delay: 1000ms;
}
.banner .swiper-slide-active .banner__content p {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-delay: 1400ms;
  transition-delay: 1400ms;
}
.banner .swiper-slide-active .banner__content .banner__content-cta {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-delay: 1800ms;
  transition-delay: 1800ms;
}
.banner .btn--tertiary, .banner .btn--primary {
  padding: 18px 40px;
  border-radius: 60px;
  font-weight: 700;
  gap: 8px;
}
.banner .btn--tertiary::before, .banner .btn--tertiary::after, .banner .btn--primary::before, .banner .btn--primary::after {
  border-radius: 0px;
}
.banner .btn--tertiary i, .banner .btn--primary i {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: transform 0.5s ease, color 0s ease;
  transition: transform 0.5s ease, color 0s ease, -webkit-transform 0.5s ease;
  font-size: 18px;
}
.banner .btn--tertiary:hover i, .banner .btn--primary:hover i {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.banner .banner-bg {
  position: absolute;
  inset: 0px;
  z-index: -4;
  overflow: hidden;
}
.banner .banner-bg img {
  width: 100%;
  height: 100%;
}
.banner .banner-bg .parallax-image-wrap, .banner .banner-bg .parallax-image-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0px;
}
.banner .alter-shape {
  position: absolute;
  inset-block-end: 0px;
  inset-inline-start: 0px;
  -webkit-margin-start: -100px;
  margin-inline-start: -100px;
  -webkit-margin-after: -100px;
  margin-block-end: -100px;
  background-color: rgba(255, 255, 255, 0.21);
  width: 300px;
  height: 300px;
  z-index: -1;
  border-radius: 50%;
  border-start-start-radius: 200px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.banner .bottom-shape {
  position: absolute;
  bottom: -2px;
  inset-inline: 0px;
}
.banner .bottom-shape img {
  width: 100%;
  height: 80px;
}
.banner-two {
  margin-top: 90px;
  position: relative;
  overflow: hidden;
}
.banner-two .banner-two__slider-single {
  padding: 120px 0px;
  position: relative;
  z-index: 1;
}
.banner-two .banner-two__slider-single::after {
  content: "";
  position: absolute;
  inset-block: 0px;
  inset-inline-start: 0px;
  width: 100%;
  height: 100%;
  background: linear-gradient(-104deg, rgba(12, 26, 23, 0) 1.9%, rgba(9, 31, 27, 0.08) 37.31%, rgba(9, 31, 27, 0.17) 40.18%, rgba(9, 31, 27, 0.37) 47.05%, rgba(9, 31, 27, 0.67) 56.36%, #091f1b 73.4%, #091f1b 95.2%, rgba(9, 31, 27, 0.91) 103.44%);
  z-index: -3;
}
.banner-two .banner-two__slider-bg {
  position: absolute;
  inset: 0px;
  z-index: -4;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.banner-two .banner-two__slider-content h1 {
  color: var(--white);
  font-weight: 800;
  margin-top: 24px;
  margin-bottom: -10px;
  max-width: 460px;
}
.banner-two .banner-two__slider-content h1 br {
  display: none;
}
.banner-two .banner-two__slider-content h1 span {
  font-family: var(--caveat);
  color: var(--base-color);
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left 0px bottom 0px;
  font-size: 40px;
}
.banner-two .banner-two__slider-content span, .banner-two .banner-two__slider-content h1, .banner-two .banner-two__slider-content .banner__content-cta {
  opacity: 0;
  -webkit-transform: translateX(-20px);
  -ms-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: all 1000ms ease;
  transition: all 1000ms ease;
}
.banner-two .banner__content-cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 24px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.banner-two .btn--tertiary, .banner-two .btn--primary {
  padding: 18px 40px;
  border-radius: 60px;
  font-weight: 700;
  gap: 8px;
}
.banner-two .btn--tertiary::before, .banner-two .btn--tertiary::after, .banner-two .btn--primary::before, .banner-two .btn--primary::after {
  border-radius: 0px;
}
.banner-two .btn--tertiary i, .banner-two .btn--primary i {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: transform 0.5s ease, color 0s ease;
  transition: transform 0.5s ease, color 0s ease, -webkit-transform 0.5s ease;
  font-size: 18px;
}
.banner-two .btn--tertiary:hover i, .banner-two .btn--primary:hover i {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.banner-two .slider-navigation {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  inset-inline-end: 60px;
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 16px;
}
.banner-two .swiper-slide-active .banner-two__slider-bg {
  -webkit-animation: backgroundAnimation 12s ease-in-out;
  animation: backgroundAnimation 12s ease-in-out;
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}
.banner-two .swiper-slide-active .banner-two__slider-content span {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-delay: 600ms;
  transition-delay: 600ms;
}
.banner-two .swiper-slide-active .banner-two__slider-content h1 {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-delay: 1000ms;
  transition-delay: 1000ms;
}
.banner-two .swiper-slide-active .banner-two__slider-content .banner__content-cta {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-delay: 1400ms;
  transition-delay: 1400ms;
}
.banner-two .shape-left {
  position: absolute;
  inset-inline-start: 0px;
  top: 60%;
  bottom: 0px;
  z-index: 2;
}
.banner-two .shape-left img {
  width: 100%;
  height: 100%;
  -webkit-animation: moveTopBottom 4s ease-in-out infinite;
  animation: moveTopBottom 4s ease-in-out infinite;
}
.banner-two .sprade-shape {
  position: absolute;
  top: 60%;
  inset-inline-start: 80%;
  z-index: 2;
}
.banner-two .sprade-shape img {
  max-width: 5vw;
  min-width: 30px;
  -webkit-animation: pulse 4s infinite ease-in-out;
  animation: pulse 4s infinite ease-in-out;
}
.banner-two .shape {
  position: absolute;
  inset-inline-start: 0px;
  inset-inline-end: 0px;
  top: -5px;
  z-index: 3;
}
.banner-two .shape img {
  width: 100%;
  height: 28px;
}
.banner-two .unity {
  position: absolute;
  inset-block-end: 0px;
  inset-inline-end: 0px;
  z-index: 1;
}
.banner-two .unity img {
  -webkit-animation: moveLeftRight 4s ease-in-out infinite;
  animation: moveLeftRight 4s ease-in-out infinite;
  max-width: 15vw;
  min-width: 50px;
}
@-webkit-keyframes backgroundAnimation {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}
@keyframes backgroundAnimation {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}
@-webkit-keyframes moveLeftRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 0.8;
  }
  25% {
    opacity: 1;
  }
  50% {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
    opacity: 0.8;
  }
  75% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 0.8;
  }
}
@keyframes moveLeftRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 0.8;
  }
  25% {
    opacity: 1;
  }
  50% {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
    opacity: 0.8;
  }
  75% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 0.8;
  }
}
@-webkit-keyframes moveLeftRightSm {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes moveLeftRightSm {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@-webkit-keyframes moveTopBottom {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 0.8;
  }
  25% {
    opacity: 1;
  }
  50% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0.8;
  }
  75% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 0.8;
  }
}
@keyframes moveTopBottom {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 0.8;
  }
  25% {
    opacity: 1;
  }
  50% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0.8;
  }
  75% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 0.8;
  }
}
.banner-three {
  background-color: #101a24;
  margin-top: 90px;
  padding: 120px 0px 170px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.banner-three .sub-title {
  margin-top: 0px;
}
.banner-three h1 {
  font-weight: 700;
  color: var(--white);
  margin: 16px 0px 24px;
}
.banner-three h1 span {
  font-family: var(--caveat);
  color: var(--base-color);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left 0px bottom 0px;
  font-size: 40px;
}
.banner-three h1 br {
  display: none;
}
.banner-three p {
  color: var(--white);
  max-width: 560px;
}
.banner-three .banner__content-cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 24px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.banner-three .btn--tertiary, .banner-three .btn--primary {
  padding: 18px 40px;
  border-radius: 60px;
  font-weight: 700;
  gap: 8px;
}
.banner-three .btn--tertiary::before, .banner-three .btn--tertiary::after, .banner-three .btn--primary::before, .banner-three .btn--primary::after {
  border-radius: 0px;
}
.banner-three .btn--tertiary i, .banner-three .btn--primary i {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: transform 0.5s ease, color 0s ease;
  transition: transform 0.5s ease, color 0s ease, -webkit-transform 0.5s ease;
  font-size: 18px;
}
.banner-three .btn--tertiary:hover i, .banner-three .btn--primary:hover i {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.banner-three .banner-three__thumb {
  min-width: 60vw;
}
.banner-three .banner-three__thumb-inner {
  height: 600px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 30px;
}
.banner-three .banner-three__thumb-inner .group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 30px;
}
.banner-three .banner-three__thumb-inner .m-one img, .banner-three .banner-three__thumb-inner .m-four img, .banner-three .banner-three__thumb-inner .m-five img {
  border-radius: 90px;
}
.banner-three .banner-three__thumb-inner .m-three img, .banner-three .banner-three__thumb-inner .m-two img {
  border-radius: 60px;
}
.banner-three .banner-three__content span, .banner-three .banner-three__content h1, .banner-three .banner-three__content p, .banner-three .banner-three__content .banner__content-cta {
  opacity: 0;
  -webkit-transform: translateX(-20px);
  -ms-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: all 1000ms ease;
  transition: all 1000ms ease;
}
.banner-three .swiper-slide-active .banner-three__content span {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-delay: 600ms;
  transition-delay: 600ms;
}
.banner-three .swiper-slide-active .banner-three__content h1 {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-delay: 1000ms;
  transition-delay: 1000ms;
}
.banner-three .swiper-slide-active .banner-three__content p {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-delay: 1400ms;
  transition-delay: 1400ms;
}
.banner-three .swiper-slide-active .banner-three__content .banner__content-cta {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-delay: 1800ms;
  transition-delay: 1800ms;
}
.banner-three .shape-lg {
  position: absolute;
  z-index: -1;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  inset-inline-end: 20%;
}
.banner-three .shape-lg img {
  max-width: 30vw;
  min-width: 80px;
  -webkit-animation: pulseSm 4s infinite ease-in-out;
  animation: pulseSm 4s infinite ease-in-out;
}
.banner-three .sprade-shape {
  position: absolute;
  top: 25%;
  inset-inline-start: 10%;
  z-index: -1;
}
.banner-three .sprade-shape img {
  max-width: 5vw;
  min-width: 30px;
  -webkit-animation: pulse 4s infinite ease-in-out;
  animation: pulse 4s infinite ease-in-out;
}
.banner-three .parasuit {
  position: absolute;
  top: -150px;
  inset-inline-start: 8%;
  z-index: -1;
  -webkit-transform: translate(0px);
  -ms-transform: translate(0px);
  transform: translate(0px);
  -webkit-animation: fall 15s ease-in-out infinite;
  animation: fall 15s ease-in-out infinite;
}
.banner-three .parasuit img {
  max-width: 8vw;
  min-width: 40px;
}
@-webkit-keyframes fall {
  0% {
    top: -150px;
    -webkit-transform: translateX(-50%) rotate(0deg);
    transform: translateX(-50%) rotate(0deg);
  }
  25% {
    -webkit-transform: translateX(-45%) rotate(-40deg);
    transform: translateX(-45%) rotate(-40deg);
  }
  50% {
    top: 400px;
    -webkit-transform: translateX(-50%) rotate(-10deg);
    transform: translateX(-50%) rotate(-10deg);
  }
  75% {
    -webkit-transform: translateX(-55%) rotate(-30deg);
    transform: translateX(-55%) rotate(-30deg);
  }
  100% {
    top: 1600px;
    -webkit-transform: translateX(-50%) rotate(-10deg);
    transform: translateX(-50%) rotate(-10deg);
  }
}
@keyframes fall {
  0% {
    top: -150px;
    -webkit-transform: translateX(-50%) rotate(0deg);
    transform: translateX(-50%) rotate(0deg);
  }
  25% {
    -webkit-transform: translateX(-45%) rotate(-40deg);
    transform: translateX(-45%) rotate(-40deg);
  }
  50% {
    top: 400px;
    -webkit-transform: translateX(-50%) rotate(-10deg);
    transform: translateX(-50%) rotate(-10deg);
  }
  75% {
    -webkit-transform: translateX(-55%) rotate(-30deg);
    transform: translateX(-55%) rotate(-30deg);
  }
  100% {
    top: 1600px;
    -webkit-transform: translateX(-50%) rotate(-10deg);
    transform: translateX(-50%) rotate(-10deg);
  }
}
.common-banner {
  padding: 120px 0px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  margin-top: 90px;
}
.common-banner::before {
  content: "";
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  background: linear-gradient(-104deg, rgba(12, 26, 23, 0) 1.9%, rgba(9, 31, 27, 0.48) 37.31%, rgba(9, 31, 27, 0.17) 40.18%, rgba(9, 31, 27, 0.37) 47.05%, rgba(9, 31, 27, 0.67) 56.36%, #091f1b 73.4%, #091f1b 95.2%, rgba(9, 31, 27, 0.91) 103.44%);
  z-index: -2;
}
.common-banner .sub-title {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  font-family: var(--caveat);
  color: var(--base-color);
  font-size: 20px;
  line-height: 34px;
  margin-bottom: 14px;
  margin-top: 0px;
}
.common-banner h2 {
  color: var(--white);
  font-weight: 800;
}
.common-banner .banner-bg {
  position: absolute;
  inset: 0px;
  z-index: -3;
  overflow: hidden;
}
.common-banner .banner-bg img {
  width: 100%;
  height: 100%;
}
.common-banner .banner-bg .parallax-image-wrap, .common-banner .banner-bg .parallax-image-inner {
  width: 100%;
  height: 100%;
}
.common-banner .common-banner__content {
  margin-block: -6px -8px;
}
.common-banner .shape {
  position: absolute;
  inset-inline-start: 0px;
  inset-inline-end: 0px;
  top: -5px;
}
.common-banner .shape img {
  width: 100%;
  height: 28px;
}
.common-banner .sprade {
  position: absolute;
  z-index: -1;
  bottom: 9%;
  inset-inline-start: 7%;
}
.common-banner .sprade img {
  max-width: 5vw;
  min-width: 30px;
  -webkit-animation: pulse 4s infinite ease-in-out;
  animation: pulse 4s infinite ease-in-out;
}
@-webkit-keyframes pulseSm {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
  }
}
@keyframes pulseSm {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
  }
}
/* ==== 
 --------- (4.02) banner styles end ---------
 ==== */
/* ==== 
 --------- (4.03) footer styles start ---------
 ==== */
.footer {
  padding-top: 100px;
  background-color: #0b1312;
  position: relative;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  background: linear-gradient(104deg, rgba(12, 26, 23, 0) 1.9%, rgba(9, 31, 27, 0.08) 37.31%, rgba(9, 31, 27, 0.17) 40.18%, rgba(9, 31, 27, 0.37) 47.05%, rgba(9, 31, 27, 0.67) 56.36%, #091f1b 73.4%, #091f1b 95.2%, rgba(9, 31, 27, 0.91) 103.44%);
}
.footer .footer__inner {
  position: relative;
  z-index: 2;
}
.footer .footer__intro {
  margin-bottom: 80px;
}
.footer .footer__content {
  text-align: center;
}
.footer .footer__content h3 {
  font-weight: 800;
  color: var(--white);
  margin-top: -8px;
}
.footer .footer__content h3 span {
  color: var(--base-color);
}
.footer .footer__support {
  text-align: center;
}
.footer .footer__support a {
  border-radius: 66px;
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(12.5px);
  backdrop-filter: blur(12.5px);
  padding: 37px 24px 37px 24px;
  max-width: 426px;
  font-size: 14px;
  color: var(--white);
  font-weight: 700;
  overflow: hidden;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-transition: color 0.5s ease 0.5s;
  transition: color 0.5s ease 0.5s;
}
.footer .footer__support a::before {
  content: "";
  position: absolute;
  inset-inline-start: 8px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 85px;
  height: 85px;
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  -webkit-transition: inset-inline-start 0.5s ease 0.5s, background-color 0.9s ease 0.5s, -webkit-transform 0.5s ease;
  transition: inset-inline-start 0.5s ease 0.5s, background-color 0.9s ease 0.5s, -webkit-transform 0.5s ease;
  transition: inset-inline-start 0.5s ease 0.5s, transform 0.5s ease, background-color 0.9s ease 0.5s;
  transition: inset-inline-start 0.5s ease 0.5s, transform 0.5s ease, background-color 0.9s ease 0.5s, -webkit-transform 0.5s ease;
  z-index: -1;
}
.footer .footer__support a span {
  color: var(--base-color);
  font-weight: 700;
  -webkit-transition: color 0.5s ease 0.5s;
  transition: color 0.5s ease 0.5s;
}
.footer .footer__support a:hover {
  color: var(--secondary-color);
}
.footer .footer__support a:hover::before {
  inset-inline-start: 40%;
  -webkit-transform: scale(20);
  -ms-transform: scale(20);
  transform: scale(20);
  -webkit-transition: inset-inline-start 0.5s ease, background-color 0.9s ease 0.5s, -webkit-transform 0.9s ease 0.5s;
  transition: inset-inline-start 0.5s ease, background-color 0.9s ease 0.5s, -webkit-transform 0.9s ease 0.5s;
  transition: inset-inline-start 0.5s ease, transform 0.9s ease 0.5s, background-color 0.9s ease 0.5s;
  transition: inset-inline-start 0.5s ease, transform 0.9s ease 0.5s, background-color 0.9s ease 0.5s, -webkit-transform 0.9s ease 0.5s;
  background-color: var(--base-color);
}
.footer .footer__support a:hover span {
  color: var(--secondary-color);
}
.footer .footer__newsletter {
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  padding: 50px 20px;
}
.footer .footer__newsletter-info h4 {
  font-weight: 800;
  color: var(--white);
  margin-top: -8px;
  margin-bottom: 6px;
}
.footer .footer__newsletter-info p {
  color: #93989c;
}
.footer .footer__newsletter-check {
  margin-top: 24px;
}
.footer .footer__newsletter-check input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0px;
  display: none;
  cursor: pointer;
}
.footer .footer__newsletter-check label {
  position: relative;
  cursor: pointer;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}
.footer .footer__newsletter-check label a {
  color: var(--white);
  text-decoration: underline;
}
.footer .footer__newsletter-check label a:hover {
  color: var(--base-color);
}
.footer .footer__newsletter-check label:before {
  content: "";
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: 1px solid #4e545f;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  -webkit-margin-end: 12px;
  margin-inline-end: 12px;
  margin-top: -2px;
}
.footer .footer__newsletter-check input:checked + label:after {
  content: "";
  display: block;
  position: absolute;
  top: 8px;
  inset-inline-start: 9px;
  width: 6px;
  height: 10px;
  border: solid var(--base-color);
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.footer .footer__newsletter-check input:checked + label::before {
  border-color: var(--base-color);
}
.footer .footer__list-intro {
  margin-bottom: 30px;
}
.footer .footer__list-intro h5 {
  font-weight: 700;
  color: var(--white);
  margin-top: -8px;
}
.footer .footer__list-items li {
  margin-bottom: 12px;
}
.footer .footer__list-items li:nth-last-of-type(1) {
  margin-bottom: 0px;
}
.footer .footer__list-items a {
  font-weight: 700;
  font-size: 16px;
  color: #93989c;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.footer .footer__list-items a i {
  position: absolute;
  inset-inline-start: 0px;
  -webkit-transform: translateX(-20px);
  -ms-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.footer .footer__list-items a:hover {
  color: var(--base-color);
  -webkit-padding-start: 25px;
  padding-inline-start: 25px;
}
.footer .footer__list-items a:hover i {
  -webkit-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
}
.footer .footer__list-group {
  margin-bottom: 40px;
}
.footer .footer__list-group:nth-last-of-type(1) {
  margin-bottom: 0px;
}
.footer .footer__list-group:nth-last-of-type(1) p:nth-last-of-type(1) a {
  font-size: 18px;
  color: var(--base-color);
}
.footer .footer__list-group .footer__list-intro {
  margin-bottom: 20px;
}
.footer .footer__list-group p {
  margin-bottom: 14px;
}
.footer .footer__list-group p:nth-last-of-type(1) {
  margin-bottom: 0px;
}
.footer .footer__list-group a {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.55);
  text-transform: lowercase;
}
.footer .footer__list-group a:hover {
  color: var(--base-color);
}
.footer .footer__copyright-inner {
  padding: 30px 0px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 80px;
}
.footer .footer__copyright p {
  color: var(--white);
}
.footer .footer__copyright p a:hover {
  color: var(--white);
}
.footer .footer__copyright-logo {
  margin: 6px 0px;
}
.footer .footer__bottom-left li span {
  height: 16px;
  width: 1px;
  background-color: var(--white);
  margin-bottom: -3px;
}
.footer .footer__bottom-right {
  direction: ltr;
}
.footer .footer__bottom-right a {
  color: var(--base-color);
}
.footer .footer__bottom-right a:hover {
  color: var(--white);
}
.footer .footer__bottom-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  row-gap: 6px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.footer .footer__bottom-list a {
  color: var(--white);
  position: relative;
}
.footer .footer__bottom-list a::after {
  content: "";
  position: absolute;
  width: 0px;
  height: 1px;
  bottom: 2px;
  inset-inline-start: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: var(--base-color);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.footer .footer__bottom-list a:hover {
  color: var(--base-color);
}
.footer .footer__bottom-list a:hover::after {
  width: 100%;
}
.footer-two {
  padding-top: 100px;
  background-color: var(--secondary-color);
  position: relative;
  z-index: 1;
}
.footer-two::after {
  content: "";
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  background: #e0f0ee;
  z-index: -2;
}
.footer-two .footer-two__newsletter-content h3 {
  font-weight: 800;
  color: var(--white);
  margin: -8px 0px 8px;
}
.footer-two .footer-two__newsletter-content p {
  font-weight: 600;
  font-size: 18px;
  color: #949d9c;
}
.footer-two .divider {
  margin: 80px 0px;
  width: 100%;
  opacity: 0.5;
  border-color: rgba(255, 255, 255, 0.2);
}
.footer-two .footer-two__widget .footer-two__widget-logo {
  margin-bottom: 30px;
}
.footer-two .footer-two__widget p {
  color: #949d9c;
  font-weight: 500;
}
.footer-two .footer-two__widget .social {
  gap: 14px;
  margin-top: 35px;
}
.footer-two .footer-two__widget .social a {
  width: 46px;
  min-width: 46px;
  height: 46px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 1px solid #28434d;
  color: #28434d;
  font-size: 14px;
}
.footer-two .footer-two__widget .social a:hover {
  background-color: var(--base-color);
  color: var(--secondary-color);
  border-color: var(--base-color);
}
.footer-two .footer-two__widget h5 {
  font-weight: 800;
  color: #1a353d;
  margin-top: -8px;
}
.footer-two .footer-two__widget .line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
}
.footer-two .footer-two__widget span {
  background-color: #28434d;
  height: 2px;
  width: 10px;
}
.footer-two .footer-two__widget .large-line {
  width: 50px;
}
.footer-two .footer-two__widget .footer-two__widget-intro {
  margin-bottom: 10px;
}
.footer-two .footer-two__widget li {
  margin-bottom: 12px;
}
.footer-two .footer-two__widget li:nth-last-of-type(1) {
  margin-bottom: 0px;
}
.footer-two .footer-two__widget li a {
  color: #204550;
  position: relative;
}
.footer-two .footer-two__widget li a::after {
  content: "";
  position: absolute;
  width: 0px;
  height: 1px;
  bottom: 2px;
  inset-inline-start: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  /*background-color: #bababa;*/
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.footer-two .footer-two__widget li a i {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.footer-two .footer-two__widget li a:hover {
  color: #392f83;
}
.footer-two .footer-two__widget li a:hover::after {
  width: 100%;
}
.footer-two .footer-two__widget .footer-two__widget-content--contact li {
  margin-bottom: 16px;
}
.footer-two .footer-two__widget .footer-two__widget-content--contact li:nth-last-of-type(1) {
  margin-bottom: 0px;
}
.footer-two .footer-two__widget .footer-two__widget-content--contact a {
  gap: 16px;
  text-transform: lowercase;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.footer-two .footer-two__widget .footer-two__widget-content--contact a i {
  color: #28434d;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  font-size: 18px;
  margin-top: 6px;
}
.footer-two .footer-two__copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 20px;
  padding: 6px 0px;
}
.footer-two .footer-two__copyright-inner {
  direction: ltr;
}
.footer-two .footer-two__copyright-inner p {
  font-weight: 600;
  font-size: 12px;
  color: #28434d;
}
.footer-two .footer-two__copyright-inner p a {
  color: var(--base-color);
}
.footer-two .footer-two__copyright-inner p a:hover {
  color: var(--white);
}
.footer-two .footer__bottom-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 30px;
  row-gap: 6px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.footer-two .footer__bottom-list a {
  color: #28434d;
  position: relative;
  font-size: 12px;
}
.footer-two .footer__bottom-list a::after {
  content: "";
  position: absolute;
  width: 0px;
  height: 1px;
  bottom: 2px;
  inset-inline-start: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: var(--base-color);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.footer-two .footer__bottom-list a:hover {
  color: var(--base-color);
}
.footer-two .footer__bottom-list a:hover::after {
  width: 100%;
}
.footer-two .sprade, .footer-two .sprade-light {
  position: absolute;
  z-index: -1;
  top: 27%;
  inset-inline-start: 4%;
}
.footer-two .sprade img, .footer-two .sprade-light img {
  max-width: 5vw;
  min-width: 30px;
  -webkit-animation: pulse 4s infinite ease-in-out;
  animation: pulse 4s infinite ease-in-out;
}
.footer-two .sprade-light {
  bottom: 30%;
  top: unset;
  inset-inline-start: unset;
  inset-inline-end: 8%;
}
.footer-two .sprade-light img {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
@-webkit-keyframes pulse {
  0%, 100% {
    -webkit-transform: scale(1) translate(-50%, -50%);
    transform: scale(1) translate(-50%, -50%);
    opacity: 0.3;
  }
  50% {
    -webkit-transform: scale(1.2) translate(-50%, -50%);
    transform: scale(1.2) translate(-50%, -50%);
    opacity: 1;
  }
}
@keyframes pulse {
  0%, 100% {
    -webkit-transform: scale(1) translate(-50%, -50%);
    transform: scale(1) translate(-50%, -50%);
    opacity: 0.3;
  }
  50% {
    -webkit-transform: scale(1.2) translate(-50%, -50%);
    transform: scale(1.2) translate(-50%, -50%);
    opacity: 1;
  }
}
.footer-three {
  background-color: #0c141f;
  padding-top: 100px;
}
.footer-three .divider {
  border: 0px;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 80px 0px;
}
.footer-three .footer-two__widget-intro {
  margin-bottom: 30px;
}
.footer-three .footer-two__widget-intro h5, .footer-three .footer-two__widget-intro h6 {
  font-weight: 700;
  color: var(--white);
  margin-top: -8px;
}
.footer-three .footer-three__widget-single p {
  color: #8a8c94;
  margin-top: -8px;
  margin-bottom: 16px;
  max-width: 250px;
}
.footer-three .footer-three__widget-single p:nth-last-of-type(1) {
  margin-bottom: 0px;
}
.footer-three .footer-three__widget-single a {
  text-transform: lowercase;
  font-weight: 700;
  color: var(--base-color);
}
.footer-three .footer-three__widget-single a:hover {
  color: var(--white);
}
.footer-three .footer-three__widget-alt {
  margin-top: 40px;
}
.footer-three .footer-three__widget-alt .footer-two__widget-intro {
  margin-bottom: 20px;
}
.footer-three .footer-three__widget-alt p {
  margin-bottom: 12px;
  color: var(--white);
  font-weight: 500;
}
.footer-three .footer-three__widget-alt p:nth-last-of-type(1) {
  margin-bottom: 0px;
}
.footer-three .footer-three__logo {
  text-align: center;
}
.footer-three .footer-three__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 60px;
  row-gap: 30px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.footer-three .footer__bottom-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 30px;
  row-gap: 6px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.footer-three .footer__bottom-list a {
  color: var(--white);
  position: relative;
}
.footer-three .footer__bottom-list a::after {
  content: "";
  position: absolute;
  width: 0px;
  height: 1px;
  bottom: 2px;
  inset-inline-start: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: var(--base-color);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.footer-three .footer__bottom-list a:hover {
  color: var(--base-color);
}
.footer-three .footer__bottom-list a:hover::after {
  width: 100%;
}
.footer-three .social a {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--white);
  font-size: 14px;
}
.footer-three .social a:hover {
  background-color: var(--quaternary-color);
}
.footer-three .footer-three__widget-news {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  padding-bottom: 30px;
  padding-top: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-three .footer-three__widget-news:nth-of-type(1) {
  padding-top: 0px;
}
.footer-three .footer-three__widget-news:nth-last-of-type(1) {
  border-bottom: 0px;
  padding-bottom: 0px;
}
.footer-three .footer-three__widget-news .thumb a {
  width: 85px;
  min-width: 85px;
  height: 85px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
}
.footer-three .footer-three__widget-news .thumb a img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.footer-three .footer-three__widget-news .thumb a:hover img {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
.footer-three .footer-three__widget-news .content p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1;
  margin-bottom: 16px;
  font-weight: 500;
  color: #929595;
}
.footer-three .footer-three__widget-news .content p:nth-last-of-type(1) {
  margin-bottom: 0px;
}
.footer-three .footer-three__widget-news .content p i {
  color: var(--quaternary-color);
}
.footer-three .footer-three__widget-news .content a {
  font-weight: 600;
  line-height: 20px;
  color: var(--white);
}
.footer-three .footer-three__widget-news .content a:hover {
  color: var(--base-color);
}
.footer-three .single-address {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
}
.footer-three .single-address:nth-last-of-type(1) {
  margin-bottom: 0px;
}
.footer-three .single-address i {
  font-size: 24px;
  color: var(--quaternary-color);
}
.footer-three .single-address p {
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  color: var(--white);
  max-width: 240px;
  margin-bottom: 12px;
}
.footer-three .single-address p:nth-last-of-type(1) {
  margin-bottom: 0px;
}
.footer-three .single-address p a {
  font-size: 15px;
  line-height: 20px;
  color: #929595;
  font-weight: 500;
  text-transform: lowercase;
}
.footer-three .single-address p a:hover {
  color: var(--base-color);
}
.footer-three .footer-three__widget--newsletter p {
  color: var(--white);
  margin-top: -8px;
  font-size: 14px;
}
.footer-three .footer-three__widget--newsletter form {
  padding: 30px 20px;
  background-color: rgba(255, 255, 255, 0.03);
  margin-top: 30px;
  border-radius: 5px;
}
.footer-three .footer-three__widget--newsletter .input-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-three .footer-three__widget--newsletter .input-icon input {
  background-color: transparent;
  color: var(--white);
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 100%;
  padding: 10px 0px !important;
}
.footer-three .footer-three__widget--newsletter .input-icon button {
  font-size: 16px;
  min-width: 16px;
  color: var(--quaternary-color);
}
.footer-three .footer-three__widget--newsletter .input-icon button:hover {
  color: var(--base-color);
}
.footer-three .footer-three__widget--newsletter .input-icon i {
  position: static;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}
.footer-three .footer__newsletter-check {
  margin-top: 24px;
}
.footer-three .footer__newsletter-check input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0px;
  display: none;
  cursor: pointer;
}
.footer-three .footer__newsletter-check label {
  position: relative;
  cursor: pointer;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  direction: ltr;
}
.footer-three .footer__newsletter-check label a {
  color: var(--quaternary-color);
  font-size: 14px;
  font-weight: 500;
}
.footer-three .footer__newsletter-check label a:hover {
  color: var(--base-color);
}
.footer-three .footer__newsletter-check label:before {
  content: "";
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: 1px solid #4e545f;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  -webkit-margin-end: 12px;
  margin-inline-end: 12px;
  margin-top: -2px;
}
.footer-three .footer__newsletter-check input:checked + label:after {
  content: "";
  display: block;
  position: absolute;
  top: 8px;
  inset-inline-start: 9px;
  width: 6px;
  height: 10px;
  border: solid var(--base-color);
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.footer-three .footer__newsletter-check input:checked + label::before {
  border-color: var(--base-color);
}
.footer-three .footer-two__copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 80px;
  padding: 30px 0px;
  direction: ltr;
}
.footer-three .footer-two__copyright p {
  font-weight: 600;
  color: var(--white);
}
.footer-three .footer-two__copyright p a {
  color: var(--base-color);
}
.footer-three .footer-two__copyright p a:hover {
  color: var(--white);
}
/* ==== 
 --------- (4.03) footer styles end ---------
 ==== */
/* ==== 
 --------- (5.01) partner section styles start ---------
 ==== */
.partner {
  padding: 80px 0px;
  background-color: #edeeef;
}
.partner .partner__slider-single {
  text-align: center;
}
/* ==== 
 --------- (5.01) partner section styles end ---------
 ==== */
/* ==== 
 --------- (5.02) difference section styles start ---------
 ==== */
.difference {
  padding-top: 100px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.difference .difference__inner {
  position: relative;
}
.difference .difference__single {
  text-align: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 80px 0px;
}
.difference .difference__single:hover .difference__single-thumb {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.difference .difference__single-thumb {
  width: 100px;
  min-width: 100px;
  height: 100px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: var(--secondary-color);
  margin-inline: auto;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.difference .difference__single-thumb i {
  font-size: 50px;
  color: var(--white);
}
.difference .difference__single-content {
  margin-top: 34px;
}
.difference .difference__single-content h5 {
  font-weight: 800;
  color: var(--secondary-color);
}
.difference .difference__single-content h5:hover {
  color: var(--hover-color);
}
.difference .difference__single-content p {
  max-width: 260px;
  margin-inline: auto;
  font-weight: 500;
  margin-top: 20px;
}
.difference .difference__single-first .difference__single-thumb {
  background-color: #cb162b;
}
.difference .difference__single-second .difference__single-thumb {
  background-color: #1b325c !important;
}
.difference .difference__single-third .difference__single-thumb {
  background-color: #ff5528;
}
.difference .slider-navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.difference .shape-hand {
  position: absolute;
  inset-inline-start: 0px;
  inset-block-start: 0px;
  z-index: -1;
}
.difference .shape-hand img {
  max-width: 10vw;
  min-width: 30px;
  animation: moveUpDown 10s ease-in-out infinite alternate-reverse;
}
@-webkit-keyframes moveUpDown {
  0% {
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
    opacity: 0.5;
  }
  50% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    opacity: 0.5;
  }
}
@keyframes moveUpDown {
  0% {
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
    opacity: 0.5;
  }
  50% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    opacity: 0.5;
  }
}
.difference-two {
  padding: 100px 0px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.difference-two .difference-two__thumb-wrapper {
  direction: rtl;
}
.difference-two .difference-two__thumb {
  text-align: end;
  position: relative;
  min-width: 60vw;
  direction: ltr;
}
.difference-two .difference-two__thumb .thumb-lg {
  display: inline-block;
  margin-bottom: 80px;
  -webkit-margin-end: 80px;
  margin-inline-end: 80px;
  border-radius: 30px;
  position: relative;
  z-index: 1;
}
.difference-two .difference-two__thumb .thumb-lg img {
  border-radius: 30px;
}
.difference-two .difference-two__thumb .thumb-lg::before {
  content: "";
  position: absolute;
  inset: 0px;
  background: linear-gradient(104deg, rgba(12, 26, 23, 0) 1.9%, rgba(0, 113, 93, 0.08) 18.93%, rgba(0, 113, 93, 0.17) 29.72%, rgba(0, 113, 93, 0.37) 83.58%, rgba(0, 113, 93, 0.67) 109.85%, #00715d 133.89%, #00715d 133.91%, rgba(0, 113, 93, 0.91) 149.32%);
  border-radius: inherit;
}
.difference-two .difference-two__thumb .thumb-sm {
  position: absolute;
  bottom: 0px;
  inset-inline-end: 0px;
  z-index: 2;
}
.difference-two .difference-two__thumb .thumb-sm img {
  border: 8px solid var(--white);
  border-radius: 40px;
  -webkit-box-shadow: var(--shadow-secondary);
  box-shadow: var(--shadow-secondary);
}
.difference-two .difference-two__thumb .grid-line {
  position: absolute;
  inset-inline-start: -35px;
  top: -40px;
  z-index: -1;
}
.difference-two .difference-two__thumb .grid-line img {
  -webkit-animation: moveTopBottom 4s ease-in-out infinite;
  animation: moveTopBottom 4s ease-in-out infinite;
}
.difference-two .difference-two__content .sub-title {
  color: var(--quaternary-color);
}
.difference-two .difference-two__content h2 {
  font-weight: 800;
  color: var(--secondary-color);
  margin: 16px 0px 20px;
}
.difference-two .difference-two__content h2 span {
  color: var(--base-color);
}
.difference-two .difference-two__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.difference-two .difference-two__inner-content {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.difference-two .difference-two__tab-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  border-bottom: 1px solid #dedede;
  position: relative;
  padding-bottom: 16px;
}
.difference-two .difference-two__tab-btns .difference-two__tab-btn {
  padding: 12px 30px;
  border-radius: 40px;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  font-weight: 700;
  color: var(--secondary-color);
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.difference-two .difference-two__tab-btns .difference-two__tab-btn:hover {
  background-color: var(--quaternary-color);
  color: var(--white);
}
.difference-two .difference-two__tab-btns .active {
  background-color: var(--quaternary-color);
  color: var(--white);
}
.difference-two .difference-two__tab-content {
  margin-top: 30px;
}
.difference-two .difference-two__tab-content li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: #696969;
  margin-bottom: 6px;
}
.difference-two .difference-two__tab-content li:nth-last-of-type(1) {
  margin-bottom: 0px;
}
.difference-two .difference-two__tab-content li i {
  color: var(--base-color);
  font-size: 20px;
}
.difference-two .difference-two__progress {
  margin-top: 35px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 24px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.difference-two .difference-progress-single {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.difference-two .difference-progress-single p {
  font-weight: 800;
  color: var(--secondary-color);
  line-height: 1.4;
}
.difference-two .difference-progress-single p br {
  display: none;
}
.difference-two .difference-progress-single .progress-bar-single {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 80px;
}
.difference-two .difference-progress-single .circular-progress {
  position: relative;
  width: 100%;
  height: 100%;
}
.difference-two .difference-progress-single .progress-circle {
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.difference-two .difference-progress-single .circle-bg, .difference-two .difference-progress-single .circle-progress {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}
.difference-two .difference-progress-single .circle-bg {
  stroke: #e6e6e6;
}
.difference-two .difference-progress-single .circle-progress {
  stroke: var(--quaternary-color);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  -webkit-transition: stroke-dashoffset 0.3s;
  transition: stroke-dashoffset 0.3s;
}
.difference-two .difference-progress-single .percent-value {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: 700;
  color: var(--secondary-color);
}
.difference-two .difference-two__card {
  width: 100%;
  min-width: 200px;
  border-radius: 13px;
  border: 1px solid rgba(18, 47, 42, 0.1882352941);
  background: rgba(177, 179, 185, 0.062745098);
  padding: 0px 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.difference-two .difference-two__card .card-group {
  padding: 24px 0px;
  text-align: center;
  display: block !important;
}
.difference-two .difference-two__card .card-group .thumb {
  display: block;
  margin-bottom: 20px;
}
.difference-two .difference-two__card .card-group .thumb i {
  font-size: 30px;
  color: var(--base-color);
}
.difference-two .difference-two__card .card-group h6 {
  font-weight: 700;
  color: var(--secondary-color);
  font-size: 16px;
}
.difference-two .difference-two__card .card-group p {
  font-size: 20px;
  font-family: var(--caveat);
  font-weight: 800;
  color: var(--base-color);
}
.difference-two .difference-two__card hr {
  border: 0px solid transparent;
  height: 1px;
  background-color: rgba(18, 47, 42, 0.1882352941);
}
.difference-two .difference-two__card .card-group-alt .thumb i {
  color: var(--quaternary-color);
}
.difference-two .difference-two__card .card-group-alt p {
  color: var(--quaternary-color);
}
.difference-two .spade {
  position: absolute;
  top: 18%;
  inset-inline-end: 3%;
  z-index: -1;
}
.difference-two .spade img {
  max-width: 5vw;
  min-width: 30px;
  -webkit-animation: pulse 4s infinite ease-in-out;
  animation: pulse 4s infinite ease-in-out;
}
.difference-three {
  padding: 100px 0px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.difference-three .difference-three__thumb {
  direction: rtl;
}
.difference-three .difference-three__thumb-inner {
  position: relative;
  padding-top: 40px;
  min-width: 550px;
  direction: ltr;
}
.difference-three .difference-three__thumb-inner .thumb-lg {
  -webkit-margin-end: 100px;
  margin-inline-end: 100px;
  border-radius: 16px;
}
.difference-three .difference-three__thumb-inner .thumb-lg .parallax-image-wrap {
  border-radius: 16px;
}
.difference-three .difference-three__thumb-inner .thumb-lg img {
  border-radius: 16px;
  min-height: 400px;
}
.difference-three .difference-three__thumb-inner .thumb-sm {
  position: absolute;
  bottom: 80px;
  inset-inline-end: 0px;
}
.difference-three .difference-three__thumb-inner .thumb-sm img {
  border-radius: 50%;
  border: 10px solid var(--white);
  -webkit-filter: drop-shadow(0px 4px 21px rgba(0, 0, 0, 0.09));
  filter: drop-shadow(0px 4px 21px rgba(0, 0, 0, 0.09));
}
.difference-three .difference-three__thumb-inner .line {
  position: absolute;
  top: 0px;
  inset-inline-end: 40%;
}
.difference-three .difference-three__thumb-inner .line img {
  -webkit-animation: wave 3s linear infinite;
  animation: wave 3s linear infinite;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
}
.difference-three .difference-three__thumb-inner .spade {
  position: absolute;
  top: 150px;
  inset-inline-start: 15%;
  z-index: 1;
}
.difference-three .difference-three__thumb-inner .spade img {
  max-width: 5vw;
  min-width: 30px;
  -webkit-animation: pulse 4s infinite ease-in-out;
  animation: pulse 4s infinite ease-in-out;
}
.difference-three .differnce-quote {
  padding: 24px 30px;
  background-color: var(--white);
  max-width: 580px;
  border-radius: 4px;
  -webkit-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.1);
  margin-top: 34px;
  border-left: 4px solid var(--base-color);
}
.difference-three .differnce-quote q {
  font-weight: 700;
  color: var(--secondary-color);
}
.difference-three .differnce-quote q span {
  color: var(--quaternary-color);
  font-size: inherit;
  font-weight: 700;
}
.difference-three .difference-three-cta {
  margin-top: 35px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 60px;
  row-gap: 16px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.difference-three .difference-three-cta .btn--primary {
  padding: 18px 40px;
  border-radius: 60px;
  font-weight: 700;
  gap: 8px;
}
.difference-three .difference-three-cta .btn--primary::before, .difference-three .difference-three-cta .btn--primary::after {
  border-radius: 0px;
}
.difference-three .difference-three-cta .btn--primary i {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: transform 0.5s ease, color 0s ease;
  transition: transform 0.5s ease, color 0s ease, -webkit-transform 0.5s ease;
  font-size: 18px;
}
.difference-three .difference-three-cta .btn--primary:hover i {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.difference-three .help__content-list {
  margin-top: 34px;
}
.difference-three .help__content-list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 16px;
  row-gap: 8px;
}
.difference-three .help__content-list li {
  color: var(--secondary-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  font-weight: 700;
}
.difference-three .help__content-list li i {
  font-size: 20px;
  color: var(--quaternary-color);
}
.difference-three .author-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.difference-three .author-info .author-thumb {
  width: 70px;
  min-width: 70px;
  height: 70px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.difference-three .author-info .author-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.difference-three .author-info h6 {
  font-weight: 700;
  color: var(--secondary-color);
  line-height: 1;
  margin-top: 8px;
}
.difference-three .author-info span {
  font-size: 14px;
  line-height: 1;
}
/* ==== 
 --------- (5.02) difference section styles end ---------
 ==== */
/* ==== 
 --------- (5.03) help section styles start ---------
 ==== */
.help {
  padding: 100px 0px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.help .help__thumb {
  direction: rtl;
}
.help .help__thumb-inner {
  text-align: end;
  position: relative;
  min-width: 575px;
  direction: ltr;
}
.help .help__thumb-inner .thumb {
  display: inline-block;
  border: 8px solid var(--white);
  border-radius: 20px;
  -webkit-box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.15);
}
.help .help__thumb-inner .thumb .parallax-image-inner, .help .help__thumb-inner .thumb .parallax-image-wrap {
  border-radius: 10px;
}
.help .help__thumb-inner .thumb img {
  border-radius: 10px;
}
.help .thumb-lg {
  margin-bottom: 100px;
  margin-top: 60px;
  position: relative;
  z-index: 1;
}
.help .thumb-lg::before {
  content: "";
  position: absolute;
  inset: 0px;
  background: linear-gradient(104deg, rgba(12, 26, 23, 0) 1.9%, rgba(0, 113, 93, 0.08) 18.93%, rgba(0, 113, 93, 0.17) 29.72%, rgba(0, 113, 93, 0.37) 83.58%, rgba(0, 113, 93, 0.67) 109.85%, #00715d 133.89%, #00715d 133.91%, rgba(0, 113, 93, 0.91) 149.32%);
  border-radius: inherit;
}
.help .thumb-lg::after {
  content: "";
  position: absolute;
  bottom: -100px;
  inset-inline-start: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 70%;
  height: 100%;
  border: 1px solid var(--base-color);
  border-radius: 20px;
  z-index: -1;
}
.help .video-btn-wrapper::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed var(--black);
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}
.help .video-btn-wrapper i {
  -webkit-margin-start: 5px;
  margin-inline-start: 5px;
}
.help .thumb-bottom {
  position: absolute;
  bottom: 0px;
  inset-inline-end: 0px;
  z-index: 2;
}
.help .thumb-top {
  position: absolute;
  top: 0px;
  inset-inline-start: 0px;
  z-index: 2;
}
.help .line {
  position: absolute;
  display: inline-block;
  top: 10px;
  inset-inline-end: 50px;
}
.help .line img {
  -webkit-animation: wave 3s linear infinite;
  animation: wave 3s linear infinite;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
}
.help .grid-line {
  position: absolute;
  inset-inline-start: -35px;
  top: 60%;
}
.help .grid-line img {
  -webkit-animation: moveTopBottom 4s ease-in-out infinite;
  animation: moveTopBottom 4s ease-in-out infinite;
}
.help .vertical-text {
  padding: 50px 30px;
  background-color: var(--quaternary-color);
  display: inline-block;
  position: absolute;
  bottom: 0px;
  inset-inline-start: 0px;
  border-top: 5px solid var(--base-color);
  border-bottom: 5px solid var(--base-color);
  border-radius: 20px;
  z-index: 3;
}
.help .vertical-text h5 {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  font-weight: 800;
  color: var(--white);
  text-transform: lowercase;
}
.help .vertical-text h5 span {
  color: var(--base-color);
}
.help .sub-title {
  color: var(--quaternary-color);
}
.help h2 {
  font-weight: 800;
  color: var(--secondary-color);
  margin: 16px 0px 10px;
}
.help h2 span {
  color: var(--base-color);
}
.help p {
  max-width: 630px;
}
.help .help__content-icon-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 40px;
  row-gap: 24px;
  margin: 35px 0px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.help .help__content-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
}
.help .help__content-icon .thumb {
  position: relative;
}
.help .help__content-icon .thumb::before {
  content: "";
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 40px;
  height: 40px;
  background-color: var(--base-color);
  z-index: -1;
  border-radius: 50%;
}
.help .help__content-icon .thumb i {
  font-size: 60px;
  color: var(--secondary-color);
}
.help .content h6 {
  font-weight: 800;
  color: var(--secondary-color);
  margin-top: -8px;
  margin-bottom: 6px;
}
.help .content p {
  font-size: 15px;
  line-height: 24px;
}
.help .help__content-list li {
  margin-bottom: 8px;
  color: var(--secondary-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
}
.help .help__content-list li i {
  font-size: 20px;
}
.help .help__content-cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 40px;
  row-gap: 24px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.help .help__content-cta .btn--primary {
  padding: 23px 46px;
  border-radius: 60px;
}
.help .help__content-cta .btn--primary::before, .help .help__content-cta .btn--primary::after {
  border-radius: 0px;
}
.help .help__content-cta .contact-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 15px;
}
.help .help__content-cta .contact-btn div {
  line-height: 0px;
}
.help .help__content-cta .contact-btn i {
  font-size: 30px;
  color: var(--secondary-color);
  margin-bottom: -5px;
}
.help .help__content-cta .contact-btn p {
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  color: #828a8d;
  margin-bottom: 8px;
}
.help .help__content-cta .contact-btn a {
  color: var(--secondary-color);
  line-height: 1;
  font-size: 18px;
  font-weight: 700;
}
.help .help__content-cta .contact-btn a:hover {
  color: var(--hover-color);
}
.help .hand {
  position: absolute;
  z-index: -1;
  top: 5%;
  inset-inline-start: 0px;
}
.help .hand img {
  max-width: 10vw;
  min-width: 30px;
  animation: moveUpDown 10s ease-in-out infinite alternate-reverse;
}
.help .spade {
  position: absolute;
  top: 65%;
  inset-inline-end: 3%;
  z-index: -1;
}
.help .spade img {
  max-width: 5vw;
  min-width: 30px;
  -webkit-animation: pulse 4s infinite ease-in-out;
  animation: pulse 4s infinite ease-in-out;
}
.help .parasuit {
  position: absolute;
  top: -150px;
  inset-inline-start: 8%;
  z-index: -1;
  -webkit-transform: translate(0px);
  -ms-transform: translate(0px);
  transform: translate(0px);
  -webkit-animation: fall 15s ease-in-out infinite;
  animation: fall 15s ease-in-out infinite;
}
.help .parasuit img {
  max-width: 8vw;
  min-width: 40px;
}

.pg-four .mt-60 {
  margin-top: 55px;
}
/*.help-two .help-two__thumb-inner::after {
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  inset-inline-start: -60px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  border: 1px dashed #f84d42;
  z-index: -1;
}*/


/* ==== 
 --------- (5.03) help section styles end ---------
 ==== */
/* ==== 
 --------- (5.04) cause slider section styles start ---------
 ==== */
.cause {
  padding: 0px 0px;
  /*background-color: #edeeef;*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left center;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.cause .section__header {
  margin-bottom: 0px !important;
}
.cause .section__header h2 {
  margin-bottom: 0px !important;
}
.cause .slider-navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  gap: 20px;
}
.cause .cause__slider-wrapper {
  margin-top: 35px;
}
.cause .cause__slider-single {
  padding: 12px;
  background-color: var(--white);
  -webkit-box-shadow: var(--shadow);
  box-shadow: var(--shadow);
  border-radius: 15px;
}
.cause .cause__slider-single:hover .thumb img {
  -webkit-transform: scale(1.2) rotate(10deg);
  -ms-transform: scale(1.2) rotate(10deg);
  transform: scale(1.2) rotate(10deg);
}
.cause .cause__slider-single:hover .thumb .tag a {
  background-color: var(--secondary-color);
  color: var(--white);
}
.cause .cause__slider-single:hover .cause__cta a {
  color: var(--white);
}
.cause .cause__slider-single:hover .cause__cta a::before, .cause .cause__slider-single:hover .cause__cta a::after {
  width: 0% !important;
}
.cause .thumb {
  position: relative;
  margin-bottom: 30px;
}
.cause .thumb a {
  border-radius: 15px;
  overflow: hidden;
  width: 100%;
}
.cause .thumb a img {
  height: 100%;
  width: 100%;
  border-radius: 15px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.cause .thumb .tag {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
}
.cause .thumb .tag a {
  padding: 8px 24px;
  background-color: #989dd2;
  border-radius: 30px;
  color: #fff;
}
.cause .thumb .tag a:hover {
  background-color: var(--secondary-color);
  color: var(--white);
}
.cause .content {
  padding-inline: 20px;
}
.cause .content h6 {
  margin-top: -8px;
  margin-bottom: 8px;
  font-weight: 800;
  color: var(--secondary-color);
}
.cause .content h6:hover {
  color: var(--hover-color);
}
.cause .content p {
  font-size: 16px;
  line-height: 22px;
}
.cause .cause__slider-cta {
  padding: 20px;
  border-radius: 10px;
  background: rgba(157, 153, 139, 0.1);
  margin-top: 24px;
}
.cause .cause__slider-cta .cause-progress__intro p {
  font-size: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 12px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  color: var(--secondary-color);
  font-weight: 600;
}
.cause .cause__slider-cta .cause-progress__goal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 12px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.cause .cause__slider-cta .cause-progress__goal p {
  color: var(--secondary-color);
  font-weight: 600;
  font-size: 14px;
}
.cause .cause__slider-cta .cause-progress__goal .goal {
  color: var(--hover-color);
  font-weight: 800;
}
.cause .cause-progress__bar {
  margin: 5px 0px 10px;
}
.cause .cause__cta {
  margin-top: 20px;
}
.cause .cause__cta a {
  font-size: 14px;
  line-height: 1;
  border: 1px solid #989dd2;
  background-color: #989dd2;
  color: #989dd2;
}
.cause .cause__cta a::before, .cause .cause__cta a::after {
  background-color: var(--white);
}
.cause .cause__cta a:hover {
  color: var(--white);
}
.cause .pagination-one {
  margin-top: 40px;
}
.cause .swiper-slide-active .thumb img {
  -webkit-transform: scale(1.3) rotate(5deg);
  -ms-transform: scale(1.3) rotate(5deg);
  transform: scale(1.3) rotate(5deg);
}
.cause .swiper-slide-active .thumb .tag a {
  background-color: var(--secondary-color);
  color: var(--white);
}
.cause .swiper-slide-active .cause__cta a {
  color: var(--white);
}
.cause .swiper-slide-active .cause__cta a::before, .cause .swiper-slide-active .cause__cta a::after {
  width: 0% !important;
}
.cause .spade {
  position: absolute;
  top: 75%;
  inset-inline-start: 5%;
  z-index: -1;
}
.cause .spade img {
  max-width: 5vw;
  min-width: 30px;
  -webkit-animation: pulse 4s infinite ease-in-out;
  animation: pulse 4s infinite ease-in-out;
}

.cause-alt .cause-inner__wrapper {
  position: relative;
}
.cause-alt .slider-navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.cause-three {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--white);
}
.cause-three::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 50%;
  background-color: #efefef;
  z-index: -1;
}
.cause-three-alt {
  background-color: var(--white);
}
.cause-three-alt .mb-60 {
  margin-bottom: 35px !important;
}
/* ==== 
 --------- (5.04) cause slider section styles end ---------
 ==== */
/* ==== 
 --------- (5.05) cta section styles start ---------
 ==== */
.cta-section {
  overflow: hidden;
}
.cta-section .container-fluid {
  padding: 0px;
}
.cta-section .row > * {
  padding: 0px;
}
.cta-section .cta-section__single {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  padding: 100px 0px;
  z-index: 1;
}
.cta-section .cta-img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  z-index: -2;
}
.cta-section .cta-img .parallax-image-wrap, .cta-section .cta-img .parallax-image-inner {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
}
.cta-section .cta-img img {
  width: 100%;
  height: 100%;
}
.cta-section .cta-section__center {
  z-index: 2;
  background-image: url("../images/cta/mask-two.png");
  background-size: 100% 100%;
  position: relative;
  width: 120%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.cta-section .cta-section__center .cta-img {
  -webkit-mask-image: url("../images/cta/mask.png");
  mask-image: url("../images/cta/mask.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 99% 100%;
  mask-size: 99% 100%;
}
.cta-section .cta-section__center .cta-img img {
  -o-object-position: left;
  object-position: left;
}
.cta-section .cta-section__first {
  position: relative;
  z-index: 1;
}
.cta-section .cta-section__first::before {
  content: "";
  position: absolute;
  inset: 0px;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0.5)));
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
  z-index: -1;
}
.cta-section .cta-section__last {
  position: relative;
  z-index: 1;
}
.cta-section .cta-section__last::before {
  content: "";
  position: absolute;
  inset: 0px;
  background: linear-gradient(-104deg, rgba(12, 26, 23, 0) 1.9%, rgba(0, 113, 93, 0.08) 18.93%, rgba(0, 113, 93, 0.17) 29.72%, rgba(0, 113, 93, 0.37) 47.05%, rgba(0, 113, 93, 0.67) 56.36%, #00715d 73.4%, #00715d 95.2%, rgba(0, 113, 93, 0.91) 103.44%);
  z-index: -1;
}
.cta-section .cta-section__group {
  text-align: center;
}
.cta-section .thumb {
  margin-bottom: 25px;
}
.cta-section .thumb i {
  font-size: 60px;
  color: var(--white);
}
.cta-section h3, .cta-section span {
  color: var(--white);
}
.cta-section span {
  font-size: 14px;
}
.cta-section h3 {
  margin-top: 5px;
  font-weight: 700;
}
.cta-section .cta-s {
  margin-top: 32px;
}
.cta-section .video-btn-wrapper {
  position: relative;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  inset: unset;
}
.cta-section .video-btn-wrapper::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed var(--black);
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}
.cta-section .video-btn-wrapper i {
  -webkit-margin-start: 5px;
  margin-inline-start: 5px;
}
.cta-section .btn--tertiary, .cta-section .btn--primary {
  padding: 20px 40px;
  border-radius: 60px;
}
.cta-section .btn--tertiary::before, .cta-section .btn--tertiary::after, .cta-section .btn--primary::before, .cta-section .btn--primary::after {
  border-radius: 0px;
}
.cta-section .btn--tertiary::before, .cta-section .btn--tertiary::after {
  background-color: var(--quaternary-color);
  width: 52%;
}
.cta-section .btn--tertiary:hover::before, .cta-section .btn--tertiary:hover::after {
  width: 0px;
}
.cta-section-two {
  padding: 100px 0px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.cta-section-two::before {
  content: "";
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  background: linear-gradient(-104deg, rgba(12, 26, 23, 0) 1.9%, rgba(9, 31, 27, 0.08) 37.31%, rgba(9, 31, 27, 0.17) 40.18%, rgba(9, 31, 27, 0.37) 47.05%, rgba(9, 31, 27, 0.67) 56.36%, #091f1b 73.4%, #091f1b 95.2%, rgba(9, 31, 27, 0.91) 103.44%);
  z-index: -3;
}
.cta-section-two .sub-title {
  color: var(--base-color);
}
.cta-section-two h2 {
  color: var(--white);
}
.cta-section-two .banner__content-cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 24px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.cta-section-two .btn--tertiary, .cta-section-two .btn--primary {
  padding: 18px 40px;
  border-radius: 60px;
  font-weight: 700;
  gap: 8px;
}
.cta-section-two .btn--tertiary::before, .cta-section-two .btn--tertiary::after, .cta-section-two .btn--primary::before, .cta-section-two .btn--primary::after {
  border-radius: 0px;
}
.cta-section-two .btn--tertiary i, .cta-section-two .btn--primary i {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: transform 0.5s ease, color 0s ease;
  transition: transform 0.5s ease, color 0s ease, -webkit-transform 0.5s ease;
  font-size: 18px;
}
.cta-section-two .btn--tertiary:hover i, .cta-section-two .btn--primary:hover i {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.cta-section-two .cta-bg {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  z-index: -4;
}
.cta-section-two .cta-bg img {
  width: 100%;
  height: 100%;
}
.cta-section-two .parallax-image-wrap, .cta-section-two .parallax-image-inner {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
}
.cta-section-two .shape-left {
  position: absolute;
  inset-inline-start: 0px;
  top: -50px;
  bottom: 0px;
  z-index: -2;
}
.cta-section-two .shape-left img {
  -webkit-animation: moveTopBottom 4s ease-in-out infinite;
  animation: moveTopBottom 4s ease-in-out infinite;
}
.cta-section-two .shape {
  position: absolute;
  inset-inline-start: 0px;
  inset-inline-end: 0px;
  bottom: -20px;
  z-index: 1;
}
.cta-section-two .shape img {
  width: 100%;
  height: 40px;
  -o-object-position: top;
  object-position: top;
}
/* ==== 
 --------- (5.05) cta section styles end ---------
 ==== */
/* ==== 
 --------- (5.06) team section styles start ---------
 ==== */
.team {
  padding: 100px 0px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.team .team__single {
  overflow: hidden;
}
.team .team__single:hover .team__single-thumb img {
  -webkit-transform: scale(1.04);
  -ms-transform: scale(1.04);
  transform: scale(1.04);
}
.team .team__single:hover .team__single-thumb::before {
  visibility: visible;
  opacity: 1;
}
.team .team__single:hover .team__single-content {
  background-color: var(--secondary-color);
}
.team .team__single:hover .team__single-content h6 {
  color: var(--white);
}
.team .team__single:hover .team__single-content p {
  color: #fff;
}
.team .team__single:hover .team__single-content__icon {
  background-color: var(--base-color);
  color: var(--secondary-color);
}
.team .team__single:hover .team__single-content__icon i {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  color: #fff;
}
.team .team__single:hover .team__single__thumb-social {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
}
.team .team__single-thumb {
  position: relative;
  z-index: 1;
}
.team .team__single-thumb::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 200px;
  height: 150px;
  border-radius: 278.326px;
  z-index: 2;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.team .team__single-thumb a {
  width: 100%;
  border-radius: 10px 10px 0px 0px;
  overflow: hidden;
}
.team .team__single-thumb img {
  width: 100%;
  border-radius: 10px 10px 0px 0px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  min-height: 260px;
}
.team .team__single-content {
  padding: 30px 30px 24px;
  background-color: #f1f0ee;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border-radius: 0px 0px 10px 10px;
  height: 115px;
}
.team .team__single-content h6 {
  margin-top: -8px;
  font-weight: 800;
  margin-bottom: 9px;
  color: var(--secondary-color);
}
.team .team__single-content p {
  font-size: 14px;
  font-weight: 600;
  color: var(--secondary-color);
  -webkit-transition: var(--transition);
  transition: var(--transition);
	line-height: 18px;
}
.team .team__single-content__icon {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: var(--secondary-color);
  color: var(--white);
  z-index: 3;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.team .team__single-content__icon i {
  font-size: 16px;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
.team .team__icons {
  position: absolute;
  bottom: -20px;
  inset-inline-end: 20px;
}
.team .team__single__thumb-social {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0px;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transform: translateY(-20%);
  -ms-transform: translateY(-20%);
  transform: translateY(-20%);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.team .team__single__thumb-social ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 10px;
}
.team .team__single__thumb-social a {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: var(--white);
  color: var(--secondary-color);
  font-size: 16px;
  -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.team .team__single__thumb-social a:hover {
  background-color: var(--base-color);
  color: var(--secondary-color) !important;
}
.team .spade {
  position: absolute;
  top: 18%;
  inset-inline-end: 3%;
  z-index: -1;
}
.team .spade img {
  max-width: 5vw;
  min-width: 30px;
  -webkit-animation: pulse 4s infinite ease-in-out;
  animation: pulse 4s infinite ease-in-out;
}
.team-three {
  padding: 100px 0px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--white);
}
.team-three .team__single {
  padding: 12px;
  border-radius: 15px;
  border: 1px solid rgba(161, 159, 151, 0.22);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.team-three .team__single:hover {
  border-color: var(--base-color);
}
.team-three .team__single:hover .team__single-thumb::before {
  background-color: var(--base-color);
}
.team-three .team__single-thumb {
  position: relative;
  z-index: 1;
  text-align: center;
  -webkit-margin-end: 74px;
  margin-inline-end: 74px;
}
.team-three .team__single-thumb a {
  width: 100%;
  text-align: start;
}
.team-three .team__single-thumb a img {
  height: 350px;
  max-height: 350px;
}
.team-three .team__single-thumb::before {
  content: "";
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  background-color: var(--quaternary-color);
  -webkit-clip-path: polygon(20% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 0%);
  clip-path: polygon(20% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 0%);
  border-radius: 15px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  z-index: -1;
}
.team-three .team__content-wrapper {
  padding: 30px 12px 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.team-three .team__single-content h5 {
  margin-top: -4px;
  font-weight: 800;
  color: var(--secondary-color);
}
.team-three .team__single-content h5:hover {
  color: var(--quaternary-color);
}
.team-three .team__single-content p {
  font-size: 14px;
  font-weight: 600;
  color: var(--quaternary-color);
}
.team-three .team__single-content__icon {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: var(--base-color);
  color: var(--black);
  z-index: 3;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.team-three .team__single-content__icon i {
  font-size: 16px;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
.team-three .team__single__thumb-social {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  inset-inline-end: 24px;
  z-index: 3;
}
.team-three .team__single__thumb-social ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 10px;
}
.team-three .team__single__thumb-social a {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: var(--quaternary-color);
  border: 1px solid rgba(62, 81, 77, 0.12);
  font-size: 16px;
}
.team-three .team__single__thumb-social a:hover {
  background-color: var(--quaternary-color);
  color: var(--white) !important;
}
.team-three .spade {
  position: absolute;
  top: 18%;
  inset-inline-end: 3%;
  z-index: -1;
}
.team-three .spade img {
  max-width: 5vw;
  min-width: 30px;
  -webkit-animation: pulse 4s infinite ease-in-out;
  animation: pulse 4s infinite ease-in-out;
}
.team-details {
  padding: 100px 0px;
}
.team-details .team-details__thumb {
  border-radius: 24px;
}
.team-details .team-details__thumb .parallax-image-wrap, .team-details .team-details__thumb .parallax-image-inner {
  border-radius: 24px;
}
.team-details .team-details__thumb img {
  width: 100%;
  min-height: 300px;
  border-radius: 24px;
}
.team-details .team-details__meta h4 {
  font-weight: 800;
  color: var(--black);
  margin-top: -8px;
}
.team-details .team-details__meta .designation {
  font-weight: 500;
  font-size: 18px;
  color: #747474;
  margin-top: 4px;
}
.team-details .social {
  gap: 12px;
  margin-top: 20px;
  margin-bottom: 24px;
}
.team-details .social a {
  width: 48px;
  min-width: 48px;
  height: 48px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 1px solid #edefef;
  color: var(--quaternary-color);
}
.team-details .social a:hover {
  background-color: var(--quaternary-color);
  color: var(--white);
}
.team-details .my-word {
  margin-top: 40px;
  margin-bottom: 24px;
}
.team-details .my-word h5 {
  font-weight: 800;
  color: var(--black);
  margin-top: -8px;
}
.team-details .cause__progress {
  margin-bottom: 14px;
}
.team-details .cause__progress:nth-last-of-type(1) {
  margin-bottom: 0px;
}
.team-details .cause__progress p {
  font-weight: 700;
  color: var(--black);
  margin-bottom: 4px;
}
.team-details .progress-bar {
  overflow: visible;
}
.team-details .progress-bar-percent {
  background-color: var(--quaternary-color);
}
.team-details .percent-value {
  position: absolute;
  bottom: calc(100% + 4px);
  inset-inline-end: 0px;
  color: var(--black);
  font-weight: 700;
}
.team-details .team-details__list {
  margin-top: 30px;
}
.team-details .team-details__list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  row-gap: 8px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.team-details .team-details__list ul li {
  width: 100%;
  font-weight: 700;
  color: var(--black);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
}
.team-details .team-details__list ul li i {
  color: var(--quaternary-color);
}
.team-details .team-details__list ul li i::before {
  font-weight: 700;
}
.team-details .btn--primary {
  padding: 22px 40px;
  border-radius: 60px;
  font-weight: 700;
  gap: 8px;
}
.team-details .btn--primary::before, .team-details .btn--primary::after {
  border-radius: 0px;
}
.team-details .btn--primary i {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: transform 0.5s ease, color 0s ease;
  transition: transform 0.5s ease, color 0s ease, -webkit-transform 0.5s ease;
  font-size: 18px;
}
.team-details .btn--primary:hover i {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.team-details .about-me {
  margin-top: 20px;
}
.team-details .about-me h4 {
  font-weight: 800;
  color: var(--black);
  margin-top: -8px;
  margin-bottom: 18px;
}
.team-details .about-me p {
  color: #747474;
  font-size: 18px;
}
/* ==== 
 --------- (5.06) team section styles end ---------
 ==== */
/* ==== 
 --------- (5.07) community section styles start ---------
 ==== */
.community {
  padding-top: 100px;
  position: relative;
  z-index: 2;
  overflow-x: clip;
}
.community .community-bg {
  position: absolute;
  inset-inline: 0px;
  inset-block-start: 0px;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.community .community-bg::after {
  position: absolute;
  inset: 0px;
  content: "";
  background: linear-gradient(-104deg, rgba(12, 26, 23, 0) 1.9%, rgba(9, 31, 27, 0.08) 15.92%, rgba(9, 31, 27, 0.17) 24.99%, rgba(9, 31, 27, 0.37) 29.75%, rgba(9, 31, 27, 0.67) 56.36%, #091f1b 73.4%, #091f1b 95.2%, rgba(9, 31, 27, 0.91) 103.44%);
  width: 100%;
  height: 100%;
}
.community .community-bg img {
  width: 100%;
  height: 100%;
}
.community .community-bg .parallax-image-wrap, .community .community-bg .parallax-image-inner {
  position: absolute;
  inset-inline: 0px;
  inset-block-start: 0px;
  width: 100%;
  height: 100%;
}
.community .section__header .sub-title {
  color: var(--base-color);
}
.community .section__header h2 {
  color: var(--white);
}
.community .community-donation {
  padding: 60px 20px;
  border-radius: 30px;
  background: var(--white);
  -webkit-box-shadow: 0px 10px 100px 0px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 10px 100px 0px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  z-index: 1;
  bottom: -140px;
  margin-top: -140px;
}
.community .community-donation .community__thumb {
  position: absolute;
  top: 0px;
  inset-inline-end: 0px;
  bottom: 0px;
  border-radius: 0px 30px 30px 0px;
  z-index: -1;
  -webkit-mask-image: url("../images/community/mask.png");
  mask-image: url("../images/community/mask.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left;
  mask-position: left;
}
.community .community-donation .community__thumb img {
  -o-object-position: left;
  object-position: left;
  height: 100%;
  max-width: 30vw;
  border-radius: 0px 30px 30px 0px;
}
.community .community-donation__inner h4 {
  font-weight: 700;
  color: var(--secondary-color);
  margin-top: -8px;
}
.community .warning {
  padding: 16px 20px;
  border-radius: 10px;
  border: 1px solid #d8dde1;
  background: #fdf8ea;
  position: relative;
  margin: 30px 0px 40px;
}
.community .warning p {
  line-height: 1.5;
}
.community .warning strong {
  font-weight: 700;
  color: var(--secondary-color);
}
.community .warning .line {
  position: absolute;
  width: 4px;
  height: 100%;
  top: 0px;
  bottom: 0px;
  left: 50px;
  background-color: var(--secondary-color);
  display: none;
}
.community .warning .line i {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: var(--base-color);
}
.community .donation-form__single h5 {
  font-weight: 700;
  color: var(--secondary-color);
  margin-top: -8px;
}
.community .donation-form__single .made-amount {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 40px;
}
.community .donation-form__single .donation-amount {
  padding: 12px 16px;
  border: 1px solid #d8dde1;
  border-radius: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--secondary-color);
  cursor: pointer;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: center;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.community .donation-form__single .donation-amount:hover {
  background-color: var(--secondary-color);
  color: var(--white);
  border-color: var(--secondary-color);
}
.community .donation-form__single .active {
  background-color: var(--secondary-color);
  color: var(--white);
  border-color: var(--secondary-color);
}
.community .input-group-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  padding: 5px;
  border-radius: 30px;
  background: #efefef;
  margin: 15px 0px 20px;
}
.community .input-group-icon .thumb {
  width: 50px;
  min-width: 50px;
  height: 50px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--secondary-color);
}
.community .input-group-icon .thumb i {
  font-size: 20px;
  color: var(--white);
}
.community .input-group-icon input {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  background-color: transparent;
  font-size: 18px;
  font-weight: 700;
  color: var(--secondary-color);
}
.community .radio-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 40px;
  row-gap: 12px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 10px;
}
.community .radio-single input {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  width: 0px;
  height: 0px;
}
.community .radio-single label {
  position: relative;
  padding-left: 8px;
  margin-left: 10px;
  font-weight: 600;
  color: var(--secondary-color);
  cursor: pointer;
}
.community .radio-single label::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border: 1px solid #d8dde1;
  border-radius: 100%;
}
.community .radio-single label::after {
  content: "";
  position: absolute;
  right: calc(100% + 3px);
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #d8dde1;
  border-radius: 100%;
  top: 50%;
}
.community .radio-single input:checked + label::before {
  border-color: var(--quaternary-color);
}
.community .radio-single input:checked + label::after {
  background-color: var(--quaternary-color);
}
.community .btn--primary {
  padding: 16px 40px;
  border-radius: 30px;
  gap: 12px;
}
.community .btn--primary::after, .community .btn--primary::before {
  border-radius: 0px;
}
.community .btn--primary i {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: transform 0.5s ease, color 0s ease;
  transition: transform 0.5s ease, color 0s ease, -webkit-transform 0.5s ease;
}
.community .btn--primary:hover i {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.community .gift {
  position: absolute;
  inset-inline-start: 5%;
  bottom: 0px;
}
.community .gift img {
  -webkit-animation: moveLeftRight 4s ease-in-out infinite;
  animation: moveLeftRight 4s ease-in-out infinite;
  max-width: 15vw;
  min-width: 50px;
}
.community .spade {
  position: absolute;
  top: 40%;
  inset-inline-start: 78%;
  z-index: -1;
}
.community .spade img {
  max-width: 20vw;
  min-width: 60px;
  -webkit-animation: pulse 4s infinite ease-in-out;
  animation: pulse 4s infinite ease-in-out;
}
/* ==== 
 --------- (5.07) community section styles end ---------
 ==== */
/* ==== 
 --------- (5.08) testimonial section styles start ---------
 ==== */
.testimonial {
  padding: 240px 0px 100px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.testimonial .testimonial__inner {
  position: relative;
}
.testimonial .testimonial__slider-single {
  padding: 40px 20px;
  background-color: var(--white);
  border-radius: 30px;
  -webkit-box-shadow: var(--shadow-secondary);
  box-shadow: var(--shadow-secondary);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border: 1px solid var(--white);
  position: relative;
  z-index: 1;
}
.testimonial .testimonial__slider {
  padding-block: 24px;
  margin-block: -24px;
}
.testimonial q {
  font-weight: 600;
}
.testimonial .review {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}
.testimonial .review i {
  font-size: 18px;
  color: var(--base-color);
}
.testimonial .shape {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
}
.testimonial .author-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 32px;
}
.testimonial .author-info .author-thumb {
  width: 54px;
  min-width: 54px;
  height: 54px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.testimonial .author-info .author-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.testimonial .author-info h6 {
  font-weight: 700;
  color: var(--secondary-color);
  font-size: 18px;
  line-height: 1;
  margin-bottom: 8px;
}
.testimonial .author-info p {
  font-size: 14px;
  line-height: 1;
}
.testimonial .quote {
  position: absolute;
  z-index: -1;
  top: 30px;
  inset-inline-end: 20px;
}
.testimonial .quote img {
  opacity: 0.05;
  max-width: 10vw;
  min-width: 20px;
}
.testimonial .swiper-slide-active .testimonial__slider-single {
  border-color: var(--base-color);
}
.testimonial .slider-navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.testimonial-two {
  padding: 100px 0px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.testimonial-two::before {
  content: "";
  position: absolute;
  top: 0px;
  inset-inline-end: 0px;
  bottom: 0px;
  height: 100%;
  width: 20%;
  background-color: var(--base-color);
  z-index: -1;
}
.testimonial-two .blog-bg {
  position: absolute;
  top: 0px;
  inset-inline: 0px;
  z-index: -2;
  width: 100%;
  height: 60%;
  min-height: 400px;
}
.testimonial-two .blog-bg img {
  width: 100%;
  height: 100%;
}
.testimonial-two .testimonial-two__inner {
  background-color: var(--white);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
}
.testimonial-two .testimonial-two__content {
  position: relative;
  z-index: 1;
  padding: 80px 20px;
}
.testimonial-two .testimonial-two__content .quote {
  position: absolute;
  z-index: -1;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  inset-inline-end: 5%;
}
.testimonial-two .testimonial-two__thumb {
  position: relative;
}
.testimonial-two .testimonial-two__thumb img {
  width: 100%;
  min-height: 500px;
}
.testimonial-two .testimonial-two__thumb .quote-thumb {
  width: 120px;
  min-width: 120px;
  height: 120px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: var(--quaternary-color);
  position: absolute;
  top: 30px;
  inset-inline-start: 30px;
}
.testimonial-two .testimonial-two__thumb .quote-thumb i {
  font-size: 50px;
  color: var(--white);
}
.testimonial-two .review {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
}
.testimonial-two .review i {
  font-size: 18px;
  color: var(--base-color);
}
.testimonial-two .author-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  opacity: 0;
  -webkit-transform: translateX(-20px);
  -ms-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: all 1000ms ease;
  transition: all 1000ms ease;
}
.testimonial-two .author-info .author-thumb {
  width: 80px;
  min-width: 80px;
  height: 80px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.testimonial-two .author-info .author-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.testimonial-two .author-info h5 {
  font-weight: 800;
  color: var(--secondary-color);
  line-height: 1;
  margin-bottom: 8px;
}
.testimonial-two .author-info p {
  line-height: 1;
}
.testimonial-two .testimonial-two__single-content {
  margin-top: 35px;
}
.testimonial-two .testimonial-two__single-content h5 {
  font-weight: 600;
  color: var(--secondary-color);
  margin-top: -8px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
  -ms-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: all 1000ms ease;
  transition: all 1000ms ease;
}
.testimonial-two .testimonial-two__single-content .review {
  margin-top: 24px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
  -ms-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: all 1000ms ease;
  transition: all 1000ms ease;
}
.testimonial-two .slider-navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
}
.testimonial-two .swiper-slide-active .author-info {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-delay: 600ms;
  transition-delay: 600ms;
}
.testimonial-two .swiper-slide-active .testimonial-two__single-content h5 {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-delay: 1000ms;
  transition-delay: 1000ms;
}
.testimonial-two .swiper-slide-active .testimonial-two__single-content .review {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-delay: 1400ms;
  transition-delay: 1400ms;
}
.testimonial-two .spade {
  position: absolute;
  bottom: 0%;
  inset-inline-start: 20%;
  z-index: -1;
}
.testimonial-two .spade img {
  max-width: 20vw;
  min-width: 60px;
  -webkit-animation: pulse 4s infinite ease-in-out;
  animation: pulse 4s infinite ease-in-out;
}
.testimonial-three {
  padding: 100px 0px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.testimonial-three .testimonial-three__single {
  padding: 60px 20px;
  background-color: var(--white);
  -webkit-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 30px;
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.testimonial-three .testimonial-three__single::before {
  content: "";
  position: absolute;
  bottom: 0px;
  inset-inline-end: 0px;
  width: 66%;
  height: 8px;
  background-color: var(--quaternary-color);
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 2% 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 2% 100%);
}
.testimonial-three .thumb {
  min-width: 100%;
}
.testimonial-three .thumb img {
  width: 100%;
  min-height: 200px;
  max-height: 340px;
}
.testimonial-three .review {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.testimonial-three .review i {
  font-size: 18px;
  color: var(--base-color);
}
.testimonial-three .author-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-right: 30px;
}
.testimonial-three .author-info .quote i {
  font-size: 34px;
  color: var(--quaternary-color);
}
.testimonial-three .author-info h6 {
  font-weight: 700;
  color: var(--secondary-color);
  font-size: 18px;
  line-height: 1;
  margin-bottom: 8px;
}
.testimonial-three .author-info p {
  line-height: 1;
  color: var(--quaternary-color);
}
.testimonial-three p {
  color: #747474;
  font-weight: 600;
}
.testimonial-three .slider-navigation {
  margin-top: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 20px;
}
.testimonial-three .swiper {
  padding: 20px !important;
}
.testimonial-three .testimonial-three__inner {
  margin: -20px;
  overflow: hidden !important;
}
.testimonial-three .spade {
  position: absolute;
  bottom: -20%;
  left: 25%;
  z-index: -1;
}
.testimonial-three .spade img {
  max-width: 20vw;
  min-width: 60px;
  -webkit-animation: pulse 4s infinite ease-in-out;
  animation: pulse 4s infinite ease-in-out;
}
.testimonial-three .spade-green {
  position: absolute;
  top: 18%;
  inset-inline-end: 3%;
  z-index: -1;
}
.testimonial-three .spade-green img {
  max-width: 5vw;
  min-width: 30px;
  -webkit-animation: pulse 4s infinite ease-in-out;
  animation: pulse 4s infinite ease-in-out;
}
.testimonial-alter {
  padding: 100px 0px !important;
}
/* ==== 
 --------- (5.08) testimonial section styles end ---------
 ==== */
/* ==== 
 --------- (5.09) blog section styles start ---------
 ==== */
.blog {
  padding: 100px 0px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.blog .blog__single {
  padding: 15px 15px 40px;
  background-color: var(--white);
  border-radius: 24px;
  -webkit-box-shadow: var(--shadow);
  box-shadow: var(--shadow);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  position: relative;
  z-index: 1;
}
.blog .blog__single:hover {
  background-color: var(--tertiary-color);
}
.blog .blog__single:hover .blog__single-thumb a img {
  -webkit-transform: scale(1.2) rotate(6deg);
  -ms-transform: scale(1.2) rotate(6deg);
  transform: scale(1.2) rotate(6deg);
}
.blog .blog__single:hover .blog__single-meta p {
  color: var(--white);
}
.blog .blog__single:hover .blog__single-content h5 {
  color: var(--white);
}
.blog .blog__single:hover .blog__single-cta a {
  color: var(--white);
}
.blog .blog__single:hover .blog__single-cta a::before {
  background-color: var(--white);
}
.blog .blog__single:hover .blog__single-cta a i {
  color: var(--base-color);
}
.blog .blog__single:hover .spade-two {
  opacity: 1;
  visibility: visible;
}
.blog .blog__single .spade-two {
  position: absolute;
  bottom: 20px;
  inset-inline-end: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
  max-width: 5vw;
  min-width: 30px;
  -webkit-animation: pulse 4s infinite ease-in-out;
  animation: pulse 4s infinite ease-in-out;
}
.blog .blog__single-thumb {
  position: relative;
  margin-bottom: 30px;
}
.blog .blog__single-thumb a {
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
}
.blog .blog__single-thumb a img {
  width: 100%;
  min-height: 280px;
  border-radius: 16px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.blog .blog__single-thumb .tag {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
}
.blog .blog__single-thumb .tag a {
  padding: 8px 24px;
  background-color: var(--secondary-color);
  border-radius: 30px;
  color: var(--white);
}
.blog .blog__single-thumb .tag a i {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.blog .blog__single-thumb .tag a:hover {
  background-color: var(--base-color);
  color: var(--black);
}
.blog .blog__single-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  row-gap: 8px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 0px 12px;
}
.blog .blog__single-meta p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.blog .blog__single-meta p i {
  color: var(--base-color);
}
.blog .blog__single-content {
  padding: 0px 12px;
}
.blog .blog__single-content h5 {
  font-weight: 700;
  color: var(--secondary-color);
  margin-top: -8px;
}
.blog .blog__single-cta {
  margin-top: 32px;
  padding: 0px 12px;
}
.blog .blog__single-cta a {
  font-weight: 700;
  color: var(--secondary-color);
  font-size: 18px;
  position: relative;
}
.blog .blog__single-cta a::before {
  content: "";
  position: absolute;
  top: 85%;
  inset-inline-start: 0px;
  width: 76%;
  height: 1px;
  background-color: var(--secondary-color);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.blog .blog__single-cta a i {
  color: var(--tertiary-color);
  font-size: 20px;
  margin-bottom: -2px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.blog .blog-bg {
  position: absolute;
  top: 0px;
  inset-inline: 0px;
  z-index: -2;
  width: 100%;
  height: 32%;
}
.blog .blog-bg img {
  width: 100%;
  height: 100%;
}
.blog .spade {
  position: absolute;
  top: 25%;
  inset-inline-start: 10%;
  z-index: -1;
}
.blog .spade img {
  max-width: 20vw;
  min-width: 60px;
  -webkit-animation: pulse 4s infinite ease-in-out;
  animation: pulse 4s infinite ease-in-out;
}
.blog-two {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.blog-two .blog__single-thumb {
  margin-top: 30px;
  margin-bottom: 0px;
}
.blog-two .blog__single-cta {
  margin-top: 40px;
}
.blog-two .spade {
  top: 80%;
  inset-inline-start: 90%;
}
.blog-main .blog__single-thumb {
  position: relative;
  margin-bottom: 30px;
}
.blog-main .blog__single-thumb a {
  width: 100%;
  overflow: hidden;
}
.blog-main .blog__single-thumb a img {
  width: 100%;
  min-height: 280px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.blog-main .blog__single-thumb .tag {
  position: absolute;
  top: 20px;
  inset-inline-start: 20px;
}
.blog-main .blog__single-thumb .tag a {
  padding: 8px 24px;
  background-color: var(--secondary-color);
  color: var(--white);
}
.blog-main .blog__single-thumb .tag a i {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.blog-main .blog__single-thumb .tag a:hover {
  background-color: var(--base-color);
  color: var(--black);
}
.blog-main .blog__single-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  row-gap: 8px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.blog-main .blog__single-meta p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.blog-main .blog__single-meta p i {
  color: var(--base-color);
}
.blog-main .blog__single-content h4 {
  font-weight: 700;
  color: var(--black);
  margin-top: -8px;
  margin-bottom: 8px;
}
.blog-main .blog__single-content h4:hover {
  color: var(--hover-color);
}
.blog-main .blog__single-cta {
  margin-top: 32px;
}
.blog-main .blog__single-cta a {
  font-weight: 800;
  color: var(--black);
  font-size: 14px;
  position: relative;
  text-transform: uppercase;
  gap: 12px;
}
.blog-main .blog__single-cta a:hover {
  color: var(--hover-color);
}
.blog-main .blog__single-cta a i {
  font-size: 16px;
  margin-bottom: 0px;
}
.blog-main .blockquote-wrapper {
  padding: 24px 24px;
  background-color: #ebebeb;
  border-left: 5px solid var(--quaternary-color);
}
.blog-main .blockquote-wrapper blockquote {
  font-weight: 600;
  font-style: italic;
  color: var(--black);
}
.blog-main .blockquote-wrapper p {
  margin-top: 12px !important;
  font-weight: 700;
  color: var(--quaternary-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  gap: 8px;
}
.blog-main .blockquote-wrapper p .line {
  width: 26px;
  height: 1px;
  background-color: var(--quaternary-color);
}
.blog-main .details-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 24px;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.blog-main .details-footer .details-tag {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.blog-main .details-footer .tag-header h6 {
  font-weight: 600;
  color: var(--black);
}
.blog-main .details-footer .tag-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
}
.blog-main .details-footer .tag-wrapper a {
  font-size: 14px;
  color: #2c2c2c;
  border: 1px solid #1b325c;
  padding: 2px 14px;
}
.blog-main .details-footer .tag-wrapper a:hover {
  border-color: var(--base-color);
  background-color: var(--base-color);
  color: var(--black);
}
.blog-main .details-footer .social a {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 0px;
  font-size: 14px;
  color: var(--black);
  background-color: #ebebeb;
}
.blog-main .details-footer .social a:hover {
  background-color: var(--base-color);
}
.blog-main .cm-details-author {
  padding-block: 80px !important;
  text-align: center;
}
.blog-main .cm-details-author .author-thumb {
  width: 100px;
  min-width: 100px;
  height: 100px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-inline: auto;
  margin-bottom: 30px;
}
.blog-main .cm-details-author .author-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.blog-main .cm-details-author h6 {
  font-weight: 700;
  color: var(--black);
  margin-top: -8px;
}
.blog-main .cm-details-author p {
  max-width: 300px;
  margin-inline: auto;
}
.blog-main .cm-details-author p:nth-last-of-type(1) {
  margin-top: 16px;
}
.blog-main .cm-details-author .social {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 40px;
}
.blog-main .cm-details-author .social a {
  width: 48px;
  min-width: 48px;
  height: 48px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 0px;
  color: #7d7e80;
  border: 1px solid #7d7e80;
  font-size: 14px;
}
.blog-main .cm-details-author .social a:hover {
  border-color: var(--black);
  background-color: var(--black);
  color: var(--base-color);
}
.blog-main .cm-sidebar-widget {
  background-color: #ebebeb !important;
}
.blog-main .cm-sidebar-widget form {
  background-color: #ebebeb;
  border-color: #e9d1d1 !important;
}
.blog-main .cm-sidebar-widget form input {
  background-color: transparent;
}
.blog-main .cm-categories a {
  width: 100%;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 12px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 16px 20px;
  background-color: var(--white);
  border: 1px solid #e9d1d1;
  margin-bottom: 20px;
  color: var(--black);
}
.blog-main .cm-categories a:nth-last-of-type(1) {
  margin-bottom: 0px;
}
.blog-main .cm-categories a:hover {
  background-color: var(--black);
  color: var(--white);
}
/* ==== 
 --------- (5.09) blog section styles start ---------
 ==== */
/* ==== 
 --------- (5.10) award section styles start ---------
 ==== */
.award {
  padding: 100px 0px;
  position: relative;
  z-index: 1;
}
.award .award__single {
  position: relative;
  overflow: hidden;
}
.award .award__single:hover .content {
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
}
.award .award__single .thumb a {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}
.award .award__single .thumb img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  min-height: 300px;
  max-height: 410px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.award .award__single .content {
  padding: 40px 20px;
  border-radius: 11px;
  background: rgba(10, 32, 28, 0.51);
  -webkit-backdrop-filter: blur(10.5px);
  backdrop-filter: blur(10.5px);
  position: absolute;
  bottom: 30px;
  margin-inline: 20px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: calc(100% - 40px);
  max-width: 460px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 16px;
  -webkit-transform: translateY(150%);
  -ms-transform: translateY(150%);
  transform: translateY(150%);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.award .award__single .content h5 {
  font-weight: 700;
  color: var(--white);
}
.award .award__single .content h5:hover {
  color: var(--base-color);
}
.award .award__single .content p {
  color: var(--white);
  font-size: 14px;
}
.award .award__single .content .award__thumb a {
  width: 50px;
  min-width: 50px;
  height: 50px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: var(--base-color);
  color: var(--black);
}
.award .award__single .content .award__thumb a:hover {
  background-color: var(--white);
  color: var(--black);
}
.award .award__single .content .award__thumb a i {
  font-size: 20px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.award .spade {
  position: absolute;
  bottom: 5%;
  inset-inline-start: 20%;
  z-index: -1;
}
.award .spade img {
  max-width: 20vw;
  min-width: 60px;
  -webkit-animation: pulse 4s infinite ease-in-out;
  animation: pulse 4s infinite ease-in-out;
}
.gallery__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0;
  overflow: hidden;
  position: relative;
}
.gallery__slider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-animation: marquee 16s linear infinite;
  animation: marquee 16s linear infinite;
  -webkit-animation-play-state: running;
  animation-play-state: running;
}
.gallery__slider:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.gallery__single {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 76.9230769231%;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.gallery__single::after {
  content: "";
  position: absolute;
  inset: 0px;
  background-color: rgba(9, 31, 27, 0.5019607843);
  width: 100%;
  height: 0%;
  z-index: -1;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.gallery__single:hover a {
  -webkit-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}
.gallery__single:hover::after {
  height: 100%;
}
.gallery__single:hover img {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
.gallery__single img {
  width: 100%;
  min-height: 300px;
  z-index: -2;
  position: relative;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.gallery__single a {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
  width: 60px;
  min-width: 60px;
  height: 60px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: var(--base-color);
  color: var(--black);
  font-size: 24px;
}
.gallery__single a:hover {
  background-color: var(--white);
  color: var(--black);
}
@media (min-width: 768px) {
  .gallery__single {
    width: 33.3333333333%;
  }
}
@media (min-width: 992px) {
  .gallery__single {
    width: 25%;
  }
}
@media (min-width: 1200px) {
  .gallery__single {
    width: 20%;
  }
}
@media (min-width: 1600px) {
  .gallery__single {
    width: 16.6666666667%;
  }
}
@-webkit-keyframes marquee {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@keyframes marquee {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@-webkit-keyframes marquee-rtl {
  from {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  to {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}
@keyframes marquee-rtl {
  from {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  to {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}
/* ==== 
 --------- (5.10) award section styles end ---------
 ==== */
/* ==== 
 --------- (5.11) faq section styles start ---------
 ==== */
.faq {
  padding: 100px 0px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.faq .accordion-item {
  margin-bottom: 30px;
  background-color: var(--white);
  border-radius: 40px;
  border: 1px solid #ddd;
  -webkit-box-shadow: 0px 4.4px 20px -1px rgba(19, 16, 34, 0.05);
  box-shadow: 0px 4.4px 20px -1px rgba(19, 16, 34, 0.05);
}
.faq .accordion-item:last-of-type {
  margin-bottom: 0px;
}
.faq .accordion-item .accordion-button:not(.collapsed) {
  color: var(--white);
  background-color: #22305c;
  border-radius: 40px 40px 0px 0px;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.faq .accordion-item .accordion-button:not(.collapsed)::after {
  color: var(--white);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.faq .accordion-item .accordion-button {
  border-radius: 0px;
  color: var(--secondary-color);
  position: relative;
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 40px;
  padding: 20px 30px;
  font-weight: 700;
}
.faq .accordion-item .accordion-button::after {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  width: 24px;
  min-width: 24px;
  height: 24px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 0px;
  background-image: none;
  font-size: 20px;
  color: var(--secondary-color);
}
.faq .accordion-item:first-of-type > .accordion-header .accordion-button.collapsed {
  border-radius: 50px;
}
.faq .accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
  border-radius: 50px;
}
.faq h6 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  font-weight: 600;
  color: var(--secondary-color);
}
.faq h6 button {
  padding: 0px;
  font-size: inherit;
  line-height: inherit;
  border: none;
  outline: none;
  -webkit-box-shadow: 0px 0px 0px;
  box-shadow: 0px 0px 0px;
  padding: 16px 0px;
  border-radius: 50px;
  color: var(--secondary-color);
}
.faq .accordion-body {
  padding: 24px 30px;
  border: 0px;
}
.faq .accordion-body p {
  color: #747474;
}
.faq .faq__thumb-inner {
  min-width: 800px;
  position: relative;
}
.faq .faq__thumb-inner img {
  width: unset;
}
.faq .faq__thumb-inner .parallax-image-wrap, .faq .faq__thumb-inner .parallax-image-inner {
  border-radius: 10px;
}
.faq .faq__thumb-inner .thumb-sm {
  position: absolute;
  top: 80px;
  inset-inline-start: 40%;
  border: 10px solid var(--white);
  border-radius: 20px;
}
.faq .faq__thumb-inner .thumb-lg {
  position: relative;
  display: inline-block;
  border: 10px solid var(--white);
  border-radius: 20px;
}
.faq .faq__thumb-inner .thumb-lg::before {
  content: "";
  position: absolute;
  bottom: 0px;
  inset-inline-end: -40px;
  width: 20px;
  height: 200px;
  background-color: var(--base-color);
  border-radius: 20px;
}
.faq .shape {
  position: absolute;
  z-index: -2;
  background-color: var(--quaternary-color);
  inset-inline-end: 0px;
  top: 0px;
  bottom: 0px;
  width: 47vw;
}
.faq .shape img {
  position: absolute;
  inset-inline-start: -2px;
  top: 0px;
  bottom: 0px;
  height: 100%;
}
/* ==== 
 --------- (5.11) faq section styles start ---------
 ==== */
/* ==== 
 --------- (5.12) overview section styles start ---------
 ==== */
.overview {
  position: relative;
  top: -50px;
  z-index: 1;
  margin-bottom: -50px;
}
.overview .overview__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 30px;
}
.overview .overview__single {
  width: 100%;
  height: 100%;
  padding: 40px 20px;
  background-color: var(--base-color);
}
.overview h4 {
  margin-top: -8px;
  font-weight: 800;
  color: var(--black);
}
.overview .cause__progress {
  margin-block: 30px 25px;
}
.overview .progress-bar {
  overflow: visible;
}
.overview .progress-bar-percent {
  background-color: var(--black);
}
.overview .percent-value {
  position: absolute;
  bottom: 100%;
  inset-inline-end: 0px;
  color: var(--black);
  font-weight: 700;
}
.overview .overview__left {
  border-radius: 10px;
}
.overview .cause-progress__goal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.overview .cause-progress__goal span {
  font-weight: 600;
  color: var(--black);
}
.overview .cause-progress__goal h5 {
  font-weight: 800;
  color: var(--black);
}
.overview .overview__right {
  background-color: var(--quaternary-color);
  border-radius: 10px;
}
.overview .overview__right span {
  padding: 4px 24px;
  border: 1px solid var(--white);
  border-radius: 30px;
}
.overview .overview__right h4 {
  margin-block: 16px 12px;
  font-weight: 600;
}
.overview .overview__right span, .overview .overview__right h4, .overview .overview__right p {
  color: var(--white);
}
/* ==== 
 --------- (5.12) overview section styles end ---------
 ==== */
/* ==== 
 --------- (5.13) donation section styles start ---------
 ==== */
.donation-future {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-top: 100px;
}
.donation-future .donation-future__content {
  position: relative;
  z-index: 2;
}
.donation-future .sub-title {
  color: var(--base-color);
}
.donation-future h2 {
  color: var(--white);
}
.donation-future .video-btn-wrapper {
  position: static;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  margin-top: 40px;
}
.donation-future .video-btn-wrapper a {
  background-color: var(--quaternary-color);
  color: var(--white);
  width: 130px;
  min-width: 130px;
  height: 130px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.donation-future .video-btn-wrapper a i {
  color: var(--white);
  font-size: 30px;
}
.donation-future .donation-bg {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 70%;
  z-index: -3;
}
.donation-future .donation-bg .parallax-image-wrap, .donation-future .donation-bg .parallax-image-inner {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  z-index: -3;
}
.donation-future .donation-bg .parallax-image {
  width: 100%;
  height: 100%;
  -o-object-position: top;
  object-position: top;
}
.donation-future .donation-bg::after {
  content: "";
  position: absolute;
  inset: 0px;
  background: linear-gradient(-104deg, rgba(12, 26, 23, 0) 1.9%, rgba(9, 31, 27, 0.08) 37.31%, rgba(9, 31, 27, 0.17) 40.18%, rgba(9, 31, 27, 0.37) 47.05%, rgba(9, 31, 27, 0.67) 56.36%, #091f1b 73.4%, #091f1b 95.2%, rgba(9, 31, 27, 0.91) 103.44%);
  z-index: -2;
}
.donation-future .donation-bg .shape {
  position: absolute;
  bottom: -40px;
  left: 0px;
  right: 0px;
  width: 100%;
  z-index: 1;
  height: 70px;
  -o-object-position: top;
  object-position: top;
}
.donation-future .donation-future__thumb {
  padding: 60px 20px;
  margin-bottom: 10px;
  background-color: var(--white);
  background-repeat: no-repeat;
  background-size: 110% 110%;
  background-position: center center;
  border-radius: 11px;
  border: 14px solid #fff;
  -webkit-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.07);
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.07);
  position: relative;
  z-index: 2;
}
.donation-future .donation-future__thumb h4 {
  font-weight: 800;
  margin-top: -8px;
  color: var(--secondary-color);
}
.donation-future .donation-future__thumb .progress-bar-single {
  margin-top: 80px;
}
.donation-future .donation-future__thumb .progress-bar {
  height: 16px;
  overflow: visible;
  background-color: var(--white);
}
.donation-future .donation-future__thumb .percent-value {
  position: absolute;
  bottom: calc(100% + 20px);
  inset-inline-end: -10px;
  color: var(--quaternary-color);
  font-weight: 700;
}
.donation-future .donation-future__thumb .progress-bar-percent {
  background-color: var(--quaternary-color);
}
.donation-future .donation-future__thumb .progress-bar-percent::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: 0px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: var(--white);
  outline: 8px solid var(--quaternary-color);
  border-radius: 50%;
}
.donation-future .donation-future__thumb .cause-progress__goal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 25px;
}
.donation-future .donation-future__thumb .cause-progress__goal p {
  font-size: 18px;
  font-weight: 700;
  color: var(--secondary-color);
}
.donation-future .donation-future__thumb hr {
  margin: 30px 0px 40px;
  border: 0px;
  width: 100%;
  height: 1px;
  background: #d9d9d9;
}
.donation-future .donation-future__thumb .made-amount {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 40px;
}
.donation-future .donation-future__thumb .donation-amount {
  padding: 16px 30px;
  border: 1px solid var(--white);
  background-color: var(--white);
  border-radius: 30px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--secondary-color);
  cursor: pointer;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: center;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.donation-future .donation-future__thumb .donation-amount:hover {
  background-color: var(--quaternary-color);
  color: var(--white);
  border-color: var(--quaternary-color);
}
.donation-future .donation-future__thumb .active {
  background-color: var(--quaternary-color);
  color: var(--white);
  border-color: var(--quaternary-color);
}
.donation-future .donation-future__thumb .btn--primary {
  padding: 18px 40px;
  border-radius: 60px;
  font-weight: 700;
  gap: 8px;
  color: var(--white);
}
.donation-future .donation-future__thumb .btn--primary::before, .donation-future .donation-future__thumb .btn--primary::after {
  border-radius: 0px;
  background-color: var(--quaternary-color);
}
.donation-future .donation-future__thumb .btn--primary i {
  -webkit-transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: transform 0.5s ease, color 0s ease;
  transition: transform 0.5s ease, color 0s ease, -webkit-transform 0.5s ease;
  font-size: 18px;
}
.donation-future .donation-future__thumb .btn--primary:hover {
  background-color: var(--base-color);
  color: var(--black);
}
.donate-inner {
  padding: 80px 20px 160px;
  margin-inline: 8px;
  border-radius: 12px;
  background: #fff;
  -webkit-box-shadow: 0px 4px 28px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 4px 28px 0px rgba(0, 0, 0, 0.05);
  top: -60px;
  margin-bottom: -60px;
  position: relative;
  z-index: 3;
}
.donate-inner .community-donation__inner h5 {
  font-weight: 700;
  color: var(--black);
  margin-top: -8px;
}
.donate-inner .community-donation {
  padding: 0px !important;
  border-radius: 0px !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.donate-inner .community-donation hr {
  height: 1px;
  width: 100%;
  background-color: #d9d9d9;
  margin: 80px 0px;
  border: 0px !important;
}
.donate-inner .community-donation .cta {
  margin-top: 40px !important;
}
.donate-inner .community-donation .form-cta .btn--primary {
  padding: 16px 20px !important;
}
.donate-inner .warning {
  margin: 20px 0px 0px !important;
}
.donate-inner .donation-form {
  margin-top: 50px !important;
}
.donate-inner .checkout__form {
  padding-bottom: 60px;
}
.donate-inner .radio-wrapper {
  padding: 0px !important;
  margin: 16px 0px 0px !important;
}
/* ==== 
 --------- (5.13) donation section styles end ---------
 ==== */
/* ==== 
 --------- (5.14) counter section styles start ---------
 ==== */
.counter {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 100px 0px;
}
.counter .counter__inner {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  row-gap: 60px;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}
.counter .divider {
  border-right: 1px dashed var(--base-color);
  display: none;
}
.counter .counter__single {
  text-align: center;
  width: 100%;
}
.counter .counter__single:hover .thumb {
  border-color: var(--base-color);
  background-color: var(--base-color);
}
.counter .counter__single:hover .thumb i {
  color: var(--black);
}
.counter .counter__single div {
  line-height: inherit !important;
}
.counter .counter__single h2 {
  color: var(--white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 800;
}
.counter .counter__single h5 {
  font-weight: 600;
  color: var(--white);
  margin-bottom: -8px;
}
.counter .counter__single .prefix {
  margin-top: -10px;
  margin-left: 10px;
}
.counter .counter__single .thumb {
  width: 90px;
  min-width: 90px;
  height: 90px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 1px solid var(--white);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  margin-inline: auto;
  margin-bottom: 30px;
}
.counter .counter__single .thumb i {
  font-size: 30px;
  color: var(--white);
  -webkit-transition: inherit;
  transition: inherit;
}
.counter .poor {
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
  z-index: -3;
}
.counter .poor::before {
  content: "";
  position: absolute;
  inset: 0px;
  background: linear-gradient(-104deg, rgba(12, 26, 23, 0) 1.9%, rgba(9, 31, 27, 0.08) 16.64%, rgba(9, 31, 27, 0.17) 28.59%, rgba(9, 31, 27, 0.37) 38.19%, rgba(9, 31, 27, 0.67) 56.36%, #091f1b 61.29%, #091f1b 95.2%, rgba(9, 31, 27, 0.91) 103.44%);
  width: 100%;
  height: 100%;
  z-index: -1;
}
.counter .poor .parallax-image-wrap, .counter .poor .parallax-image-inner {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  z-index: -3;
}
.counter .poor .parallax-image {
  width: 100%;
  height: 100%;
}
.counter .shape-left {
  position: absolute;
  inset-inline-start: 0px;
  top: -50px;
  bottom: 0px;
  z-index: -2;
}
.counter .shape-left img {
  -webkit-animation: moveTopBottom 4s ease-in-out infinite;
  animation: moveTopBottom 4s ease-in-out infinite;
  max-width: 20vw;
  min-width: 50px;
}
/* ==== 
 --------- (5.14) counter section styles end ---------
 ==== */
/* ==== 
 --------- (5.15) event section styles start ---------
 ==== */
.event {
  padding: 35px 0px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.event::before {
  content: "";
  position: absolute;
  bottom: 0px;
  inset-inline: 0px;
  /*background-color: #efefef;*/
  width: 100%;
  height: 30%;
  z-index: -1;
}
.event .event__single-wrapper {
  margin-bottom: 30px;
}
.event .event__single-wrapper:nth-last-of-type(1) {
  margin-bottom: 0px;
}
.event .event__single {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}
.event .event__content {
  position: absolute;
  bottom: -22px;
  inset-inline: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 10px 15px;
}
.event .event__content::after {
  content: "";
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: 0px 0px 5px 5px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(8, 11, 27, 0)), to(rgba(8, 12, 38, 0.9)));
  background: linear-gradient(180deg, rgba(8, 11, 27, 0) 0%, #4c5b93 95%);
}
.event .event__content span, .event .event__content h4, .event .event__content p {
  color: var(--white);
}
.event .event__content span {
  font-weight: 500;
}
.event .event__content h4 {
  font-weight: 700;
  margin: 12px 0px;
}
.event .event__content p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}
.event .event__content p i {
  font-size: 20px;
}
.event .event__single-thumb .parallax-image-inner, .event .event__single-thumb .parallax-image-wrap {
  border-radius: 5px;
}
.event .event__single-thumb img {
  width: 100%;
  min-height: 380px;
  border-radius: 5px;
}
.event .event-single-alt .event__single-thumb img {
  min-height: 300px;
  max-height: 330px;
}
.event .spade {
  position: absolute;
  bottom: 30%;
  inset-inline-start: 18%;
  z-index: -1;
}
.event .spade img {
  max-width: 20vw;
  min-width: 60px;
  -webkit-animation: pulse 4s infinite ease-in-out;
  animation: pulse 4s infinite ease-in-out;
}
.cm-details {
  padding: 100px 0px;
}
.cm-details .cm-details__poster {
  border-radius: 20px;
}
.cm-details .cm-details__poster .parallax-image-wrap, .cm-details .cm-details__poster .parallax-image-inner {
  border-radius: 20px;
}
.cm-details .cm-details__poster img {
  width: 100%;
  min-height: 300px;
  border-radius: 20px;
}
.cm-details .cm-details-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 40px;
  row-gap: 10px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 24px;
}
.cm-details .cm-details-meta p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  color: var(--black);
}
.cm-details .cm-details-meta p i {
  font-size: 20px;
  color: var(--base-color);
}
.cm-details .cm-group h3 {
  font-weight: 800;
  color: var(--black);
  margin-top: -8px;
  margin-bottom: 18px;
}
.cm-details .cm-group p {
  margin-top: 24px;
}
.cm-details .cm-group p:nth-of-type(1) {
  margin-top: 0px;
}
.cm-details .cm-details__list {
  margin-top: 40px;
}
.cm-details .cm-details__list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  row-gap: 8px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.cm-details .cm-details__list ul li {
  width: 100%;
  font-weight: 700;
  color: var(--black);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  font-size: 18px;
}
.cm-details .cm-details__list ul li i {
  color: var(--quaternary-color);
}
.cm-details .cm-details__list ul li i::before {
  font-weight: 700;
}
.cm-details .cm-img-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 30px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.cm-details .cm-img-group .cm-img-single {
  width: 100%;
  border-radius: 5px;
}
.cm-details .cm-img-group .cm-img-single .parallax-image-wrap, .cm-details .cm-img-group .cm-img-single .parallax-image-inner {
  border-radius: 5px;
}
.cm-details .cm-img-group .cm-img-single img {
  width: 100%;
  border-radius: 5px;
  min-height: 200px;
}
.cm-details .cm-event {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.cm-details .cm-event .cm-event-single {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.cm-details .cm-event .cm-event-single:nth-of-type(2) a {
  background-color: #40aedf;
}
.cm-details .cm-event .cm-event-single:nth-of-type(3) a {
  background-color: #be1f31;
}
.cm-details .cm-event .cm-event-single:nth-of-type(4) a {
  background-color: #1881b8;
}
.cm-details .cm-event .cm-event-single:nth-of-type(5) a {
  background-color: #e85838;
}
.cm-details .cm-event a {
  width: 100%;
  background-color: #4c65a3;
  padding: 30px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.cm-details .cm-event a img {
  position: absolute;
  z-index: -1;
  inset: 0px;
  width: 100%;
  height: 100%;
}
.cm-details .cm-map {
  height: 100%;
  min-height: 450px;
  position: relative;
  border-radius: 20px;
  pointer-events: none;
}
.cm-details .cm-map iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0px;
  border-radius: 20px;
}
.cm-details .blog-comment {
  padding-top: 100px;
}
.cm-details .blog-comment .comment-header {
  margin-bottom: 60px;
}
.cm-details .blog-comment .comment-header h4 {
  font-weight: 800;
  color: var(--black);
  margin-top: -8px;
}
.cm-details .blog-comment .comment-single {
  border-radius: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 40px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.cm-details .blog-comment .comment-single:nth-last-of-type(1) {
  margin-bottom: 0px;
}
.cm-details .blog-comment .comment-single .thumb {
  width: 120px;
  min-width: 120px;
  height: 120px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 10px;
  border: 1px dashed var(--base-color);
}
.cm-details .blog-comment .comment-single .thumb img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.cm-details .blog-comment .comment-single h5 {
  font-weight: 700;
  color: var(--black);
  margin-top: -8px;
  margin-bottom: 8px;
}
.cm-details .blog-comment .comment-single p {
  max-width: 540px;
}
.cm-details .blog-comment .comment-single .comment-single__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 24px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  row-gap: 8px;
  margin-top: 15px;
}
.cm-details .blog-comment .comment-single .comment-single__meta p, .cm-details .blog-comment .comment-single .comment-single__meta button {
  font-size: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.cm-details .blog-comment .comment-single .comment-single__meta button:hover {
  color: var(--hover-color);
}
.cm-details .blog-comment .comment-single .comment-single__meta .active {
  color: var(--hover-color);
}
.cm-details .blog-comment .comment-single .reply-comment {
  margin-top: 40px;
  display: none;
}
.cm-details .blog-comment .comment-single .reply-comment .input-group {
  margin-bottom: 0px !important;
  gap: 0px !important;
}
.cm-details .blog-comment .comment-single .reply-comment .input-single {
  width: 100%;
  margin-bottom: 20px;
}
.cm-details .blog-comment .comment-single .reply-comment .input-single textarea {
  background-color: transparent;
  border: 1px solid #ccc8c8;
  height: 120px;
  min-height: 120px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border-radius: 20px;
  color: var(--black);
}
.cm-details .blog-comment .comment-single .reply-comment .btn--secondary {
  width: auto;
  font-size: 16px !important;
}
.cm-details .blog-comment .form-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 24px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.cm-details .blog-comment .form-group .input-icon {
  width: 100%;
}
.cm-details .blog-comment .input-icon {
  position: relative;
  width: 100%;
  background-color: #f2f2f2;
  padding: 12px 20px;
  border-radius: 5px;
}
.cm-details .blog-comment .input-icon input, .cm-details .blog-comment .input-icon textarea {
  -webkit-padding-start: 24px !important;
  padding-inline-start: 24px !important;
  background-color: transparent;
  width: 100%;
  max-height: 160px;
}
.cm-details .blog-comment .input-icon i {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  inset-inline-start: 16px;
}
.cm-details .blog-comment .input-icon-alt i {
  top: 20px;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}
.cm-details .blog-comment .comment__form {
  padding: 60px 20px;
  background-color: #fff;
  margin-top: 80px;
  -webkit-filter: drop-shadow(0px 3px 13.5px rgba(66, 31, 210, 0.07));
  filter: drop-shadow(0px 3px 13.5px rgba(66, 31, 210, 0.07));
}
.cm-details .blog-comment .comment__form .comment-header {
  margin-bottom: 30px;
}
.cm-details .blog-comment .comment__form .form-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}
.cm-details .blog-comment .comment__form .form-group .input-single {
  width: calc(50% - 12px);
  margin: 0px;
}
.cm-details .blog-comment .comment__form textarea:focus + .cmn-shape path {
  stroke-dasharray: 3000px;
  stroke-dashoffset: -3000px;
  -webkit-animation: animate-stroke-four 1.6s linear forwards;
  animation: animate-stroke-four 1.6s linear forwards;
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
}
@-webkit-keyframes animate-stroke-four {
  0% {
    stroke-dasharray: 3000px;
    stroke-dashoffset: 3000px;
    stroke: var(--quaternary-color);
  }
  100% {
    stroke-dashoffset: 0;
    stroke: var(--quaternary-color);
  }
}
@keyframes animate-stroke-four {
  0% {
    stroke-dasharray: 3000px;
    stroke-dashoffset: 3000px;
    stroke: var(--quaternary-color);
  }
  100% {
    stroke-dashoffset: 0;
    stroke: var(--quaternary-color);
  }
}
.cm-details .cm-sidebar-widget {
  padding: 40px 20px;
  border-radius: 20px;
  background-color: var(--white);
  -webkit-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05);
  margin-bottom: 40px;
}
.cm-details .cm-sidebar-widget:nth-last-of-type(1) {
  margin-bottom: 0px;
}
.cm-details .cm-sidebar-widget .intro {
  margin-bottom: 30px;
}
.cm-details .cm-sidebar-widget .intro h5 {
  font-weight: 800;
  color: var(--black);
  line-height: 1;
}
.cm-details .cm-sidebar-widget form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  border: 1px solid #ececec;
  border-radius: 10px;
  padding-inline: 16px;
}
.cm-details .cm-sidebar-widget form input {
  width: 100%;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding-block: 12px;
  color: var(--black);
}
.cm-details .cm-sidebar-widget form button:hover {
  color: var(--base-color);
}
.cm-details .cm-sidebar-widget .single-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  row-gap: 16px;
  margin-bottom: 30px;
}
.cm-details .cm-sidebar-widget .single-item:nth-last-of-type(1) {
  margin-bottom: 0px;
}
.cm-details .cm-sidebar-widget .single-item .thumb {
  width: 80px;
  min-width: 80px;
  height: 80px;
  border-radius: 10px;
}
.cm-details .cm-sidebar-widget .single-item .thumb a, .cm-details .cm-sidebar-widget .single-item .thumb img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.cm-details .cm-sidebar-widget .single-item .content {
  margin: 0px;
  padding: 0px !important;
  border-radius: 0px !important;
  background-color: transparent !important;
}
.cm-details .cm-sidebar-widget .single-item .content p:nth-of-type(2) {
  font-size: 18px;
  font-weight: 600;
  color: var(--black);
  line-height: 24px;
}
.cm-details .cm-sidebar-widget .single-item .content p:nth-of-type(2):hover {
  color: var(--quaternary-color);
}
.cm-details .cm-sidebar-widget .single-item .content p:nth-of-type(1) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 5px;
}
.cm-details .cm-sidebar-widget .single-item .content p:nth-of-type(1) i {
  line-height: 1;
  margin-top: -3px;
}
.cm-details .cm-sidebar-widget .tag-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.cm-details .cm-sidebar-widget .tag-wrapper a {
  padding: 8px 20px;
  border: 1px solid #f2f2f2;
  background-color: #f2f2f2;
  border-radius: 0px;
  color: var(--black);
  font-weight: 500;
}
.cm-details .cm-sidebar-widget .tag-wrapper a:hover {
  background-color: var(--base-color);
  color: var(--black);
}
.cm-details .cm-sidebar-overview {
  padding: 60px 20px;
  text-align: center;
  border-radius: 20px;
  position: relative;
  z-index: 1;
}
.cm-details .cm-sidebar-overview .parallax-image, .cm-details .cm-sidebar-overview .parallax-image-wrap, .cm-details .cm-sidebar-overview .parallax-image-inner {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: 20px;
}
.cm-details .cm-sidebar-overview .cm-content {
  margin-block: 40px 60px;
}
.cm-details .cm-sidebar-overview .cm-content p {
  color: var(--white);
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 12px;
}
.cm-details .cm-sidebar-overview .cm-content h4 {
  font-weight: 700;
  color: var(--white);
}
.cm-details .cm-sidebar-overview .btn--primary {
  padding: 18px 40px;
  border-radius: 60px;
  font-weight: 700;
  gap: 8px;
}
.cm-details .cm-sidebar-overview .btn--primary::before, .cm-details .cm-sidebar-overview .btn--primary::after {
  border-radius: 0px;
}
.cm-details .cm-sidebar-overview .btn--primary i {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: transform 0.5s ease, color 0s ease;
  transition: transform 0.5s ease, color 0s ease, -webkit-transform 0.5s ease;
  font-size: 18px;
}
.cm-details .cm-sidebar-overview .btn--primary:hover i {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
/* ==== 
 --------- (5.15) event section styles end ---------
 ==== */
/* ==== 
 --------- (5.16) contact section styles start ---------
 ==== */
.contact {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.contact .contact__content {
  padding: 100px 20px;
  background-color: var(--quaternary-color);
}
.contact .sub-title {
  color: var(--base-color);
}
.contact h2 {
  color: var(--white);
}
.contact .row > * {
  padding-inline: 0px;
}
.contact .contact-bg {
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
  z-index: -3;
}
.contact .contact-bg::before {
  content: "";
  position: absolute;
  inset: 0px;
  background: linear-gradient(-104deg, rgba(12, 26, 23, 0) 1.9%, rgba(9, 31, 27, 0.08) 16.64%, rgba(9, 31, 27, 0.17) 28.59%, rgba(9, 31, 27, 0.37) 38.19%, rgba(9, 31, 27, 0.67) 56.36%, rgba(9, 31, 27, 0.1882352941) 61.29%, #091f1b 95.2%, rgba(9, 31, 27, 0.91) 103.44%);
  width: 100%;
  height: 100%;
  z-index: -1;
}
.contact .contact-bg .parallax-image-wrap, .contact .contact-bg .parallax-image-inner {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  z-index: -3;
}
.contact .contact-bg .parallax-image {
  width: 100%;
  height: 100%;
}
.contact .shape-left {
  position: absolute;
  inset-inline-start: 0px;
  top: -50px;
  bottom: 0px;
  z-index: -2;
}
.contact .shape-left img {
  -webkit-animation: moveTopBottom 4s ease-in-out infinite;
  animation: moveTopBottom 4s ease-in-out infinite;
  max-width: 20vw;
  min-width: 50px;
}
.contact-main .contact-main__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  row-gap: 20px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.contact-main .contact-main__single {
  width: 100%;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
}
.contact-main .thumb {
  margin-top: 6px;
}
.contact-main .thumb i {
  font-size: 20px;
  color: var(--hover-color);
}
.contact-main .content {
  padding: 0px !important;
}
.contact-main .content h6 {
  font-weight: 800;
  color: var(--black);
  margin-bottom: 14px;
}
.contact-main .content p {
  margin-bottom: 0px;
}
.contact-main .content p:nth-last-of-type(1) {
  margin-bottom: 0px;
}
.contact-main .content a {
  text-transform: lowercase;
  font-weight: 500;
}
.contact-main .content a:hover {
  color: var(--hover-color);
}
.contact-main .social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
}
.contact-main .social a {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 1px solid #696969;
  color: #696969;
  font-size: 14px;
}
.contact-main .social a:hover {
  background-color: var(--base-color);
  color: var(--black);
  border-color: var(--base-color);
}
.contact-main .contact-main__thumb img {
  width: 100%;
  min-height: 250px;
}
/* ==== 
 --------- (5.16) contact section styles end ---------
 ==== */
/* ==== 
 --------- (5.17) shop section styles start ---------
 ==== */

/* ==== 
 --------- (5.17) shop section styles end ---------
 ==== */
/* ==== 
 --------- (5.18) volunteer section styles start ---------
 ==== */
.volunteer {
  padding: 100px 0px;
}
.volunteer .warning {
  padding: 16px 20px;
  border-radius: 10px;
  border: 1px solid #d8dde1;
  background: #fdf8ea;
  position: relative;
  margin: 30px 0px 40px;
}
.volunteer .warning p {
  line-height: 1.5;
}
.volunteer .warning strong {
  font-weight: 700;
  color: var(--secondary-color);
}
.volunteer .warning .line {
  position: absolute;
  width: 4px;
  height: 100%;
  top: 0px;
  bottom: 0px;
  left: 50px;
  background-color: var(--secondary-color);
  display: none;
}
.volunteer .warning .line i {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: var(--base-color);
}
.volunteer .cause__progress {
  margin-bottom: 14px;
}
.volunteer .cause__progress:nth-last-of-type(1) {
  margin-bottom: 0px;
}
.volunteer .cause__progress p {
  font-weight: 700;
  color: var(--black);
  margin-bottom: 4px;
}
.volunteer .progress-bar {
  overflow: visible;
}
.volunteer .progress-bar-percent {
  background-color: var(--quaternary-color);
}
.volunteer .percent-value {
  position: absolute;
  bottom: calc(100% + 4px);
  inset-inline-end: 0px;
  color: var(--black);
  font-weight: 700;
}
.volunteer .team-details__list {
  margin-top: 40px !important;
}
.volunteer .team-details__list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  row-gap: 8px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.volunteer .team-details__list ul li {
  width: 100%;
  font-weight: 700;
  color: var(--black);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
}
.volunteer .team-details__list ul li i {
  color: var(--quaternary-color);
}
.volunteer .team-details__list ul li i::before {
  font-weight: 700;
}
.volunteer .volunteer__form {
  padding: 60px 20px;
  border-radius: 17px;
  border: 1px solid rgba(0, 0, 0, 0.17);
}
.volunteer .volunteer__form h4 {
  font-weight: 700;
  color: var(--black);
  margin-top: -8px;
}
.volunteer .volunteer__form p {
  max-width: 400px;
  margin-top: 8px;
}
.volunteer .form-cta .btn--primary {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  border-radius: 40px;
}
.volunteer .form-cta .btn--primary::before, .volunteer .form-cta .btn--primary::after {
  width: 52%;
  border-radius: 0px;
}
.volunteer .form-cta .btn--primary:hover::before, .volunteer .form-cta .btn--primary:hover::after {
  width: 0%;
}
/* ==== 
 --------- (5.18) volunteer section styles end ---------
 ==== */
/* ==== 
 --------- (5.19) error section styles start ---------
 ==== */
.error {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.error .thumb {
  margin-bottom: 40px;
}
.error .thumb img {
  max-width: 500px;
  width: 100%;
}
.error h3 {
  font-weight: 900;
  color: var(--black);
  text-align: center !important;
}
.error p {
  font-weight: 500;
  margin-top: 20px;
  font-size: 18px;
  line-height: 30px;
  color: var(--black);
  max-width: 600px;
  margin-inline: auto;
}
.error .btn--primary {
  padding: 18px 40px;
  border-radius: 60px;
  font-weight: 700;
  gap: 8px;
}
.error .btn--primary::before, .error .btn--primary::after {
  border-radius: 0px;
}
.error .btn--primary i {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: color 0s ease, -webkit-transform 0.5s ease;
  transition: transform 0.5s ease, color 0s ease;
  transition: transform 0.5s ease, color 0s ease, -webkit-transform 0.5s ease;
  font-size: 18px;
}
.error .btn--primary:hover i {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.error .spade {
  position: absolute;
  bottom: -5%;
  inset-inline-start: 10%;
  z-index: -1;
}
.error .spade img {
  max-width: 20vw;
  min-width: 60px;
  -webkit-animation: pulse 4s infinite ease-in-out;
  animation: pulse 4s infinite ease-in-out;
}
.error .spade-green {
  position: absolute;
  top: 18%;
  inset-inline-end: 3%;
  z-index: -1;
}
.error .spade-green img {
  max-width: 5vw;
  min-width: 30px;
  -webkit-animation: pulse 4s infinite ease-in-out;
  animation: pulse 4s infinite ease-in-out;
}
.error__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
  height: 100%;
  padding: 100px 0px;
}
@media only screen and (max-width: 767.98px) {
  .error p {
    max-width: 400px;
    font-size: 17px;
  }
}
.rtl .error {
  direction: ltr;
}
.dark-body .error {
  background: radial-gradient(#224646, #182828) repeat;
}
.dark-body .error p {
  color: var(--white);
}
/* ==== 
 --------- (5.19) error section styles end ---------
 ==== */
/* ==== 
 --------- (5.20) coming soon section styles start ---------
 ==== */
.soon {
  padding: 100px 0px;
  height: auto;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  background-color: var(--black);
}
.soon .content {
  text-align: center;
}
.soon .content h4 {
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 12px;
  text-align: center !important;
}
.soon .content p {
  color: #e7e0e0;
  font-weight: 500;
  font-size: 18px;
}
.soon .content p:nth-last-of-type(1) {
  margin-top: 4px;
}
.soon__inner {
  position: relative;
  z-index: 2;
}
.soon__logo {
  text-align: center;
}
.soon__logo img {
  width: 100%;
  max-width: 230px;
}
.time-counter {
  position: relative;
}
.time-countdown {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
.counter-column {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 20px;
  width: 180px;
  height: 180px;
  font-size: 20px;
  line-height: 1em;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  z-index: 7;
  border-radius: 20px;
  margin: 0 15px 20px;
  background-color: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.count {
  position: relative;
  display: block;
  font-size: 72px;
  line-height: 1;
  color: #ffffff;
  font-weight: 700;
}
.form-group {
  margin: 7px 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  flex-direction: column;
  align-items: flex-start;
}
.form-group input {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 100%;
  padding: 10px 24px;
  background-color: #ffffff;
  color: #000000;
}
.form-group button {
  min-width: -webkit-min-content;
  min-width: -moz-min-content;
  min-width: min-content;
  padding: 24px 30px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
}
.soon-bg {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}
.soon-bg::after {
  content: "";
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}
.soon-bg img {
  width: 100%;
  height: 100%;
}
.soon-bg .parallax-image-wrap, .soon-bg .parallax-image-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0px;
}
.countdown-wrapper {
  height: 500px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  margin-block: 60px;
}
.clock {
  position: relative;
  width: 500px;
  height: 500px;
  background-color: rgba(10, 10, 10, 0.3764705882);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
}
.clock::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -20%;
  width: 150%;
  height: 150%;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.4), rgba(25, 25, 25, 0.1) 75%);
  pointer-events: none;
  z-index: -1;
}
.hand {
  position: absolute;
  background-color: #fff;
  -webkit-transform-origin: bottom;
  -ms-transform-origin: bottom;
  transform-origin: bottom;
  border-radius: 99px;
}
.hour-hand {
  width: 15px;
  height: 175px;
  top: 75px;
  background-color: #bdbaba;
}
.minute-hand {
  width: 12px;
  height: 175px;
  top: 75px;
  background-color: #5a5a5a;
}
.second-hand {
  position: absolute;
  width: 6px;
  height: 200px;
  top: 50px;
  background-color: #9d9a95;
  -webkit-transform-origin: bottom;
  -ms-transform-origin: bottom;
  transform-origin: bottom;
}
.second-hand::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 50px;
  top: 187px;
  background-color: #9d9a95;
  border-radius: 99px;
  -webkit-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
}
.center-dot {
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: white;
  border-radius: 50%;
  -webkit-box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.6);
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.6);
}
.center-dot-orange {
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: black;
  border-radius: 50%;
  -webkit-box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
}
.hour-markers {
  position: absolute;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.hour-marker {
  position: absolute;
  color: #fff;
  -webkit-transform: rotate(0deg) translateY(-216.25px);
  -ms-transform: rotate(0deg) translateY(-216.25px);
  transform: rotate(0deg) translateY(-216.25px);
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
}
.hour-marker span {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: rgb(143, 137, 137);
}
.minute-marker {
  position: absolute;
  width: 2px;
  height: 11.25px;
  background-color: rgba(255, 255, 255, 0.3);
  -webkit-transform: rotate(0deg) translateY(-216.25px);
  -ms-transform: rotate(0deg) translateY(-216.25px);
  transform: rotate(0deg) translateY(-216.25px);
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  display: none;
}
@media only screen and (max-width: 991.98px) {
  .soon {
    padding: 100px 0px;
  }
  .soon .counter-column {
    width: calc(50% - 30px);
  }
  .soon .logo img {
    max-width: 180px;
  }
}
@media only screen and (max-width: 499.98px) {
  .soon .time-countdown {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    inset: unset;
  }
  .soon .counter-column {
    width: 180px;
    height: 180px;
  }
  .soon .countdown-wrapper {
    height: auto;
  }
  .soon .countdown-wrapper .clock {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  .soon .form-group {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
  }
  .soon .form-group button {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
  }
}
.rtl .soon {
  direction: ltr;
}
/* ==== 
 --------- (5.20) coming soon section styles end ---------
 ==== */
.pg-four .pt-120 {
  padding-top: 100px;
}
.pg-four .ff-volunteer-two .commmit-tab-single {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}
.pg-four .pb-120 {
  padding-bottom: 100px;
}
.pg-four .mt-120 {
  margin-top: 100px;
}
.pg-four .mb-120 {
  margin-bottom: 100px;
}
.pg-four .mb-60 {
  margin-bottom: 60px;
}
.pg-four .mt-60 {
  margin-top: 55px;
}
.pg-four .mt-40 {
  margin-top: 40px;
}
.pg-four .mt-30 {
  margin-top: 30px;
}
.pg-four .mt-25 {
  margin-top: 25px;
}
.pg-four .mt-20 {
  margin-top: 20px;
}
.pg-four .mt-15 {
  margin-top: 15px;
}
.pg-four .mt-10 {
  margin-top: 10px;
}
.pg-four .fw-5 {
  font-weight: 500;
}
.pg-four .fw-6 {
  font-weight: 600;
}
.pg-four .fw-7 {
  font-weight: 700;
}
.pg-four .fw-8 {
  font-weight: 800;
}
.pg-four .text-gr {
  color: #bdbdbd;
}
.pg-four .text-gr-2 {
  color: #667471;
}
.pg-four .txt-base {
  color: var(--base-color);
}
.pg-four .txt-lg {
  font-size: 18px;
}
.pg-four .sub-title {
  font-family: "Edu VIC WA NT Beginner", cursive;
  font-size: 18px;
  line-height: 28px;
  margin-top: -8px;
  color: var(--base-color) !important;
  margin-top: -6px !important;
  margin-bottom: 16px !important;
}
.pg-four .bg-fc {
  background-color: rgba(18, 47, 42, 0.1);
}
.pg-four h1, .pg-four h2, .pg-four h3, .pg-four h4, .pg-four h5, .pg-four h6 {
  color: #232222;
  font-family: "Hubot Sans", serif;
}
.pg-four .hb {
  font-family: "Hubot Sans", serif;
}
.pg-four p {
  color: #4f5b73;
}
.pg-four p, .pg-four span, .pg-four a, .pg-four q, .pg-four li {
  font-family: "Inter", serif;
}
.pg-four .text-xl {
  font-size: 24px;
  line-height: 34px;
}
@media only screen and (max-width: 1199px) {
  .pg-four .text-xl {
    font-size: 20px;
    line-height: 30px;
  }
}
.pg-four .btn--primary {
  border: 1px solid var(--black) !important;
  background-color: var(--base-color);
  font-weight: 600;
  border-radius: 40px;
}
.pg-four .btn--primary::before, .pg-four .btn--primary::after {
  background-color: #fbda33;
  border-radius: 0px;
}
.pg-four .cta {
  margin-top: 40px !important;
}
.topbar--quaternary {
  top: 12px;
}
.topbar--quaternary .topbar__inner {
  background-color: #222222;
  border-radius: 5px;
}
.topbar--quaternary .topbar__list {
  gap: 16px !important;
}
.topbar--quaternary .topbar__list .divider {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--base-color);
}
.topbar--quaternary .topbar__list a:hover {
  color: var(--white);
}
.topbar--quaternary li {
  color: var(--base-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.topbar--quaternary li i {
  color: var(--base-color);
  font-size: 20px !important;
}
.topbar--quaternary .topbar__extra {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.topbar--quaternary .topbar__extra p {
  background-color: var(--base-color);
  padding: 8px 24px;
  border-radius: 16.5px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  font-weight: 700;
}
.header-four .social {
  gap: 12px;
}
.header-four .social a {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #eeeeee;
  color: #3e3535;
  font-size: 14px;
}
.header-four .social a:hover {
  background-color: var(--base-color);
}
.header-four.sticky-header {
  top: 0px !important;
}
.banner-four {
  background-color: rgba(18, 47, 42, 0.1);
  padding-block: 100px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.banner-four h2 {
  margin-top: 15px;
  margin-bottom: 10px;
  font-weight: 600;
}
.banner-four h2 br {
  display: none;
}
.banner-four .thumb {
  position: absolute;
  z-index: -1;
  top: 0px;
  inset-inline-start: 0px;
  bottom: 0px;
}
.banner-four .thumb img {
  height: 100%;
  max-width: 45vw;
  -o-object-position: right;
  object-position: right;
}
.banner-four .fc-one, .banner-four .fc-two, .banner-four .fc-three, .banner-four .fc-four {
  position: absolute;
  z-index: -2;
}
.banner-four .fc-one {
  top: 100px;
  inset-inline-end: 60px;
}
.banner-four .fc-one img {
  max-width: 10vw;
  min-width: 30px;
  -webkit-animation: pulse 4s infinite ease-in-out;
  animation: pulse 4s infinite ease-in-out;
}
.banner-four .fc-two {
  top: 130px;
  inset-inline-end: 190px;
}
.banner-four .fc-two img {
  max-width: 5vw;
  min-width: 20px;
  -webkit-animation: moveLeftRight 6s infinite ease-in-out;
  animation: moveLeftRight 6s infinite ease-in-out;
}
.banner-four .fc-three {
  bottom: 100px;
  inset-inline-end: 70px;
}
.banner-four .fc-three img {
  max-width: 8vw;
  min-width: 40px;
  -webkit-animation: moveLeftRight 7s infinite ease-in-out;
  animation: moveLeftRight 7s infinite ease-in-out;
}
.banner-four .fc-four {
  top: 40%;
  inset-inline-end: 5%;
}
.banner-four .fc-four img {
  max-width: 5vw;
  min-width: 20px;
  -webkit-animation: moveTopBottom 9s infinite ease-in-out;
  animation: moveTopBottom 9s infinite ease-in-out;
}
.counter-four {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 15px 0px;
}
.counter-four div {
  line-height: 1 !important;
}
.counter-four .fc-one, .counter-four .fc-two, .counter-four .fc-three, .counter-four .fc-four {
  position: absolute;
  z-index: -2;
}
.counter-four .fc-one {
  top: 0px;
  inset-inline-start: 0px;
}
.counter-four .fc-one img {
  max-width: 20vw;
  min-width: 50px;
  -webkit-animation: moveLeftRight 7s infinite ease-in-out;
  animation: moveLeftRight 7s infinite ease-in-out;
}
.counter-four .fc-two {
  bottom: 130px;
  inset-inline-start: 190px;
}
.counter-four .fc-two img {
  max-width: 5vw;
  min-width: 20px;
  -webkit-animation: pulse 6s infinite ease-in-out;
  animation: pulse 6s infinite ease-in-out;
}
.counter-four .fc-three {
  bottom: 250px;
  inset-inline-end: 85%;
}
.counter-four .fc-three img {
  max-width: 8vw;
  min-width: 40px;
  -webkit-animation: moveLeftRight 7s infinite ease-in-out;
  animation: moveLeftRight 7s infinite ease-in-out;
}
.counter-four .fc-four {
  top: 40%;
  inset-inline-end: 5%;
}
.counter-four .fc-four img {
  max-width: 5vw;
  min-width: 20px;
  -webkit-animation: moveTopBottom 9s infinite ease-in-out;
  animation: moveTopBottom 9s infinite ease-in-out;
}
.fc-goal {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.fc-goal::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  height: calc(100% - 50px);
  background-color: rgba(18, 47, 42, 0.1);
  z-index: -3;
}
.fc-goal .goal__single {
  border-radius: 12px;
  border: 1px solid #000;
  background: #fff;
  padding: 40px 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 24px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.fc-goal .goal__single-active {
  border-color: var(--base-color);
}
.fc-goal .goal__single-active h2 {
  color: var(--base-color);
}
.fc-goal .goal__inner {
  padding: 40px;
  background-color: var(--base-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 24px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.fc-goal .goal__inner h4 {
  margin-bottom: 12px;
}
.fc-goal .goal__inner h4, .fc-goal .goal__inner a {
  color: var(--white);
}
.fc-goal .goal__inner img {
  position: absolute;
  bottom: 0px;
  z-index: -1;
  inset-inline-end: 7%;
  max-width: 8vw;
  min-width: 70px;
  -webkit-animation: moveLeftRight 10s linear infinite;
  animation: moveLeftRight 10s linear infinite;
}
.fc-goal .btn--primary {
  color: var(--black) !important;
  border-color: var(--white) !important;
  background-color: #fbda33;
}
.fc-goal .btn--primary::before, .fc-goal .btn--primary::after {
  background-color: var(--white);
}
.fc-goal .btn--primary :hover {
  border-color: #fbda33 !important;
}
.fc-goal .fc-one {
  position: absolute;
  bottom: 160px;
  inset-inline-start: 100px;
}
.fc-goal .fc-one img {
  max-width: 7vw;
  min-width: 40px;
  -webkit-animation: moveLeftRight 6s infinite ease-in-out;
  animation: moveLeftRight 6s infinite ease-in-out;
}
.commit h2 {
  margin-bottom: 16px;
}
.commit .commit__thumb {
  position: relative;
  padding-top: 40px;
  padding-bottom: 70px;
  -webkit-padding-end: 20px;
  padding-inline-end: 20px;
  -webkit-padding-start: 30px;
  padding-inline-start: 30px;
}
.commit .commit__thumb::before {
  content: "";
  position: absolute;
  top: 0px;
  inset-inline-start: 0px;
  width: 200px;
  height: 200px;
  border-radius: 24px;
  border: 1px solid #000;
  background: #fbda33;
  z-index: -1;
}
.commit .commit__thumb::after {
  content: "";
  position: absolute;
  bottom: 0px;
  inset-inline-start: 0px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--base-color);
  z-index: -1;
}
.commit .thumb-lg {
  position: relative;
  z-index: 1;
}
.commit .thumb-lg img {
  border-radius: 10px;
  min-height: 300px;
}
.commit .thumb-sm {
  position: absolute;
  top: 0px;
  inset-inline-end: 0px;
  z-index: -1;
}
.commit .commit-count {
  padding: 30px 40px;
  position: absolute;
  bottom: 30px;
  inset-inline-start: 20px;
  border-radius: 13px;
  border: 1px solid #000;
  background: #fff;
  -webkit-box-shadow: 0px 4px 19px 0px rgba(0, 0, 0, 0.09);
  box-shadow: 0px 4px 19px 0px rgba(0, 0, 0, 0.09);
  z-index: 2;
}
.commit .commit-count div {
  line-height: 1 !important;
}
.commit .commit-count .prefix {
  color: var(--base-color);
  -webkit-margin-start: 8px;
  margin-inline-start: 8px;
}
.commit .commit-count p {
  margin-top: 8px;
  color: var(--black);
  font-weight: 500;
}
.commit .commmit-tab-single {
  padding: 30px 24px;
  border: 1px dashed var(--black);
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 40px;
  row-gap: 16px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.commit .commmit-tab-single .divider {
  width: 1px;
  height: 60px;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(42.88%, #929292), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(180deg, #fff 0%, #929292 42.88%, rgba(0, 0, 0, 0) 100%);
}
.commit .commit-tab-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 16px;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.commit .commit-tab-inner i {
  font-size: 24px;
  color: var(--base-color);
  margin-top: 8px;
}
.commit .commit-tab-inner .text-lg {
  color: var(--black);
}
.commit .commit__tab-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
}
.commit .commit__tab-btns .commit__tab-btn {
  padding: 12px 30px;
  border-radius: 40px;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  font-weight: 700 !important;
  color: var(--black);
  border: 1px solid transparent;
}
.commit .commit__tab-btns .commit__tab-btn:hover {
  background-color: #fbda33;
  color: var(--black);
  border-color: var(--black);
}
.commit .commit__tab-btns .active {
  background-color: #fbda33;
  color: var(--black);
  border-color: var(--black);
}
.fc-profit {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.fc-profit .shape-left {
  position: absolute;
  inset-inline-start: 0px;
  top: 60%;
  bottom: 0px;
  z-index: -1;
}
.fc-profit .shape-left img {
  width: 100%;
  height: 100%;
  -webkit-animation: moveTopBottom 4s ease-in-out infinite;
  animation: moveTopBottom 4s ease-in-out infinite;
}
.fc-profit .shape-right {
  position: absolute;
  inset-inline-end: 150px;
  bottom: 120px;
  z-index: -1;
}
.fc-profit .shape-right img {
  -webkit-animation: moveLeftRight 7s ease-in-out infinite;
  animation: moveLeftRight 7s ease-in-out infinite;
  -webkit-filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.fc-profit .fc-profit__tab-btns {
  padding: 40px 20px;
  border-radius: 11px;
  border: 1px solid #000;
  background: #fff;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-margin-end: 0px;
  margin-inline-end: 0px;
}
.fc-profit .fc-profit__tab-btns svg {
  width: 40px;
}
.fc-profit .fc-profit__tab-btns svg path {
  fill: var(--base-color) !important;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.fc-profit .profit__tab-btn {
  padding: 16px;
  border-radius: 10px;
  border: 1px dashed rgba(0, 0, 0, 0.23);
  background: #fff;
  width: 100%;
  margin-bottom: 30px;
  text-transform: capitalize;
  font-weight: 600;
  position: relative;
  color: var(--black);
  padding-block: 21px !important;
}
.fc-profit .profit__tab-btn i {
  position: absolute;
  top: 50%;
  inset-inline-end: 24px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  display: none;
  visibility: hidden;
  pointer-events: none;
}
.fc-profit .profit__tab-btn:nth-last-of-type(1) {
  margin-bottom: 0px;
}
.fc-profit .profit__tab-btn:hover {
  background-color: var(--base-color);
  color: var(--white);
}
.fc-profit .profit__tab-btn:hover svg path {
  fill: var(--white) !important;
}
.fc-profit .profit__tab-btn:hover i {
  visibility: visible;
  pointer-events: all;
}
.fc-profit .active {
  background-color: var(--base-color);
  color: var(--white);
}
.fc-profit .active svg path {
  fill: var(--white) !important;
}
.fc-profit .active i {
  visibility: visible;
  pointer-events: all;
}
.fc-profit .more-txt {
  position: relative;
}
.fc-profit .more-txt a {
  color: #232222;
  font-size: 16px;
}
.fc-profit .more-txt a:hover {
  color: var(--base-color);
}
.fc-profit .more-txt img {
  position: absolute;
  bottom: -10px;
  right: 30px;
  -webkit-animation: moveLeftRightSm 3s linear infinite;
  animation: moveLeftRightSm 3s linear infinite;
}
.fc-profit .thumb {
  border-radius: 14px;
  border: 7px solid #fff;
  position: relative;
  z-index: 1;
}
.fc-profit .thumb img {
  width: 100%;
  border-radius: 14px;
}
.fc-profit .thumb .video-btn-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 2;
}
.fc-profit .thumb-lg {
  position: relative;
}
.fc-profit .thumb-lg i {
  color: var(--white) !important;
}
.fc-profit .thumb-lg img {
  min-height: 260px;
}
.fc-profit .thumb-lg .base-img {
  position: absolute;
  top: 40px;
  inset-inline-start: 30px;
  min-height: auto;
  width: auto;
}
.fc-profit .fc-profit-group {
  margin-top: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 24px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.fc-profit li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  color: #4f5b73;
}
.fc-profit li i {
  color: var(--base-color);
}
.fc-profit .thumb-sm {
  max-width: 240px;
}
.fc-profit .thumb-sm a {
  width: 50px !important;
  height: 50px !important;
  background-color: #fbda33;
}
.fc-profit .thumb-sm a i {
  font-size: 14px;
}
.fc-profit .thumb-sm .open-video-popup {
  -webkit-animation: none !important;
  animation: none !important;
}
.fc-cause {
  background: #222223;
  position: relative;
  overflow: hidden;
}
.fc-cause h2 {
  color: var(--white);
}
.fc-cause .content {
  max-width: 320px;
}
.fc-cause .content h6 {
  font-weight: 700;
}
.fc-cause .percent-value {
  display: none !important;
}
.fc-cause .cause-progress__intro p {
  display: block !important;
  color: #4f5b73 !important;
  font-weight: 400 !important;
}
.fc-cause .cause-progress__intro p span {
  font-weight: 700 !important;
}
.fc-cause .progress-bar {
  height: 14px;
}
.fc-cause .cause__slider-single img {
  -webkit-transform: scale(1) rotate(0deg) !important;
  -ms-transform: scale(1) rotate(0deg) !important;
  transform: scale(1) rotate(0deg) !important;
}
.fc-cause .tag a {
  color: var(--white) !important;
  background-color: var(--base-color) !important;
}
.fc-cause .shape {
  position: absolute;
  inset-inline-start: 0px;
  inset-inline-end: 0px;
  bottom: -9px;
  z-index: 2;
}
.fc-cause .shape img {
  width: 100%;
  height: 40px;
  -o-object-position: top;
  object-position: top;
}
.fc-cause .cause__cta {
  margin-top: 30px;
}
.fc-cause .cause__cta a {
  padding: 20px 36px;
  background-color: #fbda33;
  color: var(--black) !important;
}
.fc-cause .cause__slider-cta {
  background-color: var(--white);
  margin-top: 0px;
}
.fc-community {
  position: relative;
  z-index: 1;
}
.fc-community .dn-now {
  color: black;
  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(0, 0, 0, 0.3);
  font-size: 100px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  position: absolute;
  z-index: -1;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(-90.176deg);
  -ms-transform: translateY(-50%) rotate(-90.176deg);
  transform: translateY(-50%) rotate(-90.176deg);
  inset-inline-end: -200px;
  text-transform: uppercase;
}
.fc-community .community-donation {
  margin: 0px !important;
  bottom: unset !important;
  border-radius: 38px;
  border: 1px solid #e3e3e4;
  background: #fff;
  -webkit-box-shadow: 0px 17px 52px 0px rgba(0, 0, 0, 0.06);
  box-shadow: 0px 17px 52px 0px rgba(0, 0, 0, 0.06);
}
.fc-community .progress-bar {
  height: 18px;
  background: #e7eaea;
  overflow: visible;
}
.fc-community .progress-bar-single {
  position: relative;
  margin-top: 20px;
}
.fc-community .progress-bar-single .pcr {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 56%;
  color: var(--base-color);
}
.fc-community .progress-bar-percent::after {
  content: "";
  position: absolute;
  right: 0px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: var(--white);
  border: 5px solid var(--base-color);
  border-radius: 50%;
}
.fc-community .made-amount {
  -webkit-box-pack: start !important;
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}
.fc-community .made-amount span {
  -webkit-box-flex: unset !important;
  -ms-flex-positive: unset !important;
  flex-grow: unset !important;
  min-width: 140px;
}
.fc-community .made-amount span:hover {
  border-color: inherit !important;
}
.fc-community .donation-form__single-intro {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 16px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.fc-community .donation-form__single-intro p {
  color: #232222;
}
.fc-community .spade {
  position: absolute;
  top: 190px;
  inset-inline-start: 280px;
  z-index: -1;
}
.fc-community .spade img {
  max-width: 5vw;
  min-width: 30px;
  -webkit-animation: pulse 4s infinite ease-in-out;
  animation: pulse 4s infinite ease-in-out;
}
.fc-community .parasuit {
  position: absolute;
  top: -150px;
  inset-inline-start: 8%;
  z-index: -1;
  -webkit-transform: translate(0px);
  -ms-transform: translate(0px);
  transform: translate(0px);
  -webkit-animation: fall 15s ease-in-out infinite;
  animation: fall 15s ease-in-out infinite;
}
.fc-community .parasuit img {
  max-width: 8vw;
  min-width: 40px;
}
.fc-community .unity {
  position: absolute;
  inset-block-end: 0px;
  inset-inline-end: 0px;
  z-index: 1;
}
.fc-community .unity img {
  -webkit-animation: moveLeftRight 4s ease-in-out infinite;
  animation: moveLeftRight 4s ease-in-out infinite;
  max-width: 15vw;
  min-width: 50px;
}
.fc-community h2 {
  color: var(--black) !important;
}
.fc-community .tag-c {
  border: 1px solid var(--black) !important;
  background-color: #fbda33;
  border-radius: 0px;
  font-weight: 600;
  border-radius: 40px;
  padding: 12px 32px;
  color: var(--black);
}
.fc-community .community-donation__inner {
  max-width: 100% !important;
}
.fc-community .btn--primary i {
  -webkit-transform: rotate(0deg) !important;
  -ms-transform: rotate(0deg) !important;
  transform: rotate(0deg) !important;
}
.fc-community .donation-amount {
  padding: 20px 16px !important;
}
.fc-community .donation-amount:hover {
  background-color: var(--base-color) !important;
  color: var(--white) !important;
}
.fc-community .active {
  background-color: var(--base-color) !important;
  color: var(--white) !important;
}
.fc-partner {
  background-color: transparent;
}
.fc-partner h5 {
  margin-bottom: 30px;
  font-weight: 700;
}
.fc-partner h5 div {
  line-height: 1 !important;
}
.fc-partner h5 span {
  color: var(--base-color);
}
.fc-team {
  background: #222223;
  position: relative;
  overflow: hidden;
}
.fc-team .spade-two {
  position: absolute;
  bottom: 0px;
  inset-inline-start: 200px;
  z-index: -1;
}
.fc-team .spade-two img {
  -webkit-animation: pulse 6s linear infinite;
  animation: pulse 6s linear infinite;
  max-width: 18vw;
  min-width: 80px;
}
.fc-team h2 {
  color: var(--white);
}
.fc-team .team__single {
  height: 100%;
}
.fc-team .team__single:hover .team__single-content__icon i {
  color: var(--black);
}
.fc-team .team__single-thumb a, .fc-team .team__single-thumb img {
  border-radius: 0px;
}
.fc-team .team__single-thumb::before {
  content: none;
}
.fc-team .team__single-content__icon {
  background-color: var(--white);
}
.fc-team .team__single-content__icon i {
  color: var(--base-color);
}
.fc-team .team__single-content {
  background-color: transparent !important;
  padding-bottom: 0px;
  padding-inline: 0px;
}
.fc-team .team__single-content a {
  color: var(--white);
  font-weight: 500;
}
.fc-team .team__single-content a:hover {
  color: var(--base-color);
}
.fc-team .team__single-content p {
  color: var(--base-color);
}
.fc-team .team__single-alt {
  background-color: var(--base-color);
  padding: 40px 16px;
}
.fc-team .team__single-alt .thumb {
  width: 100px;
  min-width: 100px;
  height: 100px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-inline: auto;
  margin-bottom: 25px;
  background-color: rgba(255, 255, 255, 0.25);
}
.fc-team .team__single-alt .thumb i {
  font-size: 40px;
  color: var(--white);
}
.fc-team .team__single-alt h5 {
  color: var(--white);
  margin-bottom: 12px;
}
.fc-team .team__single-alt p {
  margin-bottom: 30px;
  color: var(--white);
}
.fc-team .team__single-alt a {
  padding: 16px 32px;
  background-color: rgba(255, 255, 255, 0.25);
  color: var(--white);
  font-weight: 700;
  border-radius: 40px;
}
.fc-team .team__single-alt a:hover {
  background-color: var(--white);
  color: var(--black);
}
.fc-testimonial {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.fc-testimonial::before {
  content: "";
  position: absolute;
  top: 0px;
  inset-inline-start: 0px;
  bottom: 0px;
  width: 50vw;
  height: 100%;
  background-color: #3b3841;
  z-index: -3;
}
.fc-testimonial .slider-navigation {
  position: static !important;
  -webkit-transform: unset !important;
  -ms-transform: unset !important;
  transform: unset !important;
  z-index: 1;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  max-width: -webkit-max-content !important;
  max-width: -moz-max-content !important;
  max-width: max-content !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: all !important;
  -webkit-box-pack: start !important;
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
  margin-inline: unset !important;
  margin-top: 30px !important;
}
.fc-testimonial .slider-navigation .slider-btn {
  background-color: #fbda33;
  color: var(--black);
}
.fc-testimonial .slider-navigation .slider-btn:hover {
  background-color: var(--base-color);
  color: var(--white);
}
.fc-testimonial .slider-navigation .slider-btn-next {
  background-color: var(--base-color);
  color: #fff;
}
.fc-testimonial .test-text {
  position: absolute;
  top: 50%;
  inset-inline-start: -100px;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
  z-index: -2;
  color: #fff;
  text-align: center;
  font-size: 78px;
  font-weight: 700;
  line-height: 143px;
  text-transform: uppercase;
}
.fc-testimonial .feed {
  position: absolute;
  top: 56px;
  inset-inline-start: -20px;
  background-color: var(--base-color);
  padding: 6px 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  z-index: -2;
}
.fc-testimonial .feed span {
  color: var(--white);
  font-weight: 700;
}
.fc-testimonial .fc-test__thumb {
  position: absolute;
  bottom: 0px;
  inset-inline-start: 20%;
  z-index: -1;
}
.fc-testimonial .fc-test__thumb::before {
  content: "";
  position: absolute;
  top: 30%;
  inset-inline-start: -50px;
  width: 300px;
  height: 300px;
  background-color: var(--base-color);
  border-radius: 50%;
  z-index: -2;
}
.fc-testimonial .fc-test__thumb img {
  max-width: 20vw;
}
.fc-testimonial .testimonial__slider-single {
  padding: 60px 20px !important;
  background-color: #fbda33;
  border: 2px solid var(--black) !important;
  -webkit-box-shadow: 0px -2px 38px 0px rgba(0, 0, 0, 0.07);
  box-shadow: 0px -2px 38px 0px rgba(0, 0, 0, 0.07);
  border-radius: 12px;
}
.fc-testimonial .testimonial__slider-single i {
  color: var(--black);
}
.fc-testimonial .testimonial__slider-single .content p {
  font-weight: 500;
  color: var(--black);
  line-height: 1.8;
  font-style: italic;
}
.fc-testimonial q {
  color: var(--black);
  font-size: 20px;
}
.fc-testimonial .author-info p {
  font-weight: 500;
  color: var(--black);
  margin-top: 12px;
}
.fc-testimonial .author-info p span {
  color: #0c6460;
}
.fc-testimonial .author-thumb {
  width: 80px !important;
  min-width: 80px !important;
  height: 80px !important;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.social-sec .social-sec-single {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  background: #efefef;
}
.social-sec .social-sec-single a {
  padding-block: 40px;
  padding-inline: 12px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  gap: 12px;
  -webkit-border-after: 1px solid #bdd1d7;
  border-block-end: 1px solid #bdd1d7;
  font-weight: 600;
  color: var(--black);
  width: 100%;
}
.social-sec .social-sec-single a i {
  color: var(--base-color);
}
.social-sec .social-sec-single a:nth-last-of-type(1) {
  -webkit-border-after: 0px;
  border-block-end: 0px;
}
.fc-blog {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.fc-blog::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 400px;
  z-index: -1;
  background: #efefef;
}
.fc-blog .blog__single {
  padding: 0px;
  padding-bottom: 30px;
  background-color: var(--white) !important;
}
.fc-blog .blog__single:hover {
  background-color: var(--white) !important;
}
.fc-blog .blog__single-thumb a, .fc-blog .blog__single-thumb img {
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}
.fc-blog .tag {
  bottom: -35px;
  right: 24px;
  width: 70px;
  height: 70px;
  background-color: var(--base-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
  border-radius: 6px;
  top: unset !important;
  left: unset !important;
}
.fc-blog .tag span {
  width: 100%;
  color: var(--white);
}
.fc-blog .tag span:nth-of-type(1) {
  font-size: 24px;
  font-weight: 700;
}
.fc-blog .e-tag {
  color: var(--base-color);
  font-weight: 700;
  margin-bottom: 8px;
}
.fc-blog h6 a {
  font-weight: 700;
  color: var(--black);
}
.fc-blog h6 a:hover {
  color: var(--base-color);
}
.fc-blog .blog__single-content, .fc-blog .blog__single-cta, .fc-blog .blog__single-meta {
  padding: 0px 24px !important;
}
.fc-blog .blog__single-meta {
  border-top: 1px solid rgba(0, 23, 38, 0.1);
  padding-top: 20px !important;
  margin-top: 30px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.fc-blog .blog__single-meta p, .fc-blog .blog__single-meta i {
  color: #636776 !important;
}
.fc-contact {
  overflow: hidden;
}
.fc-contact .contact__content {
  background-color: var(--white) !important;
  position: relative;
  z-index: 1;
}
.fc-contact .contact__content::after {
  content: "";
  position: absolute;
  inset-inline-start: 100%;
  top: 0px;
  bottom: 0px;
  width: 100vw;
  height: 100%;
  background-color: var(--white);
  z-index: -1;
}
.fc-contact .input-single {
  background-color: white !important;
  border: 1px solid rgba(0, 0, 0, 0.09) !important;
}
.fc-contact .input-single input, .fc-contact .input-single textarea {
  color: #000000 !important;
}
.fc-contact .input-single input::-webkit-input-placeholder, .fc-contact .input-single textarea::-webkit-input-placeholder {
  color: #4f5b73 !important;
  text-transform: capitalize;
}
.fc-contact .input-single input::-moz-placeholder, .fc-contact .input-single textarea::-moz-placeholder {
  color: #4f5b73 !important;
  text-transform: capitalize;
}
.fc-contact .input-single input:-ms-input-placeholder, .fc-contact .input-single textarea:-ms-input-placeholder {
  color: #4f5b73 !important;
  text-transform: capitalize;
}
.fc-contact .input-single input::-ms-input-placeholder, .fc-contact .input-single textarea::-ms-input-placeholder {
  color: #4f5b73 !important;
  text-transform: capitalize;
}
.fc-contact .input-single input::placeholder, .fc-contact .input-single textarea::placeholder {
  color: #4f5b73 !important;
  text-transform: capitalize;
}
.fc-footer-three {
  position: relative;
  z-index: 1;
}
.fc-footer-three .social a:hover {
  background-color: var(--base-color);
  color: var(--white);
}
.fc-footer-three .footer-three__widget-news .content p i {
  color: var(--base-color);
}
.fc-footer-three .single-address i, .fc-footer-three button i {
  color: var(--base-color) !important;
}
.fc-footer-three label a {
  color: var(--base-color) !important;
}
.fc-footer-three .fc-one, .fc-footer-three .fc-two, .fc-footer-three .fc-three, .fc-footer-three .fc-four, .fc-footer-three .fc-five {
  position: absolute;
  z-index: -2;
}
.fc-footer-three .fc-one {
  top: 350px;
  inset-inline-start: 140px;
}
.fc-footer-three .fc-one img {
  max-width: 10vw;
  min-width: 30px;
  -webkit-animation: pulse 4s infinite ease-in-out;
  animation: pulse 4s infinite ease-in-out;
}
.fc-footer-three .fc-two {
  top: 40%;
  inset-inline-start: 190px;
}
.fc-footer-three .fc-two img {
  max-width: 5vw;
  min-width: 20px;
  -webkit-animation: moveLeftRight 6s infinite ease-in-out;
  animation: moveLeftRight 6s infinite ease-in-out;
}
.fc-footer-three .fc-three {
  top: 180px;
  inset-inline-end: 70px;
}
.fc-footer-three .fc-three img {
  max-width: 8vw;
  min-width: 40px;
  -webkit-animation: moveLeftRight 7s infinite ease-in-out;
  animation: moveLeftRight 7s infinite ease-in-out;
}
.fc-footer-three .fc-four {
  bottom: 10%;
  inset-inline-start: 7%;
}
.fc-footer-three .fc-four img {
  max-width: 5vw;
  min-width: 20px;
  -webkit-animation: moveTopBottom 9s infinite ease-in-out;
  animation: moveTopBottom 9s infinite ease-in-out;
}
.fc-footer-three .fc-five {
  bottom: 30%;
  inset-inline-end: 5%;
}
.fc-footer-three .fc-five img {
  max-width: 4vw;
  min-width: 20px;
  -webkit-animation: moveTopBottom 6s infinite ease-in-out;
  animation: moveTopBottom 6s infinite ease-in-out;
}
.topbar-five {
  background: #f1ebe9;
  top: 0px;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.topbar-five .topbar__inner {
  background-color: transparent;
  padding: 0px !important;
  width: 100% !important;
}
.topbar-five .topbar__list {
  padding: 12px 24px;
  background: #222223;
  border-radius: 30px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.topbar-five .topbar-five-extra {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 40px;
}
.topbar-five .topbar__extra {
  display: none !important;
}
.topbar-five .topbar__extra p {
  color: #0d0808;
  background-color: transparent;
  padding: 0px;
  border: 0px;
}
.topbar-five .social a {
  font-size: 16px;
  color: #9497a3;
}
.topbar-five .social a:hover {
  color: var(--base-color);
}
.header-five {
  background: #f1ebe9;
}
.header-five .navbar__menu-wrapper, .header-five .main-header__menu-box {
  background-color: transparent;
  padding-inline: 0px !important;
}
.header-five .contact-btn::before, .header-five .contact-btn::after {
  content: none;
}
.header-five .contact-btn i {
  color: var(--base-color);
}
.header-five .navbar__list {
  border-radius: 40px;
  padding-inline: 12px;
  border: 1px solid #060505;
  background: #fff;
}
.banner-five {
  padding-block: 120px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  margin-top: 90px;
}
.banner-five::before {
  content: "";
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(247deg, rgba(5, 21, 29, 0.7) 34.88%, rgba(109, 131, 126, 0) 95.49%);
}
.banner-five .shape {
  position: absolute;
  inset-inline-start: 0px;
  inset-inline-end: 0px;
  top: -5px;
  z-index: 3;
}
.banner-five .shape img {
  width: 100%;
  height: 28px;
}
.banner-five .banner-five__content {
  position: relative;
  z-index: 1;
}
.banner-five .spade {
  position: absolute;
  bottom: 30px;
  inset-inline-end: 30px;
  z-index: -1;
}
.banner-five .spade img {
  max-width: 20vw;
  min-width: 60px;
  -webkit-animation: pulse 4s infinite ease-in-out;
  animation: pulse 4s infinite ease-in-out;
}
.banner-five .commmit-tab-single {
  max-width: 700px;
  border-color: var(--white);
  background: #222822;
}
.banner-five .commmit-tab-single p {
  color: rgba(255, 255, 255, 0.49);
}
.banner-five .commmit-tab-single .text-lg {
  color: var(--white);
}
.banner-five .commmit-tab-single i {
  font-size: 45px;
}
.banner-five h1 {
  color: var(--white);
  font-family: var(--nunito);
}
.banner-five h1 span {
  font-family: "Hubot Sans", serif;
  font-weight: 500;
}
.banner-five p {
  max-width: 560px;
  color: var(--white);
}
.banner-five .bottom-line {
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0px 58%;
  padding-bottom: 35px;
}
.banner-five .btn--primary {
  padding: 20px 45px;
  color: var(--white);
  border-color: var(--base-color) !important;
  font-weight: 700;
  background-color: #ffae10;
}
.banner-five .btn--primary::before, .banner-five .btn--primary::after {
  background-color: var(--base-color);
}
.banner-five .btn--primary:hover {
  color: var(--black) !important;
}
.ff-overview {
  padding-block: 80px;
  background: #f1ebe9;
}
.ff-overview .ff-overview-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 60px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.ff-overview .thumb {
  min-width: 280px;
  position: relative;
}
.ff-overview .thumb img {
  width: 100%;
  border-radius: 20px;
  min-height: 200px;
}
.ff-overview .icon {
  position: absolute;
  left: 24px;
  bottom: -30px;
  width: 85px;
  min-width: 85px;
  height: 85px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 0px;
  background-color: var(--base-color);
  z-index: 1;
}
.ff-overview .icon::before {
  content: "";
  position: absolute;
  right: 72%;
  bottom: 9px;
  border-width: 23px;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #c60000;
  z-index: -1;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.ff-overview .icon i {
  font-size: 40px;
  color: var(--white);
}
.ff-overview a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  color: var(--base-color);
  font-weight: 700;
  margin-top: 20px;
}
.ff-overview a:hover {
  color: var(--black);
}
.ff-commit {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.ff-commit .btn--primary {
  padding-inline: 35px;
}
.ff-commit .fc-two {
  position: absolute;
  top: 160px;
  left: 80px;
  z-index: -1;
}
.ff-commit .fc-two img {
  max-width: 5vw;
  min-width: 20px;
  -webkit-animation: moveLeftRight 6s infinite ease-in-out;
  animation: moveLeftRight 6s infinite ease-in-out;
}
.ff-commit .vertical-text {
  padding: 50px 30px;
  background-color: #f00;
  display: inline-block;
  position: absolute;
  bottom: 40px;
  inset-inline-start: -30px;
  border-top: 5px solid #fbda33;
  border-bottom: 5px solid #ffae10;
  border-radius: 20px;
  z-index: 3;
}
.ff-commit .vertical-text h5 {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  font-weight: 500;
  color: var(--white);
  text-transform: lowercase;
}
.ff-commit .vertical-text h5 span {
  color: #ffae10;
  font-weight: 700;
}
.ff-commit .commit-count {
  inset-inline-start: 120px;
}
.ff-commit .commit__thumb::after {
  background-color: #f4d3d3;
}
.ff-commit .thumb-sm img {
  opacity: 0.4;
}
.ff-commit .content h6 {
  font-weight: 600;
}
.ff-commit .help-card-content h4 {
  color: var(--black);
}
.ff-commit .help__content-icon-group {
  max-width: 360px;
}
.ff-commit .help__content-icon-group .thumb::before {
  content: none;
}
.ff-commit .help__content-icon-group .thumb i {
  color: var(--base-color);
}
.ff-servicce-three {
  background-color: #f1ebe9;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.ff-servicce-three .btn--primary {
  padding-inline: 35px;
}
.ff-servicce-three .h-green {
  position: absolute;
  z-index: -1;
  left: 120px;
  top: 250px;
}
.ff-servicce-three .h-green img {
  -webkit-animation: pulse 5s linear infinite;
  animation: pulse 5s linear infinite;
}
.ff-servicce-three .cgf {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 440px;
  z-index: -2;
}
.ff-servicce-three .cgf::before {
  content: "";
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.69);
  opacity: 0.92;
}
.ff-servicce-three .cgf img {
  width: 100%;
  height: 100%;
  -o-object-position: right top;
  object-position: right top;
  position: relative;
  z-index: -2;
}
.ff-servicce-three .ff-service-three-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 24px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.ff-servicce-three .ff-service-three-single {
  padding: 47px 24px;
  border-radius: 8px;
  background: #fff;
  -webkit-box-shadow: 0px 7px 18px 0px rgba(0, 0, 0, 0.02);
  box-shadow: 0px 7px 18px 0px rgba(0, 0, 0, 0.02);
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.ff-servicce-three .ff-service-three-single:hover .thumb a {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.ff-servicce-three .ff-service-three-single:hover .content a {
  color: var(--base-color);
}
.ff-servicce-three .ff-service-three-single-alt {
  padding: 40px 24px;
}
.ff-servicce-three .thumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.ff-servicce-three .thumb svg {
  width: 45px;
}
.ff-servicce-three .thumb path {
  fill: var(--base-color);
}
.ff-servicce-three .thumb a {
  font-size: 24px;
  color: var(--base-color);
}
.ff-servicce-three i {
  margin-bottom: -3px;
}
.ff-servicce-three .content {
  max-width: 160px;
  margin-top: 40px;
}
.ff-servicce-three .content a {
  font-size: 20px;
  font-weight: 500;
  color: #061408;
}
.ff-servicce-three .content a:hover {
  color: var(--base-color);
}
.ff-servicce-three .content p {
  line-height: 1.4;
}
.ff-cause {
  background-color: #f1ebe9;
}
.ff-cause .cta .btn--primary {
  padding-inline: 40px;
  padding-block: 18px;
  border: 0px solid transparent !important;
}
.ff-cause .cta .btn--primary::before, .ff-cause .cta .btn--primary::after {
  background-color: var(--white);
}
.ff-cause .swiper-slide {
  opacity: 0.4;
}
.ff-cause .swiper-slide-prev, .ff-cause .swiper-slide-active, .ff-cause .swiper-slide-next {
  opacity: 1;
}
.ff-gallery {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.ff-gallery img {
  border-radius: 15px;
  width: 100%;
  max-width: 15vw;
  min-width: 50px;
}
.ff-gallery .thumb-lg {
  position: relative;
}
.ff-gallery .thumb-lg img {
  min-height: 360px;
  width: 100% !important;
  max-width: 100% !important;
}
.ff-gallery .thumb-lg a {
  background-color: var(--white);
}
.ff-gallery .thumb-lg a i {
  color: var(--base-color);
}
.ff-gallery .left-group {
  position: absolute;
  left: 200px;
  z-index: -1;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.ff-gallery .left-group .m-two {
  max-width: 185px;
  margin-left: -50px;
  margin-block: 40px;
}
.ff-gallery .left-group .m-three {
  margin-left: 40px;
}
.ff-gallery .right-group {
  position: absolute;
  right: 200px;
  z-index: -1;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.ff-gallery .right-group .m-two {
  max-width: 185px;
  margin-block: 40px;
  position: relative;
  right: -170px;
}
.ff-gallery .right-group .m-three {
  margin-right: 40px;
}
.ff-gallery .video-btn-wrapper {
  inset-inline-start: unset !important;
  left: 50% !important;
}
.ff-volunteer-two {
  background-color: #f2f2f2;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.ff-volunteer-two .parasuit {
  position: absolute;
  top: -150px;
  inset-inline-start: 8%;
  z-index: -1;
  -webkit-transform: translate(0px);
  -ms-transform: translate(0px);
  transform: translate(0px);
  -webkit-animation: fall 15s ease-in-out infinite;
  animation: fall 15s ease-in-out infinite;
}
.ff-volunteer-two .parasuit img {
  max-width: 8vw;
  min-width: 40px;
}
.ff-volunteer-two .th-b {
  position: absolute;
  top: 100px;
  right: 50px;
  z-index: -1;
  -webkit-transform: translate(0px);
  -ms-transform: translate(0px);
  transform: translate(0px);
}
.ff-volunteer-two .th-b img {
  max-width: 8vw;
  min-width: 40px;
}
.ff-volunteer-two .cd-f {
  border-radius: 16px;
  background: #fff;
  padding: 40px 20px;
  max-width: 650px;
  margin-inline: 20px;
  position: relative;
  top: -100px;
  margin-bottom: -100px;
}
.ff-volunteer-two .thumb img {
  border-radius: 16px;
  width: 100%;
  min-height: 360px;
}
.ff-volunteer-two path {
  fill: var(--base-color);
}
.ff-volunteer-two svg {
  width: 56px;
}
.ff-volunteer-two .commmit-tab-single {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 30px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.ff-volunteer-two .commmit-tab-single p {
  font-weight: 600;
  color: #232222;
}
.ff-volunteer-two .commit-tab-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
}
.ff-volunteer-two ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
}
.ff-volunteer-two li {
  color: #232222;
  font-weight: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
}
.ff-volunteer-two li i {
  color: var(--base-color);
}
.ff-volunteer-two .donation-future__thumb {
  border: 2px solid var(--base-color);
}
.ff-volunteer-two .donation-future__thumb hr {
  margin: 40px 0px 60px;
}
.ff-volunteer-two .donation-future__thumb .percent-value {
  color: var(--base-color);
}
.ff-volunteer-two .donation-future__thumb .progress-bar {
  background: #f0f1f2;
}
.ff-volunteer-two .donation-future__thumb .progress-bar-percent {
  background-color: var(--base-color);
}
.ff-volunteer-two .donation-future__thumb .progress-bar-percent::before {
  outline-color: var(--base-color) !important;
}
.ff-volunteer-two .donation-future__thumb .donation-amount {
  border-radius: 30.5px;
  border: 1px solid #f0f1f2;
  background: #f0f1f2;
}
.ff-volunteer-two .donation-future__thumb .donation-amount:hover {
  background-color: var(--base-color);
  border-color: var(--base-color);
}
.ff-volunteer-two .donation-future__thumb .btn--primary {
  color: var(--white) !important;
  border-color: var(--base-color) !important;
}
.ff-volunteer-two .donation-future__thumb .btn--primary::before, .ff-volunteer-two .donation-future__thumb .btn--primary::after {
  background-color: var(--base-color);
  border-color: var(--base-color);
}
.ff-service {
  background: #222223;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.ff-service .th-t {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
}
.ff-service .th-t img {
  -webkit-animation: moveTopBottom 5s linear infinite;
  animation: moveTopBottom 5s linear infinite;
  max-width: 7vw;
  min-width: 40px;
}
.ff-service .ff-service__single {
  padding: 40px 40px;
  border-radius: 11px;
  border: 1px dashed rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.04);
  -webkit-box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.06);
  box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.06);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.ff-service .ff-service__single:hover {
  background-color: var(--white);
}
.ff-service .ff-service__single:hover a i {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.ff-service .ff-service__single:hover .thumb::before {
  background-color: #f9edd8;
}
.ff-service .ff-service__single:hover .txt-lg {
  color: #232222;
}
.ff-service .thumb {
  position: relative;
  z-index: 1;
  display: inline-block;
  height: 65px;
}
.ff-service .thumb::before {
  content: "";
  position: absolute;
  top: 0px;
  right: -10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(228, 238, 239, 0.12);
  z-index: -1;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.ff-service p {
  -webkit-transition: var(--transition);
  transition: var(--transition);
  color: #8b7d7d;
}
.ff-service .txt-lg {
  color: var(--white);
}
.ff-service a {
  color: var(--base-color);
  font-weight: 700;
  gap: 16px;
}
.ff-service a i {
  font-size: 20px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  margin-bottom: -3px;
}
.cf-p {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.cf-p .th-t {
  position: absolute;
  top: 100px;
  left: 0px;
  z-index: -1;
}
.cf-p .th-t img {
  -webkit-animation: moveTopBottom 5s linear infinite;
  animation: moveTopBottom 5s linear infinite;
  max-width: 10vw;
  min-width: 40px;
}
.ff-community .ff-community__thumb {
  position: relative;
  z-index: 1;
}
.ff-community .ff-community__thumb img {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: -1;
  -webkit-animation: moveLeftRight 5s linear infinite;
  animation: moveLeftRight 5s linear infinite;
}
.ff-community .tc-one {
  border-radius: 0px 50px;
  border: 1px solid #4aad71;
  background: #4aad71;
  padding: 30px 20px;
}
.ff-community .tc-one h3, .ff-community .tc-one p {
  color: var(--white);
}
.ff-community .tc-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 40px;
  row-gap: 20px;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.ff-community .tc-two {
  padding: 40px 20px;
  border-radius: 50px 0px;
  border: 1px solid #c3000d;
  min-width: 200px;
  width: 100%;
  background: #c3000d;
}
.ff-community .tc-two h5, .ff-community .tc-two p {
  color: #fff;
  padding-bottom: 10px;
}
.ff-community .tc-three {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: 40px 20px;
  background-color: #ce6600;
  border-radius: 50px 0px;
  position: relative;
  z-index: 1;
  margin-top: 40px;
}
.ff-community .tc-three img {
  position: absolute;
  top: 90%;
  left: 90%;
  z-index: -1;
  -webkit-animation: none;
  animation: none;
}
.ff-community .tc-three h3, .ff-community .tc-three p {
  color: var(--white);
}
.ff-community .counter-four__content {
  text-align: start !important;
}
.ff-volunteer {
  position: relative;
  z-index: 1;
  overflow: hidden;
  direction: ltr !important;
  padding: 50px 0px 0px;
}
.ff-volunteer .ff-volunteer__inner {
  padding: 100px 20px;
  background-size: cover;
  border-radius: 25px;
  background-position: left bottom;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.ff-volunteer i {
  font-size: 70px;
}
.ff-volunteer i, .ff-volunteer h3, .ff-volunteer a {
  color: var(--white);
  text-align: left !important;
}
.ff-volunteer .video-btn-wrapper {
  position: static;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transform: translate(0px) !important;
  -ms-transform: translate(0px) !important;
  transform: translate(0px) !important;
}
.ff-volunteer .video-btn-wrapper i {
  color: var(--white) !important;
}
.ff-volunteer .th-right {
  position: absolute;
  top: 50%;
  right: 30%;
}
.ff-volunteer .th-right img {
  -webkit-animation: moveTopBottom 4s linear infinite;
  animation: moveTopBottom 4s linear infinite;
}
.ff-volunteer .th-top {
  position: absolute;
  top: 60px;
  left: 80px;
  z-index: -1;
}
.ff-volunteer .th-top img {
  -webkit-animation: pulse 6s linear infinite;
  animation: pulse 6s linear infinite;
}
.ff-team {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.ff-team .shp {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: #f2f2f2;
  z-index: -3;
  width: 100%;
  height: 300px;
}
.ff-team .shp::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #fbda33;
  width: 140px;
  height: 95px;
  border-bottom-right-radius: 150px;
  z-index: -2;
}
.ff-team .shp::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: var(--base-color);
  width: 120px;
  height: 127px;
  border-bottom-left-radius: 150px;
  z-index: -2;
}
.ff-team .team__single {
  direction: ltr;
}
.ff-team .team__single:hover .team__single__thumb-social {
  -webkit-transform: translateY(0px) translateX(0%) !important;
  -ms-transform: translateY(0px) translateX(0%) !important;
  transform: translateY(0px) translateX(0%) !important;
}
.ff-team .team__single:hover .team__single-content__icon {
  background-color: var(--black);
  color: var(--white);
}
.ff-team .team__icons {
  position: absolute;
  bottom: 0px;
  left: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  z-index: 1;
}
.ff-team .team__single-content__icon {
  width: 70px;
  min-width: 70px;
  height: 70px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: var(--base-color);
  border-radius: 0px 8px 0px 0px;
  z-index: 1;
  position: relative;
}
.ff-team .team__single-content__icon i {
  color: var(--white);
  font-size: 24px;
  -webkit-transform: rotate(180deg) !important;
  -ms-transform: rotate(180deg) !important;
  transform: rotate(180deg) !important;
}
.ff-team .team__single__thumb-social {
  -webkit-transform: translateY(0px) translateX(-20px) !important;
  -ms-transform: translateY(0px) translateX(-20px) !important;
  transform: translateY(0px) translateX(-20px) !important;
  position: relative !important;
  inset: unset !important;
  z-index: -1;
}
.ff-team .team__single__thumb-social ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  background-color: white;
}
.ff-team .team__single__thumb-social ul a {
  background-color: transparent;
  border-radius: 0px;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #504848;
  font-size: 16px;
}
.ff-team .team__single__thumb-social ul a:hover {
  color: var(--base-color) !important;
  background-color: transparent;
}
.ff-team .team__single-content {
  padding-bottom: 0px;
  text-align: center;
  background-color: transparent !important;
}
.ff-team .team__single-content p {
  color: var(--base-color);
}
.ff-team .team__single-content h6 {
  color: var(--black) !important;
  font-weight: 500 !important;
}
.ff-team .team__single-thumb::before {
  content: none;
}
.ff-team .team__single-thumb a, .ff-team .team__single-thumb img {
  border-radius: 15px;
}
.ff-team .btn--primary {
  color: var(--white);
}
.ff-team .btn--primary::before, .ff-team .btn--primary::after {
  background-color: var(--black);
}
.ff-testimonial {
  background-color: #f2f2f2;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.ff-testimonial .th-top {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
}
.ff-testimonial .th-top img {
  -webkit-animation: moveTopBottom 6s linear infinite;
  animation: moveTopBottom 6s linear infinite;
}
.ff-testimonial .th-left {
  position: absolute;
  bottom: 20px;
  left: 100px;
  z-index: -1;
}
.ff-testimonial .th-left img {
  -webkit-animation: moveLeftRight 6s linear infinite;
  animation: moveLeftRight 6s linear infinite;
}
.ff-testimonial .th-top-r {
  position: absolute;
  top: 100px;
  right: 100px;
  z-index: -1;
}
.ff-testimonial .th-top-r img {
  -webkit-animation: moveTopBottom 6s linear infinite;
  animation: moveTopBottom 6s linear infinite;
  max-width: 90px;
  -webkit-filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.ff-testimonial .th-right {
  position: absolute;
  bottom: 0px;
  right: 0px;
  z-index: -1;
}
.ff-testimonial .th-right img {
  -webkit-animation: moveLeftRight 6s linear infinite;
  animation: moveLeftRight 6s linear infinite;
}
.ff-testimonial .ff-testimonial-slider {
  padding-block: 30px;
  margin-block: -30px;
}
.ff-testimonial .swiper-pagination-bullet-active {
  border-color: var(--base-color);
}
.ff-testimonial .swiper-pagination-bullet-active::after {
  background-color: var(--base-color);
}
.ff-testimonial .ff-testimonial__single {
  padding: 60px 20px;
  border-radius: 26px;
  background: #fff;
  -webkit-box-shadow: 0px 4px 19px 0px rgba(0, 0, 0, 0.07);
  box-shadow: 0px 4px 19px 0px rgba(0, 0, 0, 0.07);
  position: relative;
  z-index: 1;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.ff-testimonial .ff-testimonial__single img {
  position: absolute;
  bottom: 35px;
  right: 50px;
  z-index: -1;
  -webkit-animation: pulse 6s linear infinite;
  animation: pulse 6s linear infinite;
}
.ff-testimonial .ff-testimonial__single:hover {
  background: #232222;
}
.ff-testimonial .ff-testimonial__single:hover .content-p, .ff-testimonial .ff-testimonial__single:hover q, .ff-testimonial .ff-testimonial__single:hover .designation-p {
  color: var(--white);
}
.ff-testimonial .content-p, .ff-testimonial q, .ff-testimonial .designation-p {
  -webkit-transition: var(--transition);
  transition: var(--transition);
  color: #092d3c;
}
.ff-testimonial .swiper-slide-active .ff-testimonial__single {
  background: #232222;
}
.ff-testimonial .swiper-slide-active .content-p, .ff-testimonial .swiper-slide-active q, .ff-testimonial .swiper-slide-active .designation-p {
  color: var(--white);
}
.ff-blog .blog__single {
  padding: 0px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0px;
  background-color: var(--white) !important;
}
.ff-blog .blog__single i {
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.ff-blog .blog__single:hover .blog__single-inner {
  background-color: var(--base-color);
}
.ff-blog .blog__single:hover i, .ff-blog .blog__single:hover a {
  color: var(--white) !important;
}
.ff-blog .swiper-slide-active .blog__single-inner {
  background-color: var(--base-color);
}
.ff-blog .swiper-slide-active i, .ff-blog .swiper-slide-active a, .ff-blog .swiper-slide-active p {
  color: var(--white) !important;
}
.ff-blog .blog__single-thumb {
  margin-bottom: 0px !important;
}
.ff-blog .blog__single-thumb a, .ff-blog .blog__single-thumb img {
  border-radius: 0px !important;
}
.ff-blog .blog__single-inner {
  margin-inline: 20px;
  padding: 30px 24px;
  border-radius: 7px;
  background: #fff;
  -webkit-box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.06);
  box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.06);
  position: relative;
  top: -104px;
  margin-bottom: -104px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.ff-blog .blog__single-meta {
  padding-inline: 0px;
}
.ff-blog .blog__single-content {
  margin-top: 16px;
  padding-inline: 0px;
  max-width: 320px;
}
.ff-blog .blog__single-content a {
  font-weight: 700;
}
.ff-blog .blog__single-cta {
  padding-inline: 0px;
}
.ff-blog .blog__single-cta a {
  font-weight: 500;
  font-size: 16px;
}
.ff-blog .blog__single-cta a::before {
  content: none;
}
.ff-blog .blog__single-cta a i {
  color: var(--base-color);
}
.ff-blog .ff-blog-slider {
  padding-bottom: 20px;
  margin-bottom: -20px;
}
.ff-blog .swiper-pagination-bullet-active {
  border-color: var(--base-color);
}
.ff-blog .swiper-pagination-bullet-active::after {
  background-color: var(--base-color);
}
.ff-footer {
  background: #1b1b1d;
}
.ff-footer h1, .ff-footer h2, .ff-footer h3, .ff-footer h4, .ff-footer h5, .ff-footer h6 {
  font-family: var(--nunito) !important;
}
.ff-footer .btn--primary {
  background-color: var(--white);
  color: var(--black);
}
.ff-footer .btn--primary::before, .ff-footer .btn--primary::after {
  background-color: var(--base-color);
}
@media only screen and (min-width: 576px) {
  .fc-profit .fc-profit__tab-btns {
    padding: 40px;
    -webkit-margin-end: 40px;
    margin-inline-end: 40px;
  }
  .fc-profit .profit__tab-btn {
    padding: 16px 24px;
  }
  .fc-profit .profit__tab-btn i {
    display: block;
  }
  .fc-testimonial .testimonial__slider-single {
    padding: 80px 100px !important;
  }
  .fc-testimonial .testimonial__slider-single q {
    font-size: 24px;
  }
  .ff-volunteer .ff-volunteer__inner {
    padding: 50px;
  }
  .social-sec .social-sec-single {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .social-sec .social-sec-single a {
    width: auto;
    -webkit-border-after: 0px;
    border-block-end: 0px;
    -webkit-border-end: 1px solid #bdd1d7;
    border-inline-end: 1px solid #bdd1d7;
  }
  .social-sec .social-sec-single a i {
    color: var(--base-color);
  }
  .social-sec .social-sec-single a:nth-last-of-type(1) {
    -webkit-border-after: 0px;
    border-block-end: 0px;
    -webkit-border-end: 0px;
    border-inline-end: 0px;
  }
  .ff-testimonial .ff-testimonial__single {
    padding: 60px;
  }
}
@media only screen and (min-width: 768px) {
  .commit .commmit-tab-single {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .fc-community .community-donation {
    padding: 80px !important;
  }
  .ff-service p {
    max-width: 230px;
  }
  .ff-service .txt-lg {
    max-width: 200px;
  }
  .ff-community .tc-one {
    padding: 30px 40px;
    max-width: 320px;
  }
  .ff-community .tc-wrapper {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .ff-community .tc-two {
    padding: 40px 30px;
    min-width: 200px;
    margin-top: 47px;
  }
  .ff-community .tc-two .tc-three {
    padding: 40px 30px;
  }
  .ff-volunteer-two .cd-f {
    padding: 40px 60px;
  }
  .ff-volunteer-two .cd-f .commmit-tab-single, .ff-volunteer-two .cd-f ul {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .banner-five {
    margin-top: 92px;
  }
  .banner-five .bottom-line {
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0px 85%;
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 992px) {
  .header-four {
    top: 106px !important;
  }
  .header-five {
    top: 73px !important;
  }
  .header-five .main-header__menu-box {
    width: 100% !important;
  }
  .banner-five {
    padding-block: 200px;
    margin-top: 165px;
  }
  .banner-four {
    margin-top: 206px !important;
    padding-block: 120px;
  }
  .banner-four h2 br {
    display: inline-block;
  }
}
@media only screen and (min-width: 1200px) {
  .topbar--quaternary .topbar__inner {
    padding-right: 12px !important;
  }
  .ff-volunteer-two .donation-future__thumb {
    margin-left: 30px;
  }
  .ff-commit .help-two__content {
    -webkit-margin-start: 50px;
    margin-inline-start: 50px;
  }
  .banner-five {
    padding-block: 240px;
    margin-top: 179px;
  }
  .banner-five .commmit-tab-single {
    position: absolute;
    bottom: -100px;
    inset-inline-end: 0px;
    z-index: -1;
  }
  .banner-five h1 {
    font-size: 140px;
    line-height: 150px;
  }
  .banner-five .bottom-line {
    background-position: 0px 93%;
    padding-bottom: 60px;
  }
}
@media only screen and (min-width: 1400px) {
  .topbar--quaternary .topbar__inner {
    border-radius: 30px;
  }
  .header-four {
    top: 69px !important;
  }
  .header-four .navbar__mobile-options {
    gap: 40px !important;
  }
  .fc-testimonial {
    padding-block: 200px !important;
  }
  .banner-four {
    margin-top: 169px !important;
    padding-block: 160px;
  }
  .banner-four h2 {
    font-size: 65px !important;
    line-height: 75px !important;
  }
  .counter-four .hb {
    font-size: 100px !important;
    line-height: 110px !important;
    font-weight: 800;
  }
  .counter-four .cnt {
    font-size: 70px !important;
    line-height: 80px !important;
    font-weight: 800;
  }
  .topbar-five .topbar__inner {
    padding: 0px !important;
  }
  .topbar-five .topbar__extra {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .banner-five {
    margin-top: 175px;
  }
}
@media only screen and (min-width: 1700px) {
  .fc-testimonial .slider-navigation {
    position: absolute !important;
    top: 50%;
    -webkit-transform: translateY(-50%) !important;
    -ms-transform: translateY(-50%) !important;
    transform: translateY(-50%) !important;
    inset-inline: unset !important;
    inset-inline-end: 6% !important;
    z-index: 1;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    max-width: -webkit-max-content !important;
    max-width: -moz-max-content !important;
    max-width: max-content !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: all !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 0px !important;
  }
}
.rtl .fc-contact .contact-bg img, .rtl .fc-profit .shape-left img, .rtl .banner-four .thumb img {
  scale: -1 1;
}
.rtl .fc-testimonial .slider-navigation {
  direction: rtl !important;
}
.rtl .text-start {
  text-align: right;
}
.rtl .fc-goal .title-animation {
  text-align: center;
}
@media (min-width: 1200px) {
  .rtl .offset-xl-2 {
    margin: 0px;
    margin-right: 16.66666667% !important;
  }
  .rtl .text-xl-end {
    text-align: left !important;
  }
}
.dark-body .pg-four .banner-four h2, .dark-body .pg-four .banner-four p {
  color: var(--white);
}
.dark-body .pg-four .counter-four {
  background-color: #2e2222;
}
.dark-body .pg-four .counter-four h1, .dark-body .pg-four .counter-four h2, .dark-body .pg-four .counter-four h3, .dark-body .pg-four .counter-four h4, .dark-body .pg-four .counter-four h5, .dark-body .pg-four .counter-four h6, .dark-body .pg-four .counter-four p {
  color: white;
}
.dark-body .pg-four .fc-goal h1, .dark-body .pg-four .fc-goal h2, .dark-body .pg-four .fc-goal h3, .dark-body .pg-four .fc-goal h4, .dark-body .pg-four .fc-goal h5, .dark-body .pg-four .fc-goal h6, .dark-body .pg-four .fc-goal p, .dark-body .pg-four .commit h1, .dark-body .pg-four .commit h2, .dark-body .pg-four .commit h3, .dark-body .pg-four .commit h4, .dark-body .pg-four .commit h5, .dark-body .pg-four .commit h6, .dark-body .pg-four .commit p {
  color: white;
}
.dark-body .pg-four .fc-goal .goal__single, .dark-body .pg-four .commit .goal__single {
  background-color: #2e2222;
}
.dark-body .pg-four .commit h4 {
  color: var(--black);
}
.dark-body .pg-four .commit .commmit-tab-single {
  border-color: var(--white);
}
.dark-body .pg-four .fc-profit {
  background-color: #2e2222;
}
.dark-body .pg-four .fc-profit li {
  color: var(--white);
}
.dark-body .pg-four .fc-community {
  background-color: #1e1e1e;
}
.dark-body .pg-four .fc-community h1, .dark-body .pg-four .fc-community h2, .dark-body .pg-four .fc-community h3, .dark-body .pg-four .fc-community h4, .dark-body .pg-four .fc-community h5, .dark-body .pg-four .fc-community h6, .dark-body .pg-four .fc-community p {
  color: white !important;
}
.dark-body .pg-four .fc-cause .shape img {
  display: none;
}
.dark-body .pg-four .fc-partner h1, .dark-body .pg-four .fc-partner h2, .dark-body .pg-four .fc-partner h3, .dark-body .pg-four .fc-partner h4, .dark-body .pg-four .fc-partner h5, .dark-body .pg-four .fc-partner h6, .dark-body .pg-four .fc-partner p {
  color: white !important;
}
.dark-body .pg-four .fc-contact .contact__content {
  background-color: #1e1e1e !important;
}
.dark-body .pg-four .fc-contact .contact__content::after {
  background-color: #1e1e1e !important;
}
.dark-body .pg-four .fc-cause .content h6, .dark-body .pg-four .fc-cause .content p {
  color: var(--white);
}
.dark-body .pg-four .fc-cause .tag a {
  background-color: var(--base-color) !important;
  color: var(--white) !important;
}
.dark-body .pg-four .fc-cause .cause__slider-cta {
  background-color: transparent;
}
.dark-body .pg-four .fc-cause .cause__slider-cta p, .dark-body .pg-four .fc-cause .cause__slider-cta span {
  color: var(--white) !important;
}
.dark-body .pg-four .fc-testimonial .testimonial__slider-single {
  background-color: #fbda33 !important;
}
.dark-body .pg-four .fc-testimonial .testimonial__slider-single h6 {
  color: var(--black) !important;
}
.dark-body .pg-four .ff-overview {
  background-color: #2c2a29;
}
.dark-body .pg-four .ff-overview h3 {
  color: var(--white);
}
.dark-body .pg-four .ff-overview a:hover {
  color: var(--white);
}
.dark-body .pg-four .ff-servicce-three, .dark-body .pg-four .ff-cause, .dark-body .pg-four .ff-volunteer-two, .dark-body .pg-four .ff-volunteer, .dark-body .pg-four .ff-testimonial {
  background-color: #1e1e1e;
}
.dark-body .pg-four .ff-cause h2 {
  color: var(--white) !important;
}
.dark-body .pg-four .ff-cause .cause__slider-cta {
  background-color: transparent;
}
.dark-body .pg-four .ff-cause .cause__slider-cta p, .dark-body .pg-four .ff-cause .cause__slider-cta span {
  color: var(--white) !important;
}
.dark-body .pg-four .ff-community {
  background-color: #1e1e1e;
}
.dark-body .pg-four .ff-community .tc-two h5, .dark-body .pg-four .ff-community .tc-two p {
  color: var(--black);
}
.dark-body .pg-four .ff-team .btn--primary::before, .dark-body .pg-four .ff-team .btn--primary::after {
  background-color: var(--base-color) !important;
}
.dark-body .pg-four .ff-team .shp {
  background-color: #1e1e1e;
}
.dark-body .pg-four .ff-team .team__single-content__icon {
  background-color: var(--black) !important;
}
.dark-body .pg-four .ff-team .team__single-content a {
  color: var(--white) !important;
}
.dark-body .pg-four .ff-blog .blog__single {
  background-color: transparent !important;
}
.dark-body .pg-four .ff-blog .blog__single-cta a {
  color: var(--black);
}
.dark-body .pg-four .topbar-five .topbar__extra p {
  color: var(--white);
}
.header-five.sticky-header {
  top: 0px !important;
}
.box-layout .topbar-five .topbar__extra {
  display: none !important;
}
.box-layout .header-four .social {
  display: none !important;
}
.box-layout .banner-four .thumb img {
  max-width: 38vw;
}
/* ==== 
 --------- (5.21) color switcher styles start ---------
 ==== */
.color-palate {
  position: fixed;
  left: 0px;
  text-align: center;
  top: 0%;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  width: 100%;
  max-width: 280px;
  z-index: 999;
  height: 100%;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
}
.color-palate .color-palate-inner {
  position: relative;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-transition: all;
  transition: all;
  background: #ffffff;
  -webkit-box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
  height: 100%;
  padding-bottom: 30px;
}
.color-palate .color-palate-inner::-webkit-scrollbar {
  width: 5px;
}
.color-palate .color-palate-inner::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.color-palate .color-palate-inner::-webkit-scrollbar-thumb {
  background: #888;
}
.color-palate .color-palate-inner::-webkit-scrollbar-thumb:hover {
  background: #2c2c2c;
}
.color-palate .palate {
  background: #0055d4;
  display: block;
  float: left;
  height: 45px;
  margin: 0 2.5% 12px;
  width: 20%;
  cursor: pointer;
  position: relative;
}
.color-palate .colors-list .active::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: white;
}
.color-palate .various-color {
  overflow: hidden;
  padding: 40px 0 15px;
}
.color-palate .colors-list {
  margin: 0 20px;
}
.color-palate .secondary-head {
  background: #222222;
  padding: 14px 0;
}
.color-palate .secondary-color {
  padding: 23px 0;
}
.color-palate .secondary-colors-list {
  margin: 0 80px;
}
.color-palate .palate-foo {
  color: #777777;
  font-size: 13px;
  font-weight: 400;
  padding: 0 30px;
  line-height: 1.8em;
}
.color-palate .palate-foo span {
  display: block;
  padding-top: 20px;
  margin-top: 5px;
  border-top: 1px dotted #b2b2b2;
}
.color-palate .palate.default-color {
  background: #cb162b;
}
.color-palate .palate.blue-color {
  background: #246af4;
}
.color-palate .palate.brown-color {
  background: #964b00;
}
.color-palate .palate.green-color {
  background: #3ead3c;
}
.color-palate .palate.orange-color {
  background: #ffb347;
}
.color-palate .palate.purple-color {
  background: #bb54e1;
}
.color-palate .palate.teal-color {
  background: #44a9aa;
}
.color-palate .palate.yellow-color {
  background: #ff0000;
}
.color-palate .color-trigger, .color-palate .close-color-trigger {
  background: #0055d4;
  cursor: pointer;
  height: 36px;
  width: 36px;
  left: 100%;
  position: absolute;
  top: 40%;
  -webkit-transform: translateY(-40%);
  -ms-transform: translateY(-40%);
  transform: translateY(-40%);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  mix-blend-mode: exclusion;
}
.color-palate .color-trigger i {
  color: #ffffff;
  font-size: 16px;
  -webkit-animation: fa-spin 2s linear infinite;
  animation: fa-spin 2s linear infinite;
}
.color-palate .close-color-trigger i {
  color: #ffffff;
  font-size: 20px;
}
.color-palate .close-color-trigger {
  display: none;
}
.color-palate h6 {
  font-weight: 700;
  color: #000000;
  text-transform: uppercase;
  font-size: 16px;
  margin-top: 20px;
}
.color-palate .box-version {
  padding-top: 10px;
  padding-bottom: 0px;
}
.color-palate .option-box {
  padding-top: 10px;
  padding-bottom: 5px;
}
.color-palate .option-box .active {
  background-color: var(--black);
}
.color-palate .option-box > li {
  position: relative;
  color: #ffffff;
  width: 40%;
  margin: 0px 3px;
  cursor: pointer;
  margin-bottom: 9px;
  padding: 8px 12px;
  font-size: 12px;
  display: inline-block;
  background-color: #0055d4;
  text-transform: uppercase;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.color-palate .option-box > li:hover {
  background-color: var(--black);
}
.color-palate .purchase-box {
  position: relative;
  padding: 20px 15px 0px;
  max-width: 270px;
  margin-inline: auto;
}
.color-palate .purchase-box__btn {
  position: relative;
  color: #ffffff;
  width: 50%;
  margin: 0;
  cursor: pointer;
  padding: 8px 12px;
  font-size: 12px;
  display: inline-block;
  background-color: #0055d4;
  text-transform: uppercase;
  margin-top: 25px;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}
.color-palate .purchase-box__btn:hover {
  background-color: var(--black);
}
.color-palate.visible-palate {
  -webkit-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
/* Home Six Css Start Here */
.btn-six-primary {
  gap: 10px !important;
  display: inline-flex !important;
}
.btn-six-primary span {
  line-height: 1;
  border-left: 1px solid var(--white);
  padding-left: 8px;
}
/* Header Css */
.topbar-six-area {
  background: var(--primary-six-light);
  padding: 9px 80px;
  z-index: 999 !important;
}
.topbar-six-list {
  max-width: 673px;
  width: 100%;
}
.topbar-six-list li a {
  font-size: 15px;
}
.topbar-six-icon {
  gap: 12px;
}
.topbar-six-icon p {
  font-size: 14px;
}
/* Header Man Css */
.header-six-area {
  background: var(--white);
  padding: 0 75px;
  top: 48px !important;
}
.sticky-header.header-six-area {
  top: 0 !important;
}
.header-six-area .navbar__options .header-six-navbar-space {
  margin-right: 48px;
}
.header-six-btn {
  border-radius: 30px;
}
/* Banner Css */
.banner-six-area {
  padding: 280px 70px 0;
}
.banner-six-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding-bottom: 120px;
}
.banner-six-section-wrapper {
  max-width: 763px;
  width: 100%;
}
.banner-six-subtitle {
  font-family: var(--caveat);
  font-weight: 700;
  font-size: 24px;
  line-height: 108%;
  color: var(--white);
  background: var(--primary-six);
  display: inline-block;
  padding: 3px 18px;
  margin-bottom: 18px;
}
.banner-six-title {
  font-weight: 700;
  font-size: 90px;
  line-height: 1.11;
  color: var(--primary-six-title);
  margin-bottom: 0;
}
.banner-six-title span {
  color: var(--primary-six);
}
.banner-six-paragraph {
  margin-block-end: 18px;
}
.banner-six-conter-wrap {
  display: flex;
  align-items: center;
  gap: 50px;
}
.banner-six-conter-item h2 {
  font-weight: 700;
  font-size: 50px;
  color: var(--primary-six-title);
  margin-bottom: -10px;
}
.banner-six-circle {
  position: relative;
  width: 160px;
  height: 160px;
  line-height: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--white);
  border-radius: 50%;
  z-index: 1;
  border: 2px dashed var(--base-color);
  margin-bottom: -55px;
  margin-left: -78px;
}
.banner-six-circle-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 86px;
  height: 86px;
  line-height: 1;
  transform: translate(-50%, -50%);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: var(--base-color);
  cursor: pointer;
}
.banner-six-circle-button span {
  line-height: 1;
  display: block;
}
.banner-six-rotate-content {
  animation: rotateImg 10s infinite linear;
}
@keyframes rotateImg {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.banner-six-content {
  max-width: 736px;
  width: 100%;
}
.banner-six-slide-bg {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 725px;
  border-radius: 40px;
}
.banner-six-social {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
.banner-six-social ul li {
  margin-bottom: 4px;
}
.banner-six-social ul li:last-child {
  margin-bottom: 0;
}
.banner-six-social ul li a {
  width: 35px;
  height: 35px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 14px;
  transition: .4s;
}
.banner-six-social ul li a:hover {
  background: var(--base-color);
  border: 1px solid rgba(255, 255, 255, 1);
}
.banner-six-social ul li span {
  font-weight: 500;
  font-size: 18px;
  color: var(--white);
  transform: rotate(-90deg);
  margin-top: 38px;
  margin-left: -26px;
}
.banner-six-slide-dot {
  background: rgba(255, 255, 255, 0.15);
  padding: 9px 22px;
  width: 100px !important;
  border-radius: 25px;
  text-align: center;
  position: absolute;
  left: auto !important;
  right: 53px;
  top: auto !important;
  bottom: 50px !important;
  z-index: 2;
}
.banner-six-slide-dot .swiper-pagination-bullet {
  opacity: 1;
  background: var(--white);
  width: 6px;
  height: 6px;
  position: relative;
  z-index: 1;
}
.banner-six-slide-dot .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--base-color) !important;
}
.banner-six-slide-dot .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 193, 7, 0.2);
}
/* Feature Css */
.feature-six-area {
  padding-bottom: 90px;
  margin-top: -55px;
}
.feature-six-wrapper {
  display: flex;
  gap: 10px;
  box-shadow: 0 0 3px 0 rgba(18, 47, 42, 0.23);
  background: var(--white);
  padding: 30px 20px 30px 20px;
  margin-bottom: 30px;
  border-radius: 10px;
  transition: .4s;
}
.feature-six-icon span {
  width: 70px;
  height: 70px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(132, 204, 76, .20);
  border-radius: 50%;
  transition: .4s;
}
.feature-six-content h4 {
  font-weight: 700;
  font-size: 26px;
  color: var(--primary-six-title);
  transition: .4s;
}
.feature-six-content p {
  transition: .4s;
}
.feature-six-wrapper:hover {
  background: var(--primary-six);
}
.feature-six-wrapper:hover .feature-six-icon span {
  background: var(--white);
}
.feature-six-wrapper:hover .feature-six-content h4, .feature-six-wrapper:hover .feature-six-content p {
  color: var(--white);
}
/* Section Css */
.section-six-wrapper {
  margin-bottom: 28px;
}
.section-six-subtitle {
  font-family: var(--caveat);
  font-weight: 700;
  font-size: 24px;
  color: var(--primary-six);
  margin-bottom: 10px;
}
.section-six-title {
  font-weight: 700;
  font-size: 54px;
  line-height: 1.18;
  text-transform: capitalize;
  color: var(--primary-six-title);
}
.section-six-paragraph {
  line-height: 175%;
  margin-top: 17px;
}
/* About Css */
.about-six-area {
  padding-bottom: 120px;
}
.about-six-shape-1 {
  position: absolute;
  top: 32%;
  left: -107px;
}
.about-six-shape-2 {
  position: absolute;
  bottom: 36%;
  left: -16%;
}
.about-six-shape-3 {
  position: absolute;
  top: 15%;
  right: 0;
}
.about-six-circle {
  border: 2px dashed transparent;
  position: absolute;
  bottom: 9%;
  right: 0;
}
.about-six-circle-button {
  background: var(--primary-six);
}
.about-six-blockquote {
  display: flex;
  align-items: center;
  gap: 15px;
  background: rgba(71, 159, 16, .1);
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 36px;
}
.about-six-blockquote-thumb img {
  max-width: 100px;
  height: 100px;
}
.about-six-blockquote-content p {
  font-size: 15px;
  line-height: 175%;
  margin-bottom: 0;
}
.about-six-blockquote-icon {
  position: absolute;
  bottom: 0;
  right: 10px;
}
.about-six-list-wrap {
  display: flex;
  gap: 85px;
}
.about-six-list ul {
  display: flex;
  flex-direction: column;
}
.about-six-list ul li {
  font-weight: 700;
  font-size: 22px;
  color: var(--primary-six-title);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.about-six-list ul li:last-child {
  margin-bottom: 0;
}
.about-six-list ul li span {
  line-height: 1;
}
/* Community Css */
.community-six-bg::after {
  display: none;
}
.community-six-area .community-donation {
  border-radius: 60px;
}
.community-six-area .warning .line {
  background-color: var(--primary-six);
}
.community-six-area .input-group-icon .thumb {
  background-color: var(--primary-six);
}
.community-six-area .input-group-icon {
  background-color: var(--base-color);
}
.community-six-area .input-group-icon input {
  color: var(--white);
}
.community-six-area .donation-form__single .active {
  background-color: var(--primary-six);
  color: var(--white);
  border-color: var(--primary-six);
}
.community-six-area .radio-single input:checked + label::before {
  border-color: var(--base-color);
}
.community-six-area .radio-single input:checked + label::after {
  background-color: var(--base-color);
}
.community-six-area .donation-form__single .donation-amount:hover {
  background-color: var(--primary-six);
  color: var(--white);
  border-color: var(--primary-six);
}
/* Team css */
.team-six-area {
  padding: 240px 0 120px;
}
.team-six-wrapper {
  box-shadow: 0 10px 25px 0 rgba(37, 42, 52, 0.08);
  padding: 25px;
  border-radius: 20px;
  margin-bottom: 30px;
}
.team-six-thumb {
  text-align: center;
  margin-bottom: 30px;
}
.team-six-thumb img {
  border: 3px solid var(--primary-six);
  border-radius: 50%;
}
.team-six-content {
  border: 1px dashed var(--primary-six);
  padding: 20px 20px;
  text-align: center;
  border-radius: 20px;
}
.team-six-subtitle {
  font-weight: 500;
  font-size: 18px;
  color: var(--primary-six);
  margin-bottom: 6px;
}
.team-six-title {
  font-weight: 700;
  font-size: 22px;
  color: var(--primary-six-title);
  line-height: 1;
  margin-bottom: 20px;
}
.team-six-socail ul li {
  margin-right: 10px;
}
.team-six-socail ul li a {
  width: 35px;
  height: 35px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(102, 116, 113, .4);
  border-radius: 50%;
  transition: .4s;
}
.team-six-socail ul li a:hover {
  background: var(--base-color);
  border-color: var(--base-color);
  color: var(--white);
}
.team-six-button-wrap {
  display: flex;
  align-items: center;
  border: 1px solid rgba(102, 116, 113, .2);
  border-radius: 20px;
  padding: 16px 20px;
  max-width: 496px;
  width: 100%;
  margin: auto;
  margin-top: 25px;
}
.team-six-button-left {
  margin-right: 40px;
  padding-right: 40px;
  position: relative;
}
.team-six-button-left::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 135%;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: rgba(102, 116, 113, .2);
}
.team-six-button-right span {
  line-height: 1.2;
  font-weight: 500;
  font-size: 18px;
}
.team-six-button-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.team-six-button-right a {
  width: 35px;
  height: 35px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(250, 171, 52, 0.3);
  color: var(--base-color);
}
.team-six-button-right a:hover {
  background: var(--base-color);
  color: var(--white);
}
/* Events css */
.events-six-area {
  background: #f6faf3;
  padding: 120px 0 120px;
}
.events-six-button {
  text-align: right;
}
.events-six-wrapper {
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--white);
  padding: 30px;
  border-radius: 20px;
  margin-bottom: 30px;
}
.events-six-wrapper:nth-child(even) {
  flex-direction: row-reverse;
}
.events-six-thumb img {
  max-width: 400px;
  height: 252px;
  object-fit: cover;
}
.events-six-content-top {
  border-bottom: 1px dashed rgba(102, 116, 113, .4);
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.events-six-content-top h4 {
  font-weight: 700;
  font-size: 35px;
  line-height: 1.14;
  text-transform: capitalize;
  color: var(--primary-six-title);
  margin-bottom: 14px;
}
.events-six-content-top p {
  font-weight: 500;
  font-size: 18px;
  line-height: 144%;
  color: rgba(102, 116, 113, .5);
  text-transform: full-size-kana;
}
.events-six-content-bottom {
  display: flex;
  justify-content: space-between;
}
.events-six-content-date h6 {
  font-weight: 700;
  font-size: 22px;
  color: var(--primary-six-title);
  margin-bottom: 8px;
}
.events-six-content-button .btn-six-primary {
  background: rgba(73, 182, 69, 0.09);
  color: var(--primary-six) !important;
  transition: .4s;
}
.events-six-content-button .btn-six-primary::before {
  background: transparent;
}
.events-six-content-button .btn-six-primary::after {
  background: transparent;
}
.events-six-content-button .btn-six-primary span {
  border-left: 1px solid var(--primary-six);
  transition: .4s;
}
.events-six-content-button .btn-six-primary:hover {
  background: var(--primary-six) !important;
  color: var(--white) !important;
}
.events-six-content-button .btn-six-primary:hover span {
  border-color: var(--white);
  transition: .4s;
}
.events-six-content-button .btn-six-primary:hover span img {
  transition: .4s;
}
.events-six-content-button .btn-six-primary:hover span img {
  filter: brightness(0) invert(1);
}
/* difference css */
.difference-six-area::before {
  content: "";
  position: absolute;
  width: 51%;
  height: 100%;
  top: 0;
  left: 0;
  background: #0B3D19;
  z-index: -1;
  border-radius: 0 20px 20px 0;
}
.difference-six-wrapper {
  padding: 120px 0 90px;
}
.difference-six-bottom {
  position: absolute;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
}
.difference-six-bg-shape {
  position: absolute;
  bottom: 0;
  left: 14%;
  z-index: -1;
  opacity: .7;
}
.differece-six-thumb img {
  border-radius: 10px;
}
/* testimonial css */
.testimonial-six-area {
  background: #f6faf3;
  padding: 120px 0 45px;
}
.testimonial-six-active {
  padding: 30px 40px 30px 70px;
}
.testimonial-six-wrapper {
  background: var(--white);
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 10px 40px 0 rgba(29, 31, 21, 0.1);
}
.swiper-3d .swiper-slide-shadow {
  background: var(--white);
  box-shadow: 0 10px 40px 0 rgba(29, 31, 21, 0.1);
}
.testimonial-six-top-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.testimonial-six-top {
  border-bottom: 1px dashed rgba(102, 116, 113, .4);
  padding-bottom: 20px;
  margin-bottom: 26px;
}
.testimonial-six-top-content h6 {
  font-weight: 700;
  font-size: 22px;
  color: var(--primary-six-title);
}
.testimonial-six-author-img img {
  border: 3px solid var(--base-color);
  border-radius: 50%;
}
.testimonial-six-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.testimonial-six-author {
  display: flex;
  gap: 12px;
}
.testimonial-six-review i {
  color: var(--base-color);
}
.testimonial-six-paragraph {
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  line-height: 173%;
}
.testimonial-six-author-content h6 {
  font-weight: 700;
  font-size: 22px;
  color: var(--primary-six-title);
  margin-bottom: 0;
}
.testimonial-six-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-six-rating h6 {
  font-weight: 700;
  font-size: 22px;
  color: var(--primary-six-title);
  margin-bottom: 0;
}
.testimonial-six-rating p {
  margin-bottom: 0;
}
.testimonial-six-dot {
  background: var(--base-color);
  padding: 8px 26px;
  width: 100px !important;
  border-radius: 25px;
  text-align: center;
  margin: auto;
}
.testimonial-six-dot .swiper-pagination-bullet {
  opacity: 1;
  background: var(--white);
  width: 7px;
  height: 7px;
  position: relative;
  z-index: 1;
}
.testimonial-six-dot .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}
.testimonial-six-down-content {
  position: relative;
}
.testimonial-six-down-content::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 24px;
  left: 0;
  background: rgba(102, 116, 113, .20);
}
.testimonial-six-down-title {
  color: var(--primary-six-title);
  font-weight: 700;
  font-size: 22px;
  padding: 0 15px;
  position: relative;
  z-index: 1;
  display: inline-flex;
  background: #f6faf3;
  align-items: center;
  gap: 10px;
}
.testimonial-six-down-title span {
  line-height: 1;
}
.testimonial-six-frist-row {
  padding-bottom: 100px;
}
/* Brand Css */
.brand-six-area {
  background: #f6faf3;
  padding-bottom: 120px;
}
.brand-six-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(73, 182, 69, 0.3);
  border-radius: 10px;
  padding: 40px 0;
  height: 125px;
  cursor: pointer;
}
.brand-six-active-media {
  transition: all 0.7s ease-in-out;
  transform: translateY(0%);
}
.brand-six-hover-media {
  opacity: 0;
  visibility: hidden;
  transition: all 0.7s ease-in-out;
  transform: translateY(30%);
  border-radius: 50%;
  position: absolute;
}
.brand-six-wrapper:hover .brand-six-active-media {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  transform: translateY(-100%);
}
.brand-six-wrapper:hover .brand-six-hover-media {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Cause Css */
.cause-six-area {
  padding: 120px 0 90px;
}
.cause-six-wrapper {
  background: var(--white);
  box-shadow: 0 10px 25px 0 rgba(37, 42, 52, 0.08);
  border-radius: 20px;
  margin-bottom: 30px;
}
.cause-six-wrapper .content h6 {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  color: var(--primary-six-title);
  margin-bottom: 14px;
}
.cause-six-wrapper .content h6:hover {
  color: var(--base-color);
}
.cause-six-wrapper .bottom {
  padding: 16px 12px 20px 15px;
}
.cause-six-wrapper .progress-bar .progress-bar-percent {
  background-color: var(--primary-six);
}
.cause-six-wrapper .progress-bar {
  background-color: rgba(71, 159, 16, .20);
}
.cause-six-wrapper .content p {
  font-size: 14px;
  margin-bottom: 4px;
}
.cause-six-wrapper .cause-progress__intro p span {
  font-size: 14px;
  color: var(--primary-six-title);
}
.cause-six-wrapper .cause-progress__intro p {
  display: flex;
  justify-content: space-between;
}
.cause-six-wrapper .cause-progress__goal {
  display: flex;
  justify-content: space-between;
  margin: 12px 0;
}
.cause-six-wrapper .cause-progress__goal p {
  font-weight: 700;
  font-size: 14px;
  color: var(--primary-six-title);
}
.cause-six-wrapper .btn--secondary {
  padding: 8px 20px;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid var(--primary-six);
  color: var(--primary-six);
  background-color: transparent;
}
.cause-six-wrapper .btn--secondary::before {
  background-color: transparent;
}
.cause-six-wrapper .btn--secondary::after {
  background-color: transparent;
}
.cause-six-wrapper .btn--secondary:hover {
  border: 1px solid var(--base-color);
  color: var(--base-color);
}
/* Video Css */
.video-six-area {
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 190px 0 190px;
  position: relative;
  z-index: 1;
}
.video-six-area::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(18, 47, 42, 0.8);
  z-index: -1;
}
.video-six-button a {
  width: 130px;
  height: 130px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-six);
  color: var(--white);
  border-radius: 50%;
  font-size: 60px;
  position: relative;
}
.video-six-button a::after {
  content: "";
  position: absolute;
  width: 80%;
  height: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: borderanimate2 2s linear infinite;
  z-index: -1;
}
.video-six-button a i {
  transform: translatex(8px);
}
@keyframes borderanimate2 {
  0% {
    transform: translate(-50%, -50%) scale(.4);
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}
/* Blog Css */
.blog-six-area {
  padding: 30px 0 5px;
}
.blog-six-wrapper {
  background: var(--white);
  box-shadow: 0 10px 25px 0 rgba(37, 42, 52, 0.08);
  border-radius: 20px;
  margin-bottom: 30px;
}
.blog-six-area .blog__single-inner {
  padding: 20px 4px 30px;
}
.blog-six-area .blog__single-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  row-gap: 8px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 0px 12px;
}
.blog-six-area .blog__single-meta p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.blog-six-area .blog__single-meta p i {
  color: var(--base-color);
}
.blog-six-area .blog__single-content {
  padding: 0px 12px;
}
.blog-six-area .blog__single-content h5 {
  font-weight: 700;
  color: var(--secondary-color);
  margin-top: -8px;
}
.blog-six-area .blog__single-content h5:hover {
  color: var(--base-color);
}
.blog-six-area .blog__single-cta {
  margin-top: 20px;
  padding: 0px 12px;
}
.blog-six-area .blog__single-cta a {
  font-weight: 700;
  color: var(--secondary-color);
  font-size: 18px;
  position: relative;
}
.blog-six-area .blog__single-cta a::before {
  content: "";
  position: absolute;
  top: 85%;
  inset-inline-start: 0px;
  width: 76%;
  height: 1px;
  background-color: var(--secondary-color);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.blog-six-area .blog__single-cta a i {
  color: var(--tertiary-color);
  font-size: 20px;
  margin-bottom: -2px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.blog-six-button {
  margin-left: 10px;
}
.blog-six-button .btn-six-primary {
  padding: 16px 34px;
  background-color: #272e5c;
}
.blog-six-button .btn-six-primary::before {
  background: var(--primary-six);
}
.blog-six-button .btn-six-primary::after {
  background: var(--primary-six);
}
.blog-six-button .btn-six-primary:hover {
  background: var(--base-color);
}
/* Subscribe Css */
.subscribe-six-left {
  background: var(--base-color);
  padding: 60px 33px 50px;
  border-radius: 20px 0 0 20px;
}
.subscribe-six-left h6 {
  font-weight: 700;
  font-size: 22px;
  color: var(--white);
}
.subscribe-six-left h3 {
  font-weight: 700;
  font-size: 36px;
  color: var(--white);
}
.subscribe-six-input {
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  border-radius: 0 20px 20px 0;
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 0 33px 0 33px;
  position: relative;
}
.subscribe-six-input input {
  width: 100%;
  height: 56px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 28px;
  padding-left: 30px;
  color: var(--white);
}
.subscribe-six-input input::placeholder {
  color: var(--white);
}
.subscribe-six-button {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}
.subscribe-six-button .btn-six-primary {
  padding: 16px 24px;
}
/* Footer Css */
.footer-six-area {
  background: #0B3D19;
  padding-top: 210px !important;
  margin-top: -92px;
}
.footer-six-area::after {
  display: none;
}
.footer-six-area .footer-two__widget li a {
  font-weight: 300;
  margin-left: -20px;
}
.footer-six-area .footer-two__widget li a::after {
  display: none;
}
.footer-six-area .footer-two__widget li a:hover {
  color: var(--base-color) !important;
  margin-left: 0;
}
.footer-six-area .footer-two__widget li a span {
  background: none;
  height: inherit;
  width: inherit;
  line-height: 1;
  transform: translateY(-2px);
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
.footer-six-area .footer-two__widget li a:hover span {
  opacity: 1;
  visibility: visible;
}
.footer-six-copyright {
  border: none !important;
  padding: 0 !important;
}
.footer-six-copyright-border {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 30px 0;
}
.footer-six-area .footer-two__copyright-inner p {
  font-weight: 300 !important;
}
.footer-six-area .footer-two__widget .footer-two__widget-content--contact a {
  margin-left: 0;
}
.footer-six-bg-shape-1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.footer-six-bg-shape-2 {
  position: absolute;
  bottom: 20%;
  left: 4%;
  z-index: -1;
}
.footer-six-bg-shape-3 {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
/* Home Six Css Start End */
/* Home Seven Css Start Start */
/* Font-Family */
.recoleta-font {
  font-family: var(--recoleta);
}
.satoshi-font {
  font-family: var(--satoshi);
}
/* Button Seven */
.banner-seven-button {
  display: flex;
  align-items: center;
  gap: 28px;
}
.btn-six-primary span {
  line-height: 1;
  border-left: none;
  padding-left: 0;
}
.btn-six-primary:hover {
  color: var(--black);
}
.home-seven-body {
  background: var(--primary-seven-body);
}
.home-seven-body .container {
  max-width: 1420px;
}
/* Section Title */
.section-seven-title {
  font-family: var(--recoleta);
  font-weight: 400;
  font-size: 70px;
  color: var(--primary-seven-heading);
  margin-bottom: 18px;
}
.section-seven-paragraph {
  font-family: var(--satoshi);
  font-weight: 500;
  font-size: 18px;
  color: --primary-seven-text;
  text-transform: lowercase;
}
/* Butoon Arrow Hover */
.icon_box {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  padding: 0 4px;
  transform: rotate(-45deg);
  transition: all 0.3s ease-in-out 0s;
}
.icon_box i {
  display: inline-flex;
  line-height: 1;
}
.icon_box .icon_first {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
  transition: all 0.3s ease-in-out 0s;
}
.icon_box .icon_second {
  position: absolute;
  transform: translateX(-150%);
  transition: all 0.3s ease-in-out 0s;
}
.arrow-btn:hover .icon_box .icon_first {
  transform: translateX(150%);
}
.arrow-btn:hover .icon_box .icon_second {
  transform: translateX(0%);
}
/* Header Css */
.header-seven-area {
  top: 0 !important;
  padding: 0 0 0 80px;
  z-index: 11;
  position: relative;
}
.header-seven-btn {
  background: var(--white);
  box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.06);
  color: var(--black);
  padding: 24px 56px;
  border-radius: 34px;
  display: inline-flex;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: capitalize;
  gap: 15px;
  font-family: var(--recoleta);
}
.header-seven-btn:hover {
  box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.20);
}
.header-seven-sidenav-box button {
  background: var(--base-color);
  padding: 38px 59px;
  display: inline-flex;
  gap: 17px;
  font-weight: 500;
  font-size: 18px;
  color: var(--black);
}
.header-seven-wrap {
  display: flex;
  gap: 40px;
}
.header-seven-navbar-space {
  margin-right: 104px !important;
}
.header-seven-area .contact-btn p {
  font-size: 14px;
  text-transform: initial;
  line-height: 1;
  font-weight: 400;
  color: #1b325c;
  margin-bottom: 8px;
}
.header-seven-area .navbar__item a {
  text-transform: uppercase;
  font-weight: 700;
}
.header-seven-area .contact-btn a {
  font-weight: 400;
  font-size: 18px;
  color: #1b325c;
  line-height: 1;
  background-image: linear-gradient(to right, currentColor 0, currentColor 100%);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: all 0.3s, background-size 0.8s;
}
.header-seven-area .contact-btn a:hover {
  background-size: 100% 1px;
}
/* Banner Css */
.banner-seven-area {
  background: var(--white);
  padding: 70px 0 120px 260px;
}
.banner-seven-btn {
  font-weight: 500;
  font-size: 16px;
  color: var(--black);
  font-family: var(--recoleta);
  background-image: linear-gradient(to right, currentColor 0, currentColor 100%);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: all 0.3s, background-size 0.8s;
}
.banner-seven-btn:hover {
  background-size: 100% 1px;
}
.banner-seven-title {
  color: #0e253a;
  font-family: var(--recoleta);
  font-weight: 400;
  font-size: 170px;
  line-height: 82%;
  text-transform: capitalize;
  margin-bottom: 56px;
}
.banner-seven-button {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 58px;
}
.banner-seven-button .btn-seven-primary {
  padding: 19px 40px;
  border: 1px solid var(--black);
}
.banner-seven-button .btn-seven-primary:hover {
  border: 1px solid transparent;
}
.banner-seven-paragraph {
  max-width: 310px;
  width: 100%;
  font-weight: 500;
  font-size: 18px;
  color: #032532;
  text-transform: lowercase;
  font-family: var(--satoshi);
  margin-bottom: 0;
  padding-left: 20px;
  position: relative;
  margin-left: auto;
  margin-right: 85px;
}
.banner-seven-paragraph::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 74px;
  top: 55%;
  left: 0;
  transform: translateY(-50%);
  background: var(--base-color);
}
.banner-seven-titming {
  transition-timing-function: linear;
}
.banner-seven-wrapper-shape-1 {
  position: absolute;
  left: -27%;
  top: 0;
  z-index: -1;
  animation: bounce-one 4s forwards infinite alternate;
}
.banner-seven-wrapper-shape-2 {
  position: absolute;
  left: -27%;
  bottom: 0;
  z-index: -1;
  animation: rotate 4.50s infinite;
}
.banner-seven-wrapper-shape-4 {
  position: absolute;
  top: -18%;
  right: -15%;
  z-index: -1;
  animation: bounce-two 1s ease-in-out 0.1s forwards infinite alternate;
}
.banner-seven-bg-shape-1 {
  position: absolute;
  top: -14%;
  left: 0;
  z-index: -1;
}
.banner-seven-bg-shape-2 {
  position: absolute;
  top: 70px;
  right: 0;
  z-index: -1;
}
.banner-seven-bg-shape-3 {
  position: absolute;
  left: 0;
  bottom: -46px;
  z-index: -1;
}
@keyframes bounce-one {
  0% {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  100% {
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -o-transform: translateY(20px);
    transform: translateY(20px);
  }
}
@keyframes bounce-two {
  0% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(0);
  }
}
/* About Css */
.about-seven-area {
  padding: 60px 0 160px;
}
.about-seven-area .section-seven-paragraph {
  max-width: 448px;
  margin: auto;
}
.about-seven-wrapper {
  background: #088780;
  padding: 80px 60px 80px;
  max-width: 592px;
  margin-left: 160px;
}
.about-seven-title {
  font-family: var(--recoleta);
  font-weight: 400;
  font-size: 70px;
  line-height: .82;
  color: var(--white);
  margin-bottom: 42px;
}
.about-seven-list ul li {
  list-style: disc;
  padding-left: 6px;
  margin-bottom: 22px;
  color: var(--white);
}
.about-seven-list ul li a {
  font-family: var(--satoshi);
  font-weight: 400;
  font-size: 20px;
  text-transform: capitalize;
  color: var(--white);
  background-image: linear-gradient(to right, currentColor 0, currentColor 100%);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: all 0.3s, background-size 0.8s;
}
.about-seven-list ul li a:hover {
  background-size: 100% 1px;
}
.about-seven-shape {
  position: absolute;
  top: -106px;
  left: 28px;
  z-index: -1;
}
.about-seven-thumb {
  margin-left: 115px;
}
.about-seven-counter {
  margin-left: 40px;
  margin-top: -74px;
}
.about-seven-counter h2 {
  font-family: var(--satoshi);
  font-weight: 700;
  font-size: 200px;
  line-height: 14%;
  color: var(--white);
  margin-bottom: 17px;
}
.about-seven-counter h2 span {
  display: inline-block;
  line-height: 139px;
}
.about-seven-counter p {
  font-family: var(--recoleta);
  font-weight: 400;
  font-size: 41px;
  text-transform: capitalize;
  color: var(--primary-seven-heading);
  margin-bottom: 0;
}
.about-seven-bg-shape-1 {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  animation: bounce-left 3.5s infinite;
}
.about-seven-bg-shape-2 {
  position: absolute;
  bottom: -45px;
  right: 0;
  z-index: -1;
}
/* Childhood Css */
.childhood-seven-area {
  background: #1E1E1E;
  padding: 160px 0 130px;
}
.childhood-top-descrip {
  margin-left: 80px;
}
.childhood-seven-main-wrapper {
  margin-bottom: 30px;
}
.childhood-seven-wrapper {
  background: #ffecc9;
  width: 100%;
  height: 554px;
  margin-bottom: 30px;
}
.childhood-seven-wrapper::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(181deg, #fff 0%, rgba(255, 255, 255, 0) 22.38%, rgba(255, 255, 255, 0) 50.82%, rgba(255, 255, 255, 0.22) 70.21%, rgba(255, 255, 255, 0.82) 87.03%, #fff 100%);
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: .8s ease-in-out;
}
.childhood-seven-thumb a {
  display: block;
}
.childhood-seven-thumb img {
  width: 240px;
  height: 240px;
  object-fit: cover;
  transition: .4s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0;
  border-radius: 50%;
}
.childhood-seven-wrapper:hover .childhood-seven-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  transition: .4s ease-in-out;
}
.childhood-seven-wrapper:hover::before {
  opacity: 1;
  visibility: visible;
}
.childhood-seven-button {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  transition: .6s;
}
.childhood-seven-button a {
  font-family: var(--recoleta);
  font-weight: 400;
  font-size: 29px;
  line-height: 92%;
  text-transform: capitalize;
  text-align: center;
  color: #043460;
}
.childhood-seven-wrapper:hover .childhood-seven-button {
  bottom: 45px;
}
.childhood-seven-title {
  font-weight: 400;
  font-size: 26px;
  color: var(--white);
  display: inline-block;
  margin-bottom: 8px;
  background-image: linear-gradient(to right, currentColor 0, currentColor 100%);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: all 0.3s, background-size 0.8s;
}
.childhood-seven-title:hover {
  background-size: 100% 1px;
}
.childhood-seven-paragraph {
  font-family: var(--satoshi);
  font-weight: 500;
  font-size: 18px;
  line-height: 160%;
  color: var(--white);
}
.childhood-seven-bg-shape-1 {
  position: absolute;
  top: 190px;
  right: 50px;
  z-index: -1;
  animation: moving 5s linear infinite;
}
.childhood-seven-bg-shape-2 {
  position: absolute;
  bottom: -52px;
  left: 0;
  z-index: -1;
}
.counter-seven-area {
  padding: 0 0 120px;
}
.counter-seven-wrapper {
  text-align: center;
  margin-bottom: 30px;
}
.counter-seven-wrapper h2 {
  font-family: var(--recoleta);
  font-weight: 400;
  font-size: 117px;
  letter-spacing: -0.04em;
  color: #13b7ae;
  margin-bottom: 22px;
}
.counter-seven-wrapper p {
  font-family: var(--satoshi);
  font-weight: 500;
  font-size: 15px;
  color: #032532;
}
.counter-seven-heading {
  font-family: var(--recoleta);
  font-weight: 400;
  font-size: 226px;
  color: var(--primary-seven-heading);
  border-bottom: 8px solid var(--primary-seven-heading);
  line-height: .70;
  margin-bottom: 80px;
  display: inline-block;
}
.counter-seven-wrap {
  margin-top: 50px;
}
.counter-seven-volunteer h2 {
  width: 375px;
  height: 375px;
  line-height: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  background: #fbda33;
  color: var(--primary-seven-heading);
  font-family: var(--recoleta);
  font-weight: 400;
  font-size: 143px;
  flex-direction: column;
  border: 1px solid var(--primary-seven-heading);
  position: relative;
  z-index: 1;
}
.counter-seven-volunteer h2::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 16px;
  background: transparent;
  border: 1px solid var(--primary-seven-heading);
  border-radius: 50%;
  z-index: -1;
}
.counter-seven-volunteer h2 span {
  font-size: 50px;
  display: inline-block;
}
.counter-seven-bg-shape-1 {
  position: absolute;
  top: -16%;
  left: 0;
  z-index: -1;
  animation: bounce-one 4s forwards infinite alternate;
}
.counter-seven-bg-shape-2 {
  position: absolute;
  bottom: 40px;
  left: 60px;
  z-index: -1;
  animation: bounce-two 1s ease-in-out 0.1s forwards infinite alternate;
}
.counter-seven-bg-shape-3 {
  position: absolute;
  top: -6%;
  right: 16px;
  z-index: -1;
  animation: bounce-one 3s forwards infinite alternate;
}
.counter-seven-bg-shape-4 {
  position: absolute;
  right: 45px;
  bottom: 22%;
  z-index: -1;
  animation: moving 5s linear infinite;
}
@keyframes moving {
  0% {
    transform: translatey(0px);
  }
  20% {
    transform: translateX(-30px);
  }
  50% {
    transform: translatey(-20px);
  }
  100% {
    transform: translatey(0px);
  }
}
/* Service Css */
.cause-seven-area {
  background: transparent;
  padding: 180px 0 120px;
  position: inherit;
}
.cause-seven-area .section-seven-paragraph {
  max-width: 730px;
  margin: auto;
}
.cause-seven-area .cause__slider-wrapper {
  margin-top: 0 !important;
}
.cause-seven-active {
  margin-bottom: 30px;
}
.cause-seven-area .thumb a {
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
}
.cause-seven-area .thumb a img {
  height: 322px;
  border-radius: 8px;
}
.cause-seven-area .cause__slider-single {
  padding: 12px;
  background-color: transparent;
  box-shadow: none;
  border-radius: 7px;
  border: 1px solid #000;
}
.cause-seven-area .cause__slider-cta {
  padding: 20px;
  border-radius: 10px;
  background: var(--white);
  margin-top: 24px;
}
.cause-seven-area .cause__cta a {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  padding: 17px 30px;
}
.cause-seven-area .content h6 {
  font-family: var(--recoleta);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.14;
  text-transform: capitalize;
  color: var(--primary-seven-heading);
  margin-bottom: 16px;
}
.cause-seven-area .content h6 a {
  background-image: linear-gradient(to right, currentColor 0, currentColor 100%);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: all 0.3s, background-size 0.8s;
  display: initial;
}
.cause-seven-area .content h6 a:hover {
  background-size: 100% 1px;
}
.cause-seven-area .thumb .tag a {
  padding: 3px 28px;
  background-color: #13B7AE;
  color: var(--white);
}
.cause-seven-area .cause__slider-single:hover .thumb .tag a {
  background-color: var(--base-color);
  color: var(--black);
}
.cause-seven-area .swiper-slide-active .thumb .tag a {
  background-color: var(--base-color);
  color: var(--black);
}
.cause-seven-navigation button {
  width: 60px;
  height: 60px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-radius: 50%;
  transition: all 0.3s ease 0s;
  color: var(--black);
  border: 2px solid var(--black);
  position: absolute;
  left: -120px;
  top: 355px;
  z-index: 2;
}
.cause-seven-navigation button.next-cause {
  left: auto;
  right: -120px;
}
.cause-seven-navigation button:hover {
  background: var(--white);
  box-shadow: 0 4px 19px 0 rgba(0, 0, 0, 0.1);
  border-color: var(--white);
}
/* community css */
.community-seven-area {
  background-size: cover;
  background-position: left top;
  background-repeat: no-repeat;
  padding: 190px 0 120px;
}
.community-seven-area .donation-form__single .donation-amount {
  padding: 10px 16px;
  border: none;
  color: var(--white);
  background: rgba(255, 255, 255, 0.13);
}
.community-seven-area .donation-form {
  margin-top: 35px;
}
.community-seven-area .donation-form__single .donation-amount:hover {
  background-color: #13B7AE;
  color: var(--white);
  border-color: var(--secondary-color);
}
.community-seven-area .radio-single input:checked + label::before {
  border-color: var(--base-color);
}
.community-seven-area .radio-single input:checked + label::after {
  background-color: var(--base-color);
}
.community-seven-content h2 {
  font-family: var(--recoleta);
  font-weight: 400;
  font-size: 180px;
  color: #fff;
  margin-bottom: 85px;
}
.community-seven-content p {
  font-family: var(--satoshi);
  font-weight: 400;
  font-size: 18px;
  line-height: 167%;
  letter-spacing: 0.01em;
  color: #fff;
}
.community-seven-bg-shape {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.team-seven-area {
  padding: 120px 0 120px;
}
.team-seven-area .section-seven-paragraph {
  max-width: 730px;
  width: 100%;
}
.team-seven-button {
  margin-top: 50px;
}
.team-seven-button .btn-seven-primary {
  padding: 20px 42px;
}
.team-seven-wrapper {
  overflow: hidden;
  margin-bottom: 30px;
}
.team-seven-thumb a {
  display: inline-block;
  background-image: linear-gradient(to right, currentColor 0, currentColor 100%);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: all 0.3s, background-size 0.8s;
}
.team-seven-thumb a:hover {
  background-size: 100% 1px;
}
.team-seven-thumb img {
  mix-blend-mode: luminosity;
}
.team-seven-thumb::before {
  content: "";
  position: absolute;
  width: 100%;
  bottom: -400px;
  left: 0;
  background: linear-gradient(181deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 22.38%, rgba(255, 255, 255, 0) 50.82%, rgba(251, 218, 51, 0.9) 70.21%, rgba(251, 218, 51, 0.9) 87.03%, #fbda33 100%);
  height: 100%;
  z-index: 1;
  transition: .4s ease-in-out;
}
.team-seven-wrap {
  text-align: center;
}
.team-seven-social {
  display: flex;
  justify-content: center;
}
.team-seven-wrap {
  position: absolute;
  bottom: -80px;
  left: 0;
  right: 0;
  z-index: 2;
  transition: .4s ease-in-out;
}
.team-seven-title {
  font-family: var(--recoleta);
  font-weight: 400;
  font-size: 30px;
  text-transform: capitalize;
  color: var(--primary-seven-heading);
  margin-bottom: 10px;
}
.team-seven-social a {
  color: var(--primary-seven-heading);
  margin-right: 35px;
}
.team-seven-social a:last-child {
  margin-right: 0;
}
.team-seven-wrapper:hover .team-seven-wrap {
  bottom: 46px;
}
.team-seven-wrapper:hover .team-seven-thumb::before {
  bottom: 0;
}
.contact-seven-area {
  margin: 0 56px 0;
}
.contact-seven-area .section-seven-wrapper {
  max-width: 598px;
}
.contact-seven-content {
  background: #1e1e1e !important;
}
.contact-seven-area .input-single input {
  background: #252525 !important;
}
.contact-seven-area .input-single {
  background: #252525 !important;
  border: 2px solid rgba(255, 255, 255, 0.09);
}
.contact-seven-thumb .image {
  margin-bottom: 22px;
}
.contact-seven-wrap {
  background: #fff;
  padding: 0 68px;
}
.contact-seven-area .row > * {
  padding-inline: 15px;
}
/* testimonial css */
.testimonial-seven-area {
  padding: 50px 0 100px;
}
.testimonial-seven-thumb img {
  border-radius: 37px;
}
.testimonial-seven-thumb-quate {
  position: absolute;
  top: 16px;
  left: 16px;
}
.testimonial-seven-thumb-quate a {
  width: 90px;
  height: 90px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1E1E1E;
  border-radius: 50%;
}
.testimonial-seven-wrapper {
  background: #fcf8ed;
  border: 1px solid var(--primary-seven-heading);
  border-radius: 11px;
  padding: 50px 60px 40px 45px;
}
.testimonial-seven-title {
  font-family: var(--recoleta);
  font-weight: 400;
  font-size: 36px;
  color: #13b7ae;
  border-bottom: 1px solid #cabdbd;
  margin-bottom: 30px;
  padding-bottom: 15px;
}
.testimonial-seven-paragraph {
  font-family: var(--recoleta);
  font-weight: 400;
  font-size: 38px;
  line-height: 129%;
  color: var(--primary-seven-heading);
  margin-bottom: 20px;
}
.testimonial-seven-left {
  display: flex;
  align-items: center;
  gap: 26px;
}
.testimonial-seven-thumb {
  margin-bottom: 30px;
}
.testimonial-seven-name {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--primary-seven-heading);
  margin-bottom: 0;
}
.testimonial-seven-name span {
  font-weight: 500;
  font-size: 14px;
  color: #1e1e1e;
}
.testimonial-seven-icon span {
  width: 90px;
  height: 90px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-seven-heading);
  border-radius: 50%;
}
.testimonial-seven-area .project-panel {
  margin-bottom: 30px;
}
.testimonial-seven-shape {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  animation: bounce-one 4s forwards infinite alternate;
}
@keyframes bounce-left {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}
/* Blog css */
.blog-seven-area {
  background: var(--white);
  padding: 120px 0 120px;
}
.blog-seven-area .section-seven-paragraph {
  max-width: 730px;
  margin: auto;
}
.blog-seven-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.blog-seven-meta ul {
  display: flex;
  gap: 20px;
}
.blog-seven-meta ul li {
  font-family: var(--satoshi);
  font-weight: 500;
  font-size: 16px;
  color: #032532;
  padding-left: 15px;
  position: relative;
}
.blog-seven-meta ul li::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: 50%;
  left: 0;
  background: var(--base-color);
  border-radius: 50%;
  transform: translateY(-50%);
}
.blog-seven-content {
  max-width: 527px;
  width: 100%;
  margin-left: 60px;
}
.blog-seven-title {
  font-family: var(--recoleta);
  font-weight: 400;
  font-size: 44px;
  line-height: 114%;
  text-transform: capitalize;
  color: var(--primary-seven-heading);
  margin-bottom: 36px;
  line-height: 114%;
}
.blog-seven-title a {
  background-image: linear-gradient(to right, currentColor 0, currentColor 100%);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: all 0.3s, background-size 0.8s;
  display: initial;
}
.blog-seven-title a:hover {
  background-size: 100% 1px;
}
.blog-seven-meta {
  margin-bottom: 22px;
}
.blog-seven-button a {
  font-weight: 500;
  font-size: 16px;
  text-transform: capitalize;
  color: var(--primary-seven-heading);
  font-family: var(--satoshi);
}
.blog-seven-thumb {
  overflow: hidden;
  border-radius: 17px;
}
.blog-seven-thumb img {
  border-radius: 17px;
  transition: var(--transition);
}
.blog-seven-wrapper:hover .blog-seven-thumb img {
  transform: scale(1.2) rotate(6deg);
}
/* Blog css */
.footer-seven-area {
  padding-top: 125px !important;
  margin-top: 0;
}
.footer-seven-area::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(30, 30, 30, .96);
}
.footer-seven-top-border {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  margin-bottom: 85px;
  padding-bottom: 85px;
}
.footer-seven-top-content {
  position: relative;
}
.footer-seven-top-content h6 {
  font-family: var(--satoshi);
  font-weight: 500;
  font-size: 22px;
  color: var(--white);
  margin-bottom: 80px;
}
.footer-seven-top-content h2 {
  font-family: var(--recoleta);
  font-weight: 400;
  font-size: 170px;
  text-transform: uppercase;
  color: #fbda33;
  border-bottom: 8px solid var(--white);
  padding-bottom: 40px;
  display: inline-block;
}
.footer-seven-top-content h2 span {
  color: var(--white);
}
.footer-seven-area .input-icon {
  background: rgba(255, 255, 255, 0.03);
  position: relative;
  margin-top: 42px;
  border: 1.20px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  margin-bottom: 20px;
}
.footer-seven-area .input-icon input {
  background: transparent;
  height: 56px;
  width: 100%;
  color: var(--white);
}
.footer-seven-area .footer-two__widget .social {
  margin-top: 20px;
}
.footer-seven-area .footer-two__widget .social a {
  border-radius: 10px;
  background: var(--white);
  color: #6b7280;
  font-size: 16px;
}
.footer-seven-area .footer-two__widget-intro .content {
  margin-top: 30px;
  margin-bottom: 30px;
}
.footer-seven-area .footer-two__widget-intro .content p a {
  font-family: var(--recoleta);
  font-weight: 400;
  font-size: 14px;
  color: #fff;
}
.footer-seven-area .footer-two__widget-intro .content p a.talk {
  font-size: 20px;
  margin-top: 10px;
}
.footer-seven-area .footer-two__widget h5 {
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.03em;
}
.footer-seven-area .footer-two__widget li a {
  font-weight: 400;
  margin-left: -20px;
}
.footer-seven-col-2 {
  margin-inline-end: 150px;
  margin-inline-start: -40px;
}
.footer-seven-col-4 {
  padding-inline-start: 0 !important;
  margin-inline-start: -6px;
}
.footer-seven-area .footer-six-copyright-border {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 30px 0;
}
.footer-seven-area .footer-two__copyright-inner p {
  font-family: var(--recoleta);
  font-weight: 400;
  font-size: 14px;
}
.footer-seven-bg-shape-1 {
  position: absolute;
  top: 38%;
  left: 75px;
  animation: bounce-two 1s ease-in-out 0.1s forwards infinite alternate;
}
.footer-seven-bg-shape-2 {
  position: absolute;
  bottom: 8%;
  left: 0;
  animation: bounce-one 4s forwards infinite alternate;
}
.footer-seven-bg-shape-3 {
  position: absolute;
  top: 24%;
  right: 112px;
  animation: bounce-two 1s ease-in-out 0.1s forwards infinite alternate;
}
.footer-seven-bg-shape-4 {
  position: absolute;
  bottom: 0;
  right: 0;
  animation: bounce-left 3.5s infinite;
}
.hover-btn-circle {
  width: 140px;
  height: 140px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  font-family: var(--recoleta);
  font-weight: 500;
  font-size: 14px;
}
.hover-btn-circle .hover-btn-circle-icon {
  font-size: 20px;
  transition: 0.4s;
}
.hover-btn-circle .hover-btn-wrapper {
  display: inline-block;
}
.hover-btn-circle .hover-btn-circle-dot {
  position: absolute;
  left: 42px;
  bottom: -15px;
  width: 20px;
  height: 20px;
  transition: all 0.6s;
  border-radius: 50%;
  background-color: var(--base-color);
  transform: translate(-50%, -50%);
  z-index: -1;
}
.hover-btn-circle:hover .hover-btn-circle-dot {
  width: 420px;
  height: 420px;
}
.hover-btn-circle:hover span {
  color: var(--wt-common-black);
}
.char-animation {
  text-transform: full-size-kana !important;
}
/* ================= Home Seven Css Start End =================*/
/* ================= Home Eight Css Start Start =================*/
.btn-eight-primary-radius {
  border-radius: 29px;
  overflow: hidden;
}
.btn-eight-primary {
  font-family: var(--kumbh);
  font-size: 18px;
}
.btn-eight-border {
  font-family: var(--kumbh);
  font-size: 18px;
  background: transparent;
  border: 1px solid var(--white);
  border-radius: 29px;
}
.btn-eight-border:hover {
  background-color: var(--base-color);
  border: 1px solid transparent;
}
.btn-eight-border::before, .btn-eight-border::after {
  background-color: transparent !important;
}
/* Header css */
.header-eight-area.sticky-header {
  width: inherit;
  margin: 0;
  border-radius: 0 !important;
}
.header-eight-area {
  background: var(--white);
  box-shadow: 0 10px 100px 0 rgba(0, 0, 0, 0.08);
  border-radius: 25px !important;
  margin: 30px 40px 0;
  padding-inline-start: 32px;
  padding-inline-end: 32px;
}
.header-eight-area .main-header__menu-box {
  padding-inline-start: 0 !important;
}
.header-eight-navbar-space {
  margin-inline-end: 44px;
}
.header-eight-area .navbar__options {
  gap: 36px;
}
.header .contact-btn p {
  font-size: 14px;
  text-transform: capitalize;
  font-weight: 400;
  color: #1d1d1d;
  margin-block-end: 6px;
  font-family: var(--nunito-sans);
}
.header-eight-area .contact-btn a {
  font-weight: 700;
  font-size: 18px;
  color: #1d1d1d;
}
.header-eight-area .navbar__mobile-options {
  gap: 40px;
  border-radius: 29px !important;
  overflow: hidden;
}
.header-eight-btn {
  background-color: var(--base-color) !important;
  font-size: 18px;
  padding: 13px 34px;
  text-transform: full-size-kana;
  font-weight: 600;
}
.header-eight-btn::before {
  background-color: var(--primary-eight);
}
.header-eight-btn::after {
  background-color: var(--primary-eight);
}
/* Banner Css */
.banner-eight-area {
  padding: 30px 40px;
}
.banner-eight-wrapper {
  background: var(--primary-eight);
  border-radius: 30px;
  padding: 49px 40px 60px;
  margin-block-end: 30px;
}
.banner-eight-subtitle {
  color: var(--white);
  font-family: var(--kumbh);
  font-weight: 500;
  font-size: 15px;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  padding-inline-start: 70px;
  margin-block-end: 9px;
}
.banner-eight-subtitle::before {
  content: "";
  position: absolute;
  width: 62px;
  height: 2px;
  top: 50%;
  left: 0;
  background: var(--white);
  transform: translateY(-50%);
}
.banner-eight-title {
  color: var(--white);
  font-family: var(--kumbh);
  font-weight: 700;
  font-size: 90px;
  line-height: 1.11;
  margin-block-end: 10px;
}
.banner-eight-paragraph {
  color: var(--white);
  line-height: 175%;
  margin-block-end: 30px;
}
.banner-eight-button {
  display: inline-flex;
  gap: 20px;
}
.banner-eight-wrap {
  background: var(--white);
  border: 1px solid rgba(237, 90, 47, 0.5);
  border-radius: 30px;
  padding: 26px 23px;
  display: flex;
  gap: 25px;
}
.banner-eight-join {
  background: var(--white);
  box-shadow: 0 20px 70px 0 rgba(92, 93, 85, 0.2);
  padding: 7px 17px;
  font-family: var(--kumbh);
  font-weight: 500;
  font-size: 18px;
  color: var(--primary-eight);
  border-radius: 5px;
}
.banner-eight-content span {
  font-family: var(--nunito-sans);
  color: var(--primary-eight);
  margin-block-end: 8px;
}
.banner-eight-content h4 {
  font-family: var(--kumbh);
  font-weight: 700;
  font-size: 40px;
  text-transform: uppercase;
  color: var(--primary-seven-heading);
  margin-block-end: 10px;
}
.banner-eight-content p {
  font-size: 18px;
  font-weight: 500;
  font-family: var(--nunito-sans);
  margin-bottom: 0;
}
.banner-eight-review {
  background: var(--white);
  border: 1px solid rgba(237, 90, 47, 0.5);
  border-radius: 30px;
  padding: 37px 23px;
}
.banner-eight-review-top {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-block-end: 16px;
}
.banner-eight-review-top span {
  font-family: var(--kumbh);
  font-weight: 700;
  font-size: 26px;
  color: var(--primary-seven-heading);
}
.banner-eight-star i {
  color: var(--base-color);
  font-size: 18px;
}
.banner-eight-review-team {
  display: flex;
  align-items: center;
  gap: 12px;
}
.banner-eight-review-team p {
  font-weight: 500;
  font-size: 18px;
  line-height: 144%;
}
.banner-eight-dot {
  background: var(--primary-eight);
  display: inline-flex;
  flex-direction: column;
  gap: 12px;
  width: inherit !important;
  padding: 25px 5px;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%);
  right: 10px;
}
.banner-eight-dot .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
}
.banner-eight-dot .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--white);
}
.banner-eight-dot .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  width: 15px;
  height: 15px;
  top: 50%;
  left: 48%;
  background: rgba(255, 255, 255, 0.50);
}
.banner-eight-dot-bg {
  position: absolute;
  top: 50%;
  right: -1px;
  transform: translateY(-50%);
  z-index: 1;
}
/* Section Title Css */
.section-eight-wrapper {
  margin-bottom: 50px;
}
.section-eight-subtitle {
  font-family: var(--kumbh);
  font-weight: 500;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--primary-eight);
  position: relative;
  z-index: 1;
  padding-inline-start: 72px;
  margin-bottom: 12px;
}
.section-eight-subtitle::before {
  content: "";
  position: absolute;
  width: 62px;
  height: 2px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: var(--primary-eight);
}
.section-eight-title {
  font-family: var(--kumbh);
  font-weight: 700;
  font-size: 55px;
  line-height: 1.18;
  text-transform: capitalize;
  color: var(--primary-seven-heading);
}
.section-eight-paragraph {
  line-height: 175%;
  color: #999;
  margin: 20px 0 0;
}
/* About Css */
.about-eight-area {
  padding: 90px 0 120px;
}
.about-eight-item {
  display: flex;
  gap: 16px;
  border-bottom: 1px solid rgb(184, 184, 184, .3);
  padding-bottom: 30px;
  margin-bottom: 30px;
  margin-right: 18px;
}
.about-eight-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.about-eight-icon span {
  width: 70px;
  height: 70px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--primary-eight);
  border-radius: 50%;
}
.about-eight-list {
  margin-top: 20px;
}
.about-eight-list ul li {
  color: #1d1d1d;
  margin-bottom: 9px;
  line-height: 1;
}
.about-eight-list ul li span {
  margin-right: 4px;
}
.about-eight-content h4 {
  font-family: var(--kumbh);
  font-weight: 700;
  font-size: 24px;
  color: var(--primary-seven-heading);
}
.about-eight-content p {
  line-height: 162%;
  color: #999;
}
.about-eight-center {
  margin-inline-start: 95px;
  border-bottom: 1px solid rgb(184, 184, 184, .3);
  padding-block-end: 30px;
  margin-block-end: 45px;
}
.about-eight-play {
  margin-inline-start: 10px;
}
.about-eight-thumb-shape {
  position: absolute;
  bottom: -58px;
  right: -80px;
}
.about-eight-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.about-eight-video-play a {
  width: 45px;
  height: 45px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-radius: 50%;
  margin-right: 20px;
  background-color: var(--primary-eight);
  color: var(--white);
  position: relative;
}
.about-eight-video-play a::before {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  width: 70%;
  height: 70%;
  background-color: rgba(255, 255, 255, 0.3);
  animation: borderanimate2 2s linear infinite;
  z-index: -1;
  border-radius: 50%;
}
.about-eight-button {
  margin-inline-start: 95px;
  border-radius: 29px;
  overflow: hidden;
}
.about-eight-video-play a i {
  display: inline-block;
  padding-left: 3px;
}
.about-eight-button {
  margin-inline-start: 95px;
}
.about-eight-team {
  display: flex;
  align-items: center;
  gap: 10px;
}
.about-eight-bg-shape-1 {
  position: absolute;
  top: 30%;
  left: 0;
  z-index: -1;
}
.about-eight-bg-shape-2 {
  position: absolute;
  right: 10px;
  bottom: 18%;
  z-index: -1;
}
/* Service Css */
.service-eight-area {
  background: rgba(237, 90, 47, .05);
  padding: 120px 0 90px;
  margin: 0 40px 0;
  border-radius: 20px 20px 0 0;
}
.service-eight-wrapper {
  margin-block-end: 30px;
  overflow: hidden;
}
.service-eight-thumb img {
  border-radius: 15px;
}
.service-eight-button {
  position: absolute;
  top: 10px;
  right: 50px;
  opacity: 0;
  visibility: hidden;
  transition: .4s ease-in-out;
}
.service-eight-button a {
  width: 50px;
  height: 50px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-eight);
  color: var(--white);
  border-radius: 50%;
  font-size: 18px;
}
.service-eight-wrap {
  background: var(--primary-eight);
  padding: 20px;
  border-radius: 15px;
  position: absolute;
  bottom: -110px;
  left: 0;
  right: 0;
  margin: 0 15px 0;
  transition: .4s ease-in-out;
}
.service-eight-title {
  font-family: var(--kumbh);
  font-weight: 700;
  font-size: 20px;
  color: var(--white);
}
.service-eight-paragraph {
  line-height: 175%;
  color: var(--white);
  font-family: var(--nunito-sans);
  font-size: 15px;
}
.service-eight-wrapper:hover .service-eight-wrap {
  bottom: 20px;
}
.service-eight-wrapper:hover .service-eight-button {
  right: 20px;
  opacity: 1;
  visibility: visible;
}
/* Marque Css */
.maquee-eight-area {
  background: rgba(237, 90, 47, .05);
  margin: 0 40px 0;
  border-radius: 0 0 20px 20px;
  padding-bottom: 110px;
}
.maquee-eight-transition {
  transition-timing-function: linear;
}
.maquee-eight-item {
  display: flex;
  white-space: nowrap;
}
.maquee-eight-box {
  display: flex;
  align-items: center;
  gap: 20px;
  width: auto;
}
.maquee-eight-icon span {
  animation: rotate-infinte 3s infinite linear;
  color: var(--wt-heading-primary);
  font-size: 40px;
  display: inline-block;
  line-height: 1;
  position: relative;
  top: 3px;
}
.maquee-eight-icon span i {
  display: inline-block;
  line-height: 1;
}
.maquee-eight-title {
  color: var(--primary-eight);
  text-transform: uppercase;
  margin-bottom: 0;
  font-family: var(--kumbh);
  font-weight: 700;
  font-size: 70px;
  line-height: 121%;
}
.maquee-eight-title.border-text {
  -webkit-text-stroke-width: 1px;
  color: transparent;
  -webkit-text-stroke-color: var(--primary-eight);
}
@keyframes rotate-infinte {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Event Css */
.event-eight-area {
  padding: 50px 0 50px;
}
.event-eight-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(29, 29, 29, 0.1);
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.event-eight-wrap {
  display: flex;
  align-items: center;
}
.event-eight-content {
  max-width: 613px;
  width: 100%;
}
.event-eight-content h4 {
  font-family: var(--kumbh);
  font-weight: 700;
  font-size: 22px;
  color: var(--primary-seven-heading);
}
.event-eight-content h4 a:hover {
  color: var(--primary-eight);
}
.event-eight-content p {
  line-height: 175%;
  color: rgba(92, 92, 92, .5);
  margin-bottom: 10px;
}
.event-eight-date {
  text-align: center;
  margin-right: 40px;
  padding: 11px;
  border-radius: 10px;
  background: #ecebf6;
}
.event-eight-date h5 {
  font-family: var(--kumbh);
  font-weight: 700;
  font-size: 38px;
  color: #2d4455;
  margin-bottom: 4px;
}
.event-eight-date p {
  color: #2d4455;
  margin-bottom: 0;
}
.event-eight-thumb {
  margin-right: 20px;
}
.event-eight-thumb img {
  border-radius: 10px;
}
.event-eight-address ul {
  display: flex;
  justify-content: space-between;
}
.event-eight-address ul li {
  color: #1d1d1d;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.event-eight-address ul li span {
  color: var(--primary-eight);
}
.event-eight-price h4 {
  font-family: var(--kumbh);
  font-weight: 700;
  font-size: 22px;
  color: #1d1d1d;
}
.event-eight-button {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 1;
}
.event-eight-button::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 60px;
  top: 50%;
  left: -12%;
  transform: translateY(-50%);
  background: #999;
}
.event-eight-btn {
  margin-left: 0;
}
.event-eight-shape-1 {
  position: absolute;
  top: 15%;
  left: 0;
  z-index: -1;
}
.event-eight-shape-2 {
  position: absolute;
  right: 0;
  bottom: 26%;
  z-index: -1;
}
/* Countdown Css */
.countdown-eight-area {
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 120px 0 120px;
  position: relative;
  z-index: 1;
  margin: 0 40px 0;
  border-radius: 30px;
  overflow: hidden;
}
.countdown-eight-area::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(29, 29, 29, 0.83);
  z-index: -1;
}
.countdown-eight-timer {
  margin-bottom: 60px;
}
.countdown-eight-timer ul {
  display: flex;
  gap: 25px;
}
.countdown-eight-timer ul li {
  max-width: 123px;
  width: 100%;
  height: 123px;
  line-height: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  color: var(--white);
}
.countdown-eight-timer ul li span {
  display: block;
  font-family: var(--kumbh);
  font-weight: 700;
  font-size: 55px;
  color: var(--primary-eight);
  margin-bottom: 12px;
}
.countdown-eight-button {
  text-align: right;
}
.countdown-eight-button a {
  background: var(--primary-eight);
  font-family: var(--kumbh);
  font-weight: 500;
  font-size: 20px;
  text-transform: uppercase;
}
/* Team Css */
.team-eight-area {
  padding: 120px 0 90px;
}
.team-eight-wrapper {
  background: rgba(237, 90, 47, .05);
  padding: 10px;
  border-radius: 20px;
  margin-bottom: 30px;
  overflow: hidden;
}
.team-eight-thumb {
  margin-bottom: 10px;
}
.team-eight-thumb a img {
  border-radius: 10px;
}
.team-eight-social {
  position: absolute;
  top: 10px;
  right: 10px;
  overflow: hidden;
  height: 100%;
  border-radius: 25px;
}
.team-eight-social span {
  width: 40px;
  height: 40px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--base-color);
  color: var(--white);
  border-radius: 50%;
  border: 2px solid var(--white);
  font-size: 14px;
  cursor: pointer;
  z-index: 2;
  position: relative;
}
.team-eight-social-icon {
  position: absolute;
  top: -130px;
  left: 50%;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transition: .7s ease-in-out;
  transform: translateX(-50%);
}
.team-eight-social-icon ul li {
  margin-bottom: 5px;
}
.team-eight-social-icon ul li:last-child {
  margin-bottom: 0;
}
.team-eight-social-icon ul li a {
  width: 35px;
  height: 35px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--primary-seven-heading);
  border-radius: 50%;
}
.team-eight-content {
  background: var(--white);
  box-shadow: 0 10px 100px 0 rgba(0, 0, 0, 0.08);
  padding: 20px 10px;
  border-radius: 10px;
  transition: .4s;
}
.team-eight-title {
  font-family: var(--kumbh);
  font-weight: 700;
  font-size: 26px;
  color: var(--primary-seven-heading);
}
.team-eight-title a {
  transition: .3s;
}
.team-eight-paragraph {
  color: #999;
  transition: .4s;
}
.team-eight-wrapper:hover .team-eight-content {
  background: var(--primary-eight);
}
.team-eight-wrapper:hover .team-eight-title {
  color: var(--white);
}
.team-eight-wrapper:hover .team-eight-paragraph {
  color: var(--white);
}
.team-eight-wrapper:hover .team-eight-social span {
  background: var(--primary-eight);
}
.team-eight-wrapper:hover .team-eight-social-icon {
  visibility: visible;
  opacity: 1;
  top: 45px;
}
.team-eight-social-icon ul li a:hover {
  color: var(--primary-eight);
}
.team-eight-dot {
  background: var(--primary-eight);
  padding: 12px 6px;
  width: 115px !important;
  border-radius: 25px;
  text-align: center;
  margin-top: 10px;
}
.team-eight-dot .swiper-pagination-bullet {
  opacity: 1;
  background: var(--white);
  width: 6px;
  height: 6px;
  position: relative;
  z-index: 1;
}
.team-eight-dot .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--white) !important;
}
.team-eight-dot .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}
.team-eight-scrollbar {
  margin-top: 20px;
}
.team-eight-scrollbar .swiper-scrollbar.one {
  background: rgba(237, 90, 47, .30);
  height: 5px;
}
.team-eight-scrollbar .swiper-scrollbar.one .swiper-scrollbar-drag {
  background: var(--primary-eight);
  width: 216px !important;
}
.team-eight-bg-shape-1 {
  position: absolute;
  top: 15%;
  left: 5%;
  z-index: -1;
}
.team-eight-bg-shape-2 {
  position: absolute;
  right: 0;
  bottom: 17%;
  z-index: -1;
}
/* Faq Css */
.faq-eight-area {
  background: rgba(237, 90, 47, .05);
  padding: 120px 0 120px;
  margin: 0 40px 0;
  border-radius: 20px;
}
.faq-eight-accordion-item {
  border: none;
  border-bottom: none;
  padding-inline-start: 10px;
  margin-block-end: 20px;
  border-radius: 30px !important;
}
.faq-eight-accordion-item:first-of-type .faq-eight-accordion-button {
  border-bottom: none !important;
}
.faq-eight-accordion-button {
  font-family: var(--kumbh);
  font-weight: 700;
  font-size: 22px;
  color: var(--primary-seven-heading);
  border-radius: 30px !important;
  padding-top: 18px;
  padding-bottom: 18px;
}
.faq-eight-accordion-button::after {
  width: 30px;
  height: 30px;
  content: "+";
  font-size: 20px;
  background-image: none;
  font-weight: 600;
  transition: 0.4s;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(29, 29, 29, 0.1);
  border-radius: 50%;
}
.faq-eight-accordion-button:not(.collapsed) {
  color: var(--primary-eight);
  background-color: transparent;
  box-shadow: none !important;
}
.faq-eight-accordion-button:not(.collapsed)::after {
  content: "-";
  transform: translateY(-50%);
  font-size: 26px;
  background-image: none;
  transition: 0.4s;
  background: var(--primary-eight);
  color: var(--white);
}
.faq-eight-accordion-button:focus {
  box-shadow: none !important;
  border: none;
}
.faq-eight-accordion-body {
  padding-top: 0;
  padding-left: 10px;
  padding-bottom: 22px;
}
.faq-eight-accordion-body p {
  color: #999;
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  text-transform: full-size-kana;
}
.faq-eight-right {
  margin-left: 55px;
}
/* Community Css */
.community-eight-area {
  padding-bottom: 120px;
}
.community-eight-area .community-donation {
  bottom: 0;
  margin-top: 0;
}
.community-eight-area .warning .line {
  background-color: var(--primary-eight);
}
.community-eight-area .input-group-icon .thumb {
  background-color: var(--primary-eight);
}
.community-eight-area .input-group-icon {
  background-color: var(--base-color);
}
.community-eight-area .input-group-icon input {
  color: var(--white);
}
.community-eight-area .donation-form__single .active {
  background-color: var(--primary-eight);
  color: var(--white);
  border-color: var(--primary-eight);
}
.community-eight-area .radio-single input:checked + label::before {
  border-color: var(--primary-eight);
}
.community-eight-area .radio-single input:checked + label::after {
  background-color: var(--primary-eight);
}
.community-eight-area .donation-form__single .donation-amount:hover {
  background-color: var(--primary-eight);
  color: var(--white);
  border-color: var(--primary-eight);
}
.community-eight-bg-shape-1 {
  position: absolute;
  left: 0;
  top: 9%;
  z-index: -1;
}
.community-eight-bg-shape-2 {
  position: absolute;
  right: 0;
  bottom: 14%;
  z-index: -1;
}
/* Ministrie Css */
.ministrie-eight-area {
  padding: 120px 0 120px;
  position: relative;
  z-index: 1;
}
.ministrie-eight-area::before {
  content: "";
  position: absolute;
  width: 96%;
  height: 100%;
  top: 0;
  left: 50%;
  background: rgba(237, 90, 47, .05);
  border-radius: 20px;
  transform: translateX(-50%);
  z-index: -1;
}
.ministrie-eight-wrapper {
  overflow: hidden;
}
.ministrie-eight-thumb img {
  border-radius: 20px;
}
.ministrie-eight-wrap {
  position: absolute;
  top: 60%;
  left: 50%;
  background: rgba(237, 90, 47, .60);
  border-radius: 20px;
  width: 90%;
  height: 90%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  transition: .6s ease-in-out;
  opacity: 0;
  visibility: hidden;
}
.ministrie-eight-button {
  text-align: right;
}
.ministrie-eight-button a {
  width: 40px;
  height: 40px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--primary-eight);
  border-radius: 50%;
}
.ministrie-eight-title {
  font-family: var(--kumbh);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.25;
  text-transform: capitalize;
  color: var(--white);
  margin-bottom: 30px;
}
.ministrie-eight-paragraph {
  color: var(--white);
}
.ministrie-eight-space {
  margin-top: 30px;
}
.ministrie-eight-dot {
  background: var(--primary-eight);
  padding: 12px 6px;
  width: 115px !important;
  border-radius: 25px;
  text-align: center;
  margin-top: 10px;
}
.ministrie-eight-dot .swiper-pagination-bullet {
  opacity: 1;
  background: var(--white);
  width: 6px;
  height: 6px;
  position: relative;
  z-index: 1;
}
.ministrie-eight-dot .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--white) !important;
}
.ministrie-eight-dot .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}
.ministrie-eight-wrapper.swiper-slide-active .ministrie-eight-wrap {
  opacity: 1;
  visibility: visible;
  top: 50%;
}
.ministrie-eight-scrollbar {
  margin-top: 20px;
}
.ministrie-eight-scrollbar .swiper-scrollbar.two {
  background: rgba(237, 90, 47, .30);
  height: 5px;
}
.ministrie-eight-scrollbar .swiper-scrollbar.two .swiper-scrollbar-drag {
  background: var(--primary-eight);
  width: 216px !important;
}
.ministrie-eight-scrollbar {
  margin-top: 20px;
}
.ministrie-eight-scrollbar .swiper-scrollbar.two {
  background: rgba(237, 90, 47, .30);
  height: 5px;
}
.ministrie-eight-scrollbar .swiper-scrollbar.two .swiper-scrollbar-drag {
  background: var(--primary-eight);
  width: 216px !important;
}
/* Blog Css */
.blog-eight-area {
  padding: 120px 0 90px;
}
.blog-eight-container {
  max-width: 1450px;
}
.blog-eight-wrapper {
  display: flex;
  gap: 30px;
}
.blog-eight-wrap {
  background: var(--white);
  box-shadow: 0 10px 100px 0 rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 10px;
  border-radius: 20px;
  max-width: 345px;
  width: 100%;
  transition: .4s ease-in;
  position: relative;
  z-index: 1;
}
.blog-eight-thumb {
  opacity: 0;
  visibility: hidden;
  transition: .8s ease-in;
  width: 0;
}
.blog-eight-thumb a {
  display: block;
}
.blog-eight-thumb a img {
  width: 300px;
  height: 363px;
  border-radius: 10px;
  object-fit: cover;
}
.blog-eight-meta {
  display: flex;
  gap: 40px;
  margin-bottom: 10px;
}
.blog-eight-content {
  transition: .4s ease-in;
  flex-shrink: 0;
}
.blog-eight-meta p {
  color: #1d1d1d;
  display: flex;
  align-items: center;
  gap: 10px;
}
.blog-eight-meta p i {
  color: var(--primary-eight);
}
.blog-eight-title {
  font-family: var(--kumbh);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  color: var(--primary-seven-heading);
  margin-bottom: 18px;
  max-width: 300px;
  width: 100%;
}
.blog-eight-paragraph {
  line-height: 175%;
  color: #999;
  margin-bottom: 18px;
  max-width: 316px;
  width: 100%;
}
.blog-eight-wrap.active .blog-eight-thumb {
  visibility: visible;
  opacity: 1;
  transition: .4s ease-in;
  width: 100%;
}
.blog-eight-wrap.active .blog-eight-content {
  max-width: 316px;
  width: 100%;
  transition: .4s ease-in;
}
.blog-eight-wrap.active {
  max-width: inherit;
  transition: .4s ease-in;
}
.blog-eight-bg-shape-1 {
  position: absolute;
  top: 13%;
  left: 7%;
  z-index: -1;
}
.blog-eight-bg-shape-2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.blog-eight-bg-shape-3 {
  position: absolute;
  right: 4%;
  top: 50%;
  z-index: -1;
}
/* Instagram Css */
.instagram-eight-area {
  padding: 0 0 120px;
}
.instagram-eight-wrapper {
  display: flex;
  gap: 22px;
}
.instagram-eight-thumb .imgage {
  position: relative;
  z-index: 1;
  margin-bottom: 22px;
  overflow: hidden;
}
.instagram-eight-thumb .imgage::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(29, 29, 29, 0.37);
  border-radius: 20px;
  opacity: 0;
  visibility: hidden;
  transition: .4s;
}
.instagram-eight-thumb .imgage img {
  border-radius: 20px;
  object-fit: cover;
}
.instagram-eight-thumb .imgage:hover::before {
  visibility: visible;
  opacity: 1;
}
.instagram-eight-icon {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  transition: .3s ease-in;
}
.instagram-eight-thumb .imgage:hover .instagram-eight-icon {
  opacity: 1;
  visibility: visible;
  top: 50%;
}
/* Footer Css */
.footer-eight-area {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 100px !important;
  margin: 40px;
  margin-top: 0;
  border-radius: 20px;
  overflow: hidden;
}
.footer-eight-area::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(29, 29, 29, .94);
}
.footer-eight-top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  padding-bottom: 90px;
  margin-bottom: 90px;
}
.footer-eight-top-wrap {
  position: relative;
}
.footer-eight-area .subscribe-six-input {
  padding: 0;
}
.footer-eight-area .subscribe-six-button {
  right: 0;
}
.footer-eight-area .subscribe-six-button .btn-six-primary {
  padding: 16px 38px;
  font-family: var(--kumbh);
  font-weight: 500 !important;
  font-size: 18px;
  background-color: var(--primary-eight);
}
.footer-eight-area .subscribe-six-button .btn-six-primary::before {
  background-color: var(--primary-eight);
}
.footer-eight-area .subscribe-six-button .btn-six-primary::after {
  background-color: var(--primary-eight);
}
.footer-eight-top-wrap h4 {
  font-family: var(--kumbh);
  font-weight: 700;
  font-size: 26px;
  line-height: 135%;
  color: var(--white);
}
.footer-eight-top-icon span {
  width: 60px;
  height: 60px;
  line-height: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, .30);
  color: var(--white);
  border-radius: 50%;
  font-size: 20px;
}
.footer-eight-top-info {
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer-eight-top-info-con p {
  color: var(--white);
}
.footer-eight-top-info-con a {
  font-weight: 600;
  font-size: 18px;
  line-height: 144%;
  color: var(--white);
}
.footer-eight-top-info.call {
  margin-left: 45px;
}
.footer-eight-top-info.gamil {
  margin-left: 34px;
}
.footer-eight-area .footer-six-bg-shape-2 {
  z-index: 1;
}
.footer-eight-area .footer-six-copyright-border {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-eight-area .footer-two__widget .social a:hover {
  background-color: var(--primary-eight);
  color: var(--white);
  border-color: var(--primary-eight);
}
.footer-eight-area .footer-two__widget span {
  background-color: var(--primary-eight);
}
.footer-eight-area .footer-two__widget li a:hover {
  color: var(--primary-eight) !important;
}
.footer-eight-area .footer-two__widget .footer-two__widget-content--contact a i {
  color: var(--primary-eight);
}
.footer-eight-area .footer-two__copyright-inner p a {
  color: var(--primary-eight);
}
/* HEADER */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 25px;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}
/* HAMBURGER */
.menu-toggle {
  width: 34px;
  padding: 3px 7px;
  border-radius: 5px;
  cursor: pointer;
  background: #1c1272;
}
.menu-toggle span {
  display: block;
  height: 3px;
  background: #fff;
  margin: 5px 0;
}
/* OVERLAY */
.menu-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  z-index: 999;
}
.menu-overlay.active {
  opacity: 1;
  visibility: visible;
}
/* OFFCANVAS */
.side-drawer {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  max-width: 80vw;
    height: 100dvh;

  background: #dc7614;
  transition: .3s;
  z-index: 1000;
  overflow: visible;
}
.drawer-item:nth-last-child(2) .nav-submenu,
.drawer-item:last-child .nav-submenu {
  top: auto;
  bottom: 0;
}
.side-drawer.active {
  right: 0;
}
/* CLOSE */
.drawer-close {
  text-align: right;
  padding: 8px 20px;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
}
/* MENU ITEM */
.drawer-item {
  text-align: center;
  padding: 10px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  position: relative;
}
.drawer-item i {
  display: block;
  font-size: 25px;
  color: #fff;
  margin-bottom: 8px;
  padding-bottom: 8px;
}
.drawer-item span {
  font-size: 14px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.drawer-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
/* LEFT FLYOUT SUBMENU */
.nav-submenu {
  position: absolute;
  top: 0;
  right: 300px;
  width: 250px;
  background: #df6f04;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  text-align: left;
}
.drawer-item:hover .nav-submenu {
  opacity: 1;
  visibility: visible;
}



/* SUBMENU LINKS */
.nav-submenu a {
  display: block;
  padding: 15px 20px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-submenu a:hover {
  background: rgba(255, 255, 255, 0.08);
}
.fullscreen-hero {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
/* Background Video */
.fullscreen-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.fullscreen-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Dark Overlay */
.fullscreen-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background: rgba(0,0,0,0.4);*/
  z-index: 1;
}
/* Bottom Center Text */
.hero-bottom-content {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #ffffff;
  z-index: 2;
  width: 100%;
}
.hero-bottom-content h1 {
  font-size: 35px;
  font-weight: 800;
  line-height: 40px;
  margin: 0;
  color: #fff;
  opacity: 1;
  transition: opacity 0.6s ease-in-out;
}
.hero-bottom-content span {
  display: block;
  font-size: 20px;
  margin-bottom: 1px;
}
.fade {
  opacity: 0;
}
.scrolling-ticker {
  padding: 35px 0px 0px;
}
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  background-color: #25D366;
  color: #FFF;
  border-radius: 50%;
  text-align: center;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  animation: pulse 2s infinite;
}
.whatsapp-float img {
  margin-top: 2px;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}
/* Floating Button */
.admission-btn {
  position: fixed;
  left: 0;
  bottom: 0%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left top;
  background: #333583;
  color: #fff;
  padding: 12px 25px;
  border: none;
  font-weight: bold;
  cursor: pointer;
  z-index: 1000;
  letter-spacing: 1px;
  border-radius: 0px 0px 5px 5px;
}
/* Overlay */
.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  display: none;
  z-index: 999;
}
/* Slide Form */
.slide-form {
  position: fixed;
  bottom: 0;
  left: -400px;
  width: 350px;
  background: #fff;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
  padding: 25px;
  transition: 0.4s ease;
  z-index: 1001;
  overflow-y: auto;
}
.slide-form h2 {
  margin-bottom: 20px;
}
.slide-form input, .slide-form select, .slide-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 2px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.submit-btn {
  width: 100%;
  padding: 12px;
  background: #19146f;
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: bold;
  border-radius: 5px;
}
.close-btn {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 25px;
  cursor: pointer;
}
@media only screen and (max-width: 480px) {
  .side-drawer {
    position: fixed;
    top: 0;
    right: -300px;
    width: 167px;
    height: 100%;
    background: #dc7614;
    transition: .3s;
    z-index: 1000;
    overflow: visible;
  }
  .drawer-item {
    text-align: center;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    position: relative;
  }
  
  .drawer-item i {
    display: block;
    font-size: 18px;
    color: #fff;
    margin-bottom: 0px;
    padding-bottom: 0px;
}
  .nav-submenu {
    position: absolute;
    top: 0;
    right: 162px;
    width: 200px;
    background: #df6f04;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    text-align: left;
  }
  
  .nav-submenu a {
    display: block;
    padding: 9px 10px;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

}
@media only screen and (max-width: 767px) {
  /* WhatsApp Button */
  .whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 55px;
    height: 55px;
    z-index: 1000;
  }
  /* Admission Button Full Width Bottom */
  .admission-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: none; /* remove rotate */
    border-radius: 0;
    text-align: center;
    padding: 15px;
    z-index: 999;
  }
}
@media only screen and (max-width: 767px) {
  .whatsapp-float {
    position: fixed;
    bottom: 70px; /* sits above admission bar */
    right: 20px;
    width: 55px;
    height: 55px;
    z-index: 1000;
  }
}
/* SECTION */
.school-stats-section {
  width: 100%;
  padding: 40px 20px;
}
/* CONTAINER */
.school-stats-container {
  width: 100%;
  max-width: 1350px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #ffffff;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
/* ITEM */
.school-stat-item {
  position: relative;
  min-height: 100px;
  display: flex;
  align-items: center;
  padding: 35px 30px;
  overflow: hidden;
  border-right: 1px solid #eeeeee;
  transition: all 0.4s ease;
}
/* LARGE BACKGROUND CIRCLE */
.school-stat-item::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -75px;
  top: -75px;
  border-radius: 50%;
  background: var(--theme-color);
  opacity: 0.08;
  transition: all 0.4s ease;
}
/* COLOUR STRIPE */
.school-stat-item::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 60px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: var(--theme-color);
  border-radius: 0 10px 10px 0;
  transition: height 0.4s ease;
}
/* COLORS */
.stat-red {
  --theme-color: #7e84c0;
}
.stat-pink {
  --theme-color: #e08997;
}
.stat-yellow {
  --theme-color: #f9be70;
}
.stat-green {
  --theme-color: #64b4aa;
}
/* INNER */
.stat-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}
/* ICON */
.stat-icon {
  position: relative;
  width: 72px;
  min-width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 2px solid var(--theme-color);
  border-radius: 20px 5px 20px 5px;
  color: var(--theme-color);
  font-size: 29px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
}
/* SMALL DOT */
.stat-icon::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  right: -5px;
  top: -5px;
  border-radius: 50%;
  background: var(--theme-color);
}
/* CONTENT */
.stat-content {
  position: relative;
}
.stat-label {
  display: block;
  margin-bottom: 7px;
  color: var(--theme-color);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.stat-content h3 {
  margin: 0;
  color: #222222;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
}

.stat-content h2 {
  margin: 0;
  color: #222222;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
}
/* NUMBER */
.stat-number {
  position: absolute;
  right: 15px;
  bottom: -20px;
  color: #f2f2f2;
  font-size: 90px;
  font-weight: 900;
  line-height: 1;
  z-index: 0;
  transition: all 0.4s ease;
}
/* HOVER */
.school-stat-item:hover {
  background: #fafafa;
}
.school-stat-item:hover::before {
  width: 250px;
  height: 250px;
}
.school-stat-item:hover::after {
  height: 100%;
}
.school-stat-item:hover .stat-icon {
  color: #ffffff;
  background: var(--theme-color);
  transform: translateY(-7px) rotate(-5deg);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.school-stat-item:hover .stat-number {
  color: #e9e9e9;
  transform: translateX(-10px);
}
/* TABLET */
@media(max-width: 991px) {
  .school-stats-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .school-stat-item {
    border-bottom: 1px solid #eeeeee;
  }
}
/* MOBILE */
@media(max-width: 576px) {
  .school-stats-section {
    padding: 30px 15px;
  }
  .school-stats-container {
    grid-template-columns: 1fr;
  }
  .school-stat-item {
    min-height: 135px;
    padding: 25px 25px;
    border-right: none;
    border-bottom: 1px solid #eeeeee;
  }
  .stat-inner {
    gap: 17px;
  }
  .stat-icon {
    width: 58px;
    min-width: 58px;
    height: 58px;
    font-size: 23px;
  }
  .stat-label {
    font-size: 9px;
  }
  .stat-content h3 {
    font-size: 16px;
  }
  .stat-content h2 {
    font-size: 16px;
  }
  .stat-number {
    font-size: 70px;
  }
}
.section__header .title-animation {
  position: relative;
  display: inline-block;
  padding-bottom: 18px;
}
/* Main underline */
.section__header .title-animation::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 90px;
  height: 3px;
  background: #1d0068;
  transform: translateX(-50%);
  border-radius: 10px;
	text-transform: none;
}
/* Centre diamond */
.section__header .title-animation::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 11px;
  height: 11px;
  background: #1d0068;
  border: 3px solid #ffffff;
  transform: translateX(-50%) rotate(45deg);
  z-index: 1;
	text-transform: none;
}
.achievers-container {
  width: 100%;
  /* max-width: 1250px; */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 18px;
  row-gap: 40px;
}
/* SINGLE ITEM */
.achiever-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
/* IMAGE WRAPPER */
.achiever-image {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  padding: 5px;
  background: #ffffff;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.35s ease, box-shadow 0.35s ease;
}
/* IMAGE */
.achiever-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}
/* DECORATIVE CIRCLE */
.achiever-image::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  right: 5px;
  top: 12px;
  background: #f7ad18;
  border: 3px solid #ffffff;
  border-radius: 50%;
  z-index: 2;
  display: none;
}
/* CONTENT BOX */
.achiever-info {
  position: relative;
  width: 95%;
  margin-top: -15px;
  padding: 13px 8px 10px;
  background: #fee7bc;
  border-radius: 55px;
  z-index: 3;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.18);
  transition: transform 0.35s ease;
}
/* NAME */
.achiever-info h3 {
  margin: 0 0 3px;
  color: #222222;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}
/* DESCRIPTION */
.achiever-info p {
  margin: 0;
  color: #5b2c00;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
/* HOVER EFFECT */
.achiever-item:hover .achiever-image {
  transform: translateY(-8px);
  box-shadow:
    0 18px 35px rgba(0, 0, 0, 0.35);
}
.achiever-item:hover .achiever-info {
  transform: translateY(-3px);
}
/* TABLET */
@media (max-width: 1100px) {
  .achievers-container {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 768px) {
  .achievers-section {
    padding: 40px 15px;
  }
  .achievers-container {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    row-gap: 35px;
  }
}
/* MOBILE */
@media (max-width: 576px) {
  .achievers-section {
    padding: 35px 12px;
  }
  .achievers-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 15px;
  }
  .achiever-image {
    width: 115px;
    height: 115px;
  }
  .achiever-info {
    width: 100%;
    margin-top: -12px;
    padding: 11px 5px 8px;
  }
  .achiever-info h3 {
    font-size: 10px;
  }
  .achiever-info p {
    font-size: 7px;
  }
}
/* SMALL MOBILE */
@media (max-width: 360px) {
  .achiever-image {
    width: 100px;
    height: 100px;
  }
}
.achiever-item.achiever-hidden {
  display: none !important;
}
.achiever-item.achiever-showing {
  animation: achieverFadeIn 0.6s ease forwards;
}
@keyframes achieverFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* BUTTON WRAPPER */
.load-more-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
/* BUTTON */
#loadMoreAchievers {
  padding: 14px 35px;
  background: #989dd2;
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease;
}
#loadMoreAchievers:hover {
  transform: translateY(-3px);
}
.contact__form.volunteer__form.checkout__form.aos-init.aos-animate {
  background: #fff;
  padding: 27px;
  border-radius: 25px;
}
.partner__slider.swiper.swiper-initialized.swiper-horizontal.swiper-free-mode.swiper-backface-hidden {
  margin-top: 100px;
}
.partner__slider-single {
  background: #fff;
  padding: 15px;
  border-radius: 15px;
}
.thumb-lg {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 15px;
  background: #000;
}
.thumb-lg iframe {
  position: absolute;
  width: 100%;
  height: 177.78%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}
.event-eight-thumb img {
  border-radius: 10px;
  width: 127px;
}
.school-video-wrapper {
  width: 100%;
  aspect-ratio: 9 / 13;
  overflow: hidden;
  border-radius: 15px;
}
.school-video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.inner-banner {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
}
.banner-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner-overlay {
  position: absolute;
  inset: 0;
  background: rgb(20 5 54 / 52%);
}
/* Content at bottom of banner */
.banner-content {
  position: absolute;
  left: 5%;
  bottom: 35px;
  z-index: 2;
  color: #fff;
}
.banner-content h1 {
  font-size: 40px;
  font-weight: 700;
  margin: 0 0 5px;
  color: #fff;
}
.banner-content h1 span {
  color: #d16b03;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.breadcrumb a {
  color: #fff;
  text-decoration: none;
}
.breadcrumb .active {
  color: #ff7a00;
  font-weight: 600;
}
/* Tablet */
@media (max-width: 991px) {
  .inner-banner {
    height: 300px;
  }
  .banner-content {
    left: 5%;
    bottom: 25px;
  }
  .banner-content h1 {
    font-size: 40px;
  }
}
/* Mobile */
@media (max-width: 767px) {
  .inner-banner {
    height: 220px;
  }
  .banner-content {
    left: 0;
    right: 0;
    bottom: 20px;
    text-align: center;
  }
  .banner-content h1 {
    font-size: 32px;
  }
  .breadcrumb {
    justify-content: center;
    font-size: 14px;
  }
}
:root {
  --purple: #7a78c8;
  --pink: #df8797;
  --orange: #f2b45f;
  --teal: #64b5a9;
  --dark: #111820;
  --text: #626b72;
  --light: #f7f8f8;
  --white: #ffffff;
  --border: #e7e8e9;
}
.hgs-title-block {
  width: 100%;
}
.hgs-title {
  margin: 0 0 20px;
  color: #253461;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
}
/* Decorative line */
.hgs-title-line {
  position: relative;
  width: 90px;
  height: 3.2px;
  background: #1d0068;
  border-radius: 10px;
  margin-bottom: 5px;
}
/* Diamond */
.hgs-diamond {
  position: absolute;
  top: 50%;
  left: 40px;
  width: 9px;
  height: 9px;
  background: #1d0068;
  border: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
/* =========================================================
   HGS HISTORY PAGE
   OPTION 4 — SCHOOL WEBSITE STYLE
   Existing fonts are retained
========================================================= */
.hgs-history-page {
  overflow: hidden;
  background: #fff;
  color: #070707;
}
/* =========================================================
   HERO
========================================================= */
.hgs-history-year-badge {
  position: absolute;
  z-index: 3;
  right: 7%;
  bottom: 70px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(6, 20, 8, .25);
  backdrop-filter: blur(8px);
}
.hgs-history-year-badge strong {
  color: #ffffff;
  font-family: var(--recoleta);
  font-size: 42px;
  font-weight: 400;
}
.hgs-history-year-badge span {
  margin-top: 5px;
  color: #acd5ce;
  font-family: var(--template-font);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
}
.hgs-history-scroll {
  position: absolute;
  z-index: 3;
  bottom: 35px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
}
.hgs-history-scroll span {
  color: rgba(255, 255, 255, .6);
  font-family: var(--template-font);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-history-scroll i {
  width: 1px;
  height: 35px;
  background: #acd5ce;
}
/* =========================================================
   INTRO
========================================================= */
.hgs-history-intro {
  /*max-width: 1240px;*/
  margin: auto;
  padding: 20px 0px;
}
.hgs-history-intro-label {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 45px;
  color: #046a58;
  font-family: var(--template-font);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3px;
}
.hgs-history-intro-label span {
  color: rgba(4, 106, 88, .4);
  font-family: var(--recoleta);
  font-size: 28px;
  font-weight: 400;
}
.hgs-history-intro-content {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 100px;
  align-items: start;
}
.hgs-history-intro-content h2 {
  margin: 0;
  color: #0B3D19;
  font-family: var(--recoleta);
  font-size: clamp(44px, 5vw, 70px);
  font-weight: 400;
  line-height: 1.08;
}
.hgs-history-intro-content h2 span {
  display: block;
  color: #046a58;
  font-style: italic;
}
.hgs-history-intro-text {
  padding-top: 10px;
}
.hgs-history-intro-text p {
  margin-bottom: 22px;
  color: #4B5563;
  font-family: var(--template-font);
  font-size: 16px;
  line-height: 1.9;
}
.hgs-history-intro-text strong {
  color: #046a58;
}
/* =========================================================
   VIDEO
========================================================= */
.hgs-history-video-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px 0px;
}
.hgs-history-video-heading {
  margin-bottom: 40px;
}
.hgs-history-video-heading > span {
  display: block;
  margin-bottom: 15px;
  color: #00715d;
  font-family: var(--template-font);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3px;
}
.hgs-history-video-heading h2 {
  margin: 0 0 20px;
  color: #253461;
  font-family: var(--recoleta);
  font-size: clamp(30px, 5vw, 30px);
  font-weight: 800;
  line-height: 1.1;
}
.hgs-history-video-heading h2 em {
  color: #046a58;
  font-style: italic;
}
.hgs-history-video {
    position: relative;
    height: 400px;
    overflow: hidden;
    background: url("../img/hgs-video-poster.jpg") center center / cover no-repeat;
    border-radius: 25px;
}
.hgs-history-video-file {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hgs-history-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 20, 8, .28);
}
.hgs-history-video-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hgs-history-play {
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  color: #ffffff;
  transition: all .35s ease;
}
.hgs-history-play:hover {
  background: #046a58;
  border-color: #046a58;
  transform: scale(1.08);
}
.hgs-history-play i {
  font-size: 17px;
}
.hgs-history-video-content > span {
  color: #ffffff;
  font-family: var(--template-font);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3px;
}
/* =========================================================
   JOURNEY
========================================================= */
.hgs-history-journey {
  padding: 60px 20px;
  background: #ffffff;
}
.hgs-history-journey-header {
  max-width: 1240px;
  margin: 0 auto 30px;
}
.hgs-history-journey-header > div {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
  color: #046a58;
  font-family: var(--template-font);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3px;
}
.hgs-history-journey-header > div span {
  color: rgba(4, 106, 88, .3);
  font-family: var(--recoleta);
  font-size: 28px;
  font-weight: 400;
}
.hgs-history-journey-header h2 {
  max-width: 700px;
  margin: 0;
  color: #0B3D19;
  font-family: var(--recoleta);
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 400;
  line-height: 1.08;
}
.hgs-history-journey-header h2 em {
  color: #046a58;
  font-style: italic;
}
.hgs-history-journey-line {
  position: relative;
  max-width: 1240px;
  margin: auto;
}
.hgs-history-journey-line::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 105px;
  width: 1px;
  background: #d8e4df;
}
.hgs-history-journey-item {
  position: relative;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 70px;
  padding-bottom: 75px;
}
.hgs-history-journey-number {
  position: absolute;
  left: 96px;
  top: 8px;
  z-index: 2;
  width: 19px;
  height: 19px;
  border: 5px solid #ffffff;
  border-radius: 50%;
  background: #046a58;
  box-shadow: 0 0 0 1px #046a58;
  font-size: 0;
}
.hgs-history-journey-year {
  padding-top: 0;
  color: #046a58;
  font-family: var(--recoleta);
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
}
.hgs-history-journey-card > span {
  display: block;
  margin-bottom: 12px;
  color: #00715d;
  font-family: var(--template-font);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 3px;
}
.hgs-history-journey-card h3 {
  margin: 0 0 15px;
  color: #0B3D19;
  font-family: var(--recoleta);
  font-size: 20px;
  font-weight: 700;
}
.hgs-history-journey-card p {
  color: #4B5563;
  font-family: var(--template-font);
  font-size: 16px;
  line-height: 1.8;
}
/* =========================================================
   EXPERIENCE
========================================================= */
.hgs-history-experience {
  max-width: 1240px;
  margin: auto;
  padding: 20px 20px;
}
.hgs-history-experience-heading {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 60px;
  margin-bottom: 55px;
}
.hgs-history-experience-heading > span {
  color: rgba(4, 106, 88, .3);
  font-family: var(--recoleta);
  font-size: 50px;
}
.hgs-history-experience-heading small {
  display: block;
  margin-bottom: 15px;
  color: #00715d;
  font-family: var(--template-font);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3px;
}
.hgs-history-experience-heading h2 {
  margin: 0;
  color: #0B3D19;
  font-family: var(--recoleta);
  font-size: clamp(42px, 5vw, 65px);
  font-weight: 400;
  line-height: 1.1;
}
.hgs-history-experience-heading h2 em {
  color: #046a58;
  font-style: italic;
}
.hgs-history-experience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 22px;
}
.hgs-history-experience-box {
  min-height: 270px;
  padding: 40px;
  display: flex;
  border-radius: 25px;
  flex-direction: column;
}
.hgs-history-experience-box.green {
  background: #046a58;
}
.hgs-history-experience-box.navy {
  background: #1b325c;
}
.hgs-history-experience-box.dark {
  background: #061408;
}
.hgs-history-experience-icon {
  width: 52px;
  height: 52px;
  margin-bottom: auto;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
.hgs-history-experience-box > span {
  margin-bottom: 12px;
  color: rgba(255, 255, 255, .45);
  font-family: var(--template-font);
  font-size: 10px;
}
.hgs-history-experience-box h3 {
  margin: 0 0 5px;
  color: #ffffff;
  font-family: var(--recoleta);
  font-size: 19px;
  font-weight: 800;
}
.hgs-history-experience-box p {
  color: rgba(255, 255, 255, .68);
  font-family: var(--template-font);
  font-size: 16px;
  line-height: 1.75;
}
/* =========================================================
   BELIEF
========================================================= */
.hgs-history-belief {
  position: relative;
  overflow: hidden;
  padding: 60px 20px;
  text-align: center;
  background: #061408;
}
.hgs-history-belief-decoration {
  position: absolute;
  width: 500px;
  height: 500px;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(172, 213, 206, .1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.hgs-history-belief-label {
  position: relative;
  z-index: 2;
  color: #acd5ce;
  font-family: var(--template-font);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 4px;
}
.hgs-history-belief h2 {
  position: relative;
  z-index: 2;
  margin: 25px 0;
  color: #ffffff;
  font-family: var(--recoleta);
  font-size: clamp(50px, 8vw, 60px);
  font-weight: 500;
  line-height: .95;
}
.hgs-history-belief h2 em {
  color: #acd5ce;
  font-style: italic;
}
.hgs-history-belief > p {
  position: relative;
  z-index: 2;
  max-width: 650px;
  margin: auto;
  color: rgba(255, 255, 255, .65);
  font-family: var(--template-font);
  font-size: 16px;
  line-height: 1.8;
}
.hgs-history-belief-points {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 35px;
  margin-top: 45px;
}
.hgs-history-belief-points span {
  color: rgba(255, 255, 255, .5);
  font-family: var(--template-font);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 900px) {
  .hgs-history-hero-content {
    left: 30px;
    right: 30px;
  }
  .hgs-history-year-badge {
    right: 30px;
    bottom: 80px;
    width: 120px;
    height: 120px;
  }
  .hgs-history-intro-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hgs-history-video {
    height: 450px;
  }
  .hgs-history-journey-line::before {
    left: 15px;
  }
  .hgs-history-journey-item {
    grid-template-columns: 100px 1fr;
    gap: 35px;
  }
  .hgs-history-journey-number {
    left: 6px;
	top: 30px;
  }
  .hgs-history-experience-grid {
    grid-template-columns: 1fr;
  }
  .hgs-history-experience-box {
    min-height: 300px;
  }
}
@media (max-width: 600px) {
  .hgs-history-hero {
    height: 650px;
    min-height: 600px;
  }
  .hgs-history-hero-content h1 {
    font-size: 65px;
  }
  .hgs-history-hero-content p {
    font-size: 15px;
  }
  .hgs-history-year-badge {
    width: 95px;
    height: 95px;
    right: 20px;
    bottom: 75px;
  }
  .hgs-history-year-badge strong {
    font-size: 28px;
  }
  .hgs-history-year-badge span {
    font-size: 7px;
  }
  .hgs-history-scroll {
    display: none;
  }
  .hgs-history-intro, .hgs-history-video-section, .hgs-history-experience {
    padding-top: 17px;
    padding-bottom: 0px;
  }
  .hgs-history-intro-content h2 {
    font-size: 44px;
  }
  .hgs-history-video {
    height: 330px;
  }
  .hgs-history-journey {
    padding: 30px 0px;
  }
  .hgs-history-journey-header {
    margin-bottom: 30px;
  }
  .hgs-history-journey-header h2 {
    font-size: 43px;
  }
  .hgs-history-journey-item {
    grid-template-columns: 65px 1fr;
    gap: 25px;
    padding-bottom: 55px;
  }
  .hgs-history-journey-year {
    font-size: 19px;
  }
  .hgs-history-journey-card h3 {
    font-size: 19px;
  }
  .hgs-history-experience-heading {
    grid-template-columns: 60px 1fr;
    gap: 20px;
  }
  .hgs-history-experience-heading > span {
    font-size: 35px;
  }
  .hgs-history-experience-heading h2 {
    font-size: 40px;
  }
  .hgs-history-experience-box {
    padding: 30px;
  }
  .hgs-history-belief {
    padding: 15px 20px;
  }
  .hgs-history-belief h2 {
    font-size: 29px;
  }
  .hgs-history-belief-decoration {
    width: 300px;
    height: 300px;
  }
}
/* =========================================================
   HGS FOUNDER TRIBUTE
========================================================= */
.hgs-founder-tribute {
  padding: 80px 0;
  background: #fcfcfa;
  overflow: hidden;
  /* Reference colours */
  --hgs-purple: #7773c7;
  --hgs-pink: #df8296;
  --hgs-orange: #f2b45d;
  --hgs-teal: #62b5aa;
  --hgs-green: #046a58;
  --hgs-navy: #1b325c;
  --hgs-text: #4b5563;
}
/* =========================================================
   IMPORTANT:
   Your main.css has div { line-height: 0px !important; }
   Reset it inside this section.
========================================================= */
.hgs-founder-tribute div {
  line-height: normal !important;
}
/* =========================================================
   SECTION TITLE
========================================================= */
.hgs-founder-title {
  max-width: 750px;
  margin: 0 auto 55px;
  text-align: center;
}
.hgs-founder-subtitle {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--hgs-green);
  font-family: var(--template-font);
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.hgs-founder-title h2 {
  margin: 0 0 15px;
  color: var(--hgs-navy);
  font-family: var(--template-font);
  font-size: 30px;
  line-height: 40px;
  font-weight: 700;
}
.hgs-founder-title h2 span {
  color: var(--hgs-green);
}
.hgs-founder-title p {
  margin: 0 auto;
  max-width: 620px;
  color: var(--hgs-text);
  font-family: var(--template-font);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}
/* =========================================================
   MAIN CONTENT
========================================================= */
.hgs-founder-grid {
  align-items: center;
  gap: 30px;
  margin: 0 auto 55px;
}
/* =========================================================
   IMAGE
========================================================= */
.hgs-founder-photo {
  position: relative;
  width: 100%;
  max-width: 490px;
  min-height: 480px;
  margin: auto;
}
.hgs-founder-photo-shape {
  position: absolute;
  top: 20px;
  left: -15px;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: #ecebfa;
}
.hgs-founder-photo::after {
  content: "";
  position: absolute;
  right: -12px;
  bottom: 35px;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: var(--hgs-orange);
  opacity: .85;
}
.hgs-founder-photo img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 480px;
  display: block;
  object-fit: cover;
  border-radius: 20px;
}
/* =========================================================
   YEAR
========================================================= */
.hgs-founder-year {
  position: absolute;
  z-index: 4;
  left: -25px;
  bottom: 25px;
  width: 110px;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--hgs-purple);
  box-shadow: 0 10px 25px rgba(119, 115, 199, .22);
}
.hgs-founder-year strong {
  color: #ffffff;
  font-family: var(--template-font);
  font-size: 28px;
  line-height: 32px;
  font-weight: 700;
}
.hgs-founder-year span {
  color: rgba(255, 255, 255, .75);
  font-family: var(--template-font);
  font-size: 9px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
/* =========================================================
   CONTENT
========================================================= */
.hgs-founder-info {
  padding: 10px 0;
}
.hgs-founder-number {
  display: block;
  margin-bottom: 8px;
  color: var(--hgs-purple);
  font-family: var(--template-font);
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-founder-info h3 {
  margin: 0 0 5px;
  color: var(--hgs-navy);
  font-family: var(--template-font);
  font-size: 24px;
  line-height: 34px;
  font-weight: 700;
}
.hgs-founder-designation {
  margin-bottom: 20px;
  color: var(--hgs-green);
  font-family: var(--template-font);
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
}
.hgs-founder-info p {
  margin: 0 0 15px;
  color: var(--hgs-text);
  font-family: var(--template-font);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}
/* =========================================================
   QUOTE
========================================================= */
.hgs-founder-quote {
  position: relative;
  margin-top: 25px;
  padding: 18px 20px 18px 48px;
  border-left: 3px solid var(--hgs-orange);
  background: #ffffff;
  color: var(--hgs-navy);
  font-family: var(--template-font);
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  font-style: italic;
}
.hgs-founder-quote span {
  position: absolute;
  left: 16px;
  top: 13px;
  color: var(--hgs-orange);
  font-family: Georgia, serif;
  font-size: 32px;
  line-height: 35px;
}
/* =========================================================
   HIGHLIGHTS
========================================================= */
.hgs-founder-highlights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 auto 70px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}
.hgs-founder-highlight {
  position: relative;
  min-height: 120px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 22px;
  border-right: 1px solid #eeeeee;
}
.hgs-founder-highlight:last-child {
  border-right: 0;
}
.hgs-founder-highlight::before {
  content: "";
  position: absolute;
  left: 0;
  top: 38px;
  width: 4px;
  height: 45px;
  border-radius: 0 4px 4px 0;
}
.hgs-founder-highlight.purple::before {
  background: var(--hgs-purple);
}
.hgs-founder-highlight.pink::before {
  background: var(--hgs-pink);
}
.hgs-founder-highlight.orange::before {
  background: var(--hgs-orange);
}
.hgs-founder-highlight.teal::before {
  background: var(--hgs-teal);
}
/* ICON */
.hgs-founder-icon {
  width: 52px;
  min-width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 18px;
}
.purple .hgs-founder-icon {
  color: var(--hgs-purple);
  border: 1px solid var(--hgs-purple);
  background: #f7f6ff;
}
.pink .hgs-founder-icon {
  color: var(--hgs-pink);
  border: 1px solid var(--hgs-pink);
  background: #fff6f8;
}
.orange .hgs-founder-icon {
  color: var(--hgs-orange);
  border: 1px solid var(--hgs-orange);
  background: #fffaf0;
}
.teal .hgs-founder-icon {
  color: var(--hgs-teal);
  border: 1px solid var(--hgs-teal);
  background: #f2fbf9;
}
.hgs-founder-highlight strong {
  display: block;
  color: var(--hgs-navy);
  font-family: var(--template-font);
  font-size: 21px;
  line-height: 28px;
  font-weight: 700;
}
.hgs-founder-highlight span {
  display: block;
  margin-top: 2px;
  color: #777777;
  font-family: var(--template-font);
  font-size: 9px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}
/* =========================================================
   BOTTOM LEGACY
========================================================= */
.hgs-founder-bottom {
  position: relative;
  margin: auto;
  padding: 55px 40px;
  text-align: center;
  background: var(--hgs-green);
  overflow: hidden;
}
.hgs-founder-bottom::before, .hgs-founder-bottom::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
}
.hgs-founder-bottom::before {
  width: 240px;
  height: 240px;
  left: -100px;
  top: -120px;
}
.hgs-founder-bottom::after {
  width: 300px;
  height: 300px;
  right: -150px;
  bottom: -170px;
}
.hgs-founder-bottom-content {
  position: relative;
  z-index: 2;
}
.hgs-founder-bottom-content > span {
  display: block;
  margin-bottom: 10px;
  color: #acd5ce;
  font-family: var(--template-font);
  font-size: 11px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-founder-bottom h2 {
  margin: 0 0 12px;
  color: #ffffff;
  font-family: var(--template-font);
  font-size: 30px;
  line-height: 40px;
  font-weight: 700;
}
.hgs-founder-bottom h2 em {
  color: #acd5ce;
  font-style: italic;
}
.hgs-founder-bottom p {
  max-width: 650px;
  margin: auto;
  color: rgba(255, 255, 255, .78);
  font-family: var(--template-font);
  font-size: 16px;
  line-height: 26px;
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 991px) {
  .hgs-founder-grid {
    gap: 45px;
  }
  .hgs-founder-photo {
    max-width: 500px;
  }
  .hgs-founder-highlights {
    grid-template-columns: repeat(2, 1fr);
  }
  .hgs-founder-highlight:nth-child(2) {
    border-right: 0;
  }
  .hgs-founder-highlight:nth-child(-n+2) {
    border-bottom: 1px solid #eeeeee;
  }
}
@media (max-width: 575px) {
  .hgs-founder-tribute {
    padding: 55px 15px;
  }
  .hgs-founder-title {
    margin-bottom: 40px;
  }
  .hgs-founder-title h2 {
    font-size: 30px;
    line-height: 40px;
  }
  .hgs-founder-title p {
    font-size: 16px;
    line-height: 26px;
  }
  .hgs-founder-photo {
    min-height: 360px;
  }
  .hgs-founder-photo img {
    height: 360px;
  }
  .hgs-founder-year {
    left: -5px;
    bottom: 15px;
    width: 85px;
    height: 85px;
  }
  .hgs-founder-year strong {
    font-size: 23px;
    line-height: 28px;
  }
  .hgs-founder-info h3 {
    font-size: 24px;
    line-height: 34px;
  }
  .hgs-founder-info p {
    font-size: 16px;
    line-height: 26px;
  }
  .hgs-founder-highlights {
    grid-template-columns: 1fr;
  }
  .hgs-founder-highlight {
    border-right: 0;
    border-bottom: 1px solid #eeeeee;
  }
  .hgs-founder-highlight:last-child {
    border-bottom: 0;
  }
  .hgs-founder-bottom {
    padding: 45px 20px;
  }
  .hgs-founder-bottom h2 {
    font-size: 30px;
    line-height: 40px;
  }
}
/* =========================================================
   HGS MISSION & VISION
   IMAGE-LED SCHOOL WEBSITE DESIGN
========================================================= */
.hgs-mission-page {
  --hgs-green: #046a58;
  --hgs-green-dark: #0B3D19;
  --hgs-navy: #1b325c;
  --hgs-purple: #7773c7;
  --hgs-pink: #df8296;
  --hgs-orange: #f2b45d;
  --hgs-teal: #62b5aa;
  --hgs-text: #4b5563;
  --hgs-light: #fcfcfa;
  background: var(--hgs-light);
  overflow: hidden;
}
/* =========================================================
   LOCAL TYPOGRAPHY
========================================================= */
.hgs-mission-page div {
  line-height: normal !important;
  border-radius: 20px;
}
.hgs-mission-final {
    border-radius: 0px !important;
}
.hgs-mission-page p {
  margin-top: 20px;
  margin-bottom: 18px;
  color: var(--hgs-text);
  font-family: var(--template-font);
  font-size: 16px;
  line-height: 26px;
}
.hgs-mission-page h2 {
  margin: 0 0 20px;
  color: var(--hgs-navy);
  font-family: var(--template-font);
  font-size: 30px;
  line-height: 40px;
  font-weight: 800;
}
.hgs-mission-page h2 span {
  color: #22305c;
}
.hgs-mission-page h3 {
  font-family: var(--template-font);
}
/* =========================================================
   HERO
========================================================= */
.hgs-mission-hero {
  position: relative;
  min-height: 560px;
  display: grid;
  grid-template-columns: 43% 57%;
  background: #ffffff;
}
.hgs-mission-hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 70px max(30px, calc((100vw - 1240px) / 2));
  padding-right: 45px;
  background: #ffffff;
}
.hgs-mission-eyebrow {
  margin-bottom: 18px;
  color: var(--hgs-green);
  font-family: var(--template-font);
  font-size: 11px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-mission-hero h1 {
  margin: 0;
  color: var(--hgs-navy);
  font-family: var(--template-font);
  font-size: 52px;
  line-height: 1.05;
  font-weight: 700;
}
.hgs-mission-hero h1 span {
  display: block;
  color: var(--hgs-green);
}
.hgs-mission-hero-content p {
  max-width: 440px;
  margin-top: 25px;
  font-size: 16px;
  line-height: 26px;
}
.hgs-mission-hero-image {
  position: relative;
  overflow: hidden;
}
.hgs-mission-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 106, 88, .15), transparent 40%);
}
.hgs-mission-hero-image img {
  width: 100%;
  height: 560px;
  display: block;
  object-fit: cover;
  transition: transform .7s ease;
}
.hgs-mission-hero:hover .hgs-mission-hero-image img {
  transform: scale(1.03);
}
.hgs-mission-hero-tag {
  position: absolute;
  z-index: 5;
  left: 39%;
  bottom: 35px;
  display: flex;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
}
.hgs-mission-hero-tag strong {
  padding: 13px 17px;
  font-family: var(--template-font);
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 1px;
  border-right: 1px solid #eeeeee;
}
.hgs-mission-hero-tag strong:nth-child(1) {
  color: var(--hgs-purple);
}
.hgs-mission-hero-tag strong:nth-child(2) {
  color: var(--hgs-green);
}
.hgs-mission-hero-tag strong:nth-child(3) {
  color: var(--hgs-orange);
}
/* =========================================================
   INTRO
========================================================= */
.hgs-mission-intro {
  max-width: 1150px;
  margin: auto;
  padding: 100px 20px;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 70px;
}
.hgs-mission-intro-left {
  border-top: 2px solid var(--hgs-green);
  padding-top: 12px;
}
.hgs-mission-section-number {
  display: block;
  margin-bottom: 7px;
  color: rgba(4, 106, 88, .3);
  font-family: var(--template-font);
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
}
.hgs-mission-small-title {
  display: block;
  color: var(--hgs-green);
  font-family: var(--template-font);
  font-size: 10px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-mission-intro-right {
  max-width: 800px;
}
.hgs-mission-intro-right h2 {
  font-size: 34px;
  line-height: 44px;
  margin-bottom: 22px;
}
/* =========================================================
   IMAGE STORY
========================================================= */
.hgs-mission-story {
  margin: 0 auto 100px;
  padding: 0 0px;
  display: grid;
  grid-template-columns: 52% 48%;
  align-items: center;
}
.hgs-mission-story-image {
  position: relative;
  height: 520px;
  overflow: hidden;
  border-radius: 20px;
}

.hgs-mission-story-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.hgs-mission-image-label {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  background: #ffffff;
  color: var(--hgs-green);
  font-family: var(--template-font);
  font-size: 9px;
  line-height: 15px;
  font-weight: 700;
  letter-spacing: 1px;
}
.hgs-mission-image-label span {
  color: var(--hgs-purple);
  font-size: 13px;
}
.hgs-mission-story-content {
  position: relative;
  margin-left: -35px;
  border-radius: 20px;
  padding: 45px;
  background: #ffffff;
  box-shadow: 0 15px 45px rgba(0, 0, 0, .07);
}
.hgs-mission-story-content h2 {
  margin-bottom: 22px;
  font-size: 22px;
  line-height: 40px;
}
.hgs-mission-highlight {
  margin-top: 25px;
  padding: 18px 20px;
  border-left: 3px solid var(--hgs-orange);
  background: #fffaf0;
}
.hgs-mission-highlight span {
  display: block;
  margin-bottom: 5px;
  color: var(--hgs-orange);
  font-family: var(--template-font);
  font-size: 9px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.hgs-mission-highlight strong {
  color: var(--hgs-navy);
  font-family: var(--template-font);
  font-size: 15px;
  line-height: 24px;
}
/* =========================================================
   CULTURE
========================================================= */
.hgs-mission-culture {
  margin: 0 auto 110px;
  padding: 0 0px;
  display: grid;
  grid-template-columns: 42% 58%;
  gap: 55px;
  align-items: center;
}
.hgs-mission-culture-content h2 {
  margin: 12px 0 22px;
  font-size: 22px;
  line-height: 40px;
}
.hgs-mission-culture-images {
  position: relative;
  height: 450px;
}
.hgs-mission-culture-image {
  position: absolute;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, .12);
}
.hgs-mission-culture-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 20px;
}
.hgs-mission-culture-image.image-one {
  width: 72%;
  height: 350px;
  right: 0;
  top: 0;
}
.hgs-mission-culture-image.image-two {
  width: 52%;
  height: 250px;
  left: 0;
  bottom: 0;
  border: 8px solid var(--hgs-light);
}
/* =========================================================
   PURPOSE
========================================================= */
.hgs-mission-purpose {
  margin: 0 auto 110px;
  padding: 0 0px;
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: center;
}
.hgs-mission-purpose-image {
  position: relative;
  height: 500px;
  overflow: hidden;
}
.hgs-mission-purpose-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}
.hgs-mission-purpose-badge {
  position: absolute;
  right: 25px;
  bottom: 25px;
  width: 125px;
  height: 125px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: var(--hgs-teal);
  text-align: center;
}
.hgs-mission-purpose-badge span {
  color: rgba(255, 255, 255, .7);
  font-family: var(--template-font);
  font-size: 8px;
  line-height: 13px;
  font-weight: 700;
  letter-spacing: 1px;
}
.hgs-mission-purpose-badge strong {
  margin-top: 4px;
  color: #ffffff;
  font-family: var(--template-font);
  font-size: 15px;
  line-height: 18px;
  font-weight: 700;
}
.hgs-mission-purpose-content {
  padding: 45px;
}
.hgs-mission-purpose-content h2 {
  margin: 12px 0 22px;
  font-size: 22px;
  line-height: 40px;
}
.hgs-mission-purpose-points {
  display: flex;
  margin-top: 30px;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
.hgs-mission-purpose-points div {
  flex: 1;
  padding: 15px 10px;
  border-right: 1px solid #e5e5e5;
}
.hgs-mission-purpose-points div:last-child {
  border-right: 0;
}
.hgs-mission-purpose-points strong {
  display: block;
  color: var(--hgs-purple);
  font-size: 14px;
}
.hgs-mission-purpose-points span {
  display: block;
  margin-top: 4px;
  color: var(--hgs-navy);
  font-family: var(--template-font);
  font-size: 16px;
  line-height: 18px;
  font-weight: 700;
}
/* =========================================================
   VALUES IMAGE GRID
========================================================= */
.hgs-mission-values {
  padding: 30px 0px;
}
.hgs-mission-values-heading {
  margin: 0 auto 40px;
}
.hgs-mission-values-heading h2 {
  margin-top: 10px;
  font-size: 30px;
  line-height: 40px;
}
.hgs-mission-values-grid {
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.hgs-mission-value-image {
  position: relative;
  height: 380px;
  overflow: hidden;
}
.hgs-mission-value-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .6s ease;
}
.hgs-mission-value-image:hover img {
  transform: scale(1.06);
}
.hgs-mission-value-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(6, 20, 8, .85), rgba(6, 20, 8, .05) 65%);
}
.hgs-mission-value-content {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
}
.hgs-mission-value-content span {
  color: #acd5ce;
  font-family: var(--template-font);
  font-size: 10px;
  line-height: 15px;
  font-weight: 700;
}
.hgs-mission-value-content h3 {
  margin: 7px 0;
  color: #ffffff;
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
}
.hgs-mission-value-content p {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: 16px;
  line-height: 20px;
}
/* =========================================================
   GRATITUDE
========================================================= */
.hgs-mission-gratitude {
  margin: 110px auto;
  padding: 0 0px;
  display: grid;
  grid-template-columns: 48% 52%;
  align-items: center;
}
.hgs-mission-gratitude-image {
  height: 470px;
  overflow: hidden;
}
.hgs-mission-gratitude-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.hgs-mission-gratitude-content {
  margin-left: -35px;
  padding: 45px;
  background: #ffffff;
  box-shadow: 0 15px 45px rgba(0, 0, 0, .08);
}
.hgs-mission-gratitude-content h2 {
  margin: 12px 0 22px;
  font-size: 30px;
  line-height: 40px;
}
.hgs-mission-gratitude-content strong {
  display: block;
  padding-top: 18px;
  border-top: 1px solid #eeeeee;
  color: var(--hgs-green);
  font-family: var(--template-font);
  font-size: 16px;
  line-height: 24px;
}
.hgs-mission-gratitude-line {
  width: 45px;
  height: 2px;
  margin: 25px 0;
  background: var(--hgs-orange);
}
/* =========================================================
   FINAL
========================================================= */
.hgs-mission-final {
  position: relative;
  padding: 70px 20px;
  text-align: center;
  background: var(--hgs-navy);
  overflow: hidden;
}
.hgs-mission-final::before {
  content: "";
  position: absolute;
  width: 350px;
  height: 350px;
  left: -150px;
  top: -180px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
}
.hgs-mission-final > span {
  position: relative;
  z-index: 2;
  color: #acd5ce;
  font-family: var(--template-font);
  font-size: 10px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-mission-final h2 {
  position: relative;
  z-index: 2;
  margin: 15px 0;
  color: #ffffff;
  font-size: 30px;
  line-height: 40px;
}
.hgs-mission-final h2 em {
  color: #acd5ce;
  font-style: normal;
}
.hgs-mission-final p {
  position: relative;
  z-index: 2;
  max-width: 650px;
  margin: auto;
  color: rgba(255, 255, 255, .72);
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991px) {
  .hgs-mission-hero {
    grid-template-columns: 1fr;
  }
  .hgs-mission-hero-content {
    min-height: 390px;
    padding: 60px 30px;
  }
  .hgs-mission-hero-image img {
    height: 480px;
  }
  .hgs-mission-hero-tag {
    left: 30px;
    bottom: 25px;
  }
  .hgs-mission-intro, .hgs-mission-story, .hgs-mission-culture, .hgs-mission-purpose, .hgs-mission-gratitude {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hgs-mission-story-content, .hgs-mission-gratitude-content {
    margin-left: 0;
  }
  .hgs-mission-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575px) {
  .hgs-mission-hero-content {
    min-height: 330px;
    padding: 45px 20px;
  }
  .hgs-mission-hero h1 {
    font-size: 40px;
    line-height: 48px;
  }
  .hgs-mission-hero-image img {
    height: 350px;
  }
  .hgs-mission-hero-tag {
    left: 15px;
  }
  .hgs-mission-hero-tag strong {
    padding: 10px 11px;
    font-size: 8px;
  }
  .hgs-mission-intro {
    padding: 65px 15px;
    gap: 25px;
  }
  .hgs-mission-intro-right h2 {
    font-size: 30px;
    line-height: 40px;
  }
  .hgs-mission-story, .hgs-mission-culture, .hgs-mission-purpose, .hgs-mission-gratitude {
    padding: 0 15px;
    margin-bottom: 70px;
  }
  .hgs-mission-story-image, .hgs-mission-purpose-image, .hgs-mission-gratitude-image {
    height: 330px;
  }
  .hgs-mission-story-content, .hgs-mission-purpose-content, .hgs-mission-gratitude-content {
    padding: 30px 25px;
  }
  .hgs-mission-story-content h2, .hgs-mission-culture-content h2, .hgs-mission-purpose-content h2, .hgs-mission-gratitude-content h2 {
    font-size: 27px;
    line-height: 37px;
  }
  .hgs-mission-culture-images {
    height: 330px;
  }
  .hgs-mission-culture-image.image-one {
    width: 78%;
    height: 260px;
  }
  .hgs-mission-culture-image.image-two {
    width: 55%;
    height: 190px;
  }
  .hgs-mission-values {
    padding: 65px 15px;
  }
  .hgs-mission-values-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .hgs-mission-value-image {
    height: 280px;
  }
  .hgs-mission-value-content {
    left: 15px;
    right: 15px;
    bottom: 15px;
  }
  .hgs-mission-value-content h3 {
    font-size: 18px;
    line-height: 25px;
  }
  .hgs-mission-value-content p {
    font-size: 12px;
    line-height: 18px;
  }
  .hgs-mission-final {
    padding: 55px 20px;
  }
}
/* =========================================================
   HGS PRINCIPAL'S MESSAGE
========================================================= */
.hgs-principal-message {
  --hgs-green: #046a58;
  --hgs-dark-green: #0b3d19;
  --hgs-navy: #1b325c;
  --hgs-purple: #7773c7;
  --hgs-pink: #df8296;
  --hgs-orange: #f2b45d;
  --hgs-teal: #62b5aa;
  --hgs-text: #4b5563;
  --hgs-bg: #fcfcfa;
  padding: 80px 0;
  background: var(--hgs-bg);
  overflow: hidden;
}
/* =========================================================
   LOCAL RESET
========================================================= */
.hgs-principal-message div {
  line-height: normal !important;
}
.hgs-principal-message p {
  margin-top: 0;
}
/* =========================================================
   HEADER
========================================================= */
.hgs-principal-header {
  margin: 0 auto 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 22px;
}
.hgs-principal-label {
  display: block;
  margin-bottom: 10px;
  color: var(--hgs-green);
  font-family: var(--template-font);
  font-size: 10px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-principal-header h2 {
  margin: 0;
  color: var(--hgs-navy);
  font-family: var(--template-font);
  font-size: 30px;
  line-height: 40px;
  font-weight: 700;
}
.hgs-principal-header h2 span {
  color: var(--hgs-green);
}
.hgs-principal-header-number {
  color: rgba(119, 115, 199, .3);
  font-family: var(--template-font);
  font-size: 34px;
  line-height: 40px;
  font-weight: 700;
}
/* =========================================================
   MAIN SECTION
========================================================= */
.hgs-principal-main {
  margin: 0 auto 90px;
  display: grid;
  grid-template-columns: 44% 56%;
  align-items: center;
  gap: 55px;
}
/* =========================================================
   PRINCIPAL IMAGE
========================================================= */
.hgs-principal-photo {
  position: relative;
  min-height: 520px;
}
.hgs-principal-photo-bg {
  position: absolute;
  top: 18px;
  left: -18px;
  width: 100%;
  height: 100%;
  background: #e9e8f7;
  border-radius: 18px;
}
.hgs-principal-photo::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  right: -20px;
  bottom: 55px;
  border-radius: 50%;
  background: var(--hgs-orange);
  opacity: .9;
}
.hgs-principal-photo img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 520px;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 18px;
}
/* =========================================================
   PHOTO TAG
========================================================= */
.hgs-principal-photo-tag {
  position: absolute;
  z-index: 5;
  left: 20px;
  bottom: 20px;
  padding: 13px 18px;
  background: #ffffff;
  box-shadow: 0 8px 25px rgba(0, 0, 0, .12);
}
.hgs-principal-photo-tag span {
  display: block;
  margin-bottom: 3px;
  color: var(--hgs-green);
  font-family: var(--template-font);
  font-size: 8px;
  line-height: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.hgs-principal-photo-tag strong {
  display: block;
  color: var(--hgs-navy);
  font-family: var(--template-font);
  font-size: 11px;
  line-height: 17px;
  font-weight: 700;
}
/* =========================================================
   MAIN MESSAGE
========================================================= */
.hgs-principal-content {
  padding: 10px 0;
}
.hgs-principal-intro {
  position: relative;
  margin-bottom: 25px;
  padding-left: 38px;
  border-left: 3px solid var(--hgs-green);
}
.hgs-principal-quote-mark {
  position: absolute;
  left: 12px;
  top: -8px;
  color: var(--hgs-green);
  font-family: Georgia, serif;
  font-size: 30px;
  line-height: 35px;
}
.hgs-principal-intro p {
  margin: 0;
  color: var(--hgs-navy);
  font-family: var(--template-font);
  font-size: 17px;
  line-height: 28px;
  font-weight: 600;
}
.hgs-principal-content > p {
  margin-bottom: 17px;
  color: var(--hgs-text);
  font-family: var(--template-font);
  font-size: 16px;
  line-height: 26px;
}
/* =========================================================
   EXPERIENCE SECTION
========================================================= */
.hgs-principal-experience {
  margin: 0 auto 100px;
}
.hgs-principal-experience-heading {
  gap: 25px;
  margin-bottom: 35px;
}
.hgs-principal-experience-heading > span {
  color: rgba(119, 115, 199, .3);
  font-family: var(--template-font);
  font-size: 30px;
  line-height: 40px;
  font-weight: 700;
}
.hgs-principal-experience-heading small {
  display: block;
  margin-bottom: 8px;
  color: var(--hgs-green);
  font-family: var(--template-font);
  font-size: 10px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-principal-experience-heading h3 {
  margin: 0;
  color: var(--hgs-navy);
  font-family: var(--template-font);
  font-size: 30px;
  line-height: 40px;
  font-weight: 700;
}
.hgs-principal-experience-heading h3 em {
  color: var(--hgs-green);
  font-style: normal;
}
/* =========================================================
   EXPERIENCE CARDS
========================================================= */
.hgs-principal-experience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.hgs-principal-experience-card {
  position: relative;
  min-height: 260px;
  padding: 25px;
  background: #ffffff;
  border: 1px solid #e8e8e5;
  overflow: hidden;
  border-radius: 25px;
}
.hgs-principal-experience-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 73px;
}
.hgs-principal-experience-card.purple::before {
  background: var(--hgs-purple);
}
.hgs-principal-experience-card.pink::before {
  background: var(--hgs-pink);
}
.hgs-principal-experience-card.orange::before {
  background: var(--hgs-orange);
}
.hgs-principal-experience-card.teal::before {
  background: var(--hgs-teal);
}
.hgs-principal-card-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 17px;
}
.purple .hgs-principal-card-icon {
  color: var(--hgs-purple);
  background: #f5f4fd;
}
.pink .hgs-principal-card-icon {
  color: var(--hgs-pink);
  background: #fff3f5;
}
.orange .hgs-principal-card-icon {
  color: var(--hgs-orange);
  background: #fff8eb;
}
.teal .hgs-principal-card-icon {
  color: var(--hgs-teal);
  background: #f0faf8;
}
.hgs-principal-experience-card > span {
  display: block;
  margin-bottom: 7px;
  color: #999999;
  font-family: var(--template-font);
  font-size: 13px;
  line-height: 14px;
  font-weight: 700;
}
.hgs-principal-experience-card h4 {
  margin: 0 0 12px;
  color: var(--hgs-navy);
  font-family: var(--template-font);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
}
.hgs-principal-experience-card p {
  margin: 0;
  color: var(--hgs-text);
  font-family: var(--template-font);
  font-size: 16px;
  line-height: 23px;
}
/* =========================================================
   SECONDARY IMAGE + CONTENT
========================================================= */
.hgs-principal-secondary {
  margin: 0 auto 90px;
  display: grid;
  grid-template-columns: 52% 48%;
  align-items: center;
}
.hgs-principal-secondary-image {
  position: relative;
  height: 400px;
  overflow: hidden;
}
.hgs-principal-secondary-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .6s ease;
}
.hgs-principal-secondary-image:hover img {
  transform: scale(1.04);
}
.hgs-principal-image-caption {
  position: absolute;
  left: 20px;
  bottom: 20px;
  padding: 12px 16px;
  background: #ffffff;
  box-shadow: 0 8px 25px rgba(0, 0, 0, .1);
}
.hgs-principal-image-caption span {
  display: block;
  margin-bottom: 3px;
  color: var(--hgs-green);
  font-family: var(--template-font);
  font-size: 8px;
  line-height: 13px;
  font-weight: 700;
  letter-spacing: 1px;
}
.hgs-principal-image-caption strong {
  color: var(--hgs-navy);
  font-family: var(--template-font);
  font-size: 10px;
  line-height: 15px;
  font-weight: 700;
}
.hgs-principal-secondary-content {
  margin-left: 0px;
  padding: 40px;
  background: #ffffff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .07);
}
.hgs-principal-secondary-content h3 {
  margin: 10px 0 20px;
  color: var(--hgs-navy);
  font-family: var(--template-font);
  font-size: 30px;
  line-height: 40px;
  font-weight: 700;
}
.hgs-principal-secondary-content h3 em {
  color: var(--hgs-teal);
  font-style: normal;
}
.hgs-principal-secondary-content p {
  margin-bottom: 16px;
  margin-top: 20px;
  color: var(--hgs-text);
  font-family: var(--template-font);
  font-size: 16px;
  line-height: 26px;
}
/* =========================================================
   CLOSING MESSAGE
========================================================= */
.hgs-principal-closing {
  margin: 0 auto;
  padding: 55px 30px;
  text-align: center;
  background: var(--hgs-green);
  position: relative;
  overflow: hidden;
  border-radius: 25px;
}
.hgs-principal-closing::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  left: -120px;
  top: -160px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
}
.hgs-principal-closing::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  right: -100px;
  bottom: -120px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 50%;
}
.hgs-principal-closing-content {
  position: relative;
  z-index: 2;
}
.hgs-principal-closing-content > span {
  display: block;
  margin-bottom: 10px;
  color: #acd5ce;
  font-family: var(--template-font);
  font-size: 10px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-principal-closing h2 {
  margin: 0 0 15px;
  color: #ffffff;
  font-family: var(--template-font);
  font-size: 30px;
  line-height: 40px;
  font-weight: 700;
}
.hgs-principal-closing h2 em {
  color: #acd5ce;
  font-style: normal;
}
.hgs-principal-closing p {
  max-width: 680px;
  margin: auto;
  color: rgba(255, 255, 255, .78);
  font-family: var(--template-font);
  font-size: 16px;
  line-height: 26px;
}
/* =========================================================
   SIGNATURE
========================================================= */
.hgs-principal-signature {
  max-width: 1100px;
  margin: 35px auto 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
}
.hgs-principal-signature-line {
  width: 45px;
  height: 2px;
  background: var(--hgs-orange);
}
.hgs-principal-signature strong {
  display: block;
  color: var(--hgs-navy);
  font-family: var(--template-font);
  font-size: 18px;
  line-height: 30px;
  font-weight: 700;
}
.hgs-principal-signature span {
  display: block;
  color: var(--hgs-green);
  font-family: var(--template-font);
  font-size: 13x;
  line-height: 17px;
  font-weight: 600;
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991px) {
  .hgs-principal-main {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .hgs-principal-photo {
    max-width: 500px;
    margin: auto;
    width: 100%;
  }
  .hgs-principal-experience-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hgs-principal-secondary {
    grid-template-columns: 1fr;
  }
  .hgs-principal-secondary-content {
    margin-left: 0;
  }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575px) {
  .hgs-principal-message {
    padding: 55px 15px;
  }
  .hgs-principal-header {
    margin-bottom: 40px;
  }
  .hgs-principal-header h2 {
    font-size: 30px;
    line-height: 40px;
  }
  .hgs-principal-header-number {
    display: none;
  }
  .hgs-principal-main {
    margin-bottom: 70px;
  }
  .hgs-principal-photo {
    min-height: 380px;
  }
  .hgs-principal-photo img {
    height: 380px;
  }
  .hgs-principal-photo-bg {
    top: 12px;
    left: -10px;
  }
  .hgs-principal-photo::after {
    width: 45px;
    height: 45px;
    right: -10px;
  }
  .hgs-principal-intro p {
    font-size: 16px;
    line-height: 26px;
  }
  .hgs-principal-content > p {
    font-size: 16px;
    line-height: 26px;
  }
  .hgs-principal-experience {
    margin-bottom: 70px;
  }
  .hgs-principal-experience-heading {
    grid-template-columns: 45px 1fr;
    gap: 15px;
  }
  .hgs-principal-experience-heading h3 {
    font-size: 26px;
    line-height: 36px;
  }
  .hgs-principal-experience-grid {
    grid-template-columns: 1fr;
  }
  .hgs-principal-experience-card {
    min-height: 230px;
  }
  .hgs-principal-secondary {
    margin-bottom: 70px;
  }
  .hgs-principal-secondary-image {
    height: 300px;
  }
  .hgs-principal-secondary-content {
    padding: 30px 25px;
  }
  .hgs-principal-secondary-content h3 {
    font-size: 26px;
    line-height: 36px;
  }
  .hgs-principal-closing {
    padding: 45px 20px;
  }
  .hgs-principal-closing h2 {
    font-size: 27px;
    line-height: 37px;
  }
  .hgs-principal-signature {
    justify-content: center;
  }
}
/* =========================================================
   HGS MEMBER POPUP
========================================================= */
.hgs-member-popup {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity .35s ease, visibility .35s ease;
}
/* ACTIVE */
.hgs-member-popup.active {
  visibility: visible;
  opacity: 1;
}
/* =========================================================
   OVERLAY
========================================================= */
.hgs-popup-overlay {
  position: absolute;
  inset: 0;
  background:
    rgba(4, 61, 48, .78);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
/* =========================================================
   POPUP BOX
========================================================= */
.hgs-popup-box {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 920px;
  min-height: 500px;
  display: grid;
  grid-template-columns: 45% 55%;
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, .25);
  transform:
    translateY(35px) scale(.96);
  transition:
    transform .4s ease;
}
/* OPEN ANIMATION */
.hgs-member-popup.active .hgs-popup-box {
  transform:
    translateY(0) scale(1);
}
/* =========================================================
   IMAGE
========================================================= */
.hgs-popup-image {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  background: #e9eeee;
}
.hgs-popup-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(4, 61, 48, .25));
}
.hgs-popup-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform .7s ease;
}
.hgs-member-popup.active .hgs-popup-image img {
  transform: scale(1.02);
}
/* =========================================================
   IMAGE NUMBER
========================================================= */
.hgs-popup-image-number {
  position: absolute;
  z-index: 3;
  left: 22px;
  bottom: 22px;
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff;
  color: #7773c7;
  font-family: var(--template-font);
  font-size: 17px;
  line-height: 20px;
  font-weight: 700;
  box-shadow:
    0 8px 25px rgba(0, 0, 0, .15);
}
/* =========================================================
   CONTENT
========================================================= */
.hgs-popup-content {
  position: relative;
  padding: 30px 28px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #ffffff;
}
/* =========================================================
   LABEL
========================================================= */
.hgs-popup-label {
  display: block;
  margin-bottom: 10px;
  color: #046a58;
  font-family: var(--template-font);
  font-size: 10px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 2px;
}
/* =========================================================
   ACCENT
========================================================= */
.hgs-popup-line {
  width: 45px;
  height: 3px;
  margin-bottom: 24px;
  background: #f2b45d;
  border-radius: 3px;
}
/* =========================================================
   DESCRIPTION
========================================================= */
.hgs-popup-description {
  max-height: 260px;
  overflow-y: auto;
  padding-right: 15px;
  margin-bottom: 10px;
  scrollbar-width: thin;
  scrollbar-color: #62b5aa #eeeeee;
}
/* Chrome / Edge / Safari */
.hgs-popup-description::-webkit-scrollbar {
  width: 5px;
}
.hgs-popup-description::-webkit-scrollbar-track {
  background: #eeeeee;
  border-radius: 10px;
}
.hgs-popup-description::-webkit-scrollbar-thumb {
  background: #62b5aa;
  border-radius: 10px;
}
.hgs-popup-description::-webkit-scrollbar-thumb:hover {
  background: #046a58;
}
/* Paragraph */
.hgs-popup-description p {
  margin: 0 0 18px;
  color: #4b5563;
  font-family: var(--template-font, Arial, sans-serif);
  font-size: 16px;
  line-height: 26px;
}
.hgs-popup-description p:last-child {
  margin-bottom: 0;
}
/* =========================================================
   MEMBER DETAILS
========================================================= */
.hgs-popup-member {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #eeeeee;
}
.hgs-popup-member-line {
  width: 4px;
  min-width: 4px;
  height: 45px;
  border-radius: 5px;
  background: #046a58;
}
.hgs-popup-member h3 {
  margin: 0 0 3px;
  color: #1b325c;
  font-family: var(--template-font);
  font-size: 21px;
  line-height: 29px;
  font-weight: 700;
}
.hgs-popup-member p {
  margin: 0;
  color: #046a58;
  font-family: var(--template-font);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
}
/* =========================================================
   CLOSE
========================================================= */
.hgs-popup-close {
  position: absolute;
  z-index: 10;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: #1b325c;
  font-size: 15px;
  cursor: pointer;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, .12);
  transition: all .3s ease;
}
.hgs-popup-close:hover {
  background: #046a58;
  color: #ffffff;
  transform: rotate(90deg);
}
/* =========================================================
   DECORATIVE CIRCLE
========================================================= */
.hgs-popup-content::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -90px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 1px solid rgba(98, 181, 170, .25);
  box-shadow:
    0 0 0 25px rgba(98, 181, 170, .04), 0 0 0 50px rgba(98, 181, 170, .025);
  pointer-events: none;
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767px) {
  .hgs-member-popup {
    padding: 15px;
  }
  .hgs-popup-box {
    max-width: 480px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border-radius: 16px;
  }
  /* IMAGE TOP */
  .hgs-popup-image {
    height: 280px;
    min-height: 280px;
    flex-shrink: 0;
  }
  .hgs-popup-image-number {
    width: 45px;
    height: 45px;
    left: 15px;
    bottom: 15px;
    font-size: 14px;
  }
  /* CONTENT BELOW */
  .hgs-popup-content {
    padding: 30px 25px 35px;
    display: block;
  }
  .hgs-popup-label {
    font-size: 9px;
  }
  .hgs-popup-member {
    margin-top: 20px;
  }
  .hgs-popup-member h3 {
    font-size: 19px;
    line-height: 27px;
  }
  .hgs-popup-close {
    width: 36px;
    height: 36px;
    top: 10px;
    right: 10px;
  }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 400px) {
  .hgs-popup-image {
    height: 240px;
    min-height: 240px;
  }
  .hgs-popup-content {
    padding: 25px 20px 30px;
  }
}
@media (max-width: 767px) {
  .hgs-popup-description {
    max-height: 240px;
    overflow-y: auto;
    padding-right: 12px;
  }
  .hgs-popup-description p {
    font-size: 15px;
    line-height: 25px;
    margin-bottom: 15px;
  }
}
.hgs-achievement-section {
  padding: 90px 20px;
  background: #f7f8f5;
}
.hgs-achievement-container {
  max-width: 1200px;
  margin: 0 auto;
}
/* =========================================================
   SECTION HEADER
========================================================= */
.hgs-achievement-header {
  max-width: 850px;
  margin: 0 auto 60px;
  text-align: center;
}
.hgs-achievement-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: #046a58;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.hgs-achievement-header h2 {
  margin: 0 0 20px;
  color: #1b325c;
  font-size: 30px;
  line-height: 40px;
  font-weight: 700;
}
.hgs-achievement-header h2 span {
  color: #046a58;
}
.hgs-achievement-header p {
  margin: 0;
  color: #5d6670;
  font-size: 16px;
  line-height: 27px;
}
/* =========================================================
   RECOGNITION STRIP
========================================================= */
.hgs-recognition-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  margin-bottom: 70px;
}
.hgs-recognition-card {
  position: relative;
  min-height: 220px;
  padding: 35px;
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(20, 50, 70, .07);
  border: 1px solid rgba(4, 106, 88, .08);
  transition: all .35s ease;
}
.hgs-recognition-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 45px rgba(20, 50, 70, .12);
}
.hgs-recognition-card::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -70px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 1px solid rgba(4, 106, 88, .15);
}
.hgs-recognition-icon {
  width: 70px;
  height: 70px;
  min-width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 25px;
  border-radius: 50%;
  background: #eef6f3;
  color: #046a58;
  font-size: 27px;
}
.hgs-recognition-content h3 {
  margin: 0 0 10px;
  color: #1b325c;
  font-size: 21px;
  line-height: 29px;
}
.hgs-recognition-content p {
  margin: 0;
  color: #626b73;
  font-size: 14px;
  line-height: 23px;
}
/* =========================================================
   ACHIEVEMENT HEADING
========================================================= */
.hgs-achievement-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 35px;
}
.hgs-achievement-title-left span {
  display: block;
  margin-bottom: 8px;
  color: #046a58;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-achievement-title-left h3 {
  margin: 0;
  color: #1b325c;
  font-size: 30px;
  line-height: 38px;
}
/* =========================================================
   YEAR BADGE
========================================================= */
.hgs-year-badge {
  padding: 12px 22px;
  border-radius: 50px;
  background: #1b325c;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
}
/* =========================================================
   SPORTS GRID
========================================================= */
.hgs-sports-grid {
  display: grid;
  grid-template-columns:
    repeat(1, minmax(0, 1fr));
  gap: 25px;
}
/* =========================================================
   SPORT CARD
========================================================= */
.hgs-sport-card {
  position: relative;
  padding: 30px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #edf0ef;
  overflow: hidden;
  transition: all .35s ease;
}
.hgs-sport-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 18px 40px rgba(20, 50, 70, .08);
}
/* TOP */
.hgs-sport-top {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eeeeee;
}
.hgs-sport-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #eef6f3;
  color: #046a58;
  font-size: 20px;
}
.hgs-sport-top h4 {
  margin: 0;
  color: #1b325c;
  font-size: 20px;
  line-height: 28px;
}
/* ACHIEVEMENT LIST */
.hgs-sport-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.hgs-sport-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 13px;
  color: #2c2c2cf68;
  font-size: 16px;
  line-height: 27px;
}
.hgs-sport-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f2b45d;
}
.hgs-sport-list li:last-child {
  margin-bottom: 0;
}
/* =========================================================
   GOLD HIGHLIGHT
========================================================= */
.hgs-gold-text {
  color: #046a58;
  font-weight: 700;
}
/* =========================================================
   MUN / SPECIAL ACHIEVEMENTS
========================================================= */
.hgs-special-achievements {
  margin-top: 25px;
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 25px;
}
.hgs-special-card {
  padding: 30px;
  background:
    linear-gradient(135deg, #1b325c, #046a58);
  border-radius: 17px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
.hgs-special-card::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -70px;
  top: -70px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
}
.hgs-special-label {
  display: block;
  margin-bottom: 10px;
  color: #f2b45d;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-special-card h4 {
  margin: 0 0 18px;
  color: #ffffff;
  font-size: 20px;
  line-height: 28px;
}
.hgs-special-card ul {
  margin: 0;
  padding-left: 18px;
}
.hgs-special-card li {
  margin-bottom: 9px;
  color: rgba(255, 255, 255, .86);
  font-size: 14px;
  line-height: 22px;
}
/* =========================================================
   STATE LEVEL SECTION
========================================================= */
.hgs-state-card {
  margin-top: 25px;
  padding: 35px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 30px;
  background: #ffffff;
  border-radius: 17px;
  border: 1px solid #edf0ef;
}
.hgs-state-heading {
  padding-right: 25px;
  border-right: 1px solid #eeeeee;
}
.hgs-state-heading span {
  display: block;
  margin-bottom: 8px;
  color: #046a58;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-state-heading h4 {
  margin: 0;
  color: #1b325c;
  font-size: 23px;
  line-height: 30px;
}
.hgs-state-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 25px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hgs-state-list li {
  position: relative;
  padding-left: 20px;
  color: #59636b;
  font-size: 14px;
  line-height: 22px;
}
.hgs-state-list li::before {
  content: "★";
  position: absolute;
  left: 0;
  color: #f2b45d;
  font-size: 11px;
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 991px) {
  .hgs-sports-grid {
    grid-template-columns: 1fr;
  }
  .hgs-state-card {
    grid-template-columns: 1fr;
  }
  .hgs-state-heading {
    padding-right: 0;
    padding-bottom: 20px;
    border-right: 0;
    border-bottom: 1px solid #eeeeee;
  }
}
@media (max-width: 767px) {
  .hgs-achievement-section {
    padding: 60px 15px;
  }
  .hgs-achievement-header h2 {
    font-size: 28px;
    line-height: 36px;
  }
  .hgs-recognition-strip {
    grid-template-columns: 1fr;
    margin-bottom: 50px;
  }
  .hgs-recognition-card {
    padding: 25px;
    min-height: auto;
  }
  .hgs-achievement-title {
    align-items: flex-start;
    gap: 20px;
    flex-direction: column;
  }
  .hgs-achievement-title-left h3 {
    font-size: 27px;
  }
  .hgs-sport-card {
    padding: 25px;
  }
  .hgs-special-achievements {
    grid-template-columns: 1fr;
  }
  .hgs-state-card {
    padding: 25px;
  }
  .hgs-state-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .hgs-recognition-card {
    display: block;
  }
  .hgs-recognition-icon {
    margin-bottom: 18px;
  }
  .hgs-sport-list {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   HEADER
========================================================= */
.hgs-gallery-header {
  max-width: 760px;
  margin: 0 auto 55px;
  text-align: center;
}
.hgs-gallery-label {
  display: block;
  margin-bottom: 10px;
  color: #046a58;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.hgs-gallery-header h2 {
  margin: 0 0 15px;
  color: #1b325c;
  font-size: 30px;
  line-height: 40px;
  font-weight: 700;
}
.hgs-gallery-header h2 span {
  color: #046a58;
}
.hgs-gallery-header p {
  margin: 0;
  color: #606a72;
  font-size: 16px;
  line-height: 26px;
}
/* =========================================================
   GALLERY GRID
========================================================= */
.hgs-gallery-grid {
  display: grid;
  grid-template-columns:
    repeat(4, 1fr);
  grid-auto-rows: 230px;
  gap: 18px;
  padding-bottom: 0px;
  padding-top: 10px;
}
/* =========================================================
   GALLERY ITEM
========================================================= */
.hgs-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  cursor: pointer;
  background: #e8eeeb;
  box-shadow:
    0 8px 25px rgba(20, 50, 70, .06);
}
/* DIFFERENT SIZES */
.hgs-gallery-item.large {
  grid-column: span 2;
  grid-row: span 2;
}
.hgs-gallery-item.wide {
  grid-column: span 2;
}
/* IMAGE */
.hgs-gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition:
    transform .6s ease;
}
/* =========================================================
   HOVER OVERLAY
========================================================= */
.hgs-gallery-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0px;
 /* background:
    linear-gradient(180deg, transparent 45%, rgba(4, 61, 48, .75));*/
  opacity: 0;
  transition: opacity .35s ease;
}
.hgs-gallery-item:hover img {
  transform: scale(1.07);
}
.hgs-gallery-item:hover .hgs-gallery-overlay {
  opacity: 1;
}
/* IMAGE TITLE */
.hgs-gallery-overlay span {
  color: #ffffff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
/* VIEW ICON */
.hgs-gallery-view {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff;
  color: #046a58;
  font-size: 14px;
}
/* =========================================================
   LIGHTBOX
========================================================= */
.hgs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background:
    rgba(5, 25, 25, .94);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity .3s ease, visibility .3s ease;
}
.hgs-lightbox.active {
  opacity: 1;
  visibility: visible;
}
/* =========================================================
   LIGHTBOX IMAGE AREA
========================================================= */
.hgs-lightbox-content {
  position: relative;
  width: 100%;
  max-width: 1100px;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hgs-lightbox-image {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow:
    0 20px 70px rgba(0, 0, 0, .45);
  transform: scale(.96);
  transition:
    transform .35s ease;
}
.hgs-lightbox.active .hgs-lightbox-image {
  transform: scale(1);
}
/* =========================================================
   CLOSE BUTTON
========================================================= */
.hgs-lightbox-close {
  position: fixed;
  top: 25px;
  right: 30px;
  z-index: 20;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: #1b325c;
  cursor: pointer;
  font-size: 17px;
  padding: 13px;
  transition: all .3s ease;
}
.hgs-lightbox-close:hover {
  background: #046a58;
  color: #ffffff;
  transform: rotate(90deg);
}
/* =========================================================
   PREVIOUS / NEXT
========================================================= */
.hgs-lightbox-prev, .hgs-lightbox-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 40px;
  height: 40px;
  border: 0;
  padding: 15px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: #1b325c;
  cursor: pointer;
  font-size: 17px;
  transition: all .3s ease;
}
.hgs-lightbox-prev {
  left: 25px;
}
.hgs-lightbox-next {
  right: 25px;
}
.hgs-lightbox-prev:hover, .hgs-lightbox-next:hover {
  background: #046a58;
  color: #ffffff;
}
/* =========================================================
   COUNTER
========================================================= */
.hgs-lightbox-counter {
  position: fixed;
  left: 50%;
  bottom: 25px;
  transform: translateX(-50%);
  z-index: 20;
  padding: 8px 18px;
  border-radius: 30px;
  background: rgba(255, 255, 255, .95);
  color: #1b325c;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 991px) {
  .hgs-gallery-grid {
    grid-template-columns:
      repeat(2, 1fr);
    grid-auto-rows: 220px;
  }
}
@media (max-width: 767px) {
  .hgs-gallery-section {
    padding: 60px 15px;
  }
  .hgs-gallery-header h2 {
    font-size: 28px;
    line-height: 36px;
  }
  .hgs-gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 180px;
    gap: 10px;
  }
  .hgs-gallery-item.large {
    grid-column: span 2;
    grid-row: span 2;
  }
  .hgs-gallery-overlay {
    opacity: 1;
    padding: 10px;
    background:
      linear-gradient(180deg, transparent 50%, rgba(4, 61, 48, .65));
  }
  .hgs-gallery-overlay span {
    font-size: 11px;
    line-height: 16px;
  }
  .hgs-gallery-view {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }
  /* LIGHTBOX */
  .hgs-lightbox {
    padding: 15px;
  }
  .hgs-lightbox-content {
    height: 85vh;
  }
  .hgs-lightbox-image {
    max-width: 100%;
    max-height: 75vh;
  }
  .hgs-lightbox-close {
    top: 15px;
    right: 15px;
    width: 42px;
    height: 42px;
  }
  .hgs-lightbox-prev, .hgs-lightbox-next {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
  .hgs-lightbox-prev {
    left: 10px;
  }
  .hgs-lightbox-next {
    right: 10px;
  }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 450px) {
  .hgs-gallery-grid {
    grid-auto-rows: 150px;
    gap: 8px;
  }
}
/* =========================================================
   HGS FACULTY V2
========================================================= */
.hgs-faculty-v2 {
  position: relative;
  padding: 50px 20px;
  background: #fff;
  overflow: hidden;
}
.hgs-faculty-v2-container {
  margin: auto;
}
/* =========================================================
   HEADING
========================================================= */
.hgs-faculty-v2-heading {
  position: relative;
  max-width: 700px;
  margin-bottom: 65px;
}
.hgs-faculty-v2-heading > span {
  display: block;
  margin-bottom: 10px;
  color: #046a58;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-faculty-v2-heading h2 {
  margin: 0;
  color: #1b325c;
  font-size: 48px;
  line-height: 1.15;
  font-weight: 600;
}
.hgs-faculty-v2-heading h2 em {
  color: #046a58;
  font-style: normal;
}
.hgs-faculty-v2-heading-line {
  width: 65px;
  height: 3px;
  margin-top: 22px;
  background: #f2b45d;
}
/* =========================================================
   MAIN
========================================================= */
.hgs-faculty-v2-main {
  display: grid;
  grid-template-columns: 48% 46%;
  align-items: center;
  gap: 70px;
}
/* =========================================================
   IMAGE
========================================================= */
.hgs-faculty-v2-image-wrap {
  position: relative;
  padding: 0 25px 25px 0;
}
.hgs-faculty-v2-image {
  position: relative;
  height: 450px;
  overflow: hidden;
  border-radius: 180px 180px 8px 8px;
  z-index: 2;
}
.hgs-faculty-v2-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .7s ease;
}
.hgs-faculty-v2-image:hover img {
  transform: scale(1.04);
}
/* =========================================================
   CONTENT
========================================================= */
.hgs-faculty-v2-content {
  padding-right: 20px;
}
.hgs-faculty-v2-content p {
  margin: 0 0 20px;
  color: #5c6670;
  font-size: 16px;
  line-height: 27px;
}
.hgs-faculty-v2-intro p {
  color: #37434c;
  font-size: 16px;
  line-height: 30px;
}
.hgs-faculty-v2-content strong {
  color: #1b325c;
}
/* DIVIDER */
.hgs-faculty-v2-divider {
  width: 100%;
  height: 1px;
  margin: 25px 0;
  background: #dfe4e1;
}
/* =========================================================
   HIGHLIGHTS
========================================================= */
.hgs-faculty-v2-highlights {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
  margin-top: 30px;
  background: #ffffff;
  border: 1px solid #e9edeb;
}
.hgs-faculty-v2-highlight {
  min-height: 115px;
  padding: 20px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid #e9edeb;
}
.hgs-faculty-v2-highlight:last-child {
  border-right: 0;
}
.hgs-faculty-v2-highlight strong {
  margin-bottom: 5px;
  color: #046a58;
  font-size: 20px;
  line-height: 25px;
}
.hgs-faculty-v2-highlight span {
  color: #7a8288;
  font-size: 11px;
  line-height: 17px;
}
/* =========================================================
   BOTTOM
========================================================= */
.hgs-faculty-v2-bottom {
  display: grid;
  grid-template-columns: 49% 46%;
  gap: 60px;
  margin-top: 7px;
  padding-top: 25px;
}
.hgs-faculty-v2-bottom-title > span {
  display: block;
  margin-bottom: 12px;
  color: #046a58;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-faculty-v2-bottom-title h3 {
  margin: 0;
  color: #1b325c;
  font-size: 30px;
  line-height: 40px;
  font-weight: 600;
}
.hgs-faculty-v2-bottom-title h3 em {
  color: #046a58;
  font-style: normal;
}
.hgs-faculty-v2-bottom-text p {
  margin: 0 0 18px;
  color: #5c6670;
  font-size: 16px;
  line-height: 26px;
}
/* =========================================================
   DEVELOPMENT
========================================================= */
.hgs-faculty-v2-development {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 45px;
  padding: 22px 25px;
  background: #1b325c;
  color: #ffffff;
}
.hgs-faculty-v2-development-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #046a58;
  font-size: 17px;
}
.hgs-faculty-v2-development strong {
  display: block;
    margin-bottom: 0px;
    color: #ffffff;
    line-height: 26px;
    font-size: 18px;
}
.hgs-faculty-v2-development p {
  margin: 0;
  color: rgba(255, 255, 255, .7);
  font-size: 15px;
  line-height: 20px;
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991px) {
  .hgs-faculty-v2 {
    padding: 75px 20px;
  }
  .hgs-faculty-v2-heading h2 {
    font-size: 40px;
  }
  .hgs-faculty-v2-main {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .hgs-faculty-v2-image {
    height: 520px;
  }
  .hgs-faculty-v2-bottom {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767px) {
  .hgs-faculty-v2 {
    padding: 35px 0px;
  }
  .hgs-faculty-v2-heading {
    margin-bottom: 45px;
  }
  .hgs-faculty-v2-heading h2 {
    font-size: 32px;
    line-height: 40px;
  }
  .hgs-faculty-v2-image-wrap {
    padding-right: 12px;
    padding-bottom: 12px;
  }
  .hgs-faculty-v2-image {
    height: 430px;
    border-radius:
      120px 120px 8px 8px;
  }
  .hgs-faculty-v2-intro p {
    font-size: 16px;
    line-height: 27px;
  }
  .hgs-faculty-v2-content p {
    font-size: 15px;
    line-height: 25px;
  }
  .hgs-faculty-v2-highlights {
    grid-template-columns: 1fr;
  }
  .hgs-faculty-v2-highlight {
    min-height: auto;
    padding: 16px 20px;
    border-right: 0;
    border-bottom: 1px solid #e9edeb;
  }
  .hgs-faculty-v2-highlight:last-child {
    border-bottom: 0;
  }
  .hgs-faculty-v2-bottom {
    
    padding-top: 40px;
  }
  .hgs-faculty-v2-bottom-title h3 {
    font-size: 26px;
    line-height: 35px;
  }
}
/* =========================================================
   HGS SCHOOL POLICIES
========================================================= */
.hgs-policies-page {
  padding: 50px 20px;
  background: #f7f8f5;
}
.hgs-policies-wrap {
  max-width: 1180px;
  margin: auto;
}
/* =========================================================
   HERO
========================================================= */
.hgs-policies-hero {
  min-height: 300px;
  padding: 55px 60px;
  margin-bottom: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  overflow: hidden;
  background: #1b325c;
}
.hgs-policies-hero::after {
  content: "";
  position: absolute;
  right: -100px;
  top: -150px;
  width: 400px;
  height: 400px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 50%;
}
.hgs-policies-hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}
.hgs-policies-kicker {
  display: block;
  margin-bottom: 14px;
  color: #f2b45d;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-policies-hero h1 {
  margin: 0 0 15px;
  color: #ffffff;
  font-size: 48px;
  line-height: 1.15;
  font-weight: 600;
}
.hgs-policies-hero h1 span {
  color: #77b8a6;
}
.hgs-policies-hero p {
  max-width: 620px;
  margin: 0;
  color: rgba(255, 255, 255, .75);
  font-size: 16px;
  line-height: 27px;
}
.hgs-policies-hero-number {
  position: relative;
  z-index: 2;
  width: 150px;
  height: 150px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
}
.hgs-policies-hero-number span {
  color: rgba(255, 255, 255, .55);
  font-size: 9px;
  letter-spacing: 2px;
}
.hgs-policies-hero-number strong {
  color: #ffffff;
  font-size: 48px;
  line-height: 55px;
}
/* =========================================================
   JOURNEY
========================================================= */
.hgs-policy-journey {
  position: relative;
}
.hgs-policy-journey::before {
  content: "";
  position: absolute;
  left: 29px;
  top: 20px;
  bottom: 20px;
  width: 1px;
  background: #cfdcd7;
}
/* =========================================================
   ROW
========================================================= */
.hgs-policy-row {
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 35px;
  padding-top: 40px;
  margin-bottom: 50px;
}
.hgs-policy-side {
  position: relative;
  z-index: 3;
}
.hgs-policy-side > span {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #046a58;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  box-shadow:
    0 0 0 8px #f7f8f5;
}
.hgs-policy-side-line {
  display: none;
}
/* =========================================================
   CARD
========================================================= */
.hgs-policy-card {
  position: relative;
  padding: 38px 42px;
  background: #ffffff;
  border: 1px solid #e3e9e6;
  box-shadow:
    0 12px 35px rgba(20, 50, 70, .055);
  transition:
    transform .3s ease, box-shadow .3s ease;
  border-radius: 25px;
}
.hgs-policy-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 18px 45px rgba(20, 50, 70, .09);
}
/* =========================================================
   CARD HEADER
========================================================= */
.hgs-policy-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 25px;
}
.hgs-policy-small {
  display: block;
  margin-bottom: 8px;
  color: #046a58;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-policy-card h2 {
  margin: 0;
  color: #1b325c;
  font-size: 30px;
  line-height: 39px;
  font-weight: 600;
}
.hgs-policy-icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef6f3;
  color: #046a58;
  font-size: 18px;
}
/* =========================================================
   TEXT
========================================================= */
.hgs-policy-card > p {
  margin: 0 0 20px;
  color: #5e6870;
  font-size: 16px;
  line-height: 27px;
}
.hgs-policy-card strong {
  color: #1b325c;
}
/* =========================================================
   POINT
========================================================= */
.hgs-policy-point {
  display: flex;
  gap: 15px;
  padding: 18px 20px;
  border-radius: 15px;
  background: #f5f8f6;
}
.hgs-policy-point > span {
  color: #046a58;
  font-size: 12px;
  font-weight: 700;
}
.hgs-policy-point p {
  margin: 0;
  color: #667078;
  font-size: 14px;
  line-height: 23px;
}
/* =========================================================
   GREEN CARD
========================================================= */
.hgs-green-card {
  border-top: 4px solid #046a58;
}
.hgs-blue-card {
  border-top: 4px solid #1b325c;
}
/* =========================================================
   MINI GRID
========================================================= */
.hgs-policy-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 25px 0;
  border: 1px solid #e5ebe8;
}
.hgs-policy-mini-grid div {
  padding: 18px;
  border-right: 1px solid #e5ebe8;
}
.hgs-policy-mini-grid div:last-child {
  border-right: 0;
}
.hgs-policy-mini-grid strong {
  display: block;
  margin-bottom: 5px;
  color: #046a58;
  font-size: 18px;
}
.hgs-policy-mini-grid span {
  color: #717b82;
  font-size: 16px;
  font-weight: 700;
  padding-top: 14px;
}
/* =========================================================
   LIST
========================================================= */
.hgs-policy-card ul {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.hgs-policy-card li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 22px;
  color: #5e6870;
  font-size: 16px;
  line-height: 25px;
}
.hgs-policy-card li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f2b45d;
}
/* =========================================================
   WARNING
========================================================= */
.hgs-policy-warning {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 25px;
  padding: 17px 20px;
  background: #fff7e9;
  border-left: 3px solid #f2b45d;
}
.hgs-policy-warning i {
  color: #d99a3d;
  margin-top: 3px;
}
.hgs-policy-warning p {
  margin: 0;
  color: #665943;
  font-size: 16px;
  line-height: 23px;
}
/* =========================================================
   TRIP BOX
========================================================= */
.hgs-policy-trip-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 25px 0;
}
.hgs-trip-item {
  padding: 22px 16px;
  background: #f5f8f6;
  border-radius: 20px;
  text-align: center;
}
.hgs-trip-item i {
  display: block;
  margin-bottom: 22px;
  color: #046a58;
  font-size: 33px;
}
.hgs-trip-item strong {
  display: block;
  margin-bottom: 11px;
  color: #1b325c;
  font-size: 16px;
}
.hgs-trip-item span {
  display: block;
  color: #7a8389;
  font-size: 15px;
  padding-top: px;
  padding-top: 8px;
  line-height: 17px;
}
/* =========================================================
   TIMING
========================================================= */
.hgs-policy-timing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 35px;
  margin: 25px 0;
  padding: 24px;
  background: #eef6f3;
}
.hgs-policy-timing div:not(.hgs-policy-arrow) {
  text-align: center;
}
.hgs-policy-timing span {
  display: block;
  margin-bottom: 11px;
  color: #718078;
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 700;
}
.hgs-policy-timing strong {
  display: block;
  padding-bottom: 23px;
  color: #046a58;
  /* padding: 10px; */
  font-size: 22px;
}
.hgs-policy-timing small {
  color: #7a8389;
  font-size: 10px;
}
.hgs-policy-arrow {
  color: #f2b45d;
  font-size: 24px;
}
/* =========================================================
   INFO
========================================================= */
.hgs-policy-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 25px 0;
  border-radius: 25px;
  border: 1px solid #e2e8e5;
}
.hgs-policy-info div {
  padding: 22px;
}
.hgs-policy-info div + div {
  border-left: 1px solid #e2e8e5;
}
.hgs-policy-info span {
  display: block;
  margin-bottom: 7px;
  color: #046a58;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.hgs-policy-info strong {
  font-size: 15px;
  line-height: 21px;
}
/* =========================================================
   NOTE
========================================================= */
.hgs-policy-note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-radius: 25px;
  background: #f5f7f6;
}
.hgs-policy-note i {
  color: #046a58;
}
.hgs-policy-note span {
  color: #69737a;
  font-size: 13px;
  line-height: 21px;
}
/* =========================================================
   LEAVE GRID
========================================================= */
.hgs-leave-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-top: 30px;
}
.hgs-leave-item {
  position: relative;
  padding: 25px;
  background: #f5f8f6;
  border: 1px solid #e3eae7;
  border-radius: 25px;
}
.hgs-leave-item > span {
  display: block;
  margin-bottom: 12px;
  color: #046a58;
  font-size: 11px;
  font-weight: 700;
}
.hgs-leave-item h3 {
  margin: 0 0 10px;
  color: #1b325c;
  font-size: 18px;
}
.hgs-leave-item p {
  margin: 0;
  color: #69737a;
  font-size: 15px;
  line-height: 22px;
}
/* =========================================================
   FINAL NOTE
========================================================= */
.hgs-policy-final-note {
  margin-top: 25px;
  padding: 25px;
  border-radius: 25px;
  background: #1b325c;
}
.hgs-policy-final-note strong {
  display: block;
  margin-bottom: 25px;
  color: #f2b45d;
  font-size: 17px;
}
.hgs-policy-final-note p {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, .78);
  font-size: 16px;
  line-height: 23px;
}
.hgs-policy-final-note p:last-child {
  margin-bottom: 0;
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767px) {
  .hgs-policies-page {
    padding: 60px 15px;
  }
  .hgs-policies-hero {
    min-height: auto;
    padding: 40px 25px;
    margin-bottom: 50px;
    display: block;
  }
  .hgs-policies-hero h1 {
    font-size: 36px;
  }
  .hgs-policies-hero-number {
    width: 90px;
    height: 90px;
    margin-top: 30px;
  }
  .hgs-policies-hero-number strong {
    font-size: 30px;
    line-height: 35px;
  }
  .hgs-policy-journey::before {
    left: 19px;
  }
  .hgs-policy-row {
    grid-template-columns: 40px 1fr;
    gap: 15px;
    margin-bottom: 30px;
  }
  .hgs-policy-side > span {
    width: 40px;
    height: 40px;
    font-size: 10px;
    box-shadow:
      0 0 0 6px #f7f8f5;
  }
  .hgs-policy-card {
    padding: 25px 20px;
  }
  .hgs-policy-card h2 {
    font-size: 25px;
    line-height: 33px;
  }
  .hgs-policy-icon {
    width: 42px;
    height: 42px;
    font-size: 15px;
  }
  .hgs-policy-card > p {
    font-size: 15px;
    line-height: 25px;
  }
  .hgs-policy-mini-grid {
    grid-template-columns: 1fr;
  }
  .hgs-policy-mini-grid div {
    border-right: 0;
    border-bottom: 1px solid #e5ebe8;
  }
  .hgs-policy-mini-grid div:last-child {
    border-bottom: 0;
  }
  .hgs-policy-trip-box {
    grid-template-columns: 1fr;
  }
  .hgs-policy-timing {
    gap: 15px;
    padding: 18px;
  }
  .hgs-policy-info {
    grid-template-columns: 1fr;
  }
  .hgs-policy-info div + div {
    border-left: 0;
    border-top: 1px solid #e2e8e5;
  }
  .hgs-leave-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   HGS — WHY HERITAGE GIRLS SCHOOL
   Colour palette inspired by reference
========================================================= */
.hgs-difference {
  padding: 40px 20px;
  background: #fafafa;
  overflow: hidden;
}
.hgs-difference-container {
  max-width: 1200px;
  margin: auto;
}
/* =========================================================
   COLOURS
========================================================= */ :root {
  --hgs-purple: #7a78c8;
  --hgs-pink: #df8797;
  --hgs-orange: #f2b45f;
  --hgs-teal: #64b5a9;
  --hgs-dark: #111820;
  --hgs-text: #626b72;
  --hgs-light: #f5f6f7;
}
/* =========================================================
   HERO
========================================================= */
.hgs-difference-hero {
  min-height: 600px;
  display: grid;
  grid-template-columns: 48% 52%;
  align-items: center;
  margin-bottom: 30px;
}
.hgs-difference-hero-text {
  padding-right: 20px;
}
.hgs-eyebrow {
  display: block;
  margin-bottom: 18px;
  color: var(--hgs-purple);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-difference-hero h1 {
  margin: 0 0 25px;
  color: var(--hgs-dark);
  font-size: 60px;
  line-height: 1.05;
  font-weight: 500;
}
.hgs-difference-hero h1 strong {
  color: var(--hgs-pink);
  font-weight: 600;
}
.hgs-difference-hero p {
  margin: 0;
  color: var(--hgs-text);
  font-size: 16px;
  line-height: 29px;
  margin-top: 16px;
}
/* =========================================================
   HERO VISUAL
========================================================= */
.hgs-difference-visual {
  position: relative;
  height: 570px;
}
.hgs-hero-photo {
  position: absolute;
  right: 30px;
  top: 0;
  width: 78%;
  height: 520px;
  overflow: hidden;
  border-radius: 25px;
  z-index: 2;
}
.hgs-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ORBS */
.hgs-colour-orb {
  position: absolute;
  border-radius: 50%;
}
.orb-orange {
  width: 65px;
  height: 65px;
  right: 40px;
  bottom: 15px;
  background: var(--hgs-orange);
}
/* LABEL */
.hgs-hero-label {
  position: absolute;
  z-index: 5;
  left: 0;
  bottom: 60px;
  width: 155px;
  height: 155px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--hgs-teal);
  border-radius: 50%;
  color: #ffffff;
  text-align: center;
}
.hgs-hero-label span {
  font-size: 15px;
  letter-spacing: 4px;
}
.hgs-hero-label strong {
  margin-top: 13px;
  font-size: 21px;
}
.hgs-hero-label small {
  font-size: 12px;
  padding-top: 21px;
}
/* =========================================================
   FOUR COLOUR VALUES
========================================================= */
.hgs-colour-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-bottom: 40px;
}
.hgs-colour-value {
  position: relative;
  min-height: 220px;
  padding: 30px;
  overflow: hidden;
  background: #ffffff;
  border-right: 1px solid #eeeeee;
  border-radius: 25px;
}
.hgs-colour-value:last-child {
  border-right: 0;
}
.hgs-colour-value::after {
  content: "";
  position: absolute;
  right: -35px;
  top: -35px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  opacity: .12;
}
.hgs-colour-value.purple {
  border-top: 5px solid var(--hgs-purple);
}
.hgs-colour-value.pink {
  border-top: 5px solid var(--hgs-pink);
}
.hgs-colour-value.orange {
  border-top: 5px solid var(--hgs-orange);
}
.hgs-colour-value.teal {
  border-top: 5px solid var(--hgs-teal);
}
.hgs-colour-value.purple::after {
  background: var(--hgs-purple);
}
.hgs-colour-value.pink::after {
  background: var(--hgs-pink);
}
.hgs-colour-value.orange::after {
  background: var(--hgs-orange);
}
.hgs-colour-value.teal::after {
  background: var(--hgs-teal);
}
.hgs-colour-value > span {
  display: block;
  margin-bottom: 25px;
  color: #b5b9bd;
  font-size: 18px;
  font-weight: 700;
}
.hgs-colour-value h3 {
  margin: 0 0 10px;
  color: var(--hgs-dark);
  font-size: 26px;
}
.hgs-colour-value p {
  max-width: 180px;
  margin: 0;
  color: var(--hgs-text);
  font-size: 16px;
  line-height: 29px;
}
/* =========================================================
   INTRO
========================================================= */
.hgs-difference-intro {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 50px;
  max-width: 1000px;
  margin: 0 auto 110px;
  padding-bottom: 70px;
  border-bottom: 1px solid #dddddd;
}
.hgs-intro-number {
  color: var(--hgs-purple);
  font-size: 50px;
  font-weight: 600;
}
.hgs-intro-content > span {
  color: var(--hgs-pink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-intro-content h2 {
  margin: 12px 0 25px;
  color: var(--hgs-dark);
  font-size: 42px;
  line-height: 1.1;
}
.hgs-intro-content h2 em {
  color: var(--hgs-purple);
  font-style: normal;
}
.hgs-intro-content p {
  max-width: 850px;
  margin: 0 0 17px;
  color: var(--hgs-text);
  font-size: 16px;
  line-height: 28px;
}
/* =========================================================
   EVERY I MATTERS
========================================================= */
.hgs-i-matters {
  display: grid;
  grid-template-columns: 48% 52%;
  min-height: 480px;
  margin-bottom: 45px;
}
.hgs-i-matters-big {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px;
  background: var(--hgs-purple);
  color: #ffffff;
  border-radius: 25px 0px 0px 25px;
}
.hgs-i-matters-big span {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 3px;
}
.hgs-i-matters-big strong {
  margin: 5px 0;
  color: #ffffff;
  font-family: Georgia, serif;
  font-size: 150px;
  line-height: .8;
  font-weight: 400;
}
.hgs-i-matters-text {
  padding: 65px;
  background: #ffffff;
  border-radius: 0px 25px 25px 0px;
}
.hgs-i-matters-text > span {
  display: block;
  margin-bottom: 25px;
  color: var(--hgs-purple);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-i-matters-text p {
  margin: 0 0 20px;
  color: var(--hgs-text);
  font-size: 16px;
  line-height: 27px;
}
/* =========================================================
   LEADERSHIP
========================================================= */
.hgs-leadership {
  display: grid;
  grid-template-columns: 65% 35%;
  min-height: 450px;
  margin-bottom: 45px;
}
.hgs-leadership-content {
  padding: 65px;
  background: #ffffff;
  border-radius: 25px 0px 0px 25px;
}
.hgs-leadership-content > span {
  color: var(--hgs-pink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-leadership-content h2 {
  margin: 15px 0 25px;
  color: var(--hgs-dark);
  font-size: 30px;
  line-height: 1.08;
}
.hgs-leadership-content h2 em {
  color: var(--hgs-pink);
  font-style: normal;
}
.hgs-leadership-content p {
  max-width: 700px;
  margin: 0 0 18px;
  color: var(--hgs-text);
  font-size: 16px;
  line-height: 27px;
}
.hgs-leadership-word {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hgs-pink);
  overflow: hidden;
  border-radius: 0px 25px 25px 0px;
}
.hgs-leadership-word span {
  color: rgba(255, 255, 255, .35);
  font-size: 100px;
  font-weight: 700;
  transform: rotate(-90deg);
}
/* =========================================================
   RESPECT
========================================================= */
.hgs-respect-section {
  display: grid;
  grid-template-columns: 35% 65%;
  margin-bottom: 45px;
}
.hgs-respect-title {
  padding: 60px;
  background: var(--hgs-orange);
  border-radius: 25px 0px 0px 25px;
}
.hgs-respect-title span {
  color: rgba(17, 24, 32, .55);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-respect-title h2 {
  margin: 20px 0 0;
  color: var(--hgs-dark);
  font-size: 30px;
  line-height: 1.1;
}
.hgs-respect-content {
  padding: 60px;
  background: #f7f8f8;
  border-radius: 0px 25px 25px 0px;
}
.hgs-respect-content p {
  margin: 0 0 18px;
  color: var(--hgs-text);
  font-size: 16px;
  line-height: 28px;
}
.hgs-respect-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
}
.hgs-respect-tags span {
  padding: 6px 16px;
  border: 1px solid #dddddd;
  color: var(--hgs-dark);
  font-size: 16px;
  border-radius: 25px;
}
/* =========================================================
   SKILLS
========================================================= */
.hgs-skills-section {
  margin-bottom: 45px;
}
.hgs-skills-heading {
  margin-bottom: 40px;
}
.hgs-skills-heading span {
  color: var(--hgs-teal);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-skills-heading h2 {
  margin: 12px 0 0;
  color: var(--hgs-dark);
  font-size: 44px;
}
.hgs-skills-heading h2 em {
  color: var(--hgs-teal);
  font-style: normal;
}
.hgs-skills-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
.hgs-skills-list > div {
  padding: 35px 25px;
  border-right: 1px solid #dddddd;
}
.hgs-skills-list > div:last-child {
  border-right: 0;
}
.hgs-skills-list b {
  display: block;
  margin-bottom: 25px;
  color: var(--hgs-teal);
  font-size: 13px;
}
.hgs-skills-list strong {
  display: block;
  margin-bottom: 8px;
  color: var(--hgs-dark);
  font-size: 19px;
}
.hgs-skills-list p {
  margin: 0;
  color: var(--hgs-text);
  font-size: 16px;
  margin-top: 20px;
  line-height: 22px;
  ;
}
/* =========================================================
   WELL ROUNDED
========================================================= */
.hgs-well-rounded {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 45px;
  margin-bottom: 45px;
  padding: 70px;
  background: var(--hgs-teal);
  border-radius: 25px;
}
.hgs-well-rounded-number {
  color: rgba(255, 255, 255, .45);
  font-size: 50px;
  font-weight: 600;
}
.hgs-well-rounded span {
  color: rgba(255, 255, 255, .65);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-well-rounded h2 {
  margin: 15px 0 25px;
  color: #ffffff;
  font-size: 30px;
  line-height: 1.05;
}
.hgs-well-rounded h2 em {
  color: #ffffff;
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: var(--hgs-orange);
}
.hgs-well-rounded p {
  max-width: 750px;
  margin: 0 0 17px;
  color: rgba(255, 255, 255, .82);
  font-size: 16px;
  line-height: 27px;
}
/* =========================================================
   GLOBAL
========================================================= */
.hgs-global {
  display: grid;
  grid-template-columns: 42% 58%;
  margin-bottom: 45px;
  background: #ffffff;
}
.hgs-global-left {
  padding: 65px;
  background: var(--hgs-purple);
  border-radius: 25px 0px 0px 25px;
}
.hgs-global-left > span {
  color: rgba(255, 255, 255, .65);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-global-left h2 {
  margin: 20px 0 0;
  color: #ffffff;
  font-size: 30px;
  line-height: 1.4;
}
.hgs-global-left h2 em {
  color: #ffffff;
  font-style: normal;
}
.hgs-global-right {
  padding: 65px;
  border-radius: 25px 0px 0px 25px;
}
.hgs-global-right p {
  margin: 0 0 18px;
  color: var(--hgs-text);
  font-size: 16px;
  line-height: 27px;
}
/* =========================================================
   FINAL
========================================================= */
.hgs-final {
  position: relative;
  padding: 85px 30px;
  overflow: hidden;
  background: var(--hgs-dark);
  text-align: center;
  border-radius: 25px;
}
.hgs-final-circle {
  position: absolute;
  width: 300px;
  height: 300px;
  right: -100px;
  top: -100px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
}
.hgs-final > span {
  color: var(--hgs-orange);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-final h2 {
  position: relative;
  margin: 15px 0;
  color: #ffffff;
  font-size: 30px;
  line-height: 1.05;
}
.hgs-final h2 em {
  color: var(--hgs-pink);
  font-style: normal;
}
.hgs-final p {
  position: relative;
  max-width: 650px;
  margin: 0 auto 12px;
  color: rgba(255, 255, 255, .65);
  font-size: 16px;
  line-height: 26px;
}
.hgs-final-line {
  width: 50px;
  height: 2px;
  margin: 30px auto;
  background: var(--hgs-orange);
}
.hgs-final strong {
  position: relative;
  color: #ffffff;
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 400;
}
/* =========================================================
   TABLET
========================================================= */
@media(max-width:991px) {
  .hgs-difference-hero {
    grid-template-columns: 1fr;
  }
  .hgs-difference-hero-text {
    padding: 0 0 50px;
  }
  .hgs-colour-values {
    grid-template-columns: repeat(2, 1fr);
  }
  .hgs-colour-value:nth-child(2) {
    border-right: 0;
  }
  .hgs-i-matters, .hgs-leadership, .hgs-respect-section, .hgs-global {
    grid-template-columns: 1fr;
  }
  .hgs-skills-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .hgs-skills-list > div:nth-child(2) {
    border-right: 0;
  }
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width:767px) {
  .hgs-difference {
    padding: 55px 15px;
  }
  .hgs-difference-hero h1 {
    font-size: 40px;
  }
  .hgs-difference-hero p {
    font-size: 16px;
  }
  .hgs-difference-visual {
    height: 400px;
  }
  .hgs-hero-photo {
    right: 0;
    width: 90%;
    height: 370px;
    border-radius: 100px 0 100px 0;
  }
  .hgs-hero-label {
    width: 115px;
    height: 115px;
    left: 0;
    bottom: 20px;
  }
  .hgs-hero-label strong {
    font-size: 15px;
  }
  .hgs-colour-values {
    grid-template-columns: 1fr;
    margin-bottom: 60px;
  }
  .hgs-colour-value {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid #eeeeee;
  }
  .hgs-difference-intro {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 60px;
  }
  .hgs-i-matters {
    margin-bottom: 60px;
  }
  .hgs-i-matters-big {
    min-height: 300px;
    padding: 35px;
  }
  .hgs-i-matters-big strong {
    font-size: 100px;
  }
  .hgs-i-matters-text {
    padding: 35px 25px;
  }
  .hgs-leadership {
    margin-bottom: 60px;
  }
  .hgs-leadership-content {
    padding: 35px 25px;
  }
  .hgs-leadership-content h2 {
    font-size: 35px;
  }
  .hgs-leadership-word {
    min-height: 200px;
  }
  .hgs-respect-section {
    margin-bottom: 60px;
  }
  .hgs-respect-title, .hgs-respect-content {
    padding: 35px 25px;
  }
  .hgs-skills-section {
    margin-bottom: 60px;
  }
  .hgs-skills-heading h2 {
    font-size: 35px;
  }
  .hgs-skills-list {
    grid-template-columns: 1fr;
  }
  .hgs-skills-list > div {
    border-right: 0;
    border-bottom: 1px solid #dddddd;
  }
  .hgs-well-rounded {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 60px;
    padding: 40px 25px;
  }
  .hgs-well-rounded h2 {
    font-size: 38px;
  }
  .hgs-global {
    margin-bottom: 60px;
  }
  .hgs-global-left, .hgs-global-right {
    padding: 40px 25px;
  }
  .hgs-global-left h2 {
    font-size: 38px;
  }
  .hgs-final {
    padding: 60px 20px;
  }
  .hgs-final h2 {
    font-size: 38px;
  }
}
/* =========================================================
   SECTION TITLE
========================================================= */
.hgs-title {
  margin-bottom: 20px;
}
.hgs-title span {
  display: block;
  margin-bottom: 12px;
  color: var(--purple);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-title h2 {
  font-size: 38px;
  line-height: 1.15;
  font-weight: 500;
}
.hgs-title h2 em {
  color: var(--pink);
  font-style: normal;
}
.hgs-title p {
  max-width: 750px;
  margin-top: 15px;
  color: var(--text);
  font-size: 16px;
  line-height: 28px;
}
/* =========================================================
   INTRODUCTION
========================================================= */
.hgs-admission-intro {
  padding: 100px 0 80px;
}
.hgs-intro-layout {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 55px;
  align-items: start;
}
.hgs-intro-number {
  position: sticky;
  top: 100px;
  color: var(--purple);
  font-size: 72px;
  line-height: 1;
  font-weight: 600;
  opacity: .18;
}
.hgs-intro-content {
  max-width: 850px;
}
.hgs-intro-content .small-label {
  display: block;
  margin-bottom: 12px;
  color: var(--purple);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-intro-content h1 {
  margin-bottom: 25px;
  font-size: 42px;
  line-height: 1.1;
  font-weight: 500;
}
.hgs-intro-content h1 span {
  color: var(--pink);
}
.hgs-intro-content p {
  margin-bottom: 20px;
  color: var(--text);
  font-size: 16px;
  line-height: 29px;
}
/* =========================================================
   ADMISSION JOURNEY
========================================================= */
.hgs-journey-section {
  padding: 80px 0 100px;
  background: var(--white);
}
.hgs-journey {
  position: relative;
  max-width: 950px;
  margin: auto;
}
.hgs-journey-line {
  position: absolute;
  left: 34px;
  top: 35px;
  bottom: 35px;
  width: 2px;
  background:
    linear-gradient(to bottom, var(--purple), var(--pink), var(--orange), var(--teal));
}
.hgs-journey-item {
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 30px;
  margin-bottom: 35px;
}
.hgs-journey-item:last-child {
  margin-bottom: 0;
}
.hgs-journey-number {
  position: relative;
  z-index: 2;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--purple);
  color: var(--purple);
  font-size: 13px;
  font-weight: 700;
  transition: .4s ease;
}
.hgs-journey-item:nth-child(3) .hgs-journey-number {
  border-color: var(--pink);
  color: var(--pink);
}
.hgs-journey-item:nth-child(4) .hgs-journey-number {
  border-color: var(--orange);
  color: #bd883e;
}
.hgs-journey-item:nth-child(5) .hgs-journey-number {
  border-color: var(--teal);
  color: var(--teal);
}
.hgs-journey-card {
  position: relative;
  padding: 32px 35px;
  background: #fff;
  border: 1px solid var(--border);
  transition: .4s ease;
  overflow: hidden;
}
.hgs-journey-card::after {
  content: "";
  position: absolute;
  right: -55px;
  top: -55px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--purple);
  opacity: .06;
  transition: .4s ease;
}
.hgs-journey-item:nth-child(3) .hgs-journey-card::after {
  background: var(--pink);
}
.hgs-journey-item:nth-child(4) .hgs-journey-card::after {
  background: var(--orange);
}
.hgs-journey-item:nth-child(5) .hgs-journey-card::after {
  background: var(--teal);
}
.hgs-journey-card:hover {
  transform: translateX(10px);
  box-shadow:
    0 20px 50px rgba(20, 30, 40, .08);
}
.hgs-journey-card:hover::after {
  transform: scale(1.4);
}
.hgs-journey-card small {
  display: block;
  margin-bottom: 9px;
  color: #999;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-journey-card h3 {
  margin-bottom: 12px;
  font-size: 25px;
  font-weight: 500;
}
.hgs-journey-card p {
  max-width: 720px;
  color: var(--text);
  font-size: 15px;
  line-height: 26px;
}
/* =========================================================
   IMPORTANT NOTICE
========================================================= */
.hgs-important {
  margin: 70px auto;
  padding: 28px 35px;
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff8eb;
  border-left: 4px solid var(--orange);
}
.hgs-important-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}
.hgs-important span {
  display: block;
  margin-bottom: 5px;
  color: #b27c32;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-important h3 {
  font-size: 18px;
  font-weight: 500;
}
/* =========================================================
   CLASS XI
========================================================= */
.hgs-class-xi {
  padding: 90px 0;
  background: var(--dark);
  color: #fff;
}
.hgs-class-xi-box {
  display: grid;
  grid-template-columns: 150px 1fr 100px;
  align-items: stretch;
  min-height: 220px;
}
.hgs-class-number {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pink);
  font-size: 52px;
  font-weight: 600;
}
.hgs-class-content {
  padding: 45px 50px;
  background: #171f27;
}
.hgs-class-content small {
  display: block;
  margin-bottom: 12px;
  color: var(--pink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-class-content h2 {
  margin-bottom: 15px;
  font-size: 32px;
  font-weight: 500;
}
.hgs-class-content p {
  max-width: 700px;
  color: rgba(255, 255, 255, .68);
  font-size: 15px;
  line-height: 26px;
}
.hgs-class-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  font-size: 50px;
}
/* =========================================================
   ACADEMIC SESSION
========================================================= */
.hgs-academic {
  padding: 100px 0;
}
.hgs-academic-layout {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 70px;
  align-items: center;
}
.hgs-academic-heading h2 {
  margin-bottom: 20px;
  font-size: 40px;
  font-weight: 500;
}
.hgs-academic-heading h2 em {
  color: var(--teal);
  font-style: normal;
}
.hgs-academic-heading p {
  color: var(--text);
  font-size: 16px;
  line-height: 28px;
}
.hgs-terms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.hgs-term {
  position: relative;
  min-height: 210px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  border-top: 4px solid var(--purple);
  box-shadow:
    0 15px 40px rgba(20, 30, 40, .05);
  transition: .4s ease;
}
.hgs-term:nth-child(2) {
  border-color: var(--pink);
}
.hgs-term:hover {
  transform: translateY(-10px);
}
.hgs-term-number {
  color: #ddd;
  font-size: 30px;
  font-weight: 700;
}
.hgs-term small {
  color: #999;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-term h3 {
  margin-top: 8px;
  font-size: 21px;
  font-weight: 500;
}
.hgs-term h3 span {
  display: block;
  margin: 4px 0;
  color: var(--purple);
  font-size: 12px;
}
/* =========================================================
   WITHDRAWALS
========================================================= */
.hgs-withdrawals {
  padding: 40px 0;
  background: #fff;
}
.hgs-withdrawal-layout {
  display: grid;
  grid-template-columns: 35% 65%;
}
.hgs-withdrawal-heading {
  padding: 55px 45px;
  background: var(--purple);
  border-radius: 25px 0px 0px 25px;
  color: #fff;
}
.hgs-withdrawal-heading .red {
  padding: 55px 45px;
  background: var(--hgs-pink);
  color: #fff;
}
.hgs-withdrawal-heading small {
  color: rgba(255, 255, 255, .7);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-withdrawal-heading h2 {
  margin-top: 15px;
  font-size: 30px;
  font-weight: 500;
}
.hgs-withdrawal-content {
  padding: 45px;
  border-radius: 0px 25px 25px 0px;
  background: var(--light);
}
.hgs-withdrawal-content > p {
  margin-bottom: 30px;
  color: var(--text);
  font-size: 16px;
  line-height: 28px;
}
.hgs-withdrawal-point {
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 15px;
  padding: 17px 0;
  border-bottom: 1px solid #ddd;
}
.hgs-withdrawal-point:last-child {
  border-bottom: 0;
}
.hgs-withdrawal-point b {
  color: var(--pink);
  font-size: 12px;
}
.hgs-withdrawal-point p {
  color: var(--text);
  font-size: 16px;
  line-height: 24px;
}
/* =========================================================
   FEES
========================================================= */
.hgs-fees {
  padding: 100px 0;
}
.hgs-fees-heading {
  max-width: 750px;
  margin-bottom: 50px;
}
.hgs-fees-heading h2 {
  margin-bottom: 15px;
  font-size: 40px;
  font-weight: 500;
}
.hgs-fees-heading h2 em {
  color: var(--orange);
  font-style: normal;
}
.hgs-fees-heading p {
  color: var(--text);
  font-size: 16px;
  line-height: 28px;
}
.hgs-fee-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.hgs-fee-timeline::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 34px;
  height: 1px;
  background: #ddd;
}
.hgs-fee {
  position: relative;
  z-index: 2;
  padding: 30px;
  background: #fff;
  text-align: center;
  border: 1px solid var(--border);
  transition: .4s ease;
}
.hgs-fee:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 40px rgba(20, 30, 40, .07);
}
.hgs-fee-circle {
  width: 68px;
  height: 68px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--purple);
  color: var(--purple);
  font-size: 12px;
  font-weight: 700;
}
.hgs-fee:nth-child(2) .hgs-fee-circle {
  border-color: var(--pink);
  color: var(--pink);
}
.hgs-fee:nth-child(3) .hgs-fee-circle {
  border-color: var(--orange);
  color: #bd883e;
}
.hgs-fee small {
  display: block;
  color: #999;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.hgs-fee strong {
  display: block;
  margin-top: 9px;
  font-size: 20px;
  font-weight: 500;
}
.hgs-fee p {
  margin-top: 8px;
  color: var(--text);
  font-size: 12px;
  line-height: 20px;
}
.hgs-payment {
  margin-top: 40px;
  padding: 25px 30px;
  background: #fff;
  border-left: 4px solid var(--teal);
}
.hgs-payment small {
  display: block;
  margin-bottom: 8px;
  color: var(--teal);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-payment p {
  color: var(--text);
  font-size: 14px;
  line-height: 24px;
}
/* =========================================================
   DOCUMENTS
========================================================= */
.hgs-documents {
  padding: 100px 0;
  background: #fff;
}
.hgs-documents-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-bottom: 50px;
}
.hgs-documents-header h2 {
  font-size: 30px;
  font-weight: 500;
}
.hgs-documents-header h2 em {
  color: var(--teal);
  font-style: normal;
}
.hgs-documents-header p {
  color: var(--text);
  font-size: 16px;
  line-height: 28px;
}
.hgs-documents-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hgs-document {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 15px;
  padding: 20px 22px;
  background: var(--light);
  border: 1px solid transparent;
  transition: .35s ease;
  border-radius: 12px;
}
.hgs-document:hover {
  background: #fff;
  border-color: var(--purple);
  transform: translateY(-4px);
  box-shadow:
    0 12px 30px rgba(20, 30, 40, .06);
}
.hgs-document b {
  color: var(--purple);
  font-size: 16px;
}
.hgs-document:nth-child(4n+2) b {
  color: var(--pink);
}
.hgs-document:nth-child(4n+3) b {
  color: #cc913d;
}
.hgs-document:nth-child(4n+4) b {
  color: var(--teal);
}
.hgs-document p {
  color: var(--text);
  font-size: 16px;
  line-height: 22px;
}
/* =========================================================
   FINAL NOTE
========================================================= */
.hgs-final-note {
  padding: 70px 0;
}
.hgs-final-box {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 20px;
  padding: 35px;
  background: var(--dark);
}
.hgs-final-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}
.hgs-final-box small {
  display: block;
  margin-bottom: 10px;
  color: var(--orange);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-final-box p {
  max-width: 900px;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, .65);
  font-size: 13px;
  line-height: 23px;
}
.hgs-final-box p:last-child {
  margin-bottom: 0;
}
/* =========================================================
   ANIMATION
========================================================= */
.hgs-journey-item, .hgs-term, .hgs-fee, .hgs-document {
  animation: hgsReveal .8s ease both;
}
@keyframes hgsReveal {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media(max-width: 900px) {
  .hgs-intro-layout {
    grid-template-columns: 80px 1fr;
    gap: 30px;
  }
  .hgs-academic-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hgs-withdrawal-layout {
    grid-template-columns: 1fr;
  }
  .hgs-documents-header {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
@media(max-width: 700px) {
  .hgs-container {
    width: min(100% - 30px, 1180px);
  }
  .hgs-admission-intro {
    padding: 65px 0;
  }
  .hgs-intro-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hgs-intro-number {
    position: static;
    font-size: 45px;
  }
  .hgs-intro-content h1 {
    font-size: 32px;
  }
  .hgs-journey-section {
    padding: 65px 0;
  }
  .hgs-journey-line {
    left: 25px;
  }
  .hgs-journey-item {
    grid-template-columns: 50px 1fr;
    gap: 15px;
  }
  .hgs-journey-number {
    width: 50px;
    height: 50px;
    font-size: 10px;
  }
  .hgs-journey-card {
    padding: 24px 20px;
  }
  .hgs-journey-card h3 {
    font-size: 21px;
  }
  .hgs-important {
    align-items: flex-start;
    margin: 45px 15px;
    padding: 22px;
  }
  .hgs-class-xi {
    padding: 65px 0;
  }
  .hgs-class-xi-box {
    grid-template-columns: 80px 1fr;
  }
  .hgs-class-number {
    font-size: 32px;
  }
  .hgs-class-content {
    padding: 30px 22px;
  }
  .hgs-class-content h2 {
    font-size: 25px;
  }
  .hgs-class-arrow {
    display: none;
  }
  .hgs-academic, .hgs-fees, .hgs-documents {
    padding: 65px 0;
  }
  .hgs-title h2, .hgs-academic-heading h2, .hgs-fees-heading h2, .hgs-documents-header h2 {
    font-size: 32px;
  }
  .hgs-terms {
    grid-template-columns: 1fr;
  }
  .hgs-withdrawal-heading {
    padding: 35px 25px;
  }
  .hgs-withdrawal-heading h2 {
    font-size: 32px;
  }
  .hgs-withdrawal-content {
    padding: 30px 22px;
  }
  .hgs-fee-timeline {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .hgs-fee-timeline::before {
    display: none;
  }
  .hgs-fee {
    padding: 25px;
  }
  .hgs-documents-grid {
    grid-template-columns: 1fr;
  }
  .hgs-final-box {
    grid-template-columns: 1fr;
    padding: 25px;
  }
}
.tedx-section {
  padding: 40px 25px 10px;
  background: #fff;
}
.tedx-container {
  margin: 0 auto;
}
/* =========================================
           YOUR HGS TITLE BLOCK
        ========================================= */
/* =========================================
           INTRO
        ========================================= */
.tedx-intro {
  display: grid;
  grid-template-columns: 1.05fr 1.5fr;
  gap: 55px;
  align-items: center;
  margin-bottom: 45px;
}
/* =========================================
           FEATURE VIDEO
        ========================================= */
.featured-video {
  position: relative;
  overflow: hidden;
  background: #151515;
  cursor: pointer;
}
.featured-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.featured-video:hover img {
  transform: scale(1.04);
}
.featured-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, .05) 65%);
  pointer-events: none;
}
.video-play {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 35px rgba(0, 0, 0, .2);
  transition: all .3s ease;
}
.video-play:hover {
  transform: translate(-50%, -50%) scale(1.08);
}
.video-play span {
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #c31e25;
}
.video-caption {
  position: absolute;
  z-index: 4;
  bottom: 22px;
  left: 25px;
  right: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.video-caption span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ffffff;
}
.video-caption strong {
  font-family: Georgia, serif;
  font-size: 17px;
  font-weight: 400;
  color: #ffffff;
}
/* =========================================
           INTRO CONTENT
        ========================================= */
.intro-content {
  padding-right: 15px;
}
.intro-label {
  display: block;
  margin-bottom: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #a75b3e;
}
.intro-content h3 {
  margin: 0 0 16px;
  color: #1b325c;
  font-family: var(--template-font);
  font-size: 30px;
  line-height: 34px;
  font-weight: 700;
}
.intro-content h3 em {
  color: #a75b3e;
  font-style: italic;
}
.intro-content p {
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.85;
  color: #686b70;
}
.intro-content .lead {
  font-size: 16px;
  line-height: 1.65;
  font-weight: 600;
  color: #3f4247;
}
.intro-content strong {
  color: #282b30;
}
/* =========================================
           STATS
        ========================================= */
.tedx-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 35px;
  padding-top: 25px;
  border-top: 1px solid #dedbd4;
}
.tedx-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 20px;
  border-right: 1px solid #dedbd4;
}
.tedx-stat:last-child {
  border-right: 0;
  padding-left: 20px;
}
.tedx-stat:nth-child(2) {
  padding-left: 20px;
}
.tedx-stat strong {
  font-size: 32px;
  font-weight: 400;
  color: #d63136;
}
.tedx-stat span {
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 1px;
  color: #262525;
}
/* =========================================
           DESCRIPTION
        ========================================= */
.tedx-description {
  max-width: 950px;
  margin: 0 auto 80px;
  text-align: center;
}
.tedx-description p {
  font-size: 15px;
  line-height: 1.9;
  color: #666b70;
}
.tedx-description strong {
  color: #25282d;
}
/* =========================================
           GALLERY HEADER
        ========================================= */
.gallery-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 30px;
  padding-bottom: 20px;
}
.gallery-heading-left span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #bd8c43;
}
.gallery-heading-left h3 {
  margin-top: 8px;
  font-size: 30px;
  font-weight: 700;
  color: #1b325c;
}
.gallery-heading p {
  max-width: 378px;
  font-size: 16px;
  line-height: 1.7;
  color: #777;
}
/* =========================================
           VIDEO GALLERY
        ========================================= */
.tedx-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.video-card {
  cursor: pointer;
}
.video-image {
  position: relative;
  overflow: hidden;
  background: #222;
}
.video-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.video-card:hover .video-image img {
  transform: scale(1.06);
}
.video-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent 60%);
}
.small-play {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  display: flex;
  align-items: center;
  justify-content: center;
}
.small-play span {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #d2001e;
}
.video-number {
  position: absolute;
  z-index: 3;
  left: 13px;
  bottom: 10px;
  font-size: 14px;
  color: #ffffff;
}
.video-info {
  padding: 14px 2px;
}
.video-info span {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #1b325c;
}
.video-info h4 {
  margin-top: 5px;
  font-size: 16px;
  font-weight: 400;
  color: #1b325c;
}
/* =========================================
           SPEAKERS
        ========================================= */
.speakers {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 60px;
  margin-top: 23px;
  padding-top: 40px;
}
.speakers-heading span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #bd8c43;
}
.speakers-heading h3 {
  margin-top: 8px;
  font-size: 30px;
  font-weight: 700;
  color: #1b325c;
}
.speaker-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.speaker {
  padding: 22px;
  background: #c313290d;
  border-left: 2px solid #cb2129;
}
.speaker small {
  display: block;
  margin-bottom: 18px;
  font-size: 13px;
  color: #bd8c43;
}
.speaker strong {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: #282b30;
}
/* =========================================
           YOUTUBE MODAL
        ========================================= */
.youtube-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 25px;
}
.youtube-modal.active {
  display: flex;
}
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(12, 14, 18, .92);
}
.modal-content {
  position: relative;
  z-index: 2;
  width: min(1000px, 100%);
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.youtube-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.modal-close {
  position: absolute;
  z-index: 5;
  top: -48px;
  right: 0;
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 34px;
  font-weight: 300;
  cursor: pointer;
}
/* =========================================
           RESPONSIVE
        ========================================= */
@media (max-width: 950px) {
  .tedx-intro {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .tedx-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .speakers {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
@media (max-width: 650px) {
  .tedx-section {
    padding: 60px 18px 70px;
  }
  .hgs-title {
    font-size: 40px;
  }
  .tedx-intro {
    gap: 35px;
  }
  .intro-content h3 {
    font-size: 36px;
  }
  .tedx-stats {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .tedx-stat, .tedx-stat:nth-child(2), .tedx-stat:last-child {
    padding: 12px 0;
    border-right: 0;
    border-bottom: 1px solid #dedbd4;
  }
  .tedx-stat:last-child {
    border-bottom: 0;
  }
  .gallery-heading {
    display: block;
  }
  .gallery-heading p {
    margin-top: 15px;
  }
  .tedx-gallery {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .speaker-list {
    grid-template-columns: 1fr;
  }
  .video-caption {
    display: block;
  }
  .video-caption strong {
    display: block;
    margin-top: 5px;
  }
}
@media (max-width: 420px) {
  .tedx-gallery {
    grid-template-columns: 1fr;
  }
  .hgs-title {
    font-size: 25px;
  }
  .intro-content h3 {
    font-size: 32px;
  }
  .video-play {
    width: 65px;
    height: 65px;
  }
}
/* =========================================
   INTRO
========================================= */
.mun-section {
  padding: 70px 28px 100px;
  background: #ffffff;
}
.mun-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 75px;
}
.mun-intro-text {
  padding-right: 15px;
}
.mun-label {
  display: block;
  margin-bottom: 18px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #7B6EC7;
}
.mun-intro-text h2 {
  margin: 0 0 22px;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  color: #2A3261;
}
.mun-intro-text h2 em {
  color: #7B6EC7;
  font-style: normal;
}
.mun-intro-text p {
  margin-bottom: 17px;
  font-size: 14px;
  line-height: 1.8;
  color: #596080;
}
.mun-intro-text .lead {
  font-size: 16px;
  line-height: 1.65;
  color: #1f1f1f;
}
/* =========================================
   IMAGE COLLAGE
========================================= */
.mun-images {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  height: 470px;
}
.mun-image {
  position: relative;
  overflow: hidden;
  background: #F5F4FD;
}
.mun-image-main {
  grid-row: span 2;
}
.mun-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.mun-image:hover img {
  transform: scale(1.05);
}
.mun-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(42, 50, 97, .30), transparent 65%);
  pointer-events: none;
}
.mun-image-number {
  position: absolute;
  z-index: 2;
  left: 14px;
  bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
}
/* =========================================
   STATS
========================================= */
.mun-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 30px;
  padding-top: 23px;
  border-top: 1px solid #E8E8E5;
}
.mun-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 18px;
  border-right: 1px solid #E8E8E5;
}
.mun-stat:nth-child(2) {
  padding-left: 18px;
}
.mun-stat:last-child {
  padding-left: 18px;
  border-right: 0;
}
.mun-stat strong {
  font-size: 28px;
  font-weight: 600;
  color: #7B6EC7;
}
.mun-stat:nth-child(2) strong {
  color: #ECB55D;
}
.mun-stat:nth-child(3) strong {
  color: #6CB6AA;
}
.mun-stat span {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 1px;
  color: #272728;
}
/* =========================================
   DESCRIPTION
========================================= */
.mun-description {
  max-width: 900px;
  margin: 0 auto 75px;
  text-align: center;
}
.mun-description p {
  font-size: 16px;
  line-height: 1.9;
  color: #596080;
}
.mun-description strong {
  color: #2A3261;
}
/* =========================================
   COMMITTEE HEADER
========================================= */
.mun-heading {
  margin-bottom: 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid #E8E8E5;
}
.mun-heading span {
  display: block;
  margin-bottom: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #7B6EC7;
}
.mun-heading h3 {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  color: #1b325c;
}
/* =========================================
   COMMITTEE GRID
========================================= */
.mun-committee-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.mun-card {
  position: relative;
  min-height: 175px;
  padding: 22px 18px;
  border: 1px solid #E5E5E3;
  transition: transform .3s ease, box-shadow .3s ease;
}
.mun-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(42, 50, 97, .08);
}
/* TOP ACCENTS */
.mun-card:nth-child(1) {
  border-top: 3px solid #7B6EC7;
  background: #F5F4FD;
}
.mun-card:nth-child(2) {
  border-top: 3px solid #ECB55D;
  background: #FEF8EB;
}
.mun-card:nth-child(3) {
  border-top: 3px solid #6CB6AA;
  background: #F1FAF8;
}
.mun-card:nth-child(4) {
  border-top: 3px solid #E27F9A;
  background: #FEF3F5;
}
.mun-card:nth-child(5) {
  border-top: 3px solid #7B6EC7;
  background: #F5F4FD;
}
/* NUMBER */
.mun-card-number {
  display: block;
  margin-bottom: 28px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #7D849C;
}
/* CARD TITLE */
.mun-card h4 {
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
  color: #2A3261;
}
/* =========================================
   GALLERY
========================================= */
.mun-gallery {
  margin-top: 75px;
}
.mun-gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 25px;
  padding-bottom: 18px;
  border-bottom: 1px solid #E8E8E5;
}
.mun-gallery-header span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #6CB6AA;
}
.mun-gallery-header h3 {
  margin-top: 7px;
  font-size: 30px;
  font-weight: 600;
  color: #2A3261;
}
.mun-gallery-header p {
  max-width: 330px;
  font-size: 12px;
  line-height: 1.7;
  color: #707791;
}
/* =========================================
   FOUR IMAGE GALLERY
========================================= */
.mun-gallery-grid {
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr;
  grid-template-rows: 210px 210px;
  gap: 12px;
}
.mun-gallery-item {
  position: relative;
  overflow: hidden;
}
.mun-gallery-item:first-child {
  grid-row: span 2;
}
.mun-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.mun-gallery-item:hover img {
  transform: scale(1.06);
}
.mun-gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(42, 50, 97, .35), transparent 60%);
  pointer-events: none;
}
.gallery-number {
  position: absolute;
  z-index: 2;
  left: 14px;
  bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
}
/* =========================================
   CLOSING STATEMENT
========================================= */
.mun-closing {
  margin-top: 65px;
  padding: 40px;
  background: #F5F4FD;
  border-left: 4px solid #7B6EC7;
  text-align: center;
}
.mun-closing p {
  max-width: 780px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.65;
  font-weight: 500;
  color: #2A3261;
}
.mun-closing span {
  display: block;
  margin-top: 15px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #7B6EC7;
}
/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 1000px) {
  .mun-committee-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 850px) {
  .mun-intro {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .mun-images {
    height: 430px;
  }
  .mun-gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 300px 220px 220px;
  }
  .mun-gallery-item:first-child {
    grid-column: span 2;
    grid-row: span 1;
  }
}
@media (max-width: 650px) {
  .mun-section {
    padding: 60px 18px 70px;
  }
  .mun-title {
    font-size: 32px;
  }
  .mun-intro-text h2 {
    font-size: 30px;
  }
  .mun-images {
    height: 380px;
  }
  .mun-stats {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .mun-stat, .mun-stat:nth-child(2), .mun-stat:last-child {
    padding: 12px 0;
    border-right: 0;
    border-bottom: 1px solid #E8E8E5;
  }
  .mun-stat:last-child {
    border-bottom: 0;
  }
  .mun-committee-grid {
    grid-template-columns: 1fr 1fr;
  }
  .mun-gallery-header {
    display: block;
  }
  .mun-gallery-header p {
    margin-top: 12px;
  }
  .mun-gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 260px 190px 190px;
  }
  .mun-closing {
    padding: 30px 20px;
  }
  .mun-closing p {
    font-size: 17px;
  }
}
@media (max-width: 450px) {
  .mun-committee-grid {
    grid-template-columns: 1fr;
  }
  .mun-gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 260px);
  }
  .mun-gallery-item:first-child {
    grid-column: auto;
  }
}
/* =========================================
   STATS
========================================= */
.soccer-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--hgs-border);
}
.soccer-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 18px;
  border-right: 1px solid var(--hgs-border);
}
.soccer-stat:nth-child(2) {
  padding-left: 18px;
}
.soccer-stat:last-child {
  padding-left: 18px;
  border-right: 0;
}
.soccer-stat strong {
  font-size: 29px;
  font-weight: 600;
  color: var(--hgs-purple);
}
.soccer-stat:nth-child(2) strong {
  color: var(--hgs-orange);
}
.soccer-stat:nth-child(3) strong {
  color: var(--hgs-teal);
}
.soccer-stat span {
  font-size: 8px;
  line-height: 1.5;
  letter-spacing: 1px;
  color: #737b8c;
}
@media (max-width: 650px) {
  .soccer-stats {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .soccer-stat, .soccer-stat:nth-child(2), .soccer-stat:last-child {
    padding: 12px 0;
    border-right: 0;
    border-bottom: 1px solid var(--hgs-border);
  }
  .soccer-stat:last-child {
    border-bottom: 0;
  }
  .soccer-gallery-header {
    display: block;
  }
  .soccer-gallery-header p {
    margin-top: 12px;
  }
  .soccer-gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 250px 190px 190px;
  }
  .soccer-closing {
    padding: 30px 20px;
  }
  .soccer-closing p {
    font-size: 17px;
  }
}
/* =========================================
   HGS COLOUR SYSTEM
========================================= */ :root {
  --hgs-purple: #7773c7;
  --hgs-pink: #df8296;
  --hgs-orange: #f2b45d;
  --hgs-teal: #62b5aa;
  --hgs-green: #046a58;
  --hgs-navy: #1b325c;
  --hgs-text: #4b5563;
  --hgs-light-purple: #f5f4fd;
  --hgs-light-pink: #fdf3f5;
  --hgs-light-orange: #fff8ed;
  --hgs-light-teal: #f1faf8;
  --hgs-border: #e5e7eb;
}
/* =========================================
   RESET
========================================= */
/* =========================================
   MAIN SECTION
========================================= */
.founders-section {
  padding: 85px 28px 100px;
  background: #ffffff;
}
.founders-container {
  margin: 0 auto;
}
/* =========================================
   TITLE
========================================= */
.founders-title-block {
  margin-bottom: 55px;
}
.founders-label {
  display: block;
  margin-bottom: 13px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--hgs-purple);
}
.founders-title {
  max-width: 850px;
  font-size: 42px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.7px;
  color: var(--hgs-navy);
}
.founders-title span {
  color: var(--hgs-purple);
}
.founders-title-line {
  position: relative;
  width: 82px;
  height: 18px;
  margin-top: 16px;
}
.founders-title-line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 3px;
  background: var(--hgs-navy);
}
.founders-diamond {
  position: absolute;
  width: 10px;
  height: 10px;
  top: 5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  background: var(--hgs-purple);
  border: 2px solid #ffffff;
}
/* =========================================
   INTRO
========================================= */
.founders-intro {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 75px;
}
/* =========================================
   FEATURED IMAGE
========================================= */
.founders-feature {
  position: relative;
  height: 440px;
  overflow: hidden;
  cursor: pointer;
  background: var(--hgs-light-purple);
}
.founders-feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}
.founders-feature:hover img {
  transform: scale(1.04);
}
.founders-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27, 50, 92, .55), rgba(27, 50, 92, 0) 60%);
  pointer-events: none;
}
/* FEATURE LABEL */
.feature-tag {
  position: absolute;
  z-index: 2;
  top: 20px;
  left: 20px;
  padding: 8px 12px;
  background: #ffffff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--hgs-navy);
}
/* FEATURE CAPTION */
.feature-caption {
  position: absolute;
  z-index: 2;
  left: 25px;
  right: 25px;
  bottom: 25px;
}
.feature-caption span {
  display: block;
  margin-bottom: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ffffff;
}
.feature-caption strong {
  display: block;
  font-size: 24px;
  line-height: 1.25;
  color: #ffffff;
}
/* =========================================
   CONTENT
========================================= */
.founders-content {
  padding-right: 20px;
}
.founders-content-label {
  display: block;
  margin-bottom: 17px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--hgs-teal);
}
.founders-content h2 {
  margin-bottom: 22px;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--hgs-navy);
}
.founders-content h2 em {
  color: var(--hgs-purple);
  font-style: normal;
}
.founders-content p {
  margin-bottom: 17px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--hgs-text);
}
.founders-content .lead {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.65;
  color: #37466a;
}
/* =========================================
   EVENT DETAILS
========================================= */
.founders-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--hgs-border);
}
.founder-detail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 15px;
  border-right: 1px solid var(--hgs-border);
}
.founder-detail:nth-child(2) {
  padding-left: 15px;
}
.founder-detail:last-child {
  padding-left: 15px;
  border-right: 0;
}
.founder-detail strong {
  font-size: 25px;
  font-weight: 600;
  color: var(--hgs-purple);
}
.founder-detail:nth-child(2) strong {
  color: var(--hgs-orange);
}
.founder-detail:nth-child(3) strong {
  color: var(--hgs-teal);
}
.founder-detail span {
  font-size: 10px;
  line-height: 1.5;
  padding-top: 12px;
  letter-spacing: 1px;
  color: #737b8c;
}
/* =========================================
   CHIEF GUESTS
========================================= */
.guests-section {
  margin-bottom: 75px;
}
.section-heading {
  margin-bottom: 30px;
  padding-bottom: 18px;
}
.section-heading span {
  display: block;
  margin-bottom: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--hgs-purple);
}
.section-heading h3 {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--hgs-navy);
}
/* =========================================
   GUEST GRID
========================================= */
.guests-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.guest-card {
  position: relative;
  min-height: 150px;
  padding: 22px 18px;
  border: 1px solid var(--hgs-border);
  transition:
    transform .3s ease, box-shadow .3s ease;
}
.guest-card P {
  font-size: 15px;
  line-height: 1.7;
  color: var(--hgs-text);
}
.guest-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(27, 50, 92, .08);
}
.guest-card:nth-child(1) {
  background: var(--hgs-light-purple);
  border-top: 3px solid var(--hgs-purple);
}
.guest-card:nth-child(2) {
  background: var(--hgs-light-orange);
  border-top: 3px solid var(--hgs-orange);
}
.guest-card:nth-child(3) {
  background: var(--hgs-light-teal);
  border-top: 3px solid var(--hgs-teal);
}
.guest-card:nth-child(4) {
  background: var(--hgs-light-pink);
  border-top: 3px solid var(--hgs-pink);
}
.guest-number {
  display: block;
  margin-bottom: 25px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #7b8495;
}
.guest-card h4 {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--hgs-navy);
}
/* =========================================
   GALLERY HEADER
========================================= */
.gallery-section {
  margin-top: 10px;
}
.gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 25px;
  padding-bottom: 18px;
}
.gallery-header-left span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--hgs-teal);
}
.gallery-header-left h3 {
  margin-top: 7px;
  font-size: 30px;
  font-weight: 700;
  color: var(--hgs-navy);
}
.gallery-header p {
  max-width: 435px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--hgs-text);
}
/* =========================================
   GALLERY GRID
========================================= */
.gallery-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr .75fr;
  grid-template-rows: 220px 220px;
  gap: 12px;
}
.gallery-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--hgs-light-purple);
}
.gallery-item:first-child {
  grid-row: span 2;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.gallery-item:hover img {
  transform: scale(1.07);
}
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27, 50, 92, .35), transparent 60%);
  pointer-events: none;
}
.gallery-number {
  position: absolute;
  z-index: 2;
  left: 14px;
  bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
}
/* =========================================
   LIGHTBOX
========================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: rgba(15, 25, 45, .94);
}
.lightbox.active {
  display: flex;
}
.lightbox-content {
  position: relative;
  width: min(1000px, 94vw);
  height: min(700px, 88vh);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  box-shadow: 0 25px 70px rgba(0, 0, 0, .35);
}
/* CLOSE */
.lightbox-close {
  position: fixed;
  top: 25px;
  right: 30px;
  z-index: 10;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
  transition: background .25s ease;
}
.lightbox-close:hover {
  background: var(--hgs-purple);
}
/* PREVIOUS / NEXT */
.lightbox-prev, .lightbox-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  font-size: 28px;
  cursor: pointer;
  transition:
    background .25s ease, transform .25s ease;
}
.lightbox-prev {
  left: 25px;
}
.lightbox-next {
  right: 25px;
}
.lightbox-prev:hover, .lightbox-next:hover {
  background: var(--hgs-purple);
}
.lightbox-prev:hover {
  transform: translateY(-50%) translateX(-3px);
}
.lightbox-next:hover {
  transform: translateY(-50%) translateX(3px);
}
/* COUNTER */
.lightbox-counter {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 10;
  padding: 7px 13px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .12);
  color: #ffffff;
  font-size: 10px;
  letter-spacing: 1px;
}
/* =========================================
   CLOSING
========================================= */
.founders-closing {
  margin-top: 65px;
  padding: 42px;
  background: var(--hgs-light-purple);
  border-left: 4px solid var(--hgs-purple);
  text-align: center;
}
.founders-closing p {
  max-width: 800px;
  margin: auto;
  font-size: 20px;
  line-height: 1.65;
  font-weight: 500;
  color: var(--hgs-navy);
}
.founders-closing span {
  display: block;
  margin-top: 15px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--hgs-purple);
}
/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 950px) {
  .founders-intro {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .founders-feature {
    height: 500px;
  }
  .guests-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 800px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 280px 210px 210px;
  }
  .gallery-item:first-child {
    grid-column: span 2;
    grid-row: span 1;
  }
}
@media (max-width: 650px) {
  .founders-section {
    padding: 60px 18px 70px;
  }
  .founders-title {
    font-size: 32px;
  }
  .founders-content h2 {
    font-size: 34px;
  }
  .founders-feature {
    height: 400px;
  }
  .founders-details {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .founder-detail, .founder-detail:nth-child(2), .founder-detail:last-child {
    padding: 12px 0;
    border-right: 0;
    border-bottom: 1px solid var(--hgs-border);
  }
  .founder-detail:last-child {
    border-bottom: 0;
  }
  .gallery-header {
    display: block;
  }
  .gallery-header p {
    margin-top: 12px;
  }
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 250px 180px 180px;
  }
  .founders-closing {
    padding: 30px 20px;
  }
  .founders-closing p {
    font-size: 17px;
  }
  .lightbox {
    padding: 15px;
  }
  .lightbox-prev {
    left: 10px;
  }
  .lightbox-next {
    right: 10px;
  }
  .lightbox-prev, .lightbox-next {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
}
@media (max-width: 450px) {
  .guests-grid {
    grid-template-columns: 1fr;
  }
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 250px);
  }
  .gallery-item:first-child {
    grid-column: auto;
  }
}
:root {
  --hgs-purple: #7773c7;
  --hgs-pink: #df8296;
  --hgs-orange: #f2b45d;
  --hgs-teal: #62b5aa;
  --hgs-green: #046a58;
  --hgs-navy: #1b325c;
  --hgs-text: #4b5563;
  --hgs-light: #f8f7fb;
  --hgs-white: #ffffff;
  --hgs-border: #e8e8ee;
  --container: 1200px;
  --radius: 24px;
  --shadow: 0 15px 45px rgba(27, 50, 92, 0.10);
}
.section {
  padding: 50px 0;
}
/* =========================
   SECTION TYPOGRAPHY
========================= */
.section-label {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--hgs-purple);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
/* =========================
   SPORTS COMPLEX
========================= */
.complex-section {
  background: var(--hgs-light);
}
.complex-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.section-image {
  position: relative;
}
.image-placeholder {
  min-height: 570px;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 35px;
  color: white;
  font-size: 30px;
  background:
    linear-gradient(0deg, rgba(27, 50, 92, .75), transparent 55%), url("../img/Sports-Complex.png") center / cover no-repeat;
  box-shadow: var(--shadow);
}
.section-content h2 {
  margin-bottom: 25px;
}
.section-content p {
  margin-bottom: 18px;
}
.facility-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 30px;
}
.facility-tags span {
  padding: 7px 14px;
  border-radius: 100px;
  background: white;
  border: 1px solid var(--hgs-border);
  color: var(--hgs-navy);
  font-size: 13px;
  font-weight: 600;
}
/* =========================
   INTRO
========================= */
.sports-intro {
  padding: 110px 0;
  background:
    linear-gradient(135deg, #ffffff 0%, #f7f5fb 100%);
}
.intro-inner {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 100px;
  align-items: center;
}
.intro-heading h2 em {
  color: var(--hgs-purple);
  font-style: normal;
}
.intro-text {
  font-size: 17px;
}
.intro-text p {
  margin-bottom: 20px;
}
.intro-text strong {
  color: var(--hgs-navy);
}
/* =========================
   HOUSES
========================= */
.houses-section {
  background: white;
}
.center-heading {
  max-width: 700px;
  margin: 0 auto 60px;
  text-align: center;
}
.center-heading h2 {
  margin-bottom: 18px;
}
.center-heading p {
  max-width: 600px;
  margin: auto;
}
.houses-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.house-card {
  position: relative;
  min-height: 240px;
  padding: 35px;
  border-radius: 20px;
  overflow: hidden;
  color: white;
  transition: .3s ease;
}
.house-card:hover {
  transform: translateY(-8px);
}
.house-card span {
  font-size: 19px;
  font-weight: 700;
  opacity: .75;
  color: #fff;
}
.house-card h3 {
  margin-top: 45px;
  margin-bottom: 4px;
  color: white;
  font-weight: 700;
  font-size: 28px;
}
.house-card p {
  opacity: .85;
  color: #fff;
}
.house-purple {
  background: var(--hgs-purple);
}
.house-pink {
  background: var(--hgs-pink);
}
.house-orange {
  background: var(--hgs-orange);
}
.house-teal {
  background: var(--hgs-teal);
}
/* =========================
   GAMES
========================= */
.games-section {
  background: var(--hgs-light);
}
.games-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.game-card {
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(27, 50, 92, .06);
  transition: .35s ease;
}
.game-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
}
.game-image {
  height: 260px;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 20px;
  background-position: center;
  background-size: cover;
}
.game-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 50, 92, .18), transparent 60%);
}
.game-image span {
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--hgs-navy);
  font-size: 12px;
  font-weight: 700;
}
/* IMAGE HOOKS */
.squash-image {
  background-image: url("../img/Squash.jpg");
}
.tennis-image {
  background-image: url("../img/Lawn-Tennis.jpg");
}
.table-tennis-image {
  background-image: url("../img/Table-Tennis.jpg");
}
.badminton-image {
  background-image: url("../img/badminton.jpg");
}
.basketball-image {
  background-image: url("../img/basketball.jpg");
}
.yoga-image {
  background-image: url("../img/yoga.jpg");
}
.swimming-image {
  background-image: url("../img/swimming.jpg");
}
.volleyball-image {
  background-image: url("../img/volleyball.jpg");
}
.karate-image {
  background-image: url("../img/karate.jpg");
}
.athletics-image {
  background-image: url("../img/athletics.jpg");
}
.indoor-image {
  background-image: url("../img/chess-carrom.jpg");
}
.shooting-image {
  background-image: url("../img/shooting.jpg")
}
.pickleball-image {
  background-image: url("../img/pickleball.jpg")
}

.game-content {
  padding: 30px;
}
.game-category {
  color: var(--hgs-purple);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.game-content h3 {
  margin: 7px 0 15px;
  font-size: 25px;
  line-height: 1.1;
  font-weight: 600;
}
.game-content p {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.7;
}
/* =========================
   QUOTE
========================= */
.sports-quote {
  padding: 100px 0;
  background: var(--hgs-navy);
}
.quote-box {
  max-width: 900px;
  margin: auto;
  text-align: center;
  color: white;
}
.quote-mark {
  display: block;
  color: var(--hgs-orange);
  font-family: Georgia, serif;
  font-size: 100px;
  line-height: .6;
}
.quote-box h2 {
  margin: 35px 0 25px;
  color: white;
}
.quote-box p {
  max-width: 650px;
  margin: auto;
  color: rgba(255, 255, 255, .75);
  font-size: 16px;
}
/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1000px) {
  .complex-grid, .intro-inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .houses-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .games-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .image-placeholder {
    min-height: 450px;
  }
}
@media (max-width: 650px) {
  .container {
    width: min(100% - 28px, 1200px);
  }
  .section {
    padding: 70px 0;
  }
  .sports-hero {
    min-height: 560px;
  }
  .hero-content h1 {
    font-size: 58px;
  }
  .hero-content p {
    font-size: 16px;
  }
  .houses-grid, .games-grid {
    grid-template-columns: 1fr;
  }
  .intro-inner {
    gap: 35px;
  }
  .image-placeholder {
    min-height: 380px;
  }
  .game-image {
    height: 230px;
  }
  .sports-quote {
    padding: 75px 0;
  }
  .quote-box h2 {
    font-size: 38px;
  }
}
:root {
  --hgs-purple: #7773c7;
  --hgs-pink: #df8296;
  --hgs-orange: #f2b45d;
  --hgs-teal: #62b5aa;
  --hgs-green: #046a58;
  --hgs-navy: #1b325c;
  --hgs-text: #4b5563;
  --hgs-light: #f8f7fb;
  --hgs-white: #ffffff;
  --hgs-border: #e7e7ed;
  --container: 1200px;
  --radius: 26px;
  --shadow:
    0 18px 50px rgba(27, 50, 92, .10);
}
/* =========================
   RESET
========================= */
/* =========================
   TYPOGRAPHY
========================= */
.section-label {
  display: inline-block;
  margin-bottom: 12px;
  color:
    var(--hgs-purple);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
h2 {
  color:
    var(--hgs-navy);
  font-size:
    clamp(40px, 5vw, 62px);
  line-height: 1.1;
}
/* =========================
   INTRO
========================= */
.intro-section {
  padding: 50px 0;
  background:
    linear-gradient(135deg, #ffffff, #f7f5fb);
}
.intro-grid {
  display: grid;
  /* grid-template-columns: .85fr 1.15fr; */
  grid-auto-flow: row;
}
.intro-title h2 {
  font-size:
    clamp(50px, 6vw, 76px);
}
.intro-title h2 em {
  color:
    var(--hgs-purple);
  font-style: normal;
}
.intro-copy {
  font-size: 17px;
}
.intro-copy p {
  margin-bottom: 22px;
}
.intro-highlight {
  margin-top: 30px;
  padding: 25px 30px;
  border-left:
    4px solid var(--hgs-orange);
  background:
    rgba(242, 180, 93, .12);
  border-radius:
    0 15px 15px 0;
}
.intro-highlight strong {
  display: block;
  margin-bottom: 14px;
  color:
    var(--hgs-navy);
  font-size: 17px;
}
.intro-highlight span {
  font-size: 14px;
}
/* =========================
   CLUB SECTION
========================= */
.clubs-section {
  padding: 60px 0;
  background:
    var(--hgs-light);
}
.section-heading {
  max-width: 720px;
  margin:
    0 auto 10px;
  text-align: center;
}
.section-heading h2 {
  margin-bottom: 18px;
}
.section-heading p {
  max-width: 650px;
  margin: auto;
}
/* =========================
   CLUB GRID
========================= */
.clubs-grid {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
  gap: 26px;
}
.club-card {
  position: relative;
  min-height: 400px;
  padding: 38px;
  border-radius:
    var(--radius);
  overflow: hidden;
  color: white;
  transition:
    transform .35s ease, box-shadow .35s ease;
}
.club-card::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -90px;
  bottom: -90px;
  border-radius: 50%;
  background:
    rgba(255, 255, 255, .12);
}
.club-card:hover {
  transform:
    translateY(-10px);
  box-shadow:
    var(--shadow);
}
.club-number {
  position: absolute;
  top: 28px;
  right: 30px;
  font-size: 12px;
  font-weight: 700;
  opacity: .65;
}
.club-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin-bottom: 35px;
  border-radius: 20px;
  background:
    rgba(255, 255, 255, .18);
  font-size: 28px;
}
.club-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  opacity: .78;
}
.club-card h3 {
  margin:
    8px 0 18px;
  color: white;
  font-size: 25px;
  line-height: 1.15;
}
.club-card p {
  margin-bottom: 14px;
  color:
    rgba(255, 255, 255, .88);
  font-size: 14px;
  line-height: 1.75;
}
/* =========================
   CLUB COLOURS
========================= */
.club-purple {
  background:
    var(--hgs-purple);
}
.club-pink {
  background:
    var(--hgs-pink);
}
.club-orange {
  background:
    var(--hgs-orange);
}
.club-green {
  background:
    var(--hgs-green);
}
.club-teal {
  background:
    var(--hgs-teal);
}
.club-navy {
  background:
    var(--hgs-navy);
}
/* =========================
   SKILL TAGS
========================= */
.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 22px;
}
.skill-tags span {
  padding:
    5px 10px;
  border:
    1px solid rgba(255, 255, 255, .30);
  border-radius:
    100px;
  font-size: 11px;
}
/* =========================
   CREATIVE STRIP
========================= */
.creative-strip {
  position: relative;
  padding: 40px 0;
  overflow: hidden;
  background:
    var(--hgs-navy);
  color: white;
}
.creative-strip .container {
  display: grid;
  grid-template-columns:
    1fr 1fr;
  gap: 80px;
  align-items: center;
}
.creative-content .section-label {
  color:
    var(--hgs-orange);
}
.creative-content h2 {
  color: white;
  margin-bottom: 25px;
}
.creative-content h2 em {
  color:
    var(--hgs-pink);
  font-style: normal;
}
.creative-content p {
  max-width: 570px;
  color:
    rgba(255, 255, 255, .75);
  font-size: 16px;
}
.creative-pattern {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.creative-pattern span {
  font-family:
    "Playfair Display", serif;
  font-size:
    clamp(35px, 5vw, 70px);
  line-height: 1;
  color:
    rgba(255, 255, 255, .10);
  transition:
    color .3s ease;
}
.creative-pattern span:nth-child(1) {
  color:
    rgba(119, 115, 199, .65);
}
.creative-pattern span:nth-child(2) {
  color:
    rgba(223, 130, 150, .60);
}
.creative-pattern span:nth-child(3) {
  color:
    rgba(242, 180, 93, .55);
}
.creative-pattern span:nth-child(4) {
  color:
    rgba(98, 181, 170, .55);
}
/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1000px) {
  .intro-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .clubs-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }
  .creative-strip .container {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .creative-pattern {
    align-items: flex-start;
  }
}
@media (max-width: 650px) {
  .container {
    width:
      calc(100% - 28px);
  }
  .intro-section, .clubs-section, .creative-strip {
    padding: 75px 0;
  }
  .clubs-grid {
    grid-template-columns: 1fr;
  }
  .club-card {
    min-height: auto;
    padding: 32px;
  }
  .creative-pattern span {
    font-size: 42px;
  }
}
:root {
  --hgs-purple: #7773c7;
  --hgs-pink: #df8296;
  --hgs-orange: #f2b45d;
  --hgs-teal: #62b5aa;
  --hgs-green: #046a58;
  --hgs-navy: #1b325c;
  --hgs-text: #4b5563;
  --hgs-light: #f8f7fb;
  --hgs-white: #ffffff;
  --container: 1200px;
  --radius: 26px;
}
/* =========================
   GLOBAL TYPOGRAPHY
========================= */
.section-label {
  display: inline-block;
  color: var(--hgs-purple);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
/* =========================
   ART SECTIONS
========================= */
.art-section {
  padding: 50px 0;
}
.music-section {
  background:
    #f7f5fb;
}
.dance-section {
  background:
    #ffffff;
}
.art-grid {
  display: grid;
  grid-template-columns:
    1fr 1fr;
  gap: 50px;
  align-items: center;
}
.art-grid.reverse {
  grid-template-columns:
    1fr 1fr;
}
.art-image {
  min-height: 450px;
  position: relative;
  border-radius:
    var(--radius);
  overflow: hidden;
  background-position:
    center;
  background-size:
    cover;
  box-shadow:
    0 25px 60px rgba(27, 50, 92, .15);
}
.music-image1 {
  background:
    linear-gradient(135deg, rgba(27, 50, 92, .05), rgba(119, 115, 199, .25)), url("../img/threther.jpg") center / cover no-repeat;
}
.music-image {
  background:
    linear-gradient(135deg, rgba(27, 50, 92, .05), rgba(119, 115, 199, .25)), url("../img/music.jpg") center / cover no-repeat;
}
.dance-image {
  background:
    linear-gradient(135deg, rgba(223, 130, 150, .08), rgba(242, 180, 93, .20)), url("../img/dance.jpg") center / cover no-repeat;
}
.image-caption {
  position: absolute;
  left: 30px;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: white;
}
.image-caption span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    rgba(27, 50, 92, .8);
  font-size: 13px;
  color: #fff;
}
.image-caption strong {
  font-size: 24px;
}
/* =========================
   ART COPY
========================= */
.art-copy {
  position: relative;
  min-width: 0;
}
.vertical-label {
  position: absolute;
  left: -55px;
  top: 0;
  writing-mode:
    vertical-rl;
  transform:
    rotate(180deg);
  color:
    rgba(27, 50, 92, .20);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
}
.copy-inner h2 {
  margin-bottom: 30px;
}
.copy-inner > p {
  margin-bottom: 18px;
  font-size: 15px;
}
/* =========================
   INSTRUMENT BOX
========================= */
.instrument-box {
  margin-top: 35px;
  padding: 25px;
  background: white;
  border-radius: 18px;
  border-left:
    4px solid var(--hgs-purple);
}
.instrument-box > span {
  display: block;
  margin-bottom: 15px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color:
    var(--hgs-purple);
}
.instrument-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.instrument-list b {
  padding:
    7px 12px;
  border-radius: 100px;
  background:
    #f3f2f8;
  color:
    var(--hgs-navy);
  font-size: 11px;
}
.music-footer {
  margin-top: 25px;
  padding-top: 20px;
  border-top:
    1px solid rgba(27, 50, 92, .12);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.music-footer strong {
  color:
    var(--hgs-navy);
}
.music-footer span {
  font-size: 12px;
}
/* =========================
   DANCE FORMS
========================= */
.dance-forms {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
  gap: 10px;
  margin: 30px 0;
}
.dance-forms div {
  padding: 20px;
  border-radius: 16px;
  background:
    #faf6f8;
  border:
    1px solid rgba(223, 130, 150, .20);
}
.dance-forms span {
  display: block;
  color:
    var(--hgs-pink);
  font-size: 10px;
  margin-bottom: 8px;
}
.dance-forms strong {
  display: block;
  color:
    var(--hgs-navy);
  font-size: 18px;
}
/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1000px) {
  .hero-side-text {
    display: none;
  }
  .art-grid, .art-grid.reverse {
    grid-template-columns: 1fr;
    gap: 55px;
  }
  .art-grid.reverse .art-image {
    order: -1;
  }
  .art-image {
    min-height: 500px;
  }
  .vertical-label {
    display: none;
  }
  .theatre-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .theatre-features {
    grid-template-columns:
      repeat(2, 1fr);
  }
  .contact-grid {
    grid-template-columns:
      1fr 1fr;
  }
  .contact-details {
    grid-column:
      1 / -1;
  }
}
@media (max-width: 650px) {
  .container {
    width:
      calc(100% - 28px);
  }
  .art-section, .theatre-section, .arts-map, .contact-section {
    padding: 75px 0;
  }
  .arts-intro .container {
    grid-template-columns:
      1fr;
    gap: 10px;
  }
  .intro-number {
    font-size: 65px;
  }
  .art-image {
    min-height: 420px;
  }
  .dance-forms {
    grid-template-columns:
      1fr;
  }
  .theatre-number {
    font-size: 100px;
    top: -20px;
  }
  .theatre-heading h2 {
    font-size: 70px;
  }
  .theatre-features {
    grid-template-columns:
      1fr;
  }
  .contact-grid {
    grid-template-columns:
      1fr;
  }
  .contact-details {
    grid-column:
      auto;
  }
}
:root {
  --hgs-purple: #7773c7;
  --hgs-pink: #df8296;
  --hgs-orange: #f2b45d;
  --hgs-teal: #62b5aa;
  --hgs-green: #046a58;
  --hgs-navy: #1b325c;
  --hgs-text: #4b5563;
}
/* Workshops */
.dorm-page {
  padding: 50px 0px;
}
.hgs-workshops {
  padding: 90px 20px;
  background: #f8f8fb;
}
.hgs-workshops-container {
  margin: auto;
}
/* Heading */
.hgs-workshops-heading {
  max-width: 700px;
  margin: 0 auto 50px;
  text-align: center;
}
.hgs-workshops-heading span {
  color: var(--hgs-purple);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hgs-workshops-heading h2 {
  margin: 12px 0;
  color: var(--hgs-navy);
  font-size: 48px;
  line-height: 1.1;
}
.hgs-workshops-heading p {
  margin: 0;
  color: var(--hgs-text);
  font-size: 16px;
  line-height: 1.7;
}
/* Grid */
.hgs-workshop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* Cards */
.hgs-workshop-card {
  position: relative;
  min-height: 150px;
  padding: 28px;
  display: flex;
  align-items: flex-end;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(27, 50, 92, 0.07);
  transition: 0.3s ease;
}
.hgs-workshop-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(27, 50, 92, 0.13);
}
/* Number */
.hgs-workshop-card span {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 42px;
  font-weight: 800;
  color: var(--card-color);
  opacity: 0.12;
}
/* Title */
.hgs-workshop-card h3 {
  margin: 0;
  max-width: 85%;
  color: var(--hgs-navy);
  font-size: 20px;
  line-height: 1.35;
}
/* Colours */
.hgs-workshop-card.purple {
  --card-color: var(--hgs-purple);
  border-top: 5px solid var(--hgs-purple);
}
.hgs-workshop-card.pink {
  --card-color: var(--hgs-pink);
  border-top: 5px solid var(--hgs-pink);
}
.hgs-workshop-card.orange {
  --card-color: var(--hgs-orange);
  border-top: 5px solid var(--hgs-orange);
}
.hgs-workshop-card.teal {
  --card-color: var(--hgs-teal);
  border-top: 5px solid var(--hgs-teal);
}
.hgs-workshop-card.green {
  --card-color: var(--hgs-green);
  border-top: 5px solid var(--hgs-green);
}
.hgs-workshop-card.navy {
  --card-color: var(--hgs-navy);
  border-top: 5px solid var(--hgs-navy);
}
/* Tablet */
@media (max-width: 900px) {
  .hgs-workshop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Mobile */
@media (max-width: 600px) {
  .hgs-workshops {
    padding: 60px 16px;
  }
  .hgs-workshops-heading h2 {
    font-size: 38px;
  }
  .hgs-workshop-grid {
    grid-template-columns: 1fr;
  }
  .hgs-workshop-card {
    min-height: 120px;
  }
}
.eyebrow, .section-kicker {
  font-family: var(--outfit);
  font-weight: 800;
  letter-spacing: .16em;
  font-size: 12px;
  color: var(--hgs-teal);
}
.content-wrap {
  position: relative;
  z-index: 5;
}
.intro-card, .split-card, .feature-card, .schedule-strip {
  background: #fff;
  border: 1px solid rgba(27, 50, 92, .07);
  box-shadow: 0 18px 55px rgba(27, 50, 92, .08);
  border-radius: 28px;
}
.intro-card {
  padding: 48px 55px;
  display: grid;
 /* grid-template-columns: 7px 1fr;*/w
  gap: 28px;
}
.accent-bar {
  border-radius: 10px;
  background: linear-gradient(var(--hgs-teal), var(--hgs-purple), var(--hgs-pink));
}
.split-card {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 43% 57%;
  overflow: hidden;
}
.split-image {
  min-height: 410px;
  overflow: hidden;
}
.split-image img {
  height: 100%;
  object-fit: cover;
  object-position: 20% 62%;
}
.split-copy {
  padding: 55px;
  display: flex;
  align-items: center;
}
.schedule-strip {
  margin: 28px 0 80px;
  padding: 24px 30px;
  display: flex;
  gap: 20px;
  align-items: center;
  background: linear-gradient(105deg, rgba(98, 181, 170, .13), rgba(119, 115, 199, .09));
}
.schedule-strip p {
  margin: 0;
}
.schedule-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--hgs-teal);
  color: #fff;
  font-size: 25px;
  box-shadow: 0 8px 20px rgba(98, 181, 170, .3);
}
.section-block {
  margin-top: 65px;
}
.section-heading {
  margin: 0 0 25px 8px;
}
.section-heading h2 {
  margin: 3px 0 0;
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1;
}
.section-heading em {
  font-family: var(--caveat);
  font-style: normal;
  color: var(--hgs-purple);
  font-size: 1.05em;
}
.pink-heading em {
  color: var(--hgs-pink);
}
.orange-heading em {
  color: var(--hgs-orange);
}
.feature-card {
  overflow: hidden;
  display: grid;
  grid-template-columns: 46% 54%;
}
.feature-image {
  min-height: 430px;
}
.feature-image img {
  height: 100%;
  object-fit: cover;
}
.feature-copy {
  padding: 50px 55px;
}
.purple-card {
  border-top: 7px solid var(--hgs-purple);
}
.pink-card {
  border-top: 7px solid var(--hgs-pink);
}
.orange-card {
  border-top: 7px solid var(--hgs-orange);
}
.purple-card .feature-image img {
  object-position: 70% 20%;
}
.pink-card .feature-image img {
  object-position: 18% 55%;
}
.orange-card .feature-image img {
  object-position: 84% 78%;
}
@media (max-width: 900px) {
  .content-wrap {
    margin-top: -15px;
  }
  .intro-card {
    padding: 35px;
  }
  .split-card, .feature-card {
    grid-template-columns: 1fr;
  }
  .split-image, .feature-image {
    min-height: 320px;
  }
  .split-copy, .feature-copy {
    padding: 35px;
  }
}
@media (max-width: 600px) {
  .content-wrap {
    width: min(100% - 0px, 1180px);
  }
  .intro-card {
    
    gap: 18px;
    padding: 28px 22px;
    border-radius: 22px;
  }
  p {
    font-size: 15px;
  }
  .split-card, .feature-card {
    border-radius: 22px;
  }
  .split-copy, .feature-copy {
    padding: 28px 22px;
  }
  .schedule-strip {
    align-items: flex-start;
    padding: 22px;
    border-radius: 22px;
  }
  .schedule-icon {
    flex-basis: 45px;
    width: 45px;
    height: 45px;
  }
  .section-block {
    margin-top: 45px;
  }
}
.schedule-page {
  overflow: hidden;
}
/* =========================
   CONTENT
========================= */
.schedule-section {
  margin: 75px auto 0;
}
.sunday-section {
  margin-bottom: 90px;
}
.section-heading {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 25px;
}
.heading-icon {
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: #fff;
  font-size: 28px;
  box-shadow: 0 12px 25px rgba(27, 50, 92, .13);
}
.heading-icon.purple {
  background: linear-gradient(145deg, var(--hgs-purple), #918dd8);
}
.heading-icon.pink {
  background: linear-gradient(145deg, var(--hgs-pink), #eba3b3);
}
.section-heading h2 {
  margin: 0;
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
}
.section-heading h2 em {
  color: var(--hgs-purple);
  font-family: var(--caveat);
  font-size: 1.05em;
  font-style: normal;
  letter-spacing: 0;
}
.pink-theme + * {}
.pink-heading {}
.schedule-card {
  overflow: hidden;
  border: 1px solid rgba(27, 50, 92, .07);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(27, 50, 92, .08);
}
.table-head {
  display: grid;
  grid-template-columns: 245px 1fr;
  padding: 20px 28px;
  color: #fff;
  font-family: var(--outfit);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .05em;
}
.purple-theme .table-head {
  background: linear-gradient(100deg, var(--hgs-purple), var(--hgs-purple));
}
.pink-theme .table-head {
  background: linear-gradient(100deg, var(--hgs-pink), var(--hgs-pink));
}
.schedule-row {
  position: relative;
  display: grid;
  grid-template-columns: 245px 1fr;
  min-height: 61px;
  align-items: center;
  border-bottom: 1px solid #edf0f3;
  transition: background .2s ease, transform .2s ease;
}
.schedule-row:last-child, .schedule-row.last {
  border-bottom: 0;
}
.schedule-row:hover {
  background: #fbfcfd;
}
.time {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 14px 28px;
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: 14px;
  font-weight: 800;
  background: #fafbfc;
  border-right: 1px solid #edf0f3;
}
.activity {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 61px;
  padding: 14px 28px;
  color: var(--hgs-text);
  font-size: 15px;
  font-weight: 600;
}
.dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
}
.purple-theme .dot {
  background: var(--hgs-purple);
  box-shadow: 0 0 0 5px rgba(119, 115, 199, .11);
}
.pink-theme .dot {
  background: var(--hgs-pink);
  box-shadow: 0 0 0 5px rgba(223, 130, 150, .11);
}
/* Alternating visual rhythm */
.purple-theme .schedule-row:nth-child(odd) .time {
  background: #faf9ff;
}
.pink-theme .schedule-row:nth-child(odd) .time {
  background: #fff9fa;
}
/* =========================
   RESPONSIVE
========================= */
@media (max-width: 800px) {
  .table-head, .schedule-row {
    grid-template-columns: 190px 1fr;
  }
  .time, .activity {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 600px) {
  .schedule-section {
    width: min(100% - 24px, 1120px);
    margin-top: 50px;
  }
  .sunday-section {
    margin-bottom: 55px;
  }
  .hero h1 {
    font-size: 64px;
  }
  .hero h1 span {
    margin-left: 15px;
  }
  .hero-content p {
    font-size: 15px;
  }
  .section-heading {
    gap: 12px;
  }
  .heading-icon {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
    border-radius: 16px;
    font-size: 22px;
  }
  .section-heading h2 {
    font-size: 36px;
  }
  .schedule-card {
    border-radius: 20px;
  }
  .table-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 17px 18px;
    font-size: 13px;
  }
  .table-head div:first-child {
    opacity: .8;
  }
  .schedule-row {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .time {
    min-height: 43px;
    padding: 10px 17px 5px;
    border-right: 0;
    border-bottom: 0;
    background: #fff !important;
    color: var(--hgs-purple);
  }
  .pink-theme .time {
    color: var(--hgs-pink);
  }
  .activity {
    min-height: 50px;
    padding: 5px 17px 15px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.5;
  }
  .dot {
    margin-top: 7px;
  }
  .hero-dots {
    opacity: .45;
    left: 3%;
  }
}
.ancillary-page {
  overflow: hidden;
  padding: 50px 0px;
}
/* =========================================
   FACILITY CARDS
========================================= */
.facilities {
  margin: 0 auto 90px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px;
}
.facility-card {
  position: relative;
  min-height: 325px;
  padding: 32px 38px 38px;
  overflow: hidden;
  border-radius: 25px;
  background: #fff;
  border: 1px solid rgba(27, 50, 92, .07);
  box-shadow: 0 15px 45px rgba(27, 50, 92, .065);
  transition:
    transform .25s ease, box-shadow .25s ease;
}
.facility-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 7px;
  background: var(--card-color);
}
.facility-card::after {
  content: "";
  position: absolute;
  width: 145px;
  height: 145px;
  right: -75px;
  bottom: -75px;
  border-radius: 50%;
  background: var(--card-color);
  opacity: .08;
  transition: transform .35s ease;
}
.facility-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 28px 65px rgba(27, 50, 92, .12);
}
.facility-card:hover::after {
  transform: scale(1.5);
}
.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-number {
  color: var(--card-color);
  font-family: var(--outfit);
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  opacity: .25;
}
.card-label {
  color: var(--card-color);
  font-family: var(--outfit);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
}
.card-content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin-top: 14px;
}
.card-content h3 {
  max-width: 550px;
  margin: 0;
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: clamp(18px, 2.5vw, 18px);
  font-weight: 500;
  line-height: 1.08;
}
.card-line {
  width: 55px;
  height: 4px;
  margin: 17px 0 18px;
  border-radius: 20px;
  background: var(--card-color);
}
.card-content p {
  margin: 0;
  font-size: 16px;
  line-height: 1.78;
}
.purple {
  --card-color: var(--hgs-purple);
}
.teal {
  --card-color: var(--hgs-teal);
}
.orange {
  --card-color: var(--hgs-orange);
}
.pink {
  --card-color: var(--hgs-pink);
}
.green {
  --card-color: var(--hgs-green);
}
.purple-teal {
  --card-color: var(--hgs-purple);
}
.purple-teal::before {
  background: linear-gradient(90deg, var(--hgs-purple), var(--hgs-teal));
}
/* =========================================
   BOTTOM
========================================= */
/* =========================================
   TABLET
========================================= */
@media (max-width: 900px) {
  .facilities {
    grid-template-columns: 1fr;
    max-width: 720px;
  }
}
/* =========================================
   MOBILE
========================================= */
@media (max-width: 600px) {
  .shape-three {
    bottom: 80px;
  }
  .facilities {
    gap: 18px;
    margin-bottom: 60px;
  }
  .facility-card {
    min-height: 0;
    padding: 27px 23px 32px;
    border-radius: 21px;
  }
  .card-number {
    font-size: 34px;
  }
  .card-label {
    font-size: 9px;
  }
  .card-content {
    margin-top: 27px;
  }
  .card-content h3 {
    font-size: 25px;
  }
  .card-content p {
    font-size: 14px;
  }
}
@media (max-width: 380px) {
  .facility-card {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* HGS Sports Grid */ :root {
  --hgs-purple: #7773c7;
  --hgs-pink: #df8296;
  --hgs-orange: #f2b45d;
  --hgs-teal: #62b5aa;
  --hgs-green: #046a58;
  --hgs-navy: #1b325c;
  --hgs-text: #4b5563;
  --nunito: "Nunito", sans-serif;
  --nunito-sans: "Nunito Sans", sans-serif;
  --caveat: "Caveat", cursive;
  --outfit: "Outfit", sans-serif;
  --recoleta: "Nunito", sans-serif;
  --satoshi: "Satoshi", sans-serif;
}
.sports-section {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.sports-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.sport-card {
  position: relative;
  min-width: 0;
  background: #fff;
  border: 1px solid #e8e8ee;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(30, 40, 70, .07);
  transition: transform .25s ease, box-shadow .25s ease;
}
.sport-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 9px 20px rgba(30, 40, 70, .13);
}
.sport-card img {
  width: 100%;
  /*aspect-ratio: 1.44 / 1;*/
  display: block;
  object-fit: cover;
}
.card-content {
  position: relative;
  padding: 1px 10px 10px;
  min-height: 43px;
  background: #fff;
}
.card-content::after {
  content: "";
  position: absolute;
  left: 10px;
  bottom: 5px;
  width: 32px;
  height: 2px;
  border-radius: 10px;
  background: currentColor;
}
.number {
  position: absolute;
  z-index: 2;
  top: -266px;
  left: 19px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font: 700 9px/1 var(--nunito);
  background: currentColor;
  border: 2px solid rgba(255, 255, 255, .9);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
h3 {
  margin: 0;
  font: 700 12px/1.15 var(--nunito);
  letter-spacing: -.1px;
}
.purple .card-content, .purple .card-content::after {
  color: var(--hgs-purple);
}
.pink .card-content, .pink .card-content::after {
  color: var(--hgs-pink);
}
.orange .card-content, .orange .card-content::after {
  color: var(--hgs-orange);
}
.teal .card-content, .teal .card-content::after {
  color: var(--hgs-teal);
}
.green .card-content, .green .card-content::after {
  color: var(--hgs-green);
}
.dots {
  position: absolute;
  right: 2px;
  bottom: 0;
  display: flex;
  gap: 5px;
  align-items: center;
}
.dots i {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--hgs-teal);
  opacity: .8;
}
@media (max-width: 700px) {
  .sports-section {
    padding: 8px 10px 25px;
  }
  .sports-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }
  .card-content {
    padding: 7px 8px 10px;
    min-height: 41px;
  }
  .card-content::after {
    left: 8px;
  }
  .number {
    top: -84px;
    left: 5px;
    width: 20px;
    height: 20px;
    font-size: 8px;
  }
  h3 {
    font-size: 11px;
  }
}
@media (max-width: 460px) {
  .sports-section {
    padding: 6px 7px 23px;
  }
  .sports-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .sport-card img {
    aspect-ratio: 1.55 / 1;
  }
  .card-content {
    padding: 8px 9px 11px;
    min-height: 42px;
  }
  .card-content::after {
    left: 9px;
    bottom: 5px;
    width: 29px;
  }
  .number {
    top: -90px;
    left: 6px;
  }
  h3 {
    font-size: 18px;
        padding-bottom: 20px;
  }
}
@media (max-width: 330px) {
  .sports-grid {
    gap: 6px;
  }
  h3 {
    font-size: 10.5px;
  }
}
/* Remote image robustness */
.sport-card img {
  min-height: 0;
  object-position: center;
  background: #eef1f3;
}
/* =========================================================
   HGS COLOURED BORDER + VISIBLE WAVE
   ========================================================= */
.sport-card {
  --card-color: var(--hgs-purple);
  border: 1.5px solid color-mix(in srgb, var(--card-color) 38%, #ffffff);
  isolation: isolate;
  overflow: hidden;
}
.sport-card.purple {
  --card-color: var(--hgs-purple);
}
.sport-card.pink {
  --card-color: var(--hgs-pink);
}
.sport-card.orange {
  --card-color: var(--hgs-orange);
}
.sport-card.teal {
  --card-color: var(--hgs-teal);
}
.sport-card.green {
  --card-color: var(--hgs-green);
}
/* Keep the photo clean and let the wave sit over its bottom edge */
.sport-card img {
  position: relative;
  z-index: 1;
}
/* Coloured wave */
.sport-card .card-content::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: -2%;
  right: -2%;
  top: -33px;
  height: 20px;
  background: var(--card-color);
  clip-path: polygon(0 58%, 7% 38%, 14% 25%, 21% 31%, 28% 52%, 35% 72%, 42% 78%, 49% 63%, 56% 38%, 63% 25%, 70% 28%, 77% 48%, 84% 69%, 91% 76%, 100% 58%, 100% 100%, 0 100%);
}
/* White cut-out below the coloured wave makes the wave distinct */
.sport-card .card-content::after {
  z-index: 4;
  background: #fff;
  height: 3px;
  bottom: 5px;
  width: 32px;
}
/* Colour-specific heading + underline */
.sport-card .card-content {
  color: var(--card-color);
}
.sport-card h3 {
  color: var(--card-color);
}
.sport-card .number {
  background: var(--card-color);
}
@media (max-width: 700px) {
  .sport-card {
    border-width: 1.5px;
  }
  .sport-card .card-content::before {
    height: 12px;
    top: -8px;
  }
}
@media (max-width: 460px) {
  .sport-card .card-content::before {
    height: 12px;
    top: -8px;
  }
}
<style > /* =========================================
   HGS VARIABLES
========================================= */ :root {
  --hgs-purple: #7773c7;
  --hgs-pink: #df8296;
  --hgs-orange: #f2b45d;
  --hgs-teal: #62b5aa;
  --hgs-green: #046a58;
  --hgs-navy: #1b325c;
  --hgs-text: #4b5563;
  --nunito: "Nunito", sans-serif;
  --nunito-sans: "Nunito Sans", sans-serif;
  --caveat: "Caveat", cursive;
  --outfit: "Outfit", sans-serif;
  --recoleta: "Nunito", sans-serif;
  --satoshi: "Satoshi", sans-serif;
}
/* =========================================
   SECTION
========================================= */
.hgs-learning-centre {
  padding: 50px 20px;
  background: #fff;
}
.hgs-lc-container {
  width: min(1200px, 100%);
  margin: auto;
}
/* =========================================
   HEADING
========================================= */
.hgs-lc-heading {
  max-width: 780px;
  margin: 0 auto 55px;
  text-align: center;
}
.hgs-lc-kicker {
  display: inline-block;
  margin-bottom: 14px;
  padding: 7px 18px;
  border-radius: 50px;
  background: rgba(119, 115, 199, .10);
  color: var(--hgs-purple);
  font-family: var(--nunito-sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.hgs-lc-heading h2 {
  margin: 0 0 16px;
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.05;
}
.hgs-lc-heading h2 span {
  color: var(--hgs-purple);
}
.hgs-lc-heading p {
  max-width: 650px;
  margin: auto;
  color: var(--hgs-text);
  font-family: var(--nunito-sans);
  font-size: 17px;
  line-height: 1.7;
}
/* =========================================
   TABS
========================================= */
.hgs-lc-tabs {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 22px;
  padding: 7px;
  border: 1px solid rgba(27, 50, 92, .10);
  border-radius: 100px;
  background: #f8f9fc;
}
.hgs-lc-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 0;
  border-radius: 60px;
  background: transparent;
  color: var(--hgs-text);
  font-family: var(--nunito-sans);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition:
    color .3s ease, background .3s ease, transform .3s ease;
}
.hgs-lc-tab:hover {
  color: var(--hgs-purple);
}
.hgs-lc-tab.active {
  color: #fff;
  background: var(--hgs-purple);
  box-shadow: 0 8px 22px rgba(119, 115, 199, .28);
}
.hgs-tab-number {
  font-size: 11px;
  opacity: .7;
}
/* =========================================
   PANELS
========================================= */
.hgs-lc-panel {
  display: none;
}
.hgs-lc-panel.active {
  display: block;
  animation: hgsPanelIn .6s ease both;
}
@keyframes hgsPanelIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================================
   GALLERY
========================================= */
.hgs-lc-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 300px 300px;
  gap: 18px;
}
/* =========================================
   CARDS
========================================= */
.hgs-lc-card {
  position: relative;
  overflow: hidden;
  border-radius: 25px;
  background: var(--hgs-navy);
  cursor: pointer;
  box-shadow:
    0 12px 35px rgba(27, 50, 92, .10);
}
.hgs-lc-card-large {
  grid-row: span 2;
}
.hgs-lc-card-wide {
  grid-column: span 2;
}
.hgs-lc-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition:
    transform .8s cubic-bezier(.2, .7, .2, 1), filter .5s ease;
}
.hgs-lc-card:hover img {
  transform: scale(1.08);
  filter: brightness(.68);
}
/* =========================================
   CARD CONTENT
========================================= */
.hgs-lc-card-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 80px 26px 25px;
  color: #fff;
  background:
    linear-gradient(to top, rgba(27, 50, 92, .94), rgba(27, 50, 92, 0));
  transform: translateY(8px);
  transition: transform .4s ease;
}
.hgs-lc-card:hover .hgs-lc-card-content {
  transform: translateY(0);
}
.hgs-lc-card-content small {
  display: block;
  margin-bottom: 7px;
  color: var(--hgs-orange);
  font-family: var(--nunito-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.hgs-lc-card-content h3 {
  margin: 0;
  color: #fff;
  font-family: var(--outfit);
  font-size: 25px;
  line-height: 1.15;
}
.hgs-view {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--nunito-sans);
  font-size: 13px;
  opacity: 0;
  transform: translateY(8px);
  transition: all .35s ease;
}
.hgs-lc-card:hover .hgs-view {
  opacity: 1;
  transform: translateY(0);
}
/* =========================================
   LIGHTBOX
========================================= */
.hgs-lc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: rgba(14, 24, 44, .95);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all .3s ease;
}
.hgs-lc-lightbox.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.hgs-lc-lightbox-inner {
  max-width: 1000px;
  max-height: 90vh;
  text-align: center;
}
.hgs-lc-lightbox-inner img {
  max-width: 90vw;
  max-height: 78vh;
  display: block;
  margin: auto;
  border-radius: 15px;
  object-fit: contain;
}
.hgs-lc-lightbox-inner h3 {
  margin: 15px 0 0;
  color: #fff;
  font-family: var(--outfit);
  font-size: 20px;
}
/* LIGHTBOX BUTTONS */
.hgs-lc-close, .hgs-lc-prev, .hgs-lc-next {
  position: absolute;
  z-index: 3;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 25px;
  cursor: pointer;
  transition: all .25s ease;
}
.hgs-lc-close:hover, .hgs-lc-prev:hover, .hgs-lc-next:hover {
  background: var(--hgs-purple);
  transform: scale(1.08);
}
.hgs-lc-close {
  top: 25px;
  right: 25px;
}
.hgs-lc-prev {
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
}
.hgs-lc-next {
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
}
body.hgs-lc-lock {
  overflow: hidden;
}
/* =========================================
   TABLET
========================================= */
@media(max-width:900px) {
  .hgs-learning-centre {
    padding: 75px 18px;
  }
  .hgs-lc-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows:
      260px 260px;
  }
}
/* =========================================
   MOBILE
========================================= */
@media(max-width:600px) {
  .hgs-learning-centre {
    padding: 60px 15px;
  }
  .hgs-lc-heading {
    margin-bottom: 35px;
  }
  .hgs-lc-heading h2 {
    font-size: 37px;
  }
  .hgs-lc-heading p {
    font-size: 15px;
  }
  .hgs-lc-tabs {
    width: 100%;
    justify-content: stretch;
    border-radius: 20px;
    padding: 5px;
  }
  .hgs-lc-tab {
    flex: 1;
    justify-content: center;
    padding: 12px 7px;
    font-size: 12px;
  }
  .hgs-tab-number {
    display: none;
  }
  .hgs-lc-gallery {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 260px);
    gap: 14px;
  }
  .hgs-lc-card, .hgs-lc-card-large, .hgs-lc-card-wide {
    grid-column: span 1;
    grid-row: span 1;
    border-radius: 18px;
  }
  .hgs-lc-card-content {
    padding: 60px 18px 20px;
  }
  .hgs-lc-card-content h3 {
    font-size: 21px;
  }
  .hgs-view {
    opacity: 1;
    transform: none;
  }
  .hgs-lc-lightbox {
    padding: 15px;
  }
  .hgs-lc-lightbox-inner img {
    max-width: 94vw;
    max-height: 70vh;
  }
  .hgs-lc-close {
    top: 15px;
    right: 15px;
    width: 42px;
    height: 42px;
  }
  .hgs-lc-prev, .hgs-lc-next {
    width: 40px;
    height: 40px;
    font-size: 19px;
  }
  .hgs-lc-prev {
    left: 8px;
  }
  .hgs-lc-next {
    right: 8px;
  }
}
:root {
  --hgs-purple: #7773c7;
  --hgs-pink: #df8296;
  --hgs-orange: #f2b45d;
  --hgs-teal: #62b5aa;
  --hgs-green: #046a58;
  --hgs-navy: #1b325c;
  --hgs-text: #4b5563;
  --nunito: "Nunito", sans-serif;
  --nunito-sans: "Nunito Sans", sans-serif;
  --caveat: "Caveat", cursive;
  --outfit: "Outfit", sans-serif;
}
.academic-programme {
  padding: 80px 20px;
}
.academic-container {
  margin: auto;
}
/* =================================
   INTRO CARD
================================= */
.intro-card {
  background: #fff;
  border-radius: 24px;
  padding: 35px 40px;
  border: 1px solid #edf0f3;
  box-shadow: 0 15px 40px rgba(27, 50, 92, .07);
  position: relative;
  overflow: hidden;
  margin-bottom: 65px;
}
.intro-card:before {
  content: "";
  position: absolute;
  width: 7px;
  height: 100%;
  left: 0;
  top: 0;
  background: linear-gradient(to bottom, var(--hgs-purple), var(--hgs-pink), var(--hgs-orange), var(--hgs-green));
}
.intro-card p {
  font-size: 15px;
  line-height: 1.85;
}
.intro-card p + p {
  margin-top: 14px;
}
/* =================================
   SECTION TITLE
================================= */
.programme-section {
  margin-bottom: 75px;
}
.section-title {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-bottom: 25px;
}
.section-number {
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--outfit);
  font-size: 16px;
  font-weight: 800;
  position: relative;
}
.section-number:after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  opacity: .45;
  top: 8px;
  right: 8px;
}
.section-title small {
  display: block;
  color: var(--hgs-text);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
}
.section-title h2 {
  font-family: var(--outfit);
  color: var(--hgs-navy);
  font-size: 22px;
  padding: 7px 0px;
  line-height: 1.2;
}
.purple .section-number {
  background: var(--hgs-purple);
}
.pink .section-number {
  background: var(--hgs-pink);
}
.orange .section-number {
  background: var(--hgs-orange);
}
.teal .section-number {
  background: var(--hgs-teal);
}
.green .section-number {
  background: var(--hgs-green);
}
/* =================================
   H-MYP
================================= */
.myp-box {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 22px;
}
.content-card {
  background: #fff;
  padding: 30px;
  border-radius: 20px;
  border: 1px solid #edf0f3;
  box-shadow: 0 10px 30px rgba(27, 50, 92, .06);
}
.content-card p {
  font-size: 16px;
  line-height: 1.85;
}
.content-card p + p {
  margin-top: 15px;
}
.content-card h3 {
  font-family: var(--outfit);
  color: var(--hgs-green);
  font-size: 20px;
  margin-bottom: 18px;
}
.language-list {
  list-style: none;
  padding-bottom: 20px;
}
.language-list li {
  padding: 10px 13px;
  margin-bottom: 8px;
  background: #f7f7fb;
  border-radius: 8px;
  font-size: 16px;
  border-left: 3px solid var(--hgs-purple);
}
.language-list li:nth-child(2) {
  border-color: var(--hgs-pink);
}
.language-list li:nth-child(3) {
  border-color: var(--hgs-orange);
}
.language-list li:nth-child(4) {
  border-color: var(--hgs-teal);
}
.language-list li:nth-child(5) {
  border-color: var(--hgs-green);
}
/* =================================
   SIMPLE TABLE
================================= */
.table-card {
  background: #fff;
  border: 1px solid #e5e8ec;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(27, 50, 92, .06);
  margin-bottom: 20px;
}
.table-scroll {
  overflow-x: auto;
}
.academic-table {
  width: 100%;
  border-collapse: collapse;
}
.academic-table th {
  background: var(--hgs-navy);
  color: #fff;
  text-align: left;
  padding: 16px 20px;
  font-family: var(--outfit);
  font-size: 18px;
  font-weight: 600;
}
.academic-table td {
  padding: 15px 20px;
  border-bottom: 1px solid #edf0f3;
  font-size: 16px;
  vertical-align: top;
}
.academic-table tbody tr:last-child td {
  border-bottom: 0;
}
.academic-table tbody tr:nth-child(even) {
  background: #fafbfc;
}
.academic-table tbody tr {
  transition: .2s ease;
}
.academic-table tbody tr:hover {
  background: #f5f7fa;
}
.academic-table td:first-child {
  width: 32%;
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-weight: 700;
}
/* =================================
   SUBJECT HIGHLIGHT
================================= */
.subject-highlight {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.subject-highlight span {
  background: #f0f7f5;
  color: var(--hgs-green);
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 16px;
}
/* =================================
   STREAM TABLES
================================= */
.stream-table {
  background: #fff;
  border-radius: 20px;
  border: 1px solid #e5e8ec;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(27, 50, 92, .06);
  margin-bottom: 20px;
}
.stream-table-title {
  padding: 20px 22px;
  color: #fff;
  font-family: var(--outfit);
  font-size: 18px;
  letter-spacing: .2px;
}
.stream-commerce .stream-table-title {
  background: var(--hgs-orange);
}
.stream-humanities .stream-table-title {
  background: var(--hgs-pink);
}
.stream-science .stream-table-title {
  background: var(--hgs-teal);
}
.stream-row {
  display: grid;
  grid-template-columns: 30% 70%;
}
.stream-row > div {
  padding: 19px 20px;
  border-bottom: 1px solid #edf0f3;
  font-size: 16px;
    line-height: 20px;
    color: #000;
}
.stream-row > div:first-child {
  background: #f7f8fa;
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-weight: 700;
  border-right: 1px solid #edf0f3;
}
.stream-row:last-child > div {
  border-bottom: 0;
}
/* =================================
   A LEVEL
================================= */
.alevel-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.alevel-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #e5e8ec;
  box-shadow: 0 10px 30px rgba(27, 50, 92, .06);
}
.alevel-card-title {
  padding: 20px 20px;
  background: var(--hgs-purple);
  color: #fff;
  font-family: var(--outfit);
  font-size: 17px;
}
.alevel-card:nth-child(2) .alevel-card-title {
  background: var(--hgs-orange);
}
.alevel-card:nth-child(3) .alevel-card-title {
  background: var(--hgs-green);
}
.alevel-table {
  width: 100%;
  border-collapse: collapse;
}
.alevel-table td {
  padding: 13px 17px;
  border-bottom: 1px solid #edf0f3;
  font-size: 15px;
  vertical-align: top;
}
.alevel-table tr:last-child td {
  border-bottom: 0;
}
.alevel-table td:first-child {
  width: 40%;
  background: #fafafa;
  color: var(--hgs-navy);
  font-weight: 700;
}
/* =================================
   CAMBRIDGE
================================= */
.cambridge-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #e5e8ec;
  box-shadow: 0 10px 30px rgba(27, 50, 92, .06);
}
.cambridge-scroll {
  overflow-x: auto;
}
.cambridge-table {
  width: 100%;
  min-width: 750px;
  border-collapse: collapse;
}
.cambridge-table th {
  background: var(--hgs-green);
  color: #fff;
  padding: 16px 20px;
  text-align: left;
  font-family: var(--outfit);
  font-size: 18px;
}
.cambridge-table td {
  padding: 14px 20px;
  border-bottom: 1px solid #edf0f3;
  border-right: 1px solid #edf0f3;
  font-size: 16px;
  vertical-align: top;
}
.cambridge-table td:last-child {
  border-right: 0;
}
.cambridge-table tr:last-child td {
  border-bottom: 0;
}
.cambridge-table td:first-child {
  width: 18%;
  color: var(--hgs-purple);
  font-family: var(--outfit);
  font-weight: 800;
}
.cambridge-table td:nth-child(2) {
  width: 25%;
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-weight: 700;
}
.cambridge-note {
  margin-top: 18px;
    line-height: 19px;
    padding: 17px 20px;
    color: #121212;
  background: #eef7f5;
  border-radius: 10px;
  border-left: 4px solid var(--hgs-green);
  font-size: 13px;
}
/* =================================
   RESPONSIVE
================================= */
@media (max-width: 900px) {
  .myp-box {
    grid-template-columns: 1fr;
  }
  .alevel-box {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .academic-programme {
    padding: 55px 0px;
  }
  .intro-card {
    padding: 27px;
  }
  .section-title h2 {
    font-size: 24px;
  }
  .programme-section {
    margin-bottom: 55px;
  }
  .academic-table {
    min-width: 650px;
  }
  .stream-row {
    grid-template-columns: 1fr;
  }
  .stream-row > div:first-child {
    border-right: 0;
    border-bottom: 1px solid #edf0f3;
  }
}
@media (max-width: 480px) {
  .academic-programme {
    padding: 45px 0px;
  }
  .intro-card {
    padding: 22px;
    border-radius: 17px;
  }
  .section-title {
    gap: 11px;
  }
  .section-number {
    width: 43px;
    height: 43px;
    min-width: 43px;
    border-radius: 13px;
  }
  .section-title h2 {
    font-size: 20px;
  }
  .content-card {
    padding: 22px;
  }
  .table-card, .stream-table, .alevel-card, .cambridge-card {
    border-radius: 16px;
  }
  .academic-table th, .academic-table td {
    padding: 12px 14px;
  }
}
.learning-page {
  margin: auto;
  padding: 80px 20px;
}
/* ===============================
   SECTION
================================ */
.info-section {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 60px;
  padding: 30px 0;
  border-top: 1px solid #e9ebef;
}
.info-section:first-of-type {
  border-top: 0;
}
.section-label {
  position: sticky;
  top: 30px;
  align-self: start;
}
.section-no {
  font-family: var(--outfit);
  font-size: 70px;
  font-weight: 800;
  line-height: .8;
  color: #edf0f5;
}
.section-label h2 {
  font-family: var(--outfit);
  color: var(--hgs-navy);
  font-size: 25px;
  line-height: 1.2;
  margin-top: 40px;
}
.section-label .line {
  width: 45px;
  height: 4px;
  border-radius: 10px;
  margin-top: 18px;
  background: var(--hgs-purple);
}
.section-pink .line {
  background: var(--hgs-pink);
}
.section-orange .line {
  background: var(--hgs-orange);
}
.section-teal .line {
  background: var(--hgs-teal);
}
.section-green .line {
  background: var(--hgs-green);
}
/* ===============================
   CONTENT
================================ */
.content-area > p {
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 20px;
}
.content-area h3 {
  font-family: var(--outfit);
  color: var(--hgs-navy);
  font-size: 22px;
  margin: 35px 0 18px;
}
/* ===============================
   HIGHLIGHT
================================ */
.highlight {
  padding: 28px 30px;
  background: #f7f7fb;
  border-radius: 18px;
  border-left: 5px solid var(--hgs-purple);
  margin-bottom: 30px;
}
.highlight p {
  font-size: 15px;
  line-height: 1.85;
}
/* ===============================
   BENEFITS LIST
================================ */
.clean-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.clean-list li {
  position: relative;
  padding: 15px 0 15px 30px;
  border-bottom: 1px solid #eceef2;
  font-size: 16px;
  line-height: 1.6;
}
.clean-list li:last-child {
  border-bottom: 0;
}
.clean-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 23px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hgs-purple);
}
.clean-list li:nth-child(2)::before {
  background: var(--hgs-pink);
}
.clean-list li:nth-child(3)::before {
  background: var(--hgs-orange);
}
.clean-list li:nth-child(4)::before {
  background: var(--hgs-teal);
}
.clean-list li:nth-child(5)::before {
  background: var(--hgs-green);
}
/* ===============================
   PROTOCOL TIMELINE
================================ */
.timeline {
  position: relative;
  padding-left: 35px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: #e5e7eb;
}
.timeline-item {
  position: relative;
  padding: 0 0 25px 25px;
}
.timeline-item:last-child {
  padding-bottom: 0;
}
.timeline-dot {
  position: absolute;
  left: -1px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--hgs-purple);
}
.timeline-item:nth-child(2) .timeline-dot {
  border-color: var(--hgs-pink);
}
.timeline-item:nth-child(3) .timeline-dot {
  border-color: var(--hgs-orange);
}
.timeline-item:nth-child(4) .timeline-dot {
  border-color: var(--hgs-teal);
}
.timeline-item:nth-child(5) .timeline-dot {
  border-color: var(--hgs-green);
}
.timeline-item:nth-child(6) .timeline-dot {
  border-color: var(--hgs-navy);
}
.timeline-item p {
  font-size: 14px;
  line-height: 1.7;
}
/* ===============================
   TWO COLUMN
================================ */
.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}
.simple-panel {
  border: 1px solid #e6e8ec;
  border-radius: 18px;
  padding: 27px;
}
.simple-panel h3 {
  margin-top: 0;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f1f3;
}
/* ===============================
   LEARNING APPROACH
================================ */
.learning-box {
  background: var(--hgs-navy);
  color: #fff;
  border-radius: 22px;
  padding: 35px;
  margin-bottom: 30px;
}
.learning-box p {
  font-size: 15px;
  line-height: 1.9;
}
.learning-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.learning-point {
  padding: 17px 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid var(--hgs-teal);
  font-size: 14px;
}
.learning-point:nth-child(2) {
  border-color: var(--hgs-purple);
}
.learning-point:nth-child(3) {
  border-color: var(--hgs-orange);
}
.learning-point:nth-child(4) {
  border-color: var(--hgs-pink);
}
.learning-point:nth-child(5) {
  border-color: var(--hgs-green);
}
/* ===============================
   ASSESSMENT
================================ */
.assessment-box {
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  overflow: hidden;
}
.assessment-header {
  padding: 18px 25px;
  background: #f5f6fa;
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: 20px;
}
.assessment-body {
  padding: 28px;
}
.assessment-body p {
  font-size: 16px;
  line-height: 1.85;
  margin-bottom: 18px;
}
.assessment-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.assessment-tags span {
  padding: 7px 12px;
  border-radius: 7px;
  background: #f1f2f5;
  color: var(--hgs-navy);
  font-size: 12px;
}
/* ===============================
   SECONDARY YEARS
================================ */
.secondary-content {
  padding: 30px;
  background: #fff;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
}
.secondary-content p {
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 20px;
}
.secondary-content p:last-child {
  margin-bottom: 0;
}
/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 850px) {
  .info-section {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .section-label {
    position: static;
  }
  .section-no {
    font-size: 50px;
  }
  .section-label h2 {
    margin-top: 10px;
  }
  .two-column {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .learning-page {
    padding: 50px 15px;
  }
  .info-section {
    padding: 45px 0;
  }
  .section-no {
    font-size: 43px;
  }
  .section-label h2 {
    font-size: 23px;
  }
  .highlight, .learning-box, .secondary-content {
    padding: 22px;
  }
  .learning-points {
    grid-template-columns: 1fr;
  }
  .timeline {
    padding-left: 30px;
  }
}
/* =====================================
   MAIN
===================================== */
.leadership {
  margin: auto;
  padding: 80px 25px;
}
/* =====================================
   TITLE
===================================== */
.heading {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 25px;
  align-items: start;
  margin-bottom: 65px;
}
.heading-number {
  font-family: var(--outfit);
  font-size: 70px;
  font-weight: 800;
  color: #eeeeF4;
  line-height: .85;
}
.heading-content {
  position: relative;
  padding-left: 25px;
}
.heading-content::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 4px;
  height: 75px;
  background: linear-gradient(var(--hgs-purple), var(--hgs-pink), var(--hgs-orange));
  border-radius: 10px;
}
.heading-content small {
  font-family: var(--caveat);
  color: var(--hgs-pink);
  font-size: 28px;
}
.heading-content h1 {
  max-width: 850px;
  font-family: var(--outfit);
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.02;
  color: var(--hgs-navy);
  margin-top: 5px;
}
/* =====================================
   INTRO
===================================== */
.intro {
  margin-bottom: 35px;
}
.intro p {
  font-size: 17px;
  line-height: 1.9;
}
.intro p + p {
  margin-top: 22px;
}
/* =====================================
   CONTENT
===================================== */
.content-list {
  border-top: 1px solid #e5e7eb;
}
.content-item {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 70px;
  padding: 23px 0;
  border-bottom: 1px solid #e5e7eb;
}
.content-item:nth-child(1) {
  border-left: 4px solid var(--hgs-purple);
  padding-left: 25px;
}
.content-item:nth-child(2) {
  border-left: 4px solid var(--hgs-pink);
  padding-left: 25px;
}
.content-item:nth-child(3) {
  border-left: 4px solid var(--hgs-orange);
  padding-left: 25px;
}
.content-item:nth-child(4) {
  border-left: 4px solid var(--hgs-teal);
  padding-left: 25px;
}
.item-title {
  font-family: var(--outfit);
  font-size: 22px;
  color: var(--hgs-navy);
}
.item-number {
  display: block;
  font-size: 11px;
  color: #9ca3af;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}
.item-text {
  font-size: 16px;
  line-height: 1.9;
}
/* =====================================
   IMAGE
===================================== */
.leadership-photo {
  margin: 30px 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 15px;
}
.photo-main {
  /*height: 350px;*/
  object-fit: cover;
  border-radius: 22px;
}
.photo-side {
  /*height: 350px;*/
  object-fit: cover;
  border-radius: 22px;
}
/* =====================================
   SKILLS STRIP
===================================== */
.skills-strip {
  background: #f7f7fa;
  padding: 40px;
  border-radius: 22px;
  margin-bottom: 80px;
}
.skills-title {
  font-family: var(--caveat);
  color: var(--hgs-pink);
  font-size: 29px;
  margin-bottom: 20px;
}
.skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.skills-list span {
  padding: 3px 15px;
  background: #fff;
  border-radius: 8px;
  margin-top: 11px;
  font-size: 13px;
  color: var(--hgs-navy);
  border: 1px solid #e5e7eb;
}
.skills-list span:nth-child(1) {
  border-color: var(--hgs-purple);
}
.skills-list span:nth-child(2) {
  border-color: var(--hgs-pink);
}
.skills-list span:nth-child(3) {
  border-color: var(--hgs-orange);
}
.skills-list span:nth-child(4) {
  border-color: var(--hgs-teal);
}
.skills-list span:nth-child(5) {
  border-color: var(--hgs-green);
}
/* =====================================
   STUDENT COUNCIL
===================================== */
.student-council {
  display: grid;
  grid-template-columns: 48% 52%;
  min-height: 500px;
  background: var(--hgs-navy);
  border-radius: 25px;
  overflow: hidden;
}
.council-photo {
  position: relative;
  min-height: 500px;
}
.council-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.council-content {
  padding: 60px;
  color: white;
}
.council-content small {
  font-family: var(--caveat);
  color: var(--hgs-orange);
  font-size: 29px;
}
.council-content h2 {
  font-family: var(--outfit);
  font-size: clamp(30px, 5vw, 30px);
  line-height: 1;
  margin: 8px 0 25px;
}
.council-line {
  width: 55px;
  height: 4px;
  background: var(--hgs-pink);
  border-radius: 10px;
  margin-bottom: 25px;
}
.council-content > p {
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 25px;
}
.council-details {
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.council-detail {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 15px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.council-detail-number {
  color: var(--hgs-orange);
  font-family: var(--outfit);
  font-weight: 700;
}
.council-detail p {
  font-size: 14px;
  line-height: 1.7;
}
/* =====================================
   RESPONSIVE
===================================== */
@media (max-width: 900px) {
  .intro {
    margin-left: 0;
  }
  .content-item {
    grid-template-columns: 180px 1fr;
    gap: 35px;
  }
  .leadership-photo {
    grid-template-columns: 1fr;
  }
  .photo-main, .photo-side {
    height: 350px;
  }
  .student-council {
    grid-template-columns: 1fr;
  }
  .council-photo {
    min-height: 350px;
  }
}
@media (max-width: 600px) {
  .leadership {
    padding: 50px 15px;
  }
  .heading {
    grid-template-columns: 45px 1fr;
    gap: 15px;
    margin-bottom: 40px;
  }
  .heading-number {
    font-size: 45px;
  }
  .heading-content {
    padding-left: 15px;
  }
  .heading-content::before {
    height: 55px;
    width: 3px;
  }
  .heading-content small {
    font-size: 23px;
  }
  .heading-content h1 {
    font-size: 31px;
  }
  .intro {
    margin-bottom: 45px;
  }
  .intro p {
    font-size: 14px;
    line-height: 1.8;
  }
  .content-item {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 28px 0 28px 18px;
  }
  .item-title {
    font-size: 19px;
  }
  .item-text {
    font-size: 14px;
    line-height: 1.8;
  }
  .leadership-photo {
    margin: 45px 0;
    gap: 10px;
  }
  .photo-main {
    height: 260px;
  }
  .photo-side {
    height: 180px;
  }
  .skills-strip {
    padding: 23px;
    border-radius: 16px;
    margin-bottom: 50px;
  }
  .skills-list {
    display: grid;
    grid-template-columns: 1fr;
  }
  .skills-list span {
    padding: 10px 13px;
  }
  .student-council {
    border-radius: 18px;
  }
  .council-photo {
    min-height: 260px;
  }
  .council-content {
    padding: 30px 23px;
  }
  .council-content small {
    font-size: 24px;
  }
  .council-content h2 {
    font-size: 38px;
  }
  .council-content > p {
    font-size: 14px;
    line-height: 1.8;
  }
}
/* ==========================================
   MAIN WRAPPER
========================================== */
.finishing-school {
  margin: auto;
  padding: 80px 20px;
}
/* ==========================================
   INTRO
========================================== */
.finishing-intro {
  display: grid;
  gap: 40px;
  align-items: start;
  padding-bottom: 20px;
}
.intro-title {
  position: sticky;
  top: 30px;
}
.intro-title .small-title {
  font-family: var(--caveat);
  color: var(--hgs-pink);
  font-size: 30px;
}
.intro-title h1 {
  font-family: var(--outfit);
  color: var(--hgs-navy);
  font-size: clamp(42px, 5vw, 62px);
  line-height: 1;
  margin-top: 5px;
}
.intro-title .title-line {
  width: 55px;
  height: 4px;
  border-radius: 10px;
  background: var(--hgs-purple);
  margin-top: 22px;
}
.intro-content p {
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 25px;
}
.intro-content strong {
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: 19px;
}
/* ==========================================
   ALTERNATING SECTIONS
========================================== */
.finishing-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px;
  align-items: center;
  padding: 75px 0;
  border-bottom: 1px solid #e7e8ec;
}
.finishing-item.reverse .item-image {
  order: 1;
}
.finishing-item.reverse .item-content {
  order: 2;
}
/* ==========================================
   IMAGE
========================================== */
.item-image {
  position: relative;
}
.item-image img {
  height: 430px;
  object-fit: cover;
  border-radius: 24px;
}
.item-image::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 70px;
  bottom: -12px;
  left: -12px;
  border-radius: 0 0 0 18px;
  background: var(--hgs-purple);
  z-index: -1;
}
.finishing-item:nth-child(2) .item-image::after {
  background: var(--hgs-pink);
}
.finishing-item:nth-child(3) .item-image::after {
  background: var(--hgs-orange);
}
/* ==========================================
   CONTENT
========================================== */
.item-content .section-number {
  font-family: var(--outfit);
  color: #e9e9f2;
  font-size: 55px;
  font-weight: 700;
  line-height: 1;
}
.item-content h2 {
  color: var(--hgs-navy);
  font-size: clamp(28px, 3vw, 30px);
  line-height: 1.1;
  margin: 8px 0 25px;
}
.item-content h2 span {
  color: var(--hgs-green);
}
.item-content .heading-line {
  width: 45px;
  height: 4px;
  background: var(--hgs-purple);
  border-radius: 10px;
  margin-bottom: 25px;
}
.finishing-item:nth-child(2) .heading-line {
  background: var(--hgs-pink);
}
.finishing-item:nth-child(3) .heading-line {
  background: var(--hgs-orange);
}
/* ==========================================
   LIST
========================================== */
.skill-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.skill-list li {
  position: relative;
  padding: 12px 0 12px 28px;
  border-bottom: 1px solid #eceef1;
  font-size: 16px;
  line-height: 1.6;
}
.skill-list li:last-child {
  border-bottom: none;
}
.skill-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 20px;
  width: 8px;
  height: 8px;
  background: var(--hgs-purple);
  border-radius: 50%;
}
.finishing-item:nth-child(2) .skill-list li::before {
  background: var(--hgs-pink);
}
.finishing-item:nth-child(3) .skill-list li::before {
  background: var(--hgs-orange);
}
.skill-list a {
  color: var(--hgs-green);
  text-decoration: none;
  font-weight: 700;
}
.skill-list a:hover {
  text-decoration: underline;
}
/* ==========================================
   TABLET
========================================== */
@media (max-width: 850px) {
  .finishing-intro {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .intro-title {
    position: static;
  }
  .finishing-item {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .finishing-item.reverse .item-image, .finishing-item.reverse .item-content {
    order: initial;
  }
}
/* ==========================================
   MOBILE
========================================== */
@media (max-width: 600px) {
  .finishing-school {
    padding: 50px 15px;
  }
  .finishing-intro {
    padding-bottom: 45px;
  }
  .intro-title .small-title {
    font-size: 25px;
  }
  .intro-title h1 {
    font-size: 40px;
  }
  .intro-content p {
    font-size: 14px;
    line-height: 1.8;
  }
  .intro-content strong {
    font-size: 17px;
  }
  .finishing-item {
    padding: 50px 0;
    gap: 30px;
  }
  .item-image img {
    height: 280px;
    border-radius: 18px;
  }
  .item-image::after {
    width: 50px;
    height: 50px;
    left: -7px;
    bottom: -7px;
  }
  .item-content .section-number {
    font-size: 42px;
  }
  .item-content h2 {
    font-size: 29px;
    margin-bottom: 20px;
  }
  .skill-list li {
    font-size: 13px;
    padding: 11px 0 11px 25px;
  }
}
/* ==========================================
   MAIN SECTION
========================================== */
.education-section {
  margin: auto;
  padding: 80px 20px;
}
/* ==========================================
   SECTION
========================================== */
.education-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px;
  align-items: center;
  padding: 70px 0;
}
.education-block:first-child {
  padding-top: 0;
}
.education-block:last-child {
  border-bottom: 0;
}
/* ==========================================
   IMAGE
========================================== */
.education-image {
  position: relative;
}
.education-image img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: 25px;
}
.education-image::after {
  content: "";
  position: absolute;
  width: 75px;
  height: 75px;
  left: -12px;
  bottom: -12px;
  background: var(--hgs-purple);
  border-radius: 0 0 0 20px;
  z-index: -1;
}
/* Second section colour */
.education-block:nth-child(2) .education-image::after {
  background: var(--hgs-orange);
}
/* ==========================================
   CONTENT
========================================== */
.education-content {
  position: relative;
}
.education-number {
  font-family: var(--outfit);
  font-size: 65px;
  line-height: .8;
  font-weight: 800;
  color: #eeeeF4;
  margin-bottom: 15px;
}
.education-label {
  display: block;
  font-family: var(--caveat);
  color: var(--hgs-pink);
  font-size: 29px;
  margin-bottom: 5px;
}
.education-content h2 {
  color: var(--hgs-navy);
  font-size: clamp(30px, 4vw, 30px);
  line-height: 1.05;
  margin-bottom: 20px;
}
.education-line {
  width: 55px;
  height: 4px;
  border-radius: 10px;
  background: var(--hgs-purple);
  margin-bottom: 25px;
}
.education-block:nth-child(2) .education-line {
  background: var(--hgs-orange);
}
.education-content p {
  font-size: 15px;
  line-height: 1.95;
}
/* ==========================================
   HIGHLIGHT
========================================== */
.education-highlight {
  margin-top: 28px;
  padding: 18px 20px;
  border-left: 4px solid var(--hgs-teal);
  background: #f7f8f9;
  border-radius: 0 10px 10px 0;
  font-family: var(--nunito);
  font-size: 14px;
  color: var(--hgs-navy);
  line-height: 1.7;
}
/* ==========================================
   REVERSE SECTION
========================================== */
.education-block.reverse .education-image {
  order: 1;
}
.education-block.reverse .education-content {
  order: 2;
}
/* ==========================================
   TABLET
========================================== */
@media (max-width: 850px) {
  .education-section {
    padding: 60px 20px;
  }
  .education-block {
    gap: 40px;
  }
}
/* ==========================================
   MOBILE
========================================== */
@media (max-width: 650px) {
  .education-section {
    padding: 45px 15px;
  }
  .education-block {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 50px 0;
  }
  .education-block:first-child {
    padding-top: 0;
  }
  .education-block.reverse .education-image, .education-block.reverse .education-content {
    order: initial;
  }
  .education-image img {
    height: 280px;
    border-radius: 18px;
  }
  .education-image::after {
    width: 50px;
    height: 50px;
    left: -7px;
    bottom: -7px;
  }
  .education-number {
    font-size: 45px;
  }
  .education-label {
    font-size: 25px;
  }
  .education-content h2 {
    font-size: 32px;
  }
  .education-content p {
    font-size: 14px;
    line-height: 1.8;
  }
  .education-highlight {
    font-size: 13px;
  }
}
/* =========================
       AGE TABLE
    ========================= */
.eligibility-page {
  width: 100%;
  padding: 70px 20px;
}
.age-table-wrapper {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 12px 35px rgba(27, 50, 92, 0.06);
  margin-bottom: 70px;
}
.age-table {
  width: 100%;
  border-collapse: collapse;
}
.age-table th {
  padding: 18px 25px;
  background: var(--hgs-navy);
  color: var(--white);
  text-align: left;
  font-family: var(--outfit);
  font-size: 16px;
  font-weight: 700;
}
.age-table td {
  padding: 16px 25px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}
.age-table tr:last-child td {
  border-bottom: none;
}
.age-table tbody tr {
  transition: 0.2s ease;
}
.age-table tbody tr:hover {
  background: #f8f7ff;
}
.age-table td:first-child {
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-weight: 700;
}
/* =========================
       SECTION
    ========================= */
.content-section {
  margin-bottom: 65px;
}
.content-section:last-child {
  margin-bottom: 0;
}
.section-title {
  position: relative;
  margin-bottom: 22px;
  padding-left: 18px;
}
.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 5px;
  border-radius: 10px;
  background: var(--hgs-purple);
}
.section-title h2 {
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.2;
  font-weight: 700;
}
.content-text {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(27, 50, 92, 0.04);
}
.content-text p {
  font-size: 16px;
  margin-bottom: 20px;
}
.content-text p:last-child {
  margin-bottom: 0;
}
/* Different accent for assessment */
.assessment .section-title::before {
  background: var(--hgs-pink);
}
/* =========================
       CLASS XI REQUIREMENTS
    ========================= */
.requirements .section-title::before {
  background: var(--hgs-orange);
}
.requirements-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(27, 50, 92, 0.04);
}
.requirements-list {
  list-style: none;
}
.requirements-list li {
  position: relative;
  padding: 0 0 16px 32px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
}
.requirements-list li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.requirements-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 2px;
  width: 21px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(4, 106, 88, 0.10);
  color: var(--hgs-green);
  font-size: 12px;
  font-weight: 800;
}
/* =========================
       RESPONSIVE
    ========================= */
@media (max-width: 768px) {
  .eligibility-page {
    padding: 50px 0px;
  }
  .age-table-wrapper {
    overflow-x: auto;
  }
  .age-table {
    min-width: 520px;
  }
  .age-table th, .age-table td {
    padding: 14px 18px;
  }
  .content-text, .requirements-box {
    padding: 24px;
  }
  .content-section {
    margin-bottom: 50px;
  }
}
@media (max-width: 480px) {
  .eligibility-page {
    padding: 40px 0px;
  }
  .main-title h1 {
    font-size: 34px;
  }
  .intro-text {
    font-size: 15px;
  }
  .section-title h2 {
    font-size: 27px;
  }
  .content-text, .requirements-box {
    padding: 20px;
    border-radius: 16px;
  }
  .content-text p, .requirements-list li {
    font-size: 14.5px;
  }
  .age-table-wrapper {
    border-radius: 15px;
  }
}
.fee-page {
  width: 100%;
  padding: 70px 20px;
}
.fee-container {
  margin: 0 auto;
}
/* =========================
       HEADER
    ========================= */
.fee-header {
  margin-bottom: 42px;
}
.fee-header h1 {
  font-family: var(--outfit);
  color: var(--hgs-navy);
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -1.5px;
  margin-bottom: 14px;
}
.fee-header h1::after {
  content: "";
  display: block;
  width: 70px;
  height: 5px;
  border-radius: 20px;
  margin-top: 15px;
  background: linear-gradient(90deg, var(--hgs-purple), var(--hgs-pink));
}
.fee-header > p {
  font-size: 17px;
  color: var(--hgs-text);
  margin-bottom: 10px;
}
.fee-header strong {
  display: inline-block;
  font-family: var(--outfit);
  color: var(--hgs-navy);
  font-size: 19px;
  font-weight: 700;
}
/* =========================
       FEE IMAGE LIGHTBOX CARDS
    ========================= */
.fee-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-bottom: 50px;
}
.fee-image-card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 10px;
  box-shadow: 0 15px 40px rgba(27, 50, 92, 0.08);
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
}
.fee-image-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(27, 50, 92, 0.14);
}
.fee-image {
  position: relative;
  height: 430px;
  overflow: hidden;
  border-radius: 17px;
  background: #f0f0f7;
}
.fee-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .5s ease;
}
.fee-image-card:hover img {
  transform: scale(1.025);
}
/* Overlay */
.image-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 22px;
  background: linear-gradient(to top, rgba(27, 50, 92, .78), rgba(27, 50, 92, 0) 45%);
  opacity: 0;
  transition: opacity .3s ease;
}
.fee-image-card:hover .image-overlay {
  opacity: 1;
}
.image-title {
  color: var(--white);
  font-family: var(--outfit);
  font-size: 20px;
  font-weight: 600;
}
.zoom-button {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--hgs-navy);
  font-size: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
}
/* =========================
       NOTE BOX
    ========================= */
.fee-notes {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 12px 35px rgba(27, 50, 92, 0.05);
}
.fee-notes h2 {
  font-family: var(--outfit);
  color: var(--hgs-navy);
  font-size: 27px;
  margin-bottom: 22px;
  padding-left: 17px;
  position: relative;
}
.fee-notes h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 5px;
  border-radius: 10px;
  background: var(--hgs-orange);
}
.fee-notes ul {
  list-style: none;
  display: grid;
  gap: 15px;
}
.fee-notes li {
  position: relative;
  padding-left: 31px;
  font-size: 15.5px;
}
.fee-notes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(4, 106, 88, .10);
  color: var(--hgs-green);
  font-size: 11px;
  font-weight: 800;
  line-height: 11px;
}
/* =========================
       LIGHTBOX
    ========================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 25px;
  background: rgba(12, 22, 42, .88);
  backdrop-filter: blur(8px);
}
.lightbox.active {
  display: flex;
}
.lightbox-content {
  position: relative;
  max-width: 1100px;
  max-height: 92vh;
  width: 100%;
  display: flex;
  justify-content: center;
}
.lightbox-content img {
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, .35);
}
.lightbox-close {
  position: fixed;
  top: 22px;
  right: 25px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--white);
  color: var(--hgs-navy);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 10000;
  box-shadow: 0 8px 25px rgba(0, 0, 0, .2);
}
.lightbox-close:hover {
  background: var(--hgs-pink);
  color: var(--white);
}
/* =========================
       RESPONSIVE
    ========================= */
@media (max-width: 768px) {
  .fee-page {
    padding: 50px 0px;
  }
  .fee-images {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .fee-image {
    height: auto;
    max-height: 650px;
  }
  .fee-image img {
    height: auto;
    max-height: 650px;
    object-fit: contain;
  }
  .image-overlay {
    opacity: 1;
  }
  .fee-notes {
    padding: 25px;
  }
}
@media (max-width: 480px) {
  .fee-page {
    padding: 40px 0px;
  }
  .fee-header h1 {
    font-size: 36px;
  }
  .fee-header > p {
    font-size: 15px;
  }
  .fee-header strong {
    font-size: 17px;
	line-height: 22px;
  }
  .fee-image-card {
    border-radius: 18px;
    padding: 7px;
  }
  .fee-image {
    border-radius: 13px;
  }
  .fee-notes {
    padding: 21px;
    border-radius: 18px;
  }
  .fee-notes h2 {
    font-size: 23px;
  }
  .fee-notes li {
    font-size: 14px;
  }
  .lightbox {
    padding: 12px;
  }
  .lightbox-close {
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
    font-size: 23px;
  }
}
:root {
  --hgs-purple: #7773c7;
  --hgs-pink: #df8296;
  --hgs-orange: #f2b45d;
  --hgs-teal: #62b5aa;
  --hgs-green: #046a58;
  --hgs-navy: #1b325c;
  --hgs-text: #4b5563;
  --nunito: "Nunito", sans-serif;
  --nunito-sans: "Nunito Sans", sans-serif;
  --caveat: "Caveat", cursive;
  --outfit: "Outfit", sans-serif;
  --recoleta: "Nunito", sans-serif;
  --satoshi: "Satoshi", sans-serif;
  --white: #ffffff;
  --bg: #fafafd;
  --border: #e8e8f0;
}
.scholarship-section {
  width: 100%;
  padding: 80px 20px;
}
.scholarship-container {
  margin: 0 auto;
}
/* =========================
       HEADER
    ========================= */
.section-header {
  max-width: 750px;
  margin-bottom: 45px;
}
.section-label {
  display: block;
  margin-bottom: 8px;
  color: var(--hgs-pink);
  font-family: var(--caveat);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}
.section-header h1 {
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: clamp(38px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -1.5px;
  margin-bottom: 18px;
}
.section-header h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 5px;
  margin-top: 16px;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--hgs-purple), var(--hgs-pink));
}
/* =========================
       CARDS
    ========================= */
.scholarship-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.scholarship-card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 12px 35px rgba(27, 50, 92, 0.055);
  transition:
    transform 0.3s ease, box-shadow 0.3s ease;
}
.scholarship-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(27, 50, 92, 0.11);
}
.scholarship-card::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  right: -70px;
  top: -70px;
  opacity: 0.12;
}
.card-purple::after {
  background: var(--hgs-purple);
}
.card-pink::after {
  background: var(--hgs-pink);
}
.card-orange::after {
  background: var(--hgs-orange);
}
.card-teal::after {
  background: var(--hgs-teal);
}
.card-green::after {
  background: var(--hgs-green);
}
/* =========================
       ICON
    ========================= */
.card-icon {
  position: relative;
  z-index: 2;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 17px;
  margin-bottom: 22px;
  font-family: var(--outfit);
  font-size: 23px;
  font-weight: 700;
}
.card-purple .card-icon {
  color: var(--hgs-purple);
  background: rgba(119, 115, 199, 0.12);
}
.card-pink .card-icon {
  color: var(--hgs-pink);
  background: rgba(223, 130, 150, 0.13);
}
.card-orange .card-icon {
  color: #c98727;
  background: rgba(242, 180, 93, 0.16);
}
.card-teal .card-icon {
  color: var(--hgs-teal);
  background: rgba(98, 181, 170, 0.14);
}
.card-green .card-icon {
  color: var(--hgs-green);
  background: rgba(4, 106, 88, 0.10);
}
/* =========================
       CARD CONTENT
    ========================= */
.scholarship-card h2 {
  position: relative;
  z-index: 2;
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: 23px;
  line-height: 1.3;
  font-weight: 700;
  margin-bottom: 14px;
}
.scholarship-card p {
  position: relative;
  z-index: 2;
  color: var(--hgs-text);
  font-size: 15.5px;
  line-height: 1.75;
}
.amount {
  display: inline-block;
  margin-top: 18px;
  padding: 7px 14px;
  border-radius: 30px;
  background: rgba(119, 115, 199, 0.09);
  color: var(--hgs-purple);
  font-family: var(--outfit);
  font-size: 14px;
  font-weight: 700;
}
.card-pink .amount {
  color: var(--hgs-pink);
  background: rgba(223, 130, 150, 0.10);
}
.card-orange .amount {
  color: #b9781e;
  background: rgba(242, 180, 93, 0.13);
}
.card-teal .amount {
  color: var(--hgs-green);
  background: rgba(98, 181, 170, 0.12);
}
.card-green .amount {
  color: var(--hgs-green);
  background: rgba(4, 106, 88, 0.09);
}
/* =========================
       LAST CARD
    ========================= */
.card-full {
  grid-column: 1 / -1;
}
.card-full .scholarship-content {
  max-width: 900px;
}
/* =========================
       FOOTNOTE
    ========================= */
.important-note {
  margin-top: 30px;
  padding: 22px 26px;
  border-radius: 18px;
  background: rgba(27, 50, 92, 0.045);
  border-left: 4px solid var(--hgs-navy);
  color: var(--hgs-navy);
  font-size: 15px;
  font-weight: 600;
}
/* =========================
       RESPONSIVE
    ========================= */
@media (max-width: 800px) {
  .scholarship-section {
    padding: 60px 16px;
  }
  .scholarship-grid {
    grid-template-columns: 1fr;
  }
  .card-full {
    grid-column: auto;
  }
}
@media (max-width: 480px) {
  .scholarship-section {
    padding: 45px 14px;
  }
  .section-header {
    margin-bottom: 32px;
  }
  .section-label {
    font-size: 25px;
  }
  .section-header h1 {
    font-size: 36px;
  }
  .scholarship-card {
    padding: 25px 22px;
    border-radius: 20px;
  }
  .scholarship-card h2 {
    font-size: 21px;
  }
  .scholarship-card p {
    font-size: 14.5px;
  }
  .card-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
  }
}
:root {
  --hgs-purple: #7773c7;
  --hgs-pink: #df8296;
  --hgs-orange: #f2b45d;
  --hgs-teal: #62b5aa;
  --hgs-green: #046a58;
  --hgs-navy: #1b325c;
  --hgs-text: #4b5563;
  --nunito: "Nunito", sans-serif;
  --nunito-sans: "Nunito Sans", sans-serif;
  --caveat: "Caveat", cursive;
  --outfit: "Outfit", sans-serif;
  --white: #ffffff;
  --light-bg: #fafafd;
  --border: #e7e8f0;
}
.payment-section {
  width: 100%;
  padding: 75px 20px;
  background: var(--light-bg);
  font-family: var(--nunito-sans);
  color: var(--hgs-text);
}
/* =========================
     HEADER
  ========================= */
.payment-header {
  margin-bottom: 40px;
}
.payment-label {
  display: block;
  margin-bottom: 8px;
  color: var(--hgs-pink);
  font-family: var(--caveat);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}
.payment-header h2 {
  position: relative;
  display: inline-block;
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: clamp(38px, 5vw, 55px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -1.5px;
}
.payment-header h2::after {
  content: "";
  display: block;
  width: 68px;
  height: 5px;
  margin-top: 15px;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--hgs-purple), var(--hgs-pink));
}
/* =========================
     ACCOUNT GRID
  ========================= */
.accounts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}
/* =========================
     ACCOUNT CARD
  ========================= */
.account-card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: 30px;
  box-shadow: 0 14px 40px rgba(27, 50, 92, 0.07);
  transition:
    transform .3s ease, box-shadow .3s ease;
	margin-top:20px;
}
.account-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(27, 50, 92, 0.12);
}
.account-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
}
.axis-card::before {
  background: linear-gradient(90deg, var(--hgs-purple), var(--hgs-pink));
}
.hdfc-card::before {
  background: linear-gradient(90deg, var(--hgs-teal), var(--hgs-green));
}
/* =========================
     BANK HEADER
  ========================= */
.bank-header {
  display: flex;
  align-items: center;
  gap: 17px;
  padding-bottom: 25px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.bank-icon {
  flex: 0 0 55px;
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-family: var(--outfit);
  font-size: 16px;
  font-weight: 800;
}
.axis-card .bank-icon {
  color: var(--hgs-purple);
  background: rgba(119, 115, 199, .12);
}
.hdfc-card .bank-icon {
  color: var(--hgs-green);
  background: rgba(4, 106, 88, .10);
}
.bank-header h3 {
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 3px;
}
.bank-header span {
  color: #8a91a0;
  font-size: 13px;
  font-weight: 600;
}
/* =========================
     DETAILS
  ========================= */
.account-details {
  display: flex;
  flex-direction: column;
}
.detail-row {
  display: grid;
  grid-template-columns: 135px 1fr;
  gap: 15px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.detail-row:last-child {
  border-bottom: none;
}
.detail-row span {
  color: #8a91a0;
  font-size: 13px;
  font-weight: 600;
}
.detail-row strong {
  color: var(--hgs-navy);
  font-family: var(--nunito);
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
  word-break: break-word;
}
/* =========================
     RESPONSIVE
  ========================= */
@media (max-width: 850px) {
  .accounts-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .payment-section {
    padding: 50px 0px;
  }
  .payment-label {
    font-size: 25px;
  }
  .payment-header h2 {
    font-size: 38px;
  }
  .account-card {
    padding: 23px 20px;
    border-radius: 20px;
  }
  .bank-header {
    gap: 13px;
  }
  .bank-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 14px;
    font-size: 14px;
  }
  .bank-header h3 {
    font-size: 21px;
	padding-bottom: 0px;
  }
  .detail-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 13px 0;
  }
  .detail-row span {
    font-size: 12px;
  }
  .detail-row strong {
    font-size: 14px;
  }
}
/* =========================
       CBSE DOCUMENT SECTION
    ========================== */ :root {
  --primary: #2e7d5b;
  --primary-dark: #215c42;
  --light-green: #eef8f2;
  --border: #e6e6e6;
  --muted: #777777;
}
.cbse-section {
  width: 100%;
  padding: 70px 20px;
  background: #ffffff;
}
.cbse-container {
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;
}
/* Heading */
.cbse-heading {
  text-align: center;
  margin-bottom: 40px;
}
.cbse-heading h2 {
  font-family: var(--outfit);
  font-size: 38px;
  font-weight: 700;
  color: var(--template-color);
  margin-bottom: 10px;
}
.cbse-heading p {
  font-family: var(--nunito-sans);
  font-size: 16px;
  color: var(--muted);
  max-width: 650px;
  margin: 0 auto;
}
/* Table */
.cbse-table-wrapper {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--white);
}
.cbse-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}
.cbse-table thead {
  background: var(--primary);
}
.cbse-table th {
  padding: 17px 22px;
  color: var(--white);
  font-family: var(--outfit);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  letter-spacing: 0.2px;
}
.cbse-table th:first-child {
  width: 80px;
  text-align: center;
}
.cbse-table th:last-child {
  width: 140px;
  text-align: center;
}
.cbse-table td {
  padding: 17px 22px;
  border-bottom: 1px solid var(--border);
  font-family: var(--nunito-sans);
  font-size: 15px;
  font-weight: 600;
  color: #333333;
  background: #ffffff;
}
.cbse-table tr:last-child td {
  border-bottom: none;
}
.cbse-table tbody tr {
  transition: all 0.25s ease;
}
.cbse-table tbody tr:hover td {
  background: var(--light-green);
}
.document-number {
  text-align: center;
  color: var(--primary);
  font-weight: 700;
}
.document-name {
  color: #303030;
}
/* Download Button */
.download-cell {
  text-align: center;
}
.download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 100px;
  padding: 9px 17px;
  background: var(--primary);
  color: var(--white);
  text-decoration: none;
  border-radius: 7px;
  font-family: var(--outfit);
  font-size: 14px;
  font-weight: 600;
  transition:
    background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.download-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(46, 125, 91, 0.20);
}
.download-icon {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
/* =========================
       RESPONSIVE
    ========================== */
@media (max-width: 768px) {
  .cbse-section {
    padding: 50px 15px;
  }
  .cbse-heading {
    margin-bottom: 28px;
  }
  .cbse-heading h2 {
    font-size: 30px;
  }
  .cbse-heading p {
    font-size: 14px;
  }
  .cbse-table-wrapper {
    border-radius: 10px;
  }
  .cbse-table th, .cbse-table td {
    padding: 14px 15px;
  }
}
/* =========================
       MOBILE CARD VERSION
    ========================== */
@media (max-width: 600px) {
  .cbse-section {
    padding: 40px 15px;
  }
  .cbse-heading h2 {
    font-size: 27px;
  }
  .cbse-heading p {
    font-size: 14px;
  }
  .cbse-table-wrapper {
    overflow: visible;
    border: none;
    background: transparent;
  }
  .cbse-table {
    min-width: 0;
    display: block;
  }
  .cbse-table thead {
    display: none;
  }
  .cbse-table tbody {
    display: block;
  }
  .cbse-table tr {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    margin-bottom: 12px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
    overflow: hidden;
  }
  .cbse-table td {
    display: block;
    border: none;
    padding: 14px 8px;
  }
  .cbse-table td:first-child {
    padding-left: 14px;
  }
  .cbse-table td:nth-child(2) {
    padding-left: 8px;
    padding-right: 5px;
  }
  .cbse-table td:last-child {
    padding-right: 12px;
  }
  .document-number {
    font-size: 13px;
  }
  .document-name {
    font-size: 14px;
    line-height: 1.35;
  }
  .download-btn {
    min-width: auto;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 8px;
  }
  .download-btn span {
    display: none;
  }
  .download-icon {
    width: 17px;
    height: 17px;
  }
}
/* =========================================
       TRANSFER CERTIFICATE SECTION
    ========================================= */ :root {
  --primary: #2e7d5b;
  --primary-dark: #215c42;
  --primary-light: #edf7f1;
  --heading: #23352d;
  --text: #3c4541;
  --muted: #7b8580;
  --border: #e5ebe7;
  --shadow: 0 12px 35px rgba(36, 77, 59, 0.08);
}
.tc-section {
  position: relative;
  padding: 80px 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 10%, rgba(46, 125, 91, 0.07), transparent 28%), radial-gradient(circle at 90% 90%, rgba(46, 125, 91, 0.06), transparent 30%), #f8faf9;
}
.tc-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}
/* =========================================
       HEADING
    ========================================= */
.tc-heading {
  text-align: center;
  margin-bottom: 35px;
}
.tc-heading-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  margin-bottom: 13px;
  border-radius: 50px;
  background: var(--primary-light);
  color: var(--primary);
  font-family: var(--outfit);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.tc-heading-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}
.tc-heading h1 {
  font-family: var(--outfit);
  font-size: 42px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 10px;
}
.tc-heading p {
  max-width: 620px;
  margin: 0 auto;
  font-family: var(--nunito-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}
/* =========================================
       SEARCH AREA
    ========================================= */
.tc-search-box {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 650px;
  margin: 17px auto 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 7px;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
}
.tc-search-box:focus-within {
  border-color: var(--primary);
  box-shadow:
    0 0 0 4px rgba(46, 125, 91, 0.08), var(--shadow);
}
.tc-search-icon {
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--primary);
}
.tc-search-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.tc-search-input {
  flex: 1;
  height: 48px;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--nunito-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.tc-search-input::placeholder {
  color: #a0aaa5;
  font-weight: 500;
}
.tc-clear {
  display: none;
  border: 0;
  background: #f1f5f3;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  cursor: pointer;
  color: #69746e;
  align-items: center;
  justify-content: center;
  transition: 0.25s ease;
}
.tc-clear:hover {
  background: var(--primary-light);
  color: var(--primary);
}
.tc-clear svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
/* =========================================
       RESULT INFO
    ========================================= */
.tc-result-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 5px;
}
.tc-result-info span {
  font-family: var(--nunito-sans);
  font-size: 13px;
  color: var(--muted);
}
.tc-result-count {
  font-weight: 700;
  color: var(--primary) !important;
}
/* =========================================
       TABLE
    ========================================= */
.tc-table-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.tc-table-wrapper {
  width: 100%;
  overflow-x: auto;
}
.tc-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
}
.tc-table thead {
  background: var(--primary);
}
.tc-table th {
  padding: 17px 20px;
  color: var(--white);
  font-family: var(--outfit);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
.tc-table th:first-child, .tc-table td:first-child {
  text-align: center;
  width: 75px;
}
.tc-table th:nth-child(3), .tc-table td:nth-child(3) {
  width: 120px;
  text-align: center;
}
.tc-table th:last-child, .tc-table td:last-child {
  width: 200px;
  text-align: center;
}
.tc-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: all 0.25s ease;
}
.tc-table tbody tr:last-child {
  border-bottom: 0;
}
.tc-table tbody tr:hover {
  background: #f5faf7;
}
.tc-table td {
  padding: 15px 20px;
  font-family: var(--nunito-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.tc-number {
  color: var(--primary) !important;
  font-weight: 800 !important;
}
.tc-student-name {
  color: #303934 !important;
}
.tc-class {
  color: var(--muted) !important;
  font-weight: 700 !important;
}
/* =========================================
       DOWNLOAD BUTTON
    ========================================= */
.tc-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 115px;
  padding: 9px 14px;
  border-radius: 8px;
  background: var(--primary-light);
  color: var(--primary);
  text-decoration: none;
  font-family: var(--outfit);
  font-size: 13px;
  font-weight: 700;
  transition: all 0.25s ease;
}
.tc-download svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.tc-download:hover {
  background: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(46, 125, 91, 0.18);
}
/* =========================================
       NO RESULT
    ========================================= */
.tc-no-result {
  display: none;
  text-align: center;
  padding: 55px 20px;
  font-family: var(--nunito-sans);
}
.tc-no-result-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
}
.tc-no-result-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.tc-no-result h3 {
  font-family: var(--outfit);
  font-size: 20px;
  color: var(--heading);
  margin-bottom: 5px;
}
.tc-no-result p {
  color: var(--muted);
  font-size: 14px;
}
/* =========================================
       MOBILE
    ========================================= */
@media (max-width: 700px) {
  .tc-section {
    padding: 55px 14px;
  }
  .tc-heading {
    margin-bottom: 25px;
  }
  .tc-heading h1 {
    font-size: 32px;
  }
  .tc-heading p {
    font-size: 14px;
  }
  .tc-search-box {
    margin-bottom: 25px;
    border-radius: 12px;
  }
  .tc-result-info {
    margin-bottom: 10px;
  }
  .tc-table-card {
    border-radius: 14px;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .tc-table-wrapper {
    overflow: visible;
  }
  .tc-table {
    display: block;
    min-width: 0;
  }
  .tc-table thead {
    display: none;
  }
  .tc-table tbody {
    display: block;
  }
  .tc-table tbody tr {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    margin-bottom: 10px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(36, 77, 59, 0.05);
    overflow: hidden;
  }
  .tc-table td {
    display: block;
    padding: 14px 7px;
    border: 0;
  }
  .tc-table td:first-child {
    width: auto;
    padding-left: 13px;
  }
  .tc-table td:nth-child(2) {
    width: auto;
    padding-right: 5px;
  }
  .tc-table td:nth-child(3) {
    width: auto;
    text-align: left;
    padding: 0;
    position: absolute;
    margin-top: 40px;
    margin-left: 49px;
  }
  .tc-table td:last-child {
    width: auto;
    padding-right: 10px;
  }
  .tc-student-name {
    font-size: 14px !important;
    margin-bottom: 4px;
  }
  .tc-class {
    font-size: 12px !important;
    color: var(--muted) !important;
  }
  .tc-class::before {
    content: "Class ";
  }
  .tc-download {
    min-width: 39px;
    width: 39px;
    height: 39px;
    padding: 0;
    border-radius: 8px;
  }
  .tc-download span {
    display: none;
  }
  .tc-download svg {
    width: 17px;
    height: 17px;
  }
}
@media (max-width: 420px) {
  .tc-heading h1 {
    font-size: 28px;
  }
  .tc-search-input {
    font-size: 14px;
  }
  .tc-table tbody tr {
    grid-template-columns: 38px 1fr auto;
  }
  .tc-table td:first-child {
    padding-left: 10px;
  }
  .tc-table td:nth-child(3) {
    margin-left: 45px;
  }
}
.social-responsibility {
  width: 100%;
  padding: 80px 20px;
  overflow: hidden;
}
.sr-container {
  max-width: 1180px;
  margin: 0 auto;
}
/* Heading */
.sr-heading {
  text-align: center;
  margin-bottom: 50px;
}
.sr-heading .small-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-family: var(--outfit);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.sr-heading .small-title::before, .sr-heading .small-title::after {
  content: "";
  width: 35px;
  height: 1px;
  background: var(--accent);
}
.sr-heading h1 {
  color: var(--primary);
  font-family: var(--outfit);
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 18px;
}
.sr-heading p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 16px;
}
/* Content */
.sr-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.sr-text {
  position: relative;
}
.sr-text::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 5px;
  width: 4px;
  height: 70px;
  background: var(--accent);
  border-radius: 5px;
}
.sr-text p {
  color: #4d4d4d;
  font-family: var(--nunito-sans);
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 22px;
}
.sr-text p:first-child::first-letter {
  color: var(--primary);
  font-family: var(--outfit);
  font-size: 52px;
  font-weight: 700;
  float: left;
  line-height: 0.85;
  padding: 5px 8px 0 0;
}
.sr-highlight {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding: 20px 22px;
  margin-top: 28px;
  background: var(--primary-light);
  border-left: 4px solid var(--primary);
  border-radius: 0 12px 12px 0;
}
.sr-highlight-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--white);
  border-radius: 50%;
  font-size: 19px;
}
.sr-highlight p {
  margin: 0;
  color: var(--primary);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 600;
}
/* Gallery */
.sr-gallery-wrap {
  position: relative;
}
.sr-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.sr-gallery-item {
  position: relative;
  height: 235px;
  overflow: hidden;
  border-radius: 16px;
  cursor: pointer;
  background: #eee;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}
.sr-gallery-item:nth-child(2) {
  margin-top: 35px;
}
.sr-gallery-item:nth-child(3) {
  margin-top: -35px;
}
.sr-gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.sr-gallery-item::after {
  content: "View Image";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-family: var(--outfit);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: rgba(23, 79, 61, 0.72);
  opacity: 0;
  transition: 0.35s ease;
}
.sr-gallery-item:hover img {
  transform: scale(1.08);
}
.sr-gallery-item:hover::after {
  opacity: 1;
}
/* Gallery Caption */
.gallery-caption {
  margin-top: 22px;
  padding: 17px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  color: var(--muted);
  font-size: 14px;
}
/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: rgba(0, 0, 0, 0.88);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 0.3s ease;
}
.lightbox.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.lightbox-content {
  position: relative;
  max-width: 1100px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-content img {
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.lightbox-close {
  position: fixed;
  top: 25px;
  right: 30px;
  width: 45px;
  height: 45px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: 0.3s ease;
}
.lightbox-close:hover {
  background: var(--white);
  color: var(--black);
  transform: rotate(90deg);
}
.lightbox-prev, .lightbox-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  font-size: 28px;
  cursor: pointer;
  transition: 0.3s ease;
}
.lightbox-prev {
  left: 25px;
}
.lightbox-next {
  right: 25px;
}
.lightbox-prev:hover, .lightbox-next:hover {
  background: var(--white);
  color: var(--black);
}
/* Responsive */
@media (max-width: 900px) {
  .social-responsibility {
    padding: 60px 20px;
  }
  .sr-content {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .sr-text::before {
    left: -12px;
  }
  .sr-gallery {
    max-width: 700px;
    margin: 0 auto;
  }
}
@media (max-width: 600px) {
  .social-responsibility {
    padding: 45px 16px;
  }
  .sr-heading {
    margin-bottom: 35px;
  }
  .sr-heading h1 {
    font-size: 36px;
  }
  .sr-heading p {
    font-size: 14px;
  }
  .sr-content {
    gap: 35px;
  }
  .sr-text {
    padding-left: 10px;
  }
  .sr-text p {
    font-size: 15px;
  }
  .sr-gallery {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .sr-gallery-item, .sr-gallery-item:nth-child(2), .sr-gallery-item:nth-child(3) {
    height: 230px;
    margin-top: 0;
  }
  .lightbox {
    padding: 15px;
  }
  .lightbox-close {
    top: 15px;
    right: 15px;
  }
  .lightbox-prev {
    left: 10px;
  }
  .lightbox-next {
    right: 10px;
  }
}
.alumnae-section {
  position: relative;
  padding: 90px 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 5% 10%, rgba(119, 115, 199, 0.10), transparent 25%), radial-gradient(circle at 95% 90%, rgba(98, 181, 170, 0.12), transparent 25%), var(--white);
}
.alumnae-container {
  max-width: 1180px;
  margin: 0 auto;
}
/* Header */
.alumnae-header {
  max-width: 780px;
  margin: 0 auto 60px;
  text-align: center;
}
.alumnae-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  color: var(--hgs-purple);
  font-family: var(--outfit);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.alumnae-kicker::before, .alumnae-kicker::after {
  content: "";
  width: 35px;
  height: 2px;
  border-radius: 10px;
  background: var(--hgs-pink);
}
.alumnae-header h1 {
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 18px;
}
.alumnae-header h1 span {
  color: var(--hgs-purple);
}
.alumnae-header p {
  font-size: 16px;
  color: var(--hgs-text);
}
/* Main Layout */
.alumnae-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: center;
}
/* Illustration / Visual */
.alumnae-visual {
  position: relative;
  min-height: 470px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.visual-circle {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(119, 115, 199, 0.15), rgba(223, 130, 150, 0.14));
}
.visual-circle::before {
  content: "";
  position: absolute;
  inset: 25px;
  border: 1px dashed rgba(119, 115, 199, 0.35);
  border-radius: 50%;
}
.visual-card {
  position: relative;
  z-index: 2;
  width: 330px;
  padding: 42px 30px;
  border-radius: 28px;
  text-align: center;
  background: var(--white);
  border: 1px solid rgba(119, 115, 199, 0.15);
  box-shadow: 0 25px 60px rgba(27, 50, 92, 0.12);
}
.visual-icon {
  width: 90px;
  height: 90px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hgs-purple), var(--hgs-pink));
  color: var(--white);
  font-size: 38px;
}
.visual-card h3 {
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: 25px;
  margin-bottom: 8px;
}
.visual-card p {
  color: var(--hgs-text);
  font-size: 14px;
  line-height: 1.7;
}
/* Floating badges */
.floating-badge {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 17px;
  border-radius: 50px;
  background: var(--white);
  box-shadow: 0 12px 30px rgba(27, 50, 92, 0.12);
  font-size: 13px;
  font-weight: 700;
  color: var(--hgs-navy);
}
.floating-badge i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
}
.badge-1 {
  top: 40px;
  left: 5px;
}
.badge-1 i {
  background: var(--hgs-orange);
}
.badge-2 {
  bottom: 50px;
  right: 0;
}
.badge-2 i {
  background: var(--hgs-teal);
}
.badge-3 {
  top: 105px;
  right: -20px;
}
.badge-3 i {
  background: var(--hgs-pink);
}
/* Content */
.alumnae-content {
  position: relative;
}
.content-intro {
  position: relative;
  padding-left: 24px;
  margin-bottom: 25px;
}
.content-intro::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 4px;
  border-radius: 10px;
  background: linear-gradient(to bottom, var(--hgs-purple), var(--hgs-pink));
}
.alumnae-content p {
  color: var(--hgs-text);
  font-family: var(--nunito-sans);
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 22px;
}
.alumnae-content strong {
  color: var(--hgs-navy);
  font-weight: 700;
}
/* Alumnae Cards */
.alumnae-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 30px;
}
.alumnae-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px;
  border-radius: 14px;
  background: var(--light-bg);
  border: 1px solid transparent;
  transition: all 0.3s ease;
}
.alumnae-card:hover {
  transform: translateY(-4px);
  background: var(--white);
  border-color: rgba(119, 115, 199, 0.18);
  box-shadow: 0 12px 30px rgba(27, 50, 92, 0.08);
}
.alumnae-avatar {
  width: 45px;
  height: 45px;
  min-width: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--white);
  font-family: var(--outfit);
  font-size: 15px;
  font-weight: 700;
}
.avatar-purple {
  background: var(--hgs-purple);
}
.avatar-pink {
  background: var(--hgs-pink);
}
.avatar-teal {
  background: var(--hgs-teal);
}
.avatar-orange {
  background: var(--hgs-orange);
}
.alumnae-card h4 {
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 2px;
}
.alumnae-card span {
  display: block;
  color: var(--hgs-text);
  font-size: 12px;
  line-height: 1.4;
}
/* Bottom Quote */
.alumnae-quote {
  position: relative;
  margin-top: 70px;
  padding: 38px 45px;
  text-align: center;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--hgs-navy), var(--hgs-green));
  overflow: hidden;
}
.alumnae-quote::before {
  content: "“";
  position: absolute;
  left: 30px;
  top: -25px;
  color: rgba(255, 255, 255, 0.12);
  font-family: Georgia, serif;
  font-size: 150px;
  line-height: 1;
}
.alumnae-quote p {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  color: var(--white);
  font-family: var(--outfit);
  font-size: 21px;
  line-height: 1.6;
}
/* Responsive */
@media (max-width: 1000px) {
  .alumnae-layout {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .alumnae-visual {
    min-height: 420px;
  }
  .alumnae-content {
    max-width: 850px;
    margin: 0 auto;
  }
}
@media (max-width: 650px) {
  .alumnae-section {
    padding: 60px 16px;
  }
  .alumnae-header {
    margin-bottom: 40px;
  }
  .alumnae-header h1 {
    font-size: 40px;
  }
  .alumnae-header p {
    font-size: 14px;
  }
  .alumnae-visual {
    min-height: 360px;
  }
  .visual-circle {
    width: 300px;
    height: 300px;
  }
  .visual-card {
    width: 270px;
    padding: 32px 22px;
  }
  .visual-icon {
    width: 72px;
    height: 72px;
    font-size: 30px;
  }
  .floating-badge {
    padding: 8px 12px;
    font-size: 11px;
  }
  .badge-1 {
    left: 0;
    top: 20px;
  }
  .badge-2 {
    right: 0;
    bottom: 20px;
  }
  .badge-3 {
    right: -5px;
    top: 75px;
  }
  .alumnae-content p {
    font-size: 15px;
  }
  .alumnae-list {
    grid-template-columns: 1fr;
  }
  .alumnae-quote {
    margin-top: 45px;
    padding: 30px 22px;
  }
  .alumnae-quote p {
    font-size: 18px;
  }
}
.erp-login-section {
  width: 100%;
  padding: 55px 20px;
  background:
    radial-gradient(circle at 10% 50%, rgba(119, 115, 199, 0.10), transparent 30%), radial-gradient(circle at 90% 50%, rgba(98, 181, 170, 0.10), transparent 30%), #fff;
}
.erp-login-card {
  position: relative;
  max-width: 1050px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 30px;
  border: 1px solid rgba(119, 115, 199, 0.16);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 18px 50px rgba(27, 50, 92, 0.09);
  overflow: hidden;
}
.erp-login-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, var(--hgs-purple), var(--hgs-pink), var(--hgs-orange));
}
.erp-login-icon {
  width: 58px;
  height: 58px;
  min-width: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: #fff;
  font-family: var(--outfit);
  font-size: 25px;
  background: linear-gradient(135deg, var(--hgs-purple), var(--hgs-pink));
  box-shadow: 0 10px 25px rgba(119, 115, 199, 0.25);
}
.erp-login-content {
  flex: 1;
}
.erp-login-label {
  display: block;
  margin-bottom: 2px;
  color: var(--hgs-purple);
  font-family: var(--outfit);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.erp-login-content h2 {
  margin: 0 0 4px;
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: 27px;
  font-weight: 700;
}
.erp-login-content p {
  margin: 0;
  color: var(--hgs-text);
  font-family: var(--nunito-sans);
  font-size: 14px;
  line-height: 1.6;
}
.erp-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 155px;
  padding: 14px 20px;
  border-radius: 50px;
  color: #fff;
  background: var(--hgs-green);
  font-family: var(--outfit);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 10px 22px rgba(4, 106, 88, 0.18);
}
.erp-login-btn span {
  font-size: 20px;
  line-height: 1;
  transition: transform 0.3s ease;
}
.erp-login-btn:hover {
  background: var(--hgs-navy);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(27, 50, 92, 0.20);
}
.erp-login-btn:hover span {
  transform: translateX(4px);
}
@media (max-width: 700px) {
  .erp-login-section {
    padding: 40px 16px;
  }
  .erp-login-card {
    flex-wrap: wrap;
    padding: 24px 22px;
    gap: 18px;
  }
  .erp-login-content {
    flex: 1 1 calc(100% - 80px);
  }
  .erp-login-btn {
    width: 100%;
    margin-top: 5px;
  }
}
@media (max-width: 420px) {
  .erp-login-card {
    display: block;
    text-align: center;
  }
  .erp-login-icon {
    margin: 0 auto 18px;
  }
  .erp-login-content h2 {
    font-size: 24px;
  }
  .erp-login-content p {
    font-size: 13px;
  }
  .erp-login-btn {
    margin-top: 20px;
  }
}
/* =========================================
   MAIN SECTION
========================================= */
.green-campus {
  position: relative;
  padding: 50px 20px;
  background:
    radial-gradient(circle at 0% 0%, rgba(119, 115, 199, 0.10), transparent 28%), radial-gradient(circle at 100% 100%, rgba(98, 181, 170, 0.12), transparent 28%), #ffffff;
  overflow: hidden;
}
.green-campus-wrap {
  max-width: 1180px;
  margin: auto;
}
/* =========================================
   HEADING
========================================= */
.green-campus-heading {
  max-width: 760px;
  margin: 0 auto 60px;
  text-align: center;
}
.green-campus-tag {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--hgs-purple);
  font-family: var(--outfit);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.green-campus-heading h2 {
  margin: 0 0 16px;
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: clamp(42px, 5vw, 62px);
  font-weight: 700;
  line-height: 1;
}
.green-campus-heading h2 span {
  color: var(--hgs-green);
}
.green-campus-heading p {
  max-width: 680px;
  margin: auto;
  color: var(--hgs-text);
  font-family: var(--nunito-sans);
  font-size: 16px;
  line-height: 1.8;
}
/* =========================================
   MAIN GRID
========================================= */
.green-campus-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 70px;
  align-items: center;
}
/* =========================================
   IMAGE GALLERY
========================================= */
.green-campus-gallery {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 15px;
}
.green-gallery-main {
  position: relative;
  height: 530px;
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 25px 55px rgba(27, 50, 92, 0.14);
}
.green-gallery-main img, .green-gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.green-gallery-main:hover img, .green-gallery-item:hover img {
  transform: scale(1.06);
}
.green-gallery-main::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(4, 106, 88, 0.75), transparent 48%);
}
.green-image-overlay {
  position: absolute;
  z-index: 2;
  left: 25px;
  right: 25px;
  bottom: 25px;
  color: #ffffff;
}
.green-image-overlay span {
  display: block;
  margin-bottom: 5px;
  font-family: var(--nunito);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.green-image-overlay strong {
  display: block;
  font-family: var(--outfit);
  font-size: 25px;
  line-height: 1.2;
}
.green-gallery-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 15px;
}
.green-gallery-item {
  min-height: 0;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 15px 35px rgba(27, 50, 92, 0.10);
}
/* =========================================
   CONTENT
========================================= */
.green-campus-content {
  padding-right: 5px;
}
.green-content-intro {
  display: flex;
  gap: 18px;
  margin-bottom: 20px;
}
.green-content-intro > span {
  width: 4px;
  min-width: 4px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--hgs-purple), var(--hgs-pink));
}
.green-campus-content p {
  margin: 0 0 20px;
  color: var(--hgs-text);
  font-family: var(--nunito-sans);
  font-size: 15px;
  line-height: 1.9;
}
/* =========================================
   FEATURE CARDS
========================================= */
.green-feature-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 30px;
}
.green-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 17px;
  border: 1px solid rgba(119, 115, 199, 0.10);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 8px 25px rgba(27, 50, 92, 0.05);
  transition: all 0.3s ease;
}
.green-feature:hover {
  transform: translateX(6px);
  border-color: rgba(119, 115, 199, 0.20);
  box-shadow: 0 15px 35px rgba(27, 50, 92, 0.09);
}
.feature-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  color: #ffffff;
  font-family: var(--outfit);
  font-size: 20px;
}
.feature-icon.purple {
  background: var(--hgs-purple);
}
.feature-icon.orange {
  background: var(--hgs-orange);
}
.feature-icon.teal {
  background: var(--hgs-teal);
}
.green-feature h3 {
  margin: 0 0 3px;
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: 17px;
  font-weight: 700;
}
.green-feature p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}
/* =========================================
   BOTTOM BANNER
========================================= */
.green-bottom {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 65px;
  padding: 25px 30px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--hgs-purple), var(--hgs-navy));
  overflow: hidden;
}
.green-bottom::before {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  right: -80px;
  top: -130px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
}
.green-bottom::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: 40px;
  bottom: -110px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
}
.green-bottom-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--hgs-navy);
  background: var(--hgs-orange);
  font-size: 21px;
}
.green-bottom small {
  display: block;
  margin-bottom: 2px;
  color: rgba(255, 255, 255, 0.70);
  font-family: var(--outfit);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.green-bottom h3 {
  margin: 0;
  color: #ffffff;
  font-family: var(--outfit);
  font-size: 24px;
  line-height: 1.3;
}
/* =========================================
   TABLET
========================================= */
@media (max-width: 1000px) {
  .green-campus-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .green-campus-gallery {
    max-width: 850px;
    width: 100%;
    margin: auto;
  }
  .green-campus-content {
    max-width: 850px;
    margin: auto;
  }
}
/* =========================================
   MOBILE
========================================= */
@media (max-width: 650px) {
  .green-campus {
    padding: 60px 16px;
  }
  .green-campus-heading {
    margin-bottom: 40px;
  }
  .green-campus-heading h2 {
    font-size: 42px;
  }
  .green-campus-heading p {
    font-size: 14px;
  }
  .green-campus-gallery {
    grid-template-columns: 1fr;
  }
  .green-gallery-main {
    height: 340px;
  }
  .green-gallery-side {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 170px;
  }
  .green-campus-content p {
    font-size: 14px;
  }
  .green-feature {
    padding: 14px;
  }
  .green-bottom {
    margin-top: 45px;
    padding: 21px;
  }
  .green-bottom h3 {
    font-size: 19px;
  }
}
/* =========================================
   SMALL MOBILE
========================================= */
@media (max-width: 430px) {
  .green-gallery-main {
    height: 290px;
  }
  .green-gallery-side {
    grid-template-rows: 135px;
  }
  .green-image-overlay {
    left: 17px;
    bottom: 17px;
  }
  .green-image-overlay strong {
    font-size: 20px;
  }
  .green-bottom {
    align-items: flex-start;
  }
  .green-bottom-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
}
.hgs-publications {
  position: relative;
  padding: 50px 20px;
  background: #fff;
  overflow: hidden;
}
.hgs-publications::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  left: -250px;
  top: 80px;
  border-radius: 50%;
  background: rgba(119, 115, 199, .08);
}
.hgs-publications::after {
  content: "";
  position: absolute;
  width: 350px;
  height: 350px;
  right: -220px;
  bottom: -100px;
  border-radius: 50%;
  background: rgba(98, 181, 170, .09);
}
.hgs-publications-wrap {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: auto;
}
/* Heading */
.hgs-publications-heading {
  max-width: 760px;
  margin: 0 auto 55px;
  text-align: center;
}
.hgs-publications-heading span {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--hgs-purple);
  font-family: var(--outfit);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.hgs-publications-heading h2 {
  margin: 0 0 15px;
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1;
}
.hgs-publications-heading p {
  margin: 0;
  color: var(--hgs-text);
  font-family: var(--nunito-sans);
  font-size: 16px;
  line-height: 1.8;
}
/* List */
.hgs-publications-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-top: 30px;
}
.hgs-publication-item {
  position: relative;
  min-height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px;
  border: 1px solid rgba(27, 50, 92, .08);
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 15px 40px rgba(27, 50, 92, .08);
  overflow: hidden;
  transition: .35s ease;
}
.hgs-publication-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  transition: .35s ease;
}
.hgs-publication-item:nth-child(1)::after {
  background: var(--hgs-purple);
}
.hgs-publication-item:nth-child(2)::after {
  background: var(--hgs-pink);
}
.hgs-publication-item:nth-child(3)::after {
  background: var(--hgs-orange);
}
.hgs-publication-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 55px rgba(27, 50, 92, .13);
}
/* Number */
.hgs-publication-icon {
  width: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
}
.hgs-publication-icon span {
  color: #fff;
  font-family: var(--outfit);
  font-size: 17px;
  font-weight: 700;
}
.hgs-purple {
  background: var(--hgs-purple);
}
.hgs-pink {
  background: var(--hgs-pink);
}
.hgs-orange {
  background: var(--hgs-orange);
}
/* Content */
.hgs-publication-content h3 {
  margin: 0 0 7px;
  color: var(--hgs-navy);
  font-size: 27px;
  font-weight: 700;
}
.hgs-publication-content p {
  margin: 0;
  color: var(--hgs-text);
  font-family: var(--nunito-sans);
  font-size: 14px;
}
/* Arrow */
.hgs-publication-arrow {
  position: absolute;
  right: 25px;
  top: 25px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f6f7fa;
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: 18px;
  transition: .3s ease;
}
.hgs-publication-item:hover .hgs-publication-arrow {
  color: #fff;
  background: var(--hgs-green);
  transform: rotate(45deg);
}
/* Tablet */
@media (max-width: 850px) {
  .hgs-publications-list {
    grid-template-columns: 1fr;
    max-width: 650px;
    margin: auto;
  }
  .hgs-publication-item {
    min-height: 220px;
  }
}
/* Mobile */
@media (max-width: 600px) {
  .hgs-publications {
    padding: 60px 16px;
  }
  .hgs-publications-heading {
    margin-bottom: 35px;
  }
  .hgs-publications-heading h2 {
    font-size: 42px;
  }
  .hgs-publications-heading p {
    font-size: 14px;
  }
  .hgs-publication-item {
    min-height: 200px;
    padding: 24px;
    border-radius: 20px;
  }
  .hgs-publication-content h3 {
    font-size: 24px;
  }
}
.hgs-careers {
  position: relative;
  padding: 50px 20px;
  background:
    radial-gradient(circle at 0% 0%, rgba(119, 115, 199, 0.10), transparent 28%), radial-gradient(circle at 100% 100%, rgba(98, 181, 170, 0.10), transparent 28%), #fff;
  overflow: hidden;
}
.hgs-careers-wrap {
  margin: auto;
}
/* Header */
.hgs-careers-header {
  max-width: 760px;
  margin: 0 auto 55px;
  text-align: center;
}
.hgs-careers-label {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--hgs-purple);
  font-family: var(--outfit);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.hgs-careers-header h2 {
  margin: 0 0 18px;
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: clamp(42px, 5vw, 62px);
  line-height: 1;
}
.hgs-careers-header h2 em {
  color: var(--hgs-green);
  font-style: normal;
}
.hgs-careers-header p {
  margin: 0;
  color: var(--hgs-text);
  font-family: var(--nunito-sans);
  font-size: 16px;
  line-height: 1.8;
}
.hgs-careers-header a {
  color: var(--hgs-purple);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid rgba(119, 115, 199, .35);
  transition: .25s ease;
}
.hgs-careers-header a:hover {
  color: var(--hgs-green);
  border-color: var(--hgs-green);
}
/* Vacancy Heading */
.hgs-careers-content {
  padding-top: 35px;
  margin: auto;
}
.hgs-careers-intro {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.hgs-line {
  width: 35px;
  height: 3px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--hgs-purple), var(--hgs-pink));
}
.hgs-careers-intro h3 {
  margin: 0;
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: 18px;
  font-weight: 700;
}
/* Vacancy List */
.hgs-vacancy-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hgs-vacancy {
  position: relative;
  display: flex;
  align-items: center;
  gap: 25px;
  min-height: 90px;
  padding: 18px 25px;
  border: 1px solid rgba(27, 50, 92, .08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(27, 50, 92, .06);
  overflow: hidden;
  transition:
    transform .3s ease, box-shadow .3s ease;
}
.hgs-vacancy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--hgs-purple);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: .3s ease;
}
.hgs-vacancy:nth-child(2)::before {
  background: var(--hgs-pink);
}
.hgs-vacancy:nth-child(3)::before {
  background: var(--hgs-orange);
}
.hgs-vacancy:hover {
  transform: translateX(7px);
  box-shadow: 0 16px 38px rgba(27, 50, 92, .11);
}
.hgs-vacancy:hover::before {
  transform: scaleY(1);
}
.hgs-vacancy-number {
  color: var(--hgs-purple);
  font-family: var(--outfit);
  font-size: 13px;
  font-weight: 800;
}
.hgs-vacancy:nth-child(2) .hgs-vacancy-number {
  color: var(--hgs-pink);
}
.hgs-vacancy:nth-child(3) .hgs-vacancy-number {
  color: #d9962f;
}
.hgs-vacancy h4 {
  margin: 0;
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: 21px;
  font-weight: 700;
}
.hgs-vacancy-arrow {
  width: 40px;
  height: 40px;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f5f6f9;
  color: var(--hgs-navy);
  font-size: 18px;
  transition: .3s ease;
}
.hgs-vacancy:hover .hgs-vacancy-arrow {
  color: #fff;
  background: var(--hgs-green);
  transform: rotate(45deg);
}
/* Tablet */
@media (max-width: 768px) {
  .hgs-careers {
    padding: 70px 18px;
  }
  .hgs-careers-header {
    margin-bottom: 40px;
  }
  .hgs-vacancy {
    min-height: 80px;
  }
}
/* Mobile */
@media (max-width: 520px) {
  .hgs-careers {
    padding: 60px 16px;
  }
  .hgs-careers-header h2 {
    font-size: 42px;
  }
  .hgs-careers-header p {
    font-size: 14px;
  }
  .hgs-vacancy {
    gap: 15px;
    min-height: 75px;
    padding: 15px 17px;
  }
  .hgs-vacancy h4 {
    font-size: 17px;
  }
  .hgs-vacancy-arrow {
    width: 35px;
    height: 35px;
    min-width: 35px;
  }
}
.hgs-downloads {
  position: relative;
  padding: 50px 20px;
  background:
    radial-gradient(circle at 0% 0%, rgba(119, 115, 199, .10), transparent 28%), radial-gradient(circle at 100% 100%, rgba(98, 181, 170, .10), transparent 28%), #fff;
  overflow: hidden;
}
.hgs-downloads-wrap {
  margin: auto;
}
/* Heading */
.hgs-downloads-heading {
  margin-bottom: 50px;
  text-align: center;
}
.hgs-downloads-heading span {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--hgs-purple);
  font-family: var(--outfit);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.hgs-downloads-heading h2 {
  margin: 0;
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: clamp(42px, 5vw, 60px);
  line-height: 1;
}
/* List */
.hgs-download-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Card */
.hgs-download-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 25px;
  min-height: 105px;
  padding: 20px 25px;
  border: 1px solid rgba(27, 50, 92, .08);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(27, 50, 92, .07);
  text-decoration: none;
  overflow: hidden;
  transition:
    transform .35s ease, box-shadow .35s ease;
}
.hgs-download-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background: var(--hgs-purple);
  transition: .3s ease;
}
.hgs-download-card:nth-child(2)::before {
  background: var(--hgs-pink);
}
.hgs-download-card:hover {
  transform: translateX(8px);
  box-shadow: 0 20px 45px rgba(27, 50, 92, .13);
}
/* Number */
.hgs-download-number {
  width: 55px;
  height: 55px;
  min-width: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(119, 115, 199, .10);
  color: var(--hgs-purple);
  font-family: var(--outfit);
  font-size: 14px;
  font-weight: 800;
}
.hgs-download-card:nth-child(2) .hgs-download-number {
  background: rgba(223, 130, 150, .11);
  color: var(--hgs-pink);
}
/* Content */
.hgs-download-content {
  flex: 1;
}
.hgs-download-content h3 {
  margin: 0;
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
  transition: color .3s ease;
}
.hgs-download-card:hover .hgs-download-content h3 {
  color: var(--hgs-green);
}
/* Download Icon */
.hgs-download-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f5f6f9;
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: 22px;
  transition:
    background .3s ease, color .3s ease, transform .3s ease;
}
.hgs-download-card:hover .hgs-download-icon {
  background: var(--hgs-green);
  color: #fff;
  transform: translateY(3px);
}
/* Tablet */
@media (max-width: 768px) {
  .hgs-downloads {
    padding: 70px 18px;
  }
  .hgs-downloads-heading {
    margin-bottom: 40px;
  }
}
/* Mobile */
@media (max-width: 550px) {
  .hgs-downloads {
    padding: 60px 16px;
  }
  .hgs-downloads-heading h2 {
    font-size: 42px;
  }
  .hgs-download-card {
    gap: 15px;
    min-height: 90px;
    padding: 16px 17px;
    border-radius: 18px;
  }
  .hgs-download-number {
    width: 45px;
    height: 45px;
    min-width: 45px;
    border-radius: 13px;
    font-size: 12px;
  }
  .hgs-download-content h3 {
    font-size: 16px;
  }
  .hgs-download-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 18px;
  }
}
/* =========================
       HERO
    ========================= */
.hgs-policy-hero {
  position: relative;
  padding: 90px 20px;
  background:
    radial-gradient(circle at 10% 20%, rgba(119, 115, 199, 0.20), transparent 28%), radial-gradient(circle at 90% 80%, rgba(98, 181, 170, 0.20), transparent 28%), linear-gradient(135deg, #f8f7ff 0%, #ffffff 50%, #f4fbf9 100%);
  overflow: hidden;
}
.hgs-policy-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1150px;
  margin: auto;
  text-align: center;
}
.hgs-policy-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--hgs-purple);
  font-family: var(--outfit);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.hgs-policy-eyebrow::before, .hgs-policy-eyebrow::after {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 10px;
  background: var(--hgs-pink);
}
.hgs-policy-hero h1 {
  margin: 0;
  color: var(--hgs-navy);
  font-size: clamp(35px, 6vw, 35px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.5px;
}
.hgs-policy-hero p {
  max-width: 760px;
  margin: 22px auto 0;
  color: var(--hgs-text);
  font-size: 16px;
}
/* =========================
       MAIN LAYOUT
    ========================= */
.hgs-policy-section {
  padding: 70px 20px 100px;
}
.hgs-policy-container {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 45px;
  max-width: 1150px;
  margin: auto;
  align-items: start;
}
/* =========================
       SIDEBAR
    ========================= */
.hgs-policy-sidebar {
  position: sticky;
  top: 30px;
}
.hgs-policy-sidebar-box {
  padding: 25px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 12px 35px rgba(27, 50, 92, 0.06);
}
.hgs-policy-sidebar-title {
  margin-bottom: 20px;
  color: var(--hgs-navy);
  font-size: 20px;
  font-weight: 800;
}
.hgs-policy-nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hgs-policy-nav a {
  display: block;
  padding: 5px 5px;
  border-radius: 8px;
  color: var(--hgs-text);
  font-size: 15px;
  line-height: 1.4;
}
.hgs-policy-nav a:hover {
  background: rgba(119, 115, 199, 0.08);
  color: var(--hgs-purple);
}
/* =========================
       CONTENT CARD
    ========================= */
.hgs-policy-content {
  min-width: 0;
  padding: 50px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--white);
  box-shadow: 0 15px 45px rgba(27, 50, 92, 0.06);
}
.hgs-policy-content section {
  scroll-margin-top: 30px;
}
.hgs-policy-content section + section {
  margin-top: 48px;
  padding-top: 45px;
  border-top: 1px solid var(--border);
}
/* =========================
       TYPOGRAPHY
    ========================= */
.hgs-policy-content h2 {
  position: relative;
  margin: 0 0 20px;
  padding-left: 18px;
  color: var(--hgs-navy);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.25;
}
.hgs-policy-content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 5px;
  height: calc(100% - 10px);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--hgs-purple), var(--hgs-pink));
}
.hgs-policy-content h3 {
  margin: 32px 0 12px;
  color: var(--hgs-green);
  font-family: var(--outfit);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
}
.hgs-policy-content p {
  margin-bottom: 16px;
  color: var(--hgs-text);
  font-size: 15px;
  line-height: 1.85;
}
.hgs-policy-content ul {
  margin: 12px 0 20px;
}
.hgs-policy-content li {
  margin-bottom: 9px;
  padding-left: 4px;
  color: var(--hgs-text);
  font-size: 15px;
  line-height: 1.75;
}
.hgs-policy-content li::marker {
  color: var(--hgs-purple);
}
/* =========================
       DEFINITION LIST
    ========================= */
.hgs-policy-definition {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}
.hgs-policy-definition-item {
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--light-bg);
  border-left: 3px solid var(--hgs-teal);
}
.hgs-policy-definition-item strong {
  display: inline;
  color: var(--hgs-navy);
  /* font-family: var(--outfit); */
  font-weight: 800;
  line-height: 32px;
  /* margin-bottom: 14px; */
  padding-bottom: 12px;
}
.hgs-policy-definition-item span {
  color: var(--hgs-text);
  font-size: 14px;
}
/* =========================
       COOKIE BOXES
    ========================= */
.hgs-cookie-box {
  margin: 18px 0;
  padding: 22px;
  border-radius: 16px;
  background: #faf9ff;
  border: 1px solid rgba(119, 115, 199, 0.14);
}
.hgs-cookie-box strong {
  display: block;
  margin-bottom: 6px;
  color: var(--hgs-navy);
  font-family: var(--outfit);
  font-size: 17px;
}
.hgs-cookie-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  margin-bottom: 10px;
}
.hgs-cookie-meta span {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 50px;
  background: rgba(119, 115, 199, 0.10);
  color: var(--hgs-purple);
  font-size: 12px;
  font-weight: 700;
}
/* =========================
       CONTACT
    ========================= */
.hgs-policy-contact {
  padding: 28px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(119, 115, 199, 0.08), rgba(98, 181, 170, 0.08));
}
.hgs-policy-contact p:last-child {
  margin-bottom: 0;
}
.hgs-policy-contact a {
  font-weight: 800;
}
/* =========================
       RESPONSIVE
    ========================= */
@media (max-width: 950px) {
  .hgs-policy-container {
    grid-template-columns: 1fr;
  }
  .hgs-policy-sidebar {
    position: static;
  }
  .hgs-policy-sidebar-box {
    overflow-x: auto;
  }
  .hgs-policy-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .hgs-policy-nav a {
    white-space: nowrap;
  }
}
@media (max-width: 700px) {
  .hgs-policy-hero {
    padding: 65px 18px;
  }
  .hgs-policy-section {
    padding: 45px 15px 70px;
  }
  .hgs-policy-content {
    padding: 30px 22px;
    border-radius: 20px;
  }
  .hgs-policy-content h2 {
    font-size: 23px;
  }
  .hgs-policy-content h3 {
    font-size: 18px;
  }
  .hgs-policy-content p, .hgs-policy-content li {
    font-size: 14px;
  }
}
@media (max-width: 480px) {
  .hgs-policy-hero h1 {
    font-size: 42px;
  }
  .hgs-policy-hero p {
    font-size: 14px;
  }
  .hgs-policy-sidebar-box {
    padding: 18px;
  }
  .hgs-policy-content {
    padding: 25px 18px;
  }
  .hgs-policy-content section + section {
    margin-top: 35px;
    padding-top: 35px;
  }
  .hgs-policy-definition-item {
    padding: 15px;
  }
}
/* =========================================
   HGS NEW - NEWS & ANNOUNCEMENTS
========================================= */
.hgs-new-news {
  width: 100%;
  padding: 0;
  background: var(--hgs-bg);
}
.hgs-new-news-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* =========================================
   NEWS CARD
========================================= */
.hgs-new-news-item {
  position: relative;
  width: 90%;
  min-height: 90px;
  display: flex;
  align-items: center;
  text-decoration: none;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(27, 50, 92, 0.06);
  box-shadow:
    0 4px 15px rgba(27, 50, 92, 0.06);
  transition:
    transform 0.3s ease, box-shadow 0.3s ease;
}
/* Hover */
.hgs-new-news-item:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 22px rgba(27, 50, 92, 0.12);
}
/* =========================================
   DATE
========================================= */
.hgs-new-date {
  position: relative;
  flex: 0 0 80px;
  width: 90px;
  height: 118px;
  margin-left: 0;
  background:
    linear-gradient(135deg, var(--hgs-orange) 0%, #e9a047 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  z-index: 1;
}
/* Navy angled shape */
.hgs-new-date::after {
  content: "";
  position: absolute;
  top: 0;
  right: -7px;
  width: 15px;
  height: 100%;
  background:
    var(--hgs-navy);
  clip-path:
    polygon(45% 0, 100% 0, 65% 100%, 0 100%);
  z-index: -1;
}
.hgs-new-day {
  display: block;
  font-size: 25px;
  line-height: 1;
  font-weight: 700;
}
.hgs-new-month {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
}
/* =========================================
   ICON
========================================= */
.hgs-new-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  margin-left: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border:
    1.5px solid var(--hgs-teal);
  border-radius: 50%;
  color:
    var(--hgs-green);
  font-size: 19px;
  background: #ffffff;
  box-shadow:
    0 2px 6px rgba(27, 50, 92, 0.05);
  transition:
    transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.hgs-new-news-item:hover .hgs-new-icon {
  transform: scale(1.08);
  background: #046a5800;
  border-color:
    var(--hgs-green);
  color: #ffffff;
}
/* =========================================
   CONTENT
========================================= */
.hgs-new-content {
  min-width: 0;
  flex: 1;
  padding:
    13px 20px 13px 15px;
}
.hgs-new-content h3 {
  margin:
    6px 0 7px;
  color:
    var(--hgs-navy);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  transition:
    color 0.3s ease;
}
.hgs-new-news-item:hover .hgs-new-content h3 {
  color:
    var(--hgs-green);
}
.hgs-new-content p {
  margin: 0;
  color:
    var(--hgs-text);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* =========================================
   INDIVIDUAL HGS ACCENTS
========================================= */
/* News 1 - Green */
.hgs-new-news-item:nth-child(1) .hgs-new-date {
  background:
    linear-gradient(135deg, var(--hgs-green), var(--hgs-teal));
}
.hgs-new-news-item:nth-child(1) .hgs-new-icon {
  color: var(--hgs-green);
  border-color: var(--hgs-teal);
}
/* News 2 - Purple */
.hgs-new-news-item:nth-child(2) .hgs-new-date {
  background:
    linear-gradient(135deg, var(--hgs-purple), #918dd4);
}
.hgs-new-news-item:nth-child(2) .hgs-new-icon {
  color: var(--hgs-purple);
  border-color: var(--hgs-purple);
}
/* News 3 - Orange */
.hgs-new-news-item:nth-child(3) .hgs-new-date {
  background:
    linear-gradient(135deg, var(--hgs-orange), #df9944);
}
.hgs-new-news-item:nth-child(3) .hgs-new-icon {
  color: #d99642;
  border-color: var(--hgs-orange);
}
/* News 4 - Pink */
.hgs-new-news-item:nth-child(4) .hgs-new-date {
  background:
    linear-gradient(135deg, var(--hgs-pink), #ce7187);
}
.hgs-new-news-item:nth-child(4) .hgs-new-icon {
  color: var(--hgs-pink);
  border-color: var(--hgs-pink);
}
/* =========================================
   TABLET
========================================= */
@media (max-width: 768px) {
  .hgs-new-news {
    padding: 15px 0;
  }
  .hgs-new-news-list {
    gap: 12px;
  }
  .hgs-new-news-item {
    width: 100%;
    min-height: 76px;
  }
  .hgs-new-date {
    flex: 0 0 72px;
    width: 72px;
    height: 66px;
  }
  .hgs-new-day {
    font-size: 22px;
  }
  .hgs-new-month {
    font-size: 13px;
  }
  .hgs-new-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin-left: 14px;
    font-size: 16px;
  }
  .hgs-new-content {
    padding:
      11px 15px;
  }
  .hgs-new-content h3 {
    font-size: 14px;
  }
  .hgs-new-content p {
    font-size: 11px;
  }
}
/* =========================================
   MOBILE
========================================= */
@media (max-width: 480px) {
  .hgs-new-news-list {
    gap: 10px;
  }
  .hgs-new-news-item {
    width: 100%;
    min-height: 72px;
    border-radius: 8px;
  }
  .hgs-new-date {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
  }
  .hgs-new-date::after {
    right: -10px;
    width: 20px;
  }
  .hgs-new-day {
    font-size: 20px;
  }
  .hgs-new-month {
    font-size: 12px;
  }
  .hgs-new-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    margin-left: 10px;
    font-size: 14px;
  }
  .hgs-new-content {
    padding:
      9px 10px 9px 12px;
  }
  .hgs-new-content h3 {
    margin-bottom: 4px;
    font-size: 12px;
  }
  .hgs-new-content p {
    font-size: 10px;
    line-height: 1.4;
  }
}
/* =========================================
   HGS ACADEMIC PROGRAMME
========================================= */
.hgs-ac {
  width: 100%;
  padding: 10px 0;
}
.hgs-ac-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
/* =========================================
   CARD
========================================= */
.hgs-ac-card {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  overflow: visible;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
  transition:
    transform 0.3s ease, box-shadow 0.3s ease;
}
.hgs-ac-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.14);
}
/* =========================================
   IMAGE
========================================= */
.hgs-ac-image {
  width: 100%;
  height: 176px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  position: relative;
}
.hgs-ac-image::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #f5a000;
}
.hgs-ac-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.hgs-ac-card:hover .hgs-ac-image img {
  transform: scale(1.04);
}
/* =========================================
   ROUND ICON
========================================= */
/* ROUND ICON */
.hgs-ac-icon {
  position: absolute;
  top: 151px;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid #f59b00;
  border-radius: 50%;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.hgs-ac-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: #f59b00;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* BODY */
.hgs-ac-body {
  min-height: 218px;
  padding: 35px 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hgs-ac-body h3 {
  margin: 0;
  color: #102f68;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
}
.hgs-ac-line {
  width: 40px;
  height: 3px;
  margin: 10px 0 11px;
  background: #f59b00;
  border-radius: 10px;
}
.hgs-ac-body p {
  margin: 0;
  color: #2c2c2c;
  font-weight: 500;
  font-size: 16px;
  padding-bottom: 19px;
  line-height: 1.55;
}
/* BUTTON */
.hgs-ac-btn {
  margin-top: auto;
  min-width: 130px;
  height: 31px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #f28b00;
  background: #fff;
  border: 1px solid #f59b00;
  border-radius: 20px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: 0.3s ease;
}
.hgs-ac-btn:hover {
  color: #fff;
  background: #f59b00;
}
.hgs-ac-btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: 0.3s ease;
}
.hgs-ac-btn:hover svg {
  transform: translateX(3px);
}
/* =========================================
   TABLET
========================================= */
@media (max-width: 768px) {
  .hgs-ac-grid {
    gap: 10px;
  }
  .hgs-ac-image {
    height: 150px;
  }
  .hgs-ac-icon {
    top: 126px;
    width: 44px;
    height: 44px;
  }
  .hgs-ac-icon svg {
    width: 22px;
    height: 22px;
  }
  .hgs-ac-body {
    min-height: 205px;
    padding: 31px 12px 15px;
  }
  .hgs-ac-body h3 {
    font-size: 14px;
  }
  .hgs-ac-body p {
    font-size: 11px;
  }
  .hgs-ac-btn {
    min-width: 120px;
  }
}
/* =========================================
   MOBILE
========================================= */
@media (max-width: 576px) {
  .hgs-ac-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .hgs-ac-image {
    height: 200px;
  }
  .hgs-ac-icon {
    top: 176px;
    width: 48px;
    height: 48px;
  }
  .hgs-ac-body {
    min-height: 210px;
    padding: 34px 20px 20px;
  }
  .hgs-ac-body h3 {
    font-size: 16px;
  }
  .hgs-ac-body p {
    max-width: 320px;
    font-size: 12px;
  }
  .hgs-ac-btn {
    min-width: 135px;
    height: 34px;
    font-size: 11px;
  }
}
/* =========================================
   SMALL MOBILE
========================================= */
@media (max-width: 380px) {
  .hgs-ac-image {
    height: 175px;
  }
  .hgs-ac-icon {
    top: 151px;
  }
  .hgs-ac-body h3 {
    font-size: 14px;
  }
  .hgs-ac-body p {
    font-size: 11px;
  }
}
/* =========================================
   HGS LOGO SLIDER
========================================= */
.hgs-logo-slider {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 15px 0;
}
.hgs-logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: hgsLogoMove 25s linear infinite;
}
/* Pause when mouse enters slider */
.hgs-logo-slider:hover .hgs-logo-track {
  animation-play-state: paused;
}
/* =========================================
   LOGO ITEM
========================================= */
.hgs-logo-item {
  width: 150px;
  height: 90px;
  margin-right: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hgs-logo-item img {
  max-width: 120px;
  max-height: 70px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Default Grey */
  filter: grayscale(100%);
  opacity: 0.65;
  transition:
    filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
/* =========================================
   HOVER - ORIGINAL COLOUR
========================================= */
.hgs-logo-item:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.08);
}
/* =========================================
   ANIMATION
========================================= */
@keyframes hgsLogoMove {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* =========================================
   TABLET
========================================= */
@media (max-width: 768px) {
  .hgs-logo-track {
    animation-duration: 20s;
  }
  .hgs-logo-item {
    width: 125px;
    height: 75px;
    margin-right: 25px;
  }
  .hgs-logo-item img {
    max-width: 100px;
    max-height: 55px;
  }
}
/* =========================================
   MOBILE
========================================= */
@media (max-width: 480px) {
  .hgs-logo-track {
    animation-duration: 18s;
  }
  .hgs-logo-item {
    width: 105px;
    height: 65px;
    margin-right: 20px;
  }
  .hgs-logo-item img {
    max-width: 85px;
    max-height: 48px;
  }
}
/* =========================================
   KEY FEATURES
========================================= */
.key-features-section {
  width: 100%;
  padding: 36px 20px 18px;
  background: #ffffff;
}
.key-features-container {
  width: 100%;
  border-radius: 31px;
  margin: 0 auto;
  padding: 44px 23px 39px;
  background: #22305c;
  overflow: hidden;
}
/* =========================================
   HEADING
========================================= */
.key-features-heading {
  text-align: center;
  margin-bottom: 55px;
}
.key-features-heading h2 {
  margin: 0;
  color: #e99a16;
  font-family: var(--satoshi, Arial, sans-serif);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.key-features-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 18px;
}
.key-features-divider span {
  display: block;
  width: 55px;
  height: 2px;
  background: #e99a16;
}
.key-features-divider i {
  width: 8px;
  height: 8px;
  margin: 0 -1px;
  border-radius: 50%;
  background: #e99a16;
}
/* =========================================
   GRID
========================================= */
.key-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.key-feature-item {
  position: relative;
  min-width: 0;
  padding: 0 35px;
  text-align: center;
}
/* Vertical separator */
.key-feature-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.18);
}
/* =========================================
   ICON
========================================= */
.key-feature-icon {
  width: 115px;
  height: 115px;
  margin: 0 auto 1px;
  border: 2px solid #e99a16;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #ffffff;
}
/* Gold partial ring */
.key-feature-icon::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #e99a16;
  border-right-color: #e99a16;
  transform: rotate(-25deg);
}
/* Small gold marker */
.key-feature-icon::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: #e99a16;
  border-radius: 50%;
  top: -7px;
  right: 25px;
}
.key-feature-icon i {
  font-size: 58px;
  color: #111111;
}
/* =========================================
   GOLD ARROW
========================================= */
.key-feature-arrow {
  display: block;
  width: 0;
  height: 0;
  margin: 4px auto 25px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 15px solid #e99a16;
}
/* =========================================
   TITLE
========================================= */
.key-feature-item h3 {
  min-height: 58px;
  margin: 0;
  color: #ffffff;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 700;
  text-align: center;
}
/* =========================================
   GOLD LINE
========================================= */
.key-feature-line {
  width: 78px;
  height: 4px;
  margin: 10px auto 10px;
  background: #e99a169c;
}
/* =========================================
   DESCRIPTION
========================================= */
.key-feature-item p {
  max-width: 245px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
  text-align: center;
}
/* =========================================
   HOVER
========================================= */
.key-feature-item {
  transition: transform 0.35s ease;
}
.key-feature-item:hover {
  transform: translateY(-5px);
}
.key-feature-item:hover .key-feature-icon {
  box-shadow: 0 0 30px rgba(233, 154, 22, 0.18);
}
/* =========================================
   TABLET
========================================= */
@media (max-width: 991px) {
  .key-features-section {
    padding: 50px 15px;
  }
  .key-features-container {
    padding: 50px 25px;
  }
  .key-features-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 50px;
  }
  .key-feature-item {
    padding: 0 25px;
  }
  .key-feature-item:nth-child(2)::after {
    display: none;
  }
  .key-feature-item:nth-child(1), .key-feature-item:nth-child(2) {
    padding-bottom: 45px;
  }
  .key-feature-item:nth-child(1)::before, .key-feature-item:nth-child(2)::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.18);
  }
  .key-feature-icon {
    width: 130px;
    height: 130px;
  }
  .key-feature-icon i {
    font-size: 48px;
  }
}
/* =========================================
   MOBILE
========================================= */
@media (max-width: 767px) {
  .key-features-section {
    padding: 30px 12px;
  }
  .key-features-container {
    padding: 40px 18px;
  }
  .key-features-heading {
    margin-bottom: 45px;
  }
  .key-features-heading h2 {
    font-size: 25px;
  }
  .key-features-divider span {
    width: 40px;
  }
  .key-features-grid {
    grid-template-columns: 1fr;
    row-gap: 45px;
  }
  .key-feature-item {
    padding: 0 10px 40px;
  }
  .key-feature-item:not(:last-child)::after {
    display: none;
  }
  .key-feature-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.18);
  }
  .key-feature-item:nth-child(1), .key-feature-item:nth-child(2) {
    padding-bottom: 40px;
  }
  .key-feature-item:nth-child(1)::before, .key-feature-item:nth-child(2)::before {
    left: 12%;
    right: 12%;
  }
  .key-feature-icon {
    width: 125px;
    height: 125px;
  }
  .key-feature-icon i {
    font-size: 46px;
  }
  .key-feature-item h3 {
    min-height: auto;
    font-size: 18px;
  }
  .key-feature-item p {
    font-size: 14px;
    max-width: 280px;
  }
}
/* =========================================
   SMALL MOBILE
========================================= */
@media (max-width: 400px) {
  .key-features-section {
    padding: 20px 8px;
  }
  .key-features-container {
    padding: 35px 15px;
  }
  .key-features-heading h2 {
    font-size: 22px;
  }
  .key-feature-icon {
    width: 110px;
    height: 110px;
  }
  .key-feature-icon i {
    font-size: 40px;
  }
  .key-feature-item h3 {
    font-size: 16px;
  }
  .key-feature-item p {
    font-size: 13px;
    line-height: 1.6;
  }
}
/* =========================================
   HGS CREATIVE MASONRY GALLERY
========================================= */
.hgs-gallery {
  width: 100%;
  padding: 40px 0 0px;
}
.hgs-gallery-grid {
  margin: auto;
  display: grid;
  margin-bottom: 40px;
  /*grid-template-columns:
    1.25fr 0.85fr 0.85fr 1.1fr;
  grid-template-rows:
    190px 190px;*/
  gap: 12px;
}
/* =========================================
   GALLERY ITEM
========================================= */
.hgs-gallery-item {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #ddd;
  text-decoration: none;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .10);
  transition:
    transform .35s ease, box-shadow .35s ease;
}
.hgs-gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}
/* =========================================
   IMAGE
========================================= */
.hgs-gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .6s ease;
}
.hgs-gallery-item:hover img {
  transform: scale(1.07);
}
/* =========================================
   CREATIVE GRID POSITIONS
========================================= */
/* Large first image */
.hgs-gallery-large {
  grid-row: span 2;
}
/* Tall fourth image */
.hgs-gallery-tall {
  grid-row: span 2;
}
/* =========================================
   OVERLAY
========================================= */
.hgs-gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(8, 28, 65, .88), rgba(8, 28, 65, 0) 65%);
  pointer-events: none;
}
.hgs-gallery-overlay {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 15px;
  z-index: 2;
  color: #fff;
}
.hgs-gallery-overlay span {
  display: block;
  margin-bottom: 4px;
  color: #f59b00;
  font-size: 10px;
  font-weight: 700;
}
.hgs-gallery-overlay h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
}
/* =========================================
   DESKTOP HOVER ARROW
========================================= */
.hgs-gallery-overlay::after {
  content: "↗";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #102f68;
  background: #fff;
  border-radius: 50%;
  font-size: 15px;
  opacity: 0;
  transform: translateY(8px);
  transition: .3s ease;
}
.hgs-gallery-item:hover .hgs-gallery-overlay::after {
  opacity: 1;
  transform: translateY(0);
}
/* =========================================
   TABLET
========================================= */
@media (max-width: 900px) {
  .hgs-gallery-grid {
    width: 94%;
    grid-template-columns:
      1.2fr 1fr 1fr;
    grid-template-rows:
      170px 170px;
  }
  .hgs-gallery-large {
    grid-row: span 2;
  }
  .hgs-gallery-tall {
    grid-row: span 1;
  }
}
/* =========================================
   MOBILE
========================================= */
@media (max-width: 600px) {
  .hgs-gallery {
    padding: 25px 0;
  }
  .hgs-gallery-grid {
    width: 92%;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    grid-auto-rows: 150px;
    gap: 9px;
  }
  .hgs-gallery-large {
    grid-row: span 2;
  }
  .hgs-gallery-tall {
    grid-row: span 2;
  }
  .hgs-gallery-overlay {
    left: 11px;
    right: 11px;
    bottom: 11px;
  }
  .hgs-gallery-overlay h3 {
    font-size: 12px;
  }
  .hgs-gallery-overlay span {
    font-size: 8px;
  }
  .hgs-gallery-overlay::after {
    display: none;
  }
}
/* =========================================
   SMALL MOBILE
========================================= */
@media (max-width: 380px) {
  .hgs-gallery-grid {
    grid-auto-rows: 125px;
    gap: 7px;
  }
  .hgs-gallery-overlay h3 {
    font-size: 11px;
  }
}
/* =========================
   content-hgs1 WRAPPER
========================= */
.content-hgs1-page-hgs {
  width: 100%;
  padding: 50px 20px;
}
/* =========================
   HEADINGS
========================= */
.content-hgs1 h1 {
  margin-bottom: 18px;
  color: var(--hgs-navy);
  font-size: 35px;
  font-weight: 700;
  line-height: 1.2;
}
.content-hgs1 h2 {
  position: relative;
  margin: 55px 0 18px;
  color: var(--hgs-green);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.3;
}
.content-hgs1 h2::before {
  content-hgs1: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 5px;
  height: calc(100% - 8px);
  background: var(--hgs-pink);
  border-radius: 10px;
}
.content-hgs1 h3 {
  margin-bottom: 20px;
  color: var(--hgs-navy);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
}
.title-line-hgs {
  width: 80px;
  height: 4px;
  margin-bottom: 32px;
  background: linear-gradient(90deg, var(--hgs-purple), var(--hgs-pink), var(--hgs-orange));
  border-radius: 10px;
}
/* =========================
   TEXT
========================= */
.content-hgs1 p {
  margin-bottom: 20px;
  color: var(--hgs-text);
  font-family: var(--nunito-sans);
  font-size: 16px;
  line-height: 1.85;
}
.content-hgs1 strong {
  color: var(--hgs-navy);
  font-weight: 700;
}
.content-hgs1 a {
  color: var(--hgs-purple);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(119, 115, 199, 0.35);
  transition: all 0.25s ease;
}
.content-hgs1 a:hover {
  color: var(--hgs-green);
  border-bottom-color: var(--hgs-green);
}
/* =========================
   LISTS
========================= */
.content-hgs1 ol {
  margin: 22px 0 30px;
  padding-left: 25px;
}
.content-hgs1 ol li {
  margin-bottom: 18px;
  padding-left: 8px;
  color: var(--hgs-text);
  font-family: var(--nunito-sans);
  font-size: 16px;
  line-height: 1.8;
}
.content-hgs1 ol li::marker {
  color: var(--hgs-purple);
  font-family: var(--outfit);
  font-weight: 700;
}
/* =========================
   SCHOOL CARDS
========================= */
.school-card-hgs {
  position: relative;
  margin: 28px 0;
  padding: 32px 34px;
  background: #ffffff;
  border: 1px solid rgba(27, 50, 92, 0.09);
  border-radius: 18px;
  box-shadow: 0 10px 35px rgba(27, 50, 92, 0.07);
  overflow: hidden;
  transition:
    transform 0.25s ease, box-shadow 0.25s ease;
}
.school-card-hgs::before {
  content-hgs1: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, var(--hgs-purple), var(--hgs-pink), var(--hgs-orange));
}
.school-card-hgs:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 45px rgba(27, 50, 92, 0.11);
}
.school-card-hgs h3 {
  margin-bottom: 22px;
}
.school-card-hgs p:last-child {
  margin-bottom: 0;
}
/* =========================
   RESPONSIVE
========================= */
@media (max-width: 991px) {
  .content-hgs1-page-hgs {
    padding: 55px 20px;
  }
  .content-hgs1 h1 {
    font-size: 36px;
  }
  .content-hgs1 h2 {
    font-size: 27px;
    margin-top: 45px;
  }
  .content-hgs1 h3 {
    font-size: 22px;
  }
  .school-card-hgs {
    padding: 28px 30px;
  }
}
@media (max-width: 767px) {
  .content-hgs1-page-hgs {
    padding: 40px 16px;
  }
  .content-hgs1 h1 {
    font-size: 31px;
  }
  .content-hgs1 h2 {
    margin-top: 38px;
    font-size: 24px;
  }
  .content-hgs1 h3 {
    font-size: 21px;
  }
  .content-hgs1 p, .content-hgs1 ol li {
    font-size: 15px;
    line-height: 1.75;
  }
  .content-hgs1 ol {
    padding-left: 22px;
  }
  .school-card-hgs {
    margin: 22px 0;
    padding: 24px 22px;
    border-radius: 14px;
  }
}
@media (max-width: 480px) {
  .content-hgs1-page-hgs {
    padding: 30px 14px;
  }
  .content-hgs1 h1 {
    font-size: 27px;
  }
  .content-hgs1 h2 {
    font-size: 22px;
    padding-left: 14px;
  }
  .content-hgs1 h2::before {
    width: 4px;
  }
  .content-hgs1 h3 {
    font-size: 19px;
  }
  .school-card-hgs {
    padding: 21px 18px;
  }
  .title-line-hgs {
    width: 65px;
    height: 3px;
    margin-bottom: 25px;
  }
}
.map-wrapper {
  width: 100%;
  height: 410px;
  border: 5px solid #fff;
  border-radius: 15px;
  overflow: hidden;
  box-sizing: border-box;
}
.map-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.breadcrumb span {
  color: #fff;
}
/* =========================================
           SECTION
        ========================================= */
.hgs-section {
  width: 100%;
  padding: 65px 25px;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 20%, rgba(98, 181, 170, .08), transparent 20%), radial-gradient(circle at 90% 70%, rgba(119, 115, 199, .07), transparent 20%), var(--hgs-bg);
}
.hgs-container {
  width: min(1450px, 100%);
  margin: auto;
}
/* =========================================
           SECTION HEADING
        ========================================= */
.hgs-heading {
  text-align: center;
  margin-bottom: 45px;
}
.hgs-heading small {
  display: block;
  margin-bottom: 10px;
  color: var(--hgs-green);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 4px;
}
.hgs-heading h1 {
  color: var(--hgs-navy);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.15;
}
.hgs-heading-line {
  width: 70px;
  height: 3px;
  margin: 18px auto 0;
  border-radius: 20px;
  background:
    linear-gradient(90deg, var(--hgs-green), var(--hgs-purple), var(--hgs-orange));
}
/* =========================================
           GRID
        ========================================= */
.hgs-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 28px;
}
/* =========================================
           CARD
        ========================================= */
.hgs-card {
  position: relative;
  height: 450px;
  overflow: hidden;
  border-radius: 25px;
  background: #fff;
  box-shadow:
    0 15px 40px rgba(31, 41, 55, .10);
  cursor: pointer;
  transition:
    transform .45s ease, box-shadow .45s ease;
}
.hgs-card:hover {
  transform: translateY(-10px);
  box-shadow:
    0 28px 65px rgba(31, 41, 55, .17);
}
/* =========================================
           IMAGE
        ========================================= */
.hgs-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hgs-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition:
    transform .9s cubic-bezier(.2, .8, .2, 1);
}
.hgs-card:hover .hgs-image img {
  transform: scale(1.08);
}
/* =========================================
           IMAGE DARK GRADIENT
        ========================================= */
.hgs-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, transparent 35%, rgba(0, 0, 0, .12) 58%, rgba(0, 0, 0, .72) 100%);
  transition:
    background .5s ease;
}
.hgs-card:hover .hgs-image::after {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .02) 20%, rgba(0, 0, 0, .15) 50%, rgba(0, 0, 0, .40) 100%);
}
/* =========================================
           CARD CONTENT PANEL
        ========================================= */
.hgs-content {
  position: absolute;
  z-index: 5;
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding: 20px 20px 20px;
  text-align: center;
  background: rgba(255, 255, 255, .97);
  border-radius: 22px;
  box-shadow:
    0 12px 35px rgba(0, 0, 0, .14);
  transform:
    translateY(calc(100% - 130px));
  transition:
    transform .55s cubic-bezier(.2, .8, .2, 1);
}
/* HOVER PANEL */
.hgs-card:hover .hgs-content {
  transform:
    translateY(0);
}
/* =========================================
           SMALL LABEL
        ========================================= */
.hgs-label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3px;
  color: #6b7280;
}
/* =========================================
           HEADING
        ========================================= */
.hgs-content h2 {
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
}
.hgs-card-green .hgs-content h2 {
  color: var(--hgs-green);
}
.hgs-card-purple .hgs-content h2 {
  color: var(--hgs-purple);
}
.hgs-card-orange .hgs-content h2 {
  color: #e79274;
}
/* =========================================
           LINE
        ========================================= */
.hgs-line {
  display: block;
  width: 48px;
  height: 3px;
  margin:
    15px auto 20px;
  border-radius: 20px;
  opacity: 0;
  transform: scaleX(0);
  transition:
    opacity .4s ease .12s, transform .4s ease .12s;
}
.hgs-card-green .hgs-line {
  background: var(--hgs-teal);
}
.hgs-card-purple .hgs-line {
  background: var(--hgs-purple);
}
.hgs-card-orange .hgs-line {
  background: var(--hgs-orange);
}
.hgs-card:hover .hgs-line {
  opacity: 1;
  transform: scaleX(1);
}
/* =========================================
           DESCRIPTION
        ========================================= */
.hgs-description {
  max-width: 470px;
  margin: auto;
  color: var(--hgs-text);
  font-size: 15px;
  line-height: 1.85;
  font-weight: 500;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .45s ease .15s, transform .45s ease .15s;
}
.hgs-card:hover .hgs-description {
  opacity: 1;
  transform: translateY(0);
}
/* =========================================
           READ MORE
        ========================================= */
.hgs-button {
  width: 165px;
  height: 50px;
  margin:
    24px auto 0;
  padding:
    0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border:
    1.5px solid currentColor;
  border-radius: 50px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .45s ease .22s, transform .45s ease .22s, background .3s ease, box-shadow .3s ease;
}
.hgs-card:hover .hgs-button {
  opacity: 1;
  transform: translateY(0);
}
.hgs-card-green .hgs-button {
  color: var(--hgs-green);
}
.hgs-card-purple .hgs-button {
  color: var(--hgs-purple);
}
.hgs-card-orange .hgs-button {
  color: #e79274;
}
.hgs-button:hover {
  background: rgba(0, 0, 0, .035);
  box-shadow:
    0 7px 18px rgba(0, 0, 0, .08);
}
.hgs-button-arrow {
  font-size: 27px;
  line-height: 1;
  transition:
    transform .3s ease;
}
.hgs-button:hover .hgs-button-arrow {
  transform:
    translateX(7px);
}
/* =========================================
           COLOUR BOTTOM BORDER
        ========================================= */
.hgs-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  z-index: 10;
}
.hgs-card-green::after {
  background: var(--hgs-green);
}
.hgs-card-purple::after {
  background: var(--hgs-purple);
}
.hgs-card-orange::after {
  background: var(--hgs-orange);
}
/* =========================================
           NUMBER BADGE
        ========================================= */
.hgs-number {
  position: absolute;
  z-index: 4;
  top: 18px;
  right: 18px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  background:
    rgba(255, 255, 255, .20);
  border:
    1px solid rgba(255, 255, 255, .5);
  backdrop-filter:
    blur(8px);
  transition:
    transform .4s ease;
}
.hgs-card:hover .hgs-number {
  transform:
    scale(1.1) rotate(8deg);
}
/* =========================================
           DECORATIVE DOTS
        ========================================= */
.hgs-dots {
  position: absolute;
  z-index: 1;
  width: 90px;
  height: 90px;
  left: -20px;
  bottom: -20px;
  opacity: .2;
  background-image:
    radial-gradient(circle, currentColor 2px, transparent 3px);
  background-size:
    18px 18px;
}
.hgs-card-green .hgs-dots {
  color: var(--hgs-green);
}
.hgs-card-purple .hgs-dots {
  color: var(--hgs-purple);
}
.hgs-card-orange .hgs-dots {
  color: var(--hgs-orange);
}
/* =========================================
           TABLET
        ========================================= */
@media (max-width: 1050px) {
  .hgs-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }
}
/* =========================================
           MOBILE
        ========================================= */
@media (max-width: 700px) {
  .hgs-section {
    padding:
      50px 15px;
  }
  .hgs-heading {
    margin-bottom: 30px;
  }
  .hgs-heading small {
    font-size: 12px;
    letter-spacing: 3px;
  }
  .hgs-heading h1 {
    font-size: 30px;
  }
  .hgs-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .hgs-card {
    height: 520px;
  }
  /*
             * On mobile there is no mouse hover.
             * Keep the content visible.
             */
  .hgs-content {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding:
      25px 20px 27px;
    transform:
      translateY(0);
  }
  .hgs-content h2 {
    font-size: 21px;
  }
  .hgs-line {
    opacity: 1;
    transform:
      scaleX(1);
  }
  .hgs-description {
    opacity: 1;
    transform:
      translateY(0);
    font-size: 13px;
    line-height: 1.7;
  }
  .hgs-button {
    opacity: 1;
    transform:
      translateY(0);
    width: 190px;
    height: 50px;
    font-size: 13px;
  }
}
/* =========================================
           SMALL MOBILE
        ========================================= */
@media (max-width: 390px) {
  .hgs-card {
    height: 500px;
  }
  .hgs-content h2 {
    font-size: 19px;
  }
  .hgs-description {
    font-size: 12px;
  }
}
/* =========================================
           REDUCED MOTION
        ========================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
  }
}
/* =========================
   SECTION
========================= */
.hgs-section-feature {
  padding: 30px 25px;
  
}
/* =========================
   GRID
========================= */
.hgs-grid-feature {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}
/* =========================
   CARD
========================= */
.hgs-card-feature {
  position: relative;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(31, 41, 55, .06);
  box-shadow:
    0 10px 30px rgba(31, 41, 55, .08);
  transition:
    transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease;
}
/* CARD HOVER */
.hgs-card-feature:hover {
  transform: translateY(-10px);
  box-shadow:
    0 25px 55px rgba(31, 41, 55, .15);
}
/* =========================
   IMAGE
========================= */
.hgs-card-feature-image {
  width: 100%;
  height: 250px;
  overflow: hidden;
}
.hgs-card-feature-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition:
    transform .8s cubic-bezier(.2, .8, .2, 1);
}
.hgs-card-feature:hover .hgs-card-feature-image img {
  transform: scale(1.07);
}
/* =========================
   CONTENT
========================= */
.hgs-card-feature-content {
  position: relative;
  min-height: 95px;
  padding: 20px 20px;
  ;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #fff;
}
/* =========================
   COLOUR ACCENT
========================= */
.hgs-card-feature-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 45px;
  height: 4px;
  transform:
    translateX(-50%);
  border-radius: 0 0 10px 10px;
  transition:
    width .4s ease;
}
.hgs-card-feature:nth-child(1) .hgs-card-feature-content::before {
  background: var(--hgs-green);
}
.hgs-card-feature:nth-child(2) .hgs-card-feature-content::before {
  background: var(--hgs-purple);
}
.hgs-card-feature:nth-child(3) .hgs-card-feature-content::before {
  background: var(--hgs-orange);
}
.hgs-card-feature:nth-child(4) .hgs-card-feature-content::before {
  background: var(--hgs-pink);
}
.hgs-card-feature:hover .hgs-card-feature-content::before {
  width: 80px;
}
/* =========================
   HEADING
========================= */
.hgs-card-feature-content h2 {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--hgs-navy);
}
/* Individual colours */
.hgs-card-feature:nth-child(1) .hgs-card-feature-content h2 {
  color: var(--hgs-green);
}
.hgs-card-feature:nth-child(2) .hgs-card-feature-content h2 {
  color: var(--hgs-purple);
}
.hgs-card-feature:nth-child(3) .hgs-card-feature-content h2 {
  color: #df9b55;
}
.hgs-card-feature:nth-child(4) .hgs-card-feature-content h2 {
  color: var(--hgs-pink);
}
/* =========================
   NUMBER
========================= */
.hgs-card-feature-number {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  background:
    rgba(255, 255, 255, .25);
  border:
    1px solid rgba(255, 255, 255, .65);
  backdrop-filter:
    blur(8px);
  z-index: 3;
  transition:
    transform .4s ease;
}
.hgs-card-feature:hover .hgs-card-feature-number {
  transform:
    scale(1.1) rotate(8deg);
}
/* =========================
   MOBILE
========================= */
@media (max-width: 1100px) {
  .hgs-grid-feature {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 650px) {
  .hgs-section-feature {
    padding: 2px 0px;
  }
  .hgs-grid-feature {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hgs-card-feature-image {
    height: 250px;
  }
  .hgs-card-feature-content {
    min-height: 80px;
    padding: 18px 14px;
  }
  .hgs-card-feature-content h2 {
    font-size: 18px;
  }
}
/* =========================
   SMALL MOBILE
========================= */
@media (max-width: 380px) {
  .hgs-card-feature-image {
    height: 220px;
  }
  .hgs-card-feature-content h2 {
    font-size: 15px;
  }
}
/* ==============================
   SECTION
============================== */
.hgs-blog-section {
  padding: 0px 6px;
}
/* ==============================
   MASONRY GRID
============================== */
.hgs-masonry {
  display: grid;
  grid-template-columns:
    1.15fr .85fr;
  grid-template-rows:
    auto auto;
  gap: 25px;
}
/* ==============================
   CARD
============================== */
.hgs-blog-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 20px;
  box-shadow:
    0 12px 35px rgba(27, 50, 92, .08);
  transition:
    transform .5s ease, box-shadow .5s ease;
}
.hgs-blog-card:hover {
  transform: translateY(-7px);
  box-shadow:
    0 25px 55px rgba(27, 50, 92, .14);
}
/* FIRST BIG CARD */
.hgs-blog-card:first-child {
  grid-row: 1 / 3;
}
/* ==============================
   IMAGE
============================== */
.hgs-blog-image {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hgs-blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition:
    transform .8s ease;
}
.hgs-blog-card:hover .hgs-blog-image img {
  transform: scale(1.06);
}
/* ==============================
   BIG CARD
============================== */
.hgs-blog-card:first-child {
  min-height: 542px;
}
.hgs-blog-card:first-child .hgs-blog-image {
  height: 100%;
}
/* ==============================
   SMALL CARDS
============================== */
.hgs-blog-card:nth-child(2), .hgs-blog-card:nth-child(3) {
  min-height: 240px;
}
.hgs-blog-card:nth-child(2) .hgs-blog-image, .hgs-blog-card:nth-child(3) .hgs-blog-image {
  height: 100%;
}
/* ==============================
   IMAGE GRADIENT
============================== */
.hgs-blog-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, transparent 25%, rgba(0, 0, 0, .12) 48%, rgba(0, 0, 0, .82) 100%);
}
/* ==============================
   DATE
============================== */
.hgs-date {
  position: absolute;
  z-index: 3;
  top: 15px;
  left: 15px;
  width: 50px;
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--hgs-navy);
  border-radius: 10px;
}
.hgs-date strong {
  font-size: 24px;
  line-height: 1;
}
.hgs-date span {
  margin-top: 0px;
  font-size: 12px;
  font-weight: 700;
  line-height: 17px;
  color: var(--hgs-green);
}
/* ==============================
   CONTENT
============================== */
.hgs-blog-content {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 35px;
}
/* ==============================
   CATEGORY
============================== */
.hgs-blog-category {
  display: block;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  margin-bottom: 10px;
}
/* ==============================
   TITLE
============================== */
.hgs-blog-content h3 {
  max-width: 650px;
  color: #fff;
  font-size: clamp(20px, 3vw, 20px);
  line-height: 1.12;
  font-weight: 600;
}
/* SMALL TITLES */
.hgs-blog-card:nth-child(2) .hgs-blog-content h3, .hgs-blog-card:nth-child(3) .hgs-blog-content h3 {
  font-size: 20px;
}
/* ==============================
   READING TIME
============================== */
.hgs-reading-time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: rgba(255, 255, 255, .8);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
}
.hgs-reading-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hgs-teal);
}
/* ==============================
   CARD ACCENTS
============================== */
.hgs-blog-card:nth-child(1)::before, .hgs-blog-card:nth-child(2)::before, .hgs-blog-card:nth-child(3)::before {
  content: "";
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
}
.hgs-blog-card:nth-child(1)::before {
  background: var(--hgs-green);
}
.hgs-blog-card:nth-child(2)::before {
  background: var(--hgs-purple);
}
.hgs-blog-card:nth-child(3)::before {
  background: var(--hgs-orange);
}
/* ==============================
   TABLET
============================== */
@media (max-width: 900px) {
  .hgs-masonry {
    grid-template-columns: 1fr 1fr;
  }
  .hgs-blog-card:first-child {
    grid-row: auto;
    grid-column: 1 / -1;
    min-height: 500px;
  }
  .hgs-blog-card:nth-child(2), .hgs-blog-card:nth-child(3) {
    min-height: 350px;
  }
}
/* ==============================
   MOBILE
============================== */
@media (max-width: 600px) {
  .hgs-blog-section {
    padding: 0px 0px;
  }
  .hgs-blog-head-left h2 {
    font-size: 42px;
  }
  .hgs-blog-head a {
    display: inline-block;
    margin-top: 20px;
  }
  .hgs-masonry {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hgs-blog-card:first-child, .hgs-blog-card:nth-child(2), .hgs-blog-card:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
    min-height: 390px;
  }
  .hgs-blog-content {
    padding: 25px 23px;
  }
  .hgs-blog-content h3, .hgs-blog-card:nth-child(2) .hgs-blog-content h3, .hgs-blog-card:nth-child(3) .hgs-blog-content h3 {
    font-size: 16px;
  }
  .hgs-date {
    width: 60px;
    height: 60px;
    top: 15px;
    left: 15px;
  }
  .hgs-date strong {
    font-size: 23px;
  }
}
/* =====================================================
   SECTION
===================================================== */
.hgs-tour-scholarship {
  padding: 80px 25px;
  background: var(--hgs-bg);
}
.hgs-container {
  width: min(1400px, 100%);
  margin: auto;
}
/* =====================================================
   MAIN LAYOUT
===================================================== */
.hgs-main-layout {
  display: grid;
  grid-template-columns:
    0.78fr 1.55fr;
  gap: 35px;
  align-items: stretch;
}
/* =====================================================
   SCHOOL TOUR
===================================================== */
.hgs-tour-card {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  border-radius: 28px;
  background: var(--hgs-dark-green);
  box-shadow:
    0 20px 50px rgba(27, 50, 92, .12);
}
.hgs-tour-image {
  position: absolute;
  inset: 0;
}
.hgs-tour-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition:
    transform .8s ease;
}
.hgs-tour-card:hover .hgs-tour-image img {
  transform: scale(1.05);
}
/* IMAGE OVERLAY */
.hgs-tour-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(11, 61, 25, .05), rgba(11, 61, 25, .20) 40%, rgba(11, 61, 25, .95) 100%);
}
/* =====================================================
   PLAY BUTTON
===================================================== */
.hgs-tour-play {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 82px;
  height: 82px;
  transform:
    translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  box-shadow:
    0 15px 35px rgba(0, 0, 0, .22);
  transition:
    transform .35s ease;
}
.hgs-tour-play::after {
  content: "";
  margin-left: 5px;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 17px solid var(--hgs-green);
}
.hgs-tour-card:hover .hgs-tour-play {
  transform:
    translate(-50%, -50%) scale(1.1);
}
/* =====================================================
   TOUR CONTENT
===================================================== */
.hgs-tour-content {
  position: absolute;
  z-index: 5;
  left: 35px;
  right: 35px;
  bottom: 35px;
}
.hgs-tour-label {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--hgs-teal);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.hgs-tour-content h2 {
  color: #fff;
  font-size:
    clamp(35px, 4vw, 35px);
  line-height: 1.05;
  font-weight: 600;
}
.hgs-tour-content p {
  max-width: 470px;
  margin-top: 15px;
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  line-height: 1.7;
}
/* WATCH BUTTON */
.hgs-watch-btn {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin-top: 22px;
  padding: 13px 22px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50px;
  color: #fff;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  transition:
    background .3s ease, color .3s ease;
}
.hgs-watch-btn:hover {
  background: #fff;
  color: var(--hgs-green);
}
/* =====================================================
   SCHOLARSHIP AREA
===================================================== */
.hgs-scholarship-area {
  min-width: 0;
}
/* =====================================================
   HEADER
===================================================== */
.hgs-scholarship-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 28px;
}
.hgs-scholarship-header small {
  display: block;
  margin-bottom: 9px;
  color: var(--hgs-green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.hgs-scholarship-header h2 {
  color: var(--hgs-navy);
  font-family:
    "Playfair Display", Georgia, serif;
  font-size:
    clamp(40px, 5vw, 62px);
  line-height: .95;
  font-weight: 600;
}
.hgs-scholarship-header p {
  max-width: 350px;
  margin-bottom: 3px;
  color: var(--hgs-text);
  font-size: 13px;
  line-height: 1.7;
  text-align: right;
}
/* =====================================================
   SLIDER
===================================================== */
.hgs-slider-wrapper {
  position: relative;
  padding:
    5px 48px;
}
.hgs-slider {
  overflow: hidden;
}
/* TRACK */
.hgs-slider-track {
  display: flex;
  transition:
    transform .55s cubic-bezier(.22, .61, .36, 1);
}
/* =====================================================
   SLIDE
===================================================== */
.hgs-slide {
  flex: 0 0 50%;
  min-width: 0;
  padding: 0 11px;
}
/* =====================================================
   SCHOLARSHIP CARD
===================================================== */
.hgs-scholarship-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(27, 50, 92, .08);
  box-shadow:
    0 10px 30px rgba(27, 50, 92, .08);
  transition:
    transform .4s ease, box-shadow .4s ease;
}
.hgs-scholarship-card:hover {
  transform: translateY(-7px);
  box-shadow:
    0 22px 45px rgba(27, 50, 92, .15);
}
/* =====================================================
   IMAGE
===================================================== */
.hgs-scholarship-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #eef3fa;
}
.hgs-scholarship-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition:
    transform .7s ease;
}
.hgs-scholarship-card:hover .hgs-scholarship-image img {
  transform: scale(1.035);
}
/* =====================================================
   HOVER
===================================================== */
.hgs-image-hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  background:
    linear-gradient(to top, rgba(27, 50, 92, .85), transparent 55%);
  opacity: 0;
  transition:
    opacity .35s ease;
}
.hgs-scholarship-card:hover .hgs-image-hover {
  opacity: 1;
}
.hgs-image-hover span {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
}
/* =====================================================
   CARD FOOTER
===================================================== */
.hgs-scholarship-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:
    16px 18px;
}
.hgs-scholarship-footer span {
  color: var(--hgs-navy);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.hgs-card-arrow {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--hgs-green);
  background:
    rgba(4, 106, 88, .08);
  font-size: 19px;
  transition:
    transform .3s ease;
}
.hgs-scholarship-card:hover .hgs-card-arrow {
  transform:
    translateX(5px);
}
/* =====================================================
   SLIDER ARROWS
===================================================== */
.hgs-slider-btn {
  position: absolute;
  z-index: 10;
  top: 50%;
  width: 44px;
  height: 44px;
  transform:
    translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(27, 50, 92, .1);
  border-radius: 50%;
  background: #fff;
  color: var(--hgs-navy);
  font-size: 22px;
  cursor: pointer;
  box-shadow:
    0 7px 20px rgba(27, 50, 92, .12);
  transition:
    background .3s ease, color .3s ease, transform .3s ease;
}
.hgs-slider-btn:hover {
  background: var(--hgs-green);
  color: #fff;
  transform:
    translateY(-50%) scale(1.05);
}
.hgs-slider-prev {
  left: 0;
}
.hgs-slider-next {
  right: 0;
}
/* DISABLED */
.hgs-slider-btn.disabled {
  opacity: .35;
  pointer-events: none;
}
/* =====================================================
   DOTS
===================================================== */
.hgs-slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.hgs-dot {
    width: 44px;
    height: 25px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    position: relative;
    cursor: pointer;
}

.hgs-dot::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.hgs-dot.active {
  width: 25px;
  border-radius: 20px;
  background: var(--hgs-green);
}
/* =====================================================
   BOTTOM INFO
===================================================== */
.hgs-scholarship-info {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
  gap: 1px;
  margin-top: 28px;
  overflow: hidden;
  border: 1px solid rgba(27, 50, 92, .07);
  border-radius: 17px;
  background: rgba(27, 50, 92, .07);
}
.hgs-info-item {
  padding: 18px;
  background: #fff;
}
.hgs-info-item strong {
  display: block;
  margin-bottom: 15px;
  color: var(--hgs-navy);
  font-size: 15px;
}
.hgs-info-item span {
  color: var(--hgs-text);
  font-size: 13px;
  line-height: 1.5;
}
/* =====================================================
   TABLET
===================================================== */
@media (max-width: 1050px) {
  .hgs-main-layout {
    grid-template-columns: 1fr;
  }
  .hgs-tour-card {
    min-height: 520px;
  }
}
/* =====================================================
   MOBILE
===================================================== */
@media (max-width: 650px) {
  .hgs-tour-scholarship {
    padding: 25px 0px;
  }
  .hgs-main-layout {
    gap: 45px;
  }
  .hgs-tour-card {
    min-height: 430px;
    border-radius: 21px;
  }
  .hgs-tour-content {
    left: 23px;
    right: 23px;
    bottom: 25px;
  }
  .hgs-tour-content h2 {
    font-size: 36px;
  }
  .hgs-tour-content p {
    font-size: 13px;
  }
  .hgs-tour-play {
    width: 65px;
    height: 65px;
  }
  /* HEADER */
  .hgs-scholarship-header {
    display: block;
    margin-bottom: 25px;
  }
  .hgs-scholarship-header h2 {
    font-size: 42px;
  }
  .hgs-scholarship-header p {
    margin-top: 15px;
    text-align: left;
  }
  /* ONE CARD */
  .hgs-slider-wrapper {
    padding:
      5px 36px;
  }
  .hgs-slide {
    flex: 0 0 100%;
    padding: 0 6px;
  }
  .hgs-scholarship-image {
    aspect-ratio: 1 / 1;
  }
  /* ARROWS */
  .hgs-slider-btn {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
  /* INFO */
  .hgs-scholarship-info {
    grid-template-columns: 1fr;
    gap: 1px;
  }
}
/* =====================================================
   SMALL MOBILE
===================================================== */
@media (max-width: 380px) {
  .hgs-tour-card {
    min-height: 390px;
  }
  .hgs-tour-content h2 {
    font-size: 32px;
  }
  .hgs-scholarship-header h2 {
    font-size: 36px;
  }
}






/* =========================================================
   HGS COLOURS
========================================================= */

:root{
    --purple:#7773c7;
    --pink:#df8296;
    --orange:#f2b45d;
    --teal:#62b5aa;
    --green:#046a58;
    --navy:#1b325c;
    --text:#4b5563;
    --cream:#fcfcfa;
    --white:#fff;
    --border:#e8e6e2;
}


/* =========================================================
   RESET
========================================================= */


/* =========================================================
   PAGE CONTAINER
========================================================= */

.events-page{
    width:100%;
    padding:70px 0 20px;
}

.events-container{
    width:min(1180px, calc(100% - 40px));
    margin:0 auto;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.events-header{
    margin-bottom:55px;
}

.events-kicker{
    display:flex;
    align-items:center;
    gap:12px;

    color:var(--purple);
    font-size:13px;
    font-weight:700;
    letter-spacing:2.5px;
    text-transform:uppercase;

    margin-bottom:12px;
}

.events-kicker::before{
    content:"";
    width:38px;
    height:3px;
    background:var(--orange);
}

.events-title{
    color:var(--navy);
    font-size:clamp(30px,5vw,30px);
    line-height:1.05;
    font-weight:800;
 
}

.events-title span{
    color:var(--pink);
}

.events-line{
    width:70px;
    height:4px;
    background:var(--purple);
    margin-top:20px;
}


/* =========================================================
   EVENT ITEM
========================================================= */

.event-item{
    display:grid;
    grid-template-columns:44% 56%;
    background:var(--white);

    margin-bottom:45px;

    border:1px solid var(--border);

    box-shadow:
        0 15px 40px rgba(27,50,92,.07);

    overflow:hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.event-item:hover{
    transform:translateY(-4px);

    box-shadow:
        0 22px 50px rgba(27,50,92,.12);
}


/* =========================================================
   EVENT IMAGE AREA
========================================================= */

.event-media{
    position:relative;
    min-width:0;
    overflow:hidden;
    background:#e9e9e9;
}


/*
   IMPORTANT:
   This prevents the previous "image sliding outside"
   problem.
*/

.event-slider{
    position:relative;
    width:100%;
    height:100%;
    min-height:390px;
    overflow:hidden;
}

.event-track{
    display:flex;
    width:100%;
    height:100%;

    transform:translate3d(0,0,0);

    transition:
        transform .5s cubic-bezier(.4,0,.2,1);

    will-change:transform;
}

.event-slide{
    flex:0 0 100%;
    width:100%;
    min-width:100%;
    height:100%;

    overflow:hidden;
}

.event-slide img{
    width:100%;
    height:100%;

    min-height:390px;

    object-fit:cover;

    user-select:none;
    -webkit-user-drag:none;
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.event-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(27,50,92,.05) 45%,
            rgba(27,50,92,.55)
        );

    pointer-events:none;
}


/* =========================================================
   EVENT NUMBER
========================================================= */

.event-number{
    position:absolute;
    top:18px;
    left:18px;

    z-index:5;

    background:var(--orange);
    color:var(--navy);

    padding:7px 13px;

    font-size:11px;
    font-weight:800;
    letter-spacing:1px;
}


/* =========================================================
   SLIDER BUTTONS
========================================================= */

.slider-btn{
    position:absolute;

    top:50%;
    transform:translateY(-50%);

    z-index:10;

    width:40px;
    height:40px;

    border:0;
    border-radius:50%;

    background:rgba(255,255,255,.92);
    color:var(--navy);

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:20px;

    box-shadow:
        0 5px 20px rgba(0,0,0,.15);

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.slider-btn:hover{
    background:var(--purple);
    color:#fff;

    transform:
        translateY(-50%)
        scale(1.05);
}

.slider-prev{
    left:15px;
}

.slider-next{
    right:15px;
}


/* =========================================================
   SLIDER DOTS
========================================================= */

.slider-dots{
    position:absolute;

    bottom:18px;
    left:50%;

    transform:translateX(-50%);

    z-index:10;

    display:flex;
    align-items:center;
    gap:7px;
}

.slider-dot{
    width:7px;
    height:7px;

    padding:0;
    border:0;

    border-radius:50%;

    background:rgba(255,255,255,.6);

    cursor:pointer;

    transition:
        width .25s ease,
        background .25s ease;
}

.slider-dot.active{
    width:22px;
    border-radius:20px;

    background:#fff;
}


/* =========================================================
   EVENT CONTENT
========================================================= */

.event-content{
    padding:42px 45px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    min-width:0;
}

.event-category{
    color:var(--pink);

    font-size:12px;
    font-weight:800;

    letter-spacing:2px;
    text-transform:uppercase;

    margin-bottom:16px;
}

.event-title{
    position:relative;

    color:var(--navy);

    font-size:clamp(22px,2.3vw,22px);

    line-height:1.18;

    margin-bottom:20px;

    padding-bottom:18px;
}

.event-title::after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:42px;
    height:3px;

    background:var(--orange);
}

.event-description{
    font-size:15px;
    line-height:1.75;

    color:var(--text);

    max-height:260px;
    overflow-y:auto;

    padding-right:8px;
}


/* =========================================================
   CUSTOM SCROLLBAR
========================================================= */

.event-description::-webkit-scrollbar{
    width:4px;
}

.event-description::-webkit-scrollbar-track{
    background:#f1f1f1;
}

.event-description::-webkit-scrollbar-thumb{
    background:var(--purple);
    border-radius:10px;
}


/* =========================================================
   ALTERNATING ACCENT
========================================================= */

.event-item:nth-child(odd) .event-content{
    border-top:4px solid var(--purple);
}

.event-item:nth-child(even) .event-content{
    border-top:4px solid var(--teal);
}


/* =========================================================
   SINGLE IMAGE EVENTS
========================================================= */

.event-item.single-image .event-slider{
    cursor:default;
}

.event-item.single-image .slider-btn,
.event-item.single-image .slider-dots{
    display:none;
}


/* =========================================================
   LOAD ANIMATION
========================================================= */

.event-item{
    opacity:0;
    transform:translateY(25px);
}

.event-item.show{
    opacity:1;
    transform:translateY(0);
	border-radius: 20px;

    transition:
        opacity .6s ease,
        transform .6s ease,
        box-shadow .3s ease;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

    .events-page{
        padding:55px 0 70px;
    }

    .events-container{
        width:min(100% - 30px,700px);
    }

    .event-item{
        grid-template-columns:1fr;
    }

    .event-media{
        min-height:auto;
    }

    .event-slider{
        height:390px;
        min-height:390px;
    }

    .event-slide img{
        height:390px;
        min-height:390px;
    }

    .event-content{
        padding:32px;
    }

    .event-description{
        max-height:none;
        overflow:visible;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .events-page{
        padding:40px 0 60px;
    }

    .events-container{
        width:calc(100% - 24px);
    }

    .events-header{
        margin-bottom:35px;
    }

    .events-kicker{
        font-size:10px;
        letter-spacing:1.8px;
    }

    .events-kicker::before{
        width:25px;
    }

    .events-title{
        font-size:34px;
    }

    .events-line{
        width:50px;
        height:3px;
    }

    .event-item{
        margin-bottom:30px;

        border-radius:0;
    }

    .event-slider{
        height:300px;
        min-height:300px;
    }

    .event-slide img{
        height:300px;
        min-height:300px;
    }

    .event-content{
        padding:25px 22px 28px;
    }

    .event-category{
        font-size:9px;
        margin-bottom:8px;
    }

    .event-title{
        font-size:22px;
        margin-bottom:16px;
        padding-bottom:14px;
    }

    .event-description{
        font-size:14px;
        line-height:1.65;
    }

    .slider-btn{
        width:34px;
        height:34px;

        font-size:17px;
    }

    .slider-prev{
        left:10px;
    }

    .slider-next{
        right:10px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:400px){

    .events-title{
        font-size:29px;
    }

    .event-slider{
        height:260px;
        min-height:260px;
    }

    .event-slide img{
        height:260px;
        min-height:260px;
    }

    .event-content{
        padding:22px 18px 25px;
    }

    .event-title{
        font-size:20px;
    }

    .event-description{
        font-size:13px;
    }
	
	.hero-bottom-content h1 {
    font-size: 20px;
    font-weight: 800;
    line-height: 30px;
    }
	
	.section__header h2 {
    margin-top: 15px;
    font-size: 26px;
}

.hgs-tour-play{top: 27%;}
 
 .testimonial {padding: 9px 0px 3px;}


.video-card {margin-bottom: 20px;}
.event {padding: 1px 0px;}
.event .event__content {
    position: absolute;
bottom: -13px;}
.cta {
    margin-top: 20px;
}
.ff-volunteer .ff-volunteer__inner {
padding: 20px 20px;}

.faq {padding: 20px 0px;}

.section__header {
    margin-bottom: 20px;
    margin-top: 20px;
}

.hgs-history-video-section {
   
    padding: 0 0px 0px;
}


.hgs-history-video-heading h2 {font-size: clamp(25px, 5vw, 25px);}

.hgs-history-experience {padding: 20px 0px;}
.hgs-faculty-v2-development {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-top: 45px;
    padding: 22px 25px;
    background: #1b325c;
    color: #ffffff;
    flex-direction: column;
}	
	
}


.hgs-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}


 .youtube-facade {
            position: relative;
            width: 100%;
            height: 100%;
            padding: 0;
            border: 0;
            background: #000;
            cursor: pointer;
            overflow: hidden;
        }

        .youtube-facade img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }

        .youtube-facade::after {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.15);
            pointer-events: none;
        }

        .youtube-play {
            position: absolute;
            z-index: 2;
            top: 50%;
            left: 50%;
            width: 68px;
            height: 68px;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            color: #000;
            border-radius: 50%;
            font-size: 22px;
            transition: transform 0.25s ease, background 0.25s ease;
        }

        .youtube-facade:hover .youtube-play {
            transform: translate(-50%, -50%) scale(1.08);
            background: #f5f5f5;
        }

        .youtube-play i {
            margin-left: 3px;
        }

        .thumb-lg iframe {
            width: 100%;
            height: 100%;
            display: block;
            border: 0;
        }

        @media (max-width: 575px) {

            .thumb-lg {
                width: 100%;
                margin: 20px auto;
            }

            .youtube-play {
                width: 58px;
                height: 58px;
                font-size: 19px;
            }

        }
		
		
		
/* =========================================================
   RESET
   ========================================================= */

.hgs-gujarat-page,
.hgs-gujarat-page *,
.hgs-gujarat-page *::before,
.hgs-gujarat-page *::after {
    box-sizing: border-box;
}

.hgs-gujarat-page {
    width: 100%;
    overflow: hidden;
    background: var(--white);
    color: var(--hgs-text);
    font-family: var(--nunito-sans);
    line-height: 1.7;
}

.hgs-gujarat-page h1,
.hgs-gujarat-page h2,
.hgs-gujarat-page h3,
.hgs-gujarat-page h4,
.hgs-gujarat-page p {
    margin-top: 0;
}

.hgs-gujarat-page h1,
.hgs-gujarat-page h2,
.hgs-gujarat-page h3,
.hgs-gujarat-page h4 {
    font-family: var(--outfit);
    color: var(--hgs-navy);
}

.hgs-gujarat-page p {
    margin-bottom: 16px;
}

.hgs-gujarat-page ul {
    margin: 0;
    padding-left: 20px;
}

.hgs-gujarat-page img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.hgs-gujarat-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   COMMON SECTION
   ========================================================= */

.hgs-gujarat-section {
    position: relative;
    padding: 30px 0 0px;
}




/* =========================================================
   SECTION HEADING
   ========================================================= */

.hgs-gujarat-heading-wrap {
    margin-bottom: 35px;
}

.hgs-gujarat-small-title {
    display: block;
    margin-bottom: 5px;
    color: var(--hgs-purple);
    font-family: var(--caveat);
    font-size: 26px;
    font-weight: 700;
}

.hgs-gujarat-title {
    margin-bottom: 10px;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.2;
    font-weight: 800;
}

.hgs-gujarat-heading {
    margin-bottom: 10px;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
}

.hgs-gujarat-line {
    position: relative;
    width: 70px;
    height: 4px;
    margin-bottom: 25px;
    border-radius: 50px;
    background: linear-gradient(
        90deg,
        var(--hgs-purple),
        var(--hgs-pink)
    );
}

.hgs-gujarat-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: 25px;
    width: 20px;
    height: 4px;
    border-radius: 50px;
    background: var(--hgs-orange);
}


/* =========================================================
   INTRO
   ========================================================= */

.hgs-gujarat-intro {
    padding: 50px 0 0px;
    
}

.hgs-gujarat-intro-grid {
    display: grid;
   
    gap: 55px;
    align-items: center;
}

.hgs-gujarat-intro-label {
    display: inline-block;
    margin-bottom: 12px;
    padding: 7px 16px;
    border-radius: 50px;
    background: rgba(119, 115, 199, 0.10);
    color: var(--hgs-purple);
    font-family: var(--outfit);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.hgs-gujarat-intro-title {
    margin-bottom: 15px;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.15;
}

.hgs-gujarat-intro-text {
    font-size: 16px;
    line-height: 1.8;
}

.hgs-gujarat-intro-note {
    position: relative;
    padding: 35px;
    border-radius: 25px;
    background: var(--hgs-navy);
    color: var(--white);
    box-shadow: 0 18px 45px rgba(27, 50, 92, 0.15);
}

.hgs-gujarat-intro-note::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    height: 5px;
    border-radius: 0 0 10px 0;
    background: var(--hgs-orange);
}

.hgs-gujarat-intro-note h2 {
    color: var(--white);
    font-size: 30px;
}

.hgs-gujarat-intro-note p {
    margin-bottom: 0;
    color: rgba(255,255,255,0.85);
}


/* =========================================================
   NORMAL CONTENT
   ========================================================= */

.hgs-gujarat-content {
    
    margin: 0 auto;
}

.hgs-gujarat-text {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.85;
}


/* =========================================================
   SCHOOL LIST
   ========================================================= */

.hgs-gujarat-school {
    position: relative;
    margin-bottom: 40px;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--white);
    box-shadow: 0 8px 30px rgba(27, 50, 92, 0.06);
}

.hgs-gujarat-school:last-child {
    margin-bottom: 0;
}

.hgs-gujarat-school-top {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 15px;
}

.hgs-gujarat-school-number {
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--hgs-purple);
    color: var(--white);
    font-family: var(--outfit);
    font-size: 16px;
    font-weight: 800;
}

.hgs-gujarat-school:nth-child(2)
.hgs-gujarat-school-number {
    background: var(--hgs-pink);
}

.hgs-gujarat-school:nth-child(3)
.hgs-gujarat-school-number {
    background: var(--hgs-orange);
}

.hgs-gujarat-school:nth-child(4)
.hgs-gujarat-school-number {
    background: var(--hgs-teal);
}

.hgs-gujarat-school-title {
    margin: 7px 0 0;
    font-size: 23px;
    font-weight: 700;
}


/* =========================================================
   TABLE
   ========================================================= */

.hgs-gujarat-table-wrap {
    width: 100%;
    margin-top: 20px;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.hgs-gujarat-table {
    width: 100%;
    min-width: 550px;
    border-collapse: collapse;
}

.hgs-gujarat-table th,
.hgs-gujarat-table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 15px;
}

.hgs-gujarat-table tr:last-child th,
.hgs-gujarat-table tr:last-child td {
    border-bottom: 0;
}

.hgs-gujarat-table th {
    width: 35%;
    background: var(--light-bg);
    color: var(--hgs-navy);
    font-family: var(--outfit);
    font-weight: 700;
}


/* =========================================================
   INFORMATION ACCORDION
   ========================================================= */

.hgs-gujarat-accordion {
   
    margin: 0 auto;
}

.hgs-gujarat-accordion details {
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    overflow: hidden;
}

.hgs-gujarat-accordion summary {
    position: relative;
    padding: 18px 55px 18px 20px;
    cursor: pointer;
    color: var(--hgs-navy);
    font-family: var(--outfit);
    font-size: 17px;
    font-weight: 700;
    list-style: none;
}

.hgs-gujarat-accordion summary::-webkit-details-marker {
    display: none;
}

.hgs-gujarat-accordion summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    color: var(--hgs-purple);
    font-size: 24px;
    font-weight: 400;
}

.hgs-gujarat-accordion details[open] summary::after {
    content: "−";
}

.hgs-gujarat-accordion-body {
    padding: 0 20px 20px;
    color: var(--hgs-text);
    line-height: 1.8;
}

.hgs-gujarat-accordion-body p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   SIMPLE INFORMATION GRID
   ========================================================= */

.hgs-gujarat-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.hgs-gujarat-info-item {
    position: relative;
    padding: 25px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--white);
}

.hgs-gujarat-info-item::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 0;
    width: 4px;
    height: 45px;
    border-radius: 0 5px 5px 0;
    background: var(--hgs-purple);
}

.hgs-gujarat-info-item:nth-child(2)::before {
    background: var(--hgs-pink);
}

.hgs-gujarat-info-item:nth-child(3)::before {
    background: var(--hgs-orange);
}

.hgs-gujarat-info-item:nth-child(4)::before {
    background: var(--hgs-teal);
}

.hgs-gujarat-info-item:nth-child(5)::before {
    background: var(--hgs-green);
}

.hgs-gujarat-info-item h3 {
    margin-bottom: 10px;
    font-size: 20px;
}


/* =========================================================
   LIST
   ========================================================= */

.hgs-gujarat-list {
    margin: 20px 0;
    padding: 0;
    list-style: none;
}

.hgs-gujarat-list li {
    position: relative;
    margin-bottom: 12px;
    padding-left: 30px;
}

.hgs-gujarat-list li::before {
    content: "✓";
    position: absolute;
    top: 1px;
    left: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(98, 181, 170, 0.18);
    color: var(--hgs-green);
    font-size: 12px;
    font-weight: 800;
}


/* =========================================================
   HERITAGE GIRLS SCHOOL HIGHLIGHT
   ========================================================= */

.hgs-gujarat-highlight {
    position: relative;
    padding: 45px;
    border-radius: 25px;
    background:
        linear-gradient(
            135deg,
            rgba(119, 115, 199, 0.10),
            rgba(223, 130, 150, 0.08),
            rgba(98, 181, 170, 0.10)
        );
    border: 1px solid var(--border);
}

.hgs-gujarat-highlight h2 {
    margin-bottom: 12px;
    font-size: 32px;
}

.hgs-gujarat-highlight p {
    line-height: 1.85;
}


/* =========================================================
   FAQ
   ========================================================= */

.hgs-gujarat-faq {
   
    margin: 0 auto;
}

.hgs-gujarat-faq details {
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    overflow: hidden;
}

.hgs-gujarat-faq summary {
    position: relative;
    padding: 18px 55px 18px 20px;
    cursor: pointer;
    color: var(--hgs-navy);
    font-family: var(--outfit);
    font-size: 17px;
    font-weight: 700;
    list-style: none;
}

.hgs-gujarat-faq summary::-webkit-details-marker {
    display: none;
}

.hgs-gujarat-faq summary::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--hgs-purple);
    font-size: 24px;
}

.hgs-gujarat-faq details[open] summary::after {
    content: "−";
}

.hgs-gujarat-faq-answer {
    padding: 0 20px 20px;
    line-height: 1.8;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.hgs-gujarat-page :focus-visible {
    outline: 3px solid var(--hgs-orange);
    outline-offset: 3px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .hgs-gujarat-container {
        width: min(100% - 30px, 1200px);
    }

    .hgs-gujarat-section {
        padding: 55px 0;
    }

    .hgs-gujarat-intro-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .hgs-gujarat-info-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .hgs-gujarat-container {
        width: calc(100% - 24px);
    }

    .hgs-gujarat-section {
        padding: 45px 0;
    }

    .hgs-gujarat-intro {
        padding: 45px 0;
    }

    .hgs-gujarat-intro-note {
        padding: 28px;
    }

    .hgs-gujarat-school {
        padding: 22px;
        border-radius: 15px;
    }

    .hgs-gujarat-school-top {
        gap: 12px;
    }

    .hgs-gujarat-school-number {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
    }

    .hgs-gujarat-school-title {
        font-size: 19px;
    }

    .hgs-gujarat-highlight {
        padding: 28px 22px;
        border-radius: 18px;
    }

    .hgs-gujarat-highlight h2 {
        font-size: 26px;
    }

    .hgs-gujarat-table {
        min-width: 550px;
    }

    .hgs-gujarat-table th,
    .hgs-gujarat-table td {
        padding: 11px 12px;
        font-size: 14px;
    }

    .hgs-gujarat-text {
        font-size: 15px;
        line-height: 1.75;
        text-align: left;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .hgs-gujarat-title {
        font-size: 27px;
    }

    .hgs-gujarat-heading {
        font-size: 23px;
    }

    .hgs-gujarat-small-title {
        font-size: 23px;
    }

    .hgs-gujarat-intro-note h2 {
        font-size: 25px;
    }

    .hgs-gujarat-accordion summary,
    .hgs-gujarat-faq summary {
        font-size: 15px;
    }

}