@font-face {
  font-family: Gilroy-light;
  src: url(../fonts/Gilroy-Light.otf);
}

@font-face {
  font-family: Gilroy-reg;
  src: url(../fonts/Gilroy-Regular.otf);
}


@font-face {
  font-family: Gilroy-semi;
  src: url(../fonts/Gilroy-Semibold.otf);
}

@font-face {
  font-family: Gilroy-bold;
  src: url(../fonts/Gilroy-Bold.otf);
}

.custom-border-radius{
  border-radius: 15px !important;
}

.custom-primary-color{
  color: #3D81FF !important;
}

.custom-secondary-color{
  color: #30B994 !important;
}

.font-weight-light {
  font-weight: 300 !important;
  font-family: Gilroy-light;
}

.font-weight-lighter {
  font-weight: lighter !important;
}

.font-weight-normal {
  font-weight: 400 !important;
  font-family: Gilroy-reg;
}

.font-weight-bold {
  font-weight: 700 !important;
  font-family: Gilroy-semi;
}

.font-weight-bolder {
  font-weight: bolder !important;
  font-family: Gilroy-bold;
}

/*------------------------------------
Projects Colors
------------------------------------*/

.color-maymay{
  color: #e84b87 !important; 
}
.color-bg-maymay{
  background-color: #e84b87 !important;
}
.color-myotaw{
  color: #08C299 !important; 
}
.color-bg-myotaw{
  background-color: #08C299 !important;
}
.color-pyopyomay{
  color: #FAB2AC !important; 
}
.color-bg-pyopyomay{
  background-color: #FAB2AC !important;
}
.color-myankhon{
  color: #884b96 !important; 
}
.color-bg-myankhon{
  background-color: #884b96 !important;
}
.color-doctornote{
  color: #2F8EFF !important; 
}
.color-bg-doctornote{
  background-color: #2F8EFF !important;
}
.color-lannpya{
  color: #1BAAF5 !important; 
}
.color-bg-lannpya{
  background-color: #1BAAF5 !important;
}



.btn-grad {background-image: linear-gradient(to right, #3D81FF 0%, #30B994  51%, #3D81FF  100%)}
.btn-grad {
   margin: 10px;
   padding: 12px 40px;
   text-align: center;
   /* text-transform: uppercase; */
   transition: 0.5s;
   background-size: 200% auto;
   color: white !important;            
   -webkit-box-shadow: 0px 8px 15px 1px #D8D8D8; 
   box-shadow: 0px 8px 15px 1px #D8D8D8;
   border-radius: 15px;
   display: inline-block;
   text-align: center;
    vertical-align: middle;
 }

 .btn-grad:hover {
   background-position: right center; /* change the direction of the change here */
   color: #fff;
   text-decoration: none;
   cursor: pointer;
 }

 .gradient-text{
  background: linear-gradient(to right, #3D81FF 0%, #30B994 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bolder !important;
 }

 .gradient-bg{
  background: #3D81FF;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #3D81FF, #30B994);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #3D81FF, #30B994); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  
 }

 .navbar-nav-item a:hover{
  background: linear-gradient(to right, #3D81FF 0%, #30B994 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
 }

 .grad-link:hover{
  background: linear-gradient(to right, #3D81FF 0%, #30B994 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: bolder;
 }

 @media (max-width: 768px)
{
 .home-display-font{
   font-size: 1.5rem;
 }

 .meekin-proj-text{
  font-size: 1rem;
  padding: 10px !important;
 }

}