/* =====================================================
   HOME PAGE
===================================================== */

.hero{
    position:relative;
    height:700px;
    background:url("../images/hero-bg.jpg") center center/cover no-repeat;
    overflow:hidden;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        rgba(8,25,50,.45),
        rgba(8,25,50,.15)
    );
}

.hero-overlay{
    display:none;
}

.hero .container{
    position:relative;
    z-index:5;
    height:100%;
}

.hero-content{
    height:100%;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    text-align:center;
    padding-top:120px;
}

.hero-text{
    width:100%;
    max-width:900px;
}

.hero h1{
    color:#fff;
    font-size:78px;      /* كانت أكبر */
    font-weight:700;
    line-height:1.05;
    margin-bottom:8px;
    letter-spacing:-1px;
}

.hero h2{
    color:#f2b233;
   font-family:'Great Vibes',cursive;
font-size:48px;
letter-spacing:1px;
}

.hero p{

    font-size:30px;

    color:#fff;

    font-weight:400;

}

/* زر الـ CTA فقط */

.hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 45px;

    background:#d9a227;

    color:#fff;

    text-decoration:none;

    border-radius:10px;

    font-size:18px;

    font-weight:600;

    transition:.3s;

}

.hero-btn:hover{

    background:#072a4d;

}

/* إخفاء الصور القديمة */

.cloud,
.cloud1,
.cloud2,
.cloud3,
.eiffel,
.dubai{
    display:none;
}
/* =====================================================
   SEARCH BOX
===================================================== */

.search-section{

    position:relative;

    margin-top:-145px;

    z-index:20;

}

.search-box{

    width:100%;

    max-width:1180px;

    margin:auto;

    border-radius:22px;

    overflow:hidden;

    background:#fff;

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

}

/* ================= Tabs ================= */

.search-tabs{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    background:#fff;

}

.search-tabs button{

    height:68px;

    border:none;

    border-right:1px solid #ececec;

    background:#fff;

    color:#222;

    font-size:18px;

    font-weight:600;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    cursor:pointer;

    transition:.3s;

}

.search-tabs button:last-child{

    border-right:none;

}

.search-tabs button.active{

    background:#072a4d;

    color:#fff;

    border-radius:20px 20px 0 0;

}

.search-tabs button:hover{

    background:#072a4d;

    color:#fff;

}

/* ================= Fields ================= */

.search-fields{
    display:flex;
    align-items:center;
    padding:22px 20px;
}

.field{

    flex:1;

    padding:0 25px;

    border-right:1px solid #ececec;

}

.field:last-child{

    border-right:none;

}

.field label{

    display:block;

    font-size:14px;

    color:#777;

    margin-bottom:10px;

    font-weight:500;

}

.field input,
.field select{

    width:100%;

    border:none;

    outline:none;

    background:transparent;

    font-size:18px;

    color:#222;

    padding:0;

}

/* ================= Search Button ================= */

.search-button{

    display:flex;

    justify-content:center;

    padding:0 30px 35px;

}

.search-button button{

    width:420px;

    height:64px;

    border:none;

    border-radius:10px;

    background:#d9a227;

    color:#fff;

    font-size:20px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.search-button button:hover{

    background:#072a4d;

}

.search-button i{

    margin-right:10px;

}
/* =====================================================
   FEATURES
===================================================== */

.features{
    background:#fff;
    padding:25px 0 35px;
    margin-top:0;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    background:#fff;
    border-radius:0;
    box-shadow:none;
}

.feature{
    display:flex;
    align-items:center;
    gap:18px;

    padding:18px 28px;

    background:transparent;
    border-radius:0;
    box-shadow:none;

    border-right:1px solid #ececec;

    text-align:left;

    transition:.3s;
}

.feature:last-child{
    border-right:none;
}

.feature:hover{
    transform:none;
}

.feature i{
    width:56px;
    height:56px;
    min-width:56px;

    border-radius:50%;
    background:#072a4d;

    color:#fff;

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

    font-size:22px;

    margin:0;
}

.feature h3{
    margin:0 0 4px;
    font-size:22px;
    color:#072a4d;
}

.feature p{
    margin:0;
    font-size:15px;
    color:#777;
    line-height:1.5;
}

/* =====================================================
   DESTINATIONS
===================================================== */

.destinations{
    padding:60px 0 90px;
    background:#f5f7fb;
}

.section-title{
    text-align:center;
    margin-bottom:35px;
}

.section-title h2{
    font-size:52px;
    color:#072a4d;
    margin-bottom:15px;
}

.section-title p{
    color:#777;
    font-size:18px;
}

.cards{

display:grid;

grid-template-columns:repeat(6,1fr);

gap:18px;

}

.card{
    position:relative;
    overflow:hidden;
    border-radius:22px;
    box-shadow:0 20px 45px rgba(0,0,0,.12);
    transition:.35s;
    cursor:pointer;
}

.card:hover{
    transform:translateY(-12px);
}

.card img{
    width:100%;
    height:220px;
    object-fit:cover;
    transition:.5s;
}

.card:hover img{
    transform:scale(1.08);
}

.overlay{
    position:absolute;
    inset:auto 0 0 0;
    padding:28px;
    background:linear-gradient(
        transparent,
        rgba(0,0,0,.88)
    );
}

.overlay span{
    display:block;
    color:#ddd;
    margin-bottom:8px;
    font-size:14px;
}

.overlay h3{
    color:#fff;
    font-size:32px;
    margin:0;
}
/* =====================================================
   CTA
===================================================== */

.cta{
    padding:100px 0;
    background:#072a4d;
}

.cta-box{
    max-width:850px;
    margin:auto;
    text-align:center;
    color:#fff;
}

.cta-box h2{
    font-size:52px;
    font-weight:700;
    margin-bottom:20px;
}

.cta-box p{
    font-size:18px;
    color:#d7d7d7;
    margin-bottom:40px;
    line-height:1.8;
}

.cta-box .hero-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:18px 50px;
    background:#d9a227;
    color:#fff;
    border-radius:10px;
    text-decoration:none;
    font-size:18px;
    font-weight:600;
    transition:.3s;
}

.cta-box .hero-btn:hover{
    background:#fff;
    color:#072a4d;
}

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

@media(max-width:1200px){

.hero{

height:760px;

}

.hero h1{

font-size:62px;

}

.hero h2{

font-size:42px;

}

.search-fields{

flex-wrap:wrap;

}

.field{

flex:0 0 50%;

padding:20px;

border-right:none;

border-bottom:1px solid #eee;

}

.cards{

grid-template-columns:repeat(2,1fr);

}

.feature-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:992px){

.hero{

height:auto;

padding:100px 0 180px;

}

.hero-content{

padding-top:40px;

height:auto;

}

.hero h1{

font-size:48px;

}

.hero h2{

font-size:34px;

}

.hero p{

font-size:20px;

}

.search-section{

margin-top:-80px;

}

.search-fields{

display:block;

padding:20px;

}

.field{

padding:18px 0;

border:none;

border-bottom:1px solid #eee;

}

.search-button{

padding:30px;

}

.search-button button{

width:100%;

}

.cards{

grid-template-columns:1fr;

}

.feature-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.hero{

padding:70px 0 140px;

}

.hero h1{

font-size:36px;

}

.hero h2{

font-size:28px;

}

.hero p{

font-size:17px;

}

.search-tabs{

grid-template-columns:repeat(2,1fr);

}

.search-tabs button{

height:70px;

font-size:15px;

}

.section-title h2{

font-size:38px;

}

.cta-box h2{

font-size:34px;

}

.cta-box p{

font-size:17px;

}

}

@media(max-width:576px){

.search-tabs{

grid-template-columns:1fr;

}

.hero{

padding-bottom:120px;

}

.hero h1{

font-size:30px;

}

.hero h2{

font-size:24px;

}

.hero p{

font-size:16px;

}

}
.section-header{

position:relative;

text-align:center;

margin-bottom:40px;

}

.section-header h2{

font-size:58px;

color:#072a4d;

margin-bottom:10px;

font-weight:700;

}

.section-header p{

font-size:18px;

color:#777;

}

.view-btn{

position:absolute;

right:0;

top:8px;

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 28px;

background:#d9a227;

color:#fff;

border:none;

border-radius:10px;

font-size:16px;

font-weight:600;

text-decoration:none;

transition:.3s;

box-shadow:0 8px 20px rgba(217,162,39,.25);

}

.view-btn:hover{

background:#072a4d;

color:#fff;

transform:translateY(-2px);

box-shadow:0 12px 25px rgba(7,42,77,.35);

}