@font-face {
    font-family: "Poppins-Bold";
    src: url('../fonts/Poppins-Bold.ttf') format("opentype");
}

@font-face {
    font-family: "Poppins-Medium";
    src: url('../fonts/Poppins-Medium.ttf') format("opentype");
}

@font-face {
    font-family: "Poppins-Regular";
    src: url('../fonts/Poppins-Regular.ttf') format("opentype");
}

@font-face {
    font-family: "Poppins-SemiBold";
    src: url('../fonts/Poppins-SemiBold.ttf') format("opentype");
}

.fade-enter-from{
  transform: translate(900px); 
 }
 .fade-enter-active{
   transition: all 2s ease;
 }
 
 .fade-leave-to{
  transform: translate(900px);
 }
 .fade-leave-active{
   transition: all 2s ease;
 }

 .picture-enter-from{
  transform: translateY(900px); 
 }
 .picture-enter-active{
   transition: all 2s ease;
 }
 
 .picture-leave-to{
  transform: translateY(900px); 
 }
 .picture-leave-active{
   transition: all 1s ease;
 }

 .summary-enter-from{
  transform: translate(-1500px); 
 }
 .summary-enter-active{
   transition: all 2s ease;
 }
 
 .summary-leave-to{
  transform: translate(1500px); 
 }
 .summary-leave-active{
   transition: all 1s ease;
 }

 .red_border{
  border: 1px solid rgb(247, 13, 13) !important;
}
 body {
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll; 
}

body::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}
/* #app {
  z-index: -10;
  background-image: linear-gradient(135deg, #f8f8f8, #ACE9F2);
  
} */
@media(min-width:1920px){
#app {
  height: 100vh;
}
}
/* .fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
} */
/* #app {
    background-image: linear-gradient(135deg, #f8f8f8, #ACE9F2);
} */


/* .row{
  margin-left: 0px !important;
  margin-right: 0px !important;
}
.col-6{
  padding-right: 0px !important;
  padding-left: 0px !important;
}
.mynav{
  padding:30px 130px 0px 150px;
 
}
.mynav .logo{
  width: 256px;
  height: 51px;
}
.mynav ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.mynav .left{
  float: left;
}
.mynav .right{
  float: right;
}
.mynav .navlink a{
  font-family: Poppins-Bold;
  font-size: 22px;
  line-height: 12px;
  color: #3b6a68;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  display: block;
  opacity: 1;
  padding: 21px 25px;
  
}
.mynav  .btn-signin{
  width: 140px;
  height: 60px;
  border-radius: 8px;
  background-color: #ffffff;
  border: 1px solid #3b6a68;
  opacity: 1;
}
.mynav .signin{
  text-align: center;
  font-family: "Poppins-Bold";
  font-size: 22px;
  line-height: 12px;
  color: #3b6a68;
  font-weight: 700;
  padding-top: 21px;
}
.mynav .signdiv{
  padding:0px 30px 0px 35px
}
.mynav  .btn-help{
  width: 182px;
  height: 60px;
  border-radius: 8px;
  background-color:#62AFB3;
  opacity: 1;
}
.mynav .help{
  text-align: center;
  font-family: "Poppins-Bold";
  font-size: 22px;
  line-height: 12px;
  color: #ffffff;
  font-weight: 700;
  padding-top: 21px;

}
.category_container{
  width: 100%;
  height: 100%;
  position: relative;
}
.category_page{
  width: 100%;
  height: 800px;
  background-color: rgba(172,233,242,0.1803921568627451);
  position: absolute;
}
.upper_category{
  text-align: center;
  padding: 27px 129px 0px 127px;
}
.blue_bar{
  width: 1664px;
  height: 66px;
  background-color: #23a0fb;
  font-size: 22px;
  line-height: 40px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Poppins-Regular";
}
.blue_bar .text{
  padding-top: 11px;
}
.intro{
  padding-top:66px;
}
.intro .intro_text .bold{
  width: 563px;
  height: 220px;
  font-size: 50px;
  line-height: 54px;
  color: #3b6b69;
  font-weight: 700;
  font-family: "Poppins-Bold";
  text-align: left;
}
.intro .intro_text .small{
  width: 674px;
  height: 64px;
  font-size: 20px;
  line-height: 24px;
  color: #3b6b69;
  font-weight: 500;
  font-family: "Poppins-Medium";
  text-align: left;
}
.intro .intro_text .paginate{
  padding-top: 117px;
}
.intro .intro_text .paginate .paginate_box{
  width: 202px;
  height: 46px;
  border-radius: 23px;
  background-color: #62afb3;
}
.intro .intro_text .paginate .paginate_box .number_wrap{
  padding-top: 8px;
  display: flex;
  justify-content: space-evenly;
}
.intro .intro_text .paginate .paginate_box .round{
  width: 29px;
  height: 29px;
  border-radius: 15px;
  background-color: #3b6b69;
}
.intro .intro_text .paginate .paginate_box .round .number{
  font-size: 20px;
  line-height: 24px;
  color: #fafafa;
  font-weight: 700;
  padding-top: 2px;
  font-family: "Poppins-bold";
}
.intro .intro_text .paginate .paginate_box .number{
  font-size: 20px;
  line-height: 24px;
  color: #3b6b69;
  font-weight: 700;
  padding-top: 2px;
  font-family: "Poppins-bold";
}
.intro .intro_pic .intro_img{
  border-radius: 15px;
}
.below_category{
  display: flex;
  justify-content: space-evenly;
  padding-left:460px;
  padding-top: 764px;

}
.category{
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 296px;
  height: 282px;
  border-radius: 24px;
  filter: drop-shadow(0px 3px 3.5px rgba(0,0,0,0.16));
  background-color: #ffffff;
  transition: 0.5s ease;
  cursor: pointer;
}
.category:hover {
  transform: scale(1.1);
  box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
  z-index: 1;
}
.category .image_wrap{
   text-align: center;
   padding-top: 57px;
  
}
.category .text{
  font-size: 20px;
  color: #3b6b69;
  font-weight: 600;
  font-family: "Poppins-SemiBold";
  text-align: center;
  padding-top: 22px;
}
.category_img_sample{
  clip-path: circle();
  width: 138px;
}
.category_img_radio{
  clip-path: circle();
  width: 280px;
}
.category_img_vaccine{
  clip-path: circle();
  width: 137px;
}
.category_img_procedure{
  clip-path: circle();
  width: 240px;
} */