@font-face {
    font-family: 'iranyekanwebbold';
    src: url('../../Fonts/iranyekanwebbold.eot') format('embedded-opentype'), url('../../Fonts/iranyekanwebbold.ttf') format('truetype'), url('../../Fonts/iranyekanwebbold.woff') format('woff'), url('../../Fonts/iranyekanwebbold.woff2') format('woff2');
}

@font-face {
    font-family: 'iranyekanweblight';
    src: url('../../Fonts/iranyekanweblight.eot') format('embedded-opentype'), url('../../Fonts/iranyekanweblight.ttf') format('truetype'), url('../../Fonts/iranyekanweblight.woff') format('woff'), url('../../Fonts/iranyekanweblight.woff2') format('woff2');
}

@font-face {
    font-family: 'iranyekanwebregular';
    src: url('../../Fonts/iranyekanwebregular.woff2') format('woff2'), url('../../Fonts/iranyekanwebregular.eot') format('embedded-opentype'), url('../../Fonts/iranyekanwebregular.ttf') format('truetype'), url('../../Fonts/iranyekanwebregular.woff') format('woff');
}

@font-face {
    font-family: 'B Nazanin Bold';
    src: url('../../Fonts/B Nazanin Bold_YasDL.ttf') format('truetype');
}


@font-face {
    font-family: 'B Nazanin';
    src: url('../../Fonts/Far_Nazanin.ttf') format('truetype');
}

@font-face {
    font-family: 'shin';
    src: url('../../Fonts/Adobe arabic shin.ttf') format('truetype');
}

@font-face {
    font-family: 'ebrimabd';
    src: url('../Fonts/ebrimabd.ttf') format('truetype');
}

.lastRoutRender {
    display: flex;
    flex-wrap: wrap
}

.scrollToTop{
    display:none
}

img {
    pointer-events: none;
}

.table thead th{
    vertical-align:middle
}

.phonShow {
    display: none
}

.Phone {
    display: none !important
}

.Desktop {
    display: block
}

body {
    padding: 0 !important
}

.phoneSize {
    display: none !important
}

.SuccessForm, .FailedForm {
    display: none;
    direction: rtl;
    background-color: #d9d7d3;
    border-radius:10px;
    text-align:center;
    line-height:40px;
    font-family:iranyekanwebregular
}

form{
    text-align:left;
    margin-bottom:20px
}

form input, form textarea {
    background-color: #d9d7d3;
    margin-bottom: 10px;
    width: 100%;
    line-height:30px;
    border:none;
    resize:none;
    padding:3px 10px;
    text-align:right;
    font-family:iranyekanwebregular;
    font-size:13px;
    direction:rtl
}

    form .button_su_inner {
        height: 35px !important;
        line-height: 32px !important;
        width: 100px !important;
        border-radius: 15px 0 !important
    }

    form .button_su{
        border-radius:15px 0 !important
    }

    form input:focus, form textarea:focus {
        outline: 2px solid #a6a4a4
    }

    form input {
        line-height: 30px !important;
    }

form input:first-child,textarea{
    border-radius:0 10px
}

    form input:nth-child(2) {
        border-radius:  10px 0
    }

.desktopTitle {
    display: block
}

.phoneTitle {
    display: none
}

.SliderNextOtherP, .SliderPrevOtherP {
    display: none 
}

.windowSize{
    display:flex;
    width:100%
}

.Phone-Header {
    display: none
}

video{
    border-radius:30px 0 !important
}

.noRadius {
    border-radius: 0 0 15px 0 !important
}

.mainPart {
    display: none
}

.SPSection{
    width:1520px;
    margin:0 auto;
    position:relative
}

.SPStyle {
    background-color: rgba(27, 26, 24, 0.8);
    border-radius: 50px;
    padding: 4% 3%;
    box-shadow: 0 0 5px #000000b5;
    position:relative
}

.SPRoute,.SPRoute div{
    display: flex;
    flex-wrap:nowrap;
    direction:rtl
}

.SPRoute p{
    color:white;
    font-family:iranyekanwebbold;
    margin-left:10px;
    margin-bottom:0;
    line-height:40px;
    font-size:15px;
    transition:all 0.3s ease-in-out 0s

}

    .SPRoute p:hover {
        color: #f8b500;
        cursor: pointer
    }

.SPRoute i{
    margin-left:10px;
    color:white;
    font-size:13px;
    line-height:40px
}

.Pardisan{
    display:flex;
}

.SPlogo{
    width:40px;
    margin-left:30px;
}

.SPlogo img{
    width:100%
}

.SPContent {
    text-align: right;
    direction: rtl;
    padding: 0 4.7%;
    position:relative
}

.SPHeader h1 {
    font-family: shin,Ebrima;
    color: white;
    font-size:43px;
    margin-bottom:2.5%
}

.SPHeader h1 span{
    font-size:17px;
    margin-right:10px;
    font-family:iranyekanwebbold
}

.SPbgEl{
    position:absolute;
    left:-1.7%;
    width:42.37%;
    z-index:1
}

.SPRow{
    display:flex;
}

.SPSlider {
    flex: 0 0 40%;
    border-radius:30px 0;
    /*overflow:hidden;*/
    position:relative;
    margin-top:4%;
    z-index:2
}


    .SPSlider img {
        width: 100%;
        border-radius:30px 0
    }

.SPLogoSlider img{
    border-radius:0 0 30px 0
}

.SliderImage {
    position: relative
}

.SPInfo {
    flex: 0 0 60%
}
.SPExtend{
    width:22px !important;
    position:absolute;
    top:5%;
    left:5%;
    border-radius:0 !important;
    font-size:22px;
    z-index:10
}



.SPExtend:hover {
    cursor: pointer
}

.SPLogoSlider {
    width: 23% !important;
    position: absolute;
    bottom: 8.5%;
    left: 0;
    filter: drop-shadow(0 5px 4px #0000004d);
}

.SPTab{
    padding-left:10%
}

.TabHeader{
    display:flex
}

.TabHeaderItem{
    flex:0 0 25%;
    text-align:center;
    color:white;
    font-family:iranyekanwebbold;
    line-height:55px
}

.TabHeaderItem:hover{
    cursor:pointer
}

.ActiveTab {
    border-bottom: solid 5px #f8b500
}
.TabContent::-webkit-scrollbar {
    width: 12px; /* width of the entire scrollbar */
}

.TabContent::-webkit-scrollbar-track {
    background: #f3f3f3; /* color of the tracking area */
}

.TabContent::-webkit-scrollbar-thumb {
    background-color: #bfbebe; /* color of the scroll thumb */
    border-radius: 20px; /* roundness of the scroll thumb */
    border: none; /* creates padding around scroll thumb */
}


.TabContent {
    background-color: white;
    padding: 6.3% 8% 5%;
    position: relative;
    scrollbar-width: thin; /* "auto" or "thin" */
    scrollbar-color: #bfbebe #f3f3f3; /* scroll thumb and track */;
    direction:ltr;
    z-index:20
}

.textStyleCenter{
    font-family:iranyekanwebregular;
    text-align:center;
    direction:rtl
}

.textStyleRight {
    font-family: iranyekanwebbold;
    text-align: right;
    margin-bottom: 10px;
    direction: rtl
}

.scrollY {
    overflow-y: scroll
}

.TabContent ul {
    padding: 0
}

.fa-share-alt{
    font-size:22px
}

.TabContent li {
    color: #35332f;
    font-family: iranyekanwebregular;
    list-style-type: none;
    line-height: 25px
}

        .TabContent li i {
            font-size: 9px;
            line-height: 25px;
            color: #f8b500;
            margin-left:5px
        }






.headerStyle h2 {
    color: #5c5a54;
    font-family: iranyekanwebbold;
    font-size: 25px;
    text-align: right;
    margin-right: 35px;
    line-height: 65px
}

.otherProducts{
    margin-top:50px
}

.mainSection {
    background-color: white;
    border-radius: 50px 0;
    margin: 0 -40px;
    display: flex;
    padding: 2% 4% 2%;
    box-shadow: 0 0 5px #0000002e
}

.OPItem {
    flex: 0 0 20%;
    padding: 0 2% 2%;
    overflow: hidden;
    border-radius: 15px 0;
    transition:all 0.2s ease-in-out 0s;
    background-color:white
}

.OPItem:hover{
    cursor:pointer;
    box-shadow:0 0 5px #00000054;
    position:relative;
    z-index:10;
    transform:scale(1.05)
}

.OPItem p{
    color:#5c5a54;
    font-family:iranyekanwebbold, Ebrima;
    text-align:center;
   line-height:35px;
    font-size:16px;
    margin-bottom:0
}

div [class^='TabContentItem']{
    display:none;
    transition:all 0.3s ease-in-out 0.1s;
    position:relative;
    z-index:10;
    direction:rtl
}

.ActiveTabContent{
    display:block !important
}

.mainSection img {
    width: 100%
}

.btnStyle {
    margin-top: 50px;
    text-align:center
}

.button_su {
    margin-top:0 !important;
    border-radius:0 20px
}

.button_su_inner{
    width:170px;
    height:50px;
    line-height:50px;
    border-radius:0 20px 
}

.button_su_inner{
    width:140px
}

.giudBtn .button_su {
    border-radius:15px 0 !important;
    margin-bottom:20px
}

.giudBtn .button_su_inner{
    height:35px;
    line-height:35px
}

.giudBtn {
    text-align: center;
    margin-top: 20px
}

.giudBtn .button_su_inner {
    border-radius: 15px 0 !important;
    color: #403f3d;
    font-family: iranyekanwebbold,ebrimabd;
    height: 45px;
    line-height: 45px;
}

.OtherContainer{
    display:flex
}

.OtherItem {
    flex: 0 0 33.3333%;
    padding: 20px 13px;
    transition: all 0.2s ease-in-out 0s;
    position: relative;
    top: 0
}

    .OtherItem:hover{
        top:-5px;
        cursor:pointer;
        opacity:0.6
    }

    .OtherItem:first-child img {
        border-radius: 10px 0
    }

    .OtherItem:last-child img {
        border-radius: 0 10px
    }

.otherImages{
    padding:0 8%
}

.OtherItem img {
    width: 100%;
    border-radius: 0
}

.socialIcon{
    position:absolute;
    top:78%;
    right:0.5%
}

    .socialIcon i {
        color: #f8b500;
        font-size:20px;
        margin-bottom:15px;
        transition:all 0.2s ease-in-out 0s
    }

        .socialIcon i:hover{
            color:white;
            cursor:pointer
        }

        .table {
            margin-bottom: 6%
        }

.table-bordered th, .table-bordered td {
    font-size: 13px;
    font-family: iranyekanwebbold, Ebrima;
    text-align: center;
    padding: 0;
    line-height: 28px;
    color: #575757;
    border: 1px solid #bbb !important;
    background-color:white
}

.table-bordered th {
    background-color: #e0e0e0
}

tbody tr td:first-child {
    background-color: #e0e0e0
}

.scroll {
    position: absolute;
    background-color: #f8b500;
    width:32px;
    height:52px;
    border-radius:30px;
    bottom:3%;
    right:46%;
    text-align:center;
    transition:all 0.3s ease-in-out 0s
}

.scroll i{
    color:#434242;
    font-size:26px;
    padding-top:69%
}


.scroll:hover{
    cursor:pointer;
    background-color:white
}

.absoluteBg{
    position:absolute;
    bottom:0;
    width:60%;
    left:0;
    opacity:0.05;
    z-index:0
}

.absoluteBg img{
    width:100%
}

.button_text_container{
    font-family:iranyekanwebbold,Ebrima
}
.fa-share-alt {
    font-size: 22px !important
}

.Library{
    position:fixed;
    z-index:3000;
    top:0;
    direction:rtl;
    

}

.closeLibrary {
    position: absolute;
    top: -40px;
    color: #f9f9f9;
    transition: all 0.3s ease-in-out 0s;
    width: 25px;
    height: 25px;
    text-align: center;
    background-color: #919191;
    border-radius: 100%;
    right: -30px
}

    .closeLibrary i {
        font-size: 20px;
        line-height:25px
    }

    .closeLibrary:hover {
        background-color: #f8b500;
        color: #555;
        cursor: pointer
    }

.noDisplay {
    display: none;
    transition: all 0.3s ease-in-out 0s
}

.Library img{
    width:100%
}

.content {
    background-color: #000000d1;
   
}

.LibraryContainer {
    margin: 0 auto;
    position: relative;
    z-index: 51;
}

.LibraryItem{
    position:relative
}

.VideoIcon {
    position: absolute;
    top:10%
}

.LibraryItem:nth-child(2n) .VideoIcon {
    left: 15%
}

.LibraryItem:nth-child(2n+1) .VideoIcon {
    right: 15%
}

.LibraryItem img{
    opacity:1;
    transition:all 0.2s ease-in-out 0s
}

.LibraryItem:hover {
    top: -10px;
    cursor: pointer
}



.LibraryItem {
    flex: 0 0 50%;
    max-width: 50%;
    z-index:50;
    position:relative;
    transition:all 0.3s ease-in-out 0s
}

.closeLayer{
    position:absolute;
    width:100%;
    height:100%;
    z-index:50
}

.IndexCol {
    flex: 0 0 60%;
    max-width: 60%;
}

.imageContainer {
    position: relative
}

.LibraryIcon {
    position: absolute;
    left: 0;
    bottom: 8%;
    width: 20% !important;
    filter: drop-shadow(0 5px 4px #0000004d)
}

.IndexCol img {
    border-radius: 30px 0
}

.AllCol{
    flex:0 0 40%;
    max-width:40%;
    padding-right:4%
}

.LibraryItem{
    padding:10px;
    position:relative;
    top:0
}

.LibraryItem:nth-child(2n) img {
    border-radius: 0 30px
}

.LibraryItem:nth-child(2n+1) img{
    border-radius:30px 0
}


.commentCol{
    flex:0 0 70%;
    max-width:70%
}

.feedbackCol {
    flex: 0 0 30%;
    max-width: 30%
}


.commentBorder::-webkit-scrollbar {
    width: 12px; /* width of the entire scrollbar */
}

.commentBorder::-webkit-scrollbar-track {
    background: #f3f3f3; /* color of the tracking area */
}

.commentBorder::-webkit-scrollbar-thumb {
    background-color: #bfbebe; /* color of the scroll thumb */
    border-radius: 20px; /* roundness of the scroll thumb */
    border: none; /* creates padding around scroll thumb */
}




.commentBorder {
    border: 2px solid #d9d7d3;
    border-radius: 10px;
    padding: 20px;
    background-color: white;
    height: 100%;
    overflow-y: scroll;
    scrollbar-width: thin; /* "auto" or "thin" */
    scrollbar-color: #bfbebe #f3f3f3; /* scroll thumb and track */;
    direction:ltr
}

.commentItem{
    display:flex
}

.iconComment {
    width: 25px;
    height: 25px;
    background-color: #ffc800;
    border-radius: 100%;
    text-align: center;
    overflow: hidden;
    margin-left:10px
}

.iconComment i {
    color: #595751;
    font-size:21px;
    line-height:33px;
}

.nameComment {
    font-family: iranyekanwebbold;
    line-height: 25px;
    font-size: 16px;
    color: #35332f
}

.dateComment{
    flex:0 0 100%;
    max-width:100%;
    font-family:iranyekanwebregular;
    margin-right:40px;
    font-size:9px;
    margin-top:-3px
}

.maniComment {
    font-family: iranyekanwebregular;
    margin-right: 50px;
    font-size: 14px;
    color: #35332f;
    margin-top:6px;
    text-align:justify;
    margin-left:10px
}

.singleComment{
    margin-bottom:20px;
    direction:rtl
}

.feedbackCol{
    position:absolute;
    top:7.8%;
    width:22%;
    direction:rtl;
    display:none
}

.topAbsoluteElement {
    position: absolute;
    top: 0
}

    .topAbsoluteElement p {
        font-family: iranyekanwebregular;
        color: #35332f;
        text-align:justify;
        font-size:15px
    }

.bottomAbsoluteElement {
    position: absolute;
    bottom: 0;
    width:100%
}

    .bottomAbsoluteElement p {
        font-family: iranyekanwebregular;
        color: #35332f;
        text-align:center
    }

.feedbachIconContent {
    display: flex;
    background-color: #d9d7d3;
    border-radius:10px
}

.feedbackLike, .feedbackDisLike {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 20px 20px 10px
}

.disabledDisLike i {
    color: #f8b500 !important
}

.disabledDisLike i:hover{
    cursor:unset !important
}



.feedbachIconContent i {
    color: #414141;
    font-size: 35px
}

.feedbachIconContent p{
    margin-bottom:0
}

.feedbackDisLike i {
    padding: 15px 0 10px
}

.feedbackLike i {
    padding: 1px 0 23px
}



.modalBg {
    background-image: url('../../Images/Blog/SingleBlog/share.png');
    background-size: cover;
    height: 100%;
    filter: drop-shadow(0 0 5px #0000003d);
    border-radius: 25px;
    padding: 13% 7%
}

.modal-content {
    border: none !important;
    border-radius: 25px;
    padding: 5%
}

    .modal-content h4 {
        text-align: right;
        direction: rtl;
        font-family: iranyekanwebbold;
        font-size: 16px;
        line-height: 27px
    }

    .modal-content p {
        font-family: Ebrima;
        background-color: #d9d9d7;
        padding: 5px;
        text-align: center;
        box-shadow: inset 0 0 5px #00000040
    }


.ShareBtn{
    text-align:center;
    margin-top:30px
}

    .ShareBtn:hover{
        cursor:pointer
    }

    .ShareBtn .button_su_inner {
        height: 40px;
        line-height: 30px
    }

.ShareBtn.button_su{
    line-height:30px
}

@media only screen and (max-width:1700px) {
    .SPSection{
        width:1300px
    }

    .SPlogo{
        margin-left:17px
    }

    .LibraryContainer {
        width: 1100px
    }

    .SPHeader h1{
        font-size:40px
    }
}

@media only screen and (max-width:1500px) {
    .SPSection {
        width: 1100px
    }


    .bottomAbsoluteElement p{
        font-size:14px
    }

    .SPHeader h1 {
        font-size: 37px;
        margin-bottom: 1%
    }

        .SPHeader h1 span{
            font-size:16px
        }

        .TabHeaderItem {
            font-size: 14px;
            line-height:35px
        }

    .SPSlider{
        margin-top:30px
    }


    .socialIcon{
        top:74%
    }

    .SPStyle {
        padding: 3% 3% 2%;
        border-radius: 40px
    }

    .SPRoute p {
        font-size: 14px;
        line-height: 35px
    }

    .imageContainer{
        margin-left:15px
    }

    .nameComment{
        font-size:15px
    }

    .dateComment{
        font-size:8px;
        margin-right:32px
    }

    .OtherItem {
        padding: 15px 5px
    }

    .SPlogo{
        width:35px
    }

    .SPRoute i {
        line-height: 35px
    }

    .headerStyle h2{
        font-size:21px;
        margin-right:12px
    }

    .OPItem p{
        font-size:15px;
        line-height:30px
    }

    .TabContent li{
        font-size:14px
    }

    .giudBtn .button_su_inner{
        font-size:14px;
        line-height:40px;
        height:40px
    }

    .LibraryContainer{
        width:900px
    }

    .LibraryItem{
        padding:10px
    }

    .TabContent{
        padding:5% 6%
    }

    .commentBorder{
        padding:15px
    }

    .maniComment{
        font-size:13px
    }

    .iconComment i{
        font-size:17px;
        line-height:30px
    }

    .iconComment{
        height:22px;
        width:22px
    }

    .topAbsoluteElement p{
        font-size:13px
    }

    .feedbackLike, .feedbackDisLike {
        padding: 10px 10px 5px;
        text-align:center
    }

    .feedbachIconContent i{
        font-size:25px
    }

    .feedbackLike i {
        padding: 6px 0 17px
    }

    .nameComment{
        line-height:20px
    }

    .LibraryItem:nth-child(2n+1) img {
        border-radius: 15px 0
    }

    .LibraryItem:nth-child(2n) img{
        border-radius:0 15px
    }

    .IndexCol img {
        border-radius: 15px 0
    }

    .AllCol{
        padding-right:2.5%
    }

    .LibraryItem{
        padding:8px
    }

}

@media only screen and (max-width:1200px) {
    .iconComment {
        height: 20px;
        width: 20px
    }

    .nameComment {
        line-height: 20px
    }

    .iconComment{
        margin-left:4px
    }

    .nameComment{
        font-size:15px
    }

    .dateComment{
        margin-right:24px;
        margin-top:-1.5px;

    }

    .maniComment {
        font-size: 12px;
        margin-right: 35px;
        margin-left:3px
    }

    .topAbsoluteElement p{
        font-size:11px
    }

    .feedbackCol{
        width:23%
    }

    .feedbachIconContent i{
        font-size:25px
    }

    .bottomAbsoluteElement p{
        font-size:13px
    }

    .feedbackLike, .feedbackDisLike {
        padding: 5px 10px 2px
    }

    .button_text_container{
        font-size:13px
    }

    .iconComment i {
        line-height: 22px
    }


    .SPSection {
        width: 950px
    }

    .LibraryContainer {
        width: 750px
    }

    .SPStyle {
        padding: 3%;
        border-radius:35px
    }

    .SPHeader h1{
        font-size:35px
    }

    
    .SPHeader h1 span {
        font-size: 15px
    }

    .TabHeaderItem {
        font-size: 12px;
        line-height: 42px
    }


    .LibraryItem {
        padding: 7px
    }

    .TabContent li {
        font-size: 13px;
        line-height: 22px
    }

        .TabContent li i{
            font-size:8px;
            line-height:22px
        }

    .nameComment{
        font-size:14px
    }

    .SPbgEl{
        width:41%
    }
}

@media only screen and (max-width:991px){
    .SPInfo{
        flex:0 0 100%;
        max-width:100%;
        order:2
    }

    form input:focus, form textarea:focus {
        outline: none !important
    }

    .button_su_inner:hover {
        color: #403f3d !important
    }

    .SPSlider {
        border-radius: 0
    }

    .socialIcon i:hover {
        color: #f8b500
    }

    .socialIcon i{
        font-size:26px;
        margin-bottom:23px
    }

    .TabContent li{
        font-size:14px;
        line-height:22px
    }

    .OtherItem:first-child img{
        border-radius:15px 0
    }

    .OtherItem:last-child img {
        border-radius:0 15px 
    }

    .fa-share-alt {
        font-size: 28px !important
    }

    .mainSection {
        border-radius: 40px 0
    }

    .SPRow {
        flex-wrap: wrap
    }

    .SPSlider {
        flex: 0 0 100%;
        max-width: 100%;
        order:1
    }

    .SPSection{
        width:83%;
    }

    .SPStyle {
        padding: 9% 6%
    }

    .SPbgEl {
        width: 88%;
        /*top: 6% !important;*/
        left: -2.7%
    }

    .Phone-Header{
        display:block;
        text-align:right;
        direction:rtl;
        padding:1.5% 52px
    }

    .SPInfo .SPHeader{
        display:none
    }

    .SPRoute p{
        font-size:16px;
        font-family:iranyekanwebregular
    }

    .SPSlider {
        padding:30px 30px  0
    }

    .phone-margin{
        margin:0 -25px
    }

    .OtherItem{
        padding:4%
    }

    .OtherItem img{
        border-radius:0
    }

    .SPHeader h1{
        font-size:38px
    }

    .SPTab {
        margin: 50px 0;
        padding-left: 0
    }

    .socialIcon{
        top:36%
    }

    .TabHeaderItem{
        font-size:15px
    }

    .scroll{
        bottom:1.7%;
        right:48%
    }

        .scroll i {
            padding: 0 4px !important;
            padding-top:58% !important;
        }

    .OPItem{
        flex:0 0 33.33333%;
        max-width:33.33333%
    }

        .OPItem:nth-child(4), .OPItem:nth-child(5){
            display:none
        }

    .windowSize {
        display: none
    }

    .phoneSize {
        display: block !important
    }

    .OtherProdutSlider .owl-item > div {
        margin: 0 !important
    }

    .OtherProdutSlider .owl-item.center > div {
        margin: 0 !important
    }

    .owl-item p {
        color: #5c5a54;
        font-family: iranyekanwebbold, Ebrima;
        text-align: center;
        line-height: 35px;
        font-size: 16px;
        margin-bottom: 0
    }
    

    .mainSection {
        padding: 2% 8% 2%
    }


    .SliderNextOtherP {
        position: absolute;
        width: 25px;
        z-index: 100;
        right: 2%;
        display:block
    }

        .SliderNextOtherP img {
            width: 100%;
            filter: drop-shadow(0 9px 3px #8e8e8e8a);
            transition: all 0.1s ease-in-out 0s;
            position: relative;
            top: 0;
            z-index: 100;
        }


            .SliderNextOtherP img:hover {
                cursor: pointer
            }

    .SliderPrevOtherP {
        position: absolute;
        width: 25px;
        z-index: 100;
        left: 2%;
        display:block
    }

        .SliderPrevOtherP img {
            width: 100%;
            filter: drop-shadow(0 9px 3px #8e8e8e8a);
            transition: all 0.1s ease-in-out 0s;
            position: relative;
            top: 0;
            z-index: 100;
        }

            .SliderPrevOtherP img:hover {
                cursor: pointer
            }

    .mainSection{
        position:relative
    }

    .OtherProdutSlider .owl-item > div {
        opacity: 1 !important
    }

    .bottomAbsoluteElement{
        bottom:0
    }
    .feedbackCol {
        height: 86.5%
    }

}

@media only screen and (max-width:800px){
    .IndexCol{
        flex:0 0 100%;
        max-width:100%

    }

    .AllCol {
        flex: 0 0 100%;
        max-width: 100%;
        padding:5px 0 0 0 
    }

    .LibraryContainer{
        width:90% !important;
        min-width:90% !important

    }

    .imageContainer{
        margin:0
    }

    .LibraryItem{
        flex:0 0 33.33333%;
        max-width:33.33333%
    }

    .closeLibrary{
        right:0
    }

    .LibraryItem:hover{
        top:-5px
    }

    .LibraryItem:nth-child(1) img, .LibraryItem:nth-child(4) img {
        border-radius: 10px 0
    }
    .LibraryItem:nth-child(2) img, .LibraryItem:nth-child(5) img {
        border-radius: 0
    }
    .LibraryItem:nth-child(3) img, .LibraryItem:nth-child(6) img {
        border-radius: 0 10px
    }


    

}

@media only screen and (max-width:780px){
    .SPRoute p{
        font-size:15px
    }
}

@media only screen and (max-width:768px){
    .SPRoute, .SPRoute div{
        flex-wrap:wrap
    }

    .Phone{
        display:flex !important;
        flex:0 0 100%;
        max-width:100%
    }

    .commentCol{
        max-height:unset !important
    }

    .feedbachIconContent{
        margin-top:20px
    }

    .phoneHeight{
        padding:0 0 25px
    }

    .feedbachIconContent p {
        font-family: iranyekanwebregular;
        color: #35332f;
        text-align: center
    }

    .commentCol {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .Desktop {
        display: none !important
    }

    .commentBorder{
        margin-top:8%
    }

    .headerStyle h2 {
        line-height: 40px
    }

    .otherProducts{
        margin-top:30px
    }

    .phonShow {
        display: block
    }

    .phone-padding {
        padding-top: 6.5% !important
    }

    .phoneRow {
        flex: 0 0 100%
    }

    .SPStyle{
        border-radius:65px 0
    }

    .Phone-Header{
        padding:1.5% 5px
    }

    .SPContent{
        padding:0
    }

    .SPSlider{
        padding:5% 0 0 ;
        /*margin-top:14%*/
    }

    /*.SPbgEl {
        top: 9.7% !important
    }*/

    .SPlogo img{
        margin-bottom:6px
    }

    SPRoute{
        padding-right:5px
    }

    .phone-margin{
        margin:0
    }

    .OtherItem:first-child img{
        border-radius:10px 0
    }

    .OtherItem:last-child img{
        border-radius:0 10px
    }

    .OtherItem {
        padding: 6% 4% 0
    }

    .TabContent li{
        font-size:15px;
        line-height:23px;
        text-indent:-10px;
        margin-bottom:10px;
    }

    .TabHeaderItem{
        line-height:36px
    }

    .TabContent ul {
        padding-right: 20px
    }

    .scroll{
        display:none
    }

    .socialIcon{
        top:unset;
        bottom:-0.5%;
        display:flex
    }

        .socialIcon i{
            font-size:40px;
            margin-bottom:0
        }

    .socialIcon{
        width:100%;
        padding:0
    }

    .socialIcon div{
        padding:15px
    }

    .fa-share-alt {
        font-size: 41px !important
    }

    .TabContent{
        margin-bottom:21%
    }

        .TabContent::-webkit-scrollbar {
            width: 8px; /* width of the entire scrollbar */
        }

    .commentBorder::-webkit-scrollbar {
        width: 8px; /* width of the entire scrollbar */
    }

}

@media only screen and (max-width:576px){
    .SPSection{
        width:90%
    }

    .modal-content p{
        font-size:13px
    }

    .mainSection {
        margin: 0;
        border-radius: 55px 0
    }

    #CarveTopElement {
        left: 7% !important
    }



    .slider {
        padding: 2% 16% 0 20%
    }

    .TabHeaderItem{
        font-size:13px
    }
    .desktopTitle {
        display: none
    }

    .phoneTitle {
        display: block
    }

    .socialIcon i{
        font-size:30px
    }

    .socialIcon div{
        padding:10px
    }

    .fa-share-alt{
        font-size:31px !important
    }

    .TabContent::-webkit-scrollbar {
        width: 6px; /* width of the entire scrollbar */
    }

    .commentBorder::-webkit-scrollbar {
        width: 6px; /* width of the entire scrollbar */
    }
}

@media only screen and (max-width:450px){
    .SPRoute p{
        font-size:14px;
        line-height:30px;
    }
    .commentBorder{
        margin-top:12%
    }

    .SPRoute i {
        line-height: 30px
    }

    
}

@media only screen and (max-width:400px){
    .SPHeader h1{
        font-size:30px
    }

    

    .OtherItem {
        padding: 4% 3% 0
    }
}

@media only screen and (max-width:350px) {
    .SPHeader h1 {
        font-size: 28px
    }

    
}

@media only screen and (max-width:365px) {
    .commentBorder{
        margin-top:18%
    }
}

@media only screen and (max-width:320px){
    .SPHeader h1{
        font-size:26px
    }

        .SPHeader h1 span{
            font-size:14px
        }
}