#html-external-header-v3 .nav-dropdown-wrapper .nav-dropdown-menu {
  gap: 16px;
}

#html-external-header-v3 .nav-dropdown-wrapper .nav-showcase-wrapper,
#html-external-header-v3 .nav-dropdown-wrapper .nav-dropdown-grid-wrapper {
  grid-template-columns: 1fr;
}

#html-external-header-v3 .nav-dropdown-wrapper .spotlight-card {
  max-width: 330px;
  min-width: 330px;
}

/* For XL screens and above */
@media (min-width: 1200px) {
  #html-external-header-v3 .nav-dropdown-wrapper .nav-showcase-wrapper,
  #html-external-header-v3 .nav-dropdown-wrapper .nav-dropdown-grid-wrapper {
    grid-template-columns: repeat(3, minmax(234px, 1fr));
  }
}

/* For This specific break point */
@media (min-width: 768px) and (max-width: 1200px) {
  #html-external-header-v3 .nav-dropdown-wrapper .spotlight-card {
    max-width: 270px;
    min-width: 270px;
  }

  #html-external-header-v3 .nav-dropdown-wrapper .nav-showcase-wrapper,
  #html-external-header-v3 .nav-dropdown-wrapper .nav-dropdown-grid-wrapper {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
  }
}

#html-external-header-v3 .nav-dropdown-desktop-toggle[aria-expanded='true'] .toggle-collapsed,
#html-external-header-v3 .nav-dropdown-mobile-toggle[aria-expanded='true'] .toggle-collapsed {
  animation: rotate 150ms;
  transform: rotate(180deg);
  transition: transform 150ms ease-in-out;
}

#html-external-header-v3 .nav-dropdown-desktop-toggle[aria-expanded='true'] {
  box-shadow: 0 -3px 0 inset var(--primary) !important;
}

#html-external-header-v3 .nav-dropdown-desktop-toggle[aria-expanded='false'] {
  box-shadow: none;
}

/* Overwrite bootstrap transition 
    For some reason, when adding custom `mouseover` event top expand dropdown, it blocks subsequents events (i.e. hovering multiple elements in a fast sequence)
*/
@media (min-width: 992px) {
  #html-external-header-v3 .nav-dropdown-wrapper.collapsing {
    transition: none !important;
  }

  #html-external-header-v3 .nav-dropdown-wrapper {
    opacity: 0%;
    visibility: hidden;
    transition: max-height 250ms ease;
  }

  #html-external-header-v3 .nav-dropdown-wrapper.show {
    opacity: 100%;
    visibility: visible;
    transition: opacity 250ms ease;
  }
}

/* Add override to text-dark and hover-text-primary for navbar to ensure that it enforces this style. For some pages such pricing, blog, and help, I'm seeing some overrides for a tags.
*/

/* Unset tags to reset any styling that css targets in a specific page. E.g. in `pricing.css`, it overrides styling for the p tag. */
#html-external-header-v3 p {
  color: unset;
}

#html-external-footer-v3 a.hover-image:hover img {
  filter: brightness(90%);
}

#html-external-header-v3 a.text-dark {
  color: var(--dark) !important;
}

#html-external-header-v3 a.hover-text-primary:hover {
  color: var(--primary) !important;
}

/* Footer styles */
#html-external-footer-v3 .footer-column {
  min-width: 165px;
}

.hideShadow {
  box-shadow: none !important;
}

/* From medium to large screens */
@media (min-width: 768px) and (max-width: 1200px) {
  #html-external-footer-v3 .footer-column {
    min-width: 135px;
  }
}

/* 603px and below */
@media (max-width: 603px) {
  #html-external-footer-v3 .footer-column {
    min-width: 130px;
  }
}

/* 400px and below */
@media (max-width: 400px) {
  #html-external-footer-v3 .footer-column {
    min-width: 120px;
  }
}

/* Override default li for blog and help  */
#html-external-footer-v3 li {
  font-size: unset !important;
  line-height: unset !important;
}

/* Suite Footer */
#SuiteFooter a.suite-card {
  transition: all 150ms linear;
}

#SuiteFooter a.suite-card p {
  color: var(--dark) !important;
}

#SuiteFooter a.suite-card .suite-asset-dark {
  transition: visibility 150ms linear;
  display: none !important;
  visibility: hidden !important;
}

#SuiteFooter a.suite-card .suite-asset-light {
  transition: visibility 150ms linear;
  display: block !important;
  visibility: visible !important;
}

#SuiteFooter a.suite-card:hover {
  background-color: var(--dark) !important;
}

#SuiteFooter a.suite-card:hover p {
  color: white !important;
}

#SuiteFooter a.suite-card:hover .suite-asset-light {
  transition: visibility 150ms linear;
  display: none !important;
  visibility: hidden !important;
}

#SuiteFooter a.suite-card:hover .suite-asset-dark {
  transition: visibility 150ms linear;
  display: block !important;
  visibility: visible !important;
}