.hero-redesign,
.bg-img {
  min-height: 520px !important;
  height: auto !important;
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(105deg, rgba(7, 14, 35, 0.96) 0%, rgba(9, 32, 82, 0.88) 46%, rgba(15, 82, 210, 0.5) 100%),
    url("/static/media/banner.6d53d867e09fbf110a29.png") !important;
  background-position: center right !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.bg-img::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.7) 46%, transparent 100%);
  opacity: 0.55;
}

.overlaybanner {
  position: relative !important;
  min-height: 520px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  background: linear-gradient(90deg, rgba(6, 13, 32, 0.84), rgba(6, 13, 32, 0.18)) !important;
  background-attachment: scroll !important;
}

.overlaybanner::before {
  display: none !important;
}

.banner-head {
  min-height: 520px;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 18px !important;
  margin-top: 0 !important;
  padding: 72px 0 82px;
  max-width: 720px;
}

.banner-head::before {
  content: "Compare forex brokers with confidence";
  z-index: 2;
  max-width: 680px;
  color: #ffffff;
  font-size: 58px;
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: 0;
}

.banner-head::after {
  content: "Regulated brokers  |  Fee comparison  |  Expert reviews";
  z-index: 2;
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  color: #d8e7ff;
  background: rgba(255, 255, 255, 0.09);
  font-size: 14px;
  font-weight: 600;
  backdrop-filter: blur(12px);
}

.banner-head .mb-p {
  z-index: 2 !important;
  max-width: 610px !important;
  margin: 0 !important;
  color: #e9f1ff !important;
  text-align: left !important;
  font-size: 19px !important;
  line-height: 1.68 !important;
  text-shadow: none !important;
}

.banner-head .link-btn {
  z-index: 3 !important;
  justify-content: flex-start !important;
  margin-top: 10px;
}

.banner-head .theme-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(120, 170, 255, 0.55) !important;
  background: #0b5cff !important;
  color: #ffffff !important;
  box-shadow: 0 14px 34px rgba(11, 92, 255, 0.34);
  text-decoration: none !important;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.banner-head .theme-btn:hover {
  background: #0048d8 !important;
  box-shadow: 0 18px 40px rgba(11, 92, 255, 0.42);
  transform: translateY(-2px);
}

.banner-head .faiz1 {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 991px) {
  .hero-redesign,
  .bg-img,
  .overlaybanner {
    min-height: 560px !important;
  }

  .banner-head {
    min-height: 560px;
    padding: 64px 0;
  }

  .banner-head::before {
    font-size: 44px;
    max-width: 620px;
  }
}

@media (max-width: 575px) {
  .hero-redesign,
  .bg-img,
  .overlaybanner {
    min-height: 600px !important;
    background-position: 68% center !important;
  }

  .banner-head {
    min-height: 600px;
    padding: 48px 0 58px;
  }

  .banner-head::before {
    font-size: 34px;
    line-height: 1.12;
  }

  .banner-head::after {
    font-size: 12px;
    line-height: 1.45;
  }

  .banner-head .mb-p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
}