:root { --pine: #1a3c2a; --pine-deep: #0f2318; --emerald: #2d7a4f; --emerald-light: #3da06a; --gold: #c8a44e; --gold-light: #e8cc7a; --snow: #f5f2ec; --snow-warm: #faf7f0; --mist: #d4d0c8; --slate: #4a4a42; --charcoal: #2a2a25; --walnut: #6b4c30; --saffron: #d4763c; --lake: #3a7c8c; --lake-deep: #2a5c68; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', sans-serif; background: var(--snow); color: var(--charcoal); overflow-x: hidden; } /* Preloader — styles are inlined in for instant render; this block kept for overrides only */ /* Navbar */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 1.2rem 3rem; display: flex; align-items: center; justify-content: space-between; transition: all .4s; background: transparent; } .navbar.scrolled { background: rgba(15, 35, 24, .95); backdrop-filter: blur(20px); padding: .8rem 3rem; box-shadow: 0 4px 30px rgba(0, 0, 0, .2); } .nav-logo { text-decoration: none; display: flex; align-items: center; } .nav-logo-img { height: 80px; width: auto; object-fit: contain; } .nav-links { display: flex; gap: 2.5rem; list-style: none; align-items: center; } .nav-links a { color: rgba(255, 255, 255, .85); text-decoration: none; font-size: .85rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; transition: color .3s; position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1.5px; background: var(--gold); transition: width .3s; } .nav-links a:hover { color: var(--gold); } .nav-links a:hover::after { width: 100%; } .nav-cta { background: var(--gold) !important; color: var(--pine-deep) !important; padding: .6rem 1.5rem !important; border-radius: 2px; font-weight: 700 !important; transition: all .3s !important; display: inline-flex !important; align-items: center; gap: .4rem; } .nav-cta::after { display: none !important; } .nav-cta:hover { background: var(--gold-light) !important; transform: translateY(-1px); } .nav-cta svg { width: 14px; height: 14px; stroke: var(--pine-deep); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .hamburger { display: none; cursor: pointer; flex-direction: column; gap: 5px; z-index: 1001; } .hamburger span { width: 28px; height: 2px; background: #fff; transition: all .3s; } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translateY(7px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translateY(-7px); } /* Mobile-only sidebar elements — hidden on desktop */ .nav-mob-header, .nav-mob-footer, .nav-mob-icon { display: none; } .nav-overlay { position: fixed; inset: 0; z-index: 999; background: rgba(10, 20, 14, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s, visibility .35s; } .nav-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; } /* Hero */ .hero { position: relative; height: 100vh; min-height: 700px; display: flex; align-items: center; overflow: hidden; padding: 0; } .hero-bg { position: absolute; inset: 0; background: url('../assets/kashmir-images/gulmarg-kashmir-tour.jpg') center/cover no-repeat; } .hero-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10, 26, 16, .88) 0%, rgba(15, 35, 24, .75) 30%, rgba(26, 60, 42, .65) 55%, rgba(15, 35, 24, .8) 100%); } .hero-bg::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"); opacity: .5; pointer-events: none; } .hero-mountains { position: absolute; bottom: 0; left: 0; right: 0; height: 45%; opacity: .08; } .hero-mountains svg { width: 100%; height: 100%; } .hero-pattern { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent, transparent 80px, rgba(200, 164, 78, .04) 80px, rgba(200, 164, 78, .04) 81px); pointer-events: none; } .hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 3rem; display: flex; align-items: center; justify-content: space-between; gap: 3rem; } .hero-content { max-width: 620px; animation: fadeUp 1.2s cubic-bezier(.22, 1, .36, 1) .5s both; } .hero-content::before { content: ''; position: absolute; top: -60px; left: -40px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(200, 164, 78, .08) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .hero-vehicle { position: relative; flex-shrink: 0; width: 480px; animation: heroCarSlide 1.4s cubic-bezier(.22, 1, .36, 1) .8s both; } .hero-vehicle img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(200, 164, 78, .15); } .hero-vehicle::before { content: ''; position: absolute; inset: -8px; border-radius: 10px; border: 1.5px solid rgba(200, 164, 78, .12); pointer-events: none; } .hero-vehicle::after { content: ''; position: absolute; bottom: -20px; left: 10%; right: 10%; height: 40px; background: radial-gradient(ellipse, rgba(0, 0, 0, .4), transparent 70%); filter: blur(10px); z-index: -1; } .hero-vehicle-tag { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--pine-deep); font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; padding: .45rem 1.2rem; border-radius: 2px; white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; box-shadow: 0 4px 16px rgba(200, 164, 78, .3); } .hero-vehicle-tag svg { width: 13px; height: 13px; stroke: var(--pine-deep); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @keyframes heroCarSlide { from { opacity: 0; transform: translateX(60px) scale(.95); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .hero-badge { display: inline-flex; align-items: center; gap: .5rem; background: rgba(200, 164, 78, .15); border: 1px solid rgba(200, 164, 78, .3); padding: .4rem 1.2rem; border-radius: 2px; color: var(--gold-light); font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1.5rem; } .hero-badge svg { width: 14px; height: 14px; stroke: var(--gold-light); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(2.8rem, 6vw, 5.5rem); color: #fff; line-height: 1.05; margin-bottom: 1.5rem; font-weight: 900; text-shadow: 0 2px 40px rgba(0,0,0,.3); } .hero h1 em { font-style: italic; background: linear-gradient(135deg, var(--gold-light), var(--gold), #dbb860); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 400; } .hero p { color: rgba(255, 255, 255, .8); font-size: 1.1rem; line-height: 1.7; max-width: 600px; margin-bottom: 2.5rem; font-weight: 300; } .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: .6rem; padding: 1rem 2.2rem; font-size: .85rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; transition: all .3s; border-radius: 2px; font-family: 'DM Sans', sans-serif; } .btn svg { width: 18px; height: 18px; stroke-linecap: round; stroke-linejoin: round; } .btn-gold { background: var(--gold); color: var(--pine-deep); } .btn-gold svg { stroke: var(--pine-deep); fill: none; stroke-width: 2; } .btn-gold:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(200, 164, 78, .3); } .btn-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .3); } .btn-outline svg { stroke: #fff; fill: none; stroke-width: 2; } .btn-outline:hover { border-color: var(--gold); color: var(--gold); } .btn-outline:hover svg { stroke: var(--gold); } .btn-wa { background: #25D366; color: #fff; position: relative; overflow: hidden; } .btn-wa svg { fill: #fff; stroke: none; } .btn-wa::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,.1) 50%, transparent 60%); transform: translateX(-100%); transition: transform .6s; } .btn-wa:hover { background: #1ebe5c; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(37, 211, 102, .35); } .btn-wa:hover::before { transform: translateX(100%); } .btn-pine { background: var(--pine); color: var(--gold); } .btn-pine svg { stroke: var(--gold); fill: none; stroke-width: 2; } .btn-pine:hover { background: var(--pine-deep); } .hero-scroll { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .5); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: .5rem; animation: float 3s ease-in-out infinite; text-decoration: none; } @keyframes float { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-8px); } } .scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--gold), transparent); } /* Stats */ .stats-bar { background: var(--pine-deep); padding: 2.5rem 3rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; border-bottom: 1px solid rgba(200, 164, 78, .15); position: relative; } .stats-bar::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(200, 164, 78, .03) 50%, transparent); pointer-events: none; } .stat-item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; } .stat-icon svg { width: 22px; height: 22px; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .6; } .stat-number { font-family: 'Playfair Display', serif; font-size: 2.5rem; color: var(--gold); font-weight: 700; } .stat-label { color: rgba(255, 255, 255, .6); font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; } /* Sections */ .section { padding: 6rem 3rem; } .section-dark { background: var(--pine-deep); color: #fff; } .section-warm { background: var(--snow-warm); } .section-header { text-align: center; margin-bottom: 4rem; } .section-tag { display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; } .section-tag::before, .section-tag::after { content: '\2014'; margin: 0 .8rem; opacity: .4; } .section-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; line-height: 1.2; margin-bottom: 1rem; } .section-subtitle { font-size: 1rem; color: var(--slate); max-width: 600px; margin: 0 auto; line-height: 1.7; font-weight: 300; } .section-dark .section-subtitle { color: rgba(255, 255, 255, .6); } /* Fleet */ .fleet-cats { display: flex; justify-content: center; gap: .5rem; margin-bottom: 3rem; flex-wrap: wrap; } .fc-btn { padding: .6rem 1.5rem; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: transparent; color: var(--slate); border: 1.5px solid var(--mist); cursor: pointer; transition: all .3s; border-radius: 2px; font-family: 'DM Sans', sans-serif; display: inline-flex; align-items: center; gap: .4rem; } .fc-btn svg { width: 14px; height: 14px; stroke: var(--slate); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; } .fc-btn.active, .fc-btn:hover { background: var(--pine); color: var(--gold); border-color: var(--pine); } .fc-btn.active svg, .fc-btn:hover svg { stroke: var(--gold); } .fleet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; max-width: 1200px; margin: 0 auto; } .fcard { background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 20px rgba(0, 0, 0, .06); transition: all .5s cubic-bezier(.22, 1, .36, 1); } .fcard:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(0, 0, 0, .14); } .fcard-img { height: 220px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .fcard-img::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255, 255, 255, .03) 10px, rgba(255, 255, 255, .03) 11px); z-index: 1; } .fcard-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; } .fcard:hover .fcard-photo { transform: scale(1.08); } .fcard-vicon { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: rgba(255, 255, 255, .1); border-radius: 50%; border: 1px solid rgba(255, 255, 255, .15); backdrop-filter: blur(4px); } .fcard-vicon svg { width: 38px; height: 38px; stroke: rgba(255, 255, 255, .95); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .fcard-img.has-photo .fcard-vicon { display: none; } .fcard-type { position: absolute; top: 1rem; left: 1rem; background: var(--gold); color: var(--pine-deep); padding: .25rem .8rem; font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-radius: 2px; z-index: 2; } .fcard-body { padding: 1.5rem; } .fcard-name { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700; margin-bottom: .8rem; color: var(--pine-deep); } .fcard-feats { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.2rem; } .ff { display: flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--slate); } .ff svg { width: 15px; height: 15px; stroke: var(--emerald); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .fcard-cta { display: flex; width: 100%; padding: .75rem; background: var(--pine); color: var(--gold); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border: none; cursor: pointer; transition: all .3s; justify-content: center; align-items: center; gap: .5rem; font-family: 'DM Sans', sans-serif; text-decoration: none; position: relative; overflow: hidden; } .fcard-cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(200, 164, 78, .08), transparent); transform: translateX(-100%); transition: transform .5s; } .fcard-cta:hover { background: var(--pine-deep); } .fcard-cta:hover::before { transform: translateX(100%); } .fcard-cta:hover svg { transform: translateX(3px); } .fcard-cta svg { transition: transform .3s; } .fleet-view-all { text-align: center; margin-top: 2.5rem; } .btn-outline-dark { border-color: var(--mist); color: var(--pine); } .btn-outline-dark svg { stroke: var(--pine); fill: none; stroke-width: 2; } .btn-outline-dark:hover { border-color: var(--pine); background: var(--pine); color: var(--gold); } .btn-outline-dark:hover svg { stroke: var(--gold); } .fcard-cta svg { width: 14px; height: 14px; stroke: var(--gold); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Destinations */ .dest-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 280px); gap: 1.2rem; max-width: 1200px; margin: 0 auto; } .dcard { position: relative; border-radius: 4px; overflow: hidden; cursor: pointer; transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s; } .dcard:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.2); } .dcard:first-child { grid-row: span 2; } .dcard-bg { position: absolute; inset: 0; transition: transform .6s; } img.dcard-bg { width: 100%; height: 100%; object-fit: cover; } .dcard:hover .dcard-bg { transform: scale(1.05); } .dcard-has-img .dcard-icon { display: none; } .dcard-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 35, 24, .92) 0%, rgba(15, 35, 24, .3) 50%, rgba(15, 35, 24, .05) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem; } .dcard-name { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: #fff; font-weight: 700; margin-bottom: .3rem; display: flex; align-items: center; gap: .5rem; } .dcard-name svg { width: 18px; height: 18px; stroke: var(--gold); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .dcard-desc { color: rgba(255, 255, 255, .7); font-size: .82rem; font-weight: 300; } .dcard-tag { position: absolute; top: 1rem; right: 1rem; background: var(--gold); color: var(--pine-deep); padding: .3rem .8rem; font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 2px; } .dcard-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); opacity: .12; } .dcard-icon svg { width: 80px; height: 80px; stroke: #fff; fill: none; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; } /* Why Us */ .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 1100px; margin: 0 auto; } .wcard { text-align: center; padding: 2.5rem 2rem; border: 1px solid rgba(200, 164, 78, .15); border-radius: 4px; transition: all .5s cubic-bezier(.22, 1, .36, 1); background: rgba(255, 255, 255, .03); } .wcard:hover { border-color: var(--gold); background: rgba(200, 164, 78, .05); transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.15); } .wcard:hover .wcard-icon { background: rgba(200, 164, 78, .2); border-color: var(--gold); box-shadow: 0 0 24px rgba(200, 164, 78, .15); } .wcard-icon { width: 64px; height: 64px; margin: 0 auto 1.5rem; background: rgba(200, 164, 78, .1); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(200, 164, 78, .15); transition: all .4s; } .wcard-icon svg { width: 26px; height: 26px; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .wcard-title { font-family: 'Playfair Display', serif; font-size: 1.2rem; margin-bottom: .8rem; color: #fff; } .wcard-desc { font-size: .88rem; color: rgba(255, 255, 255, .6); line-height: 1.7; font-weight: 300; } /* Testimonials */ .test-track { max-width: 900px; margin: 0 auto; } .test-card { text-align: center; padding: 3rem 2rem; position: relative; } .test-card::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); border-radius: 2px; } .test-qi svg { width: 48px; height: 48px; fill: var(--gold); stroke: none; opacity: .25; } .test-text { font-size: 1.15rem; line-height: 1.9; color: var(--charcoal); font-style: italic; font-weight: 300; max-width: 650px; margin: 1.5rem auto; transition: opacity .4s, transform .4s; } .test-text.fading { opacity: 0; transform: translateY(6px); } .test-author { font-weight: 700; font-size: .9rem; color: var(--pine); } .test-loc { font-size: .78rem; color: var(--slate); margin-top: .2rem; display: flex; align-items: center; justify-content: center; gap: .3rem; } .test-loc svg { width: 12px; height: 12px; stroke: var(--slate); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .test-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.5rem; } .test-dot { width: 8px; height: 8px; background: var(--mist); border-radius: 50%; cursor: pointer; transition: all .3s; border: none; } .test-dot.active { background: var(--gold); width: 24px; border-radius: 4px; } /* CTA */ .cta-ban { background: url('../assets/kashmir-images/pahalgam-valley-kashmir.jpg') center/cover no-repeat; padding: 5rem 3rem; text-align: center; position: relative; overflow: hidden; } .cta-ban::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(15, 35, 24, .88), rgba(26, 60, 42, .8), rgba(15, 35, 24, .88)); } .cta-ban::after { content: ''; position: absolute; top: -50%; left: 50%; transform: translateX(-50%); width: 600px; height: 600px; background: radial-gradient(circle, rgba(200, 164, 78, .06) 0%, transparent 60%); border-radius: 50%; pointer-events: none; } .cta-ban h2 { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 3rem); color: #fff; margin-bottom: 1rem; position: relative; } .cta-ban h2 em { color: var(--gold); font-style: italic; font-weight: 400; } .cta-ban p { color: rgba(255, 255, 255, .7); font-size: 1rem; margin-bottom: 2.5rem; font-weight: 300; position: relative; } .cta-btns { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; position: relative; } /* Contact */ .contact-channels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; max-width: 1100px; margin: 0 auto; } .cc-card { position: relative; text-align: center; padding: 2rem 1.5rem; background: #fff; border: 1.5px solid var(--mist); border-radius: 4px; text-decoration: none; color: var(--charcoal); transition: all .5s cubic-bezier(.22, 1, .36, 1); overflow: hidden; } .cc-card:hover { border-color: var(--emerald); transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0, 0, 0, .08); } .cc-icon { width: 56px; height: 56px; margin: 0 auto 1.2rem; background: rgba(26, 60, 42, .08); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all .4s; } .cc-icon svg { width: 24px; height: 24px; stroke: var(--pine); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .cc-icon-wa { background: rgba(37, 211, 102, .1); } .cc-icon-wa svg { fill: #25D366; stroke: none; } .cc-card:hover .cc-icon { background: var(--pine); } .cc-card:hover .cc-icon svg { stroke: var(--gold); fill: none; } .cc-card:hover .cc-icon-wa { background: #25D366; } .cc-card:hover .cc-icon-wa svg { fill: #fff; stroke: none; } .cc-title { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 700; margin-bottom: .3rem; } .cc-val { font-size: .88rem; color: var(--emerald); font-weight: 600; margin-bottom: .6rem; } .cc-desc { font-size: .8rem; color: var(--slate); line-height: 1.6; font-weight: 300; } .cc-badge { position: absolute; top: .8rem; right: .8rem; background: #25D366; color: #fff; font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 2px; } .contact-channels .cc-card.reveal:nth-child(1) { transition-delay: 0s; } .contact-channels .cc-card.reveal:nth-child(2) { transition-delay: .08s; } .contact-channels .cc-card.reveal:nth-child(3) { transition-delay: .16s; } .contact-channels .cc-card.reveal:nth-child(4) { transition-delay: .24s; } .contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; max-width: 1000px; margin: 0 auto; } .contact-form { display: flex; flex-direction: column; gap: 1rem; } .form-row { display: flex; gap: 1rem; } .fi { width: 100%; padding: 1rem 1.2rem; border: 1.5px solid var(--mist); background: #fff; font-family: 'DM Sans', sans-serif; font-size: .9rem; color: var(--charcoal); border-radius: 2px; transition: border-color .3s; outline: none; } .fi:focus { border-color: var(--emerald); } .fi::placeholder { color: #aaa; } textarea.fi { min-height: 120px; resize: vertical; } input[type="date"].fi { color: #aaa; } input[type="date"].fi:valid { color: var(--charcoal); } .contact-sidebar { display: flex; flex-direction: column; gap: 1.2rem; } .cs-card { background: var(--snow-warm); border: 1px solid rgba(200, 164, 78, .15); border-radius: 4px; padding: 1.5rem; } .cs-card-title { display: flex; align-items: center; gap: .6rem; font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; margin-bottom: .6rem; color: var(--pine); } .cs-card-title svg { width: 18px; height: 18px; stroke: var(--emerald); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .cs-card-text { font-size: .9rem; color: var(--slate); line-height: 1.6; } .cs-note { color: var(--emerald); font-weight: 600; font-size: .8rem; } .cs-wa-btn { width: 100%; justify-content: center; margin-top: .4rem; } .contact-map { width: 100%; overflow: hidden; } .contact-map iframe { display: block; width: 100%; height: 400px; filter: grayscale(.3) contrast(1.05); transition: filter .4s; } .contact-map iframe:hover { filter: grayscale(0); } /* Footer */ .footer { background: var(--pine-deep); padding: 4rem 3rem 2rem; color: rgba(255, 255, 255, .5); } .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; max-width: 1200px; margin: 0 auto 3rem; } .footer-brand { display: flex; align-items: center; margin-bottom: 1rem; } .footer-brand-img { height: 120px; width: auto; object-fit: contain; } .footer-desc { font-size: .88rem; line-height: 1.7; max-width: 320px; font-weight: 300; } .footer-col-t { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2rem; } .footer-links { list-style: none; display: flex; flex-direction: column; gap: .6rem; } .footer-links a { color: rgba(255, 255, 255, .5); text-decoration: none; font-size: .88rem; transition: color .3s; font-weight: 300; display: inline-flex; align-items: center; gap: .4rem; } .footer-links a:hover { color: var(--gold); } .footer-links a svg { width: 13px; height: 13px; stroke: rgba(255, 255, 255, .3); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; } .footer-links a:hover svg { stroke: var(--gold); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 2rem; text-align: center; font-size: .78rem; } .footer-bottom a { color: var(--gold); text-decoration: none; transition: color .3s; } .footer-bottom a:hover { color: var(--gold-light); } /* ========== WhatsApp Chat Widget ========== */ .wa-widget { position: fixed; bottom: 1.8rem; right: 1.8rem; z-index: 999; display: flex; flex-direction: column; align-items: flex-end; gap: .8rem; } /* --- Floating Button --- */ .fwa { position: relative; width: 64px; height: 64px; background: #25D366; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(37, 211, 102, .35), 0 2px 8px rgba(0,0,0,.15); cursor: pointer; transition: all .4s cubic-bezier(.4, 0, .2, 1); animation: fwaSlideIn .7s cubic-bezier(.34, 1.56, .64, 1) 1.5s both; } .fwa:hover { background: #1ebe5c; box-shadow: 0 8px 32px rgba(37, 211, 102, .45), 0 4px 12px rgba(0,0,0,.2); transform: scale(1.08); } .fwa.open { background: var(--pine-deep); box-shadow: 0 6px 24px rgba(0,0,0,.25); } .fwa-icon-wa { width: 30px; height: 30px; fill: #fff; stroke: none; transition: all .35s cubic-bezier(.4, 0, .2, 1); } .fwa-icon-close { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; position: absolute; opacity: 0; transform: rotate(-90deg) scale(.5); transition: all .35s cubic-bezier(.4, 0, .2, 1); } .fwa.open .fwa-icon-wa { opacity: 0; transform: rotate(90deg) scale(.5); } .fwa.open .fwa-icon-close { opacity: 1; transform: rotate(0) scale(1); } @keyframes fwaSlideIn { from { opacity: 0; transform: translateY(60px) scale(.3); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Pulse rings */ .fwa-pulse { position: absolute; inset: -5px; border-radius: 50%; background: rgba(37, 211, 102, .25); animation: fwaPulse 2.5s ease-out infinite; pointer-events: none; } .fwa-pulse-2 { animation-delay: 1.25s; } @keyframes fwaPulse { 0% { transform: scale(.85); opacity: .6; } 100% { transform: scale(1.7); opacity: 0; } } .fwa.open .fwa-pulse { display: none; } /* Notification badge */ .fwa-badge { position: absolute; top: -3px; right: -3px; width: 22px; height: 22px; background: #ff3b30; color: #fff; border-radius: 50%; font-family: 'DM Sans', sans-serif; font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2.5px solid #fff; animation: fwaBadgeBounce .5s cubic-bezier(.34, 1.56, .64, 1) 3s both; pointer-events: none; } .fwa.open .fwa-badge { display: none; } @keyframes fwaBadgeBounce { from { transform: scale(0); } to { transform: scale(1); } } /* --- Chat Bubble Popup --- */ .wa-bubble { width: 340px; background: #fff; border-radius: 16px; box-shadow: 0 12px 48px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08); overflow: hidden; transform-origin: bottom right; opacity: 0; transform: scale(.85) translateY(16px); pointer-events: none; transition: all .35s cubic-bezier(.34, 1.56, .64, 1); } .wa-bubble.show { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; } .wa-bubble-close { position: absolute; top: .75rem; right: .75rem; width: 28px; height: 28px; background: rgba(255,255,255,.2); border: none; border-radius: 50%; color: rgba(255,255,255,.9); font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; z-index: 2; } .wa-bubble-close:hover { background: rgba(255,255,255,.3); } .wa-bubble-header { background: #075E54; padding: 1rem 1.2rem; display: flex; align-items: center; gap: .8rem; } .wa-bubble-avatar { position: relative; width: 44px; height: 44px; min-width: 44px; background: #128C7E; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .wa-bubble-avatar svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .wa-online { position: absolute; bottom: 1px; right: 1px; width: 10px; height: 10px; background: #25D366; border-radius: 50%; border: 2px solid #075E54; } .wa-bubble-name { color: #fff; font-weight: 600; font-size: .92rem; } .wa-bubble-status { color: rgba(255,255,255,.7); font-size: .72rem; } .wa-bubble-body { background: #ECE5DD url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='p' width='60' height='60' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='30' cy='30' r='1' fill='%23d5cec4' opacity='.4'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23p)'/%3E%3C/svg%3E"); padding: 1.2rem 1rem; min-height: 110px; } .wa-bubble-msg { background: #fff; padding: .8rem 1rem; border-radius: 0 10px 10px 10px; max-width: 92%; box-shadow: 0 1px 2px rgba(0,0,0,.08); position: relative; animation: waMsgIn .4s ease .2s both; } .wa-msg-text { font-size: .85rem; line-height: 1.55; color: #303030; } .wa-wave { display: inline-block; animation: waWave 1.8s ease-in-out infinite; transform-origin: 70% 70%; } @keyframes waWave { 0%,60%,100% { transform: rotate(0); } 10%,30% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } } .wa-msg-time { font-size: .65rem; color: #999; text-align: right; margin-top: .3rem; } @keyframes waMsgIn { from { opacity: 0; transform: translateY(8px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Typing indicator */ .wa-bubble-typing { display: inline-flex; gap: 4px; background: #fff; padding: .6rem .8rem; border-radius: 0 10px 10px 10px; margin-top: .5rem; opacity: 0; animation: waMsgIn .3s ease .8s both; } .wa-bubble-typing.hidden { display: none; } .wa-bubble-typing span { width: 7px; height: 7px; background: #90a4ae; border-radius: 50%; animation: waTypingDot 1.4s ease-in-out infinite; } .wa-bubble-typing span:nth-child(2) { animation-delay: .2s; } .wa-bubble-typing span:nth-child(3) { animation-delay: .4s; } @keyframes waTypingDot { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } } .wa-bubble-reply { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .9rem; background: #25D366; color: #fff; font-family: 'DM Sans', sans-serif; font-size: .85rem; font-weight: 600; letter-spacing: .04em; text-decoration: none; transition: background .2s; } .wa-bubble-reply:hover { background: #1ebe5c; } .wa-bubble-reply svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .reveal { opacity: 0; transform: translateY(30px); transition: all .8s cubic-bezier(.22, 1, .36, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } /* ========== Book Now Modal ========== */ .bm-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(15, 35, 24, .6); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all .35s; } .bm-overlay.show { opacity: 1; visibility: visible; } .bm-dialog { background: #fff; border-radius: 8px; width: 420px; max-width: 92vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 80px rgba(0, 0, 0, .25); transform: scale(.92) translateY(20px); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); } .bm-overlay.show .bm-dialog { transform: scale(1) translateY(0); } .bm-close { position: absolute; top: .8rem; right: .8rem; width: 32px; height: 32px; background: rgba(0, 0, 0, .06); border: none; border-radius: 50%; font-size: 1.3rem; color: var(--slate); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; z-index: 2; } .bm-close:hover { background: rgba(0, 0, 0, .1); color: var(--charcoal); } .bm-header { position: relative; background: var(--pine-deep); padding: 2rem 2rem 1.5rem; border-radius: 8px 8px 0 0; } .bm-title { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 900; color: #fff; margin-bottom: .3rem; } .bm-subtitle { font-size: .85rem; color: rgba(255, 255, 255, .6); font-weight: 300; } .bm-header .bm-close { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); } .bm-header .bm-close:hover { background: rgba(255, 255, 255, .2); color: #fff; } .bm-options { padding: .8rem; display: flex; flex-direction: column; gap: .4rem; } .bm-opt { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: 6px; text-decoration: none; color: var(--charcoal); transition: all .25s; position: relative; } .bm-opt:hover { background: var(--snow-warm); } .bm-opt-icon { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; background: rgba(26, 60, 42, .08); display: flex; align-items: center; justify-content: center; transition: all .3s; } .bm-opt-icon svg { width: 20px; height: 20px; stroke: var(--pine); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .bm-opt-wa .bm-opt-icon { background: rgba(37, 211, 102, .1); } .bm-opt-wa .bm-opt-icon svg { fill: #25D366; stroke: none; } .bm-opt:hover .bm-opt-icon { background: var(--pine); } .bm-opt:hover .bm-opt-icon svg { stroke: var(--gold); fill: none; } .bm-opt-wa:hover .bm-opt-icon { background: #25D366; } .bm-opt-wa:hover .bm-opt-icon svg { fill: #fff; stroke: none; } .bm-opt-info { flex: 1; } .bm-opt-name { font-weight: 600; font-size: .92rem; margin-bottom: .1rem; } .bm-opt-val { font-size: .78rem; color: var(--slate); font-weight: 400; } .bm-opt-badge { background: #25D366; color: #fff; font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 2px; flex-shrink: 0; } .bm-opt-arrow { width: 16px; height: 16px; stroke: var(--mist); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; transition: stroke .2s; } .bm-opt:hover .bm-opt-arrow { stroke: var(--emerald); } .bm-footer { padding: .8rem 2rem 1.2rem; text-align: center; font-size: .75rem; color: var(--slate); display: flex; align-items: center; justify-content: center; gap: .4rem; border-top: 1px solid rgba(0, 0, 0, .06); } .bm-footer svg { width: 13px; height: 13px; stroke: var(--emerald); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* Staggered children */ .why-grid .wcard.reveal:nth-child(1) { transition-delay: 0s; } .why-grid .wcard.reveal:nth-child(2) { transition-delay: .1s; } .why-grid .wcard.reveal:nth-child(3) { transition-delay: .2s; } .why-grid .wcard.reveal:nth-child(4) { transition-delay: .3s; } .why-grid .wcard.reveal:nth-child(5) { transition-delay: .4s; } .why-grid .wcard.reveal:nth-child(6) { transition-delay: .5s; } .stats-bar .stat-item.reveal:nth-child(1) { transition-delay: 0s; } .stats-bar .stat-item.reveal:nth-child(2) { transition-delay: .12s; } .stats-bar .stat-item.reveal:nth-child(3) { transition-delay: .24s; } .stats-bar .stat-item.reveal:nth-child(4) { transition-delay: .36s; } /* ========== About Page ========== */ /* Page Hero (compact) */ .page-hero { position: relative; padding: 10rem 3rem 4rem; overflow: hidden; min-height: 340px; display: flex; align-items: flex-end; } .page-hero-bg { position: absolute; inset: 0; background: url('../assets/kashmir-images/gulmarg-meadow-kashmir.jpg') center/cover no-repeat; } .page-hero-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10, 26, 16, .88) 0%, rgba(15, 35, 24, .75) 40%, rgba(26, 60, 42, .65) 70%, rgba(15, 35, 24, .8) 100%); } .page-hero-bg::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"); opacity: .5; } .page-hero-pattern { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent, transparent 80px, rgba(200, 164, 78, .03) 80px, rgba(200, 164, 78, .03) 81px); pointer-events: none; } .page-hero-content { position: relative; z-index: 2; max-width: 700px; animation: fadeUp 1s cubic-bezier(.22, 1, .36, 1) .3s both; } .page-breadcrumb { display: flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 1.2rem; } .page-breadcrumb a { color: var(--gold); text-decoration: none; transition: color .3s; } .page-breadcrumb a:hover { color: var(--gold-light); } .page-breadcrumb svg { width: 12px; height: 12px; stroke: rgba(255,255,255,.3); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .page-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(2.4rem, 5vw, 4rem); color: #fff; font-weight: 900; line-height: 1.1; margin-bottom: 1rem; text-shadow: 0 2px 40px rgba(0,0,0,.3); } .page-hero h1 em { font-style: italic; background: linear-gradient(135deg, var(--gold-light), var(--gold), #dbb860); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 400; } .page-hero p { color: rgba(255,255,255,.7); font-size: 1.05rem; line-height: 1.7; font-weight: 300; max-width: 550px; } /* Nav active link */ .nav-active { color: var(--gold) !important; } .nav-active::after { width: 100% !important; background: var(--gold) !important; } /* About Story */ .about-story { display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; max-width: 1100px; margin: 0 auto; align-items: center; } .about-story-text .section-tag { text-align: left; } .about-story-text .section-tag::before { display: none; } .about-story-text .section-title { text-align: left; margin-bottom: 1.5rem; } .about-story-text .section-title em { font-style: italic; color: var(--emerald); } .about-story-text p { font-size: .95rem; line-height: 1.8; color: var(--slate); font-weight: 300; margin-bottom: 1rem; } .about-story-text p:first-of-type { font-size: 1.05rem; color: var(--charcoal); font-weight: 400; } .about-story-card { background: var(--pine-deep); border-radius: 8px; padding: 2.5rem 2rem; display: flex; flex-direction: column; gap: 1.8rem; position: relative; overflow: hidden; } .about-story-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--emerald), var(--gold)); } .about-story-card::after { content: ''; position: absolute; bottom: -60px; right: -60px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(200, 164, 78, .06) 0%, transparent 70%); border-radius: 50%; } .asc-item { display: flex; align-items: center; gap: 1rem; } .asc-icon { width: 48px; height: 48px; min-width: 48px; background: rgba(200, 164, 78, .1); border: 1px solid rgba(200, 164, 78, .2); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .asc-icon svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .asc-val { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 700; color: #fff; } .asc-label { font-size: .72rem; color: rgba(255,255,255,.5); letter-spacing: .1em; text-transform: uppercase; } /* Mission Cards */ .mission-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 1100px; margin: 0 auto; } .mcard { position: relative; background: var(--snow-warm); border-radius: 6px; padding: 2.5rem 2rem; text-align: center; transition: all .5s cubic-bezier(.22, 1, .36, 1); border: 1px solid rgba(0,0,0,.06); overflow: hidden; } .mcard-accent { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 3px; background: var(--gold); border-radius: 0 0 2px 2px; transition: width .4s; } .mcard:hover .mcard-accent { width: 80px; } .mcard:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,.1); border-color: transparent; } .mcard-icon { width: 64px; height: 64px; margin: 0 auto 1.5rem; background: var(--pine); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all .4s; } .mcard:hover .mcard-icon { background: var(--pine-deep); box-shadow: 0 0 24px rgba(200, 164, 78, .15); } .mcard-icon svg { width: 26px; height: 26px; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .mcard-title { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 700; color: var(--pine-deep); margin-bottom: .8rem; } .mcard-desc { font-size: .88rem; color: var(--slate); line-height: 1.7; font-weight: 300; } /* Staggered mission cards */ .mission-grid .mcard.reveal:nth-child(1) { transition-delay: 0s; } .mission-grid .mcard.reveal:nth-child(2) { transition-delay: .12s; } .mission-grid .mcard.reveal:nth-child(3) { transition-delay: .24s; } /* Differentiators */ .diff-list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; } .diff-item { display: flex; align-items: flex-start; gap: 1.5rem; padding: 2rem; background: #fff; border-radius: 6px; border: 1px solid rgba(0,0,0,.06); transition: all .5s cubic-bezier(.22, 1, .36, 1); position: relative; overflow: hidden; } .diff-item:hover { transform: translateX(6px); box-shadow: 0 8px 32px rgba(0,0,0,.08); border-color: rgba(200, 164, 78, .2); } .diff-icon { width: 56px; height: 56px; min-width: 56px; background: var(--pine); border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: all .4s; } .diff-item:hover .diff-icon { background: var(--pine-deep); box-shadow: 0 4px 16px rgba(26, 60, 42, .3); } .diff-icon svg { width: 24px; height: 24px; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .diff-icon-fill svg { fill: var(--gold); stroke: none; } .diff-body { flex: 1; } .diff-title { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 700; color: var(--pine-deep); margin-bottom: .5rem; } .diff-desc { font-size: .88rem; color: var(--slate); line-height: 1.7; font-weight: 300; } .diff-num { font-family: 'Playfair Display', serif; font-size: 3rem; font-weight: 900; color: rgba(0,0,0,.04); line-height: 1; min-width: 60px; text-align: right; } /* Staggered differentiators */ .diff-list .diff-item.reveal:nth-child(1) { transition-delay: 0s; } .diff-list .diff-item.reveal:nth-child(2) { transition-delay: .1s; } .diff-list .diff-item.reveal:nth-child(3) { transition-delay: .2s; } .diff-list .diff-item.reveal:nth-child(4) { transition-delay: .3s; } /* ========== Fleet Page ========== */ /* Sticky filter bar */ .fp-filter-wrap { background: var(--snow-warm); border-bottom: 1px solid rgba(0,0,0,.06); padding: 1rem 3rem; position: sticky; top: 60px; z-index: 100; transition: box-shadow .3s; } .fp-filter-wrap.stuck { box-shadow: 0 4px 20px rgba(0,0,0,.08); } .fp-filter { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; } .fp-section { padding-top: 3rem; } /* Expanded fleet grid */ .fp-grid { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; } /* Horizontal card */ .fp-card { display: grid; grid-template-columns: 380px 1fr; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 20px rgba(0,0,0,.06); transition: all .5s cubic-bezier(.22, 1, .36, 1); border: 1px solid rgba(0,0,0,.04); } .fp-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,.1); border-color: rgba(200, 164, 78, .15); } .fp-card-img { position: relative; min-height: 280px; overflow: hidden; } .fp-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; } .fp-card:hover .fp-card-img img { transform: scale(1.06); } .fp-card-type { position: absolute; top: 1rem; left: 1rem; background: var(--gold); color: var(--pine-deep); padding: .3rem .9rem; font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-radius: 2px; z-index: 2; } .fp-card-body { padding: 2rem 2.2rem; display: flex; flex-direction: column; justify-content: center; gap: .8rem; } .fp-card-name { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 700; color: var(--pine-deep); } .fp-card-desc { font-size: .9rem; color: var(--slate); line-height: 1.7; font-weight: 300; } .fp-card-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; padding: 1rem 0; border-top: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06); } .fp-spec { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--slate); } .fp-spec svg { width: 18px; height: 18px; stroke: var(--emerald); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; min-width: 18px; } .fp-spec-val { font-weight: 600; color: var(--charcoal); display: block; } .fp-card-best { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--emerald); font-weight: 500; } .fp-card-best svg { width: 15px; height: 15px; stroke: var(--gold); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .fp-card-cta { align-self: flex-start; padding: .8rem 2rem; font-size: .8rem; } /* Fleet Card Cross-Links */ .fp-card-links { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; } .fp-card-route { padding: .65rem 1.4rem; font-size: .72rem; border-color: var(--mist); color: var(--pine); } .fp-card-route svg { stroke: var(--pine); fill: none; stroke-width: 2; width: 15px; height: 15px; } .fp-card-route:hover { border-color: var(--pine); background: var(--pine); color: var(--gold); } .fp-card-route:hover svg { stroke: var(--gold); } /* Need Help Section */ .fp-help { background: var(--pine-deep); padding: 3.5rem 3rem; } .fp-help-content { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; gap: 2rem; } .fp-help-icon { width: 64px; height: 64px; min-width: 64px; background: rgba(200, 164, 78, .1); border: 1px solid rgba(200, 164, 78, .2); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .fp-help-icon svg { width: 28px; height: 28px; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .fp-help h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: #fff; font-weight: 700; margin-bottom: .4rem; } .fp-help p { font-size: .9rem; color: rgba(255,255,255,.6); line-height: 1.6; font-weight: 300; } .fp-help-btns { display: flex; gap: .8rem; margin-left: auto; flex-shrink: 0; } .fp-help-call { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.8); } .fp-help-call svg { stroke: rgba(255,255,255,.8); } .fp-help-call:hover { border-color: var(--gold); color: var(--gold); } .fp-help-call:hover svg { stroke: var(--gold); } /* ========== Destinations Page ========== */ .dp-grid { display: flex; flex-direction: column; gap: 2.5rem; max-width: 1000px; margin: 0 auto; } .dp-card { display: grid; grid-template-columns: 400px 1fr; background: #fff; border-radius: 6px; overflow: hidden; border: 1px solid var(--mist); transition: all .5s cubic-bezier(.22, 1, .36, 1); } .dp-card:hover { box-shadow: 0 20px 50px rgba(0, 0, 0, .1); transform: translateY(-4px); } .dp-card-img { position: relative; min-height: 320px; overflow: hidden; } .dp-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; } .dp-card:hover .dp-card-img img { transform: scale(1.05); } .dp-card-img-gradient { display: flex; align-items: center; justify-content: center; } .dp-card-tag { position: absolute; top: 1rem; left: 1rem; background: var(--gold); color: var(--pine-deep); padding: .3rem .8rem; font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 2px; z-index: 2; } .dp-card-body { padding: 2rem 2.5rem; display: flex; flex-direction: column; } .dp-card-name { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 900; color: var(--pine-deep); margin-bottom: .2rem; } .dp-card-tagline { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--emerald); margin-bottom: 1rem; } .dp-card-desc { font-size: .9rem; color: var(--slate); line-height: 1.75; margin-bottom: 1.2rem; font-weight: 300; } .dp-card-meta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.2rem; } .dp-meta { display: flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--slate); font-weight: 500; } .dp-meta svg { width: 14px; height: 14px; stroke: var(--emerald); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .dp-card-highlights { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; } .dp-card-highlights span { background: rgba(26, 60, 42, .06); border: 1px solid rgba(26, 60, 42, .12); padding: .3rem .8rem; font-size: .72rem; font-weight: 500; color: var(--pine); border-radius: 2px; } .dp-card-cta { margin-top: auto; align-self: flex-start; } /* Destination Card Cross-Links */ .dp-card-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; } .dp-card-fleet { padding: .7rem 1.5rem; font-size: .75rem; border-color: var(--mist); color: var(--pine); } .dp-card-fleet svg { stroke: var(--pine); fill: none; stroke-width: 2; width: 15px; height: 15px; } .dp-card-fleet:hover { border-color: var(--pine); background: var(--pine); color: var(--gold); } .dp-card-fleet:hover svg { stroke: var(--gold); } .dp-grid .dp-card.reveal:nth-child(odd) { transition-delay: 0s; } .dp-grid .dp-card.reveal:nth-child(even) { transition-delay: .1s; } /* Routes */ .route-grid { display: flex; flex-direction: column; gap: 1rem; max-width: 800px; margin: 0 auto; } .route-card { display: flex; align-items: center; gap: 1.5rem; background: rgba(255, 255, 255, .04); border: 1px solid rgba(200, 164, 78, .12); border-radius: 4px; padding: 1.5rem 2rem; transition: all .4s cubic-bezier(.22, 1, .36, 1); } .route-card:hover { border-color: var(--gold); background: rgba(200, 164, 78, .06); transform: translateX(6px); } .route-stops { display: flex; align-items: center; gap: 0; min-width: 80px; justify-content: center; } .route-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); flex-shrink: 0; } .route-line { width: 16px; height: 2px; background: rgba(200, 164, 78, .3); flex-shrink: 0; } .route-body { flex: 1; } .route-name { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 700; color: #fff; margin-bottom: .3rem; } .route-path { font-size: .85rem; color: rgba(255, 255, 255, .6); margin-bottom: .4rem; font-weight: 300; } .route-info { display: flex; align-items: center; gap: .4rem; font-size: .75rem; color: rgba(255, 255, 255, .4); font-weight: 500; } .route-info svg { width: 13px; height: 13px; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-left: .6rem; } .route-info svg:first-child { margin-left: 0; } .route-cta { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; background: rgba(200, 164, 78, .1); border: 1px solid rgba(200, 164, 78, .2); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all .3s; } .route-cta svg { width: 18px; height: 18px; stroke: var(--gold); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .route-cta:hover { background: var(--gold); border-color: var(--gold); } .route-cta:hover svg { stroke: var(--pine-deep); } .route-grid .route-card.reveal:nth-child(1) { transition-delay: 0s; } .route-grid .route-card.reveal:nth-child(2) { transition-delay: .08s; } .route-grid .route-card.reveal:nth-child(3) { transition-delay: .16s; } .route-grid .route-card.reveal:nth-child(4) { transition-delay: .24s; } /* ========== Responsive ========== */ @media (max-width: 1024px) { .hero-vehicle { width: 380px; } .hero-inner { gap: 2rem; } .dest-grid { grid-template-columns: 1fr 1fr; } .dcard:first-child { grid-row: span 1; } .footer-top { grid-template-columns: 1fr 1fr; } .fleet-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .why-grid { grid-template-columns: repeat(2, 1fr); } .section { padding: 5rem 2rem; } .about-story { grid-template-columns: 1fr; gap: 2.5rem; } .mission-grid { grid-template-columns: repeat(2, 1fr); } .fp-card { grid-template-columns: 320px 1fr; } .fp-card-specs { grid-template-columns: repeat(2, 1fr); } .contact-channels { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .navbar { padding: 1rem 1.5rem; } .navbar.scrolled { padding: .7rem 1.5rem; } .nav-logo-img { height: 65px; } /* ===== Mobile Sidebar ===== */ .nav-links { position: fixed; top: 0; right: 0; width: 300px; max-width: 82vw; height: 100vh; height: 100dvh; display: flex; flex-direction: column; align-items: stretch; padding: 0; gap: 0; background: var(--pine-deep); background-image: linear-gradient(180deg, rgba(200, 164, 78, .03) 0%, transparent 40%); border-left: 1px solid rgba(200, 164, 78, .12); box-shadow: -20px 0 60px rgba(0, 0, 0, .5); overflow-y: auto; overscroll-behavior: contain; z-index: 1001; transform: translateX(100%); visibility: hidden; transition: transform .4s cubic-bezier(.32, .72, 0, 1), visibility .4s; } .nav-links.open { transform: translateX(0); visibility: visible; } .nav-links li { list-style: none; } /* Sidebar header */ .nav-mob-header { display: flex !important; align-items: center; justify-content: space-between; padding: 1.2rem 1.5rem; border-bottom: 1px solid rgba(200, 164, 78, .1); flex-shrink: 0; } .nav-mob-logo { height: 48px; width: auto; object-fit: contain; } .nav-mob-close { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; color: rgba(255, 255, 255, .5); cursor: pointer; transition: all .2s; } .nav-mob-close:hover { background: rgba(255, 255, 255, .1); color: var(--gold); border-color: rgba(200, 164, 78, .25); } /* Sidebar nav links */ .nav-links > li:not(.nav-mob-header):not(.nav-mob-cta-wrap):not(.nav-mob-footer) { border-bottom: 1px solid rgba(255, 255, 255, .04); } .nav-links a { font-size: .9rem; font-weight: 500; letter-spacing: .06em; display: flex; align-items: center; gap: .75rem; padding: .95rem 1.5rem; color: rgba(255, 255, 255, .75); transition: all .2s; position: relative; } .nav-links a::after { display: none !important; } .nav-links a::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px; background: var(--gold); border-radius: 0 3px 3px 0; opacity: 0; transform: scaleY(0); transition: all .2s; } .nav-links a:hover { background: rgba(200, 164, 78, .06); color: var(--gold-light); padding-left: 1.7rem; } .nav-links a:hover::before { opacity: 1; transform: scaleY(1); } .nav-links .nav-active { color: var(--gold) !important; background: rgba(200, 164, 78, .07); font-weight: 600; } .nav-links .nav-active::before { opacity: 1; transform: scaleY(1); } /* Sidebar link icons */ .nav-mob-icon { display: inline-block !important; width: 18px; height: 18px; stroke: rgba(255, 255, 255, .3); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; transition: stroke .2s; } .nav-links a:hover .nav-mob-icon { stroke: var(--gold); } .nav-links .nav-active .nav-mob-icon { stroke: var(--gold); } /* Sidebar CTA */ .nav-mob-cta-wrap { display: block !important; padding: 1.2rem 1.5rem; margin-top: .5rem; } .nav-mob-cta-wrap .nav-cta { width: 100%; justify-content: center; padding: .9rem 1.5rem !important; font-size: .82rem !important; border-radius: 4px; gap: .5rem; letter-spacing: .08em; } /* Sidebar footer */ .nav-mob-footer { display: flex !important; flex-direction: column; gap: .5rem; padding: 1.2rem 1.5rem 1.5rem; margin-top: auto; border-top: 1px solid rgba(200, 164, 78, .08); background: rgba(0, 0, 0, .12); flex-shrink: 0; } .nav-mob-footer-label { font-size: .6rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); opacity: .5; margin-bottom: .3rem; } .nav-mob-contact { display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: rgba(255, 255, 255, .5); text-decoration: none; padding: .35rem 0; transition: color .2s; } .nav-mob-contact:hover { color: var(--gold-light); } .nav-mob-contact svg { width: 14px; height: 14px; stroke: rgba(255, 255, 255, .3); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; transition: all .2s; } .nav-mob-contact:hover svg { stroke: var(--gold); } .nav-mob-contact:first-of-type svg { fill: #25D366; stroke: none; } .nav-mob-contact:first-of-type:hover svg { fill: #2ee672; } /* Body scroll lock */ body.nav-open { overflow: hidden; } .hamburger { display: flex; } .hero { min-height: auto; height: auto; padding: 6rem 0 2.5rem; } .hero-inner { flex-direction: column; padding: 0 1.5rem; text-align: center; gap: 2rem; } .hero-content { max-width: 100%; } .hero-content::before { display: none; } .hero-badge { font-size: .65rem; padding: .35rem .8rem; letter-spacing: .12em; gap: .35rem; } .hero-vehicle { width: 85%; max-width: 340px; margin: 0 auto; } .hero-vehicle-tag { bottom: -12px; font-size: .62rem; padding: .35rem 1rem; } .hero h1 { font-size: clamp(2.2rem, 8vw, 3.5rem); margin-bottom: 1rem; } .hero p { font-size: .95rem; margin-bottom: 1.8rem; max-width: 100%; line-height: 1.65; } .hero-actions { flex-direction: column; align-items: stretch; gap: .8rem; } .hero-actions .btn { width: 100%; justify-content: center; padding: .9rem 1.5rem; } .hero-scroll { display: none; } .section { padding: 3.5rem 1.2rem; } .section-header { margin-bottom: 2.5rem; } .section-title { font-size: clamp(1.6rem, 5vw, 2.4rem); } .section-subtitle { font-size: .9rem; } .section-tag { font-size: .65rem; letter-spacing: .18em; } .section-tag::before, .section-tag::after { margin: 0 .5rem; } .stats-bar { grid-template-columns: repeat(2, 1fr); padding: 2rem 1.2rem; gap: 1.5rem; } .stat-number { font-size: 2rem; } .fleet-cats { gap: .4rem; margin-bottom: 2rem; } .fc-btn { padding: .5rem 1rem; font-size: .7rem; } .fleet-grid { grid-template-columns: 1fr 1fr; gap: 1rem; } .fcard-img { height: 180px; } .fcard-body { padding: 1.2rem; } .fcard-name { font-size: 1.1rem; margin-bottom: .6rem; } .fcard-feats { gap: .8rem; } .ff { font-size: .72rem; } .why-grid { grid-template-columns: 1fr; gap: 1.2rem; } .wcard { padding: 2rem 1.5rem; } .dest-grid { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(auto-fill, 220px); gap: 1rem; } .dcard-name { font-size: 1.2rem; } .test-text { font-size: 1rem; } .test-card { padding: 2.5rem 1.5rem; } .cta-ban { padding: 3rem 1.2rem; } .cta-ban h2 { font-size: clamp(1.5rem, 5vw, 2.2rem); } .cta-btns { flex-direction: column; align-items: center; } .cta-btns .btn { width: 100%; justify-content: center; } .dp-card { grid-template-columns: 1fr; } .dp-card-img { min-height: 240px; } .dp-card-body { padding: 1.5rem; } .dp-card-name { font-size: 1.3rem; } .route-card { padding: 1.2rem 1.5rem; gap: 1rem; } .route-stops { min-width: 60px; } .route-name { font-size: 1rem; } .contact-channels { grid-template-columns: 1fr 1fr; } .contact-grid { grid-template-columns: 1fr; } .contact-sidebar { margin-top: 1rem; } .form-row { flex-direction: column; } .contact-map iframe { height: 300px; } .footer { padding: 3rem 1.5rem 1.5rem; } .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; } .footer-brand-img { height: 90px; } .footer-desc { font-size: .82rem; } .footer-bottom { font-size: .7rem; } .fp-filter-wrap { padding: .8rem 1.2rem; top: 52px; } .fp-card { grid-template-columns: 1fr; } .fp-card-img { min-height: 220px; } .fp-card-body { padding: 1.5rem; } .fp-card-name { font-size: 1.3rem; } .fp-card-specs { grid-template-columns: repeat(2, 1fr); gap: .6rem; } .fp-help-content { flex-direction: column; text-align: center; } .fp-help-btns { margin-left: 0; flex-direction: column; width: 100%; } .fp-help-btns .btn { width: 100%; justify-content: center; } .page-hero { padding: 8rem 1.5rem 3rem; min-height: 280px; } .page-hero h1 { font-size: clamp(2rem, 6vw, 3rem); } .page-hero p { font-size: .95rem; } .about-story { grid-template-columns: 1fr; gap: 2rem; } .about-story-card { flex-direction: row; flex-wrap: wrap; gap: 1.2rem; padding: 1.5rem; } .asc-item { flex: 1 1 45%; } .mission-grid { grid-template-columns: 1fr; gap: 1.2rem; } .mcard { padding: 2rem 1.5rem; } .diff-item { padding: 1.5rem; } .diff-num { display: none; } .bm-dialog { width: 95vw; } .bm-header { padding: 1.5rem 1.5rem 1.2rem; } .bm-title { font-size: 1.3rem; } } @media (max-width: 480px) { .navbar { padding: .8rem 1rem; } .navbar.scrolled { padding: .6rem 1rem; } .nav-logo-img { height: 50px; } .nav-links { width: 280px; } .nav-mob-header { padding: 1rem 1.2rem; } .nav-mob-logo { height: 40px; } .nav-mob-close { width: 30px; height: 30px; border-radius: 6px; } .nav-links a { padding: .85rem 1.2rem; font-size: .85rem; } .nav-mob-cta-wrap { padding: 1rem 1.2rem; } .nav-mob-footer { padding: 1rem 1.2rem 1.2rem; } .nav-mob-contact { font-size: .76rem; } .hero-inner { padding: 0 1.2rem; gap: 1.8rem; } .hero { padding: 5.5rem 0 2rem; } .hero-badge { font-size: .6rem; padding: .3rem .7rem; letter-spacing: .1em; } .hero-badge svg { width: 12px; height: 12px; } .hero h1 { font-size: clamp(2rem, 9vw, 3rem); margin-bottom: .8rem; } .hero p { font-size: .88rem; margin-bottom: 1.5rem; line-height: 1.6; } .hero-vehicle { width: 80%; max-width: 300px; } .hero-vehicle-tag { font-size: .58rem; padding: .3rem .8rem; bottom: -10px; } .btn { padding: .85rem 1.5rem; font-size: .78rem; } .section { padding: 3rem 1rem; } .section-header { margin-bottom: 2rem; } .stats-bar { padding: 1.5rem 1rem; gap: 1rem; } .stat-number { font-size: 1.6rem; } .stat-label { font-size: .65rem; } .fleet-cats { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: .5rem; scrollbar-width: none; } .fleet-cats::-webkit-scrollbar { display: none; } .fc-btn { white-space: nowrap; flex-shrink: 0; } .fleet-grid { grid-template-columns: 1fr; gap: 1rem; } .fcard-img { height: 200px; } .fcard-body { padding: 1rem; } .fcard-name { font-size: 1.05rem; } .fcard-feats { gap: .6rem; margin-bottom: 1rem; } .dest-grid { grid-template-columns: 1fr; grid-template-rows: auto; } .dcard { min-height: 200px; } .dcard-ov { padding: 1.5rem; } .dcard-name { font-size: 1.1rem; } .test-card { padding: 2rem 1rem; } .test-text { font-size: .92rem; line-height: 1.7; } .test-qi svg { width: 36px; height: 36px; } .cta-ban { padding: 2.5rem 1rem; } .cta-ban p { font-size: .9rem; margin-bottom: 2rem; } .dp-card-img { min-height: 200px; } .dp-card-body { padding: 1.2rem; } .dp-card-meta { gap: .5rem; } .dp-meta { font-size: .7rem; } .dp-card-highlights span { font-size: .65rem; padding: .25rem .6rem; } .route-card { flex-direction: column; align-items: flex-start; gap: .8rem; padding: 1.2rem; } .route-stops { display: none; } .contact-channels { grid-template-columns: 1fr; } .cc-card { padding: 1.5rem 1.2rem; } .contact-map iframe { height: 250px; } .footer { padding: 2.5rem 1rem 1.5rem; } .footer-top { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; } .footer-brand { justify-content: center; } .footer-brand-img { height: 80px; } .footer-desc { margin: 0 auto; font-size: .82rem; } .footer-links { align-items: center; } .footer-bottom { font-size: .68rem; padding-top: 1.5rem; } .wa-widget { bottom: 1rem; right: 1rem; } .fwa { width: 54px; height: 54px; } .fwa-icon-wa { width: 26px; height: 26px; } .wa-bubble { width: calc(100vw - 2rem); max-width: 340px; } .fp-filter-wrap { top: 46px; padding: .6rem 1rem; } .fp-filter { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .fp-filter::-webkit-scrollbar { display: none; } .fp-filter .fc-btn { white-space: nowrap; flex-shrink: 0; } .fp-card-img { min-height: 200px; } .fp-card-body { padding: 1.2rem; } .fp-card-cta { width: 100%; justify-content: center; } .fp-card-links { flex-direction: column; } .fp-card-links .btn { width: 100%; justify-content: center; } .dp-card-actions { flex-direction: column; } .dp-card-actions .btn { width: 100%; justify-content: center; } .fp-help { padding: 2.5rem 1rem; } .page-hero { padding: 6.5rem 1rem 2rem; min-height: 220px; } .page-hero h1 { font-size: clamp(1.8rem, 7vw, 2.5rem); } .page-hero p { font-size: .88rem; } .about-story-card { flex-direction: column; } .asc-item { flex: 1 1 100%; } .diff-item { flex-direction: column; gap: 1rem; } .diff-icon { width: 48px; height: 48px; min-width: 48px; border-radius: 10px; } .bm-dialog { width: 96vw; border-radius: 6px; } .bm-header { padding: 1.2rem; } .bm-title { font-size: 1.2rem; } .bm-opt { padding: .8rem 1rem; gap: .8rem; } } @media (max-width: 360px) { .hero-inner { padding: 0 1rem; } .hero h1 { font-size: 1.8rem; } .hero-badge { font-size: .55rem; padding: .25rem .6rem; } .hero p { font-size: .84rem; } .hero-vehicle { width: 85%; } .btn { padding: .75rem 1.2rem; font-size: .75rem; } .section { padding: 2.5rem .8rem; } .stat-number { font-size: 1.4rem; } .fcard-name { font-size: 1rem; } .footer-brand-img { height: 70px; } }