/* Universal Box-Sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Body Styling */
body {
font-family: 'Inter', sans-serif;
margin-top: 80px; /* Add margin-top to body equal to navbar height */
}

/* Header/Navbar Styling */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 40px; /* Reduced vertical padding */
background-color: #fff;
border-bottom: 1px solid #eee;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Logo Styling */
.logo img {
max-width: 100px; /* Slightly reduced logo size for compactness */
height: auto;
display: block;
}

/* Navigation Links Styling (Desktop) */
.nav-links {
/* Ensure mobile-only items are hidden on desktop */
.mobile-only {
  display: none;
}
}

.main-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* Horizontal layout for main menu items */
  gap: 20px; /* Reduced space between main navigation items */
}

.main-menu > li {
  position: relative; /* For positioning dropdowns */
  padding: 0; /* No extra padding on list items */
}

.main-menu > li > a {
  text-decoration: none;
  color: #333;
  font-size: 15px; /* Slightly smaller font size */
  font-weight: 500;
  padding: 10px 0; /* Reduced vertical padding for links */
  display: block;
  transition: color 0.3s ease;
}

.main-menu > li > a:hover {
  color: #1c7d8c;
}

/* Dropdown Menu Styling */
.dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%; /* Position below the parent link */
  left: 0;
  background-color: #fff;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  min-width: 160px; /* Slightly reduced min-width for dropdown */
  border-radius: 5px;
  overflow: hidden;
  z-index: 1001;

  display: none;
  opacity: 0;
  transform: translateY(5px); /* Reduced slide effect */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.dropdown-menu li a {
  text-decoration: none;
  color: #333;
  font-size: 14px; /* Slightly smaller font size for dropdown items */
  padding: 8px 12px; /* Reduced padding for dropdown items */
  display: block;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-menu li a:hover {
  background-color: #f0f0f0;
  color: #1c7d8c;
}

/* Show dropdown on hover for desktop */
.has-dropdown:hover > .dropdown-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Navigation Actions (Login and Demo Button) - Desktop */
.nav-actions {
display: flex;
align-items: center;
gap: 15px; /* Reduced space between login link and button */
}

/* Login Link Styling */
.login {
color: #1c7d8c;
text-decoration: none;
font-size: 15px; /* Slightly smaller font size */
display: flex;
align-items: center;
gap: 6px; /* Reduced gap for arrow */
transition: color 0.3s ease;
}

.login:hover {
color: #0e5a66;
}

.arrow {
display: inline-block;
border: 2px solid #1c7d8c;
border-radius: 50%;
padding: 1px 5px; /* Reduced padding for arrow circle */
font-size: 13px; /* Slightly smaller font size for arrow */
transition: border-color 0.3s ease, color 0.3s ease;
}

.login:hover .arrow {
border-color: #0e5a66;
color: #0e5a66;
}

/* Request a Demo Button Styling */
.demo-btn {
background-color: #2E8B57;
color: #FFD700;
padding: 8px 20px; /* Reduced padding for button */
border-radius: 30px;
text-decoration: none;
font-weight: bold;
font-size: 15px; /* Slightly smaller font size */
transition: background-color 0.3s ease, color 0.3s ease;
}

.demo-btn:hover {
background-color: #246B44;
color: #FFEB99;
}

/* --- Mobile Dropdown Menu --- */

/* Hide checkbox by default */
.menu-toggle {
display: none;
}

/* Hamburger Icon Styling */
.hamburger {
display: none; /* Hidden on desktop */
flex-direction: column;
justify-content: space-between;
width: 25px; /* Slightly smaller hamburger */
height: 18px;
cursor: pointer;
z-index: 1001;
}

.hamburger-line {
width: 100%;
height: 2px; /* Thinner lines */
background-color: #333;
transition: all 0.3s ease;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
.main-menu {
  gap: 15px; /* Further reduced gap for smaller desktop screens */
}
.nav-actions {
  gap: 10px;
}
.navbar {
  padding: 10px 20px;
}
.logo img {
  max-width: 90px;
}
.main-menu > li > a, .login, .demo-btn {
  font-size: 14px;
}
.demo-btn {
  padding: 7px 18px;
}
}

@media (max-width: 768px) {
.navbar {
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px 20px; /* Keep consistent padding */
}

/* Hide desktop-only actions */
.nav-actions.desktop-only {
  display: none;
}

/* Show hamburger icon */
.hamburger {
  display: flex;
}

/* Mobile Nav Links (Dropdown) */
.nav-links {
  display: none; /* Hidden by default */
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  padding: 15px; /* Reduced padding for mobile dropdown */
  border-top: 1px solid #eee;
  z-index: 999;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
}

.main-menu {
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.main-menu > li {
  width: 100%;
  border-bottom: 1px solid #f0f0f0;
}

.main-menu > li:last-child {
  border-bottom: none;
}

.main-menu > li > a {
  padding: 12px 0; /* Reduced padding for mobile main links */
}

/* Hide desktop dropdowns on mobile */
.dropdown-menu {
  position: static;
  box-shadow: none;
  background-color: #f8f8f8;
  border-radius: 0;
  padding: 0 0 0 15px; /* Reduced indent for sub-menu items */
  display: none;
  opacity: 1;
  transform: none;
  transition: none;
}

.dropdown-menu li a {
  padding: 8px 0; /* Reduced padding for sub-menu links */
  font-size: 13px;
}

/* Show mobile-only actions within the dropdown */
.nav-links .mobile-only {
  display: block;
  width: 100%;
  margin-top: 10px; /* Reduced space */
}

.nav-links .mobile-only a {
  width: 100%;
  text-align: center;
  padding: 10px 0; /* Reduced padding for full-width buttons */
}

/* When checkbox is checked, show nav links */
.menu-toggle:checked + .hamburger + .nav-links {
  display: flex;
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Hamburger animation when menu is open */
.menu-toggle:checked + .hamburger .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg); /* Adjusted transform for thinner lines */
}
.menu-toggle:checked + .hamburger .hamburger-line:nth-child(2) {
  opacity: 0;
}
.menu-toggle:checked + .hamburger .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg); /* Adjusted transform for thinner lines */
}

body {
  margin-top: 60px; /* Adjusted margin-top for the body to match reduced header height */
}
}

@media (max-width: 480px) {
.logo img {
  max-width: 80px; /* Even smaller logo */
}
.main-menu > li > a, .dropdown-menu li a, .login, .demo-btn {
  font-size: 12px; /* Even smaller font size */
}
.demo-btn {
  padding: 6px 15px;
}
}
/* Common container for content centering (if used for other sections) */
.container {
max-width: 1000px; /* Adjust as needed for content width */
margin: 0 auto; /* Centers the container */
padding: 0 20px; /* Adds horizontal padding */
box-sizing: border-box;
}

/* Hero Benefit Section Styling */
.hero-benefit-section {
background-color: #fff; /* White background as in the image */
padding: 100px 0; /* Vertical padding */
text-align: center; /* Center align text and buttons */
}

.hero-benefit-section h1 {
font-size: 3.5em; /* Large, bold heading */
font-weight: 700; /* Bold */
color: #333; /* Dark text */
margin-bottom: 25px;
line-height: 1.2;
}

.hero-benefit-section p {
font-size: 1.2em; /* Slightly larger paragraph text */
color: #555; /* Medium gray text */
margin-bottom: 40px;
line-height: 1.5;
}

.hero-actions {
display: flex;
justify-content: center; /* Center the buttons */
align-items: center;
gap: 20px; /* Space between buttons */
flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

.btn-request-quote {
background-color: #2E8B57; /* Dark Green from your logo */
color: #FFD700; /* Yellow from your logo */
padding: 15px 30px;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
font-size: 1.1em;
transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-request-quote:hover {
background-color: #246B44; /* Darker green on hover */
color: #FFEB99; /* Lighter yellow on hover */
}

.btn-take-tour {
color: #1c7d8c; /* Teal/Blue from the original image for consistency with Lyra branding */
text-decoration: none;
font-weight: 600;
font-size: 1.1em;
display: flex;
align-items: center;
gap: 10px;
transition: color 0.3s ease;
}

.btn-take-tour:hover {
color: #0e5a66; /* Darker teal/blue on hover */
}

.arrow-circle {
display: inline-flex; /* Use inline-flex to center content */
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
border: 2px solid #1c7d8c; /* Teal/Blue border */
border-radius: 50%;
font-size: 1.2em;
font-weight: bold;
transition: border-color 0.3s ease, color 0.3s ease;
}

.btn-take-tour:hover .arrow-circle {
border-color: #0e5a66; /* Darker teal/blue border on hover */
color: #0e5a66; /* Darker teal/blue text on hover */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
.hero-benefit-section h1 {
    font-size: 2.5em;
}
.hero-benefit-section p {
    font-size: 1em;
}
.hero-actions {
    flex-direction: column; /* Stack buttons vertically */
    gap: 15px;
}
.btn-request-quote, .btn-take-tour {
    width: 80%; /* Make buttons wider */
    max-width: 300px; /* Limit max width */
    text-align: center;
}
}

@media (max-width: 480px) {
.hero-benefit-section h1 {
    font-size: 2em;
}
.hero-benefit-section p {
    font-size: 0.9em;
}
.btn-request-quote, .btn-take-tour {
    width: 90%;
}
}

/* Full Width Image Section Styling */
.full-width-image-section {
width: 100%; /* Ensures the section takes full width */
overflow: hidden; /* Important to prevent horizontal scroll if image is wider */
margin: 60px 0; /* Add some vertical margin above/below the section */
padding: 0; /* Ensure no padding from the section itself */
}

.full-width-image-section img {
display: block; /* Removes extra space below the image */
width: 100%; /* Makes the image take 100% width of its parent (.full-width-image-section) */
height: auto; /* Maintains the image's aspect ratio */
object-fit: cover; /* Ensures the image covers the area, cropping if necessary */
/* object-position: center; */ /* Optional: Centers the image within its box if object-fit is used */
}

/* Hero Section V2 (More Good Days) Styling */
.hero-section-v2 {
display: flex;
flex-direction: row; /* Default for desktop: two columns */
width: 100%; /* Use 100% of the width */
max-width: 1200px; /* Max width for the entire section, adjust as needed */
height: 400px; /* Fixed height for the section, adjust as needed */
border-radius: 20px; /* Rounded corners for the entire section */
overflow: hidden; /* Ensures content stays within rounded corners */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Subtle shadow */
margin: 50px auto; /* Center the section and add vertical margin */
}

.hero-content-v2 {
flex: 1; /* Takes up 50% of the width */
background-color: #308d50; /* Dark Green as requested */
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start; /* Align text to the left */
padding: 40px 60px; /* Padding inside the content box */
color: #fff; /* White text color */
text-align: left; /* Ensure text alignment */
}

.hero-content-v2 h1 {
font-size: 3.2em; /* Large font size for the heading */
line-height: 1.2;
margin-bottom: 30px; /* Space below the heading */
font-weight: 600; /* Semi-bold */
color: #fff; /* White text color */
}

.get-started-button-v2 {
background-color: #FFD700; /* Yellow button */
color: #333; /* Dark text for contrast */
border: none;
border-radius: 30px; /* More rounded button */
padding: 18px 40px;
font-size: 1.1em;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}

.get-started-button-v2:hover {
background-color: #e6c200; /* Slightly darker yellow on hover */
transform: translateY(-2px);
}

.hero-image-placeholder-v2 {
flex: 1; /* Takes up 50% of the width */
background-color: #fff; /* Fallback white background */
/* Set the image as a background for this div */
background-image: url('path/to/your/image-with-people-and-window.jpg'); /* REPLACE THIS WITH YOUR ACTUAL IMAGE PATH */
background-size: cover; /* Ensures the image covers the entire div */
background-position: center; /* Centers the image within the div */
background-repeat: no-repeat;
}

/* --- Animations (re-applied to new classes) --- */

/* Keyframes for slide-up and fade-in */
@keyframes slideInUp {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

@keyframes fadeInScale {
from {
    opacity: 0;
    transform: scale(0.9);
}
to {
    opacity: 1;
    transform: scale(1);
}
}

/* Apply animations to text elements */
.hero-content-v2 h1.animated-text {
opacity: 0; /* Start hidden */
animation: slideInUp 0.8s ease-out forwards; /* Apply animation */
}

/* Apply animation to button */
.get-started-button-v2.animated-button {
opacity: 0; /* Start hidden */
animation: fadeInScale 0.8s ease-out forwards; /* Apply animation */
animation-delay: 0.3s; /* Start after heading */
}

/* Responsive adjustments */
@media (max-width: 900px) {
.hero-section-v2 {
    flex-direction: column; /* Stack content and image vertically */
    height: auto; /* Allow height to adjust */
    border-radius: 15px;
}

.hero-content-v2 {
    padding: 40px;
    align-items: center; /* Center text on smaller screens */
    text-align: center;
}

.hero-content-v2 h1 {
    font-size: 2.5em;
}

.hero-image-placeholder-v2 {
    min-height: 200px; /* Ensure placeholder has some height */
}
}

@media (max-width: 600px) {
.hero-content-v2 {
    padding: 30px 20px;
}

.hero-content-v2 h1 {
    font-size: 2em;
}

.get-started-button-v2 {
    padding: 15px 30px;
    font-size: 1em;
}

.hero-image-placeholder-v2 {
    min-height: 150px;
}
}

.container {
max-width: 1000px; /* Adjust as needed for content width */
margin: 0 auto; /* Centers the container */
padding: 0 20px; /* Adds horizontal padding */
box-sizing: border-box;
}

/* Help Section Styling */
.help-section {
background-color: #f8f8f8; /* Light background similar to the original image */
padding: 80px 0; /* Vertical padding */
text-align: center;
}

.help-section .header {
margin-bottom: 50px;
position: relative;
display: inline-block; /* To center the shape and text together */
}

.help-section .header-shape {
width: 80px;
height: 40px;
background-color: #FFD700; /* Yellow from your logo */
border-radius: 0 0 40px 40px; /* Half-circle shape */
position: absolute;
top: -20px; /* Adjust to position above the text */
left: 50%;
transform: translateX(-50%);
z-index: 0;
}

.help-section .header h1 {
font-size: 2.5em;
color: #333;
margin: 0;
position: relative;
z-index: 1;
}

.help-section .cards-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px; /* Space between cards */
}

.help-section .card {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
padding: 30px;
width: 280px; /* Fixed width for cards */
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform 0.2s ease-in-out;
}

.help-section .card:hover {
transform: translateY(-5px);
}

.help-section .icon-container {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}

.help-section .card h2 {
font-size: 1.5em;
color: #333;
margin-bottom: 15px;
}

.help-section .learn-more {
color: #2E8B57; /* Dark Green from your logo */
text-decoration: none;
font-weight: 600;
position: relative;
padding-bottom: 3px;
}

.help-section .learn-more::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: #2E8B57; /* Dark Green underline */
transform: scaleX(1);
transition: transform 0.3s ease-in-out;
}

.help-section .learn-more:hover::after {
transform: scaleX(0.8);
}

/* Responsive adjustments */
@media (max-width: 900px) {
.help-section .cards-wrapper {
    flex-direction: column;
    align-items: center;
}
.help-section .card {
    width: 80%;
    max-width: 350px;
}
}

@media (max-width: 600px) {
.help-section .header h1 {
    font-size: 2em;
}
.help-section .card {
    padding: 25px;
}
}

.hero-section {
display: flex;
flex-direction: row; /* Default for desktop: content on left, image on right */
width: 100%;
max-width: 1200px; /* Max width for the entire section */
height: 500px; /* Fixed height for the section */
border-radius: 20px; /* Rounded corners for the entire section */
overflow: hidden; /* Ensures content and image stay within rounded corners */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.hero-content {
flex: 1; /* Takes up available space */
background-color: #9ACD32; /* Green background for the content side */
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start; /* Align text to the left */
padding: 40px 60px; /* Padding inside the content box */
color: #fff; /* White text color */
text-align: left; /* Ensure text alignment */
}

.hero-content h1 {
font-size: 3.2em; /* Large font size for the heading */
line-height: 1.2;
margin-bottom: 30px; /* Space below the heading */
font-weight: 600; /* Semi-bold */
}

.get-started-button {
background-color: #FFD700; /* Yellow button */
color: #333; /* Dark text for contrast */
border: none;
border-radius: 30px; /* More rounded button */
padding: 18px 40px;
font-size: 1.1em;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}

.get-started-button:hover {
background-color: #e6c200; /* Slightly darker yellow on hover */
transform: translateY(-2px);
}

.hero-image {
flex: 1; /* Takes up available space */
background-image: url('https://via.placeholder.com/600x500/FFD700/9ACD32?text=Image+Placeholder'); /* Placeholder image */
/* IMPORTANT: Replace the placeholder URL above with the actual image URL */
background-size: cover; /* Cover the entire area */
background-position: center; /* Center the image */
background-repeat: no-repeat;
}
.trusted-companies-section {
width: 100%;
max-width: 1200px; /* Max width for the entire section */
padding: 60px 20px;
text-align: center;
margin-top: 50px; /* Space from previous section */
margin-bottom: 50px;
}

.trusted-companies-section h2 {
font-size: 2.5em;
color: #333;
margin-bottom: 40px;
}

.logos-container {
background-color: #fff; /* White background for the logo box */
border-radius: 20px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* Subtle shadow */
padding: 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid */
gap: 30px; /* Space between logo cards */
justify-items: center; /* Center items within their grid cells */
align-items: center; /* Vertically center items within their grid cells */
}

.logo-card {
display: flex;
justify-content: center;
align-items: center;
height: 80px; /* Fixed height for logo display area */
/* You can add a border or background here if you want each logo to have its own box */
/* border: 1px solid #eee; */
/* border-radius: 10px; */
}

/* Styling for placeholder text logos - in a real scenario, these would be images */
.logo-text {
font-size: 1.8em;
font-weight: 600;
line-height: 1;
white-space: nowrap; /* Prevent text from wrapping */
}

.logo-text.zoom { color: #0B5CFF; } /* Blue */
.logo-text.lululemon { color: #E60023; } /* Red */
.logo-text.surveymonkey { color: #8DC63F; font-size: 1.6em; } /* Green */
.logo-text.morgan-stanley { color: #333; font-size: 1.5em; } /* Dark Gray */
.logo-text.vca { color: #003366; font-size: 1.5em; } /* Dark Blue */
.logo-text .vca-sub { font-size: 0.6em; display: block; margin-top: 2px; color: #666; }

.logo-text.genentech { color: #00509F; font-size: 1.5em; } /* Blue */
.logo-text .genentech-sub { font-size: 0.6em; display: block; margin-top: 2px; color: #666; }

.logo-text.mccarthy { color: #E4002B; font-size: 1.8em; } /* Red */
/* For McCarthy, if you had the hard hat icon, you'd use an img tag */

.logo-text.jedunn { color: #0056B8; font-size: 1.5em; } /* Blue */
.logo-text .jedunn-sub { font-size: 0.6em; display: block; margin-top: 2px; color: #666; }

/* Responsive adjustments */
@media (max-width: 768px) {
.logos-container {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* More columns on smaller screens */
    padding: 30px;
    gap: 20px;
}
.trusted-companies-section h2 {
    font-size: 2em;
}
.logo-text {
    font-size: 1.5em;
}
}

@media (max-width: 480px) {
.logos-container {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Even more columns or single column */
    padding: 20px;
    gap: 15px;
}
.trusted-companies-section h2 {
    font-size: 1.8em;
}
.logo-text {
    font-size: 1.2em;
}
}
.main-footer {
background-color: #F8F8F8; /* Light background similar to the image */
color: #333; /* Dark text for readability */
padding: 60px 20px;
width: 100%;
box-sizing: border-box;
margin-top: 80px; /* Space above the footer */
}

.footer-container {
max-width: 1200px;
margin: 0 auto; /* Center the footer content */
display: flex;
flex-direction: column;
gap: 40px; /* Space between main footer sections */
}

.footer-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Responsive grid for columns */
gap: 30px; /* Space between columns */
text-align: left;
}

.footer-column .column-title {
font-weight: 600; /* Semi-bold for column titles */
color: #555; /* Slightly lighter gray for titles as in image */
margin-bottom: 15px;
font-size: 1em;
}

.footer-column ul {
list-style: none;
padding: 0;
margin: 0;
}

.footer-column ul li {
margin-bottom: 10px;
}

.footer-column ul li a {
text-decoration: none;
color: #333; /* Dark text for links */
font-size: 0.95em;
transition: color 0.2s ease;
}

.footer-column ul li a:hover {
color: #2E8B57; /* Dark Green from your logo on hover */
}

.footer-bottom {
display: flex;
justify-content: space-between;
align-items: flex-end; /* Align social media and app badges to the bottom */
flex-wrap: wrap; /* Allow wrapping on smaller screens */
gap: 20px; /* Space between social and app badges */
padding-top: 20px;
border-top: 1px solid rgba(0, 0, 0, 0.1); /* Subtle separator */
}

.social-media {
display: flex;
gap: 20px;
font-size: 1.5em; /* Size for placeholder text icons */
font-weight: 600;
}

.social-icon {
text-decoration: none;
color: #1c7d8c; /* Teal/Blue for social icons, as seen in original image */
transition: color 0.2s ease;
}

.social-icon:hover {
color: #FFD700; /* Yellow from your logo on hover for social icons */
}

.app-badges {
display: flex;
gap: 15px;
}

.app-badges img {
height: 40px; /* Fixed height for app badges */
width: auto;
transition: transform 0.2s ease;
}

.app-badges img:hover {
transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
.footer-links {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Adjust columns for smaller screens */
    gap: 20px;
}

.footer-bottom {
    flex-direction: column; /* Stack social and app badges */
    align-items: center; /* Center them when stacked */
    text-align: center;
}

.social-media {
    margin-bottom: 15px;
}
}

@media (max-width: 480px) {
.footer-links {
    grid-template-columns: 1fr; /* Single column on very small screens */
}
.footer-column ul {
    margin-bottom: 20px; /* Add space between stacked columns */
}
.footer-column:last-child ul {
    margin-bottom: 0;
}
}