:root {
        --agbazar-darkblack: #000;
        --agbazar-black: #000;
        --agbazar-white: #ffffff;
        --agbazar-golden: #000;
        --agbazar-grey: #000;
        --agbazar-skyblue-gradient:linear-gradient(90deg, rgb(141 141 141) 0%, rgb(0 0 0) 100%);
        --agbazar-lightpurple-gradient:linear-gradient(90deg, rgb(98 115 255) 40%, rgb(77 104 254) 100%);
        --agbazar-skyblue: #000;
        --agbazar-box-shadow:rgba(0, 0, 0, 0.15) 0px 0px 13px 0px;
        --agbazar-font-family-shabnam-light-fd: "Shabnam-Light-FD";
    }
    .overflow-hidden{
        overflow: hidden;
    }
    .direction-rtl{
        direction: rtl;
    }
    .display-inline-block{
        display: inline-block;
    }
    @keyframes onload{
        0%{
            opacity:0;
        }
        100%{
            opacity: 1;
        }
    }
    html,body{
        animation-name:onload;
        animation-duration: .2s;
        background-color: var(--agbazar-white);
        margin: 0;
        padding: 0;
    }
    h2, h3, h4, h5, h6 {
        margin: 0 0 3px;
        vertical-align:middle;
    }
     span {
        color: #000000;
        display: inline-block;
        font-family: var(--agbazar-font-family-shabnam-light-fd);
        font-size: 14px;
        font-weight: normal;
        letter-spacing: -0.95px;
     }
    img,
    svg {
    vertical-align: middle;
    }
    i,svg, .fa{
        fill:var(--agbazar-grey);
        width: 27px;
        font-size: 20px;
        letter-spacing: -0.95px;
        display:inline-block;
        color: var(--agbazar-grey);
    }
    a{
        font-size: 14px;
        letter-spacing: -0.95px;
        font-weight: normal;
        color: #000000;
        display: inline-block;
        font-family: var(--agbazar-font-family-shabnam-light-fd);
    }
    a, a:hover, a:active, a:visited, a:focus {
        text-decoration:none;
    }
    .HeaderButton {
        border:none;
        min-width: 40px;
        cursor: pointer;
        float:left;
        margin-top: 7px;
        padding: 2px;
        text-align: center;
    }
    .HeaderButton:hover{
        background-image: linear-gradient(#3a3a3a, #4c4c4c);
        color:var(--agbazar-white);
        border-radius: 35px;
    }
    .HeaderButton:hover a{
        text-shadow: 0 0 black;
        color:var(--agbazar-white);
    }
    .HeaderButton:hover .fa{
        color:var(--agbazar-white);
    }
    .HeaderButton:hover svg{
        fill:var(--agbazar-white);
    }
    .show-nav-btn{
    }
    .fa-circle {
        font-size: 48px;
        color: blue;
    }
    .HeaderPhone {
        width:auto;
        background: var(--agbazar-skyblue);
        box-sizing: border-box;
        float:left;
        font-size: 22px;
        border-radius: 29px;
        overflow: hidden;
        padding: 2px;
        margin: 6px 17px 6px;
    }
    .HeaderPhone div {
        font-size: 19px;
        font-family: var(--agbazar-font-family-shabnam-light-fd);
        background-color: none;
        color: var(--agbazar-black);
        direction: rtl;
        float:right;
        text-align: right;
    }
    .HeaderPhone i{
        float:left;
        color: var(--agbazar-white);
        font-size: 19px;
        margin:5px;
    }
    .HeaderPhone a{
        color: var(--agbazar-white);
    }
    .HeaderToolBar{
        margin: 7px 2px;
        direction:rtl;
        float:right;
        
        border-radius: 15px;
        padding: 2px;
    }
    .HeaderToolBar a, .HeaderToolBar span{
        font-family:var(--agbazar-font-family-shabnam-light-fd);
        font-size: 14px;
        padding: 3px 1px;
    }
    .HeaderToolBar a{
        
        color:#000000;
    }
    .HeaderToolBar span{
        text-shadow: 0 0 black;
        border-radius: 15px;
        padding: 3px;
    }
    @keyframes bounce {
        0%,
        20%,
        50%,
        80%,
        100% {
            transform: translateY(0);
        }
        40% {
            transform: translateY(5px);
        }
        60% {
            transform: translateY(5px);
        }
    }
    .HeaderContainer {
        box-sizing:border-box;
        box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.02);
        position: sticky;
        top:0;
        z-index: 100;
        color:#48646e;
        background-color:var(--agbazar-white);
        width:100%;
    }
    .HeaderSectionOne, .HeaderSectionTwo{
        background-color:white;
        padding:0 15%;
        border-bottom: 1px solid rgb(0,0,0,0.06);
        overflow:hidden;
    }
   .HeaderItems{
       cursor:pointer;
       font-family:"kamran";
       margin:5px 20px;
       float:right;
   }
   .HeaderItems a{
       text-shadow: 0 0 black;
       padding: 1px;
       font-size: 14px;
       letter-spacing: -0.95px;
       font-weight: 100;
       padding: 30px 3px;
       float: left;
   }
   .HeaderItems svg{
       margin-top:10px;
       width:56px;
   }
    .DataContainer{
        padding:0 15%;
        overflow:hidden;
        margin-right: 0;
        margin-left: 0;
    }
    .Logo{
        height:90px;
        margin-right:10px;
        border:none;
        top:0;
        float:left;
        box-sizing: border-box;
        position: sticky;
        animation: rotate-element 3s infinite;
    }
    .Logo.side{
        position: absolute;
        top:200px;
        left:0px;
        height:25%;
    }
    .path, .ag-path-list{
        width:100%;
    }
    table, td, th, tr {
        border-spacing: 0;
        text-align: left;
        margin:1px;
    }
    table {
        cursor:pointer;
        direction: rtl;
        overflow: hidden;
        width:auto;
        min-width:31.13%;
        margin:  1.1%;
        margin-top: 10px;
        display:table;
        border-radius: 15px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        float:right;
        background-color: var(--agbazar-white);
        transition: transform .18s;
    }
    table:hover{
        transform: scale(1.05,1.05);
    }
    tr{
        background-color:var(--agbazar-white);
        transition: background, color .21s;
    }
    tr:hover td{
        background-color: #efefef;
    }
    
    th, td {
        box-sizing: border-box;
        color: var(--agbazar-black);
        font-size:14px;
        font-family: var(--agbazar-font-family-shabnam-light-fd);
        padding: 8px;
        text-align: center;
        width:auto;
        letter-spacing: -0.5px;
    }
    th{
        border-bottom: 1px solid #d1d1d1;
        color:black;
        font-family: var(--agbazar-font-family-shabnam-light-fd);
        height:18px;
        padding: 6px 3px;
    }
    td:nth-child(1), th:nth-child(1){
    }
    .info-box{
        background-color:var(--agbazar-white);
        box-sizing: border-box;
        border-radius:10px;
        cursor:pointer;
        display:inline-block;
        font-family: var(--agbazar-font-family-shabnam-light-fd);
        overflow:hidden;
        margin:0.69%;
        width:12.52%;
        transition: transform .18s;
        
        border: 1px solid rgba(0, 0, 0, 0.1);
    }
    .info-box:hover{
        transform: scale(1.03,1.03);
    }
    .info-box span, h2{
        background-color: var(--agbazar-white);
        font-size: 14px;
        font-weight:100;
        color: var(--agbazar-grey);
        text-align:center;
        height:30px;
    }
    .info-box .info-price{
        border-bottom:1px solid #e8e8e8;
        padding: 7px 0px;
        display: block;
        text-align: center;
        width:100%;
        font-size: 14px;
        color: #000
    }
    .info-box .info-change{
        text-align: center;
        padding-top:5px;
    }
    .info-box h2{
        background-color: var(--agbazar-white);
        padding:3px;
    }
   
    .info-box svg {
        width:35px;
        fill:var(--agbazar-grey);
    }
    .info-box i{
        float:right;
    }
    .red-arrow{
        position: relative;
        animation: bearish-arrow 0.7s infinite;
        animation-direction: alternate;
    }
    .green-arrow{
        position: relative;
        animation: bullish-arrow 0.7s infinite;
        animation-direction: alternate;
    }
    .green-change{
        color: #22ab94;
    }
    .red-change{
        color: #f23645;
    }
    @keyframes bearish-arrow {
        0%   { left: 0; top: -10px;}
        100%   {left: 0; top: 2px;}
    }
    @keyframes bullish-arrow {
        0%   { opacity:0.8;left: 0; top: 2px;}
        100%   {opacity:0.8;left: 0; top: -10px;}
    }
   .bnr-container{
       padding: 6px 0;
       color:var(--agbazar-white);
       font-family: "b titr";
       font-size:18px;
       margin:0.25% auto;
       text-align:center;
       display: inline-block;
       border-radius: 15px;
       margin:3px 1%;
    }
    .bnr-1{
        background: linear-gradient(28deg, rgb(203 203 203), #000000);
        width:98%;
    }
    .bnr-2{
        background: var(--agbazar-lightpurple-gradient);
        width:48%;
        float:right;
    }
    .bnr-3{
        background: linear-gradient(28deg, rgb(203 203 203), #000000);
        width:98%;
    }
    @keyframes moving_element{
    0% {
    transform: rotate(0deg);
    left: 0px;
    }
    25% {
    transform: rotate(20deg);
    margin-left: 0px;
    }
    50% {
    transform: rotate(0deg);
    margin-left: 10%;
    }
    55% {
    transform: rotate(0deg);
    margin-left: 10%;
    }
    70% {
    transform: rotate(0deg);
    margin-left: 10%;
    }
    100% {
    transform: rotate(-360deg);
    margin-left: 0px;
    }
    }
    .bnr-3 img{
        animation:moving_element 5s infinite;
        display:inline-block;
    }
    .bnr-3 a{
        background-color:white;
        border:none;
        border-radius:15px;
        box-sizing:border-box;
        color:black;
        cursor:pointer;
        padding: 3px;
        margin:1px 0.8%;
        float:left;
        font-family:"Kamran";
        font-size:15px;
    }
     .bnr-3 h4{
        float:right;
        text-align:center;
        padding:12px 2px;
        margin-left: 5px;
     }
    .bnr-3 button::hover{
        background-color:lightgrey;
        color:white;
        display:inline-block;
    }
    .bnr-4{
        box-shadow: 0 11px 11px 0 rgba(0, 0, 0, 0.2);
        position: fixed;
        bottom:1px;
        padding: 27px;
        right:1px;
        background: var(--agbazar-skyblue-gradient);
        width:15%;
        min-width: 200px;
        max-width: 200px;
        opacity: .9;
        z-index:100;
    }

    @keyframes rotate-element {
        50% {transform: rotate(-30deg);}
    }
    .background-grey{
        background-color: #8f9595;
    }
    @keyframes ticker {
        0% {
            transform: translateY(100%);
        }
        5%,
        25% {
            transform: translateY(0%);
        }
        30%,
        100% {
            transform: translateY(-100%);
        }
    }
    .news ul {
        width: 350px;
        padding-left: 10px;
    }
    .news li {
        position: absolute;
        top: 0;
        line-height: 29px;
        list-style: none;
        font-size: 10pt;
        animation: ticker 8s infinite linear;
    }
    .news ul:hover {
        animation-play-state: paused
    }
    .news li:nth-child(4) {
        animation-delay: -2s;
    }
    .news li:nth-child(3) {
        animation-delay: -4s;
    }
    .news li:nth-child(2) {
        animation-delay: -6s;
    } 
    .NewsContainer{
        background-color:white;
        direction:rtl;
        font-family:'kamran';
        overflow: hidden;
        position:relative;
        text-align:right;
        margin:80px 15% 15px 15%;
    }
    .NewsContainerTitle, .NewsContainerContent{
        padding-right:10px;
        padding-top:7px;
        padding-bottom:7px;
        cursor:pointer;
        float: right;
        overflow-x:hidden;
        white-space:nowrap;
    }
    .NewsContainerContent{
        width:100%;
        margin-right:125px;
    }
    .NewsContainerTitle{
        z-index:10;
        animation: horizontal 2s infinite ;
        border-radius:15px;
        background-color:#3551d8;
        color:white;
        position:absolute;
        padding-left:20px;
        padding-right:20px;
        width:auto;
    }
    .NewsContainerTitle:hover{
        background-color:#4c4c4c;
    }
    .NewsContainerContent .slider a{
        border-radius:5px;
        margin-right:15px;
    }
    .NewsContainerContent .slider a:hover,.NewsContainerContent .slider a:hover i{
        color:red;
    }
    .NewsContainerContent .slider a, .NewsContainerContent .slider a .NewsContainerContentIcon {
        font-size:19px;
    }
    .NewsContainerTitle h3, .NewsContainer .NewsContainerTitle i, .NewsContainer{
        font-size:21px;
        padding-right:5px;
        float: right;
        color:white;
    }
    .slider{
        animation: slider 50s infinite linear ;
        width:100%;
        overflow-x:hidden;
        white-space:nowrap;
    }
        
    @keyframes horizontal {
        0%   {right: 0px;}
        50%  {right: 20px}
        100% {right: 0px;}
    }
    @keyframes slider {
        0%  {
            transform: translateX(-95%);
        }
        100% {
            transform: translateX(95%);
        }
    }
    .close-icon{
        cursor:pointer;
        color:white;
        font-size:20px;
        position:absolute;
        top:5px;
        left:5px;
    }
    .FooterContainer{
        background-color: white;
        border:none;
        border-top-right-radius: 25px;
        border-top-left-radius: 25px;
        padding: 5px 0;
        text-align: center;
    }
    .FooterContainer p {
        margin: 0;
        text-align:center !important;
        font-size: 14px;
        font-family: "b titr";
        color: #6e6e6e;
    }
    @media (max-width: 1500px){
        .DataContainer, .NewsContainer, .HeaderSectionOne, .HeaderSectionTwo{
            padding:0 4%;
            
        }
        .NewsContainer{
            margin:80px 2.5% 15px 2.5%;
        }
    }
    @media (min-width: 0) and (max-width: 1100px) {
        .DataContainer, .NewsContainer, .HeaderSectionOne, .HeaderSectionTwo{
            padding:0 2.5%;
        }
        .NewsContainer{
            margin:90px 2.5% 15px 2.5%;
        }
        .HeaderToolBar span{
            padding:2px 20px;
        }
        .HeaderItems{
            
            width: 13%;
            margin: 0 .4%;
        }
        .HeaderItems a,.HeaderButton a{
            display:none;
        }
        .HeaderItems svg{
           width:  90%;;
           margin: 28px 3%;
        }
        .HeaderButton{
            width:auto;
            margin:1.5%;
        }
        .bnr-container{
             padding: 10px 0;
        }
        .bnr-3,.bnr-2,.bnr-1{
            width:95%;
            margin:3px 2.5%;
        }
        .Logo{
            height:25%;
        }
        .Logo.side, .show-nav-btn, .show-column, .bnr-4, .DontShow{
            display: none;
        }
        .HeaderButton{
            float:left;
        }
        table{
            min-width: 97%;
            margin: 5px 1.5%;
        }
        .info-box  {
            min-width: 46%;
            margin: 5px 1.5%;
        }
        .info-box:nth-child(8){
             min-width: 97%;
        }
        .info-box .info-change{
            padding-top:6px;
        }
        td, th{
           
            width:33%;
        }
        .bnr-3 a{
            width:48%;
        }
    }