html, body {
    margin: 0;
    padding: 0;
    direction: rtl;
    text-align: right;
    font-family: IRANSans;
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    src: url('../../fonts/IRANSans/woff/IRANSansWeb(FaNum).woff') format('woff');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 900;
    src: url('../../fonts/IRANSans/woff/IRANSansWeb(FaNum)_Black.woff') format('woff');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    src: url('../../fonts/IRANSans/woff/IRANSansWeb(FaNum)_Bold.woff') format('woff');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 300;
    src: url('../../fonts/IRANSans/woff/IRANSansWeb(FaNum)_Light.woff') format('woff');
}

a {
    transition: 0.3s all ease-in-out;
    -webkit-transition: 0.3s all ease-in-out;
}

.navbar-nav .dropdown-menu {
    border-top: 2px solid #dfa700;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    outline: none;
    margin-top: 4px;
    font-size: 14px;
}

/*---------slick all---------*/
.slider {
    width: 100%;
    margin: auto;
}

.slick-slide {
    margin: 0px;
}

.slick-prev:before,
.slick-next:before {
    color: white !important;
}


.slick-slide {
    transition: all ease-in-out .3s;
    opacity: 1;
    height: unset !important;
}

.slick-prev {
    left: 25px !important;
    z-index: 2;
}

.slick-next {
    right: 25px !important;
    z-index: 2;
}


.headerme {
    background: linear-gradient(0deg, #71bcadcc, #71bc94cc),url(../../images/index/bgheader.webp);
    background-size: cover;
    background-position: bottom center;
    padding-bottom: 1rem;
}

.topbar {
    justify-content: space-between;
}

.lang {
    color: #ffbe18;
    margin: 1.5rem 0 0 0;
    padding: 0;
}

    .lang li {
        display: inline-block;
        color: #ffbe18;
    }

    .lang a {
        color: #fff;
        font-size: 14px;
        padding: 0 0.3rem;
    }

        .lang a:hover {
            color: #FFC107;
            text-decoration: none;
        }


@media (max-width: 991px) {
    .buyinmob {
        display: block !important;
    }

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


@media (max-width: 768px) {
    .topbar {
        justify-content: center;
    }


    .menume {
        border-radius: 10px !important;
        margin: 0 !important
    }

    .tabsarea {
        -ms-flex-direction: row !important;
        flex-direction: row !important;
        justify-content: center;
    }

        .tabsarea .nav-link {
            margin: 2px;
            border-radius: 3px !important;
            padding: 0.3rem !important;
        }
}

.menume {
    background: #ffffff;
    box-shadow: 0px 1px 2px #00000024;
    border-radius: 100px;
    padding: 0.25rem 1.5rem;
    width: 100%;
    text-align: right;
}

    .menume .nav-item {
        padding: 0 5px;
    }

    .menume .nav-link {
        color: black !important;
        font-size: 15px;
    }

        .menume .nav-link:hover {
            color: #ffa700 !important;
        }

    .menume .dropdown-item {
        text-align: right;
    }

    .menume .active a {
        color: orange !important;
    }

.maintitle {
    text-align: center;
    color: #fff;
    font-weight: 900;
    margin: 1rem 0;
    text-shadow: 0 2px #00000066;
}

.tabsarea {
    -ms-flex-direction: column;
    flex-direction: column;
}

    .tabsarea .nav-link {
        color: #000;
        background: #ffffff99;
        position: relative;
        margin-bottom: 2px;
        border-radius: 0 8px 8px 0;
        padding: 0.85rem 1rem;
    }

        .tabsarea .nav-link:hover {
            background: #fff;
        }

        .tabsarea .nav-link.active {
            color: #000;
            background: #ffd46c;
        }

@media (min-width: 992px) {
    .tabsarea .nav-link::before {
        content: '';
        display: block;
        border-top: 15px solid transparent;
        border-right: 17px solid #ffd46c;
        border-bottom: 15px solid transparent;
        position: absolute;
        top: 50%;
        left: -17px;
        transform: translateY(-50%);
        opacity: 0;
    }
}

.tabsarea .nav-link.active::before {
    opacity: 1;
    z-index: 3;
}

#v-pills-tabContent {
    background: #ffffffd9;
    height: 100%;
    min-height: 200px;
    border-radius: 8px 0 0 8px;
    box-shadow: 5px 0px 15px #00000029;
}


.arrowleft {
    box-sizing: border-box;
    position: relative;
    display: block;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    width: 60%;
    height: 9px;
}

    .arrowleft:after {
        content: "";
        display: block;
        box-sizing: border-box;
        position: absolute;
        width: 13px;
        height: 13px;
        border-bottom: 4px solid;
        border-left: 4px solid;
        transform: rotate(45deg);
        left: -2px;
        bottom: -4px;
    }

.orangarrow {
    box-shadow: inset 0 0 0 5px #ffb607;
}

    .orangarrow:after {
        border-color: #ffb607;
    }

.purplearrow {
    box-shadow: inset 0 0 0 5px #9b64cc;
}

    .purplearrow:after {
        border-color: #9b64cc;
    }

    .purplearrow:before {
        content: '';
        position: absolute;
        border: 1px dashed #9b64cc;
        height: 55px;
        bottom: 0;
    }

.greenarrow {
    box-shadow: inset 0 0 0 5px #8dc63f;
}

    .greenarrow:after {
        border-color: #8dc63f;
    }

    .greenarrow:before {
        content: '';
        position: absolute;
        border: 1px dashed #8dc63f;
        height: 110px;
        bottom: 0;
    }

.redarrow {
    box-shadow: inset 0 0 0 5px #f02629;
    width: 75% !important;
}

    .redarrow:after {
        border-color: #f02629;
    }

    .redarrow:before {
        content: '';
        position: absolute;
        border: 1px dashed #f02629;
        height: 165px;
        bottom: 0;
    }

.masir-h1 {
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    font-weight: 900;
}

.masir {
    margin-bottom: 1.25rem;
}

    .masir a {
        display: block;
        margin-bottom: 0.25rem;
        margin-inline-start: 0.5rem;
        color: #000;
        font-weight: 300;
        font-size: .9rem;
    }

        .masir a:hover {
            text-decoration: none;
            color: #9C27B0;
            font-weight: 900;
        }

.masir2 {
    margin-inline-start: 5rem;
}

.masir3 {
    margin-inline-start: 15rem;
}

.masir4 {
    margin-inline-start: 25rem;
}

@media (max-width: 991px) {
    .masir2 {
        margin-inline-start: 2rem;
    }

    .masir3 {
        margin-inline-start: 6.5rem;
    }

    .masir4 {
        margin-inline-start: 11rem;
    }
}

@media (max-width: 768px) {
    .masir2 {
        margin-inline-start: 1rem;
    }

    .masir3 {
        margin-inline-start: 2.5rem;
    }

    .masir4 {
        margin-inline-start: 4rem;
    }
}

.databaseArea {
    text-align: center;
    background: url(../../images/index/databasebg.webp);
    background-size: cover;
    background-position: top left;
}

    .databaseArea h2 {
        font-size: 1.9rem;
        font-weight: 900;
        background: #f2fbf6;
        padding: 1.5rem 0;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 50% 100%, 0% 60%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 50% 100%, 0% 60%);
    }

    .databaseArea h3 {
        margin: 3rem 0;
        font-weight: bold;
        position: relative;
    }


    .databaseArea h4 span {
        color: #ff5722;
        font-weight: 900;
        display: inline-block;
        margin-top: 1rem;
    }

    .databaseArea p {
        line-height: 2;
        font-weight: 300;
    }

.otherdatabase {
    text-align: center;
    background: #f4fafd;
    padding: 2rem 0;
}

    .otherdatabase h2 {
        font-size: 1.9rem;
        font-weight: 900;
        background: #f2fbf6;
        padding: 1.5rem 0;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 50% 100%, 0% 60%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 50% 100%, 0% 60%);
    }

    .otherdatabase h3 {
        margin: 3rem 0;
        font-weight: bold;
        position: relative;
    }

        .otherdatabase h3:after {
            content: '';
            border-bottom: 2px solid #ffc107;
            position: absolute;
            left: 0;
            right: 0;
            bottom: -10px;
            width: 100px;
            margin: auto;
        }

    .otherdatabase h4 span {
        color: #ff5722;
        font-weight: 900;
        display: inline-block;
        margin-top: 1rem;
    }

    .otherdatabase p {
        line-height: 1.2;
        font-weight: 300;
    }

.btn-green {
    background: #d3f9e5;
    color: #36896b;
    border-radius: 8px;
    margin: 0.25rem;
}

.btn-org {
    background: #fff3d6;
    color: #ff7f01;
    border-radius: 8px;
    margin: 0.25rem;
}

.btn-blue {
    background: #d5f6ff;
    color: #1693d3;
    border-radius: 8px;
    margin: 0.25rem;
}

    .btn-green:hover,
    .btn-org:hover,
    .btn-blue:hover {
        box-shadow: 0 5px 15px #00000038;
    }

.datacard {
    display: block;
    background: #fff;
    box-shadow: 0px 2px 20px #3f51b533;
    border-radius: 30px 0 30px 30px;
    padding: 1rem 0 0 0;
    color: #000;
}

    .datacard img {
        height: 80px;
    }

    .datacard h4 {
        font-size: 1rem;
        font-weight: bold;
        margin: 1rem 0;
    }

    .datacard:hover {
        box-shadow: 5px 20px 20px #9dbdbc;
        text-decoration: none;
    }

    .datacard .datacarditems {
        background: #57b5b1;
        color: #fff;
        padding: 1rem 0.25rem;
        border-radius: 0 20px 30px 30px;
        font-size: 14px;
    }

.apiArea {
    background: url('../../images/index/apibg.webp');
    background-size: cover;
    background-position: center center;
    padding: 5rem 0;
    position: relative;
}

    .apiArea .apicontent {
        margin: auto;
        text-align: center;
        color: #fff;
    }

        .apiArea .apicontent h4 {
            font-weight: 900;
            margin-bottom: 1rem;
        }

        .apiArea .apicontent p {
            line-height: 2;
            font-weight: 300;
        }

        .apiArea .apicontent .btn-api {
            background: #fff6f2;
            color: #ff4e00;
            box-shadow: 0 3px 15px #0000001a;
            border-radius: 8px;
            margin: 0.25rem;
        }

            .apiArea .apicontent .btn-api:hover {
                box-shadow: 0 5px 15px #00000038;
            }

    .apiArea .imgapi {
        position: absolute;
        transform: translatey(0px);
        -webkit-animation: floating 4s ease-in-out infinite;
        animation: floating 4s ease-in-out infinite;
    }

    .apiArea .imgapivect {
        position: absolute;
        left: 0;
        top: 90px;
        opacity: .5;
        transform: translatey(0px);
        -webkit-animation: floating 6s ease-in-out infinite;
        animation: floating 6s ease-in-out infinite;
    }


@-webkit-keyframes floating {
    0% {
        transform: translatey(0px);
    }

    50% {
        transform: translatey(-20px);
    }

    100% {
        transform: translatey(0px);
    }
}

@keyframes floating {
    0% {
        transform: translatey(0px);
    }

    50% {
        transform: translatey(-20px);
    }

    100% {
        transform: translatey(0px);
    }
}

@media (max-width: 768px) {

    .apiArea {
        text-align: center;
    }

        .apiArea .imgapi {
            position: relative;
            animation: none;
            margin-bottom: 2rem;
        }

        .apiArea .imgapivect {
            display: none;
            animation: none;
        }

    .belquran-img {
        margin-top: 4rem;
    }
}

.softproduct {
    background: #ebfff7;
}

    .softproduct h2 {
        position: relative;
        font-size: 1.75rem;
        font-weight: bold;
        text-align: center;
        background: #fff;
        padding: 1.5rem 0;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 50% 100%, 0% 60%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 50% 100%, 0% 60%);
    }

        .softproduct h2:after {
            content: '';
            border-bottom: 2px solid #ffc107;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 10px;
            width: 100px;
            margin: auto;
        }

.belquran-content {
    text-align: center;
    margin: auto 0;
}

    .belquran-content h3 {
        font-weight: 900;
        margin: 1.5rem 0;
    }

    .belquran-content p {
        line-height: 2;
        font-weight: 300;
    }

.btn-belquran {
    background: #ffc107;
    color: #000;
    box-shadow: 0 3px 15px #0000001a;
    border-radius: 8px;
    margin: 0.25rem;
}

    .btn-belquran:hover {
        box-shadow: 0 5px 15px #00000038;
    }

.belquran-img {
    position: relative;
    text-align: left;
}

.belquranmobile {
    position: absolute;
    left: 60%;
    bottom: 35px;
    filter: drop-shadow(0px 0px 40px #00000040);
    transform: translatey(0px);
    -webkit-animation: floating 3.5s ease-in-out infinite;
    animation: floating 3.5s ease-in-out infinite;
}

.appshow {
    text-align: center;
    margin-bottom: 2rem;
}

    .appshow h3 {
        font-weight: 900;
    }

    .appshow p {
        line-height: 2;
        font-weight: 300;
    }

.basarArea {
    background: #f7ffeb;
    text-align: center;
    padding-bottom: 2rem;
}

    .basarArea h3 {
        margin-bottom: 3rem;
        padding-top: 3rem;
        font-weight: bold;
        position: relative;
    }

        .basarArea h3:after {
            content: '';
            border-bottom: 2px solid #ffc107;
            position: absolute;
            left: 0;
            right: 0;
            bottom: -10px;
            width: 100px;
            margin: auto;
        }

.basar-content {
    text-align: center;
    margin: auto 0;
}

    .basar-content h4 {
        font-weight: bold;
        margin: 1.5rem 0;
    }

    .basar-content p {
        line-height: 2;
        font-weight: 300;
    }

.basar-img {
    position: relative;
}

    .basar-img .float1 {
        position: absolute;
        right: 0;
        bottom: 175px;
        width: 100px;
        background: #fff;
        border-radius: 30px;
        box-shadow: 0 1px 20px #00000033;
        padding: 0.75rem;
        color: #1e913e;
        font-weight: 300;
        transform: translatey(0px);
        -webkit-animation: floating 6s ease-in-out infinite;
        animation: floating 6s ease-in-out infinite;
    }

    .basar-img .float2 {
        position: absolute;
        right: 20px;
        bottom: 40px;
        width: 120px;
        background: #fff;
        border-radius: 30px;
        box-shadow: 0 1px 20px #00000033;
        padding: 0.5rem;
        color: #000;
        font-weight: 300;
        transform: translatey(0px);
        -webkit-animation: floating 7s ease-in-out infinite;
        animation: floating 7s ease-in-out infinite;
    }


/*-------sl7--------*/
.sl7main {
    background: #133c3a;
    padding: 1rem 0 4rem;
}

    .sl7main .sectiontitle-dark {
        margin-bottom: 2rem;
        padding-top: 3rem;
        font-weight: bold;
        position: relative;
        color: #fff;
        text-align: center;
    }

        .sl7main .sectiontitle-dark:after {
            content: '';
            border-bottom: 2px solid #ffc107;
            position: absolute;
            left: 0;
            right: 0;
            bottom: -10px;
            width: 100px;
            margin: auto;
        }

    .sl7main hr {
        border-color: #364254 !important;
    }

    .sl7main .news {
        padding: 0;
    }

        .sl7main .news a:hover {
            text-decoration: none;
        }

.btnsl7 {
    text-align: center;
}

@media(max-width:768px) {
    .btnsl7 {
        text-align: center;
    }
}

.btnsl7 a {
    color: #fff;
    background: linear-gradient( 198deg, #ffc107, #ff980042);
    border-radius: 7px;
    font-size: 0.85rem;
    box-shadow: -1px 1px 2px black;
}

    .btnsl7 a:hover {
        color: #fff;
        background: linear-gradient( 198deg, #009688, #0096884a);
    }

.sl7 .slick-slide {
    text-align: center;
    padding: 1rem 0 0;
}

.news-item img {
    border-radius: 11px;
    width: auto;
    margin: auto;
    border: 2px solid #d1d1d1;
}

.news-item h4 {
    line-height: 1.75;
    font-size: 0.9rem !important;
    color: #fff;
    margin: 1rem;
    font-weight: 300;
}

.sl7 .slick-prev:before, .sl7 .slick-next:before {
    color: #ea9915 !important;
}

.first-footer {
    background: linear-gradient(0deg, #1d7246d9, #1d7246d9),url(../../images/index//bgheader.webp);
    background-size: cover;
    background-position: bottom center;
    padding: 2rem 0;
    border-top: 2px dotted #a0cbb1;
}

.footerlinks a {
    display: block;
    margin: 1rem;
    color: white;
}

    .footerlinks a:hover {
        color: #FFC107;
        text-decoration: none;
    }

.foot-p {
    text-align: center;
    font-size: 14px;
    width: 100%;
    color: white;
    margin: 2rem 0 0;
}

    .foot-p a {
        color: #FFC107;
    }