/*
 * Footer Styles for A1 Steels Theme
 * ====================================
 * 
 * OVERVIEW:
 * This CSS implements a responsive footer layout using CSS Grid for the A1 Steels WordPress theme.
 * The footer is built with SiteOrigin Page Builder and requires aggressive CSS overrides to achieve
 * the desired layout due to Page Builder's default styling conflicts.
 * 
 * LAYOUT STRUCTURE:
 * - Desktop: 2-column grid (left: brand+contact, right: 3-column menus)
 * - Tablet: Vertical stack with centered alignment
 * - Mobile: Full vertical stack with centered content
 * 
 * 
 * SiteOrigin COMPATIBILITY:
 * The footer is built using SiteOrigin Page Builder which generates complex nested structures.
 * This CSS works around Page Builder limitations by:
 * 1. Overriding default flexbox/float layouts
 * 2. Forcing grid positioning on specific containers
 * 3. Resetting width/margin/padding properties
 */

/* ================= FOOTER BASE STYLES ================= */

/**
 * PRIMARY FOOTER CONTAINER
 * Sets up the main footer styling and ensures it sticks to bottom of page
 */
 .footer {
  background-color: var(--color-secondary);
  /* Dark background matching brand colors */
  color: #fff;
  /* White text for contrast */
  padding: 60px;
  /* Generous padding for desktop view */
  margin-top: auto;
  /* Pushes footer to bottom when page content is short */
}

/* Clean professional footer styling - placeholder for additional base styles */

/**
 * SITEORIGIN PAGE BUILDER OVERRIDES
 * SiteOrigin applies full-width-stretch with negative margins that conflict with our layout.
 * These rules ensure consistent padding and width behavior.
 */
.footer .siteorigin-panels-stretch {
  padding: 0 var(--container-padding) !important;
  /* Override negative margins */
  width: 100% !important;
  /* Ensure full width utilization */
  max-width: none !important;
  /* Remove any width constraints */
}

/**
 * PANEL LAYOUT RESET
 * SiteOrigin generates nested .panel-layout containers that interfere with our grid.
 * Reset all margin/padding to prevent spacing conflicts.
 */
.footer .panel-layout,
.footer #pl-w68d22ddd8bded .panel-layout,
.footer #pl-w68d22ddd8bf07 .panel-layout {
  margin: 0 !important;
  /* Remove default margins */
  padding: 0 !important;
  /* Remove default padding */
}

/**
 * PANEL GRID RESET
 * SiteOrigin's panel-grid and panel-grid-cell classes apply float-based layouts.
 * We need to reset these to use our CSS Grid approach instead.
 */
.footer .panel-grid,
.footer .panel-grid-cell,
.footer .so-panel {
  margin: 0 !important;
  /* Clear spacing */
  padding: 0 !important;
  /* Clear padding */
}

/**
 * OVERRIDE SITEORIGIN'S DEFAULT LAYOUT SYSTEM
 * SiteOrigin uses flexbox and float layouts by default. We need to disable these
 * to implement our CSS Grid system properly.
 */
.footer .panel-grid {
  display: block;
  /* Override flexbox display */
  width: auto !important;
  /* Remove fixed widths */
  float: none !important;
  /* Disable float layout */
}

.footer .panel-grid-cell {
  width: auto !important;
  /* Remove percentage-based widths */
  float: none !important;
  /* Disable float positioning */
}

/* ================= CSS GRID SYSTEM (12-COLUMN) ================= */


/**
 * OUTER CONTAINER CONTROL
 * Ensure the outer SiteOrigin container doesn't interfere with our inner grid
 */
.footer #pl-w68d22ddd8bded.panel-layout {
  display: block !important;
  /* Keep as block container */
  width: 100% !important;
  /* Full width */
}

/**
 * FULL-WIDTH STRETCH CONTAINER
 * Handle SiteOrigin's full-width-stretch class that can cause overflow issues
 */
.footer .footer-col--brand-row.siteorigin-panels-stretch {
  width: 100% !important;
  /* Prevent overflow */
  padding: 0 !important;
  /* Remove conflicting padding */
  margin: 0 !important;
  /* Remove conflicting margins */
}

/**
 * AGGRESSIVE CSS RESET FOR SITEORIGIN COMPATIBILITY
 * SiteOrigin generates complex nested structures that require forceful overrides.
 * These rules ensure our layout takes precedence over Page Builder defaults.
 */
.footer * {
  box-sizing: border-box !important;
  /* Consistent box model */
}

/**
 * COMPREHENSIVE PANEL RESET
 * Force all SiteOrigin panel elements to behave as block elements
 * and remove any width/positioning constraints
 */
.footer .panel-grid,
.footer .panel-grid-cell {
  float: none !important;
  /* Disable float layouts */
  width: 100% !important;
  /* Full width within container */
  clear: none !important;
  /* Remove float clearing */
  display: block;
  /* Force block display */
  margin: 0 !important;
  /* Clear margins */
  padding: 0 !important;
  /* Clear padding */
  min-width: 0 !important;
  /* Allow shrinking */
  max-width: none !important;
  /* Remove width limits */
}



/**
 * GRID POSITIONING - BRAND SECTION (TOP LEFT)
 * Places the brand/logo section in the first column, first row.
 * Multiple selectors ensure this works regardless of SiteOrigin's specificity.
 */
.footer #pl-w68d22ddd8bf07.panel-layout .panel-grid:nth-child(1),
footer.footer #pl-w68d22ddd8bf07 .panel-grid:nth-child(1),
#pl-w68d22ddd8bf07>.panel-grid:nth-child(1) {
  grid-column: 1 !important;
  /* First column */
  grid-row: 1 !important;
  /* First row */
  width: 100% !important;
  /* Full width of grid area */
  min-width: 0 !important;
  /* Allow shrinking */
  max-width: none !important;
  /* Remove width limits */
}

/**
 * GRID POSITIONING - CONTACT SECTION (BOTTOM LEFT)
 * Places the contact information in the first column, second row.
 */
.footer #pl-w68d22ddd8bf07.panel-layout .panel-grid:nth-child(2),
footer.footer #pl-w68d22ddd8bf07 .panel-grid:nth-child(2),
#pl-w68d22ddd8bf07>.panel-grid:nth-child(2) {
  grid-column: 1 !important;
  /* First column */
  grid-row: 2 !important;
  /* Second row */
  width: 100% !important;
  /* Full width of grid area */
  min-width: 0 !important;
  /* Allow shrinking */
  max-width: none !important;
  /* Remove width limits */
}

/**
 * GRID POSITIONING - MENU SECTION (RIGHT SIDE, SPANNING BOTH ROWS)
 * Places the navigation menus in the second column, spanning both rows.
 * This creates the side-by-side layout on desktop.
 */
.footer #pl-w68d22ddd8bf07.panel-layout .panel-grid:nth-child(3),
footer.footer #pl-w68d22ddd8bf07 .panel-grid:nth-child(3),
#pl-w68d22ddd8bf07>.panel-grid:nth-child(3) {
  grid-column: 2 !important;
  /* Second column */
  grid-row: 1 / -1 !important;
  /* Span from first to last row */
  width: 100% !important;
  /* Full width of grid area */
  min-width: 0 !important;
  /* Allow shrinking */
  max-width: none !important;
  /* Remove width limits */
}

/* ================= LEFT SIDE CONTENT STYLING ================= */

/**
 * BRAND AND CONTACT ROW STYLING
 * Basic styling for the left-side content containers
 */
.footer-row--brand,
.footer-row--contact {
  display: block;
  /* Simple block display */
  margin-bottom: 0;
  /* Remove bottom margins */
}

/**
 * BRAND SECTION SPACING
 * Adds spacing between brand and contact sections
 */
.footer-col--brand {
  margin-bottom: var(--space-md);
  /* Space between brand and contact */
}

/**
 * CONTACT SECTION INTERNAL GRID
 * The contact section uses its own internal grid to layout:
 * - Left column: Contact info + Social icons (stacked vertically)
 * - Right column: Address (aligned to right)
 */
.footer-col--contact {
  display: grid !important;
  /* Enable internal grid */
  grid-template-columns: auto 1fr !important;
  /* Auto-width left, flexible right */
  gap: 10px 85px !important;
  /* Small gap between columns */
  align-items: start !important;
  /* Top alignment */
  margin-top: 0;
  width: 100% !important;
  /* Full width */
  min-width: 0 !important;
  /* Allow shrinking */
  max-width: none !important;
  /* No width limits */
}

/**
 * CONTACT GRID POSITIONING - LEFT COLUMN
 * Contact info and social icons go in the first column
 */
.footer-col--contact .so-panel:nth-child(1),
.footer-col--contact .so-panel:nth-child(2) {
  grid-column: 1 !important;
  /* First column */
}

/**
 * CONTACT GRID POSITIONING - RIGHT COLUMN
 * Address spans the right column and full height
 */
.footer-col--contact .so-panel:nth-child(3) {
  grid-column: 2 !important;
  /* Second column */
  grid-row: 1 / -1 !important;
  /* Span full height */
}

/**
 * SOCIAL ICONS SPACING
 * Remove bottom margin from social icons container
 */
.footer-col--contact .so-panel:nth-child(2) {
  margin-bottom: 0 !important;
}

/* ================= RIGHT SIDE MENU STYLING ================= */

/**
 * MENU SECTION GRID LAYOUT
 * Creates a 3-column grid for the navigation menus on the right side
 */
.footer-row-menu,
.footer-row--menu {
  display: grid !important;
  /* Enable grid layout */
  grid-template-columns: repeat(3, 1fr) !important;
  /* Three equal columns */
  align-items: start !important;
  /* Top alignment */
  width: 100% !important;
  /* Full width */
  min-width: 0 !important;
  /* Allow shrinking */
}

/**
 * MENU COLUMN EXPANSION
 * Ensure each menu column utilizes its full allocated space
 */
.footer-col--menu1,
.footer-col--menu2,
.footer-col--menu3 {
  width: 100% !important;
  /* Full width of grid area */
  min-width: 0 !important;
  /* Allow shrinking */
  max-width: none !important;
  /* No width limits */
}

/* ================= FOOTER COMPONENT STYLES ================= */

/**
 * LOGO STYLING
 * Controls the footer logo appearance and spacing
 */
.footer__logo {
  margin-bottom: var(--space-sm);
  /* Space below logo */
}

.footer__logo img {
  max-width: 180px;
  /* Responsive logo size */
  height: auto;
  /* Maintain aspect ratio */
}

/**
 * ARROW DECORATIVE ELEMENT
 * Styling for the decorative arrow graphic between logo and description
 */
.footer__arrow {
  margin-bottom: var(--space-md);
  /* Space below arrow */
}

.footer__arrow img {
  max-width: 60px;
  /* Appropriate arrow size */
  height: auto;
  /* Maintain aspect ratio */
}

/**
 * DESCRIPTION TEXT STYLING
 * Company description text with muted color and readable typography
 */
.footer__desc {
  text-align: left;
  font-size: var(--section-para-fs);
  line-height: var(--section-para-lh);
  color: #FFFFFF;
  /* Muted text color */
  margin: 0;
  /* Remove default margins */
  font-weight: 400;
}

/**
 * CONTACT INFORMATION STYLING
 * Primary contact details with prominent white text
 */
.footer__contact {
  font-size: var(--section-para-fs);
  /* Readable size */
  line-height: var(--section-para-lh);
  /* Spacious line height for multi-line content */
  color: #FFFFFF;
  /* White for prominence */
  margin: 0;
  /* Remove default margins */
  font-weight: 400;
  /* Slightly bold for emphasis */
}

.footer__contact br {
  line-height: 1.2;
  /* Tighter spacing for line breaks */
}

/**
 * ADDRESS STYLING
 * Physical address with right alignment and muted color
 */
.footer__address {
  font-size: var(--section-para-fs);
  /* Consistent sizing */
  line-height: var(--section-para-lh);
  /* Readable spacing */
  color: #FFFFFF;
  /* Muted color */
  margin: 0;
  /* Remove margins */
  justify-self: flex-start;
  /* left align within grid */
  text-align: left;
  /* Right-aligned text */
}

.footer__address br {
  line-height: 1.2;
  /* Tighter line break spacing */
}

/**
 * SOCIAL MEDIA ICONS
 * Horizontal layout for social media links with hover effects
 */
.footer__social {
  margin: 0;
  /* Remove margins */
  justify-self: start;
  /* Left align within grid */
}

/* Reset default plugin container margins */
.footer__social .heateor_sss_sharing_container {
  margin: 0;
}

/* Horizontal flex layout for social icons */
.footer__social .heateor_sss_sharing_ul {
  display: flex;
  /* Horizontal layout */
  gap: 12px;
  /* Space between icons */
  align-items: center;
  /* Vertical centering */
  margin: 0;
  /* Remove default margins */
  padding: 0;
  /* Remove default padding */
}

/* Individual social icon styling */
.footer__social .heateor_sss_sharing_ul a {
  display: flex;
  /* Flexbox for centering */
  align-items: center;
  /* Vertical centering */
  justify-content: center;
  /* Horizontal centering */
  transition: transform var(--transition-fast);
  /* Smooth hover animation */
}

/* Hover effect - subtle upward movement */
.footer__social .heateor_sss_sharing_ul a:hover {
  transform: translateY(-2px);
  /* Lift effect on hover */
}

/* Social icon size and shape */
.footer__social .heateor_sss_svg {
  border-radius: 50%;
  /* Circular icons */
  width: 35px !important;
  /* Fixed width */
  height: 35px !important;
  /* Fixed height */
}

/* hide for large screens  */
.footer__menu-mobile {
  display: none;
}

.footer__menu-mobile h3 {
  color: #fff;
  font-size: var(--section-para-fs);
  line-height: var(--section-para-lh);
}

/**
 * NAVIGATION MENU STYLING
 * Vertical navigation menus with hover effects
 */
.footer__menu {
  margin: 0;
  /* Remove default margins */
}

/* Reset default list styling */
.footer__menu .menu {
  list-style: none;
  /* Remove bullet points */
  padding: 0;
  /* Remove default padding */
  margin: 0;
  /* Remove default margins */
}

.footer__menu h3 {
  color: #fff;
  font-size: var(--section-para-fs);
  line-height: var(--section-para-lh);
}

/* Individual menu item spacing */
.footer__menu .menu-item {
  margin-bottom: calc(var(--space-xs) - 2px);
  /* Tight spacing between items */
}

.footer__menu .menu-item:last-child {
  margin-bottom: 0;
  /* No margin on last item */
}

/* Menu link styling with hover effects */
.footer__menu .menu-item a {
  color: #FFFFFF;
  /* Muted text color */
  text-decoration: none;
  /* Remove underlines */
  font-size: var(--section-para-fs);
  /* Consistent sizing */
  line-height: var(--section-para-lh);
  /* Compact line height */
  transition: color var(--transition-fast);
  /* Smooth color transition */
  display: block;
  /* Full clickable area */
  padding: 2px 0;
  /* Small vertical padding for easier clicking */
}

/* Hover effect - highlight with brand color */
.footer__menu .menu-item a:hover {
  color: var(--color-primary);
  /* Brand color on hover */
}

/**
 * SITEORIGIN WIDGET SPACING RESET
 * Remove default margins from SiteOrigin widgets
 */
.footer .so-widget-sow-image,
.footer .so-widget-sow-editor {
  margin: 0 !important;
  /* Remove widget margins */
}

.footer .sow-image-container {
  margin: 0;
  /* Remove image container margins */
}

.footer-last-bottom-row {
  width: 100%;
}

/* ================= LARGE DESKTOP (1200px+) ================= */

/**
 * LARGE DESKTOP OPTIMIZATION
 * Enhanced spacing and sizing for desktop screens with ample space.
 * Maintains the core 2-column grid layout with improved proportions.
 */
@media (min-width: 1200px) {

  /**
   * DESKTOP PADDING
   * Full padding for generous whitespace on large screens
   */
  .footer {
    padding: 60px;
    /* Generous padding for desktop */
  }

  /**
   * OPTIMIZED 2-COLUMN LAYOUT
   * Maintain the proven grid layout for large screens
   */
  .footer #pl-w68d22ddd8bf07.panel-layout {
    grid-template-columns: 1fr 1fr !important;
    /* Equal columns */
    display: grid !important;
    /* Ensure grid is active */
  }

  /**
   * EXPLICIT GRID POSITIONING FOR LARGE SCREENS
   * Ensure proper positioning even with increased specificity on large screens
   */
  .footer #pl-w68d22ddd8bf07.panel-layout .panel-grid:nth-child(1) {
    grid-column: 1 !important;
    /* Brand in first column */
    grid-row: 1 !important;
    /* First row */
  }

  .footer #pl-w68d22ddd8bf07.panel-layout .panel-grid:nth-child(2) {
    grid-column: 1 !important;
    /* Contact in first column */
    grid-row: 2 !important;
    /* Second row */
  }

  .footer #pl-w68d22ddd8bf07.panel-layout .panel-grid:nth-child(3) {
    grid-column: 2 !important;
    /* Menus in second column */
    grid-row: 1 / -1 !important;
    /* Span both rows */
  }

  /* Step 3: Separate last row: copyright + credit */
  .footer #pl-w68d22ddd8bf07 > .panel-grid:nth-child(4) {
    grid-column: 1 / -1 !important;
    /* span full width */
    grid-row: 4;
    margin-top: 40px !important;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  /**
   * CONTACT SECTION LAYOUT
   * Maintain the 2-column internal layout for contact information
   */
  .footer-col--contact {
    grid-template-columns: auto 1fr !important;
    /* Auto left, flexible right */
    gap: 10px 85px !important;
    /* Compact gap */
  }

  /**
   * ENHANCED SIZES FOR LARGE SCREENS
   * Larger logo and elements for better presence on big screens
   */
  .footer__logo img {
    max-width: 200px;
    /* Larger logo */
  }

  .footer__arrow img {
    max-width: 70px;
    /* Larger arrow */
  }

  /**
   * MENU ALIGNMENT ADJUSTMENT
   * Align menus with the description text for better visual hierarchy
   */
  .footer-row-menu,
  .footer-row--menu {
    margin-top: 150px;
    /* Align menus with description level */
  }

  .footer-col--menu1,
  .footer-col--menu2,
  .footer-col--menu3 {
    display: flex;
    justify-content: flex-end;
  }

  #pg-w6885ecc99f4dc-1 {
    position: relative;
    top: -145px;
  }
}




/* ================= TABLET RESPONSIVE (768px - 1199px) ================= */

/**
 * TABLET LAYOUT STRATEGY
 * On tablet screens, we abandon the side-by-side layout in favor of
 * a vertical stack with center-aligned content for better readability
 */
@media (min-width: 768px) and (max-width: 1199px) {
  .footer {
    padding: 40px;
  }

  .footer #pl-w68d22ddd8bf07.panel-layout {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 25px;
  }

  .footer #pl-w68d22ddd8bf07.panel-layout .panel-grid:nth-child(2) {
    grid-column: 1 !important;
    grid-row: 2;
  }

  .footer #pl-w68d22ddd8bf07.panel-layout .panel-grid:nth-child(3) {
    grid-column: 1 !important;
    grid-row: -1 / 2 !important;
  }

  .footer #pl-w68d22ddd8bf07.panel-layout .panel-grid:nth-child(4) {
    grid-row: 3;
  }

  .footer-col--contact {
    grid-template-columns: 1fr !important;
    margin-top: 0;
  }

  .footer-col--contact .so-panel:nth-child(3) {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  #pg-w68d22ddd8bf07-1 {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
  }

  .footer-row--contact {
    grid-column: 2 !important;
  }

  .footer-row-menu {
    gap: 10px;
    width: 70% !important;
  }

  .footer__social {
    padding: 10px 0;
  }

  .footer-last-bottom-row {
    -webkit-flex-direction: row !important;
    flex-direction: row !important;
  }

  /* making bottom take proper width  */
  #pgc-w68d22ddd8bf07-3-0,
  #pgc-w68d22ddd8bf07-3-1 {
    width: auto !important;
  }
}

/* ================= MOBILE RESPONSIVE (max-width: 767px) ================= */

/**
 * MOBILE LAYOUT STRATEGY
 * Full vertical stacking with center alignment for optimal mobile UX.
 * All elements stack in a single column for easy scrolling and reading.
 */
@media (max-width: 767px) {

  /**
   * MOBILE PADDING
   * Reduced padding to maximize content space on small screens
   */
  .footer {
    padding: 40px 20px;
  }

  /*hiding menu for desktop*/
  .footer__menu--1 {
    display: none;
  }

  /**
   * DISABLE GRID LAYOUT ON MOBILE
   * Use normal document flow for complete vertical stacking
   */
  .footer #pl-w6885ecc99f4dc.panel-layout {
    grid-template-columns: 1fr !important;
  }

  /**
   * RESET ALL GRID POSITIONING FOR MOBILE
   * Ensure all elements stack naturally without grid interference
   */
  .footer #pl-w6885ecc99f4dc.panel-layout .panel-grid:nth-child(1),
  .footer #pl-w6885ecc99f4dc.panel-layout .panel-grid:nth-child(2),
  .footer #pl-w6885ecc99f4dc.panel-layout .panel-grid:nth-child(3) {
    grid-column: unset !important;
    /* Remove column positioning */
    grid-row: unset !important;
    /* Remove row positioning */
  }

  .footer #pl-w6885ecc99f4dc-1.panel-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  /**
   * VERTICAL STACKING WITH SPACING
   * Add consistent spacing between major sections
   */
  .footer-row--brand,
  .footer-row--contact {
    margin-bottom: var(--space-lg);
    /* Consistent section spacing */
  }

  /**
   * BRAND SECTION - MOBILE OPTIMIZED
   * Smaller sizes and center alignment for mobile viewing
   */
  .footer-col--brand {
    text-align: center;
    /* Center everything */
    margin-bottom: var(--space-lg);
    /* Space before contact */
  }

  .footer__logo {
    display: flex;
    justify-content: flex-start;
  }

  .footer__arrow {
    display: flex;
  }

  /* Mobile-optimized logo size */
  .footer__logo img {
    max-width: 140px;
    margin: 0 auto var(--space-sm) auto;
    /* Center with bottom margin */
  }

  /* Mobile-optimized arrow size */
  .footer__arrow img {
    max-width: 40px;
    margin: 0 auto var(--space-md) auto;
    /* Center with bottom margin */
  }

  /* Full width description with center alignment */
  .footer__desc {
    max-width: 100%;
    /* Use full available width */
    margin: 0 auto;
    /* Center horizontally */
    text-align: left;
    /* Center text */
  }

  /**
   * CONTACT SECTION - FULL VERTICAL STACK
   * Remove grid layout and stack all contact elements vertically
   */
  .footer-col--contact {
    margin-top: -1rem;
    text-align: center !important;
    /* Center alignment */
    margin-bottom: var(--space-lg) !important;
    /* Section spacing */
    grid-template-columns: 1fr 1fr !important;
    /* Single column fallback */
    gap: 9px 0 !important;
  }

  .footer__contact {
    text-align: left;
  }

  /**
   * RESET CONTACT GRID FOR MOBILE
   * Ensure all contact elements stack naturally
   */
  .footer-col--contact .so-panel:nth-child(1),
  .footer-col--contact .so-panel:nth-child(2),
  .footer-col--contact .so-panel:nth-child(3) {
    grid-column: unset !important;
    /* Remove grid positioning */
    grid-row: unset !important;
    /* Remove grid positioning */
  }

  .footer-col--contact .so-panel:nth-child(2) {
    grid-column: 1 !important;
  }

  .footer-col--contact .so-panel:nth-child(3) {
    grid-column: 1 !important;
  }

  .footer__mobile-menu--1 {
    position: relative;
    top: -100px;
  }

  /* Center-align address */
  .footer__address {
    text-align: left !important;
    justify-self: center !important;
  }

  /* Center-align social icons */
  .footer__social {
    justify-self: flex-start !important;
  }

  .footer__social {
    display: flex;
    /* Maintain flex layout */
    justify-content: center;
    /* Center social icons */
  }

  .footer__address {
    margin-top: var(--space-md);
    /* Space after social icons */
  }

  .menu-footer-menu-1-container {
    display: flex;
    justify-content: flex-end;
  }

  /* menu for mobile only  */
  .footer__menu-mobile .menu {
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .footer__menu-mobile h3 {
    text-align: left;
  }

  .footer__menu-mobile {
    display: block;
    /* to show in mobile*/
    list-style: none;
    /* Remove bullet points */
    padding: 0;
    /* Remove default padding */
    margin: 0;
    /* Remove default margins */
  }

  .footer__menu-mobile .menu-item a {
    color: #cccccc;
    /* Muted text color */
    text-decoration: none;
    /* Remove underlines */
    line-height: 1.4;
    /* Compact line height */
    transition: color var(--transition-fast);
    /* Smooth color transition */
    display: block;
    /* Full clickable area */
    padding: 2px 0;
    /* Small vertical padding for easier clicking */
  }

  .footer-row-menu {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* removing not needed menu-1 from mob  */
  #pgc-w68d22ddd8bf07-2-0 {
    display: none !important;
  }

  /* footer mobile menu-1 aliging to left  */
  #panel-w68d22ddd8bf07-1-0-3 {
    display: flex;
    justify-content: flex-end;
  }

  /**
   * MENU SECTIONS - FULL VERTICAL STACK
   * Stack all three menu sections vertically for mobile
   */
  .footer-row-menu,
  .footer-row--menu {
    display: block;
    /* Disable grid layout */
    margin-bottom: 0;
    /* No bottom margin */
  }

  /* Stack menu columns vertically with spacing */
  .footer-col--menu1,
  .footer-col--menu2,
  .footer-col--menu3 {
    margin-bottom: var(--space-lg);
    /* Space between menu sections */
  }

  .footer-col--menu2 {
    text-align: left;
  }

  .menu-footer-menu-2-container {
    display: flex;
    justify-content: flex-start;
  }

  /* Remove margin from last menu section */
  .footer-col--menu3 {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0;
  }

  /* Center menu links with larger tap targets */
  .footer__menu .menu-item a {
    text-align: left;
    /* Center text */
    padding: 6px 0;
    /* Larger tap target for mobile */
  }

  .footer-last-bottom-row {
    -webkit-flex-direction: row !important;
    flex-direction: row !important;
  }

  /* making bottom take proper width  */
  #pgc-w68d22ddd8bf07-3-0,
  #pgc-w68d22ddd8bf07-3-1 {
    width: auto !important;
  }
}

/* ================= SMALL MOBILE (max-width: 480px) ================= */

/**
 * SMALL MOBILE OPTIMIZATION
 * Ultra-compact layout for very small screens with minimal padding
 * and reduced font sizes for optimal space utilization.
 */
@media (max-width: 480px) {

  /**
   * TIGHTER SECTION SPACING
   * Reduce spacing between sections for compact layout
   */
  .footer-row--brand,
  .footer-row--contact {
    margin-bottom: var(--space-md);
    /* Tighter spacing */
  }

  /**
   * COMPACT ELEMENT SIZES
   * Smaller logos and icons for small screens
   */
  .footer__logo img {
    max-width: 120px;
    /* Compact logo */
  }

  .footer__arrow img {
    max-width: 35px;
    /* Compact arrow */
  }

  /**
   * COMPACT SOCIAL ICONS
   * Smaller social media icons for small screens
   */
  .footer__social .heateor_sss_svg {
    width: 30px !important;
    /* Smaller icons */
    height: 30px !important;
    /* Smaller icons */
  }
}

/* ================= COPYRIGHT SECTION ================= */

.footer-last-bottom-row {
  display: flex;
  padding-top: 100px;
}

.footer-copy-widget-left {
  display: flex;
  justify-content: flex-start;
}

.footer-copy-widget-left p {
  color: #ffffff;
  margin: 0;
}

.footer-credit-widget-right {
  display: flex;
  justify-content: flex-end;
}

.footer-credit-widget-right p {
  color: #ffffff;
  margin: 0;
}


/* align contact panel / row to top*/
@media(min-width:1200px){
  #pg-w68d22ddd8bf07-1{
    top: -95px;
    position: relative;
  }
}


/*global css for font size as all texts font sizes are same*/
@media(max-width: 1198px) {
  .footer p {
    font-size: calc(var(--section-para-fs) - 0.2rem) !important;
  }

  .footer a {
    font-size: calc(var(--section-para-fs) - 0.2rem) !important;
  }

  .footer h1 {
    font-size: calc(var(--section-para-fs) - 0.2rem) !important;
  }

  .footer h2 {
    font-size: calc(var(--section-para-fs) - 0.2rem) !important;
  }

  .footer h3 {
    font-size: calc(var(--section-para-fs) - 0.2rem) !important;
  }
}


/*global css for font size as all texts font sizes are same*/
@media(min-width: 1300px) and (max-width: 1499px) {
  .footer p {
    font-size: calc(var(--section-para-fs) - 0.15rem) !important;
  }

  .footer a {
    font-size: calc(var(--section-para-fs) - 0.15rem) !important;
  }

  .footer h1 {
    font-size: calc(var(--section-para-fs) - 0.15rem) !important;
  }

  .footer h2 {
    font-size: calc(var(--section-para-fs) - 0.15rem) !important;
  }

  .footer h3 {
    font-size: calc(var(--section-para-fs) - 0.15rem) !important;
  }
}


/*global css for font size as all texts font sizes are same*/
@media(min-width: 1199px) and (max-width: 1299px) {
  .footer p {
    font-size: calc(var(--section-para-fs) - 0.2rem) !important;
  }

  .footer a {
    font-size: calc(var(--section-para-fs) - 0.2rem) !important;
  }

  .footer h1 {
    font-size: calc(var(--section-para-fs) - 0.2rem) !important;
  }

  .footer h2 {
    font-size: calc(var(--section-para-fs) - 0.2rem) !important;
  }

  .footer h3 {
    font-size: calc(var(--section-para-fs) - 0.2rem) !important;
  }
}