@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

h1, h2, h3, h4, h5, h6{

	font-family: 'Poppins', sans-serif;

}

.container{

	max-width: 405px;

}

.up-down-space{

	padding: 30px 0;

}



.pic-holder {

  text-align: center;

  position: relative;

  border-radius: 50%;

  width: 150px;

  height: 150px;

  overflow: hidden;

  display: flex;

  justify-content: center;

  align-items: center;

  margin-bottom: 20px;

  background: #FFF;

}

.image-upload{

	position: relative;

	display: table;

	margin: 0 auto;

}

.image-upload::before{

	content: "";

    width: 160px;

    height: 154px;

    border-radius: 100%;

    background: #000a3b;

    position: absolute;

    left: -1px;

    top: -2px;



}



.pic-holder .pic {

 width: 50%;

  -o-object-fit: cover;

  object-fit: cover;

  -o-object-position: center;

  object-position: center;

}



.pic-holder .upload-file-block,

.pic-holder .upload-loader {

  position: absolute;

  top: 0;

  left: 0;

  height: 100%;

  width: 100%;

  background-color: rgba(90, 92, 105, 0.7);

  color: #f8f9fc;

  font-size: 12px;

  font-weight: 600;

  opacity: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.2s;

}



.pic-holder .upload-file-block {

  cursor: pointer;

}



.pic-holder:hover .upload-file-block {

  opacity: 1;

}



.pic-holder.uploadInProgress .upload-file-block {

  display: none;

}



.pic-holder.uploadInProgress .upload-loader {

  opacity: 1;

}



/* Snackbar css */

.snackbar {

  visibility: hidden;

  min-width: 250px;

  background-color: #333;

  color: #fff;

  text-align: center;

  border-radius: 2px;

  padding: 16px;

  position: fixed;

  z-index: 1;

  left: 50%;

  bottom: 30px;

  font-size: 14px;

  transform: translateX(-50%);

}



.snackbar.show {

  visibility: visible;

  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;

  animation: fadein 0.5s, fadeout 0.5s 2.5s;

}



@-webkit-keyframes fadein {

  from {

    bottom: 0;

    opacity: 0;

  }

  to {

    bottom: 30px;

    opacity: 1;

  }

}



@keyframes fadein {

  from {

    bottom: 0;

    opacity: 0;

  }

  to {

    bottom: 30px;

    opacity: 1;

  }

}



@-webkit-keyframes fadeout {

  from {

    bottom: 30px;

    opacity: 1;

  }

  to {

    bottom: 0;

    opacity: 0;

  }

}



@keyframes fadeout {

  from {

    bottom: 30px;

    opacity: 1;

  }

  to {

    bottom: 0;

    opacity: 0;

  }

}

.content{

	color: #000a3b;

	text-align: center;

}

.content h2{

	font-size: 30px;



}

.content p{

	font-size: 14px;

	line-height: 30px;

	font-family: 'Poppins', sans-serif;

}

.content p a{

  text-decoration: none;

  color: #656464;

  transition: all ease-in-out 0.3s;

}

.content p a:hover{

  color: #4590b8;

}

.heading {}

.heading h1{

	color: #000a3b;

	 text-align: center;

	 position: relative;

	 font-size: 18px;

	 text-transform: uppercase;

	 margin-bottom: 30px;

}

.heading h1::before{

	    content: "";

    background: #4590b8;

    width: 28%;

    height: 2px;

    position: absolute;

    left: 0;

    top: 50%;

}

.heading h1::after{

    content: "";

    background: #4590b8;

    width: 28%;

    height: 2px;

    position: absolute;

    right: 0;

    top: 50%;

}

.heading ul{

	list-style-type: none;

	margin-bottom: 40px;

}

.heading ul li i{

	color: #000a3b;

	width: 40px;

	height: 40px;

	line-height: 40px;

	background-color: #FFF;

	text-align: center;

	font-size: 22px;

	position: relative;

	border-radius: 100%;

		float: left;

		margin-right: 25px;

}

.heading ul li i::after{

	content: "";

    width: 45px;

    height: 44px;

    background-color: #4590b8;

    position: absolute;

    left: -1px;

    z-index: -1;

    border-radius: 100%;

    top: -2px;

}

.heading ul li{

	font-size: 16px;

    line-height: 20px;

    margin-bottom: 20px;

}

.heading ul li span{

	font-weight: bold;

	text-transform: uppercase;

	font-family: 'Poppins', sans-serif;

}

.mb-30{

	margin-bottom: 30px;

}

.heading p{

	display: table;

	margin: 0 auto;

	margin-bottom: 15px;

}

.heading p i{

	color:  #4590b8;

	margin-right: 25px;

}

.heading p a{

	text-decoration: none;

	color: #000;

	text-transform: inherit;

	font-size: 16px;

	transition: all ease-in-out 0.3s;

}

.heading p a:hover{

	color:  #4590b8;

}

.ml-50{

	margin-left: -50px;

}

.btn-primary{

	text-transform: uppercase;

	text-decoration: none;

	font-size: 16px;

	background-color:  #000a3b !important;

	border: unset !important;

	display: table;

    margin: 0 auto;

    width: 55%;

    text-align: center;

    height: 40px;

    line-height: 40px;

    border-radius: 30px;

    	font-family: 'Poppins', sans-serif;

    		transition: all ease-in-out 0.3s;

}

.btn-primary:hover{

	background-color:  #4590b8 !important;

}

.insta i::before{

	background: #d6249f;

    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

.insta a:hover{

	color: #d983c4;

}

.fb i{

	color: #2d438d !important;

}

.telegram i{

	color: #039be5 !important;

}

.whatsapp i{

	color: #54cb64 !important;

}

.heading ul li i img{

	margin-top: -5px;

}

.heading ul li a{

	text-decoration: none;

	color: #000;

	transition: all ease-in-out 0.3s;

}

.tiktok a:hover{

	color: #858585;

}

.fb a:hover{

	color: #2d438d;

}

.telegram a:hover{

	color: #0088cc;

}

.whatsapp a:hover{

	color: #54cb64;

}

.viber a:hover{

	color: #8b25a8;

}

.gcash a:hover{

  color: #0022ae;

}

.utube i{

  color: #ff0000 !important;

}

.utube a:hover{

  color: #ff0000;

}

.logo{

	text-align: center;

	margin-bottom: 30px;

}

.logo img{

	margin-bottom: 30px;

}

.logo p{

	text-align: center;

}

.input-group label{

	width: 100%;

	margin-bottom: 8px;

	text-transform: uppercase;

}

.input-group-text{

	background-color: unset;

	border-right: 0;

}

.form-control{

	border-left: 0;

}

.form-check-label a{

	text-decoration: none;

	color: #4590b8;

}

.form p{

	text-align: center;

}

.form p a{

	text-decoration: none;

	color: #4590b8;

}

.input-group p{

	width: 100%;

	text-align: right !important;margin-top: 5px;

}

.input-group p a{

	text-decoration: none;

	color: #4590b8;

}

p{

	color: #656464 !important;

}
.wos-sideTxt {
    position: fixed;
    bottom: calc(400px - 160px);
    left: calc(400px - 570px);
    transform: rotate(-90deg);
    padding: 0;
    letter-spacing: 1px;
    width: 400px;
    height: 30px;
}