/*-- Styles Technologies Teal 240830 MRU --*/

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css");

:root {
  --brand: #008080;
  --dark: #212529;
  --body: #516171;
  --border: rgba(0,0,0,0.1);
  --shadow: 0px 6px 10px rgba(0, 0, 0, 0.1);    
  } 

body {
  font-family: "Barlow", sans-serif;
  color: var(--dark);
  line-height: 1.5;
  }

h1,h2,h3,h4,h5,h6,
.display-1,.display-2,.display-3,.display-4 {
  font-weight: 600;
  }

.bg-cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  }

a {
  color: var(--dark);
  text-decoration: none;
  transition: all 0.4s ease;
  }

a:hover {
  color: var(--brand);
  }

.logo-img {
  width: 240px;
  }

img {
  width: 100%;
  }

section {
  padding: 30px 0px;
  }

.text-brand {
  color: var(--brand) !important;
  }


/*-- Hero Slider --*/

#hero-slider .slider h1, 
#hero-slider .slider h4 {
  color: #ffffff;
  }

#hero-slider .slider .display-3 {
  color: #ffffff;
  }

.hero-slider .owl-prev, 
.hero-slider .owl-next {
  display: block;
  display: grid;
  place-items: center;
  background-color: rgba(255, 255, 255, 0.0) !important;
  color: #ffffff !important;
  position: absolute;
  top: 45%;
  }

.owl-prev {
  left: 0;
  }

.owl-next {
  right: 0;
  }

.owl-dots {
  position: absolute;
  top: 93%;
  left: 50%;
  transform: translateX(-50%);
  z-index:99;
  }

.owl-dot.active span {
  background-color: #000000 !important;
  }

.slider {
  min-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }


/*-- Breadcrumbs --*/

ul.breadcrumb {
  padding: 0px;
  list-style: none;
  }

ul.breadcrumb li {
  display: inline;
  font-size: .9rem;
  font-weight: 400;
  }

ul.breadcrumb li+li:before {
  padding: 0px 3px 0px 5px;
  color: #000000;
  content: "/\00a0";
  }

ul.breadcrumb li a {
  font-size: .9rem;
  font-weight: 400;
  color: #000000;
  text-decoration: none;
  }

ul.breadcrumb li a:hover {
  color: #ffffff;
  }


/*-- Header Styles --*/

.navbar {
  box-shadow: var(--shadow);
  }

.navbar .navbar-nav .nav-link {
  color: var(--dark);
  }

.navbar .navbar-nav .nav-link:hover {
  color: #909090;
  }

.navbar .navbar-nav .nav-link.active {
  color: #909090;
  }

.nav-top {
  font-size: .85rem;
  font-weight: 500;
  }

.nav-main {
  font-size: 1.1rem;
  font-weight: 600;
  }


/*-- Button Styles --*/

.btn {
  padding: 8px 26px;
  }

.btn-brand {
  border-color: #ffffff;
  background-color: var(--brand);
  font-weight: 600;
  color: #ffffff;
  }

.btn-brand:hover {
  border-color: #ffffff;
  background-color: #003333;
  color: #ffffff;
  }

.btn-info {
  border-color: #000000;
  background-color: #f3f3f3;
  font-weight: 600;
  color: #000000;
  }

.btn-info:hover {
  border-color: #000000;
  background-color: #606060;
  color: #ffffff;
  }


/*-- Intro Styles --*/

.intro {
  background-color: #ffffff;
  box-shadow: var(--shadow);
  padding: 30px 0px;
  }

.intro p {
  font-weight: 500;
  color: var(--dark);
  }


#intro .info-pitch ul {
  padding: 0px;
  list-style: none;
  }

#intro .info-pitch li {
  padding: 0px 0px 15px 35px;
  position: relative;
  line-height: 1.5;
  }

#intro .info-pitch i {
  position: absolute;
  left: 0px;
  top: -8px;
  font-size: 1.5rem;
  color: #009900;
  }

#intro .info-pitch h5 {
  color: #009900;
  }

#intro .info-links ul {
  padding: 0px;
  list-style: none;
  }

#intro .info-links li {
  padding: 0px 0px 15px 35px;
  position: relative;
  line-height: 1.5;
  }

#intro .info-links i {
  position: absolute;
  left: 0px;
  top: -8px;
  font-size: 1.5rem;
  color: #009900;
  }

#intro .info-links a {
  font-weight: 500;
  transition: 0.3s;
  display: inline-block;
  }

#intro .info-links h5 {
  color: #009900;
  }

#intro .info-links h5:hover {
  color: var(--brand);
  }

#intro .docu-links {
  padding: 8px 0px;
  }

#intro .docu-links h5 {
  color: #696969;
  font-weight: 500;
  }

#intro .docu-links ul {
  list-style: none;
  padding: 0px;
  margin-left: 10px;
  }

#intro .docu-links i {
  position: absolute;
  left: 0px;
  top: 3px;
  font-size: 12px;
  color: #000000;
  }

#intro .docu-links li {
  padding: 0px 0px 8px 16px;
  position: relative;
  line-height: 1.5;
  }

#intro .docu-links li:first-child {
  padding-top: 0;
  }

#intro .docu-links a {
  color: var(--dark);
  font-weight: 500;
  transition: 0.3s;
  display: inline-block;
  }

#intro .docu-links a:hover {
  color: var(--brand);
  font-weight: 500;
  }

#intro .intro-image {
  margin: 0px 0px 30px 0px;
  }

#intro .intro h4 {
  padding: 0px 0px 20px 0px;
  text-align: left;
  font-weight: 600;
  color: var(--dark);
  }


/* Product Listing Styles*/

.list {
  padding: 20px 0px;
  background-color: #ffffff;
  }

.list-item {
  position: relative;
  background-color: #ffffff;
  box-shadow: var(--shadow);
  padding: 0px 0px 20px 0px;
  }

.list-item a {
  text-decoration: none;
  margin-top: 10px;
  }

.list-item h4 {
  padding: 20px 0px;
  text-align: center;
  color: var(--dark);
  }

.list-item p {
  padding: 0px 15px 0px 30px;
  text-align: left;
  color: var(--dark);
  font-weight: 500;
  }


/*-- Divider Buildings Sand --*/

.divider-buildings {
  background: 
    linear-gradient(rgba(255,214,132,0.9), rgba(255,214,132,0.9)), 
    url(../img/bnl-matterhorn-title.jpg), #ffcc66;;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  }

.divider-buildings h1 {
  color: #000000;
  } 


/*-- Divider Capital Red --*/

.divider-capital {
  background: 
    linear-gradient(rgba(255,50,50,0.9), rgba(255,50,50,0.9)), 
    url(../img/bnl-logo-matterhorn-banner.jpg), #ff3232;;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  }

.divider-capital h1 {
  color: #ffffff;
  } 


/*-- Divider Energy Yellow --*/

.divider-energy {
  background: 
    linear-gradient(rgba(255,255,76,0.9), rgba(255,255,76,0.9)), 
    url(../img/bnl-matterhorn-banner.jpg), #ffff00;;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  }

.divider-energy h1 {
  color: var(--dark);
  } 


/*-- Divider Environment Lime --*/

.divider-environment {
  background: 
    linear-gradient(rgba(76,255,76,0.9), rgba(76,255,76,0.9)), 
    url(../img/bnl-logo-matterhorn-banner.jpg), #00ff00;;
  background-position: center;
  background-repeat: no-repeat;
  }

.divider-environment h1 {
  color:  var(--dark);
  } 


/*-- Divider Fuels Orange --*/

.divider-fuels {
  background: 
    linear-gradient(rgba(255,192,76,0.9), rgba(255,192,76,0.9)), 
    url(../img/bnl-matterhorn-banner.jpg), #ffa500;;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  }

.divider-fuels h1 {
  color: var(--dark);
  } 


/*-- Divider Logistics Green --*/

.divider-logistics {
  background: 
    linear-gradient(rgba(50,153,50,0.9), rgba(50,153,50,0.9)), 
    url(../img/bnl-matterhorn-banner.jpg), #329932;;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  }

.divider-logistics h1 {
  color: var(--bs-light);
  } 


/*-- Divider Materials Copper --*/

.divider-materials {
  background: 
    linear-gradient(rgba(211,184,151,0.9), rgba(211,184,151,0.9)), 
    url(../img/bnl-matterhorn-banner.jpg), #c19a6b;;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  }

.divider-materials h1 {
  color: var(--dark);
  } 

/*-- Divider Modular Blue --*/

.divider-modular {
  background: 
    linear-gradient(rgba(76,76,255,0.9), rgba(76,76,255,0.9)), 
    url(../img/bnl-logo-matterhorn-banner.jpg), #0000ff;;
  background-position: center;
  background-repeat: no-repeat;
  }

.divider-modular h1 {
  color: var(--bs-light);
  } 

/*-- Divider Networks Copper --*/

.divider-networks {
  background: 
    linear-gradient(rgba(210,210,210,0.9), rgba(210,210,210,0.9)), 
    url(../img/bnl-matterhorn-banner.jpg), #c0c0c0;;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  }

.divider-networks h1 {
  color: var(--dark);
  } 


/*-- Divider Power Teal --*/

.divider-power {
  background: 
    linear-gradient(rgba(0,128,128,0.9), rgba(0,128,128,0.9)), 
    url(../img/bnl-matterhorn-banner.jpg), #008080;;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  }

.divider-power h1 {
  color: var(--bs-light);
  } 


/*-- Divider Sanitation Fuchsia --*/

.divider-sanitation {
  background: 
    linear-gradient(rgba(215,126,179,0.9), rgba(215,126,179,0.9)), 
    url(../img/bnl-matterhorn-banner.jpg), #c74893;;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  }

.divider-sanitation h1 {
  color: #ffffff;
  } 


/*-- Divider Solutions Skyblue --*/

.divider-solutions {
  background: 
    linear-gradient(rgba(110,174,238,0.9), rgba(110,174,238,0.9)), 
    url(../img/bnl-logo-matterhorn-banner.jpg), #318ce7;;
  background-position: center;
  background-repeat: no-repeat;
  }

.divider-solutions h1 {
  color:  var(--dark);
  } 


/*-- Divider Systems Skyblue --*/

.divider-systems {
  background: 
    linear-gradient(rgba(76,76,255,0.9), rgba(76,76,255,0.9)), 
    url(../img/bnl-logo-matterhorn-banner.jpg), #0000ff;;
  background-position: center;
  background-repeat: no-repeat;
  }

.divider-systems h1 {
  color: var(--bs-light);
  } 


/*-- Divider Technologies Teal --*/

.divider-technologies {
  background: 
    linear-gradient(rgba(0,128,128,0.9), rgba(0,128,128,0.9)), 
    url(../img/bnl-matterhorn-banner.jpg), #008080;;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  }

.divider-technologies h1 {
  color: var(--bs-light);
  } 


/*-- Divider Water Navy --*/

.divider-water {
  background: 
    linear-gradient(rgba(76,76,166,0.9), rgba(76,76,166,0.9)), 
    url(../img/bnl-matterhorn-banner.jpg), #000080;;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  }

.divider-water h1 {
  color: #ffffff;
  } 


/*-- Project Slider Carousel --*/

.project {
  position: relative;
  overflow: hidden;
  z-index: 2;
  }

.project .overlay {
  width: 100%;
  height: 220px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(255, 76, 41, 0) 0%, var(--dark) 100%);
  }

.project .content {
  position: absolute;
  left: 10%;
  bottom: 10%;
  }

.project .content a {
  text-decoration: none;
  }

.project .content h1, h6 {
  font-weight: 600;
  color: #ffffff;
  }



/* Footer Styles */

#footer {
  padding-top: 60px;
  }

#footer h1 {
  color: #ffffff;
  font-weight: 600;
  } 

#footer h5 {
  color: #ffffff;
  font-weight: 600;
  } 

#footer p {
  color: #ffffff;
  } 

#footer .footer-info a {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  }

#footer .footer-info a:hover {
  color: #303030;
  }

#footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  }

#footer .footer-links i {
  position: absolute;
  left: 0px;
  top: 3px;
  font-size: 12px;
  color: #ffffff;
  }

#footer .footer-links li {
  padding: 0px 0px 8px 16px;
  position: relative;
  line-height: 1.5;
  }

#footer .footer-links li:first-child {
  padding-top: 0;
  }

#footer .footer-links a {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  transition: 0.3s;
  display: inline-block;
  }

#footer .footer-links a:hover {
  color: #303030;
  }

#footer .btn-newsletter {
  border-color: #000000;
  background-color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  color: #000000;
  }

#footer .btn-newsletter:hover {
  border-color: #000000;
  background-color: #909090;
  color: #ffffff;
  }

#footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  padding: 20px 0;
  color: #ffffff;
  text-align: center;
  }