@import "//cloud.typography.com/6741734/7240552/css/fonts.css";

:root{
  --main: #c6a85b;
  --navy: #062b62;
  --light: #a1a1a6;
}

.material-icons {
  font-family: 'Material Icons' !important;
}

body *{
  font-family: "Mercury SSm A", "Mercury SSm B" !important;
}

.row{
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.text-main{
  color: var(--main);
}


.bg-main:hover{
  color: white !important;
  opacity: 0.8;
}

.page-link {
  color: var(--main);
}
.page-item.active .page-link {
  background-color: var(--main);
  border-color: var(--main);
}
.page-item.disabled .page-link {
  color: var(--main);
}

.page-link:hover {
  z-index: 2;
  color: var(--main);
}

.swiper-slide{
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-check-input:checked {
  background-color: var(--main);
  border-color: var(--main);
}


.tag{
  min-height: 32px;
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 22px;
  height: 100%;
  padding: 8px 15px;
  color: #374957;
  box-shadow: 0 0 0 1px #cfd9e0;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s ease;
  margin:10px;
  text-transform:uppercase;
}

.tag:hover{
  background-color: var(--light);
  color: white;
}


.swiper-slide > img{
  border: 10px solid #f3f3f9;
  border-radius: 10px;
}

[data-layout=horizontal] .page-content {
  padding: calc(1px + 85px) calc(1.5rem / 2) 85px calc(1.5rem / 2);
}

.swal2-icon .swal2-icon-content {
  font-size: 3.75em !important;
}

.btn-primary{
  color: #fff;
  background-color: var(--navy) !important;
  border-color: var(--navy) !important;
}

.bg-main {
  color: #fff;
  background-color: #c6a85b !important;
  border-color: #c6a85b !important;
}

#scrollbar{
  position: fixed;
  width: 100%;
  z-index: 1;
  left:0;
  background-color: #f4f3f1;
}

.badge-soft-warning{
  color: var(--main);
}

.logo {
  line-height: unset !important;
}

.bg-navy{
  color: #ffffff;
  background-color: var(--navy) !important;
  border-color: var(--navy) !important;
}

.text-custom-light{
  color: var(--light);
}

.footer-social-link .avatar-title:hover {
  background-color: var(--main);
  color: white !important;
}

.footer-heading{
  color: var(--light);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.footer-list li a {
  color: #0c0c0d !important;
}

.footer-list li a:hover {
  color: var(--main) !important;
}

.footer-social-link .avatar-title {
  color: #0c0c0d !important;
}

article > *{
  font-size: 18px !important;
}

p , span, em, li, div, select, a, label, td, tr, .form-control, .btn {
  font-size: 1rem !important;
}

.bg-light{
  background-color: #f0f0f0 !important;
}
.card-body > p{
  font-size: 18px !important;
}

.login-card form label{
  display: none;
} 
.login-card form input{
  border: none;
  border-bottom: 1px solid black;
  border-radius: 0px;
  padding-left: 0px;
}
.login-btn{
  padding: 10px;
  background-color: var(--navy);
  color: white;
}

.login-btn:hover{
  background-color: var(--navy) !important;
  color: white;
  border-color: var(--navy) !important;
}

.text-two-lines {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
          line-clamp: 2; 
  -webkit-box-orient: vertical;
}

.carousel-item{
  max-height: 350px;
}

.mx-200{
  max-height: 200px;
}

.brx-20{
  border-radius: 20px;
}

.topbar-text-dark{
  color: var(--vz-heading-color);
}

.btnx-outline-dark{
  border-color: var(--vz-heading-color);
  color: var(--vz-heading-color);
}

.btnx-outline-dark:hover{
  background-color: var(--vz-heading-color);
  color: white;
}

.fsx-18{
  font-size: 18px;
}
.ffc-sans{
  font-family: hkgrotesk,sans-serif !important;
}
.carousel-caption {
  bottom: 4.25rem;
}
.bg-custom{
  background: radial-gradient(circle, rgba(255,255,255,1) 55%, rgba(181,181,181,0.3477766106442577) 100%);
}
.auth-one-bg {
  background-image: url("/static/images/account-bg.f360792d68c0.png");
  background-position: center;
  background-size: cover;
}

.explore-box .explore-place-bid-img .place-bid-btn > a {
  padding: 5px 6px;
}

.explore-box {
  height: 300px;
}

.explore-box > .card-body {
  min-height: 86px;
}

.product-card{
  background-color: #fff;
  border: 1px solid #E2E8F0;
  width: 202.66px;
  height: 264.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  cursor: pointer;
}



.product-card > img {
  align-self: center;
  margin-bottom: 8px;
  width: 100%;
  height: 94px;
  flex-direction: column;
  align-items: flex-start;
  object-fit: cover;
  object-position: center;
}


.product-card > .product-card-body,.product-card-footer > p{
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0px;
}

.product-card > .product-card-footer > p{
  font-size: 0.875rem;
  margin-bottom: 0px;
}


.product-card-footer{
  margin-top: auto;
  margin-bottom: 5px;
}

.product-card > .product-card-body, .product-card-footer{
  padding: 0px 8px;
}


.explore-box .explore-place-bid-img .place-bid-btn {
  top: 50%;
  position: absolute;
  left: 58%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: 10;
  width: 70%;
}

.explore-box {
  border-radius: 0px;
  overflow: hidden;
}

.rated{
  float:right;
  width:1em;
  overflow:hidden;
  white-space:nowrap;
  cursor:pointer;
  font-size:30px;
  color: #ffc700;
}

.rated-div{
  float: left;
  height: 46px;
  padding: 0 10px;
}

.rated::before{
  content: '★ ';
}

.rate {
  float: left;
  height: 46px;
  padding: 0 10px;
}
.rate:not(:checked) > input {
  position:absolute;
  top:-9999px;
}
.rate:not(:checked) > label {
  float:right;
  width:1em;
  overflow:hidden;
  white-space:nowrap;
  cursor:pointer;
  font-size:30px !important;
  color:#ccc;
}
.rate:not(:checked) > label:before {
  content: '★ ';
}
.rate > input:checked ~ label {
  color: #ffc700;    
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
  color: #deb217;  
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
  color: #c59b08;
}


.btn-cart{
  background-color: #c6a85b;
  font-size: 16px;
  color: white;
  width: 100%;
}

.btn-cart:hover{
  color: white;
  background-color: #97824c;
}

.btn-delete{
  font-size: 16px;
  color: white;
  width: 100%;
}

.topbar-user {
  background-color: transparent !important;
}

.card-transition{
  position: relative;
  top: 0;
  transition: top ease 0.5s;
}

.card-hover:hover{
  top: -10px;
}

.bgc-light{
  background-color: #f4f3f1 !important;
  position: unset !important;
}

.topbar-browse:hover{
  background-color: #f4f3f1;
  color: black;
}
.topbar-browse-border:hover{
  border-right: 2px solid green;
}

#verification-form input{
  display:inline-block;
  width:50px;
  height:50px;
  text-align:center;
}

.hover:hover{
  background-color: #cfcfcf;
  cursor: pointer;
}
.auth-page-wrapper{
  background-color: white;
}
.margin-x-90{
  margin-left: 90px;
  margin-right: 90px;
}
.login-image{
  width: 90%;
  height: 520px;
  max-width: 800px;
  object-fit: cover;
}
.login-card{
  min-width: 500px;
  box-shadow: none;
}
.login-flex{
  align-items: flex-start;
}
.custom-login-footer{
  background-image: url("../images/Shape.eb765200f217.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

.input-group-text {
  background-color: var(--main);
  border-color: var(--main);
  color: white;
}

.newsletter{
  background: var(--navy);
  padding: 64px 90px;
  margin-top: 120px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.newsletter input{
  padding: 24px;
  padding-right: 300px;
}
.newsletter h2{
  margin-right: 10%;
}
.newsletter a{
  background-color: var(--main);
  padding: 16px 36px;
  color: white;
  position: absolute;
  right: 10px;
  top: 10px;
}
.social-footer-mid{
  margin: 35px 21px;
}
.footer-list-heading{
  font-weight: bold;
}

.homepage-menu{
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}

@media (max-width: 576px) {
  .justify-content-sm-between{
    justify-content: space-between !important;
  }
  .d-sm-none{
    display: none !important;
  }
  .product-heading{
    font-size: 40px;
    line-height: 1;
  }
  .products-grid{
        display: grid;
        grid-gap: 1.5rem;
        grid-template-columns: repeat(1, 1fr);
  }
  .product-card-footer {
      margin-top: auto;
      margin-bottom: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      align-self: center;
  }
  .product-card > img {
      align-self: center;
      margin-bottom: 8px;
      width: 100%;
      height: 106px;
      flex-direction: column;
      align-items: flex-start;
      object-fit: cover;
      object-position: center;
  }
  .product-card {
      background-color: #fff;
      border: 1px solid #E2E8F0;
      width: 100%;
      height: 264.5px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      cursor: pointer;
      padding: 0px;
      text-align: center;
  }
  .product-card-footer {
      margin-top: auto;
      margin-bottom: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      align-self: center;
  }
  
  .product-card > .product-card-body, .product-card-footer > p {
      font-size: 0.875rem;
      font-weight: 500;
      margin-bottom: 0px;
      width: 100%;
  }
  .login-card{
    min-width: unset;
    width: 90%;
  }
  .margin-x-90{
    margin: 10px;
  }
}

.badge {
  font-size: .75em !important;
}
.navbar-menu .navbar-nav .nav-link{
  white-space: nowrap;
  overflow: hidden;
}

.responsive-nav{
  z-index: 9999;
  top: 71px;
  background: white;
  position: fixed;
  width: 100%;
  transition: all 0.3s linear 0s;
}

.navbar-header .btn-topbar {
  height: 42px;
  width: 34px;
}
.main-card-img{
  max-width: 290px;
  max-height: 200px;
  object-fit:cover;
}
.main-card-img-container{
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
.card-heading-main{
  font-size: 18px;
  text-align: start;
}
.price-card-heading{
  font-size: 14px;
  color: gray;
}
.toast-bg-color{
  opacity: 1 !important;
  background-color: var(--main) !important;
}
.gold-bg-color{
  color:white !important;
  background-color: var(--main) !important;
}
.checkout-top.active{
  background-color: var(--navy) !important;
  color: white !important;
}
.step-arrow-nav .nav .nav-link.active::before {
  border-left-color: var(--navy) !important;
}
.checkout-top i{
  color: black !important;
  background-color: white !important;
}

@media (min-width: 768px) and (max-width: 992px) {

  #carouselExampleCaption{
    height: 280px;
  }
  .horizontal-logo {
    padding-left: 5px !important;
}
  .product-heading{
    font-size: 40px;
    line-height: 1;
  }
  .products-grid{
      display: grid;
      grid-gap: 1.5rem;
      grid-template-columns: repeat(4, 1fr);
  }

  .newsletter{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 14px 19px;
    margin-top: 16px;
  }
  .newsletter a {
    background-color: var(--main);
    padding: 16px 14px;
    color: white;
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .newsletter h2{
    margin-right: 0px;
    /* line-height: 460px; */
  }
  .newsletter input{
    width: 100%;
    padding: 12px;
    padding-right: 90px;
  }
}

@media (max-width: 992px) {

 
  #navbar-nav{
    flex-direction: row !important;
    display: inline-flex !important;
  }
    .horizontal-logo {
      padding-left: 5px !important;
      padding-right: 5px !important;
  }
  .navbar-menu {
    display: block;
    max-height: 360px;
    overflow-y: auto;
    padding-left: 0;
}
.login-flex{
  align-items: center;
}
.login-image{
  display: none;
}
.newsletter{
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 14px 19px;
  margin-top: 16px;
}
.newsletter a {
  background-color: var(--main) !important;
  padding: 5px 14px;
  color: white;
  position: absolute;
  right: 10px;
  top: 10px;
}
.newsletter h2{
  margin-right: 0px;
}
.newsletter input{
  width: 100%;
  padding: 12px;
  padding-right: 130px;
}

}

@media (min-width: 992px) {
  .horizontal-logo {
    padding-left: 5px !important;
}
  .page-content {
      margin-top: 0px !important;
  }
  .product-heading{
    font-size: 66px;
    line-height: 1;
  }
  .border-lg-right {
    border-right: 1px solid #e3e7eb !important;
  }
  .product-main-card.col-lg-3{
    width: 20% !important;
  }
}

@media (min-width: 1200px) {

    .topnav-hamburger {
      visibility: unset !important;
      display: none;
  }

  [data-layout=horizontal] .page-content {
      padding: calc(1px + 85px) calc(1.5rem / 2) 85px calc(1.5rem / 2);
  }

  .product-heading{
    font-size: 66px;
    line-height: 1;
  }
  .products-grid{
      display: grid;
      grid-gap: 1.5rem;
      grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1400px) {
  
  .topnav-hamburger {
    visibility: unset !important;
    display: none;
}
  .page-content {
    margin-top: 0px !important;
}
  .product-heading{
    font-size: 66px;
    line-height: 1;
  }
  .products-grid{
      display: grid;
      grid-gap: 1.5rem;
      grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 1440px) {
  
  .login-flex{
    align-items: center;
  }
}