@use "./mixins" as m;
@use "./variables" as v;
html {
  font-family: "roboto", sans-serif;
  font-weight: 400;
  font-style: normal; }

h1, h2, h3, h4, h5, h6 {
  font-family: "bebas-neue-by-fontfabric", sans-serif;
  font-weight: 700;
  font-style: normal;
  width: 100%;
  padding-bottom: 20px;
  color: #000; }

h1 {
  font-size: 6rem;
  line-height: 60px; }
  @media screen and (max-width: 768px) {
    h1 {
      font-size: 3rem; } }

h2 {
  font-size: 4rem;
  line-height: 6.2rem;
  padding-bottom: 5px; }
  @media screen and (max-width: 768px) {
    h2 {
      font-size: 3rem; } }

h3, h4, h5, h6 {
  font-size: 2.7rem; }

ul#menu-main-menu li a {
  display: inline-block; }

.menu-electrical-services:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0eb";
  font-weight: 900;
  padding-right: 8px;
  display: inline-block;
  color: #ffff00; }

.menu-security:before {
  font-family: "Font Awesome 5 Free";
  content: "\f134";
  font-weight: 900;
  padding-right: 8px;
  display: inline-block;
  color: #ffff00; }

.menu-renewable:before {
  font-family: "Font Awesome 5 Free";
  content: "\f1b9";
  font-weight: 900;
  padding-right: 8px;
  display: inline-block;
  color: #ffff00; }

.menu-news:before {
  font-family: "Font Awesome 5 Free";
  content: "\f303";
  font-weight: 900;
  padding-right: 8px;
  display: inline-block;
  color: #ffff00; }

p {
  font-family: "roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 2.5rem;
  color: #000; }

p a {
  font-weight: bold;
  max-width: inherit !important;
  width: auto !important;
  color: #000;
  text-decoration: underline; }
  p a:hover {
    text-decoration: underline;
    color: #000; }

li {
  font-family: "roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem; }
  li a {
    font-size: 1.5rem;
    font-family: "roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #000; }
    li a:hover {
      text-decoration: underline;
      color: #000; }

a {
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s; }

a, a:hover, a:visited, a:focus {
  text-decoration: none;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s; }

.primary-button, .wpcf7-submit {
  color: #000;
  background: #F5EE1E;
  font-family: "bebas-neue-by-fontfabric", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.8rem;
  text-transform: uppercase;
  padding: 1.5rem 2rem 1.1rem 2rem;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  font-weight: 900;
  display: inline-block;
  letter-spacing: 1px;
  text-decoration: none;
  border: none; }
  .primary-button:after, .wpcf7-submit:after {
    content: "\f0a9";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    color: #000;
    position: relative;
    top: 0px;
    margin-left: 20px; }
  .primary-button:hover, .wpcf7-submit:hover {
    color: #FFF;
    text-decoration: none;
    background: #000; }

@use "./mixins" as m;
@use "./variables" as v;
body {
  background: #fff; }

section {
  display: block;
  width: 100%; }

.intro {
  padding: 0 0 30px 0; }

#breadcrumbs {
  font-size: 1.3rem; }

.social-media a i {
  color: #000;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
  font-size: 3.2rem; }

.error404 #internal-banner h1 {
  padding-top: 30px !important;
  font-size: 5rem !important; }
.error404 #internal-banner p {
  color: #FFF;
  font-size: 1.7rem !important; }
.error404 #internal-banner .primary-button {
  margin-bottom: 30px; }

#fifty-repeater-container h2 {
  font-size: 6rem; }
  @media screen and (max-width: 768px) {
    #fifty-repeater-container h2 {
      font-size: 3rem;
      line-height: 35px; } }

.black-spacer {
  width: 100%;
  height: 80px;
  background-color: #000; }

.white-spacer {
  width: 100%;
  height: 150px;
  background-color: #000; }

@use "./mixins" as m;
@use "./variables" as v;
#header {
  position: fixed !important;
  z-index: 1000; }

#header .head-number {
  color: #FFF;
  font-family: "roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2rem;
  margin-right: 20px; }
  #header .head-number a {
    font-family: "roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-weight: 700;
    color: #FFF; }

@media screen and (max-width: 768px) {
  #header .top-header .d-flex {
    display: block !important; }
    #header .top-header .d-flex .header__logo-wrapper {
      text-align: center; }
    #header .top-header .d-flex .header-contact {
      text-align: center; } }

/* =====================================
======= Navigation
=======================================*/
#header #nav-section {
  margin-top: 1rem !important; }

@media screen and (max-width: 768px) {
  .navbar-toggler {
    margin-top: 10px; } }

.navbar-toggler-icon {
  font-size: 2.2rem; }

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none; }

a.dropdown.nav-link::after {
  content: '\f078';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 1.4rem;
  padding-left: 5px; }

.dropdown-item {
  padding: 1rem; }

.dropdown-item span {
  color: #000;
  font-family: "bebas-neue-by-fontfabric", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.5rem; }

.dropdown-menu {
  border-radius: 0; }

ul#menu-main-menu li a {
  color: #FFF;
  font-weight: 700;
  text-transform: uppercase;
  font-family: "bebas-neue-by-fontfabric", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2rem;
  letter-spacing: 1px; }

@media screen and (min-width: 768px) {
  ul#menu-main-menu > li.dropdown:hover > ul.dropdown-menu {
    display: block; }

  li.dropdown > a::after {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 0.5rem; }

  ul#menu-main-menu {
    width: 100%;
    display: flex;
    justify-content: space-between; } }
#hero-banner {
  background-color: #000;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%); }
  @media screen and (max-width: 1199px) {
    #hero-banner {
      clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%); } }
  @media screen and (max-width: 768px) {
    #hero-banner {
      clip-path: polygon(0 0, 100% 0, 100% 95%, 0% 100%); } }
  #hero-banner .banner-text-wrapper {
    position: relative;
    padding: 150px 0 5% 0;
    z-index: 10; }
    @media screen and (max-width: 992px) {
      #hero-banner .banner-text-wrapper {
        padding: 150px 0 8% 0; } }
    @media screen and (max-width: 768px) {
      #hero-banner .banner-text-wrapper {
        padding: 200px 0 5% 0; } }
    #hero-banner .banner-text-wrapper h2 {
      color: #FFF;
      font-size: 10rem;
      line-height: 8.4rem;
      padding: 0 0%; }
      @media screen and (max-width: 992px) {
        #hero-banner .banner-text-wrapper h2 {
          font-size: 4rem;
          line-height: 4.2rem;
          padding: 0%; } }
      @media screen and (max-width: 768px) {
        #hero-banner .banner-text-wrapper h2 {
          font-size: 3rem;
          line-height: 3.2rem;
          padding: 0; } }
    #hero-banner .banner-text-wrapper p {
      color: #FFF;
      margin: 0 !important;
      font-size: 2rem; }

#hero-banner .image-area {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px; }
  #hero-banner .image-area img {
    max-width: 20%; }
    @media screen and (max-width: 992px) {
      #hero-banner .image-area img {
        max-width: 40%; } }

#footer .quick-links {
  width: 48%; }
  @media screen and (max-width: 600px) {
    #footer .quick-links {
      width: 100%; } }

#footer {
  background: #DBDBDB; }
  #footer .quick-links h3 {
    color: #000;
    font-size: 4rem;
    padding-bottom: 15px !important; }
  #footer .quick-links ul {
    padding: 0; }
    #footer .quick-links ul li {
      color: #000;
      list-style-type: none;
      padding-bottom: 10px; }
      #footer .quick-links ul li a {
        color: #000;
        font-weight: 500; }
  #footer .foot-contact h3 {
    color: #000;
    font-size: 4rem;
    padding-bottom: 15px !important; }
  #footer .foot-contact ul {
    padding: 0; }
    #footer .foot-contact ul li {
      color: #000;
      list-style-type: none;
      padding-bottom: 10px; }
      #footer .foot-contact ul li a {
        color: #000; }
  #footer .foot-contact p {
    color: #000; }
    #footer .foot-contact p a {
      color: #000;
      text-decoration: none; }
      #footer .foot-contact p a:hover {
        text-decoration: underline; }

#footer .rtb-logo {
  max-width: 65px; }
  @media screen and (max-width: 768px) {
    #footer .rtb-logo {
      margin-bottom: 15px; } }

#copyright {
  background: #959595; }
  @media screen and (max-width: 768px) {
    #copyright {
      text-align: center; }
      #copyright .container {
        display: block !important; }
        #copyright .container .social-media {
          margin: 10px 0; } }
  #copyright p {
    color: #FFF;
    margin-bottom: 0; }
    #copyright p a {
      color: #FFF;
      text-decoration: none;
      font-weight: bold; }
      #copyright p a:hover {
        text-decoration: underline; }
  #copyright .social-media {
    padding-bottom: 0.5rem; }
    #copyright .social-media a:hover i {
      color: #FFF; }

#hero-banner .testimonial-section {
  padding-bottom: 10%; }
  #hero-banner .testimonial-section h2 {
    color: #FFF; }
  #hero-banner .testimonial-section .testimonial-text p {
    color: #FFF; }
  #hero-banner .testimonial-section .stars i {
    font-size: 2rem;
    color: #F5EE1E;
    padding: 0 3px; }

#services-module h2 {
  font-size: 6rem; }
  @media screen and (max-width: 768px) {
    #services-module h2 {
      font-size: 3rem;
      line-heoght: 40px; } }
#services-module h2::after {
  bottom: -10px;
  content: url("/wp-content/uploads/2024/06/Untitled-design-1.png");
  display: block;
  margin-top: 2px; }
#services-module .service-area-wrap ul li {
  list-style-type: none;
  position: relative;
  z-index: 100;
  padding: 3rem;
  transition: all 0.3s ease-in-out; }
  #services-module .service-area-wrap ul li a {
    display: block;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    border-radius: 30px;
    overflow: hidden;
    width: 100%;
    position: relative;
    min-height: 450px;
    border: solid 13px #ffffff91;
    -webkit-box-shadow: 4px 6px 16px 5px #474747;
    -moz-box-shadow: 4px 6px 16px 5px #474747;
    box-shadow: 4px 6px 16px 5px #474747; }
    #services-module .service-area-wrap ul li a .image-wrap {
      width: 100%;
      display: block; }
      #services-module .service-area-wrap ul li a .image-wrap img {
        width: 100%;
        height: auto; }
    #services-module .service-area-wrap ul li a .button-wrap {
      position: absolute;
      bottom: 50px;
      width: 100%;
      text-align: center; }
      #services-module .service-area-wrap ul li a .button-wrap .primary-button {
        width: 90%;
        padding: 2rem 0; }
#services-module .service-area-wrap ul li:hover {
  transform: translateY(-3px); }

#usp {
  background-color: #000;
  padding-top: 20rem;
  margin-top: -20rem;
  clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%); }
  @media screen and (max-width: 1199px) {
    #usp {
      clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%); } }
  @media screen and (max-width: 768px) {
    #usp {
      clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%); } }
  #usp h2 {
    color: #FFF;
    text-align: center; }
  #usp ul {
    margin-top: 30px; }
    #usp ul li {
      list-style-type: none;
      text-align: center; }
      #usp ul li i {
        color: #FFF;
        -webkit-border-radius: 70px;
        -moz-border-radius: 70px;
        -ms-border-radius: 70px;
        border-radius: 70px;
        width: 130px;
        height: 130px;
        border: 5px solid #F5EE1E;
        line-height: 120px;
        font-size: 5rem;
        background-color: #212121; }
      #usp ul li .usp-text {
        color: #FFF;
        width: 100%;
        display: block;
        text-align: center;
        padding-top: 20px;
        font-size: 3rem;
        font-family: "bebas-neue-by-fontfabric", sans-serif;
        font-weight: 700;
        font-style: normal;
        line-height: 3rem; }
        @media screen and (max-width: 768px) {
          #usp ul li .usp-text {
            font-size: 2.5rem; } }

#renewable-links {
  background-color: #000;
  z-index: 1; }
  #renewable-links .intro h1, #renewable-links .intro h2, #renewable-links .intro h3, #renewable-links .intro h4, #renewable-links .intro h5, #renewable-links .intro h6, #renewable-links .intro span, #renewable-links .intro p, #renewable-links .intro a, #renewable-links .intro li {
    color: #fff; }
  #renewable-links .intro h1, #renewable-links .intro h2, #renewable-links .intro h3, #renewable-links .intro h4, #renewable-links .intro h5, #renewable-links .intro h6 {
    font-size: 6rem; }
    @media screen and (max-width: 768px) {
      #renewable-links .intro h1, #renewable-links .intro h2, #renewable-links .intro h3, #renewable-links .intro h4, #renewable-links .intro h5, #renewable-links .intro h6 {
        font-size: 3rem;
        line-height: 40px; } }
  #renewable-links ul li {
    list-style-type: none;
    position: relative;
    z-index: 1; }
    #renewable-links ul li a {
      float: left;
      width: 100%;
      background: #FFF;
      margin-bottom: 40px;
      -webkit-box-shadow: 4px 6px 16px 5px #474747;
      -moz-box-shadow: 4px 6px 16px 5px #474747;
      box-shadow: 4px 6px 16px 5px #474747;
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      -ms-border-radius: 30px;
      border-radius: 30px;
      overflow: hidden; }

#renewable-links ul li a .image-wrap {
  width: 30%;
  display: inline-block;
  min-height: 300px;
  float: left; }
#renewable-links ul li a .cta-text {
  width: 70%;
  display: block;
  float: left;
  padding: 50px; }
  #renewable-links ul li a .cta-text .primary-button {
    float: right; }

#contact-module {
  position: relative;
  clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
  padding-top: 20rem;
  margin-top: -20rem;
  background-color: #fff;
  z-index: 0;
  overflow: hidden; }
  #contact-module h1, #contact-module h2, #contact-module h3 {
    font-size: 6rem; }
    @media screen and (max-width: 768px) {
      #contact-module h1, #contact-module h2, #contact-module h3 {
        font-size: 3rem;
        line-height: 40px; } }
  @media screen and (max-width: 1199px) {
    #contact-module {
      clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%); } }
  @media screen and (max-width: 768px) {
    #contact-module {
      clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%); } }
  #contact-module input[type=checkbox] {
    position: relative;
    opacity: 0;
    width: 30px;
    height: 30px;
    z-index: 50;
    cursor: pointer;
    margin-right: 1rem; }
  #contact-module input[type=checkbox] + span:before {
    display: block;
    position: absolute;
    content: '';
    border-radius: 0;
    height: 30px;
    width: 30px;
    top: -5px;
    left: 15px;
    border: 2px solid #d5d5d5;
    background-color: #d5d5d5; }
  #contact-module input[type=checkbox] + span:after {
    display: block;
    position: absolute;
    content: "\2713";
    height: 30px;
    width: 30px;
    top: -5px;
    left: 15px;
    visibility: hidden;
    font-size: 20px;
    text-align: center;
    line-height: 30px;
    color: #000;
    font-weight: 700; }
  #contact-module input[type=checkbox]:checked + span:after {
    visibility: visible; }
  #contact-module input[type="submit"] {
    float: right; }
  #contact-module input[type="submit"]:after {
    content: "\f0a9";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    color: #000;
    position: relative;
    top: 0px;
    margin-left: 20px; }

@media screen and (max-width: 767px) {
  #contact-module input[type=checkbox] + span:before {
    top: -30px; }
  #contact-module input[type=checkbox] + span:after {
    top: -30px; } }
@media screen and (max-width: 340px) {
  #contact-module input[type=checkbox] + span:before {
    top: -54px; }
  #contact-module input[type=checkbox] + span:after {
    top: -54px; } }

/*# sourceMappingURL=main.css.map */