@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: 0.3s;
}
html {
  scroll-behavior: smooth;
}
body {
  overflow-x: hidden;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var(--robotoFontFamily);
}
ul,
li {
  list-style: none;
}
a {
  text-decoration: none;
}
:root {
  --playFairDisplayFontFamily: "Playfair Display", serif;
  --montserratFontFamily: "Montserrat", sans-serif;
  --robotoFontFamily: "Roboto", sans-serif;
  --greenColor: #4caf50;
  --whiteColor: #ffffff;
  --beigeColor: #f5f5dc;
  --headingBlackColor: #333333;
  --blackColor: #000000;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--beigeColor);
}

::-webkit-scrollbar-thumb {
  background-color: var(--greenColor);
  border-radius: 10px;
}

.noSelect {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.noSelect:focus {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

:focus {
  outline: none !important;
}

 .animateElement {
/*  filter: blur(10px); */
  opacity: 0.6;
  transform: scale(0.95) translateY(10px);
}

/* .animateElement {
  transform: translateY(4px);
} */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  background-color: transparent !important;
  color: var(--headingBlackColor) !important;
  -webkit-box-shadow: unset !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* loadingScreen */
/* ============= */
.loadingScreen {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100dvh;
  z-index: 1111111111;
  background: #ffffff00;
  position: fixed;
  top: 0;
  left: 0;
  visibility: visible;
  opacity: 1;
  pointer-events: unset;
  background-color: #f5f5dc;
}
.loadingScreen.hide {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.loadingScreen .logo {
  width: 6.75rem;
  position: absolute;
  visibility: visible;
  opacity: 1;
  pointer-events: unset;
  background-color: #f5f5dc;
  border-radius: 3.125rem;
  padding: 0.625rem 0.625rem 0.5rem;
}
.loadingScreen .logo .outline {
  border: 2px dashed #64d040;
  animation: rotateLogo 3s infinite;
  width: 100%;
  height: 107px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50px;
}
.loadingScreen .logo img {
  width: 100%;
  height: 100%;
}
.loadingScreen.hide .logo {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  animation-play-state: paused;
}
@keyframes rotateLogo {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* nav */
/* *** */
nav {
  background-color: #f5f5dcfc;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3.125rem;
  z-index: 10;
}
nav.active {
  background-color: #f5f5dcfc;
  position: fixed;
  padding: 1rem 3.125rem;
  box-shadow: 0 0 29px 0 #dcdcc27a;
  backdrop-filter: blur(40px);
}
nav .center_content {
  width: 105rem;
  display: flex;
  gap: 0.625rem;
  justify-content: space-between;
  align-items: center;
}
nav .center_content .left {
  display: flex;
  gap: 2.2rem;
  justify-content: center;
  align-items: center;
}
nav .center_content .left img {
  width: 6.75rem;
}
nav.active .center_content .left img {
  width: 4.75rem;
}
nav .center_content .left ul {
  display: flex;
  gap: 4.375rem;
  justify-content: center;
  align-items: center;
}
nav .center_content .left ul li a {
  font-weight: 400;
  font-size: 1.125rem;
  text-transform: capitalize;
  color: #333333;
  text-decoration: underline;
  text-underline-offset: 0.5rem;
  text-decoration-thickness: 0.0313rem;
}
nav .center_content .left ul li a.active {
  font-weight: 500;
}
nav .center_content .left ul li a.active,
nav .center_content .left ul li a:hover {
  color: #4caf50;
  border-color: #4caf50;
}
nav .center_content .right {
  display: flex;
  gap: 2.3125rem;
  justify-content: center;
  align-items: center;
}
nav .center_content .right .hamburgerIcon {
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #4caf50;
  /* border: 1px solid #a5e03a;
  box-shadow: 2px 2px 0 #b7e438;
  outline: 1px solid #f3f4da; */

  display: none;
}
nav .center_content .right .hamburgerIcon svg {
  color: #fff;
}
nav .center_content .right .socialIcons {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
}
nav .center_content .right .socialIcons .icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f5dc;
  transition: 0.3s;
}
nav .center_content .right .socialIcons .icon:hover {
  opacity: 0.9;
}

nav .center_content .right a.contactUs {
  padding: 0.775rem 0.8125rem;
  border-radius: 0.5rem;
  background: #4caf50;
  display: flex;
  gap: 0.4206rem;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 1.125rem;
  color: #f5f5dc;
  transition: 0.3s;
  z-index: 111;
}
nav .center_content .right a.contactUs:hover {
  transform: rotate(2deg);
  opacity: 0.9;
}

/* mobileNav */
/* ========= */
.mobileNav {
  width: 100%;
  height: 100dvh;
  background-color: rgba(245, 245, 220, 1);
  position: fixed;
  top: 0;
  left: 0;
  backdrop-filter: blur(10px);
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.mobileNav.active {
  visibility: visible;
  opacity: 1;
  pointer-events: unset;
}
.mobileNav .logo {
  position: absolute;
  top: 13px;
  left: 13px;
  width: 59px;
}
nav.active .mobileNav .logo {
  top: 6px;
  width: 49px;
}
.mobileNav .closeIcon {
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #4caf50;
  /* border: 1px solid #a5e03a;
  box-shadow: 2px 2px 0 #b7e438;
  outline: 1px solid #f3f4da; */
  position: absolute;
  top: 23px;
  right: 13px;
}
nav.active .mobileNav .closeIcon {
  top: 11px;
}
.mobileNav .closeIcon svg {
  color: #fff;
}
.mobileNav ul {
  width: 90%;
}
.mobileNav ul li a {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  font-size: 1.25rem;
  color: rgba(51, 51, 51, 1);
  border-bottom: 1px solid rgba(51, 51, 51, 1);
  font-weight: 500;
}
.mobileNav ul li a.active {
  color: rgba(76, 175, 80, 1);
  border-color: rgba(76, 175, 80, 1);
}
.mobileNav .socialIcons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}
.mobileNav .socialIcons a {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(224 224 209);
  border-radius: 50%;
  border: 1px solid rgba(76, 175, 80, 1);
}

/* Banner */
/* ****** */
.banner-section {
  color: white;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  /* Ensure blur does not overflow */
}

.banner-section .background-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/header/header.webp') no-repeat center center/cover;
  transform: scale(1.1);
  /* Slightly enlarge the background */
  z-index: -1;
}

.banner-section h1 {
  font-family: var(--montserratFontFamily);
  font-weight: 700; /* Bold for visibility */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  font-weight: 600;
  font-size: 5rem;
  line-height: 5.875rem;
}

.banner-section p {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  font-size: 1.5rem;
  display: inline-block;
}

.banner-img {
  max-width: 20%;
}

@media (max-width: 768px) {
  .banner-section h1 {
      font-size: 3rem;
  }
  .banner-img {
      max-width: 30%;
  }
}


/* header */
/* ****** */
header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f5dc;
  padding-bottom: 7.5rem;
  position: relative;
}
header .pattern01 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}
header .pattern02 {
  position: absolute;
  left: 28.75rem;
  top: 0;
  z-index: 1;
  pointer-events: none;
}
header .pattern03 {
  position: absolute;
  left: 1.25rem;
  top: 5.3125rem;
  z-index: 1;
  pointer-events: none;
}
header .pattern04 {
  position: absolute;
  left: 0rem;
  bottom: 0rem;
  z-index: 1;
  pointer-events: none;
}
header .pattern05 {
  position: absolute;
  left: 9.5625rem;
  bottom: 0rem;
  z-index: 1;
  pointer-events: none;
}
header .pattern06 {
  position: absolute;
  left: 38.3125rem;
  bottom: 0rem;
  z-index: 1;
  pointer-events: none;
}
header .pattern07 {
  position: absolute;
  right: 27.75rem;
  bottom: 0rem;
  z-index: 1;
  pointer-events: none;
}
header .pattern08 {
  position: absolute;
  right: 0rem;
  bottom: 0rem;
  z-index: 1;
  pointer-events: none;
}
header .center_content {
  width: 100%;
  min-height: 56.25rem;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  position: relative;
  overflow: hidden;
}
header .center_content .bgImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
header .center_content .layer {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    240deg,
    #000000 5%,
    rgba(0, 0, 0, 0) 20%
  );
  position: absolute;
  top: 0;
  left: 0;
}
header .center_content .leftSide {
  max-width: 50vw;
  width: 100%;
  z-index: 1;
  background: #f5f5dc;
  /* padding-top: 14.938rem; */
  /* padding-left: 11.5rem; */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
}
header .center_content .leftSide .mainContent {
  max-width: 51.5625rem;
  /* position: relative; */
  padding-top: 14.938rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4.4375rem;
}
header .center_content .leftSide .content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.875rem;
}
header .center_content .leftSide .content h1 {
  font-family: var(--playFairDisplayFontFamily);
  font-weight: 600;
  font-size: 5rem;
  line-height: 5.875rem;
  text-transform: capitalize;
  color: #333333;
}
header .center_content .leftSide .content h1 span {
  font-weight: 700;
  font-size: 5.125rem;
  line-height: 5.875rem;
  color: #4caf50;
}
header .center_content .leftSide .content p {
  /* font-family: Roboto; */
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 2rem;
  color: #333333;
  max-width: 46.9375rem;
}
header .center_content .leftSide .content .cta {
  display: flex;
  gap: 0.875rem;
  justify-content: center;
  align-items: center;
  margin-top: 1.25rem;
  z-index: 1;
}
header .center_content .leftSide .content .cta a {
  padding: 1.0938rem 1.7188rem;
  background: #ffffe7;
  border: 0.0625rem solid #4caf5080;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 1.125rem;
  text-transform: capitalize;
  color: #333333;
  transition: 0.3s;
}
header .center_content .leftSide .content .cta a:hover {
  opacity: 0.7;
}
header .center_content .leftSide .content .cta a.greenBTN {
  padding: 1.0938rem 1.5313rem;
  width: 12.0625rem;
  min-height: 3.625rem;
  background: #4caf50;
  border: 0.0625rem solid #4caf5080;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 1.125rem;
  text-transform: capitalize;
  color: #f5f5dc;
  padding: unset;
  position: relative;
  overflow: hidden;
  transition: 0.3s;
  opacity: 1;
}
header .center_content .leftSide .content .cta a.greenBTN:hover {
  background: #ffffe7;
  color: #333333;
}
header .center_content .leftSide .statsBox {
  background: #ffffff1a;
  border: 0.0625rem solid #4caf5080;
  border-radius: 0.5rem;
  padding: 1.375rem;
  display: flex;
  gap: 2.4375rem;
  justify-content: center;
  align-items: center;
  width: 25.8019rem;
  /* width: 309.77px; */
}
header .center_content .leftSide .statsBox .box {
  display: flex;
  gap: 0.625rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
header .center_content .leftSide .statsBox .box h1 {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.5rem;
  color: #4caf50;
}
header .center_content .leftSide .statsBox .box p {
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.125rem;
  color: #7b7b7b;
}
header .center_content .leftSide .statsBox .divider {
  width: 0.0625rem;
  height: 100%;
  background-color: #4caf5080;
}
/* about us section */
/*******************/
#aboutUs {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 7.5rem 0;
}
#aboutUs .bgImage {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0rem;
  left: 0;
  object-fit: cover;
  object-position: top;
}
#aboutUs .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.9) 30%,
    rgba(0, 0, 0, 0) 100%
  );
}
#aboutUs .content {
  width: 90%;
  max-width: 105rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.875rem;
}
#aboutUs .content h1 {
  font-size: 5rem;
  font-weight: 600;
  font-family: var(--playFairDisplayFontFamily);
  line-height: 5.875rem;
  color: var(--greenColor);
}
#aboutUs .content p {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 2rem;
  color: var(--whiteColor);
}
#aboutUs .content .btn {
  padding: 1.125rem 1.5rem;
  border-radius: 0.5rem;
  /* padding: 17px 47px 17px 47px; */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.125rem;
  font-weight: 600;
  font-family: var(--robotoFontFamily);
  transition: 0.3s;
  background: var(--greenColor);
  margin-top: 1.25rem;
  color: var(--beigeColor);
  border: 0.0625rem solid transparent;
}
#aboutUs .content .btn:hover {
  border-color: #4caf5080;
  background: #ffffe7;
  color: var(--headingBlackColor);
}

/* services Section */
/*******************/
#services {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 7.5rem 0;
}
#services .centerContent {
  width: 90%;
  max-width: 105.125rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6.25rem;
}
#services .centerContent h1.heading {
  font-size: 5rem;
  font-weight: 600;
  font-family: var(--playFairDisplayFontFamily);
  line-height: 6.25rem;
  text-align: center;
  text-transform: capitalize;
  color: var(--headingBlackColor);
}
#services .centerContent h1.heading span {
  color: var(--greenColor);
  font-size: 5.125rem;
  font-weight: 700;
}
#services .centerContent .servicesCards {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1.875rem;
  flex-wrap: wrap;
}
#services .centerContent .servicesCards .card {
  max-width: 24.875rem;
  padding: 1.875rem 1.875rem 3.125rem;
  width: 100%;
  border-radius: 1.25rem;
  border: 0.125rem solid var(--beigeColor);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  background: #f5f5dc1a;
  flex: 1;
}
#services .centerContent .servicesCards .card:nth-child(odd) {
  background: var(--beigeColor);
}
#services .centerContent .servicesCards .card img {
  width: 3.4787rem;
  height: 4.375rem;
}
#services .centerContent .servicesCards .card:last-of-type img {
  width: 4.375rem;
}
#services .centerContent .servicesCards .card h2 {
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--playFairDisplayFontFamily);
  line-height: 2.625rem;
  text-align: center;
  text-transform: capitalize;
}
#services .centerContent .servicesCards .card p {
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 2rem;
  text-align: center;
  color: var(--headingBlackColor);
}

/* aanlagSection */
/****************/
#aanlagSection {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#aanlagSection .centerContent {
  width: 90%;
  max-width: 105rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3.125rem;
}
#aanlagSection .centerContent .headingAndParagraph {
  display: flex;
  gap: 3.125rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#aanlagSection .centerContent .headingAndParagraph h1 {
  font-size: 5rem;
  font-weight: 600;
  font-family: var(--playFairDisplayFontFamily);
  line-height: 6.25rem;
  text-align: center;
  text-transform: capitalize;
  color: var(--headingBlackColor);
}
#aanlagSection .centerContent .headingAndParagraph h1 span {
  font-size: 5.125rem;
  font-weight: 700;
  color: var(--greenColor);
}
#aanlagSection .centerContent .headingAndParagraph p {
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 2rem;
  text-align: center;
  color: var(--headingBlackColor);
}
#aanlagSection .centerContent .cards {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1.875rem;
}
#aanlagSection .centerContent .cards .card {
  max-width: 33.75rem;
  /* width: 100%; */
  flex: 1;
  border-radius: 1.25rem;
  background: #f5f5dc1a;
  border: 0.25rem solid var(--beigeColor);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 1.875rem;
  transition: 0.3s;
  padding: 1.625rem 1.625rem 2.375rem;
}
#aanlagSection .centerContent .cards .card:nth-child(2) {
  background: var(--beigeColor);
}
#aanlagSection .centerContent .cards .card img {
  width: 100%;
  height: 26.4375rem;
  border-radius: 1.25rem;
  object-fit: cover;
}
#aanlagSection .centerContent .cards .card .cardContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.875rem;
}
#aanlagSection .centerContent .cards .card h2 {
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--playFairDisplayFontFamily);
  line-height: 2.625rem;
  text-transform: capitalize;
  color: var(--headingBlackColor);
  text-align: left;
}
#aanlagSection .centerContent .cards .card p {
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 2rem;
  color: var(--headingBlackColor);
  text-align: left;
}
#aanlagSection .centerContent .btn {
  width: 15.875rem;
  min-height: 3.5rem;
  padding: 1.0938rem;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: capitalize;
  background: var(--greenColor);
  color: var(--beigeColor);
  border: 0.0625rem solid transparent;
}
#aanlagSection .centerContent .btn:hover {
  background: #ffffe7;
  color: var(--headingBlackColor);
  border-color: #4caf5080;
}

/* project */
/**********/
#project {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 7.5rem 0;
}
#project .centerContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3.125rem;
}
#project .centerContent .headingAndParagraph {
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3.125rem;
}
#project .centerContent .headingAndParagraph h1 {
  font-size: 5rem;
  font-weight: 600;
  font-family: var(--playFairDisplayFontFamily);
  line-height: 6.25rem;
  text-align: center;
  text-transform: capitalize;
  color: var(--headingBlackColor);
}
#project .centerContent .headingAndParagraph h1 span {
  font-size: 5.125rem;
  font-weight: 700;
  color: var(--greenColor);
}
#project .centerContent .headingAndParagraph p {
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 2rem;
  text-align: center;
  color: var(--headingBlackColor);
}
#project .centerContent .projectsContainer {
  width: 100%;
}
#project .centerContent .projectsContainer .projectCard {
  height: 38.375rem;
  border-width: 0rem;
  border-style: solid;
  border-color: #ffffff80;
  box-shadow: 0.25rem 0.25rem 1.625rem 0 #ffffff4f;
  display: flex;
  flex-shrink: 0;
  justify-content: flex-start;
  align-items: flex-end;
  position: relative;
  cursor: pointer;
}
#project .centerContent .projectsContainer .projectCard img {
  width: 100%;
  height: 100%;
  border-radius: 1.25rem;
  object-fit: cover;
}
#project .centerContent .projectsContainer .projectCard .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 75.41%, #000000 100%);
  border-radius: 1.25rem;
  transition: background 0.5s ease-in-out;
}
#project .centerContent .projectsContainer .projectCard:hover .overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, #000000 100%);
}
#project .centerContent .projectsContainer .projectCard .cardContentDiv {
  width: 100%;
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2.5rem;
  padding: 0 1.875rem 1.875rem 1.875rem;
}
#project
  .centerContent
  .projectsContainer
  .projectCard
  .cardContentDiv
  .cardContent {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.625rem;
}
#project
  .centerContent
  .projectsContainer
  .projectCard
  .cardContentDiv
  .cardContent
  h2 {
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--playFairDisplayFontFamily);
  line-height: 2.625rem;
  text-transform: capitalize;
  color: white;
  transition: color 0.3s ease, transform 0.3s ease-in-out;
  /* transform: translateY(55px); */
  transform: translateY(150%);
}
#project
  .centerContent
  .projectsContainer
  .projectCard
  .cardContentDiv
  .cardContent
  p {
  min-height: 40px;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.75rem;
  color: var(--whiteColor);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(150%);
  transition-delay: 100ms;
}
#project
  .centerContent
  .projectsContainer
  .projectCard
  .cardContentDiv
  .arrowIcon {
  width: 2.8125rem;
  height: 2.8125rem;
  border: 1px solid transparent;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#project
  .centerContent
  .projectsContainer
  .projectCard:hover
  .cardContentDiv
  .arrowIcon {
  border-color: #ffffff80;
  box-shadow: 0.25rem 0.25rem 1.625rem 0rem #ffffff4f;
  background-color: rgba(255, 255, 255, 0.2);
}
#project
  .centerContent
  .projectsContainer
  .projectCard
  .cardContentDiv
  .arrowIcon
  svg {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}
#project
  .centerContent
  .projectsContainer
  .projectCard:hover
  .cardContentDiv
  p {
  opacity: 1;
  transform: translateY(0);
}
#project
  .centerContent
  .projectsContainer
  .projectCard:hover
  .cardContentDiv
  h2 {
  color: var(--greenColor);
  transform: translateY(0rem);
  transition: 0.3s;
}
#project .centerContent .projectsContainer .projectCard:hover .arrowIcon svg {
  transform: rotate(-26deg);
}
#project
  .centerContent
  .projectsContainer
  .projectCard:hover
  .arrowIcon
  svg
  path {
  stroke: var(--greenColor);
}
/* contactSection*/
/****************/
#contact {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--beigeColor);
  padding: 7.5rem 0;
}
#contact .centerContent {
  width: 90%;
  max-width: 105rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6.25rem;
}
#contact .centerContent .headingAndParagraph {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.875rem;
}
#contact .centerContent .headingAndParagraph h1 {
  font-size: 5rem;
  font-weight: 600;
  font-family: var(--playFairDisplayFontFamily);
  line-height: 6.25rem;
  text-transform: capitalize;
  color: var(--headingBlackColor);
}
#contact .centerContent .headingAndParagraph h1 span {
  font-size: 5.125rem;
  font-weight: 700;
  color: var(--greenColor);
}
#contact .centerContent .headingAndParagraph p {
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 2rem;
  color: var(--headingBlackColor);
}
#contact .centerContent .bottomPart {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 5rem;
}
#contact .centerContent .bottomPart img {
  width: 60.5rem;
  height: auto;
  border-radius: 1.25rem;
}
#contact .centerContent .bottomPart form {
  width: 39.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.875rem;
}
#contact .centerContent .bottomPart form input {
  width: 100%;
  height: 3.8125rem;
  border-radius: 0.5rem;
  border: none;
  border-bottom: 0.0625rem solid #a8a6a6;
  background: transparent;
  padding: 1.25rem;
  font-size: 1.125rem;
  font-weight: 600;
  font-family: var(--robotoFontFamily);
  line-height: 100%;
  color: var(--headingBlackColor);
  outline: none;
}
#contact .centerContent .bottomPart form input::placeholder {
  color: var(--headingBlackColor);
}
#contact .centerContent .bottomPart form input:focus,
#contact .centerContent .bottomPart form textarea:focus {
  border-color: #4caf50;
}
#contact .centerContent .bottomPart form textarea {
  width: 100%;
  height: 15.4375rem;
  border: unset;
  border-radius: 0.5rem;
  border-bottom: 0.0625rem solid #a8a6a6;
  padding: 1.25rem;
  background: transparent;
  resize: none;
  outline: none;
  font-size: 1.125rem;
  font-weight: 600;
  font-family: var(--robotoFontFamily);
  line-height: 100%;
  color: var(--headingBlackColor);
}
#contact .centerContent .bottomPart form textarea::placeholder {
  color: var(--headingBlackColor);
}
#contact .centerContent .bottomPart form .btn {
  width: 100%;
  height: 3.75rem;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--greenColor);
  color: var(--beigeColor);
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: capitalize;
  font-family: var(--robotoFontFamily);
  transition: 0.3s;
  outline: none;
  border: none;
  cursor: pointer;
}
#contact .centerContent .bottomPart form .btn:hover {
  background: transparent;
  border: 0.0625rem solid var(--greenColor);
  color: var(--headingBlackColor);
}

/* footer */
/*********/
footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4.625rem;
  padding: 7.5rem 0 0;
  background: var(--headingBlackColor);
}
footer .centerContent {
  width: 90%;
  max-width: 104.9375rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}
footer .centerContent .footer-logo-para-sec {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.25rem;
}
footer .centerContent .footer-logo-para-sec .logo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6563rem;
}
footer .centerContent .footer-logo-para-sec .logo img {
  width: 5.9344rem;
  height: 6rem;
}
footer .centerContent .footer-logo-para-sec .logo {
  font-size: 2.625rem;
  font-weight: 700;
  line-height: 2.625rem;
  text-transform: capitalize;
  background: linear-gradient(180deg, #cfe926 -7.1%, #39a445 100.2%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
footer .centerContent .footer-logo-para-sec p {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 2rem;
  color: #c3c3c3;
}
footer .centerContent .footerSection {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.25rem;
}
footer .centerContent .footerSection h2 {
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--playFairDisplayFontFamily);
  line-height: 2.625rem;
  text-transform: capitalize;
  color: var(--whiteColor);
}
footer .centerContent .footerSection h2 span {
  color: var(--greenColor);
}
footer .centerContent .footerSection ul {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.75rem;
}
footer .centerContent .footerSection ul li a {
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.125rem;
  text-transform: capitalize;
  color: var(--whiteColor);
  padding-bottom: 0.1875rem;
  position: relative;
}
footer .centerContent .footerSection ul li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0rem;
  background: var(--greenColor);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-in-out;
}
footer .centerContent .footerSection ul li a:hover::after {
  transform: scaleX(1);
  width: 100%;
  height: 0.0625rem;
}
footer .centerContent .footerSection:nth-child(3) ul li a::after {
  display: none;
}
footer .centerContent .footerSection .footerInfoList {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1.25rem;
}
footer .centerContent .footerSection ul li .footerSecondPart {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
}
footer .centerContent .footerSection .socialIcons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.9375rem;
}
footer .centerContent .footerSection .socialIcons .icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--whiteColor);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
footer .centerContent .footerSection .socialIcons .icon svg {
  width: 55%;
  height: 48%;
}
footer .centerContent .footerSection .socialIcons .icon:hover {
  opacity: 0.8;
}
footer .copyRight {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.875rem 0;
  border: 0.0625rem solid #f5f5dc0d;
}
footer .copyRight p {
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.125rem;
  text-transform: capitalize;
  color: #c3c3c3;
}

.swiper {
  width: 100%;
}
.swiper-pagination-bullet {
  width: 1.5rem;
  height: 0.625rem;
  border-radius: 1rem;
  background: rgba(76, 175, 80, 0.2);
  border: 0.0625rem solid rgba(76, 175, 80, 1);
  opacity: 1 !important;
  transition: 0.3s;
}
.swiper-pagination-bullet-active {
  width: 6.1875rem;
  height: 0.875rem;
  background-color: rgba(76, 175, 80, 1);
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  position: unset;
  margin-top: 3.125rem;
}

/* media Query */
/**************/
@media screen and (max-width: 1866px) {
  #contact .centerContent .bottomPart img {
    width: 50vw;
  }
  #contact .centerContent .bottomPart form {
    width: 35vw;
  }
}

@media screen and (max-width: 1756px) {
  header .center_content .leftSide {
    max-width: 59.063rem;
  }
  header .center_content .leftSide .mainContent {
    max-width: unset;
    padding-left: 4rem;
  }
}

@media screen and (max-width: 1599px) {
  #contact .centerContent .bottomPart img {
    width: 48vw;
  }
  #contact .centerContent .bottomPart {
    align-items: stretch;
  }
  #contact .centerContent .bottomPart form {
    width: 39vw;
  }
  #contact .centerContent .bottomPart {
    gap: 2rem;
  }
}

@media screen and (max-width: 1372px) {
  #services .centerContent h1.heading br {
    display: none;
  }
  html {
    font-size: 12px;
  }
  nav .center_content .left img,
  .loadingScreen .logo {
    width: 80px;
  }
  .loadingScreen .logo .outline {
    height: 80px;
  }
  nav .center_content .right a.contactUs svg {
    width: 18px;
  }
  nav .center_content .right .socialIcons .icon {
    padding: 6px;
  }
  #contact .centerContent .headingAndParagraph h1 {
    font-size: 4.5rem;
  }
  #contact .centerContent .headingAndParagraph h1 span {
    font-size: 4.625rem;
  }
}

@media screen and (max-width: 1259px) {
  #project .centerContent .headingAndParagraph h1 br {
    display: none;
  }
  nav .center_content .left ul {
    gap: 2.375rem;
  }
}

@media screen and (max-width: 1178px) {
  #aanlagSection .centerContent .headingAndParagraph h1 br {
    display: none;
  }
}

@media screen and (max-width: 1063px) {
  header .pattern06 {
    display: none;
  }
  nav .center_content .left img {
    width: 6.875rem;
  }
}

@media screen and (max-width: 1043px) {
  nav .center_content .right {
    gap: 0.6rem;
  }
  nav .center_content .right .hamburgerIcon {
    display: flex;
  }
  nav .center_content .right a.contactUs {
    padding: 0.7rem 0.8125rem;
  }
  nav .center_content .left ul,
  nav .center_content .right .socialIcons {
    display: none;
  }
  header .center_content .leftSide {
    max-width: 100%;
    align-items: center;
  }
  header .center_content .leftSide .content {
    align-items: center;
  }
  header .center_content .leftSide .content h1 {
    text-align: center;
  }
  header .center_content .leftSide .content p {
    text-align: center;
  }
  header .center_content .leftSide .mainContent {
    width: 90%;
    align-items: center;
    padding-left: 0;
  }
  #services .centerContent .servicesCards .card,
  #aanlagSection .centerContent .cards .card {
    flex: unset;
  }
}

@media screen and (max-width: 768px) {
  .loadingScreen .logo .outline {
    height: 92px;
  }
  html {
    font-size: 12px;
  }
  header .pattern05,
  header .pattern07 {
    display: none;
  }
  header .pattern02 {
    right: 0;
    left: unset;
  }
  header .pattern03 {
    width: 100%;
    left: 0;
  }
  header .center_content .leftSide .content h1 {
    font-size: 3rem;
    line-height: 3.4rem;
  }
  header .center_content .leftSide .content h1 span {
    font-size: 3.125rem;
    line-height: unset;
  }
  nav {
    padding: 1.125rem;
    padding-bottom: 0;
  }
  nav.active {
    padding: 0.6rem 1.125rem;
  }
  nav .center_content .left img {
    width: 4.875rem;
  }
  nav.active .center_content .left img {
    width: 4rem;
  }
  header .center_content .leftSide .statsBox .box p {
    text-align: center;
  }
  #aboutUs .content h1 {
    font-size: 2.4rem;
    line-height: 3.2rem;
    text-align: center;
  }
  #aboutUs .content h1 br {
    display: none;
  }
  #aboutUs .overlay {
    background: linear-gradient(
      90deg,
      rgb(0 0 0 / 92%) 47.37%,
      rgb(0 0 0 / 71%) 100%
    );
  }
  #services .centerContent h1.heading,
  #aanlagSection .centerContent .headingAndParagraph h1,
  #project .centerContent .headingAndParagraph h1,
  #contact .centerContent .headingAndParagraph h1 {
    font-size: 2.4rem;
    line-height: 3.2rem;
  }
  #services .centerContent h1.heading span,
  #aanlagSection .centerContent .headingAndParagraph h1 span,
  #project .centerContent .headingAndParagraph h1 span,
  #contact .centerContent .headingAndParagraph h1 span {
    font-size: 2.42rem;
  }
  #services .centerContent .servicesCards .card h2 {
    font-size: 1.5rem;
    line-height: 2.225rem;
  }
  #aanlagSection .centerContent .headingAndParagraph p br,
  #project .centerContent .headingAndParagraph p br,
  #contact .centerContent .headingAndParagraph h1 br,
  #contact .centerContent .headingAndParagraph p br {
    display: none;
  }
  #aanlagSection .centerContent .cards .card h2 {
    font-size: 1.8rem;
  }
  #aanlagSection .centerContent .cards .card .cardContent {
    gap: 0.875rem;
  }
  #aanlagSection .centerContent .cards .card img {
    height: 18.4375rem;
  }
  #aanlagSection .centerContent .cards .card {
    padding: 1.425rem 1.325rem 2rem;
  }
  #aanlagSection .centerContent .cards .card {
    gap: 1.475rem;
  }
  .swiper {
    width: 90%;
  }
  #project .centerContent .projectsContainer .projectCard {
    height: 28rem;
  }
  #project .centerContent .projectsContainer .projectCard img {
    object-position: top;
  }
  #project
    .centerContent
    .projectsContainer
    .projectCard
    .cardContentDiv
    .cardContent
    p
    br {
    display: none;
  }
  #project
    .centerContent
    .projectsContainer
    .projectCard
    .cardContentDiv
    .cardContent
    h2 {
    transform: translateY(216%);
  }
  #project
    .centerContent
    .projectsContainer
    .projectCard:hover
    .cardContentDiv
    .cardContent
    h2 {
    transform: translateY(0%);
  }
  #contact .centerContent .bottomPart img {
    width: 100%;
  }
  #contact .centerContent .bottomPart form {
    width: 100%;
    gap: 1.275rem;
  }
  #contact .centerContent .bottomPart form textarea {
    height: 10.4375rem;
  }
  footer .centerContent .footer-logo-para-sec p br {
    display: none;
  }
  footer .centerContent {
    gap: 3.8rem;
  }
  footer {
    padding: 5rem 0 0;
  }
  footer .centerContent .footer-logo-para-sec .logo img {
    width: 4.875rem;
    height: unset;
  }
  footer .centerContent .footerSection h2 {
    font-size: 1.8rem;
  }
  footer .centerContent .footerSection .footerInfoList,
  footer .centerContent .footerSection ul {
    gap: 0.8rem;
  }
  header .center_content {
    min-height: unset;
  }
  header .center_content .leftSide .mainContent {
    padding: unset;
  }
  header {
    padding: 10.5rem 0 4rem;
  }
  header .center_content .bgImage,
  header .center_content .layer {
    display: none;
  }
  header .center_content .leftSide .statsBox {
    padding: 1rem;
    /* gap: 0.4375rem; */
    gap: 26px;
  }
  header .center_content .leftSide .mainContent {
    gap: 3.4375rem;
  }
  #aboutUs,
  #services,
  #contact {
    padding: 5rem 0;
  }
  #aboutUs .content {
    align-items: center;
  }
  #aboutUs .content p {
    text-align: center;
  }
  #project {
    padding: 5rem 0;
  }
  #project {
    scroll-margin-top: 3rem;
  }
  #contact .centerContent .headingAndParagraph h1,
  #contact .centerContent .headingAndParagraph p {
    text-align: center;
  }
  footer .centerContent {
    gap: 3.2rem;
  }
  header .center_content .leftSide .statsBox .box {
    gap: 0.2rem;
  }
  .loadingScreen .logo {
    width: 90px;
    height: 90px;
  }
  #services .centerContent,
  #aanlagSection .centerContent,
  #project .centerContent,
  #contact .centerContent {
    gap: 4.18rem;
  }
  #project .centerContent .headingAndParagraph,
  #aanlagSection .centerContent .headingAndParagraph {
    gap: 1.875rem;
  }
}