/* Abouts Us */
.abov_upper1 {
  position: relative;
  overflow: visible;
  padding-top: 235px;
  background-color: var(--Base-Off-White, #FAFAFA);
  align-self: stretch;
  margin-bottom: 100px;


}


.inner_box {
  max-width: 1041px;
  text-align: center;
}

.tittle_ab {
  color: var(--Base-Off-Black, #0F0F0F);
  font-family: "Geist";
  font-size: 64px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  /* 89.6px */
  letter-spacing: -1px;
  text-transform: capitalize;
  margin-bottom: 104px;
  text-align: left;
}

.left_text {
  display: flex;
  max-width: 611px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  text-align: left;
  margin-left: 90px;
}

.left_text_black {
  display: flex;
  max-width: 611px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  text-align: left;
  margin-top: 40px;
}


.inter_sub {
  color: var(--Base-Off-Black, #0F0F0F);
  font-family: "Geist";
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  /* 56px */
  letter-spacing: -1px;
  text-transform: capitalize;
  margin-bottom: 0px;
}

.subb_light {
  color: var(--Brand-gold, #9E8361);
  font-family: "Geist";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 24px */
  margin-bottom: 0px;
}

/* .browwn_how {
  display: flex;
  max-width: 300px;
  height: 64px;
  padding: 24px 91px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  background: var(--Brand-gold, #9E8361);
  color: var(--Base-White, #FFF);
  text-align: center;
  font-family: "Montserrat";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  /* 171.429% */
/* letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 0px;
  border: none;
} */

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

/* Base button */
.browwn_how {
  display: flex;
  text-decoration: none;
  width: 300px;
  height: 64px;
  padding: 20px 45px;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  border-radius: 2px;
  background: var(--Brand-gold, #9E8361);
  color: var(--Base-White, #FFF);

  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 1.8px;
  text-transform: uppercase;

  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Hover background animation */
.browwn_how:before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  color: var(--Base-Off-Black, #0F0F0F);
  text-align: center;
  font-family: "Montserrat";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  /* 171.429% */
  letter-spacing: 1.8px;
  text-transform: uppercase;

  --progress: 100%;
  clip-path: polygon(100% 0,
      var(--progress) var(--progress),
      0 100%,
      100% 100%);

  transition: clip-path 0.25s ease;
}

/* Animate background on hover */
.browwn_how:hover:before {
  --progress: 0%;
  
}

/* Text wrapper */
.browwn_how .text-container {
  position: relative;
  overflow: hidden;
}

/* Text animation */
.browwn_how .text {
  position: relative;
  color: #fff;
  transition: color 0.2s ease;
}

/* Move text on hover */
.browwn_how:hover .text {
  animation: move-up-alternate 0.3s ease forwards;
  color: #000;

}

/* Keyframes */
@keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(80%);
  }

  51% {
    transform: translateY(-80%);
  }

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


/* Button Animation Ends */



.right_vid {

  position: absolute;
  width: 703px;
  height: 502px;
  border-radius: 2px;
  object-fit: cover;
  right: 0px;
  bottom: -70px;
}

.left_vid {
  width: 238px;
  height: 326px;
  object-fit: cover;
  border-radius: 2px;
  position: absolute;
  top: 255px;
}

.top_img {
  position: absolute;
  top: 255px;
  right: 0px;
}

.abov_upper2 {
  background-color: var(--Base-00, #1F1F1F);
  height: 600px;
  overflow: visible;
}

.inter_sub_black {
  color: var(--Base-White, #FFF);
  font-family: "Geist";
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  /* 56px */
  letter-spacing: -1px;
  text-transform: capitalize;
  margin-bottom: 0px;
}

.subb_light_black {
  color: var(--Base-04, #E9E9E9);
  font-family: "Geist";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 24px */
  margin-bottom: 0px;

}

.mid_sec_bo {
  display: flex;
  gap: 146px;
  max-width: 1310px;
  margin: 0 auto;
}

.inner_box_black {
  max-width: 1041px;
  text-align: center;
  margin-left: auto;
}

.img {
  position: relative;
}

.bilding {
  position: absolute;
  top: -166px;
  left: -65px;
}

.abov_upper3 {
  max-width: 1920px;
  align-items: center;
  margin: 0 auto;
  padding: 0px;
  background-color: #fafafa;
}

.mid_six_box {
  display: flex;
  justify-content: center;
  height: 650px;
}


.third_box1 {
  background: url(../img/pattern\ container.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 240px;
  height: 650px;
}

.tb_inner {
  display: flex;
  width: 931px;
  padding: 80px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  flex-shrink: 0;
}

.tb_tittle {
  color: var(--Base-Off-Black, #0F0F0F);
  font-family: "Geist";
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  /* 56px */
  letter-spacing: -1px;
  text-transform: capitalize;
  margin-bottom: 0px;
}

.four_bxs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.four_box {
  display: flex;
  width: 365.5px;
  height: 148px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  grid-row: 1 / span 1;
  grid-column: 1 / span 1;
}

.fb_tittle {
  color: var(--Base-Off-Black, #0F0F0F);
  font-family: "Geist";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 36px */
  letter-spacing: -0.5px;
  text-transform: capitalize;
  margin-bottom: 0px
}

.fb_text {
  color: var(--Brand-gold, #9E8361);
  font-family: "Geist";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 24px */
  margin-bottom: 0px
}

.right_vid2 {
  object-fit: cover;
  width: 701px;
  height: 650px;
}

.linnnee {
  width: 1px;
  height: 650px;
  flex-shrink: 0;
  background-color: #BDBDBD;
  margin-left: 24px;
}

.linnnee2 {
  width: 1px;
  height: 650px;
  flex-shrink: 0;
  background-color: #BDBDBD;
  margin-right: 24px;
}

.upper_odd {
  display: flex;
  max-width: 1459px;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  border-right: 1px solid var(--Base-04, #E9E9E9);
  border-bottom: 1px solid var(--Base-04, #E9E9E9);
  border-left: 1px solid var(--Base-04, #E9E9E9);
  margin: 0 auto;
}

.abov_upper4 {
  padding: 0px;
  background-color: #FFF;
}
.abov_upper5{
  padding: 0px;
  background-color: #FAFAFA;
}
.our_ddii {
  display: flex;
  padding: 104px 104px 40px 104px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}

.extra_small {
  color: var(--Brand-gold, #9E8361);
  font-family: "Geist";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 32.4px;
  /* 180% */
  margin-bottom: 0px;
  margin-right: auto;
}

.boldy_title {
  color: var(--Base-Off-Black, #0F0F0F);
  font-family: "Geist";
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  /* 56px */
  letter-spacing: -1px;
  text-transform: capitalize;
  margin-bottom: 0px;
  margin-right: auto;

}

.our_ddii2 {
  display: flex;
  padding: 64px 104px;
  align-items: center;
  gap: 80px;
  align-self: stretch;
  background: var(--Base-Off-White, #FAFAFA);
}

.only_text {
  color: var(--Base-02, #666);
  font-family: "Geist";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 24px */
  margin-bottom: 0px;
  text-align: left;
}

.last_box {
  display: flex;
  justify-content: center;
  align-items: center;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
}

.last_left_text {
  display: flex;
  padding: 80px 80px 80px 104px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1 0 0;
  align-self: stretch;
  border-top: 1px solid var(--Base-04, #E9E9E9);
  border-right: 1px solid var(--Base-04, #E9E9E9);
}


.right_vid3 {
  object-fit: cover;
  width: 720px;
  height: 506px;
}