/* PUBLIC CSS FOR THIS SITE */
@import url("colours.css");

body{
    size: 20px !important;
}
#top-logo{
    width: 250px;
    height: auto;
    border: 0;
}
#bottom-logo{
    width: 200px;
    height: auto;
    border: 0;
}
.search{
    background-image: url(../img/search.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
}
nav {
    background-color: var(--green-100);
    color: var(--white);
    border-bottom: 5px solid var(--green-110);
}
.nav-link {
    color: var(--white) !important;
    text-decoration: none;
    text-transform: uppercase;
}


.light-white {
    color: var(--white-50) !important;
}

.navbar-nav li:hover > a {
    color: var(--white-50) !important;
}
.dropdown-menu li a:hover {
    background-color: var(--blue-90);
    color: var(--white) !important;

}

/* Content */
.content h1{
    text-align: center;
    padding-top: 50px;
    text-transform: uppercase;
    font-size: 1.1rem;
    font-weight: normal;
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 20px;
    font-weight: 500;
    letter-spacing: 0.5px;
}
.content h1 a,.content h2 a{
    text-decoration: none;
    color: var(--black);
}

.content h1::before, h1::after {
    content: '';
    display: block;
    height: 1px;
    position: absolute;
    bottom: 0;
}

.content h1::before {
    width: 100%;
    background-color: var(--grey-20);
}

.content h1::after {
    width: 100px;
    background-color: var(--blue-90);
    left: calc(50% - 50px);
    bottom: 0px;
    height: 2px;
}

.content h2{
    padding-top: 50px;
    text-transform: uppercase;
    font-size: 1.1rem;
    font-weight: normal;
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 20px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.content h2::before, h2::after {
    content: '';
    display: block;
    height: 1px;
    position: absolute;
    bottom: 0;
}

.content h2::before {
    width: 100%;
    background-color: var(--grey-20);
}

.content h2::after {
    width: 100px;
    background-color: var(--blue-90);
    bottom: 0px;
    height: 2px;
}
.content .content-link{
    color: var(--black);
    text-decoration: none;
}
.col-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.circle {
    width: 80%;
    height: 0;
    padding-bottom: 80%;
    border-radius: 50%;
    background-color: var(--white);
    border: 3px solid var(--grey-20);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.circle:hover {
    border: 3px solid var(--blue-90);
    transition: 0.4s;
}

.circle img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    border: 0;
    border-radius: 50%;
}

.square {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background-color: var(--white);
    border: 3px solid var(--green-110);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0px 5px 0px 0px var(--green-100);
    margin-bottom: 10px;
}
.square:hover {
    border: 3px solid var(--green-90);
    transition: 0.4s;
}
.square img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    border: 0;
}

.nav-tabs{
    border-bottom: 1px solid var(--grey);
}
.nav-tabs .nav-link {
    background-color: var(--grey-70);
    color: var(--black);
    border: none;
    border-radius: 0;
    padding: 10px 20px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;

}

.nav-tabs .nav-link:not(.active):hover {
    background-color: var(--blue-90);
    color: var(--white);
    transition: 0.4s;
}

.nav-tabs .nav-link.active {
    background-color: var(--blue);
    color: var(--white);
    border: none;
    border-bottom-color: transparent;
    outline: none;
}

.nav-tabs .nav-link.active:hover {
    background-color: var(--blue);
    color: var(--white);
    transition: 0.4s;
}


.gold-star{
    color: var(--gold);
    font-size: 0.8rem;
}
.grey-star{
    color: var(--grey-40);
    font-size: 0.8rem;
}
.price{

    color: var(--green-80);
    font-weight: bold;
    word-spacing: 10px;
}
.price strike{

    color: var(--red-80);
    font-weight: bold;
    word-spacing: 10px;
}

.blog-date{
    color: var(--blue-90);
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.blog-title{
    color: var(--black);
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
/* Button */
.btn-cart {
    color: var(--black);
    background-color: var(--grey-20);
    border-color: var(--grey-20);
    padding: 0.9rem 1rem;
    border-radius: 0;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.btn-cart:hover {
    color: var(--black);
    background-color: var(--grey-10);
    border-color: var(--grey-10);
    transition: 0.4s;
}

.btn-cart:focus, .btn-cart.focus {
    box-shadow: 0 0 0 0.25rem rgba(244, 244, 244, 0.5);
}

.btn-cart.disabled, .btn-cart:disabled {
    color: var(--black);
    background-color: var(--grey-20);
    border-color: var(--grey-20);
}

.btn-cart:not(:disabled):not(.disabled):active, .btn-cart:not(:disabled):not(.disabled).active,
.show > .btn-cart.dropdown-toggle {
    color: var(--black);
    background-color: var(--grey);
    border-color: var(--grey);
}

.btn-cart:not(:disabled):not(.disabled):active:focus, .btn-cart:not(:disabled):not(.disabled).active:focus,
.show > .btn-cart.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(244, 244, 244, 0.5);
}
/* Shipping strip */
.commitments{
    background-color: var(--blue-90);
    border-top: 5px solid var(--purle);
    color: var(--white);
}
.pipe-left{
    border-left: 0.5px solid var(--white-50);
}
.pipe-right{
    border-right: 0.5px solid var(--white-50);
}
/* Footer */
footer {
    background-image: url(../img/footer-bg.jpg);
    background-size: cover;
    background-attachment: fixed;
    color: var(--white-50);
    background-color: var(--black);
    font-weight: 300;
}
footer a{
    color: var(--white-50);
    text-decoration: none;
}
footer a:hover{
    color: var(--white-50);
    text-decoration: underline;
    transition: 0.4s;
}
footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

footer ul li {
    height: 30px;
    line-height: 30px;
}

footer h3{
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.developer{
    text-align: right;
}
/* Header */
.header{
    background-size: cover;
    background-attachment: fixed;
    height: 100px;
}
.header h1 a,.header h1 a:hover{
    font-size: 2rem;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.5px;
    text-transform: uppercase;

}
/* Checkout */
.h1{
    padding-top: 50px;
    text-transform: uppercase;
    font-size: 1.1rem;
    font-weight: normal;
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 20px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.h1::before, h2::after {
    content: '';
    display: block;
    height: 1px;
    position: absolute;
    bottom: 0;
}

.h1::before {
    width: 100%;
    background-color: var(--grey-20);
}
.h1::after {
    width: 100px;
    background-color: var(--blue-90);
    bottom: 0px;
    height: 2px;
}
/* MISC */
.text-capitalize{
    text-transform: uppercase !important;
}
.sulata{
    width: 70px;
    height: auto;
}
.top-bar,.top-bar a{
    font-size: 0.9rem;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-decoration: none;
}
.logo-bar,.logo-bar a{
    font-size: 0.9rem;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-decoration: none;
}
.currency,.currency:hover {
    display: inline-block;
    font-size: 0.9em !important;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0.25em 0.5em;
    background-color: var(--grey-40);
    color: var(--black);
}
.currency-selected,.currency-selected:hover {
    display: inline-block;
    font-size: 0.9em !important;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0.25em 0.5em;
    background-color: var(--blue);
    color: var(--white);
}



.side-categories ul li a{
    color: var(--black);
    text-decoration: none;
    line-height: 25px;
}
.side-categories ul li a:hover{
    text-decoration: underline;
}
.side-blogs ul li a{
    color: var(--black);
    text-decoration: none;
    line-height: 25px;
}
.side-blogs ul li a:hover{
    text-decoration: underline;
}
.featured-prod-name,.latest-prod-name,.bestseller-prod-name {
    display:inline-block;
}
.su-hide{
    display: none;
}
.offscreen {
    position: absolute;
    top: -99999px;
    left: -99999px;
}
.qty{
    width:100px;
}
.modal.fade .modal-dialog {
    transition: transform .3s ease-out;
    transform: translateY(-50px);
}
.modal.fade.show .modal-dialog {
    transform: translateY(0);
}
.modal.fade .modal-dialog {
    max-width: 80%;
}
.accordion-button{
    background-color: var(--red-90) !important;
    color: var(--white);
}
.accordion-button a{
    color: var(--white);
}
.accordion-button:not(.collapsed){
    color: var(--white);
}
.accordion-body{
    font-size: 0.9rem;
}
.accordion-body label{
    color: var(--grey);
    padding-top: 5px;
}
.cart-thumb{
    width: 75px;
    height: auto;
    border:0;
}
.brand-thumb{
    width: 150px;
    height: auto;
}
.blog-picture{
    width: 300px;
    height: auto;
    float:left;
    margin-right: 10px;
    margin-bottom: 10px;
    box-sizing:border-box;
}
.placeholder::placeholder {
    color: var(--grey-40);
}
.text-warning{
    color: var(--orange) !important;
}
.text-success{
    color: var(--green) !important;
}
.text-danger{
    color: var(--crimson) !important;
}
#mega-menu {
    display: none;
}

#mega-menu {
    display: none;
    position: absolute;
    width: 100vw;
    left: 0;
    z-index: 9999;
    background-color: #E8F1FD;
    padding-bottom: 20px;
}
#mega-menu ul {
    list-style: none;
    padding: 0;
}

#mega-menu ul li {
    display: block;
    margin: 0;
    font-size: 0.85rem;
}

#mega-menu ul li a {
    color: var(--black);
    text-decoration: underline;
}
#mega-menu ul li strong {
    display: block;
}
#mega-menu ul li strong a {
    text-decoration: none;
}
#mega-menu ul li a:hover {
    color: var(--black);
    text-decoration: none;
}
#mega-menu ul li a img{
    border:2px solid var(--red-90);
    margin-top: 5px;
    width:100%;
    height: auto;
}
#mega-menu ul li a img:hover{
    border:2px solid var(--red);
    transition: 0.3s;
}
#mega-menu .featured-cat{
    font-size: 0.8rem;
}
#mega-menu .featured-prod{
    font-size: 0.8rem;
}
.whatsapp {
    position:fixed;
    right:10px;
    bottom: 25px;
    width: 75px;
    height: auto;
    -webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.4));
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.4));
    z-index: 999999;
}

.tooltip {
    position: relative;
}

.my-tooltip-class {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    background-color: #000;
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 4px;
}

.tooltip:hover .my-tooltip-class {
    display: block;
}

.banner-img{
    border: 1px solid var(--grey-20);
    box-sizing: border-box;
}
.border-green{
    border: 1px solid var(--red-90);
}
/*Blinking */
.blink-3 {
    animation: blink-3 1s linear 3;
}

@keyframes blink-3 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media (min-width: 576px) {
    .login-modal-dialog {
        max-width: 50% !important;
    }
}
@media (max-width: 575px) {
    .login-modal-dialog {
        max-width: 100%;
    }
}
.tbl thead tr th{
    font-size: 0.9rem;
    font-weight: 600;
}
.btn-form{
    background-color: var(--red-90);
    color: var(--white);
}
.btn-form:hover{
    background-color: var(--red-70);
    color: var(--white);
}
.bg-light{
    background-color: var(--blue-10) !important;
}

.search-result{
    position:absolute;
    z-index: 100;
    
}
.search-result table{
    width:100%;
    float: right;
}
.search-result td{
    border: 1px solid #D8D8D8; /* gray border */
    padding:10px;
    background-color: white;
}

.search-result td:hover{
   background-color: #eceff4;
}
.search-result .name{
    font-weight: bold;
}
.search-result .price{
    font-weight: bold;
    color:orange;
}
.search-result img{
    display: inline-block;

}
.search-result .des{
    display: inline-block;
    margin-left: 5px;
}