/* ===========================
   TripBookEI Homepage V2
===========================*/

:root{

    --primary:#173B87;
    --gold:#D9B65C;
    --light:#ffffff;
    --dark:#08162F;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}



.hero-content h1{

    font-size:72px;

    line-height:1.08;

    margin-bottom:30px;

    font-weight:800;

}

.hero-content p{

    max-width:760px;

    margin:auto;

    font-size:22px;

    line-height:1.8;

    opacity:.92;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:50px;

    flex-wrap:wrap;

}

.btn-primary{

    background:#2E73FF;

    color:white;

    padding:18px 42px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.btn-primary:hover{

    transform:translateY(-3px);

}

.btn-secondary{

    background:white;

    color:#173B87;

    padding:18px 42px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

}

@media(max-width:991px){

.hero-content h1{

font-size:46px;

}

.hero-content p{

font-size:18px;

}

}

@media(max-width:640px){

.hero-content h1{

font-size:36px;

}

.hero-content p{

font-size:17px;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,
.btn-secondary{

width:100%;

}

}



/*==============================
 Floating Search Card
===============================*/

.search-section{

    position:relative;

    margin-top:-90px;

    z-index:30;

}

.search-card{

    width:min(1200px,94%);

    margin:auto;

    background:white;

    border-radius:28px;

    padding:50px;

    box-shadow:

    0 25px 80px rgba(0,0,0,.18);

}

.search-card h2{

    color:#173B87;

    font-size:36px;

    margin-bottom:12px;

}

.search-card p{

    color:#666;

    margin-bottom:35px;

    font-size:18px;

}

@media(max-width:768px){

.search-section{

margin-top:-60px;

}

.search-card{

padding:30px 22px;

border-radius:24px;

}

.search-card h2{

font-size:28px;

}

}


.hero-search{

display:grid;

grid-template-columns:
2fr
2fr
1.4fr
1fr
180px;

gap:18px;

margin-top:35px;

align-items:end;

}

.field{

display:flex;

flex-direction:column;

}

.field label{

font-weight:600;

margin-bottom:10px;

color:#173B87;

}

.hero-search select,
.hero-search input{

height:58px;

border-radius:14px;

border:1px solid #ddd;

padding:0 18px;

font-size:16px;

}

.hero-search button{

height:58px;

border:none;

border-radius:14px;

background:#2d6df6;

color:white;

font-size:17px;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.hero-search button:hover{

transform:translateY(-3px);

box-shadow:0 15px 40px rgba(45,109,246,.35);

}

@media(max-width:992px){

.hero-search{

grid-template-columns:1fr;

}

.hero-search button{

width:100%;

}

}


/* ======================================
   AIRLINES
====================================== */

.airlines-section{

    position:relative;

    overflow:hidden;

    padding:120px 0 140px;

    background:

        radial-gradient(circle at center,
            rgba(59,130,246,.08),
            transparent 55%),

        linear-gradient(
            180deg,
            #071225,
            #08152d
        );

}

.airlines-section h2{

font-size:46px;

color:white;

margin:20px 0;

}

.airlines-section p{

font-size:20px;

color:#b8c3d6;

margin-bottom:70px;

}

.airline-title{

    font-size:72px;

    font-weight:800;

    text-align:center;

    line-height:1.1;

    margin:30px 0 20px;

    background:linear-gradient(
        180deg,
        #fff9dc,
        #d4af37
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    text-shadow:

        0 8px 35px rgba(212,175,55,.18);

}

.airline-subtitle{

    font-size:21px;

    max-width:900px;

    margin:0 auto;

    color:#d8dce7;

    line-height:1.8;

    text-align:center;

}

.section-tag{

display:inline-block;

padding:10px 24px;

border:1px solid rgba(255,255,255,.15);

border-radius:100px;

color:#d4af37;

font-weight:700;

}

/*==================================================
PREMIUM AIRLINE PARTNERS
==================================================*/

.airline-slider{

    position:relative;

    overflow:hidden;

    width:100%;

    margin:80px auto 40px;

    padding:25px 90px;

    isolation:isolate;

    mask-image:linear-gradient(
        to right,
        transparent 0%,
        black 4%,
        black 96%,
        transparent 100%
    );

    -webkit-mask-image:linear-gradient(
        to right,
        transparent 0%,
        black 4%,
        black 96%,
        transparent 100%
    );

}

.airline-slider::before{

    content:"";

    position:absolute;

    inset:-80px;

    background:

        radial-gradient(circle at center,
            rgba(59,130,246,.12),
            transparent 65%);

    pointer-events:none;

    z-index:-1;

}

.airline-track{

    display:flex;

    align-items:center;

    gap:26px;

    width:max-content;

    padding-left:120px;

    animation:airlineScroll 38s linear infinite;

}

.airline-logo{

    position:relative;

    width:240px;

    height:125px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:24px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.22);

    backdrop-filter:blur(18px);

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

    background:

        linear-gradient(
            160deg,
            rgba(255,255,255,.22),
            rgba(255,255,255,.08)
        );

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.35),

        inset 0 -1px 0 rgba(255,255,255,.08),

        0 10px 35px rgba(0,0,0,.35),

        0 0 0 1px rgba(212,175,55,.10);

    transition:
        transform .45s,
        box-shadow .45s;

}

.airline-logo::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            115deg,
            transparent 18%,
            rgba(255,255,255,.28) 50%,
            transparent 82%
        );

    transform:translateX(-140%);

    transition:1s;

}

.airline-logo:hover::before{

    transform:translateX(140%);

}

.airline-logo:hover{

    transform:

        translateY(-12px)

        scale(1.05);

    box-shadow:

        0 25px 60px rgba(0,0,0,.45),

        0 0 30px rgba(212,175,55,.18),

        inset 0 1px 0 rgba(255,255,255,.45);

}

.airline-logo img{

    max-width:170px;

    max-height:74px;

    width:auto;

    height:auto;

    object-fit:contain;

    filter:

        drop-shadow(0 4px 12px rgba(0,0,0,.20));

}

@keyframes airlineScroll{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

.airline-slider:hover .airline-track{

    animation-play-state:paused;

}

@media(max-width:768px){

.airline-slider{

    padding:20px 20px;

}

.airline-track{

    gap:18px;

    padding-left:40px;

}

.airline-logo{

    width:180px;

    height:95px;

}

.airline-logo img{

    max-width:170px;

    max-height:72px;

}

.airline-title{

    font-size:40px;

}

.airline-subtitle{

    font-size:18px;

}

}



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

.destinations-section{

padding:120px 0;

background:#08152d;

}

.destination-title{

    text-align:center;

    font-size:clamp(38px,5vw,58px);

    font-weight:800;

    margin:22px 0;

    background:linear-gradient(
        135deg,
        #ffffff 0%,
        #f8f3e3 22%,
        #e7c96d 48%,
        #ffffff 70%,
        #91cbff 100%
    );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
        0 3px 16px rgba(255,255,255,.08);

}

.destination-subtitle{

    text-align:center;

    max-width:760px;

    margin:0 auto 65px;

    color:rgba(255,255,255,.82);

    font-size:20px;

    line-height:1.8;

}

.destination-grid{

display:grid;

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

gap:40px;

margin-top:70px;

}

.destination-card{

position:relative;

height:420px;

border-radius:28px;

overflow:hidden;

text-decoration:none;

background-size:cover;

background-position:center;

transition:.5s;

display:flex;

align-items:flex-end;

}

.destination-card:hover{

    transform:
        translateY(-12px)
        scale(1.02);

    box-shadow:
        0 35px 80px rgba(0,0,0,.35);

}

.destination-card::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

to top,

rgba(3,10,24,.90),

rgba(3,10,24,.45),

rgba(3,10,24,.08)

);

}

.destination-overlay{

position:relative;

padding:40px;

color:white;

z-index:2;

}

.destination-overlay h3{

font-size:48px;

margin-bottom:10px;

}

.destination-overlay span{

font-size:18px;

opacity:.85;

}

.dubai{

background-image:url("/static/images/destinations/dubai.jpg");

}

.london{

background-image:url("/static/images/destinations/london.jpg");

}

.paris{

background-image:url("/static/images/destinations/paris.jpg");

}

.newyork{

background-image:url("/static/images/destinations/newyork.jpg");

}

@media(max-width:900px){

.destination-grid{

grid-template-columns:1fr;

}

.destination-card{

height:340px;

}

.destination-overlay h3{

font-size:36px;

}

}


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

.features-section{

padding:120px 0;

background:#061226;

}

.section-title{

font-size:52px;

text-align:center;

color:#fff;

margin:25px 0;

}

.section-subtitle{

max-width:760px;

margin:auto;

text-align:center;

font-size:20px;

color:#b7c3d4;

}

.feature-grid{

display:grid;

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

gap:30px;

margin-top:70px;

}

.feature-card{

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

border-radius:28px;

padding:45px;

text-align:center;

transition:.35s;

backdrop-filter:blur(15px);

}

.feature-card:hover{

transform:translateY(-10px);

background:rgba(255,255,255,.08);

}

.feature-icon{

font-size:52px;

margin-bottom:25px;

}

.feature-card h3{

color:white;

font-size:28px;

margin-bottom:18px;

}

.feature-card p{

color:#c6d0de;

line-height:1.7;

}

@media(max-width:992px){

.feature-grid{

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

}

}

@media(max-width:700px){

.feature-grid{

grid-template-columns:1fr;

}

.section-title{

font-size:36px;

}

}


/*==================================
LIVE STATS
==================================*/

.stats-section{

padding:120px 0;

background:#08152d;

}

.stats-grid{

display:grid;

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

gap:30px;

}

.stat-box{

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

border-radius:24px;

padding:60px 20px;

text-align:center;

transition:.35s;

}

.stat-box:hover{

transform:translateY(-8px);

background:rgba(255,255,255,.08);

}

.stat-box h2{

font-size:64px;

font-weight:800;

color:#d4af37;

margin-bottom:12px;

}

.stat-box span{

font-size:20px;

color:#d7deeb;

}

@media(max-width:900px){

.stats-grid{

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

}

}

@media(max-width:650px){

.stats-grid{

grid-template-columns:1fr;

}

.stat-box h2{

font-size:48px;

}

}


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

.hero-v3{

position:relative;

height:100vh;

min-height:760px;

overflow:hidden;

display:flex;

align-items:center;

justify-content:center;

background:#07142d;

}

.hero-video{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    opacity:0;

    transition:opacity 1.2s ease;

    z-index:1;

}

.hero-video.active{

    opacity:1;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(8,18,42,.18),
            rgba(8,18,42,.38)
        ),
        linear-gradient(
            90deg,
            rgba(10,22,55,.22),
            rgba(10,22,55,.10)
        );

    z-index:2;

}

.hero-content{

position:relative;

z-index:3;

text-align:center;

max-width:980px;

padding:0 25px;

}

.hero-badge{

display:inline-block;

padding:13px 30px;

border-radius:999px;

border:1px solid rgba(231,201,109,.55);

background:rgba(255,255,255,.08);

backdrop-filter:blur(18px);

color:#f3d98b;

font-weight:700;

letter-spacing:.12em;

text-transform:uppercase;

box-shadow:

0 0 25px rgba(231,201,109,.12);

margin-bottom:32px;

}


.hero-content h1{

    font-size:clamp(44px,6vw,72px);

    line-height:1.1;

    font-weight:800;

    margin-bottom:28px;

    letter-spacing:-1px;

    background:linear-gradient(
        135deg,
        #ffffff 0%,
        #fdf8ea 18%,
        #e7c96d 42%,
        #ffffff 62%,
        #8fc7ff 82%,
        #ffffff 100%
    );

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

    text-shadow:
        0 2px 12px rgba(255,255,255,.08),
        0 10px 35px rgba(0,0,0,.35);

}

.hero-content p{

    font-size:clamp(19px,2vw,24px);

    line-height:1.8;

    color:rgba(255,255,255,.92);

    max-width:760px;

    margin:auto;

    margin-bottom:55px;

    text-shadow:0 3px 12px rgba(0,0,0,.28);

}

.hero-buttons{

display:flex;

justify-content:center;

gap:24px;

flex-wrap:wrap;

}

.btn-primary,
.btn-secondary{

padding:18px 42px;

border-radius:100px;

font-weight:700;

font-size:18px;

text-decoration:none;

transition:.35s;

}

.btn-primary{

background:linear-gradient(
135deg,
#2f6fff,
#1d55d8
);

color:#fff;

box-shadow:
0 12px 35px rgba(47,111,255,.35);

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:0 20px 50px rgba(47,111,255,.35);

}

.btn-secondary{

background:rgba(255,255,255,.16);

backdrop-filter:blur(18px);

color:white;

border:1px solid rgba(255,255,255,.25);

}

.btn-secondary:hover{

transform:translateY(-4px);

}

.scroll-indicator{

position:absolute;

left:50%;

bottom:38px;

transform:translateX(-50%);

z-index:3;

width:34px;

height:58px;

border-radius:22px;

border:2px solid rgba(255,255,255,.5);

display:flex;

justify-content:center;

padding-top:8px;

}

.scroll-indicator span{

width:8px;

height:8px;

border-radius:50%;

background:white;

animation:scrollMouse 2s infinite;

}

@keyframes scrollMouse{

0%{

opacity:0;

transform:translateY(0);

}

50%{

opacity:1;

}

100%{

opacity:0;

transform:translateY(24px);

}

}

@media(max-width:900px){

.hero-v3{

min-height:720px;

}

.hero-content{

padding:0 20px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.btn-primary,
.btn-secondary{

width:100%;

max-width:360px;

text-align:center;

}

}

@media(max-width:600px){

.hero-v3{

height:92vh;

min-height:640px;

}

.hero-badge{

font-size:13px;

}

.hero-content h1{

line-height:1.15;

}

.hero-content p{

font-size:18px;

line-height:1.7;

}

}

.hero-video{

transition:opacity .7s ease;

}

.video-fade{

opacity:0;

}