.site-footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}

.social-icons {
    margin-bottom: 10px;
}

.social-icon {
    color: white;
    font-size: 20px;
    margin: 0 10px;
    text-decoration: none;
    transition: color 0.3s;
}

.social-icon:hover {
    color: #007bff; /* لون عند مرور الفأرة */
}












/* نخلي كل label كارت */
.form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8f9fa;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 8px;
    border: 1px solid #eee;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* نشيل float اللي عامل مشكلة */
.form-group input[type="checkbox"] {
    float: none !important;
    transform: scale(1.2);
}

/* hover */
.form-group label:hover {
    background: #e9f7fb;
}

/* لما يتعلم عليه */
.form-group input:checked + * {
    color: #17a2b8;
    font-weight: bold;
}

/* موبايل */
@media (max-width: 768px) {

    .col-xs-12 {
        padding: 0 5px;
    }

    .form-group label {
        padding: 8px;
        font-size: 13px;
    }
}








    
    /* هذا الكود سيعمل فقط على الشاشات الكبيرة (أكبر من 768 بكسل) */
@media screen and (min-width: 769px) {
    .Flat_mega_menu > ul {
        display: flex;
        flex-direction: row-reverse; 
        flex-wrap: nowrap;           
        align-items: center;
        overflow: hidden;            
    }

.row {
    overflow: visible !important;
}




    .Flat_mega_menu > ul > li:not(.user_login):not(.search_bar):not(:first-child) {
        height: 30px;           
        width: auto;            
        min-width: 100px;        
        margin: 10px 4px;        
        background: #4e69aa;
        border-radius: 5px;
        transition: all 0.2s ease;
    }

    .Flat_mega_menu > ul > li:not(.user_login):not(.search_bar) a {
        line-height: 28px;      
        padding: 0 8px;         
        font-size: 16px;        
        white-space: nowrap;    
    }
}

/* إبقاء أيقونات البحث والدخول بتصميمها الأصلي (عام لجميع الشاشات) */
.Flat_mega_menu ul .user_login,
.Flat_mega_menu ul .search_bar {
    width: 50px; 
    height: 40px; 
    float: right;
    background: transparent;
}

.Flat_mega_menu ul .user_login .fa,
.Flat_mega_menu ul .search_bar .fa {
    line-height: 40px;
}

/* توسيط كلمة الرئيسية في منتصف القالب الخاص بها */
.Flat_mega_menu > ul > li:first-child a {
    font-size: 18px !important;
    font-weight: bold;
    display: flex;            /* تفعيل نظام الفليكس للرابط نفسه */
    align-items: center;      /* التوسط العمودي */
    justify-content: center;   /* التوسط الأفقي */
    text-align: center;       /* ضمان توسط النص */


    height: 45px;        /* 🔥 بدل 70% */
    padding: 0 10px;     /* تصغير المسافات */
    border-radius: 7px;
    
}



.Flat_mega_menu ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}



@media (max-width: 991px) {
    .Flat_mega_menu ul li {
        margin: 0 5px;
    }
}





/* تنسيق القائمة المنسدلة لتظهر كبوكسات */
.Flat_mega_menu ul li ul {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 250px;           /* عرض الصندوق الكلي */
    background: #fff;       /* خلفية بيضاء للبوكسات */
    padding: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border-radius: 8px;
    z-index: 999;
    flex-wrap: wrap;        /* للسماح للبوكسات بالرص بجانب بعضها */
    display: flex !important; /* تحويلها لنظام فليكس */
    gap: 8px;               /* المسافة بين البوكسات */
}

/* تنسيق كل تصنيف داخل البوكس */
.Flat_mega_menu ul li ul li {
    width: calc(50% - 4px); /* عرض البوكس (هنا بوكسين في كل سطر) */
    background: #f1f3f8;    /* لون خلفية البوكس الصغير */
    margin: 0 !important;   /* إلغاء المارجن الافتراضي */
    border-radius: 5px;
    transition: all 0.3s ease;
    border: 1px solid #e1e4e8;
}

/* تنسيق النص داخل بوكس التصنيف */
.Flat_mega_menu ul li ul li a {
    display: block !important;
    padding: 10px 5px !important;
    text-align: center !important;
    font-size: 14px !important;
    color: #4e69aa !important; /* لون النص */
    line-height: normal !important;
    white-space: normal !important; /* السماح للنص الطويل بالنزول لسطر جديد داخل البوكس */
}

/* تأثير عند تمرير الماوس على بوكس التصنيف */
.Flat_mega_menu ul li ul li:hover {
    background: #4e69aa;    /* يتغير للون الأساسي */
}

.Flat_mega_menu ul li ul li:hover a {
    color: #fff !important; /* يتغير النص للأبيض */
}




/* 1. إخفاء القائمة المنسدلة تماماً ومنع التفاعل معها */
.Flat_mega_menu ul li ul {
    display: flex !important; /* نتركها فليكس لتجهيز التصميم داخلياً */
    visibility: hidden !important; /* إخفاء بصري */
    opacity: 0 !important;         /* جعلها شفافة تماماً */
    position: absolute;
    top: 120%;      /* إبعادها قليلاً للأسفل لمنع ظهورها بالخطأ */
    transition: all 0.3s ease; /* إضافة نعومة عند الظهور */
    pointer-events: none;      /* منع الماوس من الضغط عليها وهي مخفية */
}

/* 2. إظهار القائمة فقط عند الهوفر */
.Flat_mega_menu ul li:hover > ul {
    visibility: visible !important;
    opacity: 1 !important;
    top: 100%;                 /* تعود لمكانها الطبيعي */
    pointer-events: auto;      /* السماح بالضغط على الروابط */
}




/* إخفاء القائمة المنسدلة للتصنيفات فقط في الموبايل */
@media screen and (max-width: 768px) {
    /* استهداف القوائم المنسدلة للعناصر العادية فقط واستثناء البحث والدخول */
    .Flat_mega_menu ul li:not(.user_login):not(.search_bar) ul {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* التأكد من أن قوائم البحث والدخول تظل قابلة للظهور */
    .Flat_mega_menu ul .user_login ul,
    .Flat_mega_menu ul .search_bar ul {
        display: block; /* أو التنسيق الأصلي لها */
        visibility: visible;
        opacity: 1;
    }
}





/* ===== Sections ===== */
.sections-wrapper {
    padding: 10px;
}

.section-box {
    margin-bottom: 30px;
}

.section-title {
    font-size: 18px;
    margin-bottom: 10px;
    padding-right: 10px;
    border-right: 4px solid #17a2b8;
}

/* ===== Grid ===== */
.classified-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

/* ===== Card ===== */
.classified-card {
    display: block;
    background: #fff;
    padding: 12px;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    color: #333;
    border: 1px solid #eee;
   transition: all 0.3s ease;
}

/* ===== Icon ===== */
.card-icon {
    font-size: 20px;
    color: #17a2b8;
    margin-bottom: 6px;
}

/* ===== Title ===== */
.card-title {
    font-size: 14px;
    line-height: 1.4;
}

/* ===== Hover ===== */
.classified-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    background: #17a2b8;
    color: #fff;
}

.classified-card:hover .card-icon {
    color: #fff;
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
    .classified-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}




@import url(https://fonts.googleapis.com/css?family=Nunito:regular,700);
body{background: url(../img/bg.png)repeat; text-align: right;}



@media (min-width: 1200px) {
    .container {
        width: 900px;
    }
}
header{background: #f8f5ee; height: 155px;}
#wraper{background: #fff; padding-top: 10px;}
.logo{height: 40px; margin-bottom: 33px;}
.login-reg{text-align: center}

.login-reg .btn{
    margin-top: 10px;
    float:right;

}
.login-reg .btn-primary{
    float: left
}
/* Social Icons */
ul.social-icons {
    margin: 0;
    padding: 0;
    width: auto;
    float: left;
    margin-left: 30px;
    margin-top: 5px;
    margin-bottom: 5px;
}

ul.social-icons li {
    background-image: url(../img/social-sprites.png);
    background-repeat: no-repeat;
    background-color: #FFF;
    background-position: 0 100px;
    display: inline-block;
    margin: -1px 1px 5px 0;
    padding: 0;
    border-radius: 100%;
    overflow: visible;
    transition: all 0.3s ease;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
    -moz-border-radius: 100%;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-border-radius: 100%;
    -webkit-transition: all 0.3s ease;
}

ul.social-icons li a {
    display: block;
    height: 30px;
    width: 30px;
    text-align: center;
}

ul.social-icons li[class] a {
    text-indent: -9999px;
}

ul.social-icons li a:hover {
    text-decoration: none;
}

ul.social-icons li a i[class^="icon-"] {
    color: #444;
    font-style: 16px;
    position: relative;
    top: 3px;
}

ul.social-icons li a:active {
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.3);
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.3);
}

ul.social-icons li:active,
ul.social-icons li a:active {
    border-radius: 100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
}

ul.social-icons li.facebook {
    background-position: 0 -120px;
}

ul.social-icons li.facebook:hover {
    background-position: 0 -150px;
}

ul.social-icons li.googleplus {
    background-position: 0 -300px;
}

ul.social-icons li.googleplus:hover {
    background-position: 0 -330px;
}


ul.social-icons li.skype {
    background-position: 0 -960px;
}

ul.social-icons li.skype:hover {
    background-position: 0 -990px;
}

ul.social-icons li.twitter {
    background-position: 0 -1140px;
}

ul.social-icons li.twitter:hover {
    background-position: 0 -1170px;
}


ul.social-icons li.yahoo:hover {
    background-position: 0 -1350px;
}

ul.social-icons li.youtube {
    background-position: 0 -1380px;
}

ul.social-icons li.youtube:hover {
    background-position: 0 -1410px;
}
/****************************/
/* flat mega menu layout start */
.Flat_mega_menu ul,
.Flat_mega_menu li,
.Flat_mega_menu a,
.Flat_mega_menu p,
.Flat_mega_menu i {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    display: block;
}

/* mega menu layout */
.Flat_mega_menu {
    font-family: Nunito;		/* google webfont nunito */
    min-height: 40px;
    width: 100%;
    min-width: 240px;
    max-width: 1280px;
    position: relative;
    z-index: 999;
    background: #3b5998;
}

/* menu unorderlist layout */
.Flat_mega_menu > ul {
    width: 100%;
    height: 40px;
}

/* menu list items layout */
.Flat_mega_menu > ul > li {
    float: right;
    height: 40px;
    width: 12%;
    border-left: 1px solid #4e69aa;
    white-space: nowrap;
}

/* menu a tag + user_login + search_bar hover effect */
.Flat_mega_menu > ul > li:hover a,
.Flat_mega_menu ul .user_login:hover .fa.fa-user,
.Flat_mega_menu ul .search_bar:hover .fa.fa-search {
    color: #4e69aa;
    background: #FFFFFF;
    transition: all 0.2s linear 0s;
    -moz-transition: all 0.2s linear 0s;
    -webkit-transition: all 0.2s linear 0s;
    -ms-transition: all 0.2s linear 0s;
    -o-transition: all 0.2s linear 0s;
}

/* menu a tag layout */
.Flat_mega_menu ul li a {
    color: #FFFFFF;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    float: left;
    width: 100%;
}

/* menu list item first-child layout */
.Flat_mega_menu > ul > li:first-child {
    width: 13%;
    padding: 0px 2%;
    overflow: hidden;
    border-radius: 5px;
    background: #747373;
}

/* menu list item first-child a tag layout */
.Flat_mega_menu > ul > li:first-child > a {
    text-transform: uppercase;
    text-align: left;
    color: #FFFFFF;
    font-size: 20px;
    line-height: 36px;
}

/* menu parent list item first-child a tag hover effect */
.Flat_mega_menu > ul > li:hover:first-child > a {
    background: transparent;
}

/* user_login + search_bar class layout */
.Flat_mega_menu ul .user_login,
.Flat_mega_menu ul .search_bar {
    width: 6%;
    float: right;
    cursor: pointer;
}

/* fonntawesome icons laout */
.Flat_mega_menu ul .user_login .fa.fa-user,
.Flat_mega_menu ul .search_bar .fa.fa-search {
    display: block;
    text-align: center !important;
    color: #FFFFFF;
    font-size: large;
    line-height: 40px;
}

/* submenu one_col + submenu two_col layout */
.Flat_mega_menu ul li .submenu.one_col,
.Flat_mega_menu ul li .submenu.two_col {
    position: absolute;
    top: 40px;
    width: 200px;
    padding-top: 15px;
    background-color: #FFFFFF;
    padding-bottom: 15px;
    padding-right: 25px;
    border-bottom: 5px solid #4e69aa;
    display: none;
    border-left: 1px solid #E4E4E4;
    border-right: 1px solid #E4E4E4;
}

/* submenu one_col or two_col list item layout */
.Flat_mega_menu ul li .submenu.one_col li,
.Flat_mega_menu ul li .submenu.two_col li {
    position: relative;
    height: 40px;
}

/* submenu one_col or two_col a tag lyout */
.Flat_mega_menu ul li .submenu.one_col li a,
.Flat_mega_menu ul li .submenu.two_col li a {
    text-align: left;
    text-indent: 27px;
    font-weight: normal;
    font-size: 14px;
    height: 40px;
    white-space: normal;
    padding-right: 25px;
    line-height: 40px;
    color: #555658;
}

/* submenu one_col or two_col a tag hover effect */
.Flat_mega_menu ul li .submenu.one_col li:hover > a,
.Flat_mega_menu ul li .submenu.two_col li:hover > a {
    text-indent: 32px;
    color: #000000
}

/* second level submenu layout */
.Flat_mega_menu ul li .submenu.one_col li .submenu.one_col {
    position: absolute;
    left: 112.5%;
    top: -15px;
    display: none;
    width: 150px;
}

/* third level submenu layout */
.Flat_mega_menu ul li .submenu.one_col li .submenu.one_col li .submenu.one_col {
    left: 116.5%;
}

/* submenu one_col list item first-child submenu layout */
.Flat_mega_menu ul li .submenu.one_col li:first-child .submenu.one_col {
    top: -15px;
}

/* search bar layout */
.Flat_mega_menu ul .search_bar ul {
    background-color: #FFFFFF;
    width: 100%;
    position: absolute;
    left: 0px;
    display: none;
    border-bottom: 5px solid #4e69aa;
}

/* search bar input text field layout */
.Flat_mega_menu ul .search_bar ul form input:first-child {
    width: 62.5%;
    height: 40px;
    margin: 17px 5% 17px 2%;
    font-size: large;
    text-indent: 20px;
}

/* search bar submit button layout */
.Flat_mega_menu ul .search_bar ul form input:last-child {
    width: 10%;
    height: 46px;
    position: relative;
    top: -1px;
    font-size: large;
    padding-left: 10px;
    padding-right: 10px;
    background: #4e69aa;
    color: #FFFFFF;
    cursor: pointer;
    border: none;
}

/* user login form layout */
.Flat_mega_menu ul .user_login ul {
    position: absolute;
    left: 0px;
    background: #FFFFFF;
    padding: 20px;
    display: none;
    border-bottom: 5px solid #4e69aa;
}

/* user login form table layout */
.Flat_mega_menu ul .user_login ul form table tr td {
    color: #555658;
    padding-top: 5px;
}

/* user login form input field layout */
.Flat_mega_menu ul .user_login table tr:nth-child(2) td input,
.Flat_mega_menu ul .user_login table tr:nth-child(4) td input {
    height: 27px;
    width: 177px;
}

/* user login form input field layout */
.Flat_mega_menu ul .user_login table tr:last-child td input {
    height: 38px;
    border: 0px;
    width: 181px;
    margin-top: 15px;
    background: #4e69aa;
    font-size: medium;
    color: #FFFFFF;
    cursor: pointer
}

/* social bar layout */
.Flat_mega_menu ul .social_bar {
    position: relative
}

/* social bar submenu layout */
.Flat_mega_menu ul .social_bar ul {
    background: #FFFFFF;
    position: absolute;
    top: 40px;
    left: 0px;
    width: 260px;
    padding: 20px;
    display: none;
    border-bottom: 5px solid #4e69aa;
}

/* social bar list items layout */
.Flat_mega_menu ul .social_bar ul li {
    float: left;
    display: block;
    width: 50%;
    height: 40px;
    padding-top: 10px;
    line-height: 27px;
    text-indent: 10px;
}

/* social bar a tag layout */
.Flat_mega_menu ul .social_bar ul li a {
    color: #555658;
    height: 40px;
    line-height: 37px;
    float: left;
    position: relative;
    top: -34px;
    text-align: left;
    text-indent: 37px;
}

/* social bar a tag hover effect */
.Flat_mega_menu ul .social_bar:hover ul li a {
    background: transparent;
}

/* social bar fontawesome icons layout */
.Flat_mega_menu ul .social_bar ul li i {
    float: left;
    background: #555658;
    color: #FFFFFF;
    padding: 4px;
    border-radius: 20px;
    text-align: center;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-indent: 0px;
}

/* social bar fontawesome icons hover effct */
.Flat_mega_menu ul .social_bar ul li:hover i {
    color: #FFFFFF;
    background: #6d7580;
}

/* submenu display none */
.Flat_mega_menu ul li .submenu {
    display: none
}

/* submenu image container layout */
.Flat_mega_menu ul li .submenu.img_container {
    display: none;
    background-color: #FFFFFF;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 40px;
    border-bottom: 5px solid #4e69aa;
    padding-bottom: 20px;
}

/* submenu image container list items layout */
.Flat_mega_menu ul li .submenu.img_container li {
    float: left;
    width: 20.6%;
    height: 150px;
    margin: 2% 2% 55px;
}

/* submenu image container img tag layout */
.Flat_mega_menu ul li .submenu.img_container li img {
    height: 100%;
    width: 100%;
    border-radius: 5px;
    border: 5px solid #FDF2F2;
    cursor: pointer;
}

/* submenu image container img hover effct */
.Flat_mega_menu ul li .submenu.img_container li img:hover {
    opacity: 0.8;
}

/* submenu image container title class layout */
.Flat_mega_menu ul li .submenu.img_container .title {
    font-size: x-large;
    margin: 20px 16px 6px 2%;
    width: 90%;
    height: 20px;
}

/* submenu image container p tag layout */
.Flat_mega_menu ul li .submenu.img_container li p {
    display: block;
    margin-top: 7px;
    margin-left: 7px;
    margin-bottom: 7px;
    height: 40px;
    overflow: hidden;
    white-space: normal;
    font-size: 14px;
    color: rgb(85, 86, 88);
}

/* submenu with four column layout */
.Flat_mega_menu ul li .submenu.four_col {
    display: none;
    position: absolute;
    left: 0px;
    top: 40px;
    width: 100%;
    min-height: 100px;
    background: #FFFFFF;
    border-bottom: 5px solid #4e69aa;
    padding-bottom: 20px;
}

/* submenu with four column list items layout */
.Flat_mega_menu ul li .submenu.four_col li {
    float: right;
    width: 23%;
    margin-right: 1%;
    margin-left: 1%;
}

/* submenu with four column a tag layout */
.Flat_mega_menu ul li .submenu.four_col li a {
    color: #555658;
    text-align: right;
    white-space: normal;
    line-height: 24px;
    margin-bottom: 1px;
    font-size: 14px;
    background-color: #F1F1F1;
    padding: 0 5px 0 3px;
}

/* submenu with four column a tag hover effct */
.Flat_mega_menu ul li .submenu.four_col li:hover a {
    text-indent: 5px;
    color: #fff;
    background-color: #3b5998;

}

/* submenu with four column title class layout */
.Flat_mega_menu ul li .submenu.four_col .title {
    font-size: large;
    margin: 2%;
    font-weight: bold;
}

/* submenu image container half layout  */
.Flat_mega_menu ul li .submenu.img_container.half li:first-child {
    width: 80%
}

/* submenu image container 4 images layout  */
.Flat_mega_menu ul li .submenu.img_container.half li:nth-child(even) {
    clear: both
}

/* submenu image container with four column  */
.Flat_mega_menu ul li .submenu.img_container.half .two_col {
    position: absolute;
    left: 52%;
    width: 46%;
}

/* submenu image container with four column title class layout */
.Flat_mega_menu ul li .submenu.img_container.half .two_col .title {
    float: left;
    width: 48%;
    clear: none;
    margin: 20px 2px 2px;
    height: 29px;
    border: none;
}

/* submenu image container with four column list items layout */
.Flat_mega_menu ul li .submenu.img_container.half .two_col li {
    float: left;
    clear: none;
    width: 48.5%;
    height: 40px;
    margin: 9px 1px 0px 0px;
    border-bottom: 1px solid #E8E8E8;
}

/* submenu image container with four column a tag lyout */
.Flat_mega_menu ul li .submenu.img_container.half .two_col li a {
    text-align: left;
    line-height: 38px;
    text-indent: 5px;
    font-size: 14px;
    color: rgb(85, 86, 88);
}

/* submenu image container with four column a tag hover effct */
.Flat_mega_menu ul li .submenu.img_container.half .two_col li:hover a {
    text-indent: 10px;
    color: rgb(0, 0, 0);
}

/* submenu with two column layout */
.Flat_mega_menu ul li .submenu.two_col {
    width: 300px;
}

/* submenu with two column list items layout */
.Flat_mega_menu ul li .submenu.two_col li {
    width: 50%;
    float: left;
}

/* second level submenu with two column layout */
.Flat_mega_menu ul li .submenu.two_col li .submenu.two_col {
    display: none !important
}

/* user_login class a tag layout */
.Flat_mega_menu ul .user_login a {
    display: none;
    line-height: 32px;
    background-color: #F1F1F1 !important;
    color: #555658 !important;
    margin-top: 2px;
    /*    display: block !important;*/
}

.Flat_mega_menu ul .user_login a:hover {
    background-color: #3b5998 !important;
    color: #fff !important;
}

/* mouse hover display submenus */
.Flat_mega_menu ul li:hover .submenu.one_col,
.Flat_mega_menu ul li:hover .submenu.two_col,
.Flat_mega_menu ul .search_bar:hover ul,
.Flat_mega_menu ul .user_login:hover ul,
.Flat_mega_menu ul .social_bar:hover ul,
.Flat_mega_menu ul li:hover .submenu.img_container,
.Flat_mega_menu ul li:hover .submenu.four_col {
    display: block;

    /* animation */
    animation: display_submenus 0.2s linear 0s 1 forwards;
    -webkit-animation: display_submenus 0.2s linear 0s 1 forwards;
    -moz-animation: display_submenus 0.2s linear 0s 1 forwards;
    -ms-animation: display_submenus 0.2s linear 0s 1 forwards;
    -o-animation: display_submenus 0.2s linear 0s 1 forwards;
}

/* second level submenu hover effect */
.Flat_mega_menu ul li .submenu.one_col li:hover > .submenu.one_col {
    display: block;

    /* animation */
    animation: display_submenus_second 0.2s linear 0s 1 forwards;
    -webkit-animation: display_submenus_second 0.2s linear 0s 1 forwards;
    -moz-animation: display_submenus_second 0.2s linear 0s 1 forwards;
    -ms-animation: display_submenus_second 0.2s linear 0s 1 forwards;
    -o-animation: display_submenus_second 0.2s linear 0s 1 forwards;
}

/* fontawesome arrow icon display on submenus layout */
.Flat_mega_menu ul li .submenu.one_col li .fa.fa-angle-right {
    position: absolute;
    top: 12px;
    right: -5px;
    color: #555658;
}

/* checkbox button layout */
.Flat_mega_menu .mobile_button,
.Flat_mega_menu .fa.fa-bars {
    display:none;
}

/* default animation keyframes */
@keyframes display_submenus {
    0% {
        opacity:0
    }
    100% {
        opacity:1
    }
}

/* animation for chrome and safari */
@-webkit-keyframes display_submenus {
    0% {
        opacity:0
    }
    100% {
        opacity:1
    }
}

/* animation for firefox */
@-moz-keyframes display_submenus {
    0% {
        opacity:0
    }
    100% {
        opacity:1
    }
}

/* animation for internet explorer 10+ */
@-ms-keyframes display_submenus {
    0% {
        opacity:0
    }
    100% {
        opacity:1
    }
}

/* animation for opera */
@-o-keyframes display_submenus {
    0% {
        opacity:0
    }
    100% {
        opacity:1
    }
}

/* second level submenus default animation */
@keyframes display_submenus_second {
    0% {
        opacity:0
    }
    100% {
        opacity:1
    }
}

/* second level submenus chrome and safari animation */
@-webkit-keyframes display_submenus_second {
    0% {
        opacity:0
    }
    100% {
        opacity:1
    }
}

/* second level submenus firefox animation */
@-moz-keyframes display_submenus_second {
    0% {
        opacity:0
    }
    100% {
        opacity:1
    }
}

/* second level submenus internet explorer 10+ animation */
@-ms-keyframes display_submenus_second {
    0% {
        opacity:0
    }
    100% {
        opacity:1
    }
}

/* second level submenus opera animation */
@-o-keyframes display_submenus_second {
    0% {
        opacity:0
    }
    100% {
        opacity:1
    }
}

@media screen and (max-width:768px){
    /* menu unorderlist layout */
    .Flat_mega_menu > ul {
        height: auto;
        position:relative;
    }

    /* menu list items layout */
    .Flat_mega_menu > ul > li {
        float: none;
        height: 40px;
        width: 100%;
        border-left: none;
        border-bottom: 1px solid #4e69aa;
        position:relative;
    }

    /* menu list item first-child layout */
    .Flat_mega_menu > ul > li:first-child{
        border: none;
        width: 96%;

    }

    /* menu list item first-chila a tag layout */
    .Flat_mega_menu > ul > li:first-child > a{
        text-align:center;
        width:100%;
    }

    /* menu list litem 2 child layout */
    .Flat_mega_menu > ul > li:nth-child(2){
        border-top: 1px solid #4e69aa;
    }

    /* submenu one_col + submenu two_col layout */
    .Flat_mega_menu > ul > li > .submenu.one_col,
    .Flat_mega_menu > ul > li > .submenu.two_col {
        position: absolute;
        z-index:999;
        top: 40px;
        width: 100%;
        padding-right: 0px;
        display: none;
        border-left: none;
        border-right: none;
        border-top: 1px solid #E4E4E4;
    }

    /* submenu one_col or two_col list item layout */
    .Flat_mega_menu ul li .submenu.one_col li,
    .Flat_mega_menu ul li .submenu.two_col li {
        position: relative;
        height: 40px;
        width:100%;
        clear:both;
    }

    /* submenu one_col or two_col a tag lyout */
    .Flat_mega_menu ul li .submenu.one_col li a,
    .Flat_mega_menu ul li .submenu.two_col li a {
        white-space: normal;
        padding-right: 5%;
        float:left;
        width:auto;
    }

    /* second level submenu layout */
    .Flat_mega_menu ul li .submenu.one_col li .submenu.one_col {
        position: relative;
        z-index:999;
        left:0px;
        top:0px;
        padding:0px;
        margin:0px;
        display: none;
        border:none;
        border-top: 1px solid #E4E4E4;
        float:left;
        width: 100%;
    }

    /* second level submenu a tag layout */
    .Flat_mega_menu ul li .submenu.one_col li .submenu.one_col li a{
        text-indent:40px;
    }

    /* third level submenu a tag layout */
    .Flat_mega_menu ul li .submenu.one_col li .submenu.one_col li .submenu.one_col li a{
        text-indent:40px;
    }

    /* submenu hover effect */
    .Flat_mega_menu ul li .submenu.one_col li .submenu.one_col li:hover a{
        text-indent:45px;
    }

    /* submenu hover effect */
    .Flat_mega_menu ul li .submenu.one_col li .submenu.one_col li .submenu.one_col li:hover a{
        text-indent:65px;
    }
    /* third level submenu layout */
    .Flat_mega_menu ul li .submenu.one_col li .submenu.one_col li .submenu.one_col {
        left:0px;
        border-top: 1px solid #E4E4E4;
    }

    /* fontawesome arrow icon display on submenus layout */
    .Flat_mega_menu ul li .submenu.one_col li .fa.fa-angle-right {
        position: absolute;
        z-index:999;
        right: 20px;
        transform:rotate(90deg);
        -webkit-transform:rotate(90deg);
        -ms-transform:rotate(90deg);
        -moz-transform:rotate(90deg);
        -o-transform:rotate(90deg);
    }

    /* submenu image container layout */
    .Flat_mega_menu ul li .submenu.img_container {
        display: none;
        left: 0px;
        top: 40px;
        z-index:999;
    }
    /* submenu image container list items layout */
    .Flat_mega_menu ul li .submenu.img_container li {
        float: left;
        width: 40.6%;
        margin: 2% 4% 55px;
    }

    /* submenu image container title class layout */
    .Flat_mega_menu ul li .submenu.img_container .title {
        font-size: large;
        margin-left: 4%;
    }

    /* submenu image container 4 images layout  */
    .Flat_mega_menu ul li .submenu.img_container.half li {
        clear: both
    }

    /* submenu image container with four column list items layout */
    .Flat_mega_menu ul li .submenu.img_container.half .two_col li {
        float: left;
        clear: none;
        width: 97.5%;
    }

    /* submenu image container with four column title class layout */
    .Flat_mega_menu ul li .submenu.img_container.half .two_col .title {
        width: 97%;
    }

    /* submenu image container with four column title class layout */
    .Flat_mega_menu ul li .submenu.img_container.half .two_col .title:nth-child(2) {
        display:none;
    }

    /* submenu image container with four column a tag lyout */
    .Flat_mega_menu ul li .submenu.img_container.half .two_col li a {
        width: auto;
        padding-right: 5%;
    }

    /* submenu with four column layout */
    .Flat_mega_menu ul li .submenu.four_col {
        display: none;
        z-index:999;
        left: 0px;
        top: 40px;
    }

    /* submenu with four column a tag layout */
    .Flat_mega_menu ul li .submenu.four_col li a {
        width:auto;
    }

    /* submenu with four column title class layout */
    .Flat_mega_menu ul li .submenu.four_col .title{
        margin-bottom: 16px;
    }

    /* social bar submenu layout */
    .Flat_mega_menu ul .social_bar ul {
        position: absolute;
        z-index:999;
        top: 40px;
        left: 0px;
        width: 100%;
        padding: 0px;
        display: none;
    }

    /* social bar list items layout */
    .Flat_mega_menu ul .social_bar ul li {
        width: 20%;
        position:relative;
        margin-left: 4%;
    }

    /* social bar a tag layout */
    .Flat_mega_menu ul .social_bar ul li a {
        width: auto;
        position: absolute;
        top: 5px;
        padding-right: 5%;
        opacity: .5;
        left: 0%;
    }

    /* user_login + search_bar class layout */
    .Flat_mega_menu ul .user_login,
    .Flat_mega_menu ul .search_bar {
        width: 100%;
        float: left;
        background: #4e69aa;
    }
    /* search bar layout */
    .Flat_mega_menu ul .search_bar ul {
        width: 100%;
        position: absolute;
        z-index:999;
        display: none;
    }

    /* search bar input text field layout */
    .Flat_mega_menu ul .search_bar ul form input:first-child {
        width: 71.5%;
        margin: 17px 1% 17px 4%;
        font-size: medium;
    }

    /* search bar submit button layout */
    .Flat_mega_menu ul .search_bar ul form input:last-child {
        width: 18%;
        position: relative;
        top: 1px;
        height: 48px;
    }

    /* user login form layout */
    .Flat_mega_menu ul .user_login ul {
        position: absolute;
        z-index:999;
        left: 0px;
        padding: 0px;
        display: none;
    }

    /* user login form table layout */
    .Flat_mega_menu ul .user_login table{
        width:100%
    }
    /* user login form input field layout */
    .Flat_mega_menu ul .user_login table tr:nth-child(2) td input,
    .Flat_mega_menu ul .user_login table tr:nth-child(4) td input {
        height: 27px;
        width: 93%;
    }

    /* user login form input field layout */
    .Flat_mega_menu ul .user_login table tr:last-child td input {
        width: 94%;
        margin-top: 15px;
        margin-bottom: 18px;
    }

    /* user login form table layout */
    .Flat_mega_menu ul .user_login ul form table tr td {
        text-indent: 3%;
    }

    /* mobile button layout */
    .Flat_mega_menu .mobile_button{
        opacity:0;

    }

    /* mobile buton + fontawesome icon layout */
    .Flat_mega_menu .mobile_button,
    .Flat_mega_menu .fa.fa-bars {
        display: block;
        position: absolute;
        left: 0px;
        z-index: 999;
        height: 40px;
        width: 9%;
        cursor:pointer;
        min-width: 60px;
    }

    /* fontawesome icon layout */
    .Flat_mega_menu .fa.fa-bars:before{
        color: #FFFFFF;
        font-size: 40px;
        top: 2px;
        position: relative;
        left: -15px;
    }

    /* menu unorder list tag layout */
    .Flat_mega_menu > ul{
        height:40px;
        overflow:hidden;
    }

    /* menu checkbox button layout */
    .Flat_mega_menu .mobile_button:checked + ul{
        height:auto;
        overflow:visible;
    }
}

@media screen and (max-width:592px){

    /* submenu with four column list items layout */
    .Flat_mega_menu ul li .submenu.four_col li {
        float: left;
        width: 42%;
        margin-right: 1%;
        margin-left: 5%;
    }

    /* submenu with four column title class layout */
    .Flat_mega_menu ul li .submenu.four_col .title {
        margin: 2% 1% 2% 5%;
    }

    /* submenu with four column title class layout */
    .Flat_mega_menu ul li .submenu.four_col .title:nth-child(3),
    .Flat_mega_menu ul li .submenu.four_col .title:nth-child(4) {
        display:none;
    }

    /* submenu with four column title class layout */
    .Flat_mega_menu ul li .submenu.four_col .title{
        margin-bottom: 26px;
    }
}
@media screen and (max-width:480px){

    /* social bar list items layout */
    .Flat_mega_menu ul .social_bar ul li {
        width: 40%;
        position:relative;
        margin-left: 4%;
    }
    /* search bar input text field layout */
    .Flat_mega_menu ul .search_bar ul form input:first-child {
        width: 57.5%;
        margin: 17px 1% 17px 6%;
    }

    /* search bar submit button layout */
    .Flat_mega_menu ul .search_bar ul form input:last-child {
        width: 27%;
    }

}
@media screen and (max-width:320px){

    /* submenu image container list items layout */
    .Flat_mega_menu ul li .submenu.img_container li {
        float: left;
        width: 81.5%;
        margin: 2% 8% 55px;
    }
    /* submenu image container title class layout */
    .Flat_mega_menu ul li .submenu.img_container .title {
        font-size: large;
        margin-left: 8%;
    }

    /* submenu image container with four column  */
    .Flat_mega_menu ul li .submenu.img_container.half .two_col {
        position: relative;
        width: 85%;
        left: 9%;
        clear:both;
        padding:0px;
        top: 48px;
        border-top: 2px solid #E8E8E8;
    }

    /* submenu with four column list items layout */
    .Flat_mega_menu ul li .submenu.four_col li {
        width: 89%;
        margin-left: 8%;
    }

    /* submenu with four column title class layout */
    .Flat_mega_menu ul li .submenu.four_col .title:nth-child(2) {
        display:none;
    }

    /* social bar list items layout */
    .Flat_mega_menu ul .social_bar ul li {
        width: 95%;
        position: relative;
        margin-left: 8%;
    }
    /* search bar input text field layout */
    .Flat_mega_menu ul .search_bar ul form input:first-child {
        width: 57.5%;
        margin: 17px 1% 17px 6%;
    }

    /* search bar submit button layout */
    .Flat_mega_menu ul .search_bar ul form input:last-child {
        width: 27%;
    }
    /* user login form input field layout */
    .Flat_mega_menu ul .user_login table tr:nth-child(2) td input,
    .Flat_mega_menu ul .user_login table tr:nth-child(4) td input {
        height: 27px;
        width: 88%;
    }

    /* user login form input field layout */
    .Flat_mega_menu ul .user_login table tr:last-child td input {
        width: 89%;
        margin-top: 15px;
        margin-bottom: 18px;
    }

    /* user login form table layout */
    .Flat_mega_menu ul .user_login ul form table tr td {
        text-indent: 5%;
    }
    /* menu list item first-child a tag layout */
    .Flat_mega_menu > ul > li:first-child > a{
        text-indent:30px;
    }
}

.form-signin {
    padding: 15px;
    margin: 0 auto;
    background-color: #f3f3f3;
}
.form-control{
    text-align: right;
}

.form-signin .form-signin-heading,
.form-signin .checkbox {
    margin-bottom: 10px;
}
.form-signin .checkbox {
    font-weight: normal;
}
.form-signin .form-control {
    font: 15px 'Segoe UI',Arial,sans-serif;
    background-color: #EAEBE5;
    height: auto;
    color:#7e8c8d;
    outline:none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

#recover input[type="email"] {
    margin-bottom: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

label{width:100%; direction:rtl;}
/*___________________________________*/
.flip-login {
    border-top: 2px solid #aaa;
    box-shadow:  0 2px 4px rgba(0,0,0,0.8);
    height:273px;
    background: #f3f3f3;
}

.flip-login form {
    width:100%;
    /* height:100%;
     position:absolute;*/
    top:0;
    left:0;

}


.flip-login.flipped .form-signin{

    opacity:0;

}

.flip-login.flipped #recover{

}


.form-signin {
    z-index:100;
}



#login{
    background: #f3f3f3;
    z-index: 100;
}




#recover{
    background:#f3f3f3;
}

#formContainer.flipped #login{

    opacity:0;

}

#formContainer.flipped #recover{

}


/*----------------------------
  Inputs, Buttons & Links
-----------------------------*/


#login .flipLink,
#recover .flipLink{
    height: 50px;
    overflow: hidden;
    position: absolute;
    left: 0;
    text-indent: -9999px;
    bottom: 0;
    width: 80px;
}

#triangle-topright {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 0;
    height: 0;
    border-bottom: 100px solid #ddd;
    border-right: 100px solid transparent;
}

#triangle-topleft {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    right:auto;
    left:0;
    width: 0;
    height: 0;
    border-bottom: 50px solid #ddd;
    border-right: 50px solid transparent;
}

#recover .flipLink{
    right:auto;
    left:0;
}

#forkongithub a {
    box-sizing: content-box;
    background:#ddd;
    color:#fff;
    text-decoration:none;
    font-family:arial, sans-serif;
    text-align:center;
    font-weight:bold;
    padding:5px 40px;
    font-size:1rem;
    line-height:2rem;
    position:relative;
    transition:0.5s;
}

#forkongithub a:hover {
    background:#aaa;
    color:#fff;
}

#forkongithub a::before, #forkongithub a::after {
    content:"";
    width:100%;
    display:block;
    position:absolute;
    top:1px;
    left:0;
    height:1px;
    background:#fff;
}

#forkongithub a::after {
    bottom:1px;
    top:auto;
}

@media screen and (min-width:800px){
    #forkongithub {
        position:absolute;
        display:block;
        top:0;
        right:0;
        width:200px;
        overflow:hidden;
        height:200px;
    }

    #forkongithub a {
        width:200px;
        position:absolute;
        top:40px;
        right:-60px;
        transform:rotate(45deg);
        -webkit-transform:rotate(45deg);
        box-shadow:2px 2px 10px rgba(0,0,0,0.8);
    }
}

.main-text
{
    position: absolute;
    top: 50px;
    width: 96.66666666666666%;
    color: #FFF;
}
.btn-min-block
{
    min-width: 170px;
    line-height: 26px;
}
.btn-clear
{
    color: #FFF;
    background-color: transparent;
    border-color: #FFF;
    margin-right: 15px;
}
.btn-clear:hover
{
    color: #000;
    background-color: #FFF;
}
h2,.h2{
    color:#3b5998; width: 100%; border-bottom: 2px solid #3b5998; line-height: 33px;
    font-size: 25px;
}
.today-trindes table{
    border: 1px solid #333;
    box-shadow:  0 2px 6px rgba(0,0,0,0.8);
}
.more-trends{float: left;}
.productbox {
    background-color:#ffffff;
    padding:10px;
    margin-bottom:10px;
    -webkit-box-shadow: 0 8px 6px -6px  #999;
    -moz-box-shadow: 0 8px 6px -6px  #999;
    box-shadow: 0 8px 6px -6px #999;
    text-align: center;
}
.productbox img{width: 100%;}
.producttitle {
    font-weight:bold;
    padding:5px 0 5px 0;
}

.productprice {
    border-top:1px solid #dadada;
    padding-top:5px;
}

.pricetext {
    font-weight:bold;
    font-size:1em;
}
.bottom-serv{ text-align: center;}
.bottom-serv h1{font-size: 45px; }
.adis-serv{text-align: center;}
footer{background: #27292b; color: #fff; font-size: 16px; font-weight: bold;}
.copyright{text-align: center; margin-top: 30px;font-size: 14px;}
.copyright a{color: #fff;}
.ads img{width: 100%;}
.sponser{margin-top: 15px; border-left: 2px solid #fff; text-align: center;}



.pan{
    background: #0097de;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    text-align: center;
    padding: 10px 0;
    font-weight: bold;
}

.pan a{color: #fff;}
.pan :hover{text-decoration: underline;}

.releted ul{
    list-style-type: none;

    border-bottom: 1px solid #dadbdc;
    clear: both;
    list-style-type: none;
    margin: 0 5px;
overflow: hidden;
}

.today-trindes {
    overflow: visible !important;
}



.releted ul {
    overflow: visible !important;
}



.load_more{
    height: 40px;
    width: 100%;
    border: none;
    color: white;
    cursor: pointer;
}

.panel-title{
    direction: rtl;
}
.panel-title-welcome{
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}

.btn-success{
    background-color: #747373;
    border-color: #747373;
}
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-success.active, .open .dropdown-toggle.btn-success{
    background-color: #d6d6d6;
    border-color: #d6d6d6;
}

.star{
    background: url(../img/star.png);
    width: 20px;
    height: 21px;
}

h3, .h3 {
    font-size: 21px;
}

input[type="radio"], input[type="checkbox"] {
    margin: 4px 0 0px 4px;
    margin-top: 1px \9;
    line-height: normal;
}