<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">:root{
    --background-color : whitesmoke;
    --background-gray : rgb(50, 50, 50 , 0.7);

    --dark-gray : #848483;
    --light-gray : #B6B6B6;
    --tem-color : rgb(75, 76, 84);
}

@font-face {
    font-family: iranSaas;
    src: url(./IranSansX/iransansXfamily/IRANSansX-Regular.ttf);
}

@font-face {
    font-family: iranSaasNum;
    src: url(./IranSansX/FarsiNumerals/IRANSansXFaNum-Regular.ttf);
}

body{

    direction: rtl;

    background-color: var(--background-color);

    font-family: iranSaas , iranSaasNum;
}

a{

    text-decoration: none;
}

.big-holder{
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    box-sizing: border-box;
    width: 100%;

    padding-top: 50px;
}

.title-holder{
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 300px;

    background-image: url(../images/Slider-img3.jpg);
    background-position-y: -200px;
    background-position-x: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--background-color);
}

.top-guid{

    box-sizing: border-box;
    width: 100%;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 10px;
}

.guid-item{
    position: relative;

    box-sizing: border-box;

    width: 200px;
    height: 200px;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 7px;

}

.guid-item:hover{
    font-weight: bold;
}

.guid-item:hover a{
    position: absolute;

    width: 100%;
    height: 100%;
}

.guid-item:hover .guid-img-holder{
    background-color: var(--background-gray);
}

.guid-item:hover img{
    transform: scale(1.2);

    transition-duration: 0.5s;
}

.guid-img-holder{
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    border: solid var(--background-gray) 2px;
    border-radius: 50%;

    padding: 10px;

    transition-duration: 0.3s;
}

.guid-img-holder&gt;img{
    width: 100%;
    height: 100%;
}

.products-slide-holder{

    box-sizing: border-box;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 10px;
    margin: 20px 0px;
}

.product-slide{
    box-sizing: border-box;
    width: 100%;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    
    gap: 10px;

    /* border: solid var(--background-gray) 1px;
    border-radius: 5px; */

    padding: 10px;

}

.slide-item{
    overflow: hidden;
    box-sizing: border-box;

    min-width: 320px;

    display: grid;
    grid-template-rows: 75% 25%;
    grid-gap: 10px;
    justify-items: center;
    align-content: center;

    border: solid var(--background-gray) 1px;
    border-radius: 5px;

    padding: 10px;

    transition-duration: 0.5s;

}

.slide-item:hover{
    position: relative;
    background-color: var(--background-gray);

    color: var(--background-color);
}

.slide-item:hover .slide-click{
    position: absolute;
    width: 100%;
    height: 100%;

}

.slide-item:hover img{
    transform: scale(1.3);
}

.slide-item-img{
    overflow: hidden;

    box-sizing: border-box;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    border: solid none 0px;
    border-radius: 5px;

}

.slide-item-img&gt;img{
    max-width: 300px;
    max-height: 200px;

    transition-duration: 0.4s;
}

.slide-item-info{

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

}


.main-holder{
    position: relative;

    display: grid;
    grid-template-columns: 18% 62% 18%;
    grid-gap: 1%;

    justify-items: top;

    box-sizing: border-box;
    width: 100%;

    padding: 1rem;

}

.right-holder{
    
}

.center-holder{
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;

    box-sizing: border-box;

    border: solid var(--background-gray) 5px;
    border-radius: 50px;

}

.all-products-list{
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    width: 100%;

    padding: 10px;

}

.product-holder{

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 7px;

    box-sizing: border-box;
    width: 100%;

    border-bottom: solid var(--tem-color) 2px;

    background-repeat: no-repeat;
    background-position:center;
    background-attachment: local;
    background-color: #ffffffc2;
    background-blend-mode:screen;

    transition-duration: 0.5s;
}

.info-holder{
    display: flex;
    align-items: center;
    justify-content: space-around;

    gap: 10px;

    box-sizing: border-box;
    width: 100%;

    padding: 7px;
}

.image-holder{

    position: relative;

    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    width: 400px;
    height: 350px;

    border: solid none none;

    color: white;
    background-color: #ffffff6e;
}

.image-holder:hover .image-tem{
    transition-duration: 0.5s;

    box-shadow: 5px -10px 10px rgba(100, 100, 100, 0.525);
    background-color: var(--tem-light-green);
}

.image-holder&gt;img{
    height: 100%;

    transition-duration: 0.6s;
}

.product-holder:hover .image-holder&gt;img{
    transform: scale(1.1);
}

.image-tem{
    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    width: 100%;
    max-height: 30px;

    background-color: var(--background-gray);

    border: inherit;

}

.image-holder .image-title{
    position: absolute;
    top: 0px;

    box-shadow: 5px 10px 20px rgb(12, 33, 33);
    border-radius: 0px 0px 20px 20px;
}

.image-holder .image-footer{
    position: absolute;
    bottom: 0px;

    box-shadow: 5px -10px 20px rgb(12, 33, 33);
}

/* .cast-holder{

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    padding: 20px;
    min-width: 300px;
    min-height: 300px;

    border: solid none none;
    border-radius: 30px;

    box-shadow: 3px 3px 20px rgba(12, 33, 33, 0.525);

    background-color: #ccff3388;
} */

.text-holder{

    box-sizing: border-box;
    padding: 3%;

    background-color: #ffffff6e;
}

.options{
    box-sizing: border-box;
    width: 100%;

    padding: 0px 10px;
}

@media screen and (max-width: 1200px){

    .main-holder{
        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 10px;
    }

    .title-holder{
        min-height: 250px;
    }

    .right-holder{
        width: 100%;
    }

    .product-holder{
        background-repeat: no-repeat;
        background-position:center;
        background-attachment:unset;
        background-color: #ffffff6e;
        background-blend-mode:screen;
    }

    .product-holder:hover{
        background-color: #ffffff6e;
    }

}

@media screen and (max-width: 860px) {

    .product-holder{
        box-sizing: border-box;
        width: 100%;

        display: flex;
        flex-direction: column;
    }

    .info-holder{
        display: flex;
        flex-direction: column;

    }

    .top-guid{
        display: grid;
        grid-template-columns: 50% 50%;
    }

    .guid-item{
        width: 100%;
    }

    .product-slide{
        display: grid;
        grid-template-columns: 49% 49%;
    }

    .slide-item{
        min-width: 100px;
    }

    .slide-item-img&gt;img{
        max-width: 150px;
        max-height: 100px;
    }
}

@media screen and (max-width: 580px) {
    
    .title-holder{
        min-height: 150px;

        background-position: top;
        background-size: 140%;
    }

    .image-holder{
        box-sizing: border-box;
        width: 70vw;
        height: 75vw;
    }

    .cast-holder{
        width: 100%;
        min-width: 0px;
    }

}

</pre></body></html>