/* importfont */
@import url("css2.css");
/* importfont end */

/* typography */
* {
  margin: 0;
  padding: 0;
}

body {
  font-size: 16px;
  font-family: "Noto Sans", sans-serif;
  font-weight: 600;
  color: #777575;
  line-height: 28px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Inter", sans-serif;
  color: #2f2f2f;
}

h1 {
  font-size: 48px;
  font-weight: 900;
}

h2 {
  font-size: 40px;
  font-weight: 900;
}

h3 {
  font-size: 26px;
  font-weight: 900;
}

h4 {
  font-size: 23px;
  font-weight: 600;
}

h5 {
  font-size: 24px;
  font-weight: 600;
}

h6 {
  font-size: 20px;
  font-weight: 400;
}

img {
  width: 100%;
}

a {
  text-decoration: none;
  color: #222;
}

a:hover {
  color: #2389da;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
}

/* typography end */

/* loader */
.spinner4 {
  background-color: #e57c23;
}

/* loader end */

/* button */
.button {
  background: #2389da;
  padding: 10px 29px;
  font-size: 14px;
  border: none;
  color: #fefefe;
  font-weight: 500;
  border-radius: 20px;
  transition: 1s;
}

.button i {
  color: #fff;
}

.button:hover {
  background: #1ca3ec;
}

/* button end */

/* navbar */
.navbar {
  padding: 20px 0;
  background-color: #f3f3f3;
}

.navbar .navbar-brand img {
  width: 100px;
}

.navbar .navbar-nav {
  margin: 0 auto;
}

.navbar .navbar-nav .nav-item {
  margin: 0 15px;
  font-weight: 500;
}

.navbar .navbar-nav .nav-item .nav-link {
  color: #fff;
  font-size: 16px;
}

.navbar .navbar-nav .dropdown-menu {
  border-radius: 0;
}

.navbar .navbar-nav .dropdown-item:hover,
.navbar .navbar-nav .dropdown-item:focus {
  background: #222;
  color: #fff;
}

.navbar .navbar-nav .dropdown:hover > .dropdown-menu {
  display: block;
}

.navbar .navbar-nav .dropdown > .dropdown-toggle:active {
  pointer-events: none;
}

.navbar .navbar-toggler {
  border: transparent;
}

.navbar .navbar-toggler i {
  color: #fff;
  font-size: 30px;
  text-align: center;
}

.navbar .navbar-toggler .open {
  position: relative;
  right: -12px;
}

.navbar .navbar-toggler .close {
  display: none;
  position: relative;
  right: -9px;
}

.navbar .navbar-toggler:focus {
  box-shadow: none;
}

.navbar .navbar-toggler:not(.collapsed) > .open {
  display: none;
}

.navbar .navbar-toggler:not(.collapsed) > .close {
  display: inline-block;
}

.shrink {
  background: #fafafa;
  padding: 17px 0;
  box-shadow: 0px 1px 4px 0px #005e71;
}

.shrink .navbar-nav .nav-item .nav-link {
  color: #000;
}

.shrink .button:hover {
  background: #017991;
}

.shrink .navbar-toggler i {
  color: #000;
}

/* navbar end */

/* header */
.header .content .carousel .carousel-inner .carousel-item {
  position: relative;
}

.header .content .carousel .carousel-inner .carousel-item .overlay {
  position: absolute;
  background: #222;
  opacity: 0.5;
  inset: 0;
}

.header .content .carousel .carousel-inner .carousel-item .carousel-caption {
  position: absolute;
  z-index: 1;
  top: 41%;
  left: 15%;
  padding-top: 0;
  padding-bottom: 0;
}

.header .content .carousel .carousel-inner .carousel-item .carousel-caption h1 {
  margin-bottom: 15px;
  line-height: 70px;
}

.header .content .carousel .carousel-inner .carousel-item .carousel-caption h1,
.header .content .carousel .carousel-inner .carousel-item .carousel-caption h3 {
  color: #fff;
}

.header
  .content
  .carousel
  .carousel-inner
  .carousel-item
  .carousel-caption
  .button {
  margin-top: 20px;
}

.header-page {
  background-image: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.75),
      rgba(0, 0, 0, 0.75)
    ),
    url(../images/headerpage.png);
  background-position: center;
  padding: 300px 0 70px 0;
}

.header-page .content h1 {
  color: #fff;
}

.header-page .content .breadcrumb {
  margin: 0;
}

.header-page .content .breadcrumb ol .breadcrumb-item a {
  color: #fafafa;
}

.header-page .content .breadcrumb ol .active {
  color: #fafafa;
}

.header-page .content .breadcrumb ol i {
  color: #fff;
  margin: 7px 12px 0 12px;
}

/* header end */

/* about */
.about {
  padding: 70px 0 70px 0;
}

.about h4 {
  color: #2389da;
}

.about h2 {
  margin-bottom: 30px;
}

.about .content .counter {
  margin: 10px 0;
}

.about .content .counter .content i {
  color: #000;
  margin: 5px 0 0 10px;
  font-size: 20px;
}

.about .content .button {
  margin-top: 20px;
}

.about .content .images {
  position: relative;
}

.about .content .images img {
  border-radius: 20px;
}

.about .content .images .one {
  margin-left: 20px;
  box-shadow: 7px 8px 10px 0px #e1dfdf;
}

.about .content .images .two {
  position: absolute;
  left: -14px;
  bottom: 30px;
  width: 200px;
  margin-left: 24px;
  box-shadow: 2px 2px 10px 1px #fffbfb;
  animation: mover 3s infinite linear alternate;
}

@keyframes mover {
  from {
    bottom: 10px;
  }

  to {
    bottom: 40px;
  }
}

/* about end */

/* services */
.services {
  padding: 70px 0 70px 0;
  background: #f1f4ff;
}

.services h4 {
  color: #2389da;
}

.services h2 {
  margin-bottom: 30px;
}

.services .content {
  position: relative;
  margin-bottom: 23px;
}

.services .content img {
  border-radius: 20px;
  margin-bottom: 10px;
}

.services .content h3 {
  background: #1da7c6;
  color: #fff;
  border-radius: 20px;
  padding: 10px 0;
}

.equipment {
  padding: 70px 0;
}

.equipment .content img {
  border-radius: 20px;
}

.equipment .content ul li {
  margin-bottom: 20px;
}

.equipment .content ul li i {
  width: 30px;
  height: 30px;
  line-height: 28px;
  color: #fff;
  background: #60b3e4;
  border-radius: 50%;
  text-align: center;
  font-size: 18px;
  margin-right: 10px;
}

.price {
  padding: 70px 0;
}

.price .content {
  padding: 20px 10px;
  border: 3px solid #2389da;
  border-radius: 20px 0 20px 0;
}

.price .content h3 {
  color: #2389da;
}

.price .content span {
  margin-bottom: 20px;
}

.price .content hr {
  border-top: 3px solid #000;
  width: 50%;
}

.price .content ul li {
  margin: 12px;
}

.price .content:hover {
  background: #2389da;
}

.price .content:hover h3,
.price .content:hover h4,
.price .content:hover span,
.price .content:hover li {
  color: #fafafa;
}

.price .content:hover .button {
  background: #fafafa;
  color: #000;
}

/* services end */

/* client */
.client {
  padding: 70px 0 50px 0;
  background: #2389da;
}

.client h2 {
  margin-bottom: 36px;
  color: #fafafa;
}

.client .content img {
  width: 130px;
}

.client .owl-theme .owl-nav,
.client .owl-dots {
  display: none;
}

/* client end */

/* project */
.project {
  padding: 70px 0 50px 0;
  background: #f1f4ff;
}

.project h4 {
  color: #2389da;
}

.project h2 {
  margin-bottom: 30px;
}

.project .content {
  /* Active state */
}

.project .content .shine {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.project .content .shine:after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 20%;
  height: 200%;
  opacity: 0;
  transform: rotate(30deg);
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0) 100%
  );
}

.project .content .shine:hover:after {
  opacity: 1;
  left: 130%;
  transition-property: left, top, opacity;
  transition-duration: 0.7s, 0.7s, 0.15s;
  transition-timing-function: ease;
}

.project .content .shine:active:after {
  opacity: 0;
}

.project .content img {
  margin-bottom: 22px;
  border-radius: 10px;
}

/* project end */

/* features */
.features {
  padding: 70px 0 50px 0;
}

.features h4 {
  color: #2389da;
}

.features h2 {
  margin-bottom: 30px;
}

.features h3 {
  margin-bottom: 20px;
}

.features .content {
  margin: 10px 0;
}

.features .content img {
  width: 70px;
  margin-bottom: 20px;
}

/* features end */

/* contact */
.contactinfo {
  padding: 70px 0;
  background: #f1f4ff;
}

.contactinfo h4 {
  color: #2389da;
}

.contactinfo h2 {
  margin-bottom: 20px;
}

.contactinfo .content i {
  font-size: 28px;
  color: #fff;
  width: 70px;
  height: 70px;
  background: #2389da;
  border-radius: 50%;
  line-height: 68px;
  margin-bottom: 14px;
}

.contact {
  padding: 70px 0;
}

.contact h4 {
  color: #2389da;
}

.contact h2 {
  margin-bottom: 20px;
}

.contact .button {
  margin-top: 20px;
}

.contact .content {
  position: relative;
  margin-bottom: 20px;
}

.contact .content label {
  display: inline-block;
}

.contact .content label i {
  position: absolute;
  top: 44px;
  color: #2389da;
  left: 14px;
}

.contact .content input {
  width: 100%;
  height: 50px;
  border: none;
  border-bottom: 1px solid #2389da;
  display: flex;
  padding: 0 42px;
}

.contact .content input:focus {
  outline: none;
}

.contact .content textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid #2389da;
  display: flex;
  padding: 10px 42px 0 42px;
  margin-bottom: 10px;
}

.contact .content textarea:focus {
  outline: none;
}

.contact-blog {
  padding-bottom: 0;
}

/* map */
.map .content iframe {
  width: 100%;
  float: right;
}

/* map end */
/* contact end */

/* footer */
.footer {
  background: #333;
  padding: 65px 0 65px 0;
  clear: both;
}

.footer .content {
  color: #fff;
}

.footer .content img {
  width: 100px;
  margin-bottom: 20px;
}

.footer .content h3 {
  margin-bottom: 20px;
  color: #fff;
}

.footer .content a {
  color: #fff;
}

.footer .content a:hover {
  color: #2389da;
}

.footer .content ul li {
  margin: 10px 10px;
}

.footer .content ul li i {
  font-size: 24px;
}

/* footer end */

/* copyright */
.copyright {
  padding: 30px 0 10px 0;
  background: #222;
  color: #fff;
}

.copyright a {
  color: #fff;
}

.copyright a:hover{
    color: #017991;
}

/* copyright end */
