/* Global Css*/

body {
    line-height: 2.4rem
}

.header-icon {
    display: inline-block;
    width: 2.6rem;
    height: 3.6rem;
    line-height: 3.6rem;
}


/* Custom css */

// Header
.header {
    z-index: 1041;
    .sticky-header.fixed {
        background-color: $secondary-color;
        .header-right {
            padding-right: 2rem;
        }
    }
    .logo a {
        max-width: 100%;
    }
    .header-top {
        .header-right {
            padding: .2rem 0;
        }
    }
    .header-middle {
        .header-left {
            padding: 2.7rem 0;
        }
        .header-center {
            padding-left: 1.6rem;
            padding-right: 1.8rem;
        }
        .header-right {
            padding: 2.2rem 0;
        }
    }
    .menu-item {
        float: left;
        a {
            display: inline-block;
            padding: .5rem 1rem;
            line-height: 26px;
        }
    }
    .header-dropdowns {
        margin-right: 2.5rem;
    }
    .dropdown-arrow .badge-circle {
        top: -4px;
    }
    .icon-shopping-cart {
        font-size: 2.7rem;
    }
    .cart-dropdown {
        max-height: 2.7rem;
        margin-left: .2rem;
    }
    .header-search-wrapper {
        .select-custom::after {
            right: 1.6rem;
        }
        .btn {
            padding-right: 3px;
        }
    }
}

.main-nav .menu>li>a,
.side-menu-title,
.section-title,
.section-sub-title {
    text-transform: none;
}

// Menu
.main-nav .menu>li>a {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.35px;
    line-height: 20px;
}

.menu-vertical {
    margin-bottom: 0;
    >li {
        padding: 1.4rem 0;
        margin: 0 2rem;
        &:not(:last-child) {
            border-bottom: 1px solid #e7e7e7;
        }
        >a {
            font-weight: 600;
            color: #222529;
        }
    }
}

.side-menu-title {
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
    font-weight: 600;
    i {
        margin-right: 0.8rem;
        font-size: 1.5rem;
    }
}

// Home Slide & banner
.home-slide {
    img {
        min-height: 300px;
    }
    h5 {
        margin-top: 1.6rem;
        margin-right: 1.6rem;
    }
}

.slide-1,
.slide-2 {
    h4:not(.text-price) {
        color: rgba(34, 37, 41, 0.6);
        font-weight: 500;
        letter-spacing: .14em;
    }
    h3 {
        font-size: 2.5em;
    }
    .text-price {
        font-size: 2.375em;
        line-height: .95;
        b {
            margin-left: -8px;
            font-size: 200%;
            vertical-align: text-top;
        }
    }
    .btn {
        padding: 1em 3em;
        font-size: .9375em;
        letter-spacing: .01em;
    }
}

.slide-1 {
    left: 12%;
    h4:not(.text-price) {
        font-size: 1.3125em;
    }
}

.slide-2 {
    right: 12%;
    h4:not(.text-price) {
        font-size: 1.1875em;
    }
}

// info-box component
.info-box {
    padding: 2.4rem 0 1.1rem;
    h4 {
        margin-top: -1px;
        letter-spacing: -.025em;
    }
    &:not(:last-child) .info-box-icon-left {
        border-right: 1px solid $border-color;
    }
    .info-box-icon-left {
        display: flex;
        align-items: center;
        margin-bottom: 1.2rem;
    }
}

// feature-box component
.feature-boxes-container {
    margin-top: 2.8rem;
}

.feature-box {
    font-size: 1.3rem;
    .feature-box-content {
        color: #777;
    }
    i {
        margin-bottom: 1.7rem;
        font-size: 3.6rem;
    }
    h3 {
        font-size: 1.6rem;
    }
    h5 {
        margin-top: 4px;
        margin-bottom: 0;
        color: #555;
        font-family: $font-family;
        font-weight: 600;
        line-height: 1.2;
    }
    p {
        font-size: 1.3rem;
    }
}

// section title
.section-title {
    font-size: 2.4rem;
}

.section-sub-title {
    margin-bottom: 2.3rem;
    color: #777;
    font-size: 1.4rem;
}

// Product Component
.product-default {
    &:not(.product-widget).product-title {
        margin-bottom: .45rem;
        font-family: $second-font-family;
        letter-spacing: -.01em;
    }
    .ratings-container {
        margin-bottom: 9px;
        margin-left: 0;
    }
    .price-box {
        margin-top: 0.3rem;
    }
    .product-label.label-sale {
        padding: 5px 10px;
        background-color: #fe5858;
        font-size: 11px;
        border-radius: 20px;
    }
    .product-price {
        color: #444;
    }
    .old-price {
        letter-spacing: 0;
        color: #a7a7a7;
    }
}

.product-section {
    margin-bottom: 9px;
}

.product-section-2 {
    margin-bottom: 1.5rem;
    .section-sub-title {
        margin-bottom: 2.3rem;
    }
}

.product-section-3 {
    margin-bottom: 1.5rem;
}

.inner-icon {
    margin-bottom: 2.2rem;
}

// banner
.banner-container {
    padding-top: 4.8rem;
    border-top: 1px solid $border-color;
    .banner-layer {
        right: 8%;
    }
    h3 {
        font-size: 2em;
    }
    h5 {
        margin-right: 8px;
        font-size: 0.6875em;
    }
    h4 {
        margin-bottom: 1.4rem;
        font-size: 1.25em;
        b {
            font-size: 200%;
            vertical-align: text-top;
        }
    }
    .btn-modern.btn-sm {
        font-size: 11.2px;
        padding: 1.12rem 2.24rem;
    }
}

.sale-banner {
    img {
        min-height: 400px;
        object-fit: cover;
    }
    .banner-layer {
        left: 11%;
    }
    h5 {
        font-size: 2.0625em;
        color: rgba(255, 255, 255, 0.7);
    }
    h4 {
        font-size: 3.125em;
    }
    .text-sale {
        margin-left: -1rem;
        font-size: 10.625em;
        line-height: .95;
        small {
            display: inline-block;
            margin-left: -9%;
            width: 1em;
            font-size: 27%;
            word-break: break-all;
            text-align: center;
            font-weight: inherit;
            white-space: normal;
        }
    }
    .category-banner {
        padding: 3.8rem 13%;
        background-position: center top;
        h5 {
            font-size: 1.75em;
        }
        h4 {
            font-size: 2.625em;
        }
        .text-sale {
            font-size: 9em;
        }
    }
}

.brands-slider {
    padding-right: 9px;
    padding-left: 9px;
    margin-bottom: 5.2rem;
    img {
        max-width: 140px;
        max-height: 60px;
    }
}

.banner-container,
.sale-banner {
    .banner {
        margin-bottom: 5.1rem;
        background-color: #f7f7f7;
    }
}

.banner-container .banner {
    overflow: hidden;
    img {
        transition: transform .5s;
    }
    &:hover img {
        transform: scale(1.08);
    }
}

// button
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: none;
}

// Footer & newsletter
.newsletter-banner {
    padding: 6rem 0;
    background-color: #f4f4f4;
    h2 {
        font-size: 2.2rem;
        font-weight: 800;
        line-height: 1.2;
    }
    h5 {
        margin-bottom: 0;
        font-size: 1.6rem;
        color: #777777;
        line-height: 1.4;
    }
    .form-control {
        height: 56px;
    }
}

.widget-newsletter {
    input,
    button {
        max-height: 5.2rem;
    }
    button {
        padding: 0 4rem;
    }
    input {
        max-width: 677px;
        padding-left: 2rem;
        border-width: 0;
        &::placeholder {
            color: #999;
            font-size: 1.4rem;
        }
    }
}

// Owl-carousel
.owl-carousel.nav-center-images-only .owl-nav>button {
    top: 37%;
}

.owl-carousel .owl-nav button {
    &.owl-prev,
    &.owl-next {
        font-size: 2rem;
    }
    &.owl-prev {
        left: 1rem;
    }
    &.owl-next {
        right: 1rem;
    }
}

// Responsive
@include mq(lg) {
    .header .header-middle .header-left {
        min-width: 16%;
    }
}

@include mq(lg, max) {
    .sale-banner,
    .banner-container {
        .banner {
            font-size: 1.4rem;
        }
    }
    .info-box {
        &:nth-child(2n) .info-box-icon-left {
            border-right: none;
        }
    }
}

@include mq(md, max) {
    .newsletter-banner {
        h5 {
            margin-bottom: 2.4rem;
        }
    }
    .sale-banner {
        .banner {
            font-size: 1.3rem;
        }
    }
    .banner-container {
        .banner {
            font-size: 4vw;
        }
    }
}

@include mq(sm, max) {
    .sale-banner {
        .banner {
            font-size: 1.2rem;
        }
    }
    .info-boxes-container {
        padding-left: 2rem;
    }
    .info-box {
        padding: 1rem 0;
        .info-box-icon-left {
            margin-bottom: 0;
            justify-content: flex-start
        }
        &:not(:last-child) .info-box-icon-left {
            border-right: none;
        }
    }
    .brands-slider {
        padding: 0;
    }
    .sale-banner .banner-layer {
        left: 5%;
    }
}

@include mq(xs, max) {
    .home-slide h5 {
        margin-right: 5px;
    }
    .slide-2 {
        right: 0;
        width: 60%;
        .text-price b {
            margin-left: -5px;
        }
    }
}