/*ZA TELEFON*/
@media screen and (max-width: 768px) {
    @font-face {
        font-family: "MainFont";
        src:
            url("fonts/JejuMyeongjo-Regular.ttf") format("woff2"),
            url("fonts/JejuMyeongjo-Regular.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: "quote";
        src:
            url("fonts/Italianno-Regular.ttf") format("woff2"),
            url("fonts/Italianno-Regular.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
    }

    body {
        margin: 0;
        padding: 0;
    }

    .scroll-down {
        display: none;
    }

    nav {
        visibility: hidden;
        left: 50%;
        top: 20px;
        transform: translateX(-50%);
        width: fit-content;
    }

    .navigacija {
        flex-direction: row;
        padding: 12px 20px;
        gap: 15px;
    }

    .hero {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        width: 90%;
    }

    .lokacija {
        display: flex;
        justify-content: center;
        width: 350px;
    }

    .zacetek {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 0px;
    }

    .main {
        position: relative !important;
        width: 90% !important;
        margin: 20px auto !important;
        height: auto !important;
        min-height: 400px;
        padding: 30px 10px;
        transform: none !important;
        opacity: 1 !important;
    }

    #logo-hero {
        height: 120px;
    }

    .zacetek h3 {
        font-size: 35px;
    }

    .content {
        margin-top: 30px;
    }

    .content p {
        font-size: 30px;
    }

    .line {
        animation: none !important;
        width: 100px !important;
        opacity: 0.6;
    }

    .about-inner {
        height: auto;
        width: 90%;
    }

    .about-box {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 40px;
        font-size: 18px;
        width: 100%;
    }

    .quote {
        margin-top: 40px;
        width: 90%;
        margin-bottom: 50px;
        font-family: 'quote';
    }

    .grid-container {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 20px;
    }

    .glass-card {
        width: 100%;
        max-width: 320px;
        height: auto;
        margin-bottom: 20px;
    }

    #projects-intro {
        width: 90%;
        font-size: 18px;
    }

    .copy-toast {
        bottom: 100px;
    }

    .footer-text {
        display: flex;
        justify-content: center;
        text-align: center;
        line-height: 30px;
    }

    .scroll-area {
        height: auto !important;
    }

    .container {
        position: relative !important;
        height: auto !important;
        display: block !important;
    }

    .section-2 {
        transform: none !important;
        opacity: 1 !important;
        pointer-events: all !important;
    }

    .technologies {
        height: 650px;
    }

    .t-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        height: 250px;
    }

    .t-inner {
        height: 250px;
        margin-bottom: 50px;
    }

    .t-card {
        margin-bottom: 20px;
        height: 60px;
    }

    .t-text p {
        width: 90%;
    }

    .scroll {
        visibility: hidden;
    }

    .o-men {
        width: 600px;
    }

    .o-men p {
        font-size: 15px;
    }

    .lokacija img {
        visibility: hidden;
        position: absolute;
    }

    .cursor-dot,
    .cursor-outline {
        visibility: hidden;
    }

    /*BACKGROUND ANIMACIJA*/
    @property --x-0 {
        syntax: "<percentage>";
        inherits: false;
        initial-value: 85%;
    }

    @property --c-0 {
        syntax: "<color>";
        inherits: false;
        initial-value: hsla(266, 1%, 12%, 1);
    }

    @property --s-start-0 {
        syntax: "<percentage>";
        inherits: false;
        initial-value: 9%;
    }

    @property --s-end-0 {
        syntax: "<percentage>";
        inherits: false;
        initial-value: 55%;
    }

    @property --y-0 {
        syntax: "<percentage>";
        inherits: false;
        initial-value: 80%;
    }

    @property --x-1 {
        syntax: "<percentage>";
        inherits: false;
        initial-value: 60%;
    }

    @property --c-1 {
        syntax: "<color>";
        inherits: false;
        initial-value: hsla(335, 2%, 22%, 1);
    }

    @property --y-1 {
        syntax: "<percentage>";
        inherits: false;
        initial-value: 24%;
    }

    @property --s-start-1 {
        syntax: "<percentage>";
        inherits: false;
        initial-value: 5%;
    }

    @property --s-end-1 {
        syntax: "<percentage>";
        inherits: false;
        initial-value: 72%;
    }

    @property --c-2 {
        syntax: "<color>";
        inherits: false;
        initial-value: hsla(53, 0%, 0%, 0.49);
    }

    @property --s-start-2 {
        syntax: "<percentage>";
        inherits: false;
        initial-value: 5%;
    }

    @property --s-end-2 {
        syntax: "<percentage>";
        inherits: false;
        initial-value: 52%;
    }

    @property --y-2 {
        syntax: "<percentage>";
        inherits: false;
        initial-value: 82%;
    }

    @property --x-2 {
        syntax: "<percentage>";
        inherits: false;
        initial-value: 13%;
    }

    @property --c-3 {
        syntax: "<color>";
        inherits: false;
        initial-value: hsla(299, 4%, 36%, 1);
    }

    @property --s-start-3 {
        syntax: "<percentage>";
        inherits: false;
        initial-value: 13%;
    }

    @property --s-end-3 {
        syntax: "<percentage>";
        inherits: false;
        initial-value: 68%;
    }

    @property --y-3 {
        syntax: "<percentage>";
        inherits: false;
        initial-value: 7%;
    }

    @property --x-3 {
        syntax: "<percentage>";
        inherits: false;
        initial-value: 24%;
    }

    #bg-canvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100dvh;
        z-index: -1;
        pointer-events: none;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        --x-0: 85%;
        --c-0: hsla(266, 1%, 12%, 1);
        --y-0: 80%;
        --x-1: 60%;
        --c-1: hsla(335, 2%, 22%, 1);
        --y-1: 24%;
        --c-2: hsla(53, 0%, 0%, 0.49);
        --y-2: 82%;
        --x-2: 13%;
        --c-3: hsla(299, 4%, 36%, 1);
        --y-3: 7%;
        --x-3: 24%;
        background-color: hsla(0, 0%, 0%, 1);
        background-image:
            radial-gradient(circle at var(--x-0) var(--y-0),
                var(--c-0) var(--s-start-0),
                transparent var(--s-end-0)),
            radial-gradient(circle at var(--x-1) var(--y-1),
                var(--c-1) var(--s-start-1),
                transparent var(--s-end-1)),
            radial-gradient(circle at var(--x-2) var(--y-2),
                var(--c-2) var(--s-start-2),
                transparent var(--s-end-2)),
            radial-gradient(circle at var(--x-3) var(--y-3),
                var(--c-3) var(--s-start-3),
                transparent var(--s-end-3));
        animation: bg-animation 10s linear infinite alternate;
        background-blend-mode: normal, normal, normal, normal;
        will-change: transform;
        contain: strict;
    }

    @keyframes bg-animation {
        0% {
            --x-0: 85%;
            --y-0: 80%;
            --x-1: 60%;
            --y-1: 24%;
            --x-2: 13%;
            --y-2: 82%;
            --x-3: 24%;
            --y-3: 7%;
            --c-0: hsla(266, 1%, 12%, 1);
            --c-1: hsla(335, 2%, 22%, 1);
            --c-3: hsla(299, 4%, 36%, 1);
        }

        100% {
            --x-0: 31%;
            --y-0: 94%;
            --x-1: 2%;
            --y-1: 25%;
            --x-2: 98%;
            --y-2: 20%;
            --x-3: 95%;
            --y-3: 92%;
            --c-0: hsla(266, 0%, 12%, 1);
            --c-1: hsla(0, 4%, 19%, 1);
            --c-3: hsla(298, 3%, 41%, 1);
        }
    }
}