.footer {
  width: 100%;
  background-color: #fff;
  font-family: 'Roboto Condensed';
}

/* Support Bar */
.supportBar {
  background-color: #0088cc;
  color: white;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.leftLinks {
  display: flex;
  gap: 20px;
  align-items: center;
}

.footerLink {
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: opacity 0.3s;
}

.footerLink:hover {
  opacity: 0.8;
}

/* Desktop 24X7 Support - Centered */
.supportTextDesktop {
  font-size: 24px;
  font-weight: bold;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: white;
}

.placeholder {
  width: 150px;
}

/* Mobile 24X7 Support Bar - Hidden on Desktop */
.supportBarMobile {
  background-color: #0088cc;
  color: white;
  padding: 15px 20px;
  text-align: center;
  display: none;
}

.supportTextMobile {
  font-size: 22px;
  font-weight: bold;
  color: white;
}

.socialIcons {
  display: flex;
  gap: 5px;
}

.socialLink {
  text-decoration: none;
  background-color: #ffffff;
  height: 40px;
  width: 40px;
  border-radius: 13px;
  padding: 2px;
}

.icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: white;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
}

.facebook {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="%230088cc" d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg>');
}

.instagram {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%230088cc" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>');
}

.telegram {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="%230088cc" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm121.8 169.9l-40.7 191.8c-3 13.6-11.1 16.9-22.4 10.5l-62-45.7-29.9 28.8c-3.3 3.3-6.1 6.1-12.5 6.1l4.4-63.1 114.9-103.8c5-4.4-1.1-6.9-7.7-2.5l-142 89.4-61.2-19.1c-13.3-4.2-13.6-13.3 2.8-19.7l239.1-92.2c11.1-4 20.8 2.7 17.2 19.5z"/></svg>');
}

.twitter {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%230088cc" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>');
}

/* Security Section */
.securitySection {
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f5f5;
}

.securityInfo {
     display: flex;
    align-items: center;
    gap: 4px;
}

.securityIcon {
  width: 100px;
  height: 50px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
}

.securityText {
  display: flex;
  flex-direction: column;
}

.securityText strong {
  font-size: 16px;
  color: black;
}

.securityText span {
  font-size: 14px;
  color: black;
}

.gameIcons {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.gameIcon {
  height: 40px;           /* Adjust size as needed */
  width: auto;
  object-fit: contain;
}

/* Optional: Make icons smaller on mobile */
@media (max-width: 768px) {
  .gameIcon {
    height: 32px;
  }
  
  .gameIcons {
    gap: 12px;
    justify-content: center;
  }
}

.age18 {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="%23333"/><text x="12" y="16" text-anchor="middle" fill="white" font-size="12">18+</text></svg>');
}

.currency {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="%23333"/><text x="12" y="16" text-anchor="middle" fill="white" font-size="12">$</text></svg>');
}

.gt {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="%23333"/><text x="12" y="16" text-anchor="middle" fill="white" font-size="12">GT</text></svg>');
}

/* Copyright */
.copyright {
  text-align: center;
  font-size: 14px;
  color: black;
  padding: 5px 20px;
  background-color: #f5f5f5;
}

/* Responsive Design */
@media (max-width: 768px) {
  .footer {
    font-size: 12px;
  }

  .supportBar {
    justify-content: center;
    padding: 12px 9px;
  }

  .leftLinks {
    gap: 95px;
  }

  /* Hide desktop 24X7 Support on mobile */
  .supportTextDesktop {
    display: none;
  }

  .placeholder {
    display: none;
  }

  /* Show mobile 24X7 Support bar on mobile */
  .supportBarMobile {
    display: block;
    padding-top: 1px;
  }

  .securitySection {
    flex-direction: column;
    gap: 6px;
    text-align: center;
    padding: 7px;
  }

  .socialLink {
    padding: 7px;
  }

  .securityText {
    text-align: center;
  }

  .gameIcons {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .socialIcons {
    gap: 10px;
  }

  .icon {
    width: 25px;
    height: 25px;
  }

  .footerLink {
  color: white;
  text-decoration: underline;
  font-size: 14px;
  font-weight: 500;

  transition: opacity 0.3s;
}

  .securityText strong {
            font-size: 12px;
        align-self: flex-start;
        margin-top: 4px;
  }

  .securityText span {
    font-size: 12px;
  }

  .copyright {
    font-size: 12px;
  }
}