/*---Navigation COntrols---------------------------------------------------------------*/
  :root{
    /* Navbar */
    --navbar-background-color: #242424 ;
    --navbar-font-color-1: #ffffff;
    --navbar-font-color-2: #22272acc;

    --navbar-accent-color-1: #FAA500;
    --navbar-accent-color-2 :#3b3b3b;
    --navbar-hover-color: #555;
    --navbar-toggle-color: #ffffff;
    /* Dropdown */
    --dropdown-background-color: #242424 ;
    --navbar-height: 166px;
    --navbarBtn-off-color: var(--navbar-background-color);
    --navbarBtn-on-color: #555;
  }
 


  /*---Navigation bar TOP SECTION---------------------------------------------------------------*/
  .navbar-section{
    background-color: var(--navbar-background-color);
    width: 100%;
  }  
  .navbar-wrapper{
    max-width: var(--bodyMaxWidth);
    padding-left: var(--responsive-padding);
    padding-right: var(--responsive-padding);
    margin-left: auto;
    margin-right: auto;
  }
  /*---Navigation bar TOP SECTION---------------------------------------------------------------*/
  .navbarScore{
    height: 2px;
    background-color: var(--navbar-accent-color-2);
    width: 100%;
  }
    
  /*---Navigation bar MIDDLE SECTION COMPRISED OF GROUPS navbarGroup1 AND navbarGroup3and2--------------------------------*/
  .navbar {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    height: auto;
  }

/*---Navigation bar GROUP 1 ---------------------------------------------------------------*/
  .navbarGroup1{
    display: flex;
    margin: 0;
    padding: 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
/* Company Logo*/
  .navbar-logo {
    background-image: url(../images/logo/rex-industrial-logo.JPG);
    width: 160px;
    padding-bottom: 52%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-top: 5%;
    margin-bottom: 5%;
  }
 /* Toggle and Call button, only to be displayed when screen is small */
.phoneButtons{
  display: none;
  flex-direction: row;
  align-items: center;
  padding: 5px;
  width: 120px;
  justify-content: space-between;
}
/* Phone Button style */
.navbarPhoneIcon.phone{
  height: 60px;
  width: 60px;
  margin: 0;
  background-image: url(../images/icons/phone-icon-orange.png);
  background-size: contain;
  background-repeat: no-repeat;
  align-self: center;
}
/* Toggle Button style */
.navbar-toggle-button {
    flex-direction: column;
    justify-content: space-between;
    display: flex;
    width: 60px;
    height: 50px;
  }
  .navbar-toggle-button .bar {
    height: 6px;
    width: 100%;
    background-color: var(--navbar-toggle-color);
    border-radius: 3px;
  }


  /*---Navigation bar navbarGroup3and2 ---------------------------------------------------------------*/
.navbarGroup3and2{
  display: flex;
  flex-direction: column;
  margin-left: 0;
  padding-left: 0;
}
/*---MEDIA ICONS -Navigation bar GROUP 3 --MEDIA ICONS-------------------------------------*/
.navbarGroup3{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.navbar-link-icons{
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.navbarIcon{
  height: 50px;
  width: 50px;
  margin:5px;
  margin-left: 15px;
  object-position: right;
  background-size:contain;
  background-repeat: no-repeat;
}
.navbarIcon.facebook{
  background-image: url(../images/icons/facebook-icon-black.png);
}
.navbarIcon.youtube{
  background-image: url(../images/icons/youtube-icon-black.png);
}
.navbarIcon.instagram{
  background-image: url(../images/icons/instagram-icon-black.png);
}
.navbarIcon.linkedIn{
  background-image: url(../images/icons/linkedin-icon-black.png);
}

/*---Level 1 List - Navigation bar GROUP 2 -------------------------------------------------------*/
  .navbarGroup2{
    display: flex;
    justify-content: flex-end;
    padding-top: 15px;
    padding-bottom: 15px;
    z-index: 100;
  }
  .navbarGroup2 ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
  }
  .navbarGroup2 ul h4 {
    color: var(--navbar-font-color-1);
    padding: 15px;
    font-size: 1.25rem;
  }
  .navbarGroup2 li {
    list-style: none;
    padding: 0;
  }
  .navbarGroup2 li a {
    text-decoration: none;
    color: var(--navbar-font-color-1);
    padding: 0;
    display: block;
    font-weight: bold;
  }
  .navbarGroup2 li:hover{
    background-color: var(--navbar-hover-color);
    cursor: pointer;
  }




  
  
/*---LIST LEVEL 2 Navigation bar DROPDOWN SECTION---------------------------------------------------------------*/

/*CONTAINS ENTIRE DROPDOWN USED FOR FLEX GROW CONTROL*/
.dropdown-container{
  position: absolute;
  left:calc(-50svw + 50%);
  width: 100svw;
  background-color: white;
  transition: 300ms ease-in-out;
  overflow: hidden;
  max-height: 0px;
  display: flex;
  flex-direction: column;
}
.background-color-one{
  background-color: white;
}
.background-color-two{
  background-color: var(--navbar-background-color);
}


 /* All sections  */
.text{
  display: flex;
}
.text h3{
  transition: 200ms;
  color: var(--navbar-accent-color-2)
}
.text h3:hover{
 color: var(--navbar-accent-color-1)
}
.dropdown-section{
  width: 100%;
  max-width: var(--bodyMaxWidth);
  margin-left: auto;
  margin-right: auto;
}
.dropdown-container h3{
  padding-top: calc(var(--responsive-padding)/3);
  padding-bottom: calc(var(--responsive-padding)/3);
}

/* Section 1 */
.dropdown-section.one{
  padding-top: calc(var(--responsive-padding)/2);
  padding-left: var(--responsive-padding);
  padding-right: var(--responsive-padding);
}
.dropdown-section.one h3{
  font-size: 20px;
}
/* Section 2 */
.dropdown-section.two {
  display: grid;
  grid-auto-flow:dense;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 2;
  padding-left: var(--responsive-padding);
  padding-right: var(--responsive-padding);
  padding-bottom: var(--responsive-padding);
}
.dropdown-section.two h3{
  font-size: 15px;
}


/* Section 3 */
.dropdown-section.three {
  display: grid;
  grid-auto-flow:dense;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 2;
  padding-left: calc(2*var(--responsive-padding)/3);
  padding-right: calc(2*var(--responsive-padding)/3);
}
/* Section 3 service box*/
.service-box{
 margin: calc(var(--responsive-padding)/3);
 background-color: #2e2c2c;
}
.service-box .content-container{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}
.service-box .upper-content{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.service-box .upper-content h3{
  color: white;
  font-size: 15px;
  padding: 10px;
}
.service-box .upper-content p{
  color: white;
  font-size: 15px;
  padding: 10px;
}
.service-box .lower-content h3{
  color: var(--navbar-accent-color-1);
  font-size: 15px;
  padding: 10px;
}
.service-box .upper-content .navbarScore{
  background-color: var(--navbar-accent-color-1);
}
.service-box .lower-content .learnMoreButton{
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
}
.service-box .icon{
  height: 15px;
  width: 15px;
  background-image: url(../images/icons/arrow-icon-orange.png);
  background-position: center;
  background-size:contain;
  background-repeat: no-repeat;
  margin-top: auto;
  margin-bottom: auto;
}

.dropdown-section.style-one{
  padding-left: var(--responsive-padding);
  padding-right: var(--responsive-padding);
  display: flex;
  flex-direction: row;
}
.dropdown-section.style-one .heading{
  width: 40%;
}
.dropdown-section.style-one .section{
  width: 50%;
  display: grid;
  grid-auto-flow:dense;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 2;
}
.dropdown-section.style-one .heading h3{
  font-size: 20px;
}
.dropdown-section.style-one .section h3{
  font-size: 15px;
}


/*---Navigation bar SCREEN CONTROL---------------------------------------------------------------*/
 @media screen and (max-width: 1300px) {
      .navbarGroup3 {
        display: none;
        }
        .navbarScore{
          display: none;
        }
        .navbar-logo {
          height: 60px;
          width: 120px;
        }
       
      
      body{
        min-height: 100vh;
      }
    }
  @media screen and (max-width: 1210px) {
    :root{
      --navbarBtn-off-color: white;
      --navbarBtn-on-color: #cccccc;
    }
    .phone{
      display: block;
    }
    /* change the direction of group 1 and 2 */
    .navbar {
      flex-direction: column;
      align-items: flex-start;
    }
    /*make group1 full width and display buttons*/
    .navbarGroup1{
     width: 100%;
    }
    .phoneButtons{
      display: flex;
    }
    /*make group2 full width column on display active and text style*/
    .heading{
      display: none;
    }
    .dropdown-section.three{
      display: none;
    }
    .phoneButtons{
      width: 160px;
    }
    .navbarGroup2{
      position: absolute;
      padding: 0;
      margin: 0;
      left: calc(-1*var(--responsive-padding) - 100svw);
      width: 100svw;
      height: auto;
      border-bottom: 45px solid #555;
      transition: 200ms;
    }
    .navbarGroup2 li{
      display: flex;
      flex-direction: column;
    }
    .navbarGroup2 ul {
      flex-direction: column;
      background-color: white;
      width: 100%;
    }
    .navbarGroup2 li{
      border-bottom: 1px solid #e7e7e7;
    }
    .navbarGroup2 li a h4{
      text-align: left;
      color: black;
      padding-left: var(--responsive-padding);
      padding-right: var(--responsive-padding);
      font-size: 15px;
    }
    
  /* the drop downs */
  .dropdown-container{
    position: relative;
  }
  .dropdown-section.style-one {
    padding: 0;
  }
  .dropdown-section.style-one .section {
    width: 100svw;
    display: flex;
    flex-direction: column;
  }
  .dropdown-section.style-one .section a{
    width: 100%;
  }

  .dropdownLink-element .text{
    width: 100%;
    padding-left: calc(2*var(--responsive-padding));
    padding-right: var(--responsive-padding);
    padding-top: calc(var(--responsive-padding)/4);
    padding-bottom: calc(var(--responsive-padding)/4);
  }
  .dropdown-section.one{
    display: none;
  }
  .dropdown-section.two {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  .dropdownLink-element{
    border-bottom: 1px solid #00000025;
  }



    /* Replaces and re-spaces the media links */
    .navbar-phone{
      display: none;
    }
    .navbar-top-links{
      align-content: center;
    }
    .navbar-link-icons{
      width: 100%;
      justify-content: space-around;
    }
    .navbar-link-icons a{
      margin: 0;
    }

    /* Level 2 of the list elements */

    .dropdownLinks{
      left: 0;
      top: 0;
      position: relative;
      border-top: none;
      width: 100%;
      height: auto;
      margin: auto;
    }
    
    .dropdownLinks ul{
      max-width: var(--bodyMaxWidth);
      margin: auto;
      padding: 0px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .dropdownLinks li{
      width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    }
    .dropdownLinks li{
    background-color: #9e9e9e;
      }
  
    .dropdownLinks li a h4{
     color: black;
      padding: 15px;
      padding-left: 45px;
      font-size: 0.90rem;
    }

   
    
  }
  @media screen and (max-width: 600px) {
    :root {
      --navbar-height: 95px;
    }

    .navbarGroup2{
      padding-top: 0;
      padding-bottom: 0;
    
     }
    .navbar-link-icons{
      display: none;
    }
    .navbarScore{
      display: none;
    }
    .navbar-logo {
      height: 45px;
      width: 90px;
    }
    .phoneButtons{
      width: 145px;
    }
    .navbarPhoneIcon.phone{
      height: 45px;
      width: 45px;
    }
    .navbar-toggle-button {
      width: 50px;
      height: 40px;
    }

    .phoneButtons {
      width: 125px;
  }
  
  }