@font-face {
    font-family: vazir-medium;
    src: url(../fonts/Vazir-Medium.woff2);
}


* {
    text-decoration: none;
    list-style: none;
    font-family: vazir-medium !important;
}
p{
  margin: 0;
  padding: 0;
}

@font-face {
    font-family: vazir-medium;
    src: url(../fonts/Vazir-Medium.woff2);
}
.breadcrumb{
  width: max-content;
    background: #295e5e17;
    border-radius: 30px;
    margin-top: 20px;
    margin-right: 20px;
}
.breadcrumb  a {
  color: rgb(207, 117, 0);
}

@media screen and (min-width: 400px) {

    .swiper-container {
        width: 100%;
        height: 250px;
        border-radius: 15px;
    }
    .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}
@media screen and (min-width: 600px){

    .swiper-container {
        width: 100%;
        height: 350px;
        border-radius: 15px;
    }
    .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

}
@media screen and (min-width: 800px) {

    .swiper-container {
        width: 100%;
        height: 400px;
        border-radius: 15px;
    }
    .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}
@media screen and (min-width: 1200px) {

    .swiper-container {
        width: 100%;
        height: 400px;
        border-radius: 15px;
    }

    .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}


.layout {
    width: 98%;
    height: max-content;
    padding-bottom: 20px;
    margin: 0 auto;
    margin-top: 5%;
    
}
#search-form col-lg-3 {
    flex: 0 0 20% !important;
}
.sidebar {
    width: 80%;
    margin: 0 auto;
    background: cadetblue;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: max-content;
    position: relative;
    top: -10px;
    margin-bottom: -60px !important;
    padding: 10px;
}
.sidebar-body {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}
#filterr {
    font-weight: 600;
    color: white;
    text-align: center;
    padding: 0;
    margin: 0;
}
.book-body {
    width: 100%;
    background: #f7f7f7d9;
    border-radius: 80px;
    border: 3px solid #c3c3c3;
    box-shadow: 2px -4px 10px #00540073;
    padding: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 20px;
}

.book-layout {
    width: 300px;
    height: inherit;
    padding-bottom: 15px;
    border-left: 3px solid #003642bd;
    border-radius: 15px;
    display: inline-block;
    box-shadow: 5px -4px 6px #023e3982;
    background: white;
    margin-bottom: 50px;
}

.book-layout:hover {
    border-right: 1px solid gray;
    transition: all ease .3s;
    cursor: pointer;
}

.book-img {
    width: 220px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    overflow: hidden;
    object-fit: cover;
    margin-bottom: 20px !important;
    border-radius: 5%;
    margin: 15px auto;
}
#imgbook {
    height: 100%;
    width: 100%;
}
.textt {
    width: 95%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    font-family: vazir-medium;
    padding: 10px 15px 10px 15px;
}
.text-item-desc{
  gap: .5rem;
  font-size: 14px;
  font-weight: 600;
}
#text-title{
  color: #fd0000b7;
}
#search-form {
    padding: 0;
    margin: 0;
    position: relative;
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
}
#search-input {
    height: 40px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid #8d8d8db5;
    width: 100%;
}
#h6 {
    color: crimson;
}

.text>P {
    font-size: 18px;
    font-family: vazir-medium;
}
span{
    align-items: baseline;
}


    @media (max-width: 991.98px) {
      .select2-container {
        min-width: 100%; } }
  
  .select2-results__option {
    padding-right: 20px;
    vertical-align: middle; }
  
  .select2-results__option:before {
    content: "";
    display: inline-block;
    position: relative;
    height: 20px;
    width: 20px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background-color: transparent;
    margin-right: 15px;
    margin-left: 10px;
    vertical-align: middle; }
  
  .select2-results__option[aria-selected=true]:before {
    font-family: 'fontAwesome';
    content: "\f00c";
    color: #fff;
    background-color: #fd5f00;
    border: 0;
    display: inline-block;
    padding: 0;
    line-height: 1.2;
    padding-left: 2px; }
  
  .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #fff; }
  
  .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #fff;
    color: #000; }
  
  .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-radius: 4px;
    -webkit-box-shadow: 0px 3px 22px -15px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0px 3px 22px -15px rgba(0, 0, 0, 0.8);
    box-shadow: 0px 3px 22px -15px rgba(0, 0, 0, 0.8); }
  
  .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #fd5f00;
    border-width: 2px; }
.select2-container {
    width:100%!important;
}
    .select2-container--default .select2-selection--multiple {
    border-width: 2px;
    border-color: transparent;
    padding: 0 10px;
    line-height: 1.6;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    display: flex !important;
    align-items: center;
    height: 40px;
    border-radius: 15px !important;
    -webkit-box-shadow: 0px 3px 22px -15px rgba(0, 0, 0, 0.63);
    -moz-box-shadow: 0px 3px 22px -15px rgba(0, 0, 0, 0.63);
    box-shadow: 0px 3px 22px -15px rgba(0, 0, 0, 0.63);
}
    @media (prefers-reduced-motion: reduce) {
      .select2-container--default .select2-selection--multiple {
        -webkit-transition: none;
        -o-transition: none;
        transition: none; } }
  
  .select2-container--open .select2-dropdown--below {
    padding: 10px 0;
    border-radius: 4px;
    border: none;
    -webkit-box-shadow: 0px 3px 22px -15px rgba(0, 0, 0, 0.63);
    -moz-box-shadow: 0px 3px 22px -15px rgba(0, 0, 0, 0.63);
    box-shadow: 0px 3px 22px -15px rgba(0, 0, 0, 0.63); }
  
  .select2-selection .select2-selection--multiple:after {
    content: 'hhghgh'; }
  
  .select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: none;
    background: rgba(0, 0, 0, 0.1);
    font-size: 15px;
    padding: 2px 10px;
    color: gray; }
  
  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 5px; }
  
  .select2-container--default .select2-selection--multiple .select2-selection__clear {
    color: #fd5f00; }

.img-item-book {
    height: 300px;
    width: 65%;
    display: flex;
    justify-content: center;
    object-fit: cover;
    margin: 0 auto;
}
    .img-item-book > img {
        height: 100%;
        width: 100%;
        border-radius: 20px;
        box-shadow: 5px 5px 5px #006676;
    }

#item-description{
    margin-top: 40px;
    margin-right: 0;
    padding-right: 0;
}
#item-description > li {
    margin-bottom: 20px;
}

#item-description > li > span{
  display: flex;

  border-bottom: 1px solid rgba(187, 186, 186, 0.363);
}
#pid {
   width:130px;
}
.search-box{
  display: flex;
  width:100%;
  justify-content: center;
}
.search-box > i {
  position: absolute;
  margin-right: 80px;
  margin-top: 10px;
  transition: all ease .5s;
}
.search-box:focus-within >i{
  margin-right: 180px;
  transition: all ease .5s;
}
.bi{
  position: absolute;
  z-index: 1;
  left: 10%;
  margin-top:5px;
}
#item-amazon {
    background: #cbcbcb21;
    border-radius: 15px 45px 15px 45px;
    border: 4px solid #018365;
    box-shadow: 5px 5px 5px #328490;
}
.box-content {
    width: 100%;
    height: max-content;
    padding-bottom: 30px !important;
    border-radius: 10px 50px 10px 50px;
    background: #f8f8f8;
    margin-top: 4rem;
    padding: 25px;
    border: 3px solid #018365;
    box-shadow: 5px 5px 5px #328490;
}
.select2-selection__rendered{
    display:flex !important;
}
.select2-selection__choice{
    margin-right:0 !important;
    margin-left:0 !important;
}

#rangeprice{
    width:227px;
    border-radius:15px;

}

#priceselect{
    width:100%;
    height:40px;
    border-radius:15px;
    padding:5px;
}

#chap {
    position: absolute;
    left: 0;
    top: 0;
    color: red;
    font-size: x-large;
    font-weight: 600;
    rotate: -15deg;
    border: 1px solid;
    box-shadow: 6px 3px 10px;
    animation: bounceIn 1s ease-in-out 3s 5;
    visibility:hidden;

}

#re:hover #svg {
    color: #f7941d !important;
   transition: all ease-in-out 0.6s;
}

#re:hover #under {
    width: 100%;
    height: 1px;
    border-radius: 0px;
    background-color: #f7941d !important;
    transition: all ease-in-out 0.6s;
}


.pageload {
    width: 100%;
    height: 100vh;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    background: #28786af2;
}

.loading {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* background: red;  test kon*/
    border-top: 10px solid #e74c3c;
    position: relative; /* havaset bashe akhar bezar*/
    animation: a1 2s linear infinite; /* havaset bashe akhar bezar*/
}

    .loading:before, .loading:after {
        content: '';
        width: 200px;
        height: 200px;
        /* background: red;  test kon*/
        position: absolute;
        left: 0;
        top: -10px;
        border-radius: 50%;
    }

    .loading:before {
        border-top: 10px solid #e67e22;
        transform: rotate(120deg);
    }

    .loading:after {
        border-top: 10px solid #3498db;
        transform: rotate(240deg);
    }

    .loading span {
        position: absolute;
        width: 200px;
        height: 200px;
        color: #fff;
        text-align: center;
        line-height: 200px;
        animation: a2 2s linear infinite; /* havaset bashe akhar bezar*/
    }

@keyframes a1 {
    to {
        transform: rotate(360deg);
    }
}
@keyframes a2 {
    to {
        transform: rotate(-360deg);
    }
}
.loaditem {
    width: 100%;
    height: 200vh;
    display: flex;
    justify-content: center;
}
.Previous  {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
    cursor:pointer;
}
.Next {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
    cursor: pointer;
}
.pagination > li > a:hover {
    text-decoration: none;
}
.Previous, .Next :hover {
        z-index: 2;
        color: #0056b3 !important;
        text-decoration: none !important;
        background-color: #e9ecef;
        border-color: #dee2e6;
}
#searchbutton {
    border: none;
    background: no-repeat;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    left: 10px;
    outline:none;
}
#searchbutton:focus {
    border: none;
    background: no-repeat;
    outline:none;
    
}