@import url('https://fonts.googleapis.com/css2?family=Miniver&family=Roboto:ital,wght@0,100..900;1,100..900&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');


* {
      padding: 0;
      margin: 0;
      font-family: sans-serif;
      box-sizing: border-box;
      font-family: "Roboto", sans-serif;
}

:root {
      --primary-color: #2F0052;
      --white-color: #FFFFFF;

}


h1,
h2,
h3,
h4,
h5,
h6 {
      font-weight: 600;
}

body a {
      text-decoration: none;
}

body {
      background: #f0f5ff;
}

.text-justify {
      text-align: justify;
}

.langSel {
      border: 1px solid #ccc;
      border-radius: 5px;
      height: 30px;
      cursor: pointer;
      margin: 8px 0;
      padding: 0 10px;
      display: flex;
      align-items: center;
      gap: 5px;
}

.btn-service {
      border: 1px solid #FFC700 !important;
      border-radius: 8px;
      color: var(--primary-color);
      letter-spacing: 1px;
      font-weight: 700;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 14px;
      padding: 10px 15px;
}


.hero-content span {
      color: #F35426;
}

.search-btn {
      border: none;
      background: #fff;
}




/* // mobile Menu */

/* header section End */

/* slick slider */


/* ===Hero section Start=== */
.hero-bg {
      background: url(../images/hero.png) no-repeat center center/cover;

}

.hero-content {
      color: var(--white-color);
}


/* Our sercive section Start */
.service_head h2 {
      border-bottom: 2px solid #5A009D;
      padding: 10px 0;
      display: inline-block;
}

.legal_service h4 {
      color: #FF865B;
}

.card {
      border-radius: 12px;
}

.legal_service_section {
      border: 1px solid #FF865B;
      border-radius: 20px;
}

.request_section {
      background-image: url(../images/request-bg.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
}

.request_content {
      color: var(--white-color);
      background: #eeebeb33;
      border-radius: 12px;


}

.aboutus_btn a {
      color: var(--white-color);
      padding: 9px 20px;
      margin-bottom: 20px;
}

.aboutus_bg {
      background-image: url(../images/hero.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      padding: 20px 0;
}

.aboutus_content {
      color: var(--white-color);
      padding: 20px;

}

.aboutus_item i {
      /* logical, so it mirrors in RTL without a separate arabic.css override */
      padding-inline-end: 8px;
}

.mission {
      background: var(--white-color);
      padding: 20px;
      border-radius: 12px;
}

.mission h3 {
      background: #2F0052;
      color: var(--white-color);
      padding: 10px;
      margin: 10px 0;
      display: inline;


}

.mission p {
      border-top: 2px solid var(--primary-color);
}

.ourgoal_content p {
      border: 1px solid #FF865B;
      padding: 15px 10px;
      border-radius: 12px;
}

.gols_bg {
      background: var(--white-color);
}

.ourgoal_content p {
      margin: 15px;
}

/* Our sercive section End */
.training_top {
      position: relative;
      border: 1px solid #FF865B;
      padding: 20px;
      border-radius: 12px;
}

.training_number {
      border: 1px solid #FF865B;
      border-radius: 12px;
      background: #f0f5ff;
      color: blue;
      position: absolute;
      top: -24px;
      left: 30px;
}

.events_bg {
      background: #3a98f0;
      color: var(--white-color);
      text-align: center;
}

/* ===reserarch next section End=== */
/* ===Footer section Start=== */
/* .footer-bg {
      background: var(--white-color);

      position: relative;
}

.footer-head ul li {
      padding: 7px 0;
}

.footer-head h4 {
      color: #5D5A88;
}

.footer-head ul li a {
      color: #9795B5;
}

.team-condition {
      display: inline-block;
}

.team-condition p {
      color: #9795B5;
}

.team-condition ul {
      display: flex;
      list-style: none;
      padding: 0;
}

.team-condition ul li {
      padding: 0 7px;
}

.team-condition ul li a {
      color: #9795B5;
} */

.footer-bg {
      background: var(--primary-color);

      position: relative;
}

.footer-link ul li a {
      color: #ffffffb0;
      font-size: 14px;
}

.footer-link ul li {
      transition: .3s ease;
      padding: 4px 0;
}

ul li {
      list-style: none;
}

ul {
      padding: 0;
}

.social-media-link ul li {
      color: #ffffff81;
}

.social-media-link ul li {
      background: var(--rvc);
      height: 30px;
      width: 30px;
      color: var(--ac);
      border: 1px solid #8022a3;
      border-radius: 50px;
      line-height: 30px;
      text-align: center;
}

.footer-left p {
      line-height: 25px;
      color: #ffffffb0 !important;
}

.copyright-part {
      background: #430275;
}

.copyright-part p {
      margin: 0;
      color: #d5d5d5;
}

/* ===Footer section End=== */

/* Numoin public header */
.numoin-site-header {
      z-index: 1040;
      background: rgba(255, 255, 255, .97);
      border-top: 2px solid #111;
      box-shadow: 0 2px 12px rgba(16, 24, 40, .03)
}

.numoin-site-header .navbar {
      height: auto;
      min-height: 78px;
      padding: 0
}

.numoin-header-inner {
      width: 100%
}

.numoin-header-shell {
      min-width: 0
}

.numoin-header-brand {
      display: flex;
      align-items: center;
      width: 130px;
      margin-block: 0;
      padding: 0
}

.numoin-header-logo {
      display: block;
      width: 130px;
      height: 46px;
      object-fit: contain
}

.numoin-header-menu {
      gap: 1px;
      flex-wrap: nowrap
}

.numoin-site-header .numoin-header-menu .nav-link {
      position: relative;
      padding: .45rem .48rem !important;
      color: #5d687a;
      font: 500 .76rem/1.2 "Inter", sans-serif;
      white-space: nowrap;
      font-size: 14px;
}

.numoin-site-header .numoin-header-menu .nav-link::after {
      content: "";
      position: absolute;
      right: .25rem;
      bottom: 0;
      left: .25rem;
      height: 1.5px;
      background: #7c3aed;
      transform: scaleX(0);
      transition: transform .2s
}

.numoin-site-header .numoin-header-menu .nav-link:hover,
.numoin-site-header .numoin-header-menu .nav-link.active {
      color: #7c3aed
}

.numoin-site-header .numoin-header-menu .nav-link:hover::after,
.numoin-site-header .numoin-header-menu .nav-link.active::after {
      transform: scaleX(1)
}

.numoin-header-actions {
      display: flex;
      align-items: center;
      gap: 6px
}

.numoin-provider-button,
.numoin-signin-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      height: 34px;
      min-height: 34px;
      padding: 0 14px;
      border-radius: 999px;
      font: 600 .68rem/1 "Poppins", sans-serif;
      white-space: nowrap
}

.numoin-provider-button {
      color: #fff !important;
      background: linear-gradient(135deg, #7c3aed, #246ff0);
      box-shadow: 0 6px 15px rgba(79, 70, 229, .28)
}

.numoin-signin-button {
      color: #6d28d9 !important;
      border: 1px solid #7755ee;
      background: #fff
}

.numoin-signin-button i {
      font-size: .85rem
}

.numoin-language-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      padding: 0;
      color: #6d28d9;
      border: 1px solid #7755ee;
      border-radius: 50%;
      background: #fff
}

.numoin-language-button i {
      font-size: .8rem
}

.numoin-language-menu {
      min-width: 130px;
      padding: 6px;
      border: 1px solid #e4e7ec;
      border-radius: 10px;
      box-shadow: 0 12px 30px rgba(16, 24, 40, .12)
}

.numoin-language-menu .dropdown-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 7px;
      color: #465267;
      font: 500 .75rem/1.2 "Inter", sans-serif
}

.numoin-language-menu .dropdown-item:hover,
.numoin-language-menu .dropdown-item.active {
      color: #6d28d9;
      background: #f4efff
}

.numoin-menu-toggle {
      width: 43px;
      height: 40px;
      padding: 0;
      color: #172238;
      border: 1px solid #e1e5ed;
      border-radius: 11px;
      box-shadow: none !important;
      float: right;
}

.numoin-menu-toggle i {
      font-size: 1.55rem;
      line-height: 1
}

.numoin-menu-toggle .close-icon,
.numoin-menu-toggle[aria-expanded=true] .open-icon {
      display: none
}

.numoin-menu-toggle[aria-expanded=true] .close-icon {
      display: inline
}

@media(max-width:991.98px) {
      .numoin-site-header {
            border-top: 0
      }

      .numoin-site-header .navbar {
            height: auto;
            min-height: 64px;
            padding: .35rem 0
      }

      .numoin-header-brand {
            width: auto;
            margin: 0
      }

      .numoin-site-header .navbar-collapse {
            max-height: calc(100vh - 65px);
            overflow-y: auto;
            margin-top: 9px;
            padding: 10px 0 20px;
            background: #fff;
            border-top: 1px solid #e9ecf2
      }

      .numoin-header-menu {
            gap: 0;
            padding-bottom: 10px
      }

      .numoin-site-header .numoin-header-menu .nav-link {
            padding: 12px 2px !important;
            font-size: .88rem;
            border-bottom: 1px solid #f0f2f5
      }

      .numoin-header-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 8px
      }

      .numoin-provider-button,
      .numoin-signin-button {
            min-height: 42px;
            font-size: .75rem
      }

      .numoin-language-dropdown {
            grid-column: 1/-1
      }

      .numoin-language-button {
            width: 100%;
            height: 42px;
            border-radius: 999px
      }

      .numoin-language-button::after {
            margin-inline-start: 8px
      }

      .numoin-language-menu {
            position: static !important;
            width: 100%;
            margin-top: 6px;
            transform: none !important
      }
}

@media(max-width:575.98px) {
      .numoin-header-actions {
            grid-template-columns: 1fr
      }

      .numoin-header-logo {
            width: auto;
            height: 42px;
            max-width: 155px
      }
}
/* ------------------------------------------------------------------
   Layout guards
   ------------------------------------------------------------------ */

/* Bootstrap 5 sets a row's horizontal margin to half its gutter, but a
   .container only ever pads 12px. A .row.g-5 (3rem gutter) therefore pulls
   24px out of a container that only gives back 12px, and the leftover 12px
   per side makes the whole page scroll sideways. Clamp the pull-out to the
   container's padding; column padding is untouched, so the gutter *between*
   columns stays exactly as designed. */
.container > .row.g-5,
.container > .row.gx-5,
.container-xl > .row.g-5,
.container-xl > .row.gx-5,
.container-fluid > .row.g-5,
.container-fluid > .row.gx-5 {
      margin-right: -.75rem;
      margin-left: -.75rem;
}

/* ------------------------------------------------------------------
   Contact form
   ------------------------------------------------------------------ */
.contact-form__label {
      display: block;
      margin-bottom: 7px;
      font-size: .82rem;
      font-weight: 600;
      color: #3f4356;
}

.contact-form__label span {
      margin-inline-start: 3px;
      color: #d64550;
}

.contact-form__error {
      margin-top: 6px;
      font-size: .78rem;
      color: #d64550;
}

.contact-form .is-invalid {
      border-color: #d64550 !important;
}

.contact-confirm {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 18px 20px;
      margin-bottom: 26px;
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      border-radius: 14px;
}

.contact-confirm__icon {
      display: grid;
      flex: 0 0 auto;
      width: 34px;
      height: 34px;
      color: #fff;
      background: #10b981;
      border-radius: 50%;
      place-items: center;
}

.contact-confirm strong {
      display: block;
      color: #065f46;
}

.contact-confirm p {
      margin: 3px 0 0;
      font-size: .87rem;
      color: #047857;
}