/* =============================================================================
   Brand Footer Section (Matching Reference Design Layout)
   Saurjya Acharya Dark Mode Palette (#0e0e0e / #fd5b38 / Plus Jakarta Sans)
============================================================================= */

.brand-footer {
    position: relative;
    background-color: #0c0c0c;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 80px;
    padding-bottom: 40px;
    overflow: hidden;
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    z-index: 10;
}

/* Warm Amber/Orange Ambient Blurry Glow extending smoothly towards left side */
.brand-footer::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(32%, -50%) translateZ(0);
    width: 1400px;
    height: 680px;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at 78% 50%,
        rgba(255, 122, 72, 0.44) 0%,
        rgba(254, 110, 64, 0.38) 10%,
        rgba(253, 98, 58, 0.31) 20%,
        rgba(249, 87, 52, 0.23) 32%,
        rgba(241, 77, 45, 0.16) 44%,
        rgba(229, 68, 38, 0.11) 56%,
        rgba(213, 59, 32, 0.07) 67%,
        rgba(192, 51, 26, 0.04) 77%,
        rgba(168, 43, 21, 0.02) 86%,
        rgba(140, 36, 17, 0.008) 93%,
        rgba(110, 28, 13, 0.002) 97%,
        transparent 100%
    );
    filter: blur(95px);
    pointer-events: none;
    z-index: 1;
    opacity: 0.96;
    will-change: transform, filter;
    backface-visibility: hidden;
}

/* Subtle anti-banding dither screen to eliminate gradient banding steps on displays */
.brand-footer::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
}

.brand-footer .container {
    position: relative;
    z-index: 2;
}

/* 4-Column Grid Layout */
.brand-footer-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.85fr 0.85fr 1.55fr;
    gap: 48px;
    align-items: start;
    margin-bottom: 70px;
}

/* Column 1: Brand Info & Socials */
.footer-col-brand {
    display: flex;
    flex-direction: column;
}

.footer-brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    text-decoration: none;
}

.footer-brand-logo .logo-img {
    height: 38px;
    width: auto;
    object-fit: contain;
}

.footer-brand-logo .brand-name {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.footer-brand-logo .brand-mark {
    width: 28px;
    height: 28px;
    background-color: #fd5b38;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
}

.footer-bio {
    font-size: 14.5px;
    line-height: 1.7;
    color: #8e8e8e;
    margin: 0 0 28px 0;
    max-width: 320px;
}

/* Minimal Social Icons - 20% larger and optically normalized to equal visual size */
.footer-socials {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-social-link {
    color: rgba(255, 255, 255, 0.55);
    font-size: 19.2px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: color 0.25s ease, transform 0.25s ease;
    text-decoration: none;
    line-height: 1;
}

.footer-social-link:hover {
    color: #fd5b38;
    transform: translateY(-2px);
}

.footer-social-link i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Optical balance: narrow glyphs like Facebook 'f' need slightly more font size to match square/round icons */
.footer-social-link .fa-facebook-f {
    font-size: 21.5px;
}

.footer-social-link .fa-linkedin-in {
    font-size: 19.5px;
}

.footer-social-link .fa-instagram {
    font-size: 19px;
}

.footer-social-link .fa-x-twitter {
    font-size: 18.5px;
}

.footer-social-link .fa-pinterest,
.footer-social-link .fa-pinterest-p {
    font-size: 19.5px;
}

.footer-social-link .fa-whatsapp {
    font-size: 20px;
}

/* Columns 2 & 3: Navigation Links */
.footer-col-nav {
    display: flex;
    flex-direction: column;
}

.footer-heading {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.2px;
    margin-bottom: 24px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-nav-item a {
    font-size: 14.5px;
    color: #8e8e8e;
    text-decoration: none;
    transition: color 0.25s ease, transform 0.25s ease;
    display: inline-block;
}

.footer-nav-item a:hover {
    color: #ffffff;
    transform: translateX(3px);
}

/* Column 4: Newsletter */
.footer-col-newsletter {
    display: flex;
    flex-direction: column;
}

.newsletter-desc {
    font-size: 14.5px;
    line-height: 1.7;
    color: #8e8e8e;
    margin: 0 0 24px 0;
    max-width: 380px;
}

/* Integrated Pill Newsletter Box */
.newsletter-pill-form {
    width: 100%;
    max-width: 440px;
}

.newsletter-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 100px;
    padding: 6px 6px 6px 22px;
    box-shadow: none !important;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.newsletter-pill:focus-within {
    border-color: rgba(253, 91, 56, 0.6);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: none !important;
}

.newsletter-input {
    flex-grow: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 14px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    padding: 8px 12px 8px 0;
    min-width: 0;
}

.newsletter-input::placeholder {
    color: #6e6e6e;
    opacity: 1;
}

.newsletter-submit-btn {
    background-color: #fd5b38;
    color: #ffffff;
    border: none;
    outline: none;
    border-radius: 100px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: none !important;
    transition: background-color 0.3s ease, transform 0.25s ease;
}

.newsletter-submit-btn svg {
    transition: transform 0.3s ease;
}

.newsletter-submit-btn:hover {
    background-color: #e04b2a;
    box-shadow: none !important;
    transform: translateY(-1px);
}

.newsletter-submit-btn:hover svg {
    transform: translateX(3px);
}

.newsletter-submit-btn:active {
    transform: scale(0.97);
}

/* Bottom Bar: Divider & Copyright */
.footer-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-copyright {
    font-size: 13.5px;
    color: #666666;
    margin: 0;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 18px;
}

.footer-bottom-dot {
    color: #444444;
    font-size: 10px;
    line-height: 1;
    user-select: none;
}

.footer-bottom-link {
    font-size: 13.5px;
    color: #666666;
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer-bottom-link:hover {
    color: #ffffff;
}

/* =============================================================================
   Responsive Media Queries
============================================================================= */

@media screen and (max-width: 1024px) {
    .brand-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .footer-col-newsletter {
        grid-column: span 2;
    }

    .newsletter-pill-form {
        max-width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .brand-footer {
        padding-top: 55px;
        padding-bottom: 28px;
    }

    /* Extended ambient blurry glow reaching towards left side, smoothly blended */
    .brand-footer::before {
        top: 56%;
        bottom: auto;
        right: 0;
        transform: translate(30%, -50%) translateZ(0);
        width: 880px;
        height: 560px;
        border-radius: 50%;
        background: radial-gradient(
            ellipse at 78% 50%,
            rgba(255, 122, 72, 0.46) 0%,
            rgba(254, 110, 64, 0.40) 10%,
            rgba(253, 98, 58, 0.32) 20%,
            rgba(249, 87, 52, 0.24) 32%,
            rgba(241, 77, 45, 0.17) 44%,
            rgba(229, 68, 38, 0.11) 56%,
            rgba(213, 59, 32, 0.07) 67%,
            rgba(192, 51, 26, 0.038) 77%,
            rgba(168, 43, 21, 0.018) 86%,
            rgba(140, 36, 17, 0.007) 93%,
            rgba(110, 28, 13, 0.002) 97%,
            transparent 100%
        );
        filter: blur(90px);
        opacity: 0.98;
        will-change: transform, filter;
        backface-visibility: hidden;
    }

    /* 2 columns on mobile: Pages on left (column 1), Quick Links on right (column 2) */
    .brand-footer-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        row-gap: 48px;
        margin-bottom: 40px;
    }

    .footer-col-brand {
        grid-column: 1 / -1;
    }

    /* 1. Added generous gapping between social logos and Pages / Quick Links */
    .footer-socials {
        margin-top: 4px;
        margin-bottom: 8px;
    }

    .footer-col-pages,
    .footer-col-nav:nth-of-type(2) {
        grid-column: 1;
    }

    .footer-col-quicklinks,
    .footer-col-nav:nth-of-type(3) {
        grid-column: 2;
    }

    /* 2. Added generous gapping between Newsletter and Pages / Quick Links */
    .footer-col-newsletter {
        grid-column: 1 / -1;
        margin-top: 14px;
    }

    .footer-heading {
        margin-bottom: 18px;
    }

    .footer-nav-list {
        gap: 12px;
    }

    .footer-bio,
    .newsletter-desc {
        max-width: 100%;
    }

    .newsletter-pill {
        padding: 5px 5px 5px 18px;
    }

    .newsletter-submit-btn {
        padding: 9px 18px;
        font-size: 13px;
    }

    /* Remove Privacy Policy and Terms of Service links from bottom ONLY in mobile view */
    .footer-bottom-links {
        display: none !important;
    }

    /* Clean, centered copyright at the bottom in mobile view */
    .footer-bottom-bar {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding-top: 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .footer-copyright {
        font-size: 13px;
        color: #707070;
        text-align: center;
        width: 100%;
        margin: 0;
    }
}