/* link hover underline */
.underline-hover-unblue{
  position: relative;
}
.underline-hover-unblue::after{
  content: '';
  position: absolute;
  display: block;
  bottom: -1px;
  height: 1px;
  left: 0;
  width: 100%;
  background: #6772e5;
  transform-origin: right center;
  -moz-transform: scale(0,1);
  -ms-transform: scale(0,1);
  -webkit-transform: scale(0,1);
  transform: scale(0,1);
  -moz-transition: -moz-transform .25s cubic-bezier(.37,.31,.2,.85);
  -o-transition: -o-transform .25s cubic-bezier(.37,.31,.2,.85);
  -webkit-transition: -webkit-transform .25s cubic-bezier(.37,.31,.2,.85);
  transition: transform .25s cubic-bezier(.37,.31,.2,.85);
}
.underline-hover-unblue:hover::after{
  transform-origin: left center;
  -moz-transform: scale(1,1);
  -ms-transform: scale(1,1);
  -webkit-transform: scale(1,1);
  transform: scale(1,1);
}

/*------------------------------------------*/
/*  Escwa logo custom bg
/*------------------------------------------*/
.bg-unblue-custom { background-color: #3A8DDE; }

/*------------------------------------------*/
/*  Template logo custom css 
/*------------------------------------------*/
.logo-template { 
  position: relative; 
  padding-left: 20px;
}
.logo-template::before { 
  position: absolute; 
  content: "";
  left: 0;
  width: 4px;
  height: 79%;
  margin-top: 7px;
  margin-bottom: 10px;
  background-color: currentColor;
}
@media (max-width: 991.98px){
  .smllogo .logo-project.logo-project-template {
    margin-left: 10px;
  }
  .logo-template {
    padding-left: 15px;
  }
  #pageContent.page-content-template {
    margin-top: 80px !important;
  }
}


/* ==========================================================================
  HOMEPAGE custom CSS
  =========================================================================== */

  /* ==========================================================================
    Header Section
    =========================================================================== */
    .header-menu-mobile .menu-nav > .menu-item.menu-item-active > .menu-heading .menu-text, .header-menu-mobile .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text {
      color: #6772e5;
    }
    .header-menu-wrapper-on .menu-item:hover .menu-link .menu-text {
      color: #6772e5 !important;
    }
    @media (min-width: 992px){
      .menu-link{
        padding: 3px 0rem !important;
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
      }
      .menu-item-active .menu-link.active .menu-text {
        color: #FFF !important;
      }
      .tmmainfull.scroll .header-menu .menu-nav .menu-item.menu-item-active .menu-text{
        color: #6772e5 !important;
      } 
    }
    .tmmainfull.menu.clearfix .menu-link.active::after, .tmmainfull.menu.clearfix .menu-link:hover::after {
      transform-origin: left center;
      -moz-transform: scale(1,1);
      -ms-transform: scale(1,1);
      -webkit-transform: scale(1,1);
      transform: scale(1,1);
    }
    .tmmainfull.scroll .header-menu .menu-nav > .menu-item.menu-item-active > .menu-link, .menu-nav > .menu-item.menu-item-active > .menu-link, .menu-item:hover .menu-link{
      background-color: transparent !important;
    }
    .menu-link::after{
      content: '';
      position: absolute;
      display: block;
      bottom: -5px;
      height: 1px;
      left: 0;
      width: 100%;
      background: #FFF;
      transform-origin: right center;
      -moz-transform: scale(0,1);
      -ms-transform: scale(0,1);
      -webkit-transform: scale(0,1);
      transform: scale(0,1);
      -moz-transition: -moz-transform .25s cubic-bezier(.37,.31,.2,.85);
      -o-transition: -o-transform .25s cubic-bezier(.37,.31,.2,.85);
      -webkit-transition: -webkit-transform .25s cubic-bezier(.37,.31,.2,.85);
      transition: transform .25s cubic-bezier(.37,.31,.2,.85);
    }
    .header-menu-wrapper-on .menu-link .menu-text::after {
      content: '';
      position: absolute;
      display: block;
      bottom: -5px;
      height: 1px;
      left: 0;
      width: 78%;
      margin: 0 30px;
      background: #6772e5;
      transform-origin: right center;
      -moz-transform: scale(0,1);
      -ms-transform: scale(0,1);
      -webkit-transform: scale(0,1);
      transform: scale(0,1);
      -moz-transition: -moz-transform .25s cubic-bezier(.37,.31,.2,.85);
      -o-transition: -o-transform .25s cubic-bezier(.37,.31,.2,.85);
      -webkit-transition: -webkit-transform .25s cubic-bezier(.37,.31,.2,.85);
      transition: transform .25s cubic-bezier(.37,.31,.2,.85);
    }
    .tmmainfull.menu.clearfix.scroll .menu-link:hover::after, .tmmainfull.menu.clearfix.scroll .menu-link::after {
      background: #32325D !important;
    }
    .tmmainfull.menu.clearfix.scroll .menu-link.active:hover::after, .tmmainfull.menu.clearfix.scroll .menu-link.active::after, .header-menu-wrapper-on .menu-link.active .menu-text::after, .header-menu-wrapper-on .menu-link:hover .menu-text::after {
      background: #6772e5 !important;
    }
    .header-menu-wrapper-on .menu-link::after, .header-menu-wrapper-on .menu-link:hover::after {
      content: none;
    }
    .header-menu-wrapper-on .menu-link.active .menu-text::after, .header-menu-wrapper-on .menu-link:hover .menu-text::after {
      transform-origin: left center;
      -moz-transform: scale(1,1);
      -ms-transform: scale(1,1);
      -webkit-transform: scale(1,1);
      transform: scale(1,1);
    }
    .desktoplogofixed .logo-escwa img {
      height: 6rem;
      max-height: 6rem;
      padding: 1px 10px;
    }
    .desktoplogo .logo-project {
      top: unset;
      margin-left: 15px;
    }
    .desktoplogo .logo-project img {
      height: 35px;
      max-height: 35px;
    }
    .scroll .desktoplogo .logo-project img {
      height: 35px;
      max-height: 35px;
    }
    .scroll .desktoplogo .logo-escwa img {
      padding: 0px 10px 3px 10px;
      height: 5rem;
      max-height: 5rem;
    }
    .tra-menu .tmmainfull.scroll, .white-menu .tmmainfull.scroll, .dark-menu.dark-scroll .tmmainfull.scroll, .header01 .tmmainfull.scroll {
      padding: 0px 5px 10px 5px;
    }
    @media only screen and (max-width: 991.95px){
      .smllogo .logo-project img {
        max-height: 35px;
        height: 35px;
      }
      .smllogo .logo-project {
        top: -5%;
      }
      .smllogo {
        align-self: start;
        top: 0;
        height: 120%;
      }
      .smllogo .logo-escwa{
        width: auto;
        height: 100%;
      }
      .smllogo .logo-escwa img {
        height: 100%;
        max-height: 100%;
        padding: 12px;
      }
    }
    .desktoplogo .logo-escwa, .desktoplogofixed .logo-escwa{
      height: 130%;
      align-self: start;
    }
    .scroll .desktoplogo .logo-escwa, .desktoplogofixed .logo-escwa{
      display: flex !important;
      flex-wrap: wrap;
      align-content: center;
    }
    .scroll .desktoplogo.desktoplogofixed .logo-escwa{
      display: none !important;
    }
    .tra-menu .tmmainfull {
      padding: 0px 5px 10px 5px;
    }
  /* ==========================================================================
    Header Section 2
    =========================================================================== */
    @media (min-width: 992px){
      .header2 .tmmainfull .header-menu .menu-nav .menu-item.menu-item-active .menu-text{
        color: #6772e5 !important;
      } 
    }
    .header2 .navbar-dark .menu-link::after {
      background: #6772e5 !important;
    }
    .header2 .desktoplogofixed .logo-project{
      display: flex !important;
    }
    .header2 .scroll .desktoplogofixed .logo-project{
      display: none !important;
    }
    .header2 .desktoplogoscroll{
      display: none !important;
    }
    .header2 .scroll .desktoplogoscroll{
      display: flex !important;
    }
    .header2 .menu-link::after{
      background: #32325D !important;
    }
    .header2 .tmmainfull.menu.clearfix .menu-link.active::after{
      background: #6772e5 !important;
    }
  /* ==========================================================================
    Hero Section 0 custom css
    =========================================================================== */
    #hero04.hero-section.hero-section0 {
      height: 590px; 
      margin-top: -139px;
      overflow-x: clip;
      overflow-y: visible !important;
    }
    @media (max-width: 991.95px){
      #hero04.hero-section.hero-section0 {
        margin-top: 0;
      }
    }
    #hero04.hero-section0 .carousel .flickity-viewport{
      overflow: visible;
    }
    #hero04.hero-section0 .carousel {
      height: -webkit-fill-available;
      z-index: 50;
    }
    .hero-section0 .carousel-cell{
      overflow-x: clip;
    }
    .hero-section.hero-section0.overlay::before, .hero-title .overlay::before {
      background-color: transparent;
    }
    .hero-section0 .slider-img-custom{
      position: absolute;
      top: -90%;
      right: -5%;
      width: 55%;
      border-radius: 50%;
      z-index: 50;
      box-shadow: 4px 0px 0px 1px rgb(71 79 158 / 29%), 7px 0px 0px 7px #474f9e5e;
      filter: brightness(68%);
    }
    @media (max-width: 1300px) {
      .hero-section0 .slider-img-custom{
        top: -53%;
      }
    }
    @media (max-width: 1100px) {
      .hero-section0 .slider-img-custom{
        top: -35%;
      }
    }
    @media (max-width: 992px) {
      .hero-section0 .carousel-cell{
        overflow-x: unset;
      }
      #hero04.hero-section0 .carousel .flickity-viewport{
        overflow: hidden;
      }
      #hero04.hero-section0 .carousel {
        height: inherit;
      }
      .hero-section0 .slider-img-custom{
        position: relative;
        width: 100%;
        top: unset;
        right: unset;
      }
      #hero04.hero-section.hero-section0 {
        height: 380px; 
      }
    }
    @media (max-width: 575.98px) {
      #hero04.hero-section.hero-section0 {
        height: 300px;
      }
      .hero-section0 .slider-img-custom{
        position: absolute;
        top: -36%;
        right: -50%;
        z-index: 10;
        opacity: 0.8;
      }
      .hero-section0 .hero01-txt {
        z-index: 50;
        text-align: left !important;
      }
      .hero-section0 .carousel-cell {
        overflow-x: clip;
      }
      .hero-section0 .hero01-txt h2 {
        font-size: 1.5rem !important;
      }
    }
    @media (min-width: 1600px) {
      .hero-section0 .slider-img-custom{
        top: -120%;
        width: 55%;
        right: -10%;
      }
    }
    @media (min-width: 1600px) {
      .hero-section0 .slider-img-custom{
        top: -116%;
        width: 55%;
        right: -10%;
      }
    }
    @media (min-width: 1800px) {
      .hero-section0 .slider-img-custom{
        top: -129%;
        width: 50%;
        right: -6%;
      }
    }
    @media (min-width: 2200px) {
      #hero04.hero-section.hero-section0 {
        height: 800px;
      }
      .hero-section0 .slider-img-custom{
        top: -38%;
        width: 38%;
        right:0;
      }
    }
    @media (min-width: 2200px) {
      #hero04.hero-section.hero-section0 {
        height: 900px;
      }
      .hero-section0 .slider-img-custom{
        top: -73%;
        width: 47%;
        right: 0;
      }
    }
    @media (min-width: 3000px) {
      #hero04.hero-section.hero-section0 {
        height: 900px;
      }
      .hero-section0 .slider-img-custom{
        top: -86%;
        width: 36%;
        right: 7%;
      }
    }
    @media (min-width: 4000px){
      .hero-section0 .slider-img-custom {
        top: -99%;
        width: 36%;
        right: 12%;
      }
    }

  /* ==========================================================================
    Hero Section 1 custom css
    =========================================================================== */  
    .hero-section.hero-section1 {
      border-bottom-right-radius: 200px;
      background-size: cover;
    }
    .hero-section.hero-section1.overlay::before {
      background-color: rgba(50, 50, 93, 0.5);
      border-bottom-right-radius: 200px;
    }
  
  /* ==========================================================================
    Hero Section 2 custom css
    =========================================================================== */  
    .hero-section.hero-section2 {
      height: auto;
      margin-top: 34px !important;
      padding-top: 25px;
      padding-bottom: 3rem;
      overflow: hidden;
    }
    @media (max-width: 991.95px){
      .hero-section.hero-section2 {
        margin-top: 134px !important;
      }
    }
    .hero-section2 .flickity-viewport {
      overflow-y: hidden;
      height: 100%;
    }
    .hero-section2 .flickity-page-dots{
      width: auto;
      top: 94%;
      right: 8%;
    }
    .hero-section2 .flickity-page-dots .dot {
      margin: 0 2px;
      width: 7px;
      height: 7px;
      background: #6772e5;
    }
    .hero-section2 .carousel-cell{
      overflow-x: clip;
      width: 100%;
      overflow-y: visible;
      height: auto;
    }
    .hero-section2 .flickity-enabled {
      position: relative;
    }
    @media (min-width: 2000px) {
      .hero-section2 .flickity-page-dots {
        top: 94%;
        right: 18%;
      }
    }
    @media (max-width: 599px) {
      .hero-section2 .hero02-img img {
        border-bottom-right-radius: 0px !important;
        height: 200px;
        object-fit: cover;
      }
      .hero-section2 .flickity-page-dots {
        top: 100%;
        right: 50%;
      }
    }

  /* ------------- page Content -------------- */
    @media (max-width: 991.95px){
      #pageContent {
        margin-top: 110px !important;
      }
    }
    @media (min-width: 321px) and (max-width: 413.95px){
      .content-section.wide-80 {
        padding-top: 60px !important;
        padding-bottom: 40px !important;
      }
    }
  /* ------------- Hover Boxes -------------- */
    .info_cards .card {
      position: relative;
      overflow: hidden;
      margin-bottom: 1rem;
      border-radius: 0;
      border: none;
    }
    .info_cards .card .card-body {
      position: relative;
      z-index: 10;
      text-align: left;
    }
    .info_cards .card::before {
      content: ' ';
      display: block;
      z-index: 1;
      position: absolute;
      top: calc(100% - 4px);
      height: 100%;
      width: 100%;
      left: 0;
      background-color: #6772e5;
      transition: 0.5s;
    }
    .info_cards .card i {
      color:#6772e5;
      font-size: 1.5rem;
    }
    .info_cards .card:hover, .info_cards .card:hover a, .info_cards .card:hover i, .info_cards .card:hover .text-gray-600, .info_cards .card:hover .title {
      color: #fff !important;
    }
    .info_cards .card:hover::before {
      top: 0;
    }
    .info_cards .card:hover .explore-after::after {
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      content: "\f061";
      margin-left: 0.5rem;
      line-height: inherit;
      font-size: 1rem;
    }
  /**** text blocks ****/
    @media (max-width: 320.95px){
      .txt-block.txt-block-custom .btn {
        margin-bottom: 15px;
      }
    }
  /**** Country flags list****/
    .countrieslist2 {
      font-weight: 400;
    }
    .countrieslist2 > a {
      width: 16.66% !important;
      margin-bottom: 1.3rem;
    }
    .countrieslist2 a img {
      width: 17%;
      height: auto;
      margin-bottom: 0rem;
    }
    .countrieslist2 a:hover {
      transform: translateY(-3px);
    }
    @media (max-width: 767.98px) {
      .countrieslist2 > a {
        width: 25% !important;
        margin-bottom: 1.2rem;
      }
    }
    @media (max-width: 599px) {
      .countrieslist2 > a {
        width: 33% !important;
        margin-bottom: 1.2rem;
      }
    }
    @media (max-width: 400px) {
      .countrieslist2 > a {
        width: 50% !important;
      }
    }
  /* ==========================================================================
    Publications custom CSS
    =========================================================================== */
    .publication{ 
      margin-bottom: 1rem;
      border-radius: 0;
      border: none;
    }
    .publication::before{ 
      content: unset;
    }
    .publication.publication-blue {
      color: #fff;
    }
    .publication.publication-blue{
      background-color: #6772e5;
    }
    .publication-blue h3, .publication-blue .publication-text, .publication-blue .publication-details{
      color: #fff !important;
    }    
    .publication-blue i{
      color: #32325d;
      font-size: 2.5rem;
    } 
    .publication.publication-blue .btn.btn-tra-unblue{
      color: #fff !important;
      border-color: #fff !important;
    }
    .publication.publication-blue .btn.btn-unblue{
      background-color: #FFF ;
      color: #6772e5 !important;
      font-weight: bold;
    }
    .publication.publication-blue .btn:hover{
      color: #FFF !important;
      border-color: #fff !important;
      background-color: transparent;
    }
    .publication.publication-blue .btn.ext:hover .ext::after{
      color: #181828 !important;
    }
    @media (max-width: 767px) {
      .w-sm-100{
        width: 100% !important;
      }
      .publication-details{
        display: block !important;
      }
      .publication-details.publications-inner .card-body{
        display: block !important;
      }
      .publication-details .d-flex{
        margin-left: 0 !important;
      }
    }
    small .section-id {
      font-size: inherit !important;
    }
  /* ==========================================================================
    Image custom CSS
    =========================================================================== */
    .img-round-custom{
      border-radius: 50%;
      box-shadow: 0px -16px 0px 2px #8898aa78;
    }
/* end homepage custom CSS */

/* ==========================================================================
  Publications Page custom CSS
  =========================================================================== */
    .tag-bg-grey1 {
      background-color: #EAEEF3;
    }
    .tag-bg-grey2 {
      background-color: #B9C3CF;
    }
    .tag-bg-grey3 {
      background-color: #F5F9FF;
    }
    .font-size-xs{
      font-size: 0.65rem;
    }
    @media only screen and (max-width: 767.95px){
      .publication-details .publication-img-box {
        margin-bottom: 20px;
        width: 30% !important;
      }
      .publication-details.publications-inner .card-body .w-70.ms-3 {
        margin-left: 0!important;
      }
    }
    /* Publications filter Custom CSS */
    .accordion-custom .card-header, .accordion-custom .card-body{
      padding: 0;
    }
    .accordion-custom .card .card-header {
      margin-bottom:0;
      border-bottom:none;
      background-color: transparent;
    }
    .accordion-custom .card .card-header h6{
      width: 100%;
      text-align: left;
      background: transparent;
    }
    .accordion-custom .card-header:first-child {
      border-radius: 0px;
    }
    .accordion-custom .card {
      transition: max-height 1s ease-in-out;
      margin: 0;
      margin-bottom: 1rem;
      border:none;
      box-shadow: none;
      background-color: transparent;
    }
    .accordion-custom .card .card-body .list-group{
      background-color: transparent;
    }
    .accordion-custom .card .card-body .list-group .list-group-item{
      padding-left: 0;
      border: none;
      display: flex;
      padding: 0 !important;
      font-size: 90%;
      background-color: transparent;
      height: 33px;
      align-items: center;
      font-family: "soleil",sans-serif; 
      font-weight:300;
    }
    .accordion-custom .card .card-body .list-group .list-group-item label{
      height: 100%;
      line-height: 2rem;
      cursor: pointer;
    }
    .accordion-custom .card .card-header h6::after {
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      content: "\2b";
      float: right;
      color: #8898aa;
    }
    .accordion-custom .card .card-header h6[aria-expanded="true"]::after {
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      content: "\f068";
      float: right;
      color: inherit;
    }
    /* offcanvas filter CSS */
    .offcanvas-backdrop{
      background: rgba(50, 50, 93, 0.85);
    }
    .offcanvas-backdrop.show {
      opacity: 1;
    }
    @media (max-width: 991.98px){
      .offcanvas .btn-close {
        right: 15px;
        position: absolute;
        width: 2em !important;
        height: 2em !important;
        opacity: 0;
        background: none !important;
      }
      .offcanvas.show .btn-close {
        position: absolute;
        right: 15px;
        width: 2em !important;
        height: 2em !important;
        opacity: 1;
        top: 5px;
        background: none !important;
        transform: translateX(100%);
        transition: transform 0.5s ease !important;
      }
      .offcanvas .offcanvas-body {
        margin-top: -20px;
      }
      .offcanvas {
        max-width: 91%;
      }
    }
/* end Publications page custom CSS */

/* ==========================================================================
  Login - Register Pages custom CSS
  =========================================================================== */
  .font-size-sm{
    font-size: 0.8rem;
  }
  .login-custom .bg-white-lg{
		background-color: #FFF;
	}
  .login-custom .logo-img img{
		width: 80px;
	}
	.login-custom .content-section{
		padding-top: 80px;
		padding-bottom: 80px;
	}
	.login-custom .colored-col{
		position: relative;
		min-height: 450px;
	}
	.login-custom .colored-section {
		position: absolute;
		height: 110%;
		width: 92%;
		right: 4%;
		top: -5%;
		z-index: 40;
	}
	.login-custom .colored-section::before{
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: #32325d;
		z-index: -1;
	}
	.login-custom .logo-img{
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		transition: all 0.6s;
	}
	.login-custom form{
		color: #B9C3CF;
		padding: 15px;
	}
	.login-custom .form-group{
		margin-bottom: 5px;
		position: relative;
	}  
	.login-custom .form-group.hasError input{
		border-color: #6772e5 !important;
	}
	.login-custom .form-group.hasError label{
		color: #6772e5 !important;
	}
	.login-custom label{
		transform: translateY(20px);
		transition: all 0.4s;
		cursor: text;
		z-index: -1;
	}	
	.login-custom label.active{
		transform: translateY(0px);
		font-size: 10px;
	}   
	.login-custom input:not([type=submit]){
		background: none;
		outline: none;
		border: none;
		display: block;
		width: 100%;
		border-bottom: 1px solid #eee;
		color: #32325d;
		z-index: 1;
	}
	.login-custom input.hasError{
		border-color: #6772e5;
	}
	.login-custom span.error{
		color: #6772e5;
		position: absolute;
		bottom: -20px;
		right: 0;
    font-size: 12px;
		display: none;
	}   
	.login-custom input[type=password]{
		color: #32325d;
	}   
	@media (max-width: 768px){
		.login-custom .bg-white-lg{
			background-color: transparent;
		}
		.login-custom .colored-col {
			position: relative;
			min-height: auto;
			background: #f0f2f9;
		}
		.login-custom .colored-section {
			height: 180px !important;
			top: 0px;
			position: relative;
			z-index: 40;
			width: 100%;
			right: unset;
		}
		.login-custom .form{
			background: #FFF;
		}
    .login-custom .logo-img img{
      width: 70px;
    }
	}       
/* end Login - Register Pages custom CSS */

/* Tabs and navs page custom CSS */
  /* tab Custom1 */
    #tabCustom1 {
      display: flex; 
    }
    #tabCustom1 .steps {
      width: 26.05%;
      margin-right: 20px; 
    }
    #tabCustom1 .content {
      width: 73.95%; 
    }
    #tabCustom1 .steps ul {
      border-left: 3px solid rgba(242, 242, 242, 0.4);
    }
    #tabCustom1 .steps li {
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      position: relative;
    }
    #tabCustom1 .steps li a {
      padding-left: 18px;
    }
    #tabCustom1 .steps li a:before {
      content: "";
      width: 3px;
      height: 100%;
      position: absolute;
      left: -3px;
      top: 0;
    }
    #tabCustom1 .steps li.current a {
      color: #6772e5;
    }
    #tabCustom1 .steps li.current a:before {
      background: #6772e5;
    }
    #tabCustom1 .content h4 {
      display: none;
    }
    @media (max-width: 767px) {
      #tabCustom1 {
        padding: 50px 20px;
        flex-direction: column;
      }
      #tabCustom1 .steps {
        width: 100%;
        margin-right: 0;
        margin-bottom: 30px;
      }
      #tabCustom1 .content {
        width: 100%;
      }
    }
  /* tab Custom2 */
    #tabCustom2 .tabs-page {
      position: relative;
    }
    #tabCustom2 .nav-tabs	{
      position: relative;
      min-height: 50px;
      margin: 0;
      padding-left: 15px;
      text-align: left;
      cursor: auto;
      border: none;
      z-index: 1;
    }
    #tabCustom2 .nav-tabs .nav-link {
      display: inline-block;
      height: auto;
      border: none;
      text-align: left;
    }
    .tabs-page > .nav-tabs .nav-link:not(:last-child) {
      padding-right: 22px;
    }
    #tabCustom2 .nav-tabs .nav-link:not(:last-child) {
      margin-right: 20px;
    }
    #tabCustom2 .nav-tabs .nav-link {
      padding: 12px 0;
      line-height: 1.42857143;
      color: #181828 !important;
      border: none !important;
      background: none !important;
    }
    #tabCustom2 .nav-tabs .nav-link:hover {
      color: #6772e5 !important;
    }
    #tabCustom2 .nav-tabs .nav-link.active {
      color: #6772e5 !important;
      background: none;
      border-bottom: 2px solid #6772e5 !important;
    }
    #tabCustom2 .tab-content{
      padding : 5px 15px;
    }
  /* tab Custom3 */
    #tabCustom3 .tab-content{
      background-color: #6772e5;
      padding : 5px 15px;
    }
    #tabCustom3 .nav-pills .nav-link.active{
      background-color: #6772e5;
      color: #FFF;
    }
    #tabCustom3 .nav-pills .nav-link.active:hover{
      color: #FFF;
    }
    #tabCustom3 .nav-pills .nav-link{
      color: #181828;
      border-radius: 0;
    }
    #tabCustom3 .nav-pills .nav-link:hover{
      color: #6772e5;
    }
    #tabCustom3 .nav-pills > li > a {
      border-radius: 0;
    }
    @media (max-width: 767px) {
      #tabCustom3 .nav-link{
        width: 100%;
        text-align: left;
      }
    }
  /* tab Custom4 */
    #tabCustom4 .nav-tabs {
      border-bottom: none;
      flex-direction: column !important;
      min-width: 20%;
    }
    #tabCustom4 .nav-tabs .nav-link.active {
      color: #6772e5;
      border-bottom: 2px solid #6772e5;
    }
    #tabCustom4 .nav-tabs .nav-link {
      text-align: left;
      margin-bottom: -1px;
      background: none;
      border: 1px solid transparent;
    }
    #tabCustom4 .nav-tabs .nav-link:hover {
      border-bottom: 2px solid #6772e5;
    }
    #tabCustom4 .nav-tabs .nav-link {
      border: solid transparent;
      border-width: 0 0 2px;
      border-radius: 0;
      color: #181828;
      padding: 15px;
    }
    #tabCustom4 .tab-content{
      padding: 5px 15px;
    }
    @media (max-width: 767px) {
      #tabCustom4 div{
        flex-direction: column !important;
        min-width: 20%;
      }
      #tabCustom4 .nav-link{
        text-align: left;
      }
    }
  /* tab Custom5 */
    #tabCustom5 nav > div .nav-item.nav-link{
      position: relative;
    }
    #tabCustom5 nav > div .nav-item.nav-link,
    #tabCustom5 nav > div .nav-item.nav-link.active{
      border: none;
      padding: 18px 25px;
      color: #fff;
      background: #32325d;
      border-radius: 0;
    }
    #tabCustom5 .tab-content{
      border-top: 5px solid #6772e5;
      border-bottom: 5px solid #6772e5;
      padding: 10px 15px;
    }
    #tabCustom5 nav > div .nav-item.nav-link:hover,#tabCustom5 nav > div .nav-item.nav-link:focus, #tabCustom5 nav > div .nav-item.nav-link.active{
      border: none;
      background: #6772e5;
      color: #fff;
      border-radius:0;
      transition: background 0.20s linear;
    }
    #tabCustom5 nav > div .nav-item.nav-link.active::after{
      content: "";
      position: absolute;
      bottom: -33px;
      left: 45%;
      border: 15px solid transparent;
      border-top-color: #6772e5;
      z-index: 90;
    }
    @media (max-width: 767px) {
      #tabCustom5 nav > div .nav-item.nav-link.active::after{
        content: none;
      }
    }
/* End Tabs and navs page custom CSS */

/* Form page custom CSS */
  .form-custom .select2-container--bootstrap-5 .select2-search.select2-search--inline .select2-search__field::placeholder{
    color: #6c757d;
    opacity: 1; /* Firefox */
  }
  .form-custom .form-check-label{
    cursor: pointer;
  }
/* End Form page custom CSS */


/* ==========================================================================
  ARABIC CSS
  =========================================================================== */

  /* link hover underline */
    [dir="rtl"] .underline-hover-unblue::after{
      right: 0 !important;
      left: unset !important;
      transform-origin: left center;
    }
    [dir="rtl"] .underline-hover-unblue:hover::after{
      transform-origin: right center !important;
    }
  /* homepage arabic custom */
    [dir="rtl"] .fw-bold {
      font-weight: 400!important;
    }
    [dir="rtl"] .header-menu-wrapper-on .menu-link .menu-text::after, [dir="rtl"] .menu-link::after {
      right: 0 !important;
      left: unset !important;
      transform-origin: left center !important;
    }
    [dir="rtl"] .header-menu-wrapper-on .menu-link:hover .menu-text::after, [dir="rtl"] .menu-link:hover::after {
      transform-origin: right center !important;
    }
    [dir="rtl"] .slider-img-custom{
      left: -5%;
      right: unset;
    }
    @media (max-width: 575.98px) {
      [dir="rtl"] .slider-img-custom{
        left: -50%;
        right: unset;
      }
      [dir="rtl"] .hero01-txt {
        z-index: 50;
        text-align: right !important;
      }
    }
    @media (min-width: 1600px) {
      [dir="rtl"] .slider-img-custom{
        left: -10%;
        right: unset;
      }
    }
    @media (min-width: 1600px) {
      [dir="rtl"] .slider-img-custom{
        left: -10%;
        right: unset;
      }
    }
    @media (min-width: 1800px) {
      [dir="rtl"] .slider-img-custom{
        left: -6%;
        right: unset;
      }
    }
    @media (min-width: 2200px) {
      [dir="rtl"] .slider-img-custom{
        left:0;
        right: unset;
      }
    }
    @media (min-width: 2200px) {
      [dir="rtl"] .slider-img-custom{
        left: 0;
        right: unset;
      }
    }
    @media (min-width: 3000px) {
      [dir="rtl"] .slider-img-custom{
        left: 7%;
        right: unset;
      }
    }
    @media (min-width: 4000px){
      [dir="rtl"] .slider-img-custom {
        left: 12%;
        right: unset;
      }
    }
    [dir="rtl"] .me-2{
      margin-left: .5rem !important;
      margin-right: unset !important;
    }
    [dir="rtl"] .ms-3{
      margin-right: 1rem !important;
      margin-left: unset !important;
    }
    [dir="rtl"] .info_cards .card .card-body {
      text-align: right !important;
    }
    [dir="rtl"] .info_cards .card .card-footer .explore-after {
      font-weight: 400 !important;
    }
    [dir="rtl"] .info_cards .card:hover .explore-after::after {
      content: "\f060";
      margin-right: 0.5rem;
      margin-left: unset;
    }
    [dir="rtl"] .me-1 {
      margin-left: 0.25rem !important;
      margin-right: unset !important;
    }
    @media (min-width: 992px){
      [dir="rtl"] .me-lg-2 {
        margin-left: 0.5rem !important;
        margin-right: unset !important;
      }
    }
    [dir="rtl"] .offset-2 {
      margin-right: 16.66666667%;
      margin-left: unset;
    }
    @media (min-width: 576px){
      [dir="rtl"] .offset-sm-3 {
        margin-right: 25%;
        margin-left: unset;
      }
    }
    @media (min-width: 768px){
      [dir="rtl"] .offset-md-1 {
        margin-right: 8.33333333%;
        margin-left: unset;
      }
    }
    @media (min-width: 992px){
      [dir="rtl"] .offset-lg-1 {
        margin-right: 8.33333333%;
        margin-left: unset;
      }
    }
    @media (max-width: 767px){
      [dir="rtl"] .publication-details .d-flex {
        margin-right: 0 !important;
        margin-left: unset !important;
      }
    }
    [dir="rtl"] .ms-4 {
      margin-right: 1.5rem!important;
      margin-left: unset !important;
    }
    [dir="rtl"] .footer-socials a {
      margin-left: 20px;
      margin-right: unset !important;
    }
    [dir="rtl"] .publication.publication-blue .btn.btn-unblue {
      font-weight: normal;
    }
  /* login - Register pages */
    @media (min-width: 768px){
      [dir="rtl"] .offset-md-2 {
        margin-right: 16.66666667%;
        margin-left: unset;
      }
    }
    @media (min-width: 992px){
      [dir="rtl"] .offset-lg-2 {
        margin-right: 16.66666667%;
        margin-left: unset;
      }
    }
    @media (min-width: 992px){
      [dir="rtl"] .offset-lg-3 {
        margin-right: 25%;
        margin-left: unset;
      }
    }
    [dir="rtl"] .login-custom span.error{
      left: 0;
      right: unset;
    }   
  /* publications page */
    /* filter */
    [dir="rtl"] .accordion-custom .card .card-header h6 {
      text-align: right;
      font-size: 0.9rem;
    }
    [dir="rtl"] .accordion-custom .card .card-header h6[aria-expanded="true"]::after {
      float: left;
    }
    [dir="rtl"] .me-3 {
      margin-left: 1rem!important;
      margin-right: unset!important;
    }
    [dir="rtl"] .accordion-custom .card .card-body .list-group .list-group-item {
      padding-right: 0;
      padding-left: 1rem;
    }
    [dir="rtl"] .card-header h6::after {
      float: left!important;
    }
    .accordion-custom .card .card-body .list-group .list-group-item{
      font-family: "Noto Naskh Arabic", Tahoma, serif;
      font-weight:400;
    }
    @media (max-width: 991.98px){
      [dir="rtl"] .offcanvas .btn-close {
        right: 15px;
        width: 2em !important;
        height: 2em !important;
        opacity: 0;
        background: none !important;   
      }
      [dir="rtl"] .offcanvas.show .btn-close {
        right: 15px;
        width: 2em !important;
        height: 2em !important;
        opacity: 1;
        background: none !important;
        transform: translateX(100%);
        z-index: 1;
        transition: transform 0.5s ease !important;
      }
      [dir="rtl"] .offcanvas .offcanvas-body {
        margin-top: -20px;
      }
    }
    /* publications list */
    @media only screen and (max-width: 767.95px){
      [dir="rtl"] .publication-details.publications-inner .card-body .w-70.ms-3 {
        margin-right: 0!important;
        margin-left: unset!important;
      }
    }
    [dir="rtl"] .fadeInLeft {
      animation-name: fadeInRight !important;
    }
    [dir="rtl"] .fadeInRight {
      animation-name: fadeInLeft !important;
    }
    [dir="rtl"] .menu-link::before {
      left: unset!important;
      right: 0;
    }
  /* Tabs and navs page custom CSS */
    /* tab Custom1 */
    [dir="rtl"] #tabCustom1 .steps ul {
      border-right: 3px solid rgba(242, 242, 242, 0.4);
      border-left: none;
    }
    [dir="rtl"] #tabCustom1 .steps li a:before {
      right: -3px;
      left: unset;
    }
    [dir="rtl"] #tabCustom1 .steps li a {
      padding-right: 18px;
      padding-left: unset;
    }
    [dir="rtl"] #tabCustom1 .steps {
      margin-left: 20px;
      margin-right: unset;
    }
    /* tab Custom2 */
    [dir="rtl"] #tabCustom2 .nav-tabs .nav-link {
      text-align: right;
    }
    [dir="rtl"] #tabCustom2 .nav-tabs {
      padding-right: 15px;
      padding-left: unset;
      text-align: right;
    }
    [dir="rtl"] #tabCustom2 .nav-tabs .nav-link:not(:last-child) {
      margin-left: 20px;
      margin-right: unset;
    }
    [dir="rtl"] .tabs-page > .nav-tabs .nav-link:not(:last-child) {
      padding-left: 22px;
      padding-right: unset;
    }
    /* tab Custom3 */
    @media (max-width: 767px) {
      [dir="rtl"] #tabCustom3 .nav-link{
        text-align: right;
      }
    }
    /* tab Custom4 */
    [dir="rtl"] #tabCustom4 .nav-tabs .nav-link {
      text-align: right;
    }
    @media (max-width: 767px) {
      [dir="rtl"] #tabCustom4 .nav-link{
        text-align: right;
      }
    }
    /* tab Custom5 */
    [dir="rtl"] #tabCustom5 nav > div .nav-item.nav-link.active:after {
      right: 45%;
      left: unset;
    }
  /* Form page custom CSS */
    [dir="rtl"] .form-custom .select2-container--bootstrap-5 .select2-selection--multiple:not(.form-select-sm):not(.form-select-lg) .select2-selection__choice .select2-selection__choice__remove {
      margin-left: 0.5rem;
      margin-right: unset;
    }
    [dir="rtl"] .form-custom .select2-container--bootstrap-5 .select2-selection--multiple:not(.form-select-sm):not(.form-select-lg) .select2-selection__choice .select2-selection__choice__display {
      margin-right: 1.2rem;
      margin-left: unset;
    }
    [dir="rtl"] .form-custom .form-check {
      padding-right: 1.5em;
      padding-left: unset;
    }
    [dir="rtl"] .form-custom .form-check .form-check-input {
      float: right;
      margin-right: -1.5em;
      margin-left: unset;
    }
    [dir="rtl"] .form-custom .select2-container--bootstrap-5 .select2-selection__clear {
      left: 3rem;
      right: unset !important;
    }
    [dir="rtl"] .form-custom .select2-container--bootstrap-5 .select2-selection {
      padding: 3px 0.75rem 3px 3rem;
      background-position: left 1rem center;
    }
    [dir="rtl"] .form-custom .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
      margin-left: 1rem;
      margin-right: unset;
    }
  /* End Form page custom CSS */