/* colors: */
/*************** GENERAL ********************/
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/cairo/cairo-v4-latin-ext_latin_arabic-regular.eot'); /* IE9 Compat Modes */
    src: local('Cairo'), local('Cairo-Regular'),
    url('../fonts/cairo/cairo-v4-latin-ext_latin_arabic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/cairo/cairo-v4-latin-ext_latin_arabic-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/cairo/cairo-v4-latin-ext_latin_arabic-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/cairo/cairo-v4-latin-ext_latin_arabic-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/cairo/cairo-v4-latin-ext_latin_arabic-regular.svg#Cairo') format('svg'); /* Legacy iOS */
}
body{font-family: 'Cairo', sans-serif;}

*{margin: 0;padding: 0;}
html, body{height:100%;}
html, body, .main-wrapper{width: 100%;max-width: 100%;}
body, .main-wrapper{overflow-x: hidden;}
.main-wrapper{position: relative; min-height: 100%;}
body{color:#111;font-size: 1.3rem;text-align: right;}

::-moz-selection {color: #fff;background: #0473C0;}
::selection {color: #fff;background: #0473C0;}
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background: #f1f1f1;}
::-webkit-scrollbar-thumb {background: #888;}
::-webkit-scrollbar-thumb:hover {background: #555;}

h1, h2, h3, h4, h5, h6{color: #000118;text-transform: capitalize;margin-bottom: 20px;}
.heading-blk{margin-bottom: 30px;}
h1, h2, h3, .heading-blk span{font-weight: 600;}
.heading-blk h2{font-size: 3.7rem;}
.heading-blk h3{font-size: 3rem;}
.heading-blk h4{font-size: 2rem;font-weight: bold;}
.heading-blk:after{content:'';width:60px;height:5px;border-radius: 5px;display: block;background: #000;}
.heading-blk.text-center:after{margin: 0 auto;}
.heading-blk h3.text-white{color: #f3f3f3!important;}

a {color: #0473C0;}
a:hover {text-decoration: none;}
.btn{text-transform: capitalize;border-radius: 10px;}
.btn.focus, .btn:focus {box-shadow: none;}

.d-none{display: none;}
.text-ltr{direction: ltr;display: inline-block;font-family: 'Arial', sans-serif;}
#main-footer, .bg-primary{background-color: #0473C0!important;}
.btn-primary, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle{
background-color: #0473C0!important;color: #fff!important;}
.text-primary,
.heading-blk h3, .heading-blk h4{color: #0473C0!important;}
.border-primary, .btn-primary {
    border-color: #0473C0!important;
}
.btn-white-border{background-color: transparent!important;border: 1px solid #fff;}

a,
.navbar-nav .nav-link:after,
.carousel-control-next-icon, .carousel-control-prev-icon,
.footer-list li:before, .footer-list li a,
.btn-primary,
.usr-actions-lst ul li a
{transition: all 0.5s ease;}

.shadow-regular{box-shadow: 0 3px 20px rgba(0,0,0,0.5);}

.font-lg{font-size: 23px;}
.font-md{font-size: 19px;}
.font-sm{font-size: 15px;}

.btn{position: relative;}
.btn:before{content: '';width:100%;height:0;background: rgba(0,0,0,0.08);position: absolute;top:0;left:0;right:0;display: block;transition: all 0.5s ease;}
.btn:hover:before{height: 100%;}

.user-icon{width: 60px;height:60px;border-radius: 50%;}

.regular-blk-style{border: 1px solid #d9d9d9;border-top: 4px solid #0473C0;}
.border-radius-0{border-radius: 0;}

/* TOP BAR */
#top-bar{padding: 5px 0;font-size: 12px;background: #0473C0;}
#top-bar, #top-bar i{color: #fff;}
.top-bar-data{border-color: rgba(255,255,255,0.5)!important;}
#top-bar .top-bar-f a{padding: 0 10px;}
#top-bar .top-bar-f{margin: 0 -10px;}
#top-bar a{color: #fff;opacity: 1;transition: all 0.5s ease;}
#top-bar a i{margin-left: 5px;}
#top-bar a:hover{opacity: 0.8;}
#top-bar .btn{padding: 2px 22px;}
#top-bar .user-icon{width: 25px;height:25px;}
#top-bar .top-user-blk span{display:inline-block;margin: 0 5px;}
.top-usr-logged{position: relative;}
.usr-actions-blk{    display:none;position: absolute;
    top: calc( 100% + 6px );
    right: 0;

    background: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    z-index: 100;
    width: 180px;
    font-size: 15px;border-radius: 0 0 2px 2px;overflow: hidden;}
.usr-actions-blk a{color: #333!important;
    display: block;background: transparent;padding: 5px 10px!important;}
.usr-actions-blk li:last-child a{border-top: 1px solid #ddd;}
.usr-actions-blk a:hover{background: #0473c0;color: #fff!important;}


/* HEADER */
#main-header{position: relative;z-index: 100;background: #e5ecfa;box-shadow: 0 3px 10px rgba(0,0,0,0.1);}
/*#top-bar, #header-wrap{position: relative;z-index: 1009;}*/
#main-header.header-light{background: rgba(255, 255, 255, 0.85);}

/*#header-wrap.header-fixed{position: fixed;top:0;left:0;right:0;width:100%;background: rgba(255,255,255,1);box-shadow: 0 3px 10px rgba(0,0,0,0.1);}
#header-wrap.header-fixed .navbar-brand img{height:40px;}*/

#header-wrap-top, #header-wrap-bottom{padding: 5px 0;}
.header-extras{display: flex;align-items: center;margin: 0 -10px;}
.header-extras a{position: relative;width: 35px;height: 35px;margin: 0 10px;display: flex;align-items: center;
    justify-content: center;font-size: 14px;}
.header-extras .header-extra-num{position: absolute;right:-10px;top:-10px;
    width: 20px; height:20px;font-size: 11px;background: red;color: #fff;border-radius: 50%;
    display: flex;align-items: center;justify-content: center;font-weight: bold;
}
.header-extras a:hover{/*background: #0473C0;color: #fff;*/}

.navbar-collapse{flex-grow: unset;text-transform: capitalize;}
.navbar-brand{padding-top: 0;}
.navbar-brand img{height:80px;width:auto;padding: 5px 0;transition: all 0.5s ease;}

.navbar-nav{font-size: 17px;}
.navbar-nav .nav-link{color: #fff!important;}
.navbar-nav .nav-link:after{content:'';background-color: #fff!important;width:0%;height:3px;margin:0 auto;display:block;}
.navbar-nav .nav-link:hover:after, .navbar-nav .nav-item.active .nav-link:after{width:15px;}

#navbar-toggler-lnk, #navbar-close-lnk{display: none;}
#navbar-close-lnk{float:right;font-size: 35px;color: rgba(255, 255, 255, 0.5);}
.rtl #navbar-close-lnk{float:left;}
.navbar-nav{clear: both;}


/* FOOTER */
.footer-wrap{padding: 40px 0;}
.footer-links{display: flex;flex-flow: column;/*justify-content: space-between;*/height: 100%;}
.footer-links a{color: #fff;opacity: 1;display: block;font-size: 13px;margin: 7px 0;}
.footer-links a:hover{opacity: 0.8;}

.footer-links .footer-links-parallel{display: flex;}
.footer-links .footer-links-parallel > a{display: inline-block;margin: 2px 0;}
.footer-links .footer-links-parallel a:first-child:after{content:'';height:2px;width:10px;background: #fff;display: inline-block;margin: 0 6px 0 3px;}
#copyright{font-size: 13px;padding: 5px 0;}

/* CONTENT */
.main-content{padding: 60px 0;}

/* FORMS */
.form-control{border-color:#0473C0;border-radius: 10px;}
.form-control::placeholder{color:#E5E5E5;}

#header-wrap input{width: 400px;}

/* SUB NAV */
.list-sub{display: none;}
#sideNav a{cursor:pointer;padding: 10px 10px 5px;border-bottom: 1px solid #eee;font-size: 13px;display: flex;justify-content: space-between;}
#sideNav .list-has-sub > a:after{content:'\f105';color:#ABABAB;font-size: 13px;font-family: "Font Awesome 5 Free";font-weight: 900;}
#sideNav .list-has-sub > a.active:after{content:'\f107';color:#0473C0;}
#sideNav .list-has-sub > a p{width: 90px;color:#0473C0;}
#sideNav .list-has-sub > a span{width: calc( 100% - 95px );}
#sideNav .list-sub a, #sideNav a span{color: #ABABAB;font-size: 11px;}
#sideNav .list-sub a:hover{color: #444;}

.side-bar{display: block;}
.sideNavToggle{display: none;}

/* BRANDS */
.gridColumns{column-gap: 5px;column-count: 4;margin-top: 20px;}
.gridColumns > div{margin-bottom: 5px;}

/* TABS */
.tabs-blk{display: flex;justify-content: space-around;width: 100%;}
.tabs-blk a{font-size: 13px;padding: 8px 10px;color: #ABABAB!important;border-bottom: 3px solid transparent;
    cursor: pointer;}
.tabs-blk a.active{color: #0473C0!important;border-color: #0473C0;}
.tabs-blk a:hover{color: #0473C0!important;}

.prod-item{display: flex;align-items: stretch;justify-content: center;margin-bottom: 30px;}
.prod-item .prod-img{width: 18%;border: 1px solid #0473C0;margin-left: 2%;position: relative;}
.prod-img-overlay{position: absolute;right:0;bottom:0;background: rgba(0,0,0,0.4);color: #fff;font-size: 13px;padding: 0px 8px;}

.prod-item .prod-dets{border: 1px solid #e9e9e9;padding: 5px 10px;width: 80%;font-size: 12px;display: flex;align-items: center;justify-content: space-between;}
.prod-dets-foot-item{display: flex;margin-top: 20px;}
.prod-item .prod-actions a{display: inline-block;}
.prod-item .prod-actions a .icon-holder{    width: 15px;
    height: 15px;
    font-size: 8px;
    padding: 5px;
    background: #0473C0;
    border-radius: 50%;color: #fff;display: inline-flex;align-items: center;justify-content: center;}
.prod-item .prod-actions a .icon-holder img{width: 100%;}
.prod-dets-foot-item img{border-left: 1px solid #bebebe;padding-left: 7px;margin-left: 7px; }

.prod-dets > div{display: flex;flex-flow: column;justify-content: space-between;height: 100%;}

.prod-dets > div:nth-child(1){width: calc( 100% - 310px);margin-left: 10px;}
.prod-dets > div:nth-child(2){width: 100px;margin-left: 10px;}
.prod-dets > div:nth-child(3){width: 215px;}

/* SELECTS */
.custom-select{min-height: unset;
    overflow: hidden;
    height: auto;
    border: 0;color: #ABABAB;
    font-size: 11px;    padding: 0!important;border-radius: 0;}
.custom-select option{cursor: pointer;
    padding: 10px 10px 5px;
    border-bottom: 1px solid #eee;
    font-size: 11px;
    display: flex;
    justify-content: space-between;}
.custom-select:focus {
    border-color: transparent;
    outline: 0;
    box-shadow: none;
}

/*************** RESPONSIVE ********************/
/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
    #top-bar .top-bar-f a {
        padding: 0 5px;
    }
    #top-bar .btn {
        padding: 2px 10px;
    }
    #header-wrap-top .container > div{flex-flow: column!important;align-items: self-start!important;
        justify-content: flex-start!important;}
    #header-wrap-top .container > div >div:first-child{order: 2!important;}
    #header-wrap-top .container > div >div:last-child{order: 1!important;margin: 20px 0 0;width:100%;
        justify-content: flex-end;}
    #header-wrap-top .container > div >div:nth-child(2) form > div{justify-content: flex-end!important;}
    #header-wrap input {
        width: 200px;
    }

    #copyright .container > div, #copyright .text-left{text-align: center!important;}
}
/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
}
@media (max-width: 767.98px) {
    .prod-item{flex-flow: column;}
    .prod-item .prod-img{width: 100%;max-width: 400px;margin: 0 auto 10px;}
    .prod-item .prod-dets{flex-flow: column;width: 100%;margin-bottom: 0;}
    .prod-dets > div {width: 100%!important;margin-left: 0!important;display: flex;flex-flow: row;}
    .prod-dets > div > div:first-child{width: 75%!important;margin-left: 5%;margin-bottom: 20px;}
    .prod-dets > div > div:last-child{width: 20%!important;margin-bottom: 20px;}
    .prod-dets > div:last-child > div:first-child, .prod-dets > div:last-child > div:last-child{margin-bottom: 0;}
    .prod-dets-foot-item {margin-top: 0;}
    .prod-dets-foot-item img{width: 20px;}
	.prod-dets > div:nth-child(2) > div:first-child img{height: 14px;margin-left: 5px;}
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {}
@media (max-width: 991.98px) {
    /* START Expanded Nav-Bar START */
    /*.navbar-expand-lg {-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-flow: column;flex-flow: row;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}
    .navbar-expand-lg .navbar-toggler {display: none;}
    .navbar-expand-lg .navbar-collapse {display: -webkit-box!important;display: -ms-flexbox!important;display: flex!important;-ms-flex-preferred-size: auto;flex-basis: auto;}
    .navbar-expand-lg .navbar-nav {-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;}*/
    /* END Expanded Nav-Bar END */
    /*.navbar-nav .nav-link {padding-right: 4px;padding-left: 4px;}*/
    #navbar-toggler-lnk, #navbar-close-lnk{display: block;}
    .navbar-collapse{display: block!important;
        position: fixed;
        top: -100%;
        right: 0;left:0;
        height: 100%;
        width: 100%;
        overflow-y: auto;
        background: rgba(7, 79, 142, 0.97)/*0473C0*/;
        padding: 10px 20px;margin: 0!important;z-index: 100;text-align: center;
    }
    .navbar-dark .navbar-nav .nav-link{color: #c3c3c3;font-size: 22px;}
    .navbar-dark .navbar-nav .nav-item.active .nav-link{color: #fff;}
    .navbar-dark .navbar-nav .nav-item .nav-link:after{display: none!important;}
    .navbar-dark .navbar-nav .nav-item.active .nav-link:before{content:'\f0da';display: inline-block;font-family: "Font Awesome 5 Free";font-weight: 900;margin-right:10px;}
    .rtl .navbar-dark .navbar-nav .nav-item.active .nav-link:before{content:'\f0d9';margin-left: 10px;margin-right: 0;}

    #header-wrap-top, #header-wrap-bottom {
        padding: 0;
    }
    .footer-wrap{margin-bottom: -30px;}
    .footer-links{margin-bottom: 30px;}

    #header-wrap-top .container > div{flex-flow: wrap;}
    #header-wrap-top .container > div >div:first-child{order: 1;}
    #header-wrap-top .container > div >div:last-child{order: 2;}
    #header-wrap-top .container > div >div:nth-child(2){order: 3;margin: 10px auto;width: 100%;}
    #header-wrap-top .container > div >div:nth-child(2) form > div{justify-content:center;}


    #sideNav{margin-bottom: 30px;}
    .side-bar{display: none;}
    /*.side-bar{display: none;
        position: fixed;
        top: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.97);
        z-index: 1009;
        width: 100%;
        height: 100%;
        padding: 20px;
        overflow: auto;}*/
    .sideNavToggle{display: flex;}
    .gridColumns{column-count: 8;margin-bottom: 30px;}

}
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 6px;
        padding-left: 6px;
        font-size: 14px;
    }
    .prod-item .prod-img{width: 13%;}
    .prod-item .prod-dets{width: 85%;}
    /*.gridColumns{column-count: 3;}*/

}
/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px){
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 8px;
        padding-left: 8px;
        font-size: 16px;
    }
}