/* Bootstrap Over-ride */
@media (min-width: 1000px){
    .container{
        max-width: 1000px;
    }
}
@media (max-width: 1200px){
    .container{
        max-width: 100%;
        padding:0 24px;
    }
}
.dropdown-toggle::after {
    display: none;
}
.dropdown-menu{
    top:58px;
    left:0px;
    padding:10px;
}

.alert-primary{
    background-color: #9dc2b0;
     background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)),url('{% static 'banner4.jpg' %}');
}


/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
html, body, p, div{
    letter-spacing: -0.02px;
    font-family: 'Roboto', sans-serif;
}
.fs12{
    font-size: 12px;
}
.fs15{
    font-size: 0.9375rem;
}

.fw300{
    font-weight: 300;
}
.fw500{
    font-weight: 500;
}


/* Navigation-Main*/

/* xs */
.logo {
    width: 49px;
    height: auto;
}
/* sm */
@media (min-width: 768px) {
    .logo {
        width: 49px;
    }
}
/* md */
@media (min-width: 992px) {
    .logo {
        width: 60px;
    }
}
/* lg */
@media (min-width: 1200px) {
    .logo {
        width: 70px;
    }
}

/* Basket Menu */

.basket-qty{
    color: #fff;
    background: #06c0ee;
    border: 2px solid #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 11px;
    height: 15px;
    width: 14px;
    position: absolute;
    box-sizing: content-box;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 1px;
    right: 10px;
}

.basket-btn{
    position: relative;
}

.basket-btn:hover, .basket-btn:focus, .basket-btn:active, .basket-btn.active{
    color:#d42114;
    transition-duration: 0.4s;
    background-color: #fff;
}


/* Footer */

.footer > div > div > ul > li{
    padding-bottom:8px;
}

/* from chatGPT*/

.items-count {
    display: inline-block;
    vertical-align: middle;
  }
  
  .input-text.qty {
    display: inline-block;
    width: 40px; /* Adjust the width as needed */
    text-align: center;
    vertical-align: middle;
  }
  
  .reduced,
  .increase {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
  }
  
  /* Adjust the styling of the buttons as needed */
  .reduced button,
  .increase button {
    background-color: transparent;
    border: none;
    padding: 0;
    font-size: 16px;
    color: #000;
  }
  
  /* Adjust the styling of the SVG icons as needed */
  .reduced svg,
  .increase svg {
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    width: 16px;
    color: #000;
  }
  
  /* Optionally, add some margin to separate the elements */
  .items-count:not(:first-child),
  input.qty:not(:first-child) {
    margin-left: 10px;
  }