.wow {
  visibility: hidden;
}

@font-face {
  font-family: "aileronblack";
  src: url("../fonts/aileron-1/aileron-black.woff2") format("woff2"),
    url("../fonts/aileron-1/aileron-black.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "aileronblack_italic";
  src: url("../fonts/aileron-1/aileron-blackitalic.woff2") format("woff2"),
    url("../fonts/aileron-1/aileron-blackitalic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "aileron-bold";
  src: url("../fonts/aileron-1/aileron-bold.woff2") format("woff2"),
    url("../fonts/aileron-1/aileron-bold.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "aileronbold_italic";
  src: url("../fonts/aileron-1/aileron-bolditalic.woff2") format("woff2"),
    url("../fonts/aileron-1/aileron-bolditalic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "aileronheavy";
  src: url("../fonts/aileron-1/aileron-heavy.woff2") format("woff2"),
    url("../fonts/aileron-1/aileron-heavy.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "aileronheavy_italic";
  src: url("../fonts/aileron-1/aileron-heavyitalic.woff2") format("woff2"),
    url("../fonts/aileron-1/aileron-heavyitalic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "aileronitalic";
  src: url("../fonts/aileron-1/aileron-italic.woff2") format("woff2"),
    url("../fonts/aileron-1/aileron-italic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "aileronlight";
  src: url("../fonts/aileron-1/aileron-light.woff2") format("woff2"),
    url("../fonts/aileron-1/aileron-light.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "aileronlight_italic";
  src: url("../fonts/aileron-1/aileron-lightitalic.woff2") format("woff2"),
    url("../fonts/aileron-1/aileron-lightitalic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "aileronregular";
  src: url("../fonts/aileron-1/aileron-regular.woff2") format("woff2"),
    url("../fonts/aileron-1/aileron-regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "aileronsemibold";
  src: url("../fonts/aileron-1/aileron-semibold.woff2") format("woff2"),
    url("../fonts/aileron-1/aileron-semibold.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "aileronsemibold_italic";
  src: url("../fonts/aileron-1/aileron-semibolditalic.woff2") format("woff2"),
    url("../fonts/aileron-1/aileron-semibolditalic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "aileronthin";
  src: url("../fonts/aileron-1/aileron-thin.woff2") format("woff2"),
    url("../fonts/aileron-1/aileron-thin.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "aileronthin_italic";
  src: url("../fonts/aileron-1/aileron-thinitalic.woff2") format("woff2"),
    url("../fonts/aileron-1/aileron-thinitalic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "aileronultralight";
  src: url("../fonts/aileron-1/aileron-ultralight.woff2") format("woff2"),
    url("../fonts/aileron-1/aileron-ultralight.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "aileronultralight_italic";
  src: url("../fonts/aileron-1/aileron-ultralightitalic.woff2") format("woff2"),
    url("../fonts/aileron-1/aileron-ultralightitalic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "brastikablack";
  src: url("../fonts/brastika-/brastika_black.woff2") format("woff2"),
    url("../fonts/brastika-/brastika_black.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "brastikabold";
  src: url("../fonts/brastika-/brastika_bold.woff2") format("woff2"),
    url("../fonts/brastika-/brastika_bold.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "brastikaextrabold";
  src: url("../fonts/brastika-/brastika_extrabold.woff2") format("woff2"),
    url("../fonts/brastika-/brastika_extrabold.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "brastikaextralight";
  src: url("../fonts/brastika-/brastika_extralight.woff2") format("woff2"),
    url("../fonts/brastika-/brastika_extralight.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "brastikalight";
  src: url("../fonts/brastika-/brastika_light.woff2") format("woff2"),
    url("../fonts/brastika-/brastika_light.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "brastikamedium";
  src: url("../fonts/brastika-/brastika_medium.woff2") format("woff2"),
    url("../fonts/brastika-/brastika_medium.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "brastikaregular";
  src: url("../fonts/brastika-/brastika_regular.woff2") format("woff2"),
    url("../fonts/brastika-/brastika_regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "brastikasemibold";
  src: url("../fonts/brastika-/brastika_semibold.woff2") format("woff2"),
    url("../fonts/brastika-/brastika_semibold.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "brastikathin";
  src: url("../fonts/brastika-/brastika_thin.woff2") format("woff2"),
    url("../fonts/brastika-/brastika_thin.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@-webkit-keyframes fade_top {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fade_top {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fade_top {
  -webkit-animation-name: fade_top;
  animation-name: fade_top;
}

.swiper-pagination-progressbar {
  background: rgb(0 0 0 / 3%);
}

@-webkit-keyframes slide_left {
  0% {
    left: 0%;
  }

  100% {
    left: -30%;
  }
}

@keyframes slide_left {
  0% {
    left: 0%;
  }

  100% {
    left: -30%;
  }
}

.slide_left {
  -webkit-animation-name: slide_left;
  animation-name: slide_left;
}

@-webkit-keyframes slide_right {
  0% {
    right: 0%;
  }

  100% {
    right: -30%;
  }
}

@keyframes slide_right {
  0% {
    right: 0%;
  }

  100% {
    right: -30%;
  }
}

.slide_right {
  -webkit-animation-name: slide_right;
  animation-name: slide_right;
}

@font-face {
  font-family: "Poppins-SemiBold";
  src: url("../fonts/poppins/Poppins-SemiBold.woff2") format("woff2"),
    url("../fonts/poppins/Poppins-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins-Black";
  src: url("../fonts/poppins/Poppins-Black.woff2") format("woff2"),
    url("../fonts/poppins/Poppins-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins-Bold";
  src: url("../fonts/poppins/Poppins-Bold.woff2") format("woff2"),
    url("../fonts/poppins/Poppins-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: "Poppins-Medium";
  src: url("../fonts/poppins/Poppins-Medium.woff2") format("woff2"),
    url("../fonts/poppins/Poppins-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins-Regular";
  src: url("../fonts/poppins/Poppins-Regular.woff2") format("woff2"),
    url("../fonts/poppins/Poppins-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colors */
  --primary-color: #000000;
  --secondary-color: #4f772d;
  --white-color: #ffffff;
  --light-green-color: #a7c957;
  --highlight-color: #acb981;
  --gray-color: #868686;
  --background-smoke: #fafbfc;
  --background-gray: #f6f8fa;
  --brown-color: #822a30;
  --secondary-highlight-color: #0366d6;
  --black-color: #000000;
  --dark-green-color: #142f10;
  /* font-sizes */
  --main-banner-title-font-size: 18.75rem;
  --banner-title-font-size: 8rem;
  --section-title-big-font-size: 3.5rem;
  --section-title-font-size: 2.75rem;
  --section-subtitle-font-size: 2rem;
  --paragraph-font-size: 2rem;
  --section-paragraph-font-size: 2.25rem;
  --content-font-size: 1.15rem;
  --link-font-size: 1.15rem;
  --content-section-font-size: 1.5rem;
  --main-title: 7.19rem;
  --medium-font-size: 6rem;
  --number-font-title: 7rem;
  --small-font-size: 1.13rem;
  --section-bold-title: 6.25rem;
  --section-bold-subtitle: 6.25rem;
  --section-subtitle-font: 1.5rem;
  --footer-font: 3rem;
  --section-font: 3rem;
  --footer-section-content: 1.25rem;
  --footer-header: 1rem;
  --project-title-font: 2.75rem;
  /* font-families */
  --light-font-family: "aileronlight";
  --regular-font-family: "aileronregular";
  --medium-font-family: "brastikathin";
  --semibold-font-family: "brastikasemibold";
  --bold-font-family: "brastikasemibold";
  --black-font-family: "brastikasemibold";
  --italic-font-family: "aileronlight_italic";
  --aileron-bold-font: "aileron-bold";
  --brastika-regular: "brastikaregular";
  /* other */
  --common-transition: all 0.6s ease;
  --web-border-radius: 0.625rem;
  --mobile-border-radius: 0.6rem;
  --common-gap-size: 1rem;
  --small-gap-size: 1.5rem;
  --medium-gap-size: 3rem;
  --big-gap-size: 6rem;
}

.semibold-fonts {
  font-family: var(--semibold-font-family);
}

.light-italic {
  font-family: var(--italic-font-family) !important;
}

.bold-fonts {
  font-family: var(--bold-font-family) !important;
}
.light-green-color {
  color: var(--light-green-color) !important;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  font-family: var(--regular-font-family);
  color: var(--primary-color);
}

html {
  height: auto;
  font-size: 16px;
  scroll-behavior: smooth;
}

* {
  line-height: 1.2;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  line-height: 1.2;
  width: 100%;
}

::-webkit-scrollbar {
  width: 0px !important;
  cursor: pointer;
}

::-webkit-scrollbar-track {
  background: #cccccc !important;
}

::-webkit-scrollbar-thumb {
  background: #000000 !important;
}

::-webkit-scrollbar-thumb:hover {
  background: #000000 !important;
}

body.no-scroll-body {
  overflow-y: hidden;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  background-color: transparent;
  color: unset;
  outline: none;
  text-decoration: none;
  -webkit-transition: all ease-in-out 0.4s;
  -moz-transition: all ease-in-out 0.4s;
  -ms-transition: all ease-in-out 0.4s;
  -o-transition: all ease-in-out 0.4s;
  transition: all ease-in-out 0.4s;
}

a:focus,
a:hover {
  outline: 0;
  text-decoration: unset;
  color: unset;
}

img {
  max-width: 100%;
  transition: var(--common-transition);
  width: 100%;
  object-fit: cover;
  cursor: pointer;
  display: block;
}

.relative {
  position: relative;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}

.p0 {
  padding: 0 !important;
}

.pt0 {
  padding-top: 0 !important;
}

.pb0 {
  padding-bottom: 0 !important;
}

.section-container {
  width: 80%;
  margin: auto;
}

.main-container-fluid {
  width: 95%;
  margin: 0 auto;
}

.main-container {
  width: 85%;
  margin: 0 auto;
}

.mini-container {
  width: 65%;
  margin: 0 auto;
}

.content_accordian {
  display: none;
}

.section-padding {
  padding: 8rem 0;
}

.section-padding-medium {
  padding: 6rem 0;
}

.section-padding-bottom {
  padding-bottom: 8rem;
}

.section-padding-small {
  padding: 2rem 0;
}

.hover-enable {
  display: none;
}

.hover-disable {
  display: inline-block;
}

.mobile-image {
  display: none;
}

.web-image {
  display: block;
}

div:focus-visible,
img:focus-visible,
button:focus-visible {
  outline: none;
  border: none;
}

body.no-scroll-body {
  overflow-y: hidden;
}

.visible-tab-mobile {
  display: none !important;
}

.hide-tab-mobile {
  display: block !important;
}

.flex-row {
  display: flex;
  flex-direction: row;
  gap: var(--common-gap-size);
  /* gap: 0.5rem; */
}

.inner-flex {
  display: flex;
  flex-direction: column;
  gap: var(--common-gap-size);
  /* gap: 0.5rem; */
}

.inner-flex-smallest {
  gap: 0.5rem;
}

.inner-flex-zero {
  gap: 0;
}

.inner-flex-small {
  gap: var(--small-gap-size);
}

.inner-flex-medium {
  gap: var(--medium-gap-size);
}

.inner-flex-big {
  gap: var(--big-gap-size);
}

.inner-flex-large {
  gap: 10rem;
}

.inner-flex-common {
  gap: var(--common-gap-size);
}

.inner-flex-center {
  text-align: center;
  align-items: center;
}

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

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

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

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

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

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

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

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

.j-c-sb {
  justify-content: space-between;
}

.mlauto {
  margin-left: auto;
}

.mrauto {
  margin-right: auto;
}

.m0auto {
  margin: 0 auto;
}

.wfc {
  width: fit-content;
}

.w100 {
  width: 100% !important;
}

.w50 {
  width: 50% !important;
}

.h100 {
  height: 100%;
}

.j-c-c {
  justify-content: center;
}

.alc {
  align-items: center;
}

.alend {
  align-items: end;
}

.alstart {
  align-items: start;
}

.filterIcon {
  filter: invert(1);
}

.overflow {
  overflow: hidden;
}

.transition {
  transition: var(--common-transition);
}

.scaleOne {
  scale: 1;
  transition: var(--common-transition);
}

.brastika-thin {
  font-family: var(--medium-font-family) !important;
}

.scaleOne:hover {
  scale: 1.1;
}

.flex-wrap {
  flex-wrap: wrap;
}

/* fonts css */

/* .material-symbols-outlined.filled-icon {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
} */

.material-symbols-outlined {
  font-family: "Material Symbols Outlined" !important;
}

.regular-fonts {
  font-family: var(--regular-font-family) !important;
}

.brastika-regular {
  font-family: var(--brastika-regular) !important;
}

.lighten-font {
  font-family: var(--light-font-family) !important;
}

.medium-fonts {
  font-family: var(--medium-font-family) !important;
}

.semibold-fonts {
  font-family: var(--semibold-font-family) !important;
}

.main-banner-title h1 {
  font-size: var(--main-banner-title-font-size);
  font-family: var(--medium-font-family);
}

.project-title-font p {
  font-size: var(--project-title-font);
}

.medium-font h2 {
  font-size: var(--medium-font-size);
}

.footer-font p {
  font-size: var(--footer-font);
  font-family: var(--brastika-regular);
  color: var(--black-color);
}

.footer-header p {
  font-size: var(--footer-header);
  font-family: var(--regular-font-family);
}

.small-font {
  font-size: var(--small-font-size);
}

.content-section p {
  font-size: var(--content-section-font-size) !important;
}

.section-font p {
  font-size: var(--section-font);
}

.number-font p {
  font-size: var(--number-font-title);
  font-family: var(--medium-font-family);
}

.section-pragraph p {
  font-size: var(--section-paragraph-font-size);
}

.section-bold-subtile p {
  font-size: var(--section-bold-subtitle);
  font-family: var(--italic-font-family);
}

.banner-title h1 span,
.banner-title h2 span {
  color: var(--secondary-color);
  font-family: "brastikathin";
  font-size: 8rem;
}

.banner-title h1,
.banner-title h2 {
  font-size: 7rem;
  font-family: "aileronlight_italic";
  line-height: 1;
}
.banner-title h1 span,
.banner-title h2 span {
  font-size: 8rem;
  font-family: var(--medium-font-family);
  line-height: 1;
}

.section-mainsubtitle p {
  font-size: var(--section-subtitle-font);
}

.main-title p,
.main-title span {
  font-size: var(--main-title);
  font-family: var(--medium-font-family);
}

.section-title h1,
.section-title h1 span,
.section-title h2,
.section-title h2 span {
  font-size: var(--section-title-font-size);
  font-family: var(--semibold-font-family);
  line-height: 1;
}

.section-title-big h1,
.section-title-big h1 span,
.section-title-big h2,
.section-title-big h2 span {
  font-size: var(--section-title-big-font-size);
  font-family: var(--semibold-font-family);
}

.section-title h1 span,
.section-title h2 span {
  color: var(--secondary-color);
}

.section-paragraph p,
.section-paragraph p span {
  font-size: var(--paragraph-font-size);
  line-height: 1.5;
}

.section-paragraph p span {
  color: var(--secondary-color);
}

.section-content p,
.section-content p span {
  font-size: var(--content-font-size);
  line-height: 1.5;
}

.section-content p span {
  color: var(--secondary-color);
}

.section-bold-title p {
  font-size: var(--section-bold-title);
  font-family: var(--italic-font-family);
}

.section-bold-title p span {
  color: var(--brown-color);
}

.section-text p,
.section-text p span {
  font-size: 1.15rem;
  line-height: 1.5;
}

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

.section-subtitle h4,
.section-subtitle h4 span,
.section-subtitle p {
  font-size: var(--section-subtitle-font-size);
  font-family: var(--semibold-font-family);
  color: var(--primary-color);
}

.footer-section-content p {
  font-size: var(--footer-section-content);
  color: var(--primary-color);
  font-family: var(--regular-font-family);
}

.section-subtitle h4 span {
  color: var(--secondary-color);
}

.smallest-font p {
  font-size: 0.85rem;
}

.link-font-size a p,
.link-font-size a p span.material-symbols-outlined,
.link-font-size p {
  font-size: var(--link-font-size);
}

.reecosys-template-button {
  display: flex;
  align-items: center;
  gap: 1rem;
  /* padding: 1.15rem 1.5rem; */
  padding: 0 1.5rem;
  height: 3.5rem;
  transition: var(--common-transition);
  border-radius: 1.25rem;
  width: fit-content;
  justify-content: center;
}

.reecosys-template-button.reecosys-template-button-header {
  padding: 1rem 2rem;
  height: fit-content;
}

.reecosys-template-button p,
.reecosys-template-button span {
  line-height: 1 !important;
}

.button-style-primary {
  border: 1px solid var(--brown-color);
  background-color: var(--brown-color);
}

.button-style-primary span,
.button-style-primary p {
  color: var(--white-color);
  transition: var(--common-transition);
  font-size: 1.15rem;
}

.button-style-primary:hover {
  border: 1px solid var(--brown-color);
  background-color: transparent;
  transition: var(--common-transition);
}

.button-style-primary:hover span,
.button-style-primary:hover p {
  color: var(--brown-color);
  transition: var(--common-transition);
}

.button-style-secondary {
  border: 1px solid var(--secondary-color);
  background-color: var(--secondary-color);
}

.button-style-secondary span,
.button-style-secondary p {
  color: var(--white-color);
  transition: var(--common-transition);
  font-size: 1.15rem;
}

.button-style-secondary:hover {
  border: 1px solid var(--secondary-color);
  background-color: transparent;
  transition: var(--common-transition);
}

.button-style-secondary:hover span,
.button-style-secondary:hover p {
  color: var(--secondary-color);
  transition: var(--common-transition);
}

.button-style-white {
  border: 1px solid var(--white-color);
  background-color: transparent;
}

.button-style-white span,
.button-style-white p {
  color: var(--primary-color);
  transition: var(--common-transition);
  font-size: 1.15rem;
}

.button-style-white.white-text span,
.button-style-white.white-text p {
  color: var(--white-color);
  font-size: 1.15rem;
}

.button-style-white:hover {
  border: 1px solid var(--white-color);
  background-color: var(--white-color);
  transition: var(--common-transition);
}

.button-style-white:hover span,
.button-style-white:hover p {
  color: var(--primary-color);
  transition: var(--common-transition);
}

.border-black {
  border: 1px solid var(--primary-color);
}

.button-blackborder {
  border: 1px solid var(--black-color);
  background-color: transparent;
}

.button-blackborder.black-text span,
.button-blackborder.black-text p {
  color: var(--primary-color);
  transition: var(--common-transition);
}

.button-blackborder:hover {
  border: 1px solid var(--secondary-color);
  background-color: var(--secondary-color);
}

.button-blackborder:hover span,
.button-blackborder:hover p {
  color: var(--white-color);
  transition: var(--common-transition);
}

.visible-tab-mobile {
  display: none !important;
}

.hide-tab-mobile {
  display: block !important;
}

/* CSS STarts here */

.reecosys-template-page-wrapper,
.reecosys-main-wrapper {
  padding-top: 6rem;
}

.header-wrapper {
  position: fixed;
  background-color: var(--white-color);
  transition: var(--common-transition);
  top: 0%;
  border-bottom: 0px solid var(--primary-color);
  left: 0;
  width: 100%;
  padding: 0.75rem 0;
  z-index: 999;
}

.header-wrapper.webmenu_hidden2,
.header-wrapper.webmenu_hidden {
  top: -100% !important;
}

/* .header-wrapper.black-header {
	background-color: transparent;
	border-bottom: 0px solid transparent;
} */

.header-flex {
  display: flex;
  justify-content: space-between;
  gap: var(--small-gap-size);
  align-items: center;
}

.header-links-ul ul {
  display: flex;
  align-items: center;
  gap: var(--medium-gap-size);
}

.header-links-ul ul li a,
.header-links-ul ul li span,
.header-links-ul ul li p {
  font-size: 1rem !important;
  color: var(--primary-color);
}

.header-links-ul ul li a {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--primary-color);
}

.header-logo {
  width: 6.5rem;
}

.header-logo.header-logo-shimmer {
  height: 5.5rem;
  border-radius: 50%;
  overflow: hidden;
}

.shimer-block {
  display: none;
  background-repeat: no-repeat;
  animation: shimmer 2s infinite linear;
  background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);
  background-size: 1000px 100%;
}

.shimer-block.shimer-visible {
  display: block;
}

.woshimer-block {
  display: none;
}

.woshimer-block.shimer-disable {
  display: block;
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

.offer-strip-icon {
  width: 1rem;
}

.header-top-strip {
  background: #f5f5f5;
  padding: 0rem 1.5rem;
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
  margin-bottom: 0.75rem;
  display: flex;
  justify-content: space-between;
  gap: var(--medium-gap-size);
}

.location-div-header-strip,
.offer-strip-header {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.location-div-header-strip .link-font-size span,
.offer-strip-header .link-font-size span {
  color: var(--secondary-color) !important;
  text-decoration: underline;
  font-family: var(--semibold-font-family);
  text-transform: uppercase;
}

.bar {
  width: 1.5rem;
  height: 2px;
  background-color: #000000;
  transition: var(--common-transition);
}

.menubar {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  z-index: 9999;
}

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

.menubar.active .bar.bar-top {
  transform: translateY(8px) rotate(-45deg);
}

.menubar.active .bar.bar-bottom {
  transform: translateY(-8px) rotate(45deg);
}

.menubar.active .bar.bar-middle {
  opacity: 0;
}

.navigationWrapper {
  padding: 7rem 0rem 2rem 0rem;
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 998;
  width: 100%;
  height: fit-content;
  max-height: 95vh;
  overflow-y: scroll;
  background-color: var(--white-color);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.navigationWrapper.active {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
}

.mobile_menu_wrapper {
  position: fixed;
  height: 100%;
  width: 30%;
  padding: 9rem 1rem 4rem 1rem;
  background-color: #ffffff;
  top: 0;
  right: -100%;
  z-index: 105;
  transition: all 0.5s ease;
}

.mobile_menu_wrapper.mobileMenuActive {
  right: 0%;
  transition: all 0.5s ease;
}

.header-navigation-links ul {
  display: flex;
  /* align-items: center; */
  justify-content: center;
  gap: 1rem;
  flex-direction: column;
}

.header-navigation-links ul li a p {
  transition: var(--common-transition);
}

.header-navigation-links ul li a:hover .progress-value p {
  color: var(--primary-color) !important;
}

.header-navigation-links ul li a:hover p {
  color: var(--secondary-color) !important;
  transition: var(--common-transition);
}

.header-navigation-links ul li.active a p {
  color: var(--secondary-color) !important;
  transition: var(--common-transition);
}

.header-acc-btn {
  width: 2.5rem;
  min-width: 2.5rem;
  height: 2.5rem;
}

.navigation-mobile-icon img {
  width: 2rem;
}

.flex-70 {
  flex-basis: 70%;
}

.flex-30 {
  flex-basis: 30%;
}

.progress-consctruction.white {
  width: var(--content-size);
  margin-bottom: 4px;
}

.progress-consctruction.white {
  filter: invert(1);
}

.progress-consctruction {
  width: var(--content-size);
  margin-bottom: 4px;
}

.progress {
  width: 24px;
  height: 24px;
  line-height: 150px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
}

.progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #b9b9b982;
  position: absolute;
  top: 0;
  left: 0;
}

.progress > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}

.progress .progress-left {
  left: 0;
}

.progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 2px;
  border-style: solid;
  position: absolute;
  top: 0;
  border-color: #00ff68;
}

.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}

.progress .progress-right {
  right: 0;
}

.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}

.progress .progress-value {
  display: grid;
  place-content: center;
  height: 100%;
}

.progress .progress-value p {
  font-size: 0.7rem !important;
  color: var(--black-color);
}

.progress.progress_banner .progress-value p {
  color: var(--white-color);
}

/* This for loop creates the 	necessary css animation names 
  Due to the split circle of progress-left and progress right, we must use the animations on each side. 
  */
.progress[data-percentage="10"] .progress-right .progress-bar {
  animation: loading-1 1.5s linear forwards;
}

.progress[data-percentage="10"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="15"] .progress-right .progress-bar {
  animation: loading-15 1.5s linear forwards;
}

.progress[data-percentage="15"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="20"] .progress-right .progress-bar {
  animation: loading-2 1.5s linear forwards;
}

.progress[data-percentage="20"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="25"] .progress-right .progress-bar {
  animation: loading-25 1.5s linear forwards;
}

.progress[data-percentage="25"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="30"] .progress-right .progress-bar {
  animation: loading-3 1.5s linear forwards;
}

.progress[data-percentage="30"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="35"] .progress-right .progress-bar {
  animation: loading-35 1.5s linear forwards;
}

.progress[data-percentage="35"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="40"] .progress-right .progress-bar {
  animation: loading-4 1.5s linear forwards;
}

.progress[data-percentage="40"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="45"] .progress-right .progress-bar {
  animation: loading-45 1.5s linear forwards;
}

.progress[data-percentage="45"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="50"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="50"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="55"] .progress-right .progress-bar {
  animation: loading-55 1.5s linear forwards;
}

.progress[data-percentage="55"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="60"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="60"] .progress-left .progress-bar {
  animation: loading-1 1.5s linear forwards 1.5s;
}

.progress[data-percentage="65"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="65"] .progress-left .progress-bar {
  animation: loading-1 1.5s linear forwards 1.5s;
}

.progress[data-percentage="70"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="70"] .progress-left .progress-bar {
  animation: loading-2 1.5s linear forwards 1.5s;
}

.progress[data-percentage="75"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="75"] .progress-left .progress-bar {
  animation: loading-2 1.5s linear forwards 1.5s;
}

.progress[data-percentage="80"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="80"] .progress-left .progress-bar {
  animation: loading-3 1.5s linear forwards 1.5s;
}

.progress[data-percentage="85"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="85"] .progress-left .progress-bar {
  animation: loading-3 1.5s linear forwards 1.5s;
}

.progress[data-percentage="90"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="90"] .progress-left .progress-bar {
  animation: loading-4 1.5s linear forwards 1.5s;
}

.progress[data-percentage="95"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="95"] .progress-left .progress-bar {
  animation: loading-4 1.5s linear forwards 1.5s;
}

.progress[data-percentage="100"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="100"] .progress-left .progress-bar {
  animation: loading-5 1.5s linear forwards 1.5s;
}

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(36);
    transform: rotate(36deg);
  }
}

@keyframes loading-15 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(54);
    transform: rotate(54deg);
  }
}

@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(72);
    transform: rotate(72deg);
  }
}

@keyframes loading-25 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(90);
    transform: rotate(90deg);
  }
}

@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(108);
    transform: rotate(108deg);
  }
}

@keyframes loading-35 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(126);
    transform: rotate(126deg);
  }
}

@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(144);
    transform: rotate(144deg);
  }
}

@keyframes loading-45 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(162);
    transform: rotate(162deg);
  }
}

@keyframes loading-5 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(180);
    transform: rotate(180deg);
  }
}

@keyframes loading-55 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(198);
    transform: rotate(198deg);
  }
}

/* circle animation update end */

.header_accordion.active .manu-accordian-downarrow,
.manu-accordian-uparrow {
  display: none;
}

.header_accordion.active .manu-accordian-uparrow {
  display: block;
}

.iconimg {
  width: 1.8rem;
  min-width: 1.8rem;
}

.ellipsis-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mobile_menu_wrapper {
  overflow: scroll;
  scrollbar-width: none;
}

.click-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: -1;
  transition: var(--common-transition);
  backdrop-filter: blur(2px);
}

.click-overlay.active {
  z-index: 90;
  opacity: 1;
}

.black_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all ease 0.4s;
  background: rgb(0 0 0 / 35%);
  z-index: 0;
}

.project_banner_overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 75%;
  background-image: linear-gradient(#ffffff00, #000000eb);
  /* background-image: linear-gradient(#f6921e00, #000); */
}

.subscribe_section .form-control {
  padding: 1rem 1.25rem;
}

.subscribe_inner_flex {
  display: flex;
  align-items: center;
}

.inquiry-label {
  position: relative;
  width: 100%;
}

.md-label {
  position: absolute;
  top: 50%;
  left: 1.5rem;
  background: var(--white-color);
  transform: translateY(-50%);
  font-size: var(--link-font-size);
  transition: var(--common-transition);
  color: #000000;
}

.inquiry-label textarea ~ .md-label {
  top: 1.25rem;
  transform: translateY(0);
}

.inquiry-label input,
.inquiry-label textarea {
  /* position: relative;
  border-radius: var(--border-radius); */
  font-size: var(--link-font-size);
  font-family: var(--regular-font-family);
  /* border: 1px solid #999999; */
  /* border-radius: 0.5rem; */
  width: 100%;
  background-color: transparent;
  outline: none;
  border: none;
  /* padding: 1.25rem 1.5rem; */
  resize: none;
}

.inquiry-label .md-label {
  background-color: transparent;
}

.inquiry-label.contact-label .md-label {
  left: 7rem;
}

.inquiry-label.contact-label input {
  padding-left: 7rem;
}

.inquiry-label input.error {
  border: 1px solid #f00;
}

.inquiry-label input {
  border: 1px solid #acb981;
  outline: none;
}

.inquiry-label input.error ~ .md-label {
  color: #f00;
}

.inquiry-label input.ng-not-empty ~ .md-label,
.inquiry-label input:focus ~ .md-label,
.inquiry-label textarea:focus ~ .md-label,
.inquiry-label textarea.ng-not-empty ~ .md-label,
.inquiry-label input:focus-visible ~ .md-label,
.inquiry-label textarea:focus-visible ~ .md-label {
  top: 0;
  transition: all 0.2s ease;
  left: 1rem;
  transform: translateY(-50%);
  font-size: 0.875rem;
  color: #000000;
  background: transparent;
  display: none;
}

.conatct_number_input {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 1.25rem 1.5rem;
}

.display_country_code {
  width: 45px;
}

.display_country_name {
  font-size: 0.875rem;
}

.country_code_data {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 5px;
  font-size: var(--moblink-size);
}

.country_code_list_data ul {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.country_code_list_data ul li {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition: all ease 0.2s;
}

.country_code_list_data ul li:hover {
  background-color: #dddddd;
}

.country_code_list_data li > div {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.country_code_list_data {
  position: absolute;
  top: 100%;
  left: 0;
  height: 40vh;
  overflow-y: scroll;
  width: 350px;
  z-index: 99999;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: #ffffff;
  border: 1px solid #999999;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.search_c-code {
  padding: 0 1rem;
  padding-bottom: 0.5rem;
}

.search_c-code input {
  position: relative;
  border-radius: var(--border-radius);
  border: 1px solid #999999;
  width: 100%;
  padding: 0.7rem;
}

.country_code_overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  display: none;
}

.country_code_overlay.code_overlay {
  display: block;
  /* z-index: 999; */
}

.country_code_list_data {
  display: none;
}

.country_code_list_data.active {
  display: block;
}

.country_code_list_data img {
  width: 25px !important;
}

.inquiry-label ::-webkit-scrollbar {
  width: 8px !important;
  cursor: pointer;
}

.inquiry-label ::-webkit-scrollbar-track {
  background: #ffffff !important;
}

.inquiry-label ::-webkit-scrollbar-thumb {
  background: #000000 !important;
}

.inquiry-label ::-webkit-scrollbar-thumb:hover {
  background: #000000 !important;
}

.footer-subscribe {
  flex-basis: 30%;
}

/* .inquiry-label.subscribe-label input:focus-visible,
.inquiry-label.subscribe-label input {
  height: 4rem;
  min-height: 4rem;

  border-radius: 0;
} */

.inquiry-btn {
  margin-top: 1.5rem;
}

label.error {
  display: none !important;
}

.submitbtn {
  position: absolute;
  top: 32%;
  right: 6%;
}

.submitbtn button {
  border: none;
  border-left: 0px;
  background-color: transparent;
}

.submitbtn button .common-icon {
  filter: invert(0);
}

.common-icon {
  width: 1.5rem;
  min-width: 1.5rem;
  filter: invert(1);
}

.header_contact_dropdown_img.common-icon {
  filter: unset !important;
}

.project_app_image {
  width: 9rem;
}

.reecosys_footer_copyright {
  border-top: 1px solid var(--primary-color);
}

.banner-text-abs {
  width: 90%;
  position: absolute;
}

.swiper-pagination.home_banner_pagination {
  position: absolute;
  bottom: 9%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
}

.home_banner_pagination
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--white-color);
}

/* .swiper-pagination-bullet.active{
    background-color: var(--white-color);
} */

.scroll-btn {
  width: 4rem;
  height: 4rem;
  border: 2px solid var(--white-color);
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  z-index: 99;
  border-radius: 50%;
  cursor: pointer;
}

.scroll-btn img {
  height: auto;
  width: 50%;
  object-fit: contain;
  position: absolute;
  left: 50%;
  top: -5px;
  transform: translateX(-50%);
  animation: move 2s linear infinite;
}

@keyframes move {
  0% {
    transform: translate(-50%, 10px);
    opacity: 0;
  }

  50% {
    transform: translate(-50%, 20px);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, 35px);
    opacity: 0.5;
  }
}

.home-listing-banner img {
  height: 95svh;
  object-fit: cover;
}

.home-listing-banner {
  width: 100%;
}

.line-after-text::after {
  content: "";
  position: absolute;

  height: 1px;
  background-color: var(--primary-color);
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  right: -40px;
}

.homes-content-abs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  text-align: center;
}

.footer-hover p {
  transition: var(--common-transition);
}

.footer-hover p:hover {
  transition: var(--common-transition);
  color: var(--secondary-color);
}

.footer-inquiryForm {
  display: flex;
  /* border: 1px solid #acb981; */
  /* padding: 1.25rem 3.13rem; */
  background: transparent;
  border-radius: 50px;
  width: 30rem;
  outline: unset;
}

.inquiry-label input,
.inquiry-label textarea {
  font-size: var(--link-font-size);
  font-family: var(--regular-font-family);

  width: 100%;
  background-color: transparent;
  outline: none;

  resize: none;
  padding: 1.25rem 3.15rem;
  border-radius: 50px;
}

.inquiry-label .md-label {
  background-color: transparent;
}

.submitbtn button:hover {
  border: none !important;
  border-left: 0px !important;
  background-color: transparent !important;
  outline: none !important;
}

/* List Page CSS Starts Here  */
.project-list-grid-1-column .project-info-list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.project-info-flex {
  width: max-content;
}

.project-list-grid-2-column .project_status_lable {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--white-color);
  padding: 0.5rem 0.7rem;
  z-index: 3;
  backdrop-filter: blur(11px);
  line-height: 1;
}

.project-list-grid-2-column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--small-gap-size);
}

.project-arrow-icon {
  transform: translateX(-50%);
  transition: var(--common-transition);
}

.project-list-card:hover .project-arrow-icon {
  transform: translateX(0%);
}

.project-img-list img {
  transition: var(--common-transition);
}

.project-list-card:hover .project-img-list img {
  transform: scale(1.1);
}

.list-panel-ul ul li::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1.5rem;
  height: 100%;
  width: 1px;
  background-color: var(--black-color);
}

.list-panel-ul ul li:last-child::after {
  display: none;
}

.list-change-button-icon {
  padding: 0.5rem;
  width: 3rem;

  border: 1px solid var(--black-color);
  border-radius: 50%;
}

.list-change-ul {
  background-color: var(--white-color);
  border: 1px solid var(--gray-color);
  padding: 1rem;
  position: absolute;
  width: 200px;
  z-index: 55;
  left: 0%;
  top: 2rem;
  transform: translateX(-60%);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--common-transition);
}

.list-change-button-icon:hover ~ .list-change-ul,
.list-change-ul:hover {
  opacity: 1;
  visibility: visible;
}

/* List Page CSS Ends Here  */

/* Detail Page CSS Start Here  */

.projectBannerFlex {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.highlightGrid > div {
  padding-right: 3rem;
  border-right: 1px solid var(--black-color);
}

.highlightGrid > div:last-child {
  padding-right: 0;
  border-right: 0px solid var(--black-color);
}

.section-content.readmoreText p span {
  color: inherit;
}

.walkthrough-banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
}

.walkthrough-project-thumb:hover .play_walkthrough_icon img {
  filter: invert(1);
}

.walkthrough-project-thumb:hover
  .reecosys-template-button.button-style-white.white-text {
  background-color: var(--white-color);
}

.walkthrough-project-thumb:hover
  .reecosys-template-button.button-style-white.white-text
  p {
  color: var(--black-color);
}

.walkthrough-project-thumb:hover .walk-thumbnail-image img {
  scale: 1.1;
}

.project_gallery_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.project_gallery_hover .galleryFonts {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 2;
  opacity: 0;
  transition: var(--common-transition);
}

.project_gallery_hover:hover img {
  scale: 1.1;
}

.project_gallery_hover:hover .galleryFonts {
  opacity: 1;
  transition: var(--common-transition);
}

.rera-text {
  word-break: break-all;
}

.amenities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--common-gap-size);
}

.project-amenities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--medium-gap-size);
  padding: 2rem;
  border: 1px solid var(--gray-color);
}

.amenities-grid > div {
  padding: 0rem;
  background-color: #f7f7f7;
  border: 0px solid var(--gray-color);
  /* border-radius: 0.5rem; */
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: var(--common-gap-size);
  align-items: center;
  min-height: 177px;
  justify-content: center;
  padding: 1rem;
}

.amenities-icon {
  width: 3rem;
}

.all-amenites-list ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2rem;
}

.amenities_popup {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 80%;
  max-height: 80%;
  transform: translate(-50%, -50%) scale(0);
  background-color: var(--white-color);
  z-index: -1;
  padding: 3rem;
  overflow-y: scroll;
  transition: var(--common-transition);
}

.amenities_popup.active {
  transform: translate(-50%, -50%) scale(1);
  z-index: 9999;
}

.curs-pointer {
  cursor: pointer;
}

.amenities_popup::-webkit-scrollbar {
  width: 0px !important;
}

.amenities-close-icon {
  position: absolute;
  top: -2rem;
  right: -2rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--brown-color);
  background-color: var(--brown-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--common-transition);
}
.amenities-close-icon:hover {
  background-color: transparent;
  transition: var(--common-transition);
}
.amenities-close-icon:hover span {
  color: var(--brown-color);
  transition: var(--common-transition);
}

.amenities-close-icon span {
  font-size: 2rem;
  color: var(--white-color);
  transition: var(--common-transition);
}

.specs_data {
  border: 1px solid #cccccc;
  border-radius: 5px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 300px;
  width: 100%;
  align-items: start;
  text-align: left;
}

.specs_image {
  width: 4rem;
}

.specs-text .readmore_click {
  opacity: 0.6;
  text-decoration: underline;
}

.project-map-iframe iframe {
  width: 100%;
  filter: grayscale(1);
  aspect-ratio: 16/5;
}

.project_detail_inquiry_form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--medium-gap-size);
}

/* Detail Page CSS End Here  */

.contact_country_flag {
  width: 25px;
}

.common-listing-banner img,
.common-listing-banner {
  height: 60lvh;
}

.inquiry_popup {
  padding: 3rem 1.5rem;
  position: fixed;
  top: 0;
  right: -100%;
  width: 30%;
  background: var(--white-color);
  height: 100%;
  z-index: 9999;
  transition: var(--common-transition);
}

.inquiry_popup.inqury_active {
  right: 0%;
}

.career_position_list {
  padding: 2rem;
  border: 1px solid var(--gray-color);
}

/* thanku page */
.thankyou-title h1 {
  /* line-height: 0.4; */
  font-size: 7rem;
  font-family: var(--bold-font-family);
}

.thankyou_wrapper {
  height: 100svh;
}

/* .BacktoHome a p {
  transition: var(--common-transition);
} */

/* .BacktoHome a p:hover {
  transition: var(--common-transition);
  color: var(--secondary-color);
} */

.reecosys-banner-section .swiper-slide > div {
  width: 100%;
  height: 91svh;
}

.close_icon {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--brown-color);
  background-color: var(--brown-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--common-transition);
}
.close_icon span {
  color: var(--white-color);
  transition: var(--common-transition);
}
.close_icon:hover {
  background-color: transparent;
  transition: var(--common-transition);
}
.close_icon:hover span {
  color: var(--brown-color);
  transition: var(--common-transition);
}

/* about */
.readmore-span-color p span {
  color: var(--primary-color);
}

.title-after-line::after {
  content: "";
  position: absolute;
  width: 2rem;
  height: 1px;
  background-color: var(--black-color);
  top: 50%;
  transform: translateY(-50%);
  right: -2.5rem;
}

.person_about_designation p a {
  font-family: var(--medium-font-family);
  text-decoration: underline;
  transition: var(--common-transition);
}

.person_about_designation p a:hover {
  color: var(--secondary-color);
  transition: var(--common-transition);
}

.awards-swiper-card {
  padding: 1.5rem;
  border: 1px solid #999999;
  height: 100%;
  min-height: 25rem;
  width: 100%;
}

.awards_swiper_outer .swiper-container {
  padding: 0rem 9rem;
}

.swiper-scrollbar {
  height: 3px;
}

.profile_info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
}

.profilepage_designation p,
.profilepage_designation span {
  color: var(--white-color);
}

.profile_video_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--small-gap-size);
}

.play_icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2rem;
}

.blog-grid {
  display: grid;
  gap: var(--medium-gap-size);
  grid-template-columns: calc(100% - 30% - 1.5rem) calc(100% - 70% - 1.5rem);
}

.recent_blogs_details {
  padding: 1rem;
  border: 1px solid var(--black-color);
  display: flex;
  gap: 1rem;
}

.blog_bind_data p,
.blog_bind_data strong {
  font-size: var(--paragraph-font-size);
  line-height: 1.5;
}

.blog_bind_data strong {
  font-family: var(--semibold-font-family);
}

.header-hover:hover .header-title {
  color: var(--secondary-color);
}

.footer-navigation-link a.active_page p,
.header-navigation-links a.active_page p,
.header-navigation-links li.active a p {
  color: var(--secondary-color);
}

.header-links-ul ul li a.active_page p,
.header-links-ul ul li a.active_page span,
.header-links-ul ul li a:hover p,
.header-links-ul ul li a:hover span,
.footer-sec3 a:hover p {
  color: var(--secondary-color);
}

.header_contact_dropdown {
  position: fixed;
  bottom: -100%;
  background: #fff;
  z-index: 109;
  width: 100%;
  padding: 2rem 1rem;
  transition: var(--common-transition);
}

.header_contact_dropdown.active {
  bottom: 0%;
}

.close_contact {
  width: 2.2rem;
  padding: 0.5rem;
  background: #222222;
  border-radius: 50%;
  position: absolute;
  top: -5rem;
  left: 50%;
  transform: translateX(-50%);
}

.md-toast.error {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 0.5rem 1rem;
  color: #00000050;
  z-index: 999999999999999;
}

.lineheight1 {
  line-height: 1 !important;
}

.opacity5 {
  opacity: 0.5;
}

.navigation-grid-projects-wrapper {
  display: grid;
  width: 80%;
  margin: 0 auto;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: var(--medium-gap-size);
}

.left-project-list-navigation::after {
  width: 2px;
  height: 110%;
  top: 50%;
  right: 0;
  background-color: #dfdfdf;
  content: "";
  position: absolute;
  transform: translateY(-50%);
}

.navigation-grid-projects-wrapper .image-wrapper {
  width: 90%;
  margin-left: auto;
}

.footer-logo {
  width: 20rem;
  margin: auto 0;
  padding: 4rem;
}

.section-para-right-home {
  width: 45%;
  margin-left: auto;
  margin-top: 4rem;
}

.left-title-bullet {
  padding-left: 8rem;
  position: relative;
}

.left-title-bullet::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  left: 2.5%;
  top: 12%;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #a7c956;
  animation: heartbeat 0.8s infinite;
}

@keyframes heartbeat {
  0% {
    transform: scale(0.75);
  }

  100% {
    transform: scale(1);
  }
}

.arrow-circle-link {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  cursor: pointer;
  width: fit-content;
  align-items: center;
}

.arrow-circle {
  width: 3.5rem;
  border: 1px solid var(--highlight-color);
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  padding: 1rem;
  height: 3.5rem;
}

.arrow-circle-link p {
  font-size: var(--link-font-size);
  font-family: var(--regular-font-family);
  color: var(--highlight-color);
}

.hover-enable-arrow {
  display: none;
}

.hover-disable-arrow {
  display: block;
}

.arrow-circle-link:hover .hover-enable-arrow {
  display: block;
}

.arrow-circle-link:hover .hover-disable-arrow {
  display: none;
}

.arrow-circle::before {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--highlight-color);
  position: absolute;
  transition: var(--common-transition);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  content: "";
}

.arrow-circle-link:hover .arrow-circle::before {
  transition: var(--common-transition);
  transform: translate(-50%, -50%) scale(1);
}

.arrow-circle img {
  position: relative;
  z-index: 5;
}

.homeBannerOverlaytwo {
  opacity: 0.8;
  background: linear-gradient(180deg, #00000000 48%, #000 100%);
}

.homeBannerOverlayOne,
.homeBannerOverlaytwo {
  top: 0;
  height: 100%;
  transition: var(--common-transition);
  z-index: 1;
  position: absolute;
  width: 100%;
  left: 0;
}

.project-info-list.project-info-list-home {
  position: absolute;
  bottom: 2rem;
  width: calc(100% - 2rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.lineheight05 {
  line-height: 0.5;
}

/* detail-page */
/* #tcc-detail-sec1 {
    background-image: url(../images/detail/detail_banner.jpg);
    background-repeat: no-repeat;
    padding-top: 20rem;
} */

.deatil-banner-title {
  position: absolute;
  top: 15%;
  left: 10%;
  width: calc(100% - 10%);
  z-index: 15;
}

.deatil-flex {
  display: flex;
  align-items: flex-end;
  gap: 5rem;
}

.detain-main-title {
  line-height: 0.9;
  width: 65%;
}

.custom_black_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all ease 0.4s;
  opacity: 1;
  background: rgb(0 0 0 / 40%);
  z-index: 0;
}

.detail-banner-aerrow {
  width: 6rem;
  border: 2px solid white;
  border-radius: 50%;
  padding: 2rem;
  height: 6rem;
  margin-bottom: 6rem;
  display: flex;
  align-items: center;
  transition: var(--common-transition);
}

.detail-banner-aerrow:hover {
  background-color: var(--brown-color);
  border: 2px solid var(--brown-color);
  border-radius: 50%;
  transition: var(--common-transition);
}

.detail-buttons {
  position: absolute;
  bottom: 4%;
  z-index: 20;
  right: 4%;
}

.detail-retail {
  width: 15%;
}

.detail-banner-button:hover {
  display: flex;
  align-items: center;
  gap: 6%;
  background-color: var(--brown-color);
  transition: var(--common-transition);
}

.detail-banner-button {
  display: flex;
  align-items: center;
  gap: 6%;
  cursor: pointer;
  font-size: 1.13rem;
  background-color: rgba(255, 255, 255, 0.238);
  padding: 1rem 2.56rem;
  width: 15rem;
  align-items: center;
  justify-content: center;
  border-radius: 1.25rem;
  height: 4rem;
  outline: none;
  transition: var(--common-transition);
}
.bottom-strip-button {
  outline: none;
  border: 1px solid var(--black-color);
}
.bottom-strip-button:hover {
  border: 1px solid var(--brown-color);
}

.bottom-strip-button:hover p {
  color: var(--white-color);
}
.bottom-strip-button:hover .detail-inquire-logo-heder {
  filter: invert(0);
}

.detail-inquire-logo {
  width: 2rem;
}

.button-maincontainer {
  margin-left: auto;
  width: fit-content;
  display: flex;
  gap: 1.5rem;
}

.gallery-button {
  padding: 1.2rem 1.2rem;
  width: fit-content;
  border-radius: 1.6rem;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.238);
  transition: all 0.6s ease;
  height: 4rem;
  /* place-items: center; */
  display: flex;
  align-items: center;
}

.gallery-button:hover {
  background-color: var(--brown-color);
}

.img-icon {
  width: 2rem;
}

/* detail-sec-2 */
.detail-sec2-main {
  padding-left: 35%;
  padding-top: 6rem;
}

.detail-sec2-head {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* flex-basis: 50%; */
}

.detail-sec2-head .content-section {
  width: 55%;
}

.border-black-detail {
  border-bottom: 1px solid black;
}

.pb {
  padding-bottom: 2rem;
}

.pt {
  padding-top: 3rem;
}

.detail-sec2-main1 {
  display: flex;
  flex-direction: column;
  width: 50%;
  flex-basis: 50%;
}

.detail-sec2-aerrow {
  width: 3rem;
  height: 3rem;
  padding: 1rem;
  border: 1px solid var(--brown-color);
  border-radius: 50%;
  transition: var(--common-transition);
  /* margin: 20% 0; */
}

.detail-sec2-aerrow:hover {
  transition: var(--common-transition);
  background-color: var(--brown-color);
}

.detail-sec2-aerrow:hover .detail-white-aerrow {
  display: block;
}

.detail-sec2-aerrow .detail-white-aerrow {
  display: none;
}

.detail-sec2-aerrow:hover .detail-red-aerrow {
  display: none;
}

.sec2-main {
  display: flex;
  flex-direction: row;
  gap: 22rem;
}

.leaf-img {
  width: 9rem;
  margin-top: -7rem;
  margin-left: -4%;
}

.the-iconic-title {
  position: relative;
  z-index: 9;
}

.iconic-main {
  display: flex;
  align-items: center;
  padding-top: 5rem;
}

.visible-mobile-only {
  display: none;
}

.hide-mobile-only {
  display: block;
}

/* .detail-sec3::backdrop {
    content: '';
    background-image: url(../images/detail/dot.svg);
    width: 1.25rem;
    height: 1.25rem;
    animation: heartbeat 0.8s infinite;
    position: absolute;
    left: -5%;
    top: 8%;
    background-repeat: no-repeat;
    background-size: cover;
} */

.detail-point {
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  top: 16%;
  left: -5%;
}

.detail-sec3 {
  line-height: 0.9;
}

.detail-secpragraph {
  width: 81rem;
  padding-bottom: 3.15rem;
}

.detail-img-container {
  width: 95%;
  margin: auto;
}

.detail-sec3-img {
  border-radius: 20px;
}

.custom_black_overlay2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all ease 0.4s;
  opacity: 1;
  background: rgb(0 0 0 / 40%);
  z-index: 0;
  border-radius: 20px;
  padding-top: 3rem;
}

.total_number {
  position: absolute;
  top: 45%;
  right: 19%;
  /* transform: translate(-50%, -50%); */
  line-height: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lh {
  line-height: 1;
}

.detail-img-bottom-font {
  position: absolute;
  bottom: 5%;
  left: 5%;
}

.detail-sec3-bottom {
  margin-left: auto;
  width: 54%;
  padding-top: 5rem;
  /* padding-bottom: 3rem; */
}

.border-gray {
  border-bottom: 1px solid var(--gray-color);
}

.border-gray-top {
  border-top: 1px solid var(--gray-color);
}

.detail-point1 {
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  top: 53%;
  left: -23%;
  transform: translate(-50%, -50%);
}

.layout-border {
  border: 1px solid gray;
  border-radius: 20px;
  overflow: hidden;
}

.detail-gallery {
  border-radius: 20px;
  object-fit: unset !important;
}

.fancybox-image {
  object-fit: unset !important;
}

.detail-galler-space {
  padding-bottom: 6rem;
}

.tlf {
  text-align: left;
}

.detail-gallery-swiper .swiper-container {
  padding: 0 10%;
}

.detail-layout-swiper .swiper-container {
  padding: 0 10%;
}

.detail-sec6-head {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  padding-top: 5.63rem;
  column-gap: 7rem;
  row-gap: 1.5rem;
  justify-items: center;
}

/* .detail-sec6-main {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
} */

.detail-sec6-main1 {
  display: flex;
  border-bottom: 1px solid gray;
  padding-bottom: 1rem;
  align-items: center;
  gap: 1.5rem;
  width: 100% !important;
}

.detail-amenities-img {
  width: 40px;
}

.point {
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  left: -5%;
  top: 38%;
}

.view-less-amenities {
  width: 3rem;
  height: 3rem;
  border: 1px solid black;
  border-radius: 50%;
  padding: 1rem;
  transform: rotate(-90deg);
  transition: var(--common-transition);
}

.view-less-amenities:hover {
  background-color: var(--brown-color);
  border: 1px solid var(--brown-color);
  transition: var(--common-transition);
}

.view-less-amenities:hover .amenities-white-arrow {
  display: block;
}

.view-less-amenities .amenities-white-arrow {
  display: none;
}

.view-less-amenities:hover .amenities-black-arrow {
  display: none;
}

.detail-sec7-head {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  gap: 5rem;
  padding-top: 8rem;
}

.detail-sec7-main {
  display: flex;
  flex-direction: column;
}

.detail-sec7-main ul li {
  list-style: disc;
  margin-left: 1rem;
  margin-bottom: 0.6rem;
}

.detail-sec7-main ul li::marker {
  color: var(--brown-color);
  font-size: var(--content-font-size);
}

.specification-title p {
  font-size: 1.25rem;
  font-family: var(--italic-font-family);
  padding-bottom: 0 !important;
}

.project_detail_inquiry_form > div:nth-child(1) {
  border-radius: 20px !important;
  overflow: hidden !important;
}

.accordion_click.accordion_click_specs.active {
  border-bottom: 0px solid transparent;
}

.accordion_click_specs {
  border-bottom: 1px solid var(--primary-color);
  display: flex;
  flex-direction: row;
  gap: 1rem;
  padding-bottom: 1rem;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
}

.specs-ulli {
  padding: 0 1rem 1rem 1rem;
  border-bottom: 1px solid var(--primary-color);
}

.accordion-icon-remove {
  display: none;
}

.accordion_click.accordion_click_specs.active .accordion-icon-plus {
  display: none;
}

.accordion_click.accordion_click_specs.active .accordion-icon-remove {
  display: block;
}

.Construction-Update-video {
  width: 100%;
  margin: auto;
  background-color: #dedede;
}

.Construction-Update {
  margin-top: 5%;
}

.align-end {
  align-items: flex-end;
}

.view-map {
  width: max-content;
}

.detailSectionGrid {
  padding-top: 3rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--medium-gap-size);
  /* grid-template-areas: ". one one" ". two two"; */
}

/* .detailSectionGrid > div:nth-child(1) {
  grid-area: one;
}

.detailSectionGrid > div:nth-child(2) {
  grid-area: two;
} */

.detail-sec3 {
  width: 80%;
}

.detail-sec7-main ul li {
  font-size: var(--content-font-size);
  line-height: 1.5;
}

.youtubeIframe {
  aspect-ratio: 16 / 9;
  border-radius: 20px;
}

/* footer */
.footer-section-padding {
  padding: 3rem 0;
}

.footer-sec-1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  padding: 1.5rem 0;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ced6b1;
  border-top: 1px solid #ced6b1;
}

.footer-sec-1 > :nth-child(2) {
  width: fit-content;
  margin: 0 auto;
}

.footer-sec-1 > :nth-child(3) {
  width: fit-content;
  margin-left: auto;
}

.footer-social-icon > div {
  width: 2rem;
}

/* .footer-sec-1 input {
    : :placeholder color: green;

} */

.footer_form {
  border: 1px solid #acb981;
  padding: 1.25rem 3.13rem;
  background: transparent;
  border-radius: 50px;
  width: 30rem;
  outline: unset;
}

.footer_form.error {
  border: 1px solid #f00;
}

.footer_form.error ~ .md-label {
  color: #f00;
}

.footer_form ~ .md-label {
  background-color: transparent;
}

.form-aerrow button {
  background-color: transparent;
  border: none;
  outline: none;
}

.form-aerrow button .common-icon {
  filter: invert(0);
}

.tcc-footer-bg {
  background-color: #e2e4da;
}

.form-aerrow {
  position: absolute;
  top: 32%;
  right: 6%;
}

.footer-social-icon {
  display: flex;
  gap: 1rem;
  width: 7rem;
  align-items: center;
}

.footer-main {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0;
  align-items: center;
  justify-content: center;
}

.footer-sec2 {
  /* display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8rem;
  border-bottom: 1px solid #ced6b1;
  width: 100%; */
}

/* .footer-logo {
  width: 23rem;
  padding: 4rem;
} */

/* .footer-right-border {
  border-right: 1px solid #ced6b1;
} */

/* .footer-address {
    display: flex;
    flex-direction: column;
} */

.footer-detail {
  display: flex;
  gap: 10rem;
  width: 100%;
  align-items: start;
  justify-content: space-between;
}

.footer-sec2 {
  /* gap: 4rem; */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  place-items: start;
  border-bottom: 1px solid #ced6b1;
  width: 100%;
}
.footer-links-card {
  padding: 2rem;
  border-left: 1px solid #ced6b1;
  height: 100%;
  width: 100%;
}

.footer-detail-main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  /* width: 28%; */
  text-align: center;
  /* gap: 2rem; */
}

.footer-sec3 {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-top: 1rem;
}

.margin-top-footer {
  margin-top: 1rem;
}

.footer-font {
  color: black;
}

.footer-font:hover {
  color: var(--secondary-color);
}

/* home */
.home-sec1-main-title {
  display: flex;
  flex-direction: column;
  font-size: var(--banner-title-font-size);
  text-align: center;
  padding-bottom: 3rem;
}

.home-sec-title {
  line-height: 1;
  padding-top: 3rem;
}

.home-border-top {
  border-top: 1px solid #acb981;
}

.home-border-bottom {
  border-bottom: 1px solid #acb981;
}

.tcc-home-wrapper {
  background-color: #f2f3ed;
}

.tcc-home-button {
  width: 100%;
  background-color: #dde5b4;
  padding: 1.5rem 1rem;
  font-size: 2.5rem;
  transition: var(--common-transition);
  border: unset;
}

.tcc-home-button p {
  color: #435e33;
}

.tcc-home-button:hover {
  background-color: #cbd5b0;
  transition: var(--common-transition);
}

.home-img1 {
  width: 100%;
  /* height: 90vh; */
}

.home_black_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all ease 0.4s;
  opacity: 1;
  background: rgb(0 0 0 / 20%);
  z-index: 0;
}

.home-sec2-pra {
  width: 83%;
  line-height: 1;
  margin: auto;
  padding-top: 3rem;
  padding-bottom: 1.5rem;
}

.light-green-border {
  border-top: 1px solid #ced6b1;
}

.home-sec2-1stpra {
  width: 70%;
  margin: auto;
}

.home-sec-1-aerrow {
  position: absolute;
  width: 9rem;
  top: 6%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid white;
  padding: 3rem;
  height: 9rem;
  transform: translateX(-50%);
  transition: var(--common-transition);
}

.home-sec-1-aerrow:hover {
  background-color: var(--highlight-color);
  transition: var(--common-transition);
  border: 1px solid var(--highlight-color);
}

.tcc-home-button-sec2 {
  width: fit-content;
  background-color: #94a65a;
  padding: 1rem 3rem;
  font-size: 1.15rem;
  border: none;
}

.home-sec2-button {
  width: fit-content;
  margin: 5% auto;
  padding-bottom: 3rem;
}

.button-aerrow {
  width: 1.2rem;
}

.home-sec3 p {
  font-size: 5rem;
  font-family: var(--brastika-regular);
}

.home-sec3-projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  gap: 1rem;
}

.home-sec3-projects-img {
  /* height: 90vh; */
  width: 100%;
}

.home-project-txt {
  position: absolute;
  bottom: 5%;
  left: 5%;

  line-height: 2;

  text-align: left;
  width: 90%;
}

.home-project-aerrow {
  width: 5rem;
}

.project-hovertxt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: var(--common-transition);
  z-index: 1;
  width: 100%;
  opacity: 0;
  padding-top: unset !important;
  padding-bottom: 2.5rem;
  backdrop-filter: blur(10px);
  height: 100%;
  justify-content: end;
}

.project_detail_home {
  width: 81%;
  margin: auto;
}

.project-hovertxt:hover {
  opacity: 1;
  transition: var(--common-transition);
}

.home-sec4-aerrow {
  transform: rotate(135deg);
}

/* .home-project-txt  p {
  font-size: 1rem;
} */
.home-project-txt p {
  line-height: 1;
}
.wgt {
  font-weight: bolder;
}

.project_black_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all ease 0.4s;
  opacity: 1;
  background: rgb(0 0 0 / 40%);
  z-index: 0;
}

.home-sec4-main {
  display: flex;
  padding-top: 7rem;
  flex-direction: row;
}

.sec4-left-side-img {
  height: 100vh;
}

.sec4-right-side {
  background-color: #1f241d;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: 4rem;
}

.sec4-left-side {
  width: 50%;
}

.sec4-right-main-box p,
.sec4-right-main-box span {
  font-size: 4rem;
  font-family: var(--brastika-regular);
}

.sec4-txt {
  line-height: 1;
  padding-top: 3rem;
  padding-bottom: 2rem;
}

.sec4-right-main {
  width: 83%;
}

.sec4-right-main-box {
  margin: auto;
  text-align: center;
  width: 74%;
}

.sec4-pragraph {
  width: 58%;
  margin: 0 auto;
}

.sec-4-play-button {
  width: 4rem;
  border-radius: 50%;
  padding: 1rem;
  height: 4rem;
  background-color: rgba(255, 255, 255, 0.4);
}

.sec-4-play-button img {
  filter: brightness(0) invert(1);
}

.sec4-left-side-txt {
  position: absolute;
  bottom: 12%;
  left: 7%;
  display: flex;
  align-items: center;
  gap: 3rem;
}

.sec-4-play-button:hover {
  filter: unset;
  background-color: var(--highlight-color);
}

.sec4-home-brochure-aerrow {
  width: 4rem;
  height: 4rem;
  padding: 1rem;
  border: 1px solid #acb981;
  border-radius: 50%;
  transition: var(--common-transition);
}

.sec4-home-brochure-aerrow:hover .white_aerrow {
  display: block;
}

.sec4-home-brochure-aerrow .white_aerrow {
  display: none;
}

.sec4-home-brochure-aerrow:hover .green_aerrow {
  display: none;
}

.sec4-home-brochure-aerrow:hover {
  border: 1px solid var(--secondary-color);
  border-radius: 50%;
  transition: var(--common-transition);
  background-color: var(--secondary-color);
}

.view-projects {
  padding: 1rem;
}

.Download_Brochure {
  position: absolute;
  bottom: 7%;
}

.row-flex {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
}

.projects-list-swiper-outer {
  width: 100%;
  max-width: 100%;
  flex-basis: 100%;
}

.swiper-slide > div,
.swiper-slide > a {
  width: 100%;
}

.about-left-para {
  width: 60%;
  margin-left: auto;
}

.about-section-3-flex {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--medium-gap-size);
}

.loading_btn {
  width: 1.4rem;
  height: 1.4rem;
  margin: 0;
  background: transparent;
  border-top: 2px solid var(--white-color);
  border-right: 2px solid transparent;
  border-radius: 50%;
  -webkit-animation: 1s spin linear infinite;
  animation: 1s spin linear infinite;
  transition: var(--common-transition);
}

.thankyou-fonts {
  font-size: 2rem !important;
}

.margin-auto {
  margin: 0 auto;
}

.megamenugrid {
  /* padding: 1rem 3rem 3rem 3rem; */
  display: grid;
  grid-template-columns: 25% 75%;
  justify-content: space-between;
  align-items: start;
}

.megamenuContent {
  display: flex;
  gap: 1.5rem;
  justify-content: end;
  flex-wrap: wrap;
}
/* .megamenuContent {
  display: grid
;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  justify-content: start;
  flex-wrap: wrap;
} */

.megamenuImg {
  border-radius: 1.25rem;
}

.megamenuContent .megamenuItem {
  flex-basis: calc(100% / 4 - 1.5rem);
  /* border-radius: 1.25rem; */
}

.megamenuStatus {
  /* position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 9;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--white-color);
  background-color: #ffffff40; */
  display: none;
}

.megamenu_overlay_2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all ease 0.4s;
  background: linear-gradient(380deg, #00000040 5%, #00000000 65%);
  z-index: 0;
  /* border-radius: 1.25rem; */
}

.megamenuContent .megamenuItem .megamenuText {
  position: absolute;
  bottom: 1rem;
  width: calc(100% - 2rem);
  left: 50%;
  transform: translateX(-50%);
}

.megamenu_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all ease 0.4s;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
  /* border-radius: 1.25rem; */
}

.megamenuText .filterIcon {
  filter: unset !important;
}

.al-end {
  align-items: end !important;
}

.footer-title p {
  font-size: 1.5rem;
}
.link-font-size-footer span,
.link-font-size-footer p {
  font-size: 1rem;
}

.footer-links-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-links-ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: fit-content;
}

.link-font-flex-footer {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
}

.swiper-button-next,
.swiper-button-prev {
  position: relative;
  top: unset;
  width: unset;
  height: unset;
  margin-top: unset;
  z-index: 10;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: 50%;
  background-repeat: no-repeat;
}
.prev-next-gap {
  gap: 2rem;
}
.detail-point1-layout {
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  top: 53%;
  left: -15%;
  transform: translate(-50%, -50%);
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  background-image: unset;
  left: unset;
  right: unset;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  background-image: unset;
  right: unset;
  left: unset;
}
/* .swiper-arrow-main {
  height: 2.5rem;
  width: 2.5rem;
} */
.swiper-arrow-main img {
  height: 100%;
  width: 100%;
}
.swiper-arrow-main {
  width: 3.5rem;
  border: 1px solid var(--brown-color);
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  padding: 1rem;
  height: 3.5rem;
}

.swiper-arrow-main:hover .hover-enable-arrow {
  display: block;
}
.swiper-arrow-main:hover .hover-disable-arrow {
  display: none;
}
.swiper-arrow-main::before {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--brown-color);
  position: absolute;
  transition: var(--common-transition);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  content: "";
}
.swiper-arrow-main:hover::before {
  transition: var(--common-transition);
  transform: translate(-50%, -50%) scale(1);
}

.swiper-arrow-main img {
  position: relative;
  z-index: 5;
}

.swiper-button-prev {
  transform: rotate(-137deg);
}
.swiper-button-next {
  transform: rotate(45deg);
}
.recocys-logo {
  width: 3rem;
}
.iframe-div {
  height: 60vh;
}
.iframe-div iframe {
  width: 100%;
  height: 100%;
}
.heightfull {
  height: 100%;
}
.heightfull img {
  height: 100%;
}
.page-list-2-col-grid .section-content p {
  font-size: 1.5rem;
}
/* .break-none .section-content p br {
  display: none;
} */
.break-none > div:nth-child(1) {
  padding-top: 3rem;
}
.footer-links-ul li a:hover p,
.footer-links-ul li a.active_page p {
  color: var(--secondary-color);
}
.social-icon-hover a:hover .hover-disable-icon {
  display: none;
  transform: var(--common-transition);
}
.social-icon-hover a:hover .hover-enble-icon {
  display: block;
  transform: var(--common-transition);
}
.hover-disable-icon {
  display: block;
  transform: var(--common-transition);
}
.hover-enble-icon {
  display: none;
  transform: var(--common-transition);
}
.fixed-inquire-button {
  width: fit-content;
  position: fixed;
  bottom: -100%;
  right: -3%;
  transform: translate(-50%, -50%);
  z-index: 999999;
}
.fixed-inquire-button.fixed-button-hide {
  bottom: -100% !important;
  transition: var(--common-transition);
}
.fixed-inquire-button.fixed-button-visible {
  bottom: -2%;
  transition: var(--common-transition);
}
.footer-section-padding.project_detail_flag {
  padding: 3rem 0;
}
.fixed-button-detail {
  display: flex;
  align-items: center;

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

  gap: 1rem;
  /* padding: 1.15rem 1.5rem; */
  padding: 0 1.5rem;
  height: 3.5rem;
  transition: var(--common-transition);
  border-radius: 1.25rem;
  width: fit-content;
  justify-content: center;
  border: 1px solid var(--brown-color);
}
.fixed-button-detail p {
  color: var(--white-color);
}
.fixed-button-detail:hover {
  background-color: var(--white-color);
  border: 1px solid var(--brown-color);
  transition: var(--common-transition);
}
.fixed-button-detail:hover p {
  color: var(--brown-color);
  transition: var(--common-transition);
}
.detail-inquire-logo-heder {
  width: 1.5rem;
  filter: invert(1);
}
.button-blackborder:hover .detail-inquire-logo-heder {
  filter: invert(0);
  transition: var(--common-transition);
}
.margin-auto {
  margin: 0 auto;
}
.fixed-button-detail:hover .detail-inquire-logo-heder {
  filter: invert(80%) sepia(55%) saturate(2331%) hue-rotate(331deg)
    brightness(95%) contrast(87%);
}
.fixed-button-detail .detail-inquire-logo-heder {
  filter: invert(0);
}
.view-all-button .button-aerrow {
  filter: invert(1);
}
.view-all-button:hover .button-aerrow {
  filter: unset;
  /* transform: var(--common-transition); */
}
.grace-area {
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translate(-50%, -50%);
}
.header-wrapper.contact_flag {
  background-color: black;
}
/* .header-wrapper.contact_flag .header-logo {
  filter: invert(1);
} */
.header-wrapper.contact_flag .header-links-ul ul li a,
.header-wrapper.contact_flag .header-links-ul ul li span,
.header-wrapper.contact_flag .header-links-ul ul li p {
  /* font-size: 1rem !important; */
  color: var(--white-color);
}
.header-wrapper.contact_flag .white-button-contact {
  border: 1px solid var(--white-color) !important;
}
.header-wrapper.contact_flag .white-button-contact .detail-inquire-logo-heder {
  filter: invert(0);
}
.header-wrapper.contact_flag .white-button-contact:hover {
  border: 1px solid var(--secondary-color) !important;
}
.recosys-contact-main-wrapper {
  background-color: black;
}
.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5rem;
  width: 100%;
}
.contact-form-grid > div:nth-child(2) {
  width: 100%;
  padding: 3.125rem;
  margin-right: auto;
}
.contact-banner-img img {
  height: 100%;
}
.form-border-contact {
  background: transparent;
  border-bottom: 1px solid var(--white-color) !important;
  border-radius: unset !important;
  color: var(--white-color) !important;
}
.md-label-contact {
  color: var(--white-color) !important;
}
.country-number-contact {
  color: var(--white-color);
}
.contact-checkbox input[type="checkbox"] {
  accent-color: var(--white-color) !important;
}
.contact-checkbox input[type="checkbox"] {
  accent-color: var(--white-color) !important;
  /* Fallback for older Safari versions */
  background-color: var(--white-color) !important;
  border-color: var(--white-color) !important;
}
.contact-button {
  background-color: var(--white-color);
  border: 1px solid var(--white-color);
}
.contact-button:hover {
  background-color: var(--white-color) !important;
  border: 1px solid var(--white-color) !important;
}
.contact-button p,
.contact-button span {
  color: var(--black-color) !important;
}
.contact-button:hover .contact-button p,
.contact-button span {
  color: var(--black-color) !important;
}
.gap-detail-banner {
  gap: 0.5rem;
}
.contact-main-logo {
  display: block;
}
.contact-active-mobile-logo {
  display: none;
}
.contact-border-label input:focus-visible ~ label.md-lable,
.contact-border-label select:focus-visible ~ label.md-lable,
.contact-border-label textarea:focus-visible ~ label.md-lable,
.contact-border-label input.not_required ~ label.md-lable,
.contact-border-label select.not_required ~ label.md-lable,
.contact-border-label textarea.not_required ~ label.md-lable {
  transition: all 0.1s ease;
  top: 5%;
  transform: translateY(-50%);
  left: 0.3rem;
  background: transparent !important;
  z-index: 5;
  color: var(--white-color) !important;
  font-size: 14px;
}
.recocysy-disable {
  display: block;
  transition: var(--common-transition);
}
.recocys-enble {
  display: none;
  transition: var(--common-transition);
}
.footer-sec3 a:hover .recocysy-disable {
  display: none;
  transition: var(--common-transition);
}
.footer-sec3 a:hover .recocys-enble {
  display: block;
  transition: var(--common-transition);
}
.logo-margin {
  margin: auto 0;
}
.filter_button_web {
  display: grid;
  gap: 1.2rem;
  place-items: center;
}
.deleteBtn_active.filter_button_web {
  grid-template-columns: 85% 15%;
}
.filter_button_web {
  grid-template-columns: 100%;
}
.delete-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
.delete-btn span {
  color: white;
  font-size: 1.5rem;
}
.delete-btn:hover span {
  color: var(--secondary-color);
}
.deleteBtn_active.filter_button_web .delete-btn {
  display: flex;
}
.filter_button_web .delete-btn {
  display: none;
}
.contact-border-label input.ng-not-empty ~ label.md-lable,
.contact-border-label textarea.ng-not-empty ~ label.md-lable,
.contact-border-label select.ng-not-empty ~ label.md-lable {
  background: transparent !important;

  color: var(--white-color);
}
.fa-icon-contact i {
  color: var(--white-color) !important;
}
.department-contact {
  background-color: var(--black-color);
  border: 1px solid var(--white-color);
  color: var(--black-color);
}
.down-arrow-menu {
  display: block;
}
.arrow-change.active .down-arrow-menu {
  display: none;
  transition: var(--common-transition);
}
.arrow-change.active .up-arrow-menu {
  display: block;
  transition: var(--common-transition);
}
.up-arrow-menu {
  display: none;
}
.megamenuItem a:hover .megamenuImg img {
  transform: scale(1.1);
}
.navigationWrapper.contact_flag-menu {
  background-color: var(--black-color);
}
.navigationWrapper.contact_flag-menu .semibold-fonts {
  color: var(--white-color);
}
.homebanner-video video {
  min-height: 100vh;
}
.filter-select-box-fonts option {
  font-size: 1.5rem;
}
.header-wrapper.list_flag {
  background-color: #f2f3ed;
}
.tcc-list-page-padding {
  padding-top: 1rem;
}
.whatsapp_connect {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 9;
  transition: var(--common-transition);
}

.whatsapp-icon {
  width: 3.5rem;
}

.whatsapp_connect.active {
  bottom: 7rem;
  right: 30px;
}

.bottom-strip-button {
  width: 14rem;
  padding: 1rem 1.5rem;
}