/*----------------------------------------------
  QG · qgtennis.com — overrides on top of style.css
----------------------------------------------*/
:root {
  --qg-ball: #d4f542;
  --qg-ball-dark: #a8c227;
  --qg-in: #28c06d;
  --qg-out: #e8513f;
  --qg-ink: #1a2e44;
  --qg-ball-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='19' fill='%23d4f542' stroke='%23a8c227' stroke-width='1'/%3E%3Cpath d='M8 5c8 6 8 24 0 30M32 5c-8 6-8 24 0 30' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --qg-court-hard: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'><rect width='1600' height='900' fill='%231f4f8a'/><rect x='208.0' y='176.8' width='1184.0' height='546.4' fill='%232f6cb0'/><g stroke='%23fff' stroke-linecap='square'><rect x='208.0' y='176.8' width='1184.0' height='546.4' fill='none' stroke-width='5'/><line x1='208.0' y1='245.0' x2='1392.0' y2='245.0' stroke-width='5'/><line x1='208.0' y1='655.0' x2='1392.0' y2='655.0' stroke-width='5'/><line x1='481.2' y1='245.0' x2='481.2' y2='655.0' stroke-width='5'/><line x1='1118.8' y1='245.0' x2='1118.8' y2='655.0' stroke-width='5'/><line x1='481.2' y1='450.0' x2='1118.8' y2='450.0' stroke-width='5'/><line x1='208.0' y1='450.0' x2='227.9' y2='450.0' stroke-width='5'/><line x1='1372.1' y1='450.0' x2='1392.0' y2='450.0' stroke-width='5'/><line x1='800.0' y1='201.7' x2='800.0' y2='698.3' stroke-width='9' stroke='%230b1219' opacity='0.85'/></g></svg>");
  --qg-court-clay: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'><rect width='1600' height='900' fill='%239f4a1f'/><rect x='208.0' y='176.8' width='1184.0' height='546.4' fill='%23c9642f'/><g stroke='%23fff' stroke-linecap='square'><rect x='208.0' y='176.8' width='1184.0' height='546.4' fill='none' stroke-width='5'/><line x1='208.0' y1='245.0' x2='1392.0' y2='245.0' stroke-width='5'/><line x1='208.0' y1='655.0' x2='1392.0' y2='655.0' stroke-width='5'/><line x1='481.2' y1='245.0' x2='481.2' y2='655.0' stroke-width='5'/><line x1='1118.8' y1='245.0' x2='1118.8' y2='655.0' stroke-width='5'/><line x1='481.2' y1='450.0' x2='1118.8' y2='450.0' stroke-width='5'/><line x1='208.0' y1='450.0' x2='227.9' y2='450.0' stroke-width='5'/><line x1='1372.1' y1='450.0' x2='1392.0' y2='450.0' stroke-width='5'/><line x1='800.0' y1='201.7' x2='800.0' y2='698.3' stroke-width='9' stroke='%230b1219' opacity='0.85'/></g></svg>");
  --qg-court-grass: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'><rect width='1600' height='900' fill='%23236b37'/><rect x='208.0' y='176.8' width='1184.0' height='546.4' fill='%232e8b47'/><g stroke='%23fff' stroke-linecap='square'><rect x='208.0' y='176.8' width='1184.0' height='546.4' fill='none' stroke-width='5'/><line x1='208.0' y1='245.0' x2='1392.0' y2='245.0' stroke-width='5'/><line x1='208.0' y1='655.0' x2='1392.0' y2='655.0' stroke-width='5'/><line x1='481.2' y1='245.0' x2='481.2' y2='655.0' stroke-width='5'/><line x1='1118.8' y1='245.0' x2='1118.8' y2='655.0' stroke-width='5'/><line x1='481.2' y1='450.0' x2='1118.8' y2='450.0' stroke-width='5'/><line x1='208.0' y1='450.0' x2='227.9' y2='450.0' stroke-width='5'/><line x1='1372.1' y1='450.0' x2='1392.0' y2='450.0' stroke-width='5'/><line x1='800.0' y1='201.7' x2='800.0' y2='698.3' stroke-width='9' stroke='%230b1219' opacity='0.85'/></g></svg>");
  --qg-court-menu: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 1600'><rect width='900' height='1600' fill='%23153a2a'/><rect x='221.1' y='304.0' width='457.8' height='992.0' fill='%232f6cb0'/><g stroke='%23fff' stroke-linecap='square'><rect x='221.1' y='304.0' width='457.8' height='992.0' fill='none' stroke-width='5'/><line x1='278.3' y1='304.0' x2='278.3' y2='1296.0' stroke-width='5'/><line x1='621.7' y1='304.0' x2='621.7' y2='1296.0' stroke-width='5'/><line x1='278.3' y1='532.9' x2='621.7' y2='532.9' stroke-width='5'/><line x1='278.3' y1='1067.1' x2='621.7' y2='1067.1' stroke-width='5'/><line x1='450.0' y1='532.9' x2='450.0' y2='1067.1' stroke-width='5'/><line x1='450.0' y1='304.0' x2='450.0' y2='320.7' stroke-width='5'/><line x1='450.0' y1='1279.3' x2='450.0' y2='1296.0' stroke-width='5'/><line x1='242.0' y1='800.0' x2='658.0' y2='800.0' stroke-width='9' stroke='%230b1219' opacity='0.85'/></g></svg>");
}

/* ---------- tennis-ball cursor ---------- */
/* GSAP owns #cursor's transform (position + scale), so the spinning ball
   lives on a pseudo-element to avoid fighting over the same property. */
#magic-cursor #cursor {
  border: 0;
  background: none;
}
#magic-cursor #cursor::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--qg-ball-svg) center/contain no-repeat;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  animation: qg-ball-spin 6s linear infinite;
}
#magic-cursor #cursor.hovered {
  opacity: 1 !important;
}
#magic-cursor #cursor.hovered::after {
  animation-duration: 1.2s;
}
@keyframes qg-ball-spin {
  to { transform: rotate(360deg); }
}
@media (hover: none), (pointer: coarse) {
  #magic-cursor { display: none; }
}

/* ---------- brand: "QyraGy" collapses to "QG" once the preloader is gone ---------- */
header .navbar-expand .navbar-brand {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.qg-mark {
  display: inline-flex;
  align-items: baseline;
  overflow: hidden;
}
.qg-mark b {
  font-weight: 700;
  letter-spacing: 0.06em;
}
header .navbar-expand .navbar-brand .qg-mark i {
  font-style: normal;
  font-size: inherit;
  color: inherit;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.06em;
  display: inline-block;
  max-width: 3.2em;
  opacity: 1;
}
/* main.js adds .qg-loaded to <body> when the preloader has left */
.qg-loaded .qg-mark i {
  animation: qg-collapse 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.2s forwards;
}
@keyframes qg-collapse {
  to { max-width: 0; opacity: 0; letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .qg-mark i { animation: none; max-width: 0; opacity: 0; letter-spacing: 0; }
}
.qg-dot {
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-left: 0.15em;
  border-radius: 50%;
  background: var(--qg-ball);
  box-shadow: inset -2px -2px 0 var(--qg-ball-dark);
}

/* ---------- hero figure ---------- */
.qg-hero-figure {
  margin-top: clamp(3rem, 6vw, 5rem);
}
.qg-figure {
  margin: 0;
  border-radius: var(--primary-border-radius);
  overflow: hidden;
  background: #0f1a24;
  box-shadow: 0 30px 80px -30px rgba(3, 7, 18, 0.45);
}
.qg-figure.light {
  background: #f4f7fa;
  border: 1px solid var(--primary-l-color);
}
.qg-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.qg-figure figcaption {
  padding: 1rem 1.5rem;
  font-size: 1rem;
  color: var(--secondary-t-color-2);
  background: #0b131b;
}
.qg-figure.light figcaption {
  color: var(--primary-t-color-3);
  background: #fff;
  border-top: 1px solid var(--primary-l-color);
}

/* ---------- about cards (stack) on hard / clay / grass courts ---------- */
.works .intro {
  padding-top: 0;
}
.stack-wrapper .stack-item,
.stack-wrapper .stack-item.stack-item {
  height: auto;
}
.qg-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--primary-border-radius);
  color: #fff;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  min-height: 30rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: 0 40px 90px -40px rgba(3, 7, 18, 0.6);
  background-size: 135% auto;
  background-position: 85% 50%;
  background-repeat: no-repeat;
  isolation: isolate;
}
@media (max-width: 767px) {
  .qg-card {
    background-size: cover;
    background-position: center;
  }
}
.qg-card.surface-hard  { background-image: var(--qg-court-hard); }
.qg-card.surface-clay  { background-image: var(--qg-court-clay); }
.qg-card.surface-grass { background-image: var(--qg-court-grass); }
/* readable text: a shade that gets darker towards the bottom-left */
.qg-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(4, 4, 2, 0.72) 0%, rgba(4, 4, 2, 0.35) 55%, rgba(4, 4, 2, 0.05) 100%);
}
.qg-card h4 {
  color: #fff;
  margin: 0 0 1.25rem;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.qg-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 44rem;
}
.qg-card li {
  position: relative;
  padding: 0.6rem 0 0.6rem 1.6rem;
  font-size: 1.1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.qg-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--qg-ball-svg) center/contain no-repeat;
}
.qg-card li strong {
  color: #fff;
  font-weight: 600;
}

/* ---------- marquee: numbers instead of logos ---------- */
.marquee .marquee-item {
  border-radius: var(--primary-border-radius);
  border: 1px solid var(--primary-l-color);
}
.marquee ul .item .marquee-item .marquee-content.qg-mq {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 1rem;
}
.marquee .qg-mq b {
  font-size: 2.2rem;
  white-space: nowrap;
  font-weight: 700;
  line-height: 1;
  color: var(--primary-t-color);
}
.marquee .qg-mq b.in { color: var(--qg-in); }
.marquee .qg-mq b.out { color: var(--qg-out); }
.marquee .qg-mq span {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  color: var(--primary-t-color-3);
}

/* ---------- systems list ---------- */
.awards .list-group-item .tags {
  display: block;
  max-width: 40rem;
}
.awards .list-group-item .price {
  display: inline-block;
  margin-top: 0.75rem;
  font-weight: 600;
  color: var(--primary-t-color);
}
.awards .list-group-item:hover .price {
  color: var(--white-color);
}

/* ---------- steps ---------- */
.qg-steps .items .item {
  padding-top: 2rem;
  border-top: 1px solid var(--primary-l-color);
}
.qg-steps .items .item .content h4 {
  font-size: 1.5rem;
}
.qg-steps .items .item .content .when {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-t-color-3);
}

/* ---------- contact ---------- */
.cta .qg-phone {
  display: inline-block;
  margin-top: 2rem;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--primary-t-color);
}
.cta .qg-phone:hover { opacity: 0.7; }
.cta .qg-who {
  display: block;
  margin-top: 0.25rem;
  color: var(--primary-t-color-3);
}
.cta .qg-note {
  max-width: 36rem;
  margin: 1.5rem auto 0;
  color: var(--primary-t-color-3);
}

/* ---------- menu button: a tennis ball ---------- */
.navbar-toggler .navbar-header {
  background-color: var(--qg-ball);
  background-image: var(--qg-ball-svg);
  background-size: 100% 100%;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45);
}
.navbar-toggler .navbar-header .content .toggler-icon::before,
.navbar-toggler .navbar-header .content .toggler-icon::after {
  height: 2px;
  background: var(--qg-ink);
}
.navbar-toggler.active .navbar-header {
  background-color: var(--qg-ball);
  transform: rotate(90deg);
  transition: transform 0.4s cubic-bezier(0.34, 1.5, 0.64, 1);
}
.navbar-toggler.active .navbar-header .content .toggler-icon::before,
.navbar-toggler.active .navbar-header .content .toggler-icon::after {
  background: var(--qg-ink);
}
@media (max-width: 575px) {
  /* in the top bar on a phone the button is just the word "Menu" */
  .navbar .navbar-toggler:not(.active) .navbar-header {
    background-image: none;
    box-shadow: none;
  }
}

/* ---------- right sidebar: a court ---------- */
.offcanvas-wrapper .offcanvas {
  background-color: #153a2a;
  background-image: var(--qg-court-menu);
  background-size: cover;
  background-position: center;
}
.offcanvas-wrapper .offcanvas .fixed-nav-rounded-div .rounded-div-wrap .rounded-div {
  background: #153a2a;
}
.offcanvas-wrapper .offcanvas .offcanvas-content {
  background: linear-gradient(90deg, rgba(8, 20, 14, 0.55) 0%, rgba(8, 20, 14, 0.25) 100%);
}
.offcanvas-wrapper .offcanvas .offcanvas-content .offcanvas-title {
  color: var(--qg-ball);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.9rem;
}
.offcanvas-wrapper .offcanvas .offcanvas-content hr {
  border-color: rgba(255, 255, 255, 0.35);
  opacity: 1;
}
.menu .nav-link:not(.btn) {
  padding-left: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.menu .nav-link:not(.btn)::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.4em;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--qg-ball-svg) center/contain no-repeat;
  opacity: 0;
  transform: translateX(-0.5em) scale(0.6);
  transition: opacity 0.25s, transform 0.25s;
}
.menu .nav-link:not(.btn):hover::before,
.menu .nav-link.active:not(.btn)::before {
  opacity: 1;
  transform: none;
}
.menu .nav-link:not(.btn):hover,
.menu .nav-link.active:not(.btn) {
  opacity: 1;
  color: var(--qg-ball);
}

/* ---------- fixed top menu on laptop, sidebar only on phones ---------- */
header .navbar-expand {
  transition: background-color 0.3s, box-shadow 0.3s, padding 0.3s;
}
header .navbar-expand.qg-scrolled {
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: rgba(248, 248, 249, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--primary-l-color);
}
@media (min-width: 768px) {
  .offcanvas-wrapper,
  .navbar .navbar-toggler {
    display: none !important;
  }
}
/* the ball button carries no hamburger icon */
.navbar-toggler .navbar-header .content .toggler-icon {
  display: none;
}

/* ---------- footer: powered by qaz.solutions ---------- */
.footer-area .copyright {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35em;
}
.footer-area .copyright .qg-powered {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--primary-t-color);
  font-weight: 600;
}
.footer-area .copyright .qg-powered img {
  height: 1.5em;
  width: auto;
}
.footer-area .copyright .qg-powered:hover {
  opacity: 0.7;
}

/* ---------- rally clips: the original videos, played inline ---------- */
.qg-figure video {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- labels above the rally clips ---------- */
.qg-figure-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-t-color-3);
}
.qg-figure-label::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--qg-ball-svg) center/contain no-repeat;
}