.hero-wrap {
  display: inline-block;
  position: relative;
  width: 100%
}

.hero-wrap:before {
  background-image: url(/referral/resources/images/Component%201.svg);
  background-position: 100% 100%;
  background-size: cover;
  content: "";
  height: 115px;
  left: 0;
  position: absolute;
  top: 0;
  width: 320px
}

.hero-logo {
  left: 20px;
  position: absolute;
  top: 10px
}

.hero-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}

.hero-cbtn a {
  align-items: center;
  background: #fff;
  border-radius: 100px;
  display: flex;
  padding: 14px 24px;
  justify-content: center;
}
.hero-cbtn a:hover {
  opacity: 0.7;
}
.hero-cbtn.orange a {
  background: #F6AE2D;
}
.hero-cbtn.orange .hero-cbtn-rgt {
  padding: 0;
}

.hero-cbtn-rgt p {
  color: #414c53;
  font-size: 14px;
  font-weight: 400;
  margin: 0!important
}

.hero-cbtn-rgt h5 {
  font-size: 18px;
  margin: 0!important
}

.hero-cbtn-rgt {
  padding-left: 10px
}

.hero-btn {
  padding-top: 15px
}

.hero-otr {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 120px
}

.hero-left {
  width: 55%
}

.hero-rgt {
  width: 45%
}

.hero-stitle h6 {
  color: #fff;
  letter-spacing: 3.2px;
  margin-bottom: 15px!important;
  text-transform: uppercase
}

.hero-header h1 {
  color: #fff;
  font-weight: 400;
  line-height: 1.2
}

.hero-header h1 b {
  font-weight: 600
}

.hero-txt p {
  color: #fff;
  font-size: 20px
}

.hero-rgt-box {
  background: #fff;
  border-radius: 20px;
  float: right;
  max-width: 400px
}

.hero-rgt-top {
  align-items: end;
  background-color: #b6deef;
  border-radius: 20px 20px 0 0;
  display: flex;
  filter: drop-shadow(0 0 11.831999778747559px rgba(0,0,0,.13));
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20px;
  position: relative
}

.hero-rgt-top:before {
  background-image: url(/referral/resources/images/green-shape.svg);
  background-position: 0 100%;
  border-radius: 0 20px 0 0;
  content: "";
  height: 120px;
  position: absolute;
  right: 0;
  top: 0;
  width: 120px
}

.hero-rtop-icon {
  bottom: -20px;
  position: relative
}

.hero-rtop-lft {
  position: relative;
  width: 65%
}

.hero-rtop-lft:before {
  background: #36a1cf;
  content: "";
  height: 84%;
  left: -20px;
  position: absolute;
  width: 3px
}

.hero-rtop-rgt {
  width: 35%
}

.hero-rtop-tlt h5 {
  color: #248bb8;
  margin: 0!important;
  padding-bottom: 5px;
  text-transform: uppercase
}

.hero-rtop-txt p {
  color: #248bb8;
  font-size: 16px;
  margin-bottom: 10px!important
}

.hero-rgt-form {
  padding: 20px 30px 40px;
  position: relative
}

.hero-rgt-form form input[type=email],.hero-rgt-form form input[type=file],.hero-rgt-form form input[type=number],.hero-rgt-form form input[type=password],.hero-rgt-form form input[type=search],.hero-rgt-form form input[type=tel],.hero-rgt-form form input[type=text],.hero-rgt-form form select,.hero-rgt-form form textarea {
  background-position: 12px;
  background-repeat: no-repeat;
  background-size: 18px;
  border: 1px solid #ccc!important;
  display: inline-block;
  padding-left: 40px;
  position: relative
}

.hero-rgt-form input.hs-button.primary.large {
  background: #82c546;
  border-radius: 8px;
  box-shadow: 0 0 16px 0 #82c546;
  width: 100%
}

.hero-rgt-form .hs_firstname input {
  background-image: url(/referral/resources/images/group-regular.svg)
}

.hero-rgt-form .hs_email input {
  background-image: url(/referral/resources/images/mail.svg)
}

.hero-rgt-form .hs_school input {
  background-image: url(/referral/resources/images/building.svg);
  background-position: 16px 12px!important;
  background-size: 14px!important
}

.hero-rgt-form .hs_location select {
  background-image: url(/referral/resources/images/globe.svg);
  font-style: italic
}

.hero-rgt-form ::-webkit-input-placeholder {
  font-style: italic!important
}

.hero-rgt-form :-ms-input-placeholder {
  font-style: italic!important
}

.hero-rgt-form ::placeholder {
  font-style: italic!important
}

.hero-wrap {  
  background-image: url(/referral/resources/images/referral-banner.webp);
  background-size: cover;
  background-position: center top;

    padding-top: 30px;
  padding-right: 40px;
  padding-bottom: 110px;
  padding-left: 28px;
  margin-bottom: 0px;
} 

.dnd_area-row-0-force-full-width-section > .row-fluid {
  max-width: none !important;
}
.dnd_area-row-1-background-color {
  background-color: rgba(255, 255, 255, 1) !important;
}
.dnd_area-row-1-force-full-width-section > .row-fluid {
  max-width: none !important;
}
.dnd_area-row-2-background-color {
  background-color: rgba(236, 249, 255, 1) !important;
}
.dnd_area-row-3-force-full-width-section > .row-fluid {
  max-width: none !important;
}
.dnd_area-row-4-background-color {
  background-color: rgba(255, 255, 255, 1) !important;
}
.dnd_area-row-4-max-width-section-centering > .row-fluid {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* HubSpot Non-stacked Media Query Styles */
@media (min-width:768px) {
  .dnd_area-row-1-vertical-alignment > .row-fluid {
    display: -ms-flexbox !important;
    -ms-flex-direction: row;
    display: flex !important;
    flex-direction: row;
  }
  .cell_1707175217261-vertical-alignment {
    display: -ms-flexbox !important;
    -ms-flex-direction: column !important;
    -ms-flex-pack: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  .cell_1707175217261-vertical-alignment > div {
    flex-shrink: 0 !important;
  }
}
/* HubSpot Styles (default) */
.dnd_area-row-0-padding {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.dnd_area-row-1-padding {
  padding-bottom: 30px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.dnd_area-row-1-hidden {
  display: block !important;
}
.dnd_area-row-2-padding {
  padding-bottom: 80px !important;
}
.dnd_area-row-3-padding {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.dnd_area-row-3-hidden {
  display: none !important;
}
.dnd_area-row-4-padding {
  padding-top: 20px !important;
  padding-bottom: 0px !important;
  padding-left: 16px !important;
}
.cell_1692711808481-padding {
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.cell_1707175217261-hidden {
  display: flex !important;
}
.cell_16923488582702-padding {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.footer-row-0-padding {
  padding-top: 20px !important;
  padding-bottom: 10px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.footer-column-1-row-0-margin {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}
.orange-info-btn {
  padding-left: 12px;
  min-width: 150px;
}

/* HubSpot Styles (mobile) */
@media (max-width: 767px) {
  .dnd_area-row-2-padding {
    padding-bottom: 80px !important;
  }
}



@media (max-width: 1080px) {
  .hero-wrap {   
    padding-top: 20px;
  padding-right: 0px;
  padding-bottom: 100px;
  padding-left: 0px;

  } 
}

@media (max-width: 767px) {
  .hero-wrap {   
    padding-top: 10px;
  padding-right: 0px;
  padding-bottom: 80px;
  padding-left: 0px;

  } 

}

@media (max-width: 1080px) {
  .hero-left,.hero-rgt {
      width:100%
  }

  .hero-rgt-box {
      float: none;
      margin: 0 auto;
      max-width: 400px
  }

  .hero-rgt {
      padding-top: 40px
  }
}

@media (max-width: 767px) {
  .hero-rgt-top {
      padding:20px 20px 0
  }

  .hero-wrap:after {
      background-color: #000;
      content: "";
      height: 100%;
      left: 0;
      opacity: .4;
      position: absolute;
      top: 0;
      width: 100%
  }

  .hero-top {
      display: inline-block;
      position: relative;
      z-index: 1
  }

  .hero-cbtn {
      margin-top: 120px
  }
  .mobile-orange {
    margin-top: 0px;
    padding-left: 250;
  }
  .do-not-call-us{
    display:none;
  }

  .hero-otr {
      padding-top: 50px;
      position: relative;
      text-align: center;
      z-index: 1
  }

  .hero-wrap:before {
      z-index: 1
  }

  .hero-logo img {
      max-width: 170px!important
  }

  .hero-wrap:before {
      height: 90px;
      width: 250px
  }

  .hero-logo {
      left: 10px;
      position: absolute;
      top: 5px
  }

  .hero-txt p {
      font-size: 16px;
      line-height: 1.3
  }
}



@media (max-width: 479px) {
  .hero-txt p {
      font-size:14px
  }
}