*{
  margin: 0 !impotant;
  padding: 0 !impotant;
  font-family: 'Inter', sans-serif;
}

/* TOP INFO */
.top-font{
  font-family: 'Inter', sans-serif;
}

.top-small-text{
  font-size: 14px;
  color: #aaaaab;
}

/* COLOR */
.blue{
  color: #042d70;
}

.yellow{
  color: #e6ce00;
}

.brown{
  color: #bf9f00;
}

.brownish {
  color: #bf9f00;
}

.bg-brownish{
  background-color: #bf9f00;
}


.bg-blue{
  background-color: #042d70;
}

.bg-yellow{
  background-color: #e6ce00;
}


/* NAVBAR */
.nav-link{
  font-family: 'Inter', sans-serif;
  color: #042d70;
  padding-left: 25px !important;
  padding-right: 25px !important;
}

.nav-link:hover{
  color: white !important;
  font-weight: bold;
  background-color: #042d70;
}

.nav-link.active{
  color: white !important;
  font-weight: bold;
  background-color: #042d70;
}

.navbar-toggler:focus{
  box-shadow: #99abc5 !important;
}

.nav-off{
  font-family: 'Inter', sans-serif;
  text-decoration: none;
  color: #042d70;
}

.btn:hover{
  background-color: #042d70;
  color: white;
}

/* FOOTER */
.justify{
  text-align: justify;
}

.bot-small-text{
  font-size: 14px;
  color: white;
}

/* HOME */
.rate-spacer{
  margin-top: 94px;
}

.estimated-spacer{
  margin-top: 70px;
}

.card-spacer{
  margin-bottom: 17rem;
}

/* Custom styles for the range input */
.custom-range {
  --thumb-color: #bf9f00;
  /* Set thumb color */
  --track-gradient-start: #bf9f00;
  /* Set the starting color of the gradient track */
  --track-gradient-end: #bdc3c7;
  /* Set the ending color of the gradient track */

  /* Styles for the thumb */
  --thumb-width: 16px;
  --thumb-height: 16px;
  --thumb-border: 2px solid #ffffff;
  /* Set border color */
  --thumb-background: var(--thumb-color);

  /* Styles for the track */
  --track-height: 4px;
}

/* Apply styles to the range input */
.custom-range::-webkit-slider-thumb {
  width: var(--thumb-width);
  height: var(--thumb-height);
  background-color: var(--thumb-background);
  border: var(--thumb-border);
  z-index: 1;
}

.custom-range::-moz-range-thumb {
  width: var(--thumb-width);
  height: var(--thumb-height);
  background-color: var(--thumb-background);
  border: var(--thumb-border);
}

.custom-range::-webkit-slider-runnable-track {
  height: var(--track-height);
  background: linear-gradient(to right, var(--track-gradient-start), var(--track-gradient-end));
  border-radius: 1rem;
  /* Adjust border-radius as needed */
  position: relative;
  z-index: 0;
}

.custom-range::-moz-range-track {
  height: var(--track-height);
  background: linear-gradient(to right, var(--track-gradient-start), var(--track-gradient-end));
  border-radius: 1rem;
  /* Adjust border-radius as needed */
}

.bg-gold{
  background-color: #bf9f00;
  height: 112px;
  display: flex;
  align-items: center;
}

.bg-gold-4{
  background-color: rgba(196,170,86,0.7);
  height: 112px;
  display: flex;
  align-items: center;
}

.bg-content{
  height: 49rem;
  background-repeat: no-repeat;
  width: 100%;
}

.bg-plain{
  background-repeat: no-repeat;
  height: 377px;
}

.blue-plain{
  color: #0150c3;
}

.hover-content{
  width: 93%;
}

.card-overlay{
  bottom: -50%;
  left: 50%;
  width: 100%;
}

.card-overlay {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.position-relative:hover .card-overlay {
  opacity: 1;
}

.bg-light-blue{
  background-color: #eef6fe;
}

.border-gray{
  border: 2px solid #abaaaa;
}

.border-form{
  border: 2px solid #0150c3;
}

.border-color-blue{
  border-color: blue;
}

.border-form:focus{
  box-shadow: none;
  border-color: #0150c3;
}

.vr{
  background-color: #0150c3;
  width: 2px;
  opacity: 1;
}

.gray{
  color: #818080;
}

.carousel-indicators [data-bs-target]{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #d1d3d7;
  margin-right: 12px;
  margin-left: 12px;
}

.carousel-indicators .active{
  background-color: #0150c3;
}

.carousel-indicators{
  bottom: -11%;
}

.link-hover:hover{
  color: #bf9f00;
}

.link-black{
  color: black;
}

.date-sm{
  font-size: 14px;
}

/* OUR BRANCHES */
.form-control:focus{
  box-shadow: none;
}

.banner-page{
  height: 60vh;
  background-position: center;
  background-size: cover;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* ASSOCIATE MEMBERSHIP */
.bg-section{
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  height: 43rem;
}

.bg-map-section{
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  height: 100%;
}

.border-form-1{
  border: 1px solid #0150c3;
  height: 45px;
}

.form-control:focus{
  border-color: #0150c3;
}

/* SAVINGS & INVESTMENTS */
.savings-box{
  height: 209px;
}

.left-content{
  padding-left: 19rem;
}

.bg-blue-map {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 25rem;
}

.pt-9 {
  padding-top: 9rem;
}

.list-overlay {
  width: 76%;
  bottom: -27%;
  left: 50%;
}

.list-content{
  height: 205px;
}

.bg-footer{
  display: flex;
  align-items: center;
  height: 15rem;
}

/* FAQS */
.faq-overlay{
  width: 100%;
  left: 50%;
  bottom: 8%;
}

/* CONTACT US */
.btn-white {
  background-color: white;
  color: #0150c3;
}

.btn-white:hover {
  background-color: #0150c3;
  color: white;
}

.contact-container{
  margin-top: -90px;
}

@media only screen and (max-width:600px) {
  .rate-spacer{
    margin-top: 15px;
  }
  
  .estimated-spacer{
    margin-top: 18px;
  }

  .contact-container{
    margin-top: 0;
  }

  .bg-footer{
    height: 25rem;
  }

  .list-content{
    height: 100%;
  }

  .left-content {
    padding-left: 2rem;
  }

  .savings-box{
    height: 265px;
  }

  .cell {
    height: 92px;
  }

  .logo-sm{
    max-width: 60%;
    height: auto;
  }

  .bg-content{
    height: 100%;
  }

  .hover-content {
    width: 90%;
  }

  .row-place{
    justify-content: center;
  }

  .r-px{
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .bg-section{
    height: 100%;
  }
}

@media only screen and (min-width:768px) and (max-width:1100px) {
  .nav-link{
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  .h5-sm{
    font-size: 1.05rem;
  }

  .left-content {
    padding-left: 3rem;
  }

  .nav-link{
    padding-left: 5px;
    padding-right: 5px;
    font-size: 14px;
  }

  .btn-header{
    font-size: 11px;
  }

  .fs-14{
    font-size: 14px;
  }

  .card-spacer{
    margin-bottom: 8rem;
  }
}

@media (max-width: 768px) {

  .banner-h3,
  h1.blue {
      text-shadow: 1px 1px 5px #fff;
  }
}

@media only screen and (min-width:1100px) and (max-width:1500px) {
  .left-content {
    padding-left: 6rem;
  }

  .card-spacer{
    margin-bottom: 8rem;
  }
}

@media only screen and (min-width:2000px) and (max-width:2600px) {
  .left-content{
    padding-left: 41rem;
  }

  .card-spacer{
    margin-bottom: 9rem;
  }
}

/* SLIDER */

.slider {
  background: transparent;
  height: 100%;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.slider::before,
.slider::after {
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 600px;
  position: absolute;
  width: 200px;
  z-index: 2;
}

.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

.slider::before {
  left: 0;
  top: 0;
}

.slide-track {
  animation: scroll 40s linear infinite;
  display: flex;
  width: calc(350px * 14);
}

.slides {
  height: 100%;
  width: 100%;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-250px * 7));
  }
}

@media only screen and (max-width: 767px) {
  .slide-track {
    width: calc(250px * 14);
  }

  .slider {
    height: 300px;
    width: 100%;
  }

  .slider::before,
  .slider::after {
    height: 300px;
    width: 200px;
  }

  .slides {
    height: 300px;
    width: 250px;
  }
}