footer {
    background: #f4eade;
    /*padding-top: 50px;*/
    /*padding-bottom: 50px;*/
}

footer img {
    width: 100px;
}

footer .footer_desktop {
    display: none;
}

footer .footer_mobile {
    display: block;
}

.footer_mobile {
    --bckg-img: 240px;
    background-color: #f3ebde;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background-image: url(/assets/footer_img_transparent.webp);
    background-repeat: no-repeat;
    background-position-x: 240%; /* startuje skroz desno */
    background-position-y: bottom;
    box-sizing: border-box;
    background-size: max(var(--bckg-img));
    transition: background-position-x 1.2s ease-in-out;
    height: 85vh;
    padding: 40px;

}

/* Aktivna animacija*/
.footer_mobile.animate-footer {
    background-position-x: right;
    transition-delay: 0.30s;
}

.footer_mobile .footer_text {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 310px;
}

.footer_mobile .footer_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footer_mobile .footer_content .footer_text h1 {
    font-family: TheSeasonsBold;
    text-align: center;
    color: #745852;
    font-size: 1.9em;
}

.footer_mobile .footer_content .footer_text p {
    font-family: RomateHood;
    text-align: left;
    font-size: 2em;
    color: #745852;
    margin: 10px;
    margin-left: 15px;
}

.footer_mobile .footer_content a.footer_icons {
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    text-decoration: none;
    margin-bottom: calc(var(--bckg-img) - 50px);
    position: relative;
}


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

.footer_mobile .footer_content a.footer_icons .icons .arrow-container {
    transform: rotate(-70deg) scaleX(-1);
    width: 100px;
    position: relative;
    left: 10%;
    top: 15px;
}

.arrow-svg {
    width: 100%;
    height: 100%;
}

/* GLAVNA LINIJA */
#arrowBodyMobile {
    stroke-dasharray: 2500;
    stroke-dashoffset: 2500;
}

/* ARROWHEAD - LEVA STRANA */
#arrowHead1Mobile {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation-delay: 1s; /* KREĆE POSLE GLAVNE LINIJE */
}

/* ARROWHEAD - DESNA STRANA */
#arrowHead2Mobile {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation-delay: 1.1s; /* MALO KASNIJE RADI LEPŠEG EFEKTA */
}

.animate-arrow {
    animation: drawBody 2s cubic-bezier(.55, 0, .25, 1) forwards;

}

@keyframes drawBody {
    to {
        stroke-dashoffset: 0;
    }
}

.animate-arrow-head {
    animation: drawHead 0.6s cubic-bezier(.55, 0, .25, 1) forwards;

}

@keyframes drawHead {
    to {
        stroke-dashoffset: 0;
    }
}

/*=================================================================*/
.footer_mobile .footer_content a.footer_icons .icons img#mailIconFooterMobile {
    transform: rotate(20deg);
    position: absolute;
    left: -30%;
    bottom: -110%;
    opacity: 0;
}

.animate_footer_img {
    animation: mailOnStage 0.6s cubic-bezier(.55, 0, .25, 1) forwards;
    animation-delay: 1.5s; /* MALO KASNIJE RADI LEPŠEG EFEKTA */
}

@keyframes mailOnStage {
    to {
        left: 0%;
        opacity: 1;
    }
}


footer .footer_content a.footer_icons p {
    font-family: CormorantGaramond;
    font-size: 1.5em;
    color: #745852;
    text-align: center;

    background-color: transparent;
    border-radius: 50px;
    padding: 10px;
    background-color: #d6bdae;

    border: none;
}

@media (min-width: 1000px) {
    footer .footer_desktop {
        display: block;

    }

    footer .footer_mobile {
        display: none;
    }

    footer .footer_desktop {
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        max-height: 100vh;

        padding-top: 100px;
        padding-bottom: 100px;
    }

    footer .footer_desktop .footer_content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    footer .footer_desktop .footer_content .footer_text h1 {
        font-family: TheSeasonsBold;
        text-align: center;
        color: #745852;
        font-size: 2.5em;
    }

    footer .footer_desktop .footer_content .footer_text p {
        font-family: RomateHood;
        text-align: left;
        font-size: 3em;
        color: #745852;
        margin: 10px;

    }

    footer .footer_desktop .footer_content a.footer_icons {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 50px;
        width: 100%;
        text-decoration: none;
        position: relative;
    }

    footer .footer_desktop .footer_content a.footer_icons p {
        font-family: CormorantGaramond;
        font-size: 2em;
        color: #745852;
        text-align: center;
        background-color: #d6bdae;
        padding: 20px;
        border-radius: 50px;
        transition: 0.3s all;
    }
    footer .footer_desktop .footer_content a.footer_icons p:hover {
        color: white;
        transition: 0.3s all;


    }
    footer .footer_desktop .footer_content a.footer_icons .icons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        position: absolute;
        right: 0;
        bottom: -35%;
    }

    /*========================================================================*/
    .footer_desktop .footer_content a.footer_icons .icons .arrow-container {
        width: 200px;
        position: relative;
        left: -25%;
        bottom: -100%;
    }

    .arrow-svg {
        width: 100%;
        height: 100%;
    }

    /* GLAVNA LINIJA */
    #arrowBodyDesktop {
        stroke-dasharray: 2500;
        stroke-dashoffset: 2500;
    }

    /* ARROWHEAD - LEVA STRANA */
    #arrowHead1Desktop {
        stroke-dasharray: 300;
        stroke-dashoffset: 300;
        animation-delay: 1s; /* KREĆE POSLE GLAVNE LINIJE */
    }

    /* ARROWHEAD - DESNA STRANA */
    #arrowHead2Desktop {
        stroke-dasharray: 300;
        stroke-dashoffset: 300;
        animation-delay: 1.1s; /* MALO KASNIJE RADI LEPŠEG EFEKTA */
    }

    .animate-arrow-desktop {
        animation: drawBodyDesktop 2s cubic-bezier(.55, 0, .25, 1) forwards;

    }

    @keyframes drawBodyDesktop {
        to {
            stroke-dashoffset: 0;
        }
    }

    .animate-arrow-head-desktop {
        animation: drawHeadDesktop 0.6s cubic-bezier(.55, 0, .25, 1) forwards;

    }

    @keyframes drawHeadDesktop {
        to {
            stroke-dashoffset: 0;
        }
    }

    footer .footer_desktop .footer_content a.footer_icons .icons img#mailIconFooterDesktop {
        width: 170px;
        transform: rotate(20deg);
        position: absolute;
        top: -15%;
        right: -70%;
        opacity: 0;
    }

    .animate_footer_img-desktop {
        animation: mailOnStageDesktop 0.6s cubic-bezier(.55, 0, .25, 1) forwards;
        animation-delay: 1.5s; /* MALO KASNIJE RADI LEPŠEG EFEKTA */
    }

    @keyframes mailOnStageDesktop{
        to {
            top: -25%;
            right: -70%;
            opacity: 1;
        }
    }


    footer .footer_desktop .footer_img {
        width: 350px;
        margin-left: 100px;
    }

}