/*===============================================
Template Name:  - SEO Marketing Agency HTML5 Template
Author:  https://TemplateMonster/user/dreamit-solution
Description: Description
Version: 1.0.0
Text Domain: 
Tags: agency, consulting, digital agency, digital marketing, digital marketing agency, marketing, marketing agency, media agency, portfolio, seo, seo agency, seo agency theme, seo marketing, smm, social media marketing agency.
================================================*/

/*TABLE OF CONTENTS*/
/*=====================
01.  Header Top Menu Area Css
2302.  Nav Menu Area Css 
03.  Slider Area Css
04.  Section Title Css
05.  Service Area css
06.  About Area Css
07.  Counter Area Css
08.  Case Study Area Css
09.  Testimonial Area Css
10.  Process Area Css
11.  Team Area Css
12.  Faq Area Css
13.  Brand Section Css
14.  Call Do Section Css
15.  Form Box Css
16.  Skill Area Css
17.  Blog Area Css
18.  footer Area Css
19.  Subscribe Area Css
20.  Lines CSS
21.  Prossess Ber Css
22.  Scrollup Section
23.  Bounce Animation Css 
24.  Animation Dance
25.  Breadcumb Area Css
26.  abouts_areas Css
27.  Feture-Area Css
28.  Pricing Section Css
29.  Web Development Section CSS
30.  Contact  US Css
31.  Blog Sidber Widget CSS
32.  Case Study Details Css
33.  Search Box Css
34.  Loader Css
=======================*/





/*================================
<!-- Start  header-top-menu  -->
==================================*/

.header-top-section {
  padding: 17px;
  background: #ffffff;
}

.header-too-menu-address ul {
  list-style: none;
}

.header-too-menu-address ul li {
  display: inline-block;
  padding-right: 35px;
}

.header-too-menu-address ul li a {
  font-size: 16px;
  color: #616161;
  font-weight: 400;
  font-family: "Poppins";
  display: inline-block;
}

.header-too-menu-address ul li a i {
  color: #108bea;
  margin-right: 5px;
}

.header-top-menu-social-icon ul {
  list-style: none;
}

.header-top-menu-social-icon ul li {
  display: inline-block;
  float: right;
}

.header-top-menu-social-icon ul li a {
  font-size: 16px;
  color: #616161;
  display: inline-block;
  padding: 0 8px 0;
  transition: .5s;
}

.header-top-menu-social-icon ul li a:hover {
  color: #108bea;
}

/*================================
<!-- End  header-top-menu  -->
==================================*/






/*================================
<--   Nav Menu Area Css -->
==================================*/

._nav_manu {
  transition: .5s;
  padding: 0 70px 0;
  background-color: #111111;
}

.sticky {
  left: 0;
  margin: auto;
  position: fixed !important;
  top: 0;
  width: 100%;
  -webkit-box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
  background: #111111 !important;
  transition: .5s !important;
  z-index: 922;
  -webkit-animation: 300ms running fadeInDown;
  animation: 500ms running fadeInUp;
  animation-name: slideInDown;
}

.sticky ._menu>ul>li>a {
  color: #ffffff;
}

.sticky .header-button a {
  background: #ffff;
}


/*  Menu Css*/
nav._menu {
  text-align: center;
  position: relative;
  z-index: 1;
  margin-left: 108px;
}

._menu ul {
  list-style: none;
  display: inline-block;
}

._menu>ul>li {
  display: inline-block;
  position: relative;
  z-index: 1;
}

._menu>ul>li>a {
  display: inline-block;
  margin: 35px 16px;
  transition: .5s;
  font-size: 16px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Poppins";
}

._menu>ul>li>a span i {
  color: #ffffff;
  transition: .5s;
}

._menu>ul>li>a:hover {
  color: #108bea;
}

._menu>ul>li>a:hover i {
  color: #108bea;
}

nav._menu span {
  font-size: 11px;
  padding-left: 5px;
  font-family: FontAwesome;
}

/*menu icon*/

.header-src-btn {
  display: inline-block;
  position: relative;
  z-index: 1;
  margin-left: 36px;
  color: #fffffe;
}

/*menu button*/

.header-button {
  display: inline-block;
  float: right;
  margin-top: 19px;
}

.header-button a {
  padding: 14px 20px;
  background-color: #ffffff;
  display: inline-block;
  transition: .5s;
  font-size: 16px;
  line-height: 26px;
  color: #ffffff;
  font-weight: 500;
  position: relative;
  z-index: 1;
  transition: .5s;
}

.header-button a:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #108bea;
  z-index: -1;
  transition: .5s;
}

.header-button a:hover::before {
  transform: rotateX(90deg);
}

.header-button a:after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #108bea;
  z-index: -1;
  transition: .5s;
}

.header-button a:hover::after {
  transform: rotateY(90deg);
}

.header-button a i {
  margin-right: 5px;
}

.header-button a:hover {
  color: #111;
}

/*Style Two Nav Menu*/

.style-two._nav_manu {
  border-bottom: 1px solid rgba(255, 255, 255, 0.10196078431372549);
}

.style-two ._menu>ul>li>a {
  color: #fff;
}

/*style two btn*/

.style-two .header-button a {
  background: rgba(16, 18, 16, 0);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.style-two .header-button a i {
  color: #bbf737;
}

/*** Sub Menu Style 
==========================***/

._menu ul .sub-menu {
  position: absolute;
  left: 0;
  top: 130%;
  width: 217px;
  text-align: left;
  background: #fff;
  margin: 0;
  z-index: 1;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  transition: .5s;
  visibility: hidden;
  border-top: 2px solid #108bea;
  opacity: 0;
}

._menu ul li:hover>.sub-menu {
  visibility: visible;
  top: 100%;
  opacity: 1;
}

._menu ul .sub-menu li {
  position: relative;
}

._menu ul .sub-menu li a {
  display: block;
  padding: 12px 20px;
  margin: 0;
  line-height: 1.3;
  letter-spacing: normal;
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  -webkit-transition: .1s;
  transition: .1s;
  visibility: inherit !important;
  color: #101210 !important;
}

._menu ul .sub-menu li:hover>a,
._menu ul .sub-menu .sub-menu li:hover>a,
._menu ul .sub-menu .sub-menu .sub-menu li:hover>a,
._menu ul .sub-menu .sub-menu .sub-menu .sub-menu li:hover>a {
  background: #108bea;
  color: #fff !important;
}

/* sub menu 2 
=================*/

._menu ul .sub-menu .sub-menu {
  left: 100%;
  top: 130%;
  opacity: 0;
  visibility: hidden;
}

._menu ul .sub-menu li:hover>.sub-menu {
  opacity: 1;
  visibility: visible;
  top: 0%;
}

/* sub menu 3 
==================*/

._menu ul .sub-menu .sub-menu li {
  position: relative;
}

._menu ul .sub-menu .sub-menu .sub-menu {
  right: 100%;
  left: auto;
  top: 130%;
  opacity: 0;
  visibility: hidden;
}

._menu ul .sub-menu .sub-menu li:hover>.sub-menu {
  opacity: 1;
  visibility: visible;
  top: 0%;
}

ul.sub-menu li a span {
  background: #00cc99;
  padding: 5px 10px;
  color: #fff;
  opacity: 1;
  font-family: 'Fira Sans';
  border-radius: 2px;
  margin-left: 5px;
  transition: .5s;
}

ul.sub-menu li:hover a span {
  background: rgba(255, 255, 255, 0.20);
}

/* sub menu 4 
====================*/

._menu ul .sub-menu .sub-menu .sub-menu li {
  position: relative;
}


._menu ul .sub-menu .sub-menu .sub-menu li:hover>.sub-menu {
  opacity: 1;
  visibility: visible;
  top: 0%;
}

._menu li a:hover:before {
  width: 101%;
}

._nav_manu.sticky .logo_img {
  display: none;
}

.main_sticky {
  display: none;
}

._nav_manu.sticky .main_sticky {
  display: inherit;
}

.mobile-menu.mean-container {
  overflow: hidden;
}

/*
<!-- =========================================== -->
<!-- Start  Hero Section  -->
<!-- ========================================= -->*/

.hero-section {
  /* background: url(../image/hero-bg.png); */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 800px;
}

.hero-content h5 {
  font-size: 20px;
  color: #108bea;
  font-weight: 600;
  font-family: "Poppins";
  padding-bottom: 24px;
}

.hero-content h1 {
  font-size: 65px;
  line-height: 85px;
  color: #232323;
  font-weight: 700;
  font-family: "Poppins";
  margin: 0;
}

.hero-content p {
  opacity: 0.702;
  font-size: 18px;
  line-height: 30px;
  color: #616161;
  color: #333333;
  font-weight: 400;
  font-family: "Roboto";
  width: 37%;
  margin: 8px 0 36px;
}

.hero-thumb {
  display: inline-block;
  margin-right: 15px;
}

.hero-button {
  display: inline-block;
}

.hero-button a {
  font-size: 16px;
  color: #fefefe;
  font-weight: 500;
  font-family: "Poppins";
  border-radius: 4px;
  background-color: #108bea;
  display: inline-block;
  padding: 15px 32px;
  position: relative;
  z-index: 1;
  transition: .5s;
}

.hero-button a:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border-radius: 4px;
  background: #232323;
  z-index: -1;
  transition: .5s;
}

.hero-button a:hover::before {
  transform: rotateX(90deg);
}

.hero-button a:after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border-radius: 4px;
  background: #232323;
  z-index: -1;
  transition: .5s;
}

.hero-button a:hover::after {
  transform: rotateY(90deg);
}

/*--section-title--*/

.section-title {
  margin-bottom: 55px;
  position: relative;
}

.section-title.center-title {
  margin-bottom: 38px;
}

.section-title h5 {
  font-size: 18px;
  color: rgb(16, 139, 234);
  font-weight: 600;
  font-family: Poppins;
  background-color: #dddddd;
  margin-bottom: 14px;
  display: inline-block;
  padding: 4px 8px;
  opacity: 0.700;
}

.section-title h1 {
  font-size: 40px;
  line-height: 60px;
  color: #232323;
  font-weight: 600;
  font-family: "Poppins";
  margin: 0;
}

.section-title p {
  font-size: 16px;
  line-height: 24px;
  color: #616161;
  font-weight: 400;
  font-family: "Roboto";
  width: 75%;
  padding-top: 19px;
}

.section-shape {
  position: absolute;
  top: -38px;
  left: 0;
  z-index: 2;
}

.section-shape.two {
  position: absolute;
  top: -32px;
  left: 25px;
  right: 0px;
  z-index: 2;
  margin: auto;
}

.section-shape h4 {
  color: #000000;
  -webkit-text-stroke-width: 2px;
  color: transparent;
  -webkit-text-stroke-color: #108bea;
  font-weight: 600;
  font-family: "Poppins";
  font-size: 70px;
  opacity: 0.1;
}

.section-title.center-title h1 {
  color: #ffffff;
}

.section-title.center-title h5 {
  color: #ffffff;
  background-color: #464646;
}

/*
<!-- =========================================== -->
<!-- End Hero Section  -->
<!-- ========================================== -->*/




/*
<!-- =========================================== -->
<!-- Start  Hero Section  -->
<!-- ========================================= -->*/

.process-bar-setion {
  padding: 85px 0;
}

.process-bar-shape {
  float: left;
  position: relative;
  z-index: 1;
  top: -12px;
  margin-right: 17px;
}

.process-bar-shape h4 {
  -webkit-text-stroke-width: 2px;
  color: transparent;
  -webkit-text-stroke-color: #108bea;
  font-weight: 600;
  font-family: "Poppins";
  opacity: 0.5;
  font-size: 46px;
}

/* .process-bar-shape:before {
  position: absolute;
  content: "";
  left: 14px;
  top: 37px;
  width: 100%;
  height: 100%;
  background: url(../image/icon.png);
  background-repeat: no-repeat;
}

.process-bar-shape.two:before {
  background: url(../image/icon1.png);
  background-repeat: no-repeat;
}

.process-bar-shape.three::before {
  background: url(../image/icon2.png);
  background-repeat: no-repeat;
}

.process-bar-shape.four:before {
  background: url(../image/icon3.png);
  background-repeat: no-repeat;
} */

.process-content h4 {
  font-size: 18px;
  color: #232323;
  font-weight: 600;
  font-family: "Poppins";
  padding-bottom: 9px;
}

.process-content p {
  font-size: 14px;
  color: #616161;
  font-weight: 400;
  line-height: 18px;
  width: 100%;
}

/*
<!-- =========================================== -->
<!-- End Hero Section  -->
<!-- ========================================== -->*/




/*
<!-- =========================================== -->
<!-- Start  about Section  -->
<!-- ========================================= -->*/

.about-section {
  padding: 0 0 105px;
}

.about-thumb {
  position: relative;
  z-index: 1;
}

.about-shape {
  position: absolute;
  top: 192px;
  left: -40px;
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 10s linear infinite;
}

@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }

  to {
    -webkit-mask-position: -50%;
  }
}

.about-thumb-left {
  float: left;
  padding-right: 25px;
}

.about-thumb-left {
  float: left;
  padding-right: 25px;
  position: relative;
  z-index: 1;
}

.about-thumb-left:before {
  position: absolute;
  content: "";
  top: -32px;
  left: 0;
  border-top: 1px solid #dddd;
  width: 31rem;
  height: 1px;
}

.about-text p {
  font-size: 16px;
  color: #616161;
  font-weight: 500;
  padding-top: 13px;
}

/*
<!-- =========================================== -->
<!-- End about Section  -->
<!-- ========================================== -->*/




/*
<!-- =========================================== -->
<!-- Start  services Section  -->
<!-- ========================================= -->*/

.services-section {
  padding: 90px 0 95px;
  background: url(../image/bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.services-area {
  padding: 90px 0 42px;
}

.services-area .center-title h1 {
  color: #232323 !important;
}

.single-services-box {
  border-radius: 4px;
  background-color: #ffffff;
  padding: 45px 0 27px 38px;
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));
  height: 100%;
}

.single-services-box:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #108bea;
  border-radius: 4px;
  transition: .5s;
  z-index: -1;
  opacity: 0;
  transform: scale(0);
}

.single-services-box:hover:before {
  opacity: 1;
  transform: scale(1);
}

.services-content h3 {
  font-size: 24px;
  color: #232323;
  font-weight: 500;
  font-family: "Poppins";
  padding: 8px 0 25px;
  transition: .5s;
}

.services-content p {
  font-size: 16px;
  line-height: 26px;
  color: #616161;
  font-weight: 400;
  font-family: "Roboto";
  width: 72%;
  transition: .5s;
}

.single-services-box:hover .services-content h3 {
  color: #ffffff;
}

.single-services-box:hover .services-content p {
  color: #ffffff;
}

/*--owl-dot--*/

.owl-dots {
  text-align: center;
  margin-top: 15px;
}

.owl-dot {
  position: relative;
  z-index: 1;
  display: inline-block;
  height: 12px;
  width: 35px;
  border: 1px solid #dddd;
  border-radius: 30px;
  margin: 0 5px 0;
}

.owl-dot.active {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 35px;
  height: 12px;
  border-radius: 30px;
  border: 1px solid #108bea;
  background: #108bea;
}

/*
<!-- =========================================== -->
<!-- End services Section  -->
<!-- ========================================== -->*/





/*
<!-- =========================================== -->
<!-- Start  project Section  -->
<!-- ========================================= -->*/


.project-section {
  padding: 92px 0 70px;
}

.project-section .center-title {
  margin-bottom: 52px;
}

.project-section .center-title.up h5 {
  color: #108bea;
  background-color: #e4e4e4;
}

.project-section .center-title.up h1 {
  font-size: 46px;
  color: #232323;
  font-weight: 500;
  font-family: "Roboto";
  margin-top: 4px;
}

.case_study_nav {
  margin: 0 0 58px;
}

.case_study_menu ul {
  text-align: center;
}

.case_study_menu ul li {
  display: inline-block;
  margin: 0 16px;
  cursor: pointer;
  transition: .5s;
  font-size: 18px;
  line-height: 24px;
  color: #232323;
  font-weight: 500;
  font-family: "Poppins";
  position: relative;
  z-index: 1;
}

.case_study_menu ul li:before {
  position: absolute;
  content: "";
  right: 0;
  bottom: -5;
  width: 0;
  height: 100%;
  border-bottom: 2px solid #108bea;
  z-index: 1;
  transition: .5s;
}

.case_study_menu ul li:hover:before {
  left: 0;
  width: 100%;
}

/* case study single box */

.case-study-single-box {
  border-radius: 3px;
  margin: 0 0 30px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.case-study-box-inner {
  position: relative;
  z-index: 1;
}

.case-study-box-inner:before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background-color: #108bea;
  opacity: 0.1;
  transition: .5s;
}

.case-study-box-inner:hover::before {
  height: 100%;
  opacity: 0.800;
  background-color: #108bea;
}

.case-study-thumb img {
  width: 100%;
}

.single_case_study_icon {
  position: absolute;
  z-index: 1;
  top: 0px;
  right: 165px;
  opacity: 0;
  transition: .5s;
  margin-right: -100px;
  background: #b5b5b5;
  padding: 10px 13px;
  display: inline-block;
}

.single_case_study_icon a i {
  display: inline-block;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.case-study-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

.case-study-content-inner {
  position: relative;
  z-index: 1;
  bottom: -120px;
  opacity: 0;
  transition: .5s;
}

.case-study-content-inner::after {
  position: absolute;
  content: '';
  z-index: -1;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 160px;
  background: url(https://html.ditsolution.net/drtheme/dreamhub/cctv/assets/images/resource/port.png);
  background-position: center;
  background-size: cover;
}

.case-study-title {
  padding: 0 0 37px 30px;
}

.case-study-title h6 {
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  font-family: 'Poppins';
}

.case-study-title h6 {
  font-size: 16px;
  font-weight: 400;
  font-family: "Poppins";
  margin-bottom: -13px;
}

.case-study-title h3 a {
  font-size: 20px;
  color: #ffffff;
  font-weight: 500;
  font-family: "Poppins";
  text-align: center;
}

/* video icon */
.icon {
  position: absolute;
  top: 60px;
  right: 0px;
  opacity: 0;
  transition: .5s;
  margin-top: 27px;
  background: #232323;
  padding: 10px 10px;
}



.icon a {
  display: inline-block;
  color: #ffff;
  font-size: 24px;
}

/* case study single box all hover */
.case-study-single-box:hover::before {
  opacity: 1;
}

.case-study-single-box:hover .single_case_study_icon {
  right: 100px;
  opacity: 1;
}

.case-study-single-box:hover .icon {
  top: 20px;
  opacity: 1;
}

.case-study-single-box:hover .case-study-content-inner {
  opacity: 1;
  bottom: 0;
}

/* case study shape */
.case-study-shape-thumb {
  position: absolute;
  z-index: -1;
  top: -182px;
  right: -240px;
}

.case-study-shape-thumb2 {
  position: absolute;
  top: 0;
  left: 0;
}

/*
<!-- =========================================== -->
<!-- End project Section  -->
<!-- ========================================== -->*/





/*
<!-- =========================================== -->
<!-- Start  why choose us Section  -->
<!-- ========================================= -->*/

.why-choose-us-section {
  background: url(../image/why-choose-Us.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 775px;
}

.why-choose-us-section .section-title {
  margin-bottom: 36px;
}

.why-choose-us-content {
  position: relative;
  z-index: 1;
  margin-bottom: 65px;
}

.why-choose-us-content:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: -30px;
  width: 79%;
  height: 1px;
  background: #ddd;
}

.why-choose-us-icon {
  float: left;
  margin: 7px 33px 27px 0;
}

.why-choose-us-text h3 {
  font-size: 24px;
  color: #232323;
  font-weight: 500;
  font-family: "Poppins";
}

.why-choose-us-text p {
  font-size: 16px;
  line-height: 24px;
  color: #616161;
  font-weight: 400;
  font-family: "Roboto";
  width: 70%;
  padding-top: 14px;
}

/*
<!-- =========================================== -->
<!-- Start  why choose us Section  -->
<!-- ========================================== -->*/





/*
<!-- =========================================== -->
<!-- Start  testimonial Section  -->
<!-- ========================================= -->*/

.testimonial-section {
  padding: 83px 0 100px;
  background: url(../image/testimonial-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.testimonial-section .section-title.center-title {
  margin-bottom: 52px;
}

.testimonial-section .center-title h5 {
  color: #108bea;
  background-color: #585858;
}

.single-testimonial-box {
  border-radius: 4px;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));
  background-color: #ffffff;
  padding: 52px 0 80px;
  text-align: center;
  position: relative;
  z-index: 1;
  margin: 39px 0 40px 0;
}

.testimonial-icon {
  position: absolute;
  top: -35px;
  left: 168px;
}

.testimonial-icon i {
  border-radius: 36px;
  background-color: #108bea;
  height: 72px;
  width: 72px;
  line-height: 72px;
  color: #ffff;
  font-size: 25px;
}

.testimonial-content h4 {
  font-size: 20px;
  color: #232323;
  font-weight: 500;
  font-family: "Poppins";
}

.testimonial-content a {
  font-size: 16px;
  color: #232323;
  font-weight: 500;
  font-family: "Poppins";
  padding: 10px 0 20px;
  display: inline-block;
  transition: .5s;
}

.testimonial-content a:hover {
  color: #108bea;
}

.testimonial-content p {
  font-size: 16px;
  line-height: 26px;
  color: #616161;
  font-weight: 400;
  font-family: "Roboto";
  text-align: center;
  width: 75%;
  margin: auto;
}

.testimonial-thumb img {
  margin: 26px 167px -118px;
}

/*
<!-- =========================================== -->
<!-- Start  testimonial Section  -->
<!-- ========================================== -->*/




/*
<!-- =========================================== -->
<!-- Start  blog Section  -->
<!-- ========================================= -->*/


.blog-section {
  padding: 90px 0;
}

.blog-section .center-title {
  margin-bottom: 70px;
}

.blog-section .center-title h5 {
  color: #108bea;
  background-color: #e4e4e4;
}

.blog-section .center-title h1 {
  color: #232323;
}

.blog-box {
  /* background: url(../image/blog-bg.png); */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 414px;
}

.blog-content {
  padding: 186px 40px 0;
  background: rgba(0, 0, 0, .5);
}

.blog-content h3 a {
  font-size: 24px;
  line-height: 34px;
  color: #ffffff;
  font-weight: 500;
  font-family: "Poppins";
  display: inline-block;
  width: 85%;
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
}

.blog-content h3 a:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: -12px;
  width: 97%;
  height: 1px;
  background: #fff;
}

.blog-content h5 {
  font-size: 16px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Poppins";
  display: inline;
  padding-right: 44px;
}

.blog-content span {
  font-size: 16px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Poppins";
}

.blog-button {
  margin-top: 27px;
}

.blog-button a {
  display: inline-block;
  font-size: 16px;
  color: #ffff;
  font-weight: 500;
  font-family: "Poppins";
  transition: .5s;
}

.comment-social-icon {
  margin: -12px 0 23px;
  position: relative;
  z-index: 1;
}

.comment-social-icon:before {
  position: absolute;
  content: "";
  left: 0;
  top: -10px;
  width: 52px;
  height: 2px;
  background: #111111;
}

.single-blog-box {
  margin-bottom: 25px;
}

.blog-thumb {
  /* float: left;
  margin-right: 40px; */
  width: 100%;
  height: 100%;
}

.blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-button.left {
  margin-top: -40px;
}

.blog-button.left a {
  font-size: 14px;
  color: #ffffff;
  font-weight: 400;
  background: #232323;
  display: inline-block;
  padding: 7px 13px;
  transition: .5s;
}

.blog-button.left a:hover {
  background: #108beaed;
}

.blog-content-right {
  background-color: #f5f5f5;
  padding: 14px 65px 22px 0;
  padding: 15px;
}

.blog-content-right h4 {
  margin-top: 0;
}

.blog-content-right h4 a {
  font-size: 18px;
  line-height: 28px;
  color: #232323;
  font-weight: 500;
  font-family: "Poppins";
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-content-right p {
  font-size: 16px;
  color: #616161;
  font-weight: 400;
  font-family: "Poppins";
  padding: 8px 0 15px;
  position: relative;
  z-index: 1;
  border-bottom: solid 1px #232323;
}

/* .blog-content-right p:before {
  position: absolute;
  content: "";
  left: 54%;
  bottom: -2px;
  width: 45%;
  height: 1px;
  background: #232323;
} */

.button a {
  display: inline-block;
  font-size: 16px;
  color: #232323;
  font-weight: 500;
  font-family: "Poppins";
  transition: .5s;
}

.button a:hover {
  color: #108bea;
}

/*
<!-- =========================================== -->
<!-- End  blog Section  -->
<!-- ========================================== -->*/





/*
<!-- =========================================== -->
<!-- Start contact Section  -->
<!-- ========================================= -->*/

.contact-section {
  padding: 95px 0 100px;
  background-color: #f7fbfe;
}

.contact-section .center-title {
  margin-bottom: 0px;
}

.contact-section .center-title h5 {
  color: #108bea;
  background-color: #e4e4e4;
}

.contact-section .center-title h1 {
  color: #232323;
}

.form-content h4 {
  font-size: 16px;
  line-height: 50px;
  color: #232323;
  font-weight: 500;
  font-family: "Poppins";
}

.form-box input {
  display: inline-block;
  width: 100%;
  padding: 17px 20px;
  border: 1px solid #ddd;
  background: #f7fbfe;
  border-radius: 5px;
}

.form-box textarea {
  display: inline-block;
  background: #f7fbfe;
  border: 1px solid #dddd;
  width: 100%;
  height: 240px;
  padding: 20px 20px 0;
  border-radius: 5px;
}

.form-box input::placeholder {
  color: #cfd4d7;
}

textarea::placeholder {
  color: #cfd4d7;
}

.submit-button {
  margin-top: 22px;
}

.submit-button button {
  display: inline-block;
  border-radius: 4px;
  background-color: #232323;
  font-size: 16px;
  color: #ffffff;
  font-weight: 600;
  font-family: "Poppins";
  border: 1px solid #108bea;
  padding: 13px 30px;
  transition: .5s;
  transition: .5s;
  position: relative;
  z-index: 1;
}

.submit-button button:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border-radius: 4px;
  background: #108bea;
  z-index: -1;
  transition: .5s;
}

.submit-button button:hover::before {
  transform: rotateX(90deg);
}

.submit-button button:after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border-radius: 4px;
  background: #108bea;
  z-index: -1;
  transition: .5s;
}

.submit-button button:hover::after {
  transform: rotateY(90deg);
}

/*
<!-- =========================================== -->
<!-- End  contact Section  -->
<!-- ========================================== -->*/




/*
<!-- =========================================== -->
<!-- Start subscribe  Section  -->
<!-- ========================================= -->*/

.subscribe-area {
  padding: 105px 0;
  background: #232323;
}

.row.up {
  position: relative;
  z-index: 1;
}

.row.up:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: -37px;
  height: 1px;
  width: 100%;
  background: #2e2e2e;
}

.section-title.up h1 {
  font-size: 46px;
  color: #fffffe;
  font-weight: 500;
}

p.section-dsc-1 {
  opacity: 0.502;
  font-size: 16px;
  color: #fffffe;
  font-weight: 500;
  margin-top: -8px;
}

.mail-address {
  display: inline-flex;
  margin-top: 15px;
}

.mail-address input {
  display: inline-block;
  background: #ffff;
  border: 1px solid #ffff;
  height: 66px;
  width: 77%;
  padding: 0 0 0 30px;
}

.mail-address input::placeholder {
  color: #cfd4d7;
  font-size: 16px;
}

.Subcribe-button button {
  display: inline-block;
  background: #108bea;
  border: 1px solid #108bea;
  height: 66px;
  width: 163%;
  font-size: 18px;
  color: #ffffff;
  font-weight: 500;
  font-family: "Poppins";
}

.Subcribe-button button i {
  margin-left: 10px;
}

/*
<!-- =========================================== -->
<!-- End  subscribe  Section  -->
<!-- ========================================== -->*/





/*
<!-- =========================================== -->
<!-- Start footer Section  -->
<!-- ========================================= -->*/

.footer-section {
  background: #232323;
  padding: 22px 0 0;
  padding: 105px 0 0;
}

.footer-widget-description p {
  opacity: 0.702;
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Roboto";
  margin: 45px 0 25px;
  width: 95%;
}

.footer-social-icon ul {
  list-style: none;
}

.footer-social-icon ul li {
  display: inline-block;
}

.footer-social-icon ul li a {
  display: inline-block;
  font-size: 16px;
  color: #fefffe;
  width: 38px;
  height: 38px;
  line-height: 38px;
  border-radius: 19px;
  background-color: #108bea;
  margin-right: 5px;
  text-align: center;
  transition: .5s;
}

.footer-social-icon ul li a:hover {
  color: #108bea;
  background: #fefffe;
}

.footer-widget-title {
  margin: 35px 0 26px;
}

.footer-widget-title h3 {
  font-size: 22px;
  color: #ffffff;
  font-weight: 500;
  font-family: "Poppins";
}

.footer-widget-menu ul {
  list-style: none;
}

.footer-widget-menu ul li {
  padding-bottom: 5px;
}

.footer-widget-menu ul li a {
  opacity: 0.702;
  font-size: 16px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Roboto";
  transition: .5s;
}

.footer-widget-menu ul li a:hover {
  color: #108beaed;
}

.footer-widget-menu ul li span {
  opacity: 0.702;
  font-size: 16px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Roboto";
  width: 68%;
  width: 100%;
  display: inline-flex;
}

.footer-widget-menu ul li span i {
  display: inline-block;
  margin-right: 5px;
  margin-top: 4px;
}

/*--copyright-section--*/

.copyright-description {
  margin-top: 125px;
}

.copyright-description p {
  opacity: 0.502;
  font-size: 16px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Barlow";
  transition: .5s;
  display: inline-block;
}

.copyright-description p:hover {
  color: #108beaed;
}

/*
<!-- =========================================== -->
<!-- End  footer  Section  -->
<!-- ========================================== -->*/






/*
<!-- =========================================== -->
<!-- Start breadcumb Section  -->
<!-- ========================================= -->*/

.breadcumb-section {
  background-color: #111111;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 410px;
}

.breadcumb-container {
  margin-top: -40px;
}

.breadcumb-title h1 {
  font-size: 40px;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
}

.breadcumb-container ul {
  list-style: none;
}

.breadcumb-container ul li {
  display: inline-block;
  font-size: 16px;
  line-height: 55px;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  transition: .5s;
}

.breadcumb-container ul li a {
  display: inline-block;
  font-size: 16px;
  line-height: 55px;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
}

.breadcumb-container ul li i {
  margin: 0 5px 0;
  font-size: 14px;
  color: #ffff;
}

.breadcumb-container ul li:hover {
  color: #0d6efd;
}

/*
<!-- =========================================== -->
<!-- End  breadcumb  Section  -->
<!-- ========================================== -->*/




/*
<!-- =========================================== -->
<!-- Start blog-grid Section  -->
<!-- ========================================= -->*/

.blog-grid-section {
  padding: 82px 0px;
}

.single-blog-grid-box {
  border-radius: 6px;
  filter: drop-shadow(0 0 125px rgba(0, 0, 0, 0.1));
  background-color: #ffffff;
  padding: 25px 25px 0;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .single-blog-grid-box {
    padding: 25px 10px 0;
  }
}

.blog-grid-thumb {
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: all ease .5s;
}

.blog-grid-thumb img {
  transition: all ease .5s;
}

.blog-grid-thumb img:hover {
  transform: scale(1.1);
}

.blog-grid-thumb img {
  width: 100%;
}

.blog-grid-content {
  padding: 27px 0 38px;
}

.meta-blog-grid-text {
  display: -webkit-inline-box;
}

.meta-blog-grid-text i {
  font-size: 14px;
  color: #108bea;
}

.meta-blog-grid-text p {
  font-size: 14px;
  color: #0e3d4b;
  font-weight: 400;
  padding: 0 22px 0 10px;
}

.meta-blog-grid-text span {
  font-size: 14px;
  color: #616161;
  font-weight: 400;
  font-family: "Poppins";
  position: relative;
  z-index: 1;
}

.meta-blog-grid-text span:before {
  position: absolute;
  content: "";
  left: -10px;
  top: 2px;
  height: 15px;
  width: 1px;
  background: #108bea;
}

.blog-grid-title a {
  display: inline-block;
  font-size: 24px;
  line-height: 34px;
  color: #0e3d4b;
  font-weight: 600;
  font-family: "Poppins";
  margin: -8px 0 16px;
  transition: .5s;
}

.blog-grid-title a:hover {
  color: #108bea;
}

.blog-grid-button a {
  font-size: 16px;
  color: #0e3d4b;
  font-weight: 500;
  font-family: "Poppins";
  transition: .5s;
}

.blog-grid-button a i {
  color: #0e3d4b;
  display: inline-block;
  margin-left: -20px;
  position: relative;
  top: 2px;
  opacity: 0;
  transition: .5s;
}

.blog-grid-button a:hover {
  color: #108bea;
}

.blog-grid-button a:hover i {
  opacity: 1;
  margin-left: 5px;
}

.blog-grid-button a:hover i {
  color: #108bea;
}

/*
<!-- =========================================== -->
<!-- End  blog-grid  Section  -->
<!-- ========================================== -->*/





/*
<!-- =========================================== -->
<!-- Start pricing Section  -->
<!-- ========================================= -->*/

.pricing-section {
  padding: 53px 0 0;
}

.pricing-section .center-title {
  margin-bottom: 56px;
}

.pricing-section .center-title h1 {
  color: #232323;
}

.pricing-single-box {
  padding: 50px 0 65px;
  filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.2));
  background-color: #ffffff;
  transition: .5s;
  margin-bottom: 30px;
}

.pricing-single-box:hover {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
  background-color: #ffffff;
}

h4.price-top-title {
  font-size: 18px;
  color: #232323;
  font-weight: 500;
  text-align: center;
}

h2.price-title {
  font-size: 55px;
  color: #232323;
  font-weight: 500;
  font-family: "Roboto";
  text-align: center;
  margin: 13px 0 12px;
}

/*pricing boody*/

.pricing-boody {
  position: relative;
  z-index: 1;
  margin-left: 113px;
}

.pricing-boody span {
  font-size: 18px;
  color: #232323;
  font-weight: 600;
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 0 0 14px 15px;
}

.pricing-boody span:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: #111;
}

.pricing-boody ul li {
  list-style: none;
  display: block;
  padding: 0 0 3px 0;
  font-size: 16px;
  color: #050505;
  font-weight: 400;
  font-family: "Roboto";
}

.pricing-boody ul li i {
  display: inline-block;
  color: #108bea;
  font-size: 20px;
  margin-right: 5px;
  position: relative;
  top: 2px;
}

.price-btn {
  margin-top: 29px;
  text-align: center;
}

.price-btn a {
  padding: 10px 18px;
  display: inline-block;
  background: #232323;
  font-size: 16px;
  color: #ffffff;
  font-weight: 600;
  position: relative;
  z-index: 1;
  transition: .5s;
}

.price-btn a:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #108bea;
  z-index: -1;
  transition: .5s;
}

.price-btn a:hover::before {
  transform: rotateX(90deg);
}

.price-btn a:after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #108bea;
  z-index: -1;
  transition: .5s;
}

.price-btn a:hover::after {
  transform: rotateY(90deg);
}

/*
<!-- =========================================== -->
<!-- End  blog-grid  Section  -->
<!-- ========================================== -->*/




/*
<!-- =========================================== -->
<!-- Start  counter Section   -->
<!-- ========================================= -->*/

.counter-section {
  padding: 96px 0 85px;
}

.single-counter-box {
  text-align: center;
  background-color: #ffffff;
  padding: 20px 0 25px;
  transition: .5s;
  margin-bottom: 30px;
}

.single-counter-box:hover {
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));
  background-color: #ffffff;
  padding: 20px 0 25px;
}

.counter-content h2 {
  font-size: 40px;
  color: #060606;
  font-weight: 500;
  font-family: "Poppins";
  display: inline;
}

.counter-content span {
  font-size: 40px;
  color: #060606;
  font-weight: 500;
}

.counter-text h5 {
  font-size: 18px;
  color: #060606 !important;
  font-weight: 400;
  font-family: "Roboto";
  transition: .5s;
  margin-top: 16px;
}

.single-counter-box:hover .counter-text h5 {
  color: #108bea !important;
}

/*
<!-- =========================================== -->
<!-- End  counter Section  -->
<!-- ========================================== -->*/




/*
<!-- =========================================== -->
<!-- Start blog details Section  -->
<!-- ========================================== -->*/

.blog-details-area {
  padding: 100px 0 100px;
}

.blog-details-box {
  margin-bottom: 55px;
}

.single-img {
  float: left;
  padding-right: 25px;
}

.blog-details-thumb img {
  width: 100%;
}

.meta-blog-details {
  padding: 30px 0 35px;
  position: relative;
  z-index: 1;
}

.meta-blog-details:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 17px;
  height: 1px;
  width: 100%;
  background: #ddd;
}

.meta-blog-details ul {
  list-style: none;
}

.meta-blog-details ul li {
  display: inline-block;
  padding-right: 32px;
}

.meta-blog-details ul li i {
  font-size: 14px;
  color: #108bea;
  padding-right: 8px;
}

.meta-blog-details ul li a {
  display: inline-block;
  font-size: 14px;
  color: #0e3d4b;
  font-weight: 300;
}

.blog-details-text p {
  font-size: 16px;
  line-height: 24px;
  color: #616161;
  font-weight: 400;
  font-family: "Roboto";
  width: 89%;
  margin-bottom: 32px;
}

.blog-details-content.left {
  margin-top: -10px;
}

.blog-details-content.left h2 {
  font-size: 30px;
  line-height: 45px;
  color: #232323;
  font-weight: 500;
  margin: 0;
}

.blog-details-content.left p {
  font-size: 16px;
  line-height: 24px;
  color: #616161;
  font-weight: 400;
  font-family: "Roboto";
  width: 83%;
  padding: 21px 0 4px;
}

.title ul {
  list-style: none;
}

.title ul li {
  font-size: 16px;
  color: #232323;
  font-weight: 500;
  font-family: "Poppins";
  padding-bottom: 7px;
}

.title ul li i {
  font-size: 22px;
  color: #232323;
  margin-right: 6px;
  position: relative;
  top: 2px;
}

.author-comment-box {
  border-radius: 8px;
  background-color: rgb(238, 238, 238);
  padding: 28px 60px 30px;
  margin-top: 95px;
  border-left: 2px solid #000;
}

.comment p {
  font-size: 16px;
  line-height: 24px;
  color: #0e3d4b;
  font-weight: 400;
  font-style: italic;
  width: 87%;
  padding-bottom: 5px;
}

.author-thumb {
  display: inline-block;
  margin-right: 26px;
}

.author-thumb img {
  border-radius: 50px;
}

.comment-author {
  display: inline-block;
}

.comment-author h6 {
  font-size: 16px;
  color: #232323;
  font-weight: 500;
  font-family: "Poppins";
}

.author-disc p {
  font-size: 16px;
  line-height: 26px;
  color: #616161;
  font-weight: 400;
  font-family: "Roboto";
  padding: 35px 0 20px;
}

.blog-details-comments-box {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 70px 10px 32px 44px;
  margin-bottom: 30px;
}

.blog-details-comments-content h4 {
  font-size: 20px;
  color: #234e5b;
  font-weight: 500;
  font-family: "Poppins";
}

.blog-details-comments-content p {
  font-size: 16px;
  color: #108bea;
  font-weight: 400;
  font-family: "Poppins";
  margin-top: 4px;
}

.comment-thumb {
  text-align: right;
  position: relative;
  margin: -100px 180px 0 0;
}

.comment-social-icon {
  margin: -12px 0 23px;
}

.comment-social-icon ul {
  list-style: none;
}

.comment-social-icon ul li {
  display: inline-block;
  padding-right: 15px;
}

.comment-social-icon ul li a {
  display: inline-block;
  font-size: 16px;
  color: #108bea;
  font-family: "Font Awesome";
}

.comment-disc p {
  font-size: 16px;
  line-height: 24px;
  color: #616161;
  font-weight: 400;
  font-family: "Roboto";
  width: 85%;
}

.widget_search {
  padding: 36px 0 52px 50px;
  padding: 36px 50px;
  position: relative;
  border-radius: 10px;
  background-color: #108bea;
  margin-bottom: 30px;
}

.widget-text h4 {
  font-size: 20px;
  color: #ffffff;
  font-weight: 500;
  font-family: "Poppins";
  margin-bottom: 43px;
  position: relative;
  z-index: 1;
}

.widget-text h4:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: -12px;
  height: 2px;
  width: 53px;
  background: #ffffff;
}

.widget_search input::placeholder {
  color: #888f99;
}

.widget_search form {
  position: relative;
}

.widget_search form input {
  display: inline-block;
  width: 100%;
  padding: 14px 40px;
  border-radius: 10px;
  background: #f3f4f7;
  border: none;
  padding-left: 20px;
}

.widget_search form input::placeholder {
  opacity: 0.400;
  font-size: 16px;
  color: #234e5b;
  font-weight: 400;
  font-family: "Poppins";
}

.widget_search form button {
  background: none;
  border: none;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: #0e3d4b;
  font-size: 18px;
}

.widget_search form button:focus {
  border: none !important;
}

.widget-information-box {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 35px 0 50px 50px;
  margin-bottom: 30px;
}

.widget-information-content h4 {
  font-size: 20px;
  color: #232323;
  font-weight: 500;
  font-family: "Poppins";
  position: relative;
  z-index: 1;
  margin-bottom: 27px;
}

.widget-information-content h4:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: -12px;
  height: 2px;
  width: 53px;
  background: #232323;
}

.information-items ul {
  list-style: none;
}

.information-items ul li a {
  display: inline-block;
  font-size: 16px;
  color: #108bea;
  font-weight: 400;
  font-family: "Poppins";
  position: relative;
  z-index: 1;
  padding: 0 0 15px 20px;
}

.information-items ul li a:before {
  position: absolute;
  content: "";
  left: 0;
  top: 10px;
  height: 7px;
  width: 7px;
  line-height: 7px;
  background: #232323;
  border-radius: 10px;
}

.information-button a {
  font-size: 16px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Poppins";
  display: inline-block;
  border-radius: 4px;
  background-color: #232323;
  padding: 14px 89px;
  margin-top: 15px;
  transition: .5s;
  position: relative;
  z-index: 1;
}

.information-button a:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #108bea;
  z-index: -1;
  transition: .5s;
}

.information-button a:hover::before {
  transform: rotateX(90deg);
}

.information-button a:after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #108bea;
  z-index: -1;
  transition: .5s;
}

.information-button a:hover::after {
  transform: rotateY(90deg);
}

.widget-post-box {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 40px 0 32px 50px;
  margin-bottom: 30px;
}

.widget-icon {
  padding-bottom: 17px;
}

.widget-post {
  /* padding-top: 65px; */
  clear: both;
}

.widget-thumb {
  float: left;
  margin-right: 20px;
}

.post-content i {
  font-size: 14px;
  color: #108bea;
  margin-right: 5px;
}

.post-content a {
  display: inline;
  font-size: 14px;
  color: #108bea;
  font-weight: 300;
  font-family: "Poppins";
}

.post-content p {
  font-size: 16px;
  line-height: 24px;
  color: #232323;
  font-weight: 400;
  font-family: "Poppins";
  padding-top: 20px;
  width: 83%;
}

.widget-Subscribe-box {
  background: #108bea;
  padding: 38px 0 40px;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 30px;
}

.subscribe-text h4 {
  font-size: 20px;
  color: #feffff;
  font-weight: 500;
  font-family: "Poppins";
  text-align: center;
  position: relative;
  z-index: 1;
}

.subscribe-text h4:before {
  position: absolute;
  content: "";
  left: 43%;
  bottom: -18px;
  height: 2px;
  width: 53px;
  background: #ffffff;
}

.subscribe-text p {
  font-size: 16px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Poppins";
  text-align: center;
  padding: 32px 0 0;
}

.subscribe-address input {
  display: inline-block;
  background: #ffff;
  border: 1px solid #ffff;
  padding: 14px 32px;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 20px;
}

.subscribe-address input::placeholder {
  opacity: 0.400;
  font-size: 16px;
  color: #234e5b;
  font-weight: 400;
  font-family: "Poppins";
}

.Subcribe-button-left button {
  display: inline-block;
  font-size: 16px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 400;
  font-family: "Poppins";
  text-align: center;
  border: none;
  padding: 14px 95px;
  border-radius: 5px;
  background: #ffffff;
  position: relative;
  z-index: 1;
  transition: .5s;
}

.Subcribe-button-left button::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  border-radius: 5px;
  background: #232323;
  z-index: -1;
  transition: all 0.5s ease 0s;
}

.Subcribe-button-left button:hover::before {
  transform: rotateX(90deg);
}

.Subcribe-button-left button::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  border-radius: 5px;
  background: #232323;
  z-index: -1;
  transition: all 0.5s ease 0s;
}

.Subcribe-button-left button:hover::after {
  transform: rotateY(90deg);
}

.Subcribe-button-left button:hover {
  color: #000;
}

/*tags*/

.widget-sidebar-box {
  background: #ffff;
  padding: 25px 30px 32px;
  border-radius: 10px;
  margin-bottom: 30px;
  border: 1px solid #dddd;
}

.sidebar-title {
  margin-bottom: 45px;
  font-size: 20px;
  color: #234e5b;
  font-weight: 500;
  font-family: "Poppins";
  position: relative;
  z-index: 1;
}

.sidebar-title:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: -24px;
  height: 2px;
  width: 52px;
  background: #232323;
}

.tag-item {
  text-align: center;
}

.tag-item ul {
  list-style: none;
}

.tag-item ul li {
  display: inline-block;
}

.tag-item ul li a {
  display: inline-block;
  padding: 7px 19px;
  border: 1px dashed #108bea;
  transition: .5s;
  font-size: 16px;
  color: #232323;
  font-family: "Poppins";
  margin: 0 0 10px 0;
  border-radius: 4px;
  background-color: #fff9eb;
}

.tag-item ul li a:hover {
  color: #F1F5F9;
  background-color: #108bea;
}

/*
<!-- =========================================== -->
<!-- End blog details Section  -->
<!-- ========================================== -->*/




/*
<!-- =========================================== -->
<!-- Start faq Section  -->
<!-- ========================================== -->*/

.faqs-section {
  padding: 103px 0;
}

p.upper {
  width: 36%;
  margin: auto;
}

.tab_container {
  overflow: hidden;
  padding: 20px 0 0;
}

h2.accordion-title {
  font-size: 30px;
  padding: 0 0 37px;
}

.accordion li {
  list-style: none;
  padding: 2px 0px 15px;
}

.accordion li a {
  position: relative;
  width: 100%;
  display: block;
  cursor: pointer;
  font-weight: 500;
  font-size: 22px;
  color: #101210 !important;
  border-bottom: 1px solid rgba(19, 17, 37, 0.15);
  padding: 27px 20px 20px 0px;
  z-index: 1;
}

.accordion li p {
  display: none;
  font-size: 15px;
  padding: 0px 0px 20px 0px;
  margin: 0;
  border-bottom: 1px solid rgba(19, 17, 37, 0.15);
}

.accordion li a i {
  float: right;
  transform: rotate(-90deg);
  transition: .5s;
  font-size: 18px;
}

.accordion a.active:after {
  transform: rotate(0deg);
  -webkit-transition: all 0.2s ease-in-out;
  background: #108bea;
  opacity: 1;
}

a.active i {
  transform: rotate(0deg) !important;
}

.accordion a.active {
  border-bottom: 0;
  padding: 25px 20px 15px 0px;
  color: #108bea !important;
}

/*
<!-- =========================================== -->
<!-- End faq Section  -->
<!-- ========================================== -->*/




/*
<!-- =========================================== -->
<!-- Start Portfolio Details Section  -->
<!-- ========================================== -->*/

.Portfolio-details {
  padding: 120px 0 95px;
}

.Portfolio-thumb img {
  width: 100%;
}

.Portfolio-content {
  margin-left: 40px;
}

.Portfolio-title h4 {
  font-size: 28px;
  color: #232323;
  font-weight: 600;
  font-family: "Poppins";
}

table {
  margin: 30px 0 32px;
}

table.tabel-tab td {
  padding: 20px 35px 15px 0;
  font-size: 17px;
  color: #0a110e;
  font-weight: 400;
}

table.tabel-tab td span {
  color: #888f99;
}

.portfolio-text.left {
  display: inline-block;
  margin-right: 15px;
}

.portfolio-text.left h4 {
  font-size: 20px;
  color: #666;
  font-weight: 600;
  margin-top: 6px;
}

.portfolio-social-icon {
  display: inline-block;
}

.portfolio-social-icon ul {
  list-style: none;
}

.portfolio-social-icon ul li {
  display: inline-block;
}

.portfolio-social-icon ul li a {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  background: #108bea;
  color: #fff;
  border-radius: 5px;
  height: 30px;
  line-height: 30px;
  width: 30px;
  text-align: center;
  transition: .5s;
}

.portfolio-social-icon ul li a:hover {
  background: #111111;
}

.study-title {
  margin: 20px 0 24px;
}

.study-title h2 {
  font-size: 40px;
  color: #232323;
  font-weight: 600;
  font-family: "Poppins";
}

.study-disc p {
  font-size: 16px;
  line-height: 26px;
  color: #616161;
  font-weight: 400;
  font-family: "Roboto";
  width: 98%;
}

/*
<!-- =========================================== -->
<!-- End Portfolio Details Section  -->
<!-- ========================================== -->*/




/*
<!-- =========================================== -->
<!-- Start Portfolio team Section  -->
<!-- ========================================== -->*/

.team-section {
  padding: 90px 0;
}

.single-team-box {
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
}

.single-team-thumb img {
  width: 100%;
}

.single_team_content {
  width: 90%;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0;
}

.team-title {
  padding: 10px 0 17px;
  background: #0d6efd;
  text-align: center;
  width: 80%;
  position: relative;
  z-index: 1;
  left: 10%;
  border-radius: 3px 3px 0 0;
  transform: perspective(500px) rotateX(90deg);
  -webkit-transition: all 400ms linear 0ms;
  transition: all 400ms linear 0ms;
}

.team-title h4 {
  font-size: 22px;
  font-weight: 500;
  padding: 0 0 4px;
  color: #fff;
}

.team-title span {
  color: #fff;
}

.single_team_icon {
  position: relative;
  z-index: 1;
  left: 10%;
  width: 80%;
  background: #131323;
  text-align: center;
  padding: 14px 0 14px;
  border-radius: 0 0 3px 3px;
  transform: perspective(500px) rotateX(-90deg);
  -webkit-transition: all 400ms linear 0ms;
  transition: all 400ms linear 0ms;
}

.single_team_icon a {
  width: 38px;
  height: 38px;
  line-height: 41px;
  text-align: center;
  border-radius: 50px;
  background-color: #373644;
  display: inline-block;
  color: #fff;
  font-size: 14px;
  margin-right: 6px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.single_team_icon a:before {
  position: absolute;
  content: "";
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #0d6efd;
  transform: scale(0);
  border-radius: 50px;
  transition: 0.5s;
}

/*team all hover*/
.single-team-box:hover .single_team_icon {
  transform: perspective(500px) rotateX(0deg);
}

.single-team-box:hover .team-title {
  transform: perspective(500px) rotateX(0deg);
}

.single_team_icon a:hover:before {
  transform: scale(1);
}

/*
<!-- =========================================== -->
<!-- End Portfolio team Section  -->
<!-- ========================================== -->*/





/*
<!-- =========================================== -->
<!-- Start  services details Section   -->
<!-- ========================================== -->*/

.service-details {
  padding: 120px 0 120px;
  background: #f7f9fd;
}

.service-details-imgs {
  overflow: hidden;
}

.service-details-imgs img {
  width: 100%;
  border-radius: 5px;
  transition: 0.5s;
}

.service-details-imgs img:hover {
  transform: scale(1.1);
}

.services-datails-title h4 {
  margin: 11px 0 7px;
}

.service-details-text-1 p {
  text-align: justify;
  font-weight: 400;
}

.service-details-text-2 p {
  text-align: justify;
}

.service-details-text-3 p {
  margin-top: 26px;
  text-align: justify;
  font-weight: 400;
}

.planning-list ul li {
  list-style: none;
  margin-left: 31px;
  position: relative;
}

.planning-list ul li:before {
  position: absolute;
  content: "";
  width: 12px;
  height: 12px;
  left: -24px;
  top: 9px;
  background: #0d6efd;
  border-radius: 50px;
}

/*-services-details-sidber-*/
.sidebar-category {
  margin-left: 12px;
  background: #0d6efd;
  padding: 30px 0px 42px;
  border-radius: 5px;
}

.sidebar-category-list ul li {
  list-style: none;
}

.sidebar-category h4 {
  margin-left: 54px;
  font-size: 24px;
  font-weight: 500;
  color: #fff;
}

.sidebar-category-list {
  margin-left: 50px;
  position: relative;
}

.sidebar-category-list ul li {
  background: #fff;
  margin-top: 15px;
  border-radius: 3px;
  width: 84%;
}

.sidebar-category-list ul li a {
  display: inline-block;
  padding: 7px 33px;
  font-size: 17px;
  color: #333c4e;
}

.sidebar-category-list ul li a:hover {
  color: #0d6efd;
}

.sidebar-need-help {
  background: #0d6efd;
  margin-top: 50px;
  margin-left: 15px;
  padding: 28px 0 40px;
  border-radius: 5px;
}

.need-help-phone {
  display: flex;
  margin-left: 90px;
  position: relative;
  margin-top: -7px;
}

.sidebar-help-title h4 {
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  color: #fff;
}

.need-help-text {
  text-align: center;
}

.need-help-text p {
  color: #fff;
  font-weight: 400;
}

.phone-icon i {
  padding-right: 9px;
  font-size: 18px;
  color: #fff;
}

.phone-number span {
  font-size: 18px;
  color: #fff;
  display: inline-block;
}

.features-text p {
  padding: 16px 0 10px;
}

.features-text .service-features-list li {
  display: inline-block;
  color: #0b0b31;
  font-size: 16px;
  font-weight: 600;
  background-color: #ffffff;
  padding: 14px 15px;
  border-radius: 5px;
  margin-bottom: 20px;
  margin-right: 18px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-left: 2px solid #282828;
  -webkit-box-shadow: -1px 3px 20px 0px rgb(82, 90, 101, 0.1);
  box-shadow: -1px 3px 20px 0px rgb(82, 90, 101, 0.1);
}

.features-text .service-features-list li:last-child {
  margin-bottom: 0px;
}

.features-text .service-features-list i {
  color: #282828;
  font-size: 15px;
  display: inline-block;
  height: 30px;
  width: 30px;
  line-height: 30px;
  margin-right: 10px;
  background-color: transparent;
  border: 1px solid rgb(0, 0, 0, 0.2);
  border-radius: 50px;
  -webkit-transition: all 400ms ease-out;
  transition: all 400ms ease-out;
  text-align: center;
}

/*
<!-- =========================================== -->
<!-- End  services details Section  -->
<!-- ========================================== -->*/




/*============================================
<-- dreamhub-startup Loader Css -->
==============================================*/
.loader {
  position: fixed;
  width: 100%;
  height: 100%;
  transition: 10.00s;
  z-index: 9999;
  display: flex;
  align-items: center;
  text-align: center;
  background: #fff;
  justify-content: center;

}


/*
<!-- ============================================================== -->
<!--Scrollup Button Section -->
<!-- ============================================================== -->*/

/*------back-to-top------------*/

.prgoress_indicator {
  position: fixed;
  right: 50px;
  bottom: 20px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset 0 0 0 2px rgba(187, 247, 55, 0.2);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transform: translateY(15px) !important;
  transition: all 200ms linear !important;
}

.prgoress_indicator.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) !important;
}

.prgoress_indicator::after {
  position: absolute;
  content: "\f106";
  font-family: "Font Awesome 5 Free";
  text-align: center;
  line-height: 46px;
  font-size: 18px;
  color: #108bea;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  font-weight: 900;
  z-index: 1;
  transition: all 200ms linear !important;
}

.prgoress_indicator::before {
  position: absolute;
  content: "\f106";
  font-family: "Font Awesome 5 Free";
  text-align: center;
  line-height: 46px;
  font-size: 18px;
  font-weight: 900;
  opacity: 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 2;
  transition: all 200ms linear !important;
}

.prgoress_indicator:hover ::after {
  color: #108bea;
}

.prgoress_indicator:hover ::before {
  opacity: 1;
}

.prgoress_indicator svg path {
  fill: none;
}

.prgoress_indicator svg.progress-circle path {
  stroke: #108bea;
  stroke-width: 4;
  box-sizing: border-box;
  transition: all 200ms linear !important;
}

/*==========================================
    purify Search Popup Css
=========================================*/

.search-popup {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  z-index: 99999;
  margin-top: -540px;
  transform: translateY(-100%);
  background-color: rgba(0, 0, 0, 0.90);
  -webkit-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
  -moz-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
  -o-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
  transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
  -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
  -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
  -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
  transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
}

.search-popup {
  width: 100%;
}

.search-active .search-popup {
  transform: translateY(0%);
  margin-top: 0;
}

.search-popup .close-search {
  position: absolute;
  left: 0;
  right: 0;
  top: 75%;
  margin: 0 auto;
  margin-top: -200px;
  border-radius: 50%;
  text-align: center;
  background: #65cef5;
  width: 70px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border-bottom: 3px solid #ffffff;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  opacity: 0;
  visibility: hidden;
  height: 70px;
  line-height: 70px;
  text-align: center;
}

.search-popup .close-search i {
  position: relative;
  font-size: 30px;
  color: #ffffff;
}

.search-active .search-popup .close-search {
  visibility: visible;
  opacity: 1;
  top: 50%;
  -webkit-transition-delay: 1500ms;
  -moz-transition-delay: 1500ms;
  -ms-transition-delay: 1500ms;
  -o-transition-delay: 1500ms;
  transition-delay: 1500ms;
}

.search-popup form {
  position: absolute;
  max-width: 700px;
  top: 50%;
  left: 15px;
  right: 15px;
  margin: -35px auto 0;
  transform: scaleX(0);
  transform-origin: center;
  background-color: #111111;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.search-active .search-popup form {
  transform: scaleX(1);
  -webkit-transition-delay: 1200ms;
  -moz-transition-delay: 1200ms;
  -ms-transition-delay: 1200ms;
  -o-transition-delay: 1200ms;
  transition-delay: 1200ms;
}

.search-popup .form-group {
  position: relative;
  margin: 0px;
  overflow: hidden;
}

.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"] {
  position: relative;
  display: block;
  font-size: 18px;
  line-height: 50px;
  color: #000000;
  height: 70px;
  width: 100%;
  padding: 10px 30px;
  background-color: #ffffff;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  font-weight: 500;
  text-transform: capitalize;
}

.search-popup .form-group input[type="submit"],
.search-popup .form-group button {
  position: absolute;
  right: 30px;
  top: 0px;
  height: 70px;
  line-height: 70px;
  background: transparent;
  text-align: center;
  font-size: 24px;
  color: #000000;
  padding: 0;
  cursor: pointer;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  border: none;
}

.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover {
  color: #000000;
}

.search-popup input::placeholder,
.search-popup textarea::placeholder {
  color: #000000;
}

.search-popup .close-search.style-two {
  position: absolute;
  right: 25px;
  left: auto;
  color: #ffffff;
  width: auto;
  height: auto;
  top: 25px;
  margin: 0px;
  border: none;
  background: none !important;
  box-shadow: none !important;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.search-popup .close-search.style-two i {
  font-size: 20px;
  color: #ffffff;
}

.search-box-btn.search-box-outer i {
  font-size: 15px;
  display: inline-block;
  color: #ffffff;
  cursor: pointer;
}

.sticky .search-box-btn.search-box-outer i {
  color: #fff;
}

.page-content {
  font-size: 16px;
  line-height: 28px;
  color: #616161;
  font-weight: 400;
  font-family: "Roboto";
}

.section-link-btn a {
  padding: 10px 18px;
  display: inline-block;
  background: #232323;
  font-size: 16px;
  color: #ffffff;
  font-weight: 600;
  position: relative;
  z-index: 1;
  transition: .5s;
}

.section-link-btn a:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #108bea;
  z-index: -1;
  transition: .5s;
}

.section-link-btn a:hover::before {
  transform: rotateX(90deg);
}

.section-link-btn a:after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #108bea;
  z-index: -1;
  transition: .5s;
}

.section-link-btn a:hover::after {
  transform: rotateY(90deg);
}

.single-blog-flex-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #f5f5f5;
}

.single-blog-flex-box .blog-thumb,
.single-blog-flex-box .blog-content-right {
  width: 50%;
}

@media (max-width: 768px) {

  .single-blog-flex-box .blog-thumb,
  .single-blog-flex-box .blog-content-right {
    width: 100%;
  }
}

.pro-grid-title a {
  font-size: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pro-details-title {
  margin-top: 0;
  margin-bottom: 20px;
  padding: 20px 0;
  border-bottom: solid 1px #ddd;
}

.pro-details-thumb img {
  width: auto;
}

/* 分页 */
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0 0;
  border-radius: 4px;
}

.pagination>li {
  display: inline;
}

.pagination>li>a,
.pagination>li>span {
  position: relative;
  float: left;
  padding: 6px 12px;
  line-height: 1.42857;
  text-decoration: none;
  color: #337ab7;
  background-color: #fff;
  border: 1px solid #ddd;
  margin-left: -1px;
}

.pagination>li:first-child>a,
.pagination>li:first-child>span {
  margin-left: 0;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

.pagination>li:last-child>a,
.pagination>li:last-child>span {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}

.pagination>li>a:hover,
.pagination>li>a:focus,
.pagination>li>span:hover,
.pagination>li>span:focus {
  z-index: 2;
  color: #23527c;
  background-color: #eeeeee;
  border-color: #ddd;
}

.pagination>.active>a,
.pagination>.active>a:hover,
.pagination>.active>a:focus,
.pagination>.active>span,
.pagination>.active>span:hover,
.pagination>.active>span:focus {
  z-index: 3;
  color: #fff;
  background-color: #337ab7;
  border-color: #337ab7;
  cursor: default;
}