/********************** starting css for new hero section *********************/
/* section.hero-banner{
  height: 100vh;
} */
section.hero-banner .slick-prev{
  left: 25px;
}

section.hero-banner .slide-outer .slide-flex-wrapper{
    height: 100%;
    position: relative;
}
/* section.hero-banner .slide-outer .slide-container{
    position: absolute;
    bottom: 133px;
} */

section.hero-banner .hero-form-wrapper{
    max-width: 1000px;
    padding: 24px;
    backdrop-filter: blur(15px);
    margin: 0 auto;
    border-bottom: 2px solid #fff;
    position: absolute;
    bottom: 35%;
    left: 50%;
    transform: translate(-50%, 30%);
    width: 100%;
    z-index: 99;
}

section.hero-banner .hero-form-wrapper .inner-div h4{
    margin: 0;
    margin-bottom: 24px;
    text-align: left;
    font-size: 1rem;
    font-weight: 400;
    text-transform: capitalize;
}

section.hero-banner .hero-form-wrapper .inner-div.bg-default_theme{
    padding: 24px;
    background-color: #fff;
}

.bg-default_theme .hero-title{
  color:#000;
}

section.hero-banner .hero-form-wrapper .inner-div{
    padding: 24px;
}

section.hero-banner .hero-form-wrapper .inner-div .form-container{
    display: flex;
    gap: 24px;
    width: 100%;
}


  section.hero-banner .hero-form-wrapper .flp-dropdown,
  section.hero-banner .hero-form-wrapper .flp-dropdown .flp-dropdown-content  {
    width: 100%;
  }

  section.hero-banner .hero-form-wrapper .flp-dropdown .flp-dropdown-content .sqft-wrap, 
  section.hero-banner .hero-form-wrapper .flp-dropdown .flp-dropdown-content .price-wrap{
    max-width: unset;
    width: 100%;
  }

  section.hero-banner .hero-form-wrapper .flp-dropdown .flp-dropdown-content#dropdownContentPrice,
  section.hero-banner .hero-form-wrapper .flp-dropdown .flp-dropdown-content#dropdownContentSqFt
  {
    padding: 10px 20px;
  }

  
  section.hero-banner .hero-form-wrapper .flp-dropdown .flp-dropdown-content button{
    padding-left: 0;
  }

  section.hero-banner .hero-form-wrapper .flp-dropdown button.flp-dropdown-btn  
{
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid;
  padding: .75rem 1rem;
  padding-left: 24px;
  font-size: 0.875rem;
  border-radius: 0px;
  text-align: left;
  font-size: 1rem;
}

section.hero-banner .form-group i.swi {
    left: 2px;
}

section.hero-banner .hero-form-wrapper .submit-button{
    width: 40px;
    height: 40px;
    border: 0px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

section.hero-banner .hero-form-wrapper .dropdown-toggle:before{
  border-top: 2px solid #000;
    border-left: 2px solid #000;
}

 section.hero-banner .bottom-section-link-wrapper .bottom-section-link{
  position: absolute;
    bottom: 33px;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    flex-direction: row-reverse;
    background-color: transparent;
    align-items: center;
    gap: 20px;
    z-index: 98;
 }

  section.hero-banner .bottom-section-link-wrapper .bottom-section-link .link-wrapper h4{
    font-size: 1.25rem;
    text-transform: capitalize;
    font-weight: 500;
    letter-spacing: normal;
  }

  section.hero-banner .video-wrapper {
  height: 100%;
  position: relative;
  overflow: hidden;
}

section.hero-banner .video-wrapper iframe#hero_vimeo_bg,
section.hero-banner .video-wrapper iframe.youtube-video {
  height: 120vw;
  width: 120%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: -1;
}
section.hero-banner .video-wrapper .video-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  z-index: 10;
}

  section.hero-banner .pattern {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
  }

  section.hero-banner .pattern img{
    height: 100%;
    opacity: 0.3;
  }

  section.hero-banner .slide-outer,
  section.hero-banner .slide-bg,
  section.hero-banner .slide-bg img
  {
    height: 100%;
  }

  section.hero-banner .slide-overlay, .banner-overlay::before{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    content: '';
    background: linear-gradient(180.15deg, rgba(17, 17, 17, 0) 80.97%, rgba(17, 17, 17, 0.8) 97.25%);

  }

  section.hero-banner .slick-arrow{
    width: 3vw;
    height: 3vw;
  }

  section.hero-banner button.slick-next {
    right: 25px;
}

  section.hero-banner .slick-prev:before, 
  section.hero-banner .slick-next:before{
    font-size: 30px;
  }

  /* -----------Content HERO---------------- */
    section.hero-banner.content-hero .slide-bg.desktop-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    section.hero-banner.content-hero .slide-overlay {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    section.hero-banner.content-hero .slide-flex-wrapper {
      height: 100%;
      z-index: 9;
      position: relative;
      padding: 150px 0;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
    }

    section.hero-banner.content-hero .slide-content{
      text-align: left;
    }

    section.hero-banner.content-hero .slide-flex-wrapper h1,
    section.hero-banner.content-hero .video-content h1
    {
      margin-top: 0;
      font-size: 5rem;
      line-height: 1.2;
      margin-bottom: .6875rem;
      text-transform: capitalize;
    }
    section.hero-banner.content-hero .hero-content p{
      font-size: 1.25rem;
      line-height: 1.2;
    }
    section.hero-banner.content-hero .slide-flex-wrapper h2,
    section.hero-banner.content-hero .video-content h2
    {
      font-size: 2rem;
      margin-bottom: .6875rem;
      margin-top: 0;
      text-transform: capitalize;
    }

    section.hero-banner.content-hero .slide-flex-wrapper .hero-paragraph p,
    section.hero-banner.content-hero .video-content .hero-paragraph p
    {
      font-size: 1.25rem;
      margin-bottom: .6875rem;
      margin-top: 0;
      line-height: normal;
      margin-bottom: 32px;
    }

    section.hero-banner.content-hero .slider-container .slick-dots > li button, 
    section.hero-banner.content-hero .slick-dots li button:before{
      display: block;
    }

    section.hero-banner.content-hero .slick-arrow{
      display: none !important;
    }

    section.hero-banner.content-hero .slider-container .slick-dots{
      width: 65vw;
      max-width: 1280px;
      left: 50%;
      transform: translateX(-50%);
      bottom: 5vw;
      display: block;
      text-align: left;
    }

    section.hero-banner.content-hero .slider-container .slick-dots > li button:before{
      font-size: 16px;
    }

    section.hero-banner.content-hero .slick-dots li.slick-active button:before{
      color: #d9d9d9;
    }

    section.hero-banner.content-hero .slick-dots li button:before{
      color: #d9d9d9;
    }

    section.hero-banner.content-hero .section-buttons a.btn{
      font-size: 14px;
      box-shadow: none;
      line-height: normal;
      padding: 16px 24px;
      text-transform: capitalize;
      min-width: unset;
      letter-spacing: unset;
      font-weight: 400;
      margin: 0;
      margin-right: 5px;
    }

.bottom-section-link-wrapper{
  position:relative;
  z-index: 99;
}
  /************* ending css for new hero section *******************/

  @media screen and (max-width: 1440px){
    section.hero-banner.content-hero h1.hero-title{
      font-size: 3.5rem;
    }
  }

  @media screen and (max-width: 1366px) {
   section.hero-banner .slick-prev, section.hero-banner .slick-next{
      top: 45%;
    }
    section.hero-banner .hero-form-wrapper{
      width: 85%;
    }
  }


  @media screen and (max-width: 1024px){
    section.hero-banner .form-group{
      flex: unset;
    }

    section.hero-banner .form-group {
        width: 47%;
    }

    section.hero-banner .hero-form-wrapper .inner-div .form-container{
      flex-wrap: wrap;
    }

    section.hero-banner .hero-form-wrapper .inner-div h4{
      margin-bottom: 14px;
    }

    section.hero-banner .hero-form-wrapper .submit-button svg {
      display: none;
    }

    section.hero-banner .search {
      display: block;
      margin-bottom: 0px;
    }
        section.hero-banner .hero-form-wrapper .submit-button {
        width: 100% !important;
        height: unset !important;
        border-radius: 4px !important;
        padding: 8px 16px;
        font-size: 0.875rem;
    }

    section.hero-banner.content-hero h1.hero-title {
      font-size: 2.8rem;
    }

    section.hero-banner.content-hero .slide-flex-wrapper h2, 
    section.hero-banner.content-hero .video-content h2{
      font-size: 1.8rem;
    }
  }

  @media screen and (max-width: 992px) {

  section.hero-banner .hero-form-wrapper{
      
      bottom: 50%;
      left: 50%;
      transform: translate(-50%, 50%);
    }

    /* section.hero-banner .form-group {
        width: 47%;
    } */

    section.hero-banner .slick-prev:before, section.hero-banner .slick-next:before{
      font-size: 35px;
    }
    section.hero-banner .slick-prev {
      left: 15px;
    }
    section.hero-banner .slick-next{
      right: 15px;
    }

    section.hero-banner.content-hero h1.hero-title {
      font-size: 2.5rem;
    }

    section.hero-banner.content-hero .slide-flex-wrapper .container {
        width: calc(100% - 50px);
    }

    section.hero-banner.content-hero .slide-content,
    section.hero-banner.content-hero .video-content,
    section.hero-banner.content-hero .slider-container .slick-dots
    {
      width: auto;
      left: 5%;
      transform: unset;
    }

}

@media screen and (max-width: 767px) {

section.hero-banner .hero-form-wrapper{
    position: static;
    transform: unset;
    margin-top: -15%;
    width: 95%;
    padding: 12px;
  }

  section.hero-banner .hero-form-wrapper .inner-div{
    padding: 16px;
  }
  section.hero-banner.content-hero .hero-content p{
    font-size: 1rem;
  }
  section.hero-banner .form-group {
        width: 100%;
    }

        section.hero-banner .slick-next {
        right: 25px;
    }
    section.hero-banner .slick-prev:before, section.hero-banner .slick-next:before {
        font-size: 30px;
    }

    section.hero-banner.content-hero{
      position: relative;
      height: 100vh;
      min-height: 50vw;
    }

    section.hero-banner.content-hero .slider,
    section.hero-banner.content-hero .slick-list,
    section.hero-banner.content-hero .slick-slider .slick-track,
    section.hero-banner.content-hero .slick-slide
    {
      height: 100%;
    }

    section.hero-banner.content-hero .slide-flex-wrapper,
    section.hero-banner.content-hero .video-wrapper .video-container
    {
      position: absolute;
      transform: translateY(-50%);
      top: 50%;
      padding: 0;
    }

    section.hero-banner.content-hero .video-wrapper .video-container{
      padding: 0 20px;
    }

    section.hero-banner.content-hero .slide-flex-wrapper .container {
      width: 100%;
    }

    

}