/*
    Theme Name: Energycode
    Theme URI: https://www.reachabovemedia.com/
    Description: Custom built theme to meet client requirements.
    Version: 1.00
    Author: Energycode
    Author URI: https://www.reachabovemedia.com/
    Tags: white, one-column, two-columns, three-columns,four-columns, right-sidebar, responsive-layout, custom-colors, custom-menu, featured-images, theme-options, translation-ready, photoblogging
    License: GNU General Public License version 1.0
    License URI: https://www.reachabovemedia.com/
    Text Domain: Energycode
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');


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

@font-face {
  font-family: Muli-regular;
  src: url(font/Muli-Regular.ttf);
}

@font-face {
  font-family: Muli-thin;
  src: url(font/Muli-Light.ttf);
}

@font-face {
  font-family: Muli-semibold;
  src: url(font/Muli-SemiBold.ttf);

}

@font-face {
  font-family: Muli-bold;
  src: url(font/Muli-Bold.ttf);
}

@font-face {
  font-family: MyriadProRegular;
  src: url(font/MyriadProRegular.ttf);
}

ul.navbar-nav.mr-auto a {
    font-family: Muli-semibold;
}

ul.navbar-nav.mr-auto {
    margin: auto;
}

ul.navbar-nav.mr-auto li.menu-item:not(:hover) a {
    color: #556575!important;
}
body ul.navbar-nav.mr-auto li.menu-item:hover > a,
body ul.navbar-nav.mr-auto li.menu-item.current_page_item > a {
    color: #253642!important;
}


ul.navbar-nav.mr-auto li.menu-item a {
    position: relative;
}

ul.navbar-nav.mr-auto li.menu-item > a:after {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    background: #068911;
    border-radius: 100%;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 12px;
    opacity: 0;
    transition: 0.5s;
}

ul.navbar-nav.mr-auto li.menu-item:hover > a:after,
ul.navbar-nav.mr-auto li.menu-item.current_page_item > a:after {
    bottom: -10px;
    opacity: 1; 
}

ul.navbar-nav.mr-auto li.menu-item a {
    padding: 0px 17px;
}

form#searchform {
    width: 155px;
    position: relative;
    margin-left: -66px;
}

form#searchform input {
    width: 158px;
    border: 1px solid #7f8185;
    background: transparent;
    border-radius: 27px;
    padding: 6px 10px;
    transition: 0.5s;    
}

form#searchform button {
    font-weight: 300;
    position: absolute;
    right: 10px;
    background: transparent;
    border: navajowhite;
    color: #959595;
    top: 6px;
}

form#searchform:hover input {
    opacity: 1!important;
}

form#searchform input:placeholder-shown {
  opacity: 0;
}

nav#navbar_top {
    display: none;
}

nav.navbar.navbar-expand-lg.navbar-light.bg-light {
    background: #fff!important;
}

section.hero.dark * {
    color: #fff;
}

section.hero.dark h3 {
    color: #c6c6c6;
    font-family: MyriadProRegular;
    font-size: 18px;
}

section.hero h2 {
    font-family: Muli-bold;
    font-size: 87px;
}

section h2 {
    font-family: Muli-bold;
    font-size: 33px;
    color: #071e57;
    font-weight: bold;
	letter-spacing: -1px;
}

.dual-btn {
    display: flex;
    gap: 15px;
    margin-top: 50px;
}

.btn {
    border: 2px solid;
    padding: 12px 31px;
    border-radius: 3px;
}

a.btn.type-1 {
    background: #058911;
    border-color: #058911;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
}

.dark .btn.type-1:hover {
    background: transparent;
    color: #ffffff;
    border-color: #fff;
}

.btn.type-1:hover {
    background: transparent;
    color: #058911;
    border-color: #058911;
}

a.btn.type-2 {
    background: #ffffff52;
}

a.btn.type-2:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}

section.hero.dark {
    padding: 12% 0% 20%;
    background-size: 100% auto!important;
    background-position: bottom!important;
	background-repeat: no-repeat!important;
}

h3 {
    font-family: 'Poppins', sans-serif;
    color: #068911;
    font-weight: 500;
    font-size: 19px;
}

a.btn {
    font-family: 'Poppins', sans-serif;
    font-weight: 500!important;
    letter-spacing: 1px;
}

body {
    color: #748494;
    font-family: 'Poppins';
    line-height: 1.8em;
}

.description {
    padding-bottom: 31px;
    margin-top: 25px;
}

.align-middle {
    align-items: top;
}

.align-center {
    align-items: center;
    justify-content: center;
}

.row.align-center * {
    text-align: center;
}

.blogItem {
    max-width: 370px;
    background: #fff;
    box-shadow: 0px 0px 15px #c7c3c3;
}

.blogItem h3 {
    font-size: 15px;
}

.blogInfo {
    padding: 24px 46px;
}

.blogItem h3 a {
    color: inherit;
}

a.blog-btn {
    position: relative;
    color: #748494;
    font-family: 'Muli-bold';
}

a.blog-btn:after {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    border-top: 3px solid;
    border-right: 3px solid;
    transform: rotate(45deg);
    bottom: 6px;
    right: -14px;
    transition: 0.5s;
}

a.blog-btn:hover:after {
    right: -20px;
}

.blogItem h3 {
    font-size: 15px;
    color: #a4b5d5;
    line-height: 1.9em;
    font-family: 'Muli-semibold';
}


button.slick-next.slick-arrow {
    font-size: 0;
    border: 2px solid #7a8b9e;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background: transparent;
    position: absolute;
    right: -52px;
    top: 50%;
}

button.slick-prev.slick-arrow {
    font-size: 0;
    border: 2px solid #7a8b9e;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background: transparent;
    position: absolute;
    left: -52px;
    top: 50%;
}

button.slick-prev.slick-arrow:before {
    content: "";
    width: 15px;
    height: 15px;
    border-top: 3px solid;
    border-left: 3px solid;
    position: absolute;
    transform: rotate(-45deg);
    left: 14px;
    top: 10px;
    border-color: #7a8b9e;
}

button.slick-next.slick-arrow:before {
    content: "";
    width: 15px;
    height: 15px;
    border-bottom: 3px solid;
    border-right: 3px solid;
    position: absolute;
    transform: rotate(-45deg);
    left: 8px;
    top: 10px;
    border-color: #7a8b9e;
}  


.blogItem {
    margin: auto;
    margin-top: 31px;
    margin-bottom: 50px;
    max-width: 360px;
    background: #fff;
    box-shadow: 0px 0px 18px #c9c2c27a;
}

.blogItem img {
    margin: auto;
    width: 100%;
}

section.offer {
    padding: 4% 0%;
    background-size: 100% auto!important;
    background-position: bottom!important;
}

section.cta.dark {
    padding: 6% 1%;
    background-size: auto 100% !important;
    background-position: center!important;
}

section.dark * {
    color: #fff;
}


section.cta.dark .col-sm-4 {
    text-align: right;
}

section.cta.dark .row {
    align-items: center;
}

footer {
    background: #1d2b37;
}

footer {
    padding-top: 84px;
}

h2.widget-title {
    font-family: 'Muli-semibold';
    color: #fff;
    font-size: 19px;
    margin-bottom: 16px;
}

.textwidget a {
    color: #748494;
}

.textwidget ul {
    list-style: none;
    padding: 0;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

section.copyright {
    text-align: center;
    background: #1d2b37;
    padding-top: 16px;
}

section.copyright > div {
    border-top: 1px solid #81808387;
    padding-top: 16px;
    padding-bottom: 16px;
}

.copyright-text {
    color: #ffff;
}

.copyright-text a {
    color: #7d97ad;
}

ul.footer-solail {
    padding: 0;
    list-style: none;
    display: flex;
    gap: 11px;
	justify-content:center;
}

.contactFooter > a:first-child {
    font-family: 'Muli-semibold';
    color: #fbfbfb;
    display: inline-block;
    width: 100%;
    margin-top: 9px;
    font-size: 22px;
}

.contactFooter > a:nth-child(2) {
    color: #748494;
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
}

@media (max-width:1300px){
	section.hero.dark {
    background-size: auto 100%!important;
}
}
 
 @media (max-width:767px){
section.hero.dark h2 {
    font-size: 35px;
}

.dual-btn {
    flex-direction: column;
    width: 69%;
}

section h2 {
    font-size: 25px;
}

section img {max-width: 100%;}

section h2 br {
    display: none;
}

ul.footer-solail {
    align-items: center;
    justify-content: center;
}
section.cta.dark .col-sm-4 {
    text-align: left;
}
button.slick-prev.slick-arrow {
    left: -10px;
    top: 50%;
    z-index: 8;
}
button.slick-next.slick-arrow {
    right: -8px;
    top: 50%;
}
.collapse:not(.show) {
    display: block;
}
ul#menu-primary-menu {
    width: 92%;
    position: absolute;
    backdrop-filter: blur(9px);
    background: #ffffffab;
    gap: 9px!important;
    padding-bottom: 23px;
    padding: 28px 20px;
    border: 2px solid #78bf7e;
}

ul#menu-primary-menu li {
    padding-bottom: 0;
}

ul#menu-primary-menu li a {
    color: #000!important;
    font-size: 19px!important;
}
ul.navbar-nav.mr-auto.active {
    padding-top: 0;
}
ul.navbar-nav.mr-auto li.menu-item > a:after {
    right: auto;
    left: 4px;
    top: -7px;
}
}

.mobile-toggle {
    width: 58px;
    height: 29px;
    position: absolute;
    right: 28px;
    top: 35px;
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.mobile-toggle span {
    width: 66%;
    height: 3px;
    background: #060606;
    display: inline-block;
}

.mobile-toggle span:nth-child(1) {
    width: 40%;
}

.mobile-toggle span:nth-child(2) {
    width: 50%;
}


.mobile-toggle.active span:nth-child(1) {
    width: 67%;
    transform: rotate(45deg) translate(8px, 8px);
}

.mobile-toggle.active span:nth-child(2) {
    display: none;
}

.mobile-toggle.active span:nth-child(3) {
    width: 67%;
    transform: rotate(-45deg) translate(0px, 0px);
}

@media (min-width:1200px){
	.mobile-toggle{
		display:none;
	}
}	

@media (max-width:1200px){
	ul.navbar-nav.mr-auto:not(.active) {
    display: none;
}

.search-bar {
    display: none;
}
}


body, html {
    overflow-x: hidden;
    width: 100%;
}

@media (max-width:1300px){
	button.slick-prev.slick-arrow {
		left: -13px;
		z-index: 9;
	}
	button.slick-next.slick-arrow {
		right: -15px;
		top: 50%;
	}
	section.copyright > div {
     border-top: 1px solid rgba(0,0,0,0)!important; 
    }
}


section.subBanner {
    padding: 7% 0% 11%;
    background: url(../images/bg.jpg);
    background-position-x: -18px;
    background-size: 102%;
    background-position-y: bottom;
}


section.subBanner h1 {
    color: #fff;
    font-size: 66px;
}

.client-logo {
    box-shadow: 0px 0px 15px #0003;
    border-radius: 10px;
    margin-bottom: 50px;
}
.client-logo img {
    width: 100%;
}



.hcontact-form{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.hcontact-form .wpcf7-form-control-wrap{
	width: 100%;

}

.hcontact-form .wpcf7-form-control{
	width: 100% !important;
	display: flex;
	flex-wrap: wrap;
	padding: 15px 20px;
	box-shadow:0px 0px 15px rgba(22, 117, 187, 0.4);
	height: auto;
	margin: 10px 0 0 0;


}


.hcontact-form .wpcf7-form-control.has-spinner.wpcf7-submit{
	width: auto !important;
	background-color: #000;
	background: #058911;
    border-color: #058911;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    border: 2px solid;
    padding: 12px 31px;
    border-radius: 5px;
    box-shadow: none;
}
.hcontact-form .wpcf7-form-control.has-spinner.wpcf7-submit:hover{
	
    background: #fff;
   
    
    color: #058911;
   
}

.hcontact-form .wpcf7-form-control-wrap.your-message{
	min-height: 300px;
}
.hcontact-form form label{
	width: 100%;
	font-size: 20px;
}

.hcontact-form textarea.wpcf7-form-control{
	height: 150px;
}

.widget.widget_media_image{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0 0 0 40px;
}
.navbar.navbar-expand-xl.navbar-light.dropdown-menu{
    width: 100%;
}
.navbar-expand-lg .navbar-nav li.dropdown:hover .dropdown-menu {
    display: block;
}

/*** FIXES BY MANPREET ***/
.footer-widget.footer-logo-sec {
    display: inline-block;
    text-align: center;
}
section#media_image-2 img{
	display:inline-block
}

.contactFooter{
    display: inline-block;
    max-width: 200px;
}

@media (max-width: 767px)
{
    ul#menu-primary-menu{
        z-index: 999;
    }
    section.subBanner{
        background-size: cover;background-repeat: no-repeat;margin-bottom: 25px;
    }
    section.subBanner h1 {
        font-size: 40px;
    }

}