 :root {
     --primary: #e63946;
     --dark: #0f172a;
 }

 body {
     font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     scroll-behavior: smooth;
 }

 .navbar-brand img {
     height: 40px;
 }

 .btn-primary {
     background: var(--primary);
     border-color: var(--primary);
 }

 .btn-primary:hover {
     background: #c51f30;
     border-color: #c51f30;
 }

 .hero {
     padding: 6rem 0 4rem;
     background: radial-gradient(circle at top left, #fee2e2, #ffffff);
 }

 .hero-tag {
     font-size: .85rem;
     text-transform: uppercase;
     letter-spacing: .12em;
     color: var(--primary);
     font-weight: 600;
 }

 .section-title span {
     font-size: .8rem;
     text-transform: uppercase;
     letter-spacing: .12em;
     color: var(--primary);
     font-weight: 600;
 }

 .section-title h2 {
     font-size: 1.8rem;
     font-weight: 700;
     margin-top: .3rem;
 }

 .fare-card img,
 .tour-card img {
     height: 180px;
     object-fit: cover;
     border-radius: .75rem .75rem 0 0;
 }

 .fare-price {
     position: absolute;
     top: .75rem;
     right: .75rem;
     background: rgba(15, 23, 42, .9);
     color: #fff;
     padding: .3rem .7rem;
     border-radius: 999px;
     font-size: .8rem;
 }

 .feature-icon {
     width: 40px;
     height: 40px;
     border-radius: 999px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: #fee2e2;
     color: var(--primary);
     margin-bottom: .75rem;
 }

 .bg-soft {
     background: #f9fafb;
 }

 footer {
     background: #020617;
     color: #e5e7eb;
     padding: 3rem 0 2rem;
 }

 footer a {
     color: #9ca3af;
     text-decoration: none;
 }

 footer a:hover {
     color: #fff;
 }

 /* Floating buttons */
 .floating-buttons {
     position: fixed;
     right: 20px;
     bottom: 20px;
     display: flex;
     flex-direction: column;
     gap: 10px;
     z-index: 1050;
 }

 .floating-buttons a,
 .floating-buttons button {
     width: 48px;
     height: 48px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     border: none;
     background: #25d366;
     color: #fff;
     box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
     cursor: pointer;
 }

 .floating-buttons button {
     background: #0f172a;
 }

 .floating-buttons a:hover {
     background: #1ebe5d;
 }

 .floating-buttons button:hover {
     background: #020617;
 }

 main {
     margin-top: 3rem;
 }