@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');

:root{
    --prim: #00FFFF;
    --prim-dark: #00FFFF;
    --sec: #000000;
}
body{
    font-family: 'Josefin Sans', sans-serif !important;
}

.bg-nav{
    z-index: 99;
    top: 0;
}

.bg-main{
    background-color: var(--prim) !important;
}

.banner{
    background-color: black;
    height: 80vh;
    width: 90vw;
    color: white;
    position: relative;
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;

}

.banner-heading{
    font-size: 3.5rem;
}

.banner-media{
    height: inherit;
    width: inherit;
    position: absolute;
    z-index: 1;


}
.overlay{
    height: inherit;
    width: inherit;
    background-color: rgba(0, 0, 0, 0.75);
    position: absolute;
    z-index: 2;

}
.banner-img{
    object-fit: cover;
    width: 100%;
    height: 80vh;


}

.banner-content{
    position:relative;
    z-index: 98;
}

.btn-prim{
    background-color: var(--prim)!important;
    color: black !important;
}

.btn-outline-prim{
    color: var(--prim) !important;
    background-color:transparent !important;
    border: 1px solid var(--prim) !important;
}

.btn-outline-prim:hover{
    background-color: var(--prim) !important;
    color: black !important;
}

.btn-prim:hover{
    background-color: var(--sec) !important;
    color: white !important;
    border: 1px solid  var(--sec) !important;
}



/*CSS For Article Card Begins*/
.post{
  background-color: white;
  border-radius: .625rem;
  width: 30%;
  overflow: hidden;
  transition: all .5s ease-out;
  cursor: pointer;
}

.post:hover{
  box-shadow: 0px 15px 27px -5px rgba(240, 211, 211, .95);
}

.post:hover .post__image-container img{
  transform: scale(1.1);
}

.post:nth-of-type(2){
  margin: 0 2rem;
}

.post__image-container{
  overflow: hidden;
}

.post__image-container img{
  height: 12.5rem;
  width: 100%;
  object-fit: cover;
  transition: all .5s ease-out;
}

.post__text-container{
  padding: 1rem;
}

.post__text-container > *:not(:last-child){
  margin-bottom: .5rem;
}

.post__tag{
  display: inline-block;
  padding: .3125rem .625rem;
  border-radius: .75rem;
  color: white;
  font-size: .745rem;
  text-transform: uppercase;
}

.post__profile{
  margin-top: 2rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.post__author-img{
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-right: 1rem;
}

/* ---- Media Queries ---- */

@media screen and (max-width: 900px){

  .post{
      width: 100%;
      max-width: 18.75rem;
  }

  .post:not(:last-of-type){
      margin-bottom: 1.5rem;
  }
}

@media screen and (max-width: 600px){
  .post:nth-of-type(2){
      margin-left: initial;
      margin-right: initial;
  }
}
/*CSS For Article Card Ends*/