/*@font-face {
  font-family: TommyBlack;
  src: url('/assets/fonts/made_tommy/MADE TOMMY Black_PERSONAL USE.otf')
    format('opentype');
}

@font-face {
  font-family: Tommy;
  src: url('/assets/fonts/made_tommy/MADE TOMMY Regular_PERSONAL USE.otf')
    format('opentype');
}*/

/*@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

p {
  font-family: 'Inter', sans-serif;
}
.swiper .swiper-scrollbar .swiper-scrollbar-drag::after {
  content: url('../images/icons/haven_colorless_icon.svg');
  display: inline-block;
  width: 6px;
  height: 6px;
  position: relative;
  top: -15px;
  z-index: 500 !important;
}

.swiper-scrollbar {
  background: #f2f2f2 !important;
}

.swiper .swiper-scrollbar .swiper-scrollbar-drag {
  background: transparent !important;
}

.swiper-scrollbar-horizontal {
  height: 3px !important;
}

.swiper {
  padding: 40px 0 !important;
}

.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  position: relative !important;
}

.notification-top {
  background-color: black; /*  background-image: url('../images/top-badge-bg-2.png') top-badge-bg*/
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.what-makes-us-unique {
  background-image: url('../images/purple_frame_jpg.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.vipPlanCard {
  background: #e8dbff;
  border-radius: 12px;
  background-image: url('../images/membership_bg_2.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.trialPlanCard {
  background: #e0dfdf;
  border-radius: 12px;
  background-image: url('../images/membership_bg_3.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#organization-form .inline-image-container .MuiTouchRipple-root button::after {
  background-image: url('../images/purple_frame.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.create-opps-bg {
  background-image: url('../images/create-opps-bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 144px;
}

@media screen and (max-width: 575px) {
  .create-opps-bg {
    height: 184px;
  }
}

.MuiCardContent-root .MuiGrid-root .inline-image-container button::after {
  content: url('../images/upload_cloud_icon.svg');
  width: 12px;
  height: 12px;
}

.landing-background {
  background: url('../images/landing_color_bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 900px;
}

.landing-bottom-section {
  background: url('../images/bg_landing_page_bottom_svg.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 100% !important;
  min-width: 100% !important;
}

@media screen and (max-width: 1024px) {
  .landing-bottom-section {
    border-radius: 32px;
    background-size: cover;
  }
}

@media screen and (max-width: 600px) {
  .landing-bottom-section {
    background: url('../images/landing_bottom_mobile_bg.png');
    height: 956px !important;
    min-height: 956px !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 100% !important;
    min-width: 100% !important;
  }
}

.landing-person-photo {
  min-width: 770px;
  min-height: 770px;
  height: 770px;
  width: 770px;
}

@media screen and (max-width: 1500px) {
  .landing-person-photo {
    height: 700px !important;
    width: 700px !important;
    min-height: 700px !important;
    min-width: 700px !important;
  }
}

@media screen and (max-width: 1200px) {
  .landing-person-photo {
    height: 450px !important;
    width: 450px !important;
    min-height: 450px !important;
    min-width: 450px !important;
  }
}

@media screen and (max-width: 769px) {
  .landing-person-photo {
    height: 330px !important;
    width: 330px !important;
    min-height: 330px !important;
    min-width: 330px !important;
  }
}

@media screen and (max-width: 450px) {
  .landing-person-photo {
    height: 320px !important;
    width: 320px !important;
    min-height: 320px !important;
    min-width: 320px !important;
  }
}

@media screen and (max-width: 320px) {
  .landing-person-photo {
    height: 290px !important;
    width: 290px !important;
    min-height: 290px !important;
    min-width: 290px !important;
  }
}

.about-phone-bg {
  background: url('../images/about/phone_bg.png');
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  width: 100% !important;
  min-width: 100% !important;
  height: 590px;
}

@media screen and (max-width: 1020px) {
  .about-phone-bg {
    height: 900px;
  }
}

.select-haven-learning {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Some browsers will not display the caret when using calc, so we put the fallback first */
  background: url('../images/haven-learning/haven_learning_arrow.svg') white
    no-repeat 98.5% !important; /* !important used for overriding all other customisations */
  background: url('../images/haven-learning/haven_learning_arrow.svg') white
    no-repeat calc(100% - 10px) !important; /* Better placement regardless of input width */
}

@media screen and (max-width: 1440px) {
  .ml4 .letters {
    width: 100% !important;
  }
}

.landing-section-bg {
  background: url('../images/landing-section-bg.svg');
  background-repeat: no-repeat;
  background-position: start;
  background-size: contain;
  height: 511px;
  width: 787px;
}

@media screen and (max-width: 650px) {
  .landing-section-bg {
    background-position: center !important;
    background-size: contain;
    height: 320px;
  }
}

@media screen and (max-width: 450px) {
  .landing-person-photo {
    background-position: center !important;
  }
}

@media screen and (max-width: 1440px) {
  .harry-wrapper {
    max-width: 1025px !important;
  }
}

.opportunity-wrapper {
  min-width: 400px;
  /* width: 500px; */
}

.opportunity-organization-wrapper {
  min-width: 16px;
  width: 16px;
  max-width: 16px;
}

.gradient-lime-green {
  background: linear-gradient(to bottom, #72c78e, #5dccb1);
}