/*
 * Hero Banner Component Styles
 *
 * This file contains all styles specific to the hero-banner component.
 * Includes responsive styles and partner logo slider styles.
 */

/* ============================================
   HERO BANNER TWO - MAIN STYLES
   ============================================ */

.hero-banner-two {
  z-index: 1;
  padding-top: 170px;
}

.hero-banner-two .hero-heading {
  font-size: 100px;
  line-height: 1em;
  font-weight: 900;
}

.hero-banner-two .hero-heading span {
  z-index: 1;
}

.hero-banner-two .hero-heading span svg {
  filter: brightness(0) saturate(100%) invert(84%) sepia(39%) saturate(582%) hue-rotate(17deg) brightness(93%) contrast(96%);
  position: absolute;
  width: 100%;
  bottom: -35%;
  left: 0;
  z-index: -1;
}

/* Hero Banner Specific Button Override */
.hero-banner-two .btn--waitlist-dark {
  margin: 0 auto;
  padding: 10px 70px;
}

/* Form Styles (if used in hero banner) */
.hero-banner-two form {
  max-width: 588px;
  height: 70px;
  box-shadow: 0px 10px 20px rgba(8, 32, 26, 0.04);
  border-radius: 50px;
}

.hero-banner-two form input {
  font-size: 18px;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  background: #fff;
  border: none;
  padding: 0 150px 0 35px;
}

.hero-banner-two form button {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 50px;
}

/* Shape Elements */
.hero-banner-two .shape_01 {
  top: 22%;
  left: 7%;
  width: 3.1%;
  min-width: 30px;
  animation: rotated 50s infinite linear;
}

.hero-banner-two .shape_02 {
  top: 40%;
  right: 7%;
  width: 1.8%;
  min-width: 22px;
  animation: rotated 48s infinite linear;
}

.hero-banner-two .shape_03 {
  top: 36%;
  left: 0;
  width: 15.57%;
}

.hero-banner-two .shape_04 {
  top: 49%;
  right: 0;
  width: 15%;
}

/* ============================================
   PARTNER LOGO SECTION - HERO BANNER SPECIFIC
   ============================================ */

/* Note: Base .partner-logo-one styles remain in main style.css as they're used elsewhere */

.partner-slider-one img {
  filter: grayscale(1) invert(40%) sepia(80%) saturate(1770%) hue-rotate(81deg) brightness(0%) contrast(90%);
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */

/* XL Screens (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-banner-two .hero-heading {
    font-size: 100px;
    line-height: 0.9em;
  }
}

/* Large Screens (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-banner-two .hero-heading {
    font-size: 68px;
  }
}

/* Medium Screens (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .hero-banner-two .hero-heading {
    font-size: 45px;
    line-height: 1.12em;
  }
}

/* Small Screens (max-width: 767px) */
@media (max-width: 767px) {
  .hero-banner-two .hero-heading {
    font-size: 40px;
    line-height: 1.12em;
  }

  .hero-banner-two .shape_03,
  .hero-banner-two .shape_04 {
    display: none !important;
  }
}

/* Extra Small Screens (max-width: 575px) */
@media (max-width: 575px) {
  .hero-banner-two form {
    height: 60px;
  }
}