:root{
    --c-Off-white:#F8F9FA;
    --c-black:#000000;
    --c-black-opacity:#0000005c;
    --c-white:#FFFFFF;
    --c-light-blue:#02D9FF;
    --c-dark-blue:#0e2a42;
    --c-DarkOrange:#FAAC03;
    --c-gray:#969696;
    --c-green-dark:#00A050;
    --c-green-light:#00C060;
    --c-light-red:#FF0004;
    --c-dark-red:#E90004;
    --fontName:IRANSansX;
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: var(--fontName);
}

body{
    background-color: var(--c-Off-white);
}

a{
    text-decoration: none;
}

#maintenance > .image-wrapper{
    width: 100%;
    overflow: hidden;
}

#maintenance > .image-wrapper .img{
    background: url("/media/defaults/persian-update.png") no-repeat center;
    background-size: cover;
    width: 2117px;
    height: 1155px;
    max-width: none;
    display: block;
    margin-left: auto;
}


/* header */

#mainHeader{
    background-color: var(--c-dark-blue);
    padding:10px 0;
    position: sticky;
    top: 0;
    z-index: 3;
    margin-bottom: 50px;
}

/* navbar */

#headerNav{
    height: 100%;
}

#headerNav div > ul{
    gap: 20px;
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

#headerNav .closeIcon{
    display: none;
}

#headerNav div > ul > li{
    position: relative;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#headerNav ul > li a{
    font: 700 16px var(--fontName);
    color: var(--c-white);
    text-decoration: none;
}

#headerNav ul > li a:hover{
    color: var(--c-light-blue);
}

#headerNav ul > li a.active{
    color: var(--c-light-blue);
}

.search-humbergerIcon{
    display: flex;
    align-items: center;
    gap: 20px;
}

.humbergerIcon{
    width: 24px;
    display: none;
}

.humbergerIcon path{
    fill: var(--c-white);
}

#headerNav div > ul > li > ul{
    position: absolute;
    background-color: var(--c-white);
    min-width: 100%;
    max-height: 0;
    overflow: hidden;
    top: 62px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#headerNav div ul > li:hover > ul{
    max-height: unset;
    padding: 10px;
}

#headerNav ul > li > ul a{
    color: var(--c-dark-blue);
    font-size: 14px;
    white-space: nowrap;
}

#headerNav ul > li > ul a:hover{
    color: var(--c-DarkOrange);
}

#headerNav ul > li > ul ul{
    display: none;
}

/* search */

#search .searchIcon:hover path{
    fill: var(--c-light-blue);
}

#search form{
    display: none;
}

#search form.active{
    position: fixed;
    width: 100% !important;
    height: 100% !important;
    background-color: var(--c-black-opacity);
    top: 0;
    right: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

#search form.active .elementGroup{
    background-color: var(--c-white);
    display: flex;
    border-radius: 5px;
    overflow: hidden;
}

#search form.active input{
    border: unset;
    color: var(--c-dark-blue);
    width: 35vw;
    padding: 10px;
}

#search form.active button{
    border: unset;
    background-color: var(--c-green-dark);
    padding: 10px 15px;
}

#search form.active button:hover{
    background-color: var(--c-green-light);
}

.main-search{   
    display: flex;
    justify-content: center;
}

.main-search form{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--c-Off-white);
    border-radius: 10px;
    overflow: hidden;
}

.main-search input{
    width: 42.396vw;
    height: 100%;
    padding: 20px 18px;
    font: 600 24 var(--fontName);
    border: unset;
    background-color: var(--c-Off-white);
}

.main-search input:focus-visible{
    border: unset;
    outline: unset;
}

.main-search button{
    background-color: var(--c-DarkOrange);
    padding: 14px 55px;
    border: unset;
}

/* sectionCard */

.sectionCard{
    padding: 20px;
    border-radius: 10px;
    background-color: var(--c-white);
    margin-bottom: 50px;
    box-shadow: 0px 0px 10px -4px var(--c-dark-blue);
}

.sectionCard header{
    margin-bottom: 22px;
}

.sectionCard .headerText{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.sectionCard .headerText > h2{
    font: 700 20px var(--fontName);
    color: var(--c-dark-blue);
    text-align: center;
    margin-bottom: 0;
}

.sectionCard .headerText .more,
.bottomLinkSection a{
    display: flex;
    align-items: center;
    gap: 5px;
}

.sectionCard .headerText .more .text,
.bottomLinkSection a{
    font: 600 15px var(--fontName);
    color: var(--c-dark-blue);
}

.sectionCard .headerText .more:hover .text,
.bottomLinkSection a:hover{
    color: var(--c-DarkOrange);
}

.sectionCard .headerText .more .icon{
    width: 19px;
    height: 19px;
    background: url(../image/icon/icon-more.svg);
}

.sectionCard .headerBorder{
    position: relative;
}

.sectionCard .headerBorder span:first-of-type{
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--c-dark-blue);
}

.sectionCard .headerBorder span:last-of-type{
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 106px;
    height: 2px;
    background-color: var(--c-DarkOrange);
}

.sectionCard .contentSection{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sectionCard .item{
    border: 1px solid var(--c-dark-blue);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    background-color: var(--c-Off-white);
}

.sectionCard .item .imgLink{
    display: block;
    width: 240px;
    min-width: 240px;
    height: fit-content;
    aspect-ratio: 1.5;
    overflow: hidden;
}

.sectionCard .item .imgLink img{
    width: 100%;
    height: 100%;
    transition: transform 0.3s linear;
}

.sectionCard .item:hover .imgLink img{
    transform: scale(1.3);
}

.sectionCard .item .text{
    padding: 10px 20px 10px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    flex-grow: 1;
}

/* .sectionCard .swiper-slide */

.sectionCard .swiper-slide{
    height: auto !important;
    border: 1px solid var(--c-dark-blue);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sectionCard .swiper-slide .imgLink{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1.5;
    overflow: hidden;
}

.sectionCard .swiper-slide .imgLink img{
    width: 100%;
    height: 100%;
    transition: transform 0.3s linear;
}

.sectionCard .swiper-slide:hover .imgLink img{
    transform: scale(1.3);
}

.sectionCard .swiper-slide .text{
    padding: 10px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    flex-grow: 1;
    background-color: var(--c-Off-white);
}

/* end .sectionCard .swiper-slide */

.sectionCard .text .title{
    font: 600 16px/28px var(--fontName);
    color: var(--c-dark-blue);
    margin-bottom: 8px;
}

.sectionCard .text .title:hover{
    color: var(--c-DarkOrange);
}

.sectionCard .text .summeries{
    font: 500 12px/22px var(--fontName);
    color: var(--c-gray);
    margin-bottom: 15px;
}

.sectionCard .text .date{
    font: 600 13px var(--fontName);
    color: var(--c-dark-blue);
    text-align: end;
}

/* archivePage */

.sectionCard.archivePage{
    margin-top: 50px;
    min-height: 76vh;
}

.sectionCard.archivePage .headerText h1{
    font: 700 20px var(--fontName);
    color: var(--c-dark-blue);
}

/* articles */

#articles{
    background-color: var(--c-dark-blue);
    padding: 20px 0;
    margin-bottom: 50px;
}

#articles .titleArticle{
    font: 700 36px var(--fontName);
    color: var(--c-white);
    text-align: center;
    margin-bottom: 25px;
}

#articles .content{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

#articles .item{
    width: 315px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

#articles .item .imgLink{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1.5;
    overflow: hidden;
}

#articles .item .imgLink img{
    width: 100%;
    height: 100%;
    transition: transform 0.3s linear;
}

#articles .item:hover .imgLink img{
    transform: scale(1.3);
}

#articles .text{
    padding: 10px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    background-color: var(--c-Off-white);
    flex-grow: 1;
}

#articles .info{
    padding-bottom: 10px;
}

#articles .text .title{
    font: 600 14px/28px var(--fontName);
    color: var(--c-dark-blue);
    margin-bottom: 10px;
}

#articles .text .title:hover{
    color: var(--c-DarkOrange);
}

#articles .text .summeries{
    font: 500 12px/22px var(--fontName);
    color: var(--c-gray);
}

#articles .text .bottomInfo{
    font: 400 11px/20px var(--fontName);
    color: var(--c-gray);
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px dashed var(--c-gray);
}

#articles .tag{
    position: absolute;
    top: 0;
    right: 0;
    background-color: #00245980;
    padding: 6px 21px;
    color: var(--c-white);
    border-radius: 0 0 0 10px;
    font: 700 12px var(--fontName);
}

#articles .button a{
    padding: 11.5px 58px;
    border: 3px solid var(--c-Off-white);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 35px;
    font: 700 15px var(--fontName);
    color: var(--c-white);
}

#articles .button a:hover{
    color: var(--c-DarkOrange);
    border-color: var(--c-DarkOrange);
}

#articles .button a:hover svg path{
    fill: var(--c-DarkOrange);
}

#articles .button a:hover svg rect{
    stroke: var(--c-DarkOrange);
}

/* articlesPage */

#articles.articlesPage{
    background-color: unset;
    padding: 0;
    margin-top: 50px;
}

#articles.articlesPage > div{
    background-color: var(--c-white);
    padding: 20px !important;
    box-shadow: 0px 0px 10px -4px var(--c-dark-blue);
    border-radius: 10px;
    min-height: 79vh;
}

#articles.articlesPage header{
    margin-bottom: 22px;
}

#articles.articlesPage .headerText{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

#articles.articlesPage .headerText > h1{
    font: 700 20px var(--fontName);
    color: var(--c-dark-blue);
}

#articles.articlesPage .headerBorder{
    position: relative;
}

#articles.articlesPage .headerBorder span:first-of-type{
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--c-dark-blue);
}

#articles.articlesPage .headerBorder span:last-of-type{
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 106px;
    height: 2px;
    background-color: var(--c-DarkOrange);
}

#articles.articlesPage .item{
    border: 1px solid var(--c-dark-blue);
    width: 305px;
}

/* author */

#author{
    padding: 20px;
    border-radius: 10px;
    background-color: var(--c-white);
    margin-bottom: 50px;
    box-shadow: 0px 0px 10px -4px var(--c-dark-blue);
}

#author header > h2{
    font: 700 20px var(--fontName);
    color: var(--c-dark-blue);
    text-align: center;
    margin-bottom: 0;
}

#author .headerBorder{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

#author .headerBorder span:first-of-type{
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--c-dark-blue);
}

#author .headerBorder span:last-of-type{
    position: absolute;
    top: 0;
    display: block;
    width: 160px;
    height: 2px;
    background-color: var(--c-DarkOrange);
}

#author .contentSection{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 20px;
    justify-content: center;
}

#author .contentSection .item{
    width: 180px;
    border: 1px solid var(--c-dark-blue);
    overflow: hidden;
    border-radius: 10px;
}

#author .contentSection .avatar{
    height: 83px;
    display: flex;
    justify-content: center;
    position: relative;
}

#author .avatar .imgLink{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid var(--c-dark-blue);
    position: absolute;
    top: 12px;
    overflow: hidden;
}

#author .avatar .imgLink img{
    width: 100%;
    height: 100%;
}

#author .item .text{
    padding: 40px 10px 10px;
    background-color: var(--c-Off-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: background-color 0.5s linear;
}

#author .text span{
    font: 600 14px var(--fontName);
    color: var(--c-black);
    transition: color 0.5s linear;
}

#author .item:hover .text{
    background-color: var(--c-dark-blue);
}

#author .item:hover .text span{
    color: var(--c-white);
}

/* footer */

footer{
    background-color: var(--c-dark-blue);
    padding: 10px;
}

footer > div{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer ul{
    gap: 20px;
    display: flex;
    align-items: center;
    list-style: none;
    margin-bottom: 0;
    padding: 0;
}

footer nav ul li a{
    font: 700 16px var(--fontName);
    color: var(--c-white);
    text-decoration: none;
}

footer nav ul li a:hover{
    color: var(--c-light-blue);
}

footer .social{
    width: 132px;
}

footer .social span{
    font: 600 16px var(--fontName);
    color: var(--c-white);
    display: block;
    margin-bottom: 10px;
    text-align: center;
}

footer .social .item{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

footer .social .item a:hover path{
    fill: var(--c-light-blue);
}

/* pager */

.pager ul{
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    gap: 10px;
    margin: 30px 0 20px;
}

.pager ul a,.pager ul span{
    padding: 5px 8px;
    border: 1px solid var(--c-dark-blue);
    border-radius: 5px;
    color: var(--c-dark-blue);
    transition: all 0.3s linear;
}

.pager ul span,.pager ul a:hover{
    color: var(--c-DarkOrange);
    background-color: var(--c-Off-white);
}

/* single */

.parentsSinglePage{
    padding: 0;
    margin-top: 50px;
    margin-bottom: 50px;
    display: grid;
    grid-template-columns:  985px 315px;
    gap: 20px;
    min-height: 76vh;
}

.parentsSinglePage.inerpage .headerText h1{
  font: 700 20px var(--fontName);
  color: var(--c-dark-blue);
  margin-bottom: 10px;
}

/* colRight */

.bodyContent{
    padding: 20px;
    border-radius: 10px;
    background-color: var(--c-white);
    box-shadow: 0px 0px 10px -4px var(--c-dark-blue);
    margin-bottom: 25px;
}

/* breadcrumb */

.breadcrumb{
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: var(--c-Off-white);
    border-radius: 5px;
    margin-bottom: 25px;
}

.breadcrumb span.icon{
    width: 24px;
    height: 24px;
    background: url(../image/icon/Group.svg) no-repeat center;
    background-size: contain;
}

.breadcrumb a,
.breadcrumb span.pageName{
    font: 600 14px var(--fontName);
    color: var(--c-black);
}

.breadcrumb a:hover{
    color: var(--c-DarkOrange);
}

/* imageSlider */

.imageDetails{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 25px;
    border-bottom: 1px dashed var(--c-gray);
    margin-bottom: 25px;
}

.imageDetails .swiper{
    width: 100%;
    height: auto;
    aspect-ratio: 1.5;
    margin: 0;
    border-radius: 10px;
}

.imageDetails img{
    width: 100%;
    height: 100%;
}

.imageDetails .imageCol{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.imageDetails .imageCol .item{
    width: 140px;
    height: auto;
    aspect-ratio: 1.5;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
}

.imageDetails .imageCol img{
    width: 100%;
    height: 100%;
}

/* detailsInfo */

.detailsInfo{
    margin-bottom: 25px;
}

.headerTitleSection{
    margin-bottom: 15px;
}

.headerTitleSection > span{
    font: 700 20px var(--fontName);
    color: var(--c-dark-blue);
    display: block;
    margin-bottom: 10px;
}

.headerTitleSection .headerBorder{
    position: relative;
}

.headerTitleSection .headerBorder span:first-of-type{
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--c-dark-blue);
}

.headerTitleSection .headerBorder span:last-of-type{
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 106px;
    height: 2px;
    background-color: var(--c-DarkOrange);
}

.detailsInfo .content{
    background-color: var(--c-Off-white);
    border-radius: 5px;
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.detailsInfo .listDetails{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.detailsInfo .listDetails .title{
    font: 400 15px var(--fontName);
}

.detailsInfo .listDetails .titleName{
    font: 600 15px var(--fontName);
}

/* singleList */

.singleList{
     margin-bottom: 25px;
}

.singleList .content li{
    margin-bottom: 20px;
}

.singleList .content li:last-of-type{
    margin-bottom: 0;
}

.singleList .content a{
    font: 700 14px var(--fontName);
    color: var(--c-dark-blue);
    
}

.singleList .content a:hover{
    color: var(--c-DarkOrange);
}

/* description and summary */

.description,.summary{
    margin-bottom: 25px;
}

.description .content,
.summary .content{
    font: 400 15px/30px var(--fontName);
}

.description .content .wp-caption{
    max-width: 100%;
}

.description .content a,
.summary .content a{
    color: var(--c-dark-DarkOrange);
    font-weight: 600;
}

.description .content a:hover,
.summary .content a:hover{
    color: var(--c-DarkOrange);
}

/* socialTag */

.socialTag{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-top: 1px dashed var(--c-gray);
    border-bottom: 1px dashed var(--c-gray);
    margin-bottom: 25px;
}

.socialTag .tag{
    display: flex;
    align-items: center;
    gap: 5px;
    font: 400 15px var(--fontName);
}

.socialTag .titleTag{
    display: flex;
    align-items: self-start;
    gap: 5px;
    min-width: fit-content;
}

.socialTag .titleTag::before{
    content: '';
    width: 12px;
    height: 12px;
    background: url(../image/icon/mdi_tag.svg) no-repeat center;
    background-size: contain;
}

.socialTag .tag .links{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.socialTag .tag .links a,
.socialTag .tag .links span{
    font: 600 15px var(--fontName);
    color: var(--c-black);
}

.socialTag .tag .links a:hover{
    color: var(--c-DarkOrange);
}

.socialTag .social{
    display: flex;
    align-items: center;
    gap: 10px;
}

.socialTag .social a path{
    fill: var(--c-dark-blue);
}

.socialTag .social a:hover path{
    fill: var(--c-DarkOrange);
}

/* commentForm */

.commentForm{
    margin-bottom: 25px;
}

.commentForm header.headerTitleSection{
    margin-bottom: 22px;
}

.commentForm form{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 21px;
}

.commentForm .colRightForm{
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.commentForm .formGroup,
.answerForm .formGroup{
    position: relative;
}

.commentForm label,
.answerForm label{
    position: absolute;
    top: -10px;
    right: 11px;
    background-color: var(--c-white);
    font: 400 13px var(--fontName);
    color: var(--c-gray);
    padding: 0 10px;
}

.commentForm input,
.commentForm textarea{
    border-radius: 10px;
    border: 1px solid var(--c-dark-blue);
    width: 100%;
    padding: 15px;
    font: 500 14px var(--fontName);
    color: var(--c-dark-blue);
    direction: rtl;
}

.commentForm input::placeholder,
.commentForm textarea::placeholder{
    font: 400 14px var(--fontName);
    color: var(--c-gray);
}

.commentForm button{
    background-color: var(--c-green-dark);
    border: unset;
    padding: 15px;
    font: 500 15px var(--fontName);
    border-radius: 10px;
    color: var(--c-white);
    width: 100%;
}

.commentForm button:hover{
    background-color: var(--c-green-light);
}

/* comments */

.comments .commentCol{
    border: 1px solid var(--c-dark-blue);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
}

.comments .commentCol .commentInfo{
    display: flex;
    gap: 10px;
}

.comments .commentCol.answer{
    margin-inline-start: 78px;
}

.comments .commentCol img{
    width: 90px;
    min-width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-top: 21px;
}

.comments .commentCol .header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px dashed var(--c-gray);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.comments .commentCol .userInfo{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.comments .commentCol .userInfo span{
    display: block;
}

.comments .commentCol .userInfo .name{
    font: 600 13px var(--fontName);
    color: var(--c-black);
}

.comments .commentCol .userInfo .date{
    font: 400 11px var(--fontName);
    color: var(--c-black);
}

.comments .commentCol .answerButton{
    padding: 3px 20px;
    font: 600 13px var(--fontName);
    color: var(--c-white);
    border: unset;
    background-color: var(--c-dark-blue);
    border-radius: 5px;
    transition: background-color 0.3s linear;
}

.comments .commentCol .answerButton:hover{
    background-color: var(--c-DarkOrange);
}

.comments .commentCol p{
    font: 400 13px/25px var(--fontName);
    color: var(--c-black);
}

.comments form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 21px;
    width: 100% !important;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease, margin-top 0.5s ease;
}

.comments .answerForm.active form {
    max-height: 212px;
    opacity: 1;
    margin-top: 20px;
    padding-top: 10px;
}


.comments .colRightForm{
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.comments input,
.comments textarea{
    border-radius: 10px;
    border: 1px solid var(--c-dark-blue);
    width: 100%;
    padding: 15px;
    font: 500 14px var(--fontName);
    color: var(--c-dark-blue);
    direction: rtl;
}

.comments input::placeholder,
.comments textarea::placeholder{
    font: 400 14px var(--fontName);
    color: var(--c-gray);
}

.comments .answerForm .buttons{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
}

.comments .answerForm .buttons button{
    background-color: var(--c-green-dark);
    border: unset;
    padding: 15px;
    font: 500 15px var(--fontName);
    border-radius: 10px;
    color: var(--c-white);
    transition: background-color 0.3 linear;
}

.comments .buttons button.send:hover{
    background-color: var(--c-green-light);
}

.comments .buttons button.cancel{
    background-color: var(--c-dark-red);
}

.comments .buttons button.cancel:hover{
    background-color: var(--c-light-red);
}

/* colLeft */

/* consultants */

.consultants{
    padding: 10px 20px;
    border-radius: 10px;
    background-color: var(--c-white);
    box-shadow: 0px 0px 10px -4px var(--c-dark-blue);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
}

.consultants img{
    width: 132px;
    aspect-ratio: 1;
    height: auto;
    border-radius: 50%;
    border: 1px solid var(--c-dark-blue);
}

.consultants span{
    display: block;
    font: 600 14px/28px var(--fontName);
    color: var(--c-black);
    text-align: center;
}

.consultants .links{
    display: flex;
    align-items: center;
    gap: 11px;
}

.consultants .links a{
    padding: 6px 50px;
    border: 1px solid var(--c-black);
    font: 500 13px var(--fontName);
    color: var(--c-black);
    border-radius: 5px;
    transition: all 0.3s linear;
}

.consultants .links a:hover{
    background-color: var(--c-DarkOrange);
    color: var(--c-white);
    border-color: var(--c-DarkOrange);
}

/* advImage */

.advImage{
    padding: 10px;
    border-radius: 10px;
    background-color: var(--c-white);
    box-shadow: 0px 0px 10px -4px var(--c-dark-blue);
    margin-bottom: 25px;
}

.advImage a{
    display: block;
}

.advImage img{
    width: 100%;
    border-radius: 10px;
}

/* advText */

.justLinkcontent,
.advText{
    padding: 10px;
    border-radius: 10px;
    background-color: var(--c-white);
    box-shadow: 0px 0px 10px -4px var(--c-dark-blue);
    margin-bottom: 25px;
}

.justLinkcontent header,
.advText header{
    margin-bottom: 10px;
}

.justLinkcontent header span,
.advText header span{
    font: 600 16px var(--fontName);
    margin-bottom: 10px;
    display: block;
}

.justLinkcontent .headerBorder,
.advText .headerBorder{
    position: relative;
}

.justLinkcontent .headerBorder span:first-of-type,
.advText .headerBorder span:first-of-type{
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--c-dark-blue);
}

.justLinkcontent .headerBorder span:last-of-type,
.advText .headerBorder span:last-of-type{
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 50px;
    height: 2px;
    background-color: var(--c-DarkOrange);
}


.justLinkcontent .links a,
.advText .links a{
    width: fit-content;
    display: block;
}

.justLinkcontent .links a h4,
.advText .links a{
    font: 600 14px var(--fontName);
    color: var(--c-black);
    width: fit-content;
}

.justLinkcontent .links a:hover h4,
.advText .links a:hover{
    color: var(--c-DarkOrange);
}

/* aboutContact */

.aboutContact{
    height: fit-content;
    padding: 20px;
    border-radius: 10px;
    background-color: var(--c-white);
    box-shadow: 0px 0px 10px -4px var(--c-dark-blue);
}

.aboutContact > header{
    margin-bottom: 20px;
}

.aboutContact > header h1{
    font: 700 20px var(--fontName);
    color: var(--c-dark-blue);
    margin-bottom: 10px;
}

.aboutContact > header .headerBorder{
    position: relative;
}

.aboutContact > header .headerBorder span:first-of-type{
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--c-dark-blue);
}

.aboutContact > header .headerBorder span:last-of-type{
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 106px;
    height: 2px;
    background-color: var(--c-DarkOrange);
}

.contactAboutContent{
    font: 600 16px/28px var(--fontName);
    margin-bottom: 25px;
}

.contactAboutContent img{
    max-width: 100%;
    height: auto;
}

.aboutContact .commentForm{
    margin-bottom: 0;
}

.contactAboutContent.page404{
    text-align: center;
    margin: 0;
    padding: 60px 0;
}

.successFullSend{
    width: 100% !important;
    transition: all 0.5s linear;
}

.successFullSend.active{
    padding: 10px;
    background-color: #6fff74;
    font: 500 15px var(--fontName);
    margin-bottom: 20px;
    border-radius: 5px;
}

.successFullSend.error{
    padding: 10px;
    background-color: #ff4141;
    font: 500 15px var(--fontName);
    margin-bottom: 20px;
    border-radius: 5px;
}

.ContactShowToken{
    margin-bottom: 50px;
}

.ContactShowToken .statusContact{
    font-weight: 500;
}

.ContactShowToken .nothic{
    font-weight: 500;
    /*color: var(--c-DarkOrange);*/
}

.ContactShowToken .detailMessage {
  border: 2px solid var(--c-dark-blue);
  width: 50%;
  border-radius: 10px;
}

.ContactShowToken .detailMessage .userIndo {
  padding: 10px;
  border-bottom: 1px solid var(--c-dark-blue);
}

.ContactShowToken .detailMessage .message {
  background: var(--c-Off-white);
  padding: 10px;
}

/* author page */

.authorPage{
    padding: 20px;
    border-radius: 10px;
    background-color: var(--c-white);
    margin-bottom: 50px;
    margin-top: 50px;
    box-shadow: 0px 0px 10px -4px var(--c-dark-blue);
}

.authorPage .headerTitleSection{
    margin-bottom: 20px;
}

.decriptionAuthor{
    margin-bottom: 50px;
}

.decriptionAuthor .content{
    display: flex;
    gap: 20px;
}

.decriptionAuthor .content img{
    width: 100px;
    min-width: 100px;
    height: 100px;
    border: 1px solid var(--c-dark-blue);
    border-radius: 50%;
}

.decriptionAuthor .info{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.decriptionAuthor .colItem{
    display: flex;
    align-items: center;
    gap: 10px;
    font: 500 16px var(--fontName);
}

.decriptionAuthor .colItem span:last-of-type,
.decriptionAuthor .colItem a{
    font-weight: 600;
    color: var(--c-dark-blue);
}

.decriptionAuthorContent{
    margin-bottom: 50px;
}

.decriptionAuthorContent .content{
    font: 500 15px/30px var(--fontName);
}

.authorPage .sectionCard{
    padding: unset;
    border-radius: unset;
    background-color: unset;
    box-shadow: unset;
}

.authorPage #articles{
    background-color: unset;
    margin-bottom: unset;
}

.authorPage #articles .item {
    width: 305px;
    border: 1px solid var(--c-dark-blue);
}

/* preloader */

#preloader {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff; /* رنگ پس‌زمینه */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

#preloader .loader {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #3498db; /* رنگ انیمیشن */
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* swiper */

.swiper-button-next,
.swiper-button-prev{
    background-color: var(--c-black-opacity);
    width: 44px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

}

.swiper-button-next::after,
.swiper-button-prev::after{
    font-size: 24px !important;
    font-weight: 800;
        color: var(--c-Off-white);
}

.swiper-button-next:hover:after,
.swiper-button-prev:hover:after{
    color: var(--c-DarkOrange);
}

/* project slider */

#projectSlider{
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    padding: 40px 0;
    margin-bottom: 50px;
}

#projectSlider .titleArticle{
    font-size: 30px;
    font-weight: 700;
    color: var(--c-white);
    text-align: center;
    margin-bottom: 40px;
}


#projectSlider .item{
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

#projectSlider .item img{
    width: 100%;
    aspect-ratio: 1.5;
    height: auto;
    transition: transform 0.3s linear;
}

#projectSlider .item:hover img{
    transform: scale(1.3);
}

#projectSlider .item .text{
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 20px;
}

#projectSlider .item .text h3{
    font-weight: 600;
    font-size: 22px;
    color: var(--c-white);
    line-height: 34px;
}

#projectSlider .item .text h3:hover{
    color: var(--c-DarkOrange);
}

#projectSlider .swiper-pagination span{
    width: 20px;
    height: auto;
    aspect-ratio: 1;
    background-color: var(--c-white);
}

#projectSlider .swiper-pagination span:hover,
#projectSlider .swiper-pagination span.swiper-pagination-bullet-active{
    background-color: var(--c-DarkOrange);
    opacity: 1;
}

/* form Auth */

.authForm{
    margin: 253px auto;
    background: var(--c-white);
    width: 310px;
    padding: 20px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.authForm .formField{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.authForm h2{
    font: 700 18px var(--fontName);
    text-align: center;
    color: var(--c-dark-blue);
    margin-bottom: 0;
}

.authForm .formGroup{
    position: relative;
}

.authForm label{
    font: 400 14px var(--fontName);
    color: var(--c-gray);
    position: absolute;
    top: -12px;
    padding: 0 8px;
    right: 8px;
    background: var(--c-white);
}

.authForm input{
    border: 1px solid var(--c-gray);
    border-radius: 5px;
    background: var(--c-white);
    width: 100%;
    padding: 15px;
    font: 500 14px var(--fontName);
}

.authForm input:-webkit-autofill,
.authForm input:-webkit-autofill:hover,
.authForm input:-webkit-autofill:focus,
.authForm input:-webkit-autofill{
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    transition: background-color 5000s ease-in-out 0s;
    background: inherit !important;
    color: inherit !important;
    border: 1px solid var(--c-gray);
}

.authForm button{
    background-color: var(--c-green-dark);
    border: unset;
    padding: 15px;
    font: 500 15px var(--fontName);
    border-radius: 5px;
    color: var(--c-white);
}

.authForm button:hover{
    background-color: var(--c-green-light);
}

/* edit class */

.text-danger{
    font: 500 13px var(--fontName);
}

/* set class*/

.panelLink{
    font: 500 13px var(--fontName);
    color: var(--c-dark-blue);
}

.panelLink:hover{
    color: var(--c-DarkOrange);
}


.captcha-wrapper > div{
    width: 93%;
}

.captcha-wrapper button{
    background-color: unset;
    border: unset;
    border-radius: 10px;
    width: fit-content;
    padding: 0;
}

.captcha-wrapper button svg{
    width: 21px;
}

/* media query */

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

    #articles .item {
        width: 270px;
    }

    #articles.articlesPage .item{
        width: 260px;
    }

    .parentsSinglePage{
        grid-template-columns: 805px 315px;
    }

    .imageDetails .imageCol .item{
        width: 176px;
    }

    .authorPage #articles .item{
        width: 260px;
    }
}

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

    .main-search button{
        padding: 14px 20px;
    }

    .main-search input{
        width: 46vw;
    }

    #articles .item {
        width: 225px;
    }

    #articles.articlesPage .item{
        width: 215px;
    }

    .parentsSinglePage{
        grid-template-columns: 625px 315px;
    }

    .imageDetails .imageCol .item{
        width: 131px;
    }

    .detailsInfo .content{
        grid-template-columns:1fr;
        gap: 10px;
    }

    .authorPage #articles .content{
        justify-content: center;
    }

    .authorPage #articles .item {
        width: 293px;
    }
}

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

    #maintenance > .image-wrapper .img{
        background: url("/media/defaults/persian-update-mobile.png") no-repeat center;
        background-size: cover;
        width: 100%;
        height: auto;
        aspect-ratio: 0.5;
    }

    #search form.active input{
        width: 60vw;
    }

    #headerNav{
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        width: 100% !important;
        height: 100% !important;
        z-index: 3;
    }
    
    #headerNav.active{
        background-color: var(--c-black-opacity);
        display: flex !important;
        justify-content: end;
    }

    #headerNav.active > div{
        background-color: var(--c-white);
        width: 300px;
    }

    #headerNav.active ul{
        flex-direction: column;
        align-items: start;
        padding: 15px !important;
    }

    
    #headerNav.active .closeIcon{
        border-bottom: 1px dashed;
        padding: 15px;
        display: block;
    }

    #headerNav.active .closeIcon:hover path{
        fill: var(--c-DarkOrange);
    }

    #headerNav.active div > ul{
        gap: 10px;
        height: 100%;
        overflow-y: scroll;
    }

    #headerNav.active ul > li{
        width: 100%;
        align-items: flex-start;
        padding: 0;
    }

    #headerNav.active ul > li a{
        color: var(--c-dark-blue);
    }

    #headerNav.active ul > li a:hover{
        color: var(--c-DarkOrange);
    }

    #headerNav ul > li a.active{
        color: var(--c-DarkOrange);
    }

    #headerNav.active ul > li > ul{
        position: relative;
        top: unset;
        max-height: unset;
        width: 100%;
        padding: 10px 0 0 !important;
    }

    #headerNav.active ul > li > ul > li{
        display: flex;
        align-items: center;
        gap: 5px;
    }

    #headerNav.active ul > li > ul > li::before{
        content: '';
        background: url('../image/icon/material-symbols-light_circle.svg') no-repeat center;
        background-size: contain;
        width: 8px;
        height: 8px;
    }

    .humbergerIcon{
        display: block;
    }

    .sectionCard .contentSection{
        justify-content: center;
    }

    #articles .item,
    .authorPage #articles .item{
        width: 226px;
    }

    #articles .content{
        justify-content: center;
    }

    #articles.articlesPage .item{
        width: 213px;
    }

    .parentsSinglePage{
        grid-template-columns: 100%;
    }

    .consultants{
        padding: 20px;
    }

    .comments .answerForm.active form {
        max-height: 364px;
        width: 100%;
        display: flex;
        flex-direction: column;
        transition: max-height 0.5s ease, opacity 0.5s ease, margin-top 0.5s ease;
    }

    .comments .answerForm.active textarea{
        height: 150px;
    }

    .commentForm form{
        display: flex;
        flex-direction: column;
    }

    .commentForm form textarea{
        height: 150px;
    }

    .imageDetails .imageCol .item{
        width: 155px;
    }

    .detailsInfo .content{
        grid-template-columns:1fr 1fr;
        gap: 20px;
    }

    footer ul li:nth-of-type(4n + 1){
        display: none;
    }

    .ContactShowToken .detailMessage{
        width: 80%;
    }
    
}

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

    .main-search{
        display: none;
    }

    #articles .item,
    .authorPage #articles .item{
        width: 260px;
    }

    #articles.articlesPage .item{
        width: 240px;
    }

    footer > div{
        flex-direction: column;
        gap: 20px;
    }

    footer ul{
        flex-wrap: wrap;
        justify-content: center;
    }

    footer ul li:nth-of-type(4n + 1){
        display: block;
    }

    .imageDetails .imageCol .item{
        width: 153px;
    }

    .detailsInfo .content{
        grid-template-columns:1fr;
        gap: 10px;
    }

    .comments .commentCol.answer {
        margin-inline-start: 30px;
    }

    .sectionCard .headerText{
        flex-direction: column;
        gap: 10px;
    }

    .ContactShowToken .detailMessage{
        width: 100%;
    }
}

@media only screen and (max-width: 575px){
    #mainHeader > div{
        padding: 0 20px !important;
    }

    .responsiveActive{
        margin: 0 20px;
    }

    .sectionCard{
        border-radius: 0;
    }

    .sectionCard .item{
        flex-direction: column;
    }

    .sectionCard .item .imgLink{
        width: 100%;
        min-width: unset;
    }

    #articles{
        padding: 20px;
    }

    #articles .item,
    .authorPage #articles .item{
        width: 43vw;
    }

    #articles .text .bottomInfo{
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    #author{
        border-radius: 0;
    }

    .pager ul li:first-of-type,
    .pager ul li:last-of-type{
        display: none;
    }

    #articles.articlesPage > div{
        border-radius: unset;
    }

    #articles.articlesPage .item {
        width: 43vw;
    }

    .bodyContent,.consultants,.advImage,.advText{
        border-radius: unset;
    }

    .imageDetails .imageCol{
        justify-content: center;
    }

    .imageDetails .imageCol .item{
        width: 28vw;
    }

    .socialTag{
        flex-direction: column;
        gap: 10px;
    }

    .authorPage{
        border-radius: unset;
    }

    .decriptionAuthor .content{
        flex-direction: column;
        align-items: center;
    }

    .decriptionAuthor .colItem{
        justify-content: center;
    }

    .authorPage .headerTitleSection > span{
        display: block;
        text-align: center;
    }

    .authorPage .headerTitleSection .headerBorder{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .authorPage .headerTitleSection .headerBorder span:last-of-type{
        right: unset;
    }

    .authorPage #articles{
        padding: 0;
    }

    #projectSlider{
        padding: 40px;
    }
}

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

    #articles .item,
    .authorPage #articles .item{
        width: 65vw;
    }

    #articles.articlesPage .item {
        width: 65vw;
    }

    #maintenance > .image-wrapper .img{
        width: 479px;
        height: 758px;
    }

    .socialTag .tag{
        flex-direction: column;
    }

    .socialTag .tag .links{
        justify-content: center;
    }
}