/* =========================================================
   PC DRIVER BOOSTER FOOTER
   FULLY RESPONSIVE
========================================================= */

.site-footer {
    width: 100%;
    margin: 0;

    padding:
        clamp(42px, 5vw, 72px)
        clamp(18px, 4vw, 64px)
        clamp(24px, 3vw, 38px);

    background: #0b0f19 !important;
    color: #ffffff;

    box-sizing: border-box;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.footer-container {
    width: 100%;
    max-width: 1600px;

    margin: 0 auto;

    box-sizing: border-box;
}


/* =========================================================
   MAIN FOOTER GRID
========================================================= */

.footer-main {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(320px, 2.2fr)
        minmax(140px, 1fr)
        minmax(160px, 1fr)
        minmax(140px, 1fr);

    column-gap: clamp(30px, 4vw, 72px);
    row-gap: 40px;

    padding-bottom: clamp(38px, 4vw, 58px);

    box-sizing: border-box;
}


/* prevent grid overflow */

.footer-main > * {
    min-width: 0;
}


/* =========================================================
   BRAND
========================================================= */

.footer-brand {
    width: 100%;
    max-width: 520px;

    min-width: 0;
}


.footer-logo {
    display: inline-flex;
    align-items: center;

    max-width: 100%;

    margin-bottom: 24px;

    text-decoration: none !important;
}


.footer-logo-img {
    display: block;

    width: auto;
    height: auto;

    max-width: min(235px, 100%);
    max-height: 46px;

    object-fit: contain;
}


.footer-brand h2 {
    width: 100%;
    max-width: 480px;

    margin: 0 0 20px;

    color: #ffffff !important;

    font-size: clamp(23px, 2vw, 30px);
    line-height: 1.22;

    font-weight: 700;

    letter-spacing: -0.5px;

    overflow-wrap: break-word;
}


.footer-brand p {
    width: 100%;
    max-width: 500px;

    margin: 0;

    color: #94a3b8 !important;

    font-size: clamp(13px, 1vw, 14px);
    line-height: 1.75;

    overflow-wrap: break-word;
}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.footer-column {
    display: flex;

    flex-direction: column;
    align-items: flex-start;

    gap: 14px;

    padding-top: 5px;

    min-width: 0;
}


.footer-column h4 {
    margin: 0 0 8px;

    color: #f59e0b !important;

    font-size: 11px;

    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 1.4px;
}


.footer-column a {
    display: inline-block;

    max-width: 100%;

    color: #cbd5e1 !important;

    text-decoration: none !important;

    font-size: 13px;

    line-height: 1.45;

    overflow-wrap: anywhere;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


/* hover only where hover is supported */

@media (hover: hover) {

    .footer-column a:hover {
        color: #38bdf8 !important;
        transform: translateX(4px);
    }

}


/* =========================================================
   DISCLAIMER
========================================================= */

.footer-disclaimer {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 14px;

    padding:
        clamp(15px, 2vw, 20px)
        clamp(16px, 2vw, 24px);

    background: #111827 !important;

    border: 1px solid #1e293b;

    border-radius: 16px;

    box-sizing: border-box;

    min-width: 0;
}


.disclaimer-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(245, 158, 11, 0.12);

    color: #f59e0b !important;

    font-size: 14px;
}


.footer-disclaimer p {
    flex: 1;

    min-width: 0;

    margin: 0;

    color: #64748b !important;

    font-size: clamp(11px, 0.9vw, 12px);

    line-height: 1.65;

    overflow-wrap: anywhere;
}


.footer-disclaimer strong {
    color: #e2e8f0 !important;

    font-weight: 700;
}


/* =========================================================
   OPTIONAL FOOTER BOTTOM
========================================================= */

.footer-bottom {
    width: 100%;

    min-height: 65px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    position: relative;

    padding-top: 22px;

    margin-top: 28px;

    border-top: 1px solid #1e293b;

    box-sizing: border-box;
}


.footer-bottom > p {
    margin: 0;

    color: #64748b !important;

    font-size: 11px;

    font-weight: 600;

    line-height: 1.6;
}


.footer-status {
    display: flex;

    align-items: center;

    gap: 5px;

    margin-right: 60px;

    color: #64748b !important;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.7px;
}


.footer-status b {
    color: #0047ff !important;
}


/* =========================================================
   BACK TO TOP
========================================================= */

.back-to-top {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #0047ff,
            #0038c7
        ) !important;

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 14px;

    box-shadow:
        0 4px 14px rgba(0, 71, 255, 0.3);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


@media (hover: hover) {

    .back-to-top:hover {
        color: #ffffff !important;

        transform: translateY(-3px);

        box-shadow:
            0 8px 22px rgba(0, 71, 255, 0.45);
    }

}


/* =========================================================
   LARGE DESKTOP
   1440px+
========================================================= */

@media (min-width: 1440px) {

    .site-footer {
        padding-left: clamp(50px, 5vw, 90px);
        padding-right: clamp(50px, 5vw, 90px);
    }

    .footer-main {
        grid-template-columns:
            minmax(400px, 2.3fr)
            minmax(150px, 1fr)
            minmax(180px, 1fr)
            minmax(150px, 1fr);
    }

}


/* =========================================================
   LAPTOP / SMALL DESKTOP
   1024px - 1279px
========================================================= */

@media (max-width: 1279px) {

    .footer-main {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        column-gap: 40px;
        row-gap: 38px;
    }


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

        max-width: 680px;
    }


    .footer-brand h2 {
        max-width: 600px;
    }


    .footer-brand p {
        max-width: 650px;
    }

}


/* =========================================================
   TABLET LANDSCAPE / SMALL LAPTOP
   <= 1024px
========================================================= */

@media (max-width: 1024px) {

    .site-footer {
        padding:
            52px
            clamp(24px, 4vw, 42px)
            28px;
    }


    .footer-main {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 35px;
    }

}


/* =========================================================
   TABLET PORTRAIT
   <= 900px
========================================================= */

@media (max-width: 900px) {

    .footer-main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 42px;
        row-gap: 38px;
    }


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


    /*
      Third column can naturally continue
      onto the next row.
    */


    .footer-disclaimer {
        align-items: flex-start;
    }

}


/* =========================================================
   TABLET / LARGE MOBILE
   <= 700px
========================================================= */

@media (max-width: 700px) {

    .site-footer {
        padding:
            45px
            20px
            24px;
    }


    .footer-main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 24px;
        row-gap: 34px;

        padding-bottom: 38px;
    }


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


    .footer-logo {
        margin-bottom: 20px;
    }


    .footer-logo-img {
        max-width: 205px;
    }


    .footer-brand h2 {
        font-size: clamp(22px, 5vw, 26px);

        margin-bottom: 16px;
    }


    .footer-brand p {
        font-size: 13px;
        line-height: 1.7;
    }


    .footer-column {
        gap: 13px;
    }


    .footer-column h4 {
        font-size: 10px;
    }


    .footer-column a {
        font-size: 12.5px;
    }


    .footer-disclaimer {
        align-items: flex-start;

        gap: 12px;

        padding: 15px;

        border-radius: 14px;
    }


    .disclaimer-icon {
        width: 36px;
        height: 36px;

        flex-basis: 36px;

        font-size: 12px;
    }


    .footer-disclaimer p {
        font-size: 11px;
    }


    .footer-bottom {
        min-height: auto;

        align-items: flex-start;

        flex-direction: column;

        gap: 15px;

        padding-bottom: 56px;
    }


    .footer-status {
        margin-right: 0;
    }


    .back-to-top {
        width: 43px;
        height: 43px;
    }

}


/* =========================================================
   MOBILE
   <= 520px
========================================================= */

@media (max-width: 520px) {

    .site-footer {
        padding:
            40px
            18px
            22px;
    }


    .footer-main {
        grid-template-columns: 1fr;

        row-gap: 32px;

        padding-bottom: 34px;
    }


    .footer-brand {
        grid-column: auto;

        max-width: 100%;
    }


    .footer-column {
        width: 100%;

        padding-top: 0;
    }


    .footer-column h4 {
        margin-bottom: 4px;
    }


    .footer-column a {
        width: fit-content;

        font-size: 13px;
    }


    .footer-logo-img {
        max-width: 195px;
    }


    .footer-brand h2 {
        max-width: 100%;

        font-size: 23px;

        line-height: 1.25;
    }


    .footer-brand p {
        max-width: 100%;
    }


    .footer-disclaimer {
        width: 100%;

        flex-direction: column;

        gap: 12px;

        padding: 16px;
    }


    .disclaimer-icon {
        width: 38px;
        height: 38px;

        flex-basis: 38px;
    }


    .footer-disclaimer p {
        width: 100%;

        font-size: 11px;

        line-height: 1.65;
    }

}


/* =========================================================
   SMALL MOBILE
   <= 380px
========================================================= */

@media (max-width: 380px) {

    .site-footer {
        padding:
            36px
            14px
            20px;
    }


    .footer-logo-img {
        max-width: 175px;
    }


    .footer-brand h2 {
        font-size: 21px;
    }


    .footer-brand p {
        font-size: 12px;
    }


    .footer-column a {
        font-size: 12px;
    }


    .footer-disclaimer {
        padding: 14px;
    }


    .footer-disclaimer p {
        font-size: 10.5px;
    }

}


/* =========================================================
   EXTRA SMALL MOBILE
   <= 320px
========================================================= */

@media (max-width: 320px) {

    .site-footer {
        padding-left: 12px;
        padding-right: 12px;
    }


    .footer-brand h2 {
        font-size: 20px;
    }


    .footer-logo-img {
        max-width: 165px;
    }


    .footer-column {
        gap: 11px;
    }


    .footer-disclaimer {
        border-radius: 12px;
    }

}