::-moz-selection {
  /* Code for Firefox */
  background-color: #e52ea0;
  color: #fff; }

::selection {
  background-color: #e52ea0;
  color: #fff; }

::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #777777;
  font-weight: 300; }

body {
  color: #777777;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.625em;
  position: relative; }

a {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s; }

a, a:focus, a:hover {
  text-decoration: none;
  outline: 0; }

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn:active:focus,
.btn:focus {
  text-decoration: none;
  outline: 0; }


/********* Typography *********/

.gray-bg {
  background: #f9f9ff; }

h1, h2, h3,
h4, h5, h6 {
  font-family: "Poppins", sans-serif;
  color: #6a6c6e;
  line-height: 1.2em;
  margin-bottom: 0;
  margin-top: 0;
  font-weight: 600; }

.h1, .h2, .h3,
.h4, .h5, .h6 {
  margin-bottom: 0;
  margin-top: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: #6a6c6e; }

h1, .h1 {
  font-size: 40px;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 20px;
}

.h1bground {
    background: linear-gradient(120deg,rgba(143,66,236,0) 0%,#812bea 100%);
    background-color: #b142ec;
}

h2, .h2 {
  font-size: 30px; }

.text-white {
    color: #ffffff;
}

@media (max-width: 767px) {
  .no-flex-xs {
    display: block !important; } }

.section-gap {
  padding: 100px 0 100px 0px; }

.section-gap-bottom {
  padding: 0px 0 100px 0px; }

.section-gap-top {
  padding: 20px 0 0px 0px; }

.headingmob {
    padding: 20px 0px 0px 0px;
}

.section-title h2 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 70px;
    text-transform: capitalize;
    position: relative;
    line-height: 44px; }
    @media (max-width: 1024px) {
      .section-title h2 {
        font-size: 40px;
        margin-bottom: 30px; } }
    @media (max-width: 1024px) {
      .section-title h2 {
        font-size: 30px; } }
    .section-title h2:before {
      content: '';
      position: absolute;
      left: 0;
      bottom: -35px;
      width: 10px;
      height: 10px;
      background: #e52ea0;
      border-radius: 7px; }
      @media (max-width: 1024px) {
        .section-title h2:before {
          bottom: -15px; } }
    .section-title h2:after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -31px;
      width: 100px;
      height: 2px;
      background: #e52ea0; }
      @media (max-width: 1024px) {
        .section-title h2:after {
          bottom: -11px; } }

.primary-btn {
  color: #fff;
  padding: 0 52px;
  background: #e52ea0;
  overflow: hidden;
  border-radius: 40px;
  font-size: 15px;
  font-weight: 600;
  display: inline-block;
  border: 1px solid #e52ea0;
  vertical-align: middle;
  position: relative;
  z-index: 1;
  cursor: pointer;
  text-align: center;
 }
  @media (max-width: 767px) {
    .primary-btn {
      padding: 0 35px; } }
  .primary-btn:before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 13px 0;


    color: #fff; }
    @media (max-width: 767px) {
      .primary-btn:before {
        padding: 8px 0; } }
  .primary-btn:hover {
    background: #fff;
    border: 1px solid #e52ea0; }
    .primary-btn:hover:before {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      -moz-transform: translate3d(0, 100%, 0);
      -ms-transform: translate3d(0, 100%, 0);
      -o-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0); }

    .primary-btn:hover span {
      opacity: 1;
      color: #e52ea0;
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0); }

      .primary-btn:hover span:nth-child(15) {
        -webkit-transition-delay: 0.7s;
        -moz-transition-delay: 0.7s;
        -o-transition-delay: 0.7s;
        transition-delay: 0.7s; }

  .primary-btn span {
    display: inline-block;
    padding: 12px 0;
    opacity: 0;
    color: #fff;
}
    @media (max-width: 767px) {
      .primary-btn span {
        padding: 8px 0; } }
  .primary-btn.white {
    border: 1px solid #1d4ce2;
    color: #e52ea0;
    background: #fff; }
    .primary-btn.white span {
      color: #222222; }
    .primary-btn.white:before {
      color: #222222; }
    .primary-btn.white:hover {
      background: #1d4ce2;
      color: #fff; }
      .primary-btn.white:hover span {
        color: #fff; }

.btn-primary-pink {
    background-color: #e52ea0;
    border: #e52ea0;
}

.social-font {
    font-size: 30px;
    color: #b142ec;
    margin-bottom: 15px;
}

.hero-img {
        padding-top: 20px;
}

h1 {
  font-size: 36px; }

h2 {
  font-size: 30px; }

h1, h2 {
  line-height: 1.5em; }

.typography h1, .typography h2 {
  color: #777777; }

.banner-area {
  background: #1d4ce2; }

.banner-content {
  text-align: left; }
  .banner-content h1 {
    font-size: 60px;
    font-weight: 700;
    line-height: 66px;
    margin-top: 30px;
    margin-bottom: 30px; }
    @media (max-width: 1024px) {
      .banner-content h1 {
        font-size: 45px; } }
    @media (max-width: 576px) {
      .banner-content h1 {
        font-size: 35px; } }
    @media (max-width: 325px) {
      .banner-content h1 {
        font-size: 32px; } }

  .banner-content .designation {
    max-width: 390px;
    font-size: 30px;
    font-weight: 400;
    line-height: 42px; }
    @media (max-width: 576px) {
      .banner-content .designation {
        font-size: 25px; } 
        .lang-row {
    float: inherit;
    margin: 0 auto;
    display: inline-block;
    }
        .prog-circles {
            float: inherit;
            display: block;
        }
}
    .banner-content .designation .designer {
      color: #e52ea0; }
    .banner-content .designation .developer {
      color: #1d4ce2; }
.linkedin-button { 
    margin-top: 20px;
}





/********************SKILLS***********************/

.circlePercent {
  position: relative;
  top: 26px;
  left: 26px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #e52ea0;
}
.circlePercent:before,
.circlePercent > .progressEnd {
  position: absolute;
  z-index: 3;
  top: 2px;
  left: 45px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
  -ms-transform-origin: 3px 46px;
  transform-origin: 3px 46px;
  content: "";
}
.circlePercent:after,
.circlePercent > .progress {
  position: absolute;
  -ms-transform-origin: 48px 48px;
  transform-origin: 48px 48px;
  z-index: 0;
  top: 0;
  left: 0;
  width: 48px;
  height: 96px;
  border-radius: 48px 0 0 48px;
  background: #e52ea0;
  content: "";
}
.circlePercent.fiftyPlus:after {
  background: white;
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.circlePercent > .progress.progress {
  background: white;
}
.circlePercent > .counter {
  position: absolute;
  box-sizing: border-box;
  z-index: 2;
  width: 100px;
  height: 100px;
  margin-top: -2px;
  margin-left: -2px;
  border-radius: 50%;
  border: 4px solid #e52ea0;
}
.circlePercent > .counter:before {
  position: absolute;
  z-index: 1;
  top: 50%;
  margin-top: -13px;
  width: 100%;
  height: 26px;
  font-size: 26px;
  line-height: 26px;
  font-family: sans-serif;
  text-align: center;
  color: white;
  content: attr(data-percent) "%";
	  right: 0%;
}
.circlePercent > .counter:after {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 6px;
  left: 6px;
  border-radius: 50%;
  background: #e52ea0;
  content: "";
}
.circlePercent > .counter[data-percent="100"] {
  background: white;
}

@media screen and (max-width: 992px) {
  .circlePercent{display: inline-flex; margin-left: -57px; margin-top: -28px; margin-bottom: 70px;}

}
@media screen and (max-width: 768px) {
  .circlePercent{display: inline-flex; margin-left: -57px; margin-top: -28px; margin-bottom: 70px;}

}

#skillbar {
  margin: 20px;
  width: 700px;
  height: 8px;
  position: relative;
	
}

.box {
  border: 1px solid #fff;
  background-color: #a1ef62;
	color: #fff;
	font-size: 18px;
	padding-left: 10px;
}
.iterm1{
    width: 90%;
    background: #eee;
    height: 40px;
    margin: 15px;
}
.iterm2 {    width: 0;
    background: #12a287;
    color: #fff;
    height: 40px;
    line-height: 40px;
    padding: 0 5px
}
.ghostlab1{
    width: 90%;
    background: #eee;
    height: 40px;
    margin: 15px;
}
.ghostlab2 {    width: 0;
    background: #82e4e2;
    color: #fff;
    height: 40px;
    line-height: 40px;
    padding: 0 5px
}
.litmus1{
    width: 90%;
    background: #eee;
    height: 40px;
    margin: 15px;
}
.litmus2 {    width: 0;
    background: #e52ea0;
    color: #fff;
    height: 40px;
    line-height: 40px;
    padding: 0 5px
}
.navicat1{
    width: 90%;
    background: #eee;
    height: 40px;
    margin: 15px;
}
.navicat2 {    width: 0;
    background: #214be0;
    color: #fff;
    height: 40px;
    line-height: 40px;
    padding: 0 5px
}
.notepad1{
    width: 90%;
    background: #eee;
    height: 40px;
    margin: 15px;
}
.notepad2 {    width: 0;
    background: #fdde43;
    color: #fff;
    height: 40px;
    line-height: 40px;
    padding: 0 5px
}
.sketch1{
    width: 90%;
    background: #eee;
    height: 40px;
    margin: 15px;
}
.sketch2 {    width: 0;
    background: #a1ef62;
    color: #fff;
    height: 40px;
    line-height: 40px;
    padding: 0 5px
}

/********************BUBBLES**********************/

.bubble {
    content: 'HELLO';
    left: 0;
    bottom: -35px;
    width: 100px;
    height: 100px;
    background: -webkit-linear-gradient(120deg,#b142ec 0%,#812bea 100%);
    box-shadow: 4px 7px #e8eaed;
    border-radius: 57px;
}

.bubble-text {
    text-align: center;
    padding: 39px 0px 0px 0px;
    margin-top: 20px;
    color: #ffffff;
    font-size: 24px;
}

/**********************BOX SHADOW****************************/

.boxshadow {
    box-shadow: 0 8px 60px 0 rgba(103,151,255,.11), 0 12px 90px 0 rgba(103,151,255,.11);
    padding: 40px;
}

.dp-boxshadow {
    box-shadow: 0 8px 60px 0 rgba(103,151,255,.11), 0 12px 14px 0 rgba(103,151,255,.11);
    padding: 40px 20px 20px 20px !important;
}

/********************** Animated Boxes ****************************/

.work-ex-img {
    float: inherit;
    margin: 0 auto;
    display: block;
}
.work-ex-text {
    margin: 30px;
}
.img-hover img {
    -webkit-transition: all .3s ease; /* Safari and Chrome */
  	-moz-transition: all .3s ease; /* Firefox */
  	-o-transition: all .3s ease; /* IE 9 */
  	-ms-transition: all .3s ease; /* Opera */
  	transition: all .3s ease;
  	position:relative;
}
.img-hover img:hover {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform:translateZ(0) scale(1.20); /* Safari and Chrome */
    -moz-transform:scale(1.20); /* Firefox */
    -ms-transform:scale(1.20); /* IE 9 */
    -o-transform:translatZ(0) scale(1.20); /* Opera */
    transform:translatZ(0) scale(1.20);
}