:root {
  --lvs-panel-bg: #e6e7e8;
  --lvs-footer-height: 450px;
  --lvs-primary-rgb: 35, 31, 32;
  --lvs-secondary-rgb: 14, 51, 28;
  --lvs-tertiary-rgb: 195, 170, 138;

  --bs-primary-rgb: var(--lvs-primary-rgb);
  --bs-secondary-rgb: var(--lvs-secondary-rgb);
}

/* Fonts */
@font-face {
  font-family: ATSackersGothic;
  src: url(../fonts/Sackers-Gothic-Medium-AT-Regular.woff) format("woff");
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: ATSackersGothic;
  src: url(../fonts/AT-Sackers-Gothic-Medium.woff) format("woff");
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: SackersGothic;
  src: url(../fonts/SackersGothicStd-Light.woff) format("woff");
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: SackersGothic;
  src: url(../fonts/SackersGothicStd-Medium.woff) format("woff");
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: SackersGothic;
  src: url(../fonts/SackersGothicStd-Heavy.woff) format("woff");
  font-style: normal;
  font-weight: 900;
}

@font-face {
  font-family: SourceSerif;
  src: url(../fonts/SourceSerif4-Light.woff) format("woff");
  font-style: normal;
  font-weight: 300;
}
@font-face {
  font-family: SourceSerif;
  src: url(../fonts/SourceSerif4-Regular.woff) format("woff");
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: SourceSerif;
  src: url(../fonts/SourceSerif4-Medium.woff) format("woff");
  font-style: normal;
  font-weight: 500;
}

body {
  --bs-body-font-family: SackersGothic;
}

.fs-7 {
  font-size: 0.7rem;
}

.fs-8 {
  font-size: 0.5rem;
}

.fw-400 {
  font-weight: 400;
}

.fw-900 {
  font-weight: 900;
}

.ff-serif {
  font-family: SourceSerif !important;
}

.ff-alt {
  font-family: ATSackersGothic !important;
}

.ls-1 {
  letter-spacing: 1rem;
}

.ls-2 {
  letter-spacing: 0.75rem;
}

.ls-3 {
  letter-spacing: 0.5rem;
}

.ls-4 {
  letter-spacing: 0.25rem;
}

.text-tertiary {
  color: rgba(var(--lvs-tertiary-rgb), 1);
}

.watermark {
  background-image: url(../images/lvs-v.svg);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  mix-blend-mode: multiply;
  width: 100%;
  height: 100vh;
}

.vertical-divider {
  height: 60px;
  width: 1px;
  background-color: rgba(var(--lvs-primary-rgb), 1);
}

.rotate-y {
  transform: rotateY(180deg);
}

.panel-bg {
  background-color: var(--lvs-panel-bg);
  width: 65%;
  height: 65%;
  z-index: 0;
}

.lvs-logo {
  width: 25%;
}

/* header section */
header {
  --lsv-header-height-vh: 95;
  height: calc(var(--lsv-header-height-vh) * 1vh);
  height: calc(var(--lsv-header-height-vh) * 1dvh);
  background-color: #c6c6c6;
  background-image: url("../images/header-bg/header-bg-2560w.jpg");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: bottom;
  background-size: contain;
}

header .watermark {
  left: -30%;
}

/* Header Menu */
body:has(#headerMenu.show) {
  overflow-y: hidden;
}

.header-backdrop {
  display: none;
  z-index: 1040;
  background-color: #000;
  opacity: 0;
}

.header-backdrop.show {
  display: block;
  opacity: 0.5;
}

#headerMenu {
  display: none;
  background-color: #b2b3b2;
  width: 40vw;
  height: 100vh;
  height: 100dvh;
  z-index: 1045;
}

#headerMenu.show {
  display: flex !important;
}

#headerMenu .btn-close {
  --bs-btn-close-color: white;
  --bs-btn-close-hover-opacity: 1;
  --bs-btn-close-opacity: 1;
  filter: invert(1) brightness(1);
}

#headerMenu .btn-close:focus {
  box-shadow: unset;
}

#headerMenu .header-footer-logo {
  width: 80px;
}

/* Burger Button */
.btn-burger {
  width: 70px;
  z-index: 10;
}

.btn-burger:active {
  --bs-btn-active-border-color: transparent;
}

.btn-burger > span {
  background-color: white;
  height: 3px;
  margin: 3px 0;
}

/* #team */
#team .watermark {
  bottom: 0;
  z-index: 50;
  height: 1030px;
}

#team .panel-bg {
  width: 80%;
  height: 600px;
}

#team .panel-bg.panel-bg-top {
  top: -50px;
  height: 1100px;
  width: 60%;
}

/* footer */
footer {
  background-color: var(--lvs-panel-bg);
  height: var(--lvs-footer-height);
}

footer .watermark {
  --lvs-footer-offset: 234px;
  height: calc(var(--lvs-footer-height) + var(--lvs-footer-offset));
  top: calc(var(--lvs-footer-offset) * -1);
}

/* #aboutUs */

.small-border::before,
.small-border::after {
  content: "";
  display: block;
  width: 85px;
  height: 2px;
  background-color: rgba(var(--lvs-tertiary-rgb), 1);
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.small-border-center::before,
.small-border-center::after {
  margin-left: auto;
  margin-right: auto;
}

.small-border-left::before,
.small-border-left::after {
  margin-left: -1.5rem;
}

.small-border-right::before,
.small-border-right::after {
  margin-left: auto;
  margin-right: -1rem;
}
#firstMemberColumn .ribbon {
  right: -200px;
  width: 50%;
}

#firstMemberColumn img,
#secondMemberColumn img,
#thirdMemberColumn img,
#fourthMemberColumn img {
  width: 350px;
}

#firstMemberColumn img,
#thirdMemberColumn img,
#thirdMemberColumn .third-member-overlap {
  right: -100px;
}

#firstMemberColumn .first-member-overlap {
  right: -80px;
}

#secondMemberColumn {
  left: -130px;
}

#fourthMemberColumn .fourth-member-overlap {
  left: -100px;
}
#fourthMemberColumn {
  left: -10px;
}

#banner p {
  width: 50%;
}

@media screen and (max-width: 1199px) {
  .lvs-logo {
    width: 30%;
  }

  #team .panel-bg.panel-bg-top {
    height: 1250px;
  }

  #team .watermark {
    height: 1108px;
  }
}

@media screen and (max-width: 1020px) {
  header .watermark {
    width: calc(100% + 30%);
  }
}

@media screen and (max-width: 991px) {
  header {
    --lsv-header-height-vh: 50;
  }
  #headerMenu {
    width: 65vw;
  }

  #firstMemberColumn img {
    bottom: -50px;
    right: -16px;
  }

  #firstMemberColumn .ribbon {
    right: -120px;
    bottom: 0;
  }

  #firstMemberColumn p {
    width: 75%;
    align-self: flex-end;
  }

  #firstMemberColumn .first-member-overlap {
    right: 0;
    align-self: flex-end;
  }

  #secondMemberColumn {
    left: 0;
  }

  #secondMemberColumn img {
    position: relative;
    align-self: center;
    left: -80px;
  }

  #secondMemberColumn p {
    width: 75%;
    align-self: flex-start;
  }

  #thirdMemberColumn img {
    right: -16px;
  }

  #thirdMemberColumn p {
    width: 75%;
    align-self: flex-end;
  }

  #thirdMemberColumn .third-member-overlap {
    right: 0;
    align-self: flex-end;
  }

  #fourthMemberColumn {
    left: 0;
  }

  #fourthMemberColumn img {
    position: relative;
    left: 25px;
  }

  #fourthMemberColumn p {
    width: 75%;
    align-self: flex-start;
  }

  #fourthMemberColumn .fourth-member-overlap {
    left: 0;
  }

  #banner p {
    width: 75%;
  }
}

@media screen and (max-width: 767px) {
  #headerMenu {
    width: 100vw;
  }
  .lvs-logo {
    width: 40%;
  }
}

@media screen and (max-width: 576px) {
  .small-border-right::before,
  .small-border-right::after {
    /* margin-right: 1rem; */
  }

  #firstMemberColumn img,
  #secondMemberColumn img,
  #thirdMemberColumn img,
  #fourthMemberColumn img {
    width: 100%;
  }

  #firstMemberColumn img {
    right: 0;
  }

  #secondMemberColumn img {
    left: 0;
  }

  #fourthMemberColumn img {
    left: 0;
  }

  #firstMemberColumn .ribbon {
    right: -90px;
  }

  #firstMemberColumn .first-member-overlap {
    margin-right: auto;
  }

  #firstMemberColumn p {
    width: 100%;
  }

  #secondMemberColumn p {
    width: 100%;
  }

  #thirdMemberColumn img {
    right: 0;
  }

  #thirdMemberColumn .third-member-overlap {
    /* margin-right: auto; */
  }

  #thirdMemberColumn p {
    width: 100%;
  }

  #fourthMemberColumn p {
    width: 100%;
  }

  #banner p {
    width: 100%;
  }

  #team .panel-bg{
    width: 50%;
  }
}