ხარვეზიანი ფუტერი

ხარვეზიანი ფუტერი

body {
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #f0f2f5;
}

.extra-footer {
  padding: 0; /* სიმაღლეში არანაირი ზედმეტი სივრცე */
}

.footer-content {
  display: flex;
  justify-content: space-between;
  gap: 80px;
  padding: 0 80px;
} 

.footer-column {
    flex: 1;
    min-width: 220px;
    margin-bottom: 30px;
    box-sizing: border-box;
    padding: 0 15px;
	
}

.footer-logo-column {
    flex: 1.1;
    min-width: 80px;
    margin-right: 80px;
    margin-top: 38px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-left: 0;
}

.footer-logo {
  width: 160px; /* ან უფრო მცირე — 140px, 120px საჭიროებისამებრ */
  height: auto;
}


.footer-tagline {
    font-size: 14px;
    color: #b0b0b0;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 20px;
    max-width: 200px;
}

.footer-column:last-of-type {
    margin-right: 0;
}

.contact-column {
    flex: 1.2;
    min-width: 280px;
}

.footer-title {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 20px;
    text-transform: uppercase;
    position: relative;
    cursor: default;
}

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

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

.footer-column ul li a {
    font-size: 14px;
    color: #e0e0e0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-column ul li a:hover {
    color: #ffffff;
}

.contact-info {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 10px;
}

.contact-info i {
    margin-right: 10px;
    color: #ffffff;
}

.company-address {
    font-size: 14px;
    color: #b0b0b0;
    line-height: 1.6;
    margin-top: 15px;
    margin-bottom: 25px;
}

/* ქვემოთ ჩამოსვლა ლოგოს გარდა ყველა სვეტისთვის */
.footer-column:not(.footer-logo-column) {
  margin-top: 25px;
}

/* ✅ UPDATED: Social Icons - Horizontal Layout */
.social-icons {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    flex-wrap: nowrap;
}

.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #777;
    border-radius: 4px;
    color: #e0e0e0;
    font-size: 16px;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.social-icon:hover {
    background-color: #4a485a;
    border-color: #e0e0e0;
}

.copyright-bar {
    background-color: #f7b731;
    color: #191919;
    text-align: center;
    padding: 10px 20px;
    font-size: 14px;
    margin-top: 0px;
    box-sizing: border-box;
}

.copyright-bar p {
    margin: 0;
    font-weight: bold;
}

.footer-links-column,
.brands-column,
.footer-programs-column,
.footer-contact-column {
  margin-top: 25px;
}

/* ჰორიზონტალურად დაშორება */
.footer-content {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  padding: 0 60px;
}

/* --- Mobile Specific Styles (Accordion) --- */
@media (max-width: 768px) {
    .extra-footer {
        padding: 0; /* Remove padding from the main footer container on mobile */
  }
    }

    .footer-content {
        flex-direction: column; /* Stack columns vertically */
        align-items: center; /* Center all column items on mobile */
        padding: 0 15px; /* Slightly less horizontal padding for mobile content */
        gap: 0; /* Ensure no flex gap when stacked */
    }

    .footer-column {
        flex: unset; /* Reset flex properties */
        min-width: unset; /* Remove min-width */
        width: 100%; /* Full width */
        margin: 0; /* Remove all margins for columns on mobile */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separator line */
        padding: 0; /* Remove padding from the column itself */
        box-sizing: border-box; /* Ensure padding/border are included in element's total size */
    }

    /* Specific adjustments for the logo column on mobile */
    .footer-logo-column {
        padding: 20px 15px; /* Added horizontal padding to align with text */
        margin-bottom: 0; /* No bottom margin, border handles separation */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separator line */
        
        /* UPDATED FOR LOGO AND TAGLINE SIDE-BY-SIDE WITH SPACE-BETWEEN */
        display: flex; /* Make it a flex container */
        flex-direction: row; /* Arrange items in a row */
        align-items: center; /* Vertically center logo and tagline */
        justify-content: flex-start; /* Align contents to the left */
        gap: 15px; /* Adjusted gap: More space between logo and tagline */
        text-align: left; /* Ensure any text within the column is left-aligned */
    }

    .footer-logo {
        max-width: 60px !important; /* !important to ensure size change */
        height: auto;
        margin: 0 !important; /* Remove all default margins to allow flexbox to control spacing */
        flex-shrink: 0; /* Prevent logo from shrinking */
    }

    .footer-tagline {
        font-size: 13px; /* Smaller font for tagline on mobile */
        margin: 0 !important; /* Remove all default margins from tagline */
        line-height: 1.2; /* Adjust line height if needed for better alignment */
        flex-grow: 1; /* Allow tagline to take up available space */
    }

    .footer-column:last-of-type {
        border-bottom: none; /* No border for the last column */
    }

    .footer-title {
        margin: 0; /* Remove all margins from the title */
        cursor: pointer; /* Indicate it's clickable */
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px; /* Changed padding to 15px to align with logo's new padding */
        font-size: 16px; /* Ensure title font size is consistent */
        text-align: left; /* Ensure title is left-aligned */
    }

    /* Hide content by default on mobile */
    .footer-column ul,
    .footer-column .contact-info,
    .footer-column .company-address,
    .footer-column .social-icons {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out; /* Add margin to transition */
        opacity: 0;
        pointer-events: none; /* Disable clicks when hidden */
        margin: 0; /* Ensure no margins when hidden */
        width: 100%; /* Ensure these elements take full width when hidden */
    }

    /* Show content when .footer-column has .open class */
    .footer-column.open ul,
    .footer-column.open .contact-info,
    .footer-column.open .company-address,
    .footer-column.open .social-icons {
        max-height: 500px; /* Adjust as needed, ensure it's larger than content */
        opacity: 1;
        pointer-events: auto; /* Enable clicks when open */
        transition: max-height 0.5s ease-in, opacity 0.5s ease-in, margin 0.5s ease-in; /* Smoother transition for opening */
        margin-top: 10px; /* Space after title when open */
        margin-bottom: 10px; /* Space before next section/end of column when open */
        display: block; /* Ensure these block elements take full width */
        text-align: left; /* Align content to the left when open */
        padding-left: 15px; /* Add left padding to align with the titles */
        padding-right: 15px; /* Add right padding for consistency */
    }

    /* Adjust specific elements within the opened section for better spacing */
    .footer-column.open ul {
        padding-bottom: 10px; /* Add padding to the bottom of the opened list */
    }
    .footer-column.open ul li {
        margin-bottom: 8px; /* Slightly reduce space between list items when open */
        font-size: 14px; /* Ensure link font size is consistent */
        text-align: left; /* Left align list items */
    }
    .footer-column.open ul li:last-child {
        margin-bottom: 0; /* No bottom margin for the last list item */
    }

    .contact-column.open .contact-info {
        margin-top: 0; /* Reset default margin for contact-info */
        margin-bottom: 8px; /* Small margin between contact lines */
        font-size: 14px; /* Ensure contact info font size is consistent */
        justify-content: flex-start; /* Align contact info elements to the left */
    }
    .contact-column.open .contact-info:first-of-type {
        margin-top: 10px; /* Add top margin only for the first contact-info item after title */
    }
    .contact-column.open .company-address {
        margin-top: 10px; /* Space before addresses */
        margin-bottom: 10px; /* Space after addresses */
        font-size: 14px; /* Ensure address font size is consistent */
    }

    /* UPDATED Social Icons - Force Horizontal Layout on Mobile */
    .contact-column .social-icons {
        display: flex !important; /* Force flexbox */
        flex-direction: row !important; /* Force horizontal direction */
        flex-wrap: wrap !important; /* Allow wrapping if icons overflow */
        justify-content: flex-start !important; /* Align icons to the left */
        padding-left: 15px; /* Align with other content's padding */
        padding-right: 15px;
        box-sizing: border-box; /* Include padding in element's total width */
    }

    .contact-column .social-icon {
        margin-right: 10px !important; /* Space between icons */
        margin-bottom: 10px !important; /* Space below if wrapped */
    }

    /* Adjust social icon alignment within the open state (redundant but safe with !important) */
    .contact-column.open .social-icons {
        justify-content: flex-start !important; /* Ensure left alignment when open */
        /* display: flex;  -- Not needed here because it's already set above with !important */
        /* flex-direction: row; -- Not needed here */
    }


    /* Arrow Icon for Accordion Titles */
    .footer-title::after {
        content: '\f107'; /* FontAwesome angle-down icon */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900; /* For solid icon */
        position: absolute;
        right: 15px; /* Aligned to the right with 15px padding */
        top: 50%;
        transform: translateY(-50%) rotate(0deg);
        transition: transform 0.3s ease;
    }

    .footer-title.active::after {
        transform: translateY(-50%) rotate(180deg); /* Rotate arrow when active */
    }

    .copyright-bar {
        margin-top: 0; /* Remove top margin from copyright bar on mobile */
        padding: 10px 15px; /* Adjust padding for copyright bar on mobile */
    }
}