@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: 400px;
    height: 82px;
    background: #008BF9;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    z-index: 999;
}

.navigation ul {
    display: flex;
    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;
    margin-top: 13px;
}

.navigation ul li.active a .icon {
    transform: translateY(-42px);
}

.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: #008BF9;
    border: 6px solid white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .5s;
}

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

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

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

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

.navigation ul li:nth-child(3).active~.indicator {
    transform: translateX(calc(-69px * 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-8 {
    border-radius: 8px!important;
}
.rounded-10 {
    border-radius: 10px!important;
}
.rounded-12 {
    border-radius: 12px!important;
}
.rounded-15 {
    border-radius: 15px!important;
}
.rounded-17 {
    border-radius: 17px;
}
.rounded-20 {
    border-radius: 20px;
}
.rounded-25 {
    border-radius: 25px;
}
.rounded-t-25{
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}
/* z index */
.-z-1 {
    z-index: -1;
}

.-z-0 {
    z-index: 0;
}

.z-0 {
    z-index: 1;
}

.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}
/* color */
.text-main {
    color: #008BF9;
}
.text-blue {
    color: #0C356A!important;
}
.text-gray {
    color: #8e95a3;
}
.text-black {
    color: #000000;
}
.text-green{
    color: #69C157;
}
/* 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);
}
/* top */
.-top-2 {
    top: -2px;
}
.-top-5 {
    top: -5px;
}
.-top-8 {
    top: -8px;
}
.-top-11 {
    top: -11px;
}
.top-12 {
    top: 12px;
}
.top-34 {
    top: 34%;
}
.-top-40 {
    top: -40px;
}
.top-118 {
    top: 118px!important;
}
/* bottom */
.bottom-8 {
    bottom: -8px;
}
.-bottom-11{
    bottom: -11px;
}
/* right */
.right-0 {
    right: 0;
}
/* left */
.left-0 {
    left: 0;
}
.-left-6 {
    left: -6px;
}
.left-auto{
    left: auto!important;
}
/* line height */
.lh-24 {
    line-height: 24px;
}
/* background */
.bg-main {
    background-color: #008BF9;
}
.bg-main2{
    background-color: #aedafd;
}
.bg-main3{
    background-color: #96cffd;
}
.bg-blue {
    background: #0C356A;
}
.bg-gray {
    background-color: #ECECEC;
}
.bg-gray2{
    background-color: #fdfdfd;
}
.bg-main-gradient{
    background: linear-gradient(90deg,rgba(18, 147, 250, 0.18) 10%, rgba(224, 236, 244, 0.57) 67%)
}
.bg-main-gradient-after::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 236px;
    inset: 0;
    top: auto;
    background: linear-gradient(180deg, rgba(0, 139, 249, 0) 0%, rgba(64, 123, 255, 1) 52%, rgba(64, 123, 255, 1) 0%, rgba(12, 53, 106, 1) 100%);
}
.bg-main-gradient-after2::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 132px;
    inset: 0;
    top: auto;
    background: linear-gradient(180deg, rgba(0, 139, 249, 0) 0%, rgba(64, 123, 255, 1) 52%, rgba(64, 123, 255, 1) 0%, rgba(12, 53, 106, 1) 100%);
}
.bg-green{
    background-color: #D3FFC9;
}
.bg-pink{
    background-color: pink;
}
.bg-dark2{
    background-color: #0F1113;
}
/* font size */
.fs-4vw {
    font-size: 4vw;
}
.fs-10 {
    font-size: 10px;
}
.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-27 {
    font-size: 27px;
}
.fs-32 {
    font-size: 32px;
}
.fs-36 {
    font-size: 36px;
}
/* margin */
.-mt-183{
    margin-top: -183px;
}
/* max width */
.max-w-357 {
    max-width: 357px;
    width: 100%;
}
.max-w-380 {
    max-width: 380px;
    width: 100%;
}
.max-w-450 {
    max-width: 450px;
    width: 100%;
}
.max-w-653 {
    max-width: 653px;
    width: 100%;
}
.max-w-997 {
    max-width: 997px;
    width: 100%;
}
/* border */
.border-main{
    border: 1px solid #008BF9;
}
.border-r-main-3{
    border-right: 3px solid #008BF9;
}
.border-b-main-3{
    border-bottom: 3px solid #008BF9;
}
.border-green{
    border: 1px solid #4EC34B;
}
.border-main-2{
    border: 2px solid #008BF9;
}
.border-r-main-24{
    border-right: 24px solid #008BF9;
}
/* width */
.w-15 {
    width: 15px;
}
.w-26{
    width: 26px;
}
.w-33{
    width: 33px;
}
.w-36{
    width: 36px;
}
.w-47 {
    width: 47px;
}
.w-55 {
    width: 55px;
}
.w-66 {
    width: 66px;
}
.w-70 {
    width: 70px;
}
.w-82 {
    width: 82%;
}
.w-88 {
    width: 88%;
}
.w-90 {
    width: 90px;
}
.w-91 {
    width: 91px;
}
.w-94 {
    width: 94px;
}
.w-95 {
    width: 95%;
}
.w-104 {
    width: 104px;
}
.w-113 {
    width: 113px;
}
.w-120 {
    width: 120px;
}
.w-123 {
    width: 123px;
}
.w-133 {
    width: 133px;
}
.w-140 {
    width: 140px;
}
.w-153 {
    width: 153px;
}
.w-180 {
    width: 180px;
}
.w-200 {
    width: 200px;
}
.w-217 {
    width: 217px;
}
.w-274 {
    width: 274px;
}
/* height */
.h-26{
    height: 26px;
}
.h-31{
    height: 31px;
}
.h-33{
    height: 33px;
}
.h-36{
    height: 36px;
}
.h-40 {
    height: 40px!important;
}
.h-43 {
    height: 43px!important;
}
.h-45 {
    height: 45px!important;
}
.h-49 {
    height: 49px!important;
}
.h-55 {
    height: 55px!important;
}
.h-60 {
    height: 60px!important;
}
.h-70 {
    height: 70px!important;
}
.h-74 {
    height: 74px!important;
}
.h-81 {
    height: 81%;
}
.h-94 {
    height: 94%;
}
.h-100vh{
    height: 100vh;
}
.h-101 {
    height: 101px;
}
.h-113 {
    height: 113px;
}
.h-117vh{
    height: 117vh;
}
.h-120 {
    height: 120px;
}
.h-130 {
    height: 130px;
}
.h-154 {
    height: 154px;
}
.h-165 {
    height: 165px;
}
.h-175 {
    height: 175px;
}
.h-376 {
    height: 376px;
}
.h-1014 {
    height: 1014px;
}
.h-auto{
    height: auto;
}
/* margin top */
.-mt-4 {
    margin-top: -4px;
}
.-mt-21 {
    margin-top: -21px;
}
.-mt-92 {
    margin-top: -92px;
}
.mt-110 {
    margin-top: 110px;
}
.-mt-492{
    margin-top: -492px;
}
/* margin bottom */
.-mb-33 {
    margin-bottom: -33px;
}
/* transition */
.transition{
    transition: all .4s;
}

/* transform */
.transform1 {
    transform: scale(1.16) translateY(4px) translateX(22px);
}
/* hover */
.hover1:hover{
    box-shadow: 0 0 9.6px #008BF9;
}
/* dropdown */
.dropdown-content{
    max-height: 0;
    transition: all .4s;
    overflow: hidden;
}
.dropdown-content.active{
    max-height: 1000px;
}
/* global styles */
.row{
    margin-left: 0;
    margin-right: 0;
}
.outline-none {
    outline: none;
}
.outline-main:focus{
    border: 2px solid #008BF9!important;
}
.opacity-none {
    opacity: 0;
}
.opacity-30 {
    opacity: 30%;
}
.visible-none {
    visibility: hidden;
}

.resize-none {
    resize: none;
}

.cursor-pointer {
    cursor: pointer;
}
.cursor-default{
    cursor: default;
}
.text-justify {
    text-align: justify;
}

.ltr {
    direction: ltr;
}

.modal {
    backdrop-filter: blur(3px);
}
input[type="number"] {
    -moz-appearance: textfield;
}
/* accordion */
.accordion-btn > div:last-child,.sidebar li,.sidebar li svg rect,.sidebar li svg path{
    transition: all .4s;
}
.accordion-btn.active > div:last-child{
    transform: rotate(180deg);
}
.accordion-content{
    transition: all .4s;
    max-height: 0;
    overflow: hidden;
}
.accordion-content.active{
    max-height: 2000px;
}
/* modal */
.modal-backdrop {
  /* background-color: white; */
}
/* sidebar */
.sidebar li:hover,.sidebar li.active{
    background-color: #008BF9;
}
.sidebar li:hover a,.sidebar li.active a{
    color: white;
}
.sidebar li:hover svg rect,.sidebar li.active svg rect,.sidebar li:hover svg path,.sidebar li.active svg path{
    stroke: white!important;
}
.sidebar li >svg{
    right: -25px;
    opacity: 0;
    transition: all .4s;
}
.sidebar li:hover >svg,.sidebar li.active >svg{
   opacity: 100%;
}
/* header */
header ul li > p,header ul li svg path,.showHover > p,.dropdown-content{
  transition: all .4s;
}
header ul li:hover> a,header ul li:hover > p,.showHover:hover > p{
    color: #008BF9!important;
}
header ul li:hover svg path{
    stroke: #008BF9!important;
}
header .dropdown{
    opacity: 0;
    transition: all .4s;
    top: 95px;
    visibility: hidden;
}
header .showHover:hover .dropdown{
    opacity: 100%;
    top: 118px;
    visibility: visible;
}
/* banner */
#banner{
    background-image: url('../img/Frame.png');
    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;
    }
}

@media only screen and (max-width:992px) {
    
    header img[alt='logo']{
        width: 90px;
    }
    .h-lg-80{
        height: 80px;
    }
    .h-lg-auto{
        height: auto;
    }
    .mt-lg-6{
        margin-top: 6px;
    }
    .sidebar li:hover,.sidebar li.active{
        background-color: transparent;
    }
    .sidebar li a{
       color: #222222;
    }
    .sidebar li:hover a,.sidebar li.active a{
        color: #008BF9;
    }
    .sidebar li svg rect,.sidebar li svg path{
        stroke: #222222!important;
    }
    .sidebar li:hover svg rect,.sidebar li.active svg rect,.sidebar li:hover svg path,.sidebar li.active svg path{
        stroke: #008BF9!important;
    }
    .sidebar li:hover >svg,.sidebar li.active >svg{
        opacity: 0;
     }
    #banner{
        background-image: none;
    }
    .w-lg-101{
        width: 101px!important;
    }
    .fs-lg-12{
        font-size: 12px;
    }
    .fs-lg-16{
        font-size: 16px;
    }
    .fs-lg-20{
        font-size: 20px;
    }
    .top-lg-0{
        top: 0;
    }
    .shadow-lg-none{
        box-shadow: none;
    }
    .border-lg-0{
        border: none!important;
    }
    .border-t-lg-main{
        border-top: 2px solid #008BF912!important;
    }
    .rounded-lg-0 {
        border-radius: 0;
    }
}

@media only screen and (max-width:768px) {
    .text-md-main{
        color: #008BF9!important;
    }
    .stroke-md-main{
        stroke: #008BF9!important;
    }
    .fs-md-7{
        font-size: 7px;
    }
    .fs-md-8{
        font-size: 8px;
    }
    .fs-md-11{
        font-size: 11px;
    }
    .fs-md-12{
        font-size: 12px;
    }
    .h-md-15{
        height: 15px;
    }
    .h-md-24{
        height: 24px;
    }
    .h-md-33{
        height: 33px;
    }
    .h-md-95{
        height: 95px;
    }
    .h-md-230{
        height: 230px;
    }
    .w-md-103{
        width: 103px;
    }
    .w-md-100{
        width: 100%;
    }
    .w-md-33{
        width: 33px;
    }
    .w-md-24{
        width: 24px;
    }
    .w-md-15{
        width: 15px;
    }
    .shadow-md-4 {
        box-shadow: 0px 0px 8px 0px #008BF912;
    }
    .border-md-0{
        border: none!important;
    }
    .border-b-md-0{
        border-bottom: none!important;
    }
    .rounded-md-10{
        border-radius: 10px!important;
    }
    .rounded-md-15{
        border-radius: 15px;
    }
    .border-b-md-sky{
        border-bottom: 2px solid #008BF912!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-16{
        font-size: 16px;
    }
    .fs-sm-20{
        font-size: 20px;
    }
    .max-w-sm-100{
        max-width: 100%;
    }
    .w-sm-100{
        width: 100%;
    }
    .w-sm-93{
        width: 93px;
    }
    .w-sm-43{
        width: 43px;
    }
    .w-sm-24{
        width: 24px;
    }
    .w-sm-21{
        width: 21px;
    }
    .h-sm-136{
        height: 136px;
    }
    .h-sm-93{
        height: 93px;
    }
    .h-sm-42{
        height: 42px!important;
    }
    .h-sm-auto{
        height: auto;
    }
    .-mt-sm-180{
        margin-top: -180px;
    }
    .-mt-sm-213{
        margin-top: -213px;
    }
    .mt-sm-210{
        margin-top: 210px!important;
    }
    .shadow-sm-0{
        box-shadow: none!important;
    }
    .modal-backdrop {
        background-color: black;
      }
      .-left-sm-16{
        left: -16px;
      }
      .bg-main-gradient-after::after {
        height: 144px;
      }
}

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

}