.page-header{
    background: url('/assets/images/page-header-bg.png') no-repeat top center;
    background-size: cover;
    min-height: 350px;
    @include media-breakpoint-down(sm){
        min-height: 280px;
    }
    @include flexbox();
    @include align-items(flex-end);
    .container{
        margin-bottom: 20px;
        @include media-breakpoint-up(sm){
            margin-bottom: 50px;
        }
    }
    .top{
        @include flexbox();
        @include justify-content(space-between);

        @include media-breakpoint-down(md){
            @include align-items(baseline);
            @include flex-direction(column);
        }
        .title{
            div,h1 {
                font-weight: bold;
                font-size:30px;
                color:#fff;
                margin-bottom: 0;
                @include media-breakpoint-down(md){
                    font-size: 23px;
                }
                &::before{
                    content:'';
                    display: block;
                    width: 50px;
                    height:2px;
                    background:$secondary;
                    position: relative;
                    float: left;
                    margin-right: 15px;
                    top: 22px;
                    @include media-breakpoint-down(sm){
                        width: 30px;
                        top: 12px;
                    }
                }
            }
        }
        nav{
            @include media-breakpoint-down(md){
                margin-top: 25px;
            }
        }
        ol{
            margin-bottom: 0;
        }
        .breadcrumb-item{
            line-height: 1;
        }
    }
    p{
        color: #adadad;
        @include media-breakpoint-down(md){
            display: none;
        }
    }
}


.page{
    aside{
        .title{
            margin-bottom: 20px;
            span{
                display:block;
                line-height: 1.2;
                &:first-child{
                    font-size: 21px;
                    font-weight: 500;
                    color: $primary;
                    letter-spacing: -.2px;
                }
            }
        }
        .menu-widget{
            @include media-breakpoint-up(xxxl){
                width:85%;
            }
            width:100%;
            padding:35px 25px;
            box-shadow: 0 0 10px #eaeaea;

            ul{
                li{
                    &:last-child > a { border:none;}
                    &.active {
                        position: relative;
                        a { color: $primary; }
                        ul {
                            display: none;
                        }

                    }
                    a {
                        color: inherit;
                        display: block;
                        padding: 15px 0;
                        border-bottom:1px solid #eaeaea;
                        &:hover{ color: $primary;}
                    }
                    ul {
                        margin-left: 20px;
                        display: none;
                    }
                }
            }
        }
    }

    .page-title{
        font-size: 23px;
        color: $primary;
        letter-spacing: -.3px;
    }

    .page-content{
        p{
            display: inline-block;
        }
    }
}


.page.contact{
    .title{
        margin-bottom: 25px;
        span{
            display: block;
            &:first-child{
                font-weight: bold;
                font-size: 20px;
                color: $primary;
            }
        }
    }
    .contact-info,.contact-form{
        padding: 50px 35px;
        height: 100%;
        @include media-breakpoint-down(sm){
            padding: 30px 15px;
        }
    }

    .contact-info{
        background: #F8F8F8;
        color: #585D7D;
        @include flexbox();
        @include justify-content(space-between);
        @include flex-direction(column);
        .contact-list{
            @include media-breakpoint-down(md){
                margin-bottom: 30px;
            }
            li{
                @include flexbox();
                & + li {
                    margin-top: 15px;
                }
                .icon{
                    font-size: 20px;
                    color: $secondary;
                    flex: 0 0 auto;
                    width: 30px;
                }
                .text{
                    padding-top: 7px;
                    @include flexbox();
                    @include flex-direction(column);
                    a{
                        color: inherit;
                        & + a {
                            margin-top: 8px;
                        }
                    }
                }
            }
        }
        .social{
            @include flexbox();
            @include align-items(center);
            @include justify-content(center);
            li{
                margin: 0 15px;
                a{
                    font-size: 21px;
                    &:hover{
                        color: $secondary;
                    }
                }
            }
        }
    }

    .contact-form{
        background: #FCFCFC;
        .form-control {
            border-radius: 0;
            background: none;
            border-color:#E7E8EF;
        }
    }

}

.blog-item{
    .wrapper{
        padding: 8px;
        box-shadow: 0 0 10px #eaeaea;
        position: relative;
        height: 100%;
        @include flexbox();
        @include flex-direction(column);
        &:hover{
            figure{
                &::after{
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba($secondary, .6);
                    content: '';
                    display: block;
                    z-index: 0;
                }
            }
        }
        .content{
            @include flexbox();
            @include flex-direction(column);
            @include justify-content(space-between);
            height: 100%;
            .title{
                font-weight: 500;
                font-size: 16px;
                color: $primary;
                margin-bottom: 10px;
                @include media-breakpoint-down(xxl){
                    font-size: 14px;
                    margin-bottom: 7px;
                }
            }
            .text{
                font-size: 13px;
                @include text-clamp(2);
                margin-bottom: 10px;
            }
            .view{
                color: $primary;
                font-size: 13px;
                svg {
                    color: $secondary;
                    font-size: 16px;
                }
            }
        }

    }
}


.work-area-item {
    margin-bottom: 90px;
    &:hover{
        .detail {
            .lnk {
                &::after {
                    animation: fade-in 1s infinite;
                }
                &::before {
                    animation: fade-in 1s .3s infinite;
                }

            }
        }
    }
    .images {
        position: relative;
        .img-wrapper {
            width: 100%;
            overflow: hidden;
            &.ratio-special{
                --bs-aspect-ratio: calc(3 / 4 * 85%);
            }
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        .small {
            position: absolute;
            right: -20px;
            bottom: -20px;
            width: 100%;
            transform: scale(.4);
            transform-origin: right bottom;
            transition: transform .1s cubic-bezier(0.47, 0, 0.745, 0.715);
            border-top: 25px solid #fff;
            border-left: 25px solid #fff;
            z-index: 0;
            @include breakpoint(576){
                right: 15px;
                bottom: -30px;
                border: 25px solid #fff;
            }
            &::after {
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                background:rgba($primary,.7);
                content: '';
                display: block;
                z-index: 1;
                position: absolute;
                transition: opacity .1s cubic-bezier(0.47, 0, 0.745, 0.715);
            }
            &:hover {
                border:none;
                transform: scale(1);
                right: 0px;
                bottom: 0px;
                &::after {
                    opacity: 0;
                }
            }
        }
    }
    .title{
        @include flexbox();
        @include align-items(center);
        font-size: 18px;
        color: $primary;
        font-weight: 500;
        margin-bottom: 30px;
        .icon{
            max-height: 55px;
            max-width: 100px;
            padding-right: 10px;
            margin-right: 10px;
            border-right: 2px solid #eaeaea;
        }
    }
    .detail{
        border:2px solid #eaeaea;
        padding: 20px 35px;
        color: $primary;
        font-weight: 500;
        font-size: 18px;
        margin-top: 30px;
        @include flexbox-inline();
        @include align-items(center);
        @include media-breakpoint-down(sm){
            padding: 10px 25px;
            font-size: 13px;
        }
        svg{
            font-size: 24px;
            margin-left: 10px;
        }
        .lnk{
            width: 53px;
            height: 53px;
            @include flexbox();
            @include align-items(center);
            @include justify-content(center);
            text-align: center;
            color: #fff;
            font-size: 13px;
            border-radius: 50%;
            background: $secondary;
            line-height: 1;
            margin-left: 30px;
            position: relative;
            z-index: 1;
            @include media-breakpoint-down(sm){
                width: 43px;
                height: 43px;
                font-size: 11px;
            }
            &::before, &::after{
                transition: .4s;
                width: calc(100% + 14px);
                height: calc(100% + 14px);
                background: rgba($secondary,.5);
                position: absolute;
                left: 50%;
                top: 50%;
                content: '';
                display: block;
                border-radius: 50%;
                transform: translateX(-50%) translateY(-50%);
                z-index: -1;
                @include media-breakpoint-down(sm){
                    width: calc(100% + 7px);
                    height: calc(100% + 7px);
                }
            }
            &::after{
                width: calc(100% + 28px);
                height: calc(100% + 28px);
                @include media-breakpoint-down(sm){
                    width: calc(100% + 14px);
                    height: calc(100% + 14px);
                }
                background: rgba($secondary,.3);
            }
        }
    }
}

.brand-list-item-2{
    min-height: 220px;
    &:hover{
        .wrapper{
            figure{
                background: #fff;
                img{
                    filter: grayscale(0);
                }
            }
            .view{
                transform: translateY(10px);
                opacity: 1;
            }
            .title{
                transform: translateY(0);
            }
        }
    }
    .wrapper{
        overflow: hidden;
        transition:all .4s linear;
        box-shadow: 0 0 10px #eaeaea;
        padding: 25px;
        position: relative;
        text-align: center;
        height: 100%;
        @include flexbox();
        @include align-items(center);
        @include justify-content(center);
        @include flex-direction(column);
        figure{
            transition:all .4s linear;
            height: 95px;
            background: #f7f7f7;
            margin-bottom: 0;
            padding: 10px;
            border:2px solid #f7f7f7;
            display: block;
            @include flexbox();
            @include justify-content(center);
            @include align-items(center);
            margin-top: auto;
            @include media-breakpoint-down(sm){
                height: 120px;
            }
            img{
                width: auto;
                height: auto;
                max-width: 90%;
                max-height: 90%;
                object-fit: contain;
                filter:grayscale(1);
            }
        }
        .title{
            transition:.1s linear;
            font-size: 18px;
            color: $primary;
            margin-top: auto;
            transform: translateY(20px);
            @include media-breakpoint-down(xl){
                font-size: 16px;
            }
            @include media-breakpoint-down(sm){
                font-size: 13px;
            }
        }
        .view{
            transition: .2s linear;
            font-size: 12px;
            line-height: 26px;
            transform: translateY(20px);
            opacity: 0;
            svg {
                font-size: 25px;
                color: $secondary;
            }
        }
    }
}



.suppliers-detail{
    figure{
        border: 2px solid #eaeaea;
        img{
            max-width: 60%;
            max-height: 80%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateY(-50%) translateX(-50%);
        }
    }
    .title{
        font-size: 21px;
        color: $primary;
        font-weight: bold;
        @include flexbox();
        @include align-items(center);
        margin-bottom: 25px;
        &::before{
            width: 4px;
            min-height: 40px;
            height: 100%;
            content: '';
            display: block;
            background: $secondary;
            margin-right: 10px;
        }
    }
}


.product-category-item{
    .wrapper{
        //&:hover{
        //    .gtitle{opacity: 0;}
        //    .overlay{ transform: scale(1); opacity: 1}
        //}
        position: relative;
        .gtitle{
            transition: .4s;
            position: absolute;
            padding: 25px;
            width: 100%;
            color: #fff;
            font-weight: bold;
            font-size: 16px;
            bottom: 0;
            min-height: 140px;
            @include flexbox();
            @include align-items(flex-end);
            background: rgb(12,20,74);
            background: -moz-linear-gradient(0deg, rgba(12,20,74,1) 0%, rgba(12,20,74,0.5438550420168067) 66%, rgba(12,20,74,0) 100%);
            background: -webkit-linear-gradient(0deg, rgba(12,20,74,1) 0%, rgba(12,20,74,0.5438550420168067) 66%, rgba(12,20,74,0) 100%);
            background: linear-gradient(0deg, rgba(12,20,74,1) 0%, rgba(12,20,74,0.5438550420168067) 66%, rgba(12,20,74,0) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0c144a",endColorstr="#0c144a",GradientType=1);
            white-space: pre-line;
        }
        figure{
            min-height: 325px;
        }
        .overlay{
            opacity: 0;
            transform: scale(0);
            transition: .1s linear;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: rgba($primary,.7);
            overflow: hidden;
            padding: 35px;
            @include flexbox();
            @include align-items(center);
            @include flex-direction(column);
            @include media-breakpoint-down(xxxl){
                padding: 15px;
            }
            .title{
                text-align: center;
                padding-bottom: 8px;
                margin-bottom: 20px;
                position: relative;
                span{
                    display: block;
                    &:first-child{
                        font-size: 13px;
                    }
                    &:last-child{
                        font-weight: 500;
                        font-size: 15px;
                        color: #fff;
                    }
                }
                &::after{
                    content: '';
                    display: block;
                    position: absolute;
                    left: 50%;
                    right: auto;
                    transform: translateX(-50%);
                    bottom: 0;
                    width: 30%;
                    height: 2px;
                    background: $secondary;
                }
            }
            ul{
                width: 100%;
                margin-top: 30px;
                display: grid;
                grid-column: 2;
                li{
                    padding-right: 20px;
                    margin-bottom: 20px;
                    &:nth-child(1){grid-area: 1 / 1 / 2 / 2;}
                    &:nth-child(2){grid-area: 1 / 2 / 2 / 3;}
                    &:nth-child(3){grid-area: 2 / 1 / 3 / 2;}
                    &:nth-child(4){grid-area: 2 / 2 / 3 / 3;}
                    &:nth-child(5){grid-area: 3 / 1 / 4 / 2;}
                    &:nth-child(6){grid-area: 3 / 2 / 4 / 3;}
                    &:nth-child(7){grid-area: 4 / 1 / 5 / 2;}
                    &:nth-child(8){grid-area: 4 / 2 / 5 / 3;}
                    &:nth-child(+n+9){
                        display: none;
                    }
                    @include media-breakpoint-down(xxxl){
                        padding-right: 10px;
                        margin-bottom: 10px;
                    }
                    a {
                        color: inherit;
                        font-weight: bold;
                        &:hover{
                            color: #fff;
                        }
                    }
                }
            }
            .all{
                color: #fff;
                font-size: 12px;
                position: absolute;
                bottom: 30px;
                left: 0;
                width: 100%;
                text-align: center;
            }
        }
    }
}

.product-subcategory-item{
    .wrapper{
        box-shadow: 0 0 10px #eaeaea;
        padding: 25px;
        font-weight: bold;
        border:1px solid transparent;
        height: 100%;
        @include flexbox();
        @include align-items(center);
        &:hover{
            border-color: $secondary;
        }
        a{
            color: $primary;
            font-weight: normal;
            width: 100%;
            @include flexbox();
            @include justify-content(space-between);
            @include align-items(center);
            @include media-breakpoint-down(md){
                font-size: 13px;
            }
            @include media-breakpoint-down(sm){
                font-size: 12px;
            }
            @include media-breakpoint-down(xs){
                font-size: 11px;
            }
            &:hover{
                font-weight: bold;
                span {
                    color: $secondary !important;
                }
            }
            span{
                font-size: 18px;
                border:1px solid $secondary;
                padding: 4px 10px;
                color: $secondary;
                @include media-breakpoint-down(md){
                    font-size: 16px;
                }
                @include media-breakpoint-down(sm){
                    font-size: 13px;
                }
                @include media-breakpoint-down(xs){
                    font-size: 12px;
                }
            }
        }
    }
}



.brand-detail{
    figure{
        @include media-breakpoint-down(xxl){
            height: 290px;
            overflow: hidden;
        }
        @include media-breakpoint-down(sm){
            height: 220px;
        }
    }
    .title{
        @include flexbox();
        @include justify-content(space-between);
        @include align-items(center);
        img{
            height: 45px;
        }
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid #eaeaea;
    }
}

.product-subcategories{
    a {
        font-size: 16px;
        font-weight: 500;
        color: #818181;
        padding-left: 25px;
        position: relative;
        @include media-breakpoint-down(sm){
            font-size: 14px;
        }
        &::before{
            content: '';
            display: block;
            width: 15px;
            height: 15px;
            border:1px solid #818181;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            border-radius: 50%;
        }
        &::after{
            content: '';
            display: block;
            position: absolute;
            width: 11px;
            height: 11px;
            border-radius: 50%;
            background: $secondary;
            left: 2px;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0;
        }
        &:hover, &.active{
            font-weight: bold;
            color: $primary;
            &::after{
                opacity: 1;
            }
        }
    }
}


.brand-products-header{
    @include flexbox();
    //@include justify-content(space-between);
    @include align-items(center);
    @include justify-content(center);

    .title{
        color: $primary;
        font-weight: bold;
        font-size: 23px;
        @include media-breakpoint-down(lg){
            font-size: 17px;
        }
    }

    .search{
        flex: 0 0 auto;
        width: 400px;
        @include media-breakpoint-down(lg){
            width: 400px;
        }
        @include media-breakpoint-down(sm){
            width: 90%;
        }
        .form-group{
            position: relative;
            .form-control{
                border-radius: 0;
                height: 45px;
                @include media-breakpoint-down(lg){
                    font-size: 13px;
                }
            }
            button{
                position: absolute;
                top: 5px;
                right: 10px;
                padding: 0;
                width: 35px;
                height: 35px;
                color: #fff;
                @include media-breakpoint-down(sm){
                    display: none;
                }
                svg{
                    line-height: 0;
                }
            }
        }
    }
}

.page.brand{
    .sub-title{
        font-size: 18px;
        font-weight: bold;
        color: $secondary;
        position: relative;
        padding-left: 60px;
        &::before{
            content: '';
            display: block;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            position: absolute;
            width: 50px;
            height: 2px;
            background: $secondary;
        }
    }
}

.product-item{
    &:hover{
        .wrapper{
            transform: scale(1.050);
            border-color: transparent;
        }
    }
    .wrapper{
        box-shadow: 0 0 10px #eaeaea;
        padding: 10px;
        border: 2px solid transparent;
        height: 100%;
        @include magic-border(2px, rgba(51,199,255,0.38), 0.1s, 1);
        @include flexbox();
        @include flex-direction(column);
        transition: .5s;

        &:hover{
            figure{
                box-shadow: 0 0 10px #eaeaea;

            }
        }

        figure{
            margin: 0;
            border:2px solid #eaeaea;
        }

        .content{
            @include flexbox();
            @include justify-content(center);
            @include flex-direction(column);
            height: 100%;
            .title{
                margin: 10px 0;
                font-size: 14px;
                font-weight: bold;
                display: block;
                color: $primary;
                flex-grow: 1;
                @include media-breakpoint-down(sm){
                    font-size: 12px;
                }
            }
            .text{
                font-size: 13px;
                flex-grow: 1;
                //height: 59px;
                @include text-clamp(3);
                @include media-breakpoint-down(sm){
                    font-size: 10px;
                }
            }
            button{
                @include media-breakpoint-down(sm){
                    font-size: 10px;
                }
            }
        }

    }
}

.partner-item{
    & + .partner-item {
        margin-top: 30px;
        padding-top: 30px;
        border-top: 3px solid $secondary;
    }
    .title{
        font-weight: bold;
        color: $primary;
        font-size: 23px;
        margin-bottom: 20px;
        @include media-breakpoint-down(sm){
            font-size: 17px;
        }
    }
    figure{
        width: 245px;
        height: 160px;
        border:1px solid #d2d2d2;
        overflow: hidden;
        display: inline-block;
        padding: 0 20px;
        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
    .documents{
        .dtitle{
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 20px;
            color: $primary;
            @include media-breakpoint-down(sm){
                font-size: 14px;
            }
        }
    }
}

.document-item{
    .wrapper{
        width: 100%;
        box-shadow: 0 0 10px #eaeaea;
        height: 100%;
        padding: 20px;
        position: relative;
        @include flexbox();
        figure{
            margin: 0;
            max-height: 200px;
            width: 150px;
            padding: unset;
        }
        .content{
            padding-left: 25px;
            @include flexbox();
            @include flex-direction(column);
            .title{
                font-size: 16px;
                margin-bottom: 10px;
                @include text-clamp(1);
                @include media-breakpoint-down(sm){
                    @include text-clamp(2);
                    font-size: 13px;
                }
            }
            .text{
                @include text-clamp(3);
                @include flex-grow(1);
                @include media-breakpoint-down(sm){
                    font-size: 11px;
                }
            }
            .view{
                @include media-breakpoint-down(sm){
                    font-size: 12px;
                }
                color: $primary;
                svg{
                    font-size: 18px;
                    line-height: 0;
                    color: $secondary;
                }
            }
        }
    }
}


.offer-form{
    .title{
        color: $primary;
        font-weight: bold;
        font-size: 24px;
        margin-bottom: 15px;
        @include media-breakpoint-down(md){
            font-size: 18px;
        }
        @include media-breakpoint-down(sm){
            font-size: 16px;
        }
    }
    .form-control{
        font-size: 14px;
        border-radius: 0;
        color: $primary;
        @include media-breakpoint-down(sm){
            font-size: 12px;
        }
        &[readonly]{
            background: #fff;
        }
    }
    input.form-control{
        height: 45px;
    }
    .total{
        position: absolute;
        top: 5px;
        right: 10px;
        font-size: 18px;
        color: $primary;
        font-weight: bold;
        @include flexbox();
        @include justify-content(center);
        @include align-items(center);
        span.icon{
            padding: 3px 12px;
            cursor: pointer;
            @include noselect();
            &:hover{
                color: $secondary;
            }
        }
        .number{
            min-width: 15px;
            max-width: 120px;
            font-size: 14px;
            border:none;
            background: none;
            text-align: center;
        }
    }
    .file{
        width: 100%;
        height: 45px;
        padding: 0.5rem 1rem;
        border: 1px solid #ced4da;
        @include flexbox();
        @include justify-content(space-between);
        @include align-items(center);
        div.text{
            max-width: 75%;
            @include text-clamp(1);
            &.added{
                width: 100%;
                max-width: 100%;
            }
        }
        span.text{
            color: $primary;
            font-weight: bold;
        }
        span.name{
            color: $primary;
            font-size: 13px;
        }
        .delete{
            color: #f00;
            font-weight: bold;
            margin-left: 5px;
            float: right;
        }
    }
}



.repeater{
    padding: 15px;
    background:#f5f5f5;
    position: relative;
    .add {
        position: absolute;
        padding: 3px 8px;
        background:#3fbb76;
        font-size: 11px;
        right: 15px;
        top: -10px;
        font-weight: bold;
        color: #fff;
        z-index: 99;
    }
    .repeat{
        position: relative;
        & + .repeat{
            margin-top: 35px;
        }
        h5{
            color: $primary;
        }
        .delete {
            position: absolute;
            padding: 3px 8px;
            background:#f00;
            font-size: 11px;
            right: 0px;
            top: 0;
            font-weight: bold;
            color: #fff;
            z-index: 99;
        }
    }
}