/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  font-family: "inter", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #5a5a5a;
  background-color: #fcf9ff;
}
footer{background-color: #131313;width:100%}
a{color:#e4cb1b;text-decoration: none;}
a:hover{color:#e6d620;text-decoration: none;border-bottom:4px solid #e6d620;}
a:hover, .btn-primary {border-bottom:0;}
.readmore:hover { color:#4b4356;}
.active {border-bottom:4px solid #e6d620;}

.btn-primary {background-color: #e4cb1b;color:black;border-color: #e4cb1b;padding:10px 40px; border-radius: 25px;}
.btn-primary:active,.btn-primary:focus{background-color: #7b50b6;color:rgb(27, 27, 27);border-color: #e4cb1b;}
.btn-primary:hover{background-color: #7b50b6;color:#fff;border-color: #e4cb1b;}
.btn-block {width:20%}
.brandprimary{color: #4b4356;}
.bg-brandprimary{background: #4b4356;background-color: rgba(75, 67, 86, 0.9);}
.bg-disclosure {background: #4b4356;background-color: rgba(75, 67, 86, 0.9);}
.bg-satisfaction{background:  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9)),url(../img/header-bg.jpg)no-repeat; position: relative; background-size: cover; text-shadow: 2px 2px 3px #000;margin-top:50px;}
.bg-white-top {background:rgba(255,255,255, 0.9);}
.color-brandyellow{color:#e4cb1b;}
.navbar-brand {letter-spacing: 1px;}
.dropdown:hover .dropdown-menu {
  display: block;
  margin: 0;
}
.dropdown-menu{background-color: #776d84;}
.dropdown-item{font-weight:600;color:#fff;}
.dropdown-item.active{background-color: #d0beea;color:#fff}
.dropdown-item:hover{background-color: #d0beea;}
.callus{color:#fff;padding:40px 0}
.logolink:hover {border-bottom: 0;}


.page-header { background: url(../img/header-bg.jpg)no-repeat; position: relative; background-size: cover; text-shadow: 2px 2px 3px #000;}
.page-header-about { background: url(../img/header-bg.jpg)no-repeat; position: center; background-size: cover; text-shadow: 2px 2px 3px #000;}
.page-header-baddebt { background: url(../img/header-bg.jpg)no-repeat; position: center; background-size: cover; text-shadow: 2px 2px 3px #000;}
.page-header-debtconsolidation { background: url(../img/header-bg.jpg)no-repeat; position: center; background-size: cover; text-shadow: 2px 2px 3px #000;}
.page-header-mortgages { background: url(../img/header-bg.jpg)no-repeat; position: center; background-size: cover; text-shadow: 2px 2px 3px #000;}
.page-header-personalloans { background: url(../img/header-bg.jpg)no-repeat; position: center; background-size: cover; text-shadow: 2px 2px 3px #000;}
.page-caption { padding-top: 150px; padding-bottom: 174px; }
.page-title { font-size: 46px; line-height: 1; color: #fff; font-weight: 600; text-align: center; }
.card-top {margin-top:-130px;}
.card-section { position: relative; bottom: 60px; }
.card-block { padding: 24px 48px; }
.card-block-top { padding: 24px 48px 0 48px; border-bottom: 4px solid #e4cb1b; }
.card-title{ background-color:#4b4356;color:#e4cb1b;padding:24px 48px; border-bottom: 4px solid #e4cb1b; }
.title-brandprimary {font-weight: 800;}
.section-title { margin-bottom: 60px; }

.form-control:focus{border-color:#4b4356;box-shadow: 0 0 0 .25rem rgba(76, 11, 138, 0.25);}

.lato-thin {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.lato-thin-italic {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.lato-light-italic {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.lato-black-italic {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: italic;
}

.card{
  border: none;
  transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
 overflow:hidden;
 border-radius:20px;
 min-height:450px;
   box-shadow: 0 0 12px 0 rgba(0,0,0,0.2);

 @media (max-width: 768px) {
  min-height:350px;
}

@media (max-width: 420px) {
  min-height:300px;
}

 &.card-has-bg{
 transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
  background-size:120%;
  background-repeat:no-repeat;
  background-position: center center;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: inherit;
    -webkit-filter: grayscale(1);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);}

  &:hover {
    transform: scale(0.98);
     box-shadow: 0 0 5px -2px rgba(0,0,0,0.3);
    background-size:130%;
     transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);

    .card-img-overlay {
      transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
      background: rgb(255,186,33);
     background: linear-gradient(0deg, rgba(10, 10, 10, 0.5) 0%, rgb(8, 211, 126) 100%);
     }
  }
}
 .card-footer{
  background: none;
   border-top: none;
    .media{
     img{
       border:solid 3px rgba(255,255,255,0.3);
     }
   }
 }
  .card-title{font-weight:800}

 .card-body{ 
   transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
 

  }
 &:hover {
   .card-body{
     margin-top:30px;
     transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
   }
 cursor: pointer;
 transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}
 .card-img-overlay {
  transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
 background: rgb(255,186,33);
background: linear-gradient(0deg, rgba(18, 36, 31, 0.579) 0%, rgb(90, 141, 116) 100%);
}
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}
/* rtl:end:ignore */


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  /* rtl:remove */
  letter-spacing: -.05rem;
}




/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}

@media only screen and (max-width: 600px) {
  .card-block{padding:20px}
}