/* ========= Navbar ========= */
/*.sticky {
  position: fixed!important;
  width: 100%;
  top: 0px;
  z-index: 1;
}
.navbar-text{
  font-size: 1.75rem!important;
}*/
.navbar {
  padding: .3rem!important;
  background: rgba(252, 171, 50, 0.87)!important;
}
.navbar-text{
  color: white!important;
}
.navbar-text:hover{
  color: rgb(255, 199, 167)!important;
}

/* ========= Body ========= */
#page{
  background: linear-gradient(to top, #34058b, rgb(167, 10, 62), #db5252, #e65f36, #f18c2d);
  /* font-family: sans-serif; */
}
.container-fluid {
  padding-right: 10%!important;
  padding-left: 10%!important;
}
#body{
  padding-top: 3.5rem;
}
.lead{
  font-size: 1.1rem!important;
}

/* ======== Header ========= */
#header{
  color: white;
  text-align: center;
  padding: 4rem;
  font-size: 1.5rem;
}
.title{
  font-size: 3rem!important;
}
.title-line{
  width: 23%;
  margin-top: 1.5rem;
  margin-bottom: .5rem;
  border: .1px solid rgba(255, 255, 255, 0.678);
}
.icons{
  padding-top: .5rem;
}
.icon{
  padding-right: .5rem;
  padding-left: .5rem;
  color: rgb(255, 233, 205);
  text-decoration: none!important;
}
.icon:hover{
  color:rgb(255, 181, 70);
}

/* ======== Sections ======== */
.jumbotron{
  margin-bottom: 0px!important; 
}
.card-deck{
  padding: 0px!important; 
  display: flex;
  flex-direction: column;
}

.body-section{
  padding: 3rem!important;
  margin-bottom: 2rem!important;
  background: rgba(255, 255, 255, 0.123)!important;
  color: rgba(255, 255, 255, 0.93)!important;
  border-radius: 0px!important;
  /* font-size: 1.5rem!important; */
}

.card-title{
  font-size: 2rem!important;
}
.section-header{
  margin-bottom: 0rem!important;
  /* font-size: 3rem!important; */
}
.section-line{
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  border: .1px solid rgba(255, 255, 255, 0.678);
}

.inner-card{
  background: rgba(252, 154, 129, 0.466)!important;
  color: rgb(255, 255, 255)!important;
  padding: .5rem!important;
}
.card-img-top{
  padding: .5rem!important;
}
.card-body{
  padding:1rem!important;
}
.img-body{
  padding: .5rem!important;
}
.img-title{
  margin-bottom: 0rem!important;
  font-size: 1.5rem;
}
.tool{
  background: rgba(255, 253, 110, 0.219);
  padding-left: .5rem;
  padding-right: .5rem;
  border-radius: 10%;
  margin-right: .5rem;
  margin-bottom: .5rem;
  display: inline-block;
}

.bold{
  font-weight: bold!important;
}

a{ 
  /* text-decoration: none!important; */
  color: rgb(255, 228, 179)!important;
}

a:hover{
  color: rgb(253, 209, 127)!important;
}

.last-section{
  margin-bottom: 3rem!important;
}

/* ========= footer ========= */

.icon-text-pair {
  display: flex;
  align-items: center;
  text-indent: .3rem;
}

#back-to-top{
  color: white!important;
  text-decoration: none;
}
#back-to-top:hover{
  color: rgb(240, 183, 248)!important
}
.navbar-brand{
  padding-left: .5rem;
}
#footer {
  margin-top: .5rem!important;
  margin-bottom: 0px!important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem!important;
  border-radius: 0px;
  color: white;
  background: rgba(54, 0, 105, 0.767)!important;
  /* font-size: 1.5rem!important; */
}


/* ====== media queries ====== */
@media (max-width: 1100px) {
  .card-deck{
    flex-flow: column!important;
  }
  .card{
    margin-bottom: 2rem!important;
  }
  .bottom{
    margin-bottom: 0rem!important;
  }
  .navbar-text{
    padding-left: .3rem!important;
  }
  .img-body{
    padding: 1rem!important;
  }
  .card-img-top{
    padding: 1rem!important;
  }
}

@media (max-width: 550px) {
  .card-body{
    padding: .4rem!important;
  }
  .card-img-top{
    padding: .4rem!important;
  }
  .inner-card{
    padding: .4rem!important;
  }
  .body-section{
    padding: 1.5rem!important;
  }
  #footer{
    font-size: .7rem!important;
  }
  .container-fluid {
    padding-right: 1.5rem!important;
    padding-left: 1.5rem!important;
  }
  .title{
    font-size: 2.5rem!important;
  }
  .title-line{
    width: 23%;
    margin-top: 1rem;
    margin-bottom: 0rem;
  }
  .section-line{
    margin-top: 1rem;
    margin-bottom: 1.5rem;
  }
  .img-body{
    padding: 1rem!important;
  }
  .card-img-top{
    padding: 1rem!important;
  }
}