/* =========================================================
   FOOTER VARIABLES
========================================================= */

.ds-premium-footer {

    --footer-dark: #0B1220;
    --footer-dark-2: #111827;

    --footer-text: #E5E7EB;
    --footer-muted: #8B96A8;

    --footer-accent: #F59E0B;
    --footer-accent-hover: #D97706;

    --footer-border: rgba(255, 255, 255, .09);

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            #111827 0%,
            #0B1220 100%);

    color: #fff;

}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.ds-footer-bg {

    position: absolute;

    inset: 0;

    opacity: .035;

    pointer-events: none;

    background-image:

        linear-gradient(90deg,
            rgba(255, 255, 255, .9) 1px,
            transparent 1px),

        linear-gradient(rgba(255, 255, 255, .9) 1px,
            transparent 1px);

    background-size: 72px 72px;

}


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

.ds-footer-wrap {

    position: relative;

    z-index: 2;

    width:
        min(calc(100% - 80px),
            1400px);

    margin: auto;

}


/* =========================================================
   TOP CTA
========================================================= */

.ds-footer-cta {

    min-height: 280px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 70px;

    padding: 25px 0;

    border-bottom:
        1px solid var(--footer-border);

}


.ds-cta-left {

    max-width: 720px;

}


.ds-footer-label {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color: var(--footer-accent);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 2px;

}


.ds-footer-label span {

    width: 7px;

    height: 7px;

    background: var(--footer-accent);

    border-radius: 50%;

    box-shadow:
        0 0 0 5px rgba(245, 158, 11, .10);

}


.ds-cta-left h2 {

    margin: 0;

    font-size:
        clamp(38px, 4.4vw, 44px);

    line-height: .98;

    letter-spacing: -3px;

    font-weight: 850;

}


.ds-cta-left h2 em {

    display: block;

    color: #8993A2;

    font-style: normal;

}


.ds-cta-left p {

    max-width: 580px;

    margin: 22px 0 0;

    color: var(--footer-muted);

    font-size: 15px;

    line-height: 1.75;

}


/* =========================================================
   CTA BUTTON
========================================================= */

.ds-cta-right {

    width: 270px;

    flex: none;

}


.ds-quote-btn {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    height: 61px;

    padding-left: 22px;

    background: var(--footer-accent);

    color: #111827;

    text-decoration: none;

    border-radius: 6px;

    font-size: 15px;

    font-weight: 900;

    letter-spacing: .5px;

    transition: .35s ease;

}


.ds-quote-btn i {

    width: 40px;

    height: 40px;

    margin-right: 12px;

    display: grid;

    place-items: center;

    background: #111827;

    border-radius: 4px;

    transition: .35s ease;

}


.ds-quote-btn svg {

    width: 19px;

    height: 19px;

    fill: none;

    stroke: #fff;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.ds-quote-btn:hover {

    background: var(--footer-accent-hover);

    transform: translateY(-3px);

}


.ds-quote-btn:hover i {

    transform: rotate(45deg);

}


.ds-call-link {

    display: flex;

    flex-direction: column;

    gap: 5px;

    margin-top: 17px;

    text-decoration: none;

}


.ds-call-link span {

    color: #657185;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.6px;

}


.ds-call-link strong {

    color: #fff;

    font-size: 18px;

    font-weight: 600;

}


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

.ds-footer-main {

    display: grid;

    grid-template-columns:
        1.45fr .65fr 1.1fr .95fr;

    gap: 65px;

    padding: 55px 0 50px;

}


/* =========================================================
   LOGO IMAGE
========================================================= */

.ds-footer-logo {

    display: inline-flex;

    align-items: center;

    text-decoration: none;

}


.ds-footer-logo img {

    display: block;

    width: auto;

    max-width: 260px;

    height: 58px;

    object-fit: contain;

    object-position: left center;

}


/*
IMPORTANT:
If your uploaded logo has a dark background,
use the version with transparent background.
*/


.ds-footer-brand>p {

    max-width: 400px;

    margin: 25px 0 30px;

    color: #8E99AA;

    font-size: 16px;

    line-height: 1.75;

}


/* =========================================================
   STATS
========================================================= */

.ds-brand-stats {

    display: flex;

    align-items: center;

    gap: 35px;

}


.ds-brand-stats>div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.ds-brand-stats>div+div {

    padding-left: 35px;

    border-left:
        1px solid var(--footer-border);

}


.ds-brand-stats strong {

    color: #fff;

    font-size: 25px;

    line-height: 1;

    font-weight: 800;

}


.ds-brand-stats strong span {

    color: var(--footer-accent);

}


.ds-brand-stats small {

    color: #647084;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.1px;

}


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

.ds-footer-col {

    display: flex;

    flex-direction: column;

}


.ds-footer-col h4 {

    margin: 4px 0 25px;

    color: var(--footer-accent);

    font-size: 15px;

    font-weight: 900;

    letter-spacing: 2px;

}


.ds-footer-col>a {

    width: max-content;

    margin-bottom: 14px;

    color: #AAB4C2;

    text-decoration: none;

    font-size: 15px;

    transition: .3s ease;

}


.ds-footer-col>a:hover {

    color: #fff;

    transform: translateX(4px);

}


.ds-footer-col>a:hover::before {

    content: "→";

    margin-right: 7px;

    color: var(--footer-accent);

}


/* =========================================================
   CONTACT
========================================================= */

.ds-contact-row {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 20px;

}


.ds-contact-icon {

    width: 35px;

    height: 35px;

    flex: none;

    display: grid;

    place-items: center;

    border:
        1px solid rgba(245, 158, 11, .30);

    border-radius: 50%;

    color: var(--footer-accent);

    transition: .3s ease;

}


.ds-contact-icon svg {

    width: 20px;

    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.ds-contact-row:hover .ds-contact-icon {

    background: var(--footer-accent);

    color: #111827;

}


.ds-contact-row>div:last-child {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.ds-contact-row small {

    color: #657185;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.ds-contact-row a,
.ds-contact-row div:last-child>span {

    color: #E5E7EB;

    text-decoration: none;

    font-size: 15px;

}


.ds-contact-row a:hover {

    color: var(--footer-accent);

}


/* =========================================================
   SOCIAL
========================================================= */

.ds-socials {

    display: flex;

    gap: 8px;

    margin-top: 3px;

}


.ds-socials a {

    width: 36px;

    height: 36px;

    display: grid;

    place-items: center;

    color: #8490A2;

    border:
        1px solid rgba(255, 255, 255, .14);

    border-radius: 50%;

    text-decoration: none;

    transition: .3s ease;

}


.ds-socials svg {

    width: 20px;

    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.ds-socials a:hover {

    color: #111827;

    background: var(--footer-accent);

    border-color: var(--footer-accent);

    transform: translateY(-3px);

}


/* =========================================================
   BOTTOM
========================================================= */

.ds-footer-bottom {

    min-height: 76px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 30px;

    border-top:
        1px solid var(--footer-border);

}


.ds-copy {

    color: #596577;

    font-size: 15px;

}


.ds-legal {

    display: flex;

    align-items: center;

    gap: 25px;

}


.ds-legal a {

    color: #596577;

    text-decoration: none;

    font-size: 15px;

    transition: .3s ease;

}


.ds-legal a:hover {

    color: var(--footer-accent);

}


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

.ds-back-top {

    justify-self: end;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 0;

    border: 0;

    background: none;

    color: #8A94A4;

    cursor: pointer;

}


.ds-back-top span {

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.ds-back-top i {

    width: 35px;

    height: 35px;

    display: grid;

    place-items: center;

    border:
        1px solid rgba(255, 255, 255, .15);

    border-radius: 50%;

    color: var(--footer-accent);

    transition: .3s ease;

}


.ds-back-top svg {

    width: 20px;

    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.ds-back-top:hover i {

    background: var(--footer-accent);

    color: #111827;

    transform: translateY(-3px);

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1050px) {

    .ds-footer-main {

        grid-template-columns:
            1.3fr 1fr 1fr;

        gap: 50px;

    }


    .ds-footer-brand {

        grid-column: 1 / -1;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:800px) {

    .ds-footer-wrap {

        width: calc(100% - 40px);

    }


    .ds-footer-cta {

        flex-direction: column;

        align-items: flex-start;

        gap: 35px;

        padding: 55px 0;

    }


    .ds-cta-right {

        width: 100%;

        max-width: 360px;

    }


    .ds-footer-main {

        grid-template-columns: 1fr 1fr;

        gap: 45px 30px;

    }


    .ds-footer-brand {

        grid-column: 1 / -1;

    }


    .ds-footer-bottom {

        grid-template-columns: 1fr;

        gap: 18px;

        padding: 22px 0;

    }


    .ds-back-top {

        justify-self: start;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:520px) {

    .ds-footer-wrap {

        width: calc(100% - 28px);

    }


    .ds-cta-left h2 {

        font-size: 40px;

        letter-spacing: -2px;

    }


    .ds-footer-main {

        grid-template-columns: 1fr;

        gap: 40px;

    }


    .ds-footer-brand {

        grid-column: auto;

    }


    .ds-footer-logo img {

        max-width: 220px;

        height: 52px;

    }


    .ds-brand-stats {

        gap: 25px;

    }


    .ds-brand-stats>div+div {

        padding-left: 25px;

    }


    .ds-legal {

        flex-wrap: wrap;

        gap: 12px 20px;

    }

}