/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */


.reverse-string {
  direction: rtl;
  unicode-bidi: bidi-override;
}

 #submit-loading {
  display: none;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
  background: rgba(0, 0, 0, .4);
  margin: 0;
  padding: 0;
  z-index: 9999;    
}

#submit-loading div {
  opacity: 25%;
}

.exclude-sold-checkbox {
  width: 1.5rem !important;
  height: 1.5rem !important;
}
/* ------------------- */
/*        setup        */
/* ------------------- */

:root {
  --dark-blue: #2B348E;
  --sky-blue: #55C0EE;
  --lapis-lazuli: #0064A0;
  --grey: #4F4F4F;
  --black: #231F20;
  --pastel-blue: #D1EFFB;
  --myriad: "myriad-pro", sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main {
  flex: 1;
}

body * {
  font-family: var(--myriad);
}

body a {
  text-decoration: none;
}

.mw-480 {
  width: 100%;
  max-width: 480px;
}


.mw-576 {
  width: 100%;
  max-width: 576px;
}

.mw-lg-576 {
  width: 100%;
}

.mw-768 {
  width: 100%;
  max-width: 768px;
}

.mw-lg-768 {
  width: 100%;
}

.mw-1024 {
  max-width: 1024px;
}

h1,
h2,
h3,
h4,
h5 {
  margin-bottom: 0;
}

.section-p {
  padding-top: 64px;
  padding-bottom: 64px;
}

.single-p {
  padding-bottom: 64px;
}

.section-p p {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

.section-long-p {
  padding-top: 176px;
  padding-bottom: 96px;
}

.row-gap-6 {
  row-gap: 64px;
}

.row-gap-7 {
  row-gap: 96px;
}

.row-gap-64 {
  row-gap: 64px;
}

.bg-pastel {
  background-color: var(--pastel-blue) !important;
}

.c-dark-blue {
  color: var(--dark-blue) !important;
}



/* buttons */
.nbao-btn {
  background-color: var(--lapis-lazuli);
  border-radius: 8px;
  border: 1px solid var(--dark-blue);
  color: #ffffff;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  padding: 12px 18px;
  text-align: center;
  white-space: nowrap;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.nbao-btn a {
  color: white;
}

.resource-item .nbao-btn {
  color: #fff;
  text-decoration: none;
}

.nbao-btn:hover,
.nbao-btn:focus-visible {
  background-color: var(--pastel-blue);
  border: 1px solid var(--dark-blue);
  color: var(--dark-blue);
}

.nbao-btn i {
  font-size: 18px;
  color: #ffffff;
}

.nbao-btn:hover i {
  color: var(--dark-blue);
}

/* Skip to main content */
.skip-to-main-content {
  position: absolute;
  left: -9999px;
  z-index: 9999;
  padding: 1em;
  background-color: black;
  color: #fff;
  opacity: 0;
}

.skip-to-main-content:focus {
  left: 50%;
  top: 1%;
  transform: translateX(-50%);
  opacity: 1;
  border: 1px solid red;
}

/* section divider */
.section-divider {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.section-divider div {
  height: 1px;
  width: 100%;
  max-width: 1300px;
  padding: 0px 32px;
  align-self: center;
  background-color: var(--sky-blue);
}

/* top bar */
.nbao-top-bar {
  background-color: var(--dark-blue);
}

.top-bar-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
  gap: 32px;
  padding: 8px 0px;
}

.member-login {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #ffffff;
  gap: 16px;
  font-weight: 700;
  position: relative;
  font-size: 16px;
  line-height: auto;
}

.member-login::before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  transform: scaleX(0);
  transition: transform 0.5s ease;
}

.member-login:hover::before {
  transform: scale(1);
}

.lang-switch {
  display: flex;
  flex-direction: row;
  column-gap: 1px;
  background-color: var(--dark-blue);
  border-radius: 8px;
}

.lang-switch a {
  background-color: #ffffff;
  padding: 5px 8px;
  color: var(--dark-blue);
  font-weight: 700;
  font-size: 12px;
  /* line-height: ; */
  transition: background-color 0.2s ease;
}

.lang-switch a:hover,
.lang-switch:focus-visible {
  background-color: var(--pastel-blue);
}

.lang-switch a.active {
  background-color: var(--pastel-blue);
}

.lang-switch a:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.lang-switch a:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* navigation menu */
.navbar-brand {
  height: 60px;
}

.navbar-brand img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.navbar-brand .logo-small {
  display: block;
}

.navbar-brand .logo-big {
  display: none;
}

.nbao-nav {
  /* margin-top: 44px; */
  background-color: #ffffff;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 4px 5px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.1);
}

.nbao-nav .nbao-top-bar {
  height: 44px;
  transition: height 0.2s ease;
  overflow: hidden;
}

.nbao-nav.scrolled .nbao-top-bar {
  height: 0;
  /* margin-top: 0; */
}

.nbao-nav .navbar-nav {
  column-gap: 8px;
}

.nbao-nav .nav-link {
  color: #475467;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  position: relative;
}

.nbao-nav .nav-link.active {
  color: #475467;
}

.nbao-nav .nav-link.active::after {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: var(--dark-blue);
}

.nbao-nav .nav-link:not(.active)::after {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: var(--dark-blue);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.nbao-nav .nav-link:not(.active):hover::after {
  transform: scaleX(1);
}

.nbao-nav .find-optometrist {
  /* background: var(--lapis-lazuli);
    border-radius: 8px;
    border: 1px solid var(--dark-blue);
    color: #ffffff; */
  display: block;
  /* font-weight: 600; */
  padding: 8px;
  /* text-decoration: none; */
  /* transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out; */
}

.nbao-nav .find-optometrist:hover,
.nbao-nav .find-optometrist:focus-visible {
  background-color: var(--pastel-blue);
  color: var(--dark-blue);
}

/* ---------------- */
/*     HOMEPAGE     */
/* ---------------- */

/* homepage banner */
.home-banner {
  height: calc(100vh - 44px);
}

.home-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-image.no-img {
  object-fit: contain;
  padding: 20vh 5vw;
}

.home-banner .carousel-caption {
  bottom: 0;
  right: unset;
  left: unset;
  width: 100%;
  height: 100%;
  align-content: center;
  background-color: rgba(43, 52, 142, 0.80);
}

.carousel-caption div {
  max-width: 991px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15%;
  padding-right: 15%;
}

.carousel-caption h1,
.carousel-caption h2 {
  color: #ffffff;
  font-size: 32px;
  font-weight: 900;
  line-height: 44px;
}

.carousel-caption p {
  font-size: 18px;
  line-height: 28px;
}

/* home navigation section */
.action-card-section {
  transform: translateY(-64px);
}

.action-card {
  height: 340px;
  min-width: 240px;
  max-width: 280px;
  border-radius: 16px;
  flex: 1 0 0;
  background-size: cover;
  background-position: center;
  background-image: var(--bg-image, "");
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.3s ease;
}

.action-card div {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 100, 160, 0.25);
  backdrop-filter: blur(12px);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 16px;
  top: 80%;

  transition: all 0.3s ease;
}

.action-card div i {
  display: none;
  width: 64px;
  height: 64px;
  text-align: center;
  align-content: center;
  color: #ffffff;
  background-color: var(--dark-blue);
  border-radius: 12px;
  font-size: 28px;
}

.action-card:hover {
  box-shadow: 0px 0px 0px 5px var(--sky-blue);
}

.action-card:hover div {
  top: 0;
}

.action-card:hover div i {
  display: block;
}

.action-card h3 {
  color: var(--dark-blue);
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
}

/* mission statement */
.home-mission .bg-logo {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  object-fit: contain;
  position: absolute;
  /* margin-left: auto;
    margin-right: auto; */
  z-index: 0;
}

.section-title h2 {
  font-size: 30px;
  line-height: 38px;
  color: var(--dark-blue);
  font-weight: 700;
}

.section-title p {
  font-size: 18px;
  line-height: 28px;
  color: var(--grey);
}


/* find optometrist */

.section-image {
  width: 100%;
  max-width: 576px;
  border-radius: 16px;
  overflow: hidden;
}

.section-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}


/* blue boxes */
.blue-box-container {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
}

.blue-box-item {
  background-color: var(--pastel-blue);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  row-gap: 40px;
  height: 280px;
  min-width: 280px;
  max-width: 420px;
  padding: 24px;
  align-items: flex-start;
  flex: 1 0 0;
  justify-content: space-between;
}

.blue-box-item>i {
  color: #ffffff;
  background-color: var(--dark-blue);
  font-size: 14px;
  width: 48px;
  height: 48px;
  border-radius: 9px;
  align-content: center;
  text-align: center;
  flex-shrink: 0;
}

.blue-box-item h4 {
  color: var(--dark-blue);
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  margin-bottom: 8px;
}

.blue-box-item p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--grey);
  text-overflow: ellipsis;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.blue-box-item a {
  color: var(--dark-blue);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  position: relative;
}

.blue-box-item a:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--dark-blue);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.blue-box-item a:hover:before {
  transform: scaleX(1);
}




/* -------------- */
/*     footer     */
/* -------------- */
footer {
  background-color: var(--dark-blue);
  padding-top: 64px;
  padding-bottom: 48px;
}

.footer-logo {
  display: flex;
  width: 100%;
  max-width: 300px;
}

footer ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
  text-align: center;
}

footer p,
footer a {
  color: #ffffff;
}

footer ul a {
  color: #ffffff;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  position: relative;
}

footer ul a:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--pastel-blue);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

footer ul a:hover {
  color: var(--pastel-blue);
}

footer ul a:hover:before {
  transform: scaleX(1);
}


/* subpage banner */
.subpage-banner {
  /* margin-top: 44px; */
  width: 100%;
  height: 400px;
  position: relative;
}

.subpage-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
}

.subpage-banner-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(43, 52, 142, 0.80);
  align-content: center;
}

.subpage-banner h1 {
  margin-top: 46px;
  color: #FFF;
  text-align: center;
  font-size: 44px;
  font-weight: 900;
  line-height: 72px;
}

/* -------------- */
/*     about      */
/* -------------- */

.code-of-ethics-segment {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.code-ethics-title h2 {
  color: var(--dark-blue);
  font-size: 36px;
  font-style: normal;
  font-weight: 600;
}



.code-ethics-list {
  color: #475467;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}



.ethics-img-container {
  width: 100%;
  max-width: 576px;
  border-radius: 16px;
  overflow: hidden;
}

.ethics-img-container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}



.team-section {
  background-color: var(--pastel-blue);
}

.team-title {
  color: var(--dark-blue);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.team-title h2 {
  color: var(--dark-blue, #2B348E);
  text-align: center;
  font-size: 36px;
  font-weight: 600;
  line-height: 44px;
  letter-spacing: -0.72px;
}

.team-title p {
  color: var(--dark-blue, #2B348E);
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.team-member {
  justify-content: start;
  align-items: center;
  min-width: 240px;
  max-width: 280px;
  gap: 20px;
  flex: 1 0 0;
}

.team-member h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}

.team-member .role {
  color: var(--lapis-lazuli);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.team-member span {
  font-size: 16px;
  font-weight: 400;
  color: #475467;
}

.team-member i {
  display: flex;
  width: 48px;
  height: 48px;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--dark-blue);
  border-radius: 10px;
  background-color: #fff;
  color: var(--dark-blue);
}

.team-section .bg-logo {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  object-fit: contain;
  position: absolute;
  z-index: 0;
}

.cao-img-container {
  height: 400px;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.cao-img-container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}


.cao-description h2 {
  color: var(--dark-blue, #2B348E);
  font-size: 36px;
  font-style: normal;
  font-weight: 600;
  line-height: 44px;
}

.cao-description p {
  color: var(--grey, #4F4F4F);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 34px;
}



/* -------------- */
/*    Contact     */
/* -------------- */

.blue-box-container.contact-container {
  gap: 24px;
}


.blue-box-container.contact-container p {
  overflow: hidden;
  color: var(--dark-blue, #2B348E);
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}


.contact-item a {
  font-weight: 600;
  color: var(--dark-blue);
}

.contact-item {
  row-gap: 64px;
  height: 270px;
  padding: 24px;
  align-items: flex-start;
  flex: 1 0 0;
}


.contact-item i {
  font-size: 24px;
}

.form-title {
  gap: 20px;
  display: flex;
  flex-direction: column;
}

.form-title h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--dark-blue);
  text-align: center;
}

.form-title h3 {
  font-size: 20px;
  font-weight: 400;
  text-align: center;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-form-item {
  display: flex;
  flex-direction: column;
}

.contact-form-item input {
  padding: 10px 14px;
}

.contact-form span {
  color: #D80000;
}

.contact-form button {
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--dark-blue, #2B348E);
  background: var(--lapis-lazuli, #0064A0);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.contact-form input:focus {
  border-color: var(--lapis-lazuli);
}

.blue-box-item.contact-item {
  justify-content: unset;
  row-gap: 64px;
  height: 270px;
  max-width: 342px;
}

.contact-form button {
  margin-top: 8px;
}

.contact-form-item textarea {
  resize: none;
}

/* -------------- */
/*   regulatory   */
/* -------------- */

.regulatory-container {
  row-gap: 96px;
}

.regulatory-text p {
  color: #4F4F4F;
  font-size: 18px;
  font: 400;
}

.regulatory-text a {
  color: var(--dark-blue, #2B348E);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
}

.regulatory-text li::marker {
  color: var(--dark-blue);
}

.regulatory-text i {
  color: var(--dark-blue);
  width: 24px;
  height: 24px;
}

.regulatory-text li strong,
.regulatory-text li b {
  color: var(--dark-blue);
}

.regulatory-title h2 {
  font-size: 30px;
  font-weight: 700;
  color: var(--dark-blue);
  margin-bottom: 16px;
}

.regulatory-img-container {
  height: 400px;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.regulatory-img-container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.image-show-none {
  display: none;
}


.law-button {
  border-radius: 8px;
  background-color: var(--lapis-lazuli);
  border: 1px solid var(--dark-blue);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.law-button:hover {
  background-color: var(--pastel-blue);
  border: 1px solid var(--dark-blue);
  color: var(--dark-blue);
}

.law-button i {
  color: #FFF;
}

.law-button i:hover {
  color: var(--dark-blue);
}

.regulatory-text a.law-button {
  color: #FFF;
  text-decoration: none;
}

.regulatory-text a.law-button:hover {
  color: var(--dark-blue);
}




/* -------------- */
/*   Resources    */
/* -------------- */

.tab-menu .nav-link {
  background-color: #ffffff;
  color: #344054;
  border: 1px solid var(--dark-blue);
  box-shadow: none;
  transition: 0.2s;
  color: var;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

.tab-menu .nav-link.active {
  background-color: #FFF;
  color: #344054;
  border: 1px solid var(--dark-blue);
  transform: translateX(-4px);
  transform: translateY(-4px);
  box-shadow: 4px 4px 0px 0px #C5C8F0;
}

.tab-menu .nav-link:hover {
  background-color: #FFF;
  color: #344054;
  border: 1px solid var(--dark-blue);
  transform: translateX(-4px);
  transform: translateY(-4px);
  box-shadow: 4px 4px 0px 0px #C5C8F0;
}


.resource-wrapper .resource-tab.show {
  max-width: 1216px;
  background-color: #F8F9FA;
  border-radius: 24px;
  box-shadow: 8px 8px 0px 0px #C5C8F0;
  padding: 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 32px;
}


.tab-img-container {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
}

.tab-img-container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.resource-content {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  justify-content: center;
  padding: 0px;
  max-width: 576px;
  gap: 20px;
}

.resource-content h2 {
  color: var(--dark-blue, #2B348E);
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: -0.72px;
}

.resource-content ul {
  margin-top: 20px;
  margin-bottom: 20px;
  list-style: none;
  padding-left: 0;
}

.resource-content li {
  color: var(--dark-grey, #2E2E2E);
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 28px;
  margin-bottom: 10px;
  position: relative;
  padding-left: 16px;
}

.resource-content li::after {
  font-family: 'Font Awesome 6 Pro';
  content: '\e122';
  font-weight: 900;
  position: absolute;
  color: var(--dark-blue);
  font-size: 12px;
  left: 0;
  top: 0;
}


.resource-content i {
  color: var(--dark-blue);
}

.resource-content a.law-button i {
  color: #FFF;
}

.resource-content a.law-button:hover i, 
.resource-content a.law-button:focus i {
  color: var(--dark-blue);
}

.resource-content li::marker {
  color: var(--lapis-lazuli);
}

.resource-content a {
  color: var(--dark-blue, #2B348E);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  text-decoration-line: underline;
}

.resource-content span {
  color: #2E2E2E;
  font-size: 18px;
  font-style: normal;
}

.resource-item li strong {
  color: var(--dark-blue, #2B348E);
}

.info-btn {
  background-color: var(--lapis-lazuli);
  border-radius: 8px;
  border: 1px solid var(--dark-blue);
  color: #ffffff;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  padding: 12px 18px;
  text-align: center;
  white-space: nowrap;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.info-btn:hover,
.info-btn:focus-visible {
  background-color: var(--pastel-blue);
  border: 1px solid var(--dark-blue);
  color: var(--dark-blue);
}

/* -------------- */
/*     login      */
/* -------------- */

.login-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
}


.back-btn {
  display: flex;
  gap: 8px;
  align-items: center;
}

.back-btn a,
.back-btn i {
  color: var(--dark-blue);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  display: flex;
  padding-top: 21px;
}

.memeber-title-area {
  align-items: center;
  gap: 24px;
}

.logo-container {
  display: flex;
  background-color: var(--dark-blue);
  width: 48px;
  height: 48px;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
}

.logo-container img {
  width: 32px;
  height: 18px;
}

.form-member-wrapper {
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.form-member input {
  padding: 10px 14px;
}

.form-member input:focus {
  border-color: var(--lapis-lazuli);
}

.form-member-wrapper p {
  color: #475467;
  font-size: 14px;
  font-weight: 400;
}

.form-member-wrapper a {
  color: var(--lapis-lazuli);
  font-size: 14px;
  font-weight: 600;
}

.member-title {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-member-area {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-member {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-member p {
  margin-bottom: 0;
}

.member-title h2 {
  color: #101828;
  font-size: 30px;
  font-weight: 600;
}

.member-title p {
  color: #475467;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 0;
}



.member-btn {
  background-color: var(--lapis-lazuli);
  border-radius: 8px;
  border: 1px solid var(--dark-blue);
  color: #ffffff;
  font-size: 16px;
  font-style: normal;
  padding: 12px 18px;
  text-align: center;
  white-space: nowrap;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.member-btn:hover,
.member-btn:focus-visible {
  background-color: var(--pastel-blue);
  border: 1px solid var(--dark-blue);
  color: var(--dark-blue);
}

.member-btn:active {
  background-color: #fff;
}

.member-img-area {
  display: none;
  position: relative;
  width: 100%;
  border-radius: 20px;
  height: 850px;
  overflow: hidden;
}

.member-img-container {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 912px;
}

.member-img-container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.frost-window {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.member-logo-img {
  display: flex;
  position: absolute;
  width: 420px;
  height: 337px;
}

/* -------------- */
/*     sign-up    */
/* -------------- */
.back-btn-img {
  padding-top: 25px;
}

.back-btn-img a img {
  width: 220px;
  height: 30px;
}



/* members-home */

.mem-home-title {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
}

.mem-home-title p {
  color: #475467;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
}

.action-card-section.member-action-cards {
  transform: none;
  gap: 32px;
}

.member-action-cards .action-card {
  max-width: 384px;
  height: 340px;
}

.announcement-box {

  background-color: var(--pastel-blue);
  border-radius: 16px;
  padding: 24px;
  margin-top: 62px;
  max-width: 420px;

}

.announcement-box.updates-announcement-box {
  margin-top: 59px;
  max-width: 576px;
}

.announcement-box h4 {
  color: var(--dark-blue);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.announcement-title {
  margin-bottom: 8px;
}

.announcement-box i {
  height: 24px;
  width: 24px;
  color: var(--dark-blue);
  align-content: center;
}

.announcement-box h3 {
  color: var(--dark-blue);
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}

.announcement-box p {
  overflow: hidden;
  color: var(--grey, #4F4F4F);
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.announcement-box a {
  color: var(--dark-blue, #2B348E);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.latest-update-title {
  padding-bottom: 64px;
}

.latest-update-title h2 {
  color: var(--dark-blue, #2B348E);
  font-size: 36px;
  font-weight: 600;
}

.latest-update-title p {
  color: var(--grey, #4F4F4F);
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}

.upcoming-events-title {
  margin-bottom: 32px;
}

.upcoming-events-title h3 {
  color: var(--dark-blue, #2B348E);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}

.upcoming-events-title i {
  height: 24px;
  width: 24px;
  color: var(--dark-blue);
  align-content: center;
}

.upcoming-events .accordion {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}

.upcoming-events .accordion-body p {
  color: var(--colors-text-text-tertiary-600, #475467);
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 0;
}

.accordion-item:first-of-type>.accordion-header .accordion-button,
.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed {
  border-radius: 0;
}

.upcoming-events .accordion-header button {
  color: var(--dark-blue, #2B348E);
  font-size: 18px;
  font-weight: 600;
}

.upcoming-events .accordion {
  --bs-accordion-active-bg: #FFF;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-border-width: none;
}

.upcoming-events .accordion-button:hover {
  background-color: var(--pastel-blue);
}

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

.accordion-item:first-of-type,
.accordion-item:last-of-type {
  border-radius: 16px;
  overflow: hidden;
}

.upcoming-events .accordion-item:has(.accordion-button:not(.collapsed)) {
  border: 1px solid #C5C8F0;
}



/* news and announcements */

.members-title {
  background-color: var(--dark-blue);
  padding: 32px;
  margin-top: 66px;
}

.members-title h1 {
  color: #FFF;
  text-align: center;
  font-size: 40px;
  font-weight: 900;
  line-height: 66px;
}

.categories-nav {
  display: flex;
  flex-direction: column;

}

.categories-list .pb-2 {
  display: none;
}

.categories-list h4 {
  color: var(--lapis-lazuli, #0064A0);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.categories-list a {
  color: #667085;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin-top: 6px;

}

.categories-nav :focus {
  background-color: var(--pastel-blue);
  color: var(--dark-blue);
  border-radius: 6px;
}

.categories-nav .active {
  background-color: var(--pastel-blue);
  color: var(--dark-blue);
  border-radius: 6px;
}

.categories-list a:hover {
  background-color: var(--pastel-blue);
  color: var(--dark-blue);
  border-radius: 6px;
}

.categories-list a:active {
  background-color: #fff;
  color: var(--dark-blue);
  border-radius: 6px;
}


.announcement-box-icon i {
  background-color: darkblue;
  font-size: 24px;
  color: #fff;
  border-radius: 10px;
  text-align: center;
  width: 42px;
  height: 42px;
}

.announcement-box {
  display: flex;
  flex-direction: column;
  gap: 64px;
  min-width: 280px;
  margin-top: 0;
}

.announcement-link {
  display: flex;
  gap: 8px;
  align-items: center;
  position: relative;
}


.announcement-link:before {
  content: "";
  position: absolute;
  bottom: -2px;
  height: 2px;
  width: 0;
  background: var(--dark-blue);
  transition: width 0.2s ease;
}

.announcement-link:hover:before {
  width: 26%;
}



.agm-hotel-dates {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 720px;
}

.agm-hotel-dates-title h2 {
  color: var(--dark-blue);
  font-size: 36px;
  font-weight: 600;
  line-height: 44px;
}

.agm-hotel-dates-text p {
  color: #344054;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

.agm-hotel-info {
  gap: 8px;
}

.agm-hotel-info p {
  color: #344054;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

.agm-hotel-info i {
  font-size: 24px;
  text-align: center;
  color: var(--dark-blue);
}

.news-and-announcement-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 720px;
}

.categories-menu a {
  color: #667085;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.categories-menu a.active {
  background-color: var(--pastel-blue);
  color: var(--dark-blue);
  border-radius: 6px;
}

.custom-dropdown-btn {
  display: block;
  width: 100%;
}

.dropdown-menu {
  --bs-dropdown-min-width: 100%;
}

/* practice and profession aides */

.info-list-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 720px;
}

.info-list-item {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-list-item h3 {
  color: var(--dark-blue, #2B348E);
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.4px;
}

.info-list-item-text {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.info-list-item-text-inner {
  display: flex;
  gap: 8px;
  padding-left: 16px;
  align-items: center;
  position: relative;
}

.info-list-item-text-inner a {
  color: #344054;
  font-size: 18px;
  margin: 0;
  text-decoration: none;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}



.info-list-item-text-inner::before {
  content: "";
  position: absolute;
  bottom: -2px;
  height: 2px;
  width: 0;
  background: var(--dark-blue);
  transition: width 0.2s ease;
}

.info-list-item-text-inner:hover:before {
  width: 95%;
}



.info-list-item-text i {
  color: var(--dark-blue);
  font-size: 20px;
  position: relative;
}


/* News and Announcements */

.news-and-announcement-heading h2 {
  color: var(--dark-blue);
  font-size: 36px;
  font-weight: 600;
  line-height: 44px;
}

.news-and-announcement-text p {
  color: #344054;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

/* -------- */
/* 404 page */
/* -------- */
.not-found {
  display: flex;
  flex-direction: row;
  justify-content: center;
  /* gap: 24px; */
}

.not-found span {
  font-size: 96px;
  font-weight: 800;
  color: var(--dark-blue);
}

.not-found img {
  width: 100%;
  max-width: 768px;
  left: 0;
  top: 0;
  opacity: 0.6;
}

/* Tweaks & Overrides */ 
.blue-box-container .blue-box-item.contact-item { height: auto; }
.blue-box-container .blue-box-item.contact-item p { -webkit-line-clamp: unset; }

.contact-form label.required::after {
  content: ' *';
  color: red;
}

.nbao-nav .offcanvas .btn-close {
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nbao-nav .offcanvas .btn-close i {
  font-size: 1.25rem;
}
@media screen and (min-width: 375px) {}

/* Phablet */
@media screen and (min-width: 425px) {


    .navbar-brand .logo-small {
        display: none;
    }

    .navbar-brand .logo-big {
        display: block;
    }

    .navbar-brand {
        width: 280px;
        height: auto;
    }

    .back-btn-img a img {
        width: 318.526px;
        height: 45px;
    }

}

@media screen and (min-width: 576px) {
    .members-title h1 {
        font-size: 60px;
    }

    .custom-dropdown-btn {
        justify-content: center;
        align-items: center;
    }


}

/* Tablet */
@media screen and (min-width: 768px) {
    .section-p {
        padding-top: 96px;
        padding-bottom: 96px;
    }

    .single-p {
        padding-bottom: 96px;
    }

    .row-gap-64 {
        row-gap: 96px;
    }

    /* navbar */
    .navbar-brand {
        width: 320px;
    }

    /* homepage carousel */
    .carousel-caption h1,
    .carousel-caption h2 {
        font-size: 48px;
        line-height: 56px;
    }

    /* homepage mission statement */
    .section-title h2 {
        font-size: 36px;
        line-height: 44px;
    }


    .section-title p {
        font-size: 20px;
        line-height: 30px;
    }


    /* resources */
    .resource-content h2 {
        font-size: 36px;
        line-height: 44px;
    }

    .resource-content {
        padding: 16px;
    }

    /* blue box items */
    .blue-box-item {
        height: 300px;
    }

    /*contact*/
    .blue-box-container.contact-container {
        padding-left: 32px;
        padding-right: 32px;
    }

    /* footer */
    footer ul {
        flex-direction: row;
    }

    .ethics-img-container {
        width: 100%;
        border-radius: 16px;
        overflow: hidden;
        height: 654px;
    }

    .subpage-banner h1{
        font-size: 60px;
    }

    /* 404 page */
    .not-found span{
        font-size: 192px;
    }
}
/* Laptop */
@media screen and (min-width: 992px) {
    .mw-lg-576 {
        max-width: 576px;
    }

    .mw-lg-768 {
        max-width: 768px;
    }

    .resource-wrapper .resource-tab.show {
        flex-direction: row;
        row-gap: 32px;
        padding: 24px;
    }

    /* regulatory */
    .image-show-none {
        display: block;
    }

    /*login*/

    .member-img-area {
        display: block;
    }

    .login-section {
        padding-top: 0;
    }

    /*news and announcements*/


    .categories-nav {
        text-align: left;
    }

    .categories-list .pb-2 {

        display: block;

    }

    .resource-content {
        padding: 32px;
    }

}

/* Small screen */
@media screen and (min-width: 1200px) {

    /* homepage carousel */
    .carousel-caption div {
        padding-left: 0;
        padding-right: 0;
    }

    .carousel-caption h1,
    .carousel-caption h2 {
        font-size: 60px;
        line-height: 72px;
    }

    /*members homescreen*/

    .action-card h3 {
        font-size: 24px;
    }


    .resource-wrapper .resource-tab.show {
        padding: 48px;
    }


}

/* Large screen */
@media screen and (min-width: 1400px) {}

/* ultra large */
@media screen and (min-width:1536px) {
    .subpage-banner {
        height: 396px;
    }

    .row {
        flex: 1;
    }
}