/*------------------------------------------------------------------
Project:Solar Enregy 
Author: The_Krishna        
-------------------------------------------------------------------*/
/*----------------Table of contents Start---------------------------
1.index.html 
---------Table of contents End-----------------------------------*/
/*------------------------ [Color codes] ------------------------                     
Background:
Content:
-------------------------------------------------------------------*/
/*----------------------- [ Default css ] -----------------------*/

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

html::-webkit-scrollbar {
  display: none;
}

*,
::after,
::before {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

a:focus,
a {
  outline: none;
  text-decoration: none;
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}

svg {
  vertical-align: middle;
}

input {
  outline-width: 0;
  outline-offset: 0;
  outline: 0;
  border: none;
  outline: none;
  width: 100%;
}

textarea {
  outline-width: 0;
  outline-offset: 0;
  outline: 0;
}

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

body {
  width: 100%;
  height: 100% !important;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.data-project-sport {
  overflow: hidden;
}

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

::-webkit-scrollbar-corner {
  display: none;
}

::-webkit-scrollbar-thumb {
  background: #8bc34a;
  border-radius: 10px;
  background-clip: content-box;
}

::-webkit-scrollbar-track {
  background-color: #10271d;
}

.container {
  width: 1290px;
  margin: auto;
}

.js-scroll {
  overflow: hidden;
  width: 100%;
  will-change: transform;
}

.fade_up,
.fade_down,
.zoom_in,
.zoom_out {
  opacity: 0;
  transition: all 2s;
}

.fade_up {
  transform: translateY(-100%);
}

.fade_down {
  transform: translateY(100%);
}

.zoom_in {
  transform: scale(0.5);
}

.zoom_out {
  transform: scale(1.5);
}

.fade_right {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 2s;
}

.fade_left {
  opacity: 0;
  transform: translateX(100%);
  transition: all 2s;
}

.flip_left {
  opacity: 0;
  transform: perspective(400px) rotateY(-90deg);
  transition: all 2s;
}

.flip_right {
  opacity: 0;
  transform: perspective(400px) rotateY(90deg);
  transition: all 2s;
}

.flip_up {
  opacity: 0;
  transform: perspective(400px) rotateX(-90deg);
  transition: all 2s;
}

.flip_down {
  opacity: 0;
  transform: perspective(400px) rotateX(90deg);
  transition: all 2s;
}

.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.animation-data {
  animation: drop-in 5s ease 500ms backwards;
  transition: all 0.2s ease;
  overflow: hidden;
}

@keyframes drop-in {
  0% {
    opacity: 0;
    transform: translateY(80px);
  }

  100% {
    opacity: 1;
    transform: translate(0px);
  }
}

/* --------------------- [ Header Section Design ] --------------------- */
.header {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  position: fixed;
  top: 10px;
  left: 0px;
  z-index: 99;
  transition: all 0.3s ease-in-out;
}

.data-separate {
  position: relative;
  top: 0;
  margin-top: 10px;
}

.data-separate.active {
  position: fixed;
  top: 10px;
  animation: slideIn 0.5s ease forwards;
}

.design-data.active {
  background-color: #10271d;
  animation: slideIn 0.5s ease forwards;
  transform: translateY(-100%);
}

.data-all-page {
  background-color: #10271d;
}

.design-data {
  padding: 40px;
  margin: 0 20px;
  border-radius: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.3s ease;
}

@keyframes slideIn {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

.logo-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 100px;
}

.logo-data img {
  width: 100%;
}

.ul-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.li-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}

.navbar-anchor {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #fff;
  transition: all 0.5s ease-in;
}

.navbar-anchor:hover {
  color: #9fd456;
  transition: all 0.5s ease-in;
}

.li-nav i {
  margin-left: 8px;
}

.ul-design {
  padding: 20px;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
  background-color: #fff;
  border-radius: 20px;
  position: absolute;
  top: 40px;
  left: 0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  min-width: 210px;
  opacity: 0;
  transform: translateY(15px);
  pointer-events: none;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.ul-design.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.li-design {
  width: 100%;
}

.anchor-design {
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #10271d;
  text-transform: capitalize;
  display: flex;
  transition: all.5s ease-in;
}

.anchor-design:hover {
  color: #9fd456;
  transition: all.5s ease-in;
}

.contact-data {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.button-design {
  position: relative;
  padding: 15px 30px;
  border-radius: 30px;
  height: 48px;
  border: none;
  cursor: pointer;
  background-color: #fff;
  transition: all 0.2s ease;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #10271d;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 100;
}

.button-design:active {
  transform: scale(0.96);
}

.button-design img {
  width: 100%;

  height: 20px;
}

.button-design:before,
.button-design:after {
  position: absolute;
  content: "";
  width: 100%;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
  z-index: -1000;
  background-repeat: no-repeat;
}

.button-design:hover:before {
  top: -70%;
  background-image: radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, transparent 20%, #fff 20%, transparent 30%),
    radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%),
    radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, #fff 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
    10% 10%, 18% 18%;
  background-position: 50% 120%;
  animation: greentopBubbles 0.6s ease;
}

@keyframes greentopBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
      40% 90%, 55% 90%, 70% 90%;
  }

  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
      50% 50%, 65% 20%, 90% 30%;
  }

  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
      50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}

.button-design:hover::after {
  bottom: -70%;
  background-image: radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%),
    radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, #fff 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
  background-position: 50% 0%;
  animation: greenbottomBubbles 0.6s ease;
}

@keyframes greenbottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
      70% -10%, 70% 0%;
  }

  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
      105% 0%;
  }

  100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
      110% 10%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}

.menu-design {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 100px;
  background-color: #fff;
}

.menu-design img {
  width: 100%;
  max-width: 24px;
}

/* ----- [ menubar design ] ----- */

.menu {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu.active {
  opacity: 1;
  visibility: visible;
}

.left-design {
  width: 60%;
  background-color: #10271d;
  height: 100%;
  padding: 60px;
  transform: translateY(-100%);
  overflow-y: scroll;
}

.right-design {
  width: 40%;
  background-color: #ffff;
  height: 100%;
  padding: 60px;
  transform: translateY(100%);
}

.left-design .logo-data img {
  max-width: 200px;
  width: 100%;
}

.logo-data {
  display: inline-flex;
}

.close-btn {
  background-color: transparent;
  border: none;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.close-btn img {
  width: 100%;
  max-width: 30px;
}

.data-close {
  text-align: end;
}

.data-closed {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  color: #000;
  text-transform: uppercase;
  opacity: 0;
  top: 0;
  visibility: hidden;
  transition: 0.3s;
  transform: translateX(0px);
}

.close-btn:hover .data-closed {
  transition: 0.3s;
  transform: translateX(-10px);
  opacity: 1;
  visibility: visible;
}

.docts-responsive {
  display: none;
}

.data-btn {
  color: #ffff;
}

.data-page {
  width: 100%;
  padding: 100px;
}

.menu-ul {
  width: 100%;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  gap: 30px;
}

.menu-li {
  width: 100%;
  position: relative;
}

.menu-anhor {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.text-menu {
  font-size: 38px;
  font-weight: 700;
  line-height: 64px;
  color: #fff;
  transition: all 0.5s ease;
}

.menu-anhor:hover .text-menu {
  color: #9fd456;
  transition: all 0.5s ease;
}

.menu-anhor:hover i {
  color: #9fd456;
  transition: all 0.5s ease;
}

.menu-anhor i {
  font-size: 26px;
  color: #fff;
  display: inline-block;
  transition: transform 0.4s ease;
}

.under-menu-li {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 10px;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

.ander-li-achor {
  font-size: 24px;
  font-weight: 600;
  padding-left: 30px;
  line-height: 32px;
  color: #fff;
  transition: all 0.5s ease;
}

.ander-li-achor:hover {
  color: #9fd456;
  transition: all 0.5s ease;
}

.data-contact {
  height: 100%;
  padding-top: 100px;
}

.title-get-data {
  font-size: 36px;
  font-weight: 800;
  line-height: 48px;
  color: #000;
  margin-bottom: 15px;
}

.design-call {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 2px;
  margin-top: 20px;
}

.design-call p {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #717172;
}

.call-data {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #000;
  max-width: 200px;
  width: 100%;
}

.social-data-design {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.social-design {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: transparent;
  border-radius: 100px;
  border: 1px solid #000;
  transition: all 0.35s ease;
}

.social-design i {
  font-size: 20px;
  color: #10271d;
}

.social-design:hover {
  background-color: #10271d;
  transition: all 0.35s ease;
}

.social-design:hover i {
  color: #fff;
  transition: all 0.35s ease;
}

.data-main-contact {
  display: none;
  padding: 0 100px;
}

.mex-tilte {
  font-size: 36px;
  font-weight: 800;
  line-height: 48px;
  color: #fff;
}

.design-call-left {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 2px;
  margin-top: 20px;
}

.design-call-left p {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #717172;
}

.call-data-left {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #fff;
  max-width: 200px;
  width: 100%;
}

/* --------------------- [ hero Section Design ] --------------------- */
.bg-container {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0; /* CHANGED: Was 20px */
  max-width: 100%;
  width: 100%;
  padding: 0; /* CHANGED: Was 20px */
  margin: 0;
}

.left-data {
  width: 100%;
  background-color: #10271d;
  border-radius: 20px;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  position: relative;
}

.left-data::after {
  width: 100%;
  height: 100%;
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url(../images/hero/left-mask.png);
  background-position: left center;
  background-repeat: no-repeat;
}

.data-gap .data-hero-sport {
  padding: 0;
  width: calc(50% - 10px);
}

.data-gap .data-hero-sport-two {
  padding: 0;
  width: calc(50% - 10px);
}

.spect-data {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.spect-text {
  font-size: 24px;
  font-weight: 500;
  font-family: "Plus Jakarta Sans", sans-serif;
  line-height: normal;
  color: #fff;
}

.spect-data img {
  width: 100%;
  max-width: 100px;
}

.hero-title {
  font-size: 64px;
  font-weight: normal;
  line-height: 80px;
  color: #fff;
}

.hero-title span {
  font-weight: 800;
  color: #9fd456;
}

.hero-desc {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: #fff;
  margin-top: 40px;
  max-width: 730px;
}

.button {
  position: relative;
  padding: 15px 40px;
  border-radius: 30px;
  border: none;
  color: #fff;
  cursor: pointer;
  background-color: #9fd456;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 11;
  margin-top: 40px;
}

.btn-text {
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  color: #10271d;
  white-space: nowrap;
}

.button img {
  width: 100%;
  max-width: 30px;
}

.button:active {
  transform: scale(0.96);
}

.button:before,
.button:after {
  position: absolute;
  content: "";
  width: 100%;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
  z-index: 0;
  background-repeat: no-repeat;
}

.button:hover:before {
  top: -70%;
  background-image: radial-gradient(circle, #9fd456 20%, transparent 20%),
    radial-gradient(circle, transparent 20%, #9fd456 20%, transparent 30%),
    radial-gradient(circle, #9fd456 20%, transparent 20%),
    radial-gradient(circle, #9fd456 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #9fd456 15%, transparent 20%),
    radial-gradient(circle, #9fd456 20%, transparent 20%),
    radial-gradient(circle, #9fd456 20%, transparent 20%),
    radial-gradient(circle, #9fd456 20%, transparent 20%),
    radial-gradient(circle, #9fd456 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
    10% 10%, 18% 18%;
  background-position: 50% 120%;
  animation: greentopBubbles 0.6s ease;
}

@keyframes greentopBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
      40% 90%, 55% 90%, 70% 90%;
  }

  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
      50% 50%, 65% 20%, 90% 30%;
  }

  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
      50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}

.button:hover::after {
  bottom: -70%;
  background-image: radial-gradient(circle, #9fd456 20%, transparent 20%),
    radial-gradient(circle, #9fd456 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #9fd456 15%, transparent 20%),
    radial-gradient(circle, #9fd456 20%, transparent 20%),
    radial-gradient(circle, #9fd456 20%, transparent 20%),
    radial-gradient(circle, #9fd456 20%, transparent 20%),
    radial-gradient(circle, #9fd456 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
  background-position: 50% 0%;
  animation: greenbottomBubbles 0.6s ease;
}

@keyframes greenbottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
      70% -10%, 70% 0%;
  }

  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
      105% 0%;
  }

  100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
      110% 10%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}

.text-design-font {
  margin: auto;
  margin-top: 128px;
  width: 100%;
}

.text-font {
  font-size: 140px;
  font-weight: 800;
  line-height: 123px;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  background: linear-gradient(
    181deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgb(255 255 255 / 0%) 90%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShimmer 3s linear infinite;
}

@keyframes gradientShimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.data-left {
  padding: 100px;
  padding-top: 0;
  display: flex;
  align-items: start;
  justify-content: start;
  flex-direction: column;
  margin-top: -80px;
}

.right-data {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.right-data img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}

/* --------------------- [ services Section Design ] --------------------- */
.data-box-services {
  overflow: hidden;
  width: 100%;
  border-radius: 20px;
  background-color: #000;
}

.services {
  width: 100%;
  overflow: hidden;
  border-radius: 20px 20px 0px 0px;
  background-image: url(../home/hero2.avif);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  text-align: center;
}

.overlay-data {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.data-design-margin {
  margin-top: 300px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.main-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-design {
  padding: 7px 20px 7px 20px;
  border: 2px solid #888888;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.dot {
  width: 6px;
  height: 6px;
  background-color: #fff;
  border-radius: 20px;
}

.title-font {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: #888888;
}

.max-width-data {
  margin: auto;
  text-align: center;
  max-width: 980px;
  margin-bottom: 30px;
}

.title-font-sec {
  font-size: 48px;
  font-weight: normal;
  line-height: 64px;
  color: #fff;
}

.title-font-sec span {
  font-weight: 800;
}

.desc-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: #888888;
  max-width: 1070px;
  margin: auto;
  margin-bottom: 20px;
  text-align: center;
}

.services-boxes {
  background-color: #000;
  padding-bottom: 100px;
}

.boxdesign-services {
  background-color: #10271d;
  border-radius: 20px;
  display: flex;
  align-items: start;
  justify-content: start;
  padding: 40px;
  gap: 20px;
  flex-direction: column;
}

.boxdesign-services img {
  width: 100%;
  max-width: 100px;
}

.solar-services {
  font-size: 26px;
  font-weight: 700;
  line-height: 36px;
  color: #fff;
}

.solar-desc {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #888888;
}

.services-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border-radius: 30px;
  padding: 15px 40px;
  border: 3px solid #9fd456;
  width: 100%;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  color: #9fd456;
  transition: all 0.5s ease;
}

.services-btn img {
  width: 100%;
  max-width: 30px;
}

.services-btn:hover {
  transition: all 0.5s ease;
  color: #10271d;
  background-color: #fff;
  border: 3px solid #fff;
}

.services-btn:hover img {
  filter: brightness(0) saturate(100%) invert(10%) sepia(16%) saturate(1693%)
    hue-rotate(102deg) brightness(91%) contrast(91%);
}

.boxdesign-services-center {
  background-color: #ffff;
  border-radius: 20px;
  display: flex;
  align-items: start;
  justify-content: start;
  padding: 40px;
  gap: 20px;
  flex-direction: column;
}

.boxdesign-services-center img {
  width: 100%;
  max-width: 100px;
}

.solar-services-center {
  font-size: 26px;
  font-weight: 700;
  line-height: 36px;
  color: #10271d;
}

.solar-desc-center {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #888888;
}

.services-btn-center {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 30px;
  padding: 15px 40px;
  border: 3px solid #10271d;
  width: 100%;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  color: #10271d;
  transition: all 0.5s ease;
}

.services-btn-center img {
  width: 100%;
  max-width: 30px;
  filter: brightness(0) saturate(100%) invert(10%) sepia(16%) saturate(1693%)
    hue-rotate(102deg) brightness(91%) contrast(91%);
}

.services-btn-center:hover {
  transition: all 0.5s ease;
  color: #9fd456;
  background-color: #10271d;
  border: 3px solid #10271d;
}

.services-btn-center:hover img {
  filter: brightness(0) saturate(100%) invert(73%) sepia(4%) saturate(4766%)
    hue-rotate(43deg) brightness(101%) contrast(103%);
}

.box-services {
  row-gap: 30px;
  align-items: center;
  justify-content: center;
}

/* --------------------- [ About Section Design ] --------------------- */
.about-data {
  padding: 100px 0;
}

.about-detail {
  row-gap: 30px;
}

.box-data-design {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px solid #888888;
  padding: 7px 20px 7px 20px;
}

.dot-data {
  width: 6px;
  height: 6px;
  background-color: #000;
  border-radius: 20px;
}

.title-about {
  font-size: 48px;
  font-weight: normal;
  line-height: 64px;
  color: #888888;
  margin-top: 20px;
}

.title-about span {
  font-weight: 800;
}

.tile-data-about {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: #888888;
  margin-top: 30px;
  margin-bottom: 20px;
}

.margin-about {
  margin-top: 0;
  margin-bottom: 0;
}

.image-data-about {
  margin-top: 60px;
  position: relative;
}

.image-data-about img {
  width: 100%;
  max-width: 410px;
}

.data-experience {
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 50px;
  background-color: #fff;
  border: 5px solid #e7f0e9;
  width: 370px;
  position: absolute;
  bottom: 0;
  left: 30%;
}

.font-about-exper {
  position: relative;
  z-index: 0;
}

.font-exper {
  font-size: 160px;
  font-weight: 800;
  line-height: 160px;
  color: #10271d;
  width: 175px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rounded-about {
  background-color: #e7f0e9;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  position: absolute;
  right: -20%;
  top: -15%;
  z-index: -1;
}

.year-exper {
  position: absolute;
  right: -50%;
  top: 0%;
  z-index: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: #888888;
  max-width: 98px;
}

.deta-right-design {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  width: 100%;
  height: 100%;
  row-gap: 60px;
}

.experience-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.palate-exper-left {
  width: 330px;
  height: 330px;
  background-color: #fff;
  border: 2px solid #e7f0e9;
  border-radius: 200px;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.palate-exper-right {
  width: 330px;
  height: 330px;
  background-color: #fff;
  border: 2px solid #e7f0e9;
  border-radius: 200px;
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.palate-exper-bottom {
  width: 330px;
  height: 330px;
  background-color: #fff;
  border: 2px solid #e7f0e9;
  border-radius: 200px;
  z-index: 1;
  margin-top: 258px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.data-tpo {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
}

.data-bto {
  display: flex;
  align-items: center;
  justify-content: end;
  position: relative;
  width: 100%;
}

.data-bto img {
  width: 100%;
  max-width: 550px;
}

.subscribe-index {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 20px;
}

.mega-counter {
  font-size: 64px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  color: #10271d;
}

.descr-index {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: #888888;
}

/* --------------------- [ Appointment Section Design ] --------------------- */
.w-apoint {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.main-div-appoint {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  border-radius: 20px;
  padding: 250px 0;
  padding-bottom: 610px;
  transition: background-image 2s ease-in-out;
  animation: zoomEffect 35s linear infinite;
}

@keyframes zoomEffect {
  0% {
    transform: scale(1);
  }

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

.appoint-video {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  background-color: #9fd456;
  width: 140px;
  height: 140px;
  position: relative;
}

.appoint-video::before,
.appoint-video::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 0 0 #ffff;
  animation: button-ripple 3s infinite;
  opacity: 0.6;
  z-index: 0;
}

.appoint-video::after {
  animation-delay: 1.5s;
}

@keyframes button-ripple {
  0% {
    box-shadow: 0 0 0 0 #ffff;
    opacity: 0.6;
  }

  70% {
    box-shadow: 0 0 0 var(--glow-size, 25px) #ffff;
    opacity: 0;
  }

  100% {
    box-shadow: 0 0 0 0 #ffff;
    opacity: 0;
  }
}

.appoint-video img {
  width: 100%;
  max-width: 48px;
}

.appoint-ment-data {
  margin: auto;
  width: 100%;
  max-width: 1130px;
  text-align: center;
  margin-top: -360px;
}

.appoit-detail {
  width: 100%;
  background-color: #fff;
  border: 2px solid #e7f0e9;
  border-radius: 20px;
  box-shadow: 0px 10px 20px 4px rgba(16, 39, 29, 0.1);
  padding: 60px;
  position: relative;
  z-index: 11;
}

.title-desc {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: #888888;
  margin-top: 20px;
}

.main-appointment {
  margin-top: 40px;
  row-gap: 30px;
  justify-content: space-between;
}

.input-appoint {
  max-width: 490px;
  width: 100%;
  padding: 0;
}

.data-max {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: start;
  height: 100%;
  width: 100%;
}

.input-appoint input {
  border: 2px solid #e7f0e9;
  border-radius: 30px;
  background-color: #fff;
  padding: 15px;
  padding-left: 60px;
}

.property-detail {
  position: absolute;
  top: 13px;
  left: 15px;
}

.property-detail img {
  width: 100%;
  max-width: 30px;
}

.name-class {
  position: relative;
}

#ui-datepicker-div {
  display: none;
  background-color: #fff;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
  margin-top: 0.25rem;
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.ui-datepicker-calendar thead th {
  padding: 0.25rem 0;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 400;
  color: #10271d;
}

.ui-datepicker-calendar tbody td {
  width: 2.5rem;
  text-align: center;
  padding: 0;
}

.ui-datepicker-calendar tbody td a {
  display: block;
  border-radius: 0.25rem;
  line-height: 2rem;
  transition: 0.3s all;
  color: #10271d;
  font-size: 0.875rem;
  text-decoration: none;
}

.ui-datepicker-calendar tbody td a:hover {
  background-color: #10271d4f;
}

.ui-datepicker-calendar tbody td a.ui-state-active {
  background-color: #10271d;
  color: white;
}

.ui-datepicker-header a.ui-corner-all {
  cursor: pointer;
  position: absolute;
  top: 0;
  width: 2rem;
  height: 2rem;
  margin: 0.5rem;
  border-radius: 0.25rem;
  transition: 0.3s all;
}

.ui-datepicker-header a.ui-corner-all:hover {
  background-color: #eceff1;
}

.ui-datepicker-header a.ui-datepicker-prev {
  left: 0;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==");
  background-repeat: no-repeat;
  background-size: 0.5rem;
  background-position: 50%;
  transform: rotate(180deg);
}

.ui-datepicker-header a.ui-datepicker-next {
  right: 0;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==");
  background-repeat: no-repeat;
  background-size: 10px;
  background-position: 50%;
}

.ui-datepicker-header a > span {
  display: none;
}

.ui-datepicker-title {
  text-align: center;
  line-height: 2rem;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  padding-bottom: 0.25rem;
}

.ui-datepicker-week-col {
  color: #ea1c29;
  font-weight: 400;
  font-size: 0.75rem;
}

.date-design {
  width: 100%;
  position: relative;
}

.data-relative img {
  max-width: 24px;
  width: 100%;
  filter: brightness(0) saturate(100%) invert(10%) sepia(11%) saturate(1925%)
    hue-rotate(176deg) brightness(97%) contrast(100%);
}

.data-relative {
  position: absolute;
  display: flex;
  justify-content: start;
  gap: 10px;
  top: 42px;
  padding-left: 5px;
}

.data-relative p {
  font-size: 16px;
  font-weight: 500;
  color: #0e121d;
  line-height: normal;
}

.appoint-ment form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 25px;
}

.select-home {
  width: 100%;
  border: 2px solid #e7f0e9;
  border-radius: 30px;
  background-color: #fff;
  padding: 15px;
  padding-left: 60px;
  color: #888888;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.select-home:focus {
  outline: none;
  border-color: #e7f0e9;
}

.down-btn {
  position: absolute;
  right: 20px;
  top: 17px;
}

.down-btn img {
  width: 100%;
  max-width: 24px;
}

.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.no-spinner[type="number"] {
  -moz-appearance: textfield;
}

.input-appoint-data {
  padding: 0;
}

.textarea-box {
  width: 100%;
  border: 2px solid #e7f0e9;
  border-radius: 30px;
  background-color: #fff;
  padding: 15px;
  padding-left: 60px;
  color: #888888;
  max-height: 60px;
}

textarea {
  resize: none;
}

.butn-submit {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------- [ Why choose us Section Design ] --------------------- */
.data-why {
  align-items: end;
  row-gap: 30px;
  justify-content: end;
}

video {
  width: 100%;
  height: 100%;
}

.video-data {
  width: 100%;
  max-height: 275px;
  overflow: hidden;
}

.why-choose-desc {
  margin-bottom: 0px;
}

.why-choose-data {
  margin-top: 60px;
  align-items: start;
  justify-content: center;
  row-gap: 30px;
}

.why-detail-area {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 15px;
  flex-direction: column;
}

.top-tilte {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 15px;
  width: 100%;
}

.top-tilte img {
  width: 100%;
  max-width: 40px;
}

.title-top {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #10271d;
}

.title-desc-why {
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
  color: #888888;
}

/* --------------------- [ Our Success Section Design ] --------------------- */
.success-detail {
  margin: auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.design-slick-succes-main {
  display: flex;
  padding-top: 60px;
  align-items: center;
  justify-content: center;
}

.success-data-design {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 20px;
}

.image-data-succes {
  overflow: hidden;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.image-data-succes img {
  width: 100%;
  object-fit: cover;
}

.overlay-succes {
  position: absolute;
  bottom: 10px;
  width: 95%;
  border-radius: 10px;
  background-color: #fff;
  padding: 20px;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  transition: all 0.35s ease-in-out;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}

.image-data-succes:hover .overlay-succes {
  transform: translateY(0px);
  opacity: 1;
  visibility: visible;
}

.sucess-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 36px;
  color: #10271d;
  margin-bottom: 10px;
}

.success-desc {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #888888;
}

.data-sucess {
  margin-top: 20px;
}

.slick-slide {
  margin: 0 15px;
}

/* --------------------- [ Testimonial Section Design ] --------------------- */
.testimonial-main {
  padding-top: 60px;
}

.image-data-test {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 20px;
  height: 100%;
}

.client-says {
  display: flex;
  align-items: center;
  justify-content: start;
  width: 100%;
  border-radius: 20px;
  background-color: #e7f0e9;
  padding: 60px;
  position: relative;
  overflow: hidden;
  background-image: url(../images/testimonial/trac-bg.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-blend-mode: luminosity;
}

.main-testimonail-data {
  width: 100%;
  display: flex;
  align-items: start;
  justify-content: start;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.star-data {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.star-data img {
  width: 100%;
  max-width: 24px;
}

.client-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
  color: #10271d;
  margin-top: 20px;
}

.client-desc {
  font-size: 26px;
  font-weight: 500;
  line-height: 40px;
  color: #10271d;
  margin-top: 40px;
}

.message-data {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  margin-top: 60px;
}

.message-data img {
  width: 100%;
  max-width: 80px;
}

.message-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  color: #10271d;
}

.testimonial-detail {
  width: 100%;
}

.slick-dots {
  display: flex;
  justify-content: end;
  gap: 10px;
  margin-top: -18px;
  align-items: center;
  position: relative;
  z-index: 11;
}

.slick-dots li button {
  width: 10px;
  height: 10px;
  border-radius: 50px;
  background: #888888;
  border: none;
  color: #fff;
  font-size: 0;
  display: flex;
  padding: 0;
  align-items: center;
  justify-content: center;
}

li.slick-active button {
  background: #10271d;
  mix-blend-mode: normal;
}

li.slick-active {
  width: 20px;
  height: 19px;
  border-radius: 50px;
  border: 2px solid #10271d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-testimonail-slide {
  width: 100%;
  height: 100%;
}

.image-testimonail-slide .slick-list {
  height: 100%;
}

.image-testimonail-slide .slick-track {
  height: 100%;
}

/* --------------------- [ Working Prosess Section Design ] --------------------- */
.work-data {
  background-color: #e7f0e9;
}

.prosess-main-data {
  row-gap: 30px;
}

.work-detail {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  height: 100%;
}

.image-prosess {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 240px;
  margin: auto;
  border-radius: 100%;
  overflow: hidden;
}

.image-prosess img {
  width: 100%;
  object-fit: cover;
}

.proses-detail {
  width: 100%;
  padding: 15px;
  padding-top: 55px;
  box-shadow: 0px 30px 25px -20px rgba(16, 39, 29, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #fff;
  position: relative;
  margin-top: -60px;
}

.number-proses {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #9fd456;
  color: #fff;
  width: 80px;
  height: 80px;
  font-size: 36px;
  font-weight: 700;
  line-height: 36px;
  border-radius: 100px;
  position: absolute;
  top: -18%;
}

.title-proses {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #10271d;
}

.prosess-desc {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #888888;
  margin-top: 10px;
}

.prosess-call {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  row-gap: 30px;
}

.data-call-proses {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.prosess-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: #fff;
  border-radius: 100px;
}

.prosess-image img {
  width: 100%;
  max-width: 30px;
}

.prosess-call-detail {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
}

.prog-main {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #10271d;
}

.mailup {
  font-size: 20px;
  font-weight: 700;
  line-height: 36px;
  color: #10271d;
}

/* --------------------- [ Team Members Section Design ] --------------------- */
.team-all {
  row-gap: 80px;
}

.data-team-biggest {
  padding-bottom: 65px;
}

.team-data {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  position: relative;
}

.image-team-data {
  width: 100%;
  overflow: hidden;
}

.image-team-data img {
  width: 100%;
  object-fit: cover;
}

.data-team {
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  color: #fff;
  margin-bottom: 5px;
}

.box-content {
  position: absolute;
  bottom: -15%;
  display: flex;
  padding: 20px;
  background-color: #10271d;
  transition: 0.4s ease-in-out;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 260px;
  border-bottom: 6px solid transparent;
}

.th-social {
  visibility: hidden;
  opacity: 0;
  margin-top: 0;
  line-height: 0;
  max-height: 0;
  transition: 0.4s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.box-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #888888;
}

.team-data:hover .th-social {
  margin-top: 20px;
  visibility: visible;
  opacity: 1;
  max-height: 60px;
}

.team-data:hover .box-content {
  bottom: -22%;
  border-bottom: 6px solid #9fd456;
}

.th-social a {
  background-color: #fff;
  color: #10271d;
  box-shadow: 0px 20px 40px rgba(2, 29, 53, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  line-height: normal;
  background-color: #e7f0e9;
  font-size: 20px;
  text-align: center;
  text-decoration: none;
  border-radius: 100px;
}

.th-social a:hover {
  background-color: #9fd456;
  color: #10271d;
  transition: 0.3s all ease-in-out;
}

/* --------------------- [ FAQ Section Design ] --------------------- */
.data-flow {
  max-width: 410px;
}

.faq-container {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.faq-item {
  background: #fff;
  margin-bottom: 15px;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.faq-question {
  cursor: pointer;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  background: #fff;
  justify-content: space-between;
}

.faq-answer {
  display: none;
  padding: 20px;
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: #888888;
}

.faq-question i {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-question p {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #10271d;
}

.line-faq {
  width: 100%;
  max-width: 690px;
  margin: 0 20px;
  height: 2px;
  display: none;
  background-color: #e7f0e9;
}

.faq-question img {
  width: 100%;
  max-width: 30px;
}

.closed-data {
  position: relative;
}

.data-close-faq {
  display: none;
}

/* --------------------- [ Bloge Section Design ] --------------------- */
.blog-data {
  row-gap: 30px;
}

.blog-detail {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;
  transition: all 0.5s ease-in;
}

.image-blog {
  width: 100%;
  overflow: hidden;
  border-radius: 15px;
}

.image-blog img {
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-detail:hover .image-blog img {
  opacity: 1;
  transform: scale(1.02);
  -webkit-animation: flash 1.5s;
  animation: flash 1.5s;
}

@keyframes flash {
  0% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
}

.date-time {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 40px;
  padding: 20px 0;
}

.blog-date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.blog-date img {
  width: 100%;
  max-width: 24px;
}

.blog-date-font {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: #888888;
}

.blog-line {
  width: 100%;
  height: 2px;
  background-color: #e7f0e9;
}

.blog-title {
  font-size: 23px;
  font-weight: 500;
  line-height: 36px;
  color: #10271d;
  padding-top: 20px;
  padding-bottom: 15px;
  width: 100%;
}

.blog-desc {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #888888;
}

.blog-sec {
  padding-bottom: 255px;
}

/* --------------------- [ Footer Section Design ] --------------------- */
.footer {
  background-color: #000000;
  padding: 100px 0;
  padding-bottom: 40px;
}

.footer-appointment-data {
  background-color: #10271d;
  overflow: hidden;
  border-radius: 20px;
  padding: 60px;
  background-image: url(../images/footer/frame-top.png);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: normal;
  margin-top: -355px;
}

.footer-top {
  row-gap: 30px;
}

.data-footer-left-appoint {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
}

.left-apooitn {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: #fff;
}

.last-title {
  font-size: 48px;
  font-weight: normal;
  line-height: 64px;
  color: #fff;
  margin-top: 10px;
  margin-bottom: 20px;
}

.last-title span {
  color: #9fd456;
  display: inline;
}

.dotter {
  font-weight: 800;
  display: contents;
}

.last-desc {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: #888888;
}

.last-btn {
  display: flex;
  align-items: center;
  justify-items: start;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  padding-right: 90px;
  margin-top: 40px;
  gap: 10px;
}

.last-btn img {
  width: 100%;
  max-width: 60px;
}

.tele-data {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
}

.tele-data span {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #888888;
}

.tele-data p {
  font-size: 20px;
  font-weight: 700;
  line-height: 36px;
  color: #10271d;
}

.last-image-data {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
}

.last-image-data img {
  width: 100%;
  object-fit: cover;
}

.footer-main {
  padding-top: 100px;
  row-gap: 30px;
}

.left-main-footer {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
}

.main-footer-desc {
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  color: #888888;
  margin-top: 20px;
  margin-bottom: 30px;
}

.social-footer {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: #fff;
  margin-bottom: 15px;
}

.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.social-data-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: #ffffff33;
  color: #888888;
  border-radius: 100px;
  font-size: 22px;
  line-height: normal;
  transition: all 0.5s ease-in;
}

.social-data-footer:hover {
  background-color: #9fd456;
  color: #10271d;
  transition: all 0.5s ease-in;
}

.line-footer-center {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}

.center-footer-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: #fff;
}

.footer-ul {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
}

.footer-li a {
  font-size: 18px;
  font-weight: 500;
  line-height: 36px;
  color: #888888;
  transition: all 0.5s ease-in;
}

.footer-li a:hover {
  color: #fff;
  transition: all 0.5s ease-in;
}

.last-data-footer {
  background-color: #9fd456;
  padding: 30px;
  padding-bottom: 60px;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  border-radius: 10px;
}

.data-contact-footer {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  margin-bottom: 20px;
}

.data-flex-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 15px;
  gap: 10px;
}

.data-flex-footer img {
  width: 100%;
  max-width: 24px;
}

.data-flex-footer p {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #10271d;
}

.last-main-data {
  position: relative;
}

.data-appoint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 20px;
  gap: 10px;
  padding: 15px 40px;
  border-radius: 30px;
  background-color: #10271d;
  position: absolute;
  bottom: -30px;
}

.data-appoint img {
  width: 100%;
  max-width: 30px;
}

.data-appoint p {
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  color: #fff;
}

.copy-right {
  padding-top: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dato-copy {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #888888;
}

.dato-copy a {
  color: #888888;
  transition: all 0.5s ease-in;
}

.dato-copy a:hover {
  color: #fff;
  transition: all 0.5s ease-in;
}

.data-bottm-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
}

.data-bottm-text p {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #888888;
}

/* ------------------------ [ Loader Section Start ] */
.preloader {
  position: fixed;
  background-color: #10271d;
  background-position: center center;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  text-align: center;
}

.loader img {
  width: 60px;
  animation: spin 5s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ------------------------ [ hero section all separate section ] */
.services-home-hero {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  background-image: url(../services/hero.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 20px;
  padding: 140px 100px;
  position: relative;
}

.desck-about {
  background-image: url(../aboutus/hero.png);
}

.services-home-hero::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

.title-of-hero {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  gap: 30px;
  position: relative;
  z-index: 1;
}

.title-of-hero p {
  font-size: 64px;
  font-weight: 800;
  line-height: 80px;
  color: #fff;
}

.title-of-hero span {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
}

.title-of-hero a {
  color: #fff;
}

.services-separate .title-about {
  max-width: 980px;
  width: 100%;
  margin: auto;
  text-align: center;
  margin-top: 20px;
}

.separte-desc {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: #888888;
  margin: auto;
  max-width: 1070px;
  margin-top: 30px;
}

.services-boxe .boxdesign-services-center {
  background-color: #e7f0e9;
}

.services-boxe .boxdesign-services-center .services-btn-center {
  background-color: #e7f0e9;
}

.services-boxe .boxdesign-services-center .services-btn-center:hover {
  transition: all 0.5s ease;
  color: #9fd456;
  background-color: #10271d;
  border: 3px solid #10271d;
}

.padding-sucess {
  padding-bottom: 100px;
}

.data-sevices-sec {
  row-gap: 30px;
  align-items: center;
  justify-content: center;
}

.services-sec {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;
}

.services-image {
  overflow: hidden;
  width: 100%;
  border-radius: 20px;
}

.services-image img {
  width: 100%;
  object-fit: cover;
}

.services-second-text {
  padding: 0 30px;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  margin-top: -50px;
}

.box-data-services {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 20px;
  background-color: #10271d;
}

.box-data-services img {
  width: 100%;
  max-width: 80px;
}

.services-sec-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 36px;
  color: #10271d;
  margin-top: 30px;
}

.services-sec-desc {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #888888;
  margin-top: 10px;
}

.services-second-text .button {
  margin-top: 30px;
}

.services-padding-data {
  padding: 100px;
  width: 100%;
  height: 100%;
  background-image: url(../services/hero3.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  padding-bottom: 265px;
}

.services-padding-data::after {
  content: "";
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

.services-main-separate {
  align-items: center;
  justify-content: start;
  position: relative;
  z-index: 1;
}

.over-services-seprate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 20px;
  gap: 10px;
  border: 2px solid #fff;
}

.over-services-seprate .dovt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6px;
  height: 6px;
  border-radius: 20px;
  background-color: #fff;
}

.over-services-seprate p {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
}

.second-services-data-title {
  color: #fff !important;
}

.services-about {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-top: 40px;
  gap: 30px;
}

.services-about-image {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 120px;
  height: 120px;
  width: 100%;
  background-color: #9fd456;
  border-radius: 20px;
}

.services-about-image img {
  width: 100%;
  max-width: 80px;
}

.data-detail-service {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}

.data-detail-service p {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #fff;
}

.data-detail-service span {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: #fff;
}

.design-sec-exper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: -165px;
  position: relative;
}

.over-exper-sec {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 330px;
  height: 330px;
  background-color: #fff;
  border-radius: 100%;
  border: 2px solid #e7f0e9;
}

.data-detail-services-main {
  width: 100%;
}

.ander-data-detail-main {
  display: flex;
  align-items: center;
  gap: 30px;
  justify-content: start;
  margin-bottom: 20px;
}

.main-image-ander {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: #10271d;
  border-radius: 10px;
}

.main-image-ander img {
  width: 100%;
  max-width: 60px;
}

.services-detail-title {
  font-size: 40px;
  font-weight: 800;
  line-height: 64px;
  color: #10271d;
}

.detail-desc {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: #888888;
}

.main-services-iomages {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  margin: 40px 0;
}

.main-services-iomages img {
  width: 100%;
  object-fit: cover;
}

.services-detail-title-sec {
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
  color: #10271d;
  margin-top: 40px;
  margin-bottom: 20px;
}

.image-services-sec-data {
  overflow: hidden;
  border-radius: 20px;
  width: 48%;
}

.image-services-sec-data img {
  width: 100%;
  object-fit: cover;
}

.image-scroll-services {
  margin: 40px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.prosess-over-services {
  margin-top: 30px;
  margin-bottom: 40px;
  justify-content: space-between;
  row-gap: 15px;
}

.service-ul {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;
  gap: 15px;
}

.services-li {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 10px;
  width: 100%;
}

.services-li img {
  width: 100%;
  max-width: 30px;
}

.services-li p {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: #10271d;
}

.data-all-services-contact {
  width: 100%;
}

.all-services-box {
  background-color: #e7f0e9;
  padding: 30px;
  border-radius: 20px;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  gap: 30px;
  width: 100%;
}

.serives-title-detail-box {
  font-size: 26px;
  font-weight: 800;
  line-height: 36px;
  color: #10271d;
}

.all-box-services {
  width: 100%;
  gap: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.all-services-box li {
  width: 100%;
}

.services-box-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: #fff;
  padding: 15px 30px;
  border-radius: 30px;
  transition: all 0.5s ease-in;
}

.services-box-link p {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: #10271d;
}

.services-box-link i {
  font-size: 26px;
  line-height: normal;
  color: #10271d;
}

.services-box-link:hover {
  background-color: #9fd456;
  transition: all 0.5s ease-in;
}

.data-all-services-contact {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  gap: 60px;
}

.all-contact p {
  font-size: 26px;
  font-weight: 800;
  line-height: 36px;
  color: #10271d;
}

.all-contact {
  width: 100%;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  gap: 30px;
}

.data-input-service {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.service-hight {
  max-height: 120px;
}

.input-submit {
  display: inline-flex;
  text-align: left;
  width: 100%;
}

.company-pro {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  background-color: #e7f0e9;
  border-radius: 20px;
  padding: 30px;
  width: 100%;
}

.data-spect {
  font-size: 26px;
  font-weight: 800;
  line-height: 36px;
  color: #10271d;
}

.data-overan {
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  color: #10271d;
  margin-top: 20px;
}

.data-services-detail {
  row-gap: 30px;
}

.data-input-service .input-appoint {
  width: 100% !important;
  max-width: 100% !important;
}

.about-detail-data {
  row-gap: 30px;
  align-items: start;
  justify-content: center;
}

.all-left-about {
  width: 100%;
}

.only-image-about {
  width: 100%;
  margin-top: 30px;
}

.only-image-about img {
  width: 100%;
  object-fit: cover;
}

.all-right-about {
  width: 100%;
}

.about-detail-desc {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: #888888;
  margin-top: 30px;
}

.data-about-ul {
  margin-top: 30px;
  row-gap: 20px;
}

.stoped-btn-about {
  margin-top: 30px;
}

.medal-about {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
}

.box-medal {
  width: 100%;
  max-width: 220px;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  background-color: #fff;
  box-shadow: 0px 10px 20px 0px rgba(16, 39, 29, 0.1);
  border-top: 4px solid #10271d;
  padding: 20px;
  gap: 15px;
  text-align: left;
}

.box-medal img {
  width: 100%;
  max-width: 60px;
}

.box-medal p {
  font-size: 20px;
  font-weight: 600;
  line-height: 36px;
  color: #10271d;
}

.team-sec-detail {
  row-gap: 100px;
}

.team-card {
  overflow: hidden;
  position: relative;
  border-radius: 25px;
  border: 1px solid #e0e0e0;
}

.team-card::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}

.team-image {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  padding-bottom: 103%;
}

.team-image img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.6s cubic-bezier(0.21, 0, 0.01, 0.98);
}

.team-content {
  position: relative;
  display: flex;
  padding: 25px;
  align-items: start;
  justify-content: center;
  gap: 0px;
  flex-direction: column;
}

.name {
  font-size: 24px;
  font-weight: 700;
  color: #10271d;
  text-transform: capitalize;
  transition: all 0.35s ease-in;
}

.team-item-socials {
  position: absolute;
  width: 104px;
  left: 8.5%;
  bottom: calc(100% - 15px);
  z-index: 2;
  text-align: center;
  pointer-events: none;
}

.socials-trigger-wrapper {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  cursor: pointer;
  margin: 0 19px;
  border-radius: 50px 50px 0 0;
  background-color: #ffffff;
}

.socials-trigger-wrapper::before {
  right: calc(100% - 1px);
  border-bottom-right-radius: 20px;
  content: "";
  position: absolute;
  background-color: transparent;
  bottom: 15px;
  height: 40px;
  width: 20px;
  box-shadow: 0 20px 0 0 #ffffff;
}

.socials-trigger-wrapper:after {
  content: "";
  position: absolute;
  background-color: transparent;
  bottom: 15px;
  height: 40px;
  box-shadow: 0 20px 0 0 #ffffff;
  left: calc(100% - 1px);
  border-bottom-left-radius: 20px;
  width: 20px;
}

.socials-trigger-wrapper i {
  height: 50px;
  width: 50px;
  line-height: 50px;
  margin: 8px 8px 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  border-radius: 50px;
  background-color: #10271d;
  color: #ffffff;
}

.social-team {
  max-width: 50px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50px;
  pointer-events: auto;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
  transform: translateY(100%);
  padding: 15px;
  position: relative;
  max-width: 100%;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.01, 0.98);
  background-color: #10271d;
  border-radius: 15%;
}

.team-card:hover .social-icon {
  transform: translateY(0%);
}

.social-icon a {
  text-decoration: none;
  color: #ffffff;
}

.social-icon a:hover {
  color: #9fd456;
  transition: all 0.4s ease;
}

.team-content span {
  font-size: 16px;
  font-weight: 500;
  color: #888888;
}

.team-sec-deta {
  row-gap: 30px;
}

.team-detail-scoot {
  border: 2px solid #e7f0e9;
  border-radius: 20px;
  padding: 60px;
  row-gap: 30px;
}

.detail-image-team {
  overflow: hidden;
  border-radius: 10px;
  width: 100%;
}

.detail-image-team img {
  width: 100%;
  object-fit: cover;
}

.desc-team {
  width: 100%;
}

.name-of-all {
  width: 100%;
  display: flex;
  align-items: start;
  justify-content: space-between;
}

.name-of-expert-detail {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
}

.name-of-expert-detail p {
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
  color: #10271d;
}

.name-of-expert-detail span {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: #888888;
}

.social-icon-team {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.social-icon-team a {
  width: 44px;
  height: 44px;
  background-color: #e7f0e9;
  color: #10271d;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-in;
  font-size: 20px;
}

.social-icon-team a:hover {
  background-color: #10271d;
  color: #9fd456;
}

.team-about {
  margin-top: 30px;
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: #888888;
}

.info-card {
  border: 2px solid #e7f0e9;
  border-radius: 20px;
  margin-top: 60px;
}

.data-four {
  padding: 20px;
  gap: 12px;
}

.border-data {
  border-bottom: 2px solid #e7f0e9;
  border-right: 2px solid #e7f0e9;
}

.border-data-sec {
  border-bottom: 2px solid #e7f0e9;
}

.border-data-right {
  border-right: 2px solid #e7f0e9;
}

.design-boder-width {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: #e7f0e9;
  border-radius: 100px;
}

.design-boder-width img {
  width: 100%;
  max-width: 24px;
}

.design-name-of-team {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
}

.design-name-of-team p {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #888888;
}

.design-name-of-team .doctef {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: #10271d;
}

.data-very-team {
  row-gap: 30px;
}

.data-noial {
  width: 100%;
}

.team-title-single {
  font-size: 36px;
  font-weight: 800;
  line-height: 48px;
  color: #10271d;
  margin-bottom: 20px;
}

.team-title-single span {
  font-weight: normal;
}

.dattitle-single {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: #888888;
}

.data-progress-single-design {
  margin-top: 30px;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 30px;
}

.skill-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  gap: 10px;
}

.skill-box.active {
  border: 2px solid #007bff;
}

.skill-title {
  font-weight: bold;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.skill-percent {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(0);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #888888;
  transition: transform 0.3s ease, opacity 0.5s ease;
  display: inline-block;
}

.progress {
  height: 8px;
  background: #e5efe7;
  border-radius: 0px;
  overflow: hidden;
  padding: 2px;
  width: 100%;
}

.progress-bar {
  height: 100%;
  width: 0;
  background: #8bc34a;
  transition: width 1.5s ease;
}

.team-data-bg {
  background-image: url(../images/hero/image-data-about-1.png);
}

.princing-data {
  background-image: url(../images/hero/image-data-about-2.png);
}

.fax-bg {
  background-image: url(../images/hero/image-data-about-3.png);
}

.princing-main {
  row-gap: 30px;
}

.princing-detail {
  width: 100%;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  padding: 30px;
  border-radius: 20px;
  background-color: #e7f0e9;
}

.plan-name {
  font-size: 26px;
  font-weight: 700;
  line-height: 36px;
  color: #10271d;
  margin-bottom: 10px;
}

.plan-desc {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #888888;
}

.line-plan {
  margin: 30px 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
}

.plan-sub {
  font-size: 48px;
  font-weight: 700;
  line-height: 64px;
  margin-bottom: 30px;
  color: #10271d;
}

.plan-sub span {
  font-size: 20px;
  font-weight: 500;
  line-height: 48px;
}

.plan-ul {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
}

.plan-li {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 10px;
}

.plan-li img {
  width: 100%;
  max-width: 30px;
}

.plan-point {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: #10271d;
}

.point-data-min {
  color: #888888;
}

.plan-btn {
  margin-top: 30px;
  background-color: #e7f0e9;
}

.center-data {
  background-color: #10271d;
}

.center-paln {
  color: #fff;
}

.sub-palnesd {
  color: #fff;
}

.colo-nam-plan {
  color: #fff;
}

.plan-btn-sec {
  background-color: #10271d;
  margin-top: 30px;
}

.question-design {
  width: 100%;
  max-width: 410px;
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;
  gap: 10px;
}

.question-design-li {
  display: flex;
  align-items: center;
  justify-content: start;
  background-color: #e7f0e9;
  gap: 10px;
  padding: 20px;
  width: 100%;
  border-radius: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.question-design-li p {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  transition: all 0.3s ease;
  color: #10271d;
}

.question-design-li img {
  width: 100%;
  max-width: 36px;
  transition: opacity 0.3s ease;
}

.image-data-faq {
  position: relative;
}

.sec-faq-image {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.first-faq-image {
  display: block;
}

.question-design-li:hover {
  background-color: #10271d;
}

.question-design-li:hover p {
  color: #fff;
}

.question-design-li:hover .first-faq-image {
  opacity: 0;
}

.question-design-li:hover .sec-faq-image {
  opacity: 1;
}

.question-design-li.active {
  background-color: #10271d;
}

.question-design-li.active p {
  color: #fff;
}

.question-design-li.active .first-faq-image {
  opacity: 0;
}

.question-design-li.active .sec-faq-image {
  opacity: 1;
}

.sepatrat-faq {
  border: 2px solid #e7f0e9;
  border-radius: 10px;
}

.faq-container-seprate {
  margin-top: 0;
}

.faq-data-main {
  row-gap: 30px;
}

.testimonial-seprate {
  row-gap: 30px;
}

.seprate-test {
  width: 100%;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  border-radius: 20px;
  background-color: #e7f0e9;
  padding: 30px;
}

.review-data {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 8px;
}

.title-seprate {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #10271d;
  margin: 20px 0;
}

.desc-title-testimonial {
  font-size: 20px;
  font-weight: 500;
  line-height: 36px;
  color: #10271d;
}

.last-ntesti {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-top: 60px;
  gap: 15px;
}

.last-ntesti img {
  width: 100%;
  max-width: 48px;
}

.last-ntesti p {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #10271d;
}

.data-spot-testimonial {
  margin: auto;
  text-align: center;
}

.load-more {
  cursor: pointer;
  margin-top: 0;
}

.seprate-test {
  display: none;
}

.testimonial-bg {
  background-image: url(../images/hero/image-data-about-4.png);
}

.error-bg {
  background-image: url(../images/hero/image-data-about-5.png);
}

.error-text {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.image-four img {
  width: 100%;
  max-width: 400px;
}

.round-image img {
  width: 100%;
  max-width: 500px;
}

.rotate-error-1 {
  position: absolute;
  left: 10%;
  animation: smooth-left-right 5s ease-in-out infinite alternate;
}

.rotate-error-2 {
  position: absolute;
  right: 10%;
  z-index: -1;
  animation: smooth-right-left 5s ease-in-out infinite alternate;
}

@keyframes smooth-left-right {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(40px);
  }
}

@keyframes smooth-right-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-40px);
  }
}

.error-text-desxc {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: #888888;
  margin-top: 20px;
  text-align: center;
}

.error-btn {
  margin-top: 0;
}

.data-project-1 {
  display: none;
}

.data-project-btn {
  margin-top: -30px;
}

.hero-data-bottom {
  padding-bottom: 0px;
}

.project-two {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  overflow: hidden;
}

.project-image {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.project-image img {
  width: 100%;
  object-fit: cover;
  transition-delay: 0.1s;
  transition-timing-function: ease-in-out;
  transition-duration: 0.7s;
  transition-property: all;
}

.overlay-project {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.12, 0, 0.39, 0);
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.714) 0,
    #0000002c 100% 100%
  );
  height: 100%;
  transition-delay: 0.1s;
  transition-timing-function: ease-in-out;
  transition-duration: 0.7s;
  transition-property: all;
}

.project-two:hover .overlay-project {
  opacity: 1;
}

.pro-detail {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(10px);
  width: 90%;
  height: 90%;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 20px;
  transition: all 0.7s ease-in-out;
  backdrop-filter: blur(5px);
  background-color: #ffffff1c;
  border-radius: 20px;
}

.project-two:hover .pro-detail {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}

.project-title-two {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: #9fd456;
  margin-bottom: 10px;
}

.project-desc-two {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
}

.project-two {
  display: none;
}

/* --------------------- slider */
.split-slideshow {
  position: relative;
  height: 100vh;
}

.slideshow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.slideshow .slider {
  width: 100vw;
  height: 100vh;
}

.slideshow .item {
  width: 100% !important;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.slideshow .item img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
}

/* Right mirrored slideshow (narrow) */
.slideshow-right {
  left: 0;
  z-index: 1;
  width: 50vw;
  pointer-events: none;
}

.slideshow-right .slider {
  position: absolute;
  left: 0;
}

/* Center big text */
.slideshow-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  font-size: 78px;
  width: 100%;
  text-align: center;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 15px;
  line-height: 0.9;
}

.slideshow-text a {
  color: #fff;
}

/* small credit badge */
.the-most {
  position: fixed;
  z-index: 150;
  bottom: 0;
  left: 0;
  width: 50vw;
  max-width: 200px;
  padding: 10px;
}

.the-most img {
  max-width: 100%;
  display: block;
}

.dowing-seted .slick-vertical .slick-slide {
  border: none;
}

.dowing-seted .slick-slide {
  margin: 0;
}

.dowing-seted .slick-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: -50px;
  align-items: center;
  position: relative;
  z-index: 11;
}

.dowing-seted li.slick-active {
  width: 20px;
  height: 19px;
  border-radius: 50px;
  border: 2px solid #ffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dowing-seted li.slick-active button {
  background: #fff;
  mix-blend-mode: normal;
}

.dowing-seted .slick-dots li button {
  background: #ffff;
}

.project-3-color {
  background-color: transparent;
}

#main {
  display: flex;
}

#main .part {
  flex: 1;
}

#main .part .section {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

#main .part .section img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: absolute;
  left: var(--x);
  pointer-events: none;
}

.project-four-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  font-size: 35px;
  width: 100%;
  text-align: center;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 5px;
  line-height: 0.8;
}

.about-seprate-detail {
  row-gap: 30px;
  justify-content: center;
}

.separte-about {
  margin-top: 20px;
}

.about-slider-design {
  border-radius: 20px;
  overflow: hidden;
}

.about-slider-design img {
  width: 100%;
}

.deright-sport {
  margin-top: 20px;
  margin-bottom: 40px;
}

.deright-sport .slick-slide {
  margin: 0 7px;
}

.foren-about {
  margin-top: 20px;
}

.data-about-setedf {
  row-gap: 15px;
  margin-top: 30px;
}

.about-text-spotry {
  font-size: 24px;
  font-weight: 500;
  line-height: 36px;
  color: #10271d;
}

.all-box-about {
  width: 100%;
  gap: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.all-box-about .lock-about {
  width: 100%;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  background-color: #fff;
  padding: 15px 30px;
  gap: 6px;
  border-radius: 20px;
  transition: all 0.5s ease-in;
}

.lock-about span {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #888888;
}

.lock-about p {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: #10271d;
}

.pro-detail-bg {
  background-image: url(../images/hero/image-data-about-6.png);
}

.main-location iframe {
  border-radius: 20px;
  width: 100%;
}

.main-location {
  width: 100%;
}

.contatc-title {
  font-size: 40px;
  font-weight: 800;
  line-height: 64px;
  color: #10271d;
}

.contact-desc {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: #888888;
}

.contact-data-image {
  width: 100%;
  overflow: hidden;
  margin-top: 30px;
  border-radius: 20px;
}

.contact-data-image img {
  width: 100%;
  object-fit: cover;
}

.data-contact-left {
  margin: auto;
  width: 90%;
  background-color: #10271d;
  border-radius: 20px;
  padding: 30px;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  margin-top: -60px;
  position: relative;
  z-index: 1;
}

.contatc-name {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: #fff;
}

.name-contact {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.contact-anchor {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: start;
  gap: 10px;
}

.contact-anchor p {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #fff;
}

.left-contact {
  width: 100%;
}

.right-contact {
  width: 100%;
  background-color: #e7f0e9;
  border-radius: 20px;
  padding: 30px;
}

.right-contact-desc {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: #10271d;
  margin-top: 10px;
}

.contact-rowed {
  margin-top: 30px;
  row-gap: 20px;
  justify-content: space-between;
}

.input-appoint-beat {
  padding: 0;
  max-width: 385px;
}

.input-appoint-beat input {
  border: 2px solid #e7f0e9;
  border-radius: 30px;
  background-color: #fff;
  padding: 15px;
  padding-left: 60px;
}

.butn-submit-left {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-top: 30px;
}

.contact-sperow {
  row-gap: 30px;
}

.data-blog-1 {
  display: none;
}

.blog-det {
  background-image: url(../images/hero/image-data-about-7.png);
}

.contact-det {
  background-image: url(../contactus/hero.png);
}
.gallery-det {
  background-image: url(../gallery/hero.jpg);
}
.scheme-det {
  background-image: url(../scheme/hero.jpg);
}

.blog-separate-image {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
}

.blog-separate-image img {
  width: 100%;
  object-fit: cover;
}

.left-blog-data {
  width: 100%;
}

.blog-comment-bloger {
  margin: 10px 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 80px;
}

.bloge-date-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.bloge-date-sep i {
  font-size: 24px;
  color: #10271d;
}

.bloge-date-sep p {
  color: #10271d;
  font-size: 16px;
  font-weight: 500;
}

.quite-box-data {
  margin: 15px 0;
  background-color: #e7f0e9;
  padding: 40px;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}

.quiz-text-blog {
  font-size: 22px;
  font-weight: 700;
  line-height: 36px;
  font-style: italic;
  color: #10271d;
}

.line_client {
  display: flex;
  align-items: center;
  margin-top: 15px;
}

.line {
  height: 2px;
  width: 60px;
  background-color: #10271d;
}

.jordon {
  color: #10271d;
  font-size: 16px;
  line-height: 20px;
  padding-left: 10px;
}

.image-data-blog {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
}

.image-data-blog img {
  width: 100%;
  object-fit: cover;
}

.blog-data-sec-detail {
  width: 90%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  border-radius: 20px;
  padding: 20px;
  background-color: #fff;
  gap: 12px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  margin-top: -60px;
  position: relative;
  z-index: 0;
}

.bloger-data {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.bloger-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.bloger-name i {
  color: #10271d;
  font-weight: 500;
}

.bloger-name p {
  color: #10271d;
}

.bloger-title-data-main {
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  color: #10271d;
  cursor: pointer;
}

.main-sec-blog {
  flex-direction: column;
}

/* ----------- Slider 3 project -2  */
.fnc-slider {
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  height: 100vh;
}

.fnc-slider *,
.fnc-slider *:before,
.fnc-slider *:after {
  box-sizing: border-box;
}

.fnc-slider__slides {
  position: relative;
  height: 100%;
  transition: transform 1s 0.6666666667s;
}

.fnc-slider .m--blend-dark .fnc-slide__inner {
  background-color: #8a8a8a;
}

.fnc-slider .m--blend-dark .fnc-slide__mask-inner {
  background-color: #575757;
}

.fnc-slider .m--navbg-dark {
  background-color: #575757;
}

.fnc-slider .m--blend-green .fnc-slide__inner {
  background-color: #6d9b98;
}

.fnc-slider .m--blend-green .fnc-slide__mask-inner {
  background-color: #42605e;
}

.fnc-slider .m--navbg-green {
  background-color: #42605e;
}

.fnc-slider .m--blend-red .fnc-slide__inner {
  background-color: #ea2329;
}

.fnc-slider .m--blend-red .fnc-slide__mask-inner {
  background-color: #990e13;
}

.fnc-slider .m--navbg-red {
  background-color: #990e13;
}

.fnc-slider .m--blend-blue .fnc-slide__inner {
  background-color: #59aecb;
}

.fnc-slider .m--blend-blue .fnc-slide__mask-inner {
  background-color: #2d7791;
}

.fnc-slider .m--navbg-blue {
  background-color: #2d7791;
}

.fnc-slide {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
}

.fnc-slide.m--before-sliding {
  z-index: 2 !important;
  transform: translate3d(100%, 0, 0);
}

.fnc-slide.m--active-slide {
  z-index: 1;
  transition: transform 1s 0.6666666667s ease-in-out;
  transform: translate3d(0, 0, 0);
}

.fnc-slide__inner {
  position: relative;
  height: 100%;
  background-size: cover;
  background-position: center top;
  transform: translate3d(0, 0, 0);
}

.m--global-blending-active .fnc-slide__inner,
.m--blend-bg-active .fnc-slide__inner {
  background-blend-mode: luminosity;
}

.m--before-sliding .fnc-slide__inner {
  transform: translate3d(-100%, 0, 0);
}

.m--active-slide .fnc-slide__inner {
  transition: transform 1s 0.6666666667s ease-in-out;
  transform: translate3d(0, 0, 0);
}

.fnc-slide__mask {
  overflow: hidden;
  z-index: 1;
  position: absolute;
  right: 60%;
  top: 15%;
  width: 50.25vh;
  height: 67vh;
  margin-right: -90px;
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 100%,
    0 0,
    6vh 0,
    6vh 61vh,
    44vh 61vh,
    44vh 6vh,
    6vh 6vh
  );
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 100%,
    0 0,
    6vh 0,
    6vh 61vh,
    44vh 61vh,
    44vh 6vh,
    6vh 6vh
  );
  transform-origin: 50% 0;
  transition-timing-function: ease-in-out;
}

.m--before-sliding .fnc-slide__mask {
  transform: rotate(-10deg) translate3d(200px, 0, 0);
  opacity: 0;
}

.m--active-slide .fnc-slide__mask {
  transition: transform 0.7s 1.2222222222s, opacity 0.35s 1.2222222222s;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.m--previous-slide .fnc-slide__mask {
  transition: transform 0.7s 0.3333333333s, opacity 0.35s 0.6833333333s;
  transform: rotate(10deg) translate3d(-200px, 0, 0);
  opacity: 0;
}

.fnc-slide__mask-inner {
  z-index: -1;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 100vh;
  margin-left: -50vw;
  margin-top: -50vh;
  background-size: cover;
  background-position: center center;
  background-blend-mode: luminosity;
  transform-origin: 50% 16.5vh;
  transition-timing-function: ease-in-out;
}

.m--before-sliding .fnc-slide__mask-inner {
  transform: translateY(0) rotate(10deg) translateX(-200px) translateZ(0);
}

.m--active-slide .fnc-slide__mask-inner {
  transition: transform 0.7s 1.2222222222s;
  transform: translateX(0);
}

.m--previous-slide .fnc-slide__mask-inner {
  transition: transform 0.7s 0.3333333333s;
  transform: translateY(0) rotate(-10deg) translateX(200px) translateZ(0);
}

.fnc-slide__content {
  z-index: 2;
  position: absolute;
  left: 40%;
  top: 40%;
}

.fnc-slide__heading {
  margin-bottom: 10px;
  text-transform: uppercase;
}

.fnc-slide__heading-line {
  overflow: hidden;
  position: relative;
  padding-right: 20px;
  font-size: 80px;
  font-weight: 800;
  color: #fff;
  word-spacing: 10px;
}

.m--before-sliding .fnc-slide__heading-line {
  transform: translateY(100%);
}

.m--active-slide .fnc-slide__heading-line {
  transition: transform 1.5s 1s;
  transform: translateY(0);
}

.m--previous-slide .fnc-slide__heading-line {
  transition: transform 1.5s;
  transform: translateY(-100%);
}

.fnc-slide__heading-line span {
  display: block;
}

.m--before-sliding .fnc-slide__heading-line span {
  transform: translateY(-100%);
}

.m--active-slide .fnc-slide__heading-line span {
  transition: transform 1.5s 1s;
  transform: translateY(0);
}

.m--previous-slide .fnc-slide__heading-line span {
  transition: transform 1.5s;
  transform: translateY(100%);
}

.fnc-slide__action-btn {
  position: relative;
  margin-left: 200px;
  padding: 5px 15px;
  font-size: 20px;
  line-height: 1;
  color: transparent;
  border: none;
  text-transform: uppercase;
  background: transparent;
  cursor: pointer;
  text-align: center;
  outline: none;
}

.fnc-slide__action-btn span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform 0.3s;
  transform-origin: 50% 0;
  line-height: 30px;
  color: #fff;
}

.fnc-slide__action-btn span:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  border-top: none;
  border-bottom: none;
}

.fnc-slide__action-btn span:after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 30px;
  background: #1f2833;
  opacity: 0;
  transform-origin: 50% 0;
  transform: translateY(100%) rotateX(-90deg);
  transition: opacity 0.15s 0.15s;
}

.fnc-slide__action-btn:hover span {
  transform: rotateX(90deg);
}

.fnc-slide__action-btn:hover span:after {
  opacity: 1;
  transition: opacity 0.15s;
}

.fnc-nav {
  z-index: 5;
  position: absolute;
  right: 0;
  bottom: 0;
}

.fnc-nav__bgs {
  z-index: -1;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.fnc-nav__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.fnc-nav__bg.m--nav-bg-before {
  z-index: 2 !important;
  transform: translateX(100%);
}

.fnc-nav__bg.m--active-nav-bg {
  z-index: 1;
  transition: transform 1s 0.6666666667s;
  transform: translateX(0);
}

.fnc-nav__controls {
  font-size: 0;
}

.fnc-nav__control {
  overflow: hidden;
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 150px;
  height: 50px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-transform: capitalize;
  background: #10271d;
  border: none;
  outline: none;
  cursor: pointer;
  transition: background-color 0.5s;
}

.fnc-nav__control.m--active-control {
  background: #8bc34a;
  color: #10271d;
}

.fnc-nav__control-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition-timing-function: linear !important;
}

.m--with-autosliding .m--active-control .fnc-nav__control-progress {
  transform: scaleX(1);
}

.m--prev-control .fnc-nav__control-progress {
  transform: translateX(100%);
  transition: transform 0.5s !important;
}

.m--reset-progress .fnc-nav__control-progress {
  transform: scaleX(0);
  transition: transform 0s 0s !important;
}

.m--autosliding-blocked .fnc-nav__control-progress {
  transition: all 0s 0s !important;
  transform: scaleX(0) !important;
}

.demo-cont {
  overflow: hidden;
  position: relative;
  height: 100vh;
  perspective: 1500px;
  background: #000;
}

.demo-cont__credits {
  box-sizing: border-box;
  overflow-y: auto;
  z-index: 1;
  position: absolute;
  right: 0;
  top: 0;
  width: 400px;
  height: 100%;
  padding: 20px 10px 30px;
  background: #303030;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  color: #fff;
  text-align: center;
  transition: transform 0.7s;
  transform: translate3d(100%, 0, 0) rotateY(-45deg);
  will-change: transform;
}

.credits-active .demo-cont__credits {
  transition: transform 0.7s 0.2333333333s;
  transform: translate3d(0, 0, 0);
}

.demo-cont__credits *,
.demo-cont__credits *:before,
.demo-cont__credits *:after {
  box-sizing: border-box;
}

.demo-cont__credits-close {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 28px;
  height: 28px;
  cursor: pointer;
}

.demo-cont__credits-close:before,
.demo-cont__credits-close:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background: #fff;
}

.demo-cont__credits-close:before {
  transform: rotate(45deg);
}

.demo-cont__credits-close:after {
  transform: rotate(-45deg);
}

.demo-cont__credits-heading {
  text-transform: uppercase;
  font-size: 40px;
  margin-bottom: 20px;
}

.demo-cont__credits-img {
  display: block;
  width: 60%;
  margin: 0 auto 30px;
  border-radius: 10px;
}

.demo-cont__credits-name {
  margin-bottom: 20px;
  font-size: 30px;
}

.demo-cont__credits-link {
  display: block;
  margin-bottom: 10px;
  font-size: 24px;
  color: #fff;
}

.demo-cont__credits-blend {
  font-size: 30px;
  margin-bottom: 10px;
}

.example-slider {
  z-index: 2;
  transform: translate3d(0, 0, 0);
  transition: transform 0.7s;
}

.credits-active .example-slider {
  transform: translate3d(-400px, 0, 0) rotateY(10deg) scale(0.9);
}

.example-slider .fnc-slide-1 .fnc-slide__inner,
.example-slider .fnc-slide-1 .fnc-slide__mask-inner {
  background-image: url("../images/project-3/image-1.png");
}

.example-slider .fnc-slide-2 .fnc-slide__inner,
.example-slider .fnc-slide-2 .fnc-slide__mask-inner {
  background-image: url("../images/project-3/image-2.png");
}

.example-slider .fnc-slide-3 .fnc-slide__inner,
.example-slider .fnc-slide-3 .fnc-slide__mask-inner {
  background-image: url("../images/project-3/image-3.png");
}

.example-slider .fnc-slide-3 .fnc-slide__inner:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
}

.example-slider .fnc-slide-4 .fnc-slide__inner,
.example-slider .fnc-slide-4 .fnc-slide__mask-inner {
  background-image: url("../images/project-3/image-6.png");
}

.example-slider .fnc-slide-4 .fnc-slide__inner:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
}

.colorful-switch {
  position: relative;
  width: 180px;
  height: 77.1428571429px;
  margin: 0 auto;
  border-radius: 32.1428571429px;
  background: #cfcfcf;
}

.colorful-switch:before {
  content: "";
  z-index: -1;
  position: absolute;
  left: -5px;
  top: -5px;
  width: 190px;
  height: 87.1428571429px;
  border-radius: 37.1428571429px;
  background: #314239;
  transition: background-color 0.3s;
}

.colorful-switch:hover:before {
  background: #4c735f;
}

.colorful-switch__checkbox {
  z-index: -10;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.colorful-switch__label {
  z-index: 1;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 32.1428571429px;
  cursor: pointer;
}

.colorful-switch__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 540px;
  height: 100%;
  background: linear-gradient(
    90deg,
    #14dcd6 0,
    #10e7bd 180px,
    #ef9c29 360px,
    #e76339 100%
  );
  transition: transform 0.5s;
  transform: translate3d(-360px, 0, 0);
}

.colorful-switch__checkbox:checked
  ~ .colorful-switch__label
  .colorful-switch__bg {
  transform: translate3d(0, 0, 0);
}

.colorful-switch__dot {
  position: absolute;
  left: 131.1428571429px;
  top: 50%;
  width: 5.1428571429px;
  height: 5.1428571429px;
  margin-left: -2.5714285714px;
  margin-top: -2.5714285714px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.5s;
  transform: translate3d(0, 0, 0);
}

.colorful-switch__checkbox:checked
  ~ .colorful-switch__label
  .colorful-switch__dot {
  transform: translate3d(-80.3571428571px, 0, 0);
}

.colorful-switch__on {
  position: absolute;
  left: 104.1428571429px;
  top: 22.5px;
  width: 19.2857142857px;
  height: 36px;
  transition: transform 0.5s;
  transform: translate3d(0, 0, 0);
}

.colorful-switch__checkbox:checked
  ~ .colorful-switch__label
  .colorful-switch__on {
  transform: translate3d(-80.3571428571px, 0, 0);
}

.colorful-switch__on__inner {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28);
  transform-origin: 100% 50%;
  transform: rotate(45deg) scale(0) translateZ(0);
}

.colorful-switch__checkbox:checked
  ~ .colorful-switch__label
  .colorful-switch__on__inner {
  transition: transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61);
  transform: rotate(45deg) scale(1) translateZ(0);
}

.colorful-switch__on__inner:before,
.colorful-switch__on__inner:after {
  content: "";
  position: absolute;
  border-radius: 2.5714285714px;
  background: #fff;
}

.colorful-switch__on__inner:before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6.1428571429px;
}

.colorful-switch__on__inner:after {
  right: 0;
  top: 0;
  width: 6.1428571429px;
  height: 100%;
}

.colorful-switch__off {
  position: absolute;
  left: 131.1428571429px;
  top: 50%;
  width: 41.1428571429px;
  height: 41.1428571429px;
  margin-left: -20.5714285714px;
  margin-top: -20.5714285714px;
  transition: transform 0.5s;
  transform: translate3d(0, 0, 0);
}

.colorful-switch__checkbox:checked
  ~ .colorful-switch__label
  .colorful-switch__off {
  transform: translate3d(-80.3571428571px, 0, 0);
}

.colorful-switch__off:before,
.colorful-switch__off:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 5.1428571429px;
  margin-top: -2.5714285714px;
  border-radius: 2.5714285714px;
  background: #fff;
  transition: transform 0.25s 0.25s;
}

.colorful-switch__checkbox:checked
  ~ .colorful-switch__label
  .colorful-switch__off:before,
.colorful-switch__checkbox:checked
  ~ .colorful-switch__label
  .colorful-switch__off:after {
  transition-delay: 0s;
}

.colorful-switch__off:before {
  transform: rotate(45deg) scaleX(1) translateZ(0);
}

.colorful-switch__checkbox:checked
  ~ .colorful-switch__label
  .colorful-switch__off:before {
  transform: rotate(45deg) scaleX(0) translateZ(0);
}

.colorful-switch__off:after {
  transition-timing-function: cubic-bezier(0.67, -0.16, 0.47, 1.61);
  transform: rotate(-45deg) scaleX(1) translateZ(0);
}

.colorful-switch__checkbox:checked
  ~ .colorful-switch__label
  .colorful-switch__off:after {
  transition-timing-function: ease;
  transform: rotate(-45deg) scaleX(0) translateZ(0);
}

/* -------------------- coming soon data */
.coming-data {
  width: 100%;
  height: 100vh;
  margin: auto;
  align-items: center;
  justify-content: start;
}

.main-skot {
  padding: 0;
}

.coming-slider {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
}

.coming-slider img {
  width: 100%;
}

.slider-coming {
  width: 100%;
  height: 100%;
}

.coming-image-data {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
}

.coming-image-data * {
  outline: none;
}

.coming-image-data .slider-track {
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
}

.coming-image-data .coming-slider {
  height: 100%;
  position: relative;
  z-index: 1;
}

.coming-image-data .coming-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  transform: scale(1.2);
}

.coming-image-data .coming-slider.slick-active img {
  transform: scale(1);
}

.coming-image-data .slick-slide {
  margin: 0;
}

.left-slide-coming {
  width: 100%;
  height: 100%;
  background-color: #10271d;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 20px;
  text-align: center;
  padding: 60px;
}

.main-skot {
  height: 100%;
}

.coming-image-data .slick-track {
  height: 100%;
  align-items: center;
  justify-content: center;
}

.coming-image-data .slick-list {
  height: 100%;
}

.left-slide-coming {
  background-image: url(../images/hero/left-mask.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}

.logo-coming img {
  width: 100%;
  max-width: 200px;
}

.comming-title {
  font-size: 40px;
  font-weight: 800;
  line-height: 64px;
  color: #fff;
  margin-top: 30px;
}

.comming-title span {
  color: #9fd456;
}

.comming-desc {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: #fff;
  margin-top: 25px;
}

.wrapper {
  width: 100%;
  margin-top: 30px;
}

.countdown-container {
  width: 100%;
  height: 100%;
  text-align: center;
}

.countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve3d;
  perspective: 500px;
  height: 12rem;
  width: 100%;
  margin: 0 auto;
}

.countdown.remove {
  animation: hide-countdown 1s cubic-bezier(0, 0.9, 0.56, 1.2) forwards;
  overflow: hidden;
}

.number,
.separator {
  font-size: 70px;
  font-weight: 700;
  display: block;
  color: #8bc34a;
  height: auto;
  position: relative;
  text-align: center;
  width: 100%;
}

.separator {
  margin: 0;
  width: 2rem;
}

.new,
.old,
.current {
  color: #8bc34a;
  position: absolute;
  border-radius: 1rem;
  height: 10rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.new {
  animation: show-new 0.4s cubic-bezier(0, 0.9, 0.5, 1.2) forwards;
}

.old {
  animation: hide-old 2s cubic-bezier(0, 0.9, 0.56, 1.2) forwards;
}

.countdown section {
  position: relative;
}

#js-days:after,
#js-hours:after,
#js-minutes:after,
#js-seconds:after {
  content: "Days";
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  bottom: -40px;
  font-size: 18px;
  color: #fff;
}

#js-hours:after {
  content: "Hourse";
}

#js-minutes:after {
  content: "Minuts";
}

#js-seconds:after {
  content: "Seconds";
}

@keyframes hide-countdown {
  to {
    height: 0;
    overflow: hidden;
  }
}

@keyframes show-new {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-2rem) scale(0.8)
      rotateX(-20deg);
  }

  100% {
    transform: translate(-50%, -50%);
  }
}

@keyframes hide-old {
  0% {
    transform: translate(-50%, -50%);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-5rem) scale(0.5)
      rotateX(-75deg);
  }
}

.comming-input {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 20px;
  width: 100%;
  max-width: 550px;
}

.comming-input input {
  display: flex;
  width: 100%;
  border: 2px solid #fff;
  padding: 20px;
  background-color: transparent;
  border-radius: 100px;
  color: #fff;
  position: relative;
}

.comming-input input:-webkit-autofill,
.comming-input input:-webkit-autofill:hover,
.comming-input input:-webkit-autofill:focus,
.comming-input input:-webkit-autofill:active {
  transition: background-color 5000000s ease-in-out 0s;
  background-color: transparent !important;
  color: #fff !important;
}

.comming-input input:focus {
  color: #fff;
  background-color: transparent;
  box-shadow: none;
}

.comming-input input:focus {
  background-color: transparent !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  box-shadow: none !important;
}

.data-comming-soon-btn {
  position: absolute;
  right: 5px;
  margin-top: 0;
  max-width: 200px;
}

.line-comming {
  width: 100%;
  height: 1px;
  background-color: #ffffff64;
  margin-top: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-coming {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
}

.social-main-data {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.social-design-comming {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 100px;
  width: 40px;
  height: 40px;
  transition: all 0.5s ease;
  font-size: 22px;
}

.social-design-comming:hover {
  background-color: #8bc34a;
  color: #10271d;
  border: 2px solid #8bc34a;
  transition: all 0.5s ease;
}

.copy-comming {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
}

.copy-comming a {
  color: #fff;
}

/* ----------------------------------------- bottom to top page  */
#scroll {
  position: fixed;
  right: 30px;
  bottom: 30px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  background-color: #8bc34a;
  display: none;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: all 0.5s ease-in;
}

#scroll:hover {
  background-color: #10271d;
  transition: all 0.5s ease-in;
  opacity: 1;
}

#scroll::before,
#scroll::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 0 0 #8bc34a;
  animation: button-ripple-2 3s infinite;
  opacity: 0.6;
  z-index: 0;
}

@keyframes button-ripple-2 {
  0% {
    box-shadow: 0 0 0 0 #8bc34a;
    opacity: 0.6;
  }

  70% {
    box-shadow: 0 0 0 var(--glow-size, 25px) #8bc34a;
    opacity: 0;
  }

  100% {
    box-shadow: 0 0 0 0 #8bc34a;
    opacity: 0;
  }
}

/* ----------------------------- bg-home Index.html image */
.image-home {
  width: 100%;
  height: 100%;
  background-image: url(../home/home1.avif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0;
  padding: 100px 0;
  padding-top: 160px;
  position: relative;
  overflow: hidden;
}

.image-home::after {
  position: absolute;
  content: " ";
  background: #000000;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  opacity: 0.65;
  pointer-events: none;
  top: 0;
  left: 0;
}

.data-hero-home {
  position: relative;
  z-index: 995;
  width: 100%;
  max-width: 750px;
}

.home-made-services {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 20px;
}

.home-made-services img {
  width: 100%;
  max-width: 100px;
}

.home-made-title {
  font-size: 24px;
  font-weight: 500;
  line-height: normal;
  color: #fff;
}

.home-hero-title {
  font-size: 64px;
  font-weight: normal;
  line-height: 80px;
  color: #fff;
  margin-top: 20px;
}

.home-hero-title span {
  color: #9fd456;
  font-weight: 800;
}

.home-desc-made {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: #fff;
  margin-top: 40px;
}

.text-relable-data {
  position: absolute;
  width: 100%;
  margin: auto;
  text-align: center;
  bottom: -2%;
  left: 0;
  z-index: 111;
}

.home-renewable {
  font-size: 290px;
  line-height: 290px;
  pointer-events: none;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ------------------------------------ Video-home Index.html video */
.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 1;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 0;
}

.data-video {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  z-index: 1;
}

.video-home {
  background-image: none;
}

/* ------------------------------------ slider-home Index.html slider */
.video-slider-slider {
  width: 100%;
  position: relative;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.slider-under-home {
  width: 100%;
  position: relative;
  height: 100%;
}

.bg-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-content {
  position: relative;
  z-index: 2;
  height: 100%;
  transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  max-height: 600px;
}

.slide-content {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.slide-content .home-made-services {
  transition-delay: 0.2s;
}

.slide-content .home-hero-title {
  transition-delay: 0.3s;
}

.slide-content .home-desc-made {
  transition-delay: 0.5s;
}

.slide-content .slider-btn {
  transition-delay: 0.7s;
}

.slick-active .slide-content,
.slick-active .slide-content .provide,
.slick-active .slide-content .quality,
.slick-active .slide-content .residents,
.slick-active .slide-content .btn-cutomer-main {
  opacity: 1;
  transform: translateY(0);
}

.slider-under-home {
  margin: 0;
}

/*---------------------- text-scroll animation  */
.title-about {
  font-size: 48px;
  font-weight: normal;
  line-height: 64px;
  color: #88888817;
  background: linear-gradient(to right, #10271d, #10271d) no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 50% 100%;
  transition: background-size 0.5s cubic-bezier(0.1, 0.5, 0.5, 1);
  display: inline-block;
}

@keyframes scroll-text-color {
  to {
    background-size: 100%;
  }
}

.services-detail-title {
  color: #88888817;
  background: linear-gradient(to right, #10271d, #10271d) no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 30% 100%;
  transition: background-size 0.5s cubic-bezier(0.1, 0.5, 0.5, 1);
  display: inline-block;
}

/* ---------------------- bottom fixed */
.bottom-line-scotter {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  bottom: 0;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  height: 50px;
  left: 0;
  mask: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, black 100%) add;
  overflow: visible;
  position: fixed;
  right: 0;
  pointer-events: none;
}

#scroll {
  display: none;
}

.navbar-anchor.active {
  color: #9fd456;
}

.ul-design li a.active {
  color: #9fd456 !important;
}

/* ---------------------------------------update */
.menu {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu.active {
  opacity: 1;
  visibility: visible;
}

.right-design {
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
  transform: translateY(100%);
}

.left-design {
  transform: translateY(-100%);
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

.menu.active .left-design {
  transform: translateY(0%);
}

.menu.active .right-design {
  transform: translateY(0%);
  transition-delay: 0.1s;
}
/* text area */
/* Wrapper */
.textarea-wrapper {
  position: relative;
  width: 100%;
}

/* Textarea */
.textarea-box {
  width: 100%;
  min-height: 120px;
  padding: 16px 16px 16px 48px;
  border-radius: 14px;
  border: 1px solid #e5e5e5;
  font-size: 15px;
  resize: none;
  outline: none;
  background: transparent;
}

/* Fake placeholder */
.fake-placeholder {
  position: absolute;
  top: 16px;
  left: 48px;
  color: #9aa0a6;
  font-size: 14px;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 70px);
}

/* Hide fake placeholder when user types */
.textarea-box:focus + .fake-placeholder,
.textarea-box:not(:placeholder-shown) + .fake-placeholder {
  display: none;
}

/* Mobile specific */
@media (max-width: 767px) {
  .textarea-box {
    height: 52px;   /* input-like look */
    min-height: 52px;
  }
}
/* date */
.flatpickr-calendar {
  z-index: 9999;
}

@media (max-width: 768px) {
  body {
    overscroll-behavior: contain;
  }
}
@media (max-width: 768px) {
  .flatpickr-calendar {
    z-index: 9999;
  }
}