/* -------------BODY CONTENT------------- */

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

/* #region -------------NAVBAR CONTENT-------------  */

#navMenuID {
  margin: 0 60px 0 0;
  padding-right: 40px;
}

#navMenuIDLast {
  margin: 0 60px 0 0;
  padding-right: 100px;
}

#navMenuID::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: #0f3325;
  transition: width 0.3s;
}

#navMenuID:hover::after {
  width: 100%;
  transition: width 0.3s;
}

#navMenuIDLast::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: #0f3325;
  transition: width 0.3s;
}

#navMenuIDLast:hover::after {
  width: 100%;
  transition: width 0.3s;
}

li a {
  text-decoration: none;
  display: inline-block;
  color: #fff;
  font-size: 20px;
  padding: 0 20px;
}

#navbarBrandLogo {
  width: 15%;
  max-width: 96px;
  height: auto;
  margin: 0.5vw 0 0.5vw 8.5vw;
}

#jumboTitle {
  font-size: clamp(16px, 4vw, 26px);
  margin-left: 20px;
}

.navText {
  font-size: clamp(14px, 3vw, 24px);
  text-align: center;
}

.dropdown-menu {
  background-image: url("newSDDWM.png");
  background-repeat: no-repeat;
  background-position: center;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  visibility: hidden;
}

.dropdown-item:hover {
  background-image: url("41newEgESDDCurr.png");
  background-repeat: no-repeat;
  background-position: center;
}

.dropdown-divider {
  margin: 0px;
  padding: 0px;
}

#navbarToggleBtn {
  border: none;
  padding-right: 10px;
  padding-left: 8px;
  visibility: hidden;
}

@media screen and (max-width: 500px) {
    #nav-bar {
        width: auto;
        height: 70px;
        background-image: url("newImages/headerBar360x70.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        margin: 0px;
        padding: 0px;
        position: relative;
    }
}
  

@media screen and (max-width: 500px) {
    #navbarBrand {
        width: 30%;
        height: auto;
        padding-bottom: 5px;
        margin: 0.5vw 0 0.5vw 1vw;
        content: url("Images/brand/logoEGW.png");
        margin-left: 6rem;
    }
}
  

/* #endregion */

/* #region ------------CONTACT FORMS------------  */

#formOverlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

#contactFormID {
  margin: 0px;
}

#formNameContainer {
  position: relative;
  display: block;
  margin-top: 150px;
  height: auto;
  width: 30%;
  clear: both;
  float: left;
}

#formMessageContainer {
  margin: 0px;
  float: right;
  position: relative;
  margin-top: 180px;
  margin-right: 180px;
}

#formSubmitBtnID {
  margin-top: 50px;
  left: 160px;
  font-weight: 600;
  border: solid 2px black;
  outline: 0;
  padding: 0.5rem 2rem;
  font-size: 1.5rem;
  letter-spacing: 0.08rem;
  background-color: white;
  border-radius: 0.35rem;
  position: relative;
  cursor: pointer;
}

#formSubmitBtnID:hover {
  box-shadow: 3px 5px #0f3325;
  background-color: #58932a;
  color: #fff;
}

#formNameContainer label {
  font-size: clamp(16px, 3vw, 18px);
  font-weight: 600;
}

input,
label {
  margin-left: 120px;
}

input {
  margin-bottom: 40px;
  border: 2px solid #0f3325;
  box-shadow: -2px 5px #555;
}

input:focus {
  border: none;
  box-shadow: -2px 5px #58932a;
}

input:focus::placeholder {
  color: transparent;
}

textarea {
  border: 2px solid #0f3325;
  box-shadow: -2px 5px #555;
}

textarea:focus::placeholder {
  color: transparent;
}

.formCenter {
  position: relative;
  margin: 0px;
  margin-top: 150px;
  margin-right: 20%;
  margin-left: 23%;
  clear: both;
  display: none;
  height: 768px;
  width: auto;
  background-position: center;
  background-repeat: no-repeat;
  background: url("newEgEContactForm.png") no-repeat 0 0;
}

.contactForm {
  margin: 0px;
}

.close-icon {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  border-width: 3px;
  border-style: solid;
  border-color: red;
  border-radius: 15%;
  background: -webkit-linear-gradient(
      -45deg,
      transparent 0%,
      transparent 46%,
      white 46%,
      white 56%,
      transparent 56%,
      transparent 100%
    ),
    -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%, white
          56%, transparent 56%, transparent 100%);
  background-color: red;
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  float: right;
  right: 90px;
  top: 28px;
}

.formCALL {
  position: fixed;
  margin: 0px;
  top: 245px;
  left: 38%;
  color: red;
  text-align: center;
  font-size: clamp(20px, 4vw, 26px);
  font-weight: bold;
}

#formCALLBOTTOM {
  top: 725px;
}

/* #endregion */

/* #region -------------MAIN JUMBO BODY------------- */

#jumbotron {
  background-color: #e9ecef; /* f5f6f7 */
  text-align: center;
  position: relative;
  font-size: 16px;
  margin: 0px;
  overflow: hidden;
  display: block;
  height: auto;
}

#mainContainer {
  margin: 0 auto;
  position: relative;
  width: 100%;
  height: 100%;
}

#mainBrandContainer {
  display: flex;
  width: 100%;
  height: auto;
  margin: 0px;
  margin-left: auto;
  margin-right: auto;
  clear: both;
  justify-content: center;
}

#brand {
  width: 50%;
  height: 50%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  clear: both;
}

#mainJumboPBot {
  margin-bottom: 15px;
}

.mainJumboP {
  font-size: clamp(16px, 3vw, 20px);
  display: inline-block;
  margin: 0;
}

.emailJumbo {
  visibility: visible;
}

/* #endregion */

/* #region -------------ABOUT US CONTAINER------------- */

#aboutUsJumbo {
  margin: 0px auto;
  clear: both;
}

#image3 {
  visibility: hidden;
  width: 0;
  height: 0;
}

img {
  margin: 0px auto;
  transition: 1 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  width: 25%;
  height: auto;
  float: left;
}

.imageColumns {
  margin: 0px auto;
  height: 100%;
  width: 100%;
}

.fade-in-image {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-duration: 2s;
  animation-direction: alternate;
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* #endregion */

/* #region ------------INITIATIVES------------ */

#jumbotronInitiative {
  background-color: #fff; /* f5f6f7 */
  text-align: left;
  position: relative;
  font-size: 16px;
  margin: 0px;
  overflow: hidden;
  height: 620px;
}

#companyInitiativeTitle {
  text-decoration: underline 2px solid;
  text-align: center;
  font-size: clamp(20px, 3vw, 24px);
  width: auto;
  height: fit-content;
}

#companyInitiativeDescription {
  visibility: hidden;
  height: 280px;
  margin: 0;
}

#companyInitiativeDescription::after {
  visibility: visible;
  font-size: clamp(14px, 3vw, 18px);
  margin-top: 20px;
  margin-right: 20px;
  text-align: center;
  content: "We here at Evergreen Electrical want what is best for our clients and will make sure that we meet our customers expectations by providing our clients with the best of services. We offer a wide range of services such as residential, commercial and industrial. We provide maintenance and installations for customers in the industrial and commercial businesses that need to have the business continuously operational and to make sure that they are provided with the best of services.";
  position: absolute;
  display: block;
  top: 18px;
}

#companyInitiativeDescriptionEnd {
  font-size: clamp(18px, 3vw, 20px);
  margin: 20px 0 0 0;
  text-align: center;
}

.CompanyInitiative {
  width: 80%;
  height: 100%;
  clear: both;
  position: absolute;
  margin: 0;
  right: 32px;
}

.CompanyInitiativeIcons {
  margin: 10px 5% 26px 5%;
  clear: both;
  width: 90%;
  height: auto;
  position: absolute;
  bottom: 0;
  left: 32px;
}


.initiativeIcons {
  border: 2px solid #555;
  width: 17%;
  margin: 5px 5px;
  padding: 10px 10px;
}

@media screen and (min-width: 400px) {
    #companyInitiativeDescriptionEnd {
      font-size: clamp(18px, 3vw, 20px);
      margin: 0;
      text-align: center;
    }
  }

@media screen and (min-width: 400px) {
    .CompanyInitiativeIcons {
      margin: 10px 15% 26px 15%;
      clear: both;
      width: 85%;
      height: auto;
      position: absolute;
      bottom: 0;
      left: 8px;
    }
  }

/* #endregion */

/* #region ------------SERVICES------------ */

@media screen and (max-width: 500px) {
  #servicesRight {
    bottom: 0;
    right: 0;
    width: 45%;
    height: auto;
  }

  #servicesLeft {
    width: 45%;
    height: auto;
    top: 0;
    left: 0;
  }

  #serviceResidential {
    display: block;
    margin: 0;
    padding: 0;
    visibility: hidden;
  }

  #serviceResidential::after {
    visibility: visible;
    content: "The residential services that we provide here at Evergreen Electrical Inc are designed for any job at home. Whether it is a fresh new build home or an older dated home, we are able to set up the clients with our electricians and provide them the service they need to get the job done. We provide the services that they need in an orderly and timely manner to ensure that our customers are happy and comfortable in their own homes.";
    position: absolute;
    top: 180px;
    left: 30px;
    width: 80%;
  }

  #serviceResidentialInner {
    display: block;
    margin: 0;
    margin-left: 5%;
    margin-right: 10%;
    padding: 0;
    position: absolute;
    bottom: 190px;
    width: 80%;
  }

  #serviceCommercial {
    display: none;
    margin: 0;
    padding: 0;
    visibility: hidden;
  }

  #serviceCommercial::after {
    visibility: visible;
    position: absolute;
    top: 180px;
    left: 30px;
    width: 80%;
    content: "We here at Evergreen Electrical Inc understand that intelligent hard working people are the requirements for any business to succeed. We want to have the business running in a professional manner and to build that reputation that will be the defining factor for your business. The service we provide for our commercial clients is one of the top in the electrical industry as we offer a variety of services such as installations/maintenance of breakers, panels, electrical meters, chargers and light fixtures.";
  }

  #serviceCommercialInner {
    display: none;
    margin: 0;
    padding: 0;
    visibility: hidden;
  }

  #serviceIndustrial {
    display: none;
    margin: 0;
    padding: 0;
    visibility: hidden;
  }

  #serviceIndustrial::after {
    visibility: visible;
    position: absolute;
    top: 180px;
    left: 30px;
    width: 80%;
    content: "At the industrial level, our clients are working on a variety of projects constantly and are in a need to be in a state of continuous operations. That's why we send our top masters electricians for such a demanding project. We are aware of the reputation of the client and what the business means to them, whether it is an international or domestic business, we want to be able to hold that same set of standards and reputation that they themselves uphold.";
  }

  #serviceIndustrialInner {
    display: none;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 80%;
    bottom: 80px;
    visibility: hidden;
  }

  #servicesResidentialIcons {
    display: block;
    margin: 0;
    padding: 0;
  }

  #servicesCommercialIcons {
    display: none;
    margin: 0;
    padding: 0;
  }

  #servicesIndustrialIcons {
    display: none;
    margin: 0;
    padding: 0;
  }

  #jumbotronServices {
    background-color: #e9ecef; /* f5f6f7 */
    text-align: center;
    position: relative;
    font-size: 16px;
    margin: 0px;
    overflow: hidden;
    display: block;
    height: 700px;
  }

  #companyServicesTitle {
    font-size: clamp(26px, 3vw, 28px);
    margin: 20px 0 0 0;
  }

  .servicesTopDiv {
    margin-top: 20px;
  }

  .servicePara {
    font-size: clamp(16px, 3vw, 18px);
    text-align: center;
    margin: 0;
  }

  .servicesImages {
    clear: both;
    margin: 0px;
    position: absolute;
    padding: 0;
  }

  .servicesTable {
    margin: 28px 0px 14px 0px;
    position: relative;
    clear: both;
    width: 100%;
    height: 40px;
  }

  .serviceBtn {
    text-align: center;
    display: inline-block;
    font-size: clamp(16px, 3vw, 18px);
    border-left: 4px solid #0f3325;
  }

  .serviceBtn::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    background: #0f3325;
    transition: width 0.3s;
  }

  .serviceBtn:hover::after {
    width: 100%;
    transition: width 0.3s;
  }

  .servicesIcons {
    width: 18%;
    height: auto;
    border: 2px solid #555;
    margin: 18px 20px 0px 20px;
    padding: 4px;
  }

  .servicesIconsDiv {
    position: absolute;
    width: 100%;
    height: auto;
    clear: both;
    margin: 0px;
    padding: 0;
    bottom: 80px;
  }

  .table th {
    font-size: clamp(12px, 3vw, 14px);
    padding: 0px 0px;
    border-style: none;
  }

}

/* #endregion */

/* #region -------------FOOTER------------- */

#footer {
  background-image: url("newImages/headerBar360x70.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 70px;
  width: 100%;
  margin: 0px;
  padding: 0px;
  position: relative;
  overflow: hidden;
}

#footerRow {
  padding-top: 20px;
}

#footerRow button {
  color: #fff;
  text-align: center;
}

#footerBrand {
  margin: 2px 0px 0px 22px;
  width: 33%;
  height: auto;
}

#footerFollower {
  text-align: center;
  visibility: hidden;
  height: 0px;
}

#footerInfo {
  color: #fff;
  text-decoration: underline 2px;
  height: 20px;
}

#footerLinks {
  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  right: 0;
}

table {
  margin: 0px;
  margin-top: 20px;
  margin-left: 50px;
  width: auto;
  height: 100%;
}

td {
  width: 100px;
  height: 30px;
  color: #e9ecef;
  text-align: center;
}

.footerTable {
  height: 0;
  margin: 0;
  visibility: hidden;
}

.footerTableFollow {
  color: #fff;
  margin: 0;
  width: 100%;
  text-decoration: underline 2px;
  position: absolute;
  top: 0;
  right: 40px;
  height: 70px;
}

.footerTableFollow table {
  margin: 0;
}

.footerTitle {
  font-size: clamp(14px, 3vw, 22px);
  text-align: center;
  position: relative;
}

.footerBrandImage {
  margin: 0px;
  position: relative;
  clear: both;
  width: 50%;
  height: auto;
}

.footerText {
  font-size: clamp(14px, 3vw, 20px);
}

.footerCC {
  margin: 0;
  position: absolute;
  clear: both;
  top: 52px;
  left: 12px;
}

.footerBtn {
  border: none;
  text-align: center;
  display: inline-block;
  background: none;
  margin: 0px;
  padding: 0px;
}

/* Style all font awesome icons */
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

/* Twitter */
.fa-twitter {
  background: #55acee;
  color: white;
}

@media screen and (min-width: 400px){
    .footerBrandImage {
        margin: 0px;
        position: relative;
        clear: both;
        width: 50% !important;
        height: auto;
    }

    #footerBrand {
        margin: 2px 0px 0px 30px;
        width: 30%;
        height: auto !important;
    }
}

/* #endregion */

/* -------------TO TOP BTN------------- */

#toTopBtn {
  display: none;
  position: fixed;
  bottom: 22px;
  right: 34px;
  z-index: 99;
  padding: 6px;
  border: none;
  outline: none;
  background-color: #597b94;
  color: #393e44;
  cursor: pointer;
  border-radius: 12px;
  font-weight: bolder;
  width: 38px;
  height: auto;
}

#toTopBtnImg {
  width: 100%;
  height: auto;
}

/* -------------MISC------------- */

body {
  position: relative;
}