/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child theme of Hello Elementor by Oscar Viana
Author: Oscar Viana
Author URI: https://oscarviana.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/
a {color: #709e00;}
a:hover {color: #F6ED11;}
.containersection{ padding: 80px 20px;}
#footersection { padding: 100px 20px;}
#footersection .contactlinks .elementor-icon-list-text {word-break: break-all;}
#faqs .e-n-accordion-item-title {justify-content: space-between;}
#faqs .e-n-accordion-item {border: 1px solid #ccc; border-radius: 15px; padding: 10px 15px; margin: 10px 0;}
#faqs .e-n-accordion-item:hover, #faqs .e-n-accordion-item[open] {border: 1px solid #709E00;}
#faqs .e-n-accordion-item:hover .e-n-accordion-item-title-header, #faqs .e-n-accordion-item[open] .e-n-accordion-item-title-header {color: #709E00;}
.faqcontainer {max-width: 900px;}
.innerbox {max-width: 650px;}
#ratings {line-height: 1.5;}
#ratings i {color: #FF8D1D;}
#servicesgrid .elementor-widget-image-box {border: 1px solid #709E00; border-radius: 20px; /* padding: 30px 20px; */ padding: 0px; background: #fff;}
#servicesgrid .elementor-widget-image-box figure {/* padding: 25px; */ padding: 0px; border-radius: 50%; /* background: #709E00; */ width: 100%;}
#servicesgrid .elementor-widget-image-box figure img {/* filter: invert(1); */ border-top-left-radius: 20px; border-top-right-radius: 20px; width: 100%;}
#servicesgrid .elementor-widget-image-box .elementor-image-box-content {padding: 0 20px 30px 20px;}
#servicesgrid .elementor-widget-image-box .elementor-image-box-title {color: #000;}
#servicesgrid .elementor-widget-image-box .elementor-image-box-description {font-size: 17px;}
#whyus .elementor-widget-image-box:hover figure img, #servicesgrid .elementor-widget-image-box:hover, #serviceareas .elementor-widget-image-box:hover figure img {transform: translate(0, -5px);}
#brands figure.gallery-item {max-width: 100%! important;}
#ourwork .elementor-image-gallery .gallery-item img {padding: 5px;}
#ourwork img:hover {filter: opacity(0.9);}
#serviceareas .elementor-widget-image-box figure img {filter: invert(1);}
#hideme {width: 0! important; height: 0! important; overflow: hidden! important;}
#hideme, #hideme * {display: none! important;}
.es-load-more-button, .es-load-more-button:hover {background: none! important; margin: 20px 0; border: 0! important;}
.es-load-more-button span.ButtonBase__Overlay-sc-f9fbfeb2-4 {padding: 20px 40px 20px 40px! important; border-radius: 40px! important; background-color: #709e00! important; font-family: "Red Hat Display", Sans-serif! important; color: #fff! important; font-size: 20px! important; text-transform: uppercase;}
.es-load-more-button span.ButtonBase__Overlay-sc-f9fbfeb2-4:hover {background: #000! important;}
.ytvideo {border-radius: 20px;}
#CTA { max-width: 1300px; margin: 0 auto;}
#CTAtop {max-width: 600px;}

.btn a {padding: 20px 40px 20px 40px;  border-radius: 40px;}
#areasmenupg li a {color: #fff;}
#areasmenupg li a:hover {color: #f7c212;}
.areasmenu li { display: inline-block; width: 20%;}
.areasmenu li a {padding: 8px 8px 8px 22px! important;}
.areasmenu li a::before {content: "\f3c5"; font-family: 'Font Awesome 5 Free';  -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
	display: inline-block! important;
	font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  color: #709E00;
     margin-left: -20px;
    opacity: 1! important;
    background: none ! important;
	}


.f-button.is-close-btn {
	color: #000;
    padding: 8px;
    line-height: 1;
    background: #ccc;
    border: 0;
	height: 36px;
	width: 36px;
}


.f-button.is-close-btn:hover { background: #000 ! important; color: #fff ! important;}

    /* Overlay background */
    .popup-overlay {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.5);
      justify-content: center;
      align-items: center;
      z-index: 999;
    }

    /* Popup content */
    .popup-content {
      background: white;
      padding: 20px;
      border-radius: 8px;
      max-width: 500px;
      width: 100%;
      text-align: center;
	  margin: 50px auto;
    }

    .close-btn {
      margin-top: 15px;
      background: #ff4d4d;
      color: white;
      border: none;
      padding: 8px 12px;
      cursor: pointer;
      border-radius: 5px;
    }
	


.fancybox-overlay, .fancybox__slide {background-color: #fff! important; background-image: url(logo.png) ! important; background-position: 50% 0px ! important; background-repeat: no-repeat ! important; background-size: 180px;}
.fancybox__slide::before { margin: 110px 0 0 0;}
.fancybox__slide::after { margin: 0;}
.fancybox__content {padding: 0; width: 100%! important;}
.fancybox-skin {background: #fff! important; border-radius: 20px! important;}
.fancybox-close {background-image: url(close.png)! important; background-size: contain ! important; background-color: #eee; border-radius: 50%;}

/*
    Blog Module
*/


.wp-block-heading, #primary-content .entry-title {font-family: "Inter", Sans-serif;}

.wp-block-latest-posts li a {padding-left: 20px;}
.wp-block-latest-posts li a, #menu-services-menu li a, #servicemenu li a {padding: 8px 8px 8px 8px! important; display: block; text-decoration: none;}
.wp-block-latest-posts li a::before, #menu-services-menu li a::before, #servicemenu li a::before {content: "\f0e7"; font-family: 'Font Awesome 5 Free';  -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
	display: inline-block! important;
	font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  color: #F6ED11;
     margin-left: -20px;
    opacity: 1! important;
    background: none ! important;
	padding-right: 5px;
	}



/*
    Blog Section
*/

.post .entry-title a:hover {color: #000;}

#primary-content{width: 70%; display: inline-block;}
#primary-sidebar {width: 27%; display: inline-block; float: right;}
.clr {clear: both;}
.mywidgets { margin-bottom: 20px;}
.mywidgets h2, .more-blogs-title {
    color: var(--e-global-color-primary );
    font-family: var(--e-global-typography-primary-font-family ), Sans-serif;
    font-weight: var(--e-global-typography-primary-font-weight );
	color: #000;
}

.mywidgets li {margin-left: 20px;}
.mywidgets li a:hover {color: #000;}

.more-blogs-title {text-align: center;}

.page-content {
    color: var(--e-global-color-text );
    font-family: var(--e-global-typography-text-font-family ), Sans-serif;
    font-size: var(--e-global-typography-text-font-size );
    font-weight: var(--e-global-typography-text-font-weight );
}

.sectiondivider {background-color: var(--e-global-color-primary); height: 0px; margin: 50px 0; border: 0;} 

#blogheader {margin-bottom: 50px; min-height: 200px; background-blend-mode: multiply; padding: 150px 0; background: url(main-slide.jpg) rgb(0 0 0 / 10%) no-repeat center center / cover;}
.blogheaderoverlay {background-color: #020101; opacity: 0.5; height: inherit; width: 100%; position: absolute;}
.blog-header-title {height: inherit; width: 100%; position: absolute; padding: 150px 0;}
#blogheader h1 { color: #FFFFFF; font-family: "Inter", Sans-serif; font-size: 48px; font-weight: 800; text-align: center;}
.blog-header-spacer {height: 50px;}

.bottom-sidebar .mywidgets .wp-block-latest-posts li {width: 32%; margin-right: 1%; display: inline-block; padding: 20px; clear: none; float: left}
.bottom-sidebar .mywidgets .wp-block-latest-posts .wp-block-latest-posts__featured-image a {display: block;}
.bottom-sidebar .mywidgets .wp-block-latest-posts .wp-block-latest-posts__featured-image a img {width: 100%;}


#blogarticles article {width: 33.33%; float: left;}
#blogarticles article .postarticleholder {padding: 10px;}
#blogarticles article img {width: 100%; max-height: 240px;}

#menu-services-menu {list-style: none; padding: 0;}

#footer2action {
    display: none;
    color: #fff;
    font-weight: bold;
    background: #709E00;
    text-align: center;
    padding: 15px;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 10;
    font-size: 20px;
    text-transform: uppercase;
	border-top: 1px solid #fff;
}



@media (max-width: 1200px) {
	
.areasmenu li { display: inline-block; width: 25%;}

}



@media (min-width: 1025px) {
#headerbar nav {width: 100%! important;}
}

@media (max-width: 1024px) {
.outerbox {padding: 0;}
.outerbox .e-con-inner { padding: 60px 40px;}
.xxxl .elementor-heading-title {font-size: 44px! important;}
.xxl .elementor-heading-title {font-size: 32px! important;}
#headerbar .e-con-inner .e-child {width: 25%;}
.phonebtn .elementor-button-text {display: none;}
.phonebtn a {padding: 10px; border-radius: 50%;}
#footersection .e-con-inner .e-child {width: 50%;}
#postreview .elementor-image-box-wrapper {flex-direction: column;}
#whyus {column-gap: 20px;}
#whyus .elementor-image-box-title {font-size: 18px;}

.areasmenu li { display: inline-block; width: 33%;}

}


@media (max-width: 1023px) and (min-width: 766px) {
 #CTA {background-position: 125%; /* background-position: 160%; */ }

}


@media (max-width: 767px) {
	
.outerbox .e-con-inner { padding: 40px 20px;}
.xxxl .elementor-heading-title {font-size: 44px! important;}
.xxl .elementor-heading-title {font-size: 32px! important;}
.btn a {padding: 15px 30px 15px 30px; border-radius: 30px;}
.phonebtn a {padding: 10px; border-radius: 50%;}
.containersection{ padding: 40px 20px;}
#CTA {padding: 20px 10px 320px 10px; background-position: 0 115%;}
#CTA .btn a {width: 210px! important;}
#footersection .e-con-inner .e-child {width: 100%;}

#primary-content, #primary-sidebar {width: 100%; display: block; float: none; padding: 0 30px;}
.bottom-sidebar .mywidgets .wp-block-latest-posts li {width: 100%; margin: 0 1%; display: block;}


}

@media (max-width: 580px) {
#CTAtop .elementor-icon-list-text {word-break: break-all;}
.elementor {overflow-x: clip;}
.xxxl .elementor-heading-title {font-size: 38px! important;}
.xxl .elementor-heading-title {font-size: 28px! important;}
.areasmenu li { display: inline-block; width: 50%;}
#footer2action {display: block; }
footer {padding-bottom: 50px;}
}

@media (max-width: 400px) {

.areasmenu li { display: inline-block; width: 100%;}

}