:root{
  --navy: #1f2235;
  --gold-sh: #f5e07d;
  --footer-bg: #090a0b;
}

#section_products {
  overflow: hidden;
  max-height: 70vh !important;
  background-color: #f1f1f1;
  padding-top: 50px;
  padding-bottom: 40px;
  /* border-bottom-left-radius: 250px;
  border-bottom-right-radius: 250px;
  border: 2px inset rgba(0, 0, 0, 0.473); */
}

.bgColor {
  background-color: #000;
}

#navLogo {
  width: 40px !important;
  height: 40px !important;
}

#featured_products {
  margin-top: 40px;
}

.heroHeadings {
  font-size: 40px !important;
}

.heroHeadingsBigger {
  font-size: 55px !important;
}

.heroH {
  margin-bottom: 20px !important;
}


/* PAGINATION STYLING */
.pagination > li > a
{
    background-color: white;
    color: #000;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover
{
    color: #5a5a5a;
    background-color: #eee;
    border-color: #ddd;
}

.pagination > .active > a
{
    color: white;
    background-color: #000 !Important;
    border: solid 1px #000 !Important;
}

.pagination > .active > a:hover
{
    background-color: #000 !Important;
    border: solid 1px #000;
}

.page-link.disabled {
  pointer-events: none;
  cursor: not-allowed;
}

@media screen and (max-width: 900px) {
  #section_products {
    padding-top: 0;
  }
}

/* HERO HEADINGS QUERIES */
@media screen and (max-width: 925px) {
  .heroHeadings {
    font-size: 35px !important;
  }
  
  .heroHeadingsBigger {
    font-size: 50px !important;
  }
}

@media screen and (max-width: 830px) {
  .heroHeadings {
    font-size: 30px !important;
  }
  
  .heroHeadingsBigger {
    font-size: 45px !important;
  }
}

@media screen and (max-width: 740px) {
  .heroHeadings {
    font-size: 25px !important;
  }
  
  .heroHeadingsBigger {
    font-size: 40px !important;
  }
}

@media screen and (max-width: 642px) {
  .heroHeadings {
    font-size: 20px !important;
  }
  
  .heroHeadingsBigger {
    font-size: 35px !important;
  }

  #heroBtn {
    padding: 5px 12px !important;
    font-size: smaller !important;
  }
}

@media screen and (max-width: 550px) {
  .heroHeadings {
    font-size: 18px !important;
  }
  
  .heroHeadingsBigger {
    font-size: 30px !important;
  }

  #heroBtn {
    padding: 5px 10px !important;
    font-size: xx-small !important;
  }
}

@media screen and (max-width: 582px) {
  .heroHeadings {
    font-size: 15px !important;
  }
  
  .heroHeadingsBigger {
    font-size: 25px !important;
  }

  .heroH {
    margin-bottom: 10px !important;
  }
}

@media screen and (max-width: 438px) {
  .heroHeadings {
    font-size: 12px !important;
  }
  
  .heroHeadingsBigger {
    font-size: 16px !important;
  }

  .heroH {
    margin-bottom: 4px !important;
  }
}