@charset "utf-8";
/* CSS Document */

body {font-family: "Roboto", sans-serif;  font-style: normal;}

p { line-height: 1.4em}

.lightgrey { color: #f8f9fa}
.lightgreybg {background: #f8f9fa;}
.blackbg {background: #212529;}
.darkbluebg {background: #3A446F;}
.ws-green {color: #39b54a}
.white {color:#fff}
.grey {color:#AEAEAE}
.blue {color:#3A446F }
.yellow{color:#FFC827}
.orange {color:#ff8c00}
.border-white {border:8px solid #fff}

p {font-size:16px; color: #212529;}
p a:link, p a:hover, p a:visited {color:#212529; font-weight:600;}
.error {font-size:12px; color:red;}
p a.blue:link, p a.blue:hover, p a.blue:visited {color:#3A446F; font-weight:600;}
.anchor{display:block;position:relative;top:-50px;visibility:hidden}

.areas {color: #fff; padding: 8px 15px; font-size: 24px; font-weight: 500; display: inline-block;  border-top-left-radius: 0px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; background: rgb(241,90,36); background: linear-gradient(90deg, rgba(241,90,36,1) 0%, rgba(247,147,30,1) 100%);}

.contact-panel {background: #fff; padding: 10px; border-radius: 15px; }
.contact-panel-inner {min-height: 100px;}

.card-section-blue {
background: #1d2951;
border-radius:20px;
color:#fff;
border:6px solid #fff;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.btn-primary {border-radius: 0px; background: #3A446F; border:2px solid #3A446F; padding: 10px; font-weight: 600 }
.btn-primary:hover {background:none; color: #3A446F; border:2px solid #3A446F  }
.btn-xs-w {width: 200px;} 

.h-underline {display: inline-block; padding-bottom: 10px; position: relative; margin-bottom: 20px}

.h-underline:before {content: ""; position: absolute; width: 100%; height: 3px; bottom: 0; left: 0%; border-bottom: 5px solid #FFC827;}

a.link-white {color:#fff; text-decoration: none;}
a.link-white:hover {color:orange; text-decoration: none;}
.footer-links a, .footer-links a:hover {color:#FFC827; text-decoration: none; font-size:18px;}


ul.icons {line-height: 2em; list-style-type: none; padding: 0;}

.arrow-down { 
  width: 0; 
  height: 0;
  position: relative;
  margin: 0px auto;
  top:25px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 30px solid #212529;}

.arrow-down-grey { 
  width: 0; 
  height: 0;
  position: relative;
  margin: 0px auto;
  top:25px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 30px solid #F8F9FA;}

.grecaptcha-badge {
/*bottom: 60px !important;*/
}

ul.icons-list {list-style-type:none;padding-left:0px}
ul.icons-list li {position:relative;padding-left:20px;margin-bottom:5px}
ul.chevron li:before{position:absolute;top:0;left:0;font-family:"Font Awesome 6 Free";content:'\f054';color:#3A446F;}
ul.tick li:before{position:absolute; top:0;left:0;font-family:"Font Awesome 6 Free";content:'\f00c';color:green;}
ul.white-tick li:before{position:absolute; top:0;left:0;font-family:"Font Awesome 6 Free";content:'\f00c';color:#fff;}
ul.circle-tick li:before{position:absolute; top:0;left:0;font-family:"Font Awesome 6 Free";content:'\f058';color:green;}

.home-panel-container {background: #fff; width: 100%; min-height: 300px; overflow: hidden}

.home-panel-top {height: 150px; width: 100%; transition: .25s; overflow: hidden}

.home-panel-container:hover .home-panel-top {height: 140px;}

.home-panel-top.install {background-image: url("../images/solar-install-roof-01.webp"); background-position: 50% 50%; background-size: cover;}
.home-panel-top.ev-charger {background-image: url("../images/ev-charger-1.webp"); background-position: 50% 50%; background-size: cover;}
.home-panel-top.battery {background-image: url("../images/sigenergy-battery-storage-02.webp"); background-position: 50% 25%; background-size: cover;}
.home-panel-top.apps {background-image: url("../images/monitoring-system.webp"); background-position: 50% 50%; background-size: cover; background-color: #f3f3f3}
.home-panel-top.install:hover, .home-panel-top.ev-charger:hover, .home-panel-top.battery:hover, .home-panel-top.apps:hover {transform: scale(1.05);}

.home-panel-top.renewable-energy {background: lightblue}
.home-panel-top.renewable-energy img {width: 130px}

.home-panel-bottom  { min-height:140px; padding: 15px 15px 0px 15px; text-align: center; position:relative;}
.home-panel-bottom h2 {font-size: 18px; color:#3A446F; font-weight: 500; }
.h-arrow-right {position:absolute; right:10px; top:17px;}
.home-panel-bottom p {font-size:15px; color:#212529;}
.home-panel-bottom p a {color:#212529;}
.home-panel-link  {text-decoration: none;}


.t-section-home {min-height: 315px; padding-top: 40px }
.t-section-500 {min-height: 500px; padding-top: 70px}
.t-section-300 {min-height: 200px; padding-top: 35px}

.top-background {width: 100%; background: url("../images/sky-solar-panel.webp") 50% 50%;  background-size: cover; position: relative; 
}
.top-background-contact {width: 100%; background: url("../images/solar-texture.webp") 100% 50%; background-repeat: no-repeat; background-size: cover; position: relative; 
}

.top-background-404 {width: 100%; background: url("../images/solar-storm.webp") 100% 50%; background-repeat: no-repeat; background-size: cover; position: relative }

.top-background-404:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 10000px rgba(0,0,0, 0.4);
}

.top-background-contact:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 10000px rgba(0,0,0, 0.7);
}

.top-background:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 10000px rgba(39, 61, 80, 0.6);
}


.hero-h1 {font-size:2.5em; font-weight: 600}

.hero-h2 {font-size:1.5em; font-weight: 500}

.hero-h1-service {font-size:2.5em; font-weight: 600;}

.banner-text-404 {font-size:2.8em; font-weight: 500; line-height: 150%;}

.hero-h1, .hero-h2, .hero-h1-service, .banner-text-404  {color: #fff; position: relative;}

.tagline {width:400px;}


input.form-contact, textarea.form-contact, select.form-contact { border-top:0px; border:1px solid #ddd; }
.was-validated textarea.form-control:valid, textarea.form-control.is-valid {background-image: none !important;}

.form-contact:focus { box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.5) !important; border-radius: 5px; border:1px solid #fff; }
.invalid-feedback {font-size:12px;}
.invalid-tooltip {font-size:12px;}


.cs-link { text-decoration: none; cursor: pointer;}

.cs-card {width: 100%;  border-radius: 20px; height: 100%;}

.cs-image {height: 200px; width: 100%; overflow: hidden; border-radius: 20px 20px 0 0;}

.cs-image-inner {background-position: center; background-size:cover; height: 200px; transition:all .5s }

.cs-link:hover .cs-image-inner { transform:scale(1.1) }

.cs-content h2 {color: darkorange;}

.cs-content {padding: 15px 15px 5px 15px;}

.cs-title {position: relative;} .cs-title a {text-decoration:none;}

.cs-arrow {position: absolute; right: 0; top:3px; transition:all .5s}

.cs-link:hover .cs-arrow { right:-10px;}


.accordion-item, .accordion-button {background-color: transparent; font-weight: 600; font-size: 16px;}

.accordion-button {border-bottom:2px solid #3A446F; padding: 20px}
.accordion-button:active , .accordion-button:focus {border: none; background-color: transparent; box-shadow: none !important; border-bottom:2px solid #3A446F;}

.accordion-button:not(.collapsed) {background-color: transparent;}

.accordion-button.collapsed::after  { 	
  font-family: "Font Awesome 6 Free";
  content: "\2b";
  font-size: 20px;
  font-weight: 900;
  background-image: none;
  transition: all 0.3s ease-in-out;
  transform: rotate(-180deg);
  transform-origin:center;
  height:20px;
  width: 20px; 
}

.accordion-button:not(.collapsed)::after { 	
  font-family: "Font Awesome 6 Free";
  content: "\f068";
  font-size: 20px;
  font-weight: 900;
  background-image: none;
  transition: all 0.3s ease-in-out;
  transform: rotate(180deg);
  transform-origin:center;
  height:20px;
  width: 20px;
}

.accordion-body {font-weight: normal; text-align: left; font-size: 16px;}

.scrollup {
    width: 25px;
    height: 25px;
    position: fixed;
    bottom: 20px;
    right: 10px;
    display: none;
	color: #FFC827;
	font-size: 20px;
}

.toggle-btn .fa {
    color: #fff;
    position: absolute;
    cursor: pointer;
    top: 6px;
}

.toggle-btn .switch {
    position: relative;
    display: inline-block;
    width: 54px;
    height: 27px;
}

.toggle-btn .switch input {
        display: none;
    }

.toggle-btn .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #C54C4C;
    -webkit-transition: .4s;
    transition: .4s;
}

.toggle-btn .slider:before {
        position: absolute;
        content: "";
        height: 21px;
        width: 21px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

.toggle-btn input:checked + .slider {
  
background-color: #46AA73;
}

.toggle-btn input:focus + .slider {
    box-shadow: 0 0 1px #46AA73;
}

.toggle-btn input:checked + .slider:before {
    -webkit-transform: translateX(27px);
    -ms-transform: translateX(27px);
    transform: translateX(27px);
}

.toggle-btn .slider.round {
    border-radius: 34px;
}

.toggle-btn .slider.round:before {
        border-radius: 50%;
    }

.toggle-btn .fa-check {
    left: 8px;
}

.toggle-btn .fa-remove {
    right: 8px;
    z-index: 1;
}

.privacy-label { padding-left: 10px; font-size:14px }

.scrollup:hover {
	width: 25px;
    height: 25px;
	display:block;
	position: fixed;
	overflow:hidden;
	color: #FFC827;
	font-size: 20px;
}



footer {background:#212529}

.container-xl {
    max-width: 1680px;
}
  	
@media (max-width: 576px) {.banner-text-404 {font-size:2em} .home-panel-bottom h2 {font-size: 21px; }  .tagline {width:320px;} }

@media (max-width: 768px) { .btn-xs-w {width:100%;}  }

@media (max-width: 992px) { .home-panel-bottom p {font-size:18px;} .areas {font-size:20px;} }

@media (max-width: 1200px) {  .hero-h1 {font-size:2.4em;} .hero-h2 {font-size:1.4em;} }

@media (min-width: 1200px) { .hero-h1 {font-size:2.8em;} .hero-h2 {font-size:1.6em;} }