/* Theme 10 (Premium Light) - home page styles. Extracted from wl_homepage-10.php so the browser can cache them; default-layout.php already links this file in . */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap'); /* ---- THEME 10 palette: premium LIGHT (overrides the inherited dark band) ---- */ .prem10{ --ink:#101828; /* headings */ --paper:#f7f9fc; /* page background */ --surface:#ffffff; /* cards */ --soft:#475467; /* body copy */ --muted:#98a2b3; /* meta text */ --line:#e7ecf3; /* hairlines */ --gold:#c07d1e; --gold-ink:#8f5b12; --gold-soft:#fdf5e6; --teal:#0e7f6e; /* the dark "departure board" band becomes a light panel */ --band:#ffffff; --band-ink:#101828; --band-soft:#667085; --band-line:#e7ecf3; --fh:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif; --fm:'Inter',ui-sans-serif,system-ui,sans-serif; font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; color:var(--soft); background:var(--paper); } .prem10 h1,.prem10 h2,.prem10 h3,.prem10 .t10-h2{font-family:var(--fh);color:var(--ink);letter-spacing:-.02em;} .prem10 .t10-sec-alt{background:#eef3fa;} /* ============ THEME 10 — PREMIUM LIGHT (scoped to .prem10) ============ */ /* The shared search form ends with a 20px bottom margin, which showed as a white strip above theme 9's cream body. Close it wherever theme 9 renders. Scoped via :has(.prem10) so template 7/8 keep their original spacing. */ body:has(.prem10) .bharat-voyage-wrapper{margin-bottom:0;} .prem10{--ink:#0e1626;--paper:#f5f2ea;--surface:#fffdf9;--soft:#5a6478;--muted:#8a93a4; --line:#e6e1d5;--gold:#c07d1e;--gold-ink:#8f5b12;--gold-soft:#f4ead4;--teal:#0e7f6e; --band:#0e1626;--band-ink:#f4f1ea;--band-soft:#9aa6bd;--band-line:#26314a; --fh:"Helvetica Neue",Helvetica,Arial,sans-serif;--fm:ui-monospace,"SF Mono",Menlo,Consolas,monospace; background:var(--paper);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; overflow-x:clip;} .prem10 *{box-sizing:border-box;} .prem10 .t10-wrap{max-width:1180px;margin:0 auto;padding:0 22px;} .prem10 .t10-ic{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;fill:none;flex:none;} .prem10 .t10-ic-sm{width:16px;height:16px;} .prem10 .t10-ic-xs{width:14px;height:14px;} /* section shell */ .prem10 .t10-sec{padding:54px 0;} .prem10 .t10-sec-alt{background:linear-gradient(180deg,var(--gold-soft),transparent 60%);} .prem10 .t10-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;} .prem10 .t10-head-center{justify-content:center;text-align:center;} .prem10 .t10-kick{font-family:var(--fm);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 8px;} .prem10 .t10-kick-gold{color:var(--gold);} .prem10 .t10-h2{font-family:var(--fh);font-weight:800;font-size:clamp(1.4rem,3.4vw,1.95rem);letter-spacing:-.02em;line-height:1.12;margin:0;} .prem10 .t10-more{display:inline-flex;align-items:center;gap:6px;color:var(--gold-ink);font-weight:600;font-size:.9rem;white-space:nowrap;text-decoration:none;transition:gap .2s;} .prem10 .t10-more:hover{gap:10px;} /* intro / trust */ .prem10 .t10-intro{padding:40px 0 8px;} .prem10 .t10-intro-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:26px;align-items:center;} .prem10 .t10-eyebrow{font-family:var(--fm);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 10px;} .prem10 .t10-intro-title{font-family:var(--fh);font-weight:800;font-size:clamp(1.5rem,4vw,2.3rem);letter-spacing:-.025em;line-height:1.08;margin:0;} .prem10 .t10-intro-title em{font-style:normal;color:var(--gold);} .prem10 .t10-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;} .prem10 .t10-trust-item{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center; background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 8px;font-size:.72rem;font-weight:600;color:var(--soft);line-height:1.25;} .prem10 .t10-trust-item .t10-ic{color:var(--teal);} /* deal cards */ .prem10 .t10-deals{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 16px;padding-top:10px;} /* overflow stays visible so the badge can hang over the card's top edge */ .prem10 .t10-deal{background:var(--surface);border:1px solid var(--line);border-radius:15px;overflow:visible; text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s;display:block;position:relative;} .prem10 .t10-deal:hover{transform:translateY(-6px);box-shadow:0 22px 38px -22px rgba(14,22,38,.4);} .prem10 .t10-deal-img{height:130px;background-size:cover;background-position:center;position:relative; background-color:var(--band);border-radius:15px 15px 0 0;} /* offer tag — sits half above / half inside the card's top edge */ .prem10 .t10-deal .t10-badge{ top:-12px;left:16px;z-index:3; background:linear-gradient(135deg,#e3a848,var(--gold-ink)); color:#fff;font-size:.63rem;font-weight:800;letter-spacing:.11em;padding:6px 13px; box-shadow:0 8px 16px -5px rgba(143,91,18,.55),0 0 0 3px var(--surface); transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s; } .prem10 .t10-deal .t10-badge svg{color:#ffe3ad;} .prem10 .t10-deal:hover .t10-badge{ transform:translateY(-3px) scale(1.05); box-shadow:0 13px 22px -6px rgba(143,91,18,.68),0 0 0 3px var(--surface); } .prem10 .t10-badge{position:absolute;top:10px;left:10px;background:var(--band);color:var(--gold);font-family:var(--fm); font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:20px;font-weight:700;display:inline-flex;align-items:center;gap:5px;} .prem10 .t10-badge-dark{background:var(--band);color:var(--band-ink);} .prem10 .t10-deal-body{padding:15px 16px;} .prem10 .t10-deal-title{font-family:var(--fh);font-weight:700;font-size:1.02rem;margin:0 0 5px;} .prem10 .t10-deal-desc{font-size:.84rem;color:var(--soft);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} /* routes */ .prem10 .t10-routes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;} .prem10 .t10-route{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px; text-decoration:none;color:inherit;transition:transform .25s,border-color .25s;} .prem10 .t10-route:hover{transform:translateY(-5px);border-color:var(--gold);} /* route image / logo tile — falls back to the destination code when no image */ .prem10 .t10-route-head{display:flex;align-items:center;gap:11px;margin-bottom:12px;} .prem10 .t10-route-logo{width:48px;height:48px;border-radius:13px;flex:none;overflow:hidden; background:var(--surface);border:1px solid var(--line);display:grid;place-items:center; transition:transform .25s;} .prem10 .t10-route-logo img{width:100%;height:100%;object-fit:contain;padding:7px;display:block;} /* shared flight image fills the tile edge to edge (it carries its own background) */ .prem10 .t10-route-logo.is-default{border-color:transparent;background:var(--band);} .prem10 .t10-route-logo.is-default img{padding:0;object-fit:cover;} .prem10 .t10-route:hover .t10-route-logo{transform:scale(1.06);} .prem10 .t10-route-hd{min-width:0;} .prem10 .t10-route-top{display:flex;align-items:center;gap:7px;font-family:var(--fh);font-weight:700; font-size:.98rem;min-width:0;} .prem10 .t10-route-city{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .prem10 .t10-route-plane{color:var(--gold);flex:none;} .prem10 .t10-route-codes{font-family:var(--fm);font-size:.76rem;color:var(--muted);margin:3px 0 0;} .prem10 .t10-route-codes span{color:var(--gold-ink);} .prem10 .t10-route-foot{display:flex;justify-content:space-between;align-items:baseline;border-top:1.5px dashed var(--line);padding-top:11px;} .prem10 .t10-route-date{font-family:var(--fm);font-size:.74rem;color:var(--soft);} .prem10 .t10-route-fare{font-family:var(--fm);font-weight:700;font-size:1.1rem;color:var(--ink);} /* grids */ .prem10 .t10-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} .prem10 .t10-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;} /* hotel */ .prem10 .t10-hotel{background:var(--surface);border:1px solid var(--line);border-radius:15px;overflow:hidden;transition:transform .25s,box-shadow .25s;} .prem10 .t10-hotel:hover{transform:translateY(-6px);box-shadow:0 22px 38px -22px rgba(14,22,38,.4);} .prem10 .t10-hotel-img{display:block;height:140px;background-size:cover;background-position:center;position:relative;background-color:var(--band);} .prem10 .t10-hotel-stars{position:absolute;bottom:10px;left:10px;display:flex;gap:2px;color:var(--gold); background:rgba(255,255,255,.92);padding:4px 8px;border-radius:20px;} .prem10 .t10-hotel-body{padding:14px 16px;} .prem10 .t10-hotel-name{font-family:var(--fh);font-weight:700;font-size:1rem;margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* full address — icon stays pinned to the first line, text wraps to max 2 lines */ .prem10 .t10-hotel-city{display:flex;align-items:flex-start;gap:5px;color:var(--muted);font-size:.8rem;line-height:1.4;margin:0 0 10px;min-height:2.24em;} .prem10 .t10-hotel-city .t10-ic{margin-top:3px;} .prem10 .t10-hotel-city span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} /* amenity icons — one compact line */ .prem10 .t10-hotel-amen{list-style:none;display:flex;align-items:center;gap:6px;padding:0;margin:0 0 12px;} .prem10 .t10-hotel-amen li{width:26px;height:26px;border-radius:8px;background:var(--gold-soft); display:grid;place-items:center;flex:none;transition:transform .2s;} .prem10 .t10-hotel-amen li:hover{transform:translateY(-2px);} .prem10 .t10-hotel-amen img{width:15px;height:15px;object-fit:contain;display:block;} .prem10 .t10-hotel-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px; border-top:1px solid var(--line);padding-top:12px;} .prem10 .t10-hotel-price small{display:block;font-size:.68rem;color:var(--muted);line-height:1.2;} .prem10 .t10-hotel-price strong{font-family:var(--fm);font-size:1.12rem;color:var(--ink);white-space:nowrap;} .prem10 .t10-rating{display:inline-flex;align-items:center;gap:4px;background:var(--gold-soft);color:var(--gold-ink);font-weight:700;font-size:.8rem;padding:4px 9px;border-radius:8px;} /* buttons */ .prem10 .t10-btn-sm{display:inline-flex;align-items:center;gap:5px;background:var(--gold);color:#fff;font-weight:700; font-size:.82rem;padding:8px 14px;border-radius:9px;text-decoration:none;transition:background .2s;white-space:nowrap;} .prem10 .t10-btn-sm:hover{background:var(--gold-ink);color:#fff;} /* places */ .prem10 .t10-places{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;} .prem10 .t10-place{position:relative;border-radius:14px;overflow:hidden;height:210px;color:#fff;display:flex; align-items:flex-end;padding:15px;text-decoration:none;background-size:cover;background-position:center;background-color:var(--band);transition:transform .25s;} .prem10 .t10-place:hover{transform:scale(1.02);} .prem10 .t10-place::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 32%,rgba(8,12,22,.82));z-index:1;} .prem10 .t10-place-c{position:relative;z-index:2;} .prem10 .t10-place-c h3{font-family:var(--fh);font-weight:700;font-size:1.12rem;margin:0;color:#fff;} .prem10 .t10-place-p{font-family:var(--fm);font-size:.78rem;color:#ecd9b4;margin:2px 0 0;} .prem10 .t10-place-tag{position:absolute;top:11px;right:11px;z-index:2;background:rgba(255,255,255,.18); backdrop-filter:blur(6px);font-family:var(--fm);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:20px;} /* package */ .prem10 .t10-pkg{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .25s,box-shadow .25s;} .prem10 .t10-pkg:hover{transform:translateY(-6px);box-shadow:0 24px 40px -22px rgba(14,22,38,.4);} .prem10 .t10-pkg-img{display:block;height:170px;background-size:cover;background-position:center;position:relative;background-color:var(--band);} .prem10 .t10-pkg-body{padding:16px 18px;} .prem10 .t10-pkg-title{font-family:var(--fh);font-weight:700;font-size:1.08rem;margin:0 0 10px;} .prem10 .t10-pkg-title a{color:inherit;text-decoration:none;} .prem10 .t10-pkg-inc{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0 0 14px;} .prem10 .t10-pkg-inc li{display:inline-flex;align-items:center;gap:5px;background:var(--gold-soft);color:var(--gold-ink); font-size:.72rem;font-weight:600;padding:4px 9px;border-radius:7px;} .prem10 .t10-pkg-foot{display:flex;align-items:flex-end;justify-content:space-between;border-top:1px solid var(--line);padding-top:13px;} .prem10 .t10-pkg-price small{display:block;font-size:.7rem;color:var(--muted);} .prem10 .t10-pkg-price strong{font-family:var(--fm);font-size:1.15rem;color:var(--ink);} /* visa */ .prem10 .t10-visa{background:var(--surface);border:1px solid var(--line);border-radius:15px;overflow:hidden;transition:transform .25s,box-shadow .25s;} .prem10 .t10-visa:hover{transform:translateY(-6px);box-shadow:0 22px 38px -22px rgba(14,22,38,.4);} .prem10 .t10-visa-img{display:block;height:130px;background-size:cover;background-position:center;position:relative;background-color:var(--band);} .prem10 .t10-visa-body{padding:14px 16px;} .prem10 .t10-visa-country{font-family:var(--fh);font-weight:700;font-size:1rem;margin:0 0 6px;} .prem10 .t10-visa-country a{color:inherit;text-decoration:none;} .prem10 .t10-visa-time{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:.8rem;margin:0 0 8px;} .prem10 .t10-visa-cost{font-family:var(--fm);font-weight:700;color:var(--ink);font-size:1.02rem;} .prem10 .t10-visa-cost span{font-family:var(--fh);font-weight:500;font-size:.74rem;color:var(--muted);} /* car */ .prem10 .t10-car{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;transition:transform .25s,box-shadow .25s;} .prem10 .t10-car:hover{transform:translateY(-6px);box-shadow:0 22px 38px -22px rgba(14,22,38,.4);} .prem10 .t10-car-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;} .prem10 .t10-car-name{font-family:var(--fh);font-weight:700;font-size:1.05rem;} .prem10 .t10-car-route{color:var(--muted);font-size:.82rem;margin:3px 0 0;} .prem10 .t10-car-img{width:88px;height:56px;object-fit:contain;flex:none;} .prem10 .t10-car-specs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;} .prem10 .t10-car-specs span{display:inline-flex;align-items:center;gap:5px;background:var(--gold-soft);color:var(--gold-ink);font-size:.74rem;font-weight:600;padding:4px 9px;border-radius:7px;} .prem10 .t10-car-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:13px;} .prem10 .t10-car-price{font-family:var(--fm);font-weight:700;font-size:1.15rem;color:var(--ink);} .prem10 .t10-car-price small{color:var(--muted);font-weight:500;} /* bus */ .prem10 .t10-bus{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .25s,box-shadow .25s;} .prem10 .t10-bus:hover{transform:translateY(-6px);box-shadow:0 22px 38px -22px rgba(14,22,38,.4);} .prem10 .t10-bus-img{height:150px;background-size:cover;background-position:center;background-color:var(--band);position:relative;} .prem10 .t10-bus-body{padding:16px 18px;} .prem10 .t10-bus-name{font-family:var(--fh);font-weight:700;font-size:1.05rem;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .prem10 .t10-bus-op{color:var(--gold-ink);font-size:.78rem;font-weight:600;margin:3px 0 0;} .prem10 .t10-bus-route{display:flex;align-items:center;gap:5px;color:var(--soft);font-size:.82rem;margin:9px 0 0;} .prem10 .t10-bus-route span{color:var(--gold-ink);} .prem10 .t10-bus-specs{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;} .prem10 .t10-bus-specs span{display:inline-flex;align-items:center;gap:5px;background:var(--gold-soft);color:var(--gold-ink);font-size:.74rem;font-weight:600;padding:4px 9px;border-radius:7px;} .prem10 .t10-bus-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:13px;} .prem10 .t10-bus-fare{font-family:var(--fm);font-weight:700;font-size:1.1rem;color:var(--ink);} .prem10 .t10-bus-fare small{color:var(--muted);font-weight:500;} /* ============ SACRED JOURNEYS — premium Islamic devotional theme ============ */ .prem10 .t10-pilgrim{position:relative;overflow:hidden; /* warm ivory base + emerald & gold glows + geometric star pattern */ background: radial-gradient(680px 340px at 10% -10%,rgba(15,157,116,.13),transparent 60%), radial-gradient(620px 320px at 92% 6%,rgba(201,162,39,.18),transparent 60%), linear-gradient(180deg,#fbf5e8,#f4ecdb);} /* geometric 8-point star texture overlay */ .prem10 .t10-pilgrim::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='1.1' opacity='0.22'%3E%3Cpath d='M42 10l7.5 24.5L74 42l-24.5 7.5L42 74l-7.5-24.5L10 42l24.5-7.5z'/%3E%3Ccircle cx='42' cy='42' r='30'/%3E%3Crect x='27' y='27' width='30' height='30' transform='rotate(45 42 42)'/%3E%3C/g%3E%3C/svg%3E");} /* mosque-silhouette pattern (uploaded image) sits along the bottom */ .prem10 .t10-pilgrim::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;z-index:0;pointer-events:none; background-image:var(--pil-bg);background-repeat:repeat-x;background-position:bottom center;background-size:auto 150px; opacity:.5;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(transparent,#000 60%);mask-image:linear-gradient(transparent,#000 60%);} .prem10 .t10-pilgrim .t10-wrap{position:relative;z-index:2;} /* hanging lanterns */ .prem10 .t10-pil-lantern{position:absolute;top:-4px;z-index:1;color:#c9a227;opacity:.55;pointer-events:none; animation:d9sway 5s ease-in-out infinite;transform-origin:top center;} .prem10 .t10-pil-lantern svg{width:34px;height:auto;filter:drop-shadow(0 6px 8px rgba(201,162,39,.3));} .prem10 .t10-pil-lantern-l{left:5%;} .prem10 .t10-pil-lantern-r{right:6%;animation-delay:-2.2s;} .prem10 .t10-pil-lantern-r svg{width:30px;} @keyframes d9sway{0%,100%{transform:rotate(-4deg);}50%{transform:rotate(4deg);}} @media(max-width:760px){.prem10 .t10-pil-lantern{display:none;}} /* header ornaments */ .prem10 .t10-pil-kick{display:inline-flex;align-items:center;gap:8px;color:#0e8f6a;justify-content:center;} .prem10 .t10-pil-crescent{width:16px;height:16px;color:#c9a227;} .prem10 .t10-pil-h2{background:linear-gradient(90deg,#0e6b52,#1a1d29 55%,#9a6414);-webkit-background-clip:text;background-clip:text;color:transparent;} .prem10 .t10-pil-divider{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;color:#c9a227;} .prem10 .t10-pil-divider span{height:2px;width:60px;background:linear-gradient(90deg,transparent,#c9a227);} .prem10 .t10-pil-divider span:last-child{background:linear-gradient(90deg,#c9a227,transparent);} .prem10 .t10-pil-divider svg{width:18px;height:18px;} /* colourful arched feature tiles */ .prem10 .t10-pil-tiles{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0 24px;} .prem10 .t10-pil-tile{position:relative;display:flex;align-items:flex-end;min-height:210px;padding:24px; border-radius:20px 20px 20px 20px;overflow:hidden;text-decoration:none;color:#fff;transition:transform .3s,box-shadow .3s; box-shadow:0 22px 44px -26px rgba(20,24,31,.5);border:1px solid rgba(255,255,255,.14);} .prem10 .t10-pil-umrah{background:radial-gradient(420px 200px at 100% 0,rgba(255,255,255,.18),transparent 60%),linear-gradient(140deg,#13a878,#0a5747);} .prem10 .t10-pil-hajj{background:radial-gradient(420px 200px at 100% 0,rgba(255,255,255,.22),transparent 60%),linear-gradient(140deg,#e2ab45,#9a6414);} .prem10 .t10-pil-tile::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.2'%3E%3Cpath d='M35 6l6 23 23 6-23 6-6 23-6-23-23-6 23-6z'/%3E%3C/g%3E%3C/svg%3E");} /* pointed Islamic arch ornament, top-right */ .prem10 .t10-pil-arch{position:absolute;top:-30px;right:-20px;width:150px;height:180px;pointer-events:none; border:2px solid rgba(255,255,255,.28);border-radius:75px 75px 0 0;transform:rotate(0);opacity:.5;} .prem10 .t10-pil-arch::after{content:"";position:absolute;left:50%;top:-14px;width:12px;height:12px;transform:translateX(-50%) rotate(45deg); border:2px solid rgba(255,255,255,.35);border-bottom:none;border-left:none;} .prem10 .t10-pil-tile:hover{transform:translateY(-6px);box-shadow:0 30px 54px -26px rgba(20,24,31,.6);} .prem10 .t10-pil-badge{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:6px; background:rgba(255,255,255,.2);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3);font-size:.7rem; font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:20px;color:#fff;} .prem10 .t10-pil-badge-gold{background:rgba(28,18,6,.28);} .prem10 .t10-pil-tc{position:relative;z-index:2;} .prem10 .t10-pil-tc h3{font-family:var(--fh);font-weight:800;font-size:1.45rem;margin:0 0 5px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.25);} .prem10 .t10-pil-tc p{margin:0 0 14px;color:rgba(255,255,255,.92);font-size:.9rem;max-width:34ch;} .prem10 .t10-pil-link{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:.9rem;color:#fff; background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);padding:9px 16px;border-radius:11px;transition:gap .2s,background .2s;} .prem10 .t10-pil-tile:hover .t10-pil-link{gap:11px;background:rgba(255,255,255,.28);} /* horizontal package slider */ /* slider with prev/next buttons — raw scrollbar hidden */ .prem10 .t10-pil-slider{position:relative;} .prem10 .t10-pil-rail{display:flex;gap:16px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x mandatory; scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;} .prem10 .t10-pil-rail::-webkit-scrollbar{display:none;height:0;width:0;} .prem10 .t10-pil-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px; border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--gold-ink);display:grid;place-items:center; cursor:pointer;box-shadow:0 12px 26px -12px rgba(20,24,31,.5);transition:transform .2s,background .2s,color .2s,opacity .2s;} .prem10 .t10-pil-nav svg{width:22px;height:22px;} .prem10 .t10-pil-nav:hover{background:var(--gold);color:#fff;transform:translateY(-50%) scale(1.08);} .prem10 .t10-pil-nav:disabled{opacity:.35;cursor:default;box-shadow:none;} .prem10 .t10-pil-nav:disabled:hover{background:#fff;color:var(--gold-ink);transform:translateY(-50%);} .prem10 .t10-pil-prev{left:-14px;} .prem10 .t10-pil-next{right:-14px;} @media(max-width:640px){.prem10 .t10-pil-nav{display:none;}} /* swipe on mobile */ .prem10 .t10-pil-card{flex:0 0 280px;scroll-snap-align:start;background:var(--surface);border:1px solid var(--line); border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s;} .prem10 .t10-pil-card:hover{transform:translateY(-6px);box-shadow:0 24px 40px -24px rgba(14,22,38,.42);} .prem10 .t10-pil-img{height:150px;background-size:cover;background-position:center;background-color:var(--band);position:relative;} .prem10 .t10-pil-tag{position:absolute;top:10px;left:10px;font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase; padding:4px 10px;border-radius:20px;color:#fff;} .prem10 .t10-pil-tag-hajj{background:#8a5a1a;} .prem10 .t10-pil-tag-umrah{background:#0e7f6e;} .prem10 .t10-pil-nights{position:absolute;top:10px;right:10px;background:rgba(9,14,22,.72);color:#fff;font-size:.68rem;font-weight:700; padding:4px 9px;border-radius:20px;} .prem10 .t10-pil-body{padding:15px 16px 16px;} .prem10 .t10-pil-name{font-family:var(--fh);font-weight:700;font-size:1rem;line-height:1.3;margin:0 0 7px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;} .prem10 .t10-pil-from{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:.8rem;margin:0 0 12px;} .prem10 .t10-pil-foot{display:flex;align-items:flex-end;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px;gap:8px;} .prem10 .t10-pil-price small{display:block;font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;} .prem10 .t10-pil-price strong{font-family:var(--fm);font-size:1.05rem;color:var(--ink);} /* why us */ .prem10 .t10-why{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} .prem10 .t10-feat{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px 20px;text-align:center;} .prem10 .t10-feat-ic{width:54px;height:54px;border-radius:15px;background:var(--gold-soft);color:var(--gold-ink);display:grid;place-items:center;margin:0 auto 14px;} .prem10 .t10-feat h3{font-family:var(--fh);font-weight:700;font-size:1.02rem;margin:0 0 5px;} .prem10 .t10-feat p{color:var(--soft);font-size:.87rem;margin:0;} /* testimonials */ .prem10 .t10-testi{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;position:relative;} .prem10 .t10-testi-quote{width:30px;height:30px;color:var(--gold-soft);margin-bottom:6px;} .prem10 .t10-testi-text{color:var(--soft);font-size:.92rem;line-height:1.6;margin:0 0 18px;} .prem10 .t10-testi-by{display:flex;align-items:center;gap:12px;} .prem10 .t10-testi-img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;} .prem10 .t10-testi-name{font-family:var(--fh);font-weight:700;font-size:.95rem;} .prem10 .t10-testi-stars{display:flex;gap:2px;color:var(--gold);margin-top:2px;} /* app band */ .prem10 .t10-app{background:var(--band);border-radius:22px;color:var(--band-ink);display:grid; grid-template-columns:1.3fr 1fr;overflow:hidden;position:relative;isolation:isolate;} /* layered colour: warm gold, cool teal and a violet lift */ .prem10 .t10-app::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(620px 300px at 88% 115%,rgba(224,162,63,.34),transparent 62%), radial-gradient(520px 260px at 6% -12%,rgba(20,180,160,.26),transparent 60%), radial-gradient(460px 320px at 62% -30%,rgba(124,92,224,.22),transparent 62%);} .prem10 .t10-app::after{content:"";position:absolute;top:-2px;left:0;right:0;height:3px;z-index:1; background:linear-gradient(90deg,#e0a23f,#12b4a0 38%,#7c5ce0 70%,#ff5a3c);opacity:.9;} .prem10 .t10-app-l{padding:46px;position:relative;z-index:2;} .prem10 .t10-app-title{font-family:var(--fh);font-weight:800;font-size:1.9rem;letter-spacing:-.02em;line-height:1.1;margin:0 0 12px;color:var(--band-ink);} .prem10 .t10-app-sub{color:var(--band-soft);margin:0;max-width:38ch;} /* colourful perk chips */ .prem10 .t10-app-perks{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:18px 0 0;} .prem10 .t10-app-perks li{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600; padding:6px 12px;border-radius:20px;border:1px solid transparent;} .prem10 .t10-app-perks .p-gold{background:rgba(224,162,63,.16);color:#f0b95e;border-color:rgba(224,162,63,.32);} .prem10 .t10-app-perks .p-teal{background:rgba(20,180,160,.16);color:#4bd6c0;border-color:rgba(20,180,160,.32);} .prem10 .t10-app-perks .p-violet{background:rgba(124,92,224,.18);color:#a996f2;border-color:rgba(124,92,224,.34);} /* official-style store badges */ .prem10 .t10-stores{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;} .prem10 .t10-store{display:inline-flex;align-items:center;gap:10px;background:#080d17; border:1px solid rgba(255,255,255,.22);padding:9px 18px 9px 15px;border-radius:12px; color:#fff;text-decoration:none;transition:transform .22s,box-shadow .22s,border-color .22s;} .prem10 .t10-store:hover{transform:translateY(-3px);color:#fff;border-color:rgba(255,255,255,.45); box-shadow:0 14px 26px -12px rgba(0,0,0,.85);} .prem10 .t10-store-ic{width:24px;height:24px;flex:none;} .prem10 .t10-store-tx{display:flex;flex-direction:column;line-height:1.15;} .prem10 .t10-store-tx small{font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;opacity:.82;} .prem10 .t10-store-tx strong{font-family:var(--fh);font-size:1rem;font-weight:700;letter-spacing:-.01em;} /* rating line */ .prem10 .t10-app-rating{display:flex;align-items:center;gap:8px;margin:16px 0 0; color:var(--band-soft);font-size:.8rem;} .prem10 .t10-app-rating b{color:var(--band-ink);font-size:.9rem;} .prem10 .t10-app-stars{display:inline-flex;gap:1px;color:#f0b95e;} /* uploaded app artwork, presented inside a phone frame */ .prem10 .t10-app-device{ position:relative;display:inline-block;padding:17px 10px 13px;border-radius:30px; background:linear-gradient(158deg,#33405e,#131c2e 55%,#0b1220); box-shadow:0 30px 55px -22px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.16); animation:d9float 4s ease-in-out infinite; } .prem10 .t10-app-notch{ position:absolute;top:7px;left:50%;transform:translateX(-50%);z-index:2; width:46px;height:4px;border-radius:10px;background:rgba(255,255,255,.3); } .prem10 .t10-app-img{ display:block;height:300px;width:auto;max-width:100%; border-radius:19px; /* the little round corner on the screen itself */ background:#fff; } .prem10 .t10-app-r{position:relative;z-index:2;display:grid;place-items:center;padding:26px;} /* colour halo behind the phone */ .prem10 .t10-app-r::before{content:"";position:absolute;width:270px;height:270px;border-radius:50%; background:radial-gradient(circle,rgba(224,162,63,.42),rgba(124,92,224,.22) 55%,transparent 72%); filter:blur(14px);z-index:-1;} .prem10 .t10-phone{width:150px;height:255px;border-radius:26px;background:linear-gradient(160deg,var(--gold),var(--gold-ink));border:6px solid rgba(255,255,255,.14);box-shadow:0 30px 50px -20px rgba(0,0,0,.6);} /* ===== animations ===== */ .prem10 .t10-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);} .prem10 .t10-reveal.t10-in{opacity:1;transform:none;} @keyframes d9float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}} .prem10 .t10-phone{animation:d9float 4s ease-in-out infinite;} /* ===== responsive ===== */ @media(max-width:960px){ .prem10 .t10-deals,.prem10 .t10-routes,.prem10 .t10-grid4,.prem10 .t10-places{grid-template-columns:repeat(2,1fr);} .prem10 .t10-grid3,.prem10 .t10-why{grid-template-columns:repeat(2,1fr);} .prem10 .t10-intro-grid{grid-template-columns:1fr;} } @media(max-width:600px){ .prem10 .t10-sec{padding:40px 0;} .prem10 .t10-deals,.prem10 .t10-routes,.prem10 .t10-grid4,.prem10 .t10-grid3,.prem10 .t10-places,.prem10 .t10-why{grid-template-columns:1fr;} .prem10 .t10-pil-tiles{grid-template-columns:1fr;} .prem10 .t10-pil-card{flex-basis:78%;} .prem10 .t10-trust{grid-template-columns:repeat(4,1fr);gap:6px;} .prem10 .t10-trust-item{padding:11px 4px;font-size:.64rem;} .prem10 .t10-head{flex-direction:column;align-items:flex-start;gap:8px;} .prem10 .t10-app{grid-template-columns:1fr;} .prem10 .t10-app-r{display:none;} .prem10 .t10-app-l{padding:32px;} } @media(prefers-reduced-motion:reduce){ .prem10 .t10-reveal{opacity:1;transform:none;transition:none;} .prem10 .t10-phone{animation:none;} .prem10 *{transition:none!important;} } /* ================= AUTO SLIDERS (7 discovery sections) ================= Each section that used to stack into two rows is now a single-row owl carousel that advances on its own. Cards must keep a uniform height, and the reveal-on-scroll animation is disabled inside sliders because owl clones items — a cloned node never receives the IntersectionObserver callback and would stay invisible. */ .prem10 .t10-slider{ display:block; } .prem10 .t10-slider .owl-stage{ display:flex; } .prem10 .t10-slider .owl-item{ display:flex; align-items:stretch; height:auto; } /* Only stretch the width. Forcing height:100% here resolved the percentage against an auto-height flex item, which collapsed every card to its text height (wide 80px strips with clipped titles). */ .prem10 .t10-slider .owl-item > *{ width:100%; } /* neutralise scroll-reveal inside sliders (clones never animate in) */ .prem10 .t10-slider .t10-reveal{ opacity:1 !important; transform:none !important; } /* dots */ .prem10 .t10-slider .owl-dots{ margin-top:18px; text-align:center; line-height:0; } .prem10 .t10-slider .owl-dots .owl-dot{ display:inline-block; } .prem10 .t10-slider .owl-dots .owl-dot span{ width:7px; height:7px; margin:0 4px; background:#d6dee9; border-radius:50%; display:block; transition:all .25s ease; } .prem10 .t10-slider .owl-dots .owl-dot.active span{ width:22px; border-radius:4px; background:var(--gold); } /* arrows */ .prem10 .t10-slider .owl-nav{ margin:0; } .prem10 .t10-slider .owl-nav button.owl-prev, .prem10 .t10-slider .owl-nav button.owl-next{ position:absolute; top:38%; transform:translateY(-50%); z-index:5; width:40px; height:40px; border-radius:50%; background:#fff !important; color:var(--ink) !important; border:1px solid var(--line) !important; box-shadow:0 6px 18px -8px rgba(16,24,40,.35); display:flex; align-items:center; justify-content:center; font-size:0; transition:all .22s ease; } .prem10 .t10-slider .owl-nav button.owl-prev{ left:-18px; } .prem10 .t10-slider .owl-nav button.owl-next{ right:-18px; } .prem10 .t10-slider .owl-nav button:hover{ background:var(--gold) !important; color:#fff !important; border-color:transparent !important; } .prem10 .t10-slider .owl-nav button svg{ width:16px; height:16px; } .prem10 .t10-slider .owl-nav button.disabled{ opacity:.35; } .prem10 .t10-sec{ position:relative; } @media (max-width: 1199.98px){ .prem10 .t10-slider .owl-nav button.owl-prev{ left:-6px; } .prem10 .t10-slider .owl-nav button.owl-next{ right:-6px; } } @media (max-width: 767.98px){ /* On phones the arrows sit over the cards, so hide them and let the carousel be swiped / auto-advance. */ .prem10 .t10-slider .owl-nav{ display:none; } .prem10 .t10-slider .owl-dots{ margin-top:14px; } } /* ---- Square destination cards (Trending Indian / International) ---- A fixed pixel height left short, letterboxed cards; a 1:1 ratio scales with the column width and reads better in a slider. */ .prem10 .t10-place{ height:auto; aspect-ratio:1 / 1; min-height:0; align-items:flex-end; padding:16px; } .prem10 .t10-place::before{ background:linear-gradient(transparent 42%, rgba(8,12,22,.86)); } .prem10 .t10-place-c h3{ font-size:1.18rem; line-height:1.25; } .prem10 .t10-place-p{ font-size:.82rem; } /* Older engines without aspect-ratio keep a sensible square-ish fallback. */ @supports not (aspect-ratio: 1 / 1){ .prem10 .t10-place{ height:250px; } } @media (max-width:575.98px){ /* One card per view on phones — full square would be very tall, so ease it. */ .prem10 .t10-place{ aspect-ratio:4 / 3; } @supports not (aspect-ratio: 4 / 3){ .prem10 .t10-place{ height:210px; } } } /* ---- Align price + View across package cards ---- The tag list wraps to a second row when a package includes more services (e.g. 6 tags vs 4), which pushed that card's footer further down. Making the card a flex column and giving the footer margin-top:auto pins price/button to the bottom, so they line up across the row whatever the tag count. The slider already stretches cards to equal height, so "bottom" is shared. */ .prem10 .t10-pkg{ display:flex; flex-direction:column; } .prem10 .t10-pkg-img{ flex:0 0 auto; } .prem10 .t10-pkg-body{ display:flex; flex-direction:column; flex:1 1 auto; } .prem10 .t10-pkg-inc{ margin-bottom:14px; } .prem10 .t10-pkg-foot{ margin-top:auto; } /* Same treatment for the other cards whose body length varies, so every row of cards has its price/CTA on one line. */ .prem10 .t10-hotel{ display:flex; flex-direction:column; } .prem10 .t10-hotel-body{ display:flex; flex-direction:column; flex:1 1 auto; } .prem10 .t10-hotel-foot{ margin-top:auto; } .prem10 .t10-visa{ display:flex; flex-direction:column; } .prem10 .t10-visa-body{ display:flex; flex-direction:column; flex:1 1 auto; } .prem10 .t10-visa-cost{ margin-top:auto; } .prem10 .t10-car{ display:flex; flex-direction:column; } .prem10 .t10-car-foot{ margin-top:auto; } /* ---- Top Rented Cars: single-line name + route, larger car image ---- .t10-car-top is a flex row; without min-width:0 the text block refuses to shrink below its content, so long routes ("Indira Gandhi International Airport → Delhi") wrapped over several lines and pushed the card contents down. Constraining it lets the ellipsis do the work instead. */ .prem10 .t10-car-hd{ flex:1 1 auto; min-width:0; } .prem10 .t10-car-name, .prem10 .t10-car-route{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .prem10 .t10-car-name{ font-size:1.02rem; line-height:1.3; } .prem10 .t10-car-route{ margin-top:4px; } /* Bigger car photo */ .prem10 .t10-car-img{ width:132px; height:84px; flex:0 0 132px; } .prem10 .t10-car-top{ align-items:center; gap:10px; } /* Keep price + Book Now on a shared bottom line across all cards */ .prem10 .t10-car-foot{ margin-top:auto; } @media (max-width:1199.98px){ .prem10 .t10-car-img{ width:112px; height:72px; flex:0 0 112px; } } @media (max-width:575.98px){ .prem10 .t10-car-img{ width:120px; height:76px; flex:0 0 120px; } } /* ---- Shop product cards (home slider) ---- */ .prem10 .t10-shop{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:transform .25s, box-shadow .25s; } .prem10 .t10-shop:hover{ transform:translateY(-6px); box-shadow:0 22px 38px -22px rgba(14,22,38,.4); } .prem10 .t10-shop-img{ display:block; aspect-ratio:1/1; background-size:cover; background-position:center; background-color:#eef2f7; position:relative; flex:0 0 auto; } .prem10 .t10-shop-tag{ position:absolute; left:10px; bottom:10px; background:rgba(255,255,255,.94); color:var(--gold-ink); font-size:.66rem; font-weight:700; padding:4px 9px; border-radius:20px; } .prem10 .t10-shop-out{ position:absolute; right:10px; top:10px; background:#fee2e2; color:#b42318; font-size:.66rem; font-weight:700; padding:4px 9px; border-radius:20px; } .prem10 .t10-shop-body{ display:flex; flex-direction:column; flex:1 1 auto; padding:14px 16px 16px; } .prem10 .t10-shop-cat{ font-family:var(--fm); font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:0 0 4px; font-weight:600; } .prem10 .t10-shop-name{ font-family:var(--fh); font-weight:700; font-size:1rem; margin:0 0 12px; line-height:1.3; } .prem10 .t10-shop-name a{ color:var(--ink); text-decoration:none; } .prem10 .t10-shop-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; } .prem10 .t10-shop-price strong{ font-family:var(--fm); font-size:1.1rem; color:var(--ink); } .prem10 .t10-shop-price span{ font-size:.82rem; color:var(--muted); text-decoration:line-through; margin-left:5px; }