/* base.html */
.card{
    position:relative;
    width:650px;
    min-height:800px;
    overflow:hidden;
    border-radius:5px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .bg-wrapper{
    position:absolute;
    z-index:0;
    width: 100%;
    height: 50rem;
  } 
  .overlay-content{
    position:static;
    z-index:1;
    margin-top: 1.5rem;
    width:100%;
    /* text-align:center; */
  }
  img.background {
    vertical-align: middle;
    height: 110%;
    width: 85%;
  }


div.seperator {
    background-image: linear-gradient(
        90deg,
        hsl(0deg 0% 100%) 0%,
        hsl(38deg 35% 94%) 9%,
        hsl(38deg 34% 89%) 17%,
        hsl(39deg 33% 83%) 25%,
        hsl(39deg 33% 78%) 33%,
        hsl(39deg 32% 73%) 41%,
        hsl(39deg 31% 67%) 49%,
        hsl(39deg 31% 67%) 56%,
        hsl(39deg 32% 73%) 64%,
        hsl(39deg 33% 78%) 71%,
        hsl(39deg 33% 83%) 78%,
        hsl(38deg 34% 89%) 86%,
        hsl(38deg 35% 94%) 93%,
        hsl(0deg 0% 100%) 100%
      );
      height: 2px;
}

.ar-direction {
text-align: right;
}

.en-direction {
  text-align: left;
}

.ar-reverse-direction {
  text-align: left;
  }
  
  .en-reverse-direction {
    text-align: right;
  }

  .lang-text {
    color: #A28653FF;
  }

  .base-seperator {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

@media (max-width: 767px) 
  {
  .overlay-content{
    position:static;
    z-index:1;
    margin-top: 0rem;
    width:100%;
    /* text-align:center; */
  }

  .card{
    position:relative;
    width:650px;
    min-height:800px;
    overflow:hidden;
    border-radius:5px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
}