<!DOCTYPE html>

<head>

<title>Alam AlSafar Tourism - Tripoli, Libya | Umrah, Tours & Holiday Packages</title>

<style>

:root {

--gold: #C9A050;

--gold-light: #E0C878;

--gold-dark: #8B6914;

--navy: #0D1B2A;

--navy-light: #1B2D45;

--cream: #FBF7F0;

--sand: #F0E6D3;

--white: #FFFFFF;

--text: #2C2C2C;

--text-light: #5A5A5A;

--border: #E0D5C5;

--shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

--shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);

--radius: 12px;

--radius-sm: 8px;

--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

--font-main: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

--font-heading: Georgia, 'Times New Roman', serif;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

html {

scroll-behavior: smooth;

scroll-padding-top: 80px;

}

body {

font-family: var(--font-main);

color: var(--text);

background: var(--cream);

line-height: 1.6;

overflow-x: hidden;

}

/* ============ HEADER ============ */

.header {

position: fixed;

top: 0;

left: 0;

right: 0;

z-index: 1000;

background: rgba(13, 27, 42, 0.95);

backdrop-filter: blur(15px);

border-bottom: 2px solid var(--gold);

transition: var(--transition);

padding: 0 20px;

}

.header.scrolled {

box-shadow: 0 4px 25px rgba(0, 0, 0, 0.3);

}

.header-inner {

max-width: 1300px;

margin: 0 auto;

display: flex;

align-items: center;

justify-content: space-between;

height: 75px;

}

.logo {

display: flex;

align-items: center;

gap: 12px;

text-decoration: none;

color: var(--white);

}

.logo-icon {

width: 48px;

height: 48px;

background: var(--gold);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-size: 22px;

font-weight: bold;

color: var(--navy);

flex-shrink: 0;

}

.logo-text {

font-family: var(--font-heading);

font-size: 1.5rem;

font-weight: 700;

letter-spacing: 1px;

color: var(--white);

line-height: 1.2;

}

.logo-text span {

display: block;

font-size: 0.7rem;

font-family: var(--font-main);

letter-spacing: 3px;

color: var(--gold-light);

text-transform: uppercase;

font-weight: 400;

}

.nav-links {

display: flex;

list-style: none;

gap: 6px;

align-items: center;

}

.nav-links a {

color: #ccc;

text-decoration: none;

padding: 10px 16px;

border-radius: 25px;

font-size: 0.9rem;

font-weight: 500;

transition: var(--transition);

white-space: nowrap;

letter-spacing: 0.3px;

}

.nav-links a:hover,

.nav-links a.active {

color: var(--gold-light);

background: rgba(255, 255, 255, 0.05);

}

.nav-links .btn-nav {

background: var(--gold);

color: var(--navy) !important;

font-weight: 700;

padding: 10px 20px;

border-radius: 25px;

}

.nav-links .btn-nav:hover {

background: var(--gold-light);

color: var(--navy) !important;

}

.hamburger {

display: none;

flex-direction: column;

gap: 5px;

cursor: pointer;

background: none;

border: none;

padding: 8px;

z-index: 1001;

}

.hamburger span {

width: 28px;

height: 3px;

background: var(--white);

border-radius: 3px;

transition: var(--transition);

}

.hamburger.active span:nth-child(1) {

transform: rotate(45deg) translate(5px, 6px);

}

.hamburger.active span:nth-child(2) {

opacity: 0;

}

.hamburger.active span:nth-child(3) {

transform: rotate(-45deg) translate(5px, -6px);

}

/* ============ HERO ============ */

.hero {

min-height: 100vh;

background: linear-gradient(135deg,

rgba(13, 27, 42, 0.85) 0%,

rgba(13, 27, 42, 0.7) 40%,

rgba(30, 50, 40, 0.75) 100%),

url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><linearGradient id="g" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" style="stop-color:%23C9A050;stop-opacity:0.3"/><stop offset="100%25" style="stop-color:%231B2D45;stop-opacity:0.6"/></linearGradient></defs><rect fill="url(%23g)" width="1200" height="800"/><circle cx="200" cy="150" r="300" fill="%23C9A050" opacity="0.08"/><circle cx="1000" cy="600" r="400" fill="%23E0C878" opacity="0.06"/></svg>');

background-size: cover;

background-position: center;

background-attachment: fixed;

display: flex;

align-items: center;

justify-content: center;

padding: 100px 20px 60px;

position: relative;

}

.hero-content {

max-width: 1300px;

width: 100%;

text-align: center;

color: var(--white);

}

.hero-badge {

display: inline-block;

background: var(--gold);

color: var(--navy);

padding: 8px 20px;

border-radius: 25px;

font-weight: 700;

font-size: 0.85rem;

letter-spacing: 2px;

text-transform: uppercase;

margin-bottom: 20px;

}

.hero h1 {

font-family: var(--font-heading);

font-size: clamp(2.5rem, 5vw, 4.5rem);

font-weight: 700;

line-height: 1.15;

margin-bottom: 18px;

letter-spacing: 1px;

}

.hero h1 span {

color: var(--gold-light);

}

.hero p {

font-size: 1.2rem;

color: #ccc;

max-width: 650px;

margin: 0 auto 35px;

line-height: 1.7;

}

/* ============ BOOKING WIDGET ============ */

.booking-widget {

background: var(--white);

border-radius: var(--radius);

box-shadow: var(--shadow-lg);

padding: 30px;

max-width: 900px;

margin: 0 auto;

text-align: left;

position: relative;

z-index: 10;

}

.booking-tabs {

display: flex;

gap: 4px;

margin-bottom: 24px;

border-bottom: 2px solid #eee;

padding-bottom: 0;

}

.booking-tab {

padding: 12px 28px;

border: none;

background: transparent;

cursor: pointer;

font-weight: 600;

font-size: 0.95rem;

color: #888;

border-radius: 8px 8px 0 0;

transition: var(--transition);

position: relative;

letter-spacing: 0.5px;

}

.booking-tab.active {

color: var(--navy);

background: #f9f6f0;

}

.booking-tab.active::after {

content: '';

position: absolute;

bottom: -2px;

left: 0;

right: 0;

height: 3px;

background: var(--gold);

border-radius: 3px 3px 0 0;

}

.booking-tab:hover {

color: var(--navy);

}

.booking-form {

display: none;

grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

gap: 14px;

align-items: end;

}

.booking-form.active {

display: grid;

}

.form-group {

display: flex;

flex-direction: column;

gap: 5px;

}

.form-group label {

font-size: 0.78rem;

font-weight: 700;

text-transform: uppercase;

letter-spacing: 1px;

color: #777;

}

.form-group input,

.form-group select {

padding: 12px 14px;

border: 2px solid #e8e8e8;

border-radius: var(--radius-sm);

font-size: 0.95rem;

font-family: var(--font-main);

transition: var(--transition);

background: #fafafa;

width: 100%;

color: var(--text);

}

.form-group input:focus,

.form-group select:focus {

outline: none;

border-color: var(--gold);

background: #fff;

box-shadow: 0 0 0 4px rgba(201, 160, 80, 0.08);

}

.btn-search {

background: var(--gold);

color: var(--navy);

border: none;

padding: 13px 30px;

border-radius: var(--radius-sm);

font-weight: 700;

font-size: 1rem;

cursor: pointer;

transition: var(--transition);

letter-spacing: 0.5px;

white-space: nowrap;

height: 48px;

align-self: end;

}

.btn-search:hover {

background: var(--gold-dark);

color: #fff;

transform: translateY(-2px);

box-shadow: 0 6px 20px rgba(139, 105, 20, 0.3);

}

/* ============ SECTIONS ============ */

.section {

padding: 80px 20px;

}

.section-inner {

max-width: 1300px;

margin: 0 auto;

}

.section-header {

text-align: center;

margin-bottom: 50px;

}

.section-badge {

display: inline-block;

background: rgba(201, 160, 80, 0.15);

color: var(--gold-dark);

padding: 6px 18px;

border-radius: 25px;

font-weight: 700;

font-size: 0.8rem;

letter-spacing: 2px;

text-transform: uppercase;

margin-bottom: 12px;

}

.section-title {

font-family: var(--font-heading);

font-size: clamp(2rem, 3.5vw, 2.8rem);

color: var(--navy);

margin-bottom: 12px;

letter-spacing: 0.5px;

}

.section-subtitle {

color: var(--text-light);

font-size: 1.1rem;

max-width: 600px;

margin: 0 auto;

}

.cards-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 24px;

}

.card {

background: var(--white);

border-radius: var(--radius);

overflow: hidden;

box-shadow: var(--shadow);

transition: var(--transition);

border: 1px solid transparent;

display: flex;

flex-direction: column;

}

.card:hover {

transform: translateY(-6px);

box-shadow: var(--shadow-lg);

border-color: var(--gold-light);

}

.card-img {

height: 200px;

background-size: cover;

background-position: center;

position: relative;

}

.card-img .card-badge {

position: absolute;

top: 14px;

left: 14px;

background: var(--gold);

color: var(--navy);

padding: 5px 14px;

border-radius: 20px;

font-weight: 700;

font-size: 0.75rem;

letter-spacing: 1px;

}

.card-body {

padding: 22px;

flex: 1;

display: flex;

flex-direction: column;

}

.card-body h3 {

font-family: var(--font-heading);

font-size: 1.25rem;

color: var(--navy);

margin-bottom: 8px;

letter-spacing: 0.3px;

}

.card-body p {

color: var(--text-light);

font-size: 0.9rem;

line-height: 1.6;

flex: 1;

margin-bottom: 14px;

}

.card-body .card-price {

font-weight: 700;

color: var(--gold-dark);

font-size: 1.2rem;

margin-bottom: 14px;

}

.btn-outline {

display: inline-block;

padding: 10px 22px;

border: 2px solid var(--gold);

color: var(--gold-dark);

border-radius: 25px;

text-decoration: none;

font-weight: 600;

transition: var(--transition);

text-align: center;

font-size: 0.9rem;

letter-spacing: 0.5px;

cursor: pointer;

background: transparent;

}

.btn-outline:hover {

background: var(--gold);

color: var(--navy);

}

.btn-solid {

display: inline-block;

padding: 12px 28px;

background: var(--gold);

color: var(--navy);

border-radius: 25px;

text-decoration: none;

font-weight: 700;

transition: var(--transition);

text-align: center;

letter-spacing: 0.5px;

cursor: pointer;

border: none;

font-size: 1rem;

}

.btn-solid:hover {

background: var(--gold-dark);

color: #fff;

transform: translateY(-2px);

box-shadow: 0 6px 20px rgba(139, 105, 20, 0.3);

}

/* ============ UMBRAH SECTION ============ */

#umrah {

background: var(--navy);

color: #fff;

}

#umrah .section-title {

color: var(--gold-light);

}

#umrah .section-subtitle {

color: #bbb;

}

#umrah .card {

background: var(--navy-light);

border: 1px solid rgba(255, 255, 255, 0.1);

}

#umrah .card-body h3 {

color: var(--gold-light);

}

#umrah .card-body p {

color: #bbb;

}

#umrah .card-body .card-price {

color: var(--gold);

}

#umrah .btn-outline {

border-color: var(--gold);

color: var(--gold-light);

}

#umrah .btn-outline:hover {

background: var(--gold);

color: var(--navy);

}

/* ============ ABOUT / CONTACT ============ */

.two-col {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 40px;

align-items: center;

}

.about-img {

border-radius: var(--radius);

height: 400px;

background: linear-gradient(135deg, #C9A05030, #1B2D4560),

url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400"><rect fill="%23C9A050" width="600" height="400" opacity="0.2"/><text x="50%25" y="50%25" text-anchor="middle" fill="%23fff" font-size="60" font-family="serif" dy=".3em">🕌</text></svg>');

background-size: cover;

background-position: center;

}

.contact-form input,

.contact-form textarea,

.contact-form select {

width: 100%;

padding: 12px 14px;

border: 2px solid #e8e8e8;

border-radius: var(--radius-sm);

font-size: 0.95rem;

font-family: var(--font-main);

margin-bottom: 12px;

transition: var(--transition);

background: #fafafa;

}

.contact-form input:focus,

.contact-form textarea:focus,

.contact-form select:focus {

outline: none;

border-color: var(--gold);

background: #fff;

}

.contact-form textarea {

resize: vertical;

min-height: 120px;

}

/* ============ FOOTER ============ */

.footer {

background: var(--navy);

color: #ccc;

padding: 50px 20px 30px;

border-top: 3px solid var(--gold);

}

.footer-inner {

max-width: 1300px;

margin: 0 auto;

display: grid;

grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

gap: 30px;

}

.footer h4 {

color: var(--gold-light);

font-family: var(--font-heading);

margin-bottom: 14px;

font-size: 1.1rem;

}

.footer a {

color: #aaa;

text-decoration: none;

display: block;

margin-bottom: 6px;

font-size: 0.9rem;

transition: var(--transition);

}

.footer a:hover {

color: var(--gold-light);

}

.footer-bottom {

text-align: center;

padding-top: 25px;

margin-top: 25px;

border-top: 1px solid rgba(255, 255, 255, 0.1);

font-size: 0.85rem;

color: #888;

}

.admin-trigger {

color: #555 !important;

font-size: 0.75rem !important;

cursor: pointer;

opacity: 0.4;

transition: var(--transition);

}

.admin-trigger:hover {

opacity: 1;

color: var(--gold-light) !important;

}

/* ============ ADMIN PANEL ============ */

.admin-overlay {

position: fixed;

inset: 0;

background: rgba(0, 0, 0, 0.7);

z-index: 9999;

display: none;

align-items: center;

justify-content: center;

}

.admin-overlay.open {

display: flex;

}

.admin-panel {

background: #fff;

border-radius: var(--radius);

width: 95vw;

max-width: 1100px;

max-height: 85vh;

overflow-y: auto;

box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);

position: relative;

}

.admin-header {

background: var(--navy);

color: #fff;

padding: 16px 24px;

border-radius: var(--radius) var(--radius) 0 0;

display: flex;

justify-content: space-between;

align-items: center;

position: sticky;

top: 0;

z-index: 10;

}

.admin-header h2 {

font-family: var(--font-heading);

letter-spacing: 1px;

font-size: 1.3rem;

}

.admin-close {

background: none;

border: none;

color: #fff;

font-size: 1.8rem;

cursor: pointer;

padding: 0 8px;

}

.admin-body {

padding: 24px;

display: grid;

grid-template-columns: 220px 1fr;

gap: 24px;

min-height: 400px;

}

.admin-sidebar {

border-right: 2px solid #eee;

padding-right: 10px;

}

.admin-sidebar button {

display: block;

width: 100%;

padding: 10px 14px;

border: none;

background: transparent;

text-align: left;

cursor: pointer;

border-radius: 6px;

margin-bottom: 4px;

font-weight: 500;

transition: var(--transition);

font-size: 0.9rem;

}

.admin-sidebar button:hover,

.admin-sidebar button.active {

background: #f5f0e5;

color: var(--gold-dark);

font-weight: 700;

}

.admin-content h3 {

margin-bottom: 16px;

color: var(--navy);

}

.admin-content label {

display: block;

font-weight: 600;

margin-bottom: 4px;

font-size: 0.85rem;

color: #555;

}

.admin-content input,

.admin-content textarea,

.admin-content select {

width: 100%;

padding: 10px 12px;

border: 2px solid #e8e8e8;

border-radius: 6px;

margin-bottom: 12px;

font-family: var(--font-main);

font-size: 0.9rem;

}

.admin-content textarea {

min-height: 80px;

resize: vertical;

}

.admin-content .btn-save {

background: var(--gold);

color: var(--navy);

border: none;

padding: 10px 24px;

border-radius: 25px;

font-weight: 700;

cursor: pointer;

font-size: 0.9rem;

}

.admin-content .btn-save:hover {

background: var(--gold-dark);

color: #fff;

}

.toast {

position: fixed;

bottom: 30px;

right: 30px;

background: #2e7d32;

color: #fff;

padding: 14px 24px;

border-radius: 8px;

font-weight: 600;

z-index: 99999;

animation: slideIn 0.4s ease;

box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);

}

@keyframes slideIn {

from {

transform: translateX(120%);

opacity: 0;

}

to {

transform: translateX(0);

opacity: 1;

}

/* ============ RESPONSIVE ============ */

@media (max-width: 900px) {

.nav-links {

position: fixed;

top: 0;

right: -100%;

width: 280px;

height: 100vh;

background: var(--navy);

flex-direction: column;

padding: 90px 30px 30px;

gap: 10px;

transition: var(--transition);

border-left: 2px solid var(--gold);

z-index: 999;

}

.nav-links.open {

right: 0;

}

.hamburger {

display: flex;

}

.booking-form {

grid-template-columns: 1fr 1fr;

}

.two-col {

grid-template-columns: 1fr;

}

.about-img {

height: 250px;

order: -1;

}

.admin-body {

grid-template-columns: 1fr;

}

.admin-sidebar {

display: flex;

flex-wrap: wrap;

gap: 6px;

border-right: none;

border-bottom: 2px solid #eee;

padding-bottom: 12px;

padding-right: 0;

}

.admin-sidebar button {

width: auto;

font-size: 0.8rem;

padding: 8px 14px;

}

@media (max-width: 500px) {

.booking-form {

grid-template-columns: 1fr;

}

.hero h1 {

font-size: 2rem;

}

.booking-widget {

padding: 18px;

}

.booking-tab {

padding: 10px 16px;

font-size: 0.85rem;

}

.cards-grid {

grid-template-columns: 1fr;

}

</style>

</head>

<body>

<div class="logo-text">Alam AlSafar<span>Tripoli, Libya</span></div>

</a>

</button>

<li><a href="#umrah">Umrah</a></li>

<li><a href="#tours">Libya Tours</a></li>

<li><a href="#packages">Packages</a></li>

<li><a href="#transfers">Transfers</a></li>

<li><a href="#groups">Groups</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</div>

</header>

<div class="hero-badge">🌍 Trusted Since 2010</div>

<h1>Discover the World with <span>Alam AlSafar</span></h1>

<p>Your premier travel partner in Tripoli, Libya. Offering Umrah services, Libya inbound tours, holiday packages, group bookings & luxury transfers.</p>

<button class="booking-tab active" data-tab="flights">✈️ Flights</button>

<button class="booking-tab" data-tab="hotels">🏨 Hotels</button>

</div>

<option value="">Select departure</option>

<option>Tripoli (TIP) - Mitiga Intl</option>

<option>Benghazi (BEN)</option>

<option>Misrata (MRA)</option>

<option>Istanbul (IST)</option>

<option>Cairo (CAI)</option>

<option>Dubai (DXB)</option>

<option>Jeddah (JED)</option>

<option>Medina (MED)</option>

</select>

</div>

<option value="">Select destination</option>

<option>Jeddah (JED)</option>

<option>Medina (MED)</option>

<option>Istanbul (IST)</option>

<option>Dubai (DXB)</option>

<option>Cairo (CAI)</option>

<option>Tunis (TUN)</option>

<option>London (LHR)</option>

<option>Tripoli (TIP)</option>

</select>

</div>

<label>Departure</label>

</div>

<label>Return</label>

</div>

<label>Passengers</label>

<option>1 Passenger</option>

<option>2 Passengers</option>

<option>3 Passengers</option>

<option>4+ Passengers</option>

</select>

</div>

<button type="submit" class="btn-search">🔍 Search Flights</button>

</form>

<label>Destination</label>

<option value="">Select city</option>

<option>Tripoli, Libya</option>

<option>Mecca, Saudi Arabia</option>

<option>Medina, Saudi Arabia</option>

<option>Istanbul, Turkey</option>

<option>Dubai, UAE</option>

<option>Cairo, Egypt</option>

<option>Tunis, Tunisia</option>

</select>

</div>

<label>Check-in</label>

</div>

<label>Check-out</label>

</div>

<label>Guests</label>

<option>1 Guest</option>

<option>2 Guests</option>

<option>3 Guests</option>

<option>4+ Guests</option>

</select>

</div>

<label>Rooms</label>

<option>2 Rooms</option>

<option>3 Rooms</option>

</select>

</div>

<button type="submit" class="btn-search">🔍 Search Hotels</button>

</form>

</div>

</section>

<div class="section-badge">🕋 Spiritual Journey</div>

<h2 class="section-title">Umrah Services</h2>

<p class="section-subtitle">Complete Umrah packages from Libya with flights, visas, hotels & guided tours. Experience a seamless spiritual journey.</p>

</div>

<span class="card-badge">Popular</span>

</div>

<h3>Economy Umrah Package</h3>

<p>7-day Umrah package including flights from Tripoli, 3-star hotel near Haram, visa processing & group guidance.</p>

<a href="#contact" class="btn-outline">Inquire Now</a>

</div>

<span class="card-badge">Premium</span>

</div>

<h3>Deluxe Umrah Experience</h3>

<p>10-day premium Umrah with 5-star hotel, private transfers, VIP visa service & dedicated spiritual guide throughout.</p>

<a href="#contact" class="btn-outline">Inquire Now</a>

</div>

<span class="card-badge">Group</span>

</div>

<h3>Family Umrah Group</h3>

<p>Special rates for families & groups of 5+. Includes interconnected rooms, group transport & dedicated coordinator.</p>

<div class="card-price">From 3,200 LYD / person</div>

<a href="#contact" class="btn-outline">Inquire Now</a>

</div>

</section>

<div class="section-badge">🏛️ Discover Libya</div>

<h2 class="section-title">Libya Inbound Tours</h2>

<p class="section-subtitle">Explore the rich history and stunning landscapes of Libya — from Roman ruins to Saharan adventures.</p>

</div>

<span class="card-badge">Heritage</span>

</div>

<h3>Leptis Magna & Sabratha</h3>

<p>Full-day guided tour to UNESCO World Heritage Roman sites. Includes transport, lunch & expert historian guide.</p>

</div>

<span class="card-badge">Desert</span>

</div>

<h3>Sahara Desert Adventure</h3>

<p>3-day expedition to the Libyan Sahara. Camel treks, camping under stars, oasis visits & traditional meals.</p>

</div>

<span class="card-badge">Mountains</span>

</div>

<h3>Nafusa Mountains Trek</h3>

<p>Scenic hiking through the Nafusa mountain range. Berber villages, panoramic views & authentic local cuisine.</p>

</div>

</section>

<div class="section-badge">🏖️ Curated Getaways</div>

<h2 class="section-title">Holiday Packages</h2>

<p class="section-subtitle">All-inclusive holiday packages to top destinations with flights, hotels, transfers & activities.</p>

</div>

<span class="card-badge">Best Seller</span>

</div>

<h3>Istanbul Discovery</h3>

<p>5-day Istanbul package: flights, 4-star hotel, Bosphorus cruise, Blue Mosque & Grand Bazaar tours.</p>

<a href="#contact" class="btn-outline">View Details</a>

</div>

<span class="card-badge">Luxury</span>

</div>

<h3>Dubai Luxury Escape</h3>

<p>7-day Dubai experience: flights, 5-star resort, Burj Khalifa, desert safari & shopping tour.</p>

<a href="#contact" class="btn-outline">View Details</a>

</div>

<span class="card-badge">Nearby</span>

</div>

<h3>Tunisia Coastal Retreat</h3>

<p>6-day Tunisian holiday: flights, beach resort, Carthage ruins, Sidi Bou Said & medina tours.</p>

<a href="#contact" class="btn-outline">View Details</a>

</div>

</section>

<h2 class="section-title">Airport & City Transfers</h2>

<p class="section-subtitle">Reliable, comfortable transfers across Tripoli and beyond. Private cars, vans & luxury vehicles available.</p>

</div>

</div>

<h3>Airport Pickup</h3>

<p>Mitiga Airport to any Tripoli location. Fixed pricing, flight tracking & meet-and-greet service.</p>

<a href="#contact" class="btn-outline">Book Transfer</a>

</div>

</div>

<h3>Group Van Transfer</h3>

<p>Spacious vans for groups up to 12 people. Ideal for family arrivals, corporate events & tour groups.</p>

<a href="#contact" class="btn-outline">Book Transfer</a>

</div>

<span class="card-badge">Luxury</span>

</div>

<h3>Luxury Chauffeur</h3>

<p>Premium sedan or SUV with professional driver. Bottled water, WiFi & impeccable service included.</p>

<a href="#contact" class="btn-outline">Book Transfer</a>

</div>

</section>

<div class="section-badge">👥 Travel Together</div>

<h2 class="section-title" style="color:var(--gold-light);">Group Booking</h2>

<p class="section-subtitle" style="color:#bbb;">Specialized group travel services for families, corporate teams & organizations. Dedicated coordinator & exclusive rates.</p>

</div>

</div>

<h3 style="color:var(--gold-light);">Family Groups</h3>

<p style="color:#bbb;">Tailored packages for family reunions & multi-generational travel. Interconnected rooms & family-friendly activities.</p>

<div class="card-price" style="color:var(--gold);">Custom Quote</div>

<a href="#contact" class="btn-outline" style="border-color:var(--gold);color:var(--gold-light);">Get Quote</a>

</div>

</div>

<h3 style="color:var(--gold-light);">Corporate Travel</h3>

<p style="color:#bbb;">Business group bookings with flexible itineraries, conference arrangements & corporate rates at top hotels.</p>

<div class="card-price" style="color:var(--gold);">Custom Quote</div>

<a href="#contact" class="btn-outline" style="border-color:var(--gold);color:var(--gold-light);">Get Quote</a>

</div>

</div>

<h3 style="color:var(--gold-light);">School & University</h3>

<p style="color:#bbb;">Educational group trips with curated itineraries. Safe accommodations, guided tours & budget-friendly packages.</p>

<div class="card-price" style="color:var(--gold);">Custom Quote</div>

<a href="#contact" class="btn-outline" style="border-color:var(--gold);color:var(--gold-light);">Get Quote</a>

</div>

</section>

<div>

<div class="section-badge">📍 Tripoli, Libya</div>

<h2 class="section-title" style="text-align:left;">Get In Touch</h2>

<p style="color:var(--text-light);margin-bottom:20px;">Let us help you plan your perfect journey. Our team is ready to assist with bookings, inquiries & custom itineraries.</p>

<p style="margin-bottom:8px;"><strong>📍 Address:</strong> AlSafar Building, Gergarish Road, Tripoli, Libya</p>

<p style="margin-bottom:8px;"><strong>📞 Phone:</strong> +218 21-444-1234 | +218 91-234-5678</p>

<p style="margin-bottom:8px;"><strong>📧 Email:</strong> info@alamalsafar.ly</p>

<p style="margin-bottom:8px;"><strong>🕐 Hours:</strong> Sat–Thu: 9:00 AM – 7:00 PM</p>

</div>

<div>

<option value="">Select Service</option>

<option>Umrah Package</option>

<option>Libya Tour</option>

<option>Holiday Package</option>

<option>Transfer</option>

<option>Group Booking</option>

<option>Other</option>

</select>

<button type="submit" class="btn-solid">Send Message ✉️</button>

</form>

</div>

</section>

<div>

<h4>🕌 Alam AlSafar</h4>

<p style="font-size:0.9rem;">Your trusted travel partner in Tripoli, Libya. Specializing in Umrah, inbound tours, holiday packages & more since 2010.</p>

</div>

<div>

<h4>Quick Links</h4>

<a href="#umrah">Umrah Services</a>

<a href="#tours">Libya Tours</a>

<a href="#packages">Holiday Packages</a>

<a href="#transfers">Transfers</a>

<a href="#groups">Group Booking</a>

</div>

<div>

<h4>Contact</h4>

<a href="mailto:info@alamalsafar.ly">info@alamalsafar.ly</a>

<a href="#">Gergarish Road, Tripoli</a>

</div>

<div>

<h4>Follow Us</h4>

<a href="#">Facebook</a>

<a href="#">Instagram</a>

<a href="#">WhatsApp</a>

</div>

<a class="admin-trigger" onclick="openAdminPanel()" title="Admin Control Panel">🔑 Admin Panel</a>

</div>

</footer>

<h2>⚙️ Admin Control Panel</h2>

</div>

<button class="active" data-admin-section="dashboard">📊 Dashboard</button>

<button data-admin-section="pages">📄 Page Content</button>

<button data-admin-section="umrah-admin">🕋 Umrah Packages</button>

<button data-admin-section="tours-admin">🏛️ Libya Tours</button>

<button data-admin-section="packages-admin">🏖️ Holiday Packages</button>

<button data-admin-section="transfers-admin">🚐 Transfers</button>

<button data-admin-section="groups-admin">👥 Group Booking</button>

</div>

</div>

// ============ INITIALIZATION ============

document.addEventListener('DOMContentLoaded', () => {

setMinDates();

initBookingTabs();

initMobileMenu();

initScrollEffects();

initAdminPanel();

loadSavedContent();

});

// Set min dates for date inputs

function setMinDates() {

const today = new Date().toISOString().split('T')[0];

const dateInputs = document.querySelectorAll('input[type="date"]');

dateInputs.forEach(input => {

if (!input.min) input.min = today;

if (!input.value && input.id.includes('Dep') || input.id.includes('CheckIn')) {

input.value = today;

}

});

}

// ============ BOOKING TABS ============

function initBookingTabs() {

const tabs = document.querySelectorAll('.booking-tab');

const forms = document.querySelectorAll('.booking-form');

tabs.forEach(tab => {

tab.addEventListener('click', () => {

tabs.forEach(t => t.classList.remove('active'));

forms.forEach(f => f.classList.remove('active'));

tab.classList.add('active');

const target = document.querySelector(`.booking-form[data-type="${tab.dataset.tab}"]`);

if (target) target.classList.add('active');

});

}

// ============ BOOKING SEARCH ============

function handleBookingSearch(e, type) {

e.preventDefault();

const form = e.target;

const formData = new FormData(form);

let details = '';

if (type === 'flight') {

const from = form.querySelectorAll('select')[0].value || 'Selected departure';

const to = form.querySelectorAll('select')[1].value || 'Selected destination';

const dep = form.querySelector('#flightDepDate')?.value || 'N/A';

const ret = form.querySelector('#flightRetDate')?.value || 'One-way';

details = `✈️ Flight Search:\nFrom: ${from}\nTo: ${to}\nDeparture: ${dep}\nReturn: ${ret}`;

} else {

const dest = form.querySelector('select').value || 'Selected city';

const checkIn = form.querySelector('#hotelCheckIn')?.value || 'N/A';

const checkOut = form.querySelector('#hotelCheckOut')?.value || 'N/A';

details = `🏨 Hotel Search:\nDestination: ${dest}\nCheck-in: ${checkIn}\nCheck-out: ${checkOut}`;

}

showToast(`🔍 Searching... ${type === 'flight' ? 'Flights' : 'Hotels'} results loading!`);

console.log('Booking search:', details);

// Simulate search - in production this would call an API

setTimeout(() => {

alert(

`🔍 ${type === 'flight' ? 'Flight' : 'Hotel'} Search Results\n\n${details}\n\n📞 For instant booking, please contact us at +218 21-444-1234\n\n(Simulated search — integrate real API for production)`

);

}, 800);

}

// ============ CONTACT FORM ============

function handleContactSubmit(e) {

e.preventDefault();

const name = e.target.querySelector('input[placeholder*="Name"]')?.value || 'Guest';

showToast(`✅ Thank you, ${name}! Your message has been received. We'll contact you shortly.`);

e.target.reset();

}

// ============ MOBILE MENU ============

function initMobileMenu() {

const hamburger = document.getElementById('hamburger');

const navLinks = document.getElementById('navLinks');

hamburger.addEventListener('click', () => {

hamburger.classList.toggle('active');

navLinks.classList.toggle('open');

});

// Close menu on link click

navLinks.querySelectorAll('a').forEach(link => {

link.addEventListener('click', () => {

hamburger.classList.remove('active');

navLinks.classList.remove('open');

});

}

// ============ SCROLL EFFECTS ============

function initScrollEffects() {

const header = document.getElementById('header');

window.addEventListener('scroll', () => {

header.classList.toggle('scrolled', window.scrollY > 50);

});

// Smooth scroll for nav links

document.querySelectorAll('a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function(e) {

const target = document.querySelector(this.getAttribute('href'));

if (target) {

e.preventDefault();

target.scrollIntoView({ behavior: 'smooth' });

}

});

}

// ============ TOAST NOTIFICATION ============

function showToast(message) {

const container = document.getElementById('toastContainer');

const toast = document.createElement('div');

toast.className = 'toast';

toast.textContent = message;

container.appendChild(toast);

setTimeout(() => {

toast.style.opacity = '0';

toast.style.transition = 'opacity 0.4s';

setTimeout(() => toast.remove(), 400);

}, 3000);

}

// ============ ADMIN PANEL ============

function openAdminPanel() {

const pw = prompt('Enter admin password (default: admin123):');

if (pw === 'admin123' || pw === 'alam2026') {

document.getElementById('adminOverlay').classList.add('open');

document.body.style.overflow = 'hidden';

renderAdminSection('dashboard');

showToast('🔓 Welcome, Admin!');

} else if (pw) {

alert('❌ Incorrect password.');

}

function closeAdminPanel() {

document.getElementById('adminOverlay').classList.remove('open');

document.body.style.overflow = '';

}

function initAdminPanel() {

// Close on overlay click

document.getElementById('adminOverlay').addEventListener('click', function(e) {

if (e.target === this) closeAdminPanel();

});

// Sidebar navigation

document.querySelectorAll('.admin-sidebar button').forEach(btn => {

btn.addEventListener('click', function() {

document.querySelectorAll('.admin-sidebar button').forEach(b => b.classList

.remove('active'));

this.classList.add('active');

renderAdminSection(this.dataset.adminSection);

});

// Escape key

document.addEventListener('keydown', function(e) {

if (e.key === 'Escape') closeAdminPanel();

});

}

function renderAdminSection(section) {

const content = document.getElementById('adminContent');

const savedData = JSON.parse(localStorage.getItem('alamalsafar_cms') || '{}');

const templates = {

dashboard: `

<h3>📊 Dashboard</h3>

<p style="color:#555;">Welcome to the Alam AlSafar Control Panel. Use the sidebar to manage website content.</p>

<h4 style="color:var(--navy);">🕋 Umrah</h4>

<small>Active Packages</small>

</div>

<h4 style="color:var(--navy);">🏛️ Tours</h4>

<small>Libya Tours</small>

</div>

<h4 style="color:var(--navy);">🏖️ Packages</h4>

<small>Holiday Deals</small>

</div>

<h4 style="color:var(--navy);">📅 Bookings</h4>

<small>Pending</small>

</div>

<p style="margin-top:20px;color:#888;">💡 All changes made in the admin panel are saved locally in your browser.</p>

pages: `

<h3>📄 Page Content Editor</h3>

<label>Hero Title</label>

<label>Hero Subtitle</label>

<textarea id="cms-hero-subtitle">${savedData.heroSubtitle || 'Your premier travel partner in Tripoli, Libya. Offering Umrah services, Libya inbound tours, holiday packages, group bookings & luxury transfers.'}</textarea>

<label>About / Contact Intro</label>

<textarea id="cms-about-text">${savedData.aboutText || 'Let us help you plan your perfect journey. Our team is ready to assist with bookings, inquiries & custom itineraries.'}</textarea>

<button class="btn-save" onclick="saveCMSData()">💾 Save Page Content</button>

'umrah-admin': `

<h3>🕋 Umrah Packages Management</h3>

<p style="color:#888;">Edit Umrah package details below:</p>

<label>Package 1 Title</label>

<label>Package 1 Description</label>

<textarea id="cms-umrah1-desc">${savedData.umrah1Desc || '7-day Umrah package including flights from Tripoli, 3-star hotel near Haram, visa processing & group guidance.'}</textarea>

<label>Package 1 Price</label>

<button class="btn-save" onclick="saveCMSData()">💾 Save Umrah Content</button>

'tours-admin': `

<h3>🏛️ Libya Tours Management</h3>

<label>Tour 1 Title</label>

<label>Tour 1 Description</label>

<textarea id="cms-tour1-desc">${savedData.tour1Desc || 'Full-day guided tour to UNESCO World Heritage Roman sites. Includes transport, lunch & expert historian guide.'}</textarea>

<label>Tour 1 Price</label>

<button class="btn-save" onclick="saveCMSData()">💾 Save Tours Content</button>

'packages-admin': `

<h3>🏖️ Holiday Packages Management</h3>

<label>Package 1 Title</label>

<label>Package 1 Description</label>

<textarea id="cms-pack1-desc">${savedData.pack1Desc || '5-day Istanbul package: flights, 4-star hotel, Bosphorus cruise, Blue Mosque & Grand Bazaar tours.'}</textarea>

<label>Package 1 Price</label>

<button class="btn-save" onclick="saveCMSData()">💾 Save Packages Content</button>

'transfers-admin': `

<h3>🚐 Transfers Management</h3>

<label>Transfer 1 Title</label>

<label>Transfer 1 Description</label>

<textarea id="cms-trans1-desc">${savedData.trans1Desc || 'Mitiga Airport to any Tripoli location. Fixed pricing, flight tracking & meet-and-greet service.'}</textarea>

<label>Transfer 1 Price</label>

<button class="btn-save" onclick="saveCMSData()">💾 Save Transfers Content</button>

'groups-admin': `

<h3>👥 Group Booking Management</h3>

<label>Group Type 1 Title</label>

<label>Group Type 1 Description</label>

<textarea id="cms-group1-desc">${savedData.group1Desc || 'Tailored packages for family reunions & multi-generational travel. Interconnected rooms & family-friendly activities.'}</textarea>

<button class="btn-save" onclick="saveCMSData()">💾 Save Groups Content</button>

};

content.innerHTML = templates[section] || templates['dashboard'];

}

function saveCMSData() {

const data = JSON.parse(localStorage.getItem('alamalsafar_cms') || '{}');

// Gather all CMS inputs

const cmsIds = [

'cms-hero-title', 'cms-hero-subtitle', 'cms-about-text',

'cms-umrah1-title', 'cms-umrah1-desc', 'cms-umrah1-price',

'cms-tour1-title', 'cms-tour1-desc', 'cms-tour1-price',

'cms-pack1-title', 'cms-pack1-desc', 'cms-pack1-price',

'cms-trans1-title', 'cms-trans1-desc', 'cms-trans1-price',

'cms-group1-title', 'cms-group1-desc',

];

cmsIds.forEach(id => {

const el = document.getElementById(id);

if (el) {

const key = id.replace('cms-', '').replace(/-/g, '');

// Map to camelCase keys

const keyMap = {

'herotitle': 'heroTitle',

'herosubtitle': 'heroSubtitle',

'abouttext': 'aboutText',

'umrah1title': 'umrah1Title',

'umrah1desc': 'umrah1Desc',

'umrah1price': 'umrah1Price',

'tour1title': 'tour1Title',

'tour1desc': 'tour1Desc',

'tour1price': 'tour1Price',

'pack1title': 'pack1Title',

'pack1desc': 'pack1Desc',

'pack1price': 'pack1Price',

'trans1title': 'trans1Title',

'trans1desc': 'trans1Desc',

'trans1price': 'trans1Price',

'group1title': 'group1Title',

'group1desc': 'group1Desc',

};

data[keyMap[key] || key] = el.value;

}

});

localStorage.setItem('alamalsafar_cms', JSON.stringify(data));

showToast('✅ Content saved successfully! Changes will appear on page reload.');

applySavedContent(data);

}

function loadSavedContent() {

const data = JSON.parse(localStorage.getItem('alamalsafar_cms') || '{}');

if (Object.keys(data).length > 0) {

applySavedContent(data);

}

function applySavedContent(data) {

// Apply saved content to the live page

if (data.heroTitle) {

const heroH1 = document.querySelector('.hero h1');

if (heroH1) heroH1.innerHTML = data.heroTitle.includes('Alam AlSafar') ? data.heroTitle.replace(

'Alam AlSafar', '<span>Alam AlSafar</span>') : data.heroTitle;

}

if (data.heroSubtitle) {

const heroP = document.querySelector('.hero p');

if (heroP) heroP.textContent = data.heroSubtitle;

}

if (data.aboutText) {

const aboutP = document.querySelector('#contact .two-col > div:first-child p');

if (aboutP) aboutP.textContent = data.aboutText;

}

// Update Umrah card 1

if (data.umrah1Title) {

const umrahCards = document.querySelectorAll('#umrah .card');

if (umrahCards[0]) {

const h3 = umrahCards[0].querySelector('h3');

const p = umrahCards[0].querySelector('p');

const price = umrahCards[0].querySelector('.card-price');

if (h3 && data.umrah1Title) h3.textContent = data.umrah1Title;

if (p && data.umrah1Desc) p.textContent = data.umrah1Desc;

if (price && data.umrah1Price) price.textContent = data.umrah1Price;

}

// Update Tour card 1

if (data.tour1Title) {

const tourCards = document.querySelectorAll('#tours .card');

if (tourCards[0]) {

const h3 = tourCards[0].querySelector('h3');

const p = tourCards[0].querySelector('p');

const price = tourCards[0].querySelector('.card-price');

if (h3 && data.tour1Title) h3.textContent = data.tour1Title;

if (p && data.tour1Desc) p.textContent = data.tour1Desc;

if (price && data.tour1Price) price.textContent = data.tour1Price;

}

// Update Package card 1

if (data.pack1Title) {

const packCards = document.querySelectorAll('#packages .card');

if (packCards[0]) {

const h3 = packCards[0].querySelector('h3');

const p = packCards[0].querySelector('p');

const price = packCards[0].querySelector('.card-price');

if (h3 && data.pack1Title) h3.textContent = data.pack1Title;

if (p && data.pack1Desc) p.textContent = data.pack1Desc;

if (price && data.pack1Price) price.textContent = data.pack1Price;

}

// Update Transfer card 1

if (data.trans1Title) {

const transCards = document.querySelectorAll('#transfers .card');

if (transCards[0]) {

const h3 = transCards[0].querySelector('h3');

const p = transCards[0].querySelector('p');

const price = transCards[0].querySelector('.card-price');

if (h3 && data.trans1Title) h3.textContent = data.trans1Title;

if (p && data.trans1Desc) p.textContent = data.trans1Desc;

if (price && data.trans1Price) price.textContent = data.trans1Price;

}

// Update Group card 1

if (data.group1Title) {

const groupCards = document.querySelectorAll('#groups .card');

if (groupCards[0]) {

const h3 = groupCards[0].querySelector('h3');

const p = groupCards[0].querySelector('p');

if (h3 && data.group1Title) h3.textContent = data.group1Title;

if (p && data.group1Desc) p.textContent = data.group1Desc;

}

// ============ KEYBOARD SHORTCUT FOR ADMIN ============

document.addEventListener('keydown', function(e) {

if (e.ctrlKey && e.shiftKey && e.key === 'A') {

e.preventDefault();

openAdminPanel();

}

});

console.log('🕌 Alam AlSafar Tourism — Website Ready');

console.log('💡 Tip: Press Ctrl+Shift+A to open Admin Panel');

console.log('🔑 Default admin password: admin123');

console.log('📦 All CMS data saved to browser localStorage');

</script>

</body>

</html>