.site-header {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.3); /* شفافية زي التصميم */
    padding: 15px 0;
}

.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.brand img {
    max-height: 50px; /* ضبط حسب حجم لوجو FlySmart */
}

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

.menu a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
}

.menu a:hover {
    color: #00ccff; /* لون مختلف عند التحويم */
}

/* Responsive Design للموبايل */
@media (max-width: 768px) {
    .nav-toggle {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
    }

    .nav-toggle .bar {
        display: block;
        width: 25px;
        height: 3px;
        background-color: #fff;
        margin: 5px 0;
        transition: all 0.3s;
    }

    .main-nav {
        display: none; /* مختفة افتراضيًا على الموبايل */
        position: fixed;
        top: 0;
        left: 0;
        width: 250px;
        height: 100%;
        background-color: #333;
        padding-top: 60px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .main-nav.active {
        transform: translateX(0); /* تظهر عند الضغط على الزر */
    }

    .menu {
        flex-direction: column;
        padding: 20px;
    }

    .menu a {
        color: #fff;
        padding: 10px 0;
    }

    .nav-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99;
    }

    .nav-overlay.active {
        display: block;
    }
}



.hero-section {
    height: 100vh;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    color: #fff;
    text-align: center;
}

.hero-content h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 20px;
    margin-bottom: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0073e6;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.hero-button:hover {
    background-color: #005bb5;
}

/* Responsive Design للموبايل */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 32px;
    }

    .hero-content p {
        font-size: 16px;
    }

    .hero-button {
        padding: 8px 15px;
    }
}


.sections-wrapper {
    margin-top: 20px;
}

.section-destinations, .section-offers, .section-contact {
    padding: 40px 0;
    text-align: center;
}

.section-destinations h2, .section-offers h2, .section-contact h2 {
    font-size: 32px;
    margin-bottom: 15px;
}

/* Side Menu على الموبايل */
@media (max-width: 768px) {
    .sections-wrapper {
        display: none; /* مختفة افتراضيًا */
        position: fixed;
        top: 0;
        left: 0;
        width: 250px;
        height: 100%;
        background-color: #333;
        padding-top: 60px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 101;
    }

    .sections-wrapper.active {
        transform: translateX(0);
    }

    .section-destinations, .section-offers, .section-contact {
        padding: 20px 0;
    }

    .section-destinations h2, .section-offers h2, .section-contact h2 {
        font-size: 20px;
    }
}




/* ===== About Section ===== */
.about-sec{padding:48px 0; color:#1b1b1b}
.about-grid{display:grid; grid-template-columns: 1.2fr 0.8fr 0.9fr; gap:28px; align-items:center}

.about-left .about-h2{
  margin:0 0 12px; font-size:clamp(22px,3.2vw,28px); font-weight:800; color:#14406d;
}
.about-left .about-content{line-height:1.9; color:#333}
.about-left .about-content ul{padding:0 1rem 0 0; margin:12px 0}
.about-left .about-content li{margin:6px 0}

.about-mid{display:grid; place-items:center}
.about-oval{
  width:min(360px, 92%); aspect-ratio: 3/4; object-fit:cover;
  border-radius: 1000px; /* بيضاوية */
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.about-right{ text-align:right }
.about-logo{height:42px; width:auto; display:block; margin-inline-start:auto; margin-bottom:14px}
.about-title{margin:0 0 16px; font-size:clamp(22px,3.6vw,32px); font-weight:800; color:#22354d}
.about-btn{display:inline-block; background:#2F5FAF; color:#fff; padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:700}
.about-btn:hover{filter:brightness(.95)}

@media (max-width: 992px){
  .about-grid{grid-template-columns:1fr; gap:18px}
  .about-right{text-align:center}
  .about-logo{margin-inline:auto}
}






/* ===== Blog Hero ===== */
/* ===== Blog/Post Hero ===== */
.blog-hero, .post-hero{
  position:relative; min-height:46vh; display:grid; place-items:center;
  background:#0b1a2a center/cover no-repeat; color:#fff; text-align:center;
}
.blog-hero .ov, .post-hero .ov{position:absolute; inset:0; background:rgba(9,24,40,.45)}
.blog-hero .inner, .post-hero .inner{position:relative}
.blog-hero h1, .post-hero .post-title{margin:0 0 10px; font-weight:800; font-size:clamp(26px,4.8vw,40px)}
.blog-hero .sub, .post-hero .sub{max-width:60ch; margin:0 auto 16px}
.btn{display:inline-block; padding:10px 14px; border-radius:10px; text-decoration:none}
.btn-cta{background:#2F5FAF; color:#fff; font-weight:700}
.btn-ghost{border:1px solid #2F5FAF; color:#2F5FAF}

/* ===== Blog Grid (home.php) ===== */
.blog-list{padding:40px 0}
.sec-title{text-align:center; margin:0 0 20px; font-size:clamp(20px,3.2vw,24px); font-weight:800; color:#22354d}
.grid{display:grid; gap:18px}
.blog-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width: 992px){ .blog-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 640px){ .blog-grid{grid-template-columns:1fr} }
.post-card{background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden; display:flex; flex-direction:column}
.post-card .thumb img{width:100%; display:block}
.post-card .card-body{padding:14px}
.post-card .title{margin:0 0 8px; font-size:18px; font-weight:700}
.post-card .title a{text-decoration:none; color:#22354d}
.post-card .excerpt{color:#444; margin:0 0 10px; line-height:1.8}
.post-card .meta{font-size:13px; color:#666; margin-bottom:10px}
.post-card .m-sep{opacity:.6; margin:0 6px}
.post-card .card-actions{display:flex; justify-content:flex-end}

/* ===== Single (تفاصيل) ===== */
.post-single{padding:36px 0}
.post-single .intro{margin-bottom:24px; line-height:1.9; color:#222}
.post-block{display:grid; gap:18px; align-items:center; margin:24px 0}
.post-block .blk-img{width:100%; border-radius:12px; display:block}
.post-block .blk-title{margin:0 0 10px; font-size:22px; font-weight:800; color:#22354d}
.post-block .blk-content{line-height:1.9; color:#333}

/* يسار: صورة صغيرة على اليسار ونص يمين */
.left-block{grid-template-columns: 0.85fr 1.15fr}
.left-block .blk-img{justify-self:start}

/* يمين: نص يسار + صورة كبيرة يمين */
.right-block{grid-template-columns: 1.15fr 0.85fr}
.right-block .blk-img{justify-self:end}

/* قائمة بعلامة السهم الأحمر */
.check-list{list-style:none; padding:0; margin:10px 0 0}
.check-list li{position:relative; padding-inline-start:24px; margin:8px 0}
.check-list li::before{
  content:""; position:absolute; inset-inline-start:0; top:.55em;
  width:10px; height:10px; border-right:3px solid #d64b46; border-bottom:3px solid #d64b46;
  transform:rotate(-45deg);
}

.post-single .outro{margin-top:18px; line-height:1.9; color:#222}
.post-single .cta-bottom{margin-top:18px}
@media (max-width: 992px){
  .left-block, .right-block{grid-template-columns:1fr}
  .right-block .blk-img, .left-block .blk-img{justify-self:unset}
}