@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
*{ font-family:"Inter",sans-serif; box-sizing:border-box; margin:0; padding:0; }
a{ text-decoration:none; }

.page-container{ max-width:1300px; width:100%; margin:0 auto; padding:0 20px; }

/* ── LOGO BAR ── */
.logo-bar{ padding:20px 0; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.logo-bar img#logo{ max-width:280px; }
.header-call{ display:flex; flex-direction:column; gap:14px; justify-content:center; }
.header-call a.call-us{ display:flex; align-items:center; font-size:18px; color:#16605f; gap:10px; }
.button-all {
    background: #16605f;
    color: #fff;
    border-radius: 6px;
    padding: 12px 12px;
    font-size: 16px;
    text-align: center;
}

/* ── TOP MENU ── */
.top-menu{ background:#DBDBCE; }
.top-menu.menu-style{ padding:14px 0; }
.top-menu.menu-style ul{ display:flex; align-items:center; justify-content:center; list-style:none; flex-wrap:wrap; }
.top-menu.menu-style li a{ padding:2px 10px; display:inline-block; color:#000; }
.top-menu.menu-style li{ border-right:solid 1px #000; }
.top-menu.menu-style li:last-child{ border:none; }

/* ── BOTTOM MENU ── */
.bottom-menu{ background:#16605f; }
.menu-style ul{ list-style:none; }
.bottom-menu.menu-style li{ position:relative; }
.bottom-menu.menu-style ul{ display:flex; gap:30px; justify-content:start; align-items:center; }
.bottom-menu.menu-style li ul{
  position:absolute; flex-direction:column; background:#16605f;
  left:0; padding:8px 10px; min-width:270px;
  text-align:left; justify-content:start; align-items:start; gap:0; display:none;
}
.bottom-menu.menu-style li a{ color:#fff; padding:16px 0; display:flex; align-items:center; gap:4px; }
.bottom-menu.menu-style li ul a{ font-size:14px; padding:2px 0; margin:10px 0; }
.bottom-menu.menu-style li:hover ul{ display:block; }
.menu-flex{ display:flex; align-items:center; gap:20px; justify-content:space-between; }
.menu-right{ display:flex; align-items:center; gap:30px; }
.menu-flex .menu-icon,
.menu-flex .menu-icon a{ display:flex; gap:5px; color:#fff; font-size:14px; align-items:center; }

/* ── HAMBURGER ── */
.hamburger{
  display:none; flex-direction:column; justify-content:center;
  gap:5px; cursor:pointer; background:none; border:none; padding:4px;
}
.hamburger span{ display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:all .3s ease; }
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── MOBILE DRAWER ── */
.mobile-nav{
  display:none; flex-direction:column;
  background:#16605f; overflow:hidden;
  max-height:0; transition:max-height .4s ease;
}
.mobile-nav.open {
    display: flex;
    max-height: calc(100vh - 156px);
    position: absolute;
    z-index: 1;
    top: 156px;
    overflow: auto;
}
body:has(.mobile-nav.open) {
    overflow: hidden;
}

.sub-mobile-menu {
    padding: 0px 30px;
}
.mobile-nav .sub-mobile-menu a {
    font-size: 12px;
    padding: 6px 0px;
}
/* Section label */
.mob-section{
  color:rgba(255,255,255,.45);
  font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em;
  padding:14px 20px 6px;
  border-top:1px solid rgba(255,255,255,.1);
}
.mob-section:first-child{ border-top:none; }

/* Regular link */
.mobile-nav a{
  color:#fff; padding:11px 20px;
  font-size:14px; display:flex; align-items:center; gap:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .2s;
}
.mobile-nav a:hover{ background:rgba(255,255,255,.07); }
.mobile-nav a:last-child{ border-bottom:none; }

/* Sub-item (indented) */
.mobile-nav a.sub-item{
  padding-left:34px; font-size:13px;
  background:rgba(0,0,0,.12); color:rgba(255,255,255,.85);
}
.mobile-nav a.sub-item::before{ content:'›'; font-size:16px; color:rgba(255,255,255,.4); }

/* Top-menu item inside drawer */
.mobile-nav a.top-link{ color:rgba(255,255,255,.8); font-size:13px; }

/* Bottom icon row */
.mob-icon-row{
  display:flex;
  border-top:1px solid rgba(255,255,255,.15);
  background:rgba(0,0,0,.15);
}
.mob-icon-row a{
  flex:1; justify-content:center;
  border-right:1px solid rgba(255,255,255,.1);
  border-bottom:none; font-size:12px; padding:13px 6px;
}
.mob-icon-row a:last-child{ border-right:none; }
p a {
    color: #16605f;
    text-decoration: underline !important;
}
.elementor p {
    margin-top: 0;
}
a {
    text-decoration: none;
}
.page-id-12338 div#sticky-social-bar {
    display: none;
}
.page-id-12338 div#sticky-social-bar {
    display: none;
}

.menu-right input[type="search"] {
    border: none;
    background: #fff;
    padding: 10px 10px;
    border-radius: 6px;
    font-size: 12px;
}

.menu-right button {
    padding: 8px 10px;
    background: transparent !important;
    border: none;
}

.menu-right form {
    background: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
}
 
.menu-right form path {
    stroke: #16605f;
}

.menu-right button svg {
    display: block;
}
.psacp-rdmr-btn:hover, .psacp-rdmr-btn:focus {
    background: #16605f !important;
    color: #fff !important;
    border-color: #16605f !important;
}
.psacp-post-carousel-wrap .owl-nav .owl-next:hover, .psacp-post-carousel-wrap .owl-nav .owl-prev:hover, .psacp-post-carousel-wrap .owl-nav .owl-next:focus, .psacp-post-carousel-wrap .owl-nav .owl-prev:focus{
    background: #16605f !important;
    color: #fff;
}
.federal-safety-documents .psacp-post-desc {
    font-size: 14px;
    color: #000 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.psacp-post-carousel-wrap .psacp-post-slide {
    background-image: url(https://www.msdssafety.com/wp-content/uploads/2026/04/Frame-43.jpg);
    padding: 40px 20px;
    border-radius: 10px;
    height: 100%;
}
.menu-flex .menu-icon a {
    text-transform: capitalize;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.psacp-post-carousel-wrap .owl-stage {
    display: flex;
}
.federal-safety-documents .psacp-post-img-bg {
    background-image: none !important;
    background-color: transparent !important;
    height: initial !important;
}

.federal-safety-documents .psacp-post-img-bg .psacp-post-overlay {
    position: relative !important;
    background: transparent !important;
    padding: 0;
}
.federal-safety-documents .psacp-post-content {
    padding: 0 !important;
}
.psacp-post-carousel-wrap h2.psacp-post-title {
    font-size: 24px;
    line-height: 28px;
    margin: 0 !important; 
}
.federal-safety-documents .psacp-post-img-bg .psacp-post-overlay h2.psacp-post-title a {
    color: #000 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 16px;
	min-height: 56px;
}
 .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 32px;
      flex-wrap: wrap;
    }
 
    .section-header__left h2 {
      font-size: 2rem;
      color: #16605f;
      line-height: 1.2;
    }
 
    .section-header__left p {
      margin-top: 6px;
      font-size: 0.95rem;
    }
 
   .section-header .select-box {
      border: 2px solid #16605f;
      border-radius: 4px;
      padding: 10px 48px 10px 14px;
      font-size: 0.9rem;
      background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
      appearance: none;
      cursor: pointer;
      min-width: 200px;
    }
   .cards-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
  
    .cards-grid .card {
      background: #dde8e6;
      border-radius: 10px;
      padding: 22px 20px 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: background 0.2s, transform 0.2s;
    }
 
    .cards-grid .card:hover {
      background: #c8dbd8;
      transform: translateY(-3px);
    }
 
    .cards-grid .card__title {
      font-size: 0.95rem;
      font-weight: 700;
      line-height: 1.4;
	      display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    }
 
.cards-grid .card__excerpt {
    font-size: 0.875rem;
    line-height: 1.55;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
 
.cards-grid .card__btn {
    display: inline-block;
    width: fit-content;
    padding: 4px 18px;
    font-size: 12px;
    color: #000;
    background: #fff;
    border: 1px solid #9ab8b4;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
 
    .cards-grid .card__btn:hover {
      background: #16605f;
      border-color: #16605f;
      color: #fff;
    }
 
    .load-more-wrap {
      margin-top: 40px;
      text-align: center;
    }
 
    .load-more-btn {
      padding: 13px 48px;
      font-size: 1rem;
      font-weight: 600;
      color: #fff;
      background: #16605f;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      letter-spacing: 0.4px;
      transition: background 0.2s, transform 0.15s;
    }
 
    .load-more-btn:hover {
      background: #0e4443;
      transform: translateY(-2px);
    }
 
    .load-more-btn:active { transform: translateY(0); }


    .federal-docs-wrapper {
        position: relative;
    }

    .federal-docs-wrapper.loading .cards-grid {
        opacity: 0.4;
        pointer-events: none;
    }

    .federal-overlay-loader {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255,255,255,0.7);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }

    .federal-overlay-loader.active {
        display: flex;
    }

    .loader-spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #ddd;
        border-top: 4px solid #000;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
        100% { transform: rotate(360deg); }
    }

    .sub-mobile-menu {
    display: none;
}

.sub-mobile-menu.open {
    display: block;
}

/* ── RESPONSIVE ── */
    @media (max-width: 1100px) { .cards-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 780px)  { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 480px)  { .cards-grid { grid-template-columns: 1fr; } }
@media (max-width:1024px){
  .logo-bar img#logo{ max-width:200px; }
  .logo-left img:not(#logo){ max-height:82px; }
  .header-call a.call-us{ font-size:15px; }
  .bottom-menu.menu-style ul{ gap:16px; }
  .menu-right{ gap:16px; }
  .menu-flex .menu-icon,
  .menu-flex .menu-icon a{ font-size:13px; }
}

@media (max-width:768px){
  .logo-bar{ flex-wrap:wrap; padding:12px 0; }
  .logo-left{ flex:1; flex-wrap:wrap; gap:6px; }
  .logo-bar {
    flex-wrap: wrap;
    padding: 12px 0;
    flex-direction: column;
    width: 100%;
}
  .header-call{ align-items:center; gap:10px; }
  .header-call a.call-us{ font-size:13px; }
  .button-all{ padding:9px 14px; font-size:13px; }

  /* Hide desktop top-menu bar on mobile (it's in the drawer now) */
  .top-menu{ display:none; }

  /* Hide desktop bottom nav + icons */
  .bottom-menu.menu-style > .page-container > .menu-flex > ul,
  .menu-right{ display:none !important; }

  .hamburger{ display:flex; }
  .menu-flex{ justify-content:flex-end; padding:1px 0; }
.header-call-outer {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}
button#hamburger {
    padding: 14px 10px;
}
}

@media (max-width:480px){
  .logo-left img:not(#logo){ max-height:56px; }
  .logo-bar img#logo{ max-width:140px; }
  .button-all{ padding:8px 10px; font-size:12px; }
}
@media (max-width:350px){
  .logo-left img:not(#logo){ max-height:44px; }
}

/************ Footer Css ************************/
:root {
    --teal-dark:  #1a4a44;
    --teal-mid:   #1f5c54;
    --teal-light: #2a7a6e;
    --accent:     #e0c97f;
    --text-main:  #e8f0ef;
    --text-muted: #a8c5c0;
    --border:     rgba(255,255,255,0.08);
  }


  /* ── FOOTER WRAPPER ── */
  .footer {
    background: linear-gradient(160deg, var(--teal-dark) 0%, var(--teal-mid) 60%, #163f3a 100%);
    color: var(--text-main);
    position: relative;
    overflow: hidden;
  }
  .footer::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
  }

  .footer-top {
    padding: 56px 5% 40px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
    position: relative;
  }
.footer .social-col p {
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--text-muted);
}
  /* ── COLUMN HEADINGS ── */
.col-heading {
    font-size: 1.05rem;
    padding-bottom: 10px;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 14px;
}

  /* ── COL 1 · BRAND ── */
  .brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
  }
  .brand-logo img {
    background: #fff;
    border-radius: 6px;
    padding: 4px;
  }
  .brand-logo-text {wf
    margin-bottom: 6px;
  }
  .brand-tagline strong {
    display: block;
    color: var(--text-main);
    font-size: .9rem;
    font-weight: 700;
    margin-bottom: 2px;
  }
.contact-item svg {
    width: 12px;
}
  /* ── COL 2 · QUICK LINKS ── */
.quick-links ul {
    list-style: none;
    padding: 0;
}
  .quick-links ul li {
    margin-bottom: 10px;
  }
  .quick-links ul li a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: .88rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color .2s, gap .2s;
  }

  /* ── COL 3 · CONTACT ── */
  .contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
  }
  .contact-item .icon {
    width: 34px; height: 34px;
    min-width: 34px;
    background: rgba(255,255,255,0.07);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem;
    color: var(--accent);
    margin-top: 2px;
  }
  .contact-item .info {
    font-size: .86rem;
    color: var(--text-muted);
    line-height: 1.55;
  }
  .contact-item .info a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color .2s;
  }
  .contact-item .info a:hover { color: var(--accent); }

  /* ── COL 4 · FOLLOW US ── */
  .social-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
  }
  .social-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    font-size: 1.1rem;
    transition: transform .2s, filter .2s;
    position: relative;
  }
  .social-btn:hover { transform: translateY(-3px) scale(1.12); filter: brightness(1.2); }
  .social-btn.fb  { background: #1877f2; }
  .social-btn.ig  { background: radial-gradient(circle at 30% 110%, #f9ed32, #ee2a7b 50%, #002aff); }
  .social-btn.tw  { background: #000; border: 1px solid #333; }
  .social-btn.li  { background: #0a66c2; }
  .social-btn.yt  { background: #ff0000; }
  .social-btn svg { width: 18px; height: 18px; fill: #fff; }

  /* ── DIVIDER ── */
  .footer-divider {
    height: 1px;
    background: var(--border);
    margin: 0 5%;
  }

  /* ── BOTTOM BAR ── */
  .footer-bottom {
    padding: 16px 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .78rem;
    color: var(--text-muted);
    position: relative;
    flex-wrap: wrap;
    gap: 8px;
  }
  .footer-bottom a { color: var(--text-muted); text-decoration: none; transition: color .2s; }
  .footer-bottom a:hover { color: var(--accent); }
  .footer-bottom-links { display: flex; gap: 20px; }

  /* ── RESPONSIVE ── */
  @media (max-width: 1024px) {
    .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
  }
  @media (max-width: 620px) {
    .footer-top { grid-template-columns: 1fr; gap: 28px; padding: 36px 6% 28px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .social-grid { gap: 10px; }
  }