@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}

body {
  padding-top: 50px;
}

section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

p, li, label {
  font-weight: 200;
  color: #434343;
}
h2 {
  color: #4c7b86;
  font-weight: 300;
}

a {
  color: #4c7b86;
}
a:hover {
  color: #ffa26a;
}


:root { 
  /* --bs-navbar-color: red; */
}

.navbar {
  /* --bs-navbar-brand-color: #7cbbca; */
  --bs-navbar-color: #4c7b86;
  --bs-navbar-active-color: #ffa26a;
  --bs-navbar-hover-color: #171d1e;

  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}
.navbar .navbar-brand {
  color: #4c7b86;
}
.navbar .logo {
  height: 30px;
  margin-right: 10px;
}


#header {
  padding-top: 6rem;
  padding-bottom: 6rem;

  background-color: #b3a599;
  background-image: url('./img/header.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

  text-shadow: 0px 0px 15px #000;
}
#header h1 {
  font-weight: 800;
  font-size: 2.5rem;
  color: white;
}
#header h2 {
  font-weight: 300;
  font-size: 1.7rem;
  color: white;
}



section.light-bg {
  background-color: #f4f8f9;
}
section.dark-bg {
  background-color: #4c7b86;
  color: white;
}



#features {
  padding-top: 4rem;
  padding-bottom: 3rem;
}
#features h2 {
  font-size: 1.2em;
  /* color: #ff8a44; #3cadc8 */
  color: #424242;
  font-weight: 300;
}
#features p {
  color: #8a8a8a;
  font-weight: 200;
}
#features svg {
  color: #7cbbca;
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
}



#demo .btn {
  background-color: #3d4c4f;
  border-color: #3d4c4f;
  color: white;
}
#demo .btn:hover {
  background-color: #171d1e;
  border-color: #171d1e;
}
#demo input {
  border-color: white;
  
}



#summary .img-container {
  display: flex;
  align-items: center;
}
#summary .img-notification {
  width: 300px;
  transform: rotate(4deg);
  /* margin-top: 110px; */
}





#details .img-container {
  display: flex;
  align-items: center;
}
#details .img-circle {
  width: 250px;
  height: 250px;
  border-radius: 300px;
  background-image: url('./img/user-gloves.jpg');
  background-size: cover;
}




#contact .btn {
  background-color: #4c7b86;
  border-color: #4c7b86;
}


#contact .btn:hover {
  background-color: #171d1e;
  border-color: #171d1e;
}


footer {
  padding: 20px;
  background-color:#4c7b86;
  color: white;
}
footer p {
  color: white;
  margin: 0;
  font-size: 0.8rem;
}
footer a {
  color: white;
}


.orange {
  background-color: #ffa26a;

}

.teal {
  background-color: #7cbbca;

}