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

       html {
           scroll-behavior: smooth;
       }

       body {
           font-family: 'Inter', sans-serif;
           line-height: 1.6;
           color: #333;
           overflow-x: hidden;
       }

       /* Navigation */
       .navbar {
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           z-index: 1000;
           background: rgba(255, 255, 255, 0.9);
           backdrop-filter: blur(10px);
           border-bottom: 1px solid rgba(251, 146, 60, 0.2);
           transition: all 0.3s ease;
       }

       .nav-container {
           max-width: 1200px;
           margin: 0 auto;
           /* padding: 0 20px; */
           display: flex;
           justify-content: space-between;
           align-items: center;
           height: 70px;
       }

       .logo-container {
           display: flex;
           align-items: center;
           gap: 12px;
       }

       .logo-container a {
           padding-top: 15px;
       }

       .logo-image {
           height: 88px;
           width: 88px;
           object-fit: contain;
       }

       .logo-text {
           font-family: 'Playfair Display', serif;
           font-size: 20px;
           font-weight: 700;
           background: linear-gradient(135deg, #f97316, #a855f7);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
           background-clip: text;
       }

       .nav-menu {
           display: flex;
           list-style: none;
           gap: 30px;
       }

       .nav-link {
           text-decoration: none;
           color: #374151;
           font-weight: 500;
           transition: all 0.3s ease;
           position: relative;
       }

       .nav-link:hover {
           color: #f97316;
       }

       .nav-link::after {
           content: '';
           position: absolute;
           bottom: -5px;
           left: 0;
           width: 0;
           height: 2px;
           background: linear-gradient(90deg, #f97316, #a855f7);
           transition: width 0.3s ease;
       }

       .nav-link:hover::after {
           width: 100%;
       }

       .mobile-menu-btn {
           display: none;
           background: none;
           border: none;
           font-size: 24px;
           cursor: pointer;
           color: #374151;
       }

       /* Slider Section */
       .slider {
           top: 80px;
           width: 100%;
           height: 680px;
           position: relative;
           overflow: hidden;
           border-radius: 10px;
       }

       .list {
           display: flex;
           height: 100%;
           transition: transform 1s ease;
       }

       .list img {
           width: 100vw;
           height: 100%;
           object-fit: cover;
       }

       .buttons {
           position: absolute;
           top: 50%;
           left: 0;
           width: 100%;
           display: flex;
           justify-content: space-between;
           transform: translateY(-50%);
           padding: 0 20px;
       }

       .buttons button {
           width: 45px;
           height: 45px;
           background-color: rgba(255, 255, 255, 0.3);
           color: white;
           border: none;
           border-radius: 50%;
           font-size: 20px;
           cursor: pointer;
           transition: 0.3s;
       }

       .buttons button:hover {
           background-color: rgba(255, 255, 255, 0.6);
           color: #000;
       }

       .dots {
           position: absolute;
           bottom: 20px;
           width: 100%;
           display: flex;
           justify-content: center;
           align-items: center;
           gap: 10px;
       }

       .dots li {
           list-style: none;
           width: 12px;
           height: 12px;
           background-color: rgba(255, 255, 255, 0.6);
           border-radius: 50%;
           transition: all 0.3s ease;
           cursor: pointer;
       }

       .dots li.active {
           width: 30px;
           background-color: white;
           border-radius: 20px;
       }

       /* Hero Section */
       .hero {
           height: 100vh;
           background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://images.pexels.com/photos/162031/dubai-tower-arab-khalifa-162031.jpeg?auto=compress&cs=tinysrgb&w=1920&h=1080&fit=crop');
           background-size: cover;
           background-position: center;
           background-attachment: fixed;
           display: flex;
           align-items: center;
           justify-content: center;
           text-align: center;
           color: white;
           position: relative;
       }

       .hero-content {
           max-width: 800px;
           padding: 0 20px;
           z-index: 2;
       }

       .hero h1 {
           font-family: 'Playfair Display', serif;
           font-size: 4rem;
           font-weight: 700;
           margin-bottom: 20px;
           text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
       }

       .hero-subtitle {
           font-size: 1.3rem;
           margin-bottom: 30px;
           color: #fbbf24;
           text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
       }

       .cta-button {
           display: inline-block;
           padding: 15px 40px;
           background: linear-gradient(135deg, #f97316, #a855f7);
           color: white;
           text-decoration: none;
           border-radius: 50px;
           font-weight: 600;
           font-size: 1.1rem;
           transition: all 0.3s ease;
           border: 2px solid transparent;
           box-shadow: 0 10px 30px rgba(249, 115, 22, 0.3);
       }

       .cta-button:hover {
           transform: translateY(-3px);
           box-shadow: 0 15px 40px rgba(249, 115, 22, 0.4);
       }

       /* Section Styles */
       .section {
           padding: 100px 0;
           /* max-width: 1200px; */
           margin: 0 auto;
           /* px: 20px; */
       }

       .section-title {
           font-family: 'Playfair Display', serif;
           font-size: 3rem;
           text-align: center;
           margin-bottom: 20px;
           background: linear-gradient(135deg, #f97316, #a855f7);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
           background-clip: text;
       }

       .section-subtitle {
           text-align: center;
           font-size: 1.2rem;
           color: #6b7280;
           margin-bottom: 60px;
           max-width: 600px;
           margin-left: auto;
           margin-right: auto;
       }

       /* Landmark Cards */
       .landmark-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
           gap: 40px;
           padding: 0 20px;
       }

       .landmark-card {
           background: white;
           border-radius: 20px;
           overflow: hidden;
           box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
           transition: all 0.3s ease;
           border: 1px solid rgba(251, 146, 60, 0.1);
       }

       .landmark-card:hover {
           transform: translateY(-10px);
           box-shadow: 0 30px 80px rgba(249, 115, 22, 0.2);
       }

       .card-image {
           width: 100%;
           height: 250px;
           object-fit: cover;
           transition: transform 0.3s ease;
       }

       .landmark-card:hover .card-image {
           transform: scale(1.05);
       }

       .card-content {
           padding: 30px;
       }

       .card-title {
           font-family: 'Playfair Display', serif;
           font-size: 1.8rem;
           font-weight: 600;
           margin-bottom: 15px;
           color: #1f2937;
       }

       .card-description {
           color: #6b7280;
           margin-bottom: 25px;
           line-height: 1.7;
       }

       .price-text {
           font-size: 2rem;
           font-weight: bold;
           color: #f97316;
       }

       .learn-more-btn {
           display: inline-flex;
           align-items: center;
           gap: 10px;
           padding: 12px 25px;
           background: linear-gradient(135deg, #f97316, #a855f7);
           color: white;
           text-decoration: none;
           border-radius: 25px;
           font-weight: 500;
           transition: all 0.3s ease;
       }

       .learn-more-btn:hover {
           transform: translateX(5px);
           box-shadow: 0 10px 25px rgba(249, 115, 22, 0.3);
       }

       /* Parallax Sections */
       .parallax-section {
           height: 80vh;
           background-attachment: fixed;
           background-size: cover;
           background-position: center;
           display: flex;
           align-items: center;
           justify-content: center;
           text-align: center;
           color: white;
           position: relative;
       }

       .parallax-section::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           background: rgba(0, 0, 0, 0.5);
           z-index: 1;
       }

       .parallax-content {
           z-index: 2;
           max-width: 600px;
           padding: 0 20px;
       }

       .parallax-title {
           font-family: 'Playfair Display', serif;
           font-size: 3rem;
           margin-bottom: 20px;
           text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
       }

       .parallax-description {
           font-size: 1.2rem;
           margin-bottom: 30px;
           text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
       }

       .desert-section {
           background-image: url('https://images.pexels.com/photos/47013/red-desert-landscape-rock-47013.jpeg?auto=compress&cs=tinysrgb&w=1920&h=1080&fit=crop');
       }

       .palm-section {
           background-image: url('https://images.pexels.com/photos/1624438/pexels-photo-1624438.jpeg?auto=compress&cs=tinysrgb&w=1920&h=1080&fit=crop');
       }

       /* Individual Landmark Sections */
       .burj-khalifa-section {
           background: linear-gradient(135deg, #fef3c7, #fde68a);
           padding: 100px 0;
       }

       .burj-arab-section {
           background: linear-gradient(135deg, #ddd6fe, #e0e7ff);
           padding: 100px 0;
       }

       .jumeirah-section {
           background: linear-gradient(135deg, #fed7aa, #fdba74);
           padding: 100px 0;
       }

       /* Footer */
       .footer {
           background: linear-gradient(135deg, #1f2937, #374151);
           color: white;
           padding: 60px 0 30px;
       }

       .footer-content {
           max-width: 1200px;
           margin: 0 auto;
           padding: 0 20px;
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
           gap: 40px;
       }

       .footer-section h3 {
           font-family: 'Playfair Display', serif;
           font-size: 1.5rem;
           margin-bottom: 20px;
           color: #fbbf24;
       }

       .footer-section p,
       .footer-section li {
           color: #d1d5db;
           margin-bottom: 10px;
       }

       .social-links {
           display: flex;
           gap: 15px;
           margin-top: 20px;
       }

       .social-link {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           width: 40px;
           height: 40px;
           background: linear-gradient(135deg, #f97316, #a855f7);
           color: white;
           text-decoration: none;
           border-radius: 50%;
           font-size: 1.2rem;
           transition: all 0.3s ease;
       }

       .social-link:hover {
           transform: translateY(-3px) scale(1.1);
           box-shadow: 0 10px 25px rgba(249, 115, 22, 0.3);
       }

       .footer-bottom {
           text-align: center;
           margin-top: 40px;
           padding-top: 30px;
           border-top: 1px solid #4b5563;
           color: #9ca3af;
       }

       .footer-logo {
           display: flex;
           flex-direction: column;
           align-items: flex-start;
       }

       /* Tab Styles */
       .tab-pane {
           animation: fadeIn 0.5s ease-in-out;
       }

       @keyframes fadeIn {
           from {
               opacity: 0;
               transform: translateY(20px);
           }

           to {
               opacity: 1;
               transform: translateY(0);
           }
       }

       .tab-btn:hover {
           background: linear-gradient(135deg, #f97316, #a855f7) !important;
           color: white !important;
           transform: translateY(-2px);
           box-shadow: 0 5px 15px rgba(249, 115, 22, 0.3);
       }

       .tab-btn.active {
           background: linear-gradient(135deg, #f97316, #a855f7) !important;
           color: white !important;
       }


       /* contact as page */

       .row {
           display: flex;
           gap: 16px;
           flex-wrap: wrap
       }

       .col-50 {
           flex: 1 1 48%
       }

       label {
           display: block;
           font-size: 14px;
           margin-bottom: 6px
       }

       input[type="text"],
       input[type="email"],
       textarea {
           width: 100%;
           padding: 10px;
           border: 1px solid #ddd;
           border-radius: 6px;
           font-size: 14px
       }

       textarea {
           min-height: 140px
       }

       .btn {
           display: inline-flex;
           align-items: center;
           gap: 10px;
           padding: 12px 25px;
           background: linear-gradient(135deg, #f97316, #a855f7);
           color: white;
           text-decoration: none;
           border-radius: 25px;
           font-weight: 500;
           transition: all 0.3s ease;
       }

       .btn:hover {
           transform: translateX(5px);
           box-shadow: 0 10px 25px rgba(249, 115, 22, 0.3);
       }

       .errors {
           background: #ffefef;
           border: 1px solid #f5c2c2;
           color: #a94442;
           padding: 12px;
           border-radius: 6px;
           margin-bottom: 12px
       }

       .success {
           background: #e6ffef;
           border: 1px solid #bfeac8;
           color: #2b7a3b;
           padding: 12px;
           border-radius: 6px;
           margin-bottom: 12px
       }

       /* ✅ Responsive */
       @media screen and (max-width: 1024px) {
           .slider {
               height: 500px;
           }
       }

       /* Responsive Design */
       @media (max-width: 768px) {
           .nav-container {
               height: 80px;
           }

           .logo-container {
               padding: 0 9px;
           }

           .nav-menu {
               position: fixed;
               top: 82px;
               left: -100%;
               width: 100%;
               height: calc(100vh - 70px);
               background: rgba(255, 255, 255, 0.95);
               backdrop-filter: blur(10px);
               flex-direction: column;
               align-items: center;
               /* justify-content: center; */
               transition: left 0.3s ease;
           }

           .nav-menu.active {
               left: 0;
               padding-top: 20px;
           }

           /* .nav-menu li {
               padding-top: 20px;
           } */
           .mobile-menu-btn {
               display: block;
               padding-right: 14px;
           }

           .logo-text {
               font-size: 20px;
           }

           .logo-image {
               height: 105px;
               width: 105px;
           }

           .slider {
               top: 90px;
               height: 350px;
           }

           .buttons button {
               width: 35px;
               height: 35px;
               font-size: 16px;
           }

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

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

           .section-title {
               font-size: 2.2rem;
           }

           .parallax-title {
               font-size: 2.2rem;
           }

           .parallax-section {
               background-attachment: scroll;
           }

           .hero {
               background-attachment: scroll;
           }

           .landmark-grid {
               grid-template-columns: 1fr;
               padding: 0 20px;
           }

           .tab-navigation {
               flex-direction: column !important;
               border-radius: 20px !important;
           }

           .tab-btn {
               margin: 4px !important;
               min-width: auto !important;
           }

           .tab-pane>div {
               grid-template-columns: 1fr !important;
               gap: 20px !important;
           }

           .tab-pane img {
               height: 250px !important;
           }

           .parallax-section {
               height: 320px;

           }

           .cta-button {
               padding: 4px 14px;
               font-size: 0.9rem;
           }
       }

       @media (max-width:600px) {
           .col-50 {
               flex-basis: 100%
           }
       }

       @media (max-width: 480px) {
           .nav-container {
               height: 85px;
           }

           .logo-container {
               padding: 0 9px;
           }

           .slider {
               top: 90px;
               height: 350px;
           }

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

           .section-title {
               font-size: 1.8rem;
           }

           .parallax-title {
               font-size: 1.8rem;
           }

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

           .learn-more-btn {
               padding: 8px 15px;
               font-size: 11px;
           }

           .parallax-section {
               height: 400px;
           }

           .mobile-menu-btn {
               padding-right: 14px;
           }
       }