﻿.slider-item .item.active, body {
    display: flex !important
}
@font-face {
    font-family: 'vazir'; /* نام دلخواه */
    src: url('/fonts/Vazir.woff') format('woff'), /* مسیر به فونت */
    url('/fonts/Vazir.woff2') format('woff2'); /* نسخه پشتیبان */
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: Vazir, sans-serif, Arial;
    direction: rtl;
    overflow-x: hidden !important;
    flex-direction: column;
    min-height: 100vh;
    justify-content: space-between
}

li {
    list-style: none
}

.bg-greenTheme {
    background: #626b32
}

* {
    outline: 0
}

.Tourist_attraction-desc {
    height: 300px
}

.FeaturePlaceIcons {
    color: #7d0000
}

.text-instagram {
    color: #FD1D1D;
}

@media screen and (max-width: 1290px) {
    .Tourist_attraction-desc {
        height: 350px !important
    }
}



@media screen and (max-width: 1242px) {
    .Tourist_attraction-desc {
        height: 360px !important
    }
}

@media screen and (max-width: 1095px) {
    .Tourist_attraction-desc {
        height: 375px !important
    }
}

@media screen and (max-width: 1061px) {
    .Tourist_attraction-desc {
        height: 380px !important
    }
}

@media screen and (max-width: 1015px) {
    .Tourist_attraction-desc {
        height: 380px !important
    }
}


@media screen and (max-width: 992px) {
    .Tourist_attraction-desc {
        height: 310px !important
    }
}

@media screen and (max-width: 849px) {
    .Tourist_attraction-desc {
        height: 315px !important
    }

    .login {
        width: 80% !important
    }
}

@media screen and (max-width: 755px) {
    .Tourist_attraction-desc {
        height: 350px !important
    }
}

@media screen and (max-width: 680px) {
    .Tourist_attraction-desc {
        height: 385px !important
    }
}

@media screen and (max-width: 635px) {
    .Tourist_attraction-desc {
        height: 435px !important
    }
}

@media screen and (max-width: 576px) {
    .Tourist_attraction-desc {
        height: 490px !important
    }
}

@media screen and (max-width: 522px) {
    .Tourist_attraction-desc {
        height: 515px !important
    }
}

.space-x-normal {
    width: 95%;
    margin: 0 auto
}

.direction-ltr {
    direction: ltr
}

.text-yellow {
    color: #f4e409
}

.bg-yellow {
    background-color: #f4e409
}

.text-yellow-2 {
    color: #eeba0b
}

.bg-yellow-2 {
    background-color: #eeba0b
}

.text-orange {
    color: #faa307
}

.bg-orange {
    background-color: #faa307
}

.text-orange-2 {
    color: #f48c06
}

.bg-orange-2 {
    background-color: #f48c06
}

.text-orange-3 {
    color: #e56512
}

.bg-orange-3 {
    background-color: #e56512
}

.bg-red-0 {
    background-color: #6a040f
}

.text-red-0 {
    color: #6a040f
}

.text-shadow {
    text-shadow: -4px -2px 4px rgb(0,0,0.8)
}

.title-box::before {
    content: ""
}

.title-box div {
    font-size: 14px
}

.responsiveMenu {
    right: -260px;
    transition: .4s ease-in-out
}

    .responsiveMenu.active {
        right: 0
    }

@media screen and (min-width: 992px) {
    .hamburger {
        display: none
    }
}

header .navbar .menu > ul {
    display: flex;
    grid-gap: 0 4rem;
    align-items: center;
    width: 80%
}

.slider-item .item .img {
    animation: 1s linear forwards zoom;
    -webkit-animation: 1s linear forwards zoom
}

@keyframes zoom {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1)
    }

    100% {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1)
    }
}

.slider-item .item .caption {
    width: 1200px
}

    .slider-item .item .caption h1 {
        animation: 1s forwards text;
        -webkit-animation: 1s forwards text
    }

    .slider-item .item .caption p {
        animation: 1s .5s forwards text;
        -webkit-animation: 1s forwards text
    }

@keyframes text {
    0% {
        opacity: 0;
        transform: translateX(100px)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes progress {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

@media screen and (max-width: 992px) {
    .hamburger div::after, .hamburger div::before {
        content: '';
        width: 100%;
        height: 100%;
        background: #fff;
        position: absolute
    }

    header .navbar .menu > ul {
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        height: 100vh;
        background: #000;
        z-index: 1000;
        display: none;
        overflow-y: auto
    }

        header .navbar .menu > ul.hide-navbar {
            display: none
        }

        header .navbar .menu > ul.show-navbar {
            display: block
        }

    .hamburger {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer
    }

        .hamburger div {
            width: 90%;
            height: 3px;
            background: #fff;
            position: relative
        }

            .hamburger div::after {
                transform: translateY(-10px);
                -webkit-transform: translateY(-10px);
                -moz-transform: translateY(-10px);
                -ms-transform: translateY(-10px);
                -o-transform: translateY(-10px)
            }

            .hamburger div::before {
                transform: translateY(10px);
                -webkit-transform: translateY(10px);
                -moz-transform: translateY(10px);
                -ms-transform: translateY(10px);
                -o-transform: translateY(10px)
            }

    header .navbar .menu > ul > li {
        margin: 30px 0
    }

        header .navbar .menu > ul > li > a {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative
        }

            header .navbar .menu > ul > li > a:hover {
                color: #000
            }

    header .navbar .menu > ul > .close-icon {
        text-align: center;
        padding: 20px;
        border-bottom: 1px solid #440f0f;
        cursor: pointer;
        display: block
    }

        header .navbar .menu > ul > .close-icon:hover {
            background-color: #242424
        }

        header .navbar .menu > ul > .close-icon svg {
            font-size: 25px;
            color: #fff;
            cursor: pointer
        }

    header .navbar .menu > ul > li > a > svg {
        width: auto;
        font-size: 25px;
        margin-top: 0;
        position: absolute;
        left: 60px
    }
}

@media screen and (max-width: 499px) {
    .Tourist_attraction-desc {
        height: auto !important
    }
}

@media screen and (max-width: 768px) {

    header .navbar .social ul {
        width: 80%
    }

    header .navbar .social button {
        display: none
    }

    .slider-item .item .caption {
        width: 80vw
    }
    .ImgBlog img {
        height: 350px !important;
    }
}

@media screen and (max-width: 400px) {
    header .navbar .menu {
        width: 40%
    }

    header .navbar .social {
        width: 60%
    }

        header .navbar .social ul {
            width: 100%
        }
}

.card {
    transition: .3s
}

    .card:hover {
        transform: translateX(2px) scale(1.01)
    }

.symbol {
    width: 150px;
    height: 170px
}

.listDrop:hover ul {
    visibility: visible;
    transition: .3s ease-in-out
}

.imgSelected {
    width: 90%
}



@media (max-width: 600px) {
    .imgSelected {
        height: 28rem !important;
    }
}

@media (max-width: 470px) {
    .imgSelected {
        height: 26rem !important;
    }
}

.Tourist_attraction-desc p {
    font-size: 14px !important;
    line-height: 1.8 !important;
}


/*blog*/

.ImgBlog img {
    height: 600px;
}

.pagination a:hover {
    color: #4f48e5;
    font-weight: 600;
}

@media screen and (max-width: 1400px) {
    .ImgBlog img {
        height: 450px;
    }
}

@media screen and (max-width: 550px) {
    .ImgBlog img {
        height: 290px !important;
    }
}
