@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,900);

body {

    padding: 0;
    box-sizing: border-box;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;

}

/* Handle */
::-webkit-scrollbar-thumb {
    background: black;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: black;
}

.wrapper {
    display: table;
    height: 100%;
    width: 100%;
}

.container-fostrap {
    display: table-cell;
    padding: 1em;
    text-align: center;
    vertical-align: middle;
}

.fostrap-logo {
    width: 100px;
    margin-bottom: 15px
}

h1.heading {
    color: #fff;
    font-size: 1.15em;
    font-weight: 900;
    margin: 0 0 0.5em;
    color: #505050;
}

@media (min-width: 450px) {
    h1.heading {
        font-size: 3.55em;
    }
}

@media (min-width: 760px) {
    h1.heading {
        font-size: 3.05em;
    }
}

@media (min-width: 900px) {
    h1.heading {
        font-size: 3.25em;
        margin: 0 0 0.3em;
    }
}

.clast {
    display: block;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
    transition: box-shadow .25s;
}

.clast:hover {
    box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
}

.cardCount {
    display: block;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    transition: box-shadow .25s;
}

.cardCount:hover {
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.img-card {
    width: 100%;
    height: 200px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    display: block;
    overflow: hidden;
}

.img-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: all .25s ease;
}

.card-content {
    padding: 15px;
    text-align: left;
}

.card-title {
    margin-top: 0px;
    font-weight: bold;
    text-align: center;
    font-size: 20px;
}

.card-title a {
    color: #000;
    text-decoration: none !important;
}

.card-read-more {
    border-top: 1px solid #D4D4D4;
}

.card-read-more a {
    text-decoration: none !important;
    padding: 10px;

    text-transform: uppercase
}

.swiper11 {
    margin-right: 200px !important;
    width: 1000px;
    height: 400px;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.swiper-slide {
    width: 80%;
}

.swiper-slide:nth-child(2n) {
    width: 60%;
}

.swiper-slide:nth-child(3n) {
    width: 40%;
}

#p {
    --a: -45deg; /* control the angle */
    --t: .23em;
    /* thickness of the underline */

    color: #d74e27;
    margin-top: 10px;

}


/*#p span {*/
/*    --_s: calc(var(--t) * cos(var(--a)));*/
/*    background: linear-gradient(var(--a), #0000 var(--_s), currentColor 0 calc(100% - var(--_s)), #0000 0) bottom/var(--i, 90%) var(--t) no-repeat;*/
/*    padding: 0 .25em calc(var(--t) + .1em);*/
/*    -webkit-box-decoration-break: clone;*/
/*    box-decoration-break: clone;*/
/*    transition: .3s;*/
/*    cursor: pointer;*/
/*}*/

#p:hover span {
    --i: 100%;
}

#p {
    font-family: sans-serif;
    font-size: 25px;
    font-weight: bold;
    line-height: 1.5;
    text-transform: capitalize;
}

.services .ser:hover span {
    color: #d74e27 !important;
}

.services .card {
    border-radius: 12px !important;
}

/* پرفروش ترین ها */
.discount {
    background-color: #241f3f;
}

.c1 {
    position: relative;
    border: solid 0.2px #c8c8c8;
    background-color: #fff;
    border-radius: 4px;

}


@media screen and (max-width: 900px) {
    .special22 {
        font-size: 22px;
    }
}

.special {
    display: block;
    font-size: 30px;
    font-weight: 900;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.71;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
}

@media screen and (max-width: 900px) {
    .special {
        font-size: 45px;
    }
}

.special22 {

    font-size: 14px;
    font-weight: bold !important;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
}

@media screen and (max-width: 900px) {
    .special22 {
        font-size: 22px;
    }
}

.textCardLast {

    height: 38px;
}

.textCardLast span {
    padding-top: 8px;
    display: block;
    max-height: 2em; /* حداکثر ارتفاع برای یک خط */
    overflow: hidden; /* مخفی کردن متن اضافی */
    white-space: nowrap; /* جلوگیری از شکستن خط */
    text-overflow: ellipsis; /* نمایش سه نقطه (...) برای متن اضافی */
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    direction: rtl;
    color: #232323;
    text-align: justify;
    font-size: 1rem;
    line-height: 1.75rem;
}

.textCard {
    position: relative;
    height: 30px !important;
    width: 100%;
}

.textCard span {
    display: block;
    max-height: 1.4em; /* حداکثر ارتفاع برای یک خط */
    overflow: hidden; /* مخفی کردن متن اضافی */
    white-space: nowrap; /* جلوگیری از شکستن خط */
    text-overflow: ellipsis; /* نمایش سه نقطه (...) برای متن اضافی */

    font-weight: 500;
    font-stretch: normal;
    font-style: normal;

    letter-spacing: normal;
    direction: rtl;
    color: #232323;
    text-align: justify;
    font-size: 1.25rem;
    line-height: 1.75rem;

}

.textCard span:hover {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity));
}

.textCardLast span:hover {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity));
}

.publisher-img {
    height: 1.5rem !important;
    width: 1.5rem !important;
    border-radius: 50%;
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.02), 0 6px 20px 0 rgba(0, 0, 0, 0.02);
    margin: 5px;
}

.publisher-name {
    font-size: .75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(128 146 176 / var(--tw-text-opacity));
}

.publisher-name:hover {
    --tw-text-opacity: 1;
    color: rgb(71 84 102 / var(--tw-text-opacity));
}

.img-best {
    height: 150px !important;
    width: 100% !important;
}

.image-container {
    width: 100%; /* عرض ثابت برای کانتینر */
    height: 200px; /* ارتفاع ثابت برای کانتینر */
    overflow: hidden; /* مخفی کردن محتوای اضافی */
    position: relative; /* برای موقعیت‌دهی بهتر */
}

.img-last {


    transition: transform 0.3s ease; /* انتقال نرم برای تغییرات */
}

.img-last:hover {
    transform: scale(1.1); /* بزرگ‌تر کردن عکس */
}

.cLast {
    height: 300px !important;
    width: 100%;
}


.btn-best a span {
    color: #fff;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: normal;
}

.btn-best a {
    border: solid 1px #fbaf00;
    border-radius: 14px;
    text-align: center;
    width: 100px;
    background-color: #fbaf00 !important;
}

.text-introduction {
    color: #3d3d3d;
    font-size: 14px;
    line-height: 2rem !important;
    font-weight: 400;
}

.special22 span {
    color: #d74e27;
}

.btn-last {
    border: 2px solid #d74e27;
    color: #d74e27;
}

.dateAndView span {
    display: block;
    font-size: .75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(128 146 176 / var(--tw-text-opacity));
}

.image-container-list {
    width: 100%; /* عرض ثابت برای کانتینر */
    height: 150px; /* ارتفاع ثابت برای کانتینر */
    overflow: hidden; /* مخفی کردن محتوای اضافی */
    position: relative; /* برای موقعیت‌دهی بهتر */
}

.img-list {
    width: 100%; /* عرض عکس را به 100% تنظیم کنید */
    height: 100%; /* ارتفاع خودکار */
    transition: transform 0.3s ease; /* انتقال نرم برای تغییرات */
}

.img-list img {
    width: 100%;
}

.img-list:hover {
    transform: scale(1.1); /* بزرگ‌تر کردن عکس */
}

/* پایان پرفروش ترین ها */

/**/
.detailProduct {
    background-color: #ffffff;
}

.detail h2 {
    font-size: 1.5rem;
    color: rgba(51, 65, 85, var(--tw-text-opacity));
}

.detail p {

    color: rgba(101 105 112);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* تعداد خطوط */
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 2; /* ارتفاع خط */
    max-height: 5em; /* حداکثر ارتفاع متن */
}

.img-detail {
    width: 100%;
    height: 230px;

}

.details-btn {
    background-color: rgba(34, 197, 94, 1); /* رنگ سبز با حداکثر شفافیت */
    flex-direction: row;
    width: 40%;
    border: 2px solid rgba(34, 197, 94, 1);
}

.details-btn:hover {
    background-color: #ffffff; /* رنگ سبز هنگام هاور */
    flex-direction: row;
    width: 40%
}

.text-green-700 a p {

    color: #FFFFFF;

}

.text-green-700:hover a > p {

    color: rgba(34, 197, 94, 1);

}

.font-bold {
    font-weight: 700;
}

.text-5xl {
    font-size: 2.5rem;
    line-height: 1;
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
    color: #d74e27;
}

.detail-img {
    width: 9%;
    color: #FFFFFF !important;
}

.btn-paid {
    color: #FFFFFF;
    background-color: unset;
    border: 0;
    font-family: "IRANSansWeb";
}

.form-btn-paid {
    margin-left: 10px;
}

.btn-outline-sormeee {
    border: solid 1px #241f3e;
    color: #241f3e;
}

.btn-outline-sormeee:hover {
    border: solid 1px #e3532a;
    background-color: #d64e28;
    color: #ffffff;
    border: solid 1px #e3532a;
}

.border-gray-100 {
    --tw-border-opacity: 1;
    border-color: rgb(227 230 236 / var(--tw-border-opacity));
}

.btn-free {
    flex-direction: row;
    background-color: #241f3e;
    width: 30%;
}

/*datail of product and css for single page*/
.text-orange {
    color: #e3532a;
}

.description-detail p {
    --tw-text-opacity: 1;
    color: rgba(101 105 112);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75rem;
    margin-bottom: 1rem;

    text-align: right;
    line-height: 2.2;
    word-spacing: 1.1px;
}

.description-detail strong {
    font-weight: bold;
}

.information_detail p {
    font-size: 12px;
    color: #e3532a;
    font-weight: 600;
}

.information_detail span {
    padding-right: 5px;
    font-weight: lighter;
    color:  rgba(128, 146, 176, 1);
}
.text-navy-blue{
    color: #241f3e;
}
.text-navy-heavy-blue{
    font-weight: 800;
}
.information-title{
    color: #0c1427!important;
    font-weight: bolder;
    font-size: 16px;
    margin-bottom: 1.5rem!important;
}
.tag-style{
    color: rgba(128, 146, 176, 0.6);


}
.tag-btn{
    display: inline-block;
    border: solid 1px rgba(128, 146, 176, 0.3);
    text-align: center;
    font-weight: 400;
    line-height: 1.625;
    border-radius: 5px;
    color: rgba(128, 146, 176, 0.6);

}
.tag-btn:hover{
    display: inline-block;
    border: solid 1px rgba(101 105 112);
    text-align: center;
    font-weight: 400;
    line-height: 1.625;
    border-radius: 5px;
    color: rgba(101 105 112);

}
.title-light{
    color:rgba(128, 146, 176, 0.6)
}
/*end of datail of product and css for single page*/
.btn-font{
    font-family: "IRANSansWeb"!important;
}

@media (min-width: 570px) {
    /* استایل‌های مورد نظر برای صفحه‌های بالای 570px */
    .m-r-570px {
       margin-right: 50px;
    }
}
@media (min-width: 985px) {

    .h-300{
        height: 300px;
    }
}

@media (max-width: 570px) {
    /* استایل‌های مورد نظر برای صفحه‌های بالای 570px */
    .btn-font-size {
        font-size: 11px;
    }
}