/* Custom overrides for Secure Tax Files */

/* Ensure no white space appears above the header by resetting margin */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  /* Prevent horizontal scrolling on small screens */
  max-width: 100%;
  overflow-x: hidden;
}

/*
  These overrides address several usability issues identified in the
  original design without altering page content.  We remove the subtle
  shadow and border between the topbar and main header that created a
  distracting white line, ensure the logo remains crisp on high‑DPI
  devices by constraining its height, and provide a hook for future
  enhancements.  Additional styles can be added here as needed.
*/

/* Remove the dividing line/gap between the topbar and header */
.topbar,
header.main-header {
  border-bottom: none !important;
}

/* Flatten the header so it sits flush with the topbar */
header.main-header {
  box-shadow: none !important;
  margin-top: 0 !important;
}

/* Ensure the brand logo displays clearly on high‑resolution screens.
 * Use a larger max height and apply image-rendering hints so the
 * vector logo remains crisp on Retina/HiDPI displays.  The auto
 * width preserves aspect ratio across device sizes.  Increase
 * max-height slightly from 48px to 60px for better visibility on
 * small screens.
 */
header.main-header .brand img {
  max-height: 60px;
  height: 3rem;
  width: auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Enhance the popup styling without altering its content.  Add a
 * slight backdrop blur to soften the underlying page, increase the
 * border radius and shadow on the popup card, and adjust the
 * headline size for improved readability.  These overrides use
 * !important to ensure they apply over existing rules in
 * overrides.css.
 */
.popup-overlay {
  backdrop-filter: blur(2px);
}
.popup-content {
  border-radius: 0.9rem !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15) !important;
}
.popup-content h2 {
  font-size: 1.6rem;
  line-height: 1.3;
}

/* ------------------------------------------------------------------ */
/* Header & Hero redesign to match the provided screenshot
 *
 * These styles adjust the notification bar, topbar, navigation menu
 * and hero section to more closely align with the design shown in
 * the reference images.  The notification bar becomes a bold
 * orange band across the top, the contact bar (topbar) is kept
 * clean on a light background, and the navigation items are
 * simplified with subtle active-state styling.  A card component
 * summarises the current tax season and is displayed alongside
 * the hero copy on larger screens.
 */

/* Notification bar: prominent orange band with centered white text */
.notification-bar {
  background-color: #f6682f;
  color: #fff;
  font-weight: 600;
  text-align: center;
  padding: 0.35rem 0;
  font-size: 0.85rem;
}
.notification-bar .scrolling-text {
  white-space: nowrap;
  display: inline-block;
  animation: none;
}

/* Topbar: light background, dark text and icons */
.topbar {
  background: #ffffff;
  color: #0f172a;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}
.topbar .contact a {
  color: inherit;
  font-size: 0.85rem;
  font-weight: 500;
}
.topbar .cta a {
  color: #f6682f;
  font-weight: 600;
}

/* Main navigation: remove heavy shadows and add subtle active state */
header.main-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}
header.main-header nav.primary a {
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  margin: 0 0.25rem;
  font-weight: 500;
  color: #374151;
}
header.main-header nav.primary a.active,
header.main-header nav.primary a:hover {
  background: rgba(246, 104, 47, 0.1);
  color: #d14321;
}

/* Mobile menu: full-screen overlay with centered links */
@media (max-width: 768px) {
  nav.primary {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 3000;
    padding-top: 4rem;
  }
  nav.primary.open {
    transform: translateY(0);
  }
  /* Position the menu toggle as a close icon when active */
  .menu-toggle.active {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 4000;
  }
  nav.primary a {
    font-size: 1.2rem;
    margin: 0;
    padding: 0.5rem 1rem;
    width: 100%;
    text-align: center;
  }
}

/* Hero adjustments */
section.hero {
  position: relative;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.hero .slide .content.container {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
/* Hide hero card on slides other than the first */
.hero .slide:not(:nth-child(1)) .hero-card {
  display: none;
}
/* Hero card styling */
.hero-card {
  background: #ffffff;
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  max-width: 320px;
  width: 100%;
  margin-top: 1.5rem;
  color: #0f172a;
}
.hero-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: #0f172a;
  font-weight: 700;
}
.hero-card .hero-deadline {
  font-weight: 600;
  color: #f6682f;
  margin-bottom: 0.5rem;
}
.hero-card .hero-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.hero-card .hero-list li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  color: #374151;
}
.hero-card .hero-list li::before {
  content: "✔";
  color: #f6682f;
  font-weight: 700;
}
@media (min-width: 768px) {
  /* Arrange hero content and card side-by-side on larger screens */
  .hero .slide:nth-child(1) .content.container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
  }
  .hero .slide:nth-child(1) .actions {
    margin-top: 1rem;
  }
  .hero .slide:nth-child(1) .hero-card {
    margin-top: 0;
  }
}

/*
  Override the mobile menu to slide down from the top rather than
  sliding in from the left.  This creates a modern full‑width drawer
  that covers the viewport.  We rely on the existing JavaScript to
  toggle the `open` class on nav.primary; these rules adjust the
  transform accordingly.  The nav remains full‑height and scrollable
  when open.  On larger viewports, these overrides do not apply.
*/
@media (max-width: 768px) {
  nav.primary {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: translateY(-100%) !important;
  }
  nav.primary.open {
    transform: translateY(0) !important;
  }
}

/* Announcement bar styling */
/* === Announcement Bar Styling === */
.announcement-bar {
  background: #7f7f7e;
  color: #fafafc;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 1rem;            /* vertical padding for height */
  display: flex;
  align-items: center;             /* vertical center alignment */
  justify-content: center;
  overflow: hidden;
  line-height: 0.9;
}

/* marquee inherits center alignment */
.announcement-bar marquee {
  display: block;
  width: 100%;
  white-space: nowrap;
  vertical-align: middle;
}


/* Contact bar styling */
.contact-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f7682f;
  border-bottom: 1px solid #e5e7eb;
  font-size: 1rem;
  padding: 4px 1rem;
}
.contact-bar a {
  /* Render each contact link as a flex container so the icon and
     label align neatly on the same baseline.  This prevents the
     text from drifting below or above the icon on different
     devices.  Using a small gap removes the need for manual
     margins on the icon itself. */
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #fafbfc;
  margin-right: 1rem;
  text-decoration: none;
}
.contact-bar a:last-child {
  margin-right: 0;
}
.contact-left {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}
.contact-right {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}

/* Icons in the contact bar */
.contact-bar img {
  width: 16px;
  height: 16px;
  /* Remove right margin because the parent flex gap handles spacing */
  margin-right: 0;
  vertical-align: middle;
}
.contact-bar span {
  vertical-align: middle;
}

/* Main header styling */
header.main-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}
header.main-header .head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 60px;
}
header.main-header .brand img {
  height: 52px;
  width: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}
header.main-header nav.primary {
  display: flex;
  gap: 1rem;
  font-weight: 500;
  align-items: center;
}
header.main-header nav.primary a {
  padding: 6px 4px;
  color: #0f172a;
  text-decoration: none;
}
header.main-header nav.primary a.active,
header.main-header nav.primary a:hover {
  color: #e54c2c;
  font-weight: 600;
  background: rgba(229, 76, 44, 0.1);
  border-radius: 0.375rem;
}

/* Mobile navigation */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 28px;
  height: 28px;
  position: relative;
}
.menu-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background: #0f172a;
  margin-bottom: 5px;
  transition: transform .3s ease, opacity .3s ease;
}
.menu-toggle.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 768px) {
  header.main-header nav.primary {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    background: #fff;
    flex-direction: column;
    padding-top: 80px;
    transform: translateY(-100%);
    transition: transform .4s ease;
    text-align: center;
    font-size: 1.2rem;
    overflow-y: auto;
  }

  /* Hide phone, email and WhatsApp text in contact bar on small screens */
  .contact-left a:nth-child(-n+2) span,
  .contact-right a:first-child span {
    display: none;
  }
  header.main-header nav.primary.open {
    transform: translateY(0);
    box-shadow: 0 8px 16px rgba(0,0,0,.1);
  }
  header.main-header .menu-toggle {
    display: inline-flex;
  }
  header.main-header nav.primary a {
    padding: 12px 0;
  }
}

/* Ensure hero sections begin below the new header */
body {
  scroll-padding-top: 120px;
}

/* === Dark Footer Design Overrides === */
/* Apply a dark theme footer with multiple columns and newsletter subscription. */
.site-footer {
  background-color: #08121e;
  color: #f3f4f6;
  padding: 3rem 0;
  font-size: 0.9rem;
}

.site-footer a {
  color: #cbd5e1;
  text-decoration: none;
  display: block;
  margin: 0.35rem 0;
}
.site-footer a:hover {
  color: #ffffff;
}

/* Layout the footer columns responsively */
.site-footer .footer-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.8rem;
  margin-bottom: 2rem;
}

/* Brand column styling */
.site-footer .footer-brand-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.site-footer .footer-brand-header img {
  width: 32px;
  height: 32px;
}
.site-footer .footer-brand-header span {
  font-size: 1.15rem;
  font-weight: 600;
  color: #ffffff;
}
.site-footer .footer-brand p {
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 0.8rem;
  color: #cbd5e1;
}
.site-footer .irs-badge {
  display: inline-block;
  background: #e95332;
  color: #ffffff;
  padding: 0.3rem 0.6rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}


/* Section headings within the footer */
.site-footer .links-col h4{
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
  font-weight: 600;
  color: #ffffff;
}


/* Footer bottom bar */
.site-footer .footer-bottom {
  text-align: center;
  font-size: 0.85rem;
  border-top: 1px solid #1f2b3a;
  padding-top: 1rem;
  color: #faf0e8;
}

/* Hide any legacy footers marked as old */
.site-footer.old-footer {
  display: none !important;
}

/* Override previous orange footer bottom bar */
.site-footer .footer-bottom {
  background: #f7682f !important;
}

/* === Mobile Navigation Enhancements === */
/* Give the mobile menu a card-like appearance and clearer separators. */
@media (max-width: 768px) {
  header.main-header nav.primary {
    background: none;
    border-radius: 0.5rem 0.5rem 0 0;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    padding-top: 90px;
    overflow-y: auto;
    /* Hide nav by default with slide up + fade */
    transform: translateY(-100%);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: transform .4s ease, opacity .3s ease;
  }
  header.main-header nav.primary.open {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  }
  header.main-header nav.primary a {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1.2rem;
    border-bottom: 1px solid #f3f4f6;
    text-align: center;
    color: #374151;
  }
  header.main-header nav.primary a:last-child {
    border-bottom: none;
  }
  /* Style the menu toggle (hamburger) lines to transform into an X and move to top right */
  .menu-toggle.active {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 4000;
  }
  .menu-toggle span {
    background: #0f172a;
  }
  .menu-toggle.active span {
    background: #0f172a;
  }
}

/* ------------------------------------------------------------------ */
/* Hero responsiveness adjustments
 *
 * Some users reported that the hero images appeared overly cropped
 * on large desktop screens.  The following rules increase the
 * minimum height of each hero slide and enforce a centred
 * background position across all breakpoints.  This allows more of
 * the underlying image to be visible without altering the aspect
 * ratio or design intent.  Media queries ensure appropriate
 * heights on tablets and smaller devices.
 */
@media (min-width: 769px) {
  .hero .slide {
    min-height: 70vh;
    background-position: center !important;
  }
}
@media (max-width: 768px) {
  .hero .slide {
    min-height: 60vh;
    background-position: center !important;
  }
}

/* ================================================================ */
/* Mobile menu overlay inspired by the reference GIF (A11 studio)
 * This overlay covers the entire viewport on mobile/tablet devices,
 * sliding in from the right when activated.  It contains our site
 * navigation, a close button in the top right, and a footer row
 * with WhatsApp and email contact actions.  These rules override
 * any prior mobile menu definitions.
 */
@media (max-width: 768px) {
  /* Hide the default nav on small screens; the overlay handles navigation */
  header.main-header nav.primary {
    display: none !important;
  }
  /* Ensure the menu toggle button is visible on mobile */
  header.main-header .menu-toggle {
    display: inline-flex !important;
  }
  /* Base overlay styling: offscreen to the right via transform */
  .mobile-menu-overlay {
    /* The overlay is hidden by default (see global rule below); on small screens we allow it to be flex, but it remains offscreen via transform */
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f5f4f2;
    z-index: 3000;
    transform: translateX(100%);
    transition: transform 0.45s ease;
    overflow-y: auto;
    pointer-events: none;
  }
  .mobile-menu-overlay {
  display: none;
  transform-origin: top center; /* 👈 ensures the flip starts from top */
  transform: scaleY(0);
  transition: transform 0.4s ease, opacity 0.3s ease;
  opacity: 0;
}

.mobile-menu-overlay.open {
  display: flex;
  transform: scaleY(1);   /* 👈 flips down vertically */
  opacity: 1;
}
  .mobile-menu-overlay .overlay-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    padding: 2rem 1.5rem;
  }
  .mobile-menu-overlay .menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }
  
  .mobile-menu-overlay .menu-close {
    background: #f5f4f2;
    border: none;
    color: #013064;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
  }
  .mobile-menu-overlay nav {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .mobile-menu-overlay nav a {
    color:#013064;
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .mobile-menu-overlay nav a:hover {
    color: #f6682f;
  }
  .mobile-menu-overlay .overlay-footer {
    margin-top: auto;
    display: flex;
    gap: 0.5rem;
  }
  .mobile-menu-overlay .overlay-footer a {
    flex: 0.6;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    background: #013064;
    border-radius: 0.4rem;
    color:#f06937;
    font-weight: 600;
    padding: 0.6rem;
    text-decoration: none;
  }
  .mobile-menu-overlay .overlay-footer a:hover {
    background: rgba(255,255,255,0.2);
  }
}

/* Ensure mobile menu overlay is hidden on larger screens by default.
 * We set display: none outside the mobile media query and rely
 * on the media query to show it.  When the overlay has the
 * `.open` class on mobile, it becomes visible via transform.
 */
.mobile-menu-overlay {
  display: none;
}
.mobile-menu-overlay.open {
  display: flex;
  width: 55%; 
    border-bottom-right-radius: 1rem;
  transform-origin: top center;
  transform: scaleY(1.2);
  opacity: 1;
  pointer-events: auto;
}
.menu-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 3rem;
  color: #002b5a;
  cursor: pointer;
  line-height: 1;
}


/* ==========================================================================
   Navigation enhancements

   We hide the text label on the first navigation link (Home) and replace
   it with a Font Awesome home icon.  This applies both to the desktop
   navigation bar and the mobile overlay menu.  Using text‑indent and
   overflow ensures the underlying text remains accessible to screen
   readers while visually only the icon appears.  The pseudo element
   inserts the icon centred within the link.  We also define a clear
   active state using the site’s orange colour for improved feedback.
   ========================================================================== */

/* Active menu item styling: highlight with primary colour */
nav.primary a.active,
.mobile-menu-overlay nav a.active {
  color: var(--primary) !important;
  font-weight: 600;
  background: rgba(229, 76, 44, 0.1);
  border-radius: 0.375rem;
}

/* Home link (first child) styling: replace label with an explicit icon in the
   markup.  The link is sized to a square and centred.  We avoid
   text-indent so the screen‑reader label within the <span class="sr-only">
   remains available. */
nav.primary a:first-child,
.mobile-menu-overlay nav a:first-child {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 !important;
}

/* Hide the textual label for the home link while keeping it accessible */
nav.primary a:first-child .sr-only,
.mobile-menu-overlay nav a:first-child .sr-only {
  display: none !important;
}

/* Style the home icon */
nav.primary a:first-child i,
.mobile-menu-overlay nav a:first-child i {
  font-size: 1.25rem;
  color: var(--secondary);
}

/* When the home link is active, tint the icon with the primary colour */
nav.primary a.active i,
.mobile-menu-overlay nav a.active i {
  color: var(--primary);
}

/* Visually hidden utility class for screen readers (sr-only).  This
   pattern hides text off‑screen while keeping it accessible to
   assistive technologies.  It is useful for labels like the
   “Home” span inside the navigation link. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* === OVERRIDE: Mobile menu flip from top to bottom, 60% width, with close icon === */
/* Mobile / Tab overlay fix */
@media (max-width: 992px) {
  .mobile-menu-overlay {
    position: fixed;
    top: 90px;               /* no white gap at top */
    left: 0;
    width: 50vw;          /* fit mobile/tablet, adjust if needed */
    max-width: 360px;     /* don't get too wide on tablets */
    height: 100vh;        /* full height, so no bottom gap */
    background: #ffffff;
    box-shadow: 0 6px 25px rgba(0,0,0,0.25);
    border-top-right-radius: 1.25rem;
    border-bottom-right-radius: 1.3rem;  /* curved edges */
    transform-origin: left center;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .35s ease, opacity .3s ease;
    z-index: 4000;
    display: flex;
    flex-direction: column;
  }
  .mobile-menu-overlay.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* inner content fills height without extra white space */
  .mobile-menu-overlay .overlay-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.1rem 1.2rem 1.4rem;
  }

  /* close button at top-right of panel */
  .mobile-menu-overlay .menu-close {
    position: absolute;
    top: .65rem;
    right: .65rem;
    background: none;
    border: 0;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
    color: #0f172a;
  }
 /* Disable background scroll when menu is open */
  body.menu-open {
    overflow: hidden;
  }
}

  /* optional: prevent body scroll when menu open */
  body.menu-open {
    overflow: hidden;
  }

/* === RESPONSIVE LOGO ALIGNMENT (IRS + SAFE & SECURE) === */
.footer-logos {
  display: flex;
  flex-direction: column;        /* desktop: stacked vertically */
  align-items: center;
  justify-content: center;
  gap: 0rem;
  margin-top: 0.5rem;
  width: 100%;
  text-align: center;
}

.footer-logos img {
  width: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.25s ease;
}

.footer-logos .payments-icon {
  height: 100px;
  width: 100%;
  text-align: center;
}

.footer-logos img:hover {
  transform: scale(1.05);
}

/* === MOBILE VIEW: side by side + centered === */
@media (max-width: 768px) {
  .footer-logos {
    flex-direction: row;          /* side by side */
    justify-content: center;      /* center horizontally */
    align-items: center;          /* center vertically */
    text-align: center;
    gap: 1rem;
    width: 100%;
  }

  

  .footer-logos .payments-icon {
    height: 100px;
  }
}

/* === FOOTER BRAND NAME === */
.footer-brand-name {
  color: #f06937;           /* main brand color */
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.3px;
  text-transform: capitalize;
}

.footer-brand-name span {
  color: #f06937;           /* keep consistent brand orange */
}

.footer-brand-name:hover {
  opacity: 0.9;
}
/* kill extra space below orange footer bar */
.site-footer {
  padding-bottom: 0 !important;
}

.site-footer .footer-bottom {
  margin: 0 !important;
  padding: 0.8rem 0;     /* keep the height of orange bar */
  background: #f7682f;   /* your orange */
  display: block;
}
/* === REMOVE WHITE SPACE ABOVE AND BELOW HERO SECTION === */

/* Remove any default margin/padding between sections */
.notification-bar,
header.main-header,
section.hero {
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Ensure hero starts immediately after header */
section.hero {
  position: relative;
  top: 0;
  margin-top: 0 !important;
}

/* Remove top gap possibly caused by scroll-padding-top */
body {
  scroll-padding-top: 0 !important;
}

/* Optional: tighten internal hero slide spacing */
.hero .slide .content.container {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* Ensure the next section (below hero) has no white gap */
section.hero + section,
section.hero + div {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* === FOOTER IMPROVEMENTS === */

/* Reduce dark footer top and bottom spacing */
.site-footer {
  padding-top: 1.5rem !important;
  padding-bottom: 0 !important;
}

/* Footer columns tighter alignment */
.site-footer .footer-top {
  margin-bottom: 1rem !important;
}

/* Footer link colors and hover effect */
.site-footer .links-col a {
  color: #d1d5db; /* light gray text for readability */
  text-decoration: none;
  transition: color 0.25s ease, background 0.25s ease;
  padding: 0.2rem 0.4rem;
  border-radius: 0.35rem;
}

.site-footer .links-col a:hover {
  color: #ffffff;
  background: #f06937; /* site orange overlay */
}

/* Enlarge footer logo (IRS + Secure icons) */
.footer-logos .payments-icon {
  height: 150px !important;   /* increase image visibility */
  width: auto !important;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Center alignment across all devices */
.footer-logos {
  display: flex;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column;
  text-align: center;
  width: 100%;
}

/* Optional: slightly larger on desktop */
@media (min-width: 992px) {
  .footer-logos .payments-icon {
    height: 170px !important;
  }
}

/* === FOOTER FINAL FIX === */

/* Remove extra white gaps above and below */
.site-footer {
  margin-top: 0 !important;
  padding-top: 1rem !important;
  padding-bottom: 0 !important;
  background: #ffffff !important;
  color: #000000 !important;
  border-top: 1px solid #eaeaea;
}

/* Ensure no top margin from previous section */
section:last-of-type,
main > *:last-child {
  margin-bottom: 0 !important;
}

/* Center footer content properly */
.site-footer .footer-top {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding: 1rem 1.5rem 1rem !important;
}

/* --- Brand section styling --- */
.site-footer .links-col:first-child {
  flex: 1.2; /* make brand column slightly wider */
  max-width: 360px;
  text-align: left !important;
}

.site-footer .links-col:first-child h4 {
  color: #f06937 !important; /* site orange brand name */
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.site-footer .links-col:first-child p {
  color: #000000 !important;
  line-height: 1.55;
  font-size: 0.95rem;
}

/* --- Footer link columns --- */
.site-footer .links-col h4 {
  color: #000000 !important;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.site-footer .links-col a {
  color: #000000 !important;
  text-decoration: none;
  display: block;
  padding: 0.2rem 0;
  transition: color 0.25s ease, background 0.25s ease;
}

.site-footer .links-col a:hover {
  color: #f06937 !important;
  background: rgba(240, 105, 55, 0.08);
  border-radius: 4px;
}

/* --- Logo alignment --- */
.footer-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.footer-logos img {
  max-width: 220px;
  height: auto;
}

/* --- Copyright bar --- */
.site-footer .footer-bottom {
  background: #f06937 !important;
  color: #ffffff !important;
  text-align: center !important;
  padding: 0.75rem 0 !important;
  border-top: none !important;
  font-size: 0.9rem !important;
  margin-top: 0 !important;
}

/* --- Responsive adjustments for mobile/tablet --- */
@media (max-width: 991px) {
  .site-footer .footer-top {
    display: block;
    padding: 1rem;
  }
  .site-footer .links-col {
    margin-bottom: 1.25rem;
  }
  .footer-logos {
    align-items: flex-start;
  }
}

:root {
  --brand: #f7682f;
  --ink: #0f172a;
  --muted: #475569;
  --bg-soft: #f8fafc;
}

:root {
  --brand: #f7682f;
  --ink: #0f172a;
  --muted: #475569;
  --bg-soft: #f8fafc;
}

/* HERO WRAPPER */
.hero-slider {
  background: #ffffff;
  /* reduce big top/bottom gap */
  padding: 1.1rem 1.25rem;
  min-height: auto;
  display: flex;
  align-items: center;
}

/* TWO COLUMNS DESKTOP */
.hero-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.5rem;
  align-items: center;
}

/* TEXT SIDE */
.hero-text .hero-kicker {
  font-size: 0.825rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--brand);
  font-weight: 600;
  margin-bottom: .6rem;
}

.hero-title {
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 1rem;
}

.hero-desc {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 520px;
  margin-bottom: 1.25rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.25rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .6rem 1.1rem;
  border-radius: .75rem;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.btn.primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 25px rgba(247, 104, 47, 0.25);
}

.btn.ghost {
  background: rgba(247, 104, 47, 0.08);
  color: var(--ink);
}

/* IMAGE SIDE – remove inner padding & background */
.hero-media {
  background: none;              /* remove radial / border look */
  border-radius: 1rem;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;                    /* no empty space around image */
}

.hero-media img {
  width: 100%;
  height: 100%;
  max-height: 430px;             /* taller desktop image */
  object-fit: cover;             /* fill the box = no gaps */
  border-radius: 1rem;
  display: block;
}

/* dots */
.hero-dots {
  display: flex;
  gap: .55rem;
  align-items: center;
}

.hero-dots button {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: none;
  background: #d1d5db;
  cursor: pointer;
  transition: all .2s ease;
}

.hero-dots button.is-active {
  background: var(--brand);
  width: 26px;
}

/* ============ TABLET / MOBILE ============ */
@media (max-width: 992px) {
  .hero-slider {
    padding: .5rem .75rem 1rem;   /* remove big empty bands */
  }
  .hero-shell {
    grid-template-columns: 1fr;
    gap: .75rem;
  }
  /* show IMAGE FIRST on mobile/tablet */
  .hero-media {
    order: -1;
    width: 100%;
    min-height: 230px;
    border-radius: .75rem;
  }
  .hero-media img {
    width: 100%;
    height: auto;                /* no cropping on small */
    max-height: none;
    object-fit: contain;         /* keep full image visible */
    border-radius: .75rem;
  }
  .hero-text {
    padding: 0 .25rem;
  }
}

@media (max-width: 600px) {
  .hero-title {
    font-size: 1.85rem;
  }
  .hero-actions {
    flex-direction: row;
  }
  .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

header.main-header .brand img,
header.main-header .brand .site-logo-img {
  height: 52px;
  max-height: 52px;
  width: auto;
  display: block;
}
.testimonials {
  background: #fdeee3;
  padding: 1.4rem 1rem 1.8rem; /* less space top/bottom */
  overflow: hidden;
}

.testimonials .section-title {
  text-align: center;
  margin-bottom: 1.1rem;
  color: var(--ink, #0f172a);
}

.testimonials-slider {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.testimonials-slider .slides {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  transition: opacity .25s ease;
  opacity: 1;
  min-height: 150px;
}

.testimonials-slider .slide {
  background: #fff;
  border-radius: 1rem;
  padding: 1.05rem .95rem 1rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.03);
  line-height: 1.45;
}

.testimonials-slider .slide p {
  margin-bottom: .5rem;
  color: var(--ink, #0f172a);
}
.testimonials-slider .slide strong {
  color: var(--brand, #f7682f);
  font-weight: 600;
}

/* dots */
.testimonials-slider .dots {
  display: flex;
  justify-content: center;
  gap: .4rem;
  margin-top: .8rem;
}
.testimonials-slider .dots .dot {
  width: 10px;
  height: 10px;
  background: #e2e8f0;
  border-radius: 999px;
  cursor: pointer;
  transition: .2s;
}
.testimonials-slider .dots .dot.active {
  background: var(--brand, #f7682f);
  width: 22px;
}

/* tablet: 2 per view */
@media (max-width: 992px) {
  .testimonials-slider .slides {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* mobile: 1 per view */
@media (max-width: 600px) {
  .testimonials {
    padding: 1.1rem .6rem 1.5rem;
  }
  .testimonials-slider .slides {
    grid-template-columns: 1fr;
  }
}
/* === REMOVE TOP & BOTTOM EMPTY SPACE FROM TESTIMONIALS === */
.testimonials {
  background: #fdeee3;
  padding-top: 0.6rem !important;   /* reduce top gap */
  padding-bottom: 0.8rem !important; /* reduce bottom gap */
  overflow: hidden;
}

/* tighten heading */
.testimonials .section-title {
  margin-top: 0 !important;
  margin-bottom: 0.6rem !important;
}

/* tighten slide layout */
.testimonials-slider {
  padding: 0 !important;
  margin: 0 auto;
}

.testimonials-slider .slides {
  gap: 0.6rem !important;
}

/* reduce card padding and margins */
.testimonials-slider .slide {
  margin: 0 !important;
  padding: 0.9rem 0.8rem !important;
}

/* dots spacing minimal */
.testimonials-slider .dots {
  margin-top: 0.5rem !important;
}

form textarea {
  min-height: 120px;  /* Reduce from default height */
  padding: 0.2rem;
  line-height: 1;
  resize: none;   /* Or 'none' to disable manual resizing */
}

.whatsapp-btn {
  background-color: #25D366;
  color: #fff !important; /* Force white text */
  padding: 14px 26px;
  font-size: 17px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: background 0.3s ease, transform 0.2s ease;
  line-height: 1.2;
}

/* Keep text white for all link states */
.whatsapp-btn:link,
.whatsapp-btn:visited,
.whatsapp-btn:hover,
.whatsapp-btn:active {
  color: #fff !important;
}

.whatsapp-btn:hover {
  background-color: #f7682f; /* Brand orange hover */
  transform: translateY(-1px);
}

.whatsapp-btn i {
  font-size: 18px;
  color: #fff; /* Ensure WhatsApp icon is white too */
}

.main-header {
  position: sticky;
  top: 0;
  z-index: 999;
  transition: transform 0.35s ease;
}
.main-header.hidden {
  transform: translateY(-100%);
}