@font-face {
    font-family: 'cafont';
    src: url("../font/angry.ttf");
}

@font-face {
    font-family: 'yekan';
    src: url('../font/IRANYekanRegular.ttf');
}

input {
    font-family: yekan;
}

a {
    text-decoration: none;
}

:root {
    --titleborder: #0083b5;
    --back-color: #191919;
    --headfoot-color: #090909;
    --header-color: #00000077;
    --active-color: #0083b5;
    --btn-color: #0076a3;
    --green-color: green;
    --base-color: #444444;
    --sec-color: #555555;
    --thi-color: #222;
    --for-color: #333;
    --hover-color: #00a3d5;
    --shover-color: #ad01fc;
    --back-img: #222;
    --important-color: #dd9900;
    --ad-color: #00ceab;
}

.anone {
    text-decoration: none;
    font-size: 14px;
}

.decornone {
    text-decoration: none;
}

.line-20 {
    line-height: 20px;
}

.active {
    color: var(--active-color);
}

.left-5 {
    margin-left: 10px;
}

.left-10 {
    margin-left: 10px;
}

.left-20 {
    margin-left: 20px;
}

.left-30 {
    margin-left: 30px;
}

.left-50 {
    margin-left: 50px;
}

.left-5p {
    margin-left: 5%;
}

.top-5 {
    margin-top: 5px;
}

.top-10 {
    margin-top: 10px;
}

.top-20 {
    margin-top: 20px;
}

.top-30 {
    margin-top: 30px;
}

.top-50 {
    margin-top: 50px;
}

.right-10 {
    margin-right: 10px;
}

.right-20 {
    margin-right: 20px;
}

.right-30 {
    margin-right: 30px;
}

.right-50 {
    margin-right: 50px;
}

.leftright5 {
    margin-left: 5px;
    margin-right: 5px;
}

.leftright10 {
    margin-left: 10px;
    margin-right: 10px;
}

.leftright20 {
    margin-left: 20px;
    margin-right: 20px;
}

.leftright30 {
    margin-left: 30px;
    margin-right: 30px;
}

.margin-zero {
    margin: 0px;
}

a {
    color: var(--active-color);
}

    a:hover {
        color: var(--shover-color);
    }

.shadow {
    box-shadow: 5px 5px 20px 5px #090909;
}

.button-shadow {
    box-shadow: 3px 3px 5px 1px #111111;
}

.gallery-shadow {
    box-shadow: 0px 5px 20px 5px #070707;
}

.button-radius {
    border-radius: 4px;
}

.section-radius {
    border-radius: 7px;
}

.circle-radius {
    border-radius: 50%;
}

.flip-hor {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.inline-item {
    position: relative;
    display: inline-block;
}

.btn, .button-radius, .button-shadow  {
    position: relative;
    display: flex;
    font-weight: bold;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    color: whitesmoke;
    background-color: var(--btn-color);
}

    .btn:hover {
        background-color: var(--hover-color);
    }

.sosial {
    display: block;
    float: left;
    width: 30px;
    height: 30px;
    background-size: 30px;
}

    .sosial:hover {
        background-size: 32px;
    }

.hidden {
    display: none;
}

.instagram {
    background-image: url(../../image/instagram.png);
}

.linkedin {
    background-image: url(../../image/linkedin.png);
}

.facebook {
    background-image: url(../../image/facebook.png);
}

.youtube {
    background-image: url(../../image/youtube.png);
}

.twitter {
    background-image: url(../../image/twitter.png);
}

.github {
    background-image: url(../../image/github.png);
}

select:invalid {
    color: gray;
}

select option:first-child {
    color: gray;
}

.graytitle {
    color: gray;
}

.w100 {
    width: 100%;
}

.h100 {
    height: 100%;
}

.normal-style {
    font-style: normal;
}

.back-highlight {
    background-color: var(--important-color);
}

.whitesmoke {
    color: whitesmoke
}

.lightgray {
    color: lightgray;
}

.darkgray {
    color: darkgray;
}

.bold {
    font-weight: bold;
}

.normal-weight {
    font-weight: normal;
}

.font14 {
    font-size: 14px;
}

.font16 {
    font-size: 16px;
}

.font18 {
    font-size: 18px;
}

.font19 {
    font-size: 19px;
}

.font20 {
    font-size: 20px;
}

.font22 {
    font-size: 22px;
}

/* direction and alignment */

.left {
    float: left;
}

.right {
    float: right !important;
}

.right-dir {
    direction: rtl !important;
}

.left-dir {
    direction: ltr;
}

.right-align {
    direction: rtl !important;
    text-align: right !important;
}

.right-float {
    float: right !important;
    direction: rtl !important;
}

.block {
    display: block;
}

.w-auto {
    display: inline-block;
    width: auto;
}

.w40 {
    width: 40px;
}

.w50 {
    width: 50px;
}

.w60 {
    width: 60px;
}

.center-align {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.justify {
    text-align: justify;
}