@font-face {
    font-family: "Avus";
    src: url("../fonts/Avus-Regular.ttf");
 }
 html {
    scroll-behavior: smooth !important;
  }
*{
    margin: 0;
    padding:0;
    font-family: "Avus";
    box-sizing: border-box;
}
.extra-space{
    height:100px;
     width:100%; 
     clear:both;
  }
  .extra-sm-space{
    height:20px;
     width:100%; 
     clear:both;
  }
  .extra-tiny-space{
    height:10px;
     width:100%; 
     clear:both;
  }
  /* video section */
  .video__flex{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
  }
  .video_item{
      flex: 50%;
  }

  /* service flex */
.service-flex{
    display: flex;
    flex-flow: row wrap;
    }
    .service-flex .fa{
        font-size:50px;
    }
    
    .service-flex-item{
        flex: 1 0 21%; 
      margin: 10px;
      /* height: 100px; */
      /* background-color: blue; */
     text-align: center;
    }
    
    .service-flex-item .card{
        border: none !important;
        box-shadow: 0 0 1px;
    }
    
.hero-image {
  
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/safeup/DMP_6779.jpg");
  
    /* Set a specific height */
    height: 80vh;
  
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
  
  /* Place text in the middle of the image */
  .hero-text {
    text-align: center;
    position: absolute;
    top: 40%;
    left: 30%;
    transform: translate(-50%, -50%);
    color: white;
  }
  .live__tracker{
      display: flex;
      justify-content: center;
      flex-flow: row wrap;
  
  }
  .col-sm-4{
      margin: 1px;
      /* text-align: center; */
      /* padding: 1vh; */
  }
  .font__size{
      font-weight: 600;
  }
  .how__to__wear__masks{
      display: flex;
      align-items: center;
      /* justify-content: center; */
      flex-flow: row ;
  }
  .how__to{
      flex: 50%;
  }
  .how__to__bg{
      display: flex;
      background-color:#f7f7f0;
      min-height: 80vh;
     
  }
  .how__to{
      margin: 1vh;
  }
  .nav-link{
    /* color: white !important; */
    background-color: white;
    margin: 3px;
    padding: 0 16px !important;
    /* border: 1px solid white; */
}  
.nav-link:hover{
    background-color: transparent;
}
#mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link {
    color: #212529 !important;
}

/* introduction */
.introduction{
    /* color: #ffffff; */
    text-align: center;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
   
}

.introduction h3, .introduction p{
    margin: 0;
  /* text-shadow: 0px 1px 4px #23430C; */
  text-align: center;
  width: 50%;
}
.porfolio__block{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.portfolio__section{
    min-height: 80vh;
    display: flex;
    align-items: center;
    flex-flow: row wrap;
}

.find-flex{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    min-height: 300px;
    text-align: center;
    align-items: center;
}


.vert .carousel-item-next.carousel-item-left,
.vert .carousel-item-prev.carousel-item-right {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.vert .carousel-item-next,
.vert .active.carousel-item-right {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100% 0);
}

.vert .carousel-item-prev,
.vert .active.carousel-item-left {
-webkit-transform: translate3d(0,-100%, 0);
        transform: translate3d(0,-100%, 0);
}
@media screen and (max-width:640px) {
    .hero-image {
  
        height: 70vh;
      
       
       
      }
      .hero-text {
        text-align: center;
        position: absolute;
        top: 60%;
        left: 35%;
        transform: translate(-50%, -50%);
        color: white;
      }
      .hero-text h1{
          font-size:x-large;
      }
      .hero-text p{
          display: none;
      }
      .introduction h3, .introduction p{
        width: 100%;
    }
    .service-flex{
        flex-flow: column wrap;
        }
        .video__flex{
            /* display: flex; */
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
        }
        .portfolio__section{
            min-height: 80vh;
            display: flex;
            align-items: center;
            flex-flow: row wrap;
        }
        
        /* #mainNav {
           
            background-color: rgba(0, 0, 0, 0.809) !important;
            color: white !important;
            
        } */
}
/* @media only screen and (min-width: 768px) {
        
.hero-image {
  
    height: 50vh;
  
   
  }
} */