@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');


*,
    *::before,
    *::after {
      box-sizing: border-box
    }

    html,
    body {
      margin: 0;
      padding: 0;
      font-family: 'Poppins', sans-serif;
      overflow-x: hidden
    }

    @keyframes marquee {
      0% {
        transform: translateX(0)
      }

      100% {
        transform: translateX(-50%)
      }
    }

    .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee 32s linear infinite
    }

    .marquee-track:hover {
      animation-play-state: paused
    }

    .marquee-fast {
      animation-duration: 28s
    }

    img[style*="color:transparent"] {
      color: inherit !important
    }

    .text-center {
      text-align: center
    }

    .font-extrabold {
      font-weight: 800
    }

    .uppercase {
      text-transform: uppercase
    }

    .tracking-\[2px\] {
      letter-spacing: 2px
    }

    .mb-14 {
      margin-bottom: 3.5rem
    }

    .mt-3 {
      margin-top: 0.75rem
    }

    .rounded-full {
      border-radius: 9999px
    }

    .mx-auto {
      margin-left: auto;
      margin-right: auto
    }

    #ppsu-nav {
      display: flex !important
    }

    #hdr-right {
      display: flex !important
    }

    #burger-btn {
      display: none !important
    }

    /* Apply modal scroll lock */
    body.modal-open {
      overflow: hidden
    }

    @media(max-width:1023px) {
      #ppsu-nav {
        display: none !important
      }

      #burger-btn {
        display: flex !important;
        flex-direction: column
      }
    }

    @media(max-width:767px) {
      #hdr-right {
        display: none !important
      }

      #hero>div[style*="display:flex"] {
        flex-direction: column !important;
        padding: 20px 16px !important;
        min-height: auto !important
      }

      #hero div[style*="max-width:520px"] {
        max-width: 100% !important
      }

      #hero div[style*="width:290px"] {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 16px !important
      }

      div[style*="grid-template-columns:repeat(4, 1fr)"] {
        grid-template-columns: 1fr 1fr !important
      }

      div[style*="grid-template-columns:1fr 1fr;gap:24px"] {
        grid-template-columns: 1fr !important
      }

      div[style*="grid-template-columns:1fr 1fr;gap:32px"] {
        grid-template-columns: 1fr !important
      }

      div[style*="grid-template-columns:1fr 340px"] {
        grid-template-columns: 1fr !important
      }

      div[style*="grid-template-columns:1.6fr 1fr 1fr 1.4fr"] {
        grid-template-columns: 1fr 1fr !important
      }

      div[style*="padding:52px 60px"] {
        padding: 28px 20px !important;
        flex-direction: column !important
      }

      div[style*="flex:0 0 280px"] {
        flex: none !important;
        width: 100% !important
      }

      div[style*="padding:72px 60px 0"] {
        padding: 32px 20px 0 !important
      }

      div[style*="padding:0 40px"],
      div[style*="padding:0 32px"] {
        padding-left: 16px !important;
        padding-right: 16px !important
      }

      #apply-modal {
        width: 95% !important;
        max-height: 95vh !important
      }

      #apply-modal>div {
        padding: 20px 16px 18px !important
      }
    }

    @media(max-width:480px) {
      div[style*="grid-template-columns:1.6fr 1fr 1fr 1.4fr"] {
        grid-template-columns: 1fr !important
      }
    }

      @keyframes mobileSlide {
      from {
        opacity: 0;
        transform: translateY(-6px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .ppsu-nav-item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 0 2px;
      cursor: pointer;
      background: none;
      border: none;
      font-family: Poppins, sans-serif;
      font-size: 12px;
      font-weight: 500;
      color: #2d3a52;
      transition: color 0.2s;
      white-space: nowrap;
    }

    .ppsu-nav-item:hover {
      color: #c0392b;
    }

    .ppsu-nav-item.active {
      color: #c0392b;
      font-weight: 700;
    }

    .ppsu-nav-item .dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #c0392b;
      opacity: 0;
      transform: scale(0);
      transition: opacity 0.2s, transform 0.2s;
    }

    .ppsu-nav-item:hover .dot,
    .ppsu-nav-item.active .dot {
      opacity: 1;
      transform: scale(1);
    }