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

    Template Name: Usual
    Template URI: https://devitems.com/
    Description: This is html5 template
    Author: HasTech
    Author URI: https://devitems.com/
    Version: 1.0

-----------------------------------------------------------------------------------
    
    CSS INDEX
    ===================
	
    1. Home One Css
		2. About Area
		3. About Video Area 
		4. Service Area 
		5. Portfolio css
		6. Blog Area
		7. Client Testimonial 
		8. Pricing Table 
		9. Brand Area 
		10. Form Contact
		11. Footer Bottom 
	12. Home Two Css
		13. About Us 
		14. Our Successful
		15. Our Service
		16. Team See Our Portfolio
		17. Latest Shot/Portfolio Css
		18. Our Team
		19. Skill Progress
		20. our pricing table
		21. Blog Style
		22. Our Client
		23. Footer Style Two
	24. About Us Page
	25. Contact Us Page
	26. Portfolio Details Page
	27. Pagination Count css
	28. Blog Details Page
	29. 404 Page
	30. ScrollUp
	31. Style Customizer css
	
-----------------------------------------------------------------------------------*/
/*----- Google Font -----*/

@import url("css.css");

/* ------------------------------
  1. Home One Css
---------------------------------*/

@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1170px;
  }
}
@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1170px;
  }
}

/* -------------------------
  2. About Area
-----------------------------*/
.mobile-menu-area {
  display: none;
}
.icon-titel {
  display: block;
  margin-bottom: 13px;
  overflow: hidden;
}
.icon-titel i {
  color: #666666;
  font-size: 24px;
}
.choose-us .icon-titel i {
  color: #666666;
  float: left;
  font-size: 24px;
  height: 50px;
  line-height: 50px;
  position: relative;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 50px;
  z-index: 1;
}


.choose-us .icon-titel i::after {
  border: 1px solid #ddd;
  border-radius: 0px;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: all 0.3s ease 0s;
  width: 100%;
  z-index: -9999;
}
.icon-titel h6 {
  display: block;
  font-weight: 700;
  margin: 0;
  overflow: hidden;
  padding-top: 20px;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
}
.specialty-single:hover .icon-titel h6,
.ourservice-single:hover .srvc-content h6 {
  color: #03a9f4;
}
.choose-us .specialty-single:hover .icon-titel i,
.ourservice-single:hover .srvc-icon a i {
  color: #fff;
}
.specialty-single:hover .icon-titel i::after,
.social-rotate ul li a:hover,
.ourservice-single:hover .srvc-icon a {
  background: #03a9f4;
  border-color: #03a9f4;
}
.specialty-image {
  margin-top: 10%;
  padding-left: 40px;
}
.spe-discribe > p {
  margin: 0;
}
.text-titel {
  font-family: raleway;
  font-size: 50px;
  font-weight: 800;
  line-height: 80px;
  letter-spacing: 2px;
  color: #fff;
}
/* -------------------------
  3. About Video Area
-----------------------------*/
.video-area .img {
  display: block;
  overflow: hidden;
  position: relative;
}
.popup-youtube {
  color: #fff;
  display: block;
  font-size: 60px;
  height: 70px;
  left: 0;
  line-height: 70px;
  margin: 0 auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: 35%;
  width: 70px;
}
.social-rotate ul li a {
  border: 1px solid #ddd;
  color: #666666;
  display: block;
  font-size: 15px;
  height: 30px;
  line-height: 28px;
  margin-right: 20px;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 30px;
}
.header-area-2 .social-rotate ul li a {
  margin-right: 8px;
  color: #fff;
}
.social-rotate ul li a:hover {
  color: #fff;
}
/* .social-rotate ul li a i {
  transform: rotate(45deg);
} */
/* --------------------------
  4. Service Area
-----------------------------*/
.srvc-icon i {
  color: #666666;
  font-size: 36px;
}
.service-hover {
  background: #fff none repeat scroll 0 0;
  border-radius: 5px;
  box-shadow: 2px 2px 10px 2px #ddd;
  padding: 35px 15px 20px;
  transition: all 0.3s ease 0s;
}
.hvr-icon {
  margin-top: 5px;
}
.hvr-icon i {
  color: #03a9f4;
  font-size: 36px;
  margin-bottom: 25px;
}
.hvr-icon > h6 {
  color: #383838;
  margin-bottom: 20px;
}
.wework-social {
  padding-left: 20px;
  padding-right: 20px;
}
.wework-social ul li a {
  background: #fff none repeat scroll 0 0;
  border-radius: 5px;
  transition: 0.3s;
}
.wework-social ul li:last-child {
  margin-right: 0;
}
.wework-social ul li a:hover {
  background: #03a9f4;
}
.wework-social ul li:hover a i,
.wework-social ul li:hover a span {
  color: #fff;
}
.wework-social ul li a {
  display: block;
  height: 100%;
  padding: 25%;
  width: 100%;
}
.wework-social ul li a i {
  color: #666666;
  display: block;
  font-size: 30px;
  margin-bottom: 5px;
  text-align: center;
  transition: 0.5s;
}
.wework-social ul li a span {
  color: #383838;
  display: block;
  font-family: raleway;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  transition: 0.5s;
}
/* --------------------------
  5. Portfolio css
-----------------------------*/
.portfolio-menu li {
  color: #383838;
  cursor: pointer;
  font-family: raleway;
  font-size: 14px;
  font-weight: 700;
  margin-left: -4px;
  padding: 10px 25px;
  text-transform: uppercase;
  transition: all 0.4s ease 0s;
  background: rgba(4, 74, 103, 0.06);
  margin: 0 5px;
}
.portfolio-menu li.active,
.portfolio-menu li:hover {
  background: #03a9f4 none repeat scroll 0 0;
  border-color: #03a9f4;
  color: #fff;
}
.image-box::after {
  background: #03a9f4 none repeat scroll 0 0;
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0px;
  transform: rotate(90deg);
  transition: all 0.4s ease 0s;
}
.image-box > a {
  color: #fff;
  font-size: 70px;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s ease 0s;
  visibility: hidden;
  z-index: 1;
}
.image-box > a:hover {
  color: #fff;
}
.image-box:hover:after {
  opacity: 0.7;
  transform: rotate(0deg);
}
.image-box:hover a {
  visibility: visible;
  opacity: 1;
}
.image-box {
  cursor: pointer;
  display: block;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.single-portfolio {
}
.portfoio-boxall {
  margin: 0 -5px;
}
.text-content h6 {
  margin-bottom: 0;
}
.socialbar {
  margin-top: 30px;
}

.latestshot-menu li:last-child {
  border-right: 1px solid #eee;
}

.shot-two .single-portfolio {
  margin-bottom: 0;
}

/* -------------------------
   6. Blog Area
----------------------------*/
.blog-content {
  border: 1px solid #ddd;
  padding: 28px 20px;
}
.blog-content > h6 {
  margin-bottom: 15px;
}
.blog-content a {
  transition: all 0.4s ease 0s;
}
.post-info {
  color: #777;
  font-family: Lato;
  font-size: 12px;
  font-weight: 400;
}
.post-date > a,
.favorite-comment > a,
.favorite > a {
  color: #777;
}
.post-date > a:hover,
.favorite-comment > a:hover,
.favorite > a:hover {
  color: #03a9f4;
}
.post-date i,
.favorite-comment i {
  color: #777;
  margin-right: 4px;
}
.favorite {
  float: left;
  margin-right: 23px;
}
.blog-img::before,
.blog-img::after {
  background: #03a9f4 none repeat scroll 0 0;
  content: "";
  height: 200%;
  left: 0;
  opacity: 0.5;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: all 0.6s ease 0s;
  width: 200%;
}
.blog-img::before {
  transform: skew(45deg) translateX(100%);
  z-index: 9;
}
.blog-img::after {
  transform: skew(45deg) translateX(-100%);
}
.blog-img {
  overflow: hidden;
  position: relative;
}
.single-blog:hover .blog-img::before,
.single-blog:hover .blog-img::after {
  cursor: pointer;
  transform: skew(45deg) translateX(0px);
}

.blog-img img {
  width: 100%;
}
/* -------------------------
   7. Client Testimonial
----------------------------*/
.ct-cp img {
  border-radius: 100%;
}
.client-say {
  display: block;
  overflow: hidden;
  padding: 35px 0 40px;
  padding-bottom: 0;
}
.client-info > p {
  margin: 0;
}
.client-info > h6 {
  color: #d7d7d7;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 1px;
}
.client-info {
  margin-top: 15px;
}
.client-adrs > p {
  color: #d7d7d7;
  font-family: raleway;
  font-style: italic;
  font-weight: 400;
  margin: 0;
  padding-bottom: 6px;
  position: relative;
}
.client-say > p {
  color: #d7d7d7;
  display: inline-block;
  font-family: raleway;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: 30px;
  max-width: 850px;
  vertical-align: top;
}
.client-testimonial-area .owl-theme .owl-controls {
  margin-top: 68px;
  text-align: center;
}
.client-testimonial-area .owl-theme .owl-controls .owl-buttons div {
  background: transparent none repeat scroll 0 0;
  border: 1px solid #fff;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  height: 40px;
  line-height: 40px;
  margin: 0 23px 0 0;
  opacity: 1;
  padding: 0;
  text-align: center;
  transform: rotate(45deg);
  width: 40px;
  transition: 0.3s;
}
.client-testimonial-area .owl-theme .owl-controls .owl-buttons div:hover {
  color: #03a9f4;
}
.client-testimonial-area
  .owl-theme
  .owl-controls
  .owl-buttons
  div.owl-prev::after {
  content: "";
  font-family: material-design-iconic-font;
  font-size: 30px;
  height: 100%;
  left: 0;
  margin-top: 4px;
  position: absolute;
  right: 0;
  transform: rotate(495deg);
  width: 100%;
}
.client-testimonial-area
  .owl-theme
  .owl-controls
  .owl-buttons
  div.owl-next::before {
  content: "";
  font-family: material-design-iconic-font;
  font-size: 30px;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  transform: rotate(675deg);
  width: 100%;
  margin-top: -1px;
}
.client-testimonial-area .owl-theme .owl-prev i,
.client-testimonial-area .owl-theme .owl-next i {
  display: none;
}
/* -------------------------
   8. Pricing Table
----------------------------*/
.pricing-table-single {
  border: 1px solid #ddd;
  transition: 0.3s;
}
.pricing-table-single:hover {
  box-shadow: 2px 2px 15px 5px #ddd;
}
.table-category {
  padding-bottom: 45px;
  padding-top: 45px;
  border-bottom: 1px solid #03a9f4;
}
.table-category h1 {
  color: #03a9f4;
  font-family: lato;
  font-size: 48px;
  font-weight: 900;
  margin: 20px 0 0;
}
.table-category h1 span {
  color: #999999;
  font-size: 12px;
  font-weight: 900;
  margin-left: 8px;
  text-transform: uppercase;
}
.pricing-list > ul {
  padding-bottom: 50px;
  padding-top: 50px;
}
.pricing-list > ul li {
  display: block;
  padding: 12px 0;
}
.pricing-list.text-center li:first-child {
  padding-top: 0;
}
.pricing-list.text-center li:last-child {
  padding-bottom: 0;
}
.pricing-list > ul li a {
  color: #606060;
  font-family: lato;
  font-size: 14px;
  font-weight: 400;
  cursor: unset;
}
.order-button > a {
  border-top: 1px solid #ddd;
  color: #03a9f4;
  display: block;
  font-size: 12px;
  font-weight: 700;
  padding: 15px 0;
  transition: 0.3s;
}
.order-button > a:hover {
  background: #03a9f4;
  color: #fff;
  border-color: #03a9f4;
}
/* -------------------------
   9. Brand Area
----------------------------*/
.brand-single > a {
  display: block;
  margin-bottom: 1px;
  transition: all 0.3s ease 0s;
  border: 2px solid #ddd;
  border-radius: 5px;
}
.brand-single > a:hover {
  border-color: #03a9f4;
}
.single-brand {
  margin-bottom: 1px;
}
.brand-single img {
  min-width: 100%;
}
.brand-carsoul .owl-item {
  padding-right: 15px;
  padding-left: 15px;
}

/* -------------------------
   10. Form Contact
----------------------------*/
.map-area-main {
  position: relative;
}
.help-contact-area {
  margin-top: -5.8%;
  width: 100%;
}
.form-group {
  margin-bottom: 0;
  padding-left: 170px;
  padding-right: 170px;
  padding-top: 35px;
}
.shadow {
  box-shadow: 2px 2px 15px 5px #ddd;
  position: relative;
}
.form-single input {
  background: transparent none repeat scroll 0 0;
  border: 1px solid #ddd;
  border-radius: 0;
  box-shadow: none;
  float: left;
  height: 40px;
  margin-bottom: 25px;
}
.form-textarea textarea {
  background: transparent none repeat scroll 0 0;
  border: 1px solid #ddd;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 25px;
}
.form-button button {
  background: #03a9f4 none repeat scroll 0 0;
  border: medium none;
  box-shadow: none;
  color: #fff;
  display: block;
  font-size: 12px;
  font-weight: 600;
  height: 40px;
  overflow: hidden;
  text-transform: uppercase;
  width: 100%;
}
.form-control:focus {
  border-color: #03a9f4;
  box-shadow: none;
  outline: 0 none;
}
.form-textarea {
  clear: both;
}
/* -------------------------
   11. Footer Bottom
----------------------------*/
.footer-area .social-rotate ul li a {
  border: 1px solid #fff;
  border-radius: 5px;
  color: #fff;
  display: block;
  font-size: 24px;
  height: 45px;
  line-height: 45px;
  margin-right: 40px;
  text-align: center;
  transform: rotate(-45deg);
  transition: all 0.3s ease 0s;
  width: 45px;
}
.footer-area .social-rotate ul li a:hover {
  background: #03a9f4 none repeat scroll 0 0;
  border-color: #03a9f4;
}
.fotter-copyright p {
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 0;
}
.fotter-copyright p a {
  color: #03a9f4;
}
/* -------------------------
   12. Home Two Css
----------------------------*/
/* -------------------------
   13. About Us
----------------------------*/
.aboutus-area {
}
.specialty-single.two {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #ddd;
  border-style: solid solid solid none;
  border-width: 1px 1px 1px 0;
  padding: 70px 60px;
}
.specialty-single.two .icon-titel i {
  margin: 0;
}
.specialty-single.two .spe-discribe > p {
  padding-right: 0;
}
.read-more-btn > a {
  background: #03a9f4 none repeat scroll 0 0;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 25px;
  text-transform: uppercase;
  transition: 0.3s;
}
.read-more-btn > a:hover,
.newsletter-form > button:hover,
.contact-button button:hover,
.form-button button:hover {
  background: #03a9f4;
}
/* -------------------------
   14. Our Successful
----------------------------*/
.successful-area {
  overflow: hidden;
  padding-left: 115px;
  padding-right: 100px;
}

.sucs-count {
  display: block;
  overflow: hidden;
}
.sucs-count h3 {
  color: #fff;
  font-family: raleway;
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}
.sucs-count h3 span {
  color: #03a9f4;
  display: block;
  font-family: lato;
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 15px;
}
.sucs-icon a {
  display: block;
  margin: 0 auto;
  overflow: hidden;
  transition: all 0.3s ease 0s;
}
.sucs-icon a i {
  color: #fff;
  font-size: 35px;
  line-height: 60px;
  padding: 0;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 100%;
}

/* -------------------------
   15. Our Service
----------------------------*/
.srvc-icon {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
}
.srvc-content > h6 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
  transition: 0.3s;
}
.srvc-content > p {
  margin: 0;
}
.ourservice-single a {
  border: 1px solid #ddd;
  display: block;
  height: 72px;
  line-height: 72px;
  margin: 0 auto;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 72px;
}
.ourservice-single a i {
  color: #666666;
  font-size: 35px;
  height: 100%;
  line-height: 75px;
  padding: 0;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 100%;
}
/* -------------------------
   16. Team See Our Portfolio
----------------------------*/
.team-our-portfolio h4 {
  color: #fff;
  font-size: 24px;
  margin: 0;
}
.teambutton-one {
  display: inline-block;
  margin-right: 30px;
  margin-top: 35px;
}
.teambutton-one > a {
  border: 1px solid #fff;
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  padding: 10px 20px;
  transition: 0.3s;
}
.teambutton-one > a:hover {
  background: #fff;
  color: #757575;
}
/* -------------------------
   17. Latest Shot/Portfolio Css
----------------------------*/
.latestshot-menu li {
  border: medium none;
  color: #383838;
  cursor: pointer;
  font-family: raleway;
  font-size: 14px;
  font-weight: 700;
  margin-left: 0;
  padding: 10px 25px;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
}
.latestshot-menu li.active,
.latestshot-menu li:hover {
  border-top: 2px solid #03a9f4;
  border-bottom: 2px solid #03a9f4;
}

/* Massonary 2 columns */

.portfolio-image > a,
.single-portfolio,
.effect-titel {
  display: block;
  overflow: hidden;
  position: relative;
  transition: 0.7s;
}

.effect-titel {
  background: rgba(3, 169, 244, 0.6) none repeat scroll 0 0;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.4s ease 0s;
  visibility: hidden;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 1;
 pointer-events: none;
}

.effect-titel > a {
  background: #03a9f4 none repeat scroll 0 0;
  border-radius: 5px;
  display: block;
  height: 45px;
  line-height: 45px;
  margin: 0 auto 22px;
  transform: rotate(45deg);
  width: 45px;
}
.effect-titel a i {
  color: #fff;
  font-size: 25px;
  padding: 10px;
  transform: rotate(138deg);
}
.effect-titel h2 {
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}
.effect-titel > p {
  color: #fff;
  font-family: raleway;
  font-size: 16px;
  font-weight: 400;
  margin: 0;
  text-transform: capitalize;
}
.image-effect:hover .effect-titel {
  opacity: 1;
  visibility: visible;
}
.hover-style:hover::before {
  opacity: 0.6;
}
.single-portfolio > a img {
  transition: 0.7s;
  transform: scale(1);
}

.portfolio-image a > img {
  transition: 0.7s;
  transform: scale(1);
}
.single-portfolio:hover > a img,
.image-effect:hover .portfolio-image a > img {
  transform: scale(1.1);
}
.hover-style::before {
  background: #03a9f4 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: all 0.3s ease-in-out 0s;
  width: 100%;
  z-index: 9;
}
.portfolio-title {
  left: 0px;
  opacity: 0;
  padding: 35px 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.5s ease 0s;
  z-index: 99;
}
.single-portfolio:hover .portfolio-title {
  opacity: 1;
  color: #383838;
}
.portfolio-title h3 a:hover {
  color: #383838;
}
.portfolio-title h3 {
  font-size: 19px;
  font-weight: 500;
  transition: all 0.4s ease-in-out 0s;
  transform: translatey(-20px);
  color: #fff;
  margin: 5px 0;
}
.single-portfolio:hover .portfolio-title h3 {
  transform: translatey(1px);
}
.single-portfolio:hover .portfolio-title span {
  transform: translatey(1px);
}
.portfolio-title span {
  color: #fff;
  display: inline-block;
  font-size: 15px;
  line-height: 16px;
  transition: all 0.4s ease-in-out 0s;
  transform: translatey(20px);
}

/* -------------------------
   18. Our Team
----------------------------*/
.team-single {
  display: block;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.team-details {
  background: rgba(3, 169, 244, 0.6) none repeat scroll 0 0;
  cursor: pointer;
  height: 100%;
  left: 0;
  margin: 0 auto;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.4s ease 0s;
  visibility: hidden;
  width: 100%;
}
.team-adrs h5 {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}
.team-adrs > p {
  color: #fff;
  margin: 0;
}
.team-socaladrs ul li {
  color: #fff;
}
.team-socaladrs ul li a {
  color: #fff;
  font-size: 16px;
  padding: 5px;
}
.team-socaladrs ul li a:hover {
  color: #03a9f4;
}
.team-single:hover .team-details {
  opacity: 1;
  visibility: visible;
}
.team-single > img {
  transform: scaleY(1);
  transition: all 0.7s ease 0s;
}
.team-single:hover > img {
  transform: scale(1.1);
}
/* -------------------------
   19. Skill Progress
----------------------------*/
.skill {
  padding-top: 16px;
}
.skill-area > h4 {
  color: #383838;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.skill-content {
  overflow: hidden;
  padding-top: 40px;
}
.skill .progress-bar {
  background-color: #03a9f4;
  box-shadow: none;
  position: relative;
}
.skill .progress .lead {
  color: #333;
  font-size: 14px;
  font-weight: 400;
  left: 0;
  position: absolute;
  text-transform: uppercase;
  top: -25px;
  width: 100%;
  z-index: 99;
}
.skill .progress .lead span {
  float: right;
  text-align: right;
}
.skill .progress {
  background-color: #eeeeee;
  border-radius: 0;
  box-shadow: none;
  height: 10px;
  margin-bottom: 62px;
  overflow: visible;
  position: relative;
}
.skill .progress-bar::after {
  background: #fff none repeat scroll 0 0;
  border: 3px solid #03a9f4;
  border-radius: 30px;
  content: "";
  height: 25px;
  position: absolute;
  right: -5px;
  top: -8px;
  width: 25px;
}
.skill .progress-bar > span {
  color: #767676;
  float: right;
  font-family: lato;
  font-size: 14px;
  margin-top: -25px;
  position: relative;
}
.skill .progress:last-child {
  margin-bottom: 8px;
}
.single-skill {
  float: left;
  width: 50%;
}
.skill-titel p {
  margin-bottom: 0;
  margin-top: -29%;
}
/* -------------------------
   20. our pricing table
----------------------------*/
.pricing-table-single.two {
  display: block;
  overflow: hidden;
  transition: 0.3s;
  background: #03a9f4;
}
.table-content {
  margin-bottom: 30px;
  margin-right: 30px;
  padding: 60px;
}
.pricing-table-single.two h6 {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  margin: 25px 0 25px 60px;
}
.table-content {
  background: #fff none repeat scroll 0 0;
  transition: 0.4s;
}
.price-category h1 {
  color: #03a9f4;
  font-family: lato;
  font-size: 48px;
  font-weight: 900;
  margin: 0;
}
.price-category h1 span {
  color: #999999;
  font-size: 12px;
  font-weight: 900;
  margin-left: 8px;
  text-transform: uppercase;
}
.price-list > ul {
  padding-bottom: 45px;
  padding-top: 50px;
}
.price-list li:first-child {
  padding-top: 0;
}
.price-list > ul li {
  display: block;
  padding: 12px 0;
}
.price-list > ul li a {
  color: #606060;
  cursor: unset;
  font-family: lato;
  font-size: 14px;
  font-weight: 400;
}
.price-list > ul li a i {
  margin-right: 10px;
}
.two .order-button > a {
  border: 1px solid #ddd;
  background: #fff;
}
.pricing-table-single.two:hover {
  background: #fff;
  box-shadow: none;
}
.pricing-table-single.two:hover .table-content {
  box-shadow: 2px 2px 4px 2px #ddd;
}
.pricing-table-single.two:hover h6 {
  color: #03a9f4;
}
.pricing-table-single.two:hover .table-content {
  background: #03a9f4;
  color: #fff;
  border-color: #03a9f4;
}
.pricing-table-single.two:hover .price-category h1,
.pricing-table-single.two:hover .price-category h1 span,
.pricing-table-single.two:hover .price-list > ul li a {
  color: #fff;
}
.two .order-button > a:hover {
  background: #03a9f4;
  color: #fff;
  border-color: #fff;
}
/* -------------------------
   21. Blog Style
----------------------------*/
.style-two .blog-content {
  border: none;
}
.style-two > h6 {
  margin-bottom: 25px;
  margin-left: 25px;
  margin-top: 25px;
}
.post-content > p {
  display: block;
  margin: 20px 0;
  overflow: hidden;
}
.post-btn a {
  color: #03a9f4;
  font-size: 14px;
}
.post-btn a:hover {
  color: #999;
}
.post-btn a i {
  margin-left: 5px;
}
/* -------------------------
   22. Our Client
----------------------------*/
.client-content {
  border-radius: 5px;
  display: block;
  margin-bottom: 60px;
  overflow: unset;
  padding: 58px 100px 100px;
}
.client-content span i {
  font-size: 50px;
  margin-bottom: 17px;
}
.client-content > p {
  margin-bottom: 26px;
  padding: 0 7%;
}
.client-adrs > h6 {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}
.client-adrs > p {
  color: #fff;
}
.client-img {
  bottom: 0;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  text-align: center;
}
.our-client .owl-theme .owl-controls {
  margin-top: 55px;
  text-align: center;
}
.our-client .owl-theme .owl-controls .owl-page span {
  background: #869791 none repeat scroll 0 0;
  border-radius: 0;
  display: block;
  height: 3px;
  margin: 5px 7px;
  opacity: 0.5;
  width: 40px;
  margin-bottom: 0;
}
.our-client .owl-theme .owl-controls .owl-page.active span,
.our-client .owl-theme .owl-controls.clickable .owl-page:hover span {
  background: #03a9f4 none repeat scroll 0 0;
  opacity: 1;
}
.our-client-single {
  padding-left: 15px;
  padding-right: 15px;
}
/* -------------------------
   23. Footer Style Two
----------------------------*/
.footer-menu h6 {
  color: #fff;
  display: block;
  font-size: 18px;
  margin-bottom: 18px;
  overflow: hidden;
}
.contact-details ul li {
  margin-bottom: 20px;
}
.contact-details ul li:last-child,
.recent-post ul li:last-child,
.quick-link ul li,
.project-information ul li:last-child {
  margin: 0;
}
.contact-details ul li a {
  border: 1px solid #fff;
  color: #fff;
  display: inline-block;
  float: left;
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  margin-right: 20px;
  margin-top: 0px;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 30px;
}
.contact-details ul li:hover a {
  background: #fff none repeat scroll 0 0;
  color: #383838;
}
.contact-details p {
  color: #cccbcb;
  display: block;
  margin: 0;
  overflow: hidden;
}
.recent-post img {
  float: left;
  margin-right: 15px;
}
.recent-post ul li {
  margin-bottom: 30px;
  width: 100%;
}
.recent-post ul li h5 {
  color: #cccccc;
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  margin: 0;
  overflow: hidden;
}
.recent-post ul li h5 a,
.footer-copyright > p a {
  color: #03a9f4;
}
.recent-post ul li span {
  color: #cccccc;
  font-family: lato;
  font-size: 14px;
}
.quick-link ul li {
  display: block;
  padding-bottom: 10px;
}
.quick-link ul li a {
  color: #cccccc;
  display: block;
  font-family: lato;
  padding-left: 20px;
  position: relative;
}
.quick-link ul li:hover a {
  color: #03a9f4;
}
.quick-link ul li a::after {
  background: #cccccc none repeat scroll 0 0;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  top: 8px;
  width: 5px;
}
.quick-link ul li:hover a::after {
  color: #03a9f4;
  background: #03a9f4;
}
/* News Letter Form*/
.newsletter > p {
  color: #cccccc;
  font-family: lato;
  margin-bottom: 28px;
}
.newsletter-form input {
  background: #fff none repeat scroll 0 0;
  border: medium none;
  border-radius: 0px;
  box-shadow: none;
  color: #999999;
  font-family: lato;
  font-size: 12px;
  height: 40px;
  padding-left: 20px;
  width: 100%;
  margin-bottom: 34px;
}
.newsletter-form > button {
  background: #1e8bc3 none repeat scroll 0 0;
  border: medium none;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 15px 30px;
}
.footer-copyright > p {
  font-family: lato;
  font-size: 13px;
  margin: 0;
}
/*Mail Chimp */
.mailchimp-alerts {
  padding: 10px 0;
}
.mailchimp-submitting {
  color: #31708f;
}
.mailchimp-success {
  color: #3c763d;
}
.mailchimp-error {
  color: #a94442;
}
/* -------------------------
   24. About Us Page
----------------------------*/
.breadcrumb-list ul li {
  font-weight: 700;
}
.breadcrumb-list ul li.active {
  color: #03a9f4;
}
.breadcrumb-list .divider {
  padding: 0 5px;
}
.video-content.two > h6 {
  font-size: 20px;
}
.video-content.two > h5 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 20px;
}
.mission-vission .video-content h6 {
  font-size: 24px;
}
.about-menu ul li {
  display: block;
  overflow: hidden;
  padding-bottom: 5px;
  padding-left: 15px;
  position: relative;
}
.about-menu ul li::after {
  border: 1px solid #999999;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  top: 8px;
  width: 5px;
}
.choose-us .icon-titel h6 {
  padding-left: 4%;
}
.choose-us .spe-discribe > p {
  padding-right: 32%;
}

.two .help-contact-area {
  margin-top: -18.8%;
  width: 100%;
}
.two .section-title h1 {
  text-transform: capitalize;
  font-size: 24px;
}
.two .form-group {
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 35px;
}
.contact-button button {
  background: #03a9f4 none repeat scroll 0 0;
  border: medium none;
  border-radius: 0px;
  box-shadow: none;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  left: 0;
  margin: 0 auto;
  padding: 12px 40px;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  display: block;
}
/* -------------------------
   25. Contact Us Page
----------------------------*/
.cntct-right-adrs .section-title h4::before,
.comments-box .section-title h4::before {
  left: 0;
  right: 0;
  margin: 0;
}
.cntct-right-adrs .section-title h4::after,
.comments-box .section-title h4::after {
  left: 15px;
  right: 0;
  margin: 0;
}
.adrs-details ul li {
  margin-bottom: 30px;
  width: 100%;
}
.adrs-details ul li a {
  border: 1px solid #ddd;
  color: #666666;
  display: inline-block;
  float: left;
  font-size: 20px;
  height: 38px;
  line-height: 38px;
  margin-right: 20px;
  margin-top: 10px;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 38px;
}
.adrs-details ul li:hover a {
  background: #03a9f4 none repeat scroll 0 0;
  color: #fff;
  border-color: #03a9f4;
}
.adrs-details p {
  color: #606060;
  display: block;
  line-height: 24px;
  margin: 0;
  overflow: hidden;
  padding-right: 55%;
}
p.form-messege {
  font-size: 20px;
  margin-top: 15px;
  margin-bottom: 0;
  margin: 0;
}
p.success {
  color: green;
}
p.error {
  color: red;
}
/* -------------------------
   26. Portfolio Details Page
----------------------------*/
.portfolio-titel h4 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}
.project-details {
  float: left;
  padding: 100px 70px 100px 100px;
  width: 50%;
}
.project-details > h5 {
  color: #fff;
  font-weight: 700;
  margin: 0 0 20px;
}
.project-information ul li {
  display: block;
  font-family: lato;
  font-weight: 400;
  margin-bottom: 24.5px;
}
.project-information ul li span {
  font-size: 14px;
  font-weight: 600;
}

.nav-tabs {
  border-bottom: 0px;
}
.develope-menu button {
  background: #f1f1f1;
  border-radius: 5px;
  color: #383838;
  display: block;
  font-family: Montserrat;
  font-size: 18px;
  margin-right: 5px;
  padding: 10px 20px;
  border: 0px;
}
.develope-menu button.active,
.develope-menu button:hover {
  background: #03a9f4;
  color: #fff;
}
.project-develope {
  padding: 100px;
}
.project-area {
  display: block;
  overflow: hidden;
  width: 100%;
}
.tab-dicrib {
  float: left;
  padding-right: 30px;
  width: 50%;
}
/* -------------------------
   27. Pagination Count css
----------------------------*/
.pagination-count ul li a {
  border: 1px solid #ddd;
  color: #666666;
  display: block;
  font-family: lato;
  font-size: 13px;
  font-weight: 400;
  height: 30px;
  line-height: 28px;
  margin-right: 10px;
  text-align: center;
  width: 30px;
}
.pagination-count ul li {
  padding-right: 5px;
}
.pagination-count ul li:last-child {
  padding: 0;
}
.pagination-count ul li a i {
  font-size: 16px;
  font-weight: bold;
}
.pagination-count ul li a:hover {
  background: #03a9f4;
  color: #fff;
  border-color: #03a9f4;
}
/* -------------------------
   28. Blog Details Page
----------------------------*/
.blogdetails-titel {
  height: 90px;
  padding-left: 100px;
}
.blogdetails-titel > span {
  background: #03a9f4 none repeat scroll 0 0;
  color: #fff;
  float: left;
  font-family: lato;
  font-size: 18px;
  font-weight: 900;
  height: 100%;
  line-height: 90px;
  margin-right: 30px;
  text-align: center;
  text-transform: uppercase;
  width: 200px;
}
.blogdetails-titel > h4 {
  color: #383838;
  font-size: 24px;
  font-weight: 700;
  line-height: 90px;
  text-transform: uppercase;
  margin: 0;
}
.blog-discribe-area {
  padding: 0 100px 100px;
}
.dicrobe-content {
  box-shadow: 2px 2px 8px 8px #ddd;
  padding: 25px 70px 100px;
}
.dicrobe-content blockquote {
  background: #fbfbfb none repeat scroll 0 0;
  border-left: 0 none;
  font-size: 17.5px;
  margin: 37px 0;
  padding: 35px 40px;
}
.dicrobe-content blockquote p {
  color: #666666;
  font-family: raleway;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
}
.dicrobe-content blockquote p i {
  color: #03a9f4;
  padding: 0 10px;
}
/*Blog Social*/
.blog-social {
  background: #fbfbfb none repeat scroll 0 0;
  height: 50px;
  margin-bottom: 60px;
  margin-top: 60px;
  padding: 0 20px;
}
.blog-social > p {
  display: inline-block;
  float: left;
  line-height: 50px;
  margin: 0;
  text-align: left;
}
.blog-social > ul {
  line-height: 50px;
  text-align: right;
}
.blog-social ul li a {
  color: #666666;
  font-size: 10px;
  padding: 16px 5px;
}
.blog-social ul li a:hover {
  color: #03a9f4;
}
.comments-box.two .section-title h4,
.comments-box.three .section-title h4 {
  font-family: lato;
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
}
/* Comment Author */
.comment-pic {
  display: inline-block;
  float: left;
  margin-right: 30px;
  overflow: hidden;
}
.comment-author {
  display: block;
  overflow: hidden;
}
.comment-author h3 {
  color: #383838;
  font-family: raleway;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 2px;
  text-transform: uppercase;
}
.comment-author > p {
  color: #999999;
  float: left;
  font-size: 12px;
  margin: 0 0 8px;
}
.comment-author > a {
  background: #03a9f4 none repeat scroll 0 0;
  border-radius: 20px;
  color: #fff;
  float: right;
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  margin-top: -12px;
  text-align: center;
  width: 30px;
}
.comment-dis {
  display: block;
  margin: 0 0 10px;
  overflow: hidden;
}
.three .form-group {
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 8px;
}
/* -------------------------
   29. 404 Page
----------------------------*/
.four-zero-content h2 {
  color: #333333;
  font-size: 70px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0;
}
.four-zero-content.text-center > p {
  padding: 50px 0;
  margin: 0;
  font-size: 18px;
}
.four-zero-content h2 span {
  color: #03a9f4;
}
.four-zero-content a {
  background: #333333 none repeat scroll 0 0;
  color: #fff;
  display: inline-block;
  font-weight: 500;
  padding: 12px 30px;
  text-transform: uppercase;
  transition: all 0.4s ease 0s;
}
.four-zero-content a:hover {
  background: #03a9f4 none repeat scroll 0 0;
  color: #fff;
}
/* -------------------------
   30. ScrollUp
----------------------------*/
#scrollUp {
  background: #03a9f4 none repeat scroll 0 0;
  bottom: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  color: #fff;
  font-size: 28px;
  height: 40px;
  line-height: 35px;
  position: fixed;
  right: 15px;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 40px;
  z-index: 200;
}
#scrollUp:hover {
  background: #383838;
}
/* -------------------------
   31. Style Customizer css
----------------------------*/
.boxed-layout.wrapper {
  background-color: #fff;
  box-shadow: -3px 0 50px -2px rgba(0, 0, 0, 0.14);
  margin: auto;
  position: relative;
  max-width: 1240px;
  width: 100%;
}
.boxed-layout .sticky,
.box-layout .sticky {
  left: auto;
  margin: auto;
  width: 1240px;
}
/*Background Patterns*/
.pattern-1 {
  background-image: url("https://template.hasthemes.com/usual/usual/images/customizer/pattern/1.png");
}
.pattern-2 {
  background-image: url("https://template.hasthemes.com/usual/usual/images/customizer/pattern/2.png");
}
.pattern-3 {
  background-image: url("https://template.hasthemes.com/usual/usual/images/customizer/pattern/3.png");
}
.pattern-4 {
  background-image: url("https://template.hasthemes.com/usual/usual/images/customizer/pattern/4.png");
}
.pattern-5 {
  background-image: url("https://template.hasthemes.com/usual/usual/images/customizer/pattern/5.png");
}
.pattern-6 {
  background-image: url("https://template.hasthemes.com/usual/usual/images/customizer/pattern/6.png");
}
.pattern-7 {
  background-image: url("https://template.hasthemes.com/usual/usual/images/customizer/pattern/7.png");
}
.pattern-8 {
  background-image: url("https://template.hasthemes.com/usual/usual/images/customizer/pattern/8.png");
}
/*Background Images*/
.main-bg-1,
.main-bg-2,
.main-bg-3,
.main-bg-4,
.main-bg-5,
.main-bg-6,
.main-bg-7,
.main-bg-8 {
  background-image: url("https://template.hasthemes.com/usual/usual/images/customizer/bodybg/01.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  position: relative;
}
.main-bg-2 {
  background-image: url("https://template.hasthemes.com/usual/usual/images/customizer/bodybg/02.jpg");
}
.main-bg-3 {
  background-image: url("https://template.hasthemes.com/usual/usual/images/customizer/bodybg/03.jpg");
}
.main-bg-4 {
  background-image: url("https://template.hasthemes.com/usual/usual/images/customizer/bodybg/04.jpg");
}
.main-bg-5 {
  background-image: url("https://template.hasthemes.com/usual/usual/images/customizer/bodybg/05.jpg");
}
.main-bg-6 {
  background-image: url("https://template.hasthemes.com/usual/usual/images/customizer/bodybg/06.jpg");
}
.main-bg-7 {
  background-image: url("https://template.hasthemes.com/usual/usual/images/customizer/bodybg/07.jpg");
}
.main-bg-8 {
  background-image: url("https://template.hasthemes.com/usual/usual/images/customizer/bodybg/08.jpg");
}
.intro-text {
  color: #fff;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-size: 36px;
}
.btn-primary-corp-big {
  background-color: #1e8bc3;
  border: medium none;
  border-radius: 0;
  color: #fff !important;
  font-weight: 600;
  height: 48px;
  line-height: 48px;
  padding: 0 25px;
  text-transform: uppercase;
  transition: 0.4s;
}
.btn-primary-corp-big:hover,
.btn-primary-corp-big:focus,
.btn-primary-corp-big:active {
  background-color: #3498db;
  color: #fff;
}
.btn-primary-corp-big i {
  margin-right: 5px;
}
.lead {
  color: #fff;
  font-size: 21px;
  margin: 0;
  margin-bottom: 30px;
}

a {
  text-decoration: none;
}

@media (min-width: 1200px) {
  .visible-lg-block {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-inline {
    display: inline !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-inline-block {
    display: inline-block !important;
  }
}
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}

.main-menu {
  position: relative;
}

.footer-area .row {
  margin-bottom: -30px;
}

.mb-n30 {
  margin-bottom: -30px;
}