@media screen and (min-width : 310px) {
	.no__price p{
    	font-size: 13px;
	}
	.select__date-select {
		font-size: 0.85rem;
	}
	.room__btn{
		font-size: 0.9rem;
	}
}
@media screen and (min-width : 331px) {
	.room__discount--value{
		padding: 10px;
		font-size: 0.75rem;
		height: 35px;
	}
	.room__info--btns button{
		font-size: 0.9rem;
	}
	.not__valid--price p,.no__price{
		font-size: 13px;
	}
	.select__date-select {
		font-size: 0.95rem;
	}
	.factor__room-text,.factor__room-title,.factor__room-price span,.factor__item-payment span,.factor__item-payment p{
		font-size: 0.9rem;
	}
	.factor__room--night{
		font-size: 0.8rem;
	}
	.factor__room-price p {
    	font-size: 0.6rem;
	}
	.no__price p{
    	font-size: 14px;
	}
	.detail__time,.open__map{
		font-size : 14px;
	}
	.map__detail--title{
		font-size: 1rem;
	}
	.map__detail--icon span{
		font-size: 0.8rem;
	}
}
@media screen and (min-width : 360px) {
	/* .select__date-select {
		font-size: 0.87rem;
	} */
	.factor__room-price p {
    	font-size: 0.7rem;
	}
}
@media screen and (min-width : 388px) {
	/* .select__date-select {
		font-size: 0.94rem;
	} */
	/* .factor__room-text,.factor__room-title,.factor__room-price span,.factor__item-payment span,.factor__item-payment p{
		font-size: 1rem;
	} */
}
@media screen and (min-width : 451px) and (max-width :800px) {
	.panorama__md{
		height: 300px;
	}
	.hotel__tour{
		background-size: auto 173px;
		justify-content: space-evenly;
	}
	.hotel__tour--title,.hotel__tour--click{
		max-width: unset;
	}
}
@media screen and (min-width : 480px) {
    .modal__gallery--images {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
	.modal__free {
		max-width: 450px;
	}
	.modal__free-title {
		font-size: 1.5rem;
	}
	.modal__free-description {
		font-size: 1rem;
	}
	.modal__free-button {
        flex: 1;
	    font-size: 1rem;
	}
	.modal__free-button-container {
		gap: 10px;
		padding: 7px;
		margin-bottom: 15px;
		margin-top: 0;
	}
}
@media screen and (min-width : 600px){
	.facilities__item {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (min-width : 800px){
	.mt-sm{
		margin-top: 0;
	}
	.header-index {
		margin: 0;
		margin-top: 60px;
	}
	.room__title--text{
		width: 100%;
		text-overflow: ellipsis;
		overflow: hidden;
		text-wrap: nowrap;
		white-space: nowrap;
		margin-right: 0;
    	margin-top: 0;
	}
	.room__container{
		max-height: unset !important;
	}
}
@media screen and (min-width : 801px) {
	:root {
		--padding-section-y: 24px;
		--padding-section-z: 8px;
		--padding-content: 16px;
	}
	
    .section {
        padding: var(--padding-section-y) 0;
    }

    .container,
    .navbar__top--fixed .navbar__top--ul {
        width: 90%;
        justify-content: unset;
    }
	
	.holder_banner-top{
		z-index: 8 !important
	}
    .navbar__top--fixed .navbar__top--ul {
		top: 60px;
		padding: 10px 16px;
	}
	.navbar__top--fixed {
		padding-top: 60px;
	}
	

    .modal {
        right: 50%;
        top: 50%;
        transform: translate(-100vw, -50%);
		padding: 0.5rem 1.75rem;
    }

    .modal.active {
        transform: translate(50%, -50%);
    }

    .modal__gallery {
        width: 90%;
        height: 90%;
    }

	.modal__gallery--img-tab {
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: unset;
	}

    .modal__comment {
        width: 50%;
        height: 80%;
    }
	
    .gallery__breadcrumb {
        display: flex;
        flex-direction: column-reverse;
    }

    .gallery-swiper .swiper-wrapper {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 50%);
        gap: 8px;
    }
	.videos__tab .modal__gallery--video-tab {
		direction: ltr;
		grid-template-columns: repeat(2, 1fr);
	}

	.number__slider,.gallery__icons{
		display: none;
	}
    .swiper-slide-1 {
        grid-column: span 2 / span 2;
        grid-row: span 2 / span 2;
    }

    .swiper-slide-2 {
        grid-column-start: 3;
    }

    .swiper-slide-3 {
        grid-column-start: 4;
    }

    .swiper-slide-4 {
        grid-column-start: 3;
        grid-row-start: 2;
    }

    .swiper-slide-5 {
        grid-column-start: 4;
        grid-row-start: 2;
    }

    .gallery-swiper {
        height: auto;
        /* aspect-ratio: 16 / 4.4; */
    }

    .breadcrumb {
        border-bottom: none;
		height: 56px;
    }

    .info__hr {
        position: relative;
    }

    .info__hr::after {
        content: "";
        width: 1px;
        height: 15px;
        background: #B6B6B6;
        top: 50%;
        left: -5px;
        position: absolute;
        transform: translateY(-50%);
    }

	.hotel{
		overflow: inherit;
	}
    .hotel__info {
        padding: 0;
		min-height: 122px;
    }

    .hotel__name--title {
        font-size: 1.5rem;
    }

    .hotel__address--text {
        font-size: 1rem;
    }

    .hotel__map {
        font-size: 1rem;
    }

    .hotel__star--title {
        font-size: 1rem;
		height: 20px;
    }

    .hotel__tour--title {
        font-size: 1rem;
    }

    .hotel__info--name {
        flex-wrap: nowrap;
        gap: 0;
    }

    .hotel__name--img {
        display: none;
    }

    .navbar__top--ul {
        padding: 10px 16px;
        justify-content: unset;
		width: 100%;
		margin-right: 0;
    }

    .navbar__top--ul li {
        font-size: 1rem;
    }

    .hotel__card--des {
        flex-wrap: nowrap;
    }

    .map__detail {
        padding: var(--padding-section-y) 0;
    }
	.map__content{
		height: 364px;
	}

	.map__detail--des + .map__detail--item {
        padding-top: 0;
        border-top: 0;
	}
    .map__detail--items {
        flex-wrap: nowrap;
    }

    .detail__content--parent.white__fade::after {
        content: unset;
    }

    .detail__content--parent .toggle__other {
        display: none;
    }

    .detail__content {
        max-height: 335px;
        overflow: auto;
        scrollbar-width: thin;
        scrollbar-color: #ccccccb0 transparent;
		padding-left: 6px;
    }

    .detail__content::-webkit-scrollbar {
        width: 3px;
        background: unset;
    }

    .detail__content::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: #ccccccb0;
    }

    .map__detail--des {
        position: sticky;
        top: 0;
        background: var(--white);
		z-index: 2;
        padding-bottom: 15px;
		border-bottom: 1px solid var(--gray);
    }

    .panorama__md {
        display: none;
    }

    .panorama__de {
        display: flex;
		min-height: 633px;
    }

	/* .facilities{
		gap: 35px;
	} */

    .facilities__items {
        flex: 1;
    }

    .facilities__item {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .comments__parent {
        display: flex;
        gap: 15px;
        flex-direction: row;
    }

    .comment__items {
        flex-basis: 70%;
    }

    .commnts__send {
        flex-basis: 30%;
    }

    .commnts__send--btn {
        transition: all var(--time-fast);
    }

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

	.gallery-swiper .plyr__controls{
		bottom: 0;
	}
	.control__video{
		opacity: 0;
		visibility: hidden;
	}

    .gallery__hover {
		position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .gallery__hover::after {
        content: "نمایش تصاویر بیشتر";
        background-color: rgba(0, 0, 0, 0.5);
        color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        transform: translateY(-100%);
        transition: all .3s;
    }

    .gallery__hover:hover:after {
        transform: translateY(0);
    }

    .gallery__hover:last-child::after {
        content: "";
        background-color: transparent;
    }


    .gallery__active--content {
        font-weight : unset;
		font-size: 1.1rem;
    }

    .gallery__active--content span {
        font-weight: bold;
        font-size: 1.3rem;
    }

    .gallery__category-item {
        cursor: pointer;
    }

    .comment__item-multy {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

	.room__item{
		width: 340px;
		padding: 8px;
	}

	.room__items--slider{
		padding-left: 1px;
	}

	.room__items--slider .swiper-wrapper{
		flex-direction: unset;
		gap: unset;
	}
	.room__items--slider .swiper-button-next, .room__items--slider .swiper-button-prev{
		/* display: flex; */
		background-color: #dceaff;
		width: 35px;
		height: 35px;
		border-radius: 50%;
		color: var(--text-blue);
		transition: all var(--time-fast) ease;
		transform: translateY(-50%);
		margin-top: -20px;
	}
	.room__items--slider .swiper-button-next:after,.room__items--slider .swiper-button-prev:after{
		font-size: 16px;
		font-weight: bold;
	}
	.room__items--slider .swiper-button-disabled{
		opacity: 0;
		visibility: hidden;
	}
	.room__items--slider .swiper-button-prev{
		right: var(--swiper-navigation-sides-offset, 2px);
	}
	.room__items--slider .swiper-button-next{
		left: var(--swiper-navigation-sides-offset, 2px);
	}
	.room__items--slider .swiper-button-prev::before,.room__items--slider .swiper-button-next::before{
        content: "";
        position: absolute;
        width: 35px;
        height: 280px;
        top: -110px;
        z-index: 1;
        overflow: hidden;    
	}
	.room__items--slider .swiper-button-prev::before{
		right: -3px;
		background: linear-gradient(271deg, white, transparent);
	}
	.room__items--slider .swiper-button-next::before{
		left: -3px;			
		background: linear-gradient(90deg, white, transparent);
	}
	.select__date-parent {
		/* width: 600px; */
	}
	.room__detail--items{
		top: 105px;
	}
	.select__date-item {
		/* width: 310px; */
		/* padding: 10px 20px; */
	}
	.select__date-des{
		font-size: 0.90rem;
	}
	.select__date-select{
		font-size: 1rem;
	}
	.call__modal{
		align-items: center;
	}
	.parent__auth{
        width: 30% !important;
		max-width: 450px;
    	border-radius: var(--border-radius-card);
    }
	.help__icon{
		border: 5px solid #fff;
	}
	/* Start Factor */
	.factor{
		width: 650px;
	}
	.factor__item{
		display: flex;
        justify-content: space-between;
	}
	.factor__item-detail{
		flex-basis: 80%;
	}
	.factor__room-name{
		text-align: right;
        justify-content: start;
	}
	/* .factor__room-detail, .factor__item--gift .factor__room-detail{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    } */
	/* .factor__order-1 {
		order: 1;
	}
	.factor__order-2 {
		order: 2;
	}
	.factor__order-3 {
		order: 3;
	}
	.factor__order-4 {
		order: 4;
	}
	.factor__order-5 {
		order: 5;
	}
	.factor__order-6 {
		order: 6;
	} */

	.factor__figt-img {
		width: 22px;
		height: 100%;
		position: absolute;
		top: 0;
		right: 10px;
		justify-content: center;
		align-items: center;
		display: flex;
	}
	.factor__figt-img::before {
		content: "";
		width: 25px;
		height: 25px;
		position: absolute;
		top: unset;
		transform: rotate(90deg);
		background-repeat: no-repeat;
		background-position: center;
		z-index: 2;
		right: unset;
		display: flex;
	}
	.factor__figt-img::after {
		position: absolute;
		content: "";
		height: calc(100%);
		background-color: #C50000;
		width: 4px;
		top: unset;
		left: unset;
		transform: unset;
		z-index: 1;
	}

	/* End Factor */
	.instagram{
		/* margin-top: 120px !important; */
	}
	.loader__panorama{
		display: none;
	}
	.modal__free-overlay{
		align-items: center;
	}
	.other__blog .swiper-button-prev,.other__blog .swiper-button-next{
		visibility: visible;
	}
	.other__blog-img img {
		max-height: 300px;
		min-height: 300px;
	}
	/* Start Filter */
	.filter__room--parent{
		position: relative;
		opacity: 1;
		visibility: visible;
		height: auto;
		background-color: unset;
		z-index: 0;
		align-items: center;
        gap: 15px;
		min-height: 36px;
	}
	.filter__room{
		background-color: unset;
		padding: 0;
		flex-direction: row;
		border-radius: unset;
	}
	.filter__group{
		flex-direction: row;
		align-items: center;
		position: relative;
	}
	.filter__group::after{
        content: "";
        position: absolute;
        height: 72%;
        width: 2px;
        background-color: #DDDDDD;
        left: -12px;
        border-radius: 15px;
	}
	.filter__group:last-child::after{
		content: unset;
	}
	.filter__group--buttons{
		display: flex;
		align-items: center;
	}
	.filter__btn{
		background-color: #F8F8F8;
		font-size: 12px;
		border-radius: 50px;
		border-color: transparent;
		cursor: pointer;
		padding: 8px 12px;
		color: #000;
	}
	.filter__draggable--icon{
		display: none;
	}
	.room__items--title{
		width: max-content;
		z-index: 0;
	}
	.filter__group--title{
		display: none;
	}
	.filter__room--desc{
		display: flex;
		text-wrap: nowrap;
        white-space: nowrap;
		font-size: 14px;
		color: #000;
	}
	.filter__room--btn{
		display: none;
	}
	.modal__free {
		border-radius: var(--border-radius-card);
	}
}
@media screen and (min-width : 1024px) {
    .overflow__desktop--hidden {
        overflow: hidden;
    }

    .hotel__info--tour {
        flex-wrap: nowrap;
		flex-direction: initial;
    }

    .navbar__top {
        margin-top: -33px;
    }

    .hotel__card {
        display: flex;
        flex-direction: column;
        flex: 1 1 500px;
        flex-basis: 35%;
        padding: 20px;
        gap: 16px;
        position: sticky;
        top: 105px;
		border-radius: var(--border-radius-card);
		border: 1px solid var(--gray);
		margin-top: 7px;
    }

    .hotel__card--item {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .card__item--text {
        font-weight: 500;
    }

    .card__item--des {}

    .card__item--text,
    .card__item--des {
        font-size: 1rem;
        color: var(--gray-dark-color);
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .card__item--des.copy {
		cursor: pointer;
	}
    .hotel__card--item a.card__item--des {
		color: var(--priymary-color);
	}

    .card__item--titel {
        color: var(--gray-dark-color);
        font-weight: bold;
    }

    .hotel__card--btn {
        padding: 12px;
        outline: none;
        font-weight: 500;
        cursor: pointer;
        color: var(--text-blue);
        background-color: transparent;
        transition: background-color var(--time-fast);
		border-radius: var(--border-radius-btn);
		border: 1px solid var(--priymary-color);
    }
	.hotel__card--btn-first{
		margin-top: 16px;
	}
	.hotel__card--btn:hover{
		/* background-color: #1d59db; */
	}
	.hotel__tour{
		margin-right : 0;
		background-position: right;
		background-size: 40% auto;
		width: unset;
	}
	.hotel__tour--title{
		max-width: 220px;
	}
	.hotel__tour--click {
		max-width: 220px;
	}
}