/* ==========================================================
   Electro RTL
   Author: Eng. Gehad Ali
   ========================================================== */

/* ==========================================================
   GENERAL
========================================================== */

html,
body{
    direction:rtl;
    text-align:right;
    font-family:'Cairo',sans-serif;
}

.pull-left{float:left!important;}
.pull-right{float:right!important;}

.text-left{text-align:left!important;}
.text-right{text-align:right!important;}

/* ==========================================================
   HEADER
========================================================== */

.header-logo{
    text-align:right;
}

.header-logo img{
    max-width:190px;
    height:auto;
}


/* ==========================================================
   NAVIGATION
========================================================== */

.main-nav{
    float:right;
}

.main-nav>li{
    float:right;
}

.section-title{
    text-align:right;
}

.section-title .section-nav{
    float:left;
}

/* ==========================================================
   ACCOUNT
========================================================== */

.header-ctn{
    float:left;
}

.header-ctn>div{
    float:right;
}

.header-ctn>div+div{
    margin-right:20px;
    margin-left:0;
}

/* ==========================================================
   CART
========================================================== */

.cart-dropdown{
    left:0;
    right:auto;
    text-align:right;
}

/* ==========================================================
   PRODUCT
========================================================== */

.product-widget{
    text-align:right;
}

.product-widget .product-img{

    left:auto;

    right:0;

}

.product-widget .product-body{

    padding-left:0;

    padding-right:75px;

}

/* ==========================================================
   FOOTER
========================================================== */

.footer{
    text-align:right;
}

.footer-links{
    padding:0;
}

.footer-links li i{
    margin-left:10px;
    margin-right:0;
}

/* ==========================================================
   FORMS
========================================================== */

input,
textarea,
select{
    text-align:right;
}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:991px){

#header .row{

display:flex;

flex-direction:column;

}

#header .row>div:nth-child(3){

order:1;

}

#header .row>div:nth-child(2){

order:2;

}

#header .row>div:nth-child(1){

order:3;

}

.header-logo{

text-align:center;

margin:15px 0;

}

.header-search{

margin:15px 0;

}

.header-ctn{

display:flex;

justify-content:space-between;

align-items:center;

float:none;

}

}

@media(max-width:767px){

#top-header .container{

flex-direction:column;

gap:12px;

}

#top-header .pull-right,

#top-header .pull-left{

width:100%;

justify-content:center;

flex-wrap:wrap;

}

#top-header .pull-right li a{

font-size:14px;

}

#top-header .pull-right li a i,

#top-header .pull-left li a{

width:38px;

height:38px;

font-size:16px;

}

}

/*=========================================================
	02 -> HEADER
===========================================================*/

/*----------------------------*\
	Top header
\*----------------------------*/

#top-header {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #1E1F29;
}

.header-links li {
  display: inline-block;
  margin-left: 15px;
  font-size: 16px !important;
}

.header-links li:last-child {
  margin-right: 0px;
}

.header-links li a {
  color: #FFF;
}

 
 


/* أيقونات الـ Top Header */
.header-links li i{
    width:34px;
    height:34px;
    line-height:34px;
    text-align:center;

    color:#fff;
    font-size:17px !important;
   border:1px solid #D10024;   /* الإطار الأحمر */
    border-radius:50%;
     
    margin-right:8px;
    background:#D10024;
    transition:all .3s ease;
    
   
    
}

/* تأثير Hover */
.header-links li a:hover i{
    background:#ffffff;
    color:#D10024;
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(255,255,255,.25);
}
/*=========================================
      TOP HEADER MOBILE
=========================================*/
@media (max-width:767px){

    #top-header .container{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
    }

    /* الهاتف والإيميل */
    #top-header .pull-right{
        float:none !important;
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        flex-wrap:wrap;
        margin:0 0 10px 0;
        padding:0;
        text-align:center;
    }

    /* أيقونات التواصل */
    #top-header .pull-left{
        float:none !important;
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        flex-wrap:wrap;
        margin:0;
        padding:0;
        text-align:center;
    }

    .header-links{
        width:100%;
    }

    .header-links li{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        float:none !important;
        margin:5px 8px;
    }
}