/* Navbar and background */

.fa-solid{
  margin:0 0.2rem;
}

.link-test:hover{
  opacity:0.3;
}

.navbar-brand{
  margin-left:3rem;
  padding-right:52.5rem;
}

.navbar{
  background-color: rgb(8, 139, 215);
  margin-bottom: 2%;
}

.nav-link{
  margin-right:2.5rem;
}

.website{
  position: absolute;
  top:0;
  z-index:-3;
  background-color: rgb(43, 156, 222);
  overflow-y: auto;
  border: 30px white solid;
  margin: 20px;
  overflow-x: hidden;
}


/* Cards */
.container {
  position: relative;
  width: 50%;
  margin:5%;
}

.col-6{
  margin-bottom: -3 rem;
}


.dimensions{
  width:100%;
}

.middle {
  /* Transition slowly over 0.5 seconds */
  transition: .5s ease;
  /* Fully transparent */
  opacity: 0;

  position: absolute;
  top: 50%;
  left:45%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.middle-1
{
  position: absolute;
  top:48%;
  left:45%;
}

.text {
  background-color:#0d6efd;
  color: white;
  font-size: 100%;
  width:120%;
  padding:6%;
  padding-bottom: 10px;
  position: relative;
  text-align: center;
}

.container:hover .image {
  opacity: 0.4;
}

.container:hover .middle {
  opacity: 1;
}

/* Buttons */

.btn-icon{
  margin-right:13px;
}

.col-4{
    position:relative;
    left:6rem;
    margin: 5% 0%;
    padding-top:3rem;
  }
  #btn-custom{
    color:white;
    background-color: #efb402;
    border: 1px solid #efb402;
  }
  #btn-custom:hover{
    background-color: #d19d00;
    border: 1px solid #d19d00;
  }


/*  Footer  */
.footer{
  background-color: rgb(8,139,215);
  color:white;
  padding:30px 10px;
  text-align: center;
}