/* =============================================================================
   HTML5 CSS Reset Minified - Eric Meyer
   ========================================================================== */

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
nav ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
del {
  text-decoration: line-through;
}
abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
input,
select {
  vertical-align: middle;
}
li {
  list-style: none;
}

/* =============================================================================
   My CSS
   ========================================================================== */

/* ---- base ---- */
.mt-2 {
  margin-top: 5px;
}
body {
  overflow-x: hidden;
  font-family: "Karla", sans-serif;
}
h2 {
  font-weight: 600 !important;
  font-family: "Karla", sans-serif;
}
canvas {
  display: block;
  vertical-align: bottom;
}

.container {
  max-width: 1100px;
}
/* ---- stats.js ---- */

.count-particles {
  background: #000022;
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13e8e9;
  font-size: 0.8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: "Karla", sans-serif;
}

.js-count-particles {
  font-size: 1.1em;
}

#stats,
.count-particles {
  -webkit-user-select: none;
  margin-top: 5px;
  margin-left: 5px;
}

#stats {
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.count-particles {
  border-radius: 0 0 3px 3px;
}

/* ---- particles.js container ---- */

#particles-js {
  width: 100%;
  min-height: 89vh;
  background-image: url("../img/computer-bg.jpg");
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

/*Contact Us Start*/

#contact-us {
  width: 100%;
  min-height: 70vh;
  background-image: url("../img/bg_01.jpeg");
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
/*Contact Us End*/

.try_circle_first {
  position: absolute;
  left: 2em;
  top: -10px;
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-animation: swing 3.5s ease-in-out forwards infinite;
  animation: swing 3.5s ease-in-out forwards infinite;
  z-index: 999;
  max-width: 150px;
}
@-webkit-keyframes swing {
  20%,
  40%,
  60%,
  80%,
  100% {
    -webkit-transform-origin: top center;
  }
  20% {
    -webkit-transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

@keyframes swing {
  20% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}
#HomeBanner.main-banner {
  position: relative;
  overflow: hidden;
  height: 89vh;
}
.main-banner {
  position: relative;
  overflow: hidden;
}
.main-banner .overlay-banner span {
  color: #20a3f0;
}
.main-banner .overlay-banner {
  color: #fff;
  position: absolute;
  top: 50%;
  text-align: center;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

.main-banner .overlay-banner p {
  font-size: 17px;
  text-transform: uppercase;
}

.dean-banner .overlay-banner h6 a {
  margin: 0 5px;
  position: relative;
}
.main-banner .overlay-banner h6 a {
  border: 1px solid #fff;
  position: relative;
  color: #fff;
  padding: 15px 35px;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
}
.dean-banner .overlay-banner h6 a.portfolio {
  border: 1px solid #2098d1;
  background: #2098d1;
}
.main-banner .overlay-banner h6 a.portfolio {
  position: relative;
  background-color: #20a3f0;
  border: 1px solid #20a3f0;
  color: #fff;
  padding: 15px 35px;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
}
.call,
.mail {
  background: -moz-linear-gradient(left, #9b61dc 0, #20a3f0 100%);
  background: -webkit-linear-gradient(left, #9b61dc 0, #20a3f0 100%);
  background: linear-gradient(to right, #9b61dc 0, #20a3f0 100%);
  color: #ffffff;
  border-radius: 30px;
  padding: 1em;
  margin-bottom: 10px;
}
.call h1,
.mail h1 {
  font-size: 20px;
  text-align: center;
  line-height: 40px;
}
.call h1 a,
.mail h1 a {
  color: #ffffff;
  font-size: 30px;
}
.graphic {
  min-height: 250px;
  border: #e1e1e1 1px solid;
  border-radius: 30px;
  padding: 15px;
  margin-bottom: 30px;
}
.main-banner .overlay-banner h6 a .arrowRight:before {
  width: 7px;
  height: 7px;
  top: 50%;
  margin: 2px 0 0 1px;
  border-left: 0;
  border-top: 0;
  border-right: 1px #fff solid;
  border-bottom: 1px #fff solid;
  position: absolute;
}

.main-banner .overlay-banner h6 a .arrowRight {
  width: 7px;
  height: 7px;
  top: 39.5px;
  margin: -20px 0 0 -20px;
  -webkit-transform: rotate(-45deg);
  border-left: 0;
  border-top: 0;
  border-right: 2px #fff solid;
  border-bottom: 2px #fff solid;
  position: absolute;
  left: 95%;
}
.main-banner .overlay-banner h6 a .arrowRight:before {
  width: 7px;
  height: 7px;
  top: 50%;
  margin: 2px 0 0 1px;
  border-left: 0;
  border-top: 0;
  border-right: 1px #fff solid;
  border-bottom: 1px #fff solid;
  position: absolute;
}
.main-banner .overlay-banner h6 a .arrowRight:before,
.internal-banner .overlay-banner h6 a .arrowRight:before {
  content: "";
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-name: arrow;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes arrow {
  0% {
    left: 0px;
    top: 0px;
  }
  100% {
    left: 30px;
    top: 0px;
  }
}

/* Standard syntax */
@keyframes arrow {
  0% {
    left: 0px;
    top: 0px;
  }
  100% {
    left: 30px;
    top: 28px;
  }
  100% {
    opacity: 0;
  }
}

.navbar {
  border: 0px !important;
}
.navbar-default {
  transition: 500ms ease;
  background: transparent !important;
  padding: 10px 0;
}
.navbar-default .navbar-nav > li > a {
  color: #fff !important;
  text-transform: uppercase;
}

.navbar-default.scrolled {
  /* background-color: #545454 !important; */
  background: -moz-linear-gradient(left, #9b61dc 0, #20a3f0 100%) !important;
  background: -webkit-linear-gradient(left, #9b61dc 0, #20a3f0 100%) !important;
  background: linear-gradient(to right, #9b61dc 0, #20a3f0 100%) !important;
}
.navbar-default.scrolled > .welcomenotes {
  display: none;
}

.logo {
  max-width: 200px;
  max-height: 200px;
  margin: 0 auto;
}
.nav .open > a,
.nav .open > a:focus,
.nav .open > a:hover {
  background-color: transparent !important;
}
section.about-us {
  min-height: 73vh;
  color: #fff;
  background: -moz-linear-gradient(left, #9b61dc 0, #20a3f0 100%);
  background: -webkit-linear-gradient(left, #9b61dc 0, #20a3f0 100%);
  background: linear-gradient(to right, #9b61dc 0, #20a3f0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9b61dc', endColorstr='#20a3f0', GradientType=1 );
}
section.about-us h2::after {
  content: "";
  height: 3px;
  width: 40px;
  top: 60px;
  right: 15px;
  position: absolute;
  background: #fff;
}
section.about-us .worked-with h2::after {
  content: "";
  height: 3px;
  width: 40px;
  top: 60px;
  left: 15px;
  position: absolute;
  background: #fff;
}

section.about-us {
  padding: 5em 0 2.5em 0;
}
section.about-us h2 {
  color: #fff;
}
section.about-us p {
  line-height: 1.6em !important;
  padding: 15px 0;
  font-family: "Karla", sans-serif;
  font-size: 1.1em;
  color: #fff;
}
section.about-us .worked-with {
}
section.about-us .worked-with img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  max-width: 100px;
  height: auto;
  margin: 0 auto;
  display: block;
  padding: 10px;
}
section.about-us .worked-with img:hover {
  -webkit-filter: none; /* Safari 6.0 - 9.0 */
  filter: none;
}
section.about-us .worked-with .col-sm-4::before {
  content: "";
  height: 0;
  border-bottom: 1px solid #d9d8d8;
  position: absolute;
  bottom: 0;
  left: 18px;
  right: 18px;
  opacity: 0.3;
}

section.about-us .worked-with .col-sm-4:nth-child(7)::before,
section.about-us .worked-with .col-sm-4:nth-child(8)::before,
section.about-us .worked-with .col-sm-4:nth-child(9)::before {
  border-bottom: none;
}

section.about-us .worked-with .col-sm-4::after {
  content: "";
  width: 0;
  border-left: 1px solid #d9d8d8;
  position: absolute;
  right: -1px;
  top: 16px;
  bottom: 16px;
  opacity: 0.3;
}
section.about-us .worked-with .col-sm-4:nth-child(3)::after,
section.about-us .worked-with .col-sm-4:nth-child(6)::after,
section.about-us .worked-with .col-sm-4:nth-child(9)::after {
  border-left: 0px solid #d9d8d8;
}

.container.services {
  background-color: #fff;
  border-radius: 20px;
  margin-top: 10em;
  padding: 2em;
  position: relative;
  max-width: 1100px;
}
.container.services .service-icon svg {
  height: 50px;
  text-align: center;
  margin: 0 auto;
  display: block;
}
.container.services .service-icon ul li.active a span:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  width: 43px;
  height: 43px;
  background: #cdebf8;
  z-index: -1;
  border-radius: 50%;
  margin: 0 auto;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
  -moz-transform: scale(0);
  -webkit-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}
.container.services .service-icon .ul-top {
  top: -26em;
  left: 0;
  position: absolute;
  right: 0;
  z-index: 100;
  padding-bottom: 10px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0px 7px 11px 0px rgba(215, 212, 212, 0.31);
  border: none;
  display: inline-block;
  width: 100%;
}
.ul-top h2 {
  text-align: center;
  margin: 0.8em 0;
  color: #545454;
  font-size: 3.5em;
}
.container.services .service-icon ul li {
  width: 16.5%;
  text-align: center;
  float: left;
  margin-bottom: 15px;
  border-right: #0c9ec6 1px dotted;
}

.container.services .service-icon ul li a {
  padding: 15px;
  color: #000;
  display: inline-block;
  width: 100%;
}

.container.services .service-icon ul li:last-child {
  border-right: #0c9ec6 0px dotted;
}
.container.services .service-icon ul li a p {
  padding: 15px 0;
  margin-bottom: 0px;
}

.container.services .service-icon ul li a:hover,
.container.services .service-icon ul li a:active {
  text-decoration: none;
  fill: #0c9ec6;
  color: #0c9ec6;
}

.building {
  line-height: 1.9em !important;
}
.eye {
  line-height: 1.7em !important;
}
.icon-H {
  width: 100px !important;
  height: 100px;
  position: relative !important;
  display: inline-block;
  line-height: 50px;
  text-align: center;
}

.icon-H::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border: 2px dashed #fff;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: borderrotate;
  animation-name: borderrotate;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
}
@-moz-keyframes borderrotate {
  0%,
  100% {
    -moz-transform: rotate(0deg);
  }
  50% {
    -moz-transform: rotate(180deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes borderrotate {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes borderrotate {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.how-we-do h2 {
  color: #aeacac;
  font-size: 6em;
  line-height: 11px;
  margin-top: 0.5em;
  margin-bottom: 0.8em;
}
.how-we-do .icon-H img {
  padding: 27px;
  margin: 0 auto;
}
.how-we-do .icon-H {
  width: 100px !important;
  height: 100px;
  position: relative !important;
  display: inline-block;
  line-height: 50px;
  text-align: center;
}

.how-we-do .icon-H::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border: 2px dashed #545454;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: borderrotate;
  animation-name: borderrotate;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
}

.navbar-default .navbar-nav > li > a {
  font-family: "Karla", sans-serif;
  font-size: 1.2em;
}

section .service-us {
  width: 100%;
  height: 70vh;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

section.how-we-do {
  background-image: url("../img/bulb.gif");
  right: 0;
  background-repeat: no-repeat;
  min-height: 72vh;
}

.bg-7 {
  background-image: url(../img/background.jpg);
  padding: 7em 0 0 0;
}

section.how-we-do .how-we-do-content {
  padding: 6em 0 2.5em 0;
}
section.how-we-do .how-we-do-content h3 {
  font-size: 1.2em;
  text-transform: uppercase;
  font-weight: bold;
}

footer {
  width: 100%;
  background-color: #545454;
  padding: 4em 1.5em;
  color: #fff;
}
footer .container {
  max-width: 1100px;
  font-size: 1.1em;
}
footer .container h4 {
  font-weight: 600;
}
.footer-top-content {
  border-bottom: #a2a2a2 1px dashed;
  padding: 1.5em 0;
  color: #a2a2a2;
}
.footer-contact-details a {
  color: #a2a2a2;
}
.footer-contact-details a:hover {
  text-decoration: none;
  color: #a2a2a2;
}
.footer-contact-details {
  padding: 1.5em 0;
  color: #a2a2a2;
}
.copyright {
  width: 100%;
  text-align: center;
  background-color: #000000;
  color: #a2a2a2;
  padding: 10px;
}

/* social-icon-section */
.announce-social {
  width: 100px;
  height: 100px;
  background-color: #0c9ec6;
  color: #fff;
  margin-left: 43px;
  text-align: center;
  border-radius: 50%;
  right: -41px;
  padding-top: 3%;
}

.announce-social i {
  margin-right: 27px;
  margin-top: 32px;
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}
.social-icons {
  width: 186px;
  height: auto;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5px 0 47px;
  color: #545454;
  text-align: center;
  margin-right: -83px;
  border-radius: 50%;
  position: fixed;
  bottom: 39%;
  right: 0px;
  padding-top: 2%;
  border: #0c9ec6 1px solid;
  z-index: 999999;
}

.social-icons ul {
  margin-left: 0px;
}
.social-icons ul li {
  text-align: left;
  list-style: none;
}
.social-icons ul li a {
  color: #545454;
  font-size: 20px;
}
.social-icons ul li a:hover {
  color: #0c9ec6;
  font-size: 20px;
}
.fb-icon {
  position: absolute;
  margin-left: 68px;
  margin-top: -18px;
}
.twitter-icon {
  position: absolute;
  margin-top: 26px;
  margin-left: 20px;
}
.linkedin-icon {
  position: absolute;
  margin-top: 83px;
  margin-left: 22px;
}
.insta-icon {
  position: absolute;
  margin-top: 120px;
  margin-left: 68px;
}

section.city {
  /* margin-top: 5em; */
  position: relative;
  left: 0;
  top: 0;
}
section.city .building {
  position: relative;
}
section.city .baloon {
  max-height: 30px;
  content: "";
  position: absolute;
  display: inline-block;
  right: 50%;
  transition: transform 0.5s ease;
  z-index: 10;
  animation: balloons 4s ease-in-out infinite;
  transform-origin: bottom center;
  top: 2em;
}

section.city .baloon1 {
  max-height: 30px;
  content: "";
  position: absolute;
  right: 20%;
  transition: transform 0.5s ease;
  z-index: 999999;
  animation: balloons1 6s ease-in-out infinite;
  transform-origin: bottom center;
}

@keyframes balloons1 {
  0%,
  100% {
    transform: translateX(0) rotate(-4deg);
  }
  50% {
    transform: translateX(-50px) rotate(4deg);
  }
}

@keyframes balloons {
  0%,
  100% {
    transform: translateY(0) rotate(-4deg);
  }
  50% {
    transform: translateY(-15px) rotate(4deg);
  }
}

.balloon:before,
.balloon1:before {
  content: "▲";
  font-size: 20px;
  color: hsl(215, 30%, 50%);
  display: block;
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: -12px;
  z-index: -100;
}

.balloon:after,
.balloon1:after {
  display: inline-block;
  top: 153px;
  position: absolute;
  height: 250px;
  width: 1px;
  margin: 0 auto;
  content: "";
  background: rgba(0, 0, 0, 0.2);
}

section.records {
  /* background: -moz-linear-gradient(left, #9b61dc 0, #20a3f0 100%);
  background: -webkit-linear-gradient(left, #9b61dc 0, #20a3f0 100%);
  background: linear-gradient(to right, #9b61dc 0, #20a3f0 100%); */
  background-color: #20a2ef;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9b61dc', endColorstr='#20a3f0', GradientType=1 );
  margin: 1px 0;
}

section.records ul {
  margin-bottom: 0px;
  text-align: center;
  color: #fff;
}
section.records ul li {
  width: 20%;
  float: left;
  padding: 20px 0;
  border-right: #fff 1px dashed;
}
section.records ul li:last-child {
  border-right: #fff 0px dashed;
}
section.records ul li h4 {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 2em;
  line-height: 11px;
}
section.records ul li p {
  text-transform: lowercase;
  font-size: 1.3em;
}

.right {
  position: relative;
  background-color: #545454;
}
.right .water {
  position: absolute;
  top: -46em;
  z-index: 99;
  left: 0;
  transform: scale(2);
  -webkit-transform: scale(2.5);
  background-color: rgba(255, 255, 255, 0.2);
  right: 0;
  margin: 0 auto;
}
.right .water::before,
.right .water::after,
.right .water .dot::after,
.right .water .dot::before {
  content: "";
  width: 100px;
  height: 100px;
  background-color: inherit;
  position: absolute;
  margin: 50px auto 0 auto;
  opacity: 0;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  -webkit-animation: water 3s ease-out;
  -moz-animation: water 3s ease-out;
  animation: water 3s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.right .water::before {
  -webkit-animation-delay: 660ms;
  -moz-animation-delay: 660ms;
  animation-delay: 660ms;
}
.right .water .dot::before {
  -webkit-animation-delay: 1380ms;
  -moz-animation-delay: 1380ms;
  animation-delay: 1380ms;
}
.right .water .dot::after {
  -webkit-animation-delay: 1020ms;
  -moz-animation-delay: 1020ms;
  animation-delay: 1020ms;
}
.right .water::after {
  -webkit-animation-delay: 300ms;
  -moz-animation-delay: 300ms;
  animation-delay: 300ms;
}
.right .water .dot {
  background-color: inherit;
}
@keyframes water {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  65% {
    opacity: 0.5;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}
@-webkit-keyframes water {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  65% {
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(3);
    opacity: 0;
  }
}
.water {
  pointer-events: none;
}

section.contact-section {
  padding: 7em 0 4em 0;
}
.contact-section .contact-page-content {
}
.contact-section h2 {
  color: #aeacac;
  font-size: 2em;
  margin-top: 0.5em;
  margin-bottom: 0.8em;
}
.contact-icons {
  margin: 0 audio;
  text-align: center;
}
.contact-icons a {
  color: #545454;
}
.contact-icons a:hover {
  text-decoration: none;
}
.contact-section.icon-H img {
  padding: 27px;
  margin: 0 auto;
}
.contact-section .icon-H {
  width: 100px !important;
  height: 100px;
  position: relative !important;
  display: inline-block;
  padding: 20px;
  color: #0c9ec6;
  line-height: 50px;
  text-align: center;
}
.contact-section .icon-H:hover {
  color: #aeacac;
}

.contact-section .icon-H::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border: 2px dashed #aeacac;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: borderrotate;
  animation-name: borderrotate;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
}

.form-bg {
  padding: 1.3em 0 1.8em 0;
  background: -moz-linear-gradient(left, #9b61dc 0, #20a3f0 100%);
  background: -webkit-linear-gradient(left, #9b61dc 0, #20a3f0 100%);
  background: linear-gradient(to right, #9b61dc 0, #20a3f0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9b61dc', endColorstr='#20a3f0', GradientType=1 );
}

.form-bg h2 {
  color: #fff;
}
form#getintouch_contact {
  width: 100%;
}
.form-group {
  margin-bottom: 0px !important;
}
.form-control {
  height: 49px !important;
  border-radius: 0px !important;
}
.form-bg:before,
.form-bg:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 30px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width: 300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.form-bg:after {
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}
.about-page-content a > p {
  color: #333;
}
.services a h2 {
  color: #333;
}
.services a:hover h2 {
  color: #20a3f0;
}
.about-page-content a:hover {
  text-decoration: none !important;
}
.f-16 {
  font-size: 14px !important;
  line-height: 22px;
}

.opn-hr .right-yellow {
  border-left: #fff 3px solid;
  margin: 10px;
  padding: 5px 10px 5px 10px;
}
.opn-hr {
  background-color: #20a3f0;
  position: relative;
}
.opn-hr p.since {
  color: rgba(228, 227, 227, 0.4);
  right: 10px;
  top: -0em;
  position: absolute;
}
.opn-hr h1 {
  color: rgba(228, 227, 227, 0.4);
  right: 0;
  top: -0.15em;
  font-family: impact;
  font-size: 7em;
  position: absolute;
}
.opn-hr h2 {
  color: #fff;
  line-height: 20px;
}
.opn-hr p {
  color: #fff;
}
a.request-quote {
  border-radius: 100px;
  background: #20a3f0;
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  font-weight: 500;
  padding: 20px 30px;
  margin: 0 auto;
  display: block;
  max-width: 300px;
  font-size: 20px;
  border: 3px solid #fff;
  box-shadow: 2px 2px 5px #ccc;
}
a.request-quote:hover {
  text-decoration: none;
  color: #fff;
}
.bg-abt {
  background-image: url("../img/bg_about.jpg");
  right: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
.about-icon {
  padding: 13px 0;
  margin: 0 auto;
  text-align: center;
}
.about-page-content h3 {
  color: #0c9ec6;
  font-weight: 600;
}
.about-page-content p {
  font-size: 15px;
}

.about-bg-shade-r {
  background-color: #e2e0e0;
  padding: 2em 0;
  box-shadow: -5px 0px 5px -3px #333;
}
.mainlogo {
  width: 40px;
  margin-top: -10px;
}
.ml-auto {
  margin: 0 auto;
}
@media only screen and (min-width: 767px) {
  .dropdown-menu {
    min-width: 600px !important;
    background-color: #3379b7ea !important;
  }
  .dropdown-menu ul {
    padding: 10px;
  }
  .dropdown-menu ul li a {
    padding: 9px 15px;
    display: flex;
    color: #fff;
    /* border-bottom: #a6a6a6 1px dashed; */
  }
  .dropdown-menu ul li a:hover {
    text-decoration: none;
    background-color: #ffffff;
    color: #337ab7;
    border-radius: 30px;
    /* border-bottom: transparent 1px dashed; */
  }
}
@media only screen and (max-width: 767px) {
    section.about-us {
  min-height: 73vh;
  color: #fff;
  background:#e5e5e5;
}
  a.request-quote {
    display: flow-root !important;
  }
  .social-icons {
    display: none;
  }
  .graphic {
    min-height: auto;
    border: #e1e1e1 1px solid;
    border-radius: 30px;
    padding: 15px;
    margin-bottom: 30px;
    text-align: center;
  }
  .services {
    text-align: center;
  }
  .services a img {
    text-align: center;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 767px) {
  section.about-us {
    padding: 5em 0 2.5em 0;
    text-align: center;
  }
  section.about-us h2::after,
  section.about-us .worked-with h2::after {
    display: none;
  }
  .how-we-do h2 {
    color: #aeacac;
    font-size: 2.5em;
    line-height: 11px;
    margin-top: 1em;
    margin-bottom: 0.8em;
  }
  section.how-we-do {
    background-image: none;
    right: 0;
    background-repeat: no-repeat;
    text-align: center;
  }
  section.about-us h2 {
    text-align: center;
  }
  section.about-us p {
    text-align: center;
  }
  .container.services {
    margin-top: 1.5em;
  }
  .container.services .service-icon ul li {
    width: 50%;
    text-align: center;
    float: left;
  }
  .container.services .service-icon .ul-top {
    top: 00px;
    left: 0;
    position: static;
    right: 0;
    z-index: 100;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0px 7px 11px 0px rgba(215, 212, 212, 0.31);
    border: none;
    display: inline-block;
    width: 100%;
  }
  .container.services .service-icon ul li:nth-child(2),
  .container.services .service-icon ul li:nth-child(4),
  .container.services .service-icon ul li:last-child {
    border-right: #0c9ec6 0px dotted;
  }
  section.how-we-do .how-we-do-content {
    padding: 1em 0 2.5em 0;
  }
  section.records ul li {
    width: 50%;
    float: left;
    padding: 20px 0;
    border-right: #fff 0px dotted;
  }
  section.city .baloon {
    max-height: 30px;
    content: "";
    position: absolute;
    display: inline-block;
    right: 50%;
    transition: transform 0.5s ease;
    z-index: 10;
    animation: balloons 4s ease-in-out infinite;
    transform-origin: bottom center;
    top: -0.5em;
  }
}

@media only screen and (max-width: 400px) {
  .container.services .service-icon ul li {
    width: 100%;
    text-align: center;
    float: left;
  }
  .container.services .service-icon ul li {
    border-right: #0c9ec6 0px dotted;
  }
  section.records ul li {
    width: 100%;
    float: left;
    padding: 20px 0;
    border-bottom: #fff 1px dotted;
  }
}

ul.keywordslist li {
  list-style: none;
  float: left;
  margin-right: 10px;
  height: 26px;
}
ul.keywordslist li a h3 {
  font-size: 16px;
  color: #ffffff;
}
.f-25 {
  font-size: 25px !important;
  padding-bottom: 0px !important ;
}
.mb-0 {
  margin-bottom: 0px;
}
.br {
  border-radius: 20px !important;
  padding: 7px 15px !important;
}
.me-2 {
  margin-right: 10px;
}
.spacing {
  padding: 16px 0;
}
.dark-bg {
  background: -moz-linear-gradient(left, #9b61dc 0, #20a3f0 100%);
  background: -webkit-linear-gradient(left, #9b61dc 0, #20a3f0 100%);
  background: linear-gradient(to right, #9b61dc 0, #20a3f0 100%);
  padding: 10px;
  color: #ffffff;
  text-align: center;
  margin-top: -10px;
}