*{
    margin: 0;
    padding: 0;
}
@font-face {
    font-family: 'shabnam';
    src: url('../fonts/shabnam/Shabnam.eot?#') format('eot'),  
         url('../fonts/shabnam/Shabnam.woff') format('woff'),
         url('../fonts/shabnam/Shabnam.ttf') format('truetype');
    font-style:normal;
    font-weight:normal;
}
@font-face {
    font-family: 'aghasem';
    src: url('../fonts/aghasem/AGHASEM.TTF') format('truetype');
    font-style:normal;
    font-weight:normal;
}
  body, p, h1, h2, h3, h4, h5, h6, a, ul, ol, li{
      font-family: Shabnam;
}
nav{
    background-color: #f7d02d;
}
#navbarDropdown{
    color: #fff;
}
.login-card{
    top: 20%;
}
.login-card-header{
    background-color: #f7d02d;
    color: #fff;
}
.login-button{
        background-color: #f3af34;
        color: #fff;
}
.login-button:hover{
    background-color: #f3af34;
    color: #fff;
}
.card{
    text-align: center;
    margin: 10px 15px;
    border: 2px solid rgb(235, 235, 235);
    border-radius: 20px;
}
.examcard-title a{
    text-decoration: none;
    color: rgb(24, 234, 111);
    font-family: Aghasem;
}
.addexambtn, .addexambtn:hover{
    background-color: rgb(24, 234, 111);
    color: #fff;
    margin-top: 10px;
}
.marketercard-title a{
    text-decoration: none;
    color: rgb(247, 216, 3);
    font-family: Aghasem;
}
.addmarketerbtn, .addmarketerbtn:hover{
    background-color: rgb(247, 216, 3);
    color: #fff;
    margin-top: 10px;
}
.productcard-title a{
    text-decoration: none;
    color: rgb(255, 58, 3);
    font-family: Aghasem;
}
.addproductbtn, .addproductbtn:hover{
    background-color: rgb(255, 58, 3);
    color: #fff;
    margin-top: 10px;
}
.bookcard-title a{
    text-decoration: none;
    color: rgb(128, 225, 244);
    font-family: Aghasem;
}
.addbookbtn, .addbookbtn:hover{
    background-color: rgb(128, 255, 244);
    color: #fff;
    margin-top: 10px;
}
.messagecard-title a{
    text-decoration: none;
    color: rgb(59, 216, 247 );
    font-family: Aghasem;
}
.addmessagebtn, .addmessagebtn:hover{
    background-color: rgb(59, 216, 247);
    color: #fff;
    margin-top: 10px;
}
.breadcrumb {
    display: block;
    font-size: 14px;
    padding: .75rem 1rem;
    margin: 0;
    list-style: none;
    background-color: #f2af33;
    text-align: right;
    margin-bottom: 2%;
}
.addmarketer{
    margin: 20px;
}
.addmarketer, .addmarketer:link, .addmarketer:visited{
    background-color: #808080;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
}
.addmarketer:hover{
    background-color: #f2af33;
    color: #fff;
}

.marketers-list{
    width: 90%;
    border-collapse: collapse;
    position: absolute;
    right: 50%;
    transform: translateX(50%);
}
.marketers-list th{
    color: white;
    font-weight: bold;
}
.marketers-list td, .marketing-list th{
    padding: 6px;
    border: 1px solid #ccc;
    text-align: right;
}
.save-btn{
        background-color: #f3af34;
        color: #fff;
        float: left;
        margin: 2% 0;
}
.save-btn:hover{
    background-color: #f3af34;
    color: #fff;
}
.card-header{
    background-color: #f7d02d;
    color: #fff;
}
.feedbacks-link{
    color: #fff;
    text-decoration: none;
}
.feedbacks-link:hover{
    color: #fff;
    text-decoration: none;
}
.marketer-list {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}
a{
    text-decoration: none;
}
a:hover{
    text-decoration: none;
}
.btns{
    display: flex;
    justify-content: center;
}

@media only screen and (max-width: 600px) {
    .edit, .remove{
        font-size: 6px;
        width: 35px;
        padding: 2px 5px;
    }
    .marketers-list td, .marketing-list th{
        padding: 1px;
        border: 1px solid #ccc;
        text-align: right;
        font-size: 8px;
    }
  }


@media only screen and (max-width: 450px) {
    .edit, .remove{
        font-size: 4px;
        width: 28px;
        padding: 1px 3px;
    }
    .marketers-list td, .marketing-list th{
        padding: 1px;
        border: 1px solid #ccc;
        text-align: right;
        font-size: 5px;
    }
  }