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

        /* Load Arabic font */
        @font-face {
          font-family: 'CustomArabic';
          src: url('./assets/Fonts/ar.ttf') format('truetype');
          font-weight: normal;
          font-style: normal;
        }

        /* Load English font */
        @font-face {
          font-family: 'CustomEnglish';
          src: url('./assets/Fonts/en.ttf') format('truetype');
          font-weight: normal;
          font-style: normal;
        }

        /* Arabic spans */
        .ar {
          font-family: 'CustomArabic', 'Tahoma', sans-serif;
          direction: rtl;
        }

        /* English spans */
        .en {
          /* font-family: 'CustomEnglish', Georgia, serif; */
          display: none;;
        }

        body {
          /* font-family: 'CustomArabic', 'Tahoma', serif; */
          font-family: 'Georgia', serif;
          color: #f4f4f4;
          overflow: hidden;
          height: 100vh;
        }

        /* Transition base styles */
        .header,
        .nav-menu,
        .menu-item {
          transition: all 0.6s ease;
        }

        /* Collapsed state */
        body.nav-collapsed .header {
          padding: 0.8rem 2rem;
        }

        body.nav-collapsed .nav-menu {
          top: 5%;
          transform: translate(-50%, -15%);
          gap: 1rem;
        }

        body.nav-collapsed .menu-item {
          width: 140px;
          height: 90px;
          font-size: 0.9rem;
          transform: scale(0.9);
        }

        body.nav-collapsed .logo {
          max-width: 45px;
        }

        body.nav-collapsed .title {
          max-width: 147px;
        }

        /* Reduce text size when collapsed */
        body.nav-collapsed .menu-item .ar {
          font-size: 1.3rem;
        }

        body.nav-collapsed .menu-item .en {
          font-size: 0.9rem;
        }

        .container {
          height: 100vh;
          display: flex;
          flex-direction: column;
          position: relative;
        }

        /* Header */
        .header {
          padding: 2rem 3rem;
          background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
          backdrop-filter: blur(10px);
          z-index: 100;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        /* Actions container */
        .header-actions {
          display: flex;
          gap: 1rem;
          align-items: center;
        }

        /* Buttons */
        .header-actions button {
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 8px;
          padding: 0.6rem 1rem;
          cursor: pointer;
          color: #dcdcdc;
          font-size: 0.9rem;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .header-actions button:hover {
          background: rgba(255, 255, 255, 0.1);
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        /* Home button SVG */
        .home-btn svg {
          width: 20px;
          height: 20px;
          fill: #e76c40;
        }

        /* Language button */
        .lang-btn {
          font-weight: 500;
          min-width: 48px;
          justify-content: center;
        }

        .lang-btn span {
          height: 20px;
          width: 20px;
        }

        .img-container {
          display: flex;
          align-items: center;
          place-content: center;
          gap: 20px;
        }

        .logo {
          max-width: 75px;
          height: auto;
          align-self: center;
          content: url(./assets/Images/logo.png);
        }

        .title {
          max-width: 245px;
          height: auto;
          align-self: center;
          content: url(./assets/Images/title.png);
        }

        /* Main Content Area */
        .content {
          flex: 1;
          position: relative;
          display: flex;
          background-color: #DED6C7;
          direction: rtl;
        }

        /* Left pattern - top to middle */
        .pattern-left {
          position: absolute;
          top: 0;
          left: 0;
          width: 10px;
          height: 100vh;
          background: linear-gradient(to right, #9c2d3d, #9c2d3d 6px, #e76c40 8px, #e76c40);
          background-color: #DED6C7;
          background-size: 3em 3em;
          opacity: 1;
        }

        /* Right pattern - bottom to middle */
        .pattern-right {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 10px;
          height: 100vh;
          background: linear-gradient(to right, #e76c40, #9c2d3de0 6px, #9c2d3d 8px, #9c2d3d);
          background-size: 3em 3em;
          background-color: #DED6C7;
          opacity: 1;
          background-color: #e5e5f7;
        }

        /* Navigation Menu */
        .nav-menu {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          display: flex;
          gap: 2rem;
          justify-content: center;
          z-index: 50;
        }

        .menu-item {
          width: 200px;
          height: 200px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          padding: 1rem;
          position: relative;
          background-size: cover;
          background-position: center;
          color: #fff;
          cursor: pointer;
          transition: all 0.4s ease;
          overflow: hidden;
          border-radius: 8px;
        }

        /* Dark overlay */
        .menu-item::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.55);
          backdrop-filter: blur(1.5px);
          z-index: 1;
        }

        .menu-item span {
          position: relative;
          z-index: 2;
        }

        .menu-item .ar {
          font-size: 1.6rem;
          font-weight: 600;
          margin: 0.5rem 0;
          line-height: 1.4;
          direction: rtl;
        }

        .menu-item .en {
          font-size: 1rem;
          font-weight: 300;
          color: #eee;
        }

        .menu-item:hover,
        .menu-item.active {
          transform: translateY(-10px);
          box-shadow: 0 15px 30px #000000cc;
        }

        /* Content Panels */
        .panel {
          position: absolute;
          top: 20%;
          left: 0;
          right: 0;
          bottom: 0;
          opacity: 0;
          visibility: hidden;
          transition: all 0.6s ease;
          padding: 2rem 7.5rem;
          overflow: hidden;
          z-index: 50;
        }

        .panel.active {
          opacity: 1;
          visibility: visible;
        }

        .panel-content {
          margin: 0 auto;
          height: 100%;
        }

        /* About section */
        .about-content {
          margin-bottom: 2rem;
        }

        .about-title {
          font-size: 2rem;
          color: #9c2d3d;
          margin-bottom: 1.2rem;
          font-weight: 500;
          text-align: center;
          text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.7);
          min-height: 56px;
        }

        .about-title .ar {
          font-size: 2.5rem;
        }

        .about-blocks {
          display: flex;
          gap: 1.5rem;
          margin-bottom: 2rem;
        }

        .about-block {
          flex: 1;
          background: linear-gradient(145deg, #1f1f1f, #413e3a);
          border: 1px solid #333;
          padding: 1.2rem;
          border-radius: 10px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
          transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
        }

        .about-subtitle {
          font-size: 1.3rem;
          margin-bottom: 0.6rem;
          color: #e76c40;
          text-align: center;
        }

        .about-subtitle .ar {
          font-size: 1.6rem;
          font-weight: 700;
        }

        .about-paragraph {
          font-size: 1rem;
          line-height: 1.6;
          color: #dcdcdc;
          margin-bottom: 1rem;
        }

        .about-paragraph .ar {
          font-size: 1.3rem;
        }

        .stats-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 1.2rem;
          margin-top: 1rem;
        }

        .stat-item {
          text-align: center;
          padding: 1.2rem;
          background: linear-gradient(135deg, #1f1f1f, #413e3a);
          border: 1px solid #444;
          border-radius: 10px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
          transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
        }

        .stat-number {
          font-size: 1.6rem;
          color: #9c2d3d;
          font-weight: 500;
          margin-bottom: 0.3rem;
        }

        .stat-label {
          color: #e76c40;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          font-size: 0.8rem;
        }

        .stat-label .ar {
          font-size: 1rem;
        }

        /* Map Panel */
        .map-label {
          position: absolute;
          color: white;
          font-weight: bold;
          pointer-events: none;
          text-align: center;
          white-space: nowrap;
        }

        .map-label .ar {
          font-size: 1.36rem;
        }

        /* Region Modal */
        .region-modal {
          max-width: 500px !important;
          max-height: 80% !important;
          padding: 2.2rem;
          background: linear-gradient(145deg, #1f1f1f, #413e3a);
          color: #dcdcdc;
          border: 1px solid #333;
          border-radius: 10px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
          overflow-y: auto;
          text-align: left;
          transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
        }

        #regionDetails {
          text-align: center;
        }

        #regionDetails h3 {
          margin-bottom: 1rem;
          font-size: 1.4rem;
          color: #9c2d3d;
          font-weight: 500;
          text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.6);
        }

        #regionDetails ul {
          list-style: none;
          padding: 0;
          margin: 0;
        }

        #regionDetails li {
          margin: 0.4rem 0;
          font-size: 1rem;
          line-height: 1.5;
          padding: 0.4rem 0.6rem;
          border-bottom: 1px solid #333;
        }

        #regionDetails li:last-child {
          border-bottom: none;
        }

        #regionDetails span.en {
          font-weight: bold;
          margin-right: 6px;
        }

        #regionDetails span.ar {
          font-weight: bold;
          margin-right: 6px;
        }

        .region-modal .heritage-close {
          position: absolute;
          top: 0px;
          right: 0px;
          font-size: 1.6rem;
          font-weight: bold;
          color: #e76c40;
          cursor: pointer;
          text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
          transition: color 0.3s, transform 0.2s;
        }

        .region-modal .heritage-close:hover {
          color: #9c2d3d;
          transform: scale(1.1);
        }

        /* Heritage Panel */
        .heritage-title {
          margin-bottom: 1rem;
          font-size: 1.5rem;
          font-weight: 600;
          text-align: center;
          letter-spacing: 0.5px;
          text-transform: uppercase;
          min-height: 33px;
        }

        .heritage-title .ar {
          font-size: 1.8rem;
        }

        .heritage-title.registered {
          color: #015740;
          text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
        }

        .heritage-title.potential {
          color: #D46B28;
          text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
        }

        .heritage-blocks {
          display: flex;
          gap: 2rem;
          justify-content: space-between;
          align-items: stretch;
          height: 60vh;
        }

        .heritage-column {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        /* Registered Sites Grid (8 items → 4 cols × 2 rows) */
        .heritage-column.registered .heritage-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          grid-template-rows: repeat(2, 1fr);
          gap: 0.8rem;
          flex: 1;
          width: 100%;
        }

        /* Potential Sites Grid (4 items → 2 cols × 2 rows) */
        .heritage-column.potential .heritage-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: repeat(2, 1fr);
          gap: 1rem;
          flex: 1;
          width: 100%;
        }

        .heritage-grid {
          display: grid;
          gap: 1rem;
          flex: 1;
          width: 100%;
        }

        .heritage-column:first-child .heritage-grid {
          grid-template-columns: repeat(2, 1fr);
          /* 8 items: 4 rows */
        }

        .heritage-column:last-child .heritage-grid {
          grid-template-columns: repeat(2, 1fr);
          /* 4 items: 2 rows */
        }

        .heritage-item {
          background-size: cover;
          background-position: center;
          position: relative;
          border-radius: 6px;
          overflow: hidden;
          cursor: pointer;
        }

        .heritage-item:hover {
          transform: scale(1.05);
        }

        .heritage-overlay {
          position: absolute;
          bottom: 0;
          width: 100%;
          padding: 0.4rem;
          background: rgba(0, 0, 0, 0.5);
          backdrop-filter: blur(4px);
          color: #fff;
          text-align: center;
          font-size: 0.8rem;
        }

        .heritage-overlay .ar {
          font-size: 1rem;
        }

        /* Popup Modal */
        .heritage-modal {
          display: none;
          position: fixed;
          z-index: 9999;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.85);
          justify-content: center;
          align-items: center;
        }

        .heritage-modal-content {
          position: relative;
          display: inline-block;
          max-width: 90vw;
          max-height: 70vh;
        }

        .heritage-modal-content img {
          display: block;
          max-width: 100%;
          max-height: 100%;
          border-radius: 8px;
          object-fit: contain;
        }

        .heritage-close {
          position: absolute;
          top: -12px;
          right: -12px;
          color: #fff;
          font-size: 1.8rem;
          font-weight: bold;
          cursor: pointer;
          background: rgba(0, 0, 0, 0.6);
          border-radius: 50%;
          line-height: 1;
          padding: 4px 10px;
        }

        /* Services Panel */
        .services-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
          gap: 1.5rem;
          align-items: start;
          margin-top: 2rem;
        }

        .services-info {
          background: linear-gradient(145deg, #1f1f1f, #413e3a);
          padding: 1.3rem;
          border: 1px solid #333;
          border-radius: 10px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
          color: #dcdcdc;
          text-align: center;
          cursor: pointer;
          transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
          height: 140px;
          overflow: hidden;
          position: relative;
          background-size: cover;
          background-position: center;
        }

        /* Dark overlay */
        .services-info::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.55);
          backdrop-filter: blur(1.5px);
          z-index: 1;
        }

        .services-info:hover {
          transform: translateY(-5px);
          box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7);
        }

        .services-title {
          position: relative;
          font-size: 1.4rem;
          color: #e76c40;
          font-weight: 500;
          text-align: center;
          z-index: 1;
        }

        .services-title .en {
          margin-bottom: 1rem;
        }

        .services-title .ar {
          font-size: 1.6rem;
          margin-bottom: 0rem;
        }

        .services-info p {
          position: relative;
          font-size: 0.95rem;
          line-height: 1.4;
          color: #dcdcdc;
          margin: 0;
          z-index: 1;
        }

        .services-info > p > .en {
          font-weight: 400;
        }

        .services-info > p > .ar {
          font-style: italic;
          margin-top: 0.3rem;
          font-size: 1.05rem;
        }

        #serviceDetails > h3 {
          padding-bottom: 1rem;
        }

        #serviceDetails > h3 > span.ar {
          font-size: 1.8rem;
        }

        #serviceDetails > p > span.ar {
          font-size: 1.2rem;
        }

        .partners-grid {
          display: flex;
          flex-wrap: wrap;
          gap: 1rem;
          justify-content: center;
          margin-top: 1rem;
        }

        .partners-grid img {
          height: 100px;
          object-fit: contain;
        }

        /* Contact Panel */
        .contact-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 2rem;
          align-items: start;
          margin-top: 2rem;
        }

        .contact-info {
          background: linear-gradient(145deg, #1f1f1f, #413e3a);
          padding: 2rem;
          border: 1px solid #333;
          border-radius: 10px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
          color: #dcdcdc;
          text-align: center;
        }

        .contact-title {
          font-size: 1.6rem;
          color: #e76c40;
          margin-bottom: 1.5rem;
          font-weight: 500;
        }

        .contact-title .ar {
          font-size: 1.9rem;
        }

        .contact-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 1.2rem;
          font-size: 1rem;
          line-height: 1.6;
        }

        .contact-icon {
          width: 22px;
          height: 22px;
          margin: 0.5rem;
          fill: #9c2d3d;
        }

        .contact-item span.en {
          font-weight: 500;
          color: #dcdcdc;
        }

        .contact-item span.ar {
          font-size: 1.3rem;
          color: #aaa;
          margin-top: 0.2rem;
        }

        /* Touch Feedback */
        .touch-feedback {
          position: absolute;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background: radial-gradient(circle, rgba(212, 175, 55, 0.3) 0%, transparent 70%);
          pointer-events: none;
          transform: scale(0);
          animation: touchRipple 0.6s ease-out;
        }

        @keyframes touchRipple {
          to {
            transform: scale(2);
            opacity: 0;
          }
        }

        /* Decorative Elements */
        .decorative-pattern {
          position: absolute;
          top: 0;
          right: 0;
          width: 300px;
          height: 100%;
          opacity: 0.05;
          background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><path d="M150,50 L200,100 L150,150 L100,100 Z M150,150 L200,200 L150,250 L100,200 Z" fill="none" stroke="gold" stroke-width="2"/></svg>');
          background-repeat: repeat;
        }

        /* Auto-scroll hint */
        .scroll-hint {
          position: absolute;
          bottom: 2rem;
          right: 8rem;
          color: #e76c40;
          font-size: 0.9rem;
          animation: pulse 2s infinite;
        }

        @keyframes pulse {

          0%,
          100% {
            opacity: 0.6;
          }

          50% {
            opacity: 1;
          }
        }