@font-face {
  font-family: 'SN-Bold';
  src: url("../fonts/PlusJakartaSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: bold;
}

@font-face {
  font-family: 'SN-SemiBold';
  src: url("../fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: bold;
}

@font-face {
  font-family: 'SN-Regular';
  src: url("../fonts/PlusJakartaSans-Regular.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'SN-Italic';
  src: url("../fonts/PlusJakartaSans-Italic.ttf") format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'SN-DMSans-Regular';
  src: url("../fonts/DMSans-Regular.ttf") format('truetype');
}

@font-face {
  font-family: 'SN-DMSans-Bold';
  src: url("../fonts/DMSans-Bold.ttf") format('truetype');
}

@font-face {
  font-family: 'SN-DMSans-Medium';
  src: url("../fonts/DMSans-Medium.ttf") format('truetype');
}

@font-face {
  font-family: 'SN-DMSans-SemiBold';
  src: url("../fonts/DMSans-SemiBold.ttf") format('truetype');
}

@font-face {
  font-family: 'SN-DMSans-Light';
  src: url("../fonts/DMSans-Light.ttf") format('truetype');
}

@font-face {
  font-family: 'SN-DMSans-Thin';
  src: url("../fonts/DMSans-Thin.ttf") format('truetype');
}

:root {
  --dxp-c-section-image-overlay-color : white;
  --banner-bg-color:#EEEBE6;
  --text-primary-color: #000000;
  --text-secondary-color: #454545;
  --neutral-color: #F6F6F6;
  --neutral-color-100: #E7E7E7;
  --neutral-color-500: #6D6D6D;
  --border-color: #D1D1D1;
  --box-shadow-color: #0000001A;
  --color-hover: #ebebeb;
  --icon-color-black:#000000;
  --background-color-dark: #000000;
  --background-color-light: #ffffff;
  --text-primary-color-light: #ffffff;
  --background-color-teal:#4A8A8B;
  --hover-over-grey-color:#DDDDDD;
  --background-color-light-blue: #c5daf2;
  --background-color-gray: #3d3d3d;
  --background-color-light-90: #ffffff90;
  --light-forest-green-color: #BEDCCB;
  --border-color-light: #888888;
  --background-color-light-pink:#F2D8ED;
}

.header-banner {
  background-color: var(--neutral-color-100);
}

.small-header-text {
  font-family: 'SN-SemiBold';
  font-weight: 600;
  font-size: 14px;
}

.cur-pointer {
  cursor: pointer;
}

.icon-close {
  padding: 6px;
  border-radius: 50%;
  --slds-c-icon-color-background: var(--neutral-color);
}

h1,
h2,
h3,h5,h6 {
  font-family: 'SN-Bold' !important;
}

h4 {
  font-family: 'SN-Bold' !important;
  font-size: 14px;
}

.semi-bold {
  font-family: 'SN-SemiBold';
}

.comm-section-container .component-wrapper-spacer {
  --slds-c-icon-color-foreground-default: var(--icon-color-black);
  font-family: 'SN-Regular';
  color: var(--icon-color-black);
}

.font-regular {
  font-family: '';
}

h1 {
  font-size: 48px !important;
  line-height: 56px !important;
}

:not(c-sn_highlighted-topics) h2{
:not(.footer-item-container) h2 {
  font-size: 40px !important;
  line-height: 44px !important;
}
}

h3 {
  font-size: 32px !important;
  line-height: 36px !important;
  letter-spacing: -0.25px;
}

.action-button{
    background: var(--neutral-color-100);
    border: none;
    border-radius: 30px;
    font-size: 14px;
    padding: 3px 20px;
    font-family: 'SN-DMSans-Regular' !important;
}

.comm-section-container{
  padding:0px !important;
  
}

footer .component-wrapper-spacer,footer {
  background-color: var(--background-color-light) !important;
  margin-bottom: 0px;
  padding-bottom: 24px;
}

.sn-bread-crumbs {
  line-height:initial;
  .slds-breadcrumb .slds-breadcrumb__item:not(:first-child):before, .slds-breadcrumb .slds-list__item:not(:first-child):before {
    content:'/';
  }
  a {
    font-family: 'SN-DMSans-Regular' !important;
    font-size: 14px !important;
    color: var(--text-secondary-color) !important;
  }
  a:hover {
    text-decoration: underline !important;
  }
  a:focus {
    outline: none;
  }
}

/* to set the height and width of the navigate arrow on popular topics section */
.tile-container lightning-icon.navigation-icon svg {
  width: 20px;
  height: 20px;
}

@media screen and (max-width: 600px) {
  h1 {
    font-size: 36px !important;
    line-height: 44px;
  }
  h2 {
    font-size: 32px !important;
    line-height: 40px;
  }
  h3 {
    font-size: 28px !important;
    line-height: 32px;
  }
}

/* to make sure the content occupies the full width of the screen */
.columns-content {
  max-width: 100vw !important;
}