.image-page-langing {
    width: 140%;
    height:98vh;
    object-fit: cover;
    z-index: -1;
}

.footer-page-langing {
  width=100vw;
  background-color: #323232;
  min-height: 25px;
  padding: 15px 0;    
}

.grid-container-page-langing {
  background-color: #323232;
  display: flex;
  justify-content: space-evenly;
  min-height: 150px;
}

.grid-container2-page-langing {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width=100vw;
  background-color: #6d6d6d;
  min-height: 50px;
  padding: 10px;
}

.grid-item2-page-langing:hover .quote2-img-page-langing {
  
  visibility: visible;
  opacity: 1;
}

.quote-img-page-langing{
  margin: 10px 0;
  font-size: 1vw;
  max-height: 50px;
  color: #6d6d6d;
} 

.quote2-img-page-langing{
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(109, 109, 109, 0.90);
  text-align: center;
  align-item: center;
  justify-content: center;
  color: #f3f3f3;
  visibility: hidden;
  opacity: 0;

  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

.quote2-img-page-langing div {
    width: 100%;
    height: 100%;
  align-item: center;
    text-align: center;
}

.grid-item-page-langing {
  padding: 15px 0;
  font-size: 2vw;
  color: #f3f3f3;
  text-align: center;
}

.grid-item2-page-langing {
  position: relative;
  padding: 15px;
  font-size: 12px;
  color: #f3f3f3;
  text-align: center;
}

.guaranty-section-lp {
  padding: 15px;
  font-size: 12px;
  color: #f3f3f3;
  width: 200px;
  text-align: center;
}

.centered-text {
  text-align: center;
}

.youtube-landing {
    overflow: hidden;
    position: relative;
}

.youtube-video {
  width: 90%;
  padding: 20px;
  margin-left: auto;
  margin-right: auto;
}

.centered-youtube-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3; /* Specify a stack order in case you're using a different order for other elements */
}

.youtube-landing-overlay {
  position: absolute; /* Sit on top of the page content */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  background-color: rgba(243,243,243,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
}

.hero-section-overlay {
  position: absolute; /* Sit on top of the page content */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  background-color: rgba(50,50,50,0.25); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
}

.feature-icon  {
    font-size: 48px;
}

.grid-item2-page-langing p {
    font-size: 18px;
    text-transform: uppercase;
}

.userpic-lp-sect {
    overflow: hidden;
    position: relative;
    height: 630px;
}

.spec-lp-sect {
  background-color: #6d6d6d;
}
.app-lp-sect {
  background-color: #323232;
}

.image1-user-landing {
    position: absolute;
    width: 430px;
    height: 356px;
    top: 10%;
    left: 5%;
    z-index: 3;
}
.image2-user-landing {
    position: absolute;
    width: 382px;
    height: 261px;
    top: 45%;
    left: 45%;
    z-index: 2;
}
.image3-user-landing {
    position: absolute;
    width: 436px;
    height: 291px;
    top: 30%;
    left: 69%;
    z-index: 1;
}

.grid3-container-page-langing {
  display: flex;
  justify-content: space-evenly;
}

.userpic-lp-sect img {
  transition: transform .2s; 
}

.userpic-lp-sect img:hover {
  transform: scale(1.2);
  z-index: 3;
}