.tabs-header{
    display: flex;
    flex-wrap:wrap;
}.tabs-header-item,.tabs-header-item:hover{
    background:#EEEEEE;
    border-radius:35px;
    font-size:medium;
    border:0;
    text-align:center;
    margin-bottom:24px;
    /*min-width: 300px;*/
    align-items: end;
    width: 18%;
    padding: 55px 40px;
    height: 250px;
    float: right;
}
.tabs-header-item img{
    height:100px;
    margin-bottom:10px;
}

.tabs-header-item[aria-selected="true"]{
    border:0;
    background:#1EBCB6;
    color:#fff;
}
.tabs{
    padding:24px;
}
.tabs .tabs-content{
    border-top:0;
}

.tabs-header-item[aria-selected="true"] img{
    filter:invert(2) brightness(2);
}

.tabs-header-item{
    transition:all 0.3s ease-in-out;
}
.tabs .tabs-header {
    display: inline-block;
}

/* HRDF NewPortalDesign */
header {
    direction:rtl;
    padding-right: 2% !important;
    padding-left: 2% !important;
}
.slide1-content{
    position: absolute;
    top: 96px;
    left: 36px;
    transform:scale(1.2);
    transform-origin: 0 0;
    direction: rtl;
}
.slide2-content{
    position: absolute;
    top: 96px;
    right: 36px;
    transform:scale(1.2);
    transform-origin: 100% 0;
    direction: rtl;
}
.slide-image{
    height:75vh !important;
}
.position-relative{
    position: relative;
}
.ThemeGrid_Container{
    
    padding-right: 0 !important;
    padding-left: 0 !important;
}
.portal-footer{
    width: 100%;
    background: #1A3163;
    padding: 48px 0;
}
.light-gray{
    background: #EEEEEE;
    color: #1A3163;
}
.light-gray *{
    color: #1A3163;
}
.justify-content-in-between{
    justify-content:space-between;
}
.flex-fill{
    -ms-flex:1 1 auto!important;
    flex:1 1 auto!important;
}
.states-box{
    border-radius: 10px;
    padding: 16px;
    border:2px #ccc dashed;
}

.border-bottom-orange{
    border-bottom: 1px #FAB251 solid;
    padding-bottom: 10px;
    width:100%;
    margin-bottom:10px;
}

.hidden { display: none !important; }
/*****************************/

/***********************/
header {
    direction:rtl;
    padding-right: 2% !important;
    padding-left: 2% !important;
}
.slide1-content{
    position: absolute;
    top: 96px;
    left: 36px;
    transform:scale(1.2);
    transform-origin: 0 0;
    direction: rtl;
}
.slide2-content{
    position: absolute;
    top: 96px;
    right: 36px;
    transform:scale(1.2);
    transform-origin: 100% 0;
    direction: rtl;
}
.slide-image{
    height:75vh !important;
}
.position-relative{
    position: relative;
}
.ThemeGrid_Container{
    
    padding-right: 0 !important;
    padding-left: 0 !important;
}
.portal-footer{
    width: 100%;
    background: #1A3163;
    padding: 48px 0;
}
.light-gray{
    background: #EEEEEE;
    color: #1A3163;
}
.light-gray *{
    color: #1A3163;
}
.justify-content-in-between{
    justify-content:space-between;
}
.flex-fill{
    -ms-flex:1 1 auto!important;
    flex:1 1 auto!important;
}
.states-box{
    border-radius: 10px;
    padding: 16px;
    border:2px #ccc dashed;
}

.border-bottom-orange{
    border-bottom: 1px #FAB251 solid;
    padding-bottom: 10px;
    width:100%;
    margin-bottom:10px;
}

.hidden { display: none !important; }


/*card flip css*/
/** code by webdevtrick (https://webdevtrick.com) **/ 
.right{
  text-align: right;
}
  .middle{
    position: absolute;
    top: 0%;
    left:0%;
    /* transform: translate(-50%,-50%); */
  }
  .card{
    cursor: pointer;
    width: 100%;
    height: auto;
    border: 0px;
  }
  .front,.back{
    width: 100%;
    height: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    position: absolute;
    transition: transform 0.6s ease-in-out;
    border-radius: 20px;
  }
  .front{
      color: #1a3163;
    background: #EEEEEE;
    display: flex;
    flex-direction: column;
    transform: perspective(600px) rotateY(0deg);
    align-items: center;
    justify-content: center;
  }
  .front img{
    max-height: 150px;
  }
  .front span{
    display: block;
    margin:20px 0;
    font-size:20px;
  }
  .back{
    background: #1EBCB6;
    transform: perspective(600px) rotateY(180deg);
  }
.back .heading5, .back div{
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    line-height: 170%;
    color: #fff;
    text-align: right;
    direction:rtl;
    align-items: center;
    text-align: center;
    padding: 10px;
  }
  .back .heading5{
    padding:15px 0 0 0;
  }
  .back-content{
    color: #2c3e50;
    text-align: center;
    width: 100%;
  }
  .sm{
    margin: 20px 0;
  }
  .sm a{
    display: inline-flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    color: #2c3e50;
    font-size: 18px;
    transition: 0.4s;
    border-radius: 50%
  }
  .sm a:hover{
    background: #2c3e50;
    color: white;
  }
  .card:hover > .front{
    transform: perspective(600px) rotateY(-180deg);
  }
  .card:hover > .back{
    transform: perspective(600px) rotateY(0deg);
  }
  /**/
  .card.middle{
  padding:0;
background:transparent;}
.card-container{
height: 350px;
position: relative;}
.cards-container{
    max-width:1400px;
    margin:20px auto;
}
.top-nav{
    
background:#051c48;
color:#fff;
direction:rtl;
padding:10px;}
.top-nav > *{
    margin:0 10px;
}
.layout .header{
    position:relative;
}
.main{
    padding-top:0 !important;
}
.header{
    padding:16px 0;
}

.layout .content{
    margin-top:0;
}
.layout-top .content .ThemeGrid_Container{
    padding-top:0;
    padding-bottom:0px;
}
/*About_Taqaaat */
.text-green{
    color: rgb(0,176,80);
}
.padding-5rem{
    padding: 5rem;
}
 .mb-2{
     margin-bottom: 0.5rem;}
 .mb-3{
    margin-bottom: 1rem;}
.mb-5{
    margin-bottom: 3rem;}