/* ===================================================================== FlyYatra Holidays - Shared footer styles --------------------------------------------------------------------- Every page carries the same footer markup, so the layout lives in one file instead of being copy-pasted into each page stylesheet. This file is linked LAST in every , so it is the final word on the footer and does not disturb anything else on the page. Two things it adds on top of the old footer: 1. A white rounded card behind the logo, so the brand mark reads properly against the dark blue background. 2. A six-column link layout (Explore / Destinations / Packages / Bookings / Contact) that collapses cleanly on tablets and phones. ===================================================================== */ /* --------------------------------------------------------------------- LAYOUT The page stylesheets set .footer-container to flex; grid wins here because these selectors are more specific, so the old flex sizing on the columns is neutralised right below. --------------------------------------------------------------------- */ .main-footer .footer-container { display: grid; grid-template-columns: 1.7fr 1fr 1.15fr 1.25fr 1.05fr 1.5fr; gap: 34px 30px; align-items: start; max-width: 1300px; margin: 0 auto; text-align: left; } .main-footer .footer-logo, .main-footer .footer-links, .main-footer .footer-contact { flex: none; min-width: 0; } /* --------------------------------------------------------------------- BRAND COLUMN - white shape behind the logo --------------------------------------------------------------------- */ .main-footer .footer-logo-badge { display: inline-block; background: #ffffff; padding: 12px 18px; border-radius: 14px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28); margin-bottom: 18px; line-height: 0; } .main-footer .footer-logo-badge img { display: block; height: 52px; width: auto; margin: 0; } .main-footer .footer-logo p { font-size: 0.97rem; line-height: 1.65; color: #e6ecf3; margin-bottom: 10px; } .main-footer .footer-note { font-size: 0.87rem; color: #b9c6d6; } /* --------------------------------------------------------------------- COLUMN HEADINGS --------------------------------------------------------------------- */ .main-footer .footer-links h3, .main-footer .footer-contact h3 { position: relative; font-size: 1.06rem; color: #ffffff; margin-bottom: 16px; padding-bottom: 9px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); } .main-footer .footer-links h3::after, .main-footer .footer-contact h3::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 44px; height: 3px; border-radius: 3px; background: #ff5252; } /* --------------------------------------------------------------------- LINK LISTS --------------------------------------------------------------------- */ .main-footer .footer-links ul { list-style: none; margin: 0; padding: 0; } .main-footer .footer-links ul li { margin-bottom: 9px; } .main-footer .footer-links ul li a { display: inline-block; padding: 0; font-size: 0.95rem; line-height: 1.45; color: #dbe4ee; text-decoration: none; transition: color 0.25s ease, transform 0.25s ease; } .main-footer .footer-links ul li a:hover { color: #ffffff; transform: translateX(4px); } /* --------------------------------------------------------------------- CONTACT COLUMN --------------------------------------------------------------------- */ .main-footer .footer-contact p { font-size: 0.95rem; line-height: 1.6; color: #dbe4ee; margin-bottom: 10px; } .main-footer .footer-contact a { color: #dbe4ee; text-decoration: none; transition: color 0.25s ease; } .main-footer .footer-contact a:hover { color: #ffffff; text-decoration: underline; } /* --------------------------------------------------------------------- SOCIAL ICONS --------------------------------------------------------------------- */ .main-footer .social-media-wrapper { max-width: 1300px; margin: 34px auto 0; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.15); } .main-footer .social-media { gap: 14px; flex-wrap: wrap; justify-content: center; } .main-footer .social-media a { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; color: #ffffff; background: rgba(255, 255, 255, 0.10); transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; } .main-footer .social-media a:hover { background: #ffffff; color: #003264; transform: translateY(-3px); } /* --------------------------------------------------------------------- LEGAL ROW + COPYRIGHT --------------------------------------------------------------------- */ .main-footer .footer-legal { max-width: 1300px; margin: 22px auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; font-size: 0.9rem; } .main-footer .footer-legal a { color: #dbe4ee; text-decoration: none; transition: color 0.25s ease; } .main-footer .footer-legal a:hover { color: #ffffff; text-decoration: underline; } .main-footer .footer-legal span { color: rgba(255, 255, 255, 0.35); } .main-footer .footer-bottom { max-width: 1300px; margin: 20px auto 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.15); text-align: center; font-size: 0.9rem; color: #b9c6d6; } /* --------------------------------------------------------------------- RESPONSIVE --------------------------------------------------------------------- */ @media (max-width: 1200px) { .main-footer .footer-container { grid-template-columns: repeat(3, 1fr); gap: 30px 26px; } } @media (max-width: 900px) { .main-footer .footer-container { grid-template-columns: repeat(2, 1fr); } /* The brand block reads better full width once there are only 2 columns */ .main-footer .footer-logo { grid-column: 1 / -1; } } @media (max-width: 560px) { /* * Six stacked blocks would make the footer taller than the phone screen * several times over, so the four link lists pair up two-per-row and only * the brand and contact blocks keep the full width. */ .main-footer .footer-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; } .main-footer .footer-logo, .main-footer .footer-contact { grid-column: 1 / -1; } .main-footer .footer-links ul li a { font-size: 0.9rem; } .main-footer .footer-logo-badge { padding: 10px 14px; } .main-footer .footer-logo-badge img { height: 44px; } .main-footer .social-media a { width: 38px; height: 38px; } .main-footer .footer-legal { gap: 8px; font-size: 0.86rem; } }