/* ==============================================================

   WIDECOM FOOTER — 2025

   DarkTech Ultra + Premium Separators

============================================================== */



.site-footer {

    background: #020617;

    padding: 80px 0 40px;

    color: #e2e8f0;

    border-top: 1px solid rgba(148,163,184,0.15);

}



.footer-inner {

    max-width: 1500px;

    margin: auto;

    padding: 0 30px;

}



/* ==============================================================

   GRID STRUCTURE — NEW VERSION

============================================================== */



.footer-grid {

    display: grid;

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

    gap: 70px;

    position: relative;

}



/* COLUMN BASE */

.footer-column {

    position: relative;

    padding: 0 35px;

}



/* DESKTOP SEPARATORS */

.footer-column:not(:first-child)::before {

    content: "";

    position: absolute;

    left: -1px;

    top: 5%;

    bottom: 5%;

    width: 2px;



    background: linear-gradient(

        to bottom,

        transparent,

        rgba(56,189,248,0.45),

        transparent

    );

    opacity: 0.45;

}



/* ==============================================================

   RESPONSIVE GRID UPGRADE

============================================================== */



@media(max-width: 1100px) {

    .footer-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 50px;

    }



    .footer-column {

        padding: 0 20px;

    }



    .footer-column::before {

        display: none !important;

    }

}



/* MOBILE — stack + horizontal separators */

@media(max-width: 600px) {

    .footer-grid {

        grid-template-columns: 1fr;

        text-align: center;

    }



    .footer-column {

        padding: 0 10px;

        border-bottom: 1px solid rgba(148,163,184,0.18);

        padding-bottom: 25px;

    }



    .footer-column:last-child {

        border-bottom: none;

    }



    .footer-column::before {

        display: none !important;

    }

}



/* ==============================================================

   BRAND

============================================================== */



.footer-brand {

    display: flex;

    align-items: center;

    gap: 14px;

    text-decoration: none;

}



@media(max-width:600px){

    .footer-brand { justify-content: center; }

}



.footer-brand-img {

    width: 70px;

    height: 70px;

    filter: drop-shadow(0 0 12px rgba(56,189,248,0.35));

}



.footer-brand-text {

    font-size: 22px;

    font-weight: 600;

    color: #fff;

}



.footer-about {

    text-align: justify;

    hyphens: auto;

    max-width: 420px;

    margin-top: 14px;

}



@media(max-width:600px){

    .footer-about {

        margin-left: auto;

        margin-right: auto;

        max-width: 100%;

    }

}



/* ==============================================================

   LINKS

============================================================== */



.footer-column h4 {

    font-size: 17px;

    font-weight: 700;

    margin-bottom: 18px;

    color: #fff;

}



.footer-column ul {

    list-style: none;

    margin: 0;

    padding: 0;

}



.footer-column ul li {

    margin-bottom: 12px;

}



.footer-column a {

    color: #cbd5e1;

    text-decoration: none;

    font-size: 15px;

    transition: 0.25s ease;

}



.footer-column a:hover {

    color: #38bdf8;

    padding-left: 6px;

}



/* ==============================================================

   CONTACT AREA

============================================================== */



.footer-contact .contact-label {

    font-size: 14px;

    color: #94a3b8;

}



.footer-contact .contact-detail a {

    color: #cbd5e1;

    font-weight: 600;

    text-decoration: none;

    font-size: 15px;

}



.footer-contact .contact-detail a:hover {

    color: #38bdf8;

}



/* ==============================================================

   SOCIAL ICONS

============================================================== */



.footer-socials {

    display: flex;

    gap: 16px;

    margin-top: 18px;

}



@media(max-width:600px){

    .footer-socials { justify-content: center; }

}



.social-link {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: rgba(255,255,255,0.05);

    border: 1px solid rgba(148,163,184,0.25);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #cbd5e1;

    transition: 0.25s ease;

}



.social-link:hover {

    background: rgba(56,189,248,0.18);

    border-color: #38bdf8;

    color: #38bdf8;

    transform: translateY(-3px);

}



/* ==============================================================

   BOTTOM BAR

============================================================== */



.footer-bottom {

    border-top: 1px solid rgba(148,163,184,0.18);

    padding-top: 26px;

    margin-top: 60px;

    text-align: center;

}



.footer-bottom p {

    margin: 0 0 12px 0;

    font-size: 15px;

    color: #94a3b8;

}



.footer-legal-links {

    display: flex;

    gap: 22px;

    flex-wrap: wrap;

    justify-content: center;

}



.footer-legal-links a {

    color: #94a3b8;

    text-decoration: none;

    font-size: 14px;

    transition: 0.25s ease;

}



.footer-legal-links a:hover {

    color: #38bdf8;

}