/* ================= FOOTER WRAPPER ================= */
.footer-wrapper{
    margin-top: 25px;
}

/* ================= MAIN CONTAINER ================= */
.footer-container{
    position: relative;
    overflow: hidden;

    background: linear-gradient(
        180deg,
        #02140f 0%,
        #0b6b45 35%,
        #0f8a5c 70%,
        #1a3f8b 100%
    );

    color: #fff;

    border-top: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.25),
                0 2px 8px rgba(0, 0, 0, 0.15);

    border-radius: 10px 10px 0 0;
}

/* ================= GLOW EFFECT ================= */
.footer-container::before{
    content: "";
    position: absolute;
    bottom: -160px;
    left: -160px;

    width: 450px;
    height: 450px;

    background: radial-gradient(
        circle,
        rgba(255,255,255,0.10),
        transparent 70%
    );

    filter: blur(6px);
    pointer-events: none;
}

/* ================= TITLE ================= */
.footer-title{
    text-align: center;
    padding: 10px 8px;

    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);

    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.footer-title h4{
    margin: 0;
    font-weight: 700;
    letter-spacing: .5px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* ================= LINKS ================= */
.footer-links{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    padding: 10px 8px;
    gap: 25px;
}

.footer-links div{
    min-width: 160px;
}

/* SAFE FIX: avoid layout jump on hover */
.footer-links a{
    display: block;
    color: #f1f1f1;
    text-decoration: none;

    padding: 5px 0;
    font-size: 14px;

    transition: color .25s ease, transform .25s ease;
    position: relative;
}

.footer-links a::before{
    content: "▸";
    margin-right: 6px;
    color: rgba(255,255,255,0.5);
}

.footer-links a:hover{
    color: #ffe082;
    transform: translateX(5px);
}

/* ================= INFO BAR ================= */
.footer-info{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:18px;

    padding:14px;

    background:rgba(255,255,255,0.06);
    backdrop-filter:blur(8px);

    border-top:1px solid rgba(255,255,255,0.12);
    border-bottom:1px solid rgba(255,255,255,0.12);

    font-size:14px;
    text-align:center;
}

/* ===== EACH INFO BOX ===== */
.footer-info > div{
    padding:10px 16px;

    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:10px;

    box-shadow:
        0 6px 16px rgba(0,0,0,0.18);

    transition:0.3s ease;

    min-width:120px;
}

/* HOVER EFFECT */
.footer-info > div:hover{
    transform:translateY(-3px);
    box-shadow:
        0 10px 22px rgba(0,0,0,0.25);
}

/* ================= SOCIAL ================= */
.footer-social{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;

    padding: 8px;
    flex-wrap: wrap;
}

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

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #fff;
    font-size: 17px;

    box-shadow: 0 6px 14px rgba(0,0,0,0.25);

    transition: transform .3s ease, filter .3s ease;
    will-change: transform;
}

.social-icon:hover{
    transform: translateY(-6px) scale(1.10);
    filter: brightness(1.15);
}

/* SOCIAL COLORS */
.facebook{ background:#1877f2; }
.youtube{ background:#ff0000; }
.twitter{ background:#1da1f2; }
.instagram{ background: linear-gradient(45deg,#f09433,#bc1888,#8a3ab9); }
.linkedin{ background:#0077b5; }
.whatsapp{ background:#25d366; }
.email{ background:#6c757d; }

/* ==========================================================
   DEVELOPER BLOCK
========================================================== */

.developer-block{
    display:flex;
    justify-content:center;
    align-items:stretch;
    flex-wrap:wrap;

    gap:20px;
    padding:20px;

    margin-top:15px;

    background:rgba(255,255,255,.06);
    backdrop-filter:blur(12px);

    border-top:1px solid rgba(255,255,255,.12);
}

/* ================= CARD ================= */

.dev-box,
.dev-info{
    flex:1 1 320px;
    max-width:500px;

    padding:20px;

    text-align:center;

    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    border-radius:6px;

    box-shadow:
        0 8px 20px rgba(0,0,0,.18);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

/* ================= HOVER ================= */

.dev-box:hover,
.dev-info:hover{

    transform:translateY(-6px);

    border-color:rgba(255,224,130,.45);

    box-shadow:
        0 14px 28px rgba(0,0,0,.28);

}

/* ================= TITLE ================= */

.dev-box h5,
.dev-info h5{

    margin:0 0 8px;

    color:#ffe082;

    font-size:14px;
    font-weight:600;

    letter-spacing:.8px;
    text-transform:uppercase;

}

/* ================= NAME ================= */

.dev-box h4,
.dev-info h4{

    margin:0 0 10px;

    color:#fff;

    font-size:20px;
    font-weight:700;

}

/* ================= DESCRIPTION ================= */

.dev-box p,
.dev-info p{

    margin:5px 0;

    color:rgba(255,255,255,.92);

    font-size:14px;

    line-height:1.7;

}

/* ================= LINK ================= */

.dev-info a{

    display:block;

    color:#fff;

    text-decoration:none;

    transition:color .3s ease;

}

.dev-info a:hover{

    color:#ffe082;

}



/* ================= BOTTOM BAR ================= */
.footer-bottom{
    text-align: center;
    padding: 12px;

    background: rgba(255,255,255,0.10);
    border-top: 1px solid rgba(255,255,255,0.15);

    font-size: 13px;
}

/* ==========================================================
   FOOTER - MOBILE RESPONSIVE
========================================================== */

@media (max-width:768px){

    /* ================= LINKS ================= */

    .footer-links{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:18px 16px;
        padding:18px;
    }

    .footer-links > div{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        width:100%;
        text-align:center;
        gap:8px;
    }

    /* Third Column */

    .footer-links > div:nth-child(3){
        grid-column:1 / -1;
        max-width:280px;
        width:100%;
        margin:0 auto;
    }

    .footer-links a{
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        padding:5px 7px;
        text-align:center;
        font-size:14px;
        line-height:1.2;
    }

    /* ================= INFO ================= */

    .footer-info{
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:8px;
        padding:14px;
        text-align:center;
    }

    /* ================= DEVELOPER ================= */

    .developer-block{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:18px;
    }

    .dev-box,
    .dev-info{
        flex:none;
        width:100%;
        max-width:500px;
        min-width:0;
        padding:20px;
        text-align:center;
    }

    .dev-box h4,
    .dev-info h4{
        font-size:18px;
    }

    .dev-box h5,
    .dev-info h5{
        font-size:15px;
    }

    .dev-box p,
    .dev-info p{
        font-size:14px;
        line-height:1.6;
    }

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

    .footer-social{
        display:flex;
        justify-content:center;
        align-items:center;
        flex-wrap:wrap;
        gap:12px;
        padding:16px;
    }

    .social-icon{
        width:40px;
        height:40px;
        font-size:16px;
    }

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

    .footer-bottom{
        padding:14px;
        text-align:center;
        font-size:13px;
        line-height:1.6;
    }

}