/*
* site specific theme css
* The Lead HQ - ZLQ1
*/

 /* import barlow font for headers */
 @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@100;400;700&family=Comfortaa:wght@300;400;700&display=swap');

/* css variable overrides */
:root {

  /* colors */
    --white:#fff; /* standard white */
    --off-white:#fcfcfc; /* off-white */
    --yellow: #fec023; /* yellow accent - ACCENT BRAND COLOR */
    --silver:#f7f7f7; /* silver */
    --light-gray:#d9d9d9; /* light gray color */
    --gray:#787b82; /* gray color */
    --dark-gray: #545b62; /* dark gray color */
    --blue:rgb(0, 157, 255); /* blue - PRIMARY BRAND COLOR */
    --dark-blue:#0e2c6b; /* dark blue - SECONDARY BRAND COLOR */
    --light-red:#eb4543; /* lighter red */
    --light-black:#333; /* light black */
    --black:#000; /* black */
    --darker-black:#1E1E1E; /* darker black */
    --new-nav-blue: #0E2C6B;
    --slider-color:#0e2c6b;

    /* brand colors */
    --primary-brand-color: var(--blue);
    --secondary-brand-color: var(--dark-blue);
    --accent-brand-color: var(--yellow);

    /* main elements */
    --body-bg-color: var(--white); /* body background color */
    --home-bg-color: var(--white); /* home background color */

    /* header */
    --header-bg-color: var(--white); /* header bg color */
    --header-text-color: var(--black); /* header text color */
    --header-link-color: var(--black); /* header link color */

    /* footer */
    --footer-bg-color: var(--black); /* footer bg color */
    --footer-text-color: var(--white); /* footer text color */
    --footer-link-color: var(--white); /* footer link color */

    --tiny-border-color: var(--primary-brand-color); /* short line color borders */

    /* fonts */
    --base-font-size: 16px;
    --body-font-size: .845rem;
    --btn-font-size: .875rem;
    --nav-font-size: .875rem;
    --nav-font-color: var(--white);
    --nav-font-color-hover: var(--blue);
    --footer-font-size: .875rem;

    --primary-brand-font:'Roboto', Helvetica, sans-serif; /* primary brand font*/
    --primary-brand-font-color: var(--black); /* primary brand font color */
    --secondary-brand-font:'Comfortaa', cursive; /* secondary brand font */
    --head-tag-font: 'Roboto', Helvetica, sans-serif;
    --secondary-brand-font-color: var(--light-black); /* secondary brand font color */
    --label-color: var(--gray); /* label colors */
    --brand-box-shadow: 0 0 0 .25rem rgba(61,159,218,.5); /* used for input outlines */

    /* buttons */
    --btn-pad: .5rem 1rem; /* button padding */
    --btn-radius: 5px; /* button radius */

    /* primary buttons */
    --primary-btn-bg: var(--blue);  /* primary button background */
    --primary-btn-border: var(--blue);  /* primary button border */
    --primary-btn-text: var(--white); /* primary button text */
    --primary-btn-hover: var(--dark-blue); /* primary button hover */
    --primary-btn-hover-text: var(--white); /* primary button hover text*/



    /* secondary buttons */
    --secondary-btn-bg: var(--gray);  /* secondary button background */
    --secondary-btn-border: var(--gray); /* secondary button border */
    --secondary-btn-hover: var(--dark-gray); /* secondary button hover */
    --secondary-btn-text: var(--white); /* secondary button text */

    /* modal */
    --modal-header-color: var(--blue);
    --modal-header-text-color: var(--white);
    --modal-btn-close-color: var(--white);
    --modal-footer-color: var(--silver);

    /* products (older styles )*/
    --standard-product-bg-color:#1F4E79; /* standard product bg color */
    --enhanced-product-bg-color:#F0A14D; /* enhanced product bg color */
    --premium-product-bg-color:#C55A11; /* premium product bg color */

    /* cart (older styles) */
    --cart-price-text-color:#000; /* cart price text color */
    --card-border:#4D5C7D; /* card border color */
    --card-border-lt-gray:#D8D8D8; /* card border light gray */

  }
  /* mostly bootstrap classes below */

  /* site button specific styles */
  .btn {
    display: inline-block;
    padding: var(--btn-pad);
    margin-bottom: 0;
    font-size: var(--btn-font-size);
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    text-decoration: none;
  }

  .btn.btn-primary {
    background-color: var(--primary-btn-bg);
    color: var(--primary-btn-text);
    text-decoration: none;
  }

  .btn.btn-primary:hover {
    background-color: var(--primary-btn-hover);
    border-color: var(--primary-btn-hover);
    color: var(--primary-btn-hover-text);
  }

  .btn.btn-primary.d-flex.mx-auto:active{
    border-color: var(--dark-blue) !important;
  }

  .btn.btn-secondary {
    color: var(--secondary-btn-text);
    background-color: var(--secondary-btn-bg);
    border-color: none !important;
  }

  .btn.btn-secondary:hover {
    background-color: var(--secondary-btn-hover);
    border-color: var(--secondary-btn-border);
  }

  .btn.btn-link {
    color: var(--primary-brand-color);
    text-decoration: underline;
  }

  .btn.btn-link:hover {
    color: var(--dark-blue);
    text-decoration: underline;
  }

  /* site specific for leadhq input styling   */
  .form-check-input:checked,
  .form-check-input[type="checkbox"]:indeterminate,
  .form-range::-webkit-slider-thumb,
  .form-range::-moz-range-thumb,
  .form-range::-moz-range-thumb {
    background-color: var(--primary-brand-color) !important;
    border-color: var(--primary-brand-color) !important;
  }

  /* for jquery ui override */
  span.ui-slider-handle.ui-corner-all.ui-state-default {
    background: var(--primary-brand-color);
    border-color: var(--primary-brand-color);
  }

  .btn-primary:disabled, .btn-primary.disabled{
    border-color:var(--primary-btn-bg) !important;
    background-color:#A2D5F2 !important;
  }

  .btn-primary:active:focus,
  .btn.btn-link:active:focus,
  .btn-check:focus + .btn-primary,
  .btn-primary:focus,
  .btn-check:focus + .btn,
  .btn:focus,.form-check-input:focus,
  .accordion-button:focus,
  .form-select:focus,
  .form-control:focus {
    border-color: var(--primary-brand-color);
    box-shadow: var(--brand-box-shadow);
  }

  .accordion-button:hover::after,
  .accordion-button:focus::after,
  .accordion-button:active::after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230e2c6b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  }

  /*
  * header
  */

  .header {
    min-height: 75px;
    width: 100%;
    box-shadow: 0 10px 12px -7px rgba(0, 0, 0, .2);
    z-index: 9999;
  }

  /*
  * nav
  */

  .navbar-brand img {
    width: 100%;
    height: auto;
    max-width: 160px;
    position: relative;
    top: 3px;
  }

  button.navbar-toggler {
    justify-content: flex-end;
  }

  .navbar-light .navbar-nav .nav-link {
    color: var(--nav-font-color);
    font-size: var(--nav-font-size);
    text-decoration: none;
  }
  .navbar-light .navbar-nav .nav-link:hover {
    color: var(--nav-font-color-hover);
  }

  .navbar-nav .nav-link .cart-count {
    color: var(--blue);
    font-weight: 700;
  }

  li.nav-item.dropdown,
  li.nav-item.dropdown .dropdown-item{
    font-size: var(--nav-font-size);
    padding: 3px 5px
  }

  li.nav-item.dropdown {
    padding-top: 0;
  }

  li.nav-item.dropdown .dropdown-item:active {
    background-color: var(--light-gray);
  }

  h3.dropdown-item,
  p.dropdown-item{
    cursor: default;
    text-align: center;
  }

  h3.dropdown-item {
    font-size: 1.25rem !important;
  }

  h3.dropdown-item:hover,
  p.dropdown-item:hover {
    background: transparent;
    cursor: default;
    text-align: center;
  }

  h3.dropdown-item:active,
  h3.dropdown-item:focus {
    background-color: var(--light-gray);
  }
  /* nav pills */

  .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--primary-btn-hover-text);
    background-color: var(--primary-btn-hover);
    border-color: var(--primary-btn-hover);
  }

  .nav-link {
    color: var(--blue);
  }

  .nav-link:hover, .nav-link:focus {
    color: var(--dark-blue);
  }

  .navbar-toggler {
    background-color: var(--white);
  }
  /*
  * main
  */

  /* head tags and paragraph */
  h1, h2, h3, h4, h5 {
    font-family: var(--head-tag-font);
    font-size: 2.25rem; /* 36px */
  }
  h1, h2, h3 {
    margin-bottom: 1rem;
  }

  h2 {
    font-size: 2rem; /* 32px */
  }

  h3 {
    font-size: 1.75rem; /* 28px */
  }

  h4 {
    font-size: 1.5rem; /* 24px */
  }

  h5 {
    font-size: 1.25rem; /* 20px */
  }

  h6 {
    font-size: 1.125rem; /* 18px */
  }

  p, li {
    font-family: var(--primary-brand-font);
    font-size: var(--body-font-size);  /* 14px */
  }

  .accent {
    color: var(--blue);
  }

  a {
    cursor: pointer;
    color: var(--primary-brand-color);
  }

  a:hover,
  a:active,
  a:focus {
    color: var(--dark-blue);
    text-decoration: underline;
  }

  /* modals */
  .modal {
    z-index: 70000;
  }

  .modal-backdrop {
    z-index: 60000;
  }

  .modal-dialog .modal-content .modal-header {
    background: var(--modal-header-color);
    border: var(--modal-header-color);
  }

  .modal-dialog .modal-content .modal-header .modal-title {
    color: var(--modal-header-text-color);
  }

  .modal-dialog .modal-content .modal-footer {
    background: var(--modal-footer-color);
    border: 1px solid var(--modal-footer-color);
  }

  /* accordion */
  .accordion-button {
    background-color: #f7f7f7 !important;
    color: #333 !important;
  }

  /*
   * home page
   */

  .home-bg {
    background-color: var(--home-bg-color);
  }

  .home-page-logo {
    width: 100%;
    height: auto;
    max-width: 400px;
  }

  .hero-container{
    height: 450px;
  }

  .perks-container{
    height: 400px;
  }

  .hero-container{
    background: url("https://a.cdnlead.com/portal-assets/Kobe-Site-Assets/adobestock_272948866-1500w.jpg");
    background:linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://a.cdnlead.com/portal-assets/Kobe-Site-Assets/adobestock_272948866-1500w.jpg");
    background-size:cover;

  }

  .contact-container{
    background:linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://a.cdnlead.com/portal-assets/Kobe-Site-Assets/adobestock_168497323-1500w.jpg");
    background-size:cover;
  }

  .landing-hero-header{
    margin-bottom: 8px;
  font-size: 50px;
  }

  .landing-hero-discount {
    font-size: 25px;
  }

  .get-started{
    font-size: 18px;
  }

  .perks-header,.video-header {
    font-size: 35px;
  }
  .perks-white-section{
    box-shadow: 5px 5px 50px 0px #e9e0e0;
    margin-left: 6%;
    margin-right: 6%;
  }

  .perks-logo {
    width: 60px;
    object-fit: cover;
  }

  .perks-notes {
    font-size: 12px;
  }

  .perks-header-para {
    font-size: 17px;
  }

  .pricing-container{
    background-color: #ECF1F7;
  }

  .first-card {
    height: 540px;
  }

  .second-card {
    height: 605px;
    border: 2px solid rgb(0, 157, 255);
  }

  .flex-logo {
    width: 130px;
    object-fit: cover;
  }

  .mobile-only{
    display: none;
  }

  @media screen and (max-width: 1400px) {
    .first-card {
      height: 568px;
    }
  }

  @media screen and (max-width: 1200px) {
    .first-card,.second-card {
      height: auto;
    }
  }

  @media screen and (max-width: 760px) {
   .perks-white-section {
      flex-direction: column;
    }
    .perks-container {
      height: auto;
      padding-bottom: 30px;
    }
  }

  @media screen and (max-width: 600px) {
    .landing-hero-header {
      font-size: 36px;
    }
    .mobile-only{
      display: block;
    }
  .perks-white-section{
      padding-left: 15%;
  padding-right: 15%;
    }
    .desktop-only{
      display: none;
    }
   }

  @media screen and (max-width: 576px) {
    .home-page-logo {
      max-width: 250px;
      margin-top: 60px;

    }
  }


   /* login */
  .login-wrap{
    background: var(--dark-blue);
    width: 100%;
    max-width: 325px;
    /* border-radius: 8px; */
    top: 0px;
    right: 0;
    margin: 0 auto;
    position: relative;
    color: var(--white);
    z-index: 999;
    padding: 14px 20px 28px;
    box-shadow: 0 9px 7px 0 rgb(0 0 0 / 20%);
  }

  .form-control {
    border: 1px solid var(--gray);
  }

  .login-wrap .small {
    font-size: .875rem;
  }

  .login-wrap h2 {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 20px;
  }

  .login-wrap a:hover {
    color: var(--white);
  }

  .border-dark {
    border-color: var(--dark-gray) !important;
  }

   /* hero image */

  .hero{
    height: auto;
    background: url("/static/images/zlq1/hero.png");
    background-size: cover;
    /* background-attachment: fixed; */
  }

  .homepage-content {
    align-self: center;
    align-items: center;
    justify-content: center;
    padding: 0 0 60px 0;
  }

  .hero-text h1 {
    color: var(--blue);
    font-size: 3rem;
    font-family: var(--head-tag-font);
  }

  .hero-text h2{
    font-size: 2rem;
    font-weight: 700;
    color: black;
  }

  .hero-accent {
    margin-top: 20px;
  }

  .hero-accent .img-wrap {
    text-align: center;
    margin-bottom: 30px;
  }

  .hero-accent .img-wrap img {
    width: 100%;
    max-width: 300px;
    border: 5px solid var(--white);
  }

  .leadhq-movie {
    position: relative;
    top: 104px;
  }

  .tutorialvideo {
    width: 100%;
    height: auto;
    cursor: pointer;
    border: #707070 solid 2px;
  }

  .tutorialvideo2 {
    width: 100%;
    height: revert-layer;
    cursor: pointer;
  }

  .tutorialvideo::-webkit-media-controls {
    display: none !important;
  }

  .tutorialvideo:hover::-webkit-media-controls {
    display: initial !important;
  }
  .tiny-border {
    width: 55px;
    border: 3px solid var(--primary-brand-color);
    margin: 10px 0;
  }

  .tiny-border.long {
    width: 100px;
    border-width: 6px;
  }

.landing-perks{
  padding-left: 40px;
}

  @media only screen and (max-width: 1025px) {
    .home_headline {
      font-size: 28px !important;
    }
    .hero-text h2 {
      font-size: 23px;
    }
    .hero.mb-5.pt-5.pb-5 {
      padding-top: 10px !important;
      padding-bottom: 0px !important;
    }
    .leadhq-movie {
      position: relative;
      top: 51px;
    }
    .landing-content-body {
      padding-right: 5%;
      padding-left: 5%;
    }
    .container, .container-lg, .container-md, .container-sm {
      max-width: 960px;
    }
    .landing-perks{
      padding-left: 60px;
    }
  }

   @media only screen and (max-width: 600px) {
    .hero {
      background: none;
    }
    .leadhq-movie {
      position: relative;
      top: initial;
    }
    .home-icon {
      display: none;
    }
    .home_headline {
      font-size: 34px !important;
    }
    .landing-mailbox-img {
      width: 100%;
    }
    .hero-text h2 {
     margin-bottom: 10px;
    }
    .hero-accent {
      margin-top: 10px;
    }
    .landing-perks{
      padding-left: 0px;
    }
    .portal-img-sec {
      padding: 0;
    }
    .hero-text {
      text-align: center;
    }
   }

   .landing-content-body {
    border-bottom: solid 2px black;
  }

 /* cpm filter */
  #selected_zipcodes .form-check-inline {
    margin: 0 .75rem;
  }

  /* cpm delete county svg */
  button.btn.btn-link.delete-county-svg::before,
  button.btn.btn-link.delete-svg::before {
    content: "\f1f8";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
  }
  button.btn.btn-link.delete-county-svg,
  button.btn.btn-link.delete-svg {
    padding: 5px;
    line-height: 1.5;
    margin: 0;
    color: var(--primary-btn-bg);
    font-size:1.15rem;
  }
  button.btn.btn-link.delete-county-svg:hover,
  button.btn.btn-link.delete-svg:hover {
    color: var(--primary-btn-hover);
  }

  #counties .btn {
    padding: 0.2em 0.7em;
    font-size: .875rem !important;
    min-width: 47%;
    float: left;
    margin: 5px 2px;
    white-space: nowrap !important;
    word-wrap: break-word !important;
    text-overflow: ellipsis;
    max-width: 37px;
    overflow: hidden;
  }


  /*
  * footer
  */

  .footer{
    word-wrap: break-word;
    background-color: var(--new-nav-blue) !important;
    color: var(--footer-text-color);
    font-size: var(--footer-font-size);
    padding: 20px 0;
    box-shadow: 0 -5px 12px -5px rgba(0, 0, 0, .2);
  }

  .footer a.link,
  .footer p {
    font-size: var(--footer-font-size);
    color: var(--footer-text-color);
  }

  .footer a.link:hover{
    color:var(--blue);
  }

  .footer a.link {
    color: var(--footer-link-color);
  }

  .footer-logo {
    height: 40px;
    width: auto;
  }

  .custom-color-footer{
    background-color: white;
    border-top: none;
  }

  .feature-sentence{
    font-size: 17px;
  }

/* HOME CUSTOM STYLING */


/* this is to over write the background color of the bootstrap nav bar , need to find a way to updated with env variables maybe? or a jinja if else statement base on env variable*/
.bg-light {
  background-color: var(--new-nav-blue) !important;
}

/* styling of the login form */

.login {
  color: var(--white);
}

.login a {
  color:var(--blue)
}

/* this is the headline underneath the hero for insurance direct mail leads  */
.home_headline{
  font-size: 4rem;
  font-weight: 700;
  color: var(--dark-blue);
}

@media screen and (max-width: 1100px){
  .homepage-content h2.home_headline {
    text-align: center;
    font-size: 2.6rem;
  }
}

.leads{
  color:  var(--blue);
}
/* this is the statement of the price in the home page  */
.pricehome{
  color: var(--dark-blue);
  font-size: 24px;
  font-weight: 700;
}
/* this is the asterisk saying coupon to use for 20% off  */
.coupon{
  color: #0e2c6b;
  font-size: 18px;
  font-weight: 600;
}

.home-icon {
  height: 70px;
  width: auto;
}

.resources-area h2 {
  font-weight: 800;
  margin-bottom: 40px;
  color: var(--blue);
}


/* this is to style the section with pdf and video at the bottom of the home page  */

.resources-area h2 {
  font-weight: 800;
  margin-bottom: 40px;
  color: var(--primary-brand-color);
}

.resources-area p {
  color: var(--dark-blue);
  text-align: center;
  font-size:1.5rem;
}

.home-resources {
  height: 375px;
  width: auto;
}



@media only screen and (max-width: 350px) {
  .tutorialvideo {
     max-height: 180px !important;
  }
}

/* this is to style the product card section */
.flexleadsimg{
  padding:20px 10px 20px 10px;
  margin: 20px 0 10px 0;;
  background-color: white;
  height: 49%;
}

.card-text.fs-6 {
  font-size: .845rem !important;
}


/* policy link anchor none underline  */
.policy-link {
  text-decoration: none;
}


@media only screen and (max-width: 600px) {
  .home_headline {
    font-size: 32px !important;
  }
  .hero-text h2{
    font-size: 25px !important;
  }
  .start-shopping-button {
    font-size: 20px;
  }
}