/*-----------------------------------------------------------------------------------

    Template Name: Randerc - It Solutions & Services HTML Template
    Template URI: http://rockstheme.com
    Description: This is html5 template
    Author: Rocks_theme
    Author URI: http://rockstheme.com
    Version: 1.0

-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------  
     CSS INDEX
    ===================

    1. Theme Default CSS (body, link color, section etc)
    2. Header top Area
    2.1 Header Bottom Area 
    2.2. Sticky Header Area
    2.3. Mobile Menu Area
    3. Intro Area
    4.Welcome Services Area
    5. About area
    6. Services Area
    7. Counter Area
    8. banner area css
    9. projects Area
    10. Quote Area
    11.tab Area
    12. Blog Area
    13.Reviews Area Css
    14. Footer Area
    15. Home 02 area
    16. Brand area
    17. Team Area css
    18. Home 03
    19. Digital Service Area
    20. Breadcumbs Area
    21. Overview Area
    22. FAQ  Area
    23. Blog Sidebar Area
    24. Blog Details
    25.Contact CSS
    26. Services Details area
    27. Project Details page
    28. Login and Register

    
-----------------------------------------------------------------------------------*/
/*----------------------------------------*/
/*  Google Fonts
/*----------------------------------------*/
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,400i,500,600,700,800,900&display=swap");

/*----------------------------------------*/
/*  1.  Theme default CSS
/*----------------------------------------*/
html,
body {
  height: 100%;
  /* font-family: 'Roboto'; */
}
.floatleft {
  float: left;
}
.floatright {
  float: right;
}
.alignleft {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
}
.alignright {
  float: right;
  margin-left: 15px;
  margin-bottom: 15px;
}
.aligncenter {
  display: block;
  margin: 0 auto 15px;
}
a:focus {
  outline: 0px solid;
}
img {
  max-width: 100%;
  height: auto;
}
.fix {
  overflow: hidden;
}
p {
  margin: 0 0 15px;
  color: #5d6471;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
  margin: 0 0 15px;
  color: #151b2c;
  font-weight: 400;
}
h1 {
  font-size: 48px;
  line-height: 52px;
}
h2 {
  font-size: 42px;
  line-height: 46px;
}
h3 {
  font-size: 34px;
  line-height: 40px;
  font-weight: 500;
}
h4 {
  font-size: 26px;
  line-height: 32px;
}
h5 {
  font-size: 20px;
  line-height: 28px;
}
h6 {
  font-size: 16px;
  line-height: 26px;
}
a {
  transition: all 0.3s ease 0s;
  text-decoration: none;
}
a:hover {
  color: #7cc352;
  text-decoration: none;
}
a:active,
a:hover {
  outline: 0 none;
}
a:hover,
a:focus {
  color: #151b2c;
  text-decoration: none;
}
body {
  background: #fff none repeat scroll 0 0;
  color: #7a7788;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  text-align: left;
  overflow-x: hidden;
  line-height: 26px;
}
#scrollUp {
  background: #3078fb none repeat scroll 0 0;
  border-radius: 2px;
  bottom: 15px;
  color: #fff;
  font-size: 24px;
  height: 40px;
  line-height: 37px;
  right: 15px;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 40px;
}
#scrollUp:hover {
  background: #fff;
  opacity: 1;
  border: 1px solid #3078fb;
  color: #3078fb;
}
.clear {
  clear: both;
}
ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}
input,
select,
textarea,
input[type="text"],
input[type="date"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="tel"],
button,
button[type="submit"] {
  -moz-appearance: none;
  box-shadow: none !important;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
}
div#preloader {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: #fff url("img/logo/preloader.gif") no-repeat center center;
}
.navbar-collapse {
  padding-left: 0px;
}
::-moz-selection {
  background: #3078fb;
  text-shadow: none;
}
::selection {
  background: #3078fb;
  text-shadow: none;
}
.bg-color {
  background: #f5f8fb;
}
.bg-color-2 {
  background: #0f2350;
}
.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}
.section-headline {
  padding-bottom: 40px;
  position: relative;
}
.section-headline h3 {
  font-size: 34px;
  max-width: 500px;
  line-height: 40px;
  margin: 0px auto 15px;
  font-weight: 500;
}
.section-headline.left-headline h3 {
  max-width: 100%;
  margin: 0px 0px 20px;
  text-align: left;
}
.section-headline.right-headline h3 {
  max-width: 100%;
  margin: 0px 0px 20px;
  text-align: left;
}
.white-headline h3 {
  color: #fff;
}
.section-headline p {
  max-width: 560px;
  font-size: 17px;
  margin: 0 auto;
}
.section-headline.left-headline p,
.section-headline.right-headline p {
  max-width: 100%;
  text-align: left;
}
.mar-row {
  margin-top: 50px;
}
.bg-background {
  position: relative;
  background: url("http://rockstheme.com/rocks/randerc-preview/img/background/bgp3.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.bg-white {
  background: #fff;
}
.bg-gray {
  background: #fdfcfc;
}
.color {
  color: #3078fb;
}
/*--------------------------------*/
/*  2. Header Area
/*--------------------------------*/
.header-one {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 999;
}
.header-area {
  background: rgba(255, 255, 255, 0);
  padding: 0px 50px;
  border-bottom: 1px solid #fff;
}
.logo {
  display: block;
}
.logo a {
  display: inline-block;
  height: auto;
}
.menu01 {
  text-align: right;
  padding-right: 60px;
}
.menu01 li {
  display: inline-block;
}
.menu01 li a {
  color: #7cc352;
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.6px;
}
.menu01 li a i {
  font-size: 16px;
  padding-right: 7px;
}
.menu01 li:last-child a {
  margin-right: 0px;
}
.menu02 {
  display: flex;
  justify-content: space-between;
}
/* .menu02 li {
  float: left;
  position: relative;
} */
.menu02 li a {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  color: #fff;
  font-size: 16px;
  padding: 20px 0px 10px 0px;
  text-transform: capitalize;
  position: relative;
}
.menu02 li a:hover {
  color: #7cc352;
  background: none;
}
.menu02 li.active a:focus {
  color: #fff;
}
.menu02 li.active a {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  color: #3078fb;
  position: relative;
  z-index: 9999999;
}
.navbar {
  border: medium none;
  margin-bottom: 0;
}
.navbar-default {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background: none;
}
.pages {
  position: relative;
}
.navbar.navbar-default {
  float: right;
  width: 100%;
  max-width: 900px;
}
.menu02 li ul.sub-menu li {
  padding: 0;
  position: relative;
  width: 100%;
}
.menu02 li:hover ul.sub-menu {
  top: 100%;
  opacity: 1;
  z-index: 999;
  visibility: visible;
}
.menu02 li ul.sub-menu li a {
  color: #151b2c;
  display: block;
  font-size: 14px;
  padding: 5px 20px;
}
.menu02 li ul.sub-menu li a span {
  color: #3078fb;
}
.menu02 li:hover ul.sub-menu li a:hover {
  color: #3078fb;
}
.slice-btn {
  display: inline-block;
  padding: 0px 15px;
}
.slice-btn span {
  font-size: 20px;
  font-weight: 500;
  color: #151b2c;
  cursor: pointer;
  line-height: 28px;
}
/*--------------------------------*/
/* 2.2. Sticky Header Area
/*--------------------------------*/
/* .header-area.stick {
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999999;
  box-shadow: 0px 0px 3px #ddd, -2px -2px 3px #ddd;
  background: #fff;
}
.header-area.stick .logo a {
  display: inline-block;
  height: auto;
  padding: 17px 0;
}
.header-area.stick .menu02 li a {
  padding: 35px 14px 10px 14px;
  color: #7cc352;
}
.header-area.stick .menu02 li ul.sub-menu li a {
  color: #151b2c;
  display: block;
  padding: 5px 15px;
}
.header-area.stick .menu02 li ul.sub-menu li a:hover {
  color: #3078fb;
}
.header-area.stick .menu02 > li > a.pages::after {
  right: -1px;
  top: 30px;
} */
/*----------------------------------------*/
/*  2.3. Mobile Menu Area
/*----------------------------------------*/
.mobile-menu-area {
  background: #fff none repeat scroll 0 0;
  padding: 10px 0px;
}
.mean-container .mean-nav {
  float: left;
  width: 100%;
  background: #fff;
}
.mean-container .mean-bar::after {
  content: "";
  font-size: 21px;
  left: 5%;
  position: absolute;
  top: 12px;
  text-transform: uppercase;
  font-weight: 500;
}
.mean-container a.meanmenu-reveal:hover {
  color: #3078fb;
}
.mean-container .mean-nav ul {
  list-style-type: none;
  margin: 20px 0px;
  padding: 0;
  width: 100%;
}
.mean-container .mean-nav ul li a {
  background: #fff none repeat scroll 0 0;
  color: #151b2c;
  display: block;
  float: left;
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  padding: 13px 10px;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  width: 90%;
}
.mean-nav ul li.mean-last {
  margin-bottom: 20px;
}
.mean-container .mean-nav ul li a.mean-expand {
  color: #151b2c;
  line-height: 17px;
}
.mean-container .mean-nav ul li {
  width: 99.7%;
}
.mean-container .mean-nav ul li a.mean-expand {
  background: #fff;
}
.mean-container .mean-nav ul li {
  background: #fff;
}
/*----------------------------------------*/
/*  3. Intro Area
/*----------------------------------------*/
.intro-area {
  position: relative;
  overflow: hidden;
  height: 100vh;
}
.display-table {
  width: 100%;
  height: 100%;
  display: table;
}
.display-table-cell {
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.intro-content {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
  url("img/background/bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
  padding: 175px 50px 100px 50px;
  display: flex;
  margin: auto;
  align-items: center;
}
.slider-content {
  margin: auto;
}
.title1 {
  font-weight: 500;
  font-size: 18px;
  color: #3078fb;
  margin-bottom: 20px;
  display: inline-block;
}
.layer-1 h2 {
  color: #fff;
  font-size: 48px;
  font-weight: bold;
  font-family: "Tahoma";
  line-height: 60px;
  margin-bottom: 0px;
  text-transform: capitalize;
}
.layer-2 p {
  font-size: 18px;
  font-family: "Tahoma";
  font-weight: bold;
  line-height: 60px;
  color: #a4cf48;
  margin-bottom: 0px;
}
.layer-3 p {
  font-size: 18px;
  font-family: "Roboto";
  color: #fff;
  margin-top: 10px;
  line-height: 30px;
}
.appointmentForm {
  width: 90%;
  height: auto;
  margin: 0 auto;
  background-color: rgba(164, 207, 72, 0.7);
  text-align: center;
  padding: 28px 42px;
}

.appointmentForm h2 {
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  line-height: 36px;
  margin-bottom: 0px;
}
.appointmentForm p {
  width: 80%;
  margin: 0 auto;
  color: #fff;
  text-align: left;
  font-size: 18px;
  line-height: 24px;
}
.appointmentForm input {
  width: 90%;
  font-size: 16px;
  padding: 12px 16px;
  margin: 12px auto;
  border: none;
}
.appointmentForm button {
  background-color: #04aa6d;
  color: #fff;
  padding: 12px 16px;
  margin: 10px auto;
  border-radius: 10px;
  border: none;
  font-size: 20px;
  font-family: "Roboto";
}
/*--------------------------------*/
/* 4.Welcome Services Area
/*--------------------------------*/
.welcome-area {
  position: relative;
}
.all-services {
  margin-top: -30px;
}
.well-services {
  width: 33.33%;
  float: left;
  padding: 40px 30px;
  border-radius: 0px;
  margin-top: 0px;
  text-align: center;
}
.wel-btn {
  font-size: 24px;
  color: #3078fb;
  transition: 0.5s;
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 41px;
  font-weight: 700;
  border-radius: 2px;
  background: #fff;
  text-align: center;
  border: 1px solid #fff;
}
.big-icon {
  font-size: 80px;
  display: inline-block;
  margin: 0px 10px 30px;
  line-height: 80px;
  position: relative;
  color: #3078fb;
}
.services-img {
  overflow: hidden;
  position: relative;
  text-align: center;
  padding: 0px;
}
.wel-content h4 {
  display: inline-block;
  font-size: 22px;
  margin-bottom: 0;
  padding: 0 0 20px;
}
.wel-content p {
  font-size: 16px;
}
.well-services:nth-child(2n) {
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
}
.wel-content a {
  position: relative;
  font-weight: 500;
  color: #444;
}
.well-services:hover::after {
  transition: 0.4s;
  opacity: 1;
  top: 54%;
  left: 50%;
}
.wel-content a:hover {
  color: #3078fb;
}
.wel-content a::after {
  position: absolute;
  left: 0;
  bottom: 0;
  background: #3078fb;
  height: 1px;
  width: 0%;
  content: "";
  transition: 0.3s;
}
.wel-content a:hover {
  color: #3078fb;
}
.wel-content a:hover::after {
  transition: 0.3s;
  width: 100%;
}
/*----------------------------------------*/
/*  5. About area
/*----------------------------------------*/
.about-2 {
  background: url("img/background/ag1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  background-attachment: scroll;
}
.about-content {
  background: #062241;
  padding: 100px 70px 100px 100px;
  overflow: hidden;
}
.about-content p {
  color: #ddd;
  font-size: 16px;
}
.about-company {
  margin-top: 15px;
  display: block;
  overflow: hidden;
}
.single-about {
  width: 50%;
  float: left;
}
.about-text {
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  line-height: 26px;
  position: relative;
  padding-left: 30px;
  display: block;
  margin-top: 10px;
}
.about-text::before {
  position: absolute;
  content: "";
  border: 1px solid #fff;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50px;
}
.about-image {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 510px;
}
.video-content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  margin-top: -50px;
  text-align: center;
  z-index: 9;
}
.video-play.vid-zone {
  background: #3078fb;
  border-radius: 100%;
  display: inline-block;
  font-size: 24px;
  height: 70px;
  line-height: 66px;
  width: 70px;
  overflow: hidden;
  transition: 0.4s;
  border: 1px solid #3078fb;
}
.video-play.vid-zone:hover {
  background: #fff;
  transition: 0.4s;
  border: 1px solid #3078fb;
}
.video-play.vid-zone:hover i {
  color: #3078fb;
}
.video-play.vid-zone i {
  color: #fff;
  margin-left: 5px;
}
/*--------------------------------*/
/* 6. Services Area
/*--------------------------------*/
.service-area {
  position: relative;
}
.single-service {
  z-index: 1;
  background: #fff;
  text-align: left;
  padding: 40px 30px;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  margin-bottom: 30px;
  position: relative;
  box-shadow: none;
  text-align: left;
  padding: 40px 40px;
  border: 1px solid rgba(48, 120, 251, 0.4);
}
.single-service::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  background: #062241;
  opacity: 0;
  transition: 0.4s;
  content: "";
  z-index: -1;
}
.service-icon span {
  font-size: 60px;
  line-height: 60px;
  margin-bottom: 20px;
  display: inline-block;
  color: #3078fb;
}
.service-content h4 {
  display: inline-block;
  font-size: 22px;
  margin-bottom: 0;
  padding: 0 0 15px;
  text-transform: capitalize;
  font-weight: 500;
}
.single-service:hover::after {
  transition: 0.4s;
  opacity: 1;
  height: 100%;
}
.service-content p {
  font-size: 16px;
}
.service-btn {
  font-size: 17px;
  color: #3078fb;
  transition: 0.5s;
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 41px;
  font-weight: 700;
  border-radius: 2px;
  background: #f5f8fb;
  text-align: center;
  border: 1px solid #f5f8fb;
  margin-top: 10px;
}
.service-btn:hover {
  color: #fff;
  transition: 0.5s;
  background: #3078fb;
  border: 1px solid #3078fb;
}
.single-service:hover .service-icon span,
.single-service:hover .service-content h4 {
  color: #fff;
}
.single-service:hover .service-content p {
  color: #ddd;
}
/*--------------------------------*/
/* 7. Counter Area
/*--------------------------------*/
.counter-image {
  margin-right: 50px;
  position: relative;
}
.top-img {
  position: absolute;
  top: 90px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.fun_text {
  padding: 40px 10px;
  text-align: center;
  border-radius: 3px;
  margin-bottom: 30px;
  background: #f5f8fb;
}
.fun_text .counter-icon {
  color: #3078fb;
  display: block;
  font-size: 44px;
  padding-bottom: 10px;
  line-height: 50px;
  font-weight: 100;
}
.fun_text .counter {
  color: #444;
  display: block;
  font-size: 40px;
  padding-bottom: 10px;
  line-height: 44px;
  font-weight: 600;
}
.fun_text > h4 {
  color: #444;
  font-size: 18px;
  text-transform: capitalize;
  margin-bottom: 0px;
}
.counter-image .rotmate-image {
  position: inherit;
  z-index: 2;
  opacity: 0.3;
}
/*----------------------------------------*/
/* 8. banner area css
/*----------------------------------------*/
.banner-area {
  background: rgba(0, 0, 0, 0) url("img/background/bg2.jpg") no-repeat scroll
    center center / cover;
  position: relative;
}
.banner-area:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(6, 34, 65, 0.85) none repeat scroll 0 0;
  content: "";
}
.add-content h3 {
  color: #fff;
  font-size: 36px;
  line-height: 48px;
  max-width: 750px;
  float: left;
  margin-bottom: 0px;
  margin-top: 18px;
  font-weight: 500;
  text-transform: capitalize;
}
.add-contact {
  float: left;
}
.call-us {
  display: block;
  color: #fff;
  font-size: 20px;
  margin-bottom: 30px;
}
.call-us i {
  width: 50px;
  height: 50px;
  display: inline-block;
  border: 1px solid #3078fb;
  background: #3078fb;
  text-align: center;
  line-height: 46px;
  margin-right: 15px;
  border-radius: 3px;
}
.mail-us {
  margin-bottom: 0px;
}
/*--------------------------------*/
/*  9. projects Area
/*--------------------------------*/
.single-awesome-project {
  float: left;
  overflow: hidden;
  width: 100%;
}
.project-all {
  margin-top: -40px;
}
.project-all .single-awesome-project {
  margin-top: 30px;
}
.project-carousel .col-md-4 {
  width: 100%;
}
.awesome-img {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.awesome-img img {
  transform: scale(1.1);
  transition: 0.4s;
}
.single-awesome-project:hover .awesome-img img {
  transform: scale(1);
  transition: 0.4s;
}
.awesome-img > a {
  display: block;
  position: relative;
}
.single-awesome-project:hover .awesome-img > a::after {
  opacity: 1;
}
.single-awesome-project:hover .add-actions {
  opacity: 1;
}
.awesome-img > a::after {
  background: rgba(0, 44, 87, 0.95);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0;
  transition: 0.4s;
}
.add-actions {
  display: block;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  text-align: center;
  transition: all 0.4s ease 0s;
  width: 100%;
  z-index: 4;
  top: 0;
  cursor: pointer;
}
.port-icon {
  color: #fff;
  display: inline-block;
  cursor: pointer;
  top: 41%;
  position: relative;
  font-size: 40px;
}
.project-dec {
  display: block;
  padding-top: 20px;
}
.project-dec h4 {
  color: #2a354e;
  font-size: 24px;
  font-weight: 500;
  text-decoration: none;
  text-transform: capitalize;
  margin-bottom: 5px;
  cursor: pointer;
  position: relative;
}
.project-dec h4::after {
  position: absolute;
  content: "\e628";
  right: 40px;
  top: 0px;
  font-family: themify;
  font-size: 18px;
  width: 46px;
  height: 30px;
  border: 1px solid #3078fb;
  background: #3078fb;
  color: #fff;
  text-align: center;
  line-height: 27px;
  opacity: 0;
  transition: 0.5s;
}
.single-awesome-project:hover .project-dec h4::after {
  right: 0px;
  opacity: 1;
  transition: 0.5s;
}
.project-dec p {
  margin-bottom: 0px;
}
.pst-content {
  padding-left: 10px;
}
.single-awesome-project:hover .project-dec h4 {
  color: #3078fb;
}
.project-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev,
.project-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next {
  color: #fff;
  font-size: 18px;
  margin-top: -20px;
  position: absolute;
  top: 50%;
  text-align: center;
  line-height: 39px;
  opacity: 0;
  border: 1px solid #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.project-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev {
  left: 10%;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  -ms-transition: 0.4s;
}
.project-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next {
  right: 10%;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  -ms-transition: 0.4s;
}
.project-carousel.owl-carousel.owl-theme:hover
  .owl-controls
  .owl-nav
  div.owl-next {
  right: 2%;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  -ms-transition: 0.4s;
  opacity: 1;
}
.project-carousel.owl-carousel.owl-theme:hover
  .owl-controls
  .owl-nav
  div.owl-prev {
  left: 2%;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  -ms-transition: 0.4s;
  opacity: 1;
}
.project-carousel.owl-carousel.owl-theme:hover
  .owl-controls
  .owl-nav
  div.owl-next:hover,
.project-carousel.owl-carousel.owl-theme:hover
  .owl-controls
  .owl-nav
  div.owl-prev:hover {
  color: #fff;
  background: #3078fb;
  border: 1px solid #3078fb;
}
/*----------------------------------------
 10. Quote Area
----------------------------------------*/
.quote-area {
  height: auto;
  width: 100%;
  background: #062241;
}
.quote-area #contactForm input {
  border: none;
  height: 54px;
  margin-bottom: 20px;
  border: 1px solid rgba(49, 120, 251, 0.4);
  border-radius: 3px;
  color: #fff;
}
.quote-area #contactForm input.last-part {
  margin-bottom: 0px;
}
.quote-area .contact-form textarea#message {
  height: 127px;
  border-radius: 0;
  border: none;
  margin-bottom: 20px;
  border: 1px solid rgba(49, 120, 251, 0.4);
  border-radius: 3px;
  color: #fff;
}
.quote-area .quote-btn {
  background: #3078fb;
  border: 1px solid #3078fb;
  color: #fff;
  padding: 10px 20px;
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  width: 100%;
  height: 54px;
  transition: 0.4s;
  border-radius: 3px;
}
.white-headline p {
  color: #ddd;
}
.quote-area .quote-btn:hover {
  background: #fff;
  color: #3078fb;
  transition: 0.4s;
}
.help-block.last-part {
  margin: 0px;
}
/*--------------------------------*/
/* 11.tab Area
/*--------------------------------*/
.tab-area {
  position: relative;
}
.tab-menu {
  display: block;
  width: 100%;
}
.subNav {
  padding: 0;
  position: sticky;
  top: 0px;
  z-index: 999;
  background-color: rgb(164, 207, 72);
}
.tab-menu ul.nav {
  padding: 0px;
  display: flex;
  justify-content: space-between;
}
.tab-menu ul.nav li {
  border: medium none;
}
.tab-menu ul.nav li a {
  color: #000;
  padding: 10px 12px;
  align-items: center;
  text-align: center;
  border: none;
  font-weight: bold;
  font-family: "Roboto";
  font-size: 18px;
}
.tab-menu .nav-tabs {
  border: none;
}
ul.nav li a span.active {
  color: #fff;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus {
  border: none;
  color: #fff !important;
  cursor: default;
  position: relative;
  background: transparent;
}
.tab-menu ul.nav li a:hover,
.tab-menu ul.nav li.active a:hover {
  border: none;
  background: transparent;
}
.title-date {
  display: inline-block;
  position: relative;
}
.tab-menu ul.nav li.active .cha-title {
  color: #fff;
}
.cha-title {
  display: inline-block;
  font-size: 16px;
  line-height: 26px;
}
.single-machine {
  position: relative;
}
.tab-pane {
  display: block !important;
  height: 100vh;
  /* display: flex !important; */
  align-items: center;
  margin: auto;
}
/* .tab-pane .tab-inner {
  padding-top: 120px;
} */
#p-view-1 {
  padding: 50px 0px;
  background-color: #e2f0d9;
  height: auto;
}

#p-view-2 {
  margin: 0px;
  padding: 50px 0px;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
  url("img/background/tab-bg02.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: auto;
}

#p-view-3 {
  padding: 50px 0px;
  background-image: url("img/background/tab-bg03.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: auto;
}
/* .tab-content {
  margin-top: 40px;
} */
.machine-text {
  margin-top: 20px;
}
.cell01Ttl h3 {
  width: 90%;
  margin: 0px auto 50px 5%;
  text-align: left;
  color: #000;
  font-size: 36px;
  font-weight: bold;
  font-family: "Tahoma";
}
.spaceLine {
  width: 100px;
  height: 20px;
  margin: 10px auto 50px auto;
  border-top: 5px solid #7cc352;
}

.tabCell01 .machine-text h3 span {
  color: #7cc352;
}
.tabCell01 .machine-text .tabSectionField01 {
  width: 100%;
  margin: 30px auto;
  display: flex;
  justify-content: space-between;
}

.cellField {
  width: 50%;
  padding: 8px 36px;
  margin: 20px 36px;
  text-align: left;
  background-color: #fff;
  color: #000;
  border-radius: 20px;
  display: flex;
  transition: 1s;
  position: relative;
} 
.cellField .fieldFix {
  margin: auto;
  position: relative;
}
.fieldImg {
  width: 80px;
  max-width: 100%;
  position: absolute;
  top: -50px;
  background-color: #7dc352;
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0px 0px 25px #888;
  transition: 1s;
}
.fieldImg img {
  width: 100%;
  filter: invert(100%) sepia(0%) saturate(7487%) hue-rotate(213deg) brightness(97%) contrast(101%);
}
.fieldText {
  margin-top: 20px;
}
.fieldText h3 {
  color: #000;
  font-size: 20px;
  font-weight: bold;
  margin: 0px auto;
}
.fieldText p {
  color: #7E7E7E;
  font-size: 14px;
  margin-bottom: 20px;
}

.cellField:hover,
.cellField:focus {
  border: 3px solid #7cc352;
  /* padding: 4px 30px; */
  margin: 14px 30px;
}
.cellField:hover .fieldImg,
.cellField:focus .fieldImg {
  background-color: #fff;
}
.cellField:hover .fieldImg img,
.cellField:focus .fieldImg img {
  filter: invert(72%) sepia(46%) saturate(495%) hue-rotate(53deg) brightness(88%) contrast(90%);
}
.cellField:hover .fieldImg p,
.cellField:focus .fieldImg p {
  color: #fff;
}

.view05 {
  width: 90%;
  margin: auto;
}
.tabImg {
  position: sticky;
  right: 0;
  top: 210px;
}
.tabe-img img {
  width: 100%;
}
.tabe-text {
  width: 100%;
  margin: 20px auto;
}
.tabe-text p {
  font-size: 32px;
  font-weight: bold;
  font-family: "Trebuchet MS";
  color: #fff;
  line-height: 32px;
}

.tabe-text span.text01 { 
  font-size: 32px;
  font-weight: bold;
  color: #7cc352;
}
.tabe-text span.text02 {
  font-size: 28px; 
  color: #fff;
}

.machine-text li {
  display: block;
  position: relative;
}
.tabCell02 {
  padding: 0 50px;
}
.tabCell02 .machine-text {
  text-align: center;
}
.cell02Ttl {
  margin: 0px auto 50px auto;
}
.tabCell02 .machine-text .ttl01 {
  font-size: 28px;
  font-weight: bold;
  font-family: "Trebuchet MS";
  color: #7cc352;
}
.tabCell02 .machine-text .ttl02 {
  font-size: 20px;
  line-height: 32px;
  font-family: "Roboto";
  color: #fff;
  margin: 0px auto;
}
.tabCell02 .machine-text .ttl02 span {
  font-size: 32px;
  font-family: "Tahoma";
  font-weight: bold;
  line-height: 40px;
  color: #fff;
}
.cell02Main {
  width: 85%;
  margin: 0px auto 100px auto;
}
.feature01 {
  display: grid;
  grid-template-areas: "featureText featureImg";
  grid-template-columns: 75% 25%;
  gap: 50px;
  align-items: center;
  margin: 20px auto;
}
.feature02 {
  display: grid;
  grid-template-areas: "featureImg featureText";
  grid-template-columns: 25% 75%;
  gap: 50px;
  align-items: center;
  margin: 20px auto;
}
.featureImg {
  padding: 12px 24px;
  grid-area: featureImg;
}
.featureImg img {
  width: 100%;  
}
.featureText {
  padding: 12px 24px;
  text-align: left;
  grid-area: featureText;
}
.featureText h3 {
  font-size: 28px;
  font-weight: bold;
  font-family: "Roboto";
  line-height: 42px;
  color: #7cc352;
}
.featureText p {
  font-size: 20px;
  font-family: "Roboto";
  line-height: 36px;
  color: #fff;
}
.tabCell03 .machine-text .ttlText p {
  font-size: 28px;
  font-weight: bold;
  font-family: "Trebuchet MS";
  text-align: center;
  margin: 0px auto;
  color: #7cc352;
}
.tabCell03 .machine-text .ttlText h3 {
  font-size: 42px;
  font-weight: bold;
  font-family: "Tahoma";
  text-align: center;
  margin: 10px auto 30px auto;
  color: #fff;
}
.tabCell03 .machine-text ul {
  width: 80%;
  margin: 20px auto;
  list-style: none;
  display: flex;
  justify-content: space-between;
}
.tabCell03 .machine-text ul li {
  border: medium none;
  width: 25%;
  background-color: transparent;
  padding: 8px;
}
.tabCell03 .machine-text ul li img {
  width: 100%;
}
.msgText {
  margin-bottom: 80px;
}
.tabCell03 .machine-text .msgText p {
  width: 80%;
  font-size: 16px;
  line-height: 36px;
  font-family: "Trebuchet MS";
  text-align: center;
  margin: 0px auto;
  color: #fff;
}
.tabCell03 .machine-text .msgText p span {
  font-size: 24px;
  line-height: 36px;
  font-family: "Roboto";
  font-weight: bold;
  text-align: center;
  color: #7cc352;
}
.awardsField {
  width: 90%;
  margin: 0px auto 100px auto;
  display: flex;
}
.awardsField .awardsField01 {
  width: 35%;
  text-align: right;
}
.awardsField .awardsField01 img {
  width: 80%;
}
.awardsField .awardsField02 {
  width: 65%;
  padding: 24px 0px 24px 72px;
  text-align: center;
}
.awardsField .awardsField02 h3 {
  font-size: 28px;
  font-family: "Roboto";
  font-weight: bold;
  line-height: 36px;
  color: #7cc352;
}
.awardsField .awardsField02 p {
  font-size: 16px;
  line-height: 28px;
  font-family: "Roboto";
  color: #fff;
}

.tabCell04 .machine-text h3 {
  font-size: 36px;
  font-weight: bold;
  font-family: "Tahoma";
  line-height: 42px;
  text-align: left;
  margin: 0px auto 80px 20px;
}
.imgCell01 {
  grid-area: imgcell01;
}
.imgCell02 {
  grid-area: imgcell02;
}
.imgCell03 {
  grid-area: imgcell03;
}
.imgCell04 {
  grid-area: imgcell04;
}
.imgCell05 {
  grid-area: imgcell05;
}
.imgCell06 {
  grid-area: imgcell06;
}
.imgCell07 {
  grid-area: imgcell07;
}
.imgCell08 {
  grid-area: imgcell08;
}
.imgCell09 {
  grid-area: imgcell09;
}
.imgCell10 {
  grid-area: imgcell10;
}
.imgCell11 {
  grid-area: imgcell11;
}
.imgCell12 {
  grid-area: imgcell12;
}
.tabCell04 .machine-text .tabImgCell {
  display: grid;
  grid-template-areas:
    "imgcell01 imgcell02 imgcell03 imgcell04 imgcell05 imgcell06"
    "imgcell07 imgcell08 imgcell09 imgcell10 imgcell11 imgcell12";
  gap: 50px;
  text-align: center;
  width: 100%;
  margin: 0px auto;
}

.tabCell04 .machine-text .tabImgCell img {
  width: 80px;
  max-width: 100%;
  margin: auto;
}
.tabCell04 .machine-text .tabImgCell p {
  font-size: 18px;
  font-family: "Roboto";
  margin-top: 16px;
}
#p-view-4 .tab-inner {
  padding-top: 50px;
}
#p-view-5 {
  margin: 0px;
  padding: 50px 20px;
  background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
  url("img/background/tab-bg05.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#p-view-5 .tab-inner {
  padding-top: 30px;
}
.tabCell05 {
  padding: 0px 0px 24px 32px;
}
.tabCell05 .machine-text {
  margin: auto;
}
.tabCell05 .machine-text ul {
  list-style-type: none;
}
.tabCell05 .machine-text ul li {
  background: url('img/icon/star.png') no-repeat;
  background-size: 40px 40px;
  padding: 5px 0px 5px 60px;
  margin: 0px auto;
  list-style: none;
}
.tabCell05 .machine-text ul li p {
  font-size: 18px;
  line-height: 42px;
  font-family: "Roboto";
  color: #24524F;
}
.partnerBrand {
  width: 50%;
  margin: 10px auto 10px 12%;
  display: flex;
  justify-content: space-between;
}
.partnerBrand img {
  width: 25%;
  margin: auto;
}

#p-view-6 {
  margin: 0px;
  padding: 50px 20px;
  background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
  url("img/background/tab-bg06.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#p-view-6 .tab-inner {
  padding-top: 50px;
}
.tabCell06 {
  padding: 24px 32px;
}
.tabCell06 h3 {
  font-size: 300%;
  font-weight: bold;
  font-family: "Tahoma";
  line-height: 60px;
  margin: 20px 0px;
  color: #000;
}
.tabCell06 p {
  font-size: 20px;
  line-height: 28px;
  font-family: "Roboto";
  color: #000;
}
/*----------------------------------------*/
/*  12. Blog Area
/*----------------------------------------*/
.blog-content {
  padding: 30px;
  position: relative;
  z-index: 1;
  transition: 0.5s;
  overflow: hidden;
  background: #fff;
}
.blog-content a h4 {
  font-size: 21px;
  color: #2a354e;
  line-height: 30px;
  transition: 0.4s;
}
.home-blog .blog-content a h4 {
  margin-bottom: 0px;
}
.admin-type i,
.date-type i,
.comments-type i {
  color: #3078fb;
  margin-right: 5px;
}
.single-blog:hover .blog-content::after {
  transition: 0.4s;
  opacity: 1;
  top: 0px;
}
.blog-content p {
  line-height: 28px;
  transition: 0.4s;
}
.blog-content a h4:hover {
  color: #3078fb;
  transition: 0.4s;
}
.blog-meta span {
  color: #757b82;
  font-size: 14px;
  font-weight: 400;
  padding-right: 10px;
}
.admin-type img {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 2px solid #3078fb;
  margin-right: 10px;
}
.single-blog {
  position: relative;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}
.blog-meta {
  margin-bottom: 15px;
}
.blog-btn {
  color: #fff;
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  transition: all 0.4s ease 0s;
  border: 1px solid #3078fb;
  background: #3078fb;
  padding: 7px 24px;
  margin-top: 10px;
  border-radius: 3px;
}
.blog-btn:hover {
  color: #3078fb;
  background: transparent;
  transition: all 0.4s ease 0s;
}
/*----------------------------------------
 13.Reviews Area Css
----------------------------------------*/
.reviews-area {
  position: relative;
}
.reviews-area {
  position: relative;
}
.single-testi {
  margin: 0px 0px 30px;
}
.clients-text {
  padding: 30px 30px;
  position: relative;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.testi-img {
  position: relative;
  margin-top: 20px;
  display: block;
  overflow: hidden;
}
.testi-img img {
  max-width: 80px;
  height: auto;
  border-radius: 50px;
  border: 1px solid #ccc;
  float: left;
  margin-right: 20px;
}
.Reviews-content {
  margin-bottom: 15px;
}
.active.center .single-testi .clients-text {
  border: 1px solid #062241;
  background: #062241;
}
.testi-text h4 {
  font-weight: 600;
  text-transform: capitalize;
  font-size: 20px;
  margin-bottom: 0px;
}
.active.center .single-testi .testi-text p,
.active.center .single-testi .guest-rev,
.active.center .single-testi .testi-text h4 {
  color: #fff;
}
.guest-rev {
  font-weight: 400;
}
.testi-text p {
  margin-bottom: 0px;
}
.client-rating {
  margin-bottom: 15px;
}
.testi-text span a {
  color: #3078fb;
}
.testi-text h5 {
  color: #6a7d91;
  font-size: 20px;
}
.client-rating a {
  display: inline-block;
  color: #fec731;
  font-size: 20px;
  padding: 0px 5px 0px 0px;
}
.testimonial-carousel.owl-carousel.owl-theme
  .owl-controls
  .owl-dots
  div.owl-dot
  > span {
  background: #7e8ca0 none repeat scroll 0 0;
  display: inline-block;
  height: 8px;
  width: 8px;
  -moz-transition: 0.4s;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  -ms-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}
.testimonial-carousel.owl-carousel.owl-theme .owl-controls .owl-dots {
  bottom: -20px;
  display: block;
  left: 50%;
  margin-left: -40px;
  position: absolute;
}
.testimonial-content {
  margin-bottom: 15px;
}
.testimonial-carousel.owl-carousel.owl-theme
  .owl-controls
  .owl-dots
  div.owl-dot {
  display: inline-block;
  margin: 0 3px;
}
.testimonial-carousel.owl-carousel.owl-theme
  .owl-controls
  .owl-dots
  div.owl-dot.active
  span {
  background: #3078fb;
  width: 30px;
  border-radius: 3px;
}
/*----------------------------------------*/
/*  14. Footer Area
/*----------------------------------------*/
.footer1 {
  background-color: #25534f;
}
.footer-area {
  padding: 20px 60px 0px 60px;
  background-color: #25534f;
}
.footer-logo {
  margin-bottom: 20px;
}
.footer-content.logo-footer {
  margin-right: 30px;
}
.footer-head p {
  color: #151b2c;
}
.footer-head h4 {
  color: #151b2c;
  font-size: 20px;
  margin-bottom: 20px;
  text-transform: capitalize;
  font-weight: 500;
}
.footer-icons ul li {
  display: inline-block;
}
.footer-icons ul li a {
  color: #fff;
  display: block;
  font-size: 16px;
  line-height: 33px;
  text-align: center;
  margin-right: 2px;
  width: 34px;
  height: 34px;
  border: 1px solid #3078fb;
  border-radius: 2px;
  background: #3078fb;
  transition: 0.4s;
}
.footer-tags li a:hover,
.footer-icons ul li a:hover {
  color: #3078fb;
  background: #fff;
  transition: 0.4s;
}
.footer-tags {
  display: block;
  overflow: hidden;
}
.footer-tags li {
  float: left;
}
.footer-tags li a {
  color: #151b2c;
  display: block;
  font-size: 14px;
  font-weight: 500;
  padding: 3px 5px;
}
.footer-icons {
  margin-top: 30px;
}
.footer-list {
  width: 50%;
  float: left;
}
.footer-contacts p span {
  color: #3078fb;
  font-weight: 500;
}
.socialIcon ul {
  display: flex;
  float: right;
}
.socialIcon ul li {
  width: 60px;
  height: 60px;
  background-color: #a5cf49;
  border-radius: 50%;
  padding: 10px;
  margin: 2.5em 16px;
}
.infoDetail,
.infoDetail2,
.infoDetail3 {
  padding: 0px 36px 0px 36px;
}
.infoDetail .text01 {
  color: #a4cf48;
  font-size: 20px;
  font-weight: bold;
  font-family: "Roboto";
}
.infoDetail .text02 {
  color: #fff;
  font-size: 16px;
  font-family: "Roboto";
}
.infoDetail span {
  display: flex;
  margin: 20px 0px;
}
.infoDetail span img {
  width: 40px;
  height: 40px;
}
.infoDetail span p {
  color: #fff;
  font-size: 16px;
  font-family: "Roboto";
  margin: auto 0 auto 20px;
}

.infoDetail2 .text01 {
  color: #a4cf48;
  font-size: 20px;
  font-weight: bold;
  font-family: "Roboto";
}

.infoDetail2 table {
  width: 100%;
}
.infoDetail2 table tr td {
  font-size: 16px;
  font-family: "Roboto";
  color: #fff;
  padding: 0px 24px 12px 0px;
}

.infoDetail3 .text01 {
  color: #a4cf48;
  font-size: 20px;
  font-weight: bold;
  font-family: "Roboto";
}
.infoDetail3 input {
  font-size: 20px;
  padding: 24px;
  border-radius: 0;
  border: none;
}
.infoDetail3 button {
  background-color: #04aa6d;
  color: #fff;
  border: none;
  margin-top: 20px;
  padding: 12px 24px;
}

.subs-feilds {
  padding-top: 15px;
  border-radius: 3px;
}
.suscribe-input {
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}
.suscribe-input input {
  background: transparent;
  border: 1px solid #f5f5f5;
  color: #777;
  font-size: 15px;
  line-height: 24px;
  padding: 6px 15px;
  height: 46px;
  border-radius: 0;
  width: 64%;
  float: left;
  background: #fff;
}
.suscribe-input button {
  background: #3078fb;
  border: none;
  color: #fff;
  font-size: 17px;
  padding: 10px 5px;
  width: 36%;
  font-weight: 400;
  height: 46px;
  border: 1px solid #3078fb;
  transition: 0.4s;
}
.suscribe-input button:hover {
  color: #3078fb;
  background: transparent;
  transition: 0.4s;
}
.footer-list li a {
  color: #151b2c;
  padding: 7px 0px 10px 20px;
  display: block;
  position: relative;
}
.footer-list li a:first-child {
  padding-top: 0px;
}
.footer-list li a::after {
  position: absolute;
  content: "\e649";
  top: 1px;
  left: 0;
  font-size: 11px;
  font-family: themify;
}
.footer-list li a:hover,
.footer-list li a:hover::after {
  color: #3078fb;
}
.footer-list li a:hover::after {
  color: #3078fb;
}
.footer-area-bottom {
  background-color: #25534f;
  padding: 0px;
}
.copyright {
  padding: 20px 60px 15px 90px;
  border-top: 2px solid #fff;
}
.copyright p {
  color: #fff;
  font-size: 16px;
  font-family: "Roboto";
}
.copyright span {
  color: #a4cf48;
}
/*----------------------------------------*/
/*  15. Home 02 area
/*----------------------------------------*/
.header-area-2 {
  background: rgba(255, 255, 255, 0.85);
}
.intro-content-2 {
  position: relative;
  z-index: 1;
}
.intro-area .slide-content {
  margin-top: 30px;
}
.intro-area-2 .slider-content,
.intro-area-3 .slider-content {
  position: absolute;
  right: 0;
  text-align: left;
  top: 50%;
  z-index: 3;
  left: 0;
  margin: 0 auto;
  margin-top: -80px;
}
.intro-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev,
.intro-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next {
  color: #fff;
  font-size: 20px;
  margin-top: 30px;
  position: absolute;
  top: 50%;
  text-align: center;
  line-height: 44px;
  opacity: 0;
  border: 1px solid #fff;
  width: 44px;
  height: 44px;
  border-radius: 2px;
}
.intro-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev {
  left: 10%;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  -ms-transition: 0.4s;
}
.intro-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next {
  right: 10%;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  -ms-transition: 0.4s;
}
.intro-carousel.owl-carousel.owl-theme:hover
  .owl-controls
  .owl-nav
  div.owl-next {
  right: 2%;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  -ms-transition: 0.4s;
  opacity: 1;
}
.intro-carousel.owl-carousel.owl-theme:hover
  .owl-controls
  .owl-nav
  div.owl-prev {
  left: 2%;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  -ms-transition: 0.4s;
  opacity: 1;
}
.intro-carousel.owl-carousel.owl-theme:hover
  .owl-controls
  .owl-nav
  div.owl-next:hover,
.intro-carousel.owl-carousel.owl-theme:hover
  .owl-controls
  .owl-nav
  div.owl-prev:hover {
  color: #fff;
  background: #3078fb;
  border: 1px solid #3078fb;
}
/* .intro-carousel .owl-item .layer-1{
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s ease-in-out 0.3s;
}
.intro-carousel .owl-item .layer-2{
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s ease-in-out 1s;
}
.intro-carousel .owl-item .layer-3{
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s ease-in-out 1.5s;
}
.intro-carousel .owl-item.active .layer-1,
.intro-carousel .owl-item.active .layer-2,
.intro-carousel .owl-item.active .layer-3{
    transform: translateY(0);
    opacity: 1;
} */
.intro-carousel .owl-item.active .slider-images img {
  transform: scale(1.1);
  transition: 10s;
}
/*--------------------------------*/
/* 16. Brand area
/*--------------------------------*/
.brand-content {
  overflow: hidden;
  text-align: center;
  padding: 60px 0px;
}
.service-area-2 .single-service {
  text-align: center;
}
.service-area-2 .service-icon span {
  font-size: 32px;
  color: #3078fb;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  line-height: 77px;
  border: 1px solid #3078fb;
  transition: 0.4s;
}
.service-area-2 .single-service:hover .service-icon span {
  color: #fff;
  border: 1px solid #3078fb;
  transition: 0.4s;
  background: #3078fb;
}
.section-headline.right-headline {
  padding-bottom: 0px;
}
/*----------------------------------------*/
/*  17. Team Area css
/*----------------------------------------*/
.single-member {
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}
.team-hover {
  padding: 15px 0 0px;
  text-align: center;
  transition: all 0.4s ease 0s;
}
.single-member .team-img {
  display: block;
  position: relative;
}
.single-member .team-img a {
  display: block;
}
.team-content {
  position: absolute;
  top: 65%;
  content: "";
  left: 0;
  right: 0;
  transition: 0.5s;
  background: rgba(255, 255, 255, 0.75) none repeat scroll 0 0;
  padding: 20px 20px;
  width: 100%;
  height: 200px;
}
.team-content h4 a {
  color: #444;
}
.team-content p {
  margin-bottom: 0;
  color: #444;
}
.team-content h4 {
  font-size: 16px;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
.team-content .social-icon {
  margin-top: 15px;
  opacity: 0;
}
.social-icon li {
  display: inline-block;
  margin: 0px 2px;
}
.social-icon li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 1px solid #f5f8fb;
  color: #3078fb;
  border-radius: 1px;
  font-size: 18px;
  text-align: center;
  line-height: 39px;
  background: #f5f8fb;
}
.social-icon li a:hover {
  border: 1px solid #3078fb;
  color: #fff;
  background: #3078fb;
}
.single-member .team-img::after {
  background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
  width: 100%;
  height: 0%;
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  transition: 0.5s;
  box-shadow: 2px 2px 20px #ddd;
}
.single-member:hover .team-img::after {
  height: 100%;
}
.single-member:hover .team-content .social-icon {
  opacity: 1;
}
.single-member:hover .team-content {
  opacity: 1;
  top: 45%;
  transition: 0.5s;
  background: transparent;
}
/*--------------------------------*/
/* 18. Home 03
/*--------------------------------*/
.header-area-3 .main-menu ul.nav > li > a.pages::after {
  color: #fff;
}
.header-area-3.stick .main-menu ul.nav > li > a.pages::after {
  color: #444;
}
.header-area-3 {
  background: rgba(36, 53, 89, 0.5);
}
.intro-area-3 .intro-content-2 {
  position: relative;
  z-index: 1;
}
.intro-area-3 .intro-content-2::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(4, 23, 46, 0.7) none repeat scroll 0 0;
  content: "";
}
.intro-area-3 .slider-content {
  position: absolute;
  right: 0;
  text-align: center;
  top: 50%;
  z-index: 3;
  left: 0;
  margin: 0 auto;
  margin-top: -80px;
}
.header-area-3.stick .logo a.white-logo {
  display: none;
}
.header-area-3 .logo a.black-logo {
  display: none;
}
.header-area-3.stick .logo a.black-logo {
  display: block;
}
.intro-area-3
  .intro-carousel.owl-carousel.owl-theme
  .owl-controls
  .owl-nav
  div.owl-prev,
.intro-area-3
  .intro-carousel.owl-carousel.owl-theme
  .owl-controls
  .owl-nav
  div.owl-next {
  margin-top: -20px;
}
/*----------------------------------------
  19. Digital Service Area
----------------------------------------*/
.digital-services {
  display: block;
  margin-bottom: 30px;
}
.digital-wel {
  text-align: center;
  border: 1px solid rgba(48, 120, 251, 0.4);
  padding: 30px;
}
.digital-icon {
  font-size: 60px;
  margin-bottom: 20px;
  display: block;
  line-height: 60px;
}
.digital-content h4 {
  font-size: 20px;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 30px;
  margin-bottom: 0px;
}
/*----------------------------------------*/
/*  20. Breadcumbs Area
/*----------------------------------------*/
.page-area {
  position: relative;
  z-index: 1;
}
.transparent-header {
  background: transparent;
}
.page-area {
  background: url("img/background/bread.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.page-area::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: -1;
}
.breadcrumb .section-headline {
  text-align: center;
  padding-bottom: 10px;
}
.page-area .section-headline::after {
  display: none;
}
.breadcrumb {
  background-color: transparent;
  margin-bottom: 0;
  padding: 230px 0px 120px;
}
.breadcrumb h3 {
  color: #fff;
  font-size: 42px;
  font-weight: 500;
  line-height: 50px;
  position: relative;
  margin-bottom: 0px;
}
.breadcrumb .section-headline {
  text-align: center;
}
.breadcrumb ul li {
  display: inline-block;
  color: #f5f5f5;
  padding: 0px 10px 0px 20px;
  position: relative;
  font-size: 16px;
}
.breadcrumb ul li.home-bread {
  padding-left: 0px;
}
.breadcrumb ul li.home-bread::after {
  position: absolute;
  content: "\f105";
  font-family: fontAwesome;
  right: -10px;
  top: 0;
}
.transparent-header .main-menu ul.nav > li > a.pages::after {
  color: #fff;
}
.transparent-header.stick .main-menu ul.nav > li > a.pages::after {
  color: #444;
}
/*--------------------------------*/
/* 21. Overview Area
/*--------------------------------*/
.overview-area {
  position: relative;
}
.overview-wrapper {
  margin-top: 20px;
}
.overview-wrapper h3 {
  font-size: 32px;
  line-height: 40px;
}
.total-count {
  margin-top: 30px;
}
.single-count {
  width: 47%;
  float: left;
  text-align: center;
  padding: 40px 20px;
  border-radius: 3px;
}
.left-one {
  margin-right: 3%;
  background: #1fc157;
  border: 1px solid #1fc157;
}
.right-one {
  margin-left: 3%;
  background: #0a27d5;
  border: 1px solid #0a27d5;
}
.count-num {
  font-size: 60px;
  font-weight: 600;
  color: #fff;
  line-height: 70px;
}
.single-count h4 {
  color: #fff;
}
.overview-image {
  position: relative;
  border-radius: 5px;
}
.overview-image img {
  border-radius: 5px;
}
/*----------------------------------------*/
/*  22. FAQ  Area
/*----------------------------------------*/
.faq-area {
  position: relative;
}
.company-faq {
  display: block;
  overflow: hidden;
}
.left-faq {
  display: block;
  overflow: hidden;
  padding-right: 40px;
}
.right-faq {
  display: block;
  overflow: hidden;
  padding-left: 40px;
}
.single-faq .number {
  color: #fff;
  font-weight: 400;
  margin-right: 10px;
  float: left;
  width: 30px;
  height: 30px;
  font-size: 16px;
  line-height: 30px;
  background: #3078fb;
  border-radius: 3px;
  text-align: center;
}
.single-faq h4 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
}
.single-faq p {
  padding-left: 50px;
}
span.q-text {
  padding-left: 50px;
  display: inherit;
  font-size: 20px;
  font-weight: 600;
}
.single-faq {
  margin-bottom: 30px;
}
/*----------------------------------------*/
/*  23. Blog Sidebar Area
/*----------------------------------------*/
.blog-page-area .single-blog {
  padding: 5px;
  background: #fff;
}
.blog-page-area .blog-content {
  padding: 10px 15px 20px;
}
.left-blog h4 {
  position: relative;
  color: #3d5368;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 5px;
  padding: 15px 0px;
  text-transform: capitalize;
  border-bottom: 1px solid #eee;
}
.left-blog h4::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: -2px;
  width: 60px;
  height: 3px;
  background: #3078fb;
}
.blog-left-content .blog-content::after {
  display: none;
}
.left-side {
  padding-right: 40px;
}
.right-side {
  padding-left: 40px;
}
.left-blog {
  overflow: hidden;
  padding-bottom: 20px;
}
.blog-category li,
.left-blog li {
  display: block;
  position: relative;
}
.left-blog ul li a {
  color: #3d5368;
  display: inline-block;
  font-size: 15px;
  padding: 7px 0px 7px;
  text-transform: capitalize;
}
.blog-category ul {
  margin-top: 12px;
}
.left-blog ul li span {
  display: inline-block;
  border: 1px solid #3078fb;
  width: 24px;
  height: 24px;
  text-align: center;
  border-radius: 4px;
  font-size: 13px;
  color: #3078fb;
  line-height: 24px;
  float: right;
  margin: 8px 0px;
}
.pst-content .date-type {
  font-size: 14px;
}
.popular-tag.left-blog ul li a:before {
  display: none;
}
.recent-single-post {
  display: block;
  overflow: hidden;
  padding: 15px 0px;
}
.recent-single-post:last-child {
  border-bottom: none;
}
.post-img {
  display: inline-block;
  float: left;
  padding-right: 10px;
}
.left-blog .post-img a {
  display: block;
  border: 1px solid #fafafa;
}
.left-blog .post-img a img {
  border-radius: 4px;
}
.pst-content {
  padding-left: 100px;
}
.pst-content p {
  margin-bottom: 0px;
}
.pst-content p a:hover,
.left-blog ul li a:hover {
  color: #3078fb;
}
.blog-page-area .blog-content {
  background: #f9f9f9;
}
.pst-content p a {
  color: #3d5368;
  font-size: 15px;
}
.blog-tags {
  padding: 1px 0;
}
.recent-single-post img {
  width: 100%;
  max-width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 2px;
}
.left-blog li:last-child {
  border-bottom: 0;
}
.popular-tag.left-side-tags.left-blog ul {
  padding: 0px;
}
.left-tags .left-side-tags ul li {
  border-bottom: 0;
  display: inline-block;
  margin: 5px 3px;
}
.left-tags .left-side-tags ul li a {
  padding: 5px 10px;
  width: auto;
  background: #f4f5f4;
  color: #3d5368;
  border-radius: 3px;
  font-weight: 400;
  font-size: 14px;
}
.left-tags .left-side-tags ul li a:hover {
  color: #fff;
  background: #3078fb;
}
.left-side-tags h4 {
  margin-bottom: 15px;
}
.blog-side-area .blog-right-column {
  margin-top: -30px;
}
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 10px 0 0px;
  border-radius: 4px;
}
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  line-height: 1.42857143;
  text-decoration: none;
  color: #3d5368;
  background-color: #f4f5f5;
  border: none;
  margin-left: -1px;
  border-radius: 2px;
}
.pagination > li {
  display: inline-block;
  margin: 0px 3px 0px 0px;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 3;
  color: #fff;
  background-color: #3078fb;
  cursor: default;
  border-radius: 2px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  z-index: 2;
  color: #fff;
  background-color: #3078fb;
  border-color: #3078fb;
  border-radius: 2px;
}
.adver-img {
  margin-top: 20px;
}
/*----------------------------------------*/
/*  24. Blog Details
/*----------------------------------------*/
.comments-heading h3,
h3.comment-reply-title {
  border-bottom: 1px solid #ddd;
  color: #3d5368;
  font-size: 18px;
  margin: 0 0 40px;
  padding: 0 0 5px;
  text-transform: capitalize;
}
.comments-list ul li {
  margin-bottom: 25px;
}
.comments-list-img {
  float: left;
  margin-right: 15px;
  border-radius: 50%;
}
.comments-list-img img {
  border-radius: 3px;
  border: 1px solid #ddd;
}
.comments-content-wrap {
  color: #3d5368;
  font-size: 14px;
  margin: 0 0 15px 90px;
  padding: 10px;
  position: relative;
}
blockquote {
  padding: 20px 40px 40px 80px;
  margin: 0 0 20px;
  font-size: 15px;
  border-left: none;
  font-style: italic;
  position: relative;
  background: #f5f5f5;
}
blockquote::before {
  position: absolute;
  top: 20px;
  left: 30px;
  content: "\f10d ";
  font-family: fontawesome;
  font-size: 34px;
  color: #3d5368;
}
blockquote p {
  font-size: 16px !important;
  line-height: 28px;
}
.author-avatar {
  display: inline-block;
  float: left;
  width: 10%;
}
.comments-content-wrap span b {
  margin-right: 5px;
}
.comments-content-wrap span a:hover {
}
span.post-time {
  margin-right: 5px;
}
.comments-content-wrap p {
  color: #3d5368;
  margin-top: 10px;
}
.threaded-comments {
  margin-left: 50px;
}
.comment-respond {
  margin-top: 20px;
}
span.email-notes {
  color: #3d5368;
  display: block;
  font-size: 12px;
  margin-bottom: 10px;
}
.comment-respond p {
  color: #3d5368;
  margin-bottom: 5px;
}
.comment-respond input[type="text"],
.comment-respond input[type="email"] {
  border: 1px solid #ccc;
  border-radius: 0;
  height: 46px;
  margin-bottom: 15px;
  padding: 0 0 0 10px;
  width: 100%;
  background: transparent;
}
.comment-respond textarea#message-box {
  border: 1px solid #ccc;
  border-radius: 0;
  max-width: 100%;
  padding: 10px;
  height: 200px;
  width: 100%;
  background: transparent;
}
.comments-content-wrap span a {
  color: #3078fb;
}
.comments-content-wrap span a:hover {
  color: #3078fb;
}
.comment-respond .add-btn.contact-btn {
  background: #3078fb;
  color: #fff;
  display: block;
  font-size: 16px;
  margin-top: 5px;
  padding: 10px 20px;
  transition: 0.4s;
  border-radius: 2px;
  width: auto !important;
  margin-top: 20px;
  border: 1px solid #3078fb;
  text-transform: capitalize;
  font-weight: 600;
}
.comment-respond .add-btn.contact-btn:hover {
  background: #fff;
  color: #3078fb;
  border: 1px solid #3078fb;
}
.blog-page-details .left-blog-page {
  margin-top: 0px;
  margin-bottom: 30px;
}
.single-post-comments,
.related-post {
  margin-top: 30px;
}
.left-head-blog .pst-content p {
  margin-bottom: 5px;
}
.blog-details .blog-content h4 {
  font-size: 22px;
  line-height: 34px;
  margin-top: 10px;
}
.blog-details .blog-content h5 {
  font-size: 20px;
}
.blog-details .blog-content {
  border: none;
  padding: 30px 0px 30px;
}
.blog-details .blog-images img {
  width: 100%;
  height: 100%;
  max-height: 450px;
  object-fit: cover;
}
.blog-details .img-blog {
  margin: 15px 0px 30px;
  max-height: 350px;
  overflow: hidden;
  width: 50%;
  float: left;
}
.left-blog-img img {
  padding-right: 15px;
}
.right-blog-img img {
  padding-left: 15px;
}
.related-post-list .recent-single-post {
  width: 50%;
  float: left;
  padding: 0px 20px 0px 0px;
}
.related-post-list .recent-single-post:last-child {
  padding: 0px 0px 0px 20px;
}
/*----------------------------------------*/
/* 25.Contact CSS
/*----------------------------------------*/
.contact-area {
  position: relative;
}
.map-area {
  margin-right: 30px;
}
.contact-form input[type="text"],
.contact-form input[type="email"] {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #ccc;
  border-radius: 0;
  color: #3d5368;
  height: 52px;
  margin-bottom: 25px;
  padding-left: 20px;
  width: 100%;
}
.contact-form textarea#message {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #ccc;
  border-radius: 0;
  color: #3d5368;
  height: 180px;
  padding: 20px;
  width: 100%;
}
.contact-form button[type="submit"] {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #3078fb;
  color: #fff;
  display: block;
  font-size: 18px;
  margin-top: 16px;
  padding: 13px 24px;
  border-radius: 2px;
  transition: all 0.3s ease 0s;
  background: #3078fb;
}
.contact-form button[type="submit"]:hover {
  color: #3078fb;
  border: 1px solid #3078fb;
  background: #fff;
  transition: all 0.3s ease 0s;
}
.single-icon i {
  font-size: 64px;
  line-height: 77px;
  margin-bottom: 20px;
  color: #3078fb;
  display: block;
}
.single-icon p {
  font-size: 16px;
  line-height: 30px;
  margin-bottom: 0px;
}
.contact-icon {
  margin-bottom: 50px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
  padding: 40px 40px 40px;
  position: relative;
  z-index: 1;
}
.contact-icon::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 80%;
  height: 2px;
  background: #3078fb;
  right: 0;
  margin: auto;
}
/*----------------------------------------*/
/* 26. Services Details area
/*----------------------------------------*/
.page-head-left {
  margin-right: 40px;
}
.single-page-head {
  margin-bottom: 30px;
}
.single-services-page p {
  color: #666;
  margin-bottom: 0px;
}
.left-contact h4 {
  font-size: 24px;
  text-transform: uppercase;
  margin-bottom: 30px;
}
.left-menu li {
  display: block;
  margin: 2px 0px;
}
.build-img .page-img {
  padding-bottom: 0;
}
.left-menu ul li.active a {
  color: #3078fb;
  position: relative;
}
.left-menu ul li a:hover {
  color: #3078fb;
}
.left-menu ul li a {
  color: #333;
  display: block;
  font-size: 16px;
  padding: 13px 20px;
  position: relative;
  text-decoration: none;
  text-transform: capitalize;
  background: #f4f4f4;
}
.left-menu ul li a:hover::after,
.left-menu ul li.active a::after {
  position: absolute;
  right: 0;
  top: 0px;
  background: #3078fb;
  content: "";
  width: 3px;
  height: 100%;
}
.down-btn i {
  font-size: 24px;
  float: right;
}
.down-btn {
  border: 1px solid #f4f4f4;
  color: #444;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  margin-bottom: 15px;
  padding: 12px 15px;
  text-align: left;
  transition: all 0.4s ease 0s;
  z-index: 222;
  background: #fff;
  width: 100%;
  position: relative;
  border-radius: 2px;
}
.down-btn.apli {
  margin-bottom: 0px;
}
.down-btn:hover {
  color: #fff;
  background: #3078fb;
  border: 1px solid #3078fb;
}
.single-page-head .clients-testi {
  padding: 40px 30px;
  background: #f4f4f4;
}
.single-page-head .review-text {
  margin-top: 20px;
}
.clients-testi .review-text a,
.clients-testi .guest-rev {
  color: #444;
}
.clients-testi .single-review {
  border: none;
}
.review-text h4 {
  font-size: 16px;
  margin-bottom: 0px;
}
.single-page-head .review-text p {
  color: #333;
  font-size: 15px;
  margin-bottom: 10px;
}
.single-page-head .review-img {
  margin-top: 0px;
}
.single-page-head .review-img img {
  border-radius: 50%;
  width: 80px;
  height: auto;
}
.page-content h3 {
  font-weight: 600;
  padding: 15px 0 0;
}
.mar-well {
  margin-bottom: 40px;
}
.single-page {
  overflow: hidden;
}
.single-well h3 {
  margin-bottom: 15px;
}
.single-well.last-part p {
  margin-bottom: 0px;
}
.service-list li {
  display: block;
  position: relative;
  padding-left: 30px;
  color: #2a354e;
}
.service-list li::before {
  position: absolute;
  left: 0;
  content: "\f00c";
  font-family: fontawesome;
  top: 0;
  color: #3078fb;
}
.single-page-head .service-btn {
  width: 100%;
  margin: 20px 0px 0px 0px;
}
.marker-list li {
  color: #2a354e;
  padding-left: 35px;
  margin: 10px 0px;
  position: relative;
}
.marker-list li::after {
  text-align: center;
  position: absolute;
  content: "\e64c";
  left: 0;
  top: 3px;
  font-family: themify;
  background: #3078fb;
  width: 22px;
  height: 22px;
  font-size: 10px;
  color: #fff;
  border-radius: 50%;
  line-height: 22px;
}
.single-services-page .marker-list li {
  color: #2a354e;
}
.blog-details .blog-category {
  margin-bottom: 15px;
}
/*----------------------------------------*/
/* 27. Project Details page
/*----------------------------------------*/
.project-page-area .single-awesome-project {
  margin-bottom: 30px;
}
.hire-btn {
  background: #3078fb;
  padding: 10px 20px;
  margin-top: 10px;
  display: inline-block;
  color: #fff;
  font-size: 18px;
  transition: 0.4s;
  border-radius: 3px;
  border: 1px solid #3078fb;
}
.hire-btn:hover {
  transition: 0.4s;
  background: #fff;
  color: #3078fb;
}
.project-page-area .project-menu li a {
  color: #2a354e;
}
.project-2-column .project-single {
  float: left;
  width: 50%;
}
.project-4-column .project-single {
  float: left;
  width: 25%;
}
.project-new h4 {
  color: #444;
  font-size: 24px;
  line-height: 34px;
}
.project-details h3 {
  font-size: 30px;
}
.project-carousel-2.owl-carousel.owl-theme .owl-controls .owl-nav div {
  background: #3078fb;
  border: 1px solid #3078fb;
  border-radius: 0;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  height: 40px;
  line-height: 38px;
  position: relative;
  text-align: center;
  transition: all 0.5s ease 0s;
  width: 40px;
  border-radius: 50%;
}
.project-carousel-2.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev {
  top: 50%;
  position: absolute;
  left: 3%;
  margin-top: -30px;
}
.project-carousel-2.owl-carousel.owl-theme
  .owl-controls
  .owl-nav
  div.owl-prev:hover,
.project-carousel-2.owl-carousel.owl-theme
  .owl-controls
  .owl-nav
  div.owl-next:hover {
  background: #fff;
  border: 1px solid #3078fb;
  color: #3078fb;
  transition: all 0.5s ease 0s;
}
.project-carousel-2.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next {
  margin-top: -30px;
  position: absolute;
  right: 3%;
  top: 50%;
}
.project-history {
  background: #3078fb;
  padding: 30px;
  margin-bottom: 30px;
}
.project-details h4 {
  font-size: 22px;
}
.project-name ul li {
  color: #fff;
  font-size: 15px;
  line-height: 32px;
  margin: 10px 0px;
}
.project-name span {
  padding-right: 15px;
  min-width: 110px;
  display: inline-block;
  font-weight: 500;
  font-size: 16px;
}
.project-inner {
  margin-bottom: 40px;
}
.project-details p {
  font-size: 15px;
  letter-spacing: 0.5px;
  margin-bottom: 25px;
}
.new-project {
  background: #f4f4f4;
  padding: 30px 30px 40px;
  margin-bottom: 30px;
}
/*----------------------------------------
28. Login And Register page
----------------------------------------*/
.login-page {
  display: block;
  overflow: hidden;
  border: 1px solid #f9f9f9;
}
.login-area .slide-1 {
  background: #fff;
  height: 100vh;
}
.login-form {
  background: #fff;
  padding: 40px;
  overflow: hidden;
}
.login-image {
  width: 50%;
  float: left;
}
.login-image,
.log-inner img {
  height: 100%;
  max-height: 535px;
  object-fit: cover;
}
.login-area form#contactForm {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}
.login-form .form-control {
  display: block;
  width: 100%;
  height: 44px;
  padding: 7px 15px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 0px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s,
    -webkit-box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  min-height: 36px;
  margin-bottom: 20px;
}
.login-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 40px;
}
.slide-btn.login-btn {
  border: 1px solid #3078fb;
  display: inline-block;
  font-weight: 600;
  margin: 0px;
  padding: 5px 10px;
  text-align: center;
  text-transform: uppercase;
  transition: all 0.4s ease 0s;
  width: 100%;
  border-radius: 0px;
  background: #3078fb;
  color: #fff;
  height: 46px;
  font-size: 16px;
}
.slide-btn.login-btn:hover {
  border: 1px solid #3078fb;
  background: #fff;
  color: #3078fb;
  transition: all 0.4s ease 0s;
}
.flex-box {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
}
.check-group {
  position: relative;
  margin: 10px 0px 20px;
}
.check-box {
  color: #444;
  font-weight: 300;
  letter-spacing: 0;
  margin-bottom: 0;
  outline: none;
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  padding-left: 0;
}
.check-box-input {
  position: absolute;
  left: 0px;
  top: 0px;
  min-height: 25px;
  height: 26px;
  margin: 0 !important;
  padding: 0 !important;
}
.remember-text {
  color: #444;
  font-weight: 300;
  font-size: 12px;
  left: 25px;
  position: absolute;
  top: 2px;
}
.text-muted {
  font-size: 12px;
  float: right;
  margin-top: 2px;
}
.separetor {
  margin-top: 20px;
}
.separetor span {
  background: #fff;
  position: relative;
  top: 10px;
  padding: 10px;
}
.sign-icon {
  display: block;
  overflow: hidden;
  margin-top: 40px;
  text-align: center;
}
.sign-icon ul li {
  display: inline-block;
  margin: 0px 5px;
}
.sign-icon ul li a {
  color: #fff;
  display: block;
  text-transform: uppercase;
  font-size: 15px;
  padding: 0px 20px;
  font-weight: 600;
}
.sign-icon ul li a.facebook {
  color: #3b5998;
}
.sign-icon ul li a.twitter {
  color: #00aced;
}
.sign-icon ul li a.google {
  color: #c32f10;
}
.acc-not {
  font-size: 13px;
  margin-top: 20px;
  font-weight: 600;
}
.signup-form .check-group {
  position: relative;
  margin: 0px 0px 20px;
}
.signup-page .login-image,
.signup-page .log-inner img {
  height: 100%;
  max-height: 588px;
  object-fit: cover;
}
/*--------------------------------*/
/* Animation
/*--------------------------------*/
.rotateme {
  animation-name: rotateme;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@-webkit-keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
  50% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
  50% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}

@-webkit-keyframes zoom-inout {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes zoom-inout {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.footer-logo img{
  max-width:360px;
}

.footer1 p {
  margin: 0 0 5px;
  color: white;
}
/*--------------------------------*/
/* .End CSS
/*--------------------------------*/