/*
Theme Name: webafzar
Theme URI: https://webafzar.com
Author: mostafa saeedi
Author URI: https://msae.ir/
Description: اموزش وردپرس، طراحی وب
Tags: طراحی سایت
Version: 1.0
License: GNU General Public License v2 or later
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

@font-face {
    font-family: iran;
    font-style: normal;
    font-weight: 400;
    src: url("fonts/iranyekan-bakh/YekanBakhFaNum-Regular.woff") format('woff')
}
@font-face {
    font-family: iran;
    font-style: normal;
    font-weight: 500;
    src: url("fonts/iranyekan-bakh/YekanBakh-Bold.woff") format('woff')
}
@font-face {
    font-family: iran;
    font-style: normal;
    font-weight: 600;
    src: url("fonts/iranyekan-bakh/YekanBakhFaNum-SemiBold.woff") format('woff')
}

/* reset codes */
*{
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}
body{
    direction: rtl;
    font-family: iran;
    font-size: 16px;
    font-weight: 400;
    text-align: right;
    background-color: #F0F4F9;
}
a, ins{
    text-decoration: none;
    color: #7A7A7A;
}
li, button, form, input{
    list-style: none;
    font-family: iran;
    font-weight: 400;
    background: none;
    color: #8F8F8F !important;
}
textarea{
    box-sizing: border-box;
}
p{
    margin-bottom: 0 !important;
}
button{
    cursor: pointer;
}
video{
    cursor: pointer;
    background-color: #222222;
}
img{
    max-width: 100%;
    height: 100%;
}
h1{
    color: var(--color-2);
}
h2 {
    color: var(--color-3);
}
h3, h4{
    margin-top: 1.5rem;
    color: var(--color-3);
}

/* root */
:root{
    --main-color:#0984e3;
    --color-1: #32313A;
    --color-2: #4A4E56;
    --color-3: #636E72;
    --color-4: #788485;
    --color-5: #B6BEBA;
    --color-6: #E0E3E0;

    --fs-1: 2rem !important;
    --fs-2: 1.5rem !important;
    --fs-3: 1.25rem !important;
    --fs-4: 1rem !important;

    --regular: 400;
    --medium: 500;
    --bold: 600;

}

/* ui design */
.sec-main {
    border-radius: 1rem;
    margin-top: 1.5rem;
    overflow: hidden;
    line-height: 2;
    z-index: 99;
}
.wa-box-title{
    font-size: var(--fs-1);
    font-weight: var(--bold);
    color: var(--color-2);
}

/* header */
nav.wa-top-menu {
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    position: relative;
}
header.wa-header {
    margin-bottom: 8rem;
}
nav.wa-top-menu .logo {
    position: relative;
    z-index: 99;
    text-align: center;
    padding-left: 12rem;
}
header.wa-header:before {
    content: '';
    background-color: var(--main-color);
    position: absolute;
    width: 100%;
    height: 110px;
    top: 0;
    z-index: -9;
}
.wa-top-menu:before {
    content: '';
    display: flex;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 350px;
    height: 200px;
    background-color: white;
    padding: 2rem;
    border-radius: 100%;
    box-shadow: 0 0 8px #c4c4c4;
}
nav.wa-top-menu .left {
    color: var(--color-6);
    font-size: var(--fs-2);
}
nav.wa-top-menu .logo h1{
    color: var(--color-2);
    padding-top: 6rem;
}
header.wa-header ul li a{
    color: var(--color-6);
}
.woocommerce nav.woocommerce-pagination {
    z-index: 9999;
}

/* intro */
.wa-wrapper-intro .wa-int {
    display: flex;
    justify-content: space-between;
    margin-top: 10rem;
}
.wa-wrapper-intro .wa-int .right h2{
    margin-bottom: 1rem;
    color: var(--color-2);
}
.wa-wrapper-intro .wa-int .right h5{
    color: var(--color-3);
}
.wa-wrapper-intro .wa-int .right p{
    color: var(--color-4);
}
.wa-wrapper-intro .wa-int .right figure{
    width: 100%;
}

/* blog */
.wa-blog .post {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    background-color: #fff;
    padding: 1rem;
    border-radius: 1rem
}
.wa-blog .post figure {
    width: 100%;
    height: 300px;
    object-fit: cover;
}
.wa-blog .post h4 {
    height: 50px;
    overflow: hidden;
    color: var(--color-2);
    font-size: var(--fs-3);
    font-weight: var(--medium);
}
.wa-blog .post p{
    color: var(--color-3);
    font-size: var(--fs-4);
}

/* contact */
.an-wrapper-contact {
    height: 300px;
}

/* footer */
footer {
    background-color: var(--color-1);
    color: var(--color-6);
}
.wa-footer-wrap .wa-logo{
    color: var(--color-5);
}

/* sing blog */
.an-blog .content p{
    color: var(--color-3);
}

/* related post*/
.an-related-post ul li > a .post {
    align-items: center;
}
.an-related-post ul li > a .post figure {
    width: 100px;
    margin: 0 !important;
    overflow: hidden;
}
.an-related-post ul li > a .post figure img{
    width: 100% !important;
    object-fit: cover;
}
.an-related-post ul li > a .post h4{
    font-size: var(--fs-4);
    margin: 0 !important;
}

/* user menu */
nav.wa-top-menu button i{
    color: var(--color-5);
}
.an-btn-log:hover nav.woocommerce-MyAccount-navigation{
    display: block;
}
.wa-top-menu nav.woocommerce-MyAccount-navigation {
    display: none;
    width: 300px;
    position: absolute;
    top: 74px;
    left: 0;
    padding: 1rem;
    background-color: #fff;
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 2px 2px #828282;
}
.wa-top-menu nav.woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 0;
    margin: 0;
    text-align: right;
}
.wa-top-menu nav.woocommerce-MyAccount-navigation ul li a{
    font-size: var(--fs-4);
    color: var(--color-3);
}