body {
    padding-bottom: 50px; /* for the footer */
  }

  .custom-navbar {
    background-color: #37517e;
  }
  .navbar-dark .navbar-nav .nav-link {
    color: White;
  }
  .navbar-dark .navbar-nav .nav-link:hover {
    color: White;
    background-color: Black;
  }
  footer {
    background-color: Black;
    color: White;
    /* position: absolute; */
    position: fixed;
    bottom: 0;
    width: 100%;
  }
  footer a, footer a:hover {
    color: White;
  }
  @media (max-width: 768px) {
    footer {
      position: relative; /* Disable sticky footer on mobile */
    }
    footer p {
      font-size: 12px;
    }
  }

  /* Product subtitle under the main title */
  .card-subtitle {
    font-size: 1.05rem;
    color: #555;
    margin-bottom: 1rem;
  }
  .card-img-top {
    height: 200px;
    object-fit: contain;
  }
  .card-prod {
    background-color: rgb(252, 244, 228);
    border-radius: 10px;
  }

  .kobi-tales-page {
    color: #1d2433;
  }

  .kobi-tales-page h1,
  .kobi-tales-page h2,
  .kobi-tales-page h3 {
    font-weight: 800;
  }

  .drone-hero {
    background: radial-gradient(circle at top left, #34d5ff 0, #37517e 35%, #15213d 100%);
    border-radius: 28px;
    color: White;
    margin-bottom: 4rem;
    overflow: hidden;
    padding: 4rem 3rem;
    position: relative;
  }

  .drone-hero:after {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    content: "";
    height: 280px;
    position: absolute;
    right: -90px;
    top: -90px;
    width: 280px;
  }

  .drone-logo-mark {
    color: #ffe766;
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: -0.08em;
    line-height: 0.9;
    margin-bottom: 1.5rem;
    text-shadow: 0 6px 0 rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
  }

  .drone-kicker {
    color: #ff9f1c;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
  }

  .drone-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
  }

  .drone-button-row .btn {
    border-radius: 999px;
    font-weight: 700;
  }

  .drone-button-row-dark {
    justify-content: flex-end;
  }

  .drone-trailer-card {
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 330px;
    padding: 2rem;
    position: relative;
    text-align: center;
    z-index: 1;
  }

  .drone-play-icon {
    align-items: center;
    background: #ffbe0b;
    border-radius: 50%;
    color: #15213d;
    display: flex;
    font-size: 2.2rem;
    height: 96px;
    justify-content: center;
    margin-bottom: 1.5rem;
    width: 96px;
  }

  .drone-promo-image {
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
    height: auto;
    max-width: 100%;
    width: 100%;
  }

  .drone-section {
    margin-bottom: 4rem;
  }

  .drone-section-heading {
    margin-bottom: 1.75rem;
    text-align: center;
  }

  .drone-wide-text {
    font-size: 1.15rem;
    margin: 0 auto 2rem;
    max-width: 880px;
    text-align: center;
  }

  .drone-shot-card {
    background: #08111f;
    border-radius: 22px;
    box-shadow: 0 12px 30px rgba(21, 33, 61, 0.16);
    height: 100%;
    margin: 0;
    overflow: hidden;
  }

  .drone-shot-card img {
    display: block;
    height: 220px;
    object-fit: cover;
    width: 100%;
  }

  .drone-shot-card figcaption {
    color: White;
    font-weight: 800;
    padding: 1rem;
    text-align: center;
  }

  .drone-shot {
    align-items: center;
    border-radius: 22px;
    box-shadow: 0 12px 30px rgba(21, 33, 61, 0.16);
    color: White;
    display: flex;
    font-size: 1.25rem;
    font-weight: 800;
    justify-content: center;
    min-height: 180px;
    padding: 1rem;
    text-align: center;
  }

  .drone-shot-blue { background: linear-gradient(135deg, #1982c4, #8ac926); }
  .drone-shot-purple { background: linear-gradient(135deg, #6a4c93, #ff66c4); }
  .drone-shot-green { background: linear-gradient(135deg, #00b894, #00cec9); }
  .drone-shot-gold { background: linear-gradient(135deg, #ffbe0b, #fb5607); }
  .drone-shot-red { background: linear-gradient(135deg, #e63946, #9d0208); }
  .drone-shot-dark { background: linear-gradient(135deg, #343a40, #111827); }
  .drone-shot-cyan { background: linear-gradient(135deg, #3a86ff, #4cc9f0); }
  .drone-shot-pink { background: linear-gradient(135deg, #ff006e, #8338ec); }

  .drone-feature-card,
  .drone-story-card,
  .drone-mini-card,
  .drone-update-card {
    background: #ffffff;
    border: 1px solid #e6ebf5;
    border-radius: 20px;
    box-shadow: 0 10px 26px rgba(21, 33, 61, 0.08);
    height: 100%;
    padding: 1.5rem;
  }

  .drone-feature-card i {
    color: #3a86ff;
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .drone-feature-card h3,
  .drone-story-card h3,
  .drone-mini-card h3 {
    font-size: 1.15rem;
  }

  .drone-card-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .drone-mini-card {
    background: #fbfcff;
  }

  .drone-villain-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
  }

  .drone-villain-list span {
    background: #15213d;
    border-radius: 999px;
    color: White;
    font-weight: 700;
    padding: 0.75rem 1rem;
  }

  .drone-comparison-table {
    background: White;
    box-shadow: 0 10px 26px rgba(21, 33, 61, 0.08);
  }

  .drone-comparison-table thead {
    background: #37517e;
    color: White;
  }

  .drone-update-card {
    background: #fff7df;
    font-weight: 800;
    text-align: center;
  }

  .drone-support-section {
    background: #f3f7ff;
    border-radius: 24px;
    padding: 2rem;
  }

  @media (max-width: 768px) {
    .drone-hero {
      border-radius: 18px;
      padding: 2.5rem 1.25rem;
    }

    .drone-logo-mark {
      font-size: 2.8rem;
    }

    .drone-button-row,
    .drone-button-row-dark {
      justify-content: stretch;
    }

    .drone-button-row .btn {
      width: 100%;
    }
  }

  /* Drone Alert game marketing page */
  .drone-game-page {
    background:
      radial-gradient(circle at 8% 4rem, rgba(99, 230, 255, 0.18), transparent 24rem),
      radial-gradient(circle at 88% 10rem, rgba(255, 190, 11, 0.14), transparent 24rem),
      #ffffff;
    border-radius: 0;
    color: #1d2433;
    margin-top: -3rem;
    overflow: hidden;
    padding: 3rem 0 4rem;
  }

  .drone-game-page .drone-section {
    margin-bottom: 5rem;
  }

  .drone-game-page .drone-section-heading {
    margin: 0 auto 2rem;
    max-width: 780px;
  }

  .drone-game-page .drone-section-heading h2 {
    color: #14213d;
    font-size: 2.6rem;
    letter-spacing: -0.04em;
  }

  .drone-game-page .drone-section-heading p:not(.drone-kicker) {
    color: #526174;
    font-size: 1.05rem;
  }

  .drone-game-hero {
    background:
      radial-gradient(circle at 74% 48%, rgba(0, 224, 255, 0.26), transparent 22rem),
      radial-gradient(circle at 96% 14%, rgba(255, 128, 42, 0.2), transparent 18rem),
      linear-gradient(135deg, rgba(5, 15, 33, 0.97), rgba(9, 31, 66, 0.96) 45%, rgba(4, 11, 24, 0.98));
    border: 1px solid rgba(87, 220, 255, 0.32);
    border-radius: 30px;
    box-shadow: 0 28px 80px rgba(0, 28, 79, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    margin-bottom: 5rem;
    padding: 2rem;
  }

  .drone-game-hero > .row {
    position: relative;
    z-index: 1;
  }

  .drone-game-hero:after {
    background: rgba(74, 224, 255, 0.08);
    border: 1px solid rgba(119, 232, 255, 0.12);
    border-radius: 999px;
    content: "";
    display: block;
    height: 280px;
    position: absolute;
    right: -80px;
    top: -90px;
    width: 280px;
  }

  .drone-game-hero:before {
    background: rgba(255, 128, 42, 0.08);
    border: 1px solid rgba(255, 184, 77, 0.1);
    border-radius: 999px;
    bottom: -130px;
    content: "";
    height: 360px;
    left: -140px;
    position: absolute;
    width: 360px;
  }

  .drone-game-hero h1 {
    color: #ffffff;
    font-size: clamp(1.7rem, 2.6vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin-bottom: 0.85rem;
    text-shadow: 0 0 18px rgba(79, 220, 255, 0.35);
  }

  .drone-game-hero h1 span {
    display: block;
  }

  .drone-game-hero .kobi-tales-title-red {
    color: #ff3b2f;
  }

  .drone-game-hero .drone-kicker {
    color: #ffb347;
  }

  .drone-hero-subtitle {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.45;
  }

  .drone-hero-description {
    color: #c7d9ea;
    font-size: 0.94rem;
    line-height: 1.65;
  }

  .drone-hero-art {
    position: relative;
  }

  .drone-hero-art:before {
    background: radial-gradient(circle, rgba(0, 224, 255, 0.28), rgba(255, 128, 42, 0.1) 42%, transparent 68%);
    content: "";
    filter: blur(12px);
    inset: 4% -4% -2% 8%;
    position: absolute;
  }

  .drone-game-hero .drone-promo-image {
    border: 1px solid rgba(184, 242, 255, 0.52);
    border-radius: 22px;
    box-shadow: 0 26px 70px rgba(0, 12, 30, 0.5), 0 0 50px rgba(0, 224, 255, 0.28), 0 0 34px rgba(255, 128, 42, 0.12);
    max-width: 100%;
    position: relative;
    transform: scale(1.02);
    transform-origin: center right;
    width: 100%;
  }

  .drone-game-page .drone-button-row .btn {
    border-radius: 8px;
    box-shadow: 0 7px 0 rgba(0, 0, 0, 0.22);
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }

  .drone-feature-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }

  .drone-game-page .drone-feature-card,
  .drone-game-page .drone-mini-card,
  .drone-edition-card,
  .drone-about-section {
    background: #ffffff;
    border: 1px solid #dbe7f5;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(55, 81, 126, 0.12);
    color: #2b3648;
  }

  .drone-game-page .drone-feature-card {
    padding: 1.6rem;
  }

  .drone-game-page .drone-feature-card i {
    color: #ffbe0b;
  }

  .drone-game-page .drone-feature-card h3,
  .drone-game-page .drone-mini-card h3,
  .drone-edition-card h3 {
    color: #14213d;
  }

  .drone-shot-card {
    background: #ffffff;
    border: 1px solid #dbe7f5;
    box-shadow: 0 14px 34px rgba(55, 81, 126, 0.14);
  }

  .drone-shot-card img {
    height: 230px;
  }

  .drone-shot-card-combat img {
    min-height: 160px;
    object-fit: cover;
  }

  .drone-shot-card figcaption {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    text-align: left;
  }

  .drone-shot-card figcaption strong {
    color: #14213d;
    font-size: 1.1rem;
  }

  .drone-shot-card figcaption span {
    color: #526174;
    font-weight: 400;
    line-height: 1.5;
  }

  .drone-game-page .drone-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }

  .drone-game-page .drone-mini-card {
    padding: 1.25rem;
  }

  .drone-villain-grid .drone-mini-card {
    border-color: rgba(255, 83, 66, 0.22);
  }

  .drone-edition-card {
    height: 100%;
    padding: 2rem;
  }

  .drone-edition-card ul {
    margin-bottom: 1.5rem;
    padding-left: 1.25rem;
  }

  .drone-edition-card li {
    margin-bottom: 0.45rem;
  }

  .drone-edition-card-pro {
    border-color: rgba(255, 190, 11, 0.42);
    box-shadow: 0 18px 45px rgba(255, 122, 0, 0.12);
  }

  .drone-about-section {
    margin-left: auto;
    margin-right: auto;
    max-width: 920px;
    padding: 2rem;
    text-align: center;
  }

  .drone-about-section p {
    color: #526174;
    font-size: 1.05rem;
    line-height: 1.75;
  }

  .drone-video-frame {
    aspect-ratio: 16 / 9;
    background: #000000;
    border: 1px solid rgba(105, 220, 255, 0.24);
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.44);
    margin: 0 auto;
    max-width: 960px;
    overflow: hidden;
  }

  .drone-video-frame iframe {
    border: 0;
    height: 100%;
    width: 100%;
  }

  .drone-download-section {
    background:
      radial-gradient(circle at 15% 20%, rgba(255, 222, 106, 0.28), transparent 20rem),
      linear-gradient(135deg, rgba(255, 157, 0, 0.3), rgba(45, 171, 255, 0.28)),
      #17498f;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
    margin-bottom: 0 !important;
    padding: 3rem 2rem;
    text-align: center;
  }

  .drone-download-section h2 {
    color: #ffffff;
    font-size: 3rem;
  }

  .drone-download-section p {
    color: #c7d6eb;
    font-size: 1.15rem;
  }

  .drone-support-links {
    margin-top: 1.5rem;
  }

  .drone-support-links a,
  .drone-support-links a:hover {
    color: #ffde6a;
  }

  @media (max-width: 991px) {
    .drone-game-page {
      margin-top: -3rem;
      padding-top: 2rem;
    }

    .drone-game-hero {
      padding: 1.25rem;
    }
  }