@font-face {
    font-family: "yekanBakh-Regular";
    src: url('../fonts/IRANYekanXFaNum-Regular.woff') format("woff");
}

@font-face {
    font-family: "yekanBakh-Bold";
    src: url('../fonts/IRANYekanXFaNum-Bold.woff') format("woff");
}

/* navigation */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');


.navigation {
    position: sticky;
    bottom: 13px;
    width: 338px;
    height: 82px;
    background: #27232ddb;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    z-index: 10;
    backdrop-filter: blur(4px);
}

.navigation ul {
    display: flex;
    justify-content: space-between;
    width: 350px;
}

.navigation ul li {
    position: relative;
    width: 70px;
    height: 70px;
    list-style: none;
    z-index: 1;
}

.navigation ul li a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    text-align: center;
    font-weight: 500;
}

.navigation ul li a .icon {
    position: relative;
    display: block;
    line-height: 75px;
    font-size: 1.5em;
    text-align: center;
    color: #fff;
    transition: .5s;
}

.navigation ul li.active a .icon {
    transform: translateY(-38px);
}
.navigation ul li.active a .icon svg circle,.navigation ul li.active a .icon svg path {
   stroke: white;
}
.navigation ul li a .text {
    position: absolute;
    color: #fff;
    font-weight: 400;
    font-size: .75em;
    letter-spacing: .05em;
    opacity: 0;
    transform: translateY(20px);
    transition: .5s;
}

.navigation ul li.active a .text {
    opacity: 1;
    transform: translateY(16px);
}

.navigation ul li.active a .circle {
    transition: .5s;
    transition-delay: .5s;
    transform: translateY(-37px) scale(1);
}

.indicator {
    position: absolute;
    top: -43%;
    width: 70px;
    height: 70px;
    background: linear-gradient(270deg, rgba(251, 150, 108, 1) 0%, rgba(213, 114, 154, 1) 76%);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .5s;
    box-shadow: 0 9px 7px 0 #F3A49129;
}

.indicator::before {
    /* content: ''; */
    position: absolute;
    top: 50%;
    left: -22px;
    width: 20px;
    height: 20px;
    background: transparent;
    border-top-right-radius: 20px;
    box-shadow: 1px -10px 0 #27232d;
}

.indicator::after {
    /* content: ''; */
    position: absolute;
    top: 50%;
    right: -22px;
    width: 20px;
    height: 20px;
    background: transparent;
    border-top-left-radius: 20px;
    box-shadow: -1px -10px 0 #27232d;
}

.navigation ul li:nth-child(1).active~.indicator {
    transform: translateX(calc(0px * 3));
}

.navigation ul li:nth-child(2).active~.indicator {
    transform: translateX(calc(-98px * 1));
}

.navigation ul li:nth-child(3).active~.indicator {
    transform: translateX(calc(-98px * 2));
}

.navigation ul li:nth-child(4).active~.indicator {
    transform: translateX(calc(-69.099px * 3));
}

/*  */
html {
    scroll-behavior: smooth;
    direction: rtl;
}

body {
    font-family: "yekanBakh-Regular";
    user-select: none;
    overflow-x: hidden;
}
.font-bold {
    font-family: "yekanBakh-Bold";
}

a {
    cursor: pointer;
    text-decoration: none;
    transition: all .4s;
}

/* object fit */
.object-cover {
    object-fit: cover;
}

/* overflow */
.overflow-x-hidden {
    overflow-x: hidden;
}

/* border dash */
.border-dash {
    border: 2px dashed lightgray;
}

.border-b-dash {
    border-bottom: 2px dashed #0000000D
}

/* border-radius */
.rounded-tl-0 {
    border-bottom-right-radius: 10px !important;
    border-top-left-radius: 0px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
.rounded-br-0 {
    border-bottom-right-radius: 0px !important;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
}

.rounded-7 {
    border-radius: 7px !important;
}

.rounded-10 {
    border-radius: 10px !important;
}

.rounded-15 {
    border-radius: 15px !important;
}
.rounded-18 {
    border-radius: 18px !important;
}
.rounded-20 {
    border-radius: 20px !important;
}
.rounded-b-22 {
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
}
.rounded-25 {
    border-radius: 25px !important;
}
.rounded-30 {
    border-radius: 30px !important;
}
.rounded-42 {
    border-radius: 42px !important;
}
.rounded-69 {
    border-radius: 69px !important;
}

/* z index */
.-z-1 {
    z-index: -1;
}
.z-0 {
    z-index: 0;
}
.z-1 {
    z-index: 1;
}
.z-2 {
    z-index: 2;
}
.z-8 {
    z-index: 8;
}
.z-10 {
    z-index: 10;
}

/* color */
.text-main {
    color: #008BF9;
}

.text-main-gradient {
    background: #FB966C;
    background: linear-gradient(to right, #FB966C 0%, #D5729A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gray {
    color: #8e95a3;
}

/* box shadow */
.shadow1 {
    box-shadow: 0px 0px 26.399999618530273px 0px #00000040;
}

.shadow2 {
    box-shadow: 0px 0px 43.2px 0px #00000010;
}

.shadow3 {
    box-shadow: 0px 0px 4px 0px #00000025;
}

.shadow4 {
    box-shadow: 0px -12px 29px 0px #008BF939;
}

/* rotate */
.-rotate-2 {
    transform: rotate(-2deg);
}
/* padding */
.p-1px{
    padding: 1px;
}
/* top */
.-top-8 {
    top: -8px;
}
.-top-16 {
    top: -16px;
}
.top-29 {
    top: 29%;
}
.-top-35 {
    top: -35px;
}
.-top-60 {
    top: -60px;
}
.-top-63 {
    top: -63px;
}

.-top-70 {
    top: -70px;
}
.-top-95 {
    top: -95px;
}
.top-137 {
    top: 137px;
}
.top-148 {
    top: 148px;
}
.-top-273 {
    top: -273px;
}
.top-292 {
    top: 292px;
}
.top-459 {
    top: 459px;
}
.top-651 {
    top: 651px;
}
/* bottom */
.-bottom-4 {
    bottom: -4px;
}
.bottom-8 {
    bottom: -8px;
}
.-bottom-22 {
    bottom: -22px;
}
.bottom-107 {
    bottom: 107px;
}
.bottom-175 {
    bottom: 175px;
}
.-bottom-250 {
    bottom: -250px;
}
.bottom-289 {
    bottom: 289px;
}
/* right */
.right-0 {
    right: 0;
}
.right-12 {
    right: 12px;
}
.right-13 {
    right: 13px;
}
.right-14 {
    right: 14px;
}
.-right-22 {
    right: -22px;
}
.-right-32 {
    right: -32px;
}
.-right-60 {
    right: -60px;
}
.right-64 {
    right: 64px;
}
.-right-171 {
    right: -171px;
}
/* left */
.left-0 {
    left: 0;
}
.left-14 {
    left: 14px;
}
.-left-171 {
    left: -171px;
}
.left-197 {
    left: 197px;
}
.left-252 {
    left: 252px;
}
/* line height */
.lh-24 {
    line-height: 24px;
}
/* rotate */
.-rotate-14{
    transform: rotate(-14deg);
}
.rotate-14{
    transform: rotate(14deg);
}
/* line clump */
.line-clump-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}

.line-clump-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* background */
.bg-main {
    background-color: #008BF9;
}
.bg-purple-gradient{
    background: linear-gradient(131deg, rgba(73,22,161,1) 0%, rgba(172,47,166,1) 22%);
}
.bg-purple-gradient-2{
    background: linear-gradient(131deg, rgba(255, 175, 207, 0.64) 0%, rgba(47, 0, 47, 0.19) 56%);
}
.bg-white1 {
    background: #FFF9F74D;
}

.bg-white2 {
    background-color: #ffffff1a;
}

.bg-white3 {
    background-color: #FFF9F73B;
}

.bg-dark2 {
    background-color: #1E1E1E;
}

.bg-dark3 {
    background-color: #222121;
}
.bg-dark4 {
    background-color: #232323;
}
.bg-dark5{
    background-color: #242424;
}
.bg-dark6{
    background-color: #111010;
}
.bg-dark7{
    background-color: #181818;
}
.bg-dark8{
    background-color: #212121;
}
.bg-dark9{
    background-color: #2a2a2a;
}
.bg-main-gradient {
    background: rgb(251, 150, 108);
    background: linear-gradient(90deg, rgba(251, 150, 108, 1) 0%, rgba(213, 114, 154, 1) 76%);
}

.bg-main-gradient-2 {
    background: linear-gradient(131deg, rgba(255, 255, 255, 0.17) 0%, rgba(249, 142, 142, 0.17) 76%);
}

.bg-main-gradient-3 {
    background: linear-gradient(131deg, rgba(255, 255, 255, 0.07) 0%, rgba(249, 142, 142, 0.34) 76%);
}

.bg-main-gradient-4 {
    background: linear-gradient(131deg, rgba(255, 255, 255, 0.1) 0%, rgba(249, 142, 142, 0.13) 100%);
}
.bg-main-gradient-5 {
    background: linear-gradient(131deg, rgba(255, 255, 255, 0.23) 0%, rgba(255, 10, 10, 0.14) 100%);
}
.bg-main-gradient-6{
background: linear-gradient(131deg, rgba(255, 255, 255, 0.09) 0%, rgba(249, 142, 142, 0.34) 100%);
}
.bg-blue-gradient{
    background: linear-gradient(131deg, rgba(0,131,252,1) 0%, rgba(45,230,255,1) 100%);
}
.bg-gradient-1 {
    background: linear-gradient(90deg, rgba(255, 205, 184, 0.31) 0%, rgba(213, 114, 154, 0.23) 76%);
}

.bg-gradient-2 {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.21) 0%, rgba(249, 142, 142, 0.16) 76%);
}

.bg-gray {
    background-color: #ECECEC;
}

.bg-gray2 {
    background-color: #D9D9D9;
}
.bg-gray3{
    background-color: #E2E2E2;
}
.bg-banner{
    background: linear-gradient(131deg, rgba(187,85,255,1) 0%, rgba(112,51,153,1) 100%);
}
/* font size */
.fs-10 {
    font-size: 10px;
}
.fs-11 {
    font-size: 11px;
}
.fs-12 {
    font-size: 12px;
}

.fs-14 {
    font-size: 14px;
}

.fs-18 {
    font-size: 18px;
}

.fs-20 {
    font-size: 20px;
}

.fs-24 {
    font-size: 24px;
}

.fs-28 {
    font-size: 28px;
}

.fs-32 {
    font-size: 32px;
}

.fs-36 {
    font-size: 36px;
}

.fs-40 {
    font-size: 40px;
}

.fs-76 {
    font-size: 76px;
}

/* max width */
.max-w-357 {
    max-width: 357px;
    width: 100%;
}
.max-w-300 {
    max-width: 300px;
    width: 100%;
}
.max-w-380 {
    max-width: 380px;
    width: 100%;
}
.max-w-521 {
    max-width: 521px;
    width: 100%;
}
.max-w-557 {
    max-width: 557px;
    width: 100%;
}
.max-w-580 {
    max-width: 580px;
    width: 100%;
}
.max-w-654 {
    max-width: 654px;
    width: 100%;
}
.max-w-880 {
    max-width: 880px;
    width: 100%;
}
.max-w-920 {
    max-width: 920px;
    width: 100%;
}
/* border */
.border-main {
    border: 1px solid #008BF9;
}

.border-white-1 {
    border: 1px solid #ffffff47 !important;
}
.border-bottom-white-10{
    border-bottom: 1px solid #ffffff29;
}
.border-purple {
    border: 1px solid #98618B;
}
.border-purple2{
    border: 1px solid #FF8BE252;
}
.border-gradient-1 {
    border-width: 1px;
    border-style: solid;
    border-image-source: linear-gradient(to right, #98618B, #FAFAFA);
}

/* gap */
.gap-6 {
    gap: 5rem;
}

/* width */
.w-3 {
    width: 3px;
}
.w-18 {
    width: 18px;
}
.w-22 {
    width: 22px;
}
.w-26 {
    width: 26px;
}
.w-40 {
    width: 40px;
}

.w-48 {
    width: 48px;
}
.w-53 {
    width: 53px;
}
.w-69 {
    width: 69px;
}
.w-70 {
    width: 70px;
}
.w-76 {
    width: 76px;
}
.w-90 {
    width: 90px;
}

.w-101 {
    width: 101px;
}
.w-122 {
    width: 122px;
}
.w-129 {
    width: 129px;
}

.w-151 {
    width: 151px;
}

.w-171 {
    width: 171px;
}
.w-180 {
    width: 180px;
}
.w-222 {
    width: 222px;
}

.w-230 {
    width: 230px;
}
.w-237 {
    width: 237px;
}
.w-242 {
    width: 242px;
}
.w-260 {
    width: 260px;
}
.w-262 {
    width: 262px;
}
.w-350 {
    width: 350px;
}
.w-433 {
    width: 433px;
}
/* height */
.h-18{
    height: 18px;
}
.h-24 {
    height: 24px;
}
.h-26 {
    height: 26px;
}
.h-30 {
    height: 30px;
}
.h-40 {
    height: 40px;
}

.h-43 {
    height: 43px;
}

.h-45 {
    height: 45px;
}

.h-48 {
    height: 48px;
}

.h-60 {
    height: 60px;
}
.h-69 {
    height: 69px;
}
.h-70 {
    height: 70px;
}
.h-76 {
    height: 76px;
}
.h-90 {
    height: 90px;
}

.h-94 {
    height: 94px;
}
.h-101 {
    height: 101px;
}
.h-108 {
    height: 108px;
}
.h-113vh{
    height: 113vh;
}
.h-160 {
    height: 160px;
}
.h-230 {
    height: 230px;
}
/* margin top */
.mt-182 {
    margin-top: 182px;
}
.-mt-175 {
    margin-top: -175px;
}
.-mx-162{
    margin-right: -162px;
    margin-left: -162px;
}
.mt-128 {
    margin-top: 128px;
}

/* margin bottom */
.-mb-33 {
    margin-bottom: -33px;
}

/* transition */
.transition {
    transition: all .4s;
}

/* transform */
.transform1 {
    transform: scale(1.16) translateY(4px) translateX(22px);
}
/* blog filter */
#portfolio-filter li{
    transition: all .4s;
}
#portfolio-filter li.active,#portfolio-filter li:hover{
    background: linear-gradient(270deg, rgba(251, 150, 108, 1) 0%, rgba(213, 114, 154, 1) 76%);
}
/* hover */
.main-hover,
.main-hover-2,
footer a p,
.offcanvas-body ul li {
    transition: all .4s;
}

.main-hover:hover {
    background: linear-gradient(270deg, rgba(251, 150, 108, 1) 0%, rgba(213, 114, 154, 1) 76%);
}

.main-hover-2:hover {
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.17) 0%, rgba(249, 142, 142, 0.17) 76%);
}

.offcanvas-body ul li:hover,
.offcanvas-body ul li.active {
    box-shadow: 0 0 4px 1px #fb97a948;
    padding-right: 32px;
    background: linear-gradient(to right, #FB966C 19%, #D5729A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*  */
footer a:hover p {
    background: #FB966C;
    background: linear-gradient(to right, #FB966C 0%, #D5729A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* global styles */
.row {
    margin-left: 0;
    margin-right: 0;
}

.outline-none {
    outline: none;
}

.opacity-none {
    opacity: 0;
}
.opacity-56 {
    opacity: 56%;
}
.visible-none {
    visibility: hidden;
}

.resize-none {
    resize: none;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

.text-justify {
    text-align: justify;
}

.ltr {
    direction: ltr;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* accordion */
.accordion-btn>svg {
    transition: all .4s;
}

.accordion-btn.active>svg {
    transform: rotate(-90deg);
}

.accordion-content {
    transition: all .4s;
    max-height: 0;
    overflow: hidden;
}

.accordion-content.active {
    max-height: 2000px;
}

/* keyframe */
.rotate {
    animation: rotate 12s ease 0s infinite normal none;
    animation-direction: alternate-reverse;
}

.bounce-right {
    animation: bounce-right 12s ease-in-out infinite;
    animation-direction: alternate-reverse;
}
.bounce-right2 {
    animation: bounce-right 19s ease-in-out infinite;
    animation-direction: alternate-reverse;
}
.bounce-top {
    animation: bounce-top 9s ease 0s infinite normal none;
    animation-direction: alternate-reverse;
}
.bounce-top-down {
    animation: bounce-top-down 19s ease-in-out infinite;
    animation-direction: alternate-reverse;
}

@keyframes rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes bounce-right {
    0% {
        animation-timing-function: ease-in;
        opacity: 1;
        transform: translateX(48px);
    }

    24% {
        opacity: 1;
    }

    40% {
        animation-timing-function: ease-in;
        transform: translateX(13px);
    }

    65% {
        animation-timing-function: ease-in;
        transform: translateX(13px);
    }

    82% {
        animation-timing-function: ease-in;
        transform: translateX(6.5px);
    }

    93% {
        animation-timing-function: ease-in;
        transform: translateX(4px);
    }

    25%,
    55%,
    75%,
    87%,
    98% {
        animation-timing-function: ease-out;
        transform: translateX(0px);
    }

    100% {
        animation-timing-function: ease-out;
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes bounce-top {
    0% {
        animation-timing-function: ease-in;
        opacity: 1;
        transform: translateY(-45px);
    }

    24% {
        opacity: 1;
    }

    40% {
        animation-timing-function: ease-in;
        transform: translateY(-24px);
    }

    65% {
        animation-timing-function: ease-in;
        transform: translateY(-12px);
    }

    82% {
        animation-timing-function: ease-in;
        transform: translateY(-6px);
    }

    93% {
        animation-timing-function: ease-in;
        transform: translateY(-4px);
    }

    25%,
    55%,
    75%,
    87% {
        animation-timing-function: ease-out;
        transform: translateY(0px);
    }

    100% {
        animation-timing-function: ease-out;
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes bounce-top-down {

    0%,
    100% {
        transform: translateY(0);
    }

    10%,
    30%,
    50%,
    70% {
        transform: translateY(-8px);
    }

    20%,
    40%,
    60% {
        transform: translateY(8px);
    }

    80% {
        transform: translateY(6.4px);
    }

    90% {
        transform: translateY(-6.4px);
    }
}
/* header */
header ul li>svg {
    transition: all .4s;
    bottom: -17px;
    opacity: 0;
}

header ul li:hover>svg,header ul li.active>svg {
    bottom: -7px;
    opacity: 100%;
}
#search svg{
    flex-shrink: 0;
}
#search input{
    width: 100%;
}
/* banner */
#banner{
    background-image: url('../img/background-banner-index.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
@media only screen and (max-width:1400px) {}

@media only screen and (max-width:1200px) {
    .fs-xl-14 {
        font-size: 14px;
    }

    .gap-xl-3rem {
        gap: 3rem;
    }
}

@media only screen and (max-width:992px) {
    header > div:last-child > div{
        box-shadow: 0 0 21px 8px #F955D024;
    }
    .bg-lg-whiteTransparent {
        background-color: #FFF7F724;
    }

    .h-lg-auto {
        height: auto;
    }

    .-top-lg-287 {
        top: -287px;
    }
    .fs-lg-32{
      font-size: 32px;
    }
}

@media only screen and (max-width:768px) {
    .fs-md-8 {
        font-size: 8px;
    }
    .fs-md-11 {
        font-size: 11px;
    }
    .fs-md-12 {
        font-size: 12px;
    }
    .fs-md-14 {
        font-size: 14px;
    }

    .fs-md-16 {
        font-size: 16px;
    }

    .fs-md-18 {
        font-size: 18px;
    }

    .fs-md-20 {
        font-size: 20px;
    }

    .fs-md-24 {
        font-size: 24px;
    }
    .fs-md-32 {
        font-size: 32px;
    }
    .fs-md-36 {
        font-size: 36px;
    }
    .w-md-42 {
        width: 42px;
    }
    .w-md-45 {
        width: 45px;
    }
    .w-md-60 {
        width: 60px;
    }
    .w-md-85 {
        width: 85px;
    }
    .w-md-100 {
        width: 100%;
    }
    .h-md-45 {
        height: 45px;
    }
    .h-md-42 {
        height: 42px;
    }
    .lh-md-20{
        line-height: 20px!important;
    }
}

@media only screen and (max-width:576px) {
    .fs-sm-11 {
        font-size: 11px;
    }
    .fs-sm-12 {
        font-size: 12px;
    }
    .fs-sm-14 {
        font-size: 14px;
    }
    .fs-sm-20 {
        font-size: 20px;
    }
    .fs-sm-24 {
        font-size: 24px;
    }
    .w-sm-49 {
        width: 49px;
    }
    .w-sm-50 {
        width: 50px;
    }
    .w-sm-101 {
        width: 101px;
    }
    .w-sm-119 {
        width: 119px;
    }
    .w-sm-197 {
        width: 197px;
    }
    .h-sm-50{
        height: 50px;
    }
    .h-sm-128{
        height: 128px;
    }
    .-right-sm-23{
        right: -23px;
    }
    .-right-sm-24 {
        right: -24px;
    }
    .bottom-sm-80{
        bottom: 80px!important;
    }
    .-top-sm-24 {
        top: -24px;
    }
}

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