/* banner start */
#gameScript .banner {
  height: calc(100dvh - 2rem);
  overflow: hidden;
}

#gameScript .rig-content {
  position: relative;
  z-index: 1;
}

#gameScript .banner-form-title {
  position: relative;
  background-color: #fff;
  padding: 1.2rem 0rem;
  text-align: center;
  color: white;
  border-radius: 0.6rem 0.6rem 0rem 0rem;
  text-transform: uppercase;
}

#gameScript .banner-form-title::before {
  content: "";
  position: absolute;
  bottom: -18%;
  left: 46%;
  width: 24px;
  height: 24px;
  background-color: #fff;
  transform: rotate(45deg);
}

#gameScript .banner-form-title strong {
  font-size: 1.35rem;
  margin: 0;
  background: linear-gradient(
    90.99deg,
    rgba(0, 104, 199, 1) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#gameScript .banner-form {
  background: linear-gradient(
    148.22deg,
    rgba(0, 104, 199, 1) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  border-radius: 0rem 0rem 0.6rem 0.6rem;
  padding: 2rem 2rem;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  transition: 0.4s ease-in-out;
}

#gameScript .form-group {
  --pad: 0.75rem;
  position: relative;
}

#gameScript .form-group input {
  background-color: transparent;
  padding: var(--pad);
  border-radius: 0.3rem;
  border: 0.15rem solid var(--input-border-clr);
  width: 100%;
  outline: none;
  color: white;
}

#gameScript .form-group label {
  position: absolute;
  left: var(--pad);
  top: var(--pad);
  color: white;
  padding-inline: 0.3em;
  transition: transform 200ms;
  pointer-events: none;
  transform-origin: left;
  translate: -0.3em;
}

#gameScript .form-group input::placeholder {
  opacity: 0;
}

#gameScript .form-group input:focus + label,
#gameScript .form-group input:not(:placeholder-shown) + label {
  transform: translateY(calc(-50% - var(--pad))) scale(0.8);
  background-color: rgba(0, 104, 199, 1);
}

#gameScript .form-group input:focus {
  border: 0.15rem solid white;
}

#gameScript .flag-feild {
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem;
  border-radius: 0.25rem;
  border: 0.15rem solid var(--input-border-clr);
  outline-color: #fff;
}

#gameScript .iti .iti__selected-dial-code {
  color: white;
}

#gameScript .iti__arrow {
  margin-left: var(--iti-arrow-padding);
  width: 0;
  height: 0;
  border-left: var(--iti-triangle-border) solid transparent;
  border-right: var(--iti-triangle-border) solid #00000000;
  border-top: var(--iti-arrow-height) solid #fefafa;
}

#gameScript .flag-group input {
  border: none;
  background-color: transparent;
  outline: none;
  width: 100%;
  color: white;
}

#gameScript .flag-group input::placeholder {
  color: white;
}

#gameScript .message-feild textarea {
  width: 100%;
  padding: 0.5rem;
  border-radius: 0.25rem;
  border: 0.15rem solid var(--input-border-clr);
  outline-color: #fff;
  background-color: transparent;
  color: white;
}

#gameScript .message-feild textarea::placeholder {
  color: white;
}

#gameScript .banner-form-btn {
  width: 100%;
  padding: 0.5rem;
  border-radius: 0.25rem;
  background-image: linear-gradient(
    45deg,
    #0068c7 0%,
    #509cfb 51%,
    #0068c7 100%
  );
  transition: 0.5s;
  background-size: 200% auto;
  border: none;
  color: white;
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

#gameScript .banner-form-btn:hover {
  background-position: right center;
}

#gameScript .banner-form-btn:active {
  transform: scale(0.95);
}

/* banner end */

/* about start */

#gameScript .about {
  background-color: var(--card-clr);
  border: 2px solid var(--dark-clr);
  padding: 2.75rem 4rem;
  border-radius: 0.75rem;
}

#gameScript .about p {
  text-align: justify;
}

/* about end */

/* Top Performance Start */

#gameScript .gameCard {
  background-color: #fff;
  padding: 1rem;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#gameScript .gameCard p {
  margin: 0;
}

#gameScript .level {
  background-color: var(--lig-red);
  padding: 0.25rem 1rem;
  border-radius: 1rem;
  color: var(--red-clr);
  font-size: 0.85rem;
}

#gameScript .gamePopularity {
  border-radius: 100%;
  padding: 0.75rem 0.75rem;
  text-align: center;
  margin: 0 3.5rem;
}

#gameScript .popularityColor95 {
  background: linear-gradient(
    510deg,
    rgba(0, 104, 199, 1) 35%,
    rgba(0, 104, 199, 0) 59%
  );
}

#gameScript .popularityColor96 {
  background: linear-gradient(
    510deg,
    rgba(0, 104, 199, 1) 35%,
    rgba(0, 104, 199, 0) 70%
  );
}

#gameScript .popularityColor88 {
  background: linear-gradient(
    480deg,
    rgba(0, 104, 199, 1) 35%,
    rgba(0, 104, 199, 0) 50%
  );
}

#gameScript .popularityColor99 {
  background: linear-gradient(
    540deg,
    rgba(0, 104, 199, 1) 45%,
    rgba(0, 104, 199, 0) 60%
  );
}

#gameScript .popularityValue {
  background-color: #fff;
  border-radius: 100%;
  padding: 2rem 1rem;
}

/* Top Performance end */

/* Scroller start */

#gameScript .right-scroller {
  height: 100%;
  max-height: 500px;
  overflow-y: scroll;
  scrollbar-color: rgba(0, 104, 199, 1) rgba(253, 253, 253, 0.17);
  scrollbar-width: 300px;
  padding: 1rem;
}

#gameScript .right-scroller-border {
  border-left: 4px solid;
  border-image: linear-gradient(to bottom, #ffffff, #000000) 1;
  padding: 1.5rem;
}

#gameScript .scroller-inner-title-1,
#gameScript .scroller-inner-title-2,
#gameScript .scroller-inner-title-3,
#gameScript .scroller-inner-title-4,
#gameScript .scroller-inner-title-5,
#gameScript .scroller-inner-title-6,
#gameScript .scroller-inner-title-7 {
  position: relative;
  color: var(--dark-clr);
}

#gameScript .scroller-inner-title-1::before,
#gameScript .scroller-inner-title-2::before,
#gameScript .scroller-inner-title-3::before,
#gameScript .scroller-inner-title-4::before,
#gameScript .scroller-inner-title-5::before,
#gameScript .scroller-inner-title-6::before,
#gameScript .scroller-inner-title-7::before {
  content: "";
  visibility: visible;
  position: absolute;
  top: 10%;
  width: 20px;
  height: 20px;
  background-color: var(--dark-clr);
  border-radius: 100%;
}

#gameScript .scroller-inner-title-1::before {
  left: -21%;
}

#gameScript .scroller-inner-title-2::before {
  left: -10.5%;
}

#gameScript .scroller-inner-title-3::before {
  left: -11%;
}

#gameScript .scroller-inner-title-4::before {
  left: -12%;
}

#gameScript .scroller-inner-title-5::before {
  left: -10.5%;
}

#gameScript .scroller-inner-title-6::before {
  left: -11%;
}

#gameScript .scroller-inner-title-7::before {
  left: -21%;
}

/* Scroller end */

/* carosual format start */
/* Card container styling */

#gameScript .card-custom {
  max-width: 600px;
  margin: 2rem auto;
  padding: 1.5rem 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
  background: #fff;
}

/* Carousel control buttons styling */
#gameScript .carousel-control-prev {
  width: 40px;
  top: -7%;
  left: calc(96% - 100px);
  height: 40px;
  border-radius: 50%;
  background-color: var(--button-bg-clr);
  opacity: 1;
  transition: background-color 0.3s ease;
}

#gameScript .carousel-control-next {
  width: 40px;
  top: -7%;
  right: 5%;
  height: 40px;
  border-radius: 50%;
  background-color: var(--button-bg-clr);
  opacity: 1;
  transition: background-color 0.3s ease;
}

#gameScript .carousel-control-prev:hover,
#gameScript .carousel-control-next:hover {
  background-color: var(--dark-clr);
}

#gameScript .carousel-control-prev-icon,
#gameScript .carousel-control-next-icon {
  width: 20px;
  height: 20px;
}

/* Text styling inside card */

#gameScript .highlighted {
  background-color: var(--card-clr);
  padding: 1rem;
  border-radius: 0.5rem;
}

/* carosual format end */

/* Tabs Format start */
#gameScript .content-show-btn {
  border: 2px solid var(--dark-clr);
  padding: 0.5rem 2rem;
  border-radius: 2rem;
  font-weight: 500;
  font-size: 1rem;
}

#gameScript .content-show-btn.active {
  background-color: var(--dark-clr);
  color: white;
}

#gameScript .four-box {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  border: 1px solid black;
}

#gameScript .custom-box-width {
  width: 24%;
}

#gameScript .content-showed-box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
  padding: 1.5rem;
  border-radius: 0.75rem;
  height: 100%;
  background-color: var(--card-clr);
  transition: 0.4s ease-in-out;
}

#gameScript .content-showed-box:hover {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/* Tabs Format end */

/* icons Fromat start */
#gameScript .small-image-box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  text-align: center;
  background-color: var(--card-clr);
  padding: 1rem;
  border-radius: 1rem;
  border: 2px solid transparent;
  transition: 0.4s ease-in-out;
}

#gameScript .small-image-box:hover {
  border: 2px solid var(--dark-clr);
}

/* icons Fromat end */

/* Single shadow box start */

#gameScript .shadow-box {
  box-shadow: -0.0625rem 0.4375rem 0.9375rem 0rem rgba(0, 0, 0, 0.1),
    -0.25rem 1.75rem 1.75rem 0rem rgba(0, 0, 0, 0.09),
    -0.5625rem 3.9375rem 2.375rem 0rem rgba(0, 0, 0, 0.05),
    -1rem 6.9375rem 2.8125rem 0rem rgba(0, 0, 0, 0.01),
    -1.625rem 10.875rem 3.0625rem 0rem rgba(0, 0, 0, 0);
  border-radius: 0.5rem;
  padding: 1.2rem;
}

/* Single shadow box end */

/* Background hover effect start */

#gameScript .custom-bg-hover-effect {
  padding: 1rem;
  height: 100%;
  position: relative;
}

#gameScript .custom-bg-hover-effect::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1%;
  height: 100%;
  background-color: var(--dark-clr);
  border-radius: 0.5rem;
  z-index: -1;
  transition: 0.4s ease-in-out;
}

#gameScript .custom-bg-hover-effect:hover::after {
  width: 100%;
  background-color: var(--card-clr);
}

/* Background hover effect end */

/* White-box hover effect start */

#gameScript .white-shadow-box {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 0.5rem;
  transition: 0.4s ease-in-out;
}

#gameScript .white-shadow-box:hover {
  background-color: #fff;
  box-shadow: -0.375rem 0.875rem 1.625rem 0rem rgba(168, 153, 153, 0.05);
}

/* White-box hover effect end */

/* Icons links start */

#gameScript .linkContent {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 1rem;
  border-radius: 0.5rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  transition: 0.4s ease-in-out;
}

#gameScript .linkicon {
  transform: scale(1);
  transition: transform 0.4s ease-in-out;
}

#gameScript .linkicon img {
  filter: invert(25%) sepia(99%) saturate(2000%) hue-rotate(189deg)
    brightness(90%) contrast(101%);
  transition: 0.4s ease-in-out;
}

#gameScript .linkContent:hover .linkicon {
  transform: scale(1.2);
}

#gameScript .linkContent:hover .linkicon img {
  filter: none;
}

#gameScript .linkContent:hover {
  background-color: var(--card-clr);
}

/* Icons links end */

/* Curved blue box tr start */

#gameScript .curved-blue-box-tr {
  background-color: var(--card-clr);
  padding: 1.5rem;
  border-radius: 2.5rem 2.5rem 0 0;
}

#gameScript .curved-box-content {
  height: 100%;
  padding: 1rem;
  text-align: center;
  border-radius: 1.5rem;
  transition: 0.4s ease-in-out;
}

#gameScript .curved-box-content:hover {
  background-color: #fff;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1),
    0px 10px 10px 0px rgba(0, 0, 0, 0.09), 0px 23px 14px 0px rgba(0, 0, 0, 0.05),
    0px 41px 17px 0px rgba(0, 0, 0, 0.01), 0px 65px 18px 0px rgba(0, 0, 0, 0);
}

/* Curved blue box tr end */

/* Shadow hover effect start */

#gameScript .shadow-hover-effect {
  height: 100%;
  padding: 1rem;
  background-color: var(--card-clr);
  border-radius: 0.75rem;
  transition: 0.4s ease-in-out;
}

#gameScript .shadow-hover-effect:hover {
  background-color: #fff;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1),
    0px 10px 10px 0px rgba(0, 0, 0, 0.09), 0px 23px 14px 0px rgba(0, 0, 0, 0.05),
    0px 41px 17px 0px rgba(0, 0, 0, 0.01), 0px 65px 18px 0px rgba(0, 0, 0, 0);
}

/* Shadow hover effect end */

/* right content start */

#gameScript .right-static-content {
  padding: 1rem;
  border-radius: 1rem;
  background-color: var(--backgr-clr-3);
}

/* right content end */

/* Develpment start */

#gameScript .development-box {
  border: 1px solid black;
  border-radius: 0.5rem;
  padding: 1.75rem 1.5rem;
  position: relative;
  height: 100%;
  transition: 0.4s ease-in-out;
}

#gameScript .development-number {
  top: -15%;
  position: absolute;
  border: 1px solid black;
  border-radius: 100%;
  color: #000;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  background-color: var(--backgr-clr-3);
  transition: 0.4s ease-in-out;
}

#gameScript .development-box:hover .development-number {
  background-color: var(--dark-clr);
  color: #fff;
}

#gameScript .development-box:hover {
  background-color: #fff;
}

#gameScript .height-mention {
  height: 500px;
}

#gameScript .gif {
  position: relative;
  transform: rotate(-30deg);
  height: 100%;
}

#gameScript .plane-text {
  position: absolute;
  bottom: 25%;
  right: 48%;
  transform: rotate(40deg);
}

#gameScript .animation {
  animation: imageanimate 6s linear infinite;
}

@keyframes imageanimate {
  0% {
    transform: translate(0px, 0px) rotate(-20deg);
  }

  50% {
    transform: translate(34px, 20px) rotate(-20deg); /* approx. 30° direction */
  }

  100% {
    transform: translate(0px, 0px) rotate(-20deg);
  }
}

/* Develpment end */

/* Cta start */
#gameScript .background-banner {
  position: relative;
}

#gameScript .bg-width {
  width: 1300px;
  height: 350px;
  object-fit: contain;
  border-radius: 0rem;
}

#gameScript .ilustrate-bcgame {
  position: absolute;
  bottom: -10%;
  left: -4%;
}

#gameScript .ilustrate-bcgame-nxt {
  position: absolute;
  bottom: 2%;
  left: 0%;
}

#gameScript .ilustrate-aviatorgame {
  position: absolute;
  bottom: 2%;
  left: 0%;
}

#gameScript .ilustrate-bcgame img {
  width: 50%;
}

#gameScript .content-bcgame {
  position: absolute;
  top: 2%;
  right: 6%;
  width: 60%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1rem;
  color: white;
}

#gameScript .content-bcgame-nxt {
  position: absolute;
  top: 2%;
  right: 6%;
  width: 75%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1rem;
  color: white;
}

#gameScript .content-aviatorgame {
  position: absolute;
  top: 2%;
  right: 8%;
  width: 60%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1rem;
  color: white;
}

#gameScript .cta-btn {
  border: 2px solid transparent;
  background-color: rgb(16, 96, 194);
  color: white;
  font-size: 0.95rem;
  padding: 0.4rem 2.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
  border: 2px solid transparent;
  transition: 0.3s ease-in-out;
}

#gameScript .cta-btn:hover {
  border: 2px solid rgb(16, 96, 194);
  transform: scale(1.1);
}

/* Cta end */

/* Faq start */

#faq .faq-list {
  position: relative;
  /* height: 400px;
  overflow-y: scroll; */
}

#faq .faq-list h2 {
  color: #1a73e8;
  margin-bottom: 20px;
}

#faq .faq-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: bold;
  color: #000;
  padding: 10px 10px 10px 30px;
  position: relative;
  transition: 0.3s ease-in-out;
}

#faq .faq-item.active {
  padding-left: 3.25rem;
  color: #1a73e8;
}

#faq .faq-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  /* background: url('https://img.icons8.com/ios-filled/50/1a73e8/arrow.png') no-repeat center center; */
  background: url("/img/devprog-img/ico/faqArrow.png") no-repeat center center;
  background-size: contain;
  /* transform: translateY(50%); */
  transition: top 0.3s ease;
}

#faq .faq-answer {
  background-color: #dceeff;
  padding: 30px;
  border-radius: 12px;
  font-size: 16px;
  color: #333;
  font-weight: 500;
  line-height: 1.6;
  width: 100%;
  display: none;
}

[id^="faq-answer-"]:empty {
  display: none !important;
  padding: 0 !important;
}

/* faq end */