/* ==================================================
DM HEALTH TECHNOLOGY
FOOTER PREMIUM ENTERPRISE 2026
================================================== */

.footer{
    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #071827 0%,
            #0c2741 100%
        );

    color:#fff;

    padding:45px 0 15px;
}

/* ==========================================
TOP ACCENT BAR
========================================== */

.footer::before{
    content:"";

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:3px;

    background:
        linear-gradient(
            90deg,
            #00c6ff,
            #00e5ff,
            #00d89f
        );
}

/* ==========================================
CONTAINER
========================================== */

.footer-content{
    align-items:flex-start;
}

/* ==========================================
COMPANY
========================================== */

.footer-company{
    max-width:420px;
}

.footer-logo{
    width:85px;
    height:auto;

    margin-bottom:12px;

    transition:.3s ease;
}

.footer-logo:hover{
    transform:scale(1.04);
}

.footer-company h4{
    font-size:1.7rem;
    font-weight:800;

    margin-bottom:10px;

    color:#fff;

    letter-spacing:.5px;
}

.footer-company p{
    color:rgba(255,255,255,.72);

    font-size:.95rem;

    line-height:1.8;

    margin-bottom:18px;
}

/* ==========================================
BADGES
========================================== */

.footer-badges{
    display:flex;
    flex-wrap:wrap;
    gap:8px;

    margin-bottom:20px;
}

.footer-badges span{
    padding:7px 12px;

    border-radius:30px;

    background:
        rgba(255,255,255,.05);

    border:
        1px solid rgba(255,255,255,.08);

    font-size:.80rem;

    color:
        rgba(255,255,255,.85);
}

.footer-badges i{
    color:#00d8ff;
    margin-right:5px;
}

/* ==========================================
SOCIAL
========================================== */

.footer-social{
    display:flex;
    gap:10px;
}

.footer-social a{
    width:40px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:10px;

    color:#fff;

    background:
        rgba(255,255,255,.06);

    text-decoration:none;

    transition:.3s ease;
}

.footer-social a:hover{
    background:#00d8ff;
    color:#071827;

    transform:translateY(-3px);
}

/* ==========================================
TITLES
========================================== */

.footer-title{
    position:relative;

    font-size:1.05rem;
    font-weight:700;

    margin-bottom:18px;

    color:#fff;
}

.footer-title::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:45px;
    height:3px;

    border-radius:30px;

    background:
        linear-gradient(
            90deg,
            #00c6ff,
            #00d89f
        );
}

/* ==========================================
LINKS
========================================== */

.footer-links{
    list-style:none;
    margin:0;
    padding:0;
}

.footer-links li{
    margin-bottom:10px;
}

.footer-links a{
    color:rgba(255,255,255,.75);

    text-decoration:none;

    transition:.25s ease;
}

.footer-links a:hover{
    color:#00d8ff;

    padding-left:5px;
}

/* ==========================================
CONTACT
========================================== */

.footer-contact{
    display:flex;
    flex-direction:column;
}

.contact-line{
    display:flex;
    gap:10px;

    margin-bottom:12px;
}

.contact-line i{
    color:#00d8ff;

    margin-top:4px;
}

.contact-line a,
.contact-line span{
    color:rgba(255,255,255,.75);

    text-decoration:none;
}

.contact-line a:hover{
    color:#00d8ff;
}

/* ==========================================
DIVIDER
========================================== */

.footer-divider{
    height:1px;

    margin:25px 0 15px;

    background:
        rgba(255,255,255,.08);
}

/* ==========================================
BOTTOM
========================================== */

.footer-bottom{
    display:flex;

    justify-content:space-between;
    align-items:center;

    gap:15px;

    flex-wrap:wrap;
}

.footer-bottom p{
    margin:0;

    color:
        rgba(255,255,255,.60);

    font-size:.90rem;
}

/* ==========================================
BACK TO TOP
========================================== */

.back-to-top{
    position:fixed;

    right:20px;
    bottom:20px;

    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            #00c6ff,
            #00d89f
        );

    color:#071827;

    text-decoration:none;

    font-size:1rem;

    box-shadow:
        0 8px 20px rgba(0,198,255,.20);

    transition:.3s ease;

    z-index:999;
}

.back-to-top:hover{
    transform:translateY(-4px);

    color:#071827;
}

/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:991px){

    .footer{
        text-align:center;
    }

    .footer-company{
        max-width:100%;
    }

    .footer-social{
        justify-content:center;
    }

    .footer-badges{
        justify-content:center;
    }

    .footer-title::after{
        left:50%;
        transform:translateX(-50%);
    }

    .contact-line{
        justify-content:center;
    }

    .footer-bottom{
        flex-direction:column;
        text-align:center;
    }
}

@media(max-width:768px){

    .footer{
        padding:35px 0 15px;
    }

    .footer-logo{
        width:75px;
    }

    .footer-company h4{
        font-size:1.4rem;
    }

    .back-to-top{
        width:44px;
        height:44px;
    }
}