.contact-link {
	color: peru;
}

.cryptedmail:after {
	content: attr(data-name) "@" attr(data-domain) "." attr(data-tld); 
}

@font-face {
    font-family: zar;
    src: url('Zar/XB Zar.ttf');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: zar;
    src: url('Zar/XB Zar Bd.ttf');
	font-weight: bold;
	font-style: bold;
}

@font-face {
    font-family: zar;
    src: url('Zar/XB Zar It.ttf');
	font-weight: normal;
	font-style: italic;
}

body {
	font-family: zar;
	font-size: 22px;
	line-height: 1.6;
	/* text-indent: 40px; */
    /* text-align: center; */
}

.page {
    box-sizing: border-box;
    max-width: 1000px;
    border: 1px solid black;
    border-radius: 50px;
    margin: auto;
    padding: 20px 0px 20px 0px;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    overflow: hidden;
}

.header {
    padding-left: 20px;
    padding-right: 20px;
}

.text {
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 10px;
}

p {
	margin-bottom: -5px;
	/* text-align: justify; */
	text-justify: inter-word;
}

.first-p {
	text-indent: 0px;
}

#persian-title {
    font-size: 35px;
}

.title {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: max-content;
    justify-content: center;
    align-items: center;
}

.title > img {
    height: 36pt;
}

.subtitle {
    font-size: 20px;
    margin-top: 0;
}

.section-title {
    font-size: 23px;
    /* margin-top: 0; */
}

.services {
    box-sizing: border-box;
    /* border: 1px solid black; */
    /* border-radius: 40px; */
    width: 100%;
    /* margin: auto; */
    /* padding: 10px; */

    display: flex;
    flex-direction: column;
    /* flex-wrap: wrap; */
    /* justify-content: space-evenly; */
    gap: 0px;
}

.service {
    box-sizing: border-box;
    border-top: 1px solid black;
    /* border-bottom: 1px solid black; */
    /* border-radius: 30px; */
    /* min-width: 400px; */
    min-width: 432px;
    /* margin: auto; */
    min-height: 500px;
    height: min-content;
    /* padding: 5px; */

    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.service-image {
    overflow: hidden;
    width: 55%;
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1.0) 70%, transparent 100%);
    height: auto;
}

img {
    /* user-drag: none; */
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.service-image > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.service-text {
    box-sizing: border-box;
    padding: 5px 20px 20px 15px;
    width: 45%;

}

.service-text > p > a {
    /* text-decoration:none; */
    color: black;
}

.service:nth-child(even) {
    flex-direction: row-reverse;
    border-bottom: 1px solid black;
}

.service:nth-child(even) > .service-image {
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 1.0) 80%, transparent 100%);
    width: 55%;
}

.service:nth-child(even) > .service-text {
    padding: 5px 15px 20px 20px;
    width: 45%;
}

.footer {
    padding: 5px 20px 20px 20px;
}

@media (max-width: 700px) {

    .footer {
        padding: 5px 5px 20px 5px;
    }

    .page {
        border-radius: 40px;
        padding: 20px 0px 10px 0px;
    }

    .title {
        flex-direction: column;
        gap: 5px;
    }

    .title > h1 {
        margin: 0 0;
    }

    .subtitle {
        font-size: 20px;
        margin-top: 10px;
    }

    .service {
        flex-direction: column-reverse;
        min-width: unset;
        width: 100%;
        /* margin: auto; */
        height: unset;
    }

    .service-image {
        overflow: hidden;
        width: 100%;
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1.0) 70%, transparent 100%);
    }
    

    .service:nth-child(even) > .service-image {
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1.0) 80%, transparent 100%);
        width: 100%;
    }

    .service-image > img {
        object-fit: cover;
        width: 100%;
        aspect-ratio: 1.5;
    }

    .service-text {
        box-sizing: border-box;
        padding: 15px 10px 20px 10px;
        width: 100%;
    }

    .service:nth-child(even) {
        flex-direction: column-reverse;
    }

    .service:nth-child(even) > .service-text {
        padding: 15px 10px 20px 10px;
        width: 100%;
    }
}