/* Base Style CSS Start */

/* Font (Inter & Almarai) */
@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

/* Colors */

:root {
  --Primary: #2e63fd;
  --Gray-900: #101828;
  --Gray-700: #344054;
  --Gray-600: #475467;
  --Gray-500: #667085;
  --Gray-400: #98a2b3;
  --Gray-300: #d0d5dd;
  --Gray-200: #eaecf0;
  --Gray-100: #f2f4f7;
  --Gray-50: #f9fafb;
  --Base-White: #fff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  scroll-behavior: smooth;
}

ol,
ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  cursor: pointer;
}

img {
  max-width: 100%;
}

p {
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: var(--Gray-600, #475467);
  margin-bottom: 0;
}

h5 {
  font-size: 20px;
  font-weight: 600;
  line-height: 150%;
  color: var(--Gray-900, #101828);
  margin-bottom: 0;
}

.section__spacing {
  padding: 90px 0;
}

.section__top {
  max-width: 750px;
  margin: auto;
  text-align: center;
}

.section__title h6 {
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: var(--Primary);
}

.section__title h2 {
  font-size: 36px;
  font-weight: 600;
  line-height: 122.222%;
  letter-spacing: -0.72px;
  color: var(--Gray-900, #101828);
  margin-bottom: 15px;
}

.section__title p {
  font-size: 20px;
  line-height: 150%;
  color: var(--Gray-600, #475467);
  margin-bottom: 0;
}

.fill__btn a,
.outline__btn a {
  font-size: 18px;
  font-weight: 600;
  padding: 16px 22px;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
}

.fill__btn a {
  color: var(--Base-White);
  background: var(--Primary);
  border: 1px solid var(--Primary, #2e63fd);
}

.fill__btn a:hover {
  background: var(--Gray-900);
  border: 1px solid var(--Gray-900);
}

.outline__btn a {
  color: var(--Gray-700, #344054);
  background: var(--Base-White, #fff);
  border: 1px solid var(--Gray-300, #d0d5dd);
}

.outline__btn a:hover {
  color: var(--Base-White);
  background: var(--Gray-900);
}

.section__divider {
  border-bottom: 1px solid var(--Gray-200, #eaecf0);
}

/* Override Bootstrap */

.row > * {
  margin-top: 0 !important;
}

/* Base Style CSS End */

/* Header Part CSS Start */

/* Navigation Section CSS Start */

nav.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 22px 0;
  background: var(--Base-White);
  border-bottom: 2px solid var(--gray);
  z-index: 999;
}

.navbar.sticky {
  -webkit-animation: sticky 1.2s;
  animation: sticky 1.2s;
}

@keyframes sticky {
  from {
    top: -100px;
  }
  to {
    top: 0;
  }
}

.logo {
  margin-right: 20px;
}

.navbar .nav-item {
  padding: 0 18px !important;
}

.navbar .nav-link {
  position: relative;
  font-size: 16px;
  font-weight: 600;
  color: var(--Gray-600);
  padding: 0 !important;
}

.navbar .nav-link::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  background: var(--Primary);
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
  width: 100%;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--Primary) !important;
}

.language__btn a {
  font-family: "Almarai", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--Gray-600);
  margin-right: 35px;
}

.sign-up__btn a {
  font-size: 16px;
  font-weight: 600;
  padding: 12px 18px;
  color: var(--Base-White);
  background: var(--Primary);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
}

.sign-up__btn a:hover {
  background: var(--Gray-900);
}

.navbar-toggler {
  border: 0 !important;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

.toggler-icon {
  width: 25px;
  height: 2px;
  background-color: #e74c3c;
  display: block;
  transition: all 0.2s;
}

.middle-bar {
  margin: 5px auto;
}

.navbar-toggler .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}

.navbar-toggler .middle-bar {
  opacity: 0;
  filter: alpha(opacity=0);
}

.navbar-toggler .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}

.navbar-toggler.collapsed .top-bar {
  transform: rotate(0);
}

.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
  filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .bottom-bar {
  transform: rotate(0);
}

.navbar-toggler.collapsed .toggler-icon {
  background-color: #222222;
}

@media (max-width: 1200px) {
  .navbar-toggler:focus {
    box-shadow: none;
  }

  .navbar-nav {
    padding-top: 20px;
    padding-bottom: 40px;
  }

  .navbar .nav-item {
    padding: 8px 0 !important;
  }

  .language__btn a {
    margin-right: 0;
  }
}

/* Navigation Section CSS End */

/* Hero Section CSS Start */

.hero__wrapper {
  padding-top: 176px;
}

.hero__container {
  border-bottom: 2px solid var(--Gray-200, #eaecf0);
}

.hero__content {
  max-width: 768px;
  margin: auto;
  text-align: center;
}

.hero__content h1 {
  font-size: 60px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -1.2px;
  color: var(--Gray-900, #101828);
  padding: 0 50px;
  margin-bottom: 20px;
}

.hero__content p {
  font-size: 20px;
  line-height: 150%;
  color: var(--Gray-600, #475467);
  margin-bottom: 20px;
}

.approved span {
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  color: var(--Gray-600, #475467);
}

.hero__buttons {
  padding-top: 30px;
}

.hero__buttons .outline__btn a span {
  padding-right: 6px;
}

.hero__img {
  position: relative;
  margin-top: 77px;
  padding-bottom: 25px;
}

.hero__img::after {
  position: absolute;
  content: "";
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 813px;
  width: 100%;
  max-height: 582px;
  height: 100%;
  background: linear-gradient(
    97deg,
    rgba(23, 154, 255, 0.3) -51.05%,
    rgba(28, 141, 254, 0.3) -4.5%,
    rgba(42, 108, 253, 0.3) 78.24%,
    rgba(46, 99, 253, 0.3) 98.93%
  );
  filter: blur(75px);
  border-radius: 813px;
  z-index: -1;
}

/* Hero Section CSS End */

/* Header Part CSS End */

/* Main Part CSS Start */

/* Trusted By Business Section CSS Start */

.tb__container {
  background: #f2f4f7;
  padding: 64px;
  margin-top: 64px;
  border-radius: 16px;
}

.tb__card-content span {
  font-size: 14px;
  font-weight: 600;
  color: var(--Gray-900);
}

.tb__card-content h2 {
  font-size: 60px;
  font-weight: 600;
  letter-spacing: -1.2px;
  color: var(--Primary);
  padding: 10px 0;
  margin-bottom: 0;
}

.tb__card-content h6 {
  font-size: 18px;
  font-weight: 600;
  color: var(--Gray-900);
  margin-bottom: 0;
}

/* Trusted By Business Section CSS End */

/* Features Section CSS Start */

.features__img {
  padding-top: 60px;
}

.grid-row {
  display: grid;
  gap: 24px;
  justify-content: center;
}

.row-5 {
  grid-template-columns: repeat(5, 1fr);
  max-width: 951px;
  margin: 0 auto 24px auto;
}

.row-4 {
  grid-template-columns: repeat(4, 1fr);
  max-width: 756px;
  margin: 0 auto;
}

.features__card {
  text-align: center;
  padding: 25px;
  background: var(--Base-White, #fff);
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
    0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  border: 1px solid var(--Gray-200, #eaecf0);
  border-radius: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.features__card:hover {
  transform: translateY(-3px);
  background: #f9fafb;
}

.features__card i {
  font-size: 22px;
  margin-bottom: 15px;
  color: #475467;
  transition: all 0.3s ease;
}

.features__card:hover path {
  stroke: var(--Primary);
}

.features__card p {
  font-size: 16px;
  color: #475467;
  transition: all 0.3s ease;
  padding-top: 15px;
  margin-bottom: 0;
}

.features__card:hover p {
  color: var(--Primary);
}

/* Features Section CSS End */

/* Pricing Section CSS Start */

.pricing__info {
  margin-top: 25px;
  background: var(--Gray-50, #f9fafb);
  border-radius: 16px;
}

.pricing__info p {
  max-width: 1000px;
  margin: auto;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  line-height: 155.556%;
  color: var(--Gray-900, #101828);
  padding: 32px;
  margin-bottom: 0;
}

.pricing__table__container {
  margin-top: 64px;
}

.pricing__table {
  padding: 32px;
  background: var(--Base-White, #fff);
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
    0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  border: 1px solid var(--Gray-200, #eaecf0);
  border-radius: 16px;
}

.popular__pricing__table {
  background: linear-gradient(180deg, #d8e8ff 0%, #f8fbff 100%);
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
    0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  border: 2px solid #2e63fd;
}

.pricing__tag {
  position: absolute;
  top: 6px;
  right: 32px;
}

.pricing__tag span {
  font-size: 14px;
  font-weight: 600;
  color: var(--Base-White);
  background: var(--Primary);
  padding: 12px 27px;
  border-radius: 0 0 15px 15px;
}

.pricing__container .row > * {
  padding-left: 16px;
  padding-right: 16px;
}

.pricing__table__header h6 {
  font-size: 18px;
  font-weight: 600;
  color: var(--Gray-600, #475467);
}

.pricing__price h2 {
  font-size: 60px;
  font-weight: 600;
  letter-spacing: -1.2px;
  color: var(--Gray-900, #101828);
  padding-left: 15px;
  margin-bottom: 0;
}

.pricing__price h2 span {
  font-size: 16px;
  font-weight: 500;
  color: var(--Gray-600, #475467);
}

.pricing__table__header > p {
  padding-top: 8px;
  margin-bottom: 0;
}

.pricing__btn {
  margin: 30px 0 32px;
}

.pricing__btn a {
  display: block;
  width: 100%;
  font-size: 16px;
  text-align: center;
  padding: 12px;
  background: var(--Gray-900);
  border: 1px solid var(--Gray-900);
}

.pricing__btn a:hover {
  background: var(--Primary);
  border: 1px solid var(--Primary);
}

.popular__pricing__table .pricing__btn a {
  background: var(--Primary);
  border: 1px solid var(--Primary);
}

.popular__pricing__table .pricing__btn a:hover {
  background: var(--Gray-900);
  border: 1px solid var(--Gray-900);
}

.pricing__features h6 {
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--Gray-900, #101828);
}

.pricing__features p,
.pricing__features ul li {
  font-size: 16px;
  color: var(--Gray-600, #475467);
  margin-bottom: 20px;
}

.pricing__features p span {
  font-weight: 600;
}

.pricing__features ul {
  margin-left: -7px;
}

.pricing__features ul li {
  padding: 6px;
  margin-bottom: 0;
}

.pricing__features ul li img {
  padding-right: 8px;
}

/* Pricing Section CSS End */

/* FAQ Section CSS Start */

.faq__container {
  max-width: 900px;
  margin: 60px auto 0;
}

.accordion-button::after {
  display: none;
}

.accordion-button .toggle-icon {
  width: 20px;
  display: inline-block;
  margin-top: 4px;
  margin-right: 20px;
}

.accordion-button.collapsed .toggle-icon::before {
  content: url(../images/plus-icon.svg);
}

.accordion-button:not(.collapsed) .toggle-icon::before {
  content: url(../images/minus-icon.svg);
}

.accordion-item {
  padding: 16px 10px;
  transition: background 0.5s ease-in-out;
  border: none;
  border-radius: 16px !important;
}

.accordion-item.active-bg {
  background: #f9fafb;
}

.accordion-button,
.accordion-button:not(.collapsed) {
  font-size: 18px;
  font-weight: 500;
  color: var(--Gray-900, #101828);
  padding: 16px 20px 8px;
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  background: none;
  box-shadow: none;
}

.accordion-body {
  padding: 0;
  padding-left: 60px;
}

.accordion-body p {
  margin-bottom: 12px;
}

/* FAQ Section CSS End */

/* Main Part CSS End */

/* Footer Part CSS Start */

.footer__wrapper {
  background: #01072d;
  padding: 48px 0;
}

.footer__social a i {
  font-size: 24px;
  color: var(--Gray-400);
  transition: 0.3s ease-in-out;
}

.footer_divider {
  border-top: 1px solid var(--Gray-200, #eaecf0);
  margin: 64px 0 32px;
}

.footer__copyright p {
  font-size: 16px;
  color: var(--Gray-300, #d0d5dd);
  margin-bottom: 0;
}

.footer__menu a {
  font-size: 16px;
  color: var(--Gray-500, #667085);
  transition: 0.3s ease-in-out;
}

.footer__social a i:hover,
.footer__menu a:hover {
  color: var(--Primary);
}

/* Footer Part CSS End */

/* =========***=========
About Page CSS
=========***========= */

/* Common Hero Section CSS Start */

.common__hero__wrapper {
  padding-top: 176px;
}

.common__hero__content {
  max-width: 768px;
  margin: auto;
  text-align: center;
}

.common__hero__content h6 {
  font-size: 16px;
  font-weight: 600;
  color: var(--Primary);
}

.common__hero__content h1.hero__title {
  max-width: 600px;
  margin: auto;
  font-size: 48px;
  font-weight: 600;
  line-height: 125%;
  letter-spacing: -0.96px;
  color: var(--Gray-900, #101828);
}

.common__hero__content p {
  font-size: 20px;
  line-height: 150%;
  padding-top: 15px;
}

/* Common Hero Section CSS End */

/* Vision Mission Section CSS Start */

.visionmission__content h5 {
  padding: 25px 0 20px;
}

/* Vision Mission Section CSS End */

/* Services Section CSS Start */

.services__container {
  margin-top: 64px;
}

.service__card-icon {
  width: 48px;
  height: 48px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--Base-White, #fff);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  border: 1px solid var(--Gray-200, #eaecf0);
  border-radius: 10px;
}

.service__card-content h5 {
  padding: 20px 0 8px;
}

/* Services Section CSS End */

/* =======***=======
Pricing Page CSS
=======***======= */

.pricing__page__wrapper {
  padding: 175px 0 90px;
}

/* Question Section CSS Start */

.question__wrapper {
  padding: 35px 0;
}

.question__container {
  padding: 40px 20px 55px;
  text-align: center;
  background: var(--Gray-50, #f9fafb);
  border-radius: 16px;
}

.question__icon {
  width: 56px;
  height: 56px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
  background: linear-gradient(0deg, #eaf0ff 0%, #eaf0ff 100%), #ddc0ce;
  border-radius: 200px;
  border: 1.5px solid var(--Base-White, #fff);
}

.question__content p {
  font-size: 18px;
  padding-top: 10px;
}

.question__btn {
  padding-top: 42px;
}

.question__btn a {
  font-size: 16px;
  padding: 12px 18px;
}

/* Question Section CSS End */

/* =======***=======
FAQs Page CSS
=======***======= */

.faq__page__wrapper {
  padding: 176px 0 100px;
}

/* ==========***=============
Knowledge Hub Page CSS
==========***============= */

.knowledge-hub__search-input {
  max-width: 320px;
  width: 100%;
  margin: 45px auto 100px;
  padding: 12px 14px;
  background: var(--Base-White, #fff);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  border: 1px solid var(--Gray-300, #d0d5dd);
  border-radius: 8px;
}

.knowledge-hub__search-input input {
  width: 100%;
  background: transparent;
  border: none;
}

.knowledge-hub__search-input input:focus {
  outline: 0;
}

.knowledge-hub__search-input ::placeholder {
  font-size: 16px;
  color: var(--Gray-500, #667085);
}

.ezdan__tab .ezdan__tab__buttons {
  overflow: hidden;
  overflow-x: auto;
  flex-wrap: nowrap;
  gap: 25px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--Gray-200, #eaecf0);
}

.ezdan__tab .nav-link {
  position: relative;
  font-size: 16px;
  font-weight: 600;
  color: var(--Gray-500, #667085);
  padding: 0;
  border-radius: 0;
  white-space: nowrap;
}

.ezdan__tab .nav-link.active {
  color: var(--Primary);
  background: none;
}

.ezdan__tab .nav-link.active::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: -11px;
  width: 100%;
  height: 3px;
  background: var(--Primary);
}

.knowledge-hub__container {
  padding: 40px 0 60px;
}

.knowledge-hub__container .col-md-6 {
  padding: 0 15px;
}

.knowledge-hub__card {
  border-radius: 16px;
  border: 1px solid var(--Gray-200, #eaecf0);
  background: var(--Base-White, #fff);
}

.knowledge-hub__card__img img {
  width: 100%;
  border-radius: 16px 16px 0 0;
}

.knowledge-hub__card__content {
  padding: 20px 24px;
}

.knowledge-hub__card__content-tag span {
  font-size: 14px;
  font-weight: 600;
  color: #2e63fd;
}

.knowledge-hub__card__content h4 {
  font-size: 24px;
  font-weight: 600;
  color: var(--Gray-900, #101828);
  padding-top: 10px;
}

.knowledge-hub__card__content h6 {
  font-size: 14px;
  font-weight: 400;
  padding-top: 15px;
  margin-bottom: 0;
  color: var(--Gray-600, #475467);
}

/* Pagination CSS */

.pagination__wrapper {
  padding: 20px 0 100px;
}

.pagination__prev a,
.pagination__next a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--Gray-600, #475467);
}

.pagination__numbers li {
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  display: flex;
  font-size: 14px;
  font-weight: 500;
  color: var(--Gray-600, #475467);
  border-radius: 20px;
}

.pagination__numbers li.active {
  background: var(--Gray-50, #f9fafb);
}

/* Knowledge Details Page CSS */

.knowledge__details-tag span {
  display: inline-block;
  margin: 30px auto 0;
  padding: 7px 10px;
  background: var(--Gray-50, #f9fafb);
  border: 1px solid var(--Gray-200, #eaecf0);
  border-radius: 16px;
}

.knowledge__details__img {
  padding-top: 64px;
}

.knowledge__details__img img {
  width: 100%;
}

.knowledge__details__info {
  max-width: 720px;
  margin: auto;
  padding: 96px 0;
}

.knowledge__details__info-title h3 {
  font-size: 30px;
  font-weight: 600;
  color: var(--Gray-900, #101828);
  margin-bottom: 0;
}

.knowledge__details__info-para {
  padding-top: 30px;
}

.knowledge__details__info-para p {
  font-size: 18px;
}

.knowledge__details__info-video iframe {
  width: 100%;
  min-height: 350px;
}

.knowledge__share__buttons {
  padding-top: 30px;
}

.copylink___btn a,
.knowledge__social__share__buttons a {
  display: flex;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 14px;
  color: #475467;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  border-radius: 8px;
  border: 1px solid var(--Gray-300, #d0d5dd);
}

.knowledge__social__share__buttons a {
  width: 42px;
  height: 40px;
  font-size: 20px;
  justify-content: center;
  align-items: center;
}

/* =======***=======
Contact Page CSS
=======***======= */

/* Contact Form Section CSS Start */

.contact__container {
  max-width: 480px;
  margin: auto;
}

.form__input__field,
.form__select__field {
  margin-bottom: 22px;
}

.form__textarea__field {
  margin-bottom: 15px;
}

.form__input__field label,
.form__textarea__field label,
.form__select__field label {
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  color: var(--Gray-700, #344054);
  padding-bottom: 6px;
}

.form__input__field input,
.form__select__field select,
.form__textarea__field textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--Base-White, #fff);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  border: 1px solid var(--Gray-300, #d0d5dd);
  border-radius: 8px;
}

/* To Make Custom Chevron icon in HTML Select */

.form__select__field select {
  color: var(--Gray-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23667085' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.iti.iti--separate-dial-code {
  width: 100%;
}

.form__input__field input:focus,
.form__select__field select:focus,
.form__textarea__field textarea:focus {
  outline: 0;
  border: 1px solid var(--Primary);
}

.form__checkbox label {
  font-size: 16px;
  color: var(--Gray-600, #475467);
}

.form__checkbox label a {
  color: var(--Gray-600, #475467);
  font-weight: 600;
  text-decoration: underline;
}

.form__submit__btn {
  margin-top: 30px;
}

.form__submit__btn input {
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 18px;
  color: var(--Base-White, #fff);
  background: var(--Primary);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  border: 1px solid var(--Primary);
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
}

.form__submit__btn input:hover {
  background: var(--Gray-900);
  border: 1px solid var(--Gray-900);
}

.form__input__field span {
  display: block;
  font-size: 14px;
  color: var(--Gray-600, #475467);
  padding-top: 5px;
}

form ::placeholder {
  font-size: 16px;
  font-weight: 400;
  color: var(--Gray-500, #667085);
}

/* Contact Form Section CSS End */

/* Contact Info Section CSS Start */

.contact__info__wrapper {
  margin: 32px 0;
  padding-bottom: 90px;
}

.contact__info__card {
  padding: 24px;
  background: var(--Gray-50, #f9fafb);
}

.contact__info__icon {
  height: 48px;
  justify-content: center;
  align-items: center;
  display: flex;
  width: 48px;
  margin-bottom: 55px;
  background: var(--Primary);
  border-radius: 10px;
}

.contact__info__content p {
  padding: 7px 0 15px;
}

.contact__info__content a,
.contact__info__content span {
  font-size: 16px;
  font-weight: 600;
  color: var(--Primary);
}

/* Contact Info Section CSS End */

/* =========***=========
Contact Thanks Page CSS
=========***========= */

.contact__thanks__container {
  max-width: 480px;
  margin: auto;
  text-align: center;
}

.contact__thanks__content {
  margin-top: 40px;
}

.back__home__btn a {
  display: block;
  width: 100%;
  font-size: 16px;
  text-align: center;
  padding: 12px 18px;
}

/* =========***=========
Sign Up Page CSS
=========***========= */

.sign-up__wrapper {
  min-height: 100vh;
  height: 100%;
}

.sign-up__left {
  position: relative;
  width: 45%;
  padding: 32px 35px;
}

.sign-up__content {
  padding-bottom: 50px;
}

.sign-up__content h3 {
  font-size: 36px;
  font-weight: 600;
  line-height: 122.222%;
  letter-spacing: -0.72px;
  color: var(--Gray-900, #101828);
}

.sign-up__form {
  height: 100%;
}

.sign-up__form .contact__form {
  width: 360px;
}

.have__account span {
  font-size: 14px;
  color: var(--Gray-600, #475467);
}

.have__account span a {
  font-weight: 600;
  color: var(--Primary);
}

.forgot__password a {
  font-size: 14px;
  font-weight: 600;
  color: var(--Primary);
}

.sign-up__copyright p {
  font-size: 14px;
  margin-bottom: 0;
  color: var(--Gray-600, #475467);
}

.sign-up__contact__btn a {
  font-size: 14px;
  font-weight: 600;
  color: var(--Primary);
}

.sign-up__right {
  width: 55%;
  padding: 95px 0 0 80px;
  background: var(--Gray-100, #f2f4f7);
}

.sign-up__content h2 {
  font-size: 30px;
  font-weight: 500;
  color: var(--Gray-900, #101828);
}

.sign-up__content p {
  max-width: 656px;
  font-weight: 500;
}

.sign-up__img img {
  width: 100%;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  border-top: 6px solid var(--Gray-900, #101828);
  border-left: 6px solid var(--Gray-900, #101828);
  border-top-left-radius: 12px;
}

/* Login Verification Link Tag */

.verification__link-tag span {
  display: flex;
  font-size: 14px;
  font-weight: 500;
  padding: 6px;
  margin-bottom: 30px;
  color: #067647;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  border: 1px solid #079455;
  border-radius: 6px;
}

.verification__link-tag span svg {
  margin-right: 8px;
}