html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}


html {
    position: relative;
    min-height: 100%;
}

body {
    direction: rtl;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: IRANSansX;
    font-size: 15px;
    overflow-x: hidden;
}

a {
    text-decoration: none !important;
}
a:hover{
    color:#ddd;
}

:root {
    --kaveh-color-1: #12022F;
    --kaveh-color-2: #4C6FFF;
    --kaveh-color-3: #F8FAFC;
    --kaveh-color-1-1: #CFA144;
    --kaveh-color-1-2: #f8f8f8;
    --kaveh-color-1-3: #1a1a1a;
    --kaveh-color-1-4: #e0e0e0;
    --kaveh-color-1-5: #1c1c1c;
    --kaveh-color-1-6: #b2b2b2;
    --kaveh-color-1-7: #15566E;
}

.btn-kaveh-bg,
.btn-kaveh-light-bg {
    width: 150px;
    height: 60px;
    border-radius: 10px;
    border:unset;

}
.btn-kaveh-bg {
    color: #fff;
    background-color: var(--kaveh-color-2);
    opacity:.8;
 
}
.btn-kaveh-light-bg {
    background-color: #fff;
    color: var(--kaveh-color-2);
}
    .btn-kaveh-light-bg a {
        color: var(--kaveh-color-2);
    }


.btn-page {
    width: 250px;
    height: 50px;
    border: 1px solid var(--kaveh-color-1-3);
    text-align: center;
    padding-top: 5px;
    transition: all 0.5s;
    float: left;
    margin-top: 20px;
    background-color: var(--kaveh-color-1);
    color: #fff;
}

    .btn-page:hover {
        background-color: #fff;
        border: 1px solid var(--kaveh-color-1);
        color: #000;
    }
.header-page {
    width: 100%;
    height: 250px;
    background-color: #F8FAFC;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    border-radius:30px;
    margin:30px 0;
}
    /*///////////////////////////////css menu------------start/////////*/
.menu-default-pages 
{
    background-color:#f2f2f2;
    margin-bottom:30px;
    border-radius:0 0 50px 50px;
}.menu-default,
.menu-default-pages {
    width: 100%;
    min-height: 80px;
    position: relative;
    float: left;
}
    .menu-default .logo img,
    .menu-default-pages .logo img{
        max-width:60px;
    }
    /*////////////header-tools*/
        .menu-default .header-tools i {
        color: #fff;
      
    }
        .menu-default-pages .header-tools i {
            color: #000;
        }
        .menu-default-pages .header-tools i,
        .menu-default .header-tools i {
            font-size: 20px;
            margin: 0 10px;
        }
        .menu-default .header-tools,
        .menu-default .items ul,
        .menu-default .logo,
        .menu-default-pages .header-tools,
        .menu-default-pages .items ul,
        .menu-default-pages .logo {
            width: 100%;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: flex-start
        }
    .menu-default .items ,
    .menu-default-pages .items,
    .menu-mob .items{
        width: 100%;
        min-height: 80px;
    }
        .menu-default .items ul,
        .menu-default-pages .items ul,
        .menu-mob .items  ul{
            list-style: none;
            padding: 0;
            margin: 0;
        }
            .menu-default .items ul li,
            .menu-default-pages .items ul li,
            .menu-mob .items ul li {
                padding: 0 10px;
            }
        .menu-default-pages .items ul li a {
            color: #000;
        }
                .menu-default .items ul li a,
                .menu-mob .items ul li a{
                    color: #fff;
                }
                .menu-mob .items ul li{
                    height:30px;
                }
                /*/////////////css menu------------end*/
                .footer {
                    width: 100%;
                    min-height: 500px;
                    float: left;
                    background-image: url('../images/back/footer.webp');
                    background-size: cover;
                    background-position: center center;
                    position: relative;
                    padding: 30px 0;
                    color: #fff;
                }
        .footer a{
            color:#fff;
        }
.footer ul{
    list-style:none;
   margin:0;
   padding:0;
}
.footer li{
    min-height:50px;
}
.footer .caption{
    min-height:400px;
}
.footer .copy-right{
    width:100%;
    height:50px;
    text-align:center;
    border-top:1px solid #f2f2f2;
    padding-top:20px;

}
.product-template-related {
    width: 100%;
    padding: 20px 0;
}

    .product-template-related .titr {
        width: 100%;
        padding-top: 50px;
        text-align: center;
    }

    .product-template-related .item {
        max-width: 300px;
        min-height: 300px;
        cursor: pointer;
    }

        .product-template-related .item .img {
            width: 100%;
            height: 200px;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            border: 1px solid #f8f8f8;
            position: relative;
        }

        .product-template-related .item .btn-wrapper {
            width: 100%;
            height: 60px;
            display: none;
            text-align: center;
            position: absolute;
            bottom: 100px;
        }

            .product-template-related .item .btn-wrapper .btn-related {
                width: 150px;
                height: 50px;
                background-color: black;
                border: none;
                text-align: center;
                transition: all 0.5s;
            }

        .product-template-related .item .btn-related a {
            color: #ddd;
        }

        .product-template-related .item:hover .btn-wrapper {
            display: block;
        }

        .product-template-related .item h6 {
            height: 50px;
            padding-top: 20px;
            text-align: center;
        }

@media screen and (max-width: 768px) {
   
    .product-template-related .item .btn-wrapper,
    .product-template-related .item .title,
    .product-template-related .item .img {
        position: relative;
    }

    .product-template-related .item .btn-wrapper {
        display: block;
        bottom: 0;
    }

    .product-template-related .item {
        max-width: 180px;
    }
}