/*variables*/
:root{
  --navigation-color: #3d5782;
  --hover-color: #0000b4;
  --light-color: #ecedf0;
}


/* general html tags */
body{
  position: relative;
}

a{
  color: var(--navigation-color);
  font-weight: bold;
  text-decoration: none;
}

footer a{
  color: var(--light-color);
  font-weight: bold;
  text-decoration: none;
}

a:hover, a:focus, a:visited{
  color:var(--hover-color);
}

h3, h5, dt{
  color: var(--navigation-color);
}

p, dl{
  font-weight:300;
  font-size: 20px;
}
i{
  font-size: 30px;
}
footer i{
  font-size: 20px;
}

/* navbar */
.nav-item a{
  color: var(--light-color);
  font-size: 28px;
  font-weight: bold;
  text-transform: uppercase;
}
.nav-item a:hover, .nav-item a:focus, .nav-item .active{
  color:var(--hover-color);
}

/* header */
.bg-img::before {
    content: "";
    background: rgba(56, 64, 70, 0.3);
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    height: 60vh;
}

.bg-img {
  background-image: url('../images/header.webp');
  background-size: cover;
  background-position: top;
  width: 100%;
  height: 100%;
  height: 60vh;
}

/* colors */

.tcs-blue {
  background-color: var(--navigation-color);
}
.tcs-blue-light{
  background-color: var(--light-color);
}
.tcs-bl-text{
  color: var(--light-color);
}

/* gallery */



/* footer */
footer .btn{
  background-color: var(--light-color);
  border-color: var(--navigation-color);
  color: var(--navigation-color);
}

footer .btn:hover{
  background-color: var(--navigation-color);
  border-color: var(--light-color);
  color: var(--light-color);
}

/* media queries */
@media (max-width:1000px) {
  .nav-item{
    padding-left: 25px;
  }
}