:root{
    --c-Off-white:#F8F9FA;
    --c-black:#000000;
    --c-black-opacity:#0000005c;
    --c-white:#FFFFFF;
    --c-light-blue:#02D9FF;
    --c-dark-blue:#002459;
    --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;
}

ul,p,h1,h2,h3,h4,h5,h6{
    padding: 0;
    margin: 0;
    list-style: none;
}

/* header */

#mainHeader{
    background-color: var(--c-black);
    padding:10px 0;
    position: sticky;
    top: 0;
    z-index: 3;
}

/* navbar */

#headerNav{
    height: 100%;
}

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

#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);
}

.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;
}

/* top image main page */

#topImage{
    margin-bottom: 50px;
    position: relative;

}

#topImage .topPart{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#topImage .background{
    filter: brightness(50%);
    height: auto;
    aspect-ratio: 1.5;
    width: 100%;
}

#topImage .textPosition{
    position: absolute;
    text-align: center;

}

#topImage .textPosition-top{
    margin-bottom: 130px;
}

#topImage .textPosition h1{
    font: 800 32px var(--fontName);
    color: var(--c-Off-white);
    margin-bottom: 20px;
}

#topImage .textPosition p{
    font: 700 20px var(--fontName);
    color: var(--c-Off-white);
    width: 57.188vw;
    line-height: 40px;
    margin-bottom: 0;
}

#topImage .introduction{
    position: absolute;
    bottom: 0;
    padding: 35px 0;
    background-color: var(--c-dark-blue);
    width: 100%;
}

#topImage .introduction h1{
    font: 700 32px var(--fontName);
    color: var(--c-Off-white);
    text-align: center;
}

/* 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);
}

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

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

.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-wrap: wrap;
    gap: 20px;
}

.sectionCard .item{
    width: 240px;
    border: 1px solid var(--c-dark-blue);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sectionCard .item .imgLink{
    display: block;
    width: 100%;
    height: auto;
    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;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    flex-grow: 1;
    background-color: var(--c-Off-white);
}

.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: 72vh;
}

.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;
}

#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;
}

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 span{
    font: 600 16px var(--fontName);
    color: var(--c-white);
    display: block;
    margin-bottom: 10px;
}

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

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: 72vh;
}

/* colRight */

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

/* 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 .imageSlider{
    width: 100%;
    height: auto;
    aspect-ratio: 1.5;
    margin: 0;
    border-radius: 10px;
}

.imageSlider 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);
}

/* description */

.description{
    margin-bottom: 25px;
}

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

/* 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: center;
    gap: 5px;
}

.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;
    gap: 3px;
}

.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:hover path{
    fill: var(--c-DarkOrange);
}

/* commentForm */

.commentForm{
    margin-bottom: 25px;
}

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

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

.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);
}

.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: 68px;
    min-width: 68px;
    height: 68px;
    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: 185px;
    opacity: 1;
    margin-top: 20px;
}


.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 */

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

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

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

.advText .headerBorder{
    position: relative;
}

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

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

.advText .links{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.advText .links a{
    font: 600 12px var(--fontName);
    color: var(--c-black);
}

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

/* aboutContact */

.aboutContact{
    height: fit-content;
}

.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;
}

.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: var(--c-Off-white);
    font: 500 15px var(--fontName);
    margin-bottom: 20px;
    border-radius: 5px;
}

/* 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); }
}

/* media query */

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

    #topImage .textPosition-top{
        margin-bottom: 80px;
    }

    .sectionCard .item{
        width: 204px;
    }

    #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;
    }

    #topImage .introduction{
        position: relative;
        bottom: unset;
    }
}

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

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

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

    .sectionCard .item{
        width: 168px;
    }

    #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){

    #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.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 .item{
        width: 213px;
    }

    .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;
    }
    
}

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

    .main-search{
        display: none;
    }

    #topImage .textPosition p{
        display: none;
    }

    #topImage .introduction{
        padding: 15px 0;
        position: absolute;
        bottom: 0;
    }

    #topImage .introduction h1{
        font-size: 20px;
    }

    .sectionCard .item{
        width: 240px;
    }

    #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;
    }

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

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

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

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

    #topImage .textPosition h1{
        font-size: 20px;
        padding: 0 20px
    }

    .sectionCard{
        border-radius: 0;
    }

    .sectionCard .item {
        width: 43vw;
    }

    #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;
    }

    .colRight,.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;
    }
}

@media only screen and (max-width: 479px){
    .sectionCard .headerText{
        flex-direction: column;
        gap: 10px;
    }

    .sectionCard .item {
        width: 65vw;
    }

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

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