/* =========================================================
   PRINTMANIA — PREMIUM MODERN FOOTER
   Boje sajta:
   Cyan  #00bfff
   Pink  #ff00aa
========================================================= */

.footer{
    position:relative;
    width:100%;
    margin-top:80px;

    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(0,191,255,.075),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 0%,
            rgba(255,0,170,.065),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #090b10 0%,
            #07090d 100%
        );

    color:#fff;

    overflow:hidden;

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


/* =========================================================
   GLOW
========================================================= */

.footer::before{
    content:"";

    position:absolute;

    top:-260px;
    left:50%;

    width:900px;
    height:420px;

    transform:translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(0,191,255,.09) 0%,
            rgba(255,0,170,.055) 32%,
            transparent 70%
        );

    filter:blur(8px);

    pointer-events:none;
}


/* =========================================================
   DONJA SUPTILNA LINIJA
========================================================= */

.footer::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,191,255,.35),
            rgba(255,0,170,.35),
            transparent
        );

    pointer-events:none;
}


/* =========================================================
   GORNJI DEO
   VELICINA POLJA OSTAVLJENA ISTA
========================================================= */

.footer-top{
    position:relative;

    z-index:2;

    width:100%;

    max-width:1500px;

    margin:0 auto;

    padding:70px 60px 58px;

    display:grid;

    grid-template-columns:
        1.65fr
        .9fr
        .9fr
        1.15fr;

    column-gap:65px;

    align-items:start;
}


/* =========================================================
   OPIS / LOGO
========================================================= */

.footer-about{
    display:flex;

    flex-direction:column;

    align-items:flex-start;
}


.footer-logo{
    position:relative;

    display:inline-flex;

    align-items:center;

    width:max-content;

    margin-bottom:22px;

    text-decoration:none;
}


.footer-logo::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:45px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            #00bfff,
            #ff00aa
        );

    border-radius:20px;

    opacity:.8;

    transition:
        width .3s ease,
        opacity .3s ease;
}


.footer-logo:hover::after{
    width:80px;

    opacity:1;
}


.footer-logo img{
    display:block;

    width:auto;

    max-width:270px;
    max-height:95px;

    object-fit:contain;

    transition:
        transform .3s ease,
        opacity .3s ease,
        filter .3s ease;
}


.footer-logo:hover img{
    transform:translateY(-2px);

    opacity:.92;

    filter:
        drop-shadow(0 0 14px rgba(0,191,255,.12));
}


.footer-about p{
    margin:0;

    max-width:460px;

    color:#989ba3;

    font-size:18px;

    line-height:1.7;

    font-weight:400;
}


/* =========================================================
   KOLONE
========================================================= */

.footer-column{
    position:relative;

    min-width:0;
}


/* =========================================================
   NASLOVI
========================================================= */

.footer-top h3{
    position:relative;

    margin:0 0 25px;

    padding:0;

    color:#fff;

    font-size:21px;

    line-height:1.3;

    font-weight:700;

    letter-spacing:.15px;
}


.footer-top h3::after{
    content:"";

    display:block;

    width:38px;
    height:3px;

    margin-top:10px;

    background:
        linear-gradient(
            90deg,
            #00bfff,
            #ff00aa
        );

    border-radius:20px;

    box-shadow:
        0 0 10px rgba(0,191,255,.18);

    transition:
        width .3s ease;
}


.footer-top > div:hover h3::after{
    width:58px;
}


/* =========================================================
   DRUSTVENE MREZE
========================================================= */

.social-icons{
    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;
}


.social-icons a{
    position:relative;

    width:56px;
    height:56px;

    display:flex;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );

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

    border-radius:15px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035);

    overflow:hidden;

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


.social-icons a::before{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(0,191,255,.14),
            transparent 45%,
            rgba(255,0,170,.12)
        );

    opacity:0;

    transition:opacity .3s ease;
}


.social-icons a:hover{
    transform:
        translateY(-5px)
        scale(1.03);

    border-color:rgba(0,191,255,.38);

    background:
        linear-gradient(
            145deg,
            rgba(0,191,255,.10),
            rgba(255,0,170,.07)
        );

    box-shadow:
        0 12px 28px rgba(0,0,0,.3),
        0 0 18px rgba(0,191,255,.08);
}


.social-icons a:hover::before{
    opacity:1;
}


.social-icons img{
    position:relative;

    z-index:1;

    width:26px;
    height:26px;

    display:block;

    object-fit:contain;

    transition:
        transform .3s ease;
}


.social-icons a:hover img{
    transform:scale(1.12);
}


/* =========================================================
   MENI
========================================================= */

.footer-link{
    position:relative;

    display:block;

    width:max-content;

    margin:0 0 11px;

    padding:2px 0;

    color:#9699a1;

    font-size:18px;

    line-height:1.45;

    text-decoration:none;

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


.footer-link::before{
    content:"";

    display:inline-block;

    width:0;

    height:1px;

    margin-right:0;

    vertical-align:middle;

    background:
        linear-gradient(
            90deg,
            #00bfff,
            #ff00aa
        );

    transition:
        width .25s ease,
        margin-right .25s ease;
}


.footer-link:hover{
    color:#fff;

    transform:translateX(4px);
}


.footer-link:hover::before{
    width:15px;

    margin-right:8px;
}


/* =========================================================
   KONTAKT
========================================================= */

.footer-top > div:last-child{
    min-width:0;
}


.footer-top > div:last-child p{
    position:relative;

    margin:0 0 10px;

    padding-left:14px;

    color:#9699a1;

    font-size:17px;

    line-height:1.5;

    word-break:break-word;
}


.footer-top > div:last-child p::before{
    content:"";

    position:absolute;

    left:0;
    top:9px;

    width:4px;
    height:4px;

    border-radius:50%;

    background:#00bfff;

    box-shadow:
        0 0 8px rgba(0,191,255,.45);
}


.footer-top > div:last-child p:nth-child(even)::before{
    background:#ff00aa;

    box-shadow:
        0 0 8px rgba(255,0,170,.4);
}


.footer-top > div:last-child p:last-child{
    margin-bottom:0;
}


/* =========================================================
   DONJA LINIJA
========================================================= */

.footer-copy{
    position:relative;

    z-index:2;

    width:100%;

    max-width:1500px;

    margin:0 auto;

    padding:20px 60px 23px;

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

    color:#666a73;

    font-size:14px;

    line-height:1.6;

    text-align:center;
}


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

#backToTop{
    position:fixed;

    right:25px;
    bottom:25px;

    width:52px;
    height:52px;

    display:flex;

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

    background:
        linear-gradient(
            145deg,
            #10141b,
            #0b0d12
        );

    border:1px solid rgba(0,191,255,.22);

    border-radius:15px;

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

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

    z-index:9999;
}


#backToTop.show{
    opacity:1;

    visibility:visible;

    transform:translateY(0);
}


#backToTop:hover{
    transform:translateY(-4px);

    border-color:rgba(255,0,170,.4);

    box-shadow:
        0 12px 30px rgba(0,0,0,.35),
        0 0 18px rgba(0,191,255,.08);
}


#backToTop img{
    width:22px;
    height:22px;

    display:block;

    object-fit:contain;

    transition:transform .25s ease;
}


#backToTop:hover img{
    transform:translateY(-2px);
}


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

@media (max-width:1150px){

    .footer-top{
        grid-template-columns:
            1.4fr
            1fr
            1fr;

        column-gap:50px;

        row-gap:50px;

        padding:62px 40px 52px;
    }


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


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


    .footer-logo img{
        max-width:260px;
        max-height:90px;
    }


    .footer-top h3{
        font-size:20px;
    }


    .footer-link{
        font-size:17px;
    }


    .footer-top > div:last-child p{
        font-size:16px;
    }


    .footer-copy{
        padding-left:40px;
        padding-right:40px;
    }

}


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

@media (max-width:850px){

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

        column-gap:40px;

        row-gap:42px;

        padding:55px 32px 48px;
    }


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


    .footer-logo img{
        max-width:245px;
        max-height:88px;
    }


    .footer-about p{
        font-size:17px;
    }


    .footer-top h3{
        font-size:19px;
    }


    .footer-link{
        font-size:16px;
    }


    .footer-top > div:last-child p{
        font-size:15px;
    }

}


/* =========================================================
   MOBILNI
========================================================= */

@media (max-width:600px){

    .footer{
        margin-top:60px;
    }


    .footer-top{
        display:flex;

        flex-direction:column;

        align-items:center;

        gap:34px;

        padding:48px 24px 40px;

        text-align:center;
    }


    .footer-about{
        width:100%;

        align-items:center;

        text-align:center;
    }


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


    .footer-logo img{
        max-width:220px;
        max-height:80px;
    }


    .footer-logo::after{
        left:50%;

        transform:translateX(-50%);
    }


    .footer-about p{
        max-width:100%;

        font-size:15px;

        line-height:1.7;

        text-align:center;
    }


    .footer-top h3{
        margin-bottom:20px;

        font-size:18px;

        text-align:center;
    }


    .footer-top h3::after{
        margin-left:auto;
        margin-right:auto;
    }


    .footer-link{
        margin-left:auto;
        margin-right:auto;

        margin-bottom:11px;

        font-size:15px;
    }


    .social-icons{
        justify-content:center;

        gap:10px;
    }


    .social-icons a{
        width:48px;
        height:48px;

        border-radius:13px;
    }


    .social-icons img{
        width:22px;
        height:22px;
    }


    .footer-top > div:last-child{
        width:100%;

        text-align:center;
    }


    .footer-top > div:last-child p{
        display:block;

        width:max-content;

        max-width:100%;

        margin:0 auto 9px;

        padding-left:13px;

        font-size:14px;

        text-align:left;
    }


    .footer-top > div:last-child p::before{
        top:8px;
    }


    .footer-copy{
        padding:18px 24px 21px;

        font-size:12px;
    }


    #backToTop{
        right:14px;
        bottom:14px;

        width:46px;
        height:46px;

        border-radius:13px;
    }


    #backToTop img{
        width:20px;
        height:20px;
    }

}


/* =========================================================
   MALI TELEFONI
========================================================= */

@media (max-width:400px){

    .footer-top{
        padding-left:20px;
        padding-right:20px;

        gap:31px;
    }


    .footer-logo img{
        max-width:200px;
        max-height:75px;
    }


    .footer-about p{
        font-size:14px;
    }


    .footer-top h3{
        font-size:17px;
    }


    .footer-link{
        font-size:14px;
    }


    .footer-top > div:last-child p{
        font-size:13px;
    }


    .footer-copy{
        padding-left:20px;
        padding-right:20px;
    }

}


/* =========================================================
   REDUKOVANO KRETANJE
========================================================= */

@media (prefers-reduced-motion:reduce){

    .footer * ,
    #backToTop{
        transition:none !important;
    }

}