/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&family=Montserrat:wght@400;600&display=swap');
:root {
  --font-card: "Cardo", serif;
  --font-montserrat: "Montserrat", sans-serif;
  --indigo_blue: #3f0071;
  --white: #ffffff;
  --light_magenta: #e5e0e6;
  --jet: #333436;
  --white_coffee:#E6DDD6;
  --argent : #BFBFBF;
  --rubine_red : #d50057;
  --space_cadet : #12284C;
}
body {
  font-family: var(--font-montserrat);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-card);
}
.tertiary-btn-default {
  color: var(--white);
  font-size: clamp(16px, 2vw, 18px);
  border-radius: 50px;
  border: 1px solid var(--light_magenta);
  background: var(--indigo_blue);
  padding: 15px 30px;
  font-weight: 700;
  max-width: 350px !important;
  text-decoration: none;
  text-align: center;
  width: 100%;
  display: inline-block;
}
.tertiary-btn-default:hover {
  background:var(--white);
  border:1px solid var(--indigo_blue);
  color:var(--indigo_blue);

}
.influencer_hero_text {
  padding: 100px 0 110px;
}
.influencer_hero_text .influncer_details {
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 130px;
}
.influencer_hero_text .influncer_details h1 {
  font-weight: 700;
  font-size: 40px;
  line-height: 62.74px;
  letter-spacing: 0%;
  text-align: center;
  color: var(--jet);
  margin-bottom:20px;
}
.influencer_hero_text .influncer_details p {
  font-weight: 400;
  font-size: clamp(20px 2vw 26px);
  margin:0 auto;
  line-height: 45px;
  letter-spacing: 0%;
  text-align: center;
  max-width:80%;
  width:100%;
  color: var(--jet);
}
.influencer_hero_text .influencer_images {
  max-width: 90%;
  margin: 0 auto;
}
.influencer_hero_text .influencer_images ul {
  gap: 40px;
}
.hover_img {
  display: none;
}
.image1:hover .nonehover_img,
.image2:hover .nonehover_img,
.image3:hover .nonehover_img,
.image4:hover .nonehover_img {
  display: none;
}
.image1:hover .hover_img,
.image2:hover .hover_img,
.image3:hover .hover_img,
.image4:hover .hover_img {
  display: block;
}
.affiliators_form {
  padding: 0px 0 150px;
}
.submit_application  {
  font-weight: 600;
  font-size:clamp(18px, 2vw, 30px);
  line-height: 45px;
  color:var(--jet);

}
.affliate-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px 20px;
}
.partners_signup_form {
  max-width: 75%;
  width: 100%;
  margin: 0 auto;
  background: var(--white_coffee);
  padding: 30px 50px;
}
.affliate-form .form-group.fullwidth {
  grid-column-start: 1;
  grid-column-end: -1;
}
.form-group.input_fields textarea.form-control {
  min-height: 120px;
}
.customer_modal_content p {
  margin: 0 0 20px;
}
.customer_modal_content h3 {
  font-weight: 700;
}

.form-control::-webkit-input-placeholder {
  font-family: var(--font-montserrat);
  font-weight: 600;
  font-size:14px;
  color: var(--argent);
}
.form-control::-moz-placeholder {
  font-family: var(--font-montserrat);
  font-weight: 600;
  font-size:14px;
  color: var(--argent);
}
.form-control::-ms-input-placeholder {
  font-family: var(--font-montserrat);
  font-weight: 600;
  font-size:14px;
  color: var(--argent);
}
.form-group.input_fields {
  position: relative;
}
.form-group.input_fields .form-control:focus ~ label,
.form-group.input_fields
  .form-control:not(:placeholder-shown):not(:focus):invalid
  ~ label,
.form-group.input_fields
  .form-control:not(:placeholder-shown):not(:focus):valid
  ~ label {
  font-weight: 600;
  font-size: 14px;
  opacity: 1;
  top: 2px;
}
.form-group.input_fields {
  border-radius: 4px;
  background-color: var(--white);
  margin-bottom:15px;
}
.form-group.input_fields .form-control {
  border: 1px solid var(--white_coffee);
  border-radius: 4px;
  font-size: 16px;
  height: 50px;
  opacity: 0.7;
  padding: 15px 30px 15px 20px;
  position: relative;
}

.form-group.submit_btn.fullwidth {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}
.input_fields label.error {
  font-weight: 600 !important;
  position: absolute !important;
  font-size: 12px !important;
  top: 45px !important;
  padding-top: 9px;
  color: var(--rubine_red) !important;
  left: 2px !important;
}
.msg-error {
  color: var(--rubine_red);
  margin: 0 0 0 100px;
  font-size: 13px;
}
.confirmation_popup.in {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--space_cadet);
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  margin: 0;
  padding: 0 !important;
}
.confirmation_popup .modal-content {
  border-radius: 0;
  border: none;
}
.confirmation_popup .modal-body {
  padding: 50px 30px;
}
.confirm_popup_style img {
  margin: 0 0 25px;
}
.confirm_popup_style p {
  margin: 0 0 20px;
}
.confirm_popup_style p span {
  font-family: GothamMedium;
}
.confirmation_btn {
  -ms-flex-line-pack: center;
  align-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.confirmation_btn button {
  margin: 0 10px;
  min-width: 140px;
}
.confirmation_btn .cancel_btn {
  background: transparent none repeat scroll 0 0;
  border: 1px solid var(--space_cadet);
  border-radius: 3px;
  color: var(--space_cadet);
  font-size: 13px;
  padding: 0 15px;
  text-transform: uppercase;
  -webkit-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.confirmation_btn .cancel_btn:hover {
  background: var(--space_cadet) none repeat scroll 0 0;
  color: var(--white);
}
.tertiary-btn-default:focus {
  border-radius:50px;
}
#affliate_pop .primary_cta {
  color: var(--white);
  font-size: clamp(16px, 2vw, 18px);
  border-radius: 50px;
  border: 1px solid var(--light_magenta);
  background: var(--indigo_blue);
  padding: 10px;
  font-weight: 700;
  min-width:125px;
  text-decoration: none;
  text-align: center;
  width: 100%;
  display: inline-block;
}
#affliate_pop .primary_cta:hover {
  background: var(--white);
  border: 1px solid var(--indigo_blue);
  color: var(--indigo_blue);
}
@media only screen and (max-width: 767px) {
  .influncer_details {
    padding: 20px;
  }
  .influencer_hero_text {
    padding: 20px 0;
  }
  .influencer_hero_text .influncer_details {
    padding-bottom:30px;
  }
  .influencer_hero_text .influncer_details h1 {
    font-size: 22px;
    line-height: 62.74px;
  }
  .influencer_hero_text .influncer_details p {
    font-size: 20px;
    line-height: 25px;
    max-width:100%;
  }
  .influencer_hero_text .influencer_images ul {
    gap:15px;
  }
  .influencer_images ul {
    flex-direction: column;
  }
  .affliate-form {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .provide_info_text {
    font-weight: 600;
    font-size: 22px;
    line-height: 30px;
    color:var(--jet);

  }
  .partners_signup_form {
    padding: 30px 25px;
    max-width: 80%;
  }
  .affiliators_form {
    padding:0 0 90px;
  }
  .form-group.input_fields .form-control {
    padding: 15px 21px 15px 14px;
  }
  .form-group.input_fields {
    margin-bottom: 10px;
  }
  .input_fields label.error {
    position: relative !important;
    top: 0 !important;
    padding-top: 0 !important;
  }
  .checkbox_style label,
  .mbl_cookies_text p {
    font-size: 13px;
    line-height: 16px;
  }
  .confirmation_popup .modal-dialog {
    margin: 50px auto 0 !important;
    padding: 0 !important;
    width: 95%;
  }
  .confirmation_btn button {
    margin: 0 10px;
    min-width: 120px;
    font-size: 13px;
  }
}
