/* ========================================
   GENERAL
   ======================================== */

* {
    box-sizing: border-box;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
    background: #f8f5ef;

    /* يسمح للصفحات الطويلة بالـ Scroll */
    overflow-x: hidden;
    overflow-y: auto;
}


/* ========================================
   NAVBAR
   ======================================== */

nav {
    position: absolute;
    top: 18px;
    left: 127px;

    width: calc(100% - 254px);
    height: 90px;

    display: flex;
    align-items: center;

    padding: 0 38px;

    z-index: 10;
}

nav::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -18px;
    left: 50%;
    width: 100vw;
    height: 240px;
    transform: translateX(-50%);
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.64) 0%,
        rgba(255, 255, 255, 0.3) 36%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
}


/* ========================================
   LOGO
   ======================================== */

.logo {
    font-family: 'Playfair Display', Georgia, serif;

    font-size: 29px;
    font-weight: 500;

    letter-spacing: 1px;

    color: #111111;

    line-height: 1;

    display: flex;
    align-items: center;

    cursor: pointer;
}


/* ========================================
   NAV LINKS
   ======================================== */

.nav-links {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;

    gap: 55px;
}


.nav-links a {
    position: relative;

    display: flex;
    align-items: center;

    text-decoration: none;

    color: #111111;

    font-family: 'Playfair Display', Georgia, serif;

    font-size: 18px;
    font-weight: 500;

    line-height: 1;

    padding: 8px 10px;

    background: transparent;

    transition: color 0.3s ease;
}


/* Line under Home */

.nav-links a.active::after {
    content: "";

    position: absolute;

    left: 10px;
    right: 10px;
    bottom: 0;

    height: 1px;

    background: #111111;
}


.nav-links a:hover {
    color: rgba(255, 255, 255, 0.75);
}


/* ========================================
   PROFILE ICON
   ======================================== */

.profile {
    position: absolute;
    top: 50%;
    right: -70px;
    transform: translateY(-50%);

    width: 36px;
    height: 36px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;

    border: none;

    text-decoration: none;

    cursor: pointer;
}


.profile svg {
    width: 27px;
    height: 27px;

    fill: none;

    stroke: #111111;

    stroke-width: 1.3;

    stroke-linecap: round;
    stroke-linejoin: round;

    display: block;

    transition: stroke 0.3s ease;
}


.profile:hover svg {
    stroke: rgba(255, 255, 255, 0.75);
}


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

.hero {
    position: relative;

    width: 100%;
    height: 100vh;

    overflow: hidden;

    background: #1d1a19;
}

.home-about {
    background: #f2eee7;
    color: #24211e;
    padding: 96px 7% 48px;
    scroll-margin-top: 24px;
}

.home-about-layout {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
}

.home-about-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    align-items: center;
    gap: 64px;
}

.home-about-eyebrow {
    margin: 0 0 18px;
    color: #897147;
    font-size: 12px;
    font-weight: 600;
}

.home-about-copy h2 {
    margin: 0;
    color: #24211e;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 44px;
    font-weight: 500;
    line-height: 1.16;
}

.home-about-description {
    max-width: 560px;
    margin: 22px 0 26px;
    color: #625d55;
    font-size: 15px;
    line-height: 1.8;
}

.home-about-more {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-width: 236px;
    padding: 13px 16px;
    color: #24211e;
    border: 1px solid #34513d;
    text-decoration: none;
    font-size: 13px;
    transition: color 180ms ease, background-color 180ms ease;
}

.home-about-more span {
    font-size: 20px;
    line-height: 1;
}

.home-about-more:hover,
.home-about-more:focus-visible {
    color: #fff;
    background: #34513d;
}

.home-about-gallery {
    min-width: 0;
}

.home-about-main-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.home-about-contact-strip {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(170px, 0.8fr) minmax(180px, 0.8fr);
    align-items: start;
    gap: 36px;
    width: 100%;
    max-width: 1240px;
    margin: 48px auto 0;
    padding: 34px 0 8px;
    border-top: 1px solid #ded8cd;
}

.home-about-contact-intro .home-about-eyebrow {
    margin-bottom: 14px;
    letter-spacing: 0.22em;
}

.home-about-contact-intro h2 {
    margin: 0;
    color: #24211e;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(25px, 2.5vw, 36px);
    font-weight: 500;
    line-height: 1.2;
}

.home-about-contact-item {
    display: grid;
    align-content: start;
    gap: 12px;
    color: #49453f;
    font-size: 13px;
}

.home-about-contact-item .home-about-eyebrow {
    margin: 0 0 2px;
}

.home-about-contact-item > a,
.home-about-social-links a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    color: inherit;
    text-decoration: none;
}

.home-about-contact-item i {
    width: 18px;
    color: #34513d;
    text-align: center;
}

.home-about-social-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.home-about-social-links a:hover,
.home-about-contact-item > a:hover {
    color: #34513d;
}


/* ========================================
   BACKGROUND IMAGE
   ======================================== */

.hero::before {
    content: "";

    position: absolute;

    inset: 0;

    background-image: url("images/homebage.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    filter:
        brightness(0.82)
        saturate(0.72)
        contrast(0.94);

    transform: scale(1.002);

    z-index: 0;
}


/* ========================================
   EXTRA COLOR LAYER
   ======================================== */

.hero::after {
    content: "";

    position: absolute;

    inset: 0;

    background: rgba(45, 48, 60, 0.10);

    pointer-events: none;

    z-index: 1;
}


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

.hero-content {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 2;
}

.hero-scroll-cue {
    position: absolute;
    right: 7%;
    bottom: 28px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    background: rgba(190, 183, 177, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.hero-scroll-cue svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-scroll-cue:hover,
.hero-scroll-cue:focus-visible {
    color: #fff;
    background: rgba(170, 163, 158, 0.82);
    transform: translateY(-3px);
    outline: none;
}


/* ========================================
   MAIN TITLE
   ======================================== */

.hero h1 {
    position: absolute;

    left: 6.2%;
    top: 26%;

    margin: 0;

    font-family: 'Playfair Display', Georgia, serif;

    font-size: 72px;

    font-weight: 400;

    line-height: 1.10;

    letter-spacing: 0;

    color: #ffffff;

    opacity: 1;

    text-shadow: none;
}


/* ========================================
   EXPLORE BUTTON
   ======================================== */

.explore-button {
    position: absolute;

    left: 44%;
    top: 48%;

    transform: translate(-50%, -50%);

    min-width: 230px;
    min-height: 42px;
    padding: 11px 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: rgba(190, 183, 177, 0.62);

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

    border-radius: 30px;

    color: #ffffff;

    text-decoration: none;

    font-family: 'Plus Jakarta Sans', Arial, sans-serif;

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 0;

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.10);

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.explore-button span {
    text-align: center;
}

.explore-button svg {
    position: absolute;
    right: 12px;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.explore-button:hover {
    background: rgba(170, 163, 158, 0.72);

    transform:
        translate(-50%, -50%)
        scale(1.02);
}


/* ========================================
   LOCATION
   ======================================== */

.location {
    position: absolute;

    right: 9.3%;
    top: 53%;

    transform: translateY(-50%);

    display: flex;
    align-items: center;

    gap: 5px;

    color: #ffffff;

    font-family: 'Plus Jakarta Sans', Arial, sans-serif;

    font-size: 11px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: 0.15px;

    white-space: nowrap;

    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}


/* ========================================
   LOCATION PIN
   ======================================== */

.location-pin {
    width: 11px;
    height: 11px;

    fill: none;

    stroke: #ffffff;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;

    flex-shrink: 0;
}

.profile-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: -70px;
    z-index: 20;
    width: 220px;
    padding: 16px;
    color: #24211e;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.profile-menu h3,
.profile-menu p {
    margin: 0 0 10px;
    overflow-wrap: anywhere;
}

.profile-menu p {
    color: #625d55;
    font-size: 13px;
}

.profile-menu button {
    width: 100%;
    padding: 8px 10px;
    border: 0;
    color: #fff;
    background: #34513d;
    cursor: pointer;
}


/* ========================================
   RESPONSIVE - TABLET
   ======================================== */

@media (max-width: 900px) {

    .home-about {
        padding: 72px 6% 36px;
    }

    .home-about-layout {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
        gap: 34px;
    }

    .home-about-copy h2 {
        font-size: 36px;
    }

    .home-about-contact-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }

    .home-about-socials {
        grid-column: auto;
    }

    nav {
        top: 8px;
        left: 6%;
        width: 88%;
        padding: 0;
    }


    .logo {
        font-size: 25px;
    }


    .nav-links {
        gap: 25px;
    }


    .nav-links a {
        font-size: 15px;
    }


    .profile {
        width: 32px;
        height: 32px;
        right: -14px;
    }


    .profile svg {
        width: 24px;
        height: 24px;
    }


    .hero h1 {
        left: 6%;

        top: 24%;

        font-size: clamp(36px, 5.6vw, 48px);
    }


    .explore-button {
        left: 44%;
        top: 48%;
        min-width: 205px;
        padding: 11px 25px;
    }
}


/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */

@media (max-width: 600px) {

    .home-about {
        padding: 58px 22px 28px;
    }

    .home-about-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .home-about-copy h2 {
        font-size: 34px;
    }

    .home-about-description {
        font-size: 14px;
    }

    .home-about-contact-strip {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        margin-top: 34px;
    }

    .home-about-contact-intro h2 {
        font-size: 29px;
    }

    .home-about-socials {
        grid-column: auto;
    }

    nav {
        height: 70px;
        top: 6px;
        left: 18px;
        width: calc(100% - 36px);
        padding: 0;
    }


    .logo {
        font-size: 22px;
    }


    .nav-links {
        gap: 8px;
    }


    .nav-links a {
        font-size: 12px;

        padding: 6px;
    }


    .profile {
        width: 30px;
        height: 30px;
        right: 0;
        transform: translateY(-50%);
    }

    .profile-menu {
        right: 0;
    }


    .profile svg {
        width: 23px;
        height: 23px;
    }


    .hero h1 {
        left: 7%;

        top: 29%;

        font-size: 36px;
    }


    .explore-button {
        left: 50%;

        top: 54%;
        transform: translate(-50%, -50%);

        min-width: 190px;
        min-height: 39px;
        padding: 10px 20px;
        font-size: 11px;
    }

    .explore-button:hover {
        transform: translate(-50%, -50%) scale(1.02);
    }

    .explore-button svg {
        right: 10px;
        width: 16px;
        height: 16px;
    }

    .hero-scroll-cue {
        right: 22px;
        bottom: 18px;
    }


    .location {
        right: 15px;
        top: 44%;

        font-size: 9px;

        font-weight: 400;

        letter-spacing: 0.1px;

        gap: 4px;
    }


.location-pin {
        width: 9px;
        height: 9px;
    }
}

.location span {
    font-family: 'Aboreto', Georgia, serif;
    font-size: 11px;
    letter-spacing: 0;
}

/* Give the Jordan illustration a true postage-stamp silhouette. */
.home-about-gallery {
    position: relative;
    padding: 20px;
    background: #fffdf8;
    clip-path: polygon(
        0 2%, 1.7% 0, 3.4% 2%, 5.1% 0, 6.8% 2%, 8.5% 0, 10.2% 2%, 11.9% 0,
        13.6% 2%, 15.3% 0, 17% 2%, 18.7% 0, 20.4% 2%, 22.1% 0, 23.8% 2%,
        25.5% 0, 27.2% 2%, 28.9% 0, 30.6% 2%, 32.3% 0, 34% 2%, 35.7% 0,
        37.4% 2%, 39.1% 0, 40.8% 2%, 42.5% 0, 44.2% 2%, 45.9% 0, 47.6% 2%,
        49.3% 0, 51% 2%, 52.7% 0, 54.4% 2%, 56.1% 0, 57.8% 2%, 59.5% 0,
        61.2% 2%, 62.9% 0, 64.6% 2%, 66.3% 0, 68% 2%, 69.7% 0, 71.4% 2%,
        73.1% 0, 74.8% 2%, 76.5% 0, 78.2% 2%, 79.9% 0, 81.6% 2%, 83.3% 0,
        85% 2%, 86.7% 0, 88.4% 2%, 90.1% 0, 91.8% 2%, 93.5% 0, 95.2% 2%,
        96.9% 0, 98.3% 2%, 100% 0, 98.3% 4%, 100% 6%, 98.3% 8%, 100% 10%,
        98.3% 12%, 100% 14%, 98.3% 16%, 100% 18%, 98.3% 20%, 100% 22%,
        98.3% 24%, 100% 26%, 98.3% 28%, 100% 30%, 98.3% 32%, 100% 34%,
        98.3% 36%, 100% 38%, 98.3% 40%, 100% 42%, 98.3% 44%, 100% 46%,
        98.3% 48%, 100% 50%, 98.3% 52%, 100% 54%, 98.3% 56%, 100% 58%,
        98.3% 60%, 100% 62%, 98.3% 64%, 100% 66%, 98.3% 68%, 100% 70%,
        98.3% 72%, 100% 74%, 98.3% 76%, 100% 78%, 98.3% 80%, 100% 82%,
        98.3% 84%, 100% 86%, 98.3% 88%, 100% 90%, 98.3% 92%, 100% 94%,
        98.3% 96%, 100% 98%, 98.3% 100%, 96.6% 98%, 94.9% 100%, 93.2% 98%,
        91.5% 100%, 89.8% 98%, 88.1% 100%, 86.4% 98%, 84.7% 100%, 83% 98%,
        81.3% 100%, 79.6% 98%, 77.9% 100%, 76.2% 98%, 74.5% 100%, 72.8% 98%,
        71.1% 100%, 69.4% 98%, 67.7% 100%, 66% 98%, 64.3% 100%, 62.6% 98%,
        60.9% 100%, 59.2% 98%, 57.5% 100%, 55.8% 98%, 54.1% 100%, 52.4% 98%,
        50.7% 100%, 49% 98%, 47.3% 100%, 45.6% 98%, 43.9% 100%, 42.2% 98%,
        40.5% 100%, 38.8% 98%, 37.1% 100%, 35.4% 98%, 33.7% 100%, 32% 98%,
        30.3% 100%, 28.6% 98%, 26.9% 100%, 25.2% 98%, 23.5% 100%, 21.8% 98%,
        20.1% 100%, 18.4% 98%, 16.7% 100%, 15% 98%, 13.3% 100%, 11.6% 98%,
        9.9% 100%, 8.2% 98%, 6.5% 100%, 4.8% 98%, 3.1% 100%, 1.7% 98%, 0 100%,
        1.7% 96%, 0 94%, 1.7% 92%, 0 90%, 1.7% 88%, 0 86%, 1.7% 84%, 0 82%,
        1.7% 80%, 0 78%, 1.7% 76%, 0 74%, 1.7% 72%, 0 70%, 1.7% 68%, 0 66%,
        1.7% 64%, 0 62%, 1.7% 60%, 0 58%, 1.7% 56%, 0 54%, 1.7% 52%, 0 50%,
        1.7% 48%, 0 46%, 1.7% 44%, 0 42%, 1.7% 40%, 0 38%, 1.7% 36%, 0 34%,
        1.7% 32%, 0 30%, 1.7% 28%, 0 26%, 1.7% 24%, 0 22%, 1.7% 20%, 0 18%,
        1.7% 16%, 0 14%, 1.7% 12%, 0 10%, 1.7% 8%, 0 6%, 1.7% 4%
    );
    filter: drop-shadow(0 8px 10px rgba(61, 48, 31, 0.2));
}

.home-about-main-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.home-destination-link{color:inherit;text-decoration:none;cursor:pointer}
.hero::before{transition:transform .6s ease}
.hero:has(.home-destination-link:hover)::before{transform:scale(1.035)}
.home-destination-link:focus-visible{outline:2px solid currentColor;outline-offset:6px}

.hero .home-destination-link,.hero .home-destination-link span,.hero .location-pin{color:#fff!important}
.hero::after{background:linear-gradient(90deg,rgba(0,0,0,.32),rgba(0,0,0,.06) 70%)}