:root {
        --gib-bg: radial-gradient(1000px 600px at 80% -10%, rgba(255, 215, 141, 0.25), transparent 60%),
          radial-gradient(1000px 600px at -10% 110%, rgba(255, 215, 141, 0.18), transparent 60%), #0b0e17;
        --gib-card: rgba(255, 255, 255, 0.06);
        --gib-stroke: rgba(255, 255, 255, 0.12);
        --gib-gold: #e7c676;
        --gib-gold-2: #f6e7b2;
        --gib-text: #e9edf5;
        --gib-muted: #aeb6c6;
        --gib-gold-grad: linear-gradient(135deg, #f9f1c5, #e7c676 45%, #ad8a35 85%);
      }
      html,
      body {
        background: var(--gib-bg);
        color: var(--gib-text);
        scroll-behavior: smooth; /* smooth scroll on anchor jump */
      }
      a {
        color: var(--gib-gold);
        text-decoration: none;
      }
      a:hover {
        color: var(--gib-gold-2);
      }

      /* Layout */
      .gib-shell {
        min-height: 100vh;
        display: grid;
        grid-template-columns: 84px 1fr;
        gap: 28px;
      }
      @media (max-width: 991.98px) {
        .gib-shell {
          grid-template-columns: 1fr;
          gap: 16px;
        }
      }

      /* Left rail (desktop) */
      .gib-rail {
        position: sticky;
        top: 16px;
        align-self: start;
        height: calc(100vh - 32px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .gib-rail .brand {
        height: 84px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .gib-rail .menu {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 8px;
        border-radius: 20px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
        border: 1px solid var(--gib-stroke);
        backdrop-filter: blur(6px);
      }
      .gib-rail .menu a {
        --size: 54px;
        width: var(--size);
        height: var(--size);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid transparent;
        color: var(--gib-text);
        opacity: 0.85;
      }
      .gib-rail .menu a:hover {
        border-color: var(--gib-stroke);
        opacity: 1;
        background: rgba(255, 255, 255, 0.06);
      }
      .gib-rail .menu a.active {
        background: linear-gradient(180deg, rgba(231, 198, 118, 0.22), rgba(231, 198, 118, 0.05));
        color: var(--gib-gold);
        border-color: rgba(231, 198, 118, 0.35);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 20px rgba(231, 198, 118, 0.15);
      }

      /* Right hero */
      .hero {
        position: relative;
        overflow: hidden;
        border-radius: 24px;
        background: linear-gradient(135deg, rgba(231, 198, 118, 0.12), rgba(255, 255, 255, 0.04));
        border: 1px solid var(--gib-stroke);
      }
      .hero:before {
        content: "";
        position: absolute;
        inset: -40% -10% auto -10%;
        height: 120%;
        background: radial-gradient(closest-side, rgba(231, 198, 118, 0.35), transparent 70%);
        opacity: 0.45;
        filter: blur(40px);
      }
      .hero .title {
        font-weight: 800;
        letter-spacing: 0.03em;
        text-transform: none;
        background: linear-gradient(180deg, #fff, var(--gib-gold-2));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .hero .strap {
        color: var(--gib-muted);
        letter-spacing: 0.18em;
      }

      /* Typing effect */
      .typing {
        border-right: 2px solid var(--gib-gold);
        white-space: nowrap;
        overflow: hidden;
      }
      .hide {
        display: none !important;
      }

      /* Cards */
      .glass {
        background: var(--gib-card);
        border: 1px solid var(--gib-stroke);
        border-radius: 20px;
        backdrop-filter: blur(6px);
      }
      .glass .card-header {
        border-bottom-color: var(--gib-stroke);
      }
      .card-header .badge {
        letter-spacing: 0.08em;
      }

      /* Definition rows */
      .def {
        display: grid;
        grid-template-columns: 240px 1fr;
        gap: 18px;
        padding: 10px 0;
        border-bottom: 1px dashed var(--gib-stroke);
      }
      .def:last-child {
        border-bottom: 0;
      }
      .def .k {
        color: var(--gib-muted);
        font-weight: 600;
      }
      .def .v {
        color: var(--gib-text);
      }
      @media (max-width: 767.98px) {
        .def {
          grid-template-columns: 1fr;
          gap: 6px;
        }
      }

      /* Media/Product grid */
      .media-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
      }
      @media (max-width: 991.98px) {
        .media-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 575.98px) {
        .media-grid {
          grid-template-columns: 1fr;
        }
      }
      .media-grid img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        border-radius: 14px;
        border: 1px solid var(--gib-stroke);
      }

      /* Gold outline icon buttons (default outline, hover fill) */
      .social-gold {
        --b: 1px;
        border: var(--b) solid rgba(231, 198, 118, 0.6);
        color: var(--gib-gold);
        padding: 0.4rem 0.8rem;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: transparent;
        transition: 0.25s ease;
      }
      .social-gold i {
        background: var(--gib-gold-grad);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .social-gold:hover {
        background: var(--gib-gold-grad);
        color: #2a2512;
        border-color: transparent;
      }
      .social-gold:hover i {
        color: inherit;
        -webkit-text-fill-color: inherit;
      }

      /* Mobile app bar */
      .gib-appbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(180deg, rgba(11, 14, 23, 0.1), rgba(11, 14, 23, 0.8));
        border-top: 1px solid var(--gib-stroke);
        backdrop-filter: blur(8px);
        z-index: 1040;
      }
      .gib-appbar .nav {
        display: flex;
        justify-content: space-around;
        padding: 6px 6px 10px;
      }
      .gib-appbar a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        color: var(--gib-muted);
        padding: 8px 10px;
        border-radius: 12px;
      }
      .gib-appbar a.active {
        color: var(--gib-gold);
        background: rgba(231, 198, 118, 0.08);
      }

      /* Intro overlay for GEMS logo */
      .intro {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(60% 60% at 50% 30%, rgba(231, 198, 118, 0.25), transparent 70%), #0b0e17;
        z-index: 2000;
      }
      .intro .gems {
        font-weight: 800;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        font-size: clamp(24px, 6vw, 52px);
        background: var(--gib-gold-grad);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        filter: drop-shadow(0 8px 24px rgba(231, 198, 118, 0.25));
        opacity: 0;
        transform: translateY(10px);
        animation: show 1.2s ease forwards;
      }
      @keyframes show {
        to {
          opacity: 1;
          transform: none;
        }
      }
      /* Golden gradient heading text */
      .gold-grad-text {
        background: var(--gib-gold-grad);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        display: inline-block;
      }

      /* Optional: subtle gold underline accent for headings */
      .gold-underline {
        position: relative;
      }
      .gold-underline::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -8px;
        height: 2px;
        border-radius: 2px;
        background: var(--gib-gold-grad);
        opacity: 0.75;
      }
      /* Glassy dark inputs matching theme */
      .form-glass .form-control,
      .form-glass .form-select {
        background: rgba(255, 255, 255, 0.06);
        border-color: var(--gib-stroke);
        color: var(--gib-text);
      }
      .form-glass .form-control::placeholder {
        color: var(--gib-muted);
      }

      /* Gold focus ring */
      .form-glass .form-control:focus,
      .form-glass .form-select:focus {
        border-color: var(--gib-gold);
        box-shadow: 0 0 0 0.25rem rgba(231, 198, 118, 0.15);
        background: rgba(255, 255, 255, 0.08);
      }

      /* Gold CTA button */
      .btn-gold {
        background: var(--gib-gold-grad);
        color: #2a2512;
        border: none;
      }
      .btn-gold:hover {
        filter: brightness(1.05);
      }

.fll_dspl_cars {
    border: 1px solid gold;
    padding: 19px;
    border-radius: 8px;
    position: relative;
}
.pcrdts_name h4 {
    color: gold;
    font-size: 25px;
    margin-bottom: 8px;
}
.crd_prtse_sort_desc p {
    color: #fff;
    margin-top: 11px;
    font-size: 15px;
}
.pcrdts_name h5 {
    color: #fff;
    margin-bottom: 0px;
    font-size: 18px;
}
.inner_prts_igs img {
    position: absolute;
    bottom: 0px;
    /* margin-bottom: -19px; */
    right: -1px;
    height: 199px;
}

.info-error {
    color: gold;
    font-size: 13px;
}
.imgs_bgs_ln {
    background: #fff;
    border-radius: 50%;
    height: 100px;
    width: 100px;
    align-content: center;
    text-align: center;
}
.bll_logo {
    margin-bottom: 20px;
    text-align: right;
}
.bll_logo img {
    height: 21px;
}
option {
    color: #000 !important;
}
.media-grid iframe {
    border: 1px solid gold;
    border-radius: 10px;
}
.main_vdos iframe{
     border: 1px solid gold;
    border-radius: 10px;
}
@media(max-width: 767.98px){
  .inner_prts_igs img{
    position: relative;
    margin-bottom: -19px;
  }
    a.social-gold {
        margin-top: 15px;
        margin-bottom: 25px;
    }
    .imgs_bgs_ln {
    margin: 0 auto;
}
.strap.text-uppercase {
    text-align: center;
}
h1#typedTitle {
    text-align: center;
}
.inner_prts_igs img {
    height: 255px;
}
.main_vdos iframe {
    height: 250px;
}
.media-grid iframe{
  height: 250px;
}
}