/*
    Template Name: WDZ Bootstrap Business Template
    Author: Zakir Hossen
    Author URL: https://zakirhossen.com
    Version: 1.0.0
    Tags: wdz, corporate, one page, template, html5, css3, bootstrap, landing page
    Description: WDZ is a responsive, clean, eyecatching html5 template for corporate holders. It has some nice & cool features, like one page, responsive, clean, bootstrap 4, scss used etc.
    
    === Table of contents ===
    1.0 header part
    2.0 banner part
    3.0 about part
    4.0 service part
    5.0 counter part
    6.0 team part
    7.0 portfolio part
    8.0 testimonial part
    9.0 price part
    10.0 newsletter part
    11.0 blog part 
    12.0 sub footer part
    13.0 footer part
    
    14.0 blog page
        14.1    blog sidebar part
        14.2    blog posts part
    15.0 blog post page
        15.0    blog post part
        15.1    author part
        15.2    comment form part
        15.3    comment box part
    16.0 responsive css
        16.1    Laptop Device
        16.2    Tablet Device
        16.3    Mobile Device
        16.4    Mobile Device Large
        16.5    All small devices



*/

/* ==== Normalize ==== */

* {
  padding: 0;
  margin: 0;
  outline: 0;
}

html,
body {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}

img {
  border: 0px;
}

ol,
ul,
li {
  list-style-type: none;
}

a {
  color: #2196F3;
  display: inline-block;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

a:focus,
a:hover {
  text-decoration: none;
  color: #0c7cd5;
}

p {
  font-size: 14px;
  line-height: 24px;
}

html,
body {
  height: 100%;
  width: 100%;
}

h1 {
  font-size: 45px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 30px;
}

h4 {
  font-size: 26px;
}

h5 {
  font-size: 22px;
}

h6 {
  font-size: 18px;
}

/* ==== Normalize ends ==== */

/* ==== Reusable style ==== */

.animate {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

section {
  padding: 80px 0px 80px;
}

.color {
  color: #2196F3;
}

.bgLightGray {
  background-color: #F6F9FC;
}

.header {
  text-transform: uppercase;
  margin-bottom: 20px;
}

.header h2 {
  margin: 0;
  color: #3e4451;
}

.header p {
  color: #49515f;
}

.header.borderRight,
.header.borderLeft {
  padding-right: 15px;
  border-right: 5px solid #2196F3;
  position: relative;
}

.header.borderRight::after,
.header.borderLeft::after {
  position: absolute;
  content: '';
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
  border-top: 7px solid transparent;
  border-right: 7px solid #2196F3;
  border-bottom: 7px solid transparent;
}

.header.borderLeft {
  padding: 0;
  padding-left: 15px;
  border-left: 5px solid #2196F3;
  border-right-color: transparent;
}

.header.borderLeft::after {
  border-left: 7px solid #2196F3;
  border-right-color: transparent;
  left: 0;
}

.buttons {
  margin: 20px 0px;
}

.buttons a {
  padding: 10px 25px;
  margin-right: 15px;
  border: 1px solid #fff;
  background-color: #2196F3;
  text-transform: uppercase;
  border-color: #2196F3;
  color: #fff;
  font-weight: 500;
  border-radius: 3px;
}

.buttons a:hover {
  color: #2196F3;
  background-color: #fff;
  border-color: #fff;
}

.buttons a:hover:last-child {
  color: #fff;
  background-color: #2196F3;
  border-color: #2196F3;
}

.buttons a:last-child {
  margin-right: 0;
  background-color: #fff;
  color: #2196F3;
  border-color: #282C34;
}

.buttons.buttonIcon a {
  position: relative;
}

.buttons.buttonIcon a::after {
  position: absolute;
  content: '\f105';
  top: 10px;
  right: -10px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 16px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
  opacity: 0;
}

.buttons.buttonIcon a:hover {
  padding: 10px 35px 10px 15px;
}

.buttons.buttonIcon a:hover::after {
  right: 15px;
  opacity: 1;
}

.box {
  padding: 20px 15px;
  margin: 15px 0;
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.09);
  -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.09);
  -ms-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.09);
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.09);
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.box:hover {
  -webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.15);
  -ms-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.15);
  margin-top: 8px;
  margin-bottom: 22px;
}

.bgLightGray .box {
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.04);
  -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.04);
  -ms-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.04);
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.04);
}

.bgLightGray .box:hover {
  -webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.09);
  -moz-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.09);
  -ms-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.09);
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.09);
}

.blogBox {
  padding: 0;
  min-height: 370px;
}

.blogBox .blogImg {
  height: 180px;
  overflow: hidden;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.blogBox .blogCnt {
  padding: 30px 20px 20px;
}

.blogBox .blogCnt .category {
  margin-bottom: 10px;
}

.blogBox .blogCnt .category a {
  padding: 0 5px;
}

.blogBox .blogCnt .category a:first-child {
  padding-left: 0;
}

.blogBox .blogCnt .header {
  text-transform: unset;
  margin: 0;
}

.blogBox .blogCnt .header h5 a {
  color: #282C34;
}

.social li {
  display: inline-block;
}

.social li a {
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 23px;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
}

.social li a:hover {
  color: #fff;
  border-color: #2196F3;
  background-color: #2196F3;
  -webkit-text-stroke-color: transparent;
}

.social.black a {
  -webkit-text-stroke-color: #a3aab8;
}

.widgetBox {
  margin-bottom: 30px;
}

.widgetBox:hover {
  margin-top: 15px;
  margin-bottom: 30px;
}

.widgetBox h4 {
  margin: 0px 0 20px 0;
  background-color: #2196F3;
  padding: 3px 10px 5px;
  color: #fff;
}

.widgetBox img {
  margin-bottom: 10px;
}

.widgetBox h5 {
  color: #2196F3;
}

.widgetBox p {
  font-size: 16px;
  color: #49515f;
}

.widgetBox .social {
  margin-bottom: 0;
}

.widgetBox .social li a {
  background-color: #2196F3;
  color: #fff;
  -webkit-text-stroke-color: transparent;
  border-color: transparent;
}

.widgetBox .social li a:hover {
  box-shadow: 0px 3px 20px 1px rgba(0, 0, 0, 0.2);
  color: #282C34;
}

.widgetBox ul.categoryList {
  margin-bottom: 0;
}

.widgetBox ul.categoryList li {
  position: relative;
}

.widgetBox ul.categoryList li::after {
  position: absolute;
  content: '\f105';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  top: 6px;
  left: 8px;
  color: #6b758a;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.widgetBox ul.categoryList li:first-child a {
  border-top: 1px solid #ddd;
}

.widgetBox ul.categoryList li a {
  border-bottom: 1px solid #ddd;
  display: block;
  padding: 5px 0;
  padding-left: 25px;
  color: #545d6e;
}

.widgetBox ul.categoryList li:hover::after {
  left: 13px;
}

.widgetBox ul.categoryList li:hover>a {
  color: #2196F3;
}

.widgetBox ul.categoryList li a.active {
  color: #2196F3;
}

.widgetBox ul.categoryList li.dropdown>a {
  position: relative;
}

.widgetBox ul.categoryList li.dropdown>a:after {
  position: absolute;
  content: '+';
  right: 10px;
  top: 3px;
  font-weight: bold;
}

.widgetBox ul.categoryList li.dropdown ul.dropdownCate {
  display: none;
  padding-left: 20px;
}

.widgetBox ul.categoryList li.dropdown ul.dropdownCate li a:first-child {
  border-top: 0;
}

.margin0 {
  margin: 0;
}

.padding0 {
  padding: 0;
}

.mainBanner {
  position: relative;
}

.mainBanner .bannerArrowsLeft {
  left: 20px;
}

.mainBanner .bannerArrowsRight {
  right: 20px;
}

.mainBanner .bannerArrowsLeft,
.mainBanner .bannerArrowsRight {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.mainBanner .bannerArrowsLeft i,
.mainBanner .bannerArrowsRight i {
  color: #fff;
  font-size: 20px;
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid transparent;
  background-color: #2196F3;
  border-radius: 50%;
  cursor: pointer;
}

.sliderArrows .sliderArrowsLeft,
.sliderArrows .sliderArrowsRight {
  display: inline-block !important;
  margin: 10px;
}

.sliderArrows .sliderArrowsLeft i,
.sliderArrows .sliderArrowsRight i {
  color: #fff;
  font-size: 20px;
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid transparent;
  background-color: #2196F3;
  border-radius: 50%;
  cursor: pointer;
}

ul.listBullet {
  padding-left: 25px;
}

ul.listBullet li {
  list-style-type: disc;
}

.paginationBox {
  margin-top: 10px;
}

.paginationBox .pagination .page-item .page-link {
  color: #2196F3;
}

/* ==== header part  ==== */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 11;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

header .navbar-dark .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.8);
}

header .logo {
  width: 150px;
  height: 75px;
  padding: 10px 0px;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

header .logo img {
  max-height: 100%;
  width: auto;
}

header .navbar {
  padding: 0;
}

header .navbar .navbar-nav li.nav-item a.nav-link {
  padding: 10px 15px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  font-size: 14px;
}

header .navbar .navbar-nav li.nav-item a.nav-link:hover {
  color: #fff;
}

header .navbar .navbar-nav li.nav-item a.nav-link.active {
  color: #fff;
}

header.sticky {
  background-color: #2196F3;
  position: fixed !important;
}

header.sticky .navbar-brand .logo {
  padding: 0;
  height: 55px;
}

/* ==== banner part ==== */

.banner .bnr {
  position: relative;
  overflow: hidden;
  height: 100vh;
  min-height: 380px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.banner .bnr::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.banner .bnr.slide1 {
  background-image: url("../img/P1010379.jpg");
}

.banner .bnr.slide2 {
  background-image: url("../img/Kusile.jpg");
}

.banner .bnr.slide3 {
  background-image: url("../img/lulu1.jpg");
}

.banner .bnr .bnrInside {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  color: #fff;
}

.banner .bnr .bnrInside .bnrInsideBox {
  height: 100vh;
  width: 100%;
}

.banner .bnr .bnrInside .bnrInsideBox .bnrInsideText h2 {
  font-size: 45px;
  margin-bottom: 20px;
}

.banner .bnr .bnrInside .bnrInsideBox .bnrInsideText p {
  font-size: 18px;
  color: #e6e6e6;
}

.banner .bnr .bnrInside .bnrInsideBox .bnrInsideText .buttons {
  margin-top: 30px;
}

.banner .bnr .bnrInside .bnrInsideBox .bnrInsideText.text-center {
  max-width: 700px;
}

.banner .bnr #particles-js {
  width: 100%;
  height: 100%;
  position: absolute;
}

/* ==== about part  ==== */

.about {
  padding: 90px 0;
}

.about .aboutLeft {
  width: 100%;
  color: #fff;
  clip-path: polygon(100% 0, 100% 89%, 0 100%, 0 0);
}

.about .aboutLeft.aboutVideo {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
}

.about .aboutRight {
  height: 100%;
}

.about .aboutRight .buttons {
  margin-top: 30px;
}

.about .aboutRight .buttons a {
  border-color: #2196F3;
}

.about .aboutRight .buttons a:hover:first-child {
  background-color: #282C34;
  color: #fff;
  border-color: #282C34;
}

.about .aboutRight p,
.about .aboutRight div {
  font-size: 15px;
  color: #6b758a;
}

/* ==== service part ==== */

.service {
  padding-bottom: 75px;
}

.service .serviceBox {
  background-color: #fff;
}

.service .serviceBox h5 {
  color: #6b758a;
}

.service .serviceBox i {
  font-size: 50px;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #b2dbfb;
  margin-bottom: 20px;
}

.service .serviceBox p {
  margin-bottom: 0;
  color: #788297;
}

.service .serviceBox:hover h5 {
  color: #51adf6;
}

/* ==== counter part ==== */

.counter {
  background-color: #51adf6;
}

.counter .counterBox {
  text-align: center;
  height: 170px;
  width: 200px;
  border-radius: 5px;
  background-color: #6ab8f7;
}

.counter .counterBox h4 {
  font-size: 45px;
  font-weight: bolder;
  margin: 0;
  color: #fff;
}

.counter .counterBox p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  text-transform: capitalize;
}

/* ==== Team part ==== */

.team {
  padding-bottom: 75px;
}

.team .teamBox {
  display: inline-block;
}

.team .teamBox .memberImg {
  max-height: 300px;
  overflow: hidden;
  margin-bottom: 20px;
}

.team .teamBox h5 {
  margin-bottom: 0;
  color: #3e4451;
}

.team .teamBox p {
  margin-bottom: 0;
  color: #49515f;
}

.team .teamBox .social {
  margin-top: 10px;
  margin-bottom: 0;
}

/* ==== portfolio part ==== */

.portfolio {
  padding-bottom: 75px;
}

.portfolio .portfolioBox .portImg {
  height: 180px;
  overflow: hidden;
}

.portfolio .portfolioBox .portBoxCnt h6 {
  margin: 10px 0;
  color: #49515f;
}

.portfolio .portfolioBox .portBoxCnt .portLinks a {
  width: 50%;
  text-align: center;
  border: 1px solid #ddd;
  color: #6b758a;
  padding: 3px 0px;
  text-transform: capitalize;
}

.portfolio .portfolioBox .portBoxCnt .portLinks a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  margin-right: 5px;
}

.portfolio .portfolioBox .portBoxCnt .portLinks a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.portfolio .portfolioBox .portBoxCnt .portLinks a:hover {
  background-color: #2196F3;
  color: #fff;
}

.portfolio .portfolioBox:hover h6 {
  color: #282C34;
}

/* ==== testimonial part ==== */

.testimonial {
  padding-bottom: 75px;
}

.testimonial .header {
  margin-bottom: 50px;
}

.testimonial .testimonialBox {
  background-color: #fff;
  position: relative;
  margin-top: 65px;
  padding: 80px 30px 20px;
}

.testimonial .testimonialBox:hover {
  margin-top: 58px;
}

.testimonial .testimonialBox .clientImg {
  height: 130px;
  width: 130px;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 10px solid #fff;
}

.testimonial .testimonialBox .clientTxt {
  text-align: center;
}

.testimonial .testimonialBox .clientTxt p {
  font-size: 16px;
  color: #282C34;
}

.testimonial .testimonialBox .clientIntro {
  text-transform: capitalize;
  padding-top: 10px;
}

.testimonial .testimonialBox .clientIntro h6 {
  margin: 0;
  color: #49515f;
}

.testimonial .testimonialBox .clientIntro p {
  margin: 0;
  color: #788297;
}

/* ==== price part ==== */

.price {
  padding-bottom: 85px;
}

.price .header {
  margin-bottom: 40px;
}

.price .priceBox {
  padding: 0;
  background-color: #fff;
}

.price .priceBox:hover {
  margin-bottom: 15px;
}

.price .priceBox .head {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
  border-bottom: 1px solid #ddd;
  border-radius: 5px 5px 0px 0px;
  padding: 30px 40px;
}

.price .priceBox .head h5 {
  font-size: 36px;
  color: #949dad;
  margin: 0;
}

.price .priceBox .head h5:nth-child(2) {
  color: #49515f;
}

.price .priceBox ul.body {
  padding: 20px 40px;
  margin: 0;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.price .priceBox ul.body li {
  margin: 0;
  padding: 20px 0;
  border-bottom: 1px solid #ddd;
}

.price .priceBox ul.body li p {
  margin: 0;
  font-weight: 500;
  color: #6b758a;
}

.price .priceBox ul.body li p:nth-child(2) {
  color: #49515f;
}

.price .priceBox ul.body li:last-child {
  border-bottom: none;
}

.price .priceBox a.choose {
  margin: 0 auto;
  margin-bottom: 40px;
  padding: 10px 30px;
  background-color: #2196F3;
  border-radius: 3px;
  color: #fff;
}

.price .priceBox a.choose:hover {
  background-color: #51adf6;
}

.price .priceBox.active {
  margin-top: 15px;
  transform: scale(1.05);
}

.price .priceBox.active .head {
  background-color: #2196F3;
}

.price .priceBox.active .head h5 {
  color: #fff;
}

/* ==== newsletter part ==== */

.newsletter {
  background-color: #2196F3;
  background-repeat: repeat;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.newsletter::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url("../img/pattern.png");
  opacity: .4;
  z-index: -1;
}

.newsletter .newsletterLeft h4 {
  font-size: 36px;
  color: #fff;
}

.newsletter .newsletterRight {
  text-align: right;
}

.newsletter .newsletterRight .signup {
  display: inline-block;
  position: relative;
}

.newsletter .newsletterRight .signup input[type='email'] {
  background-color: white;
  padding: 7px 15px;
  min-width: 350px;
  color: #2196F3;
  border: 1px solid #fff;
  background-color: #fff;
}

.newsletter .newsletterRight .signup input[type='email']:focus {
  border-color: #fff;
  background-color: rgba(255, 255, 255, 0.5);
  color: #282C34;
}

.newsletter .newsletterRight .signup button {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 60px;
  background-color: #fff;
  border: 1px solid #fff;
  cursor: pointer;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

/* ==== blog part ==== */

.blog {
  padding-bottom: 75px;
}

/* ==== sub footer part ==== */

.subFooter {
  background-color: #333842;
  padding-bottom: 90px;
}

.subFooter .header {
  margin-bottom: 40px;
}

.subFooter .header h2 {
  color: #fff;
}

.subFooter .subFooterInfo {
  height: 150px;
  border-radius: 5px;
  background-color: #49515f;
  margin: auto;
}

.subFooter .subFooterInfo .sfInfoCnt {
  text-align: center;
}

.subFooter .subFooterInfo .sfInfoCnt i {
  font-size: 40px;
  margin-bottom: 20px;
  color: #cccccc;
}

.subFooter .subFooterInfo .sfInfoCnt p {
  margin: 0;
  font-size: 16px;
  color: #fff;
}

.subFooter .contactForm {
  margin-top: 20px;
}

.subFooter .contactForm .cFormLeft {
  height: 100%;
}

.subFooter .contactForm .cFormLeft input {
  width: 100%;
  margin-bottom: 10px;
  padding: 7px 20px;
  border-radius: 3px;
  border: 1px solid #49515f;
  background-color: transparent;
  color: #fff;
}

.subFooter .contactForm .cFormLeft input:last-child {
  margin: 0;
}

.subFooter .contactForm .cFormLeft input:focus {
  border-color: #cccccc;
}

.subFooter .contactForm .cFormLeft textarea {
  height: 100px;
  width: 100%;
  padding: 7px 20px;
  border-radius: 3px;
  border: 1px solid #49515f;
  background-color: transparent;
  resize: none;
  color: #fff;
}

.subFooter .contactForm .cFormLeft textarea:focus {
  border-color: #cccccc;
}

.subFooter .contactForm .cFormLeft input.submit {
  padding: 8px 30px;
  border: 1px solid #49515f;
  margin-top: 20px;
  border-radius: 3px;
  text-transform: uppercase;
  color: #fff;
  background-color: #49515f;
  cursor: pointer;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
  max-width: 130px;
}

.subFooter .contactForm .cFormLeft input.submit:hover {
  background-color: #51adf6;
  border-color: #51adf6;
}

.subFooter .contactForm .cFormLeft .error {
  margin: 8px 0px;
  display: none;
  color: red;
}

.subFooter .contactForm .cFormLeft #ajaxsuccess {
  font-size: 16px;
  width: 100%;
  display: none;
  clear: both;
  margin: 8px 0px;
}

.subFooter .contactForm .cFormLeft .error_message {
  padding: 10px;
  text-align: center;
  border: 2px solid #f36270;
  color: #f36270;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  background-color: #fff;
  padding: 10px;
  margin-bottom: 5px;
}

.subFooter .contactForm .cFormLeft #success_page {
  text-align: center;
  background-color: #fff;
  padding: 10px;
  margin-bottom: 5px;
}

.subFooter .contactForm .cFormLeft #success_page h3 {
  color: #0dba26;
}

.subFooter .contactForm .cFormLeft #success_page p {
  margin-bottom: 0;
}

.subFooter .contactForm .cFormRight {
  height: 100%;
}

/* ==== footer part ==== */

footer {
  background-color: #282C34;
  color: #fff;
  padding: 10px 0;
}

footer .footerRight {
  text-align: right;
}

footer .footerRight nav ul {
  margin-bottom: 0;
}

footer .footerRight nav ul li {
  display: inline-block;
}

footer .footerRight nav ul li a {
  padding: 5px 10px;
  color: #fff;
  margin: 3px 2px;
}

footer .footerRight nav ul li a:hover {
  color: #2196F3;
}

footer ul.social li {
  margin-left: 5px;
}

footer ul.social li a {
  height: 35px;
  width: 35px;
  line-height: 35px;
  font-size: 18px;
}

footer ul>li>a i {
  -webkit-text-stroke-color: transparent;
  color: #fff;
}

/* ==== preloader ==== */

.preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #2196F3;
  z-index: 111;
  text-align: center;
}

.preloader .loader .spin {
  height: 20px;
  width: 20px;
  background-color: #fff;
  border-radius: 50%;
  margin: 20px 7px 0;
}

.preloader .loader .spin1 {
  animation: move .8s linear 0s infinite;
}

.preloader .loader .spin2 {
  animation: move 0.8s linear 0.33s infinite;
}

.preloader .loader .spin3 {
  animation: move .8s linear 0.66s infinite;
}

@keyframes move {
  0%,
  75%,
  100% {
    margin-top: 20px;
  }
  25% {
    margin-top: 0px;
  }
}

/* ==== back to top ==== */

.backToTop {
  position: fixed;
  bottom: 30px;
  right: 20px;
  z-index: 111;
  display: none;
}

.backToTop i {
  transform: rotate(90deg);
  height: 40px;
  width: 40px;
  line-height: 40px;
  border: 1px solid gray;
  font-size: 22px;
  border-radius: 3px;
  text-align: center;
  margin: 0;
  padding: 0;
  background-color: #2196F3;
  border-color: #2196F3;
  color: #fff;
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.backToTop i:hover {
  box-shadow: 5px 0px 20px 2px rgba(0, 0, 0, 0.29);
}

/* ==== blog page ==== */

.mainHeader.normalHeader {
  background-color: #2196F3;
}

.blogPage {
  padding-top: 150px;
}

.blogPage .blogRight .widgetBox .recentPosts {
  margin-bottom: 0;
}

.blogPage .blogRight .widgetBox .recentPosts li {
  border-top: 1px solid #ddd;
}

.blogPage .blogRight .widgetBox .recentPosts li:last-child {
  border-bottom: 1px solid #ddd;
}

.blogPage .blogRight .widgetBox .recentPosts li .recentPost {
  padding: 10px 0;
}

.blogPage .blogRight .widgetBox .recentPosts li .recentPost .previewImg {
  width: 100px;
  margin-right: 10px;
}

.blogPage .blogRight .widgetBox .recentPosts li .recentPost .previewImg img {
  margin-bottom: 0;
}

.blogPage .blogRight .widgetBox .recentPosts li .recentPost .content a {
  font-size: 18px;
  color: #545d6e;
}

.blogPage .blogRight .widgetBox .recentPosts li .recentPost:hover .content a {
  color: #2196F3;
}

/* ==== blog post page ==== */

/* ====  blog post part ==== */

.blogPostBox:hover {
  margin: 15px 0;
}

.blogPostBox .header {
  margin-bottom: 5px;
}

.blogPostBox .header h1 {
  font-size: 26px;
  text-transform: initial;
  margin: 0;
}

.blogPostBox .header h1 a {
  color: #282C34;
}

.blogPostBox .meta {
  margin-bottom: 10px;
}

.blogPostBox .meta p {
  display: inline-block;
  margin: 0;
}

.blogPostBox .meta .category {
  display: inline-block;
}

.blogPostBox .meta .category a {
  padding: 2px 8px;
  background-color: #f5f5f5;
}

.blogPostBox .blogImg {
  margin: 20px 0;
  text-align: center;
}

.blogPostBox .quotes {
  background-color: #e3f2fd;
  border-left: 5px solid #2196F3;
  padding: 20px;
  font-size: 18px;
  font-weight: 600;
  margin: 30px 0;
}

.blogPostBox .blogCnt p {
  font-size: 16px;
  color: #3e4451;
}

.blogPostBox .CntImgCol2 {
  margin-bottom: 20px;
}

.blogPostBox .CntImgCol2 p:last-child {
  margin-bottom: 0;
}

.blogPostBox .commentAndTags .tags {
  width: 100%;
}

.blogPostBox .commentAndTags .tags p {
  margin: 0;
  display: inline-block;
  font-weight: bold;
  text-transform: uppercase;
}

.blogPostBox .commentAndTags .tags p i {
  color: #5f697c;
  font-size: 12px;
  margin-right: 5px;
}

.blogPostBox .commentAndTags .tags ul {
  display: inline-block;
  margin-left: 10px;
  margin-bottom: 0;
}

.blogPostBox .commentAndTags .tags ul li {
  display: inline-block;
}

.blogPostBox .commentAndTags .tags ul li a {
  font-size: 12px;
  text-transform: uppercase;
  background-color: #f1f1f1;
  padding: 2px 8px;
  color: #282C34;
}

.blogPostBox .commentAndTags .comment {
  width: 100%;
  text-align: right;
}

.blogPostBox .commentAndTags .comment a {
  color: #282C34;
}

/* ==== author part ==== */

.authorBox {
  width: 100%;
}

.authorBox:hover {
  margin: 15px 0;
}

.authorBox .authorLeft {
  min-width: 120px;
  max-width: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20px;
}

.authorBox .authorRight {
  width: 100%;
  height: 100%;
}

.authorBox .authorRight h5 {
  margin-bottom: 20px;
}

.authorBox .authorRight p {
  margin-bottom: 0;
}

/* ==== comment form part ==== */

.commentForm:hover {
  margin: 15px 0;
}

.commentForm h4 {
  margin-bottom: 20px;
}

.commentForm input,
.commentForm textarea {
  width: 100%;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  padding: 5px 15px;
  border-radius: 3px;
}

.commentForm input:focus,
.commentForm textarea:focus {
  border-color: #2196F3;
}

.commentForm textarea {
  height: 120px;
  resize: none;
  margin-bottom: 0;
}

.commentForm .commentButton {
  padding: 7px 15px;
  background-color: #2196F3;
  color: #fff;
  border-radius: 2px;
  margin-top: 10px;
}

/* ==== CSScomment ==== */

.commentBox {
  margin: 20px 0;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #fafafa;
}

.commentBox h4 {
  margin-bottom: 20px;
}

.commentBox ul.commentList li {
  border-bottom: 1px solid #ddd;
}

.commentBox ul.commentList li:last-child {
  border-bottom: 0;
}

.commentBox .mainComment,
.commentBox .subComment {
  margin-right: 10px;
  padding: 20px 0;
}

.commentBox .mainComment .user,
.commentBox .subComment .user {
  min-width: 60px;
  max-width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}

.commentBox .mainComment .content,
.commentBox .subComment .content {
  width: 100%;
}

.commentBox .mainComment .content .head,
.commentBox .subComment .content .head {
  margin-bottom: 10px;
}

.commentBox .mainComment .content .head h6,
.commentBox .mainComment .content .head p,
.commentBox .subComment .content .head h6,
.commentBox .subComment .content .head p {
  margin: 0;
}

.commentBox .mainComment .content p,
.commentBox .subComment .content p {
  color: #5f697c;
  margin-bottom: 0;
}

.commentBox .mainComment .content .meta,
.commentBox .subComment .content .meta {
  margin-top: 5px;
}

.commentBox .mainComment .content .meta a,
.commentBox .subComment .content .meta a {
  color: #282C34;
}

.commentBox .mainComment .content .meta a:hover,
.commentBox .subComment .content .meta a:hover {
  color: #2196F3;
}

.commentBox ul.subCommentList {
  margin-left: 80px;
}

.commentBox ul.subCommentList li {
  border-top: 1px solid #ddd;
  border-bottom: 0;
}

.commentBox .subComment {
  padding: 10px 0;
  margin-left: 0;
}

/* ==== Responsive CSS ==== */

/* ==== Laptop Device ==== */

@media (min-width: 1024px) and (max-width: 1198.99px) {
  .price .priceBox .head {
    padding: 25px 30px;
  }
  .price .priceBox ul.body {
    padding: 20px 30px;
    margin: 0;
  }
  .price .priceBox.active .head h5 {
    font-size: 30px;
  }
}

/* ==== Tablet Device ==== */

@media (min-width: 768px) and (max-width: 991.98px) {
  .cFormLeft {
    margin-bottom: 20px;
  }
  .counter .counterBox {
    width: 160px;
  }
  .blogBox {
    min-height: 315px;
  }
  .blogBox .blogImg {
    height: 165px;
  }
  .blogBox .blogCnt {
    padding: 15px 20px 10px;
  }
  ul.navbar-nav {
    background-color: #2196F3;
  }
  .bnrInsideText {
    padding: 0 40px;
  }
}

/* ==== Mobile Device ==== */

@media (max-width: 767.98px) {
  .buttons a {
    margin-bottom: 10px;
    margin-right: 0;
  }
  .buttons a:last-child {
    margin-bottom: 0;
  }
  .banner .bnr .bnrInside .bnrInsideBox .bnrInsideText h2 {
    font-size: 30px;
    margin-bottom: 10px;
  }
  .bnrInsideText {
    padding-top: 60px;
  }
  .mainBanner .bannerArrowsLeft,
  .mainBanner .bannerArrowsRight {
    opacity: 0;
  }
  .blogBox {
    min-height: 315px;
  }
  .aboutLeft {
    margin-bottom: 20px;
  }
  .counter .counterBox {
    width: 100%;
    margin-bottom: 30px;
  }
  .portfolio .portfolioBox .portImg {
    height: auto;
  }
  .newsletter .newsletterLeft {
    text-align: center;
  }
  .newsletter .newsletterRight {
    text-align: center;
  }
  .cFormLeft {
    margin-bottom: 20px;
  }
  footer .footerLeft {
    text-align: center;
    margin-bottom: 10px;
  }
  footer .footerRight {
    text-align: center;
  }
  footer .footerRight .social {
    text-align: center;
  }
  .newsletter .newsletterRight .signup input[type='email'] {
    min-width: 300px;
  }
  .commentBox ul.subCommentList {
    margin-left: 30px;
  }
  .commentBox .mainComment .user,
  .commentBox .subComment .user {
    display: none;
  }
}

/* ==== Mobile Device large ==== */

@media (min-width: 576px) and (max-width: 767.98px) {
  .blogBox {
    min-height: 315px;
  }
  .blogBox .blogCnt {
    padding: 15px 20px 10px;
  }
}

/* ==== All small devices ==== */

@media (max-width: 991px) {
  .navbar-nav {
    background-color: #2196F3;
  }
}
