.container2
{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px 0;
  text-shadow:1px 0px 1px black;
}

.container2 .box
{
  position: relative;
  width: 220px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 30px;
  transition: 0.5s;
}

.container2 .box::before
{
  content:'';
  position: absolute;
  top: 0;
  left: 50px;
  width: 50%;
  height: 100%;
  text-decoration: none;
  background: #fff;
  border-radius: 8px;
  transform: skewX(15deg);
  transition: 0.5s;
}

.container2 .box::after
{
  content:'';
  position: absolute;
  top: 0;
  left: 50;
  width: 50%;
  height: 100%;
  background: #fff;
  background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
  transform: rotateZ(60deg) translate(-5em, 7.5em);
  transform: skewX(15deg);
  transition: 0.5s;
  filter: blur(20px);
}

.container2 .box:hover:before,
.container2 .box:hover:after
{
  transform: skewX(0deg);
  left: 20px;
  width: calc(100% - 50px);
  transition: transform 0.7s ease-in-out;
}

.container2 .box:nth-child(1):before,
.container2 .box:nth-child(2):before,
.container2 .box:nth-child(3):before,
.container2 .box:nth-child(4):before,
.container2 .box:nth-child(1):after,
.container2 .box:nth-child(2):after,
.container2 .box:nth-child(3):after,
.container2 .box:nth-child(4):after
{
 -moz-box-shadow:inset 0px -1px 15px 1px #fafafa;
 -webkit-box-shadow:inset 0px -1px 15px 1px #fafafa;
 box-shadow:inset 0px -1px 15px 1px #fafafa;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0cbff5), color-stop(1, #0c33f5) );
 background:-moz-linear-gradient( center top, #0cbff5 5%, #0c33f5 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0cbff5', endColorstr='#0c33f5');
 background-color:#0cbff5;
 -moz-border-radius:7px;
 -webkit-border-radius:7px;
 border-radius:7px;
 border:1px solid #fafafa;
}

.container2 .box span
{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  pointer-events: none;
}

.container2 .box span::before
{
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: 0.1s;  
  animation: animate 2s ease-in-out infinite;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08)
}

.container2 .box:nth-child(1):hover span::before
{
  background-image: url('https://regmed.uz/images/med_dev_doc.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50% auto;
  top: -50px;
  left: 50px;
  width: 100px;
  height: 100px;
  opacity: 1;
}

.container2 .box:nth-child(2):hover span::before
{
  background-image: url('https://regmed.uz/images/services_med_dev.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50% auto;
  top: -50px;
  left: 50px;
  width: 100px;
  height: 100px;
  opacity: 1;
}

.container2 .box:nth-child(3):hover span::before
{
  background-image: url('https://regmed.uz/images/state_duty.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50% auto;
  top: -50px;
  left: 50px;
  width: 100px;
  height: 100px;
  opacity: 1;
}

.container2 .box:nth-child(4):hover span::before
{
  background-image: url('https://regmed.uz/images/syringe.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50% auto;
  top: -50px;
  left: 50px;
  width: 100px;
  height: 100px;
  opacity: 1;
}

.container2 .box span::after
{
  background-size:cover;
  content:"";
  color: white;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: 0.5s;
  animation: animate 2s ease-in-out infinite;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  animation-delay: -1s;
}

.container2 .box:hover span:after
{
  background-image: url('https://regmed.uz/favicon/logo_white.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50% auto;
  bottom: -50px;
  right: 50px;
  width: 100px;
  height: 100px;
  opacity: 1;
}

@keyframes animate
{
  0%, 100%
  {
    transform: translateY(10px);
  }
  
  50%
  {
    transform: translate(-10px);
  }
}

.container2 .box .content
{
  position: relative;
  left: 0;
  padding: 5px 15px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: rgba(3, 138, 255, 0.25) 0px 50px 100px -20px, rgba(255, 255, 255, 0.3) 0px 30px 60px -30px, rgba(3, 138, 255, 0.35) 0px -2px 6px 0px inset;
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  z-index: 1;
  transform: 0.5s;
  color: #fff;
}

.container2 .box:hover .content
{
  left: -5px;
  padding: 40px 20px;
  transition: padding 0.7s ease-in-out;
}

.container2 .box .content h4
{
  font-size: 20px;
  text-align: center;
  color: #fff;
  margin-bottom: 10px;
}

.container2 .box .content p
{
  font-size: 15px;
  text-align: left;
  margin-bottom: 10px;
  line-height: 1.4em;
}

.container2 .box .content a
{
  display: inline-block;
  text-align: center;
  font-size: 14px;
  color: #ffffff;
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  border:1px solid #fafafa;
  text-decoration: none;
  font-weight: 700;
  margin: 5px 50px 10px 40px;
  -moz-box-shadow:inset 0px -1px 15px 1px #fafafa;
  -webkit-box-shadow:inset 0px -1px 15px 1px #fafafa;
  box-shadow:inset 0px -1px 15px 1px #fafafa;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0cbff5), color-stop(1, #0c33f5) );
  background:-moz-linear-gradient( center top, #0cbff5 5%, #0c33f5 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0cbff5', endColorstr='#0c33f5');
  background-color:#0cbff5;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}

.container2 .box .content a:hover
{
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0c33f5), color-stop(1, #0cbff5) );
  background:-moz-linear-gradient( center top, #0c33f5 5%, #0cbff5 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0c33f5', endColorstr='#0cbff5');
  background-color:#0c33f5;
  transform: scale(1.1);
  transition: transform 0.8s ease-in-out;
}

.container2 .box .content a:active
{
  transform: scale(0.8);
  transition: transform 0.5s ease-in-out;
}

.box__decor {
  width: 50px;
  height: 15px;
  background-color: rgba(255, 255, 255, 0.85);
  position: absolute;
  left: 0;
  top: -30px;
  z-index: 2;
  animation: decor 16s linear infinite;
  box-shadow: 0 0 41px #fff, 0 2px 13px #fff;
  border-radius: 50%;
}

@keyframes decor {
	0% {
		left: -28px;
    top: -10px;
    transform: scale(0) rotate(0deg);
	}
  12% {
    transform: scale(1) rotate(0deg);
  }
  23% {
    transform: scale(0) rotate(0deg);
  }
	25% {
		left: calc( 100% - 23px );
    top: -10px;
    transform: scale(0) rotate(90deg);
	}
  38% {
    transform: scale(1) rotate(90deg);
  }
  49% {
    transform: scale(0) rotate(90deg);
  }
	50% {
		left: calc( 100% - 23px );
    top: calc( 100% - 6px );
    transform: scale(0) rotate(0deg);
  } 
  62% {
    transform: scale(1) rotate(0deg);
	}
  74% {
    transform: scale(0) rotate(0deg);
  }
  75% {
    left: -28px;
    top: calc( 100% - 6px );
    transform: scale(0) rotate(90deg);
  }
  88% {
    transform: scale(1) rotate(90deg);
  }
  99% {
    transform: scale(0) rotate(90deg);
  }
  100% {
    left: -28px;
    top: -30px;
    transform: scale(0) rotate(90deg);
  }
}

.shine {
  position: absolute;
  height: 250%;
  width: 70px;
  top: 0;
  left: -60px;
  background: linear-gradient(90deg, #ffffff00, #ffffff75, #ffffff00);
  transform: rotate(45deg) translateY(-35%);
  animation: shine 3s ease infinite;
}

@keyframes shine {
  0% {
    left: -350px;
  }
  40% {
    left: 200px;
  }
  100% {
    left: 200px;
  }
}

@media only screen and (max-width: 800px) {
	
.container2
{
  padding: 0;
}
	
.container2 .box
{
  width: 200px;
  height: 370px;
  top: 50px;
  margin: 10px 20px;
}
	
.container2 .box::before
{
  width: 50%;
  height: 75%;
  top: 50px;
}

.container2 .box::after
{
  width: 50%;
  height: 75%;
  top: 50px;
}
	
.container2 .box .content
{padding: 0 7px;}

.container2 .box:hover .content
{padding: 20px 10px;}
 	
.container2 .box .content h4 {font-size: 1.2em;}

.container2 .box .content p {font-size: 0.9em; margin-right: 12px;}

.container2 .box .content a {font-size: 0.7em; margin: 5px;}
	
.container2 .box:nth-child(1):hover span::before,
.container2 .box:nth-child(2):hover span::before,
.container2 .box:nth-child(3):hover span::before,
.container2 .box:nth-child(4):hover span::before,
.container2 .box:nth-child(5):hover span::before,
.container2 .box:nth-child(6):hover span::before
{
  background-size: 60% auto;
  top: 20px;
  left: 70px;
  width: 60px;
  height: 60px;
}
	
.container2 .box:hover span:after
{
  background-size: 60% auto;
  bottom: 10px;
  right: 70px;
  width: 60px;
  height: 60px;
}

  }