#preloader {
	 position: fixed;
	 left: 0;
	 top: 0;
	 z-index: 999999;
	 width: 100vw;
	 height: 100vh;
	 background: #000;
	 user-select: none;
	 pointer-events: none;
	 animation: fadeOut 1.5s 3s forwards;
}
 #preloader .preloader-logo {
	 position: absolute;
	 left: 50%;
	 top: 50%;
	 transform: translate(-50%, -50%);
	 width: 70px;
	 height: 70px;
	 position: relative;
	 opacity: 0;
	 animation: fadeIn 1s 0.5s ease forwards;
}
 #preloader .preloader-logo:before {
	 content: '';
	 position: absolute;
	 z-index: -1;
	 right: 0;
	 top: 0;
	 display: block;
	 width: 100%;
	 height: 100%;
	 background: url(../img/logo-opera.png) center /contain no-repeat;
	 opacity: 0.2;
}
 #preloader .preloader-logo-img {
	 position: absolute;
	 z-index: 1;
	 left: 0;
	 bottom: 0;
	 width: 100%;
	 height: 0;
	 animation: slideLogo 2s 1.5s ease forwards;
	 overflow: hidden;
}
 #preloader .preloader-logo-img:after {
	 content: '';
	 position: absolute;
	 z-index: 1;
	 left: 0;
	 bottom: 0;
	 display: block;
	 background: url(../img/logo-opera.png) center /contain no-repeat;
	 background-size: 100%;
	 width: 70px;
	 height: 70px;
}
 @keyframes slideLogo {
	 0% {
		 height: 0;
	}
	 100% {
		 height: 100%;
	}
}
 @keyframes fadeIn {
	 0% {
		 opacity: 0;
		 visibility: hidden;
	}
	 100% {
		 opacity: 1;
		 visibility: visible;
	}
}
 @keyframes fadeOut {
	 0% {
		 opacity: 1;
		 visibility: visible;
	}
	 100% {
		 opacity: 0;
		 visibility: hidden;
	}
}
 
#preloader .preloader-logo{
	width: 200px;
	height: 200px;
}
#preloader .preloader-logo:before, #preloader .preloader-logo-img:after {
	width: 200px;
	height: 200px;
background: url(https://atop.alecso.org/img/logo-opera.png) center/contain no-repeat;            
}
/***************/

        :root {
            --primary-gradient: linear-gradient(135deg, #1a5f7a 0%, #0d3b5c 100%);
            --secondary-gradient: linear-gradient(135deg, #c56cf0 0%, #7d5fff 100%);
            --gold-gradient: linear-gradient(135deg, #ff9f43 0%, #ffaf40 100%);
            --dark-gradient: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
            --success-gradient: linear-gradient(135deg, #7bbbac 0%, #27937a 100%);
            --warning-gradient: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
            --danger-gradient: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
            
            --primary-color: #b53056;
            --secondary-color: #d77797;
            --secondary-color2: #b25f7b;
            --accent-color: #ff9f43;
            --text-dark: #2c3e50;
            --text-light: #1d1d1d;
            --light-bg: #f8f9fa;
            --border-color: #e9ecef;
            --shadow-light: rgba(0, 0, 0, 0.05);
            --shadow-medium: rgba(0, 0, 0, 0.1);
            --shadow-heavy: rgba(0, 0, 0, 0.2);
            --border-radius: 16px;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            
            /* ألوان جديدة للتصميم ثلاثي الأبعاد */
            --depth-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
            --depth-2: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12);
            --depth-3: 0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.1);
            --depth-4: 0 15px 25px rgba(0,0,0,0.15), 0 5px 10px rgba(0,0,0,0.05);
            --depth-5: 0 20px 40px rgba(0,0,0,0.2);
            --depth-3d: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

		html, body {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
		}

        body {
            font-family: 'Cairo', sans-serif;
            background-color: #f3f3f3;
            color: var(--text-dark);
            line-height: 1.6;
            overflow-x: hidden;
            /*perspective: 1000px;*/
			/*background-image: url(../img/bg.jpg);
			background-size: contain;*/
        }
		.header__menu ul li .dropdown li a {
			font-family: 'Cairo', sans-serif;
        }
		.header__menu ul li .dropdown li a:hover {
			color: #d4af37 !important;
        }
		h1, h2, h3, h4, h5, h6 {
			font-family: 'Cairo', sans-serif;
        }
		
		
        /* ========== تحسينات القائمة العلوية ثلاثية الأبعاد ========== */
        .main-header {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			background: rgb(0 0 0 / 21%);
			backdrop-filter: blur(2px);
			-webkit-backdrop-filter: blur(2px);
			border-bottom: 1px solid rgb(91 91 91 / 20%);
			z-index: 1000;
			transform-style: preserve-3d;
			box-shadow: var(--depth-3);
			transition: var(--transition);
		}

        .main-header.scrolled {
            background: rgba(255, 255, 255, 0.98);
            box-shadow: var(--depth-4);
        }

        .nav-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 80px;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 1rem;
            transform: translateZ(20px);
        }

        .logo-img {
            height: 70px;
            width: auto;
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
            transition: var(--transition);
        }

        .logo:hover .logo-img {
            transform: scale(1.05) rotate(-5deg) translateZ(10px);
        }

        .logo-text {
            font-family: 'Cairo', 'Amiri', serif;
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--primary-color);
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }

        .nav-menu {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            list-style: none;
            margin: 0;
            padding: 0;
                margin-left: 14%;
        }

        .nav-item {
            position: relative;
            transform-style: preserve-3d;
        }

        .header__menu ul li a.nav-link, .nav-link {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.8rem 1.5rem;
            color: #ffffff;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;
            border-radius: 12px;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            transform: translateZ(0);
            border: 2px solid transparent;
			font-family: 'Cairo', sans-serif;
        }

        .nav-link::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: var(--primary-gradient);
            opacity: 0;
            transition: var(--transition);
            transform: translateY(100%) translateZ(-1px);
            z-index: -1;
        }

        .nav-link:hover {
            color: white;
            transform: translateY(-2px) translateZ(10px);
            box-shadow: var(--depth-3);
            border-color: var(--primary-color);
        }

        .nav-link:hover::before {
            opacity: 1;
            transform: translateY(0) translateZ(-1px);
        }

        .nav-link.active {
            /*background: var(--primary-gradient);*/
            color: white;
            /*transform: translateY(-2px) translateZ(10px);
            box-shadow: var(--depth-3);*/
        }

        .nav-icon {
            font-size: 1.1rem;
            transition: var(--transition);
        }

        .nav-link:hover .nav-icon {
            transform: scale(1.2) translateZ(5px);
        }

        .nav-badge {
            position: absolute;
            top: -5px;
            left: -5px;
            background: var(--gold-gradient);
            color: white;
            font-size: 0.7rem;
            padding: 0.2rem 0.5rem;
            border-radius: 10px;
            font-weight: 700;
            box-shadow: var(--depth-2);
            transform: translateZ(15px);
        }

        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            color: var(--primary-color);
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0.5rem;
            border-radius: 8px;
            transition: var(--transition);
            transform: translateZ(0);
        }

        .mobile-menu-btn:hover {
            background: var(--primary-color);
            color: white;
            transform: scale(1.1) translateZ(5px);
        }
		
        /* تحسينات الهيدر مع خلفية فيديو */
        .hero-header {
            position: relative;
            color: #000;
            text-align: center;
            padding: 2rem 2rem;
            overflow: hidden;
            transform-style: preserve-3d;
            min-height: 80vh;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: auto; /* تعويض للقائمة الثابتة */
			    margin-top: 0;
        }
        /* باقي الستايلات تبقى كما هي */
        .video-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -2;
        }

        .video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                135deg,
                rgba(26, 95, 122, 0.85) 0%,
                rgba(13, 59, 92, 0.9) 20%,
                rgba(44, 62, 80, 0.8) 30%
            );
            z-index: -1;
        }

        .hero-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);
            transform: translateZ(20px);
            pointer-events: none;
            z-index: 0;
        }

        .hero-content {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
            transform: translateZ(30px);
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
        }

        .hero-title {
            font-family: 'Cairo', serif;
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 700;
            margin-bottom: 1.5rem;
            line-height: 1.2;
            animation: fadeInUp 1s ease-out;
			line-height: 1.6;
        }

        .hero-subtitle {
            font-size: clamp(1rem, 2vw, 1.3rem);
            opacity: 0.95;
            margin-bottom: 2.5rem;
            font-weight: 300;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.6;
            animation: fadeInUp 1s ease-out 0.2s both;
        }

        .hero-cta {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
            animation: fadeInUp 1s ease-out 0.4s both;
        }

        .cta-btn {
            padding: 1rem 2rem;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transform: translateZ(0);
            box-shadow: var(--depth-3);
        }

        .cta-primary {
            background: var(--gold-gradient);
            color: white;
        }

        .cta-secondary {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.3);
        }

        .cta-btn:hover {
            transform: translateY(-3px) translateZ(5px);
            box-shadow: var(--depth-5);
        }

        .cta-primary:hover {
            background: linear-gradient(135deg, #ffaf40 0%, #ff9f43 100%);
        }

        .cta-secondary:hover {
            background: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.5);
        }

        .scroll-indicator {
            position: absolute;
            bottom: 0.2rem;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            font-size: 2rem;
            animation: bounce 2s infinite;
            cursor: pointer;
            z-index: 2;
        }
.gold-button {
    color: #fff !important;
    /*background-image: linear-gradient(180deg, #f6e27a 20%, #cb9b51 80%);*/
	background-image: linear-gradient(180deg, #f6e27a 20%, #e7c520 80%);
    font-weight: bold;
    padding: 12px 20px;
    border-radius: 8px;
    margin: 5px;
    border-width: 0;
    display: inline-flex;
    align-items: center;
  
    /*box-shadow: 0 4px 12px 0 #ffcd57;*/
    transition: all 0.5s ease;

  justify-content: center;
  text-align: center;
  text-decoration: none;
  
    position: relative;
    overflow: hidden;
  
  flex: 1;
  max-width: 200px;
    width: 200px;
	direction:rtl;
	border-radius: 20px 0;
	font-family: 'Cairo', serif;
    font-size: 1.1rem;
	cursor:pointer;
}
.gold-button:hover {
	box-shadow: 0 4px 12px 0 #ffcd57;
	color: #fff !important;
}
.gold-button i{
	margin-left:5px;
}

/* Shine */

.shine-button {
  position: relative;
  overflow: hidden;
}

.shine-button:after {
	content:'';
  top:0;
	transform:translateX(100%);
	width:100%;
	height:220px;
	position: absolute;
	z-index:1;
	animation: slide 6s infinite;

  /* 
  CSS Gradient - complete browser support from http://www.colorzilla.com/gradient-editor/ 
  */
  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(128,186,232,0) 99%, rgba(125,185,232,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.8)), color-stop(99%,rgba(128,186,232,0)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* IE10+ */
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */
}

/* shine animation */

@keyframes slide {
	0% {transform:translateX(-100%);}
	100% {transform:translateX(100%);}
}

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px) translateZ(0);
            }
            to {
                opacity: 1;
                transform: translateY(0) translateZ(30px);
            }
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateX(-50%) translateY(0);
            }
            40% {
                transform: translateX(-50%) translateY(-10px);
            }
            60% {
                transform: translateX(-50%) translateY(-5px);
            }
        }

        /* تحسينات للعرض على الجوال */
        @media (max-width: 768px) {
            .main-header {
                padding: 0 1rem;
            }

            .nav-container {
                padding: 0 1rem;
                height: 70px;
            }

            .logo-text {
                display: none;
            }

            .nav-menu {
                position: fixed;
                top: 70px;
                right: -100%;
                width: 80%;
                height: calc(100vh - 70px);
                background: rgba(255, 255, 255, 0.98);
                backdrop-filter: blur(20px);
                flex-direction: column;
                align-items: stretch;
                padding: 2rem;
                transition: var(--transition);
                box-shadow: var(--depth-4);
                border-left: 1px solid rgba(255, 255, 255, 0.2);
            }

            .nav-menu.active {
                right: 0;
            }

            .nav-item {
                width: 100%;
            }

            .nav-link {
                justify-content: flex-start;
                padding: 1rem 1.5rem;
                border-radius: 12px;
                margin-bottom: 0.5rem;
                border: 2px solid transparent;
            }

            .mobile-menu-btn {
                display: block;
            }

            .hero-header {
                margin-top: 70px;
                min-height: 70vh;
                padding: 1rem;
				    margin-top: 0;
            }

            .hero-title {
                font-size: 2rem;
            }

            .hero-subtitle {
                font-size: 1rem;
            }

            .hero-cta {
                flex-direction: column;
                align-items: center;
            }

            .cta-btn {
                width: 100%;
                max-width: 300px;
                justify-content: center;
            }
        }

        /* تحسينات للشاشات المتوسطة */
        @media (max-width: 1024px) and (min-width: 769px) {
            .nav-link {
                padding: 0.7rem 1.2rem;
                font-size: 0.9rem;
            }

            .logo-text {
                font-size: 1.2rem;
            }
        }

        /* تأثيرات خاصة للقائمة */
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 50%;
            width: 0;
            height: 2px;
            background: var(--gold-gradient);
            transition: var(--transition);
            transform: translateX(50%) translateZ(5px);
        }

        .nav-link:hover::after {
            width: 80%;
        }
        
        .cta-secondary:hover {
            background: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.5);
        }

        .scroll-indicator {
            position: absolute;
            bottom: 0.2rem;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            font-size: 2rem;
            animation: bounce 2s infinite;
            cursor: pointer;
            z-index: 2;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px) translateZ(0);
            }
            to {
                opacity: 1;
                transform: translateY(0) translateZ(30px);
            }
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateX(-50%) translateY(0);
            }
            40% {
                transform: translateX(-50%) translateY(-10px);
            }
            60% {
                transform: translateX(-50%) translateY(-5px);
            }
        }

        /* تحسينات بطاقات الإحصائيات بتأثير ثلاثي الأبعاد */
        .stats-container {
            max-width: 1200px;
            margin: 1rem auto 4rem;
            padding: 0 2rem;
            position: relative;
            z-index: 3;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 1.5rem;
        }
		.item_details {
			direction: rtl;
			text-align: right;
        }

        .stat-card {
            background: white;
            padding: 2rem;
            border-radius: var(--border-radius);
            box-shadow: var(--depth-3);
            text-align: center;
            position: relative;
            overflow: hidden;
            transition: var(--transition);
            border-left: 5px solid var(--primary-color);
            transform-style: preserve-3d;
            transform: translateZ(0);
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(26, 95, 122, 0.05) 0%, rgba(13, 59, 92, 0.1) 100%);
            opacity: 0;
            transition: var(--transition);
            transform: translateZ(-1px);
        }

        .stat-card:hover {
            transform: translateY(-5px) translateZ(10px);
            box-shadow: var(--depth-5);
        }

        .stat-card:hover::before {
            opacity: 1;
        }

        .stat-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: var(--primary-color);
            transform: translateZ(20px);
            display: inline-block;
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: 900;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
            transform: translateZ(15px);
            display: grid;
        }

        .stat-label {
            font-size: 1.1rem;
            color: var(--text-light);
            font-weight: 600;
            transform: translateZ(10px);
            display: inline-block;
        }

        /* تحسينات البحث والتصفية بتأثير ثلاثي الأبعاد */
        .filters-section {
            background: white;
            margin-bottom: 3rem;
            border-radius: var(--border-radius);
            box-shadow: var(--depth-3);
            overflow: hidden;
            transform-style: preserve-3d;
        }

        .filters-header {
            background: var(--primary-gradient);
            color: white;
            padding: 1.5rem 2rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            position: relative;
            overflow: hidden;
        }

        .filters-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);
            transform: translateZ(10px);
            pointer-events: none;
        }

        .filters-title {
            font-size: 1.3rem;
            font-weight: 600;
            transform: translateZ(15px);
        }

        .filters-content {
            padding: 2rem;
        }

        .search-form {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr auto;
            gap: 1.5rem;
            align-items: end;
        }

        @media (max-width: 768px) {
            .search-form {
                grid-template-columns: 1fr;
            }
        }

        .form-group {
            position: relative;
            transform-style: preserve-3d;
        }

        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 600;
            color: var(--text-dark);
            font-size: 0.95rem;
            transform: translateZ(5px);
        }

        .form-control {
            width: 100%;
            padding: 12px 16px;
			height: calc(2.5em + .75rem + 2px);
            border: 1px solid #ccc;
            border-radius: 12px;
            font-size: 1rem;
            font-family: inherit;
            background: #fafbfc;
            transition: var(--transition);
            transform: translateZ(0);
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            background: white;
            box-shadow: 0 0 0 3px rgba(26, 95, 122, 0.1), var(--depth-2);
            transform: translateZ(5px);
        }

        .search-btn {
            background: var(--primary-gradient);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            white-space: nowrap;
            transform: translateZ(0);
            box-shadow: var(--depth-2);
        }

        .search-btn:hover {
            transform: translateY(-2px) translateZ(5px);
            box-shadow: var(--depth-4);
        }

        /* تحسينات بطاقات مسارح  بتأثير ثلاثي الأبعاد محسن */
        .theaters-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }

        .theater-card {
            background: transparent;
            border-radius: var(--border-radius);
            overflow: hidden;
            /*box-shadow: var(--depth-3);*/
            transition: var(--transition);
            position: relative;
            transform-style: preserve-3d;
            transform: translateZ(0);
            cursor: pointer;
            text-decoration: none;
            color: inherit;
            display: block;
        }

        .theater-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(26, 95, 122, 0.03) 0%, rgba(13, 59, 92, 0.05) 100%);
            opacity: 0;
            transition: var(--transition);
            transform: translateZ(-1px);
            z-index: 1;
            pointer-events: none;
        }

        .theater-card:hover {
            transform: translateY(-8px) translateZ(10px);
            box-shadow: var(--depth-5);
            text-decoration: none;
            color: inherit;
        }

        .theater-card:hover::before {
            opacity: 1;
        }

        .theater-image {
            width: 100%;
            height: 220px;
            background: var(--primary-gradient);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 3rem;
            position: relative;
            overflow: hidden;
            transform-style: preserve-3d;
        }

        .theater-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);
            transform: translateZ(10px);
            pointer-events: none;
        }

        .theater-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
            transform: translateZ(0);
        }

        .theater-card:hover .theater-image img {
            transform: scale(1.05) translateZ(5px);
        }

        .theater-content {
            padding: 1.5rem;
            position: relative;
            z-index: 2;
            transform: translateZ(0);
        }

        .theater-title {
            font-family: 'Cairo', 'Amiri', serif;
            font-size: 1.4rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--text-dark);
            line-height: 1.3;
            transform: translateZ(5px);
        }

        .theater-subtitle {
            color: var(--text-light);
            font-style: italic;
            margin-bottom: 1rem;
            font-size: 0.95rem;
            transform: translateZ(5px);
        }

        .theater-meta {
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
            margin-bottom: 1.5rem;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            font-size: 0.9rem;
            color: var(--text-light);
            transform: translateZ(5px);
        }

        .meta-icon {
            width: 18px;
            color: var(--primary-color);
            text-align: center;
        }

        .theater-description {
            font-size: 0.95rem;
            color: var(--text-light);
            line-height: 1.6;
            margin-bottom: 1.5rem;
            transform: translateZ(5px);
        }

        .read-more-btn {
            background: none;
            border: none;
            color: var(--primary-color);
            cursor: pointer;
            font-weight: 600;
            font-size: 0.9rem;
            transition: var(--transition);
            transform: translateZ(5px);
        }

        .read-more-btn:hover {
            color: var(--secondary-color);
            transform: translateX(5px) translateZ(5px);
        }

        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 1rem;
            transform: translateZ(10px);
            box-shadow: var(--depth-1);
			
			position: absolute;
			right: 5px;
			bottom: 0;
        }

        .status-active { background: #e8f6ef; color: #27ae60; border: 1px solid #2ecc71; }
        .status-inactive { background: #fdedec; color: #e74c3c; border: 1px solid #e74c3c; }
        .status-closed { background: #f4f6f6; color: #566573; border: 1px solid #566573; }
        .status-unknown { background: #fef9e7; color: #f39c12; border: 1px solid #f39c12; }

        .theater-links {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .theater-link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 1rem 1rem;
            background: #f8fafc;
            color: var(--primary-color);
            text-decoration: none;
            border-radius: 8px;
            font-size: 0.9rem;
            font-weight: 500;
            transition: var(--transition);
            border: 1px solid var(--border-color);
            transform: translateZ(0);
            box-shadow: var(--depth-1);
        }
		/*
        .theater-link:hover {
            background: var(--primary-color);
            color: white;
            text-decoration: none;
        }*/

        /* تحسينات التصميم العام */
        .main-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem 4rem;
        }

        .results-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .results-count {
            font-size: 1.1rem;
            color: var(--text-light);
            transform: translateZ(5px);
        }

        .results-count strong {
            color: var(--primary-color);
        }

        .no-results {
            text-align: center;
            padding: 4rem 2rem;
            color: var(--text-light);
            transform-style: preserve-3d;
        }

        .no-results-icon {
            font-size: 4rem;
            margin-bottom: 1rem;
            opacity: 0.5;
            transform: translateZ(10px);
            display: inline-block;
        }

        .no-results h3 {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            color: var(--text-dark);
            transform: translateZ(5px);
        }

        .pagination-wrapper {
            display: flex;
            justify-content: center;
            margin: 3rem 0;
        }

        .pagination {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }

        .pagination-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border: 2px solid var(--border-color);
            background: white;
            color: var(--text-light);
            text-decoration: none;
            border-radius: 12px;
            font-weight: 600;
            transition: var(--transition);
            transform: translateZ(0);
            box-shadow: var(--depth-1);
        }

        .pagination-btn:hover {
            border-color: var(--primary-color);
            color: var(--primary-color);
            background: #f8fafc;
            transform: translateY(-2px) translateZ(5px);
            box-shadow: var(--depth-3);
        }

        .pagination-btn.active {
            background: var(--primary-gradient);
            color: white;
            border-color: transparent;
            transform: translateY(-3px) translateZ(5px);
            box-shadow: var(--depth-3);
        }

        .main-footer {
            background: var(--dark-gradient);
            color: white;
            text-align: center;
            padding: 3rem 2rem;
            margin-top: 4rem;
            position: relative;
            overflow: hidden;
        }

        .main-footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 50%);
            transform: translateZ(10px);
            pointer-events: none;
        }

        .footer-content {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
            transform: translateZ(10px);
        }

        .scroll-to-top {
            position: fixed;
            bottom: 2rem;
            left: 2rem;
            width: 50px;
            height: 50px;
            background: var(--secondary-color);
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            box-shadow: var(--depth-4);
            transition: var(--transition);
            z-index: 1000;
            transform: translateZ(0);
        }

        .scroll-to-top:hover {
            transform: translateY(-3px) translateZ(5px);
            box-shadow: var(--depth-5);
        }

        .scroll-to-top.show {
            display: flex;
        }

        .map-container {
            height: 600px;
            border-radius: var(--border-radius);
            overflow: hidden;
            margin-bottom: 2rem;
            display: none;
            box-shadow: var(--depth-3);
            position: relative;
        }

        #interactiveMap {
            height: 100%;
            width: 100%;
            border-radius: var(--border-radius);
        }

        .map-controls {
            position: absolute;
            top: 1rem;
            right: 1rem;
            z-index: 1000;
            background: white;
            padding: 1rem;
            border-radius: 12px;
            box-shadow: var(--depth-3);
            min-width: 200px;
        }

        .map-legend {
            position: absolute;
            bottom: 1rem;
            left: 1rem;
            z-index: 1000;
            background: white;
            padding: 1rem;
            border-radius: 12px;
            box-shadow: var(--depth-3);
            max-width: 100%;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .legend-color {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid white;
            box-shadow: var(--depth-1);
        }

        .map-cluster {
            background: var(--primary-color);
            color: white;
            border-radius: 50%;
            text-align: center;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--depth-3);
        }

        /* تحسينات للعرض على الجوال */
        @media (max-width: 768px) {
            .map-container {
                height: 400px;
            }
            
            .map-controls {
                position: relative;
                top: auto;
                right: auto;
                margin-bottom: 1rem;
            }
            
            .map-legend {
                position: relative;
                bottom: auto;
                left: auto;
                margin-top: 1rem;
            }
        }

        /* تحسينات للعرض على الجوال */
        @media (max-width: 768px) {
            .hero-header {
                padding: 3rem 1rem;
            }

            .stats-container {
                padding: 0 1rem;
            }

            .main-container {
                padding: 0 1rem 2rem;
            }

            .theaters-grid {
                grid-template-columns: 1fr;
            }

            .results-header {
                flex-direction: column;
                text-align: center;
            }

            .view-toggle {
                /*flex-direction: column;*/
            }
        }

        /* تحسينات إضافية */
        .view-toggle {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 2rem;
			max-width: 450px;
        }

        .view-btn {
            padding: 0.7rem 1.2rem;
            background: #f8f9fa;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 600;
            transform: translateZ(0);
            box-shadow: var(--depth-1);
        }

        .view-btn.active {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
            transform: translateZ(5px);
            box-shadow: var(--depth-2);
        }

        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid transparent;
            border-top: 2px solid currentColor;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* تحسينات التصميم للعناوين */
        .section-title {
            font-family: 'Cairo', 'Amiri', serif;
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 2rem;
            color: var(--text-dark);
            position: relative;
            padding-bottom: 0.5rem;
            transform: translateZ(5px);
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100px;
            height: 4px;
            background: var(--primary-gradient);
            border-radius: 2px;
            transform: translateZ(5px);
        }
        .section-title-light::after {
            opacity: 0;
        }
		.section-title h2.section-title-header {
			color: var(--primary-color);
		}
		.section-title h2.section-title-header:after {
			position: absolute;
			right: 100px;
			top: 55px;
			height: 2px;
			width: 775px;
			background: rgba(225, 225, 225, 0.3);
			content: "";
			z-index: -1;
		}
        /* تحسينات للعرض على الجوال */
        @media (max-width: 768px) {
            .hero-header {
                min-height: 60vh;
                padding: 1rem;
            }

            .hero-title {
                font-size: 2rem;
            }

            .hero-subtitle {
                font-size: 1rem;
            }

            .hero-cta {
                flex-direction: column;
                align-items: center;
            }

            .cta-btn {
                width: 100%;
                max-width: 300px;
                justify-content: center;
            }

        }

         /* تحسينات للشاشات المتوسطة */
        @media (max-width: 1024px) and (min-width: 769px) {
            .nav-link {
                padding: 0.7rem 1.2rem;
                font-size: 0.9rem;
            }

            .logo-text {
                font-size: 1.2rem;
            }
        }

       

        /* تحسينات لوحة المعلومات الموسعة */
        .info-panel {
            background: white;
            border-radius: var(--border-radius);
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: var(--depth-3);
            transform-style: preserve-3d;
            transform: translateZ(0);
			margin-top: 15px
        }

        .info-panel:hover {
            transform: translateY(-5px) translateZ(5px);
            box-shadow: var(--depth-4);
        }

        .info-panel-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--primary-color);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transform: translateZ(5px);
        }

        .info-panel-content {
            line-height: 2;
            color: var(--text-light);
            transform: translateZ(5px);
        }

        /* تحسينات للروابط */
        .external-link {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
            transform: translateZ(0);
        }

        .external-link:hover {
            color: var(--secondary-color);
            transform: translateX(3px) translateZ(5px);
        }

        .external-link::after {
            content: "↗";
            font-size: 0.9em;
        }

        /* تأثيرات ثلاثية الأبعاد إضافية */
        .floating {
            animation: floating 3s ease-in-out infinite;
        }

        @keyframes floating {
            0% { transform: translateY(0) translateZ(0); }
            50% { transform: translateY(-10px) translateZ(5px); }
            100% { transform: translateY(0) translateZ(0); }
        }

        .tilt-effect {
            transition: transform 0.3s ease;
        }

        .tilt-effect:hover {
            transform: rotateY(5deg) rotateX(5deg) translateZ(10px);
        }

        /* تأثيرات الظل المحسنة */
        .deep-shadow {
            box-shadow: 
                0 10px 20px rgba(0,0,0,0.19), 
                0 6px 6px rgba(0,0,0,0.23),
                0 0 0 1px rgba(0,0,0,0.1);
        }

        .floating-card {
            transform: translateZ(0);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .floating-card:hover {
            transform: translateY(-10px) translateZ(10px);
            box-shadow: 
                0 20px 40px rgba(0,0,0,0.2),
                0 0 0 1px rgba(0,0,0,0.1);
        }

        /* تحسينات البطاقات القابلة للنقر */
        .theater-card-link {
            display: contents;
            transition: var(--transition);
            transform-style: preserve-3d;
            text-decoration: none;
            color: inherit;
        }

        .theater-card-link:hover {
            transform: translateY(-5px) translateZ(10px);
            text-decoration: none;
            color: inherit;
        }

        /* منع تأثير الميل عند التواجد داخل رابط */
        .theater-card-link .theater-card {
            cursor: pointer;
        }

        .theater-card-link .theater-card:hover {
            transform: translateY(-8px) translateZ(10px);
            box-shadow: var(--depth-5);
        }

        .theater-card-link .theater-card:hover::before {
            opacity: 1;
        }

        /* إصلاح الروابط داخل البطاقات */
        .theater-links a {
            position: relative;
            z-index: 10;
        }
          .video-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
            opacity: 50%;
        }

        .video-background {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0.7);
        }

        .video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0);
        }

        .content {
            position: relative;
            z-index: 1;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 2rem;
        }

        .content h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        .content p {
            font-size: 1.2rem;
            max-width: 600px;
            line-height: 1.6;
        }

        /* تحسينات للأجهزة المحمولة */
        @media (max-width: 768px) {
            .content h1 {
                font-size: 2rem;
            }
            
            .content p {
                font-size: 1rem;
            }
            /*
            .video-background {
                display: none;
            }*/
            
            .video-container {
                background: url('../img/fallback-image.jpg') center/cover;
            }
        }
		
/****************/

	.logocenter {
            display: flex;
            align-items: center;
            gap: 1rem;
            transform: translateZ(20px);
                margin: auto;
                padding-top: 10%;
    padding-bottom: 5%;
    width: 20%;
        }
	.theater-content {
		padding: 1.5rem 0 0;
		background: #fff;
	}
	.theater-title {
		color: #c3154f;/*#004c8d;*/
		padding: 0 1.5rem;
	}
	.theater-subtitle {
		padding: 0 1.5rem;
	}
.theater-meta {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    margin-bottom: 0;
    flex-wrap: wrap;
    padding: 0 5px;
    background-color: #f6f6f6f5;/*e4f5ff;*/
}
.meta-item {
    display: flex;
    flex-direction: column; /* Organisation verticale */
    align-items: center;
    text-align: center;
    gap: 0.3rem;
    font-size: 0.9rem;
    color: var(--text-light);
    transform: translateZ(5px);
    min-width: 100px; /* Largeur minimale pour chaque item */
}
.meta-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: normal;
}
.meta-value {
    font-size: 1rem;
    font-weight: bold;
    color: var(--text-color); /* Couleur plus foncée pour la valeur */
	max-width: 120px;
}

.btn1 {
	width: 50%;
	border-radius: 0 0 15px 0;
	margin: 0;
	color: #b53056 !important;
	border: 1px solid #fff;
}
.btn2 {
	width: 50%;
	border-radius: 0 0  0 15px;
	margin: 0;
	background: #b53056;
	border: 1px solid #b53056;
    color: #fff !important;
}

	.theater-links {
		    gap: 0;
	}
/*
.theater-link {
    background: #144d64;
    color: white;
}
.theater-link:hover {
    background: #ecf8ff;
    color: var(--primary-color);
}*/
/**********************/

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Cairo', sans-serif;
            line-height: 1.6;
            color: #333;
            background: #f8f9fa;
            overflow-x: hidden;
        }
		p {
			font-family: 'Cairo', sans-serif;
			direction:rtl;
			text-align: justify;
		}
		
		h1, h2, h3, h4, h5, h6 {
			font-family: 'Cairo', sans-serif;
        }
		body.init {
            background: #000000;
		}
		section {
            background: #f8f9fa;
		}
		.header__menu ul li {
			margin-right: 0;
			margin-left: 0;
		}
		.header {
			background: rgb(0 0 0 / 50%);
		}
		.header__menu {
			padding: 10px 0 10px;
		}
		.header__logo {
			padding: 5px 0 5px;
		}
        .hero-header {
            position: relative;
            height: 100vh;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
		
		.hero-header-min {
			position: relative;
			height: 55vh;
			min-height: 55vh;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.hero-header-min .hero-content {
			padding-top: 80px;
		}
        .video-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
            transition: opacity 1.5s ease-in-out;
        }

        .video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgb(0 0 0 / 30%);
            z-index: 2;
            transition: opacity 1.5s ease-in-out;
        }

        .hero-content {
            position: relative;
            z-index: 3;
            text-align: center;
            color: white;
            padding: 0 20px;
            max-width: 1200px;
            transition: opacity 1.5s ease-in-out;
        }

        .hero-title {
            font-size: 3rem;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        .hero-subtitle {
            font-size: 1.3rem;
            margin-bottom: 2rem;
            opacity: 0.9;
			font-family: 'Cairo', serif;
			font-weight: bold;
			text-align: center;
        }

        .hero-cta {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .cta-primary {
            background: #1a5f7a;
            color: white;
        }

        .cta-primary:hover {
            background: #144a60;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .cta-secondary {
            background: transparent;
            color: white;
            border: 2px solid white;
        }

        .cta-secondary:hover {
            background: white;
            color: #1a5f7a;
            transform: translateY(-3px);
        }

        .scroll-indicator {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3;
            color: white;
            font-size: 2rem;
            cursor: pointer;
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateX(-50%) translateY(0);
            }
            40% {
                transform: translateX(-50%) translateY(-10px);
            }
            60% {
                transform: translateX(-50%) translateY(-5px);
            }
        }

        /* Styles pour le slider d'images */
        .image-slider {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
			background: #000;
        }
		.hero-content, .header {
            opacity: 0;
		}

        .image-slider.active, .hero-content.active, .header.active {
            opacity: 1;
        }

        .slider-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 150%; /* Largeur augmentée pour permettre le défilement */
			max-width: unset;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
            transform: translateX(0);
			
        }

        .slider-image.active {
            opacity: 1;
            animation: panImage 8s ease-in-out forwards; /* Durée augmentée à 8 secondes */
        }

        /* Animation de défilement panoramique LENTE */
        @keyframes panImage {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-15%); /* Déplacement réduit pour un effet plus subtil */
            }
        }

        /* Styles pour la section de contenu */
        .content-section {
            padding: 80px 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .section-title {
            text-align: center;
            margin-bottom: 40px;
            color: var(--primary-color);
            font-size: 2.5rem;
        }

        .cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
        }

        .card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .card:hover, .event__slider .owl-item.active:nth-child(1) .card {
            transform: translateY(-10px);
        }

        .card-img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .card-content {
            padding: 20px;
        }

        .card-title {
            margin-bottom: 10px;
            color: #1a5f7a;
        }

        @media (max-width: 768px) {
            .hero-title {
                font-size: 2rem;
            }
            
            .hero-cta {
                flex-direction: column;
                align-items: center;
            }
            
            .cta-btn {
                width: 100%;
                max-width: 300px;
                justify-content: center;
            }
            
            /* Ajustement pour mobile */
            .slider-image {
                width: 180%; /* Largeur réduite sur mobile */
            }
            
            @keyframes panImage {
                0% {
                    transform: translateX(0);
                }
                100% {
                    transform: translateX(-30%); /* Déplacement réduit sur mobile */
                }
            }
        }
		@media only screen and (min-width: 1200px) {
			.header .container {
				max-width: unset;
			}
		}
		.gold_text  {
			color: rgb(218,165,32); /*if no support for background-clip*/
			/*background: -webkit-linear-gradient(transparent, transparent), -webkit-linear-gradient(top, rgba(218, 165, 32, 1) 0%, rgba(213, 173, 109, 1) 26%, rgba(226, 186, 120, 1) 35%, rgb(194 154 90) 45%, rgba(212, 175, 55, 1) 61%, rgba(213, 173, 109, 1) 100%);*/
			background: -webkit-linear-gradient(transparent, transparent), -webkit-linear-gradient(top, rgb(248 211 25) 0%, rgba(213, 173, 109, 1) 26%, rgb(255 246 172) 35%, rgb(246 236 41) 45%, rgb(236 206 20) 61%, rgb(255 226 49) 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.with-shadow {
		  text-shadow: 0px 0px 20px rgba(212,175,55,.5);
		}
		.hero-img {
			height: 200px;
			animation: floatPulse 3s ease-in-out infinite;
		}
		@keyframes floatPulse {
			0%, 100% {
				transform: translateY(0) scale(1);
			}
			33% {
				transform: translateY(-10px) scale(1.02);
			}
			66% {
				transform: translateY(5px) scale(1);
			}
		}
		.header__menu ul li .dropdown {
			position: absolute;
			left: 0;
			top: 60px;
			width: 200px;
			background: #111111b8;
			text-align: right;
		}
		.header__menu ul li:hover .dropdown {
			top: 52px;
			opacity: 1;
			visibility: visible;
		}
		
		.header__menu ul li a.hover-underline {
		  
		  color: #ffffff;
		  position: relative;
		  display: inline-block;
		  text-decoration: none;
		  font-family: 'Cairo', sans-serif;
		  font-weight: 600;
			font-size: 0.95rem;
			padding: 0.7rem 1.1rem;
			transition: all 0.3s ease;
		}
		.header__menu ul li a.hover-underline i{
			margin-left: 5px;
		}

		.header__menu ul li a.hover-underline::after,
		.header__menu ul li a.hover-underline::before {
		  content: '';
		  position: absolute;
		  width: 100%;
		  height: 2px;
		  background: linear-gradient(to right, #a47a2c, #ffedb5);
		  bottom: -5px;
		  left: 0;
		  transform: scaleX(0);
		  transform-origin: right;
		  transition: transform 0.4s ease-out;
		}
		.header__menu ul li a.hover-underline::after {
			background: linear-gradient(to right, #ffedb5, #a47a2c);
		}

		.header__menu ul li a.hover-underline::before {
		  top: -5px;
		  transform-origin: left;
		}

		.header__menu ul li a.hover-underline:hover::after,
		.header__menu ul li a.hover-underline:hover::before {
		  transform: scaleX(1);
		}
		.header__menu ul li a.hover-underline:hover {
			color: #d1aa4a;
			font-size: 1rem;
			    font-weight: bold;
		}
		.header__menu ul li a.hover-underline.active {
			color: #d1aa4a;
			font-size: 1rem;
			    font-weight: bold;
		}
		.header__menu ul li .dropdown li a.active {
			color: rgb(212, 175, 55) !important;
			    font-weight: bold;
		}
		/*
		@font-face {
  font-family: "Bustan-Bold";
  src: url("fonts/bustan-bold.eot"); /* IE9 Compat Modes */
  src: url("fonts/bustan-bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/bustan-bold.otf") format("opentype"), /* Open Type Font */
    url("fonts/bustan-bold.svg") format("svg"), /* Legacy iOS */
    url("fonts/bustan-bold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/bustan-bold.woff") format("woff"), /* Modern Browsers */
    url("fonts/bustan-bold.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}*/
		.section-title h2{
			font-family: 'Cairo', "Bustan-Bold", serif !important;
			font-size: 60px;
		}
		.event .section-title:after {
			top: 50px;
		}
	.event_card	{
		margin: 30px 0;
	}
.grayscale_list_item {
    border-radius: 10px;
    overflow: hidden
}

.grayscale_list_img {
    width: 100%;
    filter: grayscale(100%);
    transition: .7s ease-in-out
}

.grayscale_list_item:hover .grayscale_list_img {
    transition: .7s ease-in-out;
    filter: grayscale(0%)
}

.grayscale_title {
    background: #000;
    position: absolute;
    top: auto;
    bottom: -55px;
    left: 0;
    right: 0;
    text-align: center;
    transition: .7s ease-in-out
}

.grayscale_list_item:focus .grayscale_title,.grayscale_list_item:hover .grayscale_title,.grayscale_list_item:target .grayscale_title {
    transition: .7s ease-in-out;
    bottom: 0;
    background-color: rgba(0,0,0,.5)
}

.grayscale_list_item .remove_grayscale {
    filter: grayscale(0%)!important
}
/*******************/
/*
.card__like {
	width: 30px !important;
    height: 30px !important;
    border-radius: 50%;
    float: left;
    border: 2px solid #3e3e3ea3;
	box-shadow: 0px 13px 10px -7px rgba(0, 0, 0, 0.1);
}
*/
.card__like {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50%;
    float: left;
    border: 2px solid #ffffff9e;
    box-shadow: 
        0px 13px 10px -7px rgba(0, 0, 0, 0.1),
        inset 0px 5px 10px rgba(255, 255, 255, 0.5),
        inset 0px -5px 10px rgba(0, 0, 0, 0.3),
        0px 0px 15px rgba(0, 0, 0, 0.2);
    background: radial-gradient(
        circle at 30% 30%,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.2) 40%,
        rgba(0, 0, 0, 0.1) 100%
    );
    transform: perspective(500px) rotateX(10deg);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
	margin-left: 10px;
}

/* Effet au survol pour renforcer l'impression 3D */
.card__like:hover {
    transform: perspective(500px) rotateX(10deg) scale(1.05);
    box-shadow: 
        0px 15px 15px -7px rgba(0, 0, 0, 0.2),
        inset 0px 5px 15px rgba(255, 255, 255, 0.6),
        inset 0px -5px 15px rgba(0, 0, 0, 0.4),
        0px 0px 20px rgba(0, 0, 0, 0.3);
}

/* Pour s'assurer que l'image du drapeau prenne bien la forme */
.card__like img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

.card__clock {
    width: 15px;
    vertical-align: middle;
    fill: #ffffff;
}

.card__time {
    font-size: 14px;
    color: #ffffff;
    vertical-align: middle;
    margin-left: 0px;
}

.card__clock-info {
    float: right;
    top: 128px;
    position: relative;
    right: -54px;
}

.card__clock-info .time {
    position: absolute;
    top: 66px;
    right: 323px;
    background-color: #d777cd;
    color: #fff;
    padding: 0.6em 0.8em;
    width: 90px;
    white-space: nowrap;
}
.card__clock-info .date {
    position: absolute;
    top: 0;
    left: -103px;
    background-color: #d77797;
    color: #fff;
    padding: 0.8em;
}
.card__clock-info .date span {
  display: block;
  text-align: center;
}
.card__clock-info .date .day {
  font-weight: 700;
  font-size: 24px;
  text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.18);
}
.card__clock-info .date .month {
  text-transform: uppercase;
}
.card__clock-info .date .month,
.card__clock-info .date .year {
  font-size: 12px;
}
.card__img {
    visibility: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 235px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.card__info-hover {
    position: absolute;
    padding: 16px 0;
    width: 100%;
    opacity: 1;
    top: 0;
    z-index: 3;
}

.card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    transition: background 0.4s ease;
    z-index: 1;
    border-radius: 12px;
}

.card__img--hover {
    transition: 0.2s all ease-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    position: absolute;
    height: 235px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    top: 0;
    z-index: 0;
}

.card {
    margin-left: 25px;
    transition: all .4s cubic-bezier(0.175, 0.885, 0, 1);
    background-color: #fff;
    width: 100%;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 13px 10px -7px rgba(0, 0, 0, 0.1);
}

.card:hover, , .event__slider .owl-item.active:nth-child(1) .card {
    box-shadow: 0px 30px 18px -8px rgba(0, 0, 0, 0.1);
    transform: scale(1.10, 1.10);
}

.card__info {
    z-index: 2;
    background-color: #fff;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding: 16px 0;
    transition: all 0.4s ease;
    position: relative;
    height: auto;
	direction: rtl;
    text-align: right;
}

.card__category {
    font-family: 'Cairo', sans-serif;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 500;
    color: #868686;
    display: block;
    margin-bottom: 8px;
    transition: color 0.4s ease;
}

.card__title {
    margin-top: 5px;
    margin-bottom: 0;
    font-family: 'Cairo', serif;
    font-size: 18px;
    line-height: 1.3;
    color: #000;
    transition: color 0.4s ease;
    padding: 5px 10px;
}

.card__description {
    font-family: 'Cairo', serif;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    transform: translateY(20px);
	background: #8b469496;
    padding: 5px 10px;
}

.card__description .text {
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #666;
    margin-bottom: 15px;
    transition: color 0.4s ease;
}

.card__buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.card__buttons .button {
    padding: 8px 16px;
    background-color: #AD7D52;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    flex: 1;
    text-align: center;
}

.card__buttons .button:hover {
    background-color: #ffffff;
    color: #AD7D52;
}

.card__by {
    font-size: 12px;
    font-family: 'Cairo', sans-serif;
    font-weight: 500;
    color: #868686;
    display: block;
    margin-top: 10px;
    transition: color 0.4s ease;
}

.card__author {
    font-weight: 600;
    text-decoration: none;
    color: #AD7D52;
}

/* Effets au survol */
.card:hover .card__img--hover, .event__slider .owl-item.active:nth-child(1) .card .card__img--hover {
    height: 100%;
    opacity: 1;
}

.card:hover .card__overlay, .event__slider .owl-item.active:nth-child(1) .card .card__overlay {
    /*background: #8b469496;*//*rgba(0, 0, 0, 0.5);*/
}

.card:hover .card__info, .event__slider .owl-item.active:nth-child(1) .card .card__info {
    background-color: transparent;
    position: relative;
    transform: translateY(-50px);
}

.card:hover .card__info-hover, .event__slider .owl-item.active:nth-child(1) .card .card__info-hover {
    opacity: 1;
}
.card:hover .card__info-hover .card__clock-info, .event__slider .owl-item.active:nth-child(1) .card .card__info-hover .card__clock-info{
	top: 58px;
}

.card:hover .card__description, .card:hover .card__description {
    opacity: 1;
    max-height: 200px;
    transform: translateY(0);
}

/* Changement de couleur du texte au survol */
.card:hover .card__category, .event__slider .owl-item.active:nth-child(1) .card .card__category,
.card:hover .card__title, .event__slider .owl-item.active:nth-child(1) .card .card__title,
.card:hover .card__description .text, .event__slider .owl-item.active:nth-child(1) .card .card__description .text,
.card:hover .card__by, .event__slider .owl-item.active:nth-child(1) .card .card__by {
    color: #ffffff;
}
.card:hover .card__title {
	/*background: #48464880; */
    text-shadow: 0 0 5px black, 0 0 5px black, 0 0 5px black;
	margin: 0 0 15px;
}

.card:hover .card__buttons .button, .event__slider .owl-item.active:nth-child(1) .card .card__buttons .button {
    background-color: #ffffff;
    color: #AD7D52;
    border: 1px solid #ffffff;
}

.card:hover .card__buttons .button:hover, .event__slider .owl-item.active:nth-child(1) .card .card__buttons .button:hover {
    background-color: transparent;
    color: #ffffff;
    border-color: #ffffff;
}

/* Adaptation pour le carousel */
.event__slider .col-lg-4 {
    padding: 0 15px;
}
.event__slider .owl-item.active:nth-child(1) .card {
background: #000 !important;
}
.card .fa-map-marker {
    margin-right: 5px;
    color: #af3333;
    transition: color 0.4s ease;
}

.card:hover .fa-map-marker {
    color: #ffffff;
}
.event__slider.owl-carousel .owl-nav button {
    margin-right: 0;
    margin-left: 10px;
	color: #fff;
}
.click-btn {
  display: flex;
  width: 120px;
  height: 40px;
  justify-content: center;
  align-items: center;
  margin: 0.5rem;
  line-height: 35px;
  border: 1px solid;
  border-radius: 5px;
  text-align: center;
  font-size: 16px;
  color: #000;
  text-decoration: none;
  transition: all 0.35s;
  box-sizing: border-box;
}
.buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between; /* Pour répartir l'espace */
    width: 100%;
}

/* Styles de base pour vos boutons */
.click-btn.btn-card_btn {
    flex: 1; /* Les boutons prennent la même largeur */
    min-width: 0; /* Permet au flex de bien fonctionner */
    text-align: center;
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
}
.btn-card_btn {
  background-image: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 51%, #a1c4fd 100%);
  background-size: 200% auto;
  background-position: left top;
  border-color: transparent;
  color: #464646;
}
.btn-card_btn {
  /*background-image: linear-gradient(to right, #ee53ab 0%, #f5bada 51%, #cd5aa6 100%);*/
  background-image: unset;
  background-color: #b53056;
    color: #fff;
}
.btn-card_btn.gold {
  background-image: linear-gradient(to right, #f4e886 0%, #f9f8ca 51%, #f8f092 100%);
}
.btn-card_btn.second {
    background-image: unset;
    background-color: #d77797;
}
.btn-card_btn:hover {
  background-position: right bottom;
  color: #000;
  color: #e3e3e3;
  transform: translateY(-2px) translateZ(5px);
  box-shadow: var(--depth-4);
}
.click-btn > i {
	margin-left: 8px;
}
.service__item > img {
	width: 60px;
}
.primary-btn {
	font-family: 'Cairo', serif !important;
}
.service__item h4 {
	font-family: 'Cairo', serif !important;
	direction: rtl;
    text-align: right;
    font-size: 22px;
}
.section-title h1 {
	font-family: 'Cairo', "Bustan-Bold", serif !important;
	font-size: 84px;
    color: #e7e4e4;
}
.event {
	background: url(../img/empty-theater-stage.jpg);
}
.youtube__item__pic .play-btn i {
	color: var(--primary-color);
    position: relative;
    top: 2px;
    left: 2px;
}
 .services__left video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	border-radius: 20px 0;
    border-left: 10px solid var(--primary-color);
}

.play-btn {
	position: relative;
	z-index: 2;
	width: 80px;
	height: 80px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
}

.play-btn:hover {
	transform: scale(1.1);
	background: white;
}

.play-btn i {
	color: #fff;
	font-size: 22px;
	margin-left: 4px;
}
.services__left .play-btn i {
	position: relative;
	top: 0px;
	left: 2px;
}
/***********************/

        .about {
            padding: 80px 0;
            position: relative;
            overflow: hidden;
        }
        
        .about .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
            position: relative;
        }
        
        .about .slider-container {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
        }
        
        .about .slider {
            display: flex;
            transition: transform 0.6s ease-in-out;
        }
        
        .about .slide {
            min-width: 100%;
            display: flex;
            flex-wrap: wrap;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        
        .about .slide.active {
            opacity: 1;
        }
        
        /* Navigation */
        .about .slider-nav {
            position: absolute;
            bottom: -20px;
			left: 0;
            transform: translateX(50%);
            display: flex;
            gap: 15px;
            z-index: 10;
			direction: rtl;
        }
        
        .about .slider-dot {
			width: 25px;
			height: 3px;
			border-radius: 0;
            background-color: rgba(44, 62, 80, 0.4);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .about .slider-dot.active {
            background-color: #2c3e50;
            transform: scale(1.2);
        }
        
        .about .slider-arrows {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 0 30px;
            transform: translateY(-50%);
            z-index: 10;
			display: none;
        }
        
        .about .slider-arrow {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #2c3e50;
            font-size: 22px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
			display: none;
        }
        
        .about .slider-arrow:hover {
            background-color: white;
            transform: scale(1.1);
            color: #e74c3c;
        }
        
        .about .slide-counter {
            position: absolute;
            top: 30px;
            left: 30px;
            background: rgba(44, 62, 80, 0.8);
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
			display: none;
        }
.svg_icon {
	width: 24px;
    height: 24px;
}
.footer__address ul li p {
    color: #ffffff;
    opacity: 0.7;
    margin-bottom: 8px;
    display: inline;
    text-align: right;
    float: right;
    line-height: 50px;
}
.footer__address ul li h6 {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    display: inline-block;
    direction: rtl;
    line-height: 50px;
}
.footer__copyright__text p {
    color: #999999;
    text-align: center;
}
.service__item {
    background: #d77797;
}
.service__item.deep-bg {
    background: #b25f7b;
}


        .featured-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .featured-card {
            background: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--depth-3);
            transition: var(--transition);
            transform-style: preserve-3d;
            transform: translateZ(0);
            text-decoration: none;
            color: inherit;
            display: block;
        }

        .featured-card:hover {
            transform: translateY(-10px) translateZ(10px);
            box-shadow: var(--depth-5);
            text-decoration: none;
            color: inherit;
        }

        .featured-image {
            width: 100%;
            height: 200px;
            background: var(--primary-gradient);
            position: relative;
            overflow: hidden;
        }

        .featured-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

        .featured-card:hover .featured-image img {
            transform: scale(1.1);
        }

        .featured-badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: var(--gold-gradient);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            box-shadow: var(--depth-2);
        }

        .featured-content {
            padding: 1.5rem;
        }

        .artist-name {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--text-dark);
        }

        .artist-name-en {
            font-size: 0.9rem;
            color: var(--text-light);
            margin-bottom: 1rem;
            font-style: italic;
        }

        .artist-meta {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .artist-type {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.3rem 0.8rem;
            background: var(--light-bg);
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-dark);
        }

        .artist-country {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.3rem 0.8rem;
            background: var(--light-bg);
            border-radius: 15px;
            font-size: 0.8rem;
            color: var(--text-light);
        }

        .artist-description {
            color: var(--text-light);
            font-size: 0.9rem;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* All Artists Grid */
        .artists-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }

        .artist-card {
            background: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--depth-2);
            transition: var(--transition);
            transform-style: preserve-3d;
            transform: translateZ(0);
            text-decoration: none;
            color: inherit;
            display: block;
        }

        .artist-card:hover {
            transform: translateY(-5px) translateZ(5px);
            box-shadow: var(--depth-4);
            text-decoration: none;
            color: inherit;
        }

        .artist-image {
            width: 100%;
            height: 200px;
            background: var(--primary-gradient);
            position: relative;
            overflow: hidden;
        }

        .artist-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

        .artist-card:hover .artist-image img {
            transform: scale(1.1);
        }

        .artist-status {
            position: absolute;
            top: 1rem;
            left: 1rem;
            padding: 0.3rem 0.8rem;
            border-radius: 15px;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        .status-active { background: var(--success-gradient); color: white; }
        .status-pending { background: var(--warning-gradient); color: white; }
        .status-inactive { background: #95a5a6; color: white; }
        .status-suspended { background: var(--danger-gradient); color: white; }
        .status-retired { background: #34495e; color: white; }
        .status-deceased { background: #2c3e50; color: white; }

        .artist-content {
            padding: 1.5rem;
        }

        .artist-name {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 0.3rem;
            color: var(--text-dark);
        }

        .artist-name-en {
            font-size: 0.8rem;
            color: var(--text-light);
            margin-bottom: 1rem;
            font-style: italic;
        }

        .artist-details {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .artist-detail {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.8rem;
            color: var(--text-light);
        }

        .artist-detail i {
            width: 16px;
            color: var(--primary-color);
        }

        /* Pagination */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
            margin-top: 3rem;
        }

        .pagination-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background: white;
            color: var(--text-dark);
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
            box-shadow: var(--depth-1);
        }

        .pagination-link:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-2px);
            box-shadow: var(--depth-2);
        }

        .pagination-link.active {
            background: var(--primary-gradient);
            color: white;
        }

        .pagination-link.disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        .pagination-link.disabled:hover {
            background: white;
            color: var(--text-dark);
            transform: none;
            box-shadow: var(--depth-1);
        }

        /* No Results */
        .no-results {
            text-align: center;
            padding: 4rem 2rem;
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--depth-2);
        }

        .no-results-icon {
            font-size: 4rem;
            color: var(--text-light);
            margin-bottom: 1rem;
            opacity: 0.5;
        }

        .no-results h3 {
            color: var(--text-dark);
            margin-bottom: 1rem;
        }

        .no-results p {
            color: var(--text-light);
            margin-bottom: 2rem;
        }
		
        /* Responsive */
        @media (max-width: 1200px) {
            .filter-form {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 992px) {
            .featured-grid {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            }
            
            .artists-grid {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            }
        }
		
		
        @media (max-width: 768px) {
            .nav-container {
                padding: 0 1rem;
                height: 70px;
            }

            .logo-text {
                display: none;
            }

            .nav-menu {
                position: fixed;
                top: 70px;
                right: -100%;
                width: 80%;
                height: calc(100vh - 70px);
                background: rgba(255, 255, 255, 0.98);
                backdrop-filter: blur(20px);
                flex-direction: column;
                align-items: stretch;
                padding: 2rem;
                transition: var(--transition);
                box-shadow: var(--depth-4);
                border-left: 1px solid rgba(255, 255, 255, 0.2);
            }

            .nav-menu.active {
                right: 0;
            }

            .nav-item {
                width: 100%;
            }

            .nav-link {
                justify-content: flex-start;
                padding: 1rem 1.5rem;
                border-radius: 12px;
                margin-bottom: 0.5rem;
                border: 2px solid transparent;
            }

            .mobile-menu-btn {
                display: block;
            }

            .hero-section {
                margin-top: 70px;
                padding: 2rem 0;
            }

            .hero-title {
                font-size: 2.5rem;
            }

            .main-container {
                padding: 2rem 1rem;
            }

            .filter-section {
                padding: 1.5rem;
            }

            .filter-form {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .featured-grid {
                grid-template-columns: 1fr;
            }

            .artists-grid {
                grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
            }

            .section-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
        }

        @media (max-width: 480px) {
            .hero-title {
                font-size: 1.5rem;
            }
            
            .section-title {
                font-size: 1.2rem;
            }
            .hero-subtitle {
                font-size: 0.8rem;
            }
            
            .filter-section {
                padding: 1rem;
            }
            
            .artist-content, .featured-content {
                padding: 1rem;
            }
        }

        /* Animation Classes */
        .fade-in {
            animation: fadeIn 0.6s ease-in-out;
        }

        .slide-up {
            animation: slideUp 0.6s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from { 
                opacity: 0;
                transform: translateY(30px);
            }
            to { 
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Utility Classes */
        .text-center { text-align: center; }
        .text-right { text-align: right; }
        .text-left { text-align: left; }
        .mb-1 { margin-bottom: 0.5rem; }
        .mb-2 { margin-bottom: 1rem; }
        .mb-3 { margin-bottom: 1.5rem; }
        .mb-4 { margin-bottom: 2rem; }
        .mt-1 { margin-top: 0.5rem; }
        .mt-2 { margin-top: 1rem; }
        .mt-3 { margin-top: 1.5rem; }
        .mt-4 { margin-top: 2rem; }
        .p-1 { padding: 0.5rem; }
        .p-2 { padding: 1rem; }
        .p-3 { padding: 1.5rem; }
        .p-4 { padding: 2rem; }
@media only screen and (max-width: 767px) {
    .slicknav_btn {
        position: absolute;
        right: 15px;
        top: 25px;
        margin: 0;
        border-radius: 0;
        padding: 12px 15px;
        float: none;
        background: #00000000;
    }	
	.slicknav_menu .slicknav_menutxt {
		display: none;
	}
	.header__logo {
		text-align: center;
	}
	.slicknav_nav .slicknav_row, .slicknav_nav a {
        padding: 10px 28px;
        margin: 0;
        text-align: right;
    }
	.slicknav_nav .slicknav_arrow
	 {
		font-size: 1.2em;
		margin: 0 .4em;
		transform: rotate(180deg);
		display: inline-block;
	}
	.slicknav_nav .slicknav_row:hover {
        border-radius: 0;
        background: #b53056;
        color: #ffffff;
    }
	    .slicknav_nav a:hover
	{
        border-radius: 0;
        background: #b53056;
        color: #ffffff;
    }
}
.footer__address ul li i, .footer__social .footer__social__links a, .footer__newslatter form button {
    color: var(--primary-color);
}
.theaters_section {
	background: #fff;
}
.theaters_section .about__text {
    padding: 50px 20px 10px;
}
.theaters_section .about__text, .theaters_section .about__pic {
    padding-top: 50px;
}
.row_rtl {
	direction: rtl;
}
.primary-btn, .section-title::after, .about .slider-dot.active, .jp-volume-bar-value, .jp-play-bar, .pagination__links a:hover {
	background: var(--primary-color);
}
.primary-btn:hover {
	background: var(--secondary-color);
}
.primary-btn.border-btn {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: #111111;
}
.event__slider.owl-carousel .owl-nav button {
	color: var(--primary-color);
}
.pagination__links.blog__pagination, .pagination__info {
    text-align: center;
}
.show_all {
	float: left;
	margin-left: 20px;
}
.date-input-group {
    display: flex;
    gap: 10px; /* Espace entre les éléments */
    align-items: center;
}

.date-select {
    width: 80px; /* Largeur fixe pour le select */
    flex-shrink: 0;
}

.date-input {
    flex: 1; /* Prend tout l'espace restant */
}
.event_section {
	background: #ececec;
}
.jp-audio .jp-play:focus, .jp-state-playing .jp-play {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.jp-play:after {
    background: url(../img/play_default.png);
}
.track__pic {
	height: 420px;
}
.services .services__left {
	position: relative;
}
.services .services__left h2 {
	color: var(--primary-color);
	font-weight: bold;
	position: absolute;
    display: block;
    top: 30px;
}
.services .services__left h3 {
	color: var(--primary-color);
	position: absolute;
    display: block;
    bottom: 80px;
}
.track__content {
    height: auto;
    overflow-y: auto;
}
.youtube .section-title h1, .track .section-title h1, .theaters_section .section-title h1 {
    font-size: 50px;
}.popup {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100vw;
  height: 100vh;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  transition: 0.64s ease-in-out;
}

.popup-inner {
  position: relative;
  bottom: -100vw;
  right: -100vh;
  display: flex;
  align-items: center;
  max-width: 800px;
  max-height: 600px;
  width: 90%;
  height: 80%;
  background-color: #fff;
  transform: rotate(32deg);
  transition: 0.64s ease-in-out;
}

.popup__photo {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 40%;
  height: 100%;
  overflow: hidden;
}

.popup__photo img {
  width: 100%;
  height: 100%;
}

.popup__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 60%;
  height: 100%;
  padding: 4rem;
  overflow-y: auto;
  box-sizing: border-box;
  direction: rtl;
}

.popup__text h1 {
  font-size: 2rem;
  font-weight: 600;
  margin: 2rem 0 1rem;
  text-transform: uppercase;
  color: #0A0A0A;
  flex-shrink: 0;
  text-align: right;
}

.popup__text p, .popup__text li {
  font-size: 1rem;
  color: #686868;
  line-height: 2rem;
  flex-shrink: 0;
  text-align: justify;
}

.popup:target {
  visibility: visible;
  opacity: 1;
}

.popup:target .popup-inner {
  bottom: 0;
  right: 0;
  transform: rotate(0);
}

.popup__close {
  position: absolute;
  right: -1rem;
  top: -1rem;
  width: 3rem;
  height: 3rem;
  font-size: 0.875rem;
  font-weight: 300;
  border-radius: 100%;
  background-color: var(--secondary-color);
  z-index: 104;
  color: #fff;
  line-height: 3rem;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}

/* Responsive Design */

/* Pour les tablettes et écrans moyens */
@media screen and (max-width: 768px) {
  .popup-inner {
    width: 95%;
    height: 85%;
  }
  
  .popup__text {
    padding: 2rem;
  }
  
  .popup__text h1 {
    font-size: 1.5rem;
  }
  
  .popup__text p, .popup__text li {
    font-size: 0.9rem;
    line-height: 1.5rem;
  }
}

/* Pour les mobiles */
@media screen and (max-width: 576px) {
  .popup-inner {
    flex-direction: column;
    width: 95%;
    height: 90%;
    max-height: none;
  }
  
  .popup__photo {
    width: 100%;
    height: 30%;
  }
  
  .popup__photo img {
    width: 100%;
    height: auto;
  }
  
  .popup__text {
    width: 100%;
    height: 70%;
    padding: 1.5rem;
  }
  
  .popup__text h1 {
    font-size: 1.3rem;
    margin-top: 1rem;
  }
  
  .popup__text p, .popup__text li {
    font-size: 0.9rem;
    line-height: 1.5rem;
  }
  
  .popup__close {
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    right: 0.5rem;
    top: 0.5rem;
  }
  .section-title h2 {
    font-size: 30px;
  }
  .section-title h2.section-title-header {
    font-size: 38px;
	}
	.track__content {
        margin-bottom: 20px;
    }
}

/* Pour les très petits mobiles */
@media screen and (max-width: 375px) {
  .popup__text {
    padding: 1rem;
  }
  
  .popup__text h1 {
    font-size: 1.2rem;
  }
  
  .popup__text p, .popup__text li {
    font-size: 0.85rem;
    line-height: 1.4rem;
  }
}

/* ===== STYLE POUR LE POPUP DES ÉVÉNEMENTS ===== */
.event-popup {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100vw;
  height: 100vh;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000; /* z-index élevé pour être au-dessus de tout */
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  transition: 0.64s ease-in-out;
}
.event-popup-inner {
  position: relative;
  bottom: -100vw;
  right: -100vh;
  display: flex;
  align-items: center;
  max-width: 800px;
  max-height: 600px;
  width: 90%;
  height: 80%;
  background-color: #fff;
  transform: rotate(32deg);
  transition: 0.64s ease-in-out;
}
.event-popup__photo {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 40%;
  height: 100%;
  overflow: hidden;
}
.event-popup__photo img {
  width: auto;
  height: 100%;
  object-fit: cover; /* Assure que l'image couvre l'espace sans se déformer */
}
.event-popup__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 60%;
  height: 100%;
  padding: 4rem;
  overflow-y: auto;
  box-sizing: border-box;
  direction: rtl;
  text-align: justify;
}
.event-popup__text h1 {
  font-size: 2rem;
  font-weight: 600;
  margin: 2rem 0 1rem;
  text-transform: uppercase;
  color: #0A0A0A;
  flex-shrink: 0;
  text-align: right;
}
.event-popup__text p {
  font-size: 1rem;
  color: #686868;
  line-height: 2rem;
  flex-shrink: 0;
  text-align: justify;
  white-space: pre-wrap; /* Pour respecter les sauts de ligne */
}
.event-popup:target {
  visibility: visible;
  opacity: 1;
}
.event-popup:target .event-popup-inner {
  bottom: 0;
  right: 0;
  transform: rotate(0);
}
.event-popup__close {
  position: absolute;
  right: -1rem;
  top: -1rem;
  width: 3rem;
  height: 3rem;
  font-size: 0.875rem;
  font-weight: 300;
  border-radius: 100%;
  background-color: var(--secondary-color); /* Assurez-vous que cette variable est définie */
  z-index: 1004;
  color: #fff;
  line-height: 3rem;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}

/* Style pour les éléments ajoutés */
.popup-datetime {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    color: #333;
}
.popup-location {
    margin-top: 1.5rem;
    font-size: 1rem;
    color: #555;
}
.popup-buttons {
    margin-top: 2rem;
}

/* ===== RESPONSIVE DESIGN POUR LE POPUP ===== */
/* Pour les tablettes et écrans moyens */
@media screen and (max-width: 768px) {
  .event-popup-inner {
    width: 95%;
    height: 85%;
  }
  .event-popup__text {
    padding: 2rem;
  }
  .event-popup__text h1 {
    font-size: 1.5rem;
  }
  .event-popup__text p {
    font-size: 0.9rem;
    line-height: 1.5rem;
  }
}
.event-popup .card__like {
	float: right;
}
.event-popup .card__clock-info .date {
	top: 0;
    left: -1px;
}
.event-popup .card__clock-info .time {
	top: -30px;
    right: 328px;
}
/* Pour les mobiles */
@media screen and (max-width: 576px) {
  .event-popup-inner {
    flex-direction: column;
    width: 95%;
    height: 90%;
    max-height: none;
  }
  .event-popup__photo {
    width: 100%;
    height: 30%;
  }
  .event-popup__photo img {
    width: 100%;
    height: auto;
  }
  .event-popup__text {
    width: 100%;
    height: 70%;
    padding: 1.5rem;
  }
  .event-popup__text h1 {
    font-size: 1.3rem;
    margin-top: 1rem;
  }
  .event-popup__text p {
    font-size: 0.9rem;
    line-height: 1.5rem;
  }
  .event-popup__close {
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    right: 0.5rem;
    top: 0.5rem;
  }
}

/* Pour les très petits mobiles */
@media screen and (max-width: 375px) {
  .event-popup__text {
    padding: 1rem;
  }
  .event-popup__text h1 {
    font-size: 1.2rem;
  }
  .event-popup__text p {
    font-size: 0.85rem;
    line-height: 1.4rem;
  }
}

/****** theatre **********/

        .image-placeholder {
            width: 100%;
            height: 100%;
            background: var(--primary-gradient);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 4rem;
            gap: 1rem;
            padding: 2rem;
        }

        .image-placeholder p {
            font-size: 1.2rem;
            margin: 0;
            text-align: center;
        }

        .theater-initials {
            font-size: 3rem;
            font-weight: bold;
            margin-top: 1rem;
            background: rgba(255,255,255,0.2);
            width: 100px;
            height: 100px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 3px solid rgba(255,255,255,0.3);
        }

        .theater-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 2rem;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .theater-title-section h1 {
            /*font-family: 'Amiri', serif;*/
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--primary-color);
			margin-top: 40px;
        }

        .theater-title-section p {
            font-size: 1.2rem;
            color: var(--text-light);
            font-style: italic;
        }
		.theater-image-large img {
			margin: auto;
		}
        .status-badge-large {
            display: inline-flex;
            align-items: center;
            gap: 0.8rem;
            padding: 0.5rem 1.5rem;
			border-radius: 20px;
            font-size: 1.1rem;
            font-weight: 600;
        }

        .theater-meta-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .theater-meta-card {
            background: white;
            padding: 1.5rem;
            border-radius: 12px;
            border-left: 4px solid var(--primary-color);
            box-shadow: 0 5px 15px var(--shadow-light);
            transition: var(--transition);
        }

        .theater-meta-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px var(--shadow-medium);
        }

        .theater-meta-title {
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 1rem;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .theater-meta-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .theater-meta-item {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            margin-bottom: 0.8rem;
            color: var(--text-dark);
        }

        .theater-meta-item:last-child {
            margin-bottom: 0;
        }

        .theater-meta-icon {
            width: 20px;
            color: var(--primary-color);
            text-align: center;
        }

        .theater-description {
            background: white;
            padding: 2rem;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            margin-bottom: 2rem;
            box-shadow: 0 5px 15px var(--shadow-light);
        }

        .theater-description-title {
            font-weight: 600;
            color: var(--secondary-color2);
            margin-bottom: 1rem;
            font-size: 2rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
	

        .theater-description-text {
            line-height: 1.5;
            color: var(--text-light);
            font-size: 1.2rem;
            white-space: pre-line;
        }

        /* قسم فيديو YouTube */
        .youtube-section {
            margin: 2rem 0;
        }

        .youtube-embed {
            background: white;
            padding: 1rem;
            border-radius: var(--border-radius);
            box-shadow: 0 5px 15px var(--shadow-light);
        }

        .youtube-embed iframe {
            border-radius: 8px;
            width: 100%;
        }

        /* قسم المشاركة */
        .share-section {
            margin: 2rem 0;
            padding: 1.5rem;
            background: white;
            border-radius: var(--border-radius);
            box-shadow: 0 5px 15px var(--shadow-light);
        }

        .share-buttons {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .share-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.7rem 1.2rem;
            border: none;
            border-radius: 8px;
            font-family: inherit;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
        }

        .share-btn.facebook { background: #1877f2; color: white; }
        .share-btn.twitter { background: #1da1f2; color: white; }
        .share-btn.whatsapp { background: #25d366; color: white; }
        .share-btn.copy-link { background: #6c757d; color: white; }

        .share-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .theater-actions {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            margin-bottom: 3rem;
        }

        .theater-action-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.8rem 1.5rem;
            background: var(--primary-gradient);
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-weight: 600;
            transition: var(--transition);
            border: none;
            cursor: pointer;
            font-family: inherit;
        }

        .theater-action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(26, 95, 122, 0.3);
        }

        .theater-action-btn.secondary {
            background: #6c757d;
        }

        .theater-action-btn.secondary:hover {
            box-shadow: 0 8px 25px rgba(108, 117, 125, 0.3);
        }

        /* قسم المسارح ذات الصلة */
        .related-theaters {
            margin-top: 3rem;
            padding-top: 2rem;
            border-top: 1px solid var(--border-color);
        }
		/*
        .section-title {
            font-family: 'Amiri', serif;
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 2rem;
            color: var(--text-dark);
            position: relative;
            padding-bottom: 0.5rem;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100px;
            height: 4px;
            background: var(--primary-gradient);
            border-radius: 2px;
        }
		*/

        .related-theaters-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
        }

        .related-theater-card {
            background: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: 0 5px 15px var(--shadow-light);
            transition: var(--transition);
        }

        .related-theater-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px var(--shadow-medium);
        }

        .related-theater-image {
            width: 100%;
            height: 160px;
            background: var(--primary-gradient);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2rem;
            position: relative;
        }

        .related-theater-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .related-theater-content {
            padding: 1.2rem;
        }

        .related-theater-title {
            font-family: 'Amiri', serif;
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--text-dark);
        }

        .related-theater-subtitle {
            color: var(--text-light);
            font-size: 0.9rem;
            margin-bottom: 0.8rem;
        }

        .related-theater-link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: #f8fafc;
            color: var(--primary-color);
            text-decoration: none;
            border-radius: 6px;
            font-size: 0.9rem;
            font-weight: 500;
            transition: var(--transition);
            border: 1px solid var(--border-color);
        }

        .related-theater-link:hover {
            background: var(--primary-color);
            color: white;
        }

        /* قسم الخريطة */
        .map-section {
            margin: 2rem 0;
        }

        .map-placeholder {
            background: white;
            padding: 2rem;
            border-radius: var(--border-radius);
            text-align: center;
            box-shadow: 0 5px 15px var(--shadow-light);
            color: var(--text-light);
        }

        /* تحسينات للعرض على الجوال */
        @media (max-width: 768px) {
            .hero-header {
                height: 100vh;
                min-height: 400px;
            }
            .hero-header-min {
                height: 35vh;
                min-height: 300px;
            }
            
            .theater-details-container {
                padding: 0 1rem;
            }

            .theater-image-large {
                height: 250px;
            }

            .theater-header {
                flex-direction: column;
                text-align: center;
            }

            .theater-title-section h1 {
                font-size: 2rem;
            }

            .theater-meta-grid {
                grid-template-columns: 1fr;
            }

            .theater-actions {
                flex-direction: column;
            }

            .related-theaters-grid {
                grid-template-columns: 1fr;
            }

            .share-buttons {
                flex-direction: column;
            }

            .share-btn {
                justify-content: center;
            }

            .youtube-embed iframe {
                height: 250px;
            }
        }

        @media (max-width: 480px) {
            .hero-header {
                height: 100vh;
                min-height: 350px;
            }
            .hero-header-min {
                height: 30vh;
				min-height: 250px;
            }
            
            .theater-image-large {
                height: 200px;
            }
            
            .theater-initials {
                width: 80px;
                height: 80px;
                font-size: 2rem;
            }
            
        }

        /* تحسينات إضافية */
        .external-link {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
        }

        .external-link:hover {
            color: var(--secondary-color);
        }

        .external-link::after {
            content: "↗";
            font-size: 0.9em;
        }

        .no-related {
            text-align: center;
            padding: 2rem;
            color: var(--text-light);
            background: white;
            border-radius: var(--border-radius);
            box-shadow: 0 5px 15px var(--shadow-light);
        }
		
/********* artist ***********/
/* Artist Hero Section */
            .artist-hero {
                margin-top: 80px;
                background: #e7e7e7;
                color: white;
                padding: 4rem 0;
                position: relative;
                overflow: hidden;
				direction: rtl;
				text-align: right;
            }

            .artist-hero::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);
                pointer-events: none;
            }

            .artist-hero-content {
                max-width: 1400px;
                margin: 0 auto;
                padding: 0 2rem;
                display: grid;
                grid-template-columns: 300px 1fr;
                gap: 3rem;
                align-items: center;
            }
			.artist-hero .meta-item {
				display: flex;
				align-items: center;
				gap: 1rem;
				padding: 1rem;
				background: rgba(255, 255, 255, 0.1);
				border-radius: var(--border-radius);
				backdrop-filter: blur(10px);
				transition: var(--transition);
			}
			.artist-hero .meta-item:hover {
				transform: translateY(-2px);
				background: rgba(255, 255, 255, 0.15);
			}
            .artist-image-large {
                width: 300px;
                height: 400px;
                border-radius: var(--border-radius);
                overflow: hidden;
                box-shadow: var(--depth-5);
                background: var(--primary-gradient);
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-size: 4rem;
                position: relative;
            }

            .artist-image-large img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: var(--transition);
            }

            .artist-image-large:hover img {
                transform: scale(1.05);
            }

            .artist-hero-info {
                flex: 1;
            }

            .artist-name {
                font-family: 'Amiri', serif;
                font-size: 3rem;
                font-weight: 700;
                margin-bottom: 0.5rem;
            }

            .artist-name-en {
                font-size: 1.5rem;
                opacity: 0.8;
                margin-bottom: 1.5rem;
                font-style: italic;
            }

            .artist-badges {
                display: flex;
                gap: 1rem;
                margin-bottom: 2rem;
                flex-wrap: wrap;
            }

            .type-badge {
                display: inline-flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.7rem 1.5rem;
                border-radius: 25px;
                font-weight: 600;
                font-size: 0.9rem;
                box-shadow: var(--depth-2);
            }

            .type-singer { background: #e8f6ef; color: #27ae60; }
            .type-dancer { background: #fff3cd; color: #856404; }
            .type-musician { background: #d1ecf1; color: #0c5460; }
            .type-conductor { background: #f8d7da; color: #721c24; }
            .type-actor { background: #e2e3e5; color: #3b6d5d; }
            .type-director { background: #d4edda; color: #155724; }
            .type-composer { background: #cce7ff; color: #004085; }
            .type-choreographer { background: #f0e6ff; color: #4b0082; }

            .featured-badge {
                background: var(--gold-gradient);
                color: white;
                padding: 0.7rem 1.5rem;
                border-radius: 25px;
                font-weight: 600;
                display: inline-flex;
                align-items: center;
                gap: 0.5rem;
                box-shadow: var(--depth-2);
            }

            .artist-meta {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 1.5rem;
                margin-bottom: 2rem;
            }
			
			
            /* Contact Info */
            .contact-info {
                display: flex;
                flex-direction: column;
                gap: 1rem;
            }

            .contact-item {
                display: flex;
                align-items: center;
                gap: 1rem;
                padding: 1rem;
                background: var(--light-bg);
                border-radius: var(--border-radius);
                transition: var(--transition);
            }

            .contact-item:hover {
                background: #e9ecef;
                transform: translateX(-5px);
            }

            .contact-icon {
                font-size: 1.3rem;
                color: var(--primary-color);
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(26, 95, 122, 0.1);
                border-radius: 50%;
            }

            .contact-content {
                flex: 1;
            }

            .contact-label {
                font-size: 0.8rem;
                color: var(--text-light);
                margin-bottom: 0.2rem;
            }

            .contact-value {
                font-weight: 600;
                color: var(--text-dark);
            }

            .contact-value a {
                color: inherit;
                text-decoration: none;
                transition: var(--transition);
            }

            .contact-value a:hover {
                color: var(--primary-color);
            }
			.main_artist .content-section {
                transform: translateZ(0);
                transition: var(--transition);
            }

            .main_artist .content-section:hover {
                transform: translateY(-5px) translateZ(5px);
                box-shadow: var(--depth-4);
            }
			/* YouTube Video */
            .main_artist .video-container {
                position: sticky;
                width: 100%;
                height: 0;
                padding-bottom: 56.25%; /* 16:9 aspect ratio */
                margin-bottom: 1.5rem;
                border-radius: var(--border-radius);
                overflow: hidden;
                box-shadow: var(--depth-3);
            }

           .main_artist .video-container iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: none;
            }

            .main_artist .no-video {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: var(--light-bg);
                color: var(--text-light);
                flex-direction: column;
                gap: 1rem;
            }

            .main_artist .no-video i {
                font-size: 3rem;
                opacity: 0.5;
            }
			
            /* Biography */
            .biography-content {
                line-height: 1.8;
                color: var(--text-light);
                font-size: 1.05rem;
				text-align: justify;
            }

            .biography-content p {
                margin-bottom: 1.5rem;
                text-align: justify;
            }

            /* Shows Grid */
            .shows-grid {
                display: grid;
                gap: 1.5rem;
            }

            .show-card {
                display: grid;
                grid-template-columns: 100px 1fr auto;
                gap: 1.5rem;
                padding: 1.5rem;
                background: var(--light-bg);
                border-radius: var(--border-radius);
                transition: var(--transition);
                border-left: 4px solid var(--primary-color);
            }

            .show-card:hover {
                transform: translateX(-5px);
                box-shadow: var(--depth-2);
            }

            .show-date {
                text-align: center;
                background: white;
                padding: 1rem;
                border-radius: var(--border-radius);
                box-shadow: var(--depth-1);
            }

            .show-day {
                font-size: 1.8rem;
                font-weight: 700;
                color: var(--primary-color);
                display: block;
            }

            .show-month {
                font-size: 0.9rem;
                color: var(--text-light);
                display: block;
            }

            .show-info {
                flex: 1;
            }

            .show-title {
                font-size: 1.2rem;
                font-weight: 600;
                margin-bottom: 0.5rem;
                color: var(--text-dark);
            }

            .show-theater {
                color: var(--text-light);
                display: flex;
                align-items: center;
                gap: 0.5rem;
            }
			
			
            /* Similar Artists */
            .similar-artists-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 1.5rem;
            }

            .similar-artist-card {
                background: var(--light-bg);
                border-radius: var(--border-radius);
                padding: 1.5rem;
                text-align: center;
                transition: var(--transition);
                text-decoration: none;
                color: inherit;
                display: block;
            }

            .similar-artist-card:hover {
                transform: translateY(-5px);
                box-shadow: var(--depth-3);
                text-decoration: none;
                color: inherit;
            }

            .similar-artist-image {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                margin: 0 auto 1rem;
                background: var(--primary-gradient);
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-size: 1.5rem;
                overflow: hidden;
            }

            .similar-artist-image img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 50%;
                transition: var(--transition);
            }

            .similar-artist-card:hover .similar-artist-image img {
                transform: scale(1.1);
            }

            .similar-artist-name {
                font-weight: 600;
                margin-bottom: 0.5rem;
                color: var(--text-dark);
            }

            .similar-artist-type {
                font-size: 0.8rem;
                color: var(--text-light);
            }
			
            /* Basic Info Grid */
            .basic-info-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 1.5rem;
                margin-bottom: 2rem;
            }

            .info-item {
                display: flex;
                align-items: center;
                gap: 1rem;
                padding: 1rem;
                background: var(--light-bg);
                border-radius: var(--border-radius);
                border-right: 4px solid var(--primary-color);
                transition: var(--transition);
            }

            .info-item:hover {
                transform: translateX(-5px);
                background: white;
                box-shadow: var(--depth-2);
            }

            .info-icon {
                font-size: 1.5rem;
                color: var(--primary-color);
                width: 50px;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(26, 95, 122, 0.1);
                border-radius: 50%;
            }

            .info-content h4 {
                font-weight: 600;
                margin-bottom: 0.3rem;
                color: var(--text-dark);
            }

            .info-content p {
                color: var(--text-light);
                font-size: 0.95rem;
            }
			/* Responsive */
            @media (max-width: 1200px) {
                .artist-hero-content {
                    grid-template-columns: 250px 1fr;
                    gap: 2rem;
                }
                
                .artist-image-large {
                    width: 250px;
                    height: 350px;
                }
            }

            @media (max-width: 992px) {
                .content-grid {
                    grid-template-columns: 1fr;
                    gap: 2rem;
                }
                
                .artist-hero-content {
                    grid-template-columns: 1fr;
                    text-align: center;
                }
                
                .artist-image-large {
                    margin: 0 auto;
                }
                
                .artist-meta {
                    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                }
            }

            @media (max-width: 768px) {
                .artist-hero {
                    margin-top: 70px;
                    padding: 2rem 0;
                }

                .artist-hero-content {
                    padding: 0 1rem;
                }

                .artist-image-large {
                    width: 200px;
                    height: 250px;
                }

                .artist-name {
                    font-size: 2rem;
                }

                .show-card {
                    grid-template-columns: 1fr;
                    text-align: center;
                    gap: 1rem;
                }

                .artist-meta {
                    grid-template-columns: 1fr;
                }

                .basic-info-grid {
                    grid-template-columns: 1fr;
                }
                
                .similar-artists-grid {
                    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                }
            }

            @media (max-width: 480px) {
                .artist-name {
                    font-size: 1.8rem;
                }
                
                .artist-badges {
                    justify-content: center;
                }
                
                .type-badge, .featured-badge {
                    font-size: 0.8rem;
                    padding: 0.5rem 1rem;
                }
                
                .section-title {
                    font-size: 1.5rem;
                }
                
                .content-section {
                    padding: 1rem;
                }
            }