@media(max-width: 1720px) {

}
/*===========================*/

@media(max-width: 1570px) {


}
/*===========================*/
@media(max-width: 1440px) {


}

/*===========================*/

@media(max-width: 1332px) {


}
/*===========================*/
@media(max-width: 1200px) {


}
/*===========================*/
@media(max-width: 980px) {


}

/*===========================*/

@media(max-width: 768px) {
body {
	background: #F7F8F9;
}
   .cen{
       width:100%;
       padding: 0px 16px;
       box-sizing:border-box;
   }
.cataloge {
	display: block;
	padding: 32px 24px;
	border-radius: 16px;


}
.catalogeImg {
	padding-left: 0;
	border-left: none;
	padding-bottom: 32px;
}

.labelX {
	color: #ADADAD;
	position: absolute;
	bottom: auto;
	left: 0;
	transform: rotate(0deg);
	font-size: 1.2em;
	top: 10px;
	width: 100%;
	text-align: center;
}
.catalogTitle {
	font-size: 2em;
	position: absolute;
    bottom: -12px;
	left: 0px;
}
.catalogeCon {
	padding-right: 8px;
	padding-left: 8px;
	border-left: none;
	height: 100%;
}
.intro {
    margin-top: 10%;
}

}



.tooltip-container {
            position: fixed;
            top: 121px;
            /* موقعیت پیش‌فرض برای دسکتاپ (چپ) */
            left: 220px;
            /* موقعیت برای موبایل (راست) - ابتدا مخفی است */
            right: auto;
            z-index: 1000;
        }

        .tooltip {
            visibility: hidden;
            width: 200px;
            background-color: #B20000;
            color: white;
            text-align: center;
            border-radius: 6px;
            padding: 10px;
            position: absolute;
            z-index: 1;
            bottom: 0;
            left: 0;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .tooltip::after {
            content: "";
            position: absolute;
            top: -19%;
            left: 70%;
            margin-left: 11px;
            border-width: 17px;
            border-style: solid;
            border-color: #242324 transparent transparent transparent;
        }

        .tooltip.show {
            visibility: visible;
            opacity: 1;
        }


        @media (max-width: 768px) {
            .tooltip-container {
                left: auto;
                right: 220px;
            }

            .tooltip::after {
                left: 73%;
            }
        }