/* ===== YOUNES TRAVELS WEBSITE - MAIN STYLESHEET ===== */

/* ===== GOOGLE FONTS IMPORT ===== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* ===== GLOBAL RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    scroll-behavior: smooth;
}
/* للجسم كله */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x:den; /* يمنع scrollbar الرئيسي */
}


/* ===== CSS VARIABLES (COLORS) ===== */
:root {
    --main-color: #EEEEEE;      /* اللون الرئيسي - أبيض فاتح */
    --secend-color: #201E43;    /* اللون الثانوي - أزرق داكن */
    --third-color: #134B70;     /* اللون الثالث - أزرق متوسط */
    --fourth-color: #193b68;    /* اللون الرابع - أزرق غامق */
    --active-color: #EB5A3C;    /* اللون النشط - برتقالي */
}

/* ===== BODY STYLES ===== */
body {
    background-color: #ffffff;
    overflow-x: hidden;
}

/* ===== MAIN CONTAINER ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    border: 1px none red;
    z-index: 999;
    padding: 0 1rem;
    
}

/* ===== HERO SECTION - BACKGROUND IMAGES ===== */
.lending-page .background-imgs {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.lending-page .background-imgs img {
    position: absolute;
    top: 0;
    overflow: hidden;
    left: 0;
    width: 100vw;
    filter: brightness(30%);  /* تعتيم الصور للخلفية */
    height: 100vh;
    object-fit: cover;
    z-index: 1;
}


/* ترتيب الصور في الخلفية */
.lending-page .background-imgs img:nth-child(1) {
    z-index: 1;
}

.lending-page .background-imgs img:nth-child(2) {
    z-index: 2;
    display: none;
}

.lending-page .background-imgs img:nth-child(3) {
    z-index: 3;
    display: none;
}

/* ===== NAVIGATION CONTROLLER (DISABLED) ===== */
.next-controller {
    position: absolute;
    top: 38rem;
    border: 1px none;
    background-color: #eeeeee25;
    backdrop-filter: blur(7px);
    border-radius: 5px;
    z-index: 9;
    left: 76rem;
    transition: .3s;
}
.lending-page{
    overflow-x: visible;
}
/* ===== HERO SECTION - MAIN CONTENT ===== */
.upper-page {
    width: 100vw;
    /* Full viewport width */
    margin-left: calc(-50vw + 50%);
    /* Break out of container */
    position: relative;
}

.next-controller h1 {
    padding: 0px 10px 5px 10px;
    color: var(--main-color);
    transition: .3s;
    cursor: pointer;
}

.next-controller:hover {
    color: #201e43b9;
    background-color: #eeeeee86;
    backdrop-filter: blur(7px);
    border-radius: 5px;
}

.text-box {
    /* Center the text box within the container boundaries */
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Perfect centering */
    z-index: 1;
    /* Container-based sizing and constraints */
    max-width: 600px;
    width: 90%;
    /* Responsive width within container */
    /* Styling */
    color: var(--main-color);
    text-align: center;
    padding: 2rem;
    border-radius: 10px;
    /* Remove the old margin-based positioning */
    margin: 0;
}

.text-box .title {
    font-size: 2rem;
    font-weight: 800;
    color: transparent;
    letter-spacing: 4px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.8) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
    margin: 0;
}

.text-box p {
    padding-right: 2rem;
    padding-top: 20px;
    font-weight: 500;
    color: #eeeeeeb0;
    padding: 20px 10px;
    margin-bottom: 2rem;
}

.glass-details {
    text-align: center;
    margin-top: 1rem;
}

.text-box .btn {
    margin-top: -1rem;
    margin-bottom: 1.5rem;
    margin-left: -0.2rem;
}

.text-box a {
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 10px 20px;
    color: #EEEEEE;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
}

.text-box a:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.middle-page .kinds {
    display: flex;
    margin-top: 2rem;
}

.middle-page .kinds h1 {
    font-size: 18px;
    color: var(--main-color);
    background-color: var(--secend-color);
    z-index: 4;
    position: absolute;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: capitalize;
}

.middle-page .kinds .right img {
    max-width: 600px;
    margin-left: -1rem;
    border-radius: 15px;
    height: 40rem;
}

.middle-page .kinds .right h1 {
    font-size: 20px;
    color: var(--main-color);
    background-color: var(--secend-color);
    margin-top: 36.5rem;
    margin-left: -32rem;
    z-index: 4;
    position: absolute;
    padding: 5px 20px 5px 20px;
}

.middle-page img {
    box-shadow: 4px 8px 20px gray;
    /* border: 5px solid var(--third-color); */
}

.middle-page .kinds .left {
    display: flex;
}

.middle-page .kinds .left .up {
    display: flex;
    flex-direction: row;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.middle-page .kinds .left .up:hover {
    transform: scale(1.02);
}

.middle-page .kinds .left .down {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.middle-page .kinds .left .down:hover {
    transform: scale(1.02);
}

.middle-page .kinds .right {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.middle-page .kinds .right:hover {
    transform: scale(1.02);
}

.middle-page .kinds .left .up img {
    max-width: 600px;
    height: 300px;
    border-radius: 20px;
}

.middle-page .kinds .left .up img:nth-child(1) {
    margin-right: 0;
}

.middle-page .kinds .left .up .label-one {
    margin-top: 15rem;
    margin-left: 1.5rem;
    position: absolute;
}

.middle-page .kinds .left .up .label-two {
    margin-top: 12rem;
    margin-left: 19.5rem;
    position: absolute;
}

.middle-page .kinds .left .down h1 {
    margin-top: 15.5rem;
    margin-left: -32.5rem;
    position: absolute;
}

.middle-page .kinds .left .down img {
    max-width: 600px;
    height: 300px;
}

.middle-page .title {
    display: flex;
    margin-top: 1rem;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

.middle-page .title h2 {
    margin-top: 4rem;
    letter-spacing: 2px;
    font-size: 2rem;
    text-transform: uppercase;
    color: var(--third-color);
    text-align: center;
}

.middle-page .title .pharagraph {
    width: 600px;
}

.middle-page .title h1 {
    color: var(--third-color);
    font-size: 16px;
    text-align: center;
    justify-content: space-between;
    align-items: center;
}

.middle-page .kinds .left {
    display: flex;
    gap: 2rem;
    flex-direction: column;
}

.line {
    width: 500px;
    height: 1px;
    opacity: 20%;
    background-color: var(--third-color)
}

.middle-page .kinds {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--main-color);
    border-radius: 15px;
    width: 100%;
    gap: 2rem;
    padding: 2rem;
}

.middle-page .kinds .left,
.middle-page .kinds .right {
    flex: 1;
    min-width: 300px;
}

.middle-page .kinds .left .up {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.middle-page .kinds img {
    width: 100%;
    border-radius: 15px;
    object-fit: cover;
}

.middle-page .kinds h1 {
    position: relative;
    background-color: var(--secend-color);
    color: var(--main-color);
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 5px;
    margin-top: -2rem;
    z-index: 2;
    display: inline-block;
}

header {
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 3rem;
    position: absolute;
    box-sizing: border-box;
    z-index: 9;
    backdrop-filter: blur(0px);
    background-color: transparent;
}

.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border: 1px none blue;
}

.nov-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border: 1px none blue;
}

header * {
    margin-top: 0.2rem;
}

.logo {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* overflow: hidden; */
    width: 400px;
}

.logo h1 {
    color: transparent;
    letter-spacing: 4px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0.8) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 0px rgba(255, 255, 255, 0.4);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
    margin: 0;
    margin-left: -1rem;
}

.logo span {
    font-size: 14px;
}

.logo i {
    color: var(--main-color);
    opacity: 70%;
    transform: rotate(225deg);
    font-size: 14px;
    position: absolute;
    margin-top: -2.2rem;
    margin-left: 10.35rem;
}

.links {
    display: flex;
    gap: 1.5rem;
    font-weight: 700;
    margin-left: 18%;
    margin-top: 0rem;
}

.links a:hover {
    letter-spacing: 1px;
}

.links a {
    text-decoration: none;
    font-size: 18px;
    transition: 0.5s;
    font-weight: 600;
    color: #eeeeeea9;
}

.email {
    display: flex;
    color: #eeeeeea2;
    cursor: pointer;
    height: 100%;
    margin-top: 0.1rem;
    padding: 5px 5px 5px 5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.3) 100%);
    border: 0px solid #eeeeee86;
    font-size: 24px;
    background-size: 200% 200%;
    transition: 0.2s;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
}

.o-links {
    display: flex;
    gap: 0.1rem;
}

.o-links .email i {
    margin-top: -0.1rem;
}

.o-links .insta i {
    margin-top: -0.1rem;
}

.o-links .face i {
    margin-top: -0.1rem;
}

.email i {
    margin-top: 0.4rem;
}

.email:hover {
    animation: shineGradient 10s ease-in-out infinite;
    padding: 5px 10px 5px 10px;
    margin-left: 1.4rem;
    text-shadow: #eeeeeedc 0 0 10px;
}

.insta {
    display: flex;
    color: #eeeeeea2;
    cursor: pointer;
    height: 100%;
    margin-top: 0.1rem;
    padding: 5px 7px 5px 5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.3) 100%);
    border: 0px solid #eeeeee86;
    font-size: 24px;
    background-size: 200% 200%;
    transition: 0.2s;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

.face {
    display: flex;
    color: #eeeeeea2;
    cursor: pointer;
    height: 100%;
    margin-top: 0.1rem;
    padding: 5px 5px 5px 5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.3) 100%);
    border: 0px solid #eeeeee86;
    font-size: 24px;
    background-size: 200% 200%;
    transition: 0.2s;
}

@keyframes shineGradient {
    0%,
    100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.insta i {
    margin-top: 0.4rem;
}

.insta:hover {
    animation: shineGradient 10s ease-in-out infinite;
    padding: 5px 10px 5px 10px;
    text-shadow: #eeeeeedc 0 0 10px;
}

.face i {
    margin-top: 0.4rem;
}

.face:hover {
    animation: shineGradient 10s ease-in-out infinite;
    padding: 5px 10px 5px 10px;
    text-shadow: #eeeeeedc 0 0 10px;
}

.blog {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3rem;
    box-sizing: border-box;
    z-index: 999;
    transition: 1s;
    margin-top: 3rem;
    backdrop-filter: blur(8px);
    background-color: #24242434;
}

.blog .container {
    width: 1200px;
    border: 1px none red;
    z-index: 99;
    display: flex;
    border-style: none;
    align-items: center;
}

.packages .container {
    width: 1200px;
    border: 1px none red;
    z-index: 99;
    display: flex;
    border-style: none;
    align-items: center;
}

.blog .link {
    margin-left: 2rem;
    margin-right: 2rem;
}

.blog .link:first-child {
    margin-left: 15%;
}

.blog .link {
    margin-top: 0.2rem;
    font-size: 1.2rem;
    font-weight: 500;
}

.blog .link a {
    text-decoration: none;
    color: #9c9c9c;
    transition: 0.5s;
    text-transform: capitalize;
}

.blog .link a:hover {
    letter-spacing: 3px;
    margin-left: -1rem;
}

.packages {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3rem;
    box-sizing: border-box;
    z-index: 999;
    transition: 1s;
    margin-top: 3rem;
    backdrop-filter: blur(8px);
    background-color: transparent;
}

.packages .link:first-child {
    margin-left: 30%;
}

.packages .link {
    margin-right: 8rem;
    margin-top: 0.2rem;
    font-size: 1.2rem;
    font-weight: 500;
}

.packages .link a {
    text-decoration: none;
    color: #9c9c9c;
    transition: 0.5s;
}

.packages .link a:hover {
    letter-spacing: 3px;
    margin-left: -2rem;
}

/* ===== PRODUCT CARDS STYLING ===== */
.product {
    width: 350px;
    height: auto;
    min-height: 450px;
    text-align: left;
    overflow: hidden;
    margin-bottom: 2rem;
    border-radius: 10px;
    border: 1px solid rgba(128, 128, 128, 0.336);
    box-shadow: 1px 1px 10px rgba(128, 128, 128, 0.336);
    transition: box-shadow 0.3s, transform 0.3s;
    display: flex;
    flex-direction: column;
}

.product:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-6px) scale(1.025);
}

.product img {
    width: 100%;
    height: 230px;
    overflow: hidden;
    filter: brightness(80%);
    transition: 0.5s;
    object-fit: cover;
}

.product .img {
    width: 100%;
    height: 230px;
    overflow: hidden;
}

.product:hover img {
    filter: brightness(84%);
    transform: scale(1.1);
}

/* ===== PRODUCT TEXT STYLING ===== */
.product .text {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product h2 {
    color: #ff9800 !important; /* Orange for category/tag */
    font-size: 0.9rem !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
}

.product h1 {
    color: #1a2341 !important; /* Dark blue for title */
    font-size: 1.4rem !important;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
    /* Full title display without truncation */
}

.product h3 {
    color: #7d8597 !important; /* Gray for description */
    font-size: 0.9rem !important;
    font-weight: 500;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.product h4 {
    color: #e65100 !important; /* Dark orange for price */
    font-size: 1.1rem !important;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.2px;
}

.product h4 span {
    color: #7d8597 !important; /* Gray for "per person" */
    font-size: 0.85rem !important;
    font-weight: 500;
    margin-left: 0.3rem;
}

.products {
    display: flex;
    flex-direction: row;
    column-gap: 1rem;
    text-align: center;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    padding: 1rem 0;
}

.under-m .title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.under-m .line-1 {
    width: 600px;
    height: 1px;
    background-color: var(--third-color);
    opacity: 40%;
    margin: auto;
}

.under-m .title h1 {
    margin-top: 4rem;
    letter-spacing: 2px;
    font-size: 2rem;
    text-transform: uppercase;
    color: var(--third-color);
    text-align: center;
}

.under-m .title .pharagraph {
    width: 650px;
    margin: auto;
}

.under-m .title .pharagraph h2 {
    color: var(--secend-color);
    font-size: 16px;
}

.h_u_page {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.h_u_page .title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 2.5rem;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.h_u_page .line-1 {
    width: min(600px, 90vw);
    height: 1px;
    background-color: var(--third-color);
    opacity: 40%;
    margin: auto;
}

.h_u_page .title h1 {
    margin-top: 4rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: var(--third-color);
    text-align: center;
}

.h_u_page .title h1::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--secend-color), var(--third-color));
    border-radius: 2px;
}

.h_u_page .title .pharagraph {
    width: min(650px, 90vw);
    margin: auto;
}

.h_u_page .title .pharagraph h2 {
    color: var(--secend-color);
    font-size: clamp(14px, 2.5vw, 16px);
    line-height: 1.5;
}

.h_u_page .tours {
    background: transparent;
    padding: 2rem;
    border-radius: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    width: min(800px, 95vw);
    justify-items: center;
}

.h_u_page .tour {
    position: relative;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 15px;
    width: 100%;
    max-width: 350px;
    height: 480px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.h_u_page .tour .img {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.h_u_page .tour img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

.h_u_page .tour:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.h_u_page .tour:hover img {
    transform: scale(1.05);
}

.h_u_page .tour:hover .text h1 {
    color: var(--secend-color);
}


/* Fixed positioning for text overlay */

.h_u_page .tour .text {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: #ffffff;
    z-index: 2;
    height: 280px;
    justify-content: space-between;
}

.h_u_page .tour .text .icon {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 1rem;
}

.h_u_page .tour .text h1 {
    font-size: 1.8rem;
    margin-bottom: 0.8rem;
    text-transform: capitalize;
    font-weight: 700;
    color: var(--third-color);
    text-align: center;
}

.h_u_page .tour .text p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #666;
    margin-bottom: 1.5rem;
    text-align: center;
    flex-grow: 1;
}

.h_u_page .tour .text .details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.h_u_page .tour .text .details .detail-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #666;
}

.h_u_page .tour .text .details .detail-item .icon {
    font-size: 1rem;
    margin: 0;
}

.h_u_page .tour .view-tours-btn {
    background: linear-gradient(135deg, var(--secend-color) 0%, #4a90e2 100%);
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: auto;
}

.h_u_page .tour .view-tours-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}



.w_us {
    margin-top: 10%;
    height: 550px;
    margin-bottom: 5%;
    border: 1px none red;
    position: relative;
    background: url(./IMG/Gallery_imgs/bg2_01-1.webp) no-repeat fixed;
    z-index: -1;
    border-radius: 15px;
}

.w_us::after {
    content: '';
    border-radius: 15px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #00000021;
    z-index: -1;
    /* Place it behind the content */
}

.w_us .background img {
    width: 300px;
    position: absolute;
    z-index: 2;
    height: 400px;
}

.w_us .background .img:nth-child(1) {
    position: absolute;
    top: 0;
    left: 55%;
}

.w_us .background .img:nth-child(2) {
    position: absolute;
    bottom: 73%;
    right: 30%;
}

.w_us .background .img:nth-child(1) img {
    border-bottom-left-radius: 15px;
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
    opacity: 0.95;
    /* filter: brightness(90%); */
}

.w_us .background .img:nth-child(2) img {
    border-top-left-radius: 15px;
    opacity: 0.95;
    box-shadow: -1px -1px 10px rgba(0, 0, 0, 0.5);
    border-top-right-radius: 15px;
}

.w_us {
    overflow-x: hidden;
    .title {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 600px;
        margin-top: -2rem;
        margin-bottom: 1rem;
        margin-left: 1rem;
        justify-content: left;
        text-align: left;
        align-items: left;
    }
    .title h1 {
        margin-top: 4rem;
        letter-spacing: 2px;
        filter: brightness(130%);
        color: var(--third-color);
        text-transform: uppercase;
    }
    .title h2 {
        font-size: 1.2rem;
        font-weight: 500;
    }
    .why1,
    .why2,
    .why3 {
        display: flex;
        gap: 1rem;
        overflow: hidden;
        margin-left: 1rem;
    }
    .why1,
    .why2,
    .why3 {
        width: 500px;
        overflow: hidden;
        filter: brightness(130%);
        z-index: 4;
        margin-bottom: 1rem;
        .text {
            h1 {
                font-size: 1.5rem;
                font-weight: 700;
                color: var(--third-color);
            }
            h2 {
                font-size: 1.2rem;
                font-weight: 500;
            }
        }
        i {
            font-size: 1.5rem;
            padding: 10px 10px;
            height: 45px;
            opacity: 0.7;
            background-color: var(--main-color);
            border-radius: 10px;
            color: var(--third-color);
        }
    }
}


/* .h_btn *{
    width: 20px;
    height: 2px;
    background-color: #201E43;
    display: flex;
    gap: 2px;
    display: none;
} */


/* pop up */

.pop_up {
    display: flex;
    transition: 2s;
    flex-direction: column;
    height: 100vh;
    transform: translateY(47%);
    background-color: var(--main-color);
    z-index: 11;
    width: 0px;
    overflow-x: hidden;
    box-shadow: rgba(25, 24, 28, 0.688) 0px 48px 100px 0px;
    left: 0;
    gap: 2rem;
    transition: 0.4s;
    position: fixed;
}

.pop_up * {
    transition: 0.5s;
    overflow: hidden;
    width: 300px;
}

.exit div:nth-child(1) {
    position: absolute;
    right: 0;
    margin-right: 1rem;
    margin-top: 2rem;
    height: 3px;
    width: 20px;
    transform: rotate(135deg);
    background-color: var(--secend-color);
}

.menu-style {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    position: absolute;
}

.menu-style div {
    height: 0.2rem;
    background-color: var(--secend-color);
    width: 2rem;
}

.exit div:nth-child(2) {
    position: absolute;
    right: 0;
    margin-right: 1rem;
    margin-top: 2rem;
    transform: rotate(45deg);
    height: 3px;
    width: 20px;
    background-color: var(--secend-color);
}

.pop_up .links_box-p a h2 {
    font-size: 2rem;
    color: var(--secend-color);
}

.pop_up .links_box-p a {
    text-decoration: none;
}

.pop_up .links_box-p {
    margin-left: 2rem;
    margin-top: -1rem;
}

.pop_up .links_box-p>* {
    margin-bottom: 1rem;
    font-weight: 500;
    font-size: 1.2rem;
    text-transform: capitalize;
}

.pop_up .links_box-p a {
    text-decoration: none;
    transition: 0.2s;
    color: var(--secend-color);
}

.pop_up .links_box-p a:active {
    color: var(--third-color);
}

.pop_up .links_box-p a:hover {
    letter-spacing: 2px;
    color: var(--fourth-color);
}

.pop_up .logo_box-p {
    display: flex;
    gap: 1rem;
    width: 80%;
    h1 {
        font-size: 1.3rem;
        color: var(--secend-color);
        transition: 0.1s;
        width: 100px;
        margin-left: -1.5rem;
        margin-top: 18%;
    }
    img {
        width: 7rem;
        height: 7rem;
        margin-top: 1rem;
        margin-left: 0rem;
    }
}

.header-m {
    position: fixed;
    z-index: 999;
    width: 100vw;
    height: 6vh;
    background-color: #d88a7b5f;
    backdrop-filter: blur(6px);
    transform: translate(-16px, 0px);
    align-items: center;
    justify-content: center;
    display: none;
    .nav-container-m {
        display: flex;
        margin-left: 10vw;
        margin-top: 1vh;
        width: 90%;
        flex-direction: row;
        .menu-style {
            right: 10vw;
            top: 3.5vw;
            gap: 3px;
            background-color: var(--main-color);
            padding: 7px 10px;
            border-radius: 5px;
            opacity: 0.8;
        }
        .menu-style div {
            height: 3px;
            width: 20px;
            border-radius: 5px;
        }
    }
}

.contact {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: fixed;
    z-index: 9999;
    bottom: 5%;
    right: 5%;
    pointer-events: auto;
    i {
        padding: 0;
        font-size: 1.7rem;
        color: var(--main-color);
    }
    .desktop {
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: auto;
        .whatsapp {
            border: 1px solid var(--main-color);
            border-radius: 100px;
            cursor: pointer;
            padding: 10px 12px;
            background-color: #075e54;
            transition: 0.5s;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 44px;
            min-height: 44px;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            i {
                transition: 0.5s;
                transform: translate(1%, -3%);
                color: white;
                pointer-events: none;
            }
        }
        .whatsapp:hover {
            background-color: var(--main-color);
            i {
                color: #075e54;
            }
        }
    }
    .mobile {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        display: none;
        right: 10%;
        pointer-events: auto;
        div:nth-child(1) {
            i {
                transform: translate(6.5%, 2%);
            }
        }
        div:nth-child(1):hover {
            background-color: var(--main-color);
            i {
                color: #075e54;
            }
        }
        div:nth-child(2) {
            background: linear-gradient(60deg, #3e65cf, #c71610, #f2a60c, #3b60c4, #08851b);
        }
        ;
        div:nth-child(2):hover {
            background: var(--main-color);
            i {
                background: -webkit-linear-gradient(45deg, #3e65cf, #c71610, #f2a60c, #3b60c4, #08851b);
                background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }
        div:nth-child(3) {
            background-color: #1877F2;
        }
        div:nth-child(4) {
            background: linear-gradient( 45deg, #833ab4, #fd1d1d, #fcb045);
        }
        div:nth-child(3):hover {
            background-color: var(--main-color);
            i {
                color: #1877F2;
            }
        }
        div:nth-child(4):hover {
            background: var(--main-color);
            i {
                background: -webkit-linear-gradient(45deg, #833ab4, #fd1d1d, #fcb045);
                background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }
        div:nth-child(4) {
            i {
                transform: translate(6.5%, 2%);
            }
        }
        div {
            border: 1px solid var(--main-color);
            display: flex;
            border-radius: 100px;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            /* padding: 2px 2px; */
            background-color: #075e54;
            min-width: 35px;
            min-height: 35px;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            i {
                font-size: 1.2rem;
                margin-right: -0.2rem;
                margin-left: 1rem;
                /* margin-left: 1rem; */
                pointer-events: none;
                &:nth-child(1){
                    transform: translateX(-10px);
                }
            }
        }
    }
    .mobile>div:hover {
        transition: 1s;
        background-color: var(--main-color);
        i {
            color: #075e54;
        }
    }
}

.r_page {
    display: flex;
    flex-direction: column;
    column-gap: 1rem;
    text-align: center;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    h3 {
        font-size: 0.8rem;
        position: relative;
        font-weight: 500;
        margin-top: 1rem;
        letter-spacing: 1px;
        margin-top: -1.5%;
        text-transform: capitalize;
        color: var(--secend-color);
    }
    .title {
        h1 {
            font-size: 2rem;
            margin-top: 20%;
            color: var(--secend-color);
        }
    }
    .reviews {
        display: flex;
        width: 90%;
        background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%);
        flex-direction: row;
        /* overflow: hidden; */
        gap: 2.5rem;
        border-radius: 20px;
        align-items: center;
        justify-content: center;
        margin-top: 2rem;
        margin-bottom: 2rem;
        padding: 2rem 1rem;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        position: relative;
        scrollbar-width:thin;
        overflow-y: scroll;
        scrollbar-color: #ff9800 transparent;
        -ms-overflow-style: none; /* Internet Explorer 10+ */
        &::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        &::-webkit-scrollbar-thumb {
            background-color: #ff9800;
            border-radius: 10px;
        }
        .review {
            position: relative;
            min-width: 380px;
            max-width: 420px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%);
            height: 300px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border: 2px solid rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            flex-shrink: 0;
            position: relative;
        }
        
        .review::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #ff9800, #ffb347, #ff9800);
            border-radius: 20px 20px 0 0;
        }
        
                        .review .img {
            position: relative;
            top: 0;
            left: 0;
            margin: 0 auto 1rem auto;
            text-align: center;
        }
        
        .review .img img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 4px solid rgba(255, 255, 255, 0.9);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            transition: transform 0.3s ease;
            object-fit: cover;
        }
            .text {
                font-weight: 500;
                padding: 0 1.5rem;
                text-align: center;
                h1 {
                    font-size: 1.3rem;
                    font-weight: 600;
                    color: #134b70;
                    margin-top: 0;
                    margin-bottom: 0.5rem;
                    text-align: center;
                    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
                    display: block;
                }
                
                .country {
                    font-size: 0.85rem;
                    font-weight: 500;
                    color: #666;
                    background: rgba(255, 255, 255, 0.8);
                    padding: 0.2rem 0.8rem;
                    border-radius: 15px;
                    border: 1px solid rgba(0, 0, 0, 0.1);
                    display: inline-block;
                    margin-bottom: 1rem;
                }
                .details {
                    width: 100%;
                    h2 {
                        font-size: 0.95rem;
                        text-align: left;
                        font-weight: 400;
                        line-height: 1.6;
                        color: #2c3e50;
                        margin-bottom: 0;
                        font-style: italic;
                    }
                }
            }
        }
        .review:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
            background: rgba(255, 255, 255, 1);
            border-color: #ff9800;
        }
        
        .review:hover .img img {
            transform: scale(1.1);
        }
        
        .review:last-child {
            margin-right: 2rem;
        }
        .review:first-child {
            margin-left: 225rem;
        }
    }
    



footer {
    position: absolute; /* Adjusted to ensure proper placement */
    z-index: 10; /* Increased to ensure visibility over other elements */
    overflow-x: visible; /* Ensures footer is not clipped */
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(./IMG/Gallery_imgs/Classical\ Tour\ Egypt.jpg);
    /* background-color: #201e433d; */
    background-size: cover;
    width: 100vw;
    left:0;
    height: 65vh;
    margin-top: 10%;
    object-fit: cover;
    
    overflow-x: hidden;
    z-index: 1;
    justify-content: center;
    color: var(--main-color);
    margin-left: 0; /* Reset margin to align the footer properly */
    .f-container {
        width: 100%;
        text-align: left;
        max-width: 1200px;
        margin: 0 auto;
        border: 1px none blue;
        .logo {
            margin-top: 4%;
            
            img {
                width: 150px;
                height: 150px;
            }
            .text {
                display: flex;
                flex-direction: column;
                margin-top: 5%;
                h2 {
                    letter-spacing: 2px;
                    font-size: 2rem;
                    text-transform: capitalize;
                }
            }
        }
        .inforamtion {
            display: flex;
            flex-direction: row;
            overflow: hidden;
            gap: 10%;
            text-transform: capitalize;
            .info {
                display: flex;
                width: 400px;
                flex-direction: column;
                gap: 10%;
                .i_info {
                    display: flex;
                    text-transform: none;
                    font-size: 14px;
                    width: 100%;
                    margin-top: 2%;
                    gap: 5%;
                    h3 {
                        margin-top: -2%;
                        font-weight: 500;
                    }
                }
            }
            .info ul {
                list-style-type: "- ";
                li {
                    margin-top: 2%;
                    cursor: pointer;
                    transition: 0.5s;
                }
                li:hover {
                    letter-spacing: 2px;
                    color: var(--fourth-color);
                }
            }
            .info:nth-child(2) {
                width: 200px;
            }
            .info:nth-child(3) {
                width: 350px;
            }
            .info:nth-child(4) {
                ul {
                    display: flex;
                    gap: 5%;
                    list-style: none;
                    font-size: 1.7rem;
                }
                .copyright {
                    h3 {
                        font-size: 1rem;
                    }
                }
            }
        }
    }
}


/* Add this to your existing style.css file */


/* Mobile Responsive Styles */

@media screen and (max-width: 768px) {
    .menu-style {
        display: flex;
        z-index: 10000;
    }
    body{
        overflow-x: hidden;
    }
    .header-m {
        display: flex;
        height: 50px;
    }
    header {
        display: none;
    }
    /* Reset container */
    .containar {
        max-width: 768px;
    }
    .contact {
        right: 2%;
        .desktop {
            display: none;
        }
        .mobile {
            display: flex;
        }
    }
    /* Landing page background images - mobile layout */
    .lending-page .background-imgs {
        height: 100vh;
        position: relative;
        overflow: hidden;
    }
    .middle-page {
        overflow: hidden;
    }
    .under-m {
        overflow: hidden;
    }
    .lending-page .background-imgs img:nth-child(1) {
        width: 100%;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        filter: brightness(60%);
        object-fit: cover;
    }
    .lending-page .background-imgs img:nth-child(2) {
        display: none;
        /* Hide layered images on mobile for simplicity */
    }
    .lending-page .background-imgs img:nth-child(3) {
        display: none;
        /* Hide layered images on mobile for simplicity */
    }
    /* Next controller - mobile positioning */
    .next-controller {
        position: none;
        top: 50%;
        right: 1rem;
        left: auto;
        transform: translateY(-50%);
        z-index: 9;
        padding: 0.5rem;
    }
    .next-controller h1 {
        padding: 8px 12px;
        font-size: 18px;
    }
    /* Text box - mobile layout */
    .upper-page {
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .text-box {
        background-color: #201e4300;
        backdrop-filter: blur(0px);
        position: absolute;
        z-index: 9;
        left: calc(103.35% - 50vw);
        /* top: calc(50% - 50vh); */
        padding: 1.5rem;
        border-radius: 10px;
        text-align: center;
        width: 100%;
        align-items: center;
        justify-content: center;
    }
    #m {
        display: flex;
    }
    .text-box .title {
        margin-bottom: 1rem;
        padding-top: 0;
    }
    .text-box .title h1 {
        font-size: 3rem;
        margin-bottom: 0.2rem;
    }
    
    /* تنسيق لجميع كلمات العنوان الرئيسي في الشاشات الصغيرة - شفاف زجاجي */
    .text-box .title h1 {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.8) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4);
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
    }
    .text-box p {
        padding-right: 0;
        margin-bottom: 1.5rem;
        font-size: 14px;
        line-height: 1.4;
    }
    .text-box a {
        font-size: 16px;
        padding: 8px 16px;
        display: inline-block;
    }
    .middle-page {
        padding: 0.5rem;
    }
    .middle-page .title h2 {
        margin-top: 2rem;
        font-size: 1.5rem;
        letter-spacing: 1px;
    }
    .middle-page .title .pharagraph {
        width: 90%;
        max-width: 350px;
    }
    .middle-page .title h1 {
        font-size: 14px;
        padding: 0 1rem;
    }
    .line {
        width: 200px;
    }
    .middle-page .kinds {
        flex-direction: column;
        padding: 1rem;
        gap: 1.5rem;
        margin-top: 1rem;
    }
    .middle-page .kinds .left,
    .middle-page .kinds .right {
        min-width: 100%;
        flex: none;
    }
    /* Left section mobile styles */
    .middle-page .kinds .left {
        gap: 1rem;
    }
    .middle-page .kinds .left .up {
        flex-direction: column;
        gap: 1rem;
        position: relative;
    }
    .middle-page .kinds .left .up img {
        max-width: 100%;
        height: 180px;
        margin-right: 0;
    }
    .middle-page .kinds .left .up .label-one {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 120%);
        margin: 0;
        z-index: 5;
        font-size: 16px;
        padding: 8px 16px;
        border-radius: 8px;
    }
    .middle-page .kinds .left .up .label-two {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 120%);
        margin: 0;
        z-index: 5;
        font-size: 16px;
        padding: 8px 16px;
        border-radius: 8px;
    }
    /* Position labels on their respective images */
    .middle-page .kinds .left .up img:nth-child(1)+.label-one {
        top: 90px;
        /* Half of 180px height */
    }
    .middle-page .kinds .left .up img:nth-child(3)+.label-two {
        top: calc(180px + 1rem + 90px);
        /* First image + gap + half of second image */
    }
    .middle-page .kinds .left .down {
        position: relative;
    }
    .middle-page .kinds .left .down img {
        max-width: 100%;
        height: 200px;
    }
    .middle-page .kinds .left .down h1 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 170%);
        margin: 0;
        z-index: 5;
        font-size: 16px;
        padding: 8px 16px;
        border-radius: 8px;
    }
    /* Right section mobile styles */
    .middle-page .kinds .right {
        position: relative;
    }
    .middle-page .kinds .right img {
        max-width: 100%;
        height: 250px;
        margin-left: 0;
    }
    .middle-page .kinds .right h1 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 190%);
        margin: 0;
        z-index: 5;
        font-size: 16px;
        padding: 8px 16px;
        border-radius: 8px;
    }
    /* General mobile text styles */
    .middle-page .kinds h1 {
        font-size: 16px !important;
        white-space: nowrap;
    }
    .containar {
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
    }
    .under-m {
        padding: 0 1rem;
    }
    /* Title section mobile styles */
    .under-m .title h1 {
        margin-top: 2rem;
        font-size: 1.5rem;
        letter-spacing: 1px;
    }
    .under-m .line-1 {
        width: 200px;
    }
    .under-m .title .pharagraph {
        width: 100%;
        max-width: 350px;
        padding: 0 1rem;
    }
    .under-m .title .pharagraph h2 {
        font-size: 14px;
        line-height: 1.4;
    }
    /* Products grid mobile styles */
    .products {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 1rem;
        padding: 0 1rem;
        -webkit-overflow-scrolling: touch;
        /* Smooth scrolling on iOS */
        scrollbar-width: thin;
        /* Firefox */
    }
    /* Hide scrollbar for Chrome, Safari and Opera */
    .products::-webkit-scrollbar {
        height: 4px;
    }
    .products::-webkit-scrollbar-track {
        background: transparent;
    }
    .products::-webkit-scrollbar-thumb {
        background: rgba(128, 128, 128, 0.3);
        border-radius: 2px;
    }
    /* Product card mobile styles */
    .product {
        flex: 0 0 280px;
        width: 280px;
        height: auto;
        min-height: 420px;
        margin-bottom: 1.5rem;
        border-radius: 12px;
        margin-left: 0; /* Remove the large left margin */
    }
    
    .product:nth-child(1) {
        margin-left: 95rem; /* Remove the large left margin */
    }
    
    .product .img {
        height: 180px;
    }
    
    .product img {
        height: 180px;
        object-fit: cover;
    }
    
    .product .text {
        padding: 0.8rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .product h2 {
        color: #ff9800 !important; /* Orange for category/tag */
        font-size: 0.85rem !important;
        font-weight: 600;
        letter-spacing: 0.3px;
        margin: 0 0 0.3rem 0;
        text-transform: uppercase;
    }
    
    .product h1 {
        color: #1a2341 !important; /* Dark blue for title */
        font-size: 1.25rem !important;
        font-weight: 700;
        margin: 0 0 0.4rem 0;
        line-height: 1.3;
        /* Full title display without truncation */
    }
    
    .product h3 {
        color: #7d8597 !important; /* Gray for description */
        font-size: 0.8rem !important;
        font-weight: 500;
        margin: 0 0 0.3rem 0;
        line-height: 1.1;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .product h4 {
        color: #e65100 !important; /* Dark orange for price */
        font-size: 0.95rem !important;
        font-weight: 700;
        margin: 0;
        letter-spacing: 0.2px;
    }
    
    .product h4 span {
        color: #7d8597 !important; /* Gray for "per person" */
        font-size: 0.75rem !important;
        font-weight: 500;
        margin-left: 0.2rem;
    }
    /* Hover effects on mobile */
    .product:hover img {
        transform: scale(1.05);
    }
    .h_u_page .tours {
        grid-template-columns: 1fr;
        padding: 1.5rem;
        gap: 1.5rem;
        width: min(1000px, 95vw);
    }
    .h_u_page .tour {
        max-width: 100%;
        border-radius: 15px;
    }
    .h_u_page .tour .img {
        height: 180px;
    }
    
    .h_u_page .tour {
        height: 420px;
    }
    
    .h_u_page .tour .text {
        height: 220px;
        padding: 1rem;
    }
    
    .h_u_page .tour .text h1 {
        font-size: 1rem;
    }
    
    .h_u_page .tour .text p {
        font-size: 0.5rem;
    }
    .h_u_page .tour .details {
        max-width: 20%;
        flex-direction: row;
    }
    .h_u_page .title {
        margin-bottom: 1.5rem;
    }
    .h_u_page .title h1 {
        margin-top: 2rem;
    }
    .w_us {
        background-attachment: fixed;
        margin-top: 50px;
        height: 1000px;
        .background img {
            display: none;
        }
        .title {
            width: 90%;
        }
        .text {
            width: 60vw;
        }
    }
    .r_page {
        .reviews {
            width: 95%;
            margin: 0 auto;
            gap: 1.5rem;
            padding: 1.5rem 0.5rem;
            .review {
                min-width: 320px;
                max-width: 300px;
                height: 230px;
                .img img{
                    width: 60px;
                    margin-top: 2rem;
                    height: 60px;
                }
                .text{
                    h1{
                        font-size: 1.1rem;
                    }
                    .details h2 {
                        font-size: 0.7rem;
                    }       
                }
            }
            .review:first-child {
                margin-left: 195rem;
            }
            .review:last-child {
                margin-right: 1rem;
            }
        }
    }
    footer {
        min-height: 300px;
        padding: 2rem 0;

        .f-container {
            padding: 0 1rem;
            display: flex;
            flex-direction: column;

            .logo {
                img {
                    width: 100px;
                    height: 100px;
                }
                
                .text h2 {
                    font-size: 1.5rem;
                }
            }
            
            .inforamtion {
                grid-template-columns: 1fr;
                gap: 1.5rem;
                /* width: 90%; */
                overflow-x: scroll;
                text-align: left;
                justify-items: start;
                padding-top: 3rem;
                
                .info {
                    text-align: center;
                    
                    h1 {
                        font-size: 1.1rem;
                    }
                    
                    .i_info {
                        justify-content: center;
                        
                        h3 {
                            font-size: 13px;
                        }
                    }
                    
                    ul li {
                        font-size: 13px;
                    }
                }
                
                .info:nth-child(4) {
                    ul {
                        justify-content: center;
                        
                        li i {
                            font-size: 1.3rem;
                        }
                    }
                    
                    .copyright h3 {
                        font-size: 0.8rem;
                    }
                }
            }
        }
    }
}


/* Extra small mobile devices */

@media screen and (max-width: 480px) {
    .text-box {
        margin-left: -1rem;
        right: 0.5rem;
        padding: 1rem;
    }
    .text-box .title h1 {
        font-size: 3rem;
    }
    .body{
        overflow-x: hidden;
    }
    /* تنسيق لجميع كلمات العنوان الرئيسي في الشاشات الأصغر - شفاف زجاجي */
    .text-box .title h1 {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.8) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4);
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
    }
    .text-box p {
        font-size: 13px;
    }
    .middle-page {
        padding: 0.5rem;
        /* justify-content: center;
        align-items: center; */
    }
    .middle-page .kinds {
        gap: 1rem;
    }
    .middle-page .kinds .left .up img,
    .middle-page .kinds .left .down img,
    .middle-page .kinds .right img {
        border-radius: 10px;
    }
    .next-controller {
        right: 0.5rem;
    }
    .middle-page .title h2 {
        font-size: 1.3rem;
    }
    .middle-page .title .pharagraph {
        width: 95%;
    }
    .middle-page .title h1 {
        font-size: 13px;
    }
    .line {
        width: 150px;
    }
    .middle-page .kinds {
        padding: 0.8rem;
    }
    .middle-page .kinds .left .up img {
        height: 150px;
    }
    .middle-page .kinds .left .down img {
        height: 170px;
    }
    .middle-page .kinds .right img {
        height: 200px;
    }
    .middle-page .kinds h1 {
        font-size: 14px !important;
        padding: 6px 12px !important;
    }
    /* Adjust label positions for smaller images */
    .middle-page .kinds .left .up img:nth-child(1)+.label-one {
        top: 75px;
        /* Half of 150px height */
    }
    .middle-page .kinds .left .up img:nth-child(3)+.label-two {
        top: calc(150px + 1rem + 75px);
        /* First image + gap + half of second image */
    }
    .under-m {
        padding: 0 0.5rem;
    }
    .under-m .title h1 {
        font-size: 1.3rem;
        margin-top: 4.5rem;
    }
    .under-m .line-1 {
        width: 150px;
    }
    .under-m .title .pharagraph {
        max-width: 300px;
        padding: 0 0.5rem;
    }
    .under-m .title .pharagraph h2 {
        font-size: 13px;
    }
    .products {
        width: 100%;
        padding: 0.5rem;
        gap: 1rem;
    }
    
    .product {
        width: 100%;
        max-width: 320px;
        min-height: 400px;
        margin: 0 auto 1rem auto;
    }
    
    .product .img {
        height: 160px;
    }
    
    .product img {
        height: 160px;
    }
    
    .product h2 {
        font-size: 0.8rem !important;
        margin: 0 0 0.3rem 0;
    }
    
    .product h1 {
        font-size: 0.95rem !important;
        margin: 0 0 0.3rem 0;
        line-height: 1.2;
    }
    
    .product h3 {
        font-size: 0.75rem !important;
        margin: 0 0 0.3rem 0;
        line-height: 1.1;
    }
    
    .product h4 {
        font-size: 0.9rem !important;
    }
    
    .product h4 span {
        font-size: 0.7rem !important;
    }
    .h_u_page {
        padding: 10px;
    }
    .h_u_page .tours {
        padding: 1rem;
        gap: 1rem;
        width: min(1000px, 95vw);
        grid-template-columns: 1fr;
    }
    .h_u_page .tour .img {
        height: 180px;
        border-radius: 15px 15px 0 0;
    }
    .h_u_page .tour .text {
        height: 220px;
        padding: 1rem;
    }
    .h_u_page .tour .text h1 {
        font-size: 1rem;
    }
    .h_u_page .tour .text p {
        font-size: 0.5rem;
    }
    .h_u_page .tour .details {
        flex-direction: row;
    }
    .h_u_page .title {
        margin-bottom: 1.5rem;
    }
    .h_u_page .title h1 {
        margin-top: 2rem;
    }
    .w_us {
        background-attachment: fixed;
        margin-top: 50px;
        height: 1000px;
        .background img {
            display: none;
        }
        .title {
            width: 90%;
        }
        .text {
            width: 60vw;
        }
    }
    .r_page {
        .reviews {
            width: 95%;
            margin: 0 auto;
            gap: 1.5rem;
            padding: 1.5rem 0.5rem;
            .review {
                min-width: 320px;
                max-width: 300px;
                height: 230px;
                .img img{
                    width: 60px;
                    margin-top: 2rem;
                    height: 60px;
                }
                .text{
                    h1{
                        font-size: 1.1rem;
                    }
                    .details h2 {
                        font-size: 0.7rem;
                    }       
                }
            }
            .review:first-child {
                margin-left: 195rem;
            }
            .review:last-child {
                margin-right: 1rem;
            }
        }
    }
    footer {
        min-height: 300px;
        padding: 2rem 0;

        .f-container {
            padding: 0 1rem;
            display: flex;
            flex-direction: column;

            .logo {
                img {
                    width: 100px;
                    height: 100px;
                }
                
                .text h2 {
                    font-size: 1.5rem;
                }
            }
            
            .inforamtion {
                grid-template-columns: 1fr;
                gap: 1.5rem;
                /* width: 90%; */
                overflow-x: scroll;
                text-align: left;
                justify-items: start;
                padding-top: 3rem;
                
                .info {
                    text-align: center;
                    
                    h1 {
                        font-size: 1.1rem;
                    }
                    
                    .i_info {
                        justify-content: center;
                        
                        h3 {
                            font-size: 13px;
                        }
                    }
                    
                    ul li {
                        font-size: 13px;
                    }
                }
                
                .info:nth-child(4) {
                    ul {
                        justify-content: center;
                        
                        li i {
                            font-size: 1.3rem;
                        }
                    }
                    
                    .copyright h3 {
                        font-size: 0.8rem;
                    }
                }
            }
        }
    }
}


/* Extra small mobile devices */

@media screen and (max-width: 480px) {
    .text-box {
        margin-left: -1rem;
        right: 0.5rem;
        padding: 1rem;
    }
    .text-box .title h1 {
        font-size: 3rem;
    }
    .body{
        overflow-x: hidden;
    }
    /* تنسيق لجميع كلمات العنوان الرئيسي في الشاشات الأصغر - شفاف زجاجي */
    .text-box .title h1 {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.8) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4);
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
    }
    .text-box p {
        font-size: 13px;
    }
    .middle-page {
        padding: 0.5rem;
        /* justify-content: center;
        align-items: center; */
    }
    .middle-page .kinds {
        gap: 1rem;
    }
    .middle-page .kinds .left .up img,
    .middle-page .kinds .left .down img,
    .middle-page .kinds .right img {
        border-radius: 10px;
    }
    .next-controller {
        right: 0.5rem;
    }
    .middle-page .title h2 {
        font-size: 1.3rem;
    }
    .middle-page .title .pharagraph {
        width: 95%;
    }
    .middle-page .title h1 {
        font-size: 13px;
    }
    .line {
        width: 150px;
    }
    .middle-page .kinds {
        padding: 0.8rem;
    }
    .middle-page .kinds .left .up img {
        height: 150px;
    }
    .middle-page .kinds .left .down img {
        height: 170px;
    }
    .middle-page .kinds .right img {
        height: 200px;
    }
    .middle-page .kinds h1 {
        font-size: 14px !important;
        padding: 6px 12px !important;
    }
    /* Adjust label positions for smaller images */
    .middle-page .kinds .left .up img:nth-child(1)+.label-one {
        top: 75px;
        /* Half of 150px height */
    }
    .middle-page .kinds .left .up img:nth-child(3)+.label-two {
        top: calc(150px + 1rem + 75px);
        /* First image + gap + half of second image */
    }
    .under-m {
        padding: 0 0.5rem;
    }
    .under-m .title h1 {
        font-size: 1.3rem;
        margin-top: 4.5rem;
    }
    .under-m .line-1 {
        width: 150px;
    }
    .under-m .title .pharagraph {
        max-width: 300px;
        padding: 0 0.5rem;
    }
    .under-m .title .pharagraph h2 {
        font-size: 13px;
    }
    .products {
        width: 100%;
        padding: 0.5rem;
        gap: 1rem;
    }
    
    .product {
        width: 100%;
        max-width: 320px;
        min-height: 400px;
        margin: 0 auto 1rem auto;
    }
    
    .product .img {
        height: 160px;
    }
    
    .product img {
        height: 160px;
    }
    
    .product h2 {
        font-size: 0.8rem !important;
        margin: 0 0 0.3rem 0;
    }
    
    .product h1 {
        font-size: 0.95rem !important;
        margin: 0 0 0.3rem 0;
        line-height: 1.2;
    }
    
    .product h3 {
        font-size: 0.75rem !important;
        margin: 0 0 0.3rem 0;
        line-height: 1.1;
    }
    
    .product h4 {
        font-size: 0.9rem !important;
    }
    
    .product h4 span {
        font-size: 0.7rem !important;
    }
    .h_u_page {
        padding: 10px;
    }
    .h_u_page .tours {
        padding: 1rem;
        gap: 1rem;
        width: min(1000px, 95vw);
        grid-template-columns: 1fr;
    }
    .h_u_page .tour .img {
        height: 180px;
        border-radius: 15px 15px 0 0;
    }
    .h_u_page .tour .text {
        height: 220px;
        padding: 1rem;
    }
    .h_u_page .tour .text h1 {
        font-size: 1rem;
    }
    .h_u_page .tour .text p {
        font-size: 0.5rem;
    }
    .h_u_page .tour .details {
        flex-direction: row;
    }
    .h_u_page .title {
        margin-bottom: 1.5rem;
    }
    .h_u_page .title h1 {
        margin-top: 2rem;
    }
    .w_us {
        background-attachment: fixed;
        margin-top: 50px;
        height: 1000px;
        .background img {
            display: none;
        }
        .title {
            width: 90%;
        }
        .text {
            width: 60vw;
        }
    }
    .r_page {
        .reviews {
            width: 95%;
            margin: 0 auto;
            gap: 1.5rem;
            padding: 1.5rem 0.5rem;
            .review {
                min-width: 320px;
                max-width: 300px;
                height: 230px;
                .img img{
                    width: 60px;
                    margin-top: 2rem;
                    height: 60px;
                }
                .text{
                    h1{
                        font-size: 1.1rem;
                    }
                    .details h2 {
                        font-size: 0.7rem;
                    }       
                }
            }
            .review:first-child {
                margin-left: 195rem;
            }
            .review:last-child {
                margin-right: 1rem;
            }
        }
    }
    footer {
        min-height: 300px;
        padding: 2rem 0;

        .f-container {
            padding: 0 1rem;
            display: flex;
            flex-direction: column;

            .logo {
                img {
                    width: 100px;
                    height: 100px;
                }
                
                .text h2 {
                    font-size: 1.5rem;
                }
            }
            
            .inforamtion {
                grid-template-columns: 1fr;
                gap: 1.5rem;
                /* width: 90%; */
                overflow-x: scroll;
                text-align: left;
                justify-items: start;
                padding-top: 3rem;
                
                .info {
                    text-align: center;
                    
                    h1 {
                        font-size: 1.1rem;
                    }
                    
                    .i_info {
                        justify-content: center;
                        
                        h3 {
                            font-size: 13px;
                        }
                    }
                    
                    ul li {
                        font-size: 13px;
                    }
                }
                
                .info:nth-child(4) {
                    ul {
                        justify-content: center;
                        
                        li i {
                            font-size: 1.3rem;
                        }
                    }
                    
                    .copyright h3 {
                        font-size: 0.8rem;
                    }
                }
            }
        }
    }
}


/* Landscape mobile orientation */

@media screen and (max-width: 768px) and (orientation: landscape) {
    .lending-page .background-imgs {
        height: 100vh;
    }
    .text-box {
        bottom: 1rem;
        left: 1rem;
        right: 50%;
        padding: 1rem;
    }
    .text-box .title h1 {
        font-size: 1.6rem;
    }
    .middle-page .kinds .left .up {
        flex-direction: row;
        justify-content: space-around;
    }
    .middle-page .kinds .left .up img {
        max-width: 45%;
    }
    .products {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
        padding: 0.5rem;
    }
    
    .product {
        width: calc(50% - 0.5rem);
        max-width: 300px;
        min-height: 400px;
    }
    
    .product .text {
        padding: 0.8rem;
    }
    
    .product h2 {
        font-size: 0.85rem !important;
        margin: 0 0 0.3rem 0;
    }
    
    .product h1 {
        font-size: 1.05rem !important;
        margin: 0 0 0.4rem 0;
        line-height: 1.3;
    }
    
    .product h3 {
        font-size: 0.8rem !important;
        margin: 0 0 0.3rem 0;
        line-height: 1.1;
    }
    
    .product h4 {
        font-size: 0.95rem !important;
    }
    
    .product h4 span {
        font-size: 0.75rem !important;
    }
}


/* Tablet Responsive Styles */

@media screen and (min-width: 769px) and (max-width: 1024px) {
    header {
        display: none;
    }
    .products {
        column-gap: 1.5rem;
        row-gap: 2rem;
        padding: 1rem;
    }
    
    .product {
        width: calc(50% - 0.75rem);
        max-width: 350px;
        min-height: 450px;
    }
    
    .product .text {
        padding: 1rem;
    }
    
    .product h2 {
        font-size: 0.9rem !important;
        margin: 0 0 0.4rem 0;
    }
    
    .product h1 {
        font-size: 1.05rem !important;
        margin: 0 0 0.4rem 0;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .product h3 {
        font-size: 0.85rem !important;
        margin: 0 0 0.4rem 0;
        line-height: 1.2;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .product h4 {
        font-size: 1rem !important;
        margin: 0;
        letter-spacing: 0.2px;
    }
    
    .product h4 span {
        font-size: 0.8rem !important;
        margin-left: 0.2rem;
    }
    .under-m .title h1 {
        font-size: 1.8rem;
    }
    .under-m .line-1 {
        width: 400px;
    }
    .under-m .title .pharagraph {
        width: 500px;
    }
    /* Container adjustments */
    .containar {
        width: 100%;
        overflow-x: hidden;
    }
    /* Landing page background images - tablet layout */
    .lending-page .background-imgs {
        height: 100vh;
        position: relative;
    }
    .lending-page .background-imgs img:nth-child(1) {
        width: 60rem;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        filter: brightness(80%);
        object-fit: cover;
    }
    .lending-page .background-imgs img:nth-child(2) {
        width: 70%;
        height: 100vh;
        margin-left: 8rem;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        filter: brightness(40%);
        object-fit: cover;
    }
    .lending-page .background-imgs img:nth-child(3) {
        width: 70%;
        height: 100vh;
        margin-left: 12rem;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        filter: brightness(15%);
        object-fit: cover;
    }
    /* Next controller - tablet positioning */
    .next-controller {
        position: absolute;
        top: 50%;
        left: 58rem;
        transform: translateY(-50%);
        z-index: 9;
        padding: 0.5rem;
    }
    .next-controller h1 {
        padding: 8px 14px;
        font-size: 20px;
    }
    /* Text box - tablet layout */
    .text-box {
        background-color: #201e4370;
        backdrop-filter: blur(8px);
        margin-top: -18rem;
        z-index: 9;
        color: var(--main-color);
        padding-left: 2rem;
        padding-right: 2rem;
        border-bottom-right-radius: 8px;
        border-top-right-radius: 8px;
        position: absolute;
        padding-bottom: 2rem;
        max-width: 400px;
    }
    .text-box .title {
        margin-bottom: 1.2rem;
        padding-top: 2rem;
        font-size: 18px;
    }
    .text-box .title h1 {
        font-size: 2.2rem;
        line-height: 1.2;
    }
    
    /* تنسيق لجميع كلمات العنوان الرئيسي في الشاشات المتوسطة - شفاف زجاجي */
    .text-box .title h1 {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.8) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4);
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
    }
    .text-box p {
        margin-bottom: 2rem;
        font-size: 16px;
        line-height: 1.5;
    }
    .text-box a {
        font-size: 18px;
        padding: 8px 20px;
    }
    /* Middle page - tablet layout */
    .middle-page {
        padding: 2rem;
    }
    .middle-page .kinds {
        display: flex;
        flex-direction: row;
        margin-top: 2rem;
        gap: 1.5rem;
        justify-content: space-between;
    }
    /* Left section - tablet adjustments */
    .middle-page .kinds .left {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        flex: 1;
    }
    .middle-page .kinds .left .up {
        display: flex;
        gap: 1rem;
        justify-content: space-between;
    }
    .middle-page .kinds .left .up img {
        width: 12rem;
        height: 12rem;
        border-radius: 15px;
        object-fit: cover;
    }
    .middle-page .kinds .left .up .label-one {
        margin-top: 9rem;
        margin-left: 2rem;
        font-size: 16px;
        padding: 6px 16px;
    }
    .middle-page .kinds .left .up .label-two {
        margin-top: 9rem;
        margin-left: 14rem;
        font-size: 16px;
        padding: 6px 16px;
    }
    .middle-page .kinds .left .down {
        position: relative;
    }
    .middle-page .kinds .left .down img {
        width: 100%;
        max-width: 26rem;
        height: 16rem;
        margin: 0;
        object-fit: cover;
        border-radius: 15px;
    }
    .middle-page .kinds .left .down h1 {
        margin-top: -3rem;
        margin-left: 2rem;
        font-size: 16px;
        padding: 6px 16px;
    }
    /* Right section - tablet layout */
    .middle-page .kinds .right {
        flex: 1;
        position: relative;
    }
    .middle-page .kinds .right img {
        width: 100%;
        max-width: 32rem;
        height: 30rem;
        margin: 0;
        object-fit: cover;
        border-radius: 15px;
    }
    .middle-page .kinds .right h1 {
        margin-top: -3rem;
        margin-left: 1rem;
        font-size: 16px;
        padding: 6px 16px;
    }
    /* General tablet improvements */
    .middle-page .kinds h1 {
        font-size: 16px;
        background-color: var(--secend-color);
        color: var(--main-color);
        border-radius: 6px;
        z-index: 4;
        position: absolute;
    }
}


/* Tablet Portrait (768px - 834px) */

@media screen and (min-width: 768px) and (max-width: 834px) and (orientation: portrait) {
    .lending-page .background-imgs img:nth-child(1) {
        width: 55rem;
    }
    .lending-page .background-imgs img:nth-child(2) {
        width: 65%;
        margin-left: 20rem;
    }
    .lending-page .background-imgs img:nth-child(3) {
        width: 65%;
        margin-left: 10rem;
    }
    .text-box {
        margin-top: -43rem;
    }
    .next-controller {
        left: 48rem;
    }
    .middle-page .kinds .left .up {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    .middle-page .kinds .left .up img:nth-child(1) {
        margin-left: -2.5rem;
    }
    .middle-page .kinds .left .up img {
        width: 23rem;
        margin-left: 0rem;
        height: 10rem;
    }
    .middle-page .kinds .left .up .label-one,
    .middle-page .kinds .left .up .label-two {
        margin: -2.5rem 0 0 0;
        position: relative;
    }
    .middle-page .kinds .right img {
        height: 40.5rem;
    }
}

@media (max-width: 320px) {
    .h_u_page .tour {
        height: 380px;
    }
    
    .h_u_page .tour .text h1 {
        font-size: 1.2rem;
    }
    
    .h_u_page .tour .text p {
        font-size: 0.7rem;
    }
    
    .h_u_page .tour .text .details .detail-item {
        font-size: 0.65rem;
    }
}

/* ===== CITY POSTERS ROW STYLES ===== */
.city-posters-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1.3rem;
  justify-content: center;
  align-items: stretch;
  margin: 2.2rem 0 2.2rem 0;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.city-poster {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 320px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 24px 0 #b6e0fe33, 0 1.5px 8px #ffb34722;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #fff;
  border: 3px solid #fff3;
  transition: box-shadow 0.18s, transform 0.18s, border 0.18s;
  cursor: pointer;
}

.city-poster:hover {
  box-shadow: 0 12px 32px 0 #4fc3f755;
  transform: translateY(-6px) scale(1.035);
}

.city-img img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0; top: 0;
  z-index: 1;
  transition: filter 0.18s;
}

.city-poster:hover .city-img img {
  filter: brightness(0.91) saturate(1.13);
}

.city-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.78;
}

.city-content {
  position: relative;
  z-index: 3;
  padding: 1.2rem 0.7rem 1.1rem 0.7rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  text-align: center;
  gap: 0.5rem;
}

.city-icon {
  font-size: 1.7rem;
  margin-bottom: 0.3rem;
  color: #ffe0b2;
  text-shadow: 0 2px 12px #134b7055;
}

.city-name {
  font-size: 1.18rem;
  font-weight: 900;
  letter-spacing: 1.2px;
  margin-bottom: 0.1rem;
  color: #fff;
  text-shadow: 0 2px 12px #134b7055;
}

.city-desc {
  font-size: 0.98rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: #fff;
  text-shadow: 0 1px 8px #134b7044;
  line-height: 1.5;
}

.city-info {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
  font-size: 0.93rem;
  font-weight: 500;
  color: #ffe0b2;
  background: rgba(19,75,112,0.13);
  border-radius: 7px;
  padding: 0.18rem 0.7rem;
  box-shadow: 0 1px 4px #b6e0fe22;
}

.city-info i {
  margin-right: 0.18rem;
  color: #ffb347;
}

.city-btn {
  background: #4fc3f7;
  color: #134b70;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1.3rem;
  font-size: 1.01rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 8px #b6e0fe33;
  transition: background 0.18s, box-shadow 0.18s;
  text-decoration: none;
  margin-top: auto;
  letter-spacing: 1px;
}

.city-btn:hover {
  background: #134b70;
  color: #fff;
  box-shadow: 0 4px 16px #4fc3f755;
}

.city-poster.cairo .city-overlay { background: linear-gradient(160deg, #134b70cc 0%, #4fc3f7bb 60%, #b6e0fe99 100%); }
.city-poster.luxor .city-overlay { background: linear-gradient(160deg, #b6e0fecc 0%, #fff 100%); }
.city-poster.aswan .city-overlay { background: linear-gradient(160deg, #4fc3f7cc 0%, #b6e0fe99 100%); }
.city-poster.alex .city-overlay { background: linear-gradient(160deg, #b6e0fecc 0%, #134b7099 100%); }

.city-poster {
  border: 3px solid #b6e0fe;
}

.city-poster:hover {
  border: 3px solid #4fc3f7;
  box-shadow: 0 12px 32px 0 #4fc3f755, 0 2px 16px #b6e0fe44;
}

.city-name, .city-icon {
  color: #134b70;
  text-shadow: 0 2px 12px #b6e0fe55, 0 2px 12px #134b7055;
}

.city-btn {
  background: linear-gradient(90deg, #4fc3f7 60%, #b6e0fe 100%);
  color: #134b70;
  box-shadow: 0 2px 8px #b6e0fe33;
}

.city-btn:hover {
  background: linear-gradient(90deg, #b6e0fe 40%, #4fc3f7 100%);
  color: #fff;
  box-shadow: 0 4px 16px #b6e0fe55;
}

.city-info {
  background: rgba(19,75,112,0.13);
  color: #134b70;
}

.city-poster.cairo .city-name,
.city-poster.alex .city-name {
  color: #ffb347;
  text-shadow: 0 2px 12px #ffb34755, 0 2px 12px #134b7055;
}

.city-poster.cairo .city-icon,
.city-poster.alex .city-icon {
  color: #ffb347;
}

.city-poster:hover {
  border: 3px solid #ffb347;
  box-shadow: 0 12px 32px 0 #ffb34755, 0 2px 16px #4fc3f744;
}

.city-btn {
  background: linear-gradient(90deg, #ffb347 60%, #4fc3f7 100%);
  color: #fff;
  box-shadow: 0 2px 8px #ffb34733;
}

.city-btn:hover {
  background: linear-gradient(90deg, #4fc3f7 40%, #ffb347 100%);
  box-shadow: 0 4px 16px #ffb34755;
}

.title h1,
.labels h1,
.reviews-title,
.whypro-title {
  text-shadow: 0 2px 12px #ffb34733, 0 1px 8px #134b7033;
}

/* Hero/main title transparent/white with shadow */
/* .title h1:first-child {
  opacity: 0.92;
  text-shadow: 0 4px 24px #134b7077, 0 2px 12px #fff8;
} */

/* .title h1:not(:first-child),
.labels h1:not(:first-child),
.reviews-title:not(:first-child),
.whypro-title:not(:first-child) {
  text-shadow: 0 2px 12px #ffb34733, 0 1px 8px #134b7033;
} */

.title h2, .title h3, .title p, .title .pharagraph, .title .line, .title .line-1 {
  color: inherit;
}

/* ===== WHY CHOOSE US SECTION ===== */
.why-pro {
    position: relative;
    padding: 4rem 0;
    margin: 4rem 0;
    border-radius: 15px;
    overflow: hidden;
}

.whypro-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.whypro-bg-wave-top,
.whypro-bg-wave-bottom {
    position: absolute;
    width: 100%;
    height: 90px;
}

.whypro-bg-wave-top {
    top: 0;
}

.whypro-bg-wave-bottom {
    bottom: 0;
    transform: rotate(180deg);
}



/* Beautiful gradient background for why-pro section */
.whypro-bg-gradient {
    position: absolute;
    inset: 0;
    background: 
      linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 25%, #f1f8e9 50%, #fff8e1 75%, #fce4ec 100%),
      linear-gradient(45deg, rgba(79, 195, 247, 0.08) 0%, rgba(255, 152, 0, 0.08) 50%, rgba(182, 224, 254, 0.08) 100%);
    z-index: 1;
    pointer-events: none;
}

.whypro-bg-pattern {
    position: absolute;
    inset: 0;
    background-image: 
      radial-gradient(circle at 20% 80%, rgba(79, 195, 247, 0.08) 0%, transparent 60%),
      radial-gradient(circle at 80% 20%, rgba(255, 152, 0, 0.08) 0%, transparent 60%),
      radial-gradient(circle at 40% 40%, rgba(182, 224, 254, 0.08) 0%, transparent 60%),
      radial-gradient(circle at 60% 60%, rgba(255, 193, 7, 0.06) 0%, transparent 60%);
    z-index: 2;
    pointer-events: none;
}

.whypro-content {
    position: relative;
    z-index: 5;
    max-width: 1200px;
    margin: 0 auto;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 2.7rem 2.5rem 2.2rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
}

.whypro-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.2rem;
}

.whypro-title-icon {
    font-size: 2.2rem;
    color: #ff9800;
    background: linear-gradient(135deg, #ff9800 60%, #ffb347 100%);
    border-radius: 50%;
    padding: 0.3rem 0.6rem;
    box-shadow: 0 2px 8px #ff980033;
    display: flex;
    align-items: center;
    justify-content: center;
}

.whypro-title {
    font-size: 2.3rem;
    font-weight: 800;
    color: #ff9800;
    letter-spacing: 2px;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    text-align: left;
    margin: 0;
    text-transform: uppercase;
    position: relative;
}

.whypro-title-underline {
    display: block;
    width: 80px;
    height: 5px;
    border-radius: 2px;
    background: linear-gradient(90deg, #ff9800 40%, #ffb347 100%);
    margin-top: 0.2rem;
    margin-bottom: 1.2rem;
    opacity: 0.85;
    box-shadow: 0 0 8px #ff980055;
}

.whypro-lead {
    color: #134b70;
    font-size: 1.13rem;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.9);
    margin: 0 0 2.2rem 0;
    text-align: center;
    line-height: 1.7;
    max-width: 900px;
    background: none;
    border-radius: 0;
    padding: 0 1rem;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
}

.whypro-features-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 2.2rem;
    margin-top: 1.2rem;
}

.whypro-feature-card {
    background: rgba(255,255,255,0.95);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 2.5rem 1.5rem 2rem 1.5rem;
    min-width: 210px;
    max-width: 320px;
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    cursor: pointer;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.8);
    text-align: center;
}

.whypro-feature-card:hover {
    transform: translateY(-12px) scale(1.05);
    box-shadow: 0 20px 40px rgba(255, 152, 0, 0.25);
    background: rgba(255,255,255,1);
    border-color: #ff9800;
}

.whypro-feature-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: #fff;
    margin-bottom: 0.2rem;
    box-shadow: 0 2px 12px 0 #b6e0fe55;
    transition: box-shadow 0.18s, transform 0.18s;
}

.whypro-gradient1 {
    background: linear-gradient(135deg, #4fc3f7 60%, #81d4fa 100%);
}

.whypro-gradient2 {
    background: linear-gradient(135deg, #ff9800 60%, #ffb347 100%);
}

.whypro-gradient3 {
    background: linear-gradient(135deg, #00bfae 60%, #4fc3f7 100%);
}

.whypro-feature-title {
    font-size: 1.13rem;
    font-weight: 700;
    color: #134b70;
    margin-bottom: 0.2rem;
    letter-spacing: 0.5px;
    text-align: center;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

.whypro-feature-desc {
    font-size: 0.98rem;
    color: #2c3e50;
    font-family: 'Roboto', Arial, sans-serif;
    text-align: center;
    line-height: 1.6;
    opacity: 0.95;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

/* Mobile Responsive for new sections */
@media screen and (max-width: 768px) {
    .city-posters-row {
        display: flex;
        flex-direction: column;
        gap: 1.7rem;
        align-items: center;
    }
    
    .city-poster {
        width: 98vw;
        max-width: 320px;
        height: 240px;
    }

    .city-content {
        padding: 0.7rem 0.3rem 0.7rem 0.3rem;
        font-size: 0.93rem;
    }
    
    .city-info {
        font-size: 0.6rem;
        padding: 0.12rem 0.4rem;
    }
    .city-name{
        font-size: 1.1rem;
        margin-bottom: 0.2rem;
    }
    .city-desc{
        font-size: 0.8rem;
        /* line-height: 1.4; */
    }
    .why-pro {
        padding: 2rem 0;
        margin: 2rem 0;
    }
    
    .whypro-title {
        font-size: 2rem;
    }
    
    .whypro-lead {
        font-size: 1rem;
        padding: 0 1rem;
    }
    
    .whypro-features-row {
        flex-direction: column;
        gap: 1.2rem;
        align-items: center;
    }
    
    .whypro-feature-card {
        min-width: 180px;
        max-width: 400px;
        width: 100%;
        padding: 1.5rem;
    }
}