.welcome-body {
  /* background-color:#30003e;  */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.nav-img{
  height: auto;
  max-width: 450px;
  width: 80vw;
  margin: auto;
}
.justify{
  text-align: justify;
}
.welcome-body-first {
  background-color:#D1E5DD; 
  background-image: url(../img/2-Bonifacio-monument.webp);
    background-repeat: repeat-x;
    background-size: auto 100vh;
    background-position-x: center;
}
.btn-outline-info:hover {
  color: #fff;
  background-color:#FF5722;
  border-color:#FF5722;
}
.sample-id{
  padding: 50px 30px;
  background-color:#B3E5FC;
  height: 300px;
}

.btn-outline-info {
  color: #FF5722;
  background-color: transparent;
  background-image: none;
  border-color: #FF5722;
}
.cover-wrap{
  position: absolute;
  height: 100vh;
  width: 100vw;
  top: 0;
  background-color: #d1e5dddb;
}

.container.welcome-container {
  margin-top:5vh;
}
.language-text {
  padding-top:2%;
  padding-left:20px;
}
.text-orange{
  color: #FF5722;
}
.country-img {
  height:40px;
}

.welcome-logo{
  height: auto;
  width: 49%;
}
.text-note{
  font-size: .7em;
  font-weight: 500;
    float: right;
    /* padding-top: 8px; */
    margin: 0;
    color: red;
    font-style: italic;
}
.h-welcome {
  color:#17B978;
  font-family:Zen Antique;
  font-size:4em;
  font-style:normal;
  font-weight:400;
  line-height:.8em;
  letter-spacing:-2.4px;
  margin:0;
}
.green-tet {
  color:#17B978;
  font-size:1.2em;
}

img.capture-Image{
  height:300px;
  width:300px;
  object-fit: cover;
}
video.capture-Image {
  height: 300px;
  width: 300px;
  object-fit: cover; /* This ensures the video maintains its aspect ratio within the specified size */
  
}
.flip-video {
  transform: scaleX(-1);
}

img#initial-image {
  display: none;
  /* You can add additional styles to position or adjust the appearance of the initial-image */
}
/* Styles for the camera container */
.camera-container {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;

}

/* Styles for the circular overlay */
.face-mask-old {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 120%;
  pointer-events: none; /* Prevent overlay from blocking clicks */
  z-index: 2; /* Place the overlay above the video element */
  /* background-image: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.5) 40%); Elliptical gradient backgroundCircular gradient background */
  background-image:url('../img/avatar-guide2.svg'); /* Elliptical gradient background *//* Circular gradient background */
  /* background-image:radial-gradient(ellipse, transparent 40%, rgba(0, 0, 0, 0.5) 40%); Elliptical gradient backgroundCircular gradient background */
  background-size: 100% 100%; /* Adjust background size to cover the entire element */
  background-blend-mode: difference; /* Invert the mask */
  /* display: none; */
  opacity:0.4;
}
.face-mask
{    
  position: absolute;
  top: -7%;
  left: -10%;
  width: 120%;
  height: 115%;
  pointer-events: none;
  z-index: 2;
  background-image: url(../img/avatar-guide2.svg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-blend-mode: difference;
  /* display: none; */
  opacity: 0.4;
}
.gradient-custom-2 {
  /* fallback for old browsers */
  background: #76dd78;

  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(90deg, rgba(118, 221, 120, 1) 25%, rgba(255, 218, 79, 1) 67%, rgba(255, 160, 1, 1) 100%);

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(90deg, rgba(118, 221, 120, 1) 25%, rgba(255, 218, 79, 1) 67%, rgba(255, 160, 1, 1) 100%);
}

@media (min-width: 768px) {
  .gradient-form {
    height: 100vh !important;
  }
}

@media (min-width: 769px) {
  .gradient-custom-2 {
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem;
  }
}