.first-nav {
    background-color: white;
  }

  .second-nav {
    top: 96px;
    background-color: #000046;
  }

  .footer-lg-sec {
    background-color: #169bcf;
  }

  .footer-sm-sec {
    background-color: #000046;
  }

  .circle-back-i {
    font-size: 3em;
    width: 80px;
    height: 80px;
    background: #fff;
    text-align: center;
    border-radius: 49px;
    -webkit-border-radius: 49px;
    -moz-border-radius: 49px;
    -o-border-radius: 49px;
    line-height: 1.7em;
  }


  /* dashboard card 1 */
  .my-info-card-1{
      background-color: #68ae00;
      box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
      transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
      cursor: pointer;
  }

  .my-info-card-1:hover{
       transform: scale(1.05);
       background: #3C3C3C !important;
       transition: 0.1s all;
      -webkit-transition: 0.1s all;
      -moz-transition: 0.1s all;
      -o-transition: 0.1s all;
  }

  /* dashboard card 2 */
  .my-info-card-2{
      background-color: #FC8213;
      box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
      transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
      cursor: pointer;
  }

  .my-info-card-2:hover{
       transform: scale(1.05);
       background: #3C3C3C !important;
       transition: 0.1s all;
      -webkit-transition: 0.1s all;
      -moz-transition: 0.1s all;
      -o-transition: 0.1s all;
  }

  /* dashboard card 3 */
  .my-info-card-3{
      background-color: #337AB7;
      box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
      transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
      cursor: pointer;
  }

  .my-info-card-3:hover{
       transform: scale(1.05);
       background: #3C3C3C !important;
       transition: 0.1s all;
      -webkit-transition: 0.1s all;
      -moz-transition: 0.1s all;
      -o-transition: 0.1s all;
  }

  /* dashboard  profile card */
  .my-info-pcard{
    box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
    transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
  }

  .my-info-pcard:hover{
     transform: scale(1.1);

  }



  @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:200');

  .profile-card1  {
      background-image: url('https://static.pexels.com/photos/414171/pexels-photo-414171.jpeg');
    background-size:cover;
          -webkit-animation: slidein 100s;
          animation: slidein 100s;

          -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;

          -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;

          -webkit-animation-direction: alternate;
          animation-direction: alternate;
  }

  @-webkit-keyframes slidein {
  from {background-position: top; background-size:3000px; }
  to {background-position: -100px 0px;background-size:2750px;}
  }

  @keyframes slidein {
  from {background-position: top;background-size:3000px; }
  to {background-position: -100px 0px;background-size:2750px;}

  }


  /* Cool infinite background scrolling animation.
   */
  /* Exo thin font from Google. */
  @import url(https://fonts.googleapis.com/css?family=Exo:100);
  /* Background data (Original source: https://subtlepatterns.com/grid-me/) */
  /* Animations */
  @-webkit-keyframes bg-scrolling-reverse {
    100% {
      background-position: 50px 50px;
    }
  }
  @-moz-keyframes bg-scrolling-reverse {
    100% {
      background-position: 50px 50px;
    }
  }
  @-o-keyframes bg-scrolling-reverse {
    100% {
      background-position: 50px 50px;
    }
  }
  @keyframes bg-scrolling-reverse {
    100% {
      background-position: 50px 50px;
    }
  }
  @-webkit-keyframes bg-scrolling {
    0% {
      background-position: 50px 50px;
    }
  }
  @-moz-keyframes bg-scrolling {
    0% {
      background-position: 50px 50px;
    }
  }
  @-o-keyframes bg-scrolling {
    0% {
      background-position: 50px 50px;
    }
  }
  @keyframes bg-scrolling {
    0% {
      background-position: 50px 50px;
    }
  }
  /* Main styles */
  .profile-card {
    color: #999;
    font: 400 16px/1.5 exo, ubuntu, "segoe ui", helvetica, arial, sans-serif;
    /* img size is 50x50 */
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC") repeat 0 0;
    -webkit-animation: bg-scrolling-reverse 0.92s infinite;
    /* Safari 4+ */
    -moz-animation: bg-scrolling-reverse 0.92s infinite;
    /* Fx 5+ */
    -o-animation: bg-scrolling-reverse 0.92s infinite;
    /* Opera 12+ */
    animation: bg-scrolling-reverse 0.92s infinite;
    /* IE 10+ */
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
  }