.splash, .splash1 {
  padding: 0 5px
}
/* Tutorial on https://fossheim.io/writing/posts/css-text-gradient. */
#planuri {background-color: #FAF9F6; background-repeat: no-repeat; background-position: center;  margin-bottom: 50px; -webkit-box-shadow: 0px 0px 16px 12px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 16px 12px rgba(0,0,0,0.75);
box-shadow: 0px 0px 16px 12px rgba(0,0,0,0.75);}
.gradient-text {
  /* Fallback: Set a background color. */
  
  
  /* Create the gradient. */
  background-image: linear-gradient(90deg, #5D3FD3, #F33A6A);
  
  /* Set the background size and repeat properties. */
  background-size: 100%;
  background-repeat: repeat;

  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}
#buton, .buton-up {
  transition: .25s cubic-bezier(1, .05, 1, 1.5)
}
.outside, .progress, .progress1 {
  overflow: hidden
}
.button-40, .card12, .icons img, .pinline, .testimonial, hr {
  text-align: center
}
.icons img, aside ul {
  list-style-type: none
}
.div1, .div2 {
  grid-row: 1/2
}
.pinline, .title {
  text-transform: uppercase
}
*, ul.menu {
  padding: 0
}
.class-name {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}
.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0b74ff;
  font-size: 20px
}
.hover-underline-animation:after {
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0b74ff;
  transform-origin: bottom right;
  transition: transform .25s ease-out
}
.progress1::before, .progress::before {
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-name: progress;
  width: 80px;
  position: absolute;
  display: block;
  content: "";
  animation-iteration-count: infinite
}
.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left
}
hr {
  border: 0;
  clear: both;
  display: block;
  margin: 2.4rem auto;
  width: 100%
}
.progress1 {
  background: rgba(1, 15, 30, .1);
  height: 1px;
  position: relative
}
.progress1::before {
  background: #000;
  height: 1px
}
@keyframes progress1 {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(1440px)
  }
}
.progress {
  background: rgba(225, 225, 225, .4);
  height: 1px;
  position: relative
}
.progress::before {
  background: #ff5733;
  height: 1px
}
@keyframes progress {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(1440px)
  }
}
.checked {
  color: orange
}
.btn-42, .button-40, .card12, .column fa-check, .detbox .designation.dark, .detbox .name.dark, .div3, .eachdiv, .menu li {
  color: #fff
}
.fa-star {
  font-size: 28px;
  text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000
}
.splash {
  background-color: #ff1493;
  color: whitesmoke
}
.buton, .splash1 {
  background-color: #e7005e;
color: whitesmoke;
}
.buton {
  position: fixed;
  top: 0;
  right: 0;
  border: 0;
  padding: 15px;
  z-index: 10;
  height: 55px
}
.buton-up {
  top: -50px
}
.btn-42:hover:after, .inside {
  top: 0;
  height: 100%
}
.bar {
  position: relative
}
#mySVG, .outside, aside {
  position: fixed
}
.bar:after, .bar:before {
  content: "";
  position: absolute
}
.bar, .bar:after, .bar:before {
  width: 24px;
  height: 3px;
  background: #fff;
  margin: 3px 0;
  display: block;
  transition: .25s linear !important
}
.bar:before {
  bottom: 100%
}
.bar:after {
  top: 100%
}
.bar.active:before {
  bottom: -200%;
  transform: rotate(45deg)
}
.bar.active {
  background-color: transparent
}
.bar.active:after, .bar.active:before {
  transition-delay: .15s !important
}
.bar.active:after {
  top: 0;
  transform: rotate(-45deg)
}
.outside {
  z-index: 4500;
  width: 15%;
  min-width: 170px;
  max-width: 170px;
  height: 100%;
  transform: translateX(-101%);
  transition: .5s cubic-bezier(0, .05, 0, 1.3)
}
.in, .in .menu li {
  transform: translateX(0)
}
.in {
  transition: 0
}
.inside {
  position: absolute;
  bottom: 0;
  margin: auto;
  display: block;
  width: 100%;
  background: #ff247e;
  border-right: 1px solid rgba(255, 255, 255, .7);
  border-radius: 0 100% 100% 0;
  transition: .25s cubic-bezier(1, .05, 1, 1.5);
  transition-delay: .5s
}
.btn41-43, .first {
  position: relative
}
.vline1, .vline2, .vline3, .vline4, .vline5 {
  height: 50px;
  box-shadow: rgba(0, 0, 0, .4) 0 2px 4px, rgba(0, 0, 0, .3) 0 7px 13px -3px, rgba(0, 0, 0, .2) 0 -3px 0 inset
}
.in .inside {
  border-radius: 0;
  transition-delay: 0s;
  -webkit-animation: 1s both bounce
}
.inside:before {
  content: "";
  width: 2100px;
  height: 2100px;
  display: block;
  background-color: #b9004c;
  position: absolute;
  top: -50%;
  left: -100%;
  z-index: -1;
  transition: .75s linear .15s;
  transform: scale(0);
  transform-origin: top right;
  border-radius: 1000px
}
.outside.in .inside:before {
  transform: scale(1)
}
ul.menu {
  list-style: none;
  line-height: 2
}
.menu li {
  opacity: 0;
  padding: 15px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  transition: .25s linear
}
.menu li a {
  color: #faebd7
}
.in .menu li {
  opacity: 1
}
.in .menu li:first-child {
  transition-delay: 1s
}
.in .menu li:nth-child(2) {
  transition-delay: 1.15s
}
.in .menu li:nth-child(3) {
  transition-delay: 1.25s
}
.in .menu li:nth-child(4) {
  transition-delay: 1.35s
}
.in .menu li:nth-child(5) {
  transition-delay: 1.45s
}
.in .menu li:nth-child(6) {
  transition-delay: 1.55s
}
.in .menu li:nth-child(7) {
  transition-delay: 1.65s
}
@-webkit-keyframes bounce {
  0%, 100%, 27.68%, 77.23%, 84.82%, 92.48% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }
  27.78% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -100, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -100, 0, 0, 1)
  }
  29.73% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -49.785, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -49.785, 0, 0, 1)
  }
  31.61% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.659, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.659, 0, 0, 1)
  }
  33.06% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -23.527, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -23.527, 0, 0, 1)
  }
  34.43% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -30.089, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -30.089, 0, 0, 1)
  }
  36.81% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -18.067, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -18.067, 0, 0, 1)
  }
  39.2% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.115, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.115, 0, 0, 1)
  }
  42.09% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -8.347, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -8.347, 0, 0, 1)
  }
  46.79% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.013, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.013, 0, 0, 1)
  }
  49.68% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.316, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.316, 0, 0, 1)
  }
  54.38%, 69.64% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.002, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.002, 0, 0, 1)
  }
  57.27% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.643, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.643, 0, 0, 1)
  }
  62.05% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.007, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.007, 0, 0, 1)
  }
  64.86% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.178, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.178, 0, 0, 1)
  }
  72.53% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.049, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.049, 0, 0, 1)
  }
  80.12% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.014, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.014, 0, 0, 1)
  }
  87.71% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.004, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.004, 0, 0, 1)
  }
  95.3% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.001, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.001, 0, 0, 1)
  }
}
aside {
  top: 47%;
  right:20px;
  z-index: 300;
  transform: translate(-50%, -50%)
  
}
.vline1 {
  border-left: 4px outset #4285f4
}
.vline2 {
  border-left: 4px outset #db4437
}
.vline3 {
  border-left: 4px outset #f4b400
}
.vline4 {
  border-left: 4px outset #0f9d58
}
.vline5 {
  border-left: 4px outset #9aa0a6
}
aside ul {
  display: flex;
  flex-direction: column;
  align-items: center
}
aside ul li .indicator {
  cursor: pointer;
  display: block;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, .4) 0 2px 4px, rgba(0, 0, 0, .3) 0 7px 13px -3px, rgba(255, 255, 255, .2) 0 -3px 0 inset
}
#circle {
  fill: red
}
#mySVG {
  left: 50%;
  top: 1%;
  width: 50vw;
  height: 100vh;
  margin-left: -30px
}
.st0 {
  fill: none;
  stroke-dashoffset: 1px;
  stroke: red;
  stroke-width: 5;
  stroke-miterlimit: 10;
  stroke-dasharray: 20
}
.first {
  bottom: 0
}
.pinline {
  display: block;
  line-height: 70px;
  font-size: 4em;
  margin-top: 50px;
  margin-bottom: 70px;
  font-weight: 700
}
.demo {
  background: #3d3d3d
}
.testimonial {
  border-radius: 0 70px;
  border-top: 4px inset #ff247e;
  border-left: none;
  border-right: none;
  border-bottom: 8px groove #dfdfdf
}
.btn41-43 {
  padding: 10px 35px;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  background: 0 0;
  outline: 0 !important;
  cursor: pointer;
  transition: .3s;
  display: inline-block
}
.bracket-dividers, .bracket-dividers1, .bracket-dividers2 {
  display: block;
  line-height: 24px;
  padding: 1px;
  position: relative
}
.btn-42 {
  border: 2px solid #fff;
  z-index: 1
}
.btn-42:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: #fff;
  transition: .3s
}
.bracket-dividers1:before, .bracket-dividers2:before, .bracket-dividers:before {
  content: '';
  left: -10px;
  box-sizing: border-box;
  position: absolute
}
.btn-42:hover {
  color: #000
}
.btn-42:active {
  top: 2px
}
.despre {
  margin-top: 200px;
 
}
.minti {
  margin-top: 100px
}
.bracket-dividers1 {
  margin-left: 5px;
  margin-top: 8px
}
.bracket-dividers1:before {
  top: 5px;
  bottom: 0;
  width: 0;
  border: 2px solid #afe1af;
  border-right: 0
}
.bracket-dividers, .bracket-dividers2 {
  margin-left: 10px;
  margin-top: 18px
}
.bracket-dividers:before {
  top: -15px;
  bottom: 0;
  width: 70px;
  border: 3px dashed #ffebec;
  border-right: 0
}
.bracket-dividers2:before {
  top: -5px;
  bottom: 12px;
  width: 10px;
  border: 2px solid #ff247e;
  border-right: 0
}
.button-40 {
  background-color: #e7005e;
  border: 1px solid transparent;
  border-radius: .75rem;
  box-sizing: border-box;
  cursor: pointer;
  flex: 0 0 auto;
  float: left;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
  padding: .75rem 2.2rem;
  text-decoration: none #6B7280 solid;
  text-decoration-thickness: auto;
  transition-duration: .2s;
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(.4, 0, 0.2, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: auto
}
.button-40:hover {
  background-color: #ff247e
}
.button-40:focus {
  box-shadow: none;
  outline: transparent solid 2px;
  outline-offset: 2px
}
@media (min-width:968px) {
  .behind3 {
    display: none
  }
}
@media (max-width:768px) {
  .button-40 {
    padding: .75rem 1.5rem
  }
  .despre, .minti {
    margin-top: 10px
  }
}
.scroll-downs {
  position: relative;
  top: 20px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 34px;
  height: 55px
}
.mousey {
  width: 3px;
  padding: 10px 15px;
  height: 35px;
  border: 3px solid #ff247e;
  border-radius: 25px;
  opacity: .75;
  box-sizing: content-box
}
.scroller {
  width: 4px;
  height: 20px;
  border-radius: 25%;
  background-color: #f5f5f5;
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15, .41, .69, .94);
  animation-iteration-count: infinite
}
@keyframes scroll {
  0% {
    opacity: 0
  }
  10% {
    transform: translateY(0);
    opacity: 1
  }
  100% {
    transform: translateY(15px);
    opacity: 0
  }
}
.divider {
  position: relative;
  margin-top: 40px;
  height: 1px
}
.div-transparent:before {
  content: "";
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  width: 90%;
  height: 5px;
  background-image: linear-gradient(to right, transparent, #ff4b00, transparent)
}
.div-arrow-down:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -7px;
  left: calc(50% - 7px);
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  background-color: #fff;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff
}
.column {
  float: left;
  width: 25%;
  padding: 0 5px
}
.row12 {
  width: 100%;
margin: 0 auto;
}
.row12:after {
  content: "";
  display: table;
  clear: both
}
@media screen and (max-width:600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 10px
  }
}
@media screen and (max-width:1586px) {
  .topstick li a, .topstick li img {
    display: none
  }
  #menuToggle {
    display: block
  }
}
@media screen and (max-width:586px) {
  .wb {
    display: none
  }
}
@media screen and (max-width:386px) {
  .wbb {
    display: none
  }
}
.card12 {
  padding: 5px
}
.fa12 {
  font-size: 50px
}
.icons img {
  display: inline-flex;
  justify-content: space-around;
  padding: 5px;
  transition: .5s;
  -webkit-box-shadow: -19px 13px 12px -10px rgba(0, 0, 0, .75);
  -moz-box-shadow: -19px 13px 12px -10px rgba(0, 0, 0, .75);
  box-shadow: -19px 13px 12px -10px rgba(0, 0, 0, .75)
}
.icons img:hover {
  transform: translateY(-10px)
}
.icons {
  margin: 0 auto;
  max-width: 1100px
}
.wrap, .wripper {
  max-width: auto
}
.outerdiv {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center
}
.innerdiv {
  transform: scale(.9);
  margin: 1rem;
  display: grid;
  grid-gap: 1.5rem;
  grid-template-rows: repeat(2, 22rem);
  grid-template-columns: repeat(4, 17rem)
}
.eachdiv {
  padding: 1rem;
  border-radius: .8rem;
  height: auto
}
.div1 {
  background: url(https://raw.githubusercontent.com/RahulSahOfficial/testimonials_grid_section/5532c958b7d3c9b910a216b198fdd21c73112d84/images/bg-pattern-quotation.svg) no-repeat #bf40bf;
  grid-column: 1/3;
  background-position-x: 25rem
}
.div2 {
  background: #301934;
  grid-column: 3/4
}
.div3 {
  background: #5d3fd3;
  grid-column: 4/5;
  grid-row: 1/3
}
.div4, .div5 {
  grid-row: 2/3
}
.div4 {
  background: #722f37;
  grid-column: 1/2;
  color: #000
}
.div5 {
  background: #770737;
  grid-column: 2/4
}
.userdetails {
  display: flex
}
.imgbox {
  margin-right: 1rem
}
.imgbox img {
  border-radius: 50%;
  width: 2rem;
  border: 2px solid #cec5c5
}
.detbox {
  display: flex;
  flex-direction: column;
  justify-content: center
}
.detbox p {
  margin: 0
}
.detbox .name {
  color: #cecece;
  font-size: .9rem;
  margin-bottom: .1rem;
  font-weight: 600
}
.detbox .designation {
  color: #cecece;
  opacity: 50%;
  font-size: .8rem
}
.review h4 {
  font-size: 1.4rem;
  color: #f3deff;
  font-weight: 100;
  line-height: 1.1;
  margin-bottom: .8rem
}
.review.dark h4 {
  color: white;
}
.review p {
  font-size: .95rem;
  color: #f3deff;
  font-weight: 500;
  opacity: 50%;
  line-height: 1.5
}
.review.dark p {
  color: #0e0e0e
}
.attribution {
  font-size: 1rem;
  line-height: 1.5;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  text-align: right
}
.float, .support {
  bottom: 10px;
  right: 10px
}
.text, .title, .top, td, th {
  text-align: center
}
.attribution a {
  text-decoration: none
}
@media only screen and (max-width:1000px) {
  .innerdiv {
    transform: scale(.7)
  }
}
@media only screen and (max-width:800px) {
  .innerdiv {
    transform: scale(.6)
  }
}
.container01 {
  margin-top:  70px;
  display: flex;
  margin: 0 auto;
  justify-content: center;
  align-content: center
}
.container01 .testimonial-box {
  position: relative;
  width: 500px
}
.container01 .testimonial-box::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -100px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(90deg, #020024 0, rgba(255, 255, 255, 0) 37%);
  box-shadow: -5px 5px 10px rgba(0, 0, 0, .3);
  z-index: -1
}
.container01 .testimonial-box::after {
  content: "";
  position: absolute;
  bottom: 10px;
  right: -100px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(280deg, #020024 0, rgba(255, 255, 255, 0) 37%);
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
  z-index: -1
}
.container01 .testimonial-box .testimonial {
  display: grid;
  grid-template-rows: 1.3fr 0.7fr;
  box-shadow: 0 0 5px rgba(0, 0, 0, .5);
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, #020024 0, #ff00e4 100%);
  padding: 29px 5px;
  position: relative
}
.question:checked ~ .answer, .title small {
  display: block
}
.container01 .testimonial-box .testimonial .fas {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px;
  font-size: 25px;
  color: #222
}
.container01 .testimonial-box .testimonial .testimonial-text {
  font-size: 18px;
  line-height: 25px;
  text-align: center;
  padding: 5px 1px;
  width: 100%
}
.container01 .testimonial-box .testimonial .testimonial-user {
  display: flex;
  align-items: center
}
.container01 .testimonial-box .testimonial .testimonial-user .user-img {
  box-shadow: 0 0 10px rgba(0, 0, 0, .5);
  width: 60px;
  height: 60px;
  border-radius: 50%
}
.container01 .testimonial-box .testimonial .testimonial-user .user-info {
  margin: 0 20px;
  display: grid;
  grid-template-rows: 1fr 1fr
}
.container01 .testimonial-box .testimonial .testimonial-user .user-info .user-name {
  font-weight: 800
}
.user-name {
  font-size: 10px
}
.container01 .testimonial-box .testimonial .testimonial-user .user-info .user-job-details {
  margin: 5px 0 0;
  position: relative;
  display: flex;
  justify-content: space-between
}
.container01 .testimonial-box .testimonial .testimonial-user .user-info .user-job-details .line {
  position: absolute;
  width: 2px;
  height: 100%;
  background: #000;
  left: 50%;
  top: 0;
  transform: translateX(-50%)
}
.support {
  position: absolute;
  padding: 10px;
  display: flex
}
.top {
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
  color: #f5f5f5
}
.wrap {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 30px;
  margin: -50px auto auto
}
.box {
  background: #2f0086;
  border-radius: 10px
}
.text {
  color: #fff;
  padding-block: 10px
}
.field1 {
  border: 1px solid #e7005e;
}
.field3 {
  border: 1px solid blue;
}
.field2 {
  border: 1px solid purple;
}
.wripper {
  height: 200px;
  display: table;
  border: 5px solid #ff247e;
  margin: 20px auto;
  padding: 20px;
  position: relative;
  box-shadow: rgba(0, 0, 0, .15) 0 5px 9px 0
}
.wrapper:before, .wripper:after {
  content: "";
  position: absolute;
  font-size: 50px;
  color: #111;
  background: #fff
}
.wripper:after {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  box-shadow: 10px 10px 0 #fff
}
.wripper:before {
  bottom: 0;
  right: 0;
  transform: translate(50%, 50%);
  box-shadow: -10px -10px 0 #000
}
.description, .title {
  width: 100%;
  vertical-align: middle
}
.description {
  font-size: 24px;
  color: #28282b
}
.title {
  font-size: 40px;
  font-weight: 100;
  padding: 0 20px 0 0
}
.text-right, .title small {
  text-align: right
}
.title small {
  font-size: 25px
}
.border-radius {
  border-radius: 30px
}
.alignment, td:first-child, th:first-child {
  text-align: left
}
table {
  font-size: 12px;
  color: #f0f8ff;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd
}
td, th {
  padding: 16px
}

.fa-check {
  color: green
}
.fa-remove {
  color: red
}
.alignment {
  margin-left: 10px
}
.faq {
  margin-bottom: 20px;
  border: 1px solid rgba(0, 0, 0, .3);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  padding: 20px
}
.question {
  font-size: 18px;
  font-weight: 700;
  cursor: pointer
}
.answer {
  display: none;
  margin-top: 10px
}
.oval {
  height: 50px;
  width: 100px;
  border-width: 4px;
  border-color: #0ff;
  border-radius: 50%
}
.footer-distributed {
  background: #961248;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .12);
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  font: bold 16px sans-serif;
  padding: 55px 50px
}
.footer-distributed .footer-center, .footer-distributed .footer-left, .footer-distributed .footer-right {
  display: inline-block;
  vertical-align: top
}
.footer-distributed .footer-left {
  width: 40%
}
.footer-distributed h3 {
  font: 36px 'Open Sans', cursive
}
.footer-distributed .footer-links {
  color: #fff;
  margin: 20px 0 12px;
  padding: 0
}
.footer-distributed .footer-links a {
  display: inline-block;
  line-height: 1.8;
  font-weight: 400;
  text-decoration: none;
  color: inherit
}
.footer-distributed .footer-company-name {
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  margin: 0
}
.footer-distributed .footer-center {
  width: 35%
}
.footer-distributed .footer-center p {
  display: inline-block;
  color: #fff;
  font-weight: 400;
  vertical-align: middle;
  margin: 0
}
.footer-distributed .footer-center p span {
  display: block;
  font-weight: 400;
  font-size: 14px;
  line-height: 2
}
.footer-distributed .footer-center p a {
  color: #20b2aa;
  text-decoration: none
}
.footer-distributed .footer-links a:before {
  content: "|";
  font-weight: 300;
  font-size: 20px;
  left: 0;
  color: #fff;
  display: inline-block;
  padding-right: 5px
}
.footer-distributed .footer-links .link-1:before {
  content: none
}
.footer-distributed .footer-right {
  width: 20%
}
.footer-distributed .footer-company-about {
  line-height: 20px;
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  margin: 0
}
.footer-distributed .footer-company-about span {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 20px
}
.footer-distributed .footer-icons {
  margin-top: 25px
}
.footer-distributed .footer-icons a {
  display: inline-block;
  width: 35px;
  height: 35px;
  cursor: pointer;
  border-radius: 2px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 35px;
  margin-right: 3px;
  margin-bottom: 5px
}
@media (max-width:880px) {
  .footer-distributed {
    font: bold 14px sans-serif
  }
  .footer-distributed .footer-center, .footer-distributed .footer-left, .footer-distributed .footer-right {
    display: block;
    width: 100%;
    margin-bottom: 40px;
    text-align: center
  }
  .footer-distributed .footer-center i {
    margin-left: 0
  }
}
@-webkit-keyframes come-in {
  0% {
    -webkit-transform: translatey(100px);
    transform: translatey(100px);
    opacity: 0
  }
  30% {
    -webkit-transform: translateX(-50px) scale(.4);
    transform: translateX(-50px) scale(.4)
  }
  70% {
    -webkit-transform: translateX(0) scale(1.2);
    transform: translateX(0) scale(1.2)
  }
  100% {
    -webkit-transform: translatey(0) scale(1);
    transform: translatey(0) scale(1);
    opacity: 1
  }
}
@keyframes come-in {
  0% {
    -webkit-transform: translatey(100px);
    transform: translatey(100px);
    opacity: 0
  }
  30% {
    -webkit-transform: translateX(-50px) scale(.4);
    transform: translateX(-50px) scale(.4)
  }
  70% {
    -webkit-transform: translateX(0) scale(1.2);
    transform: translateX(0) scale(1.2)
  }
  100% {
    -webkit-transform: translatey(0) scale(1);
    transform: translatey(0) scale(1);
    opacity: 1
  }
}
* {
  margin: 0
}
.floating-logo1 {
  position: fixed;
  top: 5px;
  left: -25px;
  z-index: 976;
  display: block
}
@media only screen and (max-width:600px) {
  .div1 {
    background-position-x: 10rem
  }
  .innerdiv {
    display: flex;
    flex-direction: column;
    transform: scale(1);
    margin: 1rem
  }
  .attribution {
    position: relative
  }
  .floating-logo {
    width: 80px
  }
}
.float {
  position: fixed;
  width: 40px;
  height: 40px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 100
}
.my-float {
  margin-top: 6px
}