/* 
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
*/

.containersection {padding: 80px 20px;}
.fullwidth {padding-left: 0; padding-right: 0;}
.bluearrow {vertical-align: middle; color: #ff5722; font-size: 70%;margin-right: -5px;}
a {color: #02ABEC;}
.elementor-widget-image-gallery {margin-top: 30px;}

#masonry-home1 .gallery img {filter: grayscale(1);}
#masonry-home .gallery img:hover {filter: grayscale(1);}

#industrylogos .gallery {display: flex; align-items: center;}
#industrylogos .gallery img {width: 120px;}

#industrylogos.elementor-widget-image-gallery {margin-top: 0px;}

#clients .gallery {display: flex; align-items: center; flex-wrap: wrap;}
#clients .gallery img {width: 120px;}

#sectorgrid .elementor-image-box-wrapper {
    background: #000000b3;
    border: 1px solid #797979;
    border-radius: 20px;
    padding: 20px;
}

#sectorgrid .elementor-image-box-wrapper:hover { background: #02ABEC21;}

#accreditations .gallery { display: flex; align-items: center;}
#accreditations figure {padding: 20px 0px; text-align: center;}
#accreditations figure img {width: 200px;}

/*  GALLERY TABS  */

#gallerytabs .gallery-icon {padding: 10px;}
#gallerytabs figure img {border-radius: 10px; max-height: 200px;}


/*
   Home page Blog Section
*/

#latestposthome {max-width: 1320px; margin: auto;}
.latest-posts {display: flex; gap: 30px;}
.latest-posts .latestpostboxes, .childpost .featuredimage, .childpost .contentbox {width: 50%;}
#firstpost, #gridposts article, #primary-sidebar, .latest-posts .childpost { padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0px 0px 30px 0px rgb(0 0 0 / 10%); }
#gridposts {margin: 40px 0; display: grid; grid-template-columns: 32% 32% 32%; gap: 20px;}
.childpost {display: flex; gap: 20px; align-items: center; margin-bottom: 20px;}
.childpost:last-child { margin-bottom: 0px;}
.childpost1 p {display: none;}
.latest-posts .contentbox {padding: 10px 0; color: #262262;}
.latest-posts img {border-radius: 18px; width: 100%;}
.latest-posts img:hover {opacity: 0.9;}
.latest-posts a {font-family: "Montserrat", Sans-serif; color: #262262; font-weight: 700; font-size: 24px; line-height: 38px;}
.latest-posts a:hover {color: #02ABEC;}
.latest-posts .childpost a {font-size: 20px; font-weight: 600; line-height: 28px;}
.latest-posts .childpost h3 {margin: 5px 0; line-height: 28px;}
.latest-posts .tag a, .post-tags .tag-links a {background: #97D8D9; color: #000; font-size: 12px; font-weight: 700; line-height: 24px; border-radius: 6px; padding: 6px 15px; text-transform: uppercase;}
.post-tags .tag-links a {margin-right: 0 5px; text-decoration: none;}
#miniposts .childpost:nth-child(odd) .tag a {background: #02ABEC;}
#gridposts article h2 {font-size: 24px; line-height: 1.1;}
#gridposts1 article p {height: 200px; overflow: hidden; line-height: 25px;}
#gridposts1 article p:after {content: "...";}
.metaseparator {padding: 0 10px;}

#gridposts article .blogreadmore {width: 100%; text-align: center;}

/*
    Blog Section
*/
#primary-content .post-tags {display: none;}
main#content {max-width: 1440px;}
#primary-content{width: 70%; display: inline-block; margin-bottom: 60px;}
#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 );
	color: #000;
    font-family: var(--e-global-typography-primary-font-family ), Sans-serif;
    font-weight: var(--e-global-typography-primary-font-weight );
	font-weight: 700;
	font-family: "Open Sans", sans-serif;
	font-size: 1.5rem;
}

.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: 20px 0; background: #000;}
.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: var(--e-global-typography-primary-font-family ), Sans-serif; font-size: 48px; font-weight: var(--e-global-typography-primary-font-weight );}
.blog-header-spacer {height: 50px;}

#blog-header {display: flex; justify-content: space-between; max-width: 1440px; margin: 0 auto; gap: 40px; align-items: center;}
#blog-image {text-align: center;}
#blog-header img {width: 100%; max-width: 450px; border-radius: 30px;}
#blog-header div {padding: 20px; }
.blog-content article img {border-radius: 30px;}
.blogimage1 {display: none;}
.blog-content article {padding: 0px 10px 40px 10px;}
#blog-title, #blog-image {width: 50%;}
.blogreadmore {
color: #fff; background: #02abec; border-radius: 3px; text-transform: uppercase;
font-weight: 600; font-size: 16px; text-decoration: none! important; line-height: 18px; margin-top: 20px; display: inline-block;
font-family: "Montserrat", Sans-serif;
padding: 18px 32px 18px 32px;
}
.blogreadmore:hover {background: #262262; color: #fff;}
.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%;}
.blog-content #primary-content h1, .blog-content #primary-content h2, .blog-content #primary-content h3, .blog-content #primary-content h4, .blog-content #primary-content h5, .blog-content #primary-content h6 {font-weight: 700; font-family: "Open Sans", sans-serif; padding: 10px 0;}

#primary-sidebar .mywidgets li {line-height: 2; margin-bottom: 5px; font-size: 16px; display: inline-flex; gap: 10px;}
#primary-sidebar1 .mywidgets li::before {content: '⮞'; margin-right: 5px;} 
#primary-sidebar .mywidgets li a {text-decoration: none;}
#primary-sidebar .wp-block-latest-posts__featured-image img {border-radius: 18px; width: 80px ! important; height: 80px;}
#firstpost, #gridposts {font-size: 16px;}
#blog-breadcrumbs, #blog-breadcrumbs a:hover {color: #fff;}
.entry-sub-title {font-family: "Manrope", Sans-serif; font-size: 18px; font-weight: 400; line-height: 28px; color: #fff;}
#blogarticles article {width: 33.33%; float: left;}
#blogarticles article .postarticleholder {padding: 10px;}
#blogarticles article img {width: 100%; max-height: 240px;}

.wp-block-list {list-style: none; padding: 0 0 10px 0;}
.wp-block-list li {padding-left: 32px; line-height: 28px;}
.wp-block-list li::before {content: url(tick.svg); margin-right: 5px; color: #02abec; margin-top: 2px; line-height: 24px; width: 24px; position: absolute; margin-left: -32px; }

#post-meta-details {list-style: none; padding: 0; font-size: 14px;}
#firstpost #post-meta-details li {display: inline-block; margin-right: 10px;}
#blog-title #post-meta-details, #blog-title #post-meta-details a:hover {color: #fff;}

.post-date i {font-family: "fontawesome"; font-style: normal;}

/* Slider  */

.owl-nav {display: flex; justify-content: space-between; margin-top: 40px;}

.owl-dots {text-align:center; margin-top: -40px;}
button.owl-dot {width: 24px; height: 4px; border: 0; border-radius: 1px;  background: #97D8D950! important; margin: 2px;}
button.owl-dot.active {width: 36px; height: 4px; border: 0; border-radius: 1px; background: #97D8D9! important;}

.owl-nav1 {top: 180px; position: absolute; width: 100%;}
.owl-nav button {background: #97D8D9! important; color: #000! important; width: 48px; height: 48px; border-radius: 50%; border: 1px solid #97D8D9! important;}
.owl-nav button.owl-prev {margin-left: -80px; background: none! important; color: #97D8D9! important;}
.owl-nav button.owl-next {position: absolute; right: -80px;}


 /* */
 
.owl-nav button.owl-next {
    position: relative;
    right: -0;
}
 
.owl-nav button.owl-prev {
    margin-left: 0;
}

.owl-nav1 {
    top: auto;
    position: relative;
    width: 100%;
	text-align: center;
}

.owl-nav button {margin: 0 10px;}

/*  projectgallery LIGHTBOX STYLES  */

 #elementor-lightbox-slideshow-projectgallery .elementor-swiper-button {
    display: block !important;
    visibility: visible !important;
    color: #ffffff !important; /* Forces white arrows */
	position: fixed;
    opacity: 1;
    z-index: 1000;
    top: 50%;
}

 #elementor-lightbox-slideshow-projectgallery .eicon-chevron-left,
 #elementor-lightbox-slideshow-projectgallery .eicon-chevron-right {
    display: block !important;
}

#elementor-lightbox-slideshow-projectgallery svg.e-font-icon-svg {height: 40px; cursor: pointer;}

/*  CONTACT FORMS */

.myreCAPTCHA { text-align: center; font-size: 14px; /* font-family: Cabin, Georgia, serif; */}

#contact1 {

width: 100%;
padding: 40px;
border-radius: 20px;
background: #02abec;
max-width: 100%;
width: 540px;
}
#contact1 .eael-contact-form-7 {width: 100%;}
#contact1 form p {width: 100%;}
#contact1 form br {display: none;}
#contact1 form label {padding: 0; margin: 10px 0; color: #000; width: 100%;}
#contact1 form label span {display: block; padding: 5px 0;}

#contact1 form label.col2 {width: 48%; display: inline-block;}
#contact1 form label.col1 {width: 98%;}


#contact1 form.invalid label.col2 {height: 100px;}

#contact1 .wpcf7-form input {
    width: 100%;
	margin-top: 5px;
	background: #f6f6f6;
	border: 0;
}

#contact1 form textarea {
    height: 100px;
    width: 100%;
	background: #f6f6f6;
	border: 0;
}

#contact1 .wpcf7-form input[type="submit"] {
    color: #fff;
    width: 100%;
	background: #262262;
	color: #fff;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 16px;
	font-family: "Montserrat", Sans-serif;
}

#contact1 .wpcf7-form input[type="submit"]:hover {background: #000;}

#contact1 .wpcf7-form input[type="submit"] {width: 98%;}

#contact1 .myreCAPTCHA { color: inherit;}

#contact1 sup {color: red;}

#contact2 {width: 100%; max-width: 800px; margin: 0 auto;}
#contact2 .eael-contact-form-7 {width: 100%;}
#contact2 form p {width: 100%;}
#contact2 form br {display: none;}
#contact2 form label {padding: 0 10px; margin: 10px 0; color: #54595F; vertical-align: top;}
#contact2 form label span {display: block; padding: 5px 0;}

#contact2 .wpcf7-form input {
    width: 100%;
	margin-top: 5px;
	background: #1543b8;
	color: #fff;
	border: 1px solid #fff;
}

#contact2 form textarea {
    height: 100px;
    width: 100%;
	background: #1543b8;
	color: #fff;
	border: 1px solid #fff;
}

#contact2 .wpcf7-form input[type="submit"] {
    color: #000;
    width: 100%;
	background: #fff;
	text-transform: uppercase;
}

#contact2 .wpcf7-form input::placeholder, #contact2 form textarea::placeholder {
  color: #fff;
  opacity: 1; /* Firefox */
}

#contact2 .wpcf7-form input::-ms-input-placeholder, #contact2 form textarea::-ms-input-placeholder {
  color: #fff;
  opacity: 1; /* Edge 12 -18 */
}

#contact1 .myreCAPTCHA, #contact1 .myreCAPTCHA a {color: #fff;}
#contact1 .myreCAPTCHA a {text-decoration: underline;}
#contact1 .myreCAPTCHA a:hover {color: #000;}

#contact1 .wpcf7 form .wpcf7-response-output {border: 0; text-align: center; color: #fff;}
#contact1 form.sent p {display: none;}

/*  SCREEN SIZES  */

@media (min-width: 1200px) {
.page-header .entry-title {max-width: 100%;}
}


@media (max-width: 1024px) {
#masonry-home figure {width: 25%! important; max-width: 33.33%! important;}
}



@media (min-width: 768px) {
#gridposts article h2 {height: 65px; overflow: hidden;}
#gridposts article .blogimage img {height: 200px;}
#gridposts article .myexcerpt {height: 100px; overflow: hidden;}
}



@media (max-width: 767px) {

/*
.elementor {overflow: clip;}
#differencetable {display: none;}
*/

#firstpost article .blogreadmore {width: 100%; text-align: center;}

.quicklinks .elementor-icon-list-text {display: none;}
#accreditations .gallery { display: block;}

.latest-posts, .childpost {display: block;}
#miniposts {margin-top: 20px;}
.latest-posts .childpost {/* padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0px 0px 30px 0px rgb(0 0 0 / 10%); */}
.latest-posts .latestpostboxes, .childpost .featuredimage, .childpost .contentbox {width: 100%;}
.xxxl h1 {font-size: 40px! important; line-height: 58px! important;}
.xl h2 {font-size: 38px! important; line-height: 46px! important;}
#miniposts .featuredimage img {width: 100%;}
#gridposts {display: block;}
#gridposts article {margin: 20px 0;}
#blog-header {display: block;}
#blog-title, #blog-image {width: 100%;}
#primary-content, #primary-sidebar {width: 100%; display: block; float: none; padding: 20px;}
.bottom-sidebar .mywidgets .wp-block-latest-posts li {width: 100%; margin: 0 1%; display: block;}
.blog-content article {padding: 0 0 40px 0;}
#clients figure {padding: 15px 0;}
#industrylogos figure {padding: 0 5px;}

#contact1 form label.col2, #contact1 form label.col3 {display: block; width: 100%; float: none;}

#masonry-home figure {width: 33.33%! important; max-width: 50%! important;}

}


@media (max-width: 480px) {
	#masonry-home figure {width: 50%! important;  max-width: 100%! important;}
	#masonry-home figure:nth-last-child(-n + 11) { display: none; }
}