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

    Template Name: Erctor Htlml template
    Template URI: http://hastech.company/
    Description: This is html5 template
    Author: Hastech
    Author URI: http://hastech.company/
    Version: 1.0

-----------------------------------------------------------------------------------
    
    CSS INDEX
    ===================
	
    1. Template default css (css/shortcode/default.css)
    2. Header css (css/shortcode/header.css)
    3. Slider css (css/shortcode/slider.css)
    4. About area css
    5. Services area css
    6. Project area css
    7. Funfact area css
    8. Team area css
    9. Contact area css
    10. Single blog css
    11. Testimonial css
    12. Brand css
    13. Contact addresses css
    14. Footer css
    15. Breadcrumbs css
    16. Contact page css
    17. Blog details css
    18. 404 page css
    19. Scrollup css
    
    
-----------------------------------------------------------------------------------*/
/*--
  Google fonts
--*/
@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700");
@import url("https://fonts.googleapis.com/css2?family=Old+Standard+TT&display=swap");

img {
  max-width: 100%;
}

/*-----------------------
    4. Home Slider area css
-------------------------*/
.middle-text {
  margin-top: 42vh;
}

/* .slogan > a {
    font-size: 16px;
    color: #00a9da;
} */
.slogan > a > button {
  background: transparent;
  color: black;
  font-size: 16px;
  font-weight: bold;
  padding: 15px 50px;
  border: 2px solid black;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.7s ease, color 0.7s ease;
}

.slogan > a > button:hover {
  border: 2px solid rgb(35, 136, 202);
  background: rgb(35, 136, 202);
  color: white;
  transition: background .5s ease, color 0.5s ease, border .5s ease;
}

.action-button-home > a > button {
  background: transparent;
  color: black;
  font-size: 14px;
  font-weight: bold;
  padding: 12px 40px;
  border: 2px solid black;
  border-radius: 40px;
  cursor: pointer;
  transition: background 0.5s ease, color 0.5s ease;
}

.action-button-home > a > button:hover {
  background: black;
  color: white;
}

/*-----------------------
    4. About area css
-------------------------*/
.about-desc > h2 {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 17px;
  text-transform: uppercase;
}

.about-desc {
  margin-top: 28px;
}

.about-desc > h5 {
  font-weight: 400;
  text-transform: uppercase;
}

.about-content {
  display: block;
  padding-top: 10px;
}

.about-content p {
  font-size: 16px;
}

.about-content p.text1 {
  margin-bottom: 13px;
}

.about-content p.text2 {
  margin-bottom: 0;
}

.about-content {
  border-bottom: 2px solid #ffe200;
  margin-bottom: 30px;
  padding-bottom: 24px;
}

/*------------------------
    5. Services area css
-----------------------------*/

.page-top-margin {
    margin-top: 100px;
}


.services-section .section-title h2 {
  font-family: "Old Standard TT", serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 22px;
  margin-bottom: 25px;
  text-transform: none;
}

.services-section .section-title ul li {
  font-family: "Old Standard TT", serif;
  list-style: disc;
  list-style-position: inside;
  padding-left: 10px;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
}

.services-section .section-title p {
  font-family: "Old Standard TT", serif;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 0;
  text-align: center;
}

.services-section .section-title {
  margin-bottom: 45px;
}

.services-section .service-icon {
  margin-bottom: 20px;
}

.services-section .service-icon > i {
  font-size: 60px;
  color: #ffe200;
}

.services-section .services-img,
.services-section .services-title {
  display: inline-block;
}

.services-section .services-title > h5 {
  font-family: "Old Standard TT", serif;
  color: #252525;
  font-weight: bold;
  margin-bottom: 10px;
  text-transform: none;
  line-height: 1.5em;
}

.services-section .services-title {
  /*margin-left: 15px;*/
}

.services-section .services-text > p {
  font-size: 16px;
  margin-bottom: 0;
}

.services-section .services-text {
  padding-top: 17px;
}

.services-section .single-services {
  display: block;
  float: left;
  margin-bottom: 38px;
  min-height: 300px;
  padding: 30px 30px 22px;
  border: 1px solid transparent;
  transition-duration: 0.5s;
}

.services-section .row .col-md-4 .single-services:last-child {
  margin-bottom: 0;
}

/* .single-services:hover {
  border-bottom: 1px solid #ffe200;
  border-right: 1px solid #ffe200;
  box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.1);
} */

.services-section .services-section-img {
  margin-top: 31px;
}

.services-section {
  margin-bottom: 30px;
}
/* section 2 */
.services-section2 h3 {
  font-family: "Old Standard TT", serif;
  font-size: 20px;
  font-weight: 600;
  color: white;
  padding-bottom: 40px;
  letter-spacing: 3px;
}
.services-section2 .single-services {
  padding: 10px;
  height: 350px;
  display: flex;
  flex-direction: column;
}

.services-section2 .single-services .services-text {
  margin-top: 10px;
}
.services-section2 .services-head h5 {
  text-transform: none;
  font-family: "Old Standard TT", serif;
  font-size: 22px;
  font-weight: 400;
  color: white;
  letter-spacing: 0.1em;
}
.services-section2 .services-text p {
  font-family: "Old Standard TT", serif;
  font-size: 16px;
  font-weight: 400;
  color: white;
  text-align: center;
}
.services-section2 .services-head img {
  height: 180px;
  width: 100%;
  object-fit: cover;
}

.action-button-services > a > button {
  background: transparent;
  color: white;
  font-size: 14px;
  font-weight: bold;
  padding: 12px 40px;
  border: 2px solid white;
  border-radius: 40px;
  cursor: pointer;
  transition: background 0.5s ease, color 0.5s ease;
}

.action-button-services > a > button:hover {
  background: white;
  color: black;
}

/* section-3 */
.services-section3 h2 {
  font-family: "Old Standard TT", serif;
  font-weight: 600;
  color: #252525;
  padding-bottom: 40px;
  letter-spacing: 3px;
  text-align: center;
}
.services-section3 .section-title img {
  height: 250px;
  width: 100%;
  object-fit: cover;
}
.services-section3 .section-title h3 {
  font-family: "Old Standard TT", serif;
  font-weight: 400;
  color: #252525;
  padding-top: 20px;
  padding-bottom: 10px;
  letter-spacing: 3px;
  text-align: left;
}
.services-section3 .section-title p {
  font-family: "Old Standard TT", serif;
  font-weight: 400;
  font-size: 18px;
  color: #252525;
  padding-bottom: 20px;
  text-align: justify;
  hyphens: auto;
  
}
/* section 4 */
.services-section4 .s3-area-coverage {
  font-family: "Old Standard TT", serif;
  font-weight: 400;
  color: #252525;
  /* padding-top: 50px; */
  padding-bottom: 0;
  letter-spacing: 3px;
  text-align: center;
}
.services-section4 .s3-area-coverage-p {
  font-family: "Old Standard TT", serif;
  font-weight: 400;
  font-size: 16px;
  color: #252525;
  padding-bottom: 80px;
  text-align: center;
}
.services-section4 .row img {
  width: 100%;
  height: 450px;
  object-fit: cover;
}
.services-section4 .row ul li {
  list-style: disc;
  list-style-position: inside;
  font-family: "Old Standard TT", serif;
  font-weight: 400;
  font-size: 16px;
}
/* section 5 */
.services-section5 .section-title {
  padding: 30px;
}
.services-section5 .section-title h3 {
  font-family: "Old Standard TT", serif;
  font-weight: 400;
  color: #252525;
  padding-top: 20px;
  padding-bottom: 10px;
  letter-spacing: 3px;
  text-align: center;
}
.services-section5 .section-title p {
  font-family: "Old Standard TT", serif;
  font-weight: 400;
  font-size: 18px;
  color: #252525;
  padding-bottom: 20px;
  text-align: center;
}
/*--------------------------
    6. Project area css
---------------------------*/
.project-menu-filter > li,
.our-project-tab-menu ul li {
  color: #252525;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  height: 40px;
  line-height: 40px;
  padding: 0 25px;
  text-transform: capitalize;
  transition: all 0.3s ease 0s;
}

.our-project-tab-menu ul li.active a,
.our-project-tab-menu ul li:hover a {
  color: #ffe200;
}

.our-project-tab-menu ul li a {
  color: #252525;
}

.our-project-menu {
  margin-bottom: 50px;
}

.our-project .section-title {
  margin-bottom: 32px;
}

.project-menu-filter > li.active,
.project-menu-filter > li:hover,
.our-project-tab-menu ul li:hover,
.our-project-tab-menu ul li.active {
  background: #444444 none repeat scroll 0 0;
  color: #ffe200;
}

.single-project.width {
  width: 50%;
}

.single-project {
  padding: 15px;
  width: 25%;
}

.project-img > img {
  width: 100%;
}

.project-img {
  position: relative;
  border: 2px solid transparent;
  transition-duration: 0.5s;
}

.project-img::before {
  background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
  content: "";
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: all 0.3s ease 0s;
  width: 100%;
}

.project-view {
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

roject-img::before {
  background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.project-view > a {
  color: #ffe200;
  display: inline-block;
  font-size: 60px;
  transform: scale(0);
}

.single-project:hover .project-img::before {
  opacity: 1;
}

.single-project:hover .project-view > a {
  transform: scale(1);
}

.blog-thumbnail img {
  width: 100%;
}

.project-img:hover {
  border-bottom: 2px solid #ffe200;
  border-right: 2px solid #ffe200;
  box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.1);
}

/*-------------------------
    7. Funfact area css
------------------------------*/
.fun-fact {
  background: rgba(0, 0, 0, 0) url("../img/fun/bg.png") no-repeat scroll center
    center / cover;
}

.fun-fact:first-child {
  /*padding: 80px 0;*/
}

.fun-desc > h3 {
  color: #ffffff;
  font-size: 30px;
  font-weight: 500;
  line-height: 23px;
}

.fun-desc > p {
  color: #ffffff;
  font-size: 18px;
  line-height: 20px;
  margin-bottom: 0;
  text-transform: uppercase;
}

selectorSavingError {
  display: block;
  margin-bottom: 18px;
}

.fun-icon {
  margin-bottom: 17px;
}

.single-fun-fact.middle1 {
  margin-right: 56px;
}

.single-fun-fact.middle2 {
  margin-left: 56px;
}

/*----------------------
    8. Team area css
----------------------------*/
.single-team {
  overflow: hidden;
  position: relative;
}

.team-hover {
  background: #ffe200 none repeat scroll 0 0;
  bottom: 0;
  padding: 25px 0;
  position: absolute;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition-duration: 0.3s;
}

.member-title > h5 {
  color: #252525;
  font-weight: 400;
  margin-bottom: 2px;
  text-transform: uppercase;
}

.member-title > p {
  font-size: 16px;
  margin-bottom: 0;
  text-transform: capitalize;
}

.member-social > a {
  color: #444444;
  font-size: 18px;
  margin-left: 30px;
}

.member-social > a:hover {
  color: #fff;
}

.member-social > a:first-child {
  margin-left: 0;
}

.member-social {
  margin-top: 18px;
}

.single-team:hover .team-hover {
  opacity: 1;
  transform: translateY(0px);
  visibility: visible;
}

.team-img > img {
  width: 100%;
}

/*----------------
    9. Contact area css 
-------------------*/
.contact-us {
  background: url(../img/contact.jpg) no-repeat scroll center center / cover;
  padding: 180px 0;
}

.contact-us-inner {
  text-align: right;
}

.contact-us-inner > a {
  border: 1px solid #ffe200;
  color: #ffffff;
  display: inline-block;
  font-size: 16px;
  height: 45px;
  line-height: 45px;
  padding: 0 25px;
  text-transform: uppercase;
}

.contact-us-inner > a:hover {
  background: #ffe200 none repeat scroll 0 0;
}

/*-----------------------
  10. Single blog css
----------------------------*/
.blog-thumbnail {
  position: relative;
}

.thumbnail-view {
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.thumbnail-view > a {
  color: #ffe200;
  display: block;
  font-size: 36px;
  transform: scale(0);
}

.blog-thumbnail::before {
  background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
  content: "";
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: all 0.3s ease 0s;
  width: 100%;
}

.single-blog:hover .blog-thumbnail::before {
  opacity: 1;
}

.single-blog:hover .thumbnail-view > a {
  transform: scale(1);
}

.single-blog {
  text-align: center;
}

.post-date > p {
  color: #909090;
  margin-bottom: 8px;
}

.post-date > p i {
  margin-right: 5px;
}

.post-title > h5 {
  font-weight: 500;
  margin: 0;
  text-transform: uppercase;
}

.blog-action {
  padding: 25px 0;
  transition: all 0.3s ease 0s;
}

.single-blog:hover .blog-action {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/*------------------------
    11. Testimonial css
-----------------------------*/
.testimonail {
  background: rgba(0, 0, 0, 0) url("../img/test/test-bg.png") no-repeat scroll
    center center / cover;
  padding: 110px 0 180px;
  position: relative;
}

.testmonial-title {
  margin-bottom: 50px;
  position: relative;
  z-index: 99;
}

.testmonial-title {
  position: relative;
  z-index: 99;
}

.testmonial-title h3 {
  color: #ffffff;
  font-size: 30px;
  font-weight: bold;
  line-height: 22px;
  margin: 0;
  text-transform: uppercase;
}

.testimonial-list {
  position: relative;
  z-index: 99;
}

.testimonial-img {
  display: inline-block;
  float: left;
  width: 17%;
}

.testimonial-desc {
  float: left;
  padding-left: 50px;
  text-align: left;
  width: 100%;
}

.test-text > p {
  color: #ffffff;
  font-size: 16px;
}

.testimonial-img > img {
  width: 100%;
}

.test-title {
  border-bottom: 1px solid #ffe200;
  padding-top: 11px;
}

.test-title > h2 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 0;
  text-transform: uppercase;
}

.test-title > p {
  color: #cccccc;
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 10px;
}

.slick-dots > li {
  display: inline-block;
  margin-left: 15px;
}

.slick-dots > li:first-child {
  margin-left: 0;
}

.slick-dots > li a {
  color: #ffffff;
  font-size: 18px;
}

.testimonail .slick-dots {
  margin-top: 34px;
  position: absolute;
  width: 100%;
}

.slick-dots > li.slick-active a {
  color: #ffe200;
  font-size: 30px;
}

/*-----------------------
    12. Brand css
-------------------------*/
.single-brand a {
  border: 1px solid #dcdcdb;
  border-radius: 10px;
  display: inline-block;
  margin: 0 auto;
  padding: 30px 15px;
}

.brand-list {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  padding: 8px 50px;
}

.single-brand {
  padding: 28px;
}

.single-brand a:hover {
  border-color: #ffe200;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

/*-------------------------------
    13. Contact addresses css
---------------------------------*/
.single-contact-address {
  background: #f1f1f1 none repeat scroll 0 0;
  height: 120px;
  text-align: center;
}

.single-contact-icon {
  display: inline-block;
  position: relative;
  padding-top: 39px;
}

.single-contact-icon-one {
  top: -8px;
  padding-top: 51px;
}

.single-contact-desc {
  display: inline-block;
  margin-left: 8px;
}

.single-contact-icon i {
  border: 1px solid #909090;
  color: #909090;
  display: inline-block;
  font-size: 18px;
  height: 32px;
  line-height: 32px;
  width: 32px;
}

.single-contact-desc > p {
  color: #333333;
  font-size: 1em;
  margin: 0;
  text-align: left;
}

.contact-address {
  margin-bottom: -60px;
  position: relative;
  z-index: 99;
}

/* business hours */
.business-hours-parent {
  display: flex;
  justify-content: center;
}
.business-hours {
  width: 100%;
  max-width: 210px;
  background-color: #fff;
  overflow: hidden;
}

.toggle-header {
  cursor: pointer;
  padding: 15px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.arrow-icon {
  transition: transform 0.3s ease;
}

.arrow-rotate {
  transform: rotate(180deg);
}

.schedule-list {
  display: none;
  padding: 10px 15px;
}

.schedule-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}

.today {
  font-weight: bold;
  color: #000;
}
/*---------------------
    14. Footer css
-------------------------*/
/* .footer-area {
  background: url(../img/footer.jpg) no-repeat scroll center center / cover;
  position: relative;
} */
.footer-area {
  background: #333 no-repeat scroll center center / cover;
  position: relative;
}

.single-footer.navigation {
  margin-left: 60px;
  overflow: hidden;
}

.footer-top {
  padding: 120px 0 60px;
  position: relative;
  z-index: 9;
}

.footer-bottom {
  background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
  height: 50px;
  position: relative;
  z-index: 9;
}

.single-footer-title > h5 {
  color: #eeeeee;
  font-weight: 500;
  line-height: 16px;
  margin: 0;
  text-transform: uppercase;
}

.single-footer-title {
  margin-bottom: 25px;
}

.about .single-footer-desc {
  padding-top: 5px;
}

.single-footer-logo {
  margin-bottom: 25px;
  
}

.single-footer-logo img {
    height: 100px;
}

.single-footer-content > p {
  color: #eeeeee;
  font-size: 15px;
}

.single-footer-social > a {
  border: 1px solid;
  color: #bdbdbd;
  display: inline-block;
  height: 32px;
  line-height: 30px;
  margin-left: 10px;
  text-align: center;
  width: 32px;
}

.single-footer-social > a:first-child {
  margin: 0;
}

.single-footer-social > a:hover {
  background: #ffe200 none repeat scroll 0 0;
  border-color: #ffe200;
  color: #ffffff;
}

.single-footer-nav li {
  float: left;
  margin-bottom: 28px;
  width: 50%;
}

.single-footer-nav a {
  color: #eeeeee;
  font-weight: bold;
  text-transform: capitalize;
}

.single-footer-nav a:hover {
  color: #ffe200;
}

.single-foote-newsletter {
  padding-top: 25px;
}

.newsletter-form input {
  background: #555555 none repeat scroll 0 0;
  border-color: #555555;
  color: #ffffff;
  font-size: 16px;
  padding-left: 20px;
}

.newsletter-form button {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #ffe200;
  color: #ffffff;
  font-size: 16px;
  height: 45px;
  margin-top: 15px;
  padding: 0 20px;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
}

.newsletter-form button:hover {
  background: #ffe200 none repeat scroll 0 0;
}

.copyright p {
  color: #f7f7f7;
  line-height: 50px;
  margin: 0;
  text-transform: capitalize;
}

.copyright p a {
  color: #ffe200;
  font-weight: bold;
}

.copyright p a:hover {
  text-decoration: underline;
}

.form-messege.error {
  color: red;
  font-style: italic;
  text-transform: capitalize;
}

.form-messege.success {
  color: #6bc513;
  font-style: italic;
  text-transform: uppercase;
}

/*------------------------
    15. Breadcrumbs css
---------------------------*/
.breadcrumbs {
  background: url(../img/new-brdcm.jpg) no-repeat scroll center center / cover;
  padding: 100px 0 25px;
  position: relative;
}

.breadcrumbs.overlay::before {
  background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
}

.breadcrumbs-inner {
  position: relative;
  z-index: 9;
}

.breadcrumbs-title > h2 {
  color: #ffffff;
  font-size: 36px;
  font-weight: 400;
  line-height: 27px;
  margin: 0;
  text-transform: none;
}

.breadcrumbs-menu li {
  color: #ffffff;
  display: inline-block;
  font-size: 18px;
  font-weight: 400;
  position: relative;
  text-transform: none;
  z-index: 9;
}

.breadcrumbs-menu li a {
  color: #ffffff;
}

.breadcrumbs-menu li a:hover {
  color: #ffe200;
}

.breadcrumbs-title {
  position: relative;
  z-index: 9;
}

.breadcrumbs-title > h2 {
  font-weight: bold;
  padding-top: 60px;
}

.breadcrumbs-menu {
  padding-top: 60px;
}

/*-----
    Servics pages
------*/
.services-video {
  position: relative;
}

.video-view {
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  z-index: 9;
}

.video-view > a {
  color: #ffe200;
  font-size: 48px;
}

/*-------------
    Gallery css here
--------------*/
.gallery-part {
  padding: 100px 0;
}
.scroll-container {
  overflow-x: auto;
  white-space: nowrap;
  padding: 20px 0;
}

.scroll-container img {
  width: auto;
  height: 350px;
  margin-right: 15px;
}

.scroll-container::-webkit-scrollbar {
  height: 8px;
}

.scroll-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* gallery part2 */
.g-left-side {
  padding: 40px 80px;
}
.gallery-part2 .row h4 {
  font-family: "Old Standard TT", serif;
  font-size: 22px;
  font-weight: normal;
}
.gallery-part2 .row h5 {
  font-family: "Old Standard TT", serif;
  font-size: 20px;
  font-weight: 200;
}
.gallery-part2 .row p {
  font-family: "Old Standard TT", serif;
  font-size: 18px;
  font-weight: 200;
}

.g-custom-img {
  width: 100%;
  height: 800px;
  object-fit: cover;
}
.action-button-gallery > a > button {
  background: transparent;
  color: black;
  font-size: 14px;
  font-weight: bold;
  padding: 15px 60px;
  margin-top: 60px;
  border: 2px solid black;
  border-radius: 40px;
  cursor: pointer;
  transition: background 0.5s ease, color 0.5s ease;
}

.action-button-gallery > a > button:hover {
  background: black;
  color: white;
}
/*-------------
    Our project css here
--------------*/
.project-banner-inner {
  float: right;
  width: 50%;
}

.project-banner-desc {
  background: url(../img/project/project-bg.jpg) no-repeat scroll center center /
    cover;
  position: relative;
  overflow: hidden;
  padding-bottom: 30px;
  margin-top: 50px;
}

.single_project {
  margin-top: 30px;
}

.project-banner-desc.overlay::before {
  background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
}

.project-banner-inner {
  float: right;
  position: relative;
  width: 50%;
  z-index: 9;
}

.banner-top-text h3 {
  font-weight: 500;
  line-height: 18px;
  margin-bottom: 28px;
  text-transform: capitalize;
}

.banner-top-text > p {
  font-size: 16px;
  margin-bottom: 0;
}

.banner-top-text {
  border-bottom: 1px solid #ffe200;
  padding-bottom: 27px;
}

.project_view > a {
  border: 1px solid #ffe200;
  display: inline-block;
  font-size: 16px;
  height: 45px;
  line-height: 45px;
  padding: 0 20px;
  text-transform: uppercase;
  color: #444;
}

.project_view {
  margin-top: 50px;
}

.project-text {
  padding-top: 30px;
}

.project-banner-inner .banner-top-text h3,
.project-banner-inner .banner-top-text p {
  color: #ffffff;
}

.project-banner-inner .project_view > a {
  color: #ffffff;
}

.project_view > a:hover {
  background: #ffe200 none repeat scroll 0 0;
}

.project_list .owl-pagination .owl-page {
  color: #444444;
  font-size: 18px;
  margin-left: 10px;
}

.project_list .owl-pagination .owl-page.active {
  font-size: 30px;
}

.project_list .owl-pagination .owl-page:first-child {
  margin-left: 0;
}

.project_list.owl-theme .owl-page span {
  background: #444444 none repeat scroll 0 0;
  opacity: 1;
}

.project_list.owl-theme .owl-controls {
  margin-top: 28px;
  text-align: center;
}

/*------------
    About us css here
-------------*/
.video-inner {
  position: relative;
}

.video-inner.overlay:before {
  background: rgba(0, 0, 0, 0.6);
}

/*-------------
    Our team css here
---------------*/
.single-skill {
  display: inline-block;
  float: left;
  margin-left: 120px;
}

.skill-area-list .single-skill:first-child {
  margin-left: 0;
}

.our-skill-area {
  background: url(../img/team/team-bg.jpg) no-repeat scroll center center /
    cover;
  position: relative;
  padding: 85px 0;
}

.our-skill-area.overlay:before {
  background: rgba(0, 0, 0, 0.7);
}

.member-skill-info,
.skill-area-list {
  position: relative;
  z-index: 9;
}

.member-skill-info > h2 {
  color: #ffffff;
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 38px;
  text-transform: uppercase;
}

.member-skill-info > p {
  color: #ffffff;
  margin-bottom: 0;
}

.single-skill .knob {
  color: #ffffff !important;
}

.single-skill > h5,
.single-skill p {
  color: #ffffff;
  margin: 0;
  text-align: center;
}

.single-skill > h5 {
  font-weight: 400;
  margin-bottom: 2px;
  margin-top: 22px;
  text-transform: uppercase;
}

.single-skill p {
  color: #bbbbbb;
  font-size: 16px;
  text-transform: capitalize;
}

/*---------------------------------
    16. Contact page css
----------------------------------*/

.map-area-inner {
  float: left;
  width: 55%;
}

.map-img {
  float: left;
  width: 45%;
}

.contact_form-top .input-field,
.contact_form-middle .input-field {
  float: left;
  width: 50%;
  position: relative;
}

.contact_form-top,
.contact_form-middle {
  overflow: hidden;
  margin-bottom: 18px;
}

.contact-form-inner .input-field > input {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #e7e7e7;
  padding: 0 20px;
  font-size: 16px;
  color: #909090;
}

.input-field > span {
  color: #ffe200;
  font-size: 16px;
  left: 18%;
  position: absolute;
  top: 8px;
}

.contact_form-top .input-field:first-child,
.contact_form-middle .input-field:first-child {
  padding-right: 15px;
}

.contact_form-top .input-field:last-child {
  padding-left: 15px;
}

.contact-form-bottom textarea {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #e7e7e7;
  height: 140px;
  padding: 20px;
}

.form-submite > button {
  background: #ffe200 none repeat scroll 0 0;
  border: 1px solid rgba(0, 0, 0, 0);
  color: #000000;
  font-size: 16px;
  font-weight: bold;
  height: 45px;
  padding: 0 18px;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
}

.form-submite {
  margin-top: 30px;
}

.form-submite > button:hover {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border-color: #ffe200;
  color: #000000;
}

.get-informed {
  padding-left: 30px;
}

.inform-details {
  float: left;
  width: 100%;
}

.inform-info {
  float: left;
  width: 100%;
}

.inform-info-row {
  float: left;
  width: 100%;
  margin-bottom: 5px;
}

.inform-title > h2 {
  color: #ffe200;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.inform-title > p {
  color: #606060;
  font-size: 16px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.inform-info {
  color: #606060;
  font-size: 16px;
}

.inform-info i {
  font-size: 18px;
  margin-right: 20px;
}

.inform-info li:last-child {
  margin-bottom: 0;
}

inform-info-row {
  float: left;
  width: 100%;
}

.get-informed .single-infromed:last-child {
  margin-bottom: 0;
}

.get-informed .single-infromed {
  margin-bottom: 30px;
}

.contact-form-title h3 {
  font-weight: 600;
  margin-bottom: 27px;
}
/* new added */

.action-whatsapp > a {
  background: #128c7e;
  color: white;
  font-size: 1em;
  font-weight: bold;
  padding: 0.7em 2.3em;
  border: 2px solid 128c7e;
  border-radius: 40px;
  cursor: pointer;
}

.action-whatsapp > a > i {
  font-size: 1.3em;
}

/*------------------------------
    17. Blog details css
----------------------------------*/
.articles-thumbnail > img {
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.articles-thumbnail > img:hover {
  opacity: 0.9;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}

.articles-thumbnail {
  margin-bottom: 45px;
}

.articles .post-title > h3 {
  font-size: 18px;
}

.articles .post-date > p {
  color: #333333;
}

.articles .post-date > p {
  color: #333333;
}

.articles .blog-action-right p a {
  text-transform: capitalize;
}

.articles .blog-action-right p a i {
  color: #ffe200;
}

.articles .post-like {
  margin-right: 17px;
}

.articles .post-like p a i,
.articles .post-comment > p a i {
  margin-right: 6px;
}

.post-exerpt {
  margin-top: 35px;
}

.post-exerpt p {
  color: #333333;
}

.post-text1 p.text1 {
  margin-bottom: 22px;
}

.post-blockqoute {
  padding: 5px 0 5px 46px;
}

.post-blockqoute > p {
  border-left: 3px solid #ffe200;
  padding-bottom: 17px;
  padding-left: 20px;
  padding-top: 8px;
}

.post-blockqoute {
  padding: 15px 0 5px 46px;
}

.tag-name > p,
.share-title > p {
  color: #222222;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.tag-name,
.tag-list,
.tag-list ul li,
.share-title,
.share-social,
.blog-tags,
.blog-share {
  display: inline-block;
}

.action-blog .blog-share {
  float: right;
}

.tag-list ul li a {
  color: #333333;
  font-size: 12px;
  text-transform: capitalize;
}

.blog-tags .tag-list {
  margin-left: 25px;
}

.share-social > a {
  color: #aaaaaa;
  margin-left: 24px;
}

.share-social > a:hover {
  color: #ffe200;
}

.action-blog {
  border-bottom: 1px solid #ffe200;
  padding-top: 48px;
}

.comment-title > p,
.comment-form-title > p {
  color: #222222;
  font-size: 14px;
  font-weight: bold;
  padding-bottom: 2px;
  position: relative;
  text-transform: uppercase;
}

.comment-title > p:before,
.comment-form-title > p:before {
  background: #ffe200 none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 1px;
  position: absolute;
  width: 50px;
}

.comment-box {
  margin-top: 82px;
}

.comment-box-inner {
  margin-top: 50px;
}

.comment-img img {
  border-radius: 8px;
  height: 100px;
  width: 100px;
}

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

.comment-img {
  display: inline-block;
  float: left;
}

.comment-description {
  display: inline-block;
  padding-left: 30px;
}

.comment-title > h6 {
  color: #222222;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 1px;
  text-transform: capitalize;
}

.comment-publish > p {
  color: #333333;
  font-size: 12px;
  font-style: italic;
  margin-bottom: 8px;
}

.comment-desc > p {
  color: #333333;
  margin-bottom: 11px;
}

.comment-reply > a i {
  color: #ffe200;
  margin-right: 5px;
}

.comment-reply > a {
  color: #333;
  text-transform: lowercase;
}

.single-comment.reply-comment {
  margin-left: 100px;
}

.comment-form-inner {
  margin-top: 38px;
}

.input-field > input {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border-color: -moz-use-text-color -moz-use-text-color #f5f5f5;
  -o-border-image: none;
  border-image: none;
  border-style: none none solid;
  border-width: medium medium 1px;
  color: #000000;
  height: 34px;
}

.form-bottom textarea {
  border-bottom-colors: none;
  border-left-colors: none;
  border-right-colors: none;
  border-top-colors: none;
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border-color: #f5f5f5;
  -o-border-image: none;
  border-image: none;
  border-style: none none solid;
  border-width: medium medium 1px;
  height: 110px;
  resize: none;
}

.form-top .input-field {
  float: left;
  width: 50%;
}

.form-top .input-field:first-child {
  padding-right: 15px;
}

.form-top .input-field:last-child {
  margin: 0;
  padding-left: 15px;
}

.form-top {
  margin-bottom: 32px;
  overflow: hidden;
}

.comment-submit > button {
  background: #ffe200 none repeat scroll 0 0;
  border: 1px solid #ffe200;
  color: #ffffff;
  font-weight: bold;
  height: 35px;
  padding: 0 33px;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.comment-submit {
  margin-top: 50px;
}

.comment-submit > button:hover {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  color: #ffe200;
}

.widget-title > h6 {
  border-left: 5px solid #ffe200;
  color: #222222;
  font-size: 12px;
  line-height: 10px;
  margin-bottom: 0;
  padding-left: 15px;
  text-transform: uppercase;
}

.widget-title {
  margin-bottom: 21px;
}

.widget .desc {
  padding-left: 20px;
}

.widget-about p {
  color: #333333;
  margin-bottom: 0;
}

.widget {
  margin-bottom: 45px;
}

.categories-list li a {
  color: #333333;
  text-transform: capitalize;
}

.categories-list li {
  border-bottom: 1px solid #f5f5f5;
  display: block;
  margin-bottom: 15px;
  padding-bottom: 8px;
}

.categories-list li:last-child {
  margin-bottom: 0;
}

.categories-list {
  padding-top: 4px;
}

.latest-blog.desc {
  padding-top: 19px;
}

.recent-post-img img {
  border-radius: 10px;
  height: 150px;
  width: 150px;
}

.recent-post-desc > p,
.recent-post > p {
  color: #333333;
  margin-bottom: 0;
}

.recent-post-img {
  margin-bottom: 10px;
}

.recent-post-desc {
  margin-bottom: 3px;
}

.recent-post > p i {
  margin-right: 5px;
}

.widget-list li {
  border: 1px solid #f5f5f5;
  border-radius: 3px;
  display: inline-block;
  height: 30px;
  margin-bottom: 10px;
  margin-right: 5px;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.widget-list a {
  color: #333333;
  display: block;
  height: 30px;
  line-height: 24px;
  padding: 0 24px;
  text-transform: capitalize;
}

.widget-list li:last-child {
  margin: 0;
}

selectorSavingError {
  background: #ffe200 none repeat scroll 0 0;
  color: #ffffff;
}

.widget-list li:hover {
  background: #ffe200 none repeat scroll 0 0;
  border-color: #ffe200;
}

.widget-list li:hover a {
  color: #ffffff;
}

.blog-action-left,
.blog-action-right {
  display: inline-block;
}

.post-like,
.post-comment {
  display: inline-block;
}

.blog-action-right {
  float: right;
}

.post-date > p {
  color: #555555;
  font-size: 11px;
  font-weight: bold;
  margin: 0;
  text-transform: uppercase;
}

.post-like p a,
.post-comment > p a {
  color: #444444;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}

.post-like {
  margin-right: 5px;
}

.blog-action-right p {
  margin: 0;
}

.post-like p a i,
.post-comment > p a i {
  color: #aaaaaa;
  font-size: 14px;
  margin-right: 3px;
}

.post-title > h3 {
  color: #222222;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}

.blog-action {
  margin-top: 7px;
  overflow: hidden;
}

.form-bottom textarea:focus,
.input-field > input:focus,
.contact-form-bottom textarea:focus {
  border-color: #ffe200;
}

.post-like p a:hover,
.post-comment > p a:hover,
.categories-list li a:hover {
  color: #ffe200;
}

/*----------
    Mobile menu css here
------------------*/
.mobile-menu-area {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  margin-top: -4px;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 9999999;
}

.mean-container a.meanmenu-reveal {
  color: #ffffff;
  float: left;
  position: absolute;
  right: 5% !important;
  top: -58px;
}

.mean-container .mean-nav ul li a {
  color: #444;
  font-family: "Ubuntu", sans-serif;
  font-weight: 600;
}

.mean-container .mean-nav ul li a:hover {
  color: #ffe200;
}

.mean-container .mean-nav {
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

/*----------------------------
  18. 404 page css
-------------------------*/
.error-content h2 {
  color: #ffe200;
  font-family: "Lato", sans-serif;
  font-size: 180px;
  font-weight: bold;
  letter-spacing: 10px;
  text-shadow: 7px 6px 0 #dadada, 0 -1px 0 #dadada, 1px -1px 0 #dadada,
    -1px 1px 0 #dadada, 1px 1px 0 #dadada;
}

.error-content > h3 {
  color: #ffe200;
  font-size: 55px;
  font-weight: 500;
  text-transform: capitalize;
}

.error-content h4 {
  color: #535353;
  font-weight: 400;
  text-transform: capitalize;
}

.error-content .go-home {
  background: #ffe200 none repeat scroll 0 0;
  border-radius: 5px;
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
  margin-top: 15px;
  padding: 12px 28px;
  text-transform: uppercase;
}

.error-content .go-home:hover {
  background: #444 none repeat scroll 0 0;
}

/*-------------------
    19. Scrollup css
---------------------*/
#scrollUp {
  background: #ffe200 none repeat scroll 0 0;
  bottom: 45px;
  color: #ffffff;
  cursor: pointer;
  display: none;
  font-size: 28px;
  height: 40px;
  line-height: 40px;
  position: fixed;
  right: 30px;
  text-align: center;
  width: 40px;
  z-index: 99999;
}

#scrollUp:hover {
  background: #444 none repeat scroll 0 0;
}




/*custom form css*/

.form-block {
      max-width: 900px;
      margin: auto;
      background: #d9f3f7;
      padding: 20px;
    }

.form-block__row {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 15px;
      gap: 20px;
    }

.form-block__field {
      flex: 1 1 45%;
      display: flex;
      flex-direction: column;
    }

.form-block__label {
      font-weight: bold;
      margin-bottom: 5px;
    }

.form-block__input,
.form-block__textarea {
      padding: 8px;
      border: none;
      background: #ddd;
      border-radius: 3px;
      width: 100%;
    }

.form-block__textarea {
      height: 60px;
      resize: none;
    }

    /* Make single field rows span full width */
.form-block__field--full {
      flex: 1 1 100%;
    }
    
.form-block__button {
  background-color: #4a90e2;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.form-block__button:hover {
  background-color: #357ab8;
}

/* FLEXBOX-based checkbox group (no grid / minmax) */
.form-block__checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;      /* row-gap column-gap */
  margin-top: 10px;
  align-items: flex-start;
}

/* Each checkbox item: min width ~220px, but will wrap responsively */
.form-block__checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 220px;     /* grow | shrink | basis */
  min-width: 0;        /* allow proper shrinking inside flex */
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

/* Custom circular checkbox (hide native look) */
.form-block__checkbox input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0,0,0,0.55);
  border-radius: 50%;
  background: #fff;
  position: relative;   /* for ::after dot */
  flex: 0 0 auto;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

/* Checked state: blue filled circle with white dot */
.form-block__checkbox input[type="checkbox"]:checked {
  background-color: #4a90e2;
  border-color: #4a90e2;
}

/* small white dot centered inside when checked */
.form-block__checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
}

/* keyboard focus accessibility */
.form-block__checkbox input[type="checkbox"]:focus {
  outline: 3px solid rgba(74,144,226,0.25);
  outline-offset: 2px;
}

/* Ensure label text wraps nicely if long */
.form-block__checkbox {
  word-break: break-word;
}


/* Radio group wrapper */
.form-block__radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

/* Each radio item */
.form-block__radio {
  display: flex;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
}

/* Hide native radio */
.form-block__radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #4a90e2;
  border-radius: 50%;
  margin-right: 8px;
  cursor: pointer;
  position: relative;
  background: #fff;
  transition: all 0.2s ease-in-out;
}

/* Checked state */
.form-block__radio input[type="radio"]:checked {
  background-color: #4a90e2;
}

/* Inner dot */
.form-block__radio input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
}

/* Paragraph / Note text inside form */
.form-block__note {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  margin: 10px 0;
}

/*Pop up css*/

.career-popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.career-popup-content {
  background: #fff;
  padding: 30px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.career-popup-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 22px;
  border: none;
  background: none;
  cursor: pointer;
}


 /* Responsive: stack all fields on small screens */
@media (max-width: 768px) {
    .form-block__field {
        flex: 1 1 100%;
      }
    }
    
    
    
    
/*Service Section Css*/
.service-section-border {
    border-right: 1px solid #e2e2e2;
    border-left: 1px solid #e2e2e2;
}