body {
  position: relative !important;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* background-color: white; */
  background-image: url(../graphics/rep02/Grou7.png);
  position: relative;
  /* background-image: url(../graphics/bk.png); */
  /* background-image: url(../graphics/bk-black.jpg); */
  /* background-image: url(../graphics/bk00.png);
    background-image: url(../graphics/bk00a.png); */
  /* background-blend-mode: luminosity; */
  overflow-x: hidden;
}
#section1a {
  background-image: url(../graphics/rep02/Grou7.png);
}

.box-container .box {
  width: 20px;
  height: 20px;
  border: 1px solid black;
}
.banner-text h4 {
  font-size: 18px;
  margin-top: 22px;
  color: #f8f8f8;
  background-color: #a4d9d0;
  font-weight: 500;
  font-family: "Lalezar", cursive;
  border-radius: 10px;
  display: inline-flex;
  padding: 4px 11px;
  float: right;
  margin-right: 150px;
}

.date-00 {
  display: block;
  color: white;
  font-size: 19px;
  font-weight: 500;
  padding: 0;
  padding-top: 12px;
  margin-bottom: 25px;
  bottom: 29px;
  /* font-style: italic; */
  background-color: #1f1f1f;
  padding: 5px;
  width: 135px;
  margin-top: 20px;
  left: 0;
}
.date-00 span {
  margin-top: 2px !important;
}

.date-00 img {
  width: 25px;
  padding-left: 4px;
}

.pin-spacer02 {
  /* height: 2289px; */
}
.desktop {
  display: block;
}
.mobile {
  display: none;
}
.logopic {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1111;
  width: 100px;
  object-fit: contain;
}
.lead {
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
  text-align: left;
}
.classflex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.date-00 {
  color: #f7f7f7;
  background-color: #040404;
  display: flex;
  width: 115px;
  align-items: center;
  font-size: 17px;
  /* width: 100%; */
  padding: 4px;
  margin-left: 20px;
  position: absolute;
  bottom: 14px;
  left: 25px;
}
.date-00 img {
  width: 20px;
  margin-right: 5px;
  padding-bottom: 5px;
}
.desktop {
  display: block;
}
.mobile {
  display: none;
}
h3 {
  color: #333333;
  margin-bottom: 30px !important;
  margin-top: 40px;
}

.background-overlay:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: " ";
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.7;
  min-height: 2000px;
  background-image: linear-gradient(to right, transparent, white);
}

section {
  padding: 0 !important;
}

.p-t-40 {
  padding-top: 40px;
}
.p-b-40 {
  padding-bottom: 40px;
}
.width-50 {
  width: 50%;
}

#mob {
  background-image: url(../graphics/Header1.jpg);
  background-size: cover;
  height: 600px !important;
  background-position: top;
}
#mob h1 {
  color: #353535;
  font-size: 40px;
  width: 50%;
}
.head02 span {
  display: block;
  font-size: 24px;
  margin-top: 12px;
  color: #6f4212;
  color: #57320a;
}

#mob02 {
  background-image: url(../images/we.png);
  background-size: cover;
  min-height: 100vh !important;
  background-position: top;
}

.pulse4 {
  animation: pulse4 0.9s infinite;
  animation-direction: alternate;
  -webkit-animation-name: pulse4;
  animation-name: pulse4;
}

.pointer-hand {
  display: flex;
  margin-bottom: -80px;
  margin-top: 50px;
}

.pointer-hand img {
  padding-left: 10px;
  height: 20px;
}

.pointer-hand p {
  color: #c2c2c2;
  font-weight: 900;
}

.opd {
  text-align: center;
  font-size: 17px;
  margin-top: -20px;
}

#mob02 .text-top {
  margin-top: 140px;
}

#mob02 h1 {
  color: #333333;
}

#mob02 span {
  display: block;
  font-size: 24px;
  margin-top: 12px;
  color: #333;
}

.opd {
  text-align: center;
  font-size: 17px;
  padding-top: 130px;
}

.flex-container {
  display: flex;
  padding: 20px 0;
}
.part01 {
  width: 50%;
}

#section1 {
  position: relative;
  overflow: initial;
}
#section-last,
#section-last02,
#section-last03 {
  position: relative;
  overflow: initial;
}
#section3,
#section6,
#section7,
#section1a,
#section2a,
#section2b,
#section2c {
  position: relative;
  overflow: initial;
}
/* .part02 {
    width: 45%;
    position: fixed;
    z-index: 999;
    left: -20px;
    top: 10%;
    left: 0;
    z-index: -1;
    height: 100%;
} */

.part02 {
  height: calc(100vh - 100px);
  height: -moz-calc(100vh - 100px);
  height: -webkit-calc(100vh - 100px);
  height: -o-calc(100vh - 100px);
  width: 50%;
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
  display: flex;
  align-self: flex-start;
  justify-content: center;
}
.part02 img {
  height: auto;
  width: 80%;
  object-fit: contain;
}

.part02-img {
  width: 100%;
  position: absolute;

  z-index: 1;
}

.part03-img {
  width: 100%;
  position: absolute;

  z-index: -1;
}
.part04-img {
  width: 100%;
  position: absolute;

  z-index: -1;
}

.part02b-img {
  width: 100%;
  position: absolute;

  z-index: 1;
}

.part03b-img {
  width: 100%;
  position: absolute;

  z-index: -1;
}
.part04b-img {
  width: 100%;
  position: absolute;
  z-index: -1;
}

.part02c-img {
  width: 100%;
  position: absolute;

  z-index: 1;
}

.part03c-img {
  width: 100%;
  position: absolute;

  z-index: -1;
}
.part04c-img {
  width: 100%;
  position: absolute;

  z-index: -1;
}

.part02a-img {
  width: 100%;
  position: absolute;

  z-index: 1;
}

.part03a-img {
  width: 100%;
  position: absolute;

  z-index: -1;
}
.part04a-img {
  width: 100%;
  position: absolute;

  z-index: -1;
}

.part06-img {
  width: 100%;
  position: absolute;
  z-index: 1;
}
.part07-img {
  width: 100%;
  position: absolute;
  z-index: -1;
}

.part06-img-mobile,
.part06-img-mobile,
.part09-img-mobile,
.part10-img-mobile {
  width: 100%;
  position: absolute;
  z-index: 1;
}

.wrapper {
  flex-direction: row;
}
.image {
  height: calc(100vh - 100px);
  height: -moz-calc(100vh - 100px);
  height: -webkit-calc(100vh - 100px);
  height: -o-calc(100vh - 100px);
  width: 50vw;
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
  align-self: flex-start;
}
.image img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.part02-right {
  width: 50%;
}
.part05-img {
  width: 80%;
  height: 600px;
  object-fit: contain;
  position: absolute;
  z-index: -1;
}

.column {
  width: 50%;
}
.column {
  background: #f0e7d8;
  color: #ab9b96;
  padding: 4rem 6rem;
  width: 100%;
  margin-left: auto;
  margin-right: 0;
}

#sectionMap {
  width: 100vw;
  height: 100vh !important;
  padding: 0 0 !important;
  position: relative;
}
#sectionMap03 {
  width: 100vw;
  height: 100vh !important;
  padding: 0 0 !important;
  position: relative;
}
#sectionMap04 {
  width: 100vw;
  height: 100vh !important;
  padding: 0 0 !important;
  position: relative;
}

.Map-bk {
  position: absolute;
  /* transform: scale(0.7); */
  top: 50%;
  left: 50%;
  /* min-height: 800px; */
  transform: translate(-50%, -50%) scale(1);
  width: 100%;
  height: 100%;
}
.main-container {
  /* transform: scale(1.1,.95); */
  /* background-image: url(../img/mapbk.jpg); */
  position: relative;
  min-height: 100%;
  min-width: 1024px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow-y: hidden;
}

#myChart3 {
  width: 200px;
}

.mo9 {
  background-color: rgb(183, 255, 255);
}
.map01-p {
  padding: 20px;
  width: 50%;
  box-shadow: -1px 2px 22px 0 #4e4f51cf;
  background-color: rgb(255 255 255 / 98%);
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -290px;
  margin-left: -627px;
  z-index: 999999;
  transform: translate(0, 1200px);
  border-radius: 10px;
}
.map01-p h3 {
  color: #333333 !important;
  text-align: left !important;
}
.map01-p p {
  color: #333333 !important;
  text-align: left !important;
  font-size: 20px;
  font-weight: 500;
}

.map02-p {
  padding: 45px;
  width: 50%;
  box-shadow: -1px 2px 22px 0 #4e4f51cf;
  background-color: rgb(255 255 255 / 98%);
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -300px;
  z-index: 999999;
  transform: translate(0, 1200px);
  border-radius: 10px;
}

.map02-p h3 {
  color: #333333 !important;
  text-align: left !important;
}
.map02-p p {
  color: #333333 !important;
  text-align: left !important;
  font-size: 20px;
  font-weight: 500;
}

.Map-bk02 {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

#sectionMap02 {
  width: 100vw;
  height: 100vh !important;
  padding: 0 0 !important;
  position: relative;
}

#medium-screens01 {
  z-index: 1;
}

#medium-screens02 {
  z-index: -1;
}

.map03-p {
  padding: 45px;
  width: 50%;
  box-shadow: -1px 2px 22px 0 #4e4f51cf;
  background-color: rgb(255 255 255 / 98%);
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -300px;
  z-index: 999999;
  transform: translate(0, 1200px);
  border-radius: 10px;
}

.map03-p h3 {
  color: #333333 !important;
  text-align: left !important;
}
.map03-p p {
  color: #333333 !important;
  text-align: left !important;
  font-size: 20px;
  font-weight: 500;
}

.mo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 50%;
  margin-top: 50px;
}
.map04-p {
  padding: 30px;
  width: 70%;
  box-shadow: -1px 2px 22px 0 #4e4f51cf;
  background-color: rgba(255, 255, 255, 0.819);
  color: white;
  position: absolute;
  top: 5%;
  left: 20%;
  /* margin-left: -300px; */
  z-index: 999999;
  transform: translate(0, 1200px);
  border-radius: 10px;
}

.map04-p h3 {
  color: #333333 !important;
  text-align: left !important;
}
.map04-p p {
  color: #333333 !important;
  text-align: left !important;
  font-size: 20px;
  font-weight: 500;
}

/* 
.background-overlay02{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: " ";
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.8;
    min-height: 2000px;
    background-image: linear-gradient(to right, white , #d9d9d9);
    z-index: 0;
} */

#section8-video {
  position: relative;
  min-height: 100vh !important;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lyar-alone {
  background-color: #f7f7f7ba;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#section8-video h3 {
  color: #262626;
  font-size: 38px;
  font-weight: 600 !important;
}

.last-secaa {
  overflow-y: hidden;
}

#section8-video p {
  color: #262626;
  font-size: 24px;
  line-height: 35px;
}

/* rep02 */

.comparisonImage img {
  width: 100%;
  /* height: 100%; */
  z-index: 1;
  position: absolute;
  top: 0;
  filter: grayscale(0.3);
}
.afterImage {
  position: absolute;
  top: 0;
}
.comparisonImage {
  width: 100%;
  /* height: 100%; */
}
.afterImage img {
  z-index: -1;
}

.afterImage02 {
  position: absolute;
  top: 0;
}
.afterImage02 img {
  z-index: -1;
}

.map03-p-d {
  padding: 45px;
  width: 50%;
  box-shadow: -1px 2px 22px 0 #4e4f51cf;
  background-color: rgba(255, 255, 255, 0.721);
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -300px;
  z-index: 9999999;
  transform: translate(0, 1200px);
  border-radius: 10px;
}

.map03-p-d h3 {
  color: #333333 !important;
  text-align: left !important;
}
.map03-p-d p {
  color: #333333 !important;
  text-align: left !important;
  font-size: 20px;
  font-weight: 500;
}

.num {
  position: absolute;
  background-color: rgb(0, 0, 0);
  color: white;
  text-align: center;
  width: 150px;
  font-weight: 800;
  bottom: 80px;
  left: 30px;
}

.map03-p-a {
  padding: 45px;
  width: 50%;
  box-shadow: -1px 2px 22px 0 #4e4f51cf;
  background-color: rgb(255 255 255 / 98%);
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -300px;
  z-index: 999999;
  transform: translate(0, 1200px);
  border-radius: 10px;
}

.map03-p-a h3 {
  color: #333333 !important;
  text-align: left !important;
}
.map03-p-a p {
  color: #333333 !important;
  text-align: left !important;
  font-size: 20px;
  font-weight: 500;
}

.map04-p-a {
  padding: 45px;
  width: 70%;
  box-shadow: -1px 2px 22px 0 #4e4f51cf;
  background-color: rgb(255 255 255 / 98%);
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -300px;
  z-index: 999999;
  transform: translate(0, 1200px);
  border-radius: 10px;
}

.map04-p-a h3 {
  color: #333333 !important;
  text-align: left !important;
}
.map04-p-a p {
  color: #333333 !important;
  text-align: left !important;
  font-size: 20px;
  font-weight: 500;
}
.beforeImage-a img {
  width: 100%;
}

#medium-screens01a {
  z-index: 1;
}
#medium-screens01b {
  z-index: -1;
}
#medium-screens01c {
  z-index: -1;
}

/* .ch1 {
  width: 100%;
  background-color: #eaf2f0;
} */

.chr {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 95%;
  margin: 0 auto;
  /* background-color: #885669; */
}

.sec10 {
  height: auto;
  width: 100%;
  background-color: #885669;
}

.chr p {
  text-align: center !important;
}

.col1 {
  flex: 1;
  margin-top: 50px;
}

.containerhead {
  position: relative;
}

.cards005 {
  /* background: linear-gradient(to right, #8e9eab, #eef2f3);  */
  height: auto;
  display: flex;
  margin-top: 80px;
  margin-bottom: 80px;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 18px;
  width: 100%;
}
.p12 {
  text-align: center !important;
  font-size: 15px;
  margin-top: 0px;
  margin-bottom: 40px;
}
.card-wrap {
  width: 30.33%;
  background: #fff;
  border-radius: 20px;
  border: 5px solid #fff;
  overflow: hidden;
  color: var(--color-text);
  box-shadow: rgb(0 0 0 / 19%) 0px 10px 20px, rgb(0 0 0 / 23%) 0px 6px 6px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.card-wrap:hover {
  transform: scale(1.1);
}
.card-header {
  height: 200px;
  width: 100%;
  background: red;
  /* border-radius:100% 0% 100% 0% / 0% 50% 50% 100%; */
  display: grid;
  place-items: center;
  border-radius: 100% 0% 100% 0% / 0% 50% 50% 100% !important;
}
/* .about-arij{
margin-top: 0 !important;
} */
.card-header i {
  color: #fff;
  font-size: 72px;
}
.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 95%;
  margin: 0 auto;
}
.card-title {
  text-align: center;
  text-align: center;
  text-transform: none;
  font-size: 16px;
  margin-top: 21px;
  margin-bottom: 20px;
  color: #373735 !important;
  font-size: 20px;
}
.card-text {
  display: none;
  text-align: center;
  font-size: 12px;
  margin-bottom: 20px;
}

.psy {
  width: 50px !important;
  position: absolute;
  margin-bottom: 150px;
  padding-bottom: 20px;
}
.card-btn {
  border: none;
  border-radius: 100px;
  padding: 5px 30px;
  color: #fff;
  margin-bottom: 15px;
  text-transform: uppercase;
}
/* .card-header.one {
  background: linear-gradient(to bottom left, #750808, #3d0b0b);
}
.card-header.two {
  background: linear-gradient(to bottom left, #750808, #3d0b0b);
}
.card-header.three {
  background: linear-gradient(to bottom left, #750808, #3d0b0b);
} */
.card-header.four {
  background: linear-gradient(
    to bottom left,
    var(--card4-gradient-color1),
    var(--card4-gradient-color2)
  );
}

.card-btn.one {
  background: linear-gradient(to bottom left, #750808, #3d0b0b);
}
.card-btn.two {
  background: linear-gradient(to bottom left, #750808, #3d0b0b);
}
.card-btn.three {
  background: linear-gradient(to bottom left, #750808, #3d0b0b);
}
.card-btn.four {
  background: linear-gradient(
    to left,
    var(--card4-gradient-color1),
    var(--card4-gradient-color2)
  );
}

@media (max-width: 720px) {
  .opd {
    padding-top: 10px;
  }
  .row-card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .card {
    width: 100%;
    background-color: #fff;
    box-shadow: 0 0 7px rgb(0 0 0 / 60%);
    border-radius: 0.5rem;
    margin-bottom: 30px;
    margin-left: 0;
  }
}

@media (max-width: 1205px) {
  .sticker {
    width: 50%;
  }
}

@media (max-width: 901px) {
  .map03-p-d p {
    font-size: 13px !important;
  }

  .map03-p-d {
    left: 10%;
    margin: 0;
  }

  .sticker {
    width: 50%;
  }

  .containerhead h3 {
    margin-right: 30px !important;
  }
}
@media (max-width: 856px) {
  .sticker {
    width: 60%;
  }
}

@media (max-width: 642px) {
  .sticker {
    width: 70%;
  }
  .containerhead h3 {
    margin-right: 3px !important;
  }

  .mo {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .sticker {
    width: 80%;
    margin-top: -15px;
    margin-right: 20px;
  }
  .containerhead h3 {
  }
}

@media (max-width: 990px) {
  .container1 {
    flex-direction: column;
  }
  .cont {
    flex-direction: column-reverse !important;
  }
  .imgcontain {
    flex-direction: column;

    justify-content: center;
    align-items: center;
  }
  .img1 {
    margin-bottom: 30px;
    width: 80%;
  }

  .col1 {
    margin-right: 0 !important;
  }
}

@media (max-width: 790px) {
  .containerhead h3 {
    font-size: 23px;
  }
}

@media (max-width: 775px) {
  .row-card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .card-wrap {
    margin-bottom: 30px;
    width: 100%;
  }
}

@media (max-width: 590px) {
  .card-wrap {
    margin-bottom: 30px;
    width: 100%;
  }
}
@media (max-width: 720px) {
  .row-card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .card {
    width: 100%;
    background-color: #fff;
    box-shadow: 0 0 7px rgb(0 0 0 / 60%);
    border-radius: 0.5rem;
    margin-bottom: 30px;
    margin-right: 0;
  }
  .scroll-to img {
    width: 92px;
    opacity: 0.4;
    display: none;
  }
}

@media (max-width: 1024px) {
  .main-container {
    min-width: 720px;
  }
  .map04-p p {
    font-size: 13px;
  }
}

@media (max-width: 800px) {
  .jo {
    width: 100% !important;
  }
  .chr {
    flex-direction: column !important;
  }
  #myChart011 {
    width: 100% !important;
  }
  .col1 {
    width: 100%;
  }

  .main-container {
    min-width: 600px;
  }
  .flex-container {
    flex-direction: column;
  }
  .part01 {
    width: 100%;
  }
  .part02 {
    width: 100%;
  }
  .width-50 {
    width: 100%;
  }
  .map01-p {
    width: 95%;
    margin: auto !important;
    top: 0 !important;
    right: 15px !important;
  }
  .map02-p {
    width: 95%;
    margin: auto !important;
    top: 0 !important;
    left: 15px !important;
  }

  .Map-bk02 {
    filter: blur(30px);
  }
  .map03-p {
    width: 95%;
    margin: auto !important;
    top: 0 !important;
    right: 15px !important;
  }
  .map03-p-a {
    width: 95%;
    margin: auto !important;
    top: 0 !important;
    right: 15px !important;
  }
  .map03-p-d {
    width: 95%;
    margin: auto !important;
    top: 0 !important;
    right: 15px !important;
  }
  .map04-p {
    width: 95%;
    margin: auto !important;
    top: 0 !important;
    left: 15px !important;
  }
  .map04-p-a {
    width: 95%;
    margin: auto !important;
    top: 0 !important;
    left: 15px !important;
  }
}

@media (max-width: 520px) {
  #section8-video {
    height: auto !important;
  }
  /* .desktop {
    display: none;
  }
  .mobile {
    display: block;
  } */

  h3 {
    font-size: 21px;
    line-height: 50px;
  }
  #mob h1 {
    width: 100%;
  }
  .main-container {
    min-width: 400px;
  }
  .part02 {
    /* width: 300px; */
    object-fit: scale-down;
    background-color: #ffffffe8;
    height: 314px;
    top: 0;
  }
  .part02 img {
    width: 75%;
    height: 300px;
  }
  .map03-p {
    width: 95%;
    margin: auto !important;
    top: 0 !important;
    right: 15px !important;
  }
  .map04-p {
    width: 95%;
    margin: auto !important;
    top: 0 !important;
    left: 15px !important;
  }
  .title-m-need {
    margin-top: 20px;
  }
  #medium-screens01,
  #medium-screens02 {
    object-fit: cover;
    height: 100%;
  }
  #medium-screens02 {
    object-position: left center;
  }
  .Scene4-img {
    height: 300px !important;
  }
  #medium-screens01 {
    object-position: center;
  }
  .last-secaa {
    /* background-color: black; */
  }
  #img_4,
  #img_5,
  #img_6 {
    object-fit: cover;
    object-position: center center;
  }
  .pin-spacer02 {
    /* height: 1100px; */
  }
  .part09-img-mobile {
    width: 100%;
    height: auto;
  }
  .part-map-mobile {
    overflow-x: hidden;
  }
  .part10-img-mobile {
    width: 100%;
    height: auto;
  }
}