@font-face {
    font-family: Gilroy-Light;
    src: url('../Stolzl/stolzl_light.otf');
}

@font-face {
    font-family: Gilroy-Bold;
    src: url('../Stolzl/stolzl_bold.otf');
}

@font-face {
    font-family: Gilroy-Medium;
    src: url('../Stolzl/stolzl_medium.otf');
}

:root {
    --color-white: #fff;
    --color-white-02: hsla(0, 0%, 100%, 0.2);
    --color-white-04: hsla(0, 0%, 100%, 0.4);
    --color-white-06: hsla(0, 0%, 100%, 0.6);
    --color-white-08: hsla(0, 0%, 100%, 0.8);
    --color-off-white: #f8f8f8;
    --color-off-white-02: hsla(0, 0%, 97.3%, 0.2);
    --color-off-white-04: hsla(0, 0%, 97.3%, 0.4);
    --color-off-white-06: hsla(0, 0%, 97.3%, 0.6);
    --color-off-white-08: hsla(0, 0%, 97.3%, 0.8);
    --color-story: #070707;
    --color-dark-grey: #0d0e13;
    --color-dark-grey-02: rgba(13, 14, 19, 0.2);
    --color-dark-grey-04: rgba(13, 14, 19, 0.4);
    --color-dark-grey-06: rgba(13, 14, 19, 0.6);
    --color-dark-grey-08: rgba(13, 14, 19, 0.8);
    --color-light-grey: #e4e0db;
    --color-light-grey-02: rgba(228, 224, 219, 0.2);
    --color-light-grey-06: rgba(228, 224, 219, 0.6);
    --color-light-grey-08: rgba(228, 224, 219, 0.8);
    --color-sand: #e0ccbb;
    --color-sand-06: rgba(224, 204, 187, 0.6);
    --color-sand-08: rgba(224, 204, 187, 0.8);
    --font-f-Bold: Gilroy-Bold;
    --font-f-Medium: Gilroy-Medium;
    --font-f-Light: Gilroy-Light;
    --font-s-h0: 25.6vw;
    --font-lh-h0: 25.6vw;
    --font-ls-h0: -1.2vw;
    --font-s-h1: 16vw;
    --font-lh-h1: 16vw;
    --font-ls-h1: -.4vw;
    --font-s-h2: 7.73333vw;
    --font-lh-h2: 9.06667vw;
    --font-ls-h2: -.26667vw;
    --font-s-h3: 6.4vw;
    --font-lh-h3: 8vw;
    --font-ls-h3: -.13333vw;
    --font-s-h4: 4.8vw;
    --font-lh-h4: 6.4vw;
    --font-ls-h4: 0vw;
    --font-s-p: 3.73333vw;
    --font-lh-p: 5.6vw;
    --font-ls-p: .02667vw;
    --font-s-p-small: 3.73333vw;
    --font-lh-p-small: 5.6vw;
    --font-ls-p-small: .02667vw;
    --font-s-subtitle: 3.2vw;
    --font-lh-subtitle: 4.26667vw;
    --font-ls-subtitle: .02667vw;
    --font-s-cta: 4.26667vw;
    --font-lh-cta: 4.26667vw;
    --font-ls-cta: 0vw;
    --font-s-label: 3.73333vw;
    --font-lh-label: 3.73333vw;
    --font-ls-label: 0vw;
    --mob-line-height: 7.5vw
}


@media (min-width: 601px) {
    :root {
        --font-s-h0: 17.36111vw;
        --font-lh-h0: 15.69444vw;
        --font-ls-h0: -.79861vw;
        --font-s-h1: 10vw;
        --font-lh-h1: 10vw;
        --font-ls-h1: -.34722vw;
        --font-s-h2: 3.61111vw;
        --font-lh-h2: 4.44444vw;
        --font-ls-h2: -.10417vw;
        --font-s-h3: 2.22222vw;
        --font-lh-h3: 2.77778vw;
        --font-ls-h3: -.00694vw;
        --font-s-h4: 1.66667vw;
        --font-lh-h4: 2.22222vw;
        --font-ls-h4: 0vw;
        --font-s-p: 1.11111vw;
        --font-lh-p: 1.66667vw;
        --font-ls-p: .00694vw;
        --font-s-subtitle: .83333vw;
        --font-lh-subtitle: 1.11111vw;
        --font-ls-subtitle: .00694vw;
        --font-s-p-small: .97222vw;
        --font-lh-p-small: 1.45833vw;
        --font-ls-p-small: .00694vw;
        --font-s-cta: 1.11111vw;
        --font-lh-cta: 1.11111vw;
        --font-ls-cta: 0vw;
        --font-s-label: .97222vw;
        --font-lh-label: .97222vw;
        --font-ls-label: 0vw;
        --main-tex-color: #a49981;
    }
}

/* @media (max-width: 782px) {
    :root {
        --font-s-h0: 7vw;
        --font-lh-h0: 6.5vw;
        --font-ls-h0: -0.5vw;
        --font-s-h1: 4.5vw;
        --font-lh-h1: 4.5vw;
        --font-ls-h1: -0.2vw;
        --font-s-h2: 2.8vw;
        --font-lh-h2: 3vw;
        --font-ls-h2: -0.1vw;
        --font-s-h3: 1.8vw;
        --font-lh-h3: 2.2vw;
        --font-ls-h3: -0.05vw;
        --font-s-h4: 1.2vw;
        --font-lh-h4: 1.8vw;
        --font-ls-h4: 0vw;
        --font-s-p: 0.8vw;
        --font-lh-p: 1.2vw;
        --font-ls-p: 0.05vw;
        --font-s-subtitle: 0.7vw;
        --font-lh-subtitle: 0.9vw;
        --font-ls-subtitle: 0.05vw;
        --font-s-p-small: 0.7vw;
        --font-lh-p-small: 1vw;
        --font-ls-p-small: 0.05vw;
        --font-s-cta: 0.8vw;
        --font-lh-cta: 0.8vw;
        --font-ls-cta: 0vw;
        --font-s-label: 0.7vw;
        --font-lh-label: 0.7vw;
        --font-ls-label: 0vw;
    }
} */

*,
:after,
:before {
    box-sizing: border-box
}



ol,
ul {
    padding: 0;
    list-style: none
}

blockquote,
body,
dd,
dl,
figcaption,
figure,
h1,
h2,
h3,
h4,
input,
li,
ol,
p,
ul {
    margin: 0
}


html {

    margin: 0;
    padding: 0;
    overflow-x: auto;

}

body {
    margin: 0;
    background-color: #0D0D0D;
    margin: 0;
    padding: 0;

}

body::-webkit-scrollbar {
    width: 0;
    height: 0
}

/* h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400
} */

button {
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-style: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    vertical-align: baseline;
    background: 0 0;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

a,
button {
    color: inherit
}

a {
    text-decoration: none
}

a:not([class]) {
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto
}

img,
svg {
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

img {
    pointer-events: none
}

button,
input,
select,
textarea {
    font: inherit;
    border-radius: 0;
    box-shadow: none;

    outline: 0;
    border: 0
}

button,
input,
select,
textarea {
    -webkit-appearance: none;
    background: 0 0
}

select {
    border: none
}

footer,
section {
    position: relative
}


body {
    color: #0d0e13;
    color: var(--color-dark-grey);
    background: #fff;
    background: var(--color-white)
}

img,
video {
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: cover;
    object-fit: cover
}

section {
    margin-top: -1px
}

.alert {
    color: #a49981;
}



picture {
    width: 100%;
    height: 100%;
    display: block
}

button {
    cursor: pointer
}

.app {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden
}

.page {
    bottom: 0
}

.overlay,
.page {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1
}

.overlay {
    height: 150vh;
    background: #0d0e13;
    background: var(--color-dark-grey);
    pointer-events: none;
    visibility: hidden;
    transform: translateZ(0)
}

.scroll {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.is-touch .scroll {
    overflow: hidden;
    overflow-y: scroll
}

.is-loading .scroll {
    overflow: hidden
}

.is-current {
    pointer-events: none
}

.has-padding-top {
    padding-top: 21.33333vw
}


.has-border {
    background: #0d0e13;
    background: var(--color-dark-grey);
    border: .8vw solid #0d0e13;
    border: .8vw solid var(--color-dark-grey)
}

h1 {
    font-size: var(--font-lh-h1);
    font-family: var(--font-f-Medium);
    line-height: var(--font-lh-h1);
}

.dark {
     /*background-color: #0D0D0D; */
     /*background-color: #161616; */
    background-color: #101921;
    /*background-color:#1a1a1a;*/
}

.main-header {
    display: flex;
    justify-content: center;
    align-items: center;
   
    width: 100vw;
    transform: translateY(100%);
    border-bottom: 1px solid rgba(183, 173, 157, 0.1);
    transition: 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.header-items {
    display: flex;
    justify-content: center;
    align-items: center;

}


@media (max-width: 767px) {

    .main-header {
        height: 100vh;
        overflow: hidden;
    }


    .image-under-mob {
        position: absolute;
        top: 19%;
        left: 6vw;
        width: 90%;
        opacity: 0;
        transition: 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
        display: block !important;
    }

    .image-under {
        display: none !important;
    }

    /*.header-title {*/
    /*    margin-top: 20%;*/
    /*}*/
}

.main-header.active {
    transform: translateY(100%);
    opacity: .2;

}

@media (min-width: 768px) {
    .work-main {
        display: none;
    }
}




            /* Featured Projects Base Styles */
            .featured-project {
                margin: 10vw 0;
                padding: 0 8.8vw;
                border-bottom: 1px solid rgba(183, 173, 157, 0.1);
                padding-bottom: 8vw;
            }

            .featured-project:last-of-type {
                border-bottom: none;
            }

            .featured-content {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8vw;
                align-items: center;
                min-height: 50vh;
            }

            .featured-content.reverse {
                grid-template-columns: 1fr 1fr;
            }

            .featured-content.reverse .featured-info {
                order: 2;
            }

            .featured-content.reverse .featured-visual {
                order: 1;
            }

            /* Badge Styles */
            .featured-badge {
                padding: 0.8vw 2vw;
                border-radius: 2vw;
                font-family: var(--font-f-Bold);
                font-size: 0.8vw;
                letter-spacing: 0.1em;
                width: fit-content;
                margin-bottom: 2vw;
                text-transform: uppercase;
            }

            .ai-badge {
                background: linear-gradient(135deg, #b46633, #d4824a);
                color: #101921;
            }
            
            .artist-badge {
                background: linear-gradient(135deg, #FF5722, #FF7043);
                color: white;
            }

            .platform-badge {
                background: linear-gradient(135deg, #2196F3, #42A5F5);
                color: white;
            }

            .creative-badge {
                background: linear-gradient(135deg, #9C27B0, #BA68C8);
                color: white;
            }

            .medical-badge {
                background: linear-gradient(135deg, #4CAF50, #66BB6A);
                color: white;
            }

            .featured-title {
                font-family: var(--font-f-Bold);
                font-size: 4vw;
                color: #B7AD9D;
                margin-bottom: 1vw;
                line-height: 0.9;
            }

            .featured-subtitle {
                font-family: var(--font-f-Medium);
                font-size: 1.5vw;
                color: #b46633;
                margin-bottom: 2vw;
                opacity: 0.9;
            }

            .featured-description {
                font-family: var(--font-f-Light);
                font-size: 1vw;
                line-height: 1.6;
                color: #B7AD9D;
                opacity: 0.9;
                margin-bottom: 3vw;
            }

            .featured-tech {
                display: flex;
                flex-wrap: wrap;
                gap: 1vw;
                margin-bottom: 3vw;
            }

            .tech-tag {
                background: rgba(183, 173, 157, 0.1);
                border: 1px solid rgba(183, 173, 157, 0.2);
                color: #B7AD9D;
                padding: 0.6vw 1.5vw;
                border-radius: 1.5vw;
                font-size: 0.8vw;
                font-family: var(--font-f-Medium);
                transition: all 0.3s ease;
            }

            .tech-tag:hover {
                background: #b46633;
                color: #101921;
                transform: translateY(-2px);
            }

            .featured-links {
                display: flex;
                gap: 2vw;
            }

            .btn-primary, .btn-secondary {
                padding: 1vw 2.5vw;
                font-family: var(--font-f-Medium);
                font-size: 0.9vw;
                text-decoration: none;
                border-radius: 0.5vw;
                transition: all 0.3s ease;
                text-transform: uppercase;
                letter-spacing: 0.05em;
            }

            .btn-primary {
                background: #b46633;
                color: #101921;
                border: 2px solid #b46633;
            }

            .btn-primary:hover {
                background: transparent;
                color: #b46633;
                transform: translateY(-2px);
            }

            .btn-secondary {
                background: transparent;
                color: #B7AD9D;
                border: 2px solid rgba(183, 173, 157, 0.3);
            }

            .btn-secondary:hover {
                background: rgba(183, 173, 157, 0.1);
                border-color: #B7AD9D;
                transform: translateY(-2px);
            }

            /* Visual Styles */
            .featured-image-container {
                position: relative;
                height: 30vw;
                border-radius: 1vw;
                overflow: hidden;
                box-shadow: 0 2vw 4vw rgba(0, 0, 0, 0.3);
            }

            .featured-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.5s ease;
            }

            .featured-overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                transition: opacity 0.4s ease;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .ai-overlay {
                background: linear-gradient(135deg, rgba(180, 102, 51, 0.85) 0%, rgba(16, 25, 33, 0.85) 100%);
            }
            
            
            .artist-overlay {
                background: linear-gradient(135deg, rgba(255, 87, 34, 0.85) 0%, rgba(16, 25, 33, 0.85) 100%);
            }

            .booking-overlay {
                background: linear-gradient(135deg, rgba(33, 150, 243, 0.85) 0%, rgba(16, 25, 33, 0.85) 100%);
            }

            .creative-overlay {
                background: linear-gradient(135deg, rgba(156, 39, 176, 0.85) 0%, rgba(16, 25, 33, 0.85) 100%);
            }

            .medical-overlay {
                background: linear-gradient(135deg, rgba(76, 175, 80, 0.85) 0%, rgba(16, 25, 33, 0.85) 100%);
            }

            .featured-image-container:hover .featured-overlay {
                opacity: 1;
            }

            .featured-image-container:hover .featured-image {
                transform: scale(1.05);
            }

            .overlay-content {
                text-align: center;
                color: white;
            }

            .feature-highlight {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 1vw;
                margin: 1.5vw 0;
                font-family: var(--font-f-Medium);
                font-size: 1vw;
            }

            .feature-highlight i {
                font-size: 1.2vw;
            }

            /* More Projects Section */
            .more-projects {
                text-align: center;
                margin: 8vw 0;
            }

            .more-projects-text {
                margin-top: 2vw;
                font-family: var(--font-f-Light);
                color: #B7AD9D;
                opacity: 0.7;
                font-size: 1vw;
            }

         
         
         
         
         /* Mobile Responsive - Improved Spacing */
@media (max-width: 768px) {
    .featured-project {
        padding: 0 5vw;
        margin: 20vw 0; /* Povećao sa 15vw na 20vw */
    }
    
    .featured-content, .featured-content.reverse {
        grid-template-columns: 1fr;
        gap: 8vw; /* Povećao sa 6vw na 8vw */
    }
    
    .featured-content.reverse .featured-info,
    .featured-content.reverse .featured-visual {
        order: initial;
    }
    
    .featured-badge {
        font-size: 2.8vw; /* Malo povećao */
        padding: 2.5vw 5vw; /* Više padding */
        margin-bottom: 4vw; /* Dodao donji razmak */
    }
    
    .featured-title {
        font-size: 10vw;
        margin-bottom: 4vw; /* Povećao sa default na 4vw */
    }
    
    .featured-subtitle {
        font-size: 4vw;
        margin-bottom: 5vw; /* Dodao donji razmak */
    }
    
    .featured-description {
        font-size: 3.8vw; /* Malo povećao */
        line-height: 1.7; /* Povećao sa 1.5 na 1.7 */
        margin-bottom: 6vw; /* Dodao donji razmak */
    }
    
    .featured-tech {
        margin-bottom: 6vw; /* Dodao razmak ispod tech tagova */
        gap: 3vw; /* Povećao razmak između tagova */
    }
    
    .tech-tag {
        font-size: 2.8vw; /* Malo povećao */
        padding: 2.5vw 4vw; /* Više padding */
        margin-bottom: 2vw; /* Dodao razmak između redova */
    }
    
    .featured-links {
        flex-direction: column;
        gap: 4vw; /* Dodao razmak između buttona */
        margin-top: 6vw; /* Dodao gornji razmak */
    }
    
    .btn-primary, .btn-secondary {
        font-size: 3.5vw; /* Malo povećao */
        padding: 4vw 7vw; /* Više padding */
        text-align: center;
        width: 100%; /* Full width za bolje klikanje */
    }
    
    .featured-image-container {
        height: 55vw; /* Malo povećao sa 50vw */
        margin-bottom: 6vw; /* Dodao donji razmak */
    }
    
    .feature-highlight {
        font-size: 3.2vw; /* Malo povećao */
        gap: 2.5vw; /* Povećao razmak */
        padding: 3vw; /* Dodao padding */
    }
    
    .feature-highlight i {
        font-size: 4.5vw; /* Malo povećao */
    }
    
    .more-projects {
        margin-top: 15vw; /* Dodao gornji razmak */
        margin-bottom: 10vw; /* Dodao donji razmak */
    }
    
    .more-projects-text {
        font-size: 3.5vw; /* Malo povećao */
        margin-top: 5vw; /* Povećao sa 4vw */
    }
    
    /* About items razmak */
    .about-items {
        margin-top: 15vw; /* Dodao gornji razmak */
        padding: 8vw 5vw; /* Dodao padding */
    }
    
    .about-items h3 {
        margin-bottom: 6vw; /* Dodao razmak */
    }
    
    .about-items h2 {
        font-size: 6vw; /* Prilagodio veličinu */
        line-height: 1.6; /* Povećao line-height */
    }
}

/* Tablet Responsive - Za srednje ekrane */
@media (min-width: 769px) and (max-width: 1024px) {
    .featured-project {
        padding: 0 4vw;
        margin: 12vw 0;
    }
    
    .featured-content, .featured-content.reverse {
        gap: 5vw;
    }
    
    .featured-title {
        font-size: 6vw;
        margin-bottom: 3vw;
    }
    
    .featured-description {
        font-size: 2vw;
        line-height: 1.6;
        margin-bottom: 4vw;
    }
    
    .tech-tag {
        font-size: 1.8vw;
        padding: 1.5vw 3vw;
    }
    
    .featured-links {
        gap: 3vw;
        margin-top: 4vw;
    }
}

/* Extra Small Mobile - Za vrlo male ekrane */
@media (max-width: 480px) {
    .featured-project {
        margin: 25vw 0; /* Još više prostora za male ekrane */
    }
    
    .featured-content, .featured-content.reverse {
        gap: 10vw; /* Još više razmaka */
    }
    
    .featured-description {
        font-size: 4vw; /* Malo veći tekst za lakše čitanje */
        line-height: 1.8;
        margin-bottom: 8vw;
    }
    
    .btn-primary, .btn-secondary {
        padding: 5vw 8vw; /* Veći buttoni za lakše klikanje */
        font-size: 4vw;
    }
}






.main-content.active {
    transform: translateY(20%);
    transition: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    opacity: 0;
}

.main-content-projects.marginTopProjects {
    position: relative;
    margin-top: 40%;
    transition: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    opacity: 0 !important;
}


.main-content-projects {
    transform: translateY(20%);
    transition: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    opacity: 0;
}


.background-img {
    width: 60vw;
    opacity: .2;
    transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.design-background {
    width: 100%;
    height: 100vw;
}

.portfolio-background {
    width: 100%;
    height: 100vh;

}


@media (max-width: 768px) {
    .design-background {
        width: 100%;
        height: 100%;
    }
}

.design-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .4;
}


@media (max-width: 784px) {
    .background-img {
        width: 100vw;
        opacity: .3;
    }

    .header-title h1 {
      
        font-size: 10.9vw;
line-height: 10.8vw !important;
    }

    .logo {
        padding: 6vw 4.8vw !important;
    }
}

.logo {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #B7AD9D;
    width: 100%;
    font-family: var(--font-f-Bold);
    padding: 3vw 8.8vw;
    cursor: pointer;
    z-index: 999;
    background: linear-gradient(to bottom, rgba(16, 25, 33, 1), rgba(22, 22, 22, 0));
}

.logo img {
    width: 50% !important;
    opacity: .7;
}

.logo.active {
    background: transparent;
    color: #161616;
}

.logo span {
    font-family: var(--font-f-Light);

}

.logo strong {
    font-size: var(--font-lh-p);
    font-family: var(--font-f-Light);
    text-align: center;
    vertical-align: middle;

}

.header-title {
    position: absolute;

    left: 0%;
    padding: 8.8vw;
    width: 100%;
}

@media (max-width: 767px) {
    .header-title {

        padding: 0 4.8vw;

    }

    .t-2-about {
        margin-left: 0 !important;
    }
}

.t-2 {


    color: #b46633;
}

.t-2-about {
    margin-left: -22.5vw;
}

.t-1,
.t-2,
.t-3 {
    position: relative;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    font-family: var(--font-f-Medium);
}

.t-1.active,
.t-2.active,
.t-3.active {
    transform: translateY(0);
}

.header-title h1 {
    line-height: 8vw;
    text-align: center;
    color: #B7AD9D;

    /* color: var(--main-tex-color); */
}

.hamburger span {
    font-family: var(--font-f-Bold);
}

.close-btn {
    display: none;

}

.close-btn.active {
    display: block;
    color: #B7AD9D;
}

.open-btn.active {
    display: none;

}


.images-nav {
    position: absolute;
    top: 0;
    left: 8.8vw;
    width: 20%;
    /* Adjust as needed */
    overflow: hidden;
    height: 100vh;
    display: none;
    flex-direction: column;
    justify-content: center;
   
}

.images-nav.active {
     display: flex;
}

.images-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5vw;


}

.images-nav ul li {
    margin-bottom: 20px;
    overflow: hidden;
    text-align: center;
    height: 40vw;
    opacity: .2;
    transform: translateY(100px);
    animation: slide-up-infinite 80s linear infinite;
}

@keyframes slide-up-infinite {
    0% {
        transform: translateY(200%);
    }

    100% {
        transform: translateY(-200%);
    }
}

.nav-bar {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 8.8vw;
    top: 0;
    left: 0;
    font-family: var(--font-f-Medium);
    font-size: var(--font-lh-h2);
    width: 100%;
    height: 100vh;
    z-index: 9;
    background-color: #101921;
    /* Slightly transparent background */
    backdrop-filter: blur(10px);
    /* Apply blur effect */
    -webkit-backdrop-filter: blur(10px);
    /* Safari support */
    transform: translateY(-100%);
    transition: .3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.nav-bar.active {
    transform: translateY(0);
}

.nav-bar ul {
    display: flex;
    flex-direction: column;
    /*line-height: 7vw;*/
    width: 100%;
    align-items: flex-end;
    justify-content: center;
}


@media (max-width: 767px) {
    .nav-bar ul {
        line-height: 18vw;
    }
     .images-nav {

        display: none;

    }

    .images-nav.active {

        display: none;

    }
}



.nav-bar ul li {
    color: #B7AD9D;
    cursor: pointer;
    font-size: 50px;
    transform: translateY(100%);
    transition: .5s cubic-bezier(0.445, 0.05, 0.55, 0.95);


}

.nav-bar ul li.active {
    transform: translateY(0);
    transition-delay: .2s;

}

.nav-bar ul li:hover {
   
    opacity: .5;


}

.hidden-mask {
    overflow: hidden;

}

.social-media {
    position: fixed;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0 8.8vw;
    bottom: 7vw;


}

@media (max-width: 768px) {
    .social-media {
        position: absolute;
    }
}

.link-button,
.video-button {
    width: 6vw;
    height: 6vw;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.video-button {
    position: absolute;
    right: 8.8vw;
    width: 6vw;
    height: 6vw;
    bottom: 7vw;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
}


@media (max-width: 767px) {

    .link-button,
    .video-button {
        width: 20vw;
        height: 20vw;

    }
}


.link-button {
    /* transform: rotate(180deg); */
    transition: .5s cubic-bezier(0.215, 0.610, 0.355, 1);

}



.circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-family: var(--font-f-Medium);
    font-size: var(--font-lh-h4);
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid rgb(183, 173, 157, .2);
    ;
    transition: .4s cubic-bezier(0.215, 0.610, 0.355, 1);

}



.circle:hover {
    background-color: rgb(183, 173, 157, .5);
    border: none;
    transform:  rotate(-360deg);

}



.video-container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index: 100;
    background-color: #b46633;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10vw;
    transform: translateY(-100%);
    transition: transform .3s cubic-bezier(.215, .61, .355, 1);
    z-index: 999;

}

.image-under {
    position: absolute;
    top: 8vw;
    left: 10vw;
    width: 80%;
    opacity: 0;
    transition: .2s cubic-bezier(0.445, 0.05, 0.55, 0.95)
}

.image-under-mob {

    display: none;

}

.mob {
    display: none;
}

.image-under-design {
    position: absolute;
    top: 0;
    left: 0vw;
    width: 100%;
    opacity: 0;
    transition: .4s cubic-bezier(0.445, 0.05, 0.55, 0.95)
}


.image-under-services {
    position: absolute;
    display: flex;
    justify-content: space-around;
    align-items: center;
    top: 50%;
    left: 0vw;

    width: 100%;
    opacity: 1;
    transition: .4s cubic-bezier(0.445, 0.05, 0.55, 0.95)
}


@media (max-width: 767px) {
    .image-under-services {
        display: none;
    }

   
}

.s-under-img {
    opacity: .5;
    position: absolute;
    scale: 1;
}

/* @media (min-width: 1900px) {
    .s-under-img {
        margin-top: -40vw;
    }
} */


.page-service-0 {
    position: absolute;
    transform: scale(.5) translateX(-70%);
    cursor: pointer;
    transition-delay: .1s;
    transition: .1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    z-index: 5;
    height: 50vw;
    width: 70vw;
}


@media (max-width: 767px) {

    .page-service {
        height: 150vw;
        width: 70vw;
    }

    .page-service-0 {
        height: 150vw !important;
        width: 70vw !important;
    }

    .page-service-1 {
        height: 150vw !important;
        width: 70vw !important;
    }

    .page-service-2 {
        height: 150vw !important;
        width: 70vw !important;
    }

    .page-service-3 {
        height: 150vw !important;
        width: 70vw !important;
    }


    .page-service-4 {
        height: 150vw !important;
        width: 70vw !important;
    }

    .page-service-5 {
        height: 150vw !important;
        width: 70vw !important;
    }

    .page-service-6 {
        height: 150vw !important;
        width: 70vw !important;
    }
}


.page-service-1 {
    position: absolute;
    transform: scale(.3) translateX(-70%);
    cursor: pointer;
    transition-delay: .1s;
    transition: .1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    z-index: 4;
    height: 50vw;
    width: 70vw;
}

img.s-img {
    opacity: .9;
}

.page-service-2 {
    position: absolute;
    transform: scale(.5) translateX(70%);
    cursor: pointer;
    transition-delay: .2s;
    transition: .5s linear;
    z-index: 5;
    height: 50vw;
    width: 70vw;
}

.page-service {
    position: absolute;
    transform: scale(.1) translateX(30%);
    cursor: pointer;
    transition-delay: .2s;
    transition: .5s linear;
    z-index: 5;
    height: 50vw;
    width: 70vw;
    z-index: 2;
}

.page-service-3 {
    position: absolute;
    transform: scale(.2) translateX(70%);
    cursor: pointer;
    transition-delay: .3s;
    transition: .5s linear;
    z-index: 3;
    height: 50vw;
    width: 70vw;


}

.page-service-4 {
    position: absolute;
    transform: scale(.1);
    cursor: pointer;
    transition-delay: .4s;
    transition: .5s linear;
    z-index: 2;
    height: 50vw;
    width: 70vw;
}


.page-service-5 {
    position: absolute;
    transform: scale(.09);
    cursor: pointer;
    transition-delay: .4s;
    transition: .5s linear;
    z-index: 1;
    overflow: hidden;
    height: 50vw;
    width: 70vw;


}

.page-service-6 {
    position: absolute;
    transform: scale(.02);
    cursor: pointer;
    transition-delay: .4s;
    transition: .5s linear;
    height: 50vw;
    width: 70vw;

}

.page-service:hover {
    margin-left: -10vw;
    scale: 1.1;
    transition: .6s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.page-service-0:hover {
    margin-left: 10vw;
    scale: 1.1;
    transition: .6s cubic-bezier(0.445, 0.05, 0.55, 0.95);

}

.page-service-1:hover {
    margin-left: 10vw;
    scale: 1.1;
    transition: .6s cubic-bezier(0.445, 0.05, 0.55, 0.95);

}

.span-s {
    position: relative;
    bottom: 3vw;
    transition: .6s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.page-service-1:hover .span-s-1 {
    margin-top: -5vw;
}

.page-service-2:hover {
    margin-left: -10vw;
    scale: 1.1;
    transition: .6s cubic-bezier(0.445, 0.05, 0.55, 0.95);

}

.page-service-3:hover {
    margin-left: -10vw;
    scale: 1.1;
    transition: .6s cubic-bezier(0.445, 0.05, 0.55, 0.95);

}

.page-service-4:hover {
    margin-left: 10vw;
    scale: 1.1;
    transition: .6s cubic-bezier(0.445, 0.05, 0.55, 0.95);

}

.page-service-5:hover {
    margin-left: -10vw;
    scale: 1.1;
    transition: .6s cubic-bezier(0.445, 0.05, 0.55, 0.95);

}

.page-service-6:hover {
    margin-left: 10vw;
    scale: 1.1;
    transition: .6s cubic-bezier(0.445, 0.05, 0.55, 0.95);

}


.image-under-services h3 {
    color: #B7AD9D;
    font-size: var(--font-lh-h1);
    font-family: var(--font-f-Bold);
}


.span-s {
    position: relative;
    color: #B7AD9D;
    font-family: var(--font-f-Light);
    text-align: center;
    font-size: var(--font-s-h2);

}





.image-under-about {
    position: absolute;
    top: 0;
    left: 0vw;
    width: 100%;

    transition: .4s cubic-bezier(0.445, 0.05, 0.55, 0.95)
}

.image-under-about img {
    opacity: 1;
}

.image-under-dev {
    position: absolute;
    top: 30%;
    left: 30%;
    width: 60%;

    transition: .1s cubic-bezier(0.445, 0.05, 0.55, 0.95)
}

.image-under-dev img {

    opacity: 1;

}




.image-under img {

    object-fit: cover;
    width: 100%;
    height: 100%;
}

.video-container.active {
    transform: translateY(0);
}

.video-container.close {
    transform: translateY(-100%);
    transition: transform 1s cubic-bezier(.215, .61, .355, 1), 2;
}

.sub {
    display: flex;
    font-size: 15px;
    font-family: Gilroy-Bold, Helvetica, Arial, sans-serif;
    height: 50px;
    padding: 0 20px;
    text-align: center;
}


.video {
    display: flex;
    justify-content: center;
    max-width: 1200px;
    align-items: center;
    height: auto;
    width: 100%;
    transition: transform 2s cubic-bezier(.215, .61, .355, 1), 1.7s;
}




.videomask {
    position: absolute;
    visibility: visible;
    width: 100%;
    height: 40%;
    z-index: 2;
    background-color: #b46633;
    transform: translateY(0);

}



.videomask.videomask-left-top {
    bottom: 50%;
    right: 0;
    transition: transform 1s cubic-bezier(.215, .61, .355, 1), 2s;
}

.videomask.videomask-left-top.active {
    transform: translateX(-100%);

}



.videomask.videomask-right-bottom.close {
    transform: translateX(0);
    transition: transform .6s cubic-bezier(.215, .61, .355, 1), 2s;
}


.videomask.videomask-left-top.close {
    transform: translateX(0);
    transition: transform .6s cubic-bezier(.215, .61, .355, 1), 2s;

}



.videomask.videomask-right-bottom.active {
    transform: translateX(100%);
}



.videomask.videomask-right-bottom {
    top: 50%;
    left: 0;
    transition: transform 1s cubic-bezier(.215, .61, .355, 1), 2s;
}


video {
    height: auto;
    width: 100%;

}


video {
    height: auto;
    width: 90%;

}

.video.close {
    width: 0;
    transition: 1s cubic-bezier(.215, .61, .355, 1), .3s;
}



.close-video-button {
    font-family: Gilroy-Bold, Helvetica, Arial, sans-serif;
    display: flex;
    justify-content: flex-end;
    color: #161616;
    font-size: 23px;
    z-index: 99;
    padding-right: 40px;
    cursor: pointer;
}

.gap-top-10 {
    margin-top: 10vw;
}

@keyframes bounce {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}


.circle:hover i {
    color: #161616;

}


.circle i {
    color: #B7AD9D;

    font-size: var(--font-lh-h5);
}


.social-media ul li {
    font-size: 1.5rem;
    padding: 1vw 0;
    color: #B7AB98;
    cursor: pointer;
}


@media (max-width: 767px) {
    .social-media ul li {

        padding: 2vw 0;

    }
}

.social-media ul li:hover {
    transform: scale(1.1);
    color: #b46633;
}



#cursor {
    position: absolute;
    width: 4.5vw;
    height: 4.5vw;
    text-align: center;
    background-color: rgba(183, 173, 157, 0.5);
    backdrop-filter: blur(10px);
    /* background-color: #b46633; */
    border-radius: 50%;
    pointer-events: none;
    font-family: var(--font-f-Bold);
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #161616;
    font-size: .8vw;
    letter-spacing: .3vw;
    line-height: 1vw;
    font-family: Arial, sans-serif;
    font-weight: bold;
    opacity: 0;
    transition: .3s cubic-bezier(0.215, 0.610, 0.355, 1);
}

#cursor-game {
    width: 5vw;
    height: 5vw;
    text-align: center;
    /* background-color: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(10px); */

    border-radius: 50%;
    pointer-events: none;
    font-family: var(--font-f-Light);
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #161616;
    font-size: .8vw;
    letter-spacing: .3vw;
    line-height: 1vw;
    font-family: Arial, sans-serif;
    font-weight: bold;
    opacity: 0;
    transition: .3s cubic-bezier(0.215, 0.610, 0.355, 1);
}

@media (max-width: 767px) {
    #cursor {
        display: none;
    }

    .about-items {
        margin: 30vw 4.8vw 10vw !important;

    }
}



/* ABOUT-SECTION */

.about {
    height: 100vh auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15vw;
}

.about-items {
    margin: 30vw 8.8vw 10vw;

}

.about-items h3 {
    font-family: var(--font-f-Medium);
    color: #B7AD9D;
    transform: translateY(200%);
    opacity: 0;
    margin-bottom: 3vw;
    letter-spacing: .5vw;
    transition: .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}


.about-items h2 {
    font-family: var(--font-f-Bold);
    /* line-height: 4.5vw; */
    transform: translateY(100%);
    font-size: var(--font-lh-h2);
    color: #B7AD9D;
    opacity: 0;
    transition: .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

@media (max-width: 767px) {

    .about-items h2 {
        line-height: normal;
    }

    .teh-items {
        margin: 0 4.8vw !important;
    }

}

.about-text-paragraph {
    margin: 2vw 0;
    color: #B7AD9D;
    font-family: var(--font-f-Bold);
}




/* TEH SECTION */

.teh {

    margin: 30vw 0;
    overflow: hidden;
}

.teh-items {
    width: 100%;
    overflow: hidden;
    margin: 0 8.8vw;
}

.teh-items img {
    position: relative;
    object-fit: cover;
    width: 100%;
}

.teh-items h3 {
    font-family: var(--font-f-Medium);
    color: #B7AD9D;
    opacity: 0;
    transform: translateY(200%);
    margin-bottom: 3vw;
    letter-spacing: .6vw;
    transition: .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}


.teh-items ul li {
    font-family: var(--font-f-Bold);
    color: #B7AD9D;
    font-size: 9vw;

    line-height: 9vw;
    transform: translateY(140%);
    border-bottom: 1px solid rgba(183, 173, 157, 0.1);
    cursor: pointer;
}

@media (max-width: 767px){
    .teh-items ul li {
    
    font-size: 12vw;
line-height: 16vw;
   
}
}


.letter-3 {
    position: absolute;

}




/* WORK SECTION */

.work {
    height: auto;
    overflow: hidden;
    width: 100%;

}



/* .work-items {
    overflow: hidden;
} */


.work-items h2 {
    color: #B7AD9D;
    transform: translateY(100%);
    font-size: var(--font-lh-h1);
    font-family: var(--font-f-Bold);
    transition: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    margin-left: 8.8vw;

}





video {
    width: 100%;
    object-fit: cover;
}

.Work-img:hover .work-video {
    display: block;
    z-index: 2;
}

.Work-img:hover {
    opacity: 0;
}

.work-video {
    position: absolute;
    left: 50%;
    top: 50%;
    display: none;
    transform: translate(-50%, -50%);
    height: 100%;
    width: 100%;

}

@media (max-width: 767px) {
    .work-video {
        display: none;
    }

    .work-info-home-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 4;
    }

    h3.work-info-home {
        color: #f8f8f8;
        text-align: center;
        opacity: .4;
        font-family: var(--font-f-Bold);
        font-size: var(--font-lh-h1);
        top: 0;
        display: block !important;
        z-index: 10;

    }

    h3.work-info-home-portfolio {

        font-size: var(--font-lh-h1) !important;
    }

}

h3.work-info-home {
    display: none;
}

.work-info-home-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes slideRightToLeft {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}


.work-info-home-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
}

h4.work-info-home-portfolio {
    color: #f8f8f8;
    text-align: center;
    opacity: .9;
    font-family: var(--font-f-Bold);
    font-size: var(--font-lh-h2);
    top: 0;
    z-index: 10;

}


h3.work-info-home-portfolio {
    color: #f8f8f8;
    text-align: center;
    opacity: .4;
    font-family: var(--font-f-Bold);
    font-size: var(--font-lh-h0);
    top: 0;
    z-index: 10;

}




.img-text-wrok ul {
    display: flex;
    align-items: center;
    margin-top: 10vw;
    overflow: hidden;
    gap: 2vw;
    width: 300vw;
    transition: .3s cubic-bezier(0.215, 0.610, 0.355, 1);

}

.img-text-wrok ul li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateX(8.8vw);
    overflow: hidden;
    width: 40vw;
    height: 25vw;
    opacity: .7;
    transition: .3s cubic-bezier(0.215, 0.610, 0.355, 1);
    cursor: pointer;
}


@media (max-width: 766px) {
    .img-text-wrok ul li {
        transform: translate(0) !important;
        width: 100%;
        height: auto;

    }

    .img-text-wrok ul {
        flex-direction: column;
        width: 100%;

    }

    .link-button-portfolio {

        margin: 10vw 0 0 0 !important;
    }


}

/*.one,*/
/*.two,*/
/*.three,*/
/*.four {*/

/*    opacity: 0;*/
/*    transform: translateY(100%);*/

/*}*/





.work-items h3 {
    font-family: var(--font-f-Medium);
    color: #B7AD9D;
    transform: translateY(200%);
    opacity: 0;
    margin-left: 8.8vw;
    margin-bottom: 3vw;
    letter-spacing: .6vw;
    transition: .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}



.work-items h4 {
    font-family: var(--font-f-Bold);
    color: #B7AD9D;
    opacity: 0;
    margin: 0 8.8vw;
    transform: translateY(100%);
    font-size: var(--font-lh-h2);
    transition: .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

@media (max-width: 767px) {
    .work-items h4 {
        margin: 0 4.8vw;
    }

    .work-items h3 {
        margin-left: 4.8vw;
    }

    .social-media {

        padding: 0 4.8vw;

    }
}


.img-text-wrok h2 {
    color: #B7AD9D;
    transform: translateY(-50%);
    font-family: var(--font-f-Medium);
    transition: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}






.link-button-work {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 20vw;

}

.link-button-services {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10vw;

}




.link-button-portfolio {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 30vw;
}


.img-text-wrok img {
    position: relative;
    overflow: hidden;
    width: 100%;
    z-index: 2;
    transition: .4s;

}

.Work-img:hover img {
    opacity: .5;
}



.hover-link {
    position: relative;

}

#hover-circle {
    display: none;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 50%;
    padding: 10vw 10vw;
}

#hover-circle.show {
    display: block;
}




/* BLOG SECTION */



.blog-img-1 {
    position: relative;
    opacity: 1;
    /* transform: translateX(-100%); */
}

.blog-items h3 {
    font-family: var(--font-f-Medium);
    color: #B7AD9D;
    letter-spacing: .5vw;
    margin-bottom: 3.3vw;
}

.blog-items {
    display: flex;
    flex-direction: column;
    gap: 4vw;
    width: 50%;
}

.blog-items-home {

    margin: 15vw 8.8vw;
}

.blog-items-home h3 {
    font-family: var(--font-f-Medium);
    color: #B7AD9D;
    letter-spacing: .5vw;
    margin-bottom: 3.3vw;
}

.blog-items-home h2 {
    font-family: var(--font-f-Bold);
    font-size: var(--font-lh-h2);
    color: #B7AD9D;
    transition: .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.blog-img-text {

    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 14vw 0;
}

.blog-img-text h4 {
    position: absolute;
    text-align: center;
    opacity: 1;
    padding: 4vw;
    font-size: var(--font-lh-h4);
    font-family: var(--font-f-Light);
    color: #B7AD9D;
    transition: .5s;

}

.members-container {
    display: flex;
    justify-content: space-between;
    margin: 15vw 0;
    gap: 5vw;
    align-items: center;
}


.members-container:nth-child(even) {
    flex-direction: row-reverse;
}

.member-img {
    width: fit-content;
    overflow: hidden;
    height: 30vw;
}


.member-title {
    width: 40vw;
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

.margin-members {
    margin: 0 8.8vw;
}



.member-title p {
    font-family: var(--font-f-Light);
    font-size: var(--font-lh-p);
    color: #B7AD9D;


}

.member-title small {
    font-family: var(--font-f-Bold);
    font-weight: bold;
    text-transform: uppercase;
    color: #B7AD9D;

}

.member-title h3 {
    font-family: var(--font-f-Medium);
    font-size: var(--font-lh-h3);

    color: #B7AD9D;

}

@media (max-width: 767px) {
    .members-container {
        gap: 10vw;
        margin-bottom: 15vw;
        flex-direction: column;
    }

    .member-title {
        width: 100%;
        gap: 5vw;
    }

    .member-title small {
        margin: 0 4.8vw;
    }

    .member-title p {
        margin: 0 4.8vw;
    }

    .member-img {
        width: 100%;
        overflow: hidden;
        height: auto;
    }

    .members-container:nth-child(even) {
        flex-direction: column;
    }

    .margin-members {
        margin: 0;
    }

    .member-title h3 {

        margin: 0 4.8vw;
    }

}

.blog-img-text img {
    opacity: .4;
    transition: .3s;
}

.blog-img-text li:hover img {
    transform: scale(1.1);
    transition: .3s;
}

.blog-img-text p {
    color: #B7AD9D;
}

.blog-img-text ul {
    display: grid;
    /* grid-template-columns: repeat(auto-fill, minmax(28vw, 1fr)); */
    grid-template-columns: 1fr 1fr;


}





.blog-img-text ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30vw;
    overflow: hidden;

}

.blog-items ul {
    display: grid;
    grid-template-columns: 1fr;



}

.blog-items ul li {
    overflow: hidden;

}




.blog-items h2 {
    font-family: var(--font-f-Bold);
    /* line-height: 4.5vw; */
    font-size: var(--font-lh-h2);
    color: #B7AD9D;
    transition: .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}


@media (max-width: 767px) {

    .blog-items h2 {
        line-height: normal;
    }

    .faq-items {
        margin: 10vw 4.8vw !important;
    }

    .blog-items {
        margin: 20vw 4.8vw;
        width: 100%;
        gap: 15vw;

    }


    .blog-items-home {
        margin-left: 4.8vw;
    }

    .blog-img-text ul {
        display: grid;
        /* grid-template-columns: repeat(auto-fill, minmax(28vw, 1fr)); */
        grid-template-columns: 1fr;
        gap: 1vw;

    }

    .blog-img-text ul li {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50vw;
        width: 100%;
        overflow: hidden;
    }
}


/* FAQ SECTION */


.faq-items {
    margin: 10vw 8.8vw;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
}

.faq-items h3 {
    font-family: var(--font-f-Medium);
    color: #B7AD9D;
    letter-spacing: .5vw;
    margin-bottom: 3.3vw;
}


.faq-items ul {
    display: flex;
    flex-direction: column;
}

.faq-items ul li {
    color: #B7AD9D;
    font-family: var(--font-f-Light);
    padding: 1.2vw 0;
    font-size: var(--font-lh-h4);
    cursor: pointer;
    border-bottom: 1px solid rgb(183, 173, 157, 0.1);
}


@media (max-width: 767px) {

    .faq-items ul li {
        padding: 7vw 0;
    }

    .answer {

        line-height: var(--mob-line-height) !important;

    }
}

.faq-arrow {
    font-weight: bold;

}



/* FOOTER SECTION */

.footer {
    border-top: 1px solid rgba(183, 173, 157, 0.1);
}

.fotter-items {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    color: #B7AD9D;
    margin: 0 8.8vw;

}


.info span {
    padding-left: .5vw;
}

.footer-big-let h2 {
    font-family: var(--font-f-Medium) !important;
    font-size: var(--font-lh-h2);
    color: #B7AD9D;
    margin: 7vw 8.8vw;
}

@media (max-width: 768px) {
    .fotter-items {
        display: flex;
        flex-direction: column-reverse !important;
        justify-content: center;
        align-items: flex-start;
        color: #B7AD9D;
        margin: 0 4.8vw;
        border-top: none !important;

    }

    .footer-big-let h2 {
        font-family: var(--font-f-Medium) !important;
        font-size: var(--font-lh-h2);
        color: #B7AD9D;
        margin: 7vw 4.8vw;
    }
}

.email h5 {
    font-family: var(--font-f-Bold);
    font-size: var(--font-lh-h5);
}

.copy h5 {
    color: #B7AD9D;
    text-align: center;
    font-family: var(--font-f-Bold);
    margin: 5vw 0 5vw;
}

.info h5 {
    font-family: var(--font-f-Light);
    font-size: var(--font-lh-h5);
    line-height: var(--font-lh-h3);
}


.social-media-footer {
    display: flex;
    justify-content: space-between;
    gap: 5vw;
    margin-top: 2vw;

}

.social-media-footer ul li {
    padding: 1.5vw 0;
    font-size: 1.5vw;
}



.video-section {
    margin: 20vw 0;
    width: 100%;
    height: 100vh;
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;


}





.video-section video {
    position: absolute;
    left: 0;
    height: 100vh;
    opacity: .5;
    transform: scale(.9);
}





/*.video-section img {*/
/*    position: absolute;*/
/*    left: 0;*/
/*    opacity: .5;*/
/*    transform: scale(.9);*/
/*}*/


.cookie-container {
    position: fixed;
    bottom: 2.5vw;
    display: flex;
    color: #070707;
    justify-content: center;
    width: 100%;

    z-index: 9999;
}


@media (max-width: 767px) {
    
    
       .video-section video {

        height: 100vh;

    }
    .cookie-container {

        bottom: 5.5vw !important;

    }

    .cookie-container ul li {
        font-size: small;
        padding: 3.5vw 4.5vw !important;
    }
}

.cookie-container ul {
    display: flex;
    width: fit-content;
    font-family: var(--font-f-Medium);
    border-radius: 6vw;
    backdrop-filter: blur(10px);
    background-color: rgba(164, 153, 129, .7);
    justify-content: space-between;
    align-items: center;
}

.cookie-container ul li {
    text-align: center;
    padding: 1vw 2vw;
}

.cookie-container ul li:hover {
    opacity: .5;
}


.cookie-btn {
    cursor: pointer;
}



/*////////////////////////////////// CONTACT PAGE ////////////////////////////////////*/

.contact {
    transition: .3s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.contact-items {
    margin: 20vw 8.8vw;
}

.info-data-items ul li {
    font-family: var(--font-lh-p);

    font-family: var(--font-f-Medium);
}

.form-inputs form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5vw;
}

@media (max-width: 767px) {

    .form-inputs form {
        grid-template-columns: 1fr;
        gap: 10vw;
    }

    .contact-items {
        margin: 20vw 4.8vw;
    }

    .form-inputs input {

        padding: 5vw 0 !important;

    }

    .info-data-items ul {
        margin: 20vw 4.8vw !important;
    }
}

.form-inputs input {

    border-bottom: 1px solid rgb(183, 173, 157, .5);
    padding: 2vw 0;
    font-family: var(--font-f-Bold);
    color: #B7AB98;

    transition: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.form-inputs input::before {
    content: "";
    position: absolute;
    left: 10vw;
    bottom: 10%;
    width: 100%;
    /* Start with zero width */
    height: 1px;
    background-color: rgb(180, 123, 32);
    transition: width 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    opacity: 1;
    z-index: 2;
    /* Ensure opacity is 1 */
}

.form-inputs input:hover::before {
    width: 100%;
    /* Expand to full width on hover */
}




.form-inputs textarea {
    border-bottom: 1px solid rgb(183, 173, 157, .5);
    padding: 2vw 0;
    font-family: var(--font-f-Bold);
    color: #B7AB98;
}

.contact-heding {
    text-align: center;
}

.contact h2 {
    margin-top: 20vw;
    margin-bottom: 3vw;
    text-align: center;
    font-family: var(--font-f-Bold);
    font-size: var(--font-lh-h2);
    color: #B7AD9D;
}

.contact h5 {
    color: #B7AD9D;
    top: 3vw;
    text-align: center;
    font-size: var(--font-lh-h4);
    font-family: var(--font-f-Light);
}

@media (max-width: 767px) {
    .contact h5 {
        margin: 0 4.8vw !important;
    }

}

.input-btn {
    cursor: pointer;
    background-color: #b46633;
    letter-spacing: .5vw;
    transition: .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.input-btn:hover {
    color: #161616;
    opacity: .8;
}


.info-data-items ul {
    display: flex;
    margin: 20vw 8.8vw;
    gap: 1vw;
    flex-direction: column;
    color: #B7AD9D;
}



.line-container {
    position: relative;
    margin-top: 10vw;
    overflow: hidden;
    height: 15vw;
}

.line {
    white-space: nowrap;
    position: absolute;
    animation: scroll infinite linear 70s;
    left: 0;
    top: 0;
    width: max-content;
}

@keyframes scroll {
    0% {
        transform: translateX(10%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.scrolling-text {
    padding-right: 20px;
    color: #B7AD9D;
    font-size: 14vw;
    opacity: .05;
    font-family: var(--font-f-Bold);
}



/* /////////////////////// ABOUT US PAGE //////////////////////////// */

.about-us-items {
    margin: 30vw 8.8vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 767px) {
    .about-us-items {
        margin: 30vw 4.8vw;
        align-items: flex-start;


    }

    .about-us-items h3 {
        margin-bottom: 5vw !important;

    }

    .about-us-items p {
        line-height: normal !important;
        width: 100% !important;
    }
}

.about-background {
    height: 100vh;
}


.about-us-items h3 {
    font-family: var(--font-f-Medium);
    margin-bottom: 3vw;
    letter-spacing: .5vw;
    opacity: 1;
    color: #B7AB98;
}

.about-us-items p {
    font-family: var(--font-f-Light);
    line-height: 2.5vw;
    font-size: var(--font-lh-p);
    width: 55vw;
    opacity: 1;
    color: #B7AD9D;
    transition: .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}


@media (max-width: 767px) {

    .about-us-items h2 {
        line-height: 7.5vw;
    }

    .about-text p {
        line-height: normal !important;
        margin: 15vw 4.8vw !important;
        width: 90% !important;
    }

    .about-text {
        align-items: flex-start !important;
    }

    .teh-section-items h2 {
        line-height: 7.5vw !important;
    }

    .web-teh h3 {
        opacity: .3;
        margin-left: 4.8vw !important;

    }

    .faq {
        margin-top: 20vw;
    }

    .icons-tech {
        margin-bottom: 30vw !important;
        margin: 0 4.8vw !important;
    }
}

.icons-tech {
    margin: 0 8.8vw;
}

.icons-tech ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.icons-tech img {
    width: 7vw;
    transition: .4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.icons-tech ul li {
    cursor: pointer;
    opacity: .4;
    filter: grayscale(.9);
    transition: .4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.icons-tech ul li:hover {
    opacity: .8;
    filter: grayscale(0);
}

.web-teh-main {
    height: auto;
    margin-bottom: 20vw;
}

.web-teh {
    margin: 10vw 0;
    overflow: hidden;

}

.web-teh h3 {
    font-family: var(--font-f-Medium);
    margin-bottom: 3vw;
    letter-spacing: .5vw;
    /* margin-left: 8.8vw; */
    opacity: 1;
    text-align: center;
    color: #B7AB98;
}



.web-teh ul {
    display: flex;
    justify-content: space-between;
    color: #B7AD9D;
    font-family: var(--font-f-Bold);
    font-size: var(--font-lh-h1);
    transition: .4s cubic-bezier(0.215, 0.610, 0);
}

.web-teh img {
    position: absolute;
    left: 0;
    opacity: .1;
}

.about-text p {
    font-family: var(--font-f-Light);
    margin: 15vw 8.8vw;
    line-height: 2.5vw;
    font-size: var(--font-lh-p);
    opacity: 1;
    width: 55vw;
    color: #B7AD9D;
    transition: .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.about-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 767px) {

    .about-text h2 {
        margin: 15vw 4.8vw;
    }

    .about-text h2 {
        margin: 15vw 4.8vw !important;
    }

    .teh-section-items {
        margin: 30vw 4.8vw !important;
    }

    .teh-section-items h3 {

        margin-bottom: 5vw !important;

    }

}



.ul-2 {
    transform: translateX(-100%);
}


.teh-section-items {

    margin: 30vw 8.8vw;
}

.teh-section-items h2 {
    font-family: var(--font-f-Light);
    line-height: 3.5vw;
    font-size: var(--font-lh-h4);
    color: #B7AD9D;
    transition: .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}



.teh-section-items h3 {
    font-family: var(--font-f-Medium);
    text-transform: uppercase;
    margin-bottom: 3vw;
    letter-spacing: .5vw;
    color: #B7AB98;
}

.teh-section-items ul {

    display: flex;
    flex-direction: column;
    gap: 2vw;
    font-size: var(--font-lh-h4);
}








/* /////////////////////////////////DESIGN PAGE/////////////////////////////////////////// */

.design-items {
    margin: 30vw 8.8vw 10vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}



.design-items h3 {
    font-family: var(--font-f-Medium);
    text-transform: uppercase;
    margin-bottom: 3vw;
    opacity: 1;
    letter-spacing: .5vw;
    color: #B7AB98;
}

.design-items p {
    font-family: var(--font-f-Light);
    line-height: 3vw;
    font-size: var(--font-lh-p);
    opacity: .7;
    color: #B7AD9D;
    transition: .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.design-items p {
    font-family: var(--font-f-Light);
    line-height: 2.5vw;
    font-size: var(--font-lh-p);
    width: 65vw;
    opacity: 1;
    color: #B7AD9D;
    transition: .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}


@media (max-width: 767px) {
    .design-items h2 {
        line-height: var(--mob-line-height)
    }

    .design-items ul li {
        line-height: var(--mob-line-height) !important;
    }

    .visual-design-items h2 {

        line-height: var(--mob-line-height) !important;

    }

    .design-items {
        margin: 30vw 4.8vw 10vw;
        align-items: flex-start;
    }

    .design-items h3 {
        margin-bottom: 5vw;
    }

    .design-items p {
        line-height: normal;
        width: 100%;
    }


    .design-items h4 {
        line-height: normal;
        font-weight: 100;
    }

    .visual-design-items {
        margin: 10vw 4.8vw !important;
        height: 60%;
        align-items: flex-start !important;
    }

    .ux-design-items p,
    .visual-design-items p {
        line-height: normal !important;
        width: 100% !important;
    }

    .visual-design-items h3 {
        margin-bottom: 5vw !important;
    }

    .design-img {
        display: none;
    }

    .style-buttons {
        display: none !important;

    }
    
    .design-items ul {
   
    margin-left: 0 !important;
}
}



.visual-design-items {
    margin: 10vw 8.8vw;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.visual-design-items h3 {
    font-family: var(--font-f-Medium);
    text-transform: uppercase;
    margin-bottom: 3vw;
    opacity: 1;
    letter-spacing: .5vw;
    color: #B7AB98;

}

.design-items ul {
    margin-top: 5vw;
    width: 100%;
    margin-left: 17vw;
}


.design-items ul li {
    font-family: var(--font-f-Light);
    line-height: 3vw;
    font-size: var(--font-lh-p);
    color: #B7AD9D;
    transition: .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.design-items ul li span {
    font-family: var(--font-f-Light);
    font-size: 1.5vw;
}


.visual-design-items p {
    font-family: var(--font-f-Light);
    line-height: 2.5vw;
    font-size: var(--font-lh-p);
    width: 65vw;
    opacity: 1;
    color: #B7AD9D;
    transition: .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}



.ux-design-items {
    margin: 10vw 8.8vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.ux-design-items h3 {
    font-family: var(--font-f-Medium);
    text-transform: uppercase;
    margin-bottom: 3vw;
    opacity: 1;
    letter-spacing: .5vw;
    color: #B7AB98;
}


.ux-design-items p {
    font-family: var(--font-f-Light);
    line-height: 2.5vw;
    font-size: var(--font-lh-p);
    width: 65vw;
    opacity: 1;
    color: #B7AD9D;
    transition: .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}


@media (max-width: 767px) {
    .ux-design-items h2 {
        line-height: var(--mob-line-height);
    }

    .ux-design {
        margin-top: 20vw;
        width: 100%;
    }

    .style-buttons {
        display: flex;
        flex-direction: column;
        bottom: 0;
        justify-content: space-around;
        align-items: center;
        margin-top: 4vw;
    }

    .ux-design-items h3 {
        margin-bottom: 5vw;
    }

    .ux-design-items {
        margin: 0 4.8vw 20vw 4.8vw;
        align-items: flex-start;
    }

    .visual-design {
        height: auto !important;
    }
}



.design-img {
    background-color: #ccc3b5;
    margin-top: 10vw;
    height: 100%;
}

.desgn-header {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-f-);
    padding: 2vw;
}

.desgn-header ul {
    display: flex;
    justify-content: space-between;
    gap: 3vw;
    align-items: center;
    text-transform: uppercase;

}

.design-title {
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.design-title p {
    font-family: var(--font-f-Medium);
    width: 40vw;
    text-align: center;
    margin-top: 3vw;
}

.design-title h2 {
    color: #161616;
    font-size: var(--font-lh-h2);

}

.logo-design strong {
    font-family: var(--font-f-Bold);
}

.social-media-design {
    position: absolute;
    display: flex;

    justify-content: space-between;
    align-items: center;
    padding: 0 2vw;
    bottom: 20%;
}

.social-media-design ul {
    display: flex;
    flex-direction: column;
    gap: 1vw;

}


.style-buttons {
    display: flex;
    bottom: 0;
    justify-content: space-around;
    align-items: center;
    margin-top: 4vw;


}

.style-buttons button {
    border-bottom: 1px solid #b46633;
    font-family: var(--font-f-Bold);
}

.inner-circle {
    position: absolute;
    left: 0;
}






/* //////////////////////// WEB DEVELOPMENT ///////////////////////////////// */

@media (max-width: 767px) {
    .image-under-dev {

        margin-top: 40%;

    }

    .services-page-items h2 {
        line-height: var(--mob-line-height) !important;
    }

    .web-development {
        margin-top: 30vw;
    }

    .t-2-dev {
        transform: translateX(0) !important;
    }

    .web-development-items {
        margin: 20vw 4.8vw !important;
        align-items: flex-start !important;

    }

    .web-development-example-items p,
    .web-development-items p {
        line-height: normal !important;
        width: 100% !important;
    }

    .web-development-items h3 {
        margin-bottom: 5vw !important;
    }

    .web-development-example-items {
        margin: 0 4.8vw !important;
    }

    .web-development-example-items h3 {

        margin-bottom: 4vw !important;

    }

    .kviz-container {

        width: 90% !important;
        margin: 0 4.8vw;
            margin-bottom: 40vw !important;

    }

    #question {

        font-size: 5vw !important;
    }

}


.web-development-example-items {
    margin: 0 8.8vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}



.web-development-example-items h3 {
    font-family: var(--font-f-Medium);
    text-transform: uppercase;

    margin-bottom: 3vw;
    letter-spacing: .5vw;
    color: #B7AB98;
}

.web-development-example-items p {
    font-family: var(--font-f-Light);
    line-height: 2.5vw;
    font-size: var(--font-lh-p);
    color: #B7AD9D;
    width: 65vw;
    opacity: 1;
    transition: .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}



.board {
    display: flex;
    justify-content: center;
    align-items: center;

}

.cell {
    width: 70px;
    height: 70px;
    border: 1px solid #B7AD9D;
    display: flex;
    align-items: center;
    color: #B7AD9D;
    font-family: var(--font-f-Bold);
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
}

.web-development-items {
    margin: 20vw 8.8vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.web-development-items h3 {
    font-family: var(--font-f-Medium);
    text-transform: uppercase;
    margin-bottom: 3vw;
    opacity: 1;
    letter-spacing: .5vw;
    color: #B7AB98;
}





.web-development-items p {
    font-family: var(--font-f-Light);
    line-height: 2.5vw;
    font-size: var(--font-lh-p);
    color: #B7AD9D;
    width: 65vw;
    opacity: 1;
    transition: .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}


canvas {
    border: 1px solid #B7AB98;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 70vw;
}


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

.web-game {
    display: flex;
    flex-direction: column;
    gap: 5vw;
    width: 100%;
    margin-top: 25vw;
    align-content: center;
    align-items: center;
}

.custom-button {
    position: relative;
    margin-top: 3vw;
    font-family: var(--font-f-Light);
    border-bottom: 1px solid #b46633;
}


#timer {
    color: #B7AD9D;
    font-family: var(--font-f-Light);
}

#gameOver {
    color: #B7AD9D;
    font-family: var(--font-f-Bold);
}

.memory-game {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    width: 70vw;
    height: 70vw;
}


@media (max-width: 767px) {
    .memory-game {
        width: 100%;
        height: 100vw;
    }

    .web-development-items h2 {

        line-height: var(--mob-line-height);
    }


    .web-development-example-items h2 {

        line-height: var(--mob-line-height);

    }

}

.memory-card {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    margin: 5px;
    background-color: #B7AD9D;
    color: #B7AD9D;
    font-family: var(--font-f-Bold);
    font-size: 24px;
    cursor: pointer;
    transition: background-color 0.5s;
}



.flip {
    background-color: #b46633;
    color: #161616;
    opacity: 1;
}

.memory-card.matched {
    visibility: hidden;
}

#question,

#submit,
#feedback,
#score {
    display: flex;
    gap: 2vw;
    text-align: center;
    color: #B7AD9D;
    font-family: var(--font-f-Medium);
}

#question {
    text-align: center;
    font-size: 2vw;
}

#options {
    display: flex;

}


#options button {

    padding: .5vw;
    border-left: 1px solid #b46633;
    color: #B7AD9D;
    font-family: var(--font-f-Bold);
}

@media (max-width: 767px) {
    #options button {
        padding: 1.5vw;
    }

    #options {

        flex-direction: column;
        gap: 4vw;
        margin: 8vw 0;
            
    }
}

.kviz-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 50vw;
    gap: 4vw;
    margin-bottom: 10vw;

}

.web-game h3 {
    font-family: var(--font-f-Medium);
    text-transform: uppercase;
    margin-bottom: 3vw;
    letter-spacing: .5vw;
    color: #B7AB98;
}


/* ///////////////////////////////SERVICES////////////////////////////////////////////////////////// */

.serivices {
    margin-bottom: 8vw 0;
}

.services-items {
    margin: 10vw 8.8vw;
    display: flex;
    flex-direction: column;
    /* width: 55vw; */
    align-items: flex-start;
}

.price-btn {
    display: flex;
    justify-content: space-between;
    color: #B7AD9D;
    font-family: var(--font-f-Medium);
    margin: 0 8.8vw 15vw 8.8vw;

}

@media (max-width: 767px) {
    .price-btn {
        display: flex;
        flex-direction: column;
        gap: 5vw;
        color: #B7AD9D;
        font-family: var(--font-f-Medium);
        margin: 0 4.8vw;
    }


    .price-button::before {
        width: 100%;
    }

    .services-items {
        width: 90%;
        margin: 0 4.8vw;
    }
    
    
  .price-button {
    padding: 2.5vw 0 !important;
    
}


}

.price-button {
    cursor: pointer;
    padding: .5vw 0;
    position: relative;

}

.price-button::before {
    content: "";
    width: 0;
    /* Initial width of the line */
    position: absolute;
    bottom: 0;
    left: 0;
    /* Start from the left side */
    height: 1px;
    background-color: #B7AD9D;
    transition: width 0.3s ease-in-out;
    /* Smooth transition for width */
}

.price-button:hover::before {
    width: 100%;
    /* Width expands on hover */
}

.price-button.active::before {
    width: 100%;

    /* Width expands on hover */
}

.price-button.active {
    opacity: .3;
    /* Width expands on hover */
}

.services-items h3 {
    font-family: var(--font-f-Medium);
    text-transform: uppercase;
    margin-bottom: 3vw;
    opacity: 1;
    line-height: var(--font-lh-h4);
    width: 65vw;
    letter-spacing: .5vw;
    color: #B7AB98;
}

.services-items p {
    font-family: var(--font-f-Light);
    line-height: 2.5vw;
    font-size: var(--font-lh-p);
    color: #B7AD9D;
    opacity: 1;
    width: 55vw;
    transition: .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}



a.page-transition:hover {
    color: #00aaff;
}


a.page-transition::after {
    content: attr(data-after);
  
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    opacity: 0;
    font-size: 10rem;
    color: rgba(255, 255, 255, 0.1);
    white-space: nowrap;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: -2;
   
}


a.page-transition:hover::after {
    opacity: .3;
}










@media (max-width: 767px) {

    .services-items h2 {
        line-height: var(--mob-line-height);

    }

    .services-items {
        margin: 20vw 4.8vw;
    }

    .services-items h3 {
        margin-bottom: 5vw;
        width: 100%;
    }

    .services-items p {
        line-height: normal;
        width: 100%;
    }
    
    a.page-transition::after {
   
    font-size: 5vw;
  
   
}


}

/* ///////////////////////// PROJECTS-INFO //////////////////////////////////////////////// */



.work-items-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 10vw 0;
}

.work-items-title h1 {
    color: #B7AD9D;
    font-family: var(--font-f-Bold);
    text-align: center;
    line-height: normal;
    margin: 0 8.8vw;

}

.work-items-title p {
    color: #B7AD9D;
    text-align: center;
    margin: 2vw 8.8vw;
    width: 55vw;
    font-family: var(--font-f-Light);
    text-align: left;
    line-height: var(--font-lh-p);
}

@media (max-width: 767px) {

    .work-items-title p {
        text-align: left;
        margin: 2vw 4.8vw;
        width: 85%;
        font-size: var(--font-s-p);
        line-height: 6vw;
    }

    .video-container-work {
        width: fit-content !important;
        margin: 10vw 0 !important;
        height: 65vw !important;
    }



    .work-portfolio {
        margin-top: 30vw;
    }

    .work-items-title h1 {
        text-align: left;
        margin-left: 4.8vw;
        margin-top: 10vw;
        font-size: var(--font-lh-h3);

    }

    .work-items-title {
        align-items: flex-start;
    }

}

.video-container-work {
    margin: 10vw 0;
    width: 80%;
    height: 40vw;
    overflow: hidden;
    display: flex;
    opacity: .9;
    justify-content: center;
    align-items: center;
}

.work-items-info-row {
    display: flex;
    justify-content: space-around;
    align-items: center;



}

.work-items-info-row {
    display: flex;
    color: #B7AD9D;
    justify-content: space-around;
    align-items: flex-start;
}

.work-item-info ul {
    width: 20vw;

}

.work-item-info h3 {
    font-family: var(--font-f-Bold);
    margin-bottom: 1vw;
}

.work-item-info p {
    font-family: var(--font-f-Bold);
}

.work-item-info ul li {
    color: #B7AD9D;
    font-family: var(--font-f-Bold);
    padding: 1vw 0;
    border-bottom: 1px solid #b46633;
}

.info-porfolio {
    margin-bottom: 3vw;
}

.portfolio-page-link {
    display: flex;
    justify-content: center;

}

.link-porfolio-page {
    margin-right: 0;
    transform: rotate(-45deg);

}

.page-button {
    height: 10vw;
    width: 10vw;
}

.work-images {
    height: 100vh auto;
    display: flex;
    justify-content: center;
}


@media (max-width: 767px) {
    .work-images {
        margin-top: 30vw;
    }

    .portfolio-page-link {
        margin-top: 20vw;
    }

    .page-button {
        height: 30vw;
        width: 30vw;
    }

    .web-btn {

        margin: -2vw 0 0 40vw !important;
        padding: 4.5vw !important;
    }

    .work-images-items {
        min-width: 80%;

    }

    .work-items-info-row {
        display: flex;
        color: #B7AD9D;
        justify-content: space-around;
        gap: 20vw;
        align-items: flex-start;
        margin: 0 4.8vw;
        flex-direction: column-reverse;
    }


    .info-porfolio {
        margin-bottom: 11vw;
    }


    .work-item-info h3 {
        font-family: var(--font-f-Bold);
        margin-bottom: 5vw;
    }

    .next-project {

        font-size: 5vw !important;
        margin-left: 4.8vw;

    }

    .work-item-info ul li {
        padding: 3vw 0;
    }

    .work-item-info ul {
        width: 100%;
    }
}

.work-images-items {
    width: 50%;
    margin: 10vw 0;
}

.next-project {
    font-family: var(--font-f-Bold);
    color: #B7AD9D;
    font-size: 2vw;
    cursor: pointer;
}

.web-btn {
    background-color: transparent;
    position: absolute;
    color: #B7AD9D;
    font-family: var(--font-f-Bold);
    transform: rotate(45deg);
    margin: -2vw 0 0 10vw;
    padding: .5vw;
    background-color: #101921;

}

.page-button:hover .web-btn {
    visibility: hidden;
}






/* ///////////////////////////SEO-PAGE/////////////////////////////////////////////////// */


.margin-30vw {
    margin-top: 30vw;
}

.call-to {
    height: auto;
    overflow: hidden;
}



.seo-items {
    margin: 10vw 8.8vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.call-toaction-img {
    position: relative;
    opacity: .3;
    z-index: 0;
}

.google-algoritmi {
    font-family: var(--font-f-Bold);
    color: #B7AD9D;
    font-size: var(--font-lh-h3);
    text-align: center;
}

.seo-items h3 {
    font-family: var(--font-f-Medium);
    text-transform: uppercase;
    margin-bottom: 3vw;
    opacity: 1;
    letter-spacing: .5vw;
    color: #B7AB98;
}

.call-action h2 {
    position: relative;
    width: 65vw;
    font-size: var(--font-lh-h3);
    font-family: var(--font-f-Medium);
    color: #B7AB98;
    text-transform: none;
    z-index: 1;

}

.seo-items p {
    font-family: var(--font-f-Light);
    line-height: 2.5vw;
    font-size: var(--font-lh-p);
    width: 65vw;
    opacity: 1;
    color: #B7AD9D;
    transition: .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.t-2-seo {
    position: relative;


}


@media (max-width: 767px) {

    .seo-items p {
        line-height: normal;
        width: 100%;

    }

    .seo-items h3 {
        margin-bottom: 5vw;
        line-height: var(--mob-line-height);

    }

    .seo-items {
        margin: 20vw 4.8vw;
        align-items: flex-start;
    }


    .gap-top-10 {
        margin-top: 20vw;
    }
}




/* ////////////////////////////WORK-PAGE//////////////////////////////////////////////// */



.work-portfolio-section {
    height: auto;
}

.img-text-wrok-portfolio {
    display: flex;
    justify-content: center;
}





.img-text-wrok-portfolio ul {
    display: flex;
    flex-direction: column;
    gap: 15vw;

}


.img-text-wrok-portfolio img {
    position: relative;
    overflow: hidden;
    width: 100%;
    z-index: 2;

}


.img-text-wrok-portfolio ul li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10vw;
    /* transform: translateX(8.8vw); */
    width: 50vw;
    opacity: 1;
    transition: .3s cubic-bezier(0.215, 0.610, 0.355, 1);
    cursor: pointer;
}




.work-main-title {
    position: absolute;
    left: 0;
    z-index: 2;
    text-align: center;


}

h2.work-main-title {
    color: #f8f8f8;
    font-family: var(--font-f-Bold);
    font-size: 15vw;
    opacity: .4;
    width: 100%;
}

@media (max-width: 767px) {

    .work-main-title {
        display: block;
    }

    .img-text-wrok-portfolio ul li {

        width: 100%;
        height: auto;

    }

    .img-text-wrok-portfolio ul {

        gap: 25vw;
    }

    .blog-text-main p {
        font-family: var(--font-f-Light);
        font-size: 15px;
        line-height: 6vw !important;
        letter-spacing: var(--font-ls-p);
    }
    
    .nex-blog-items {
   
    gap: 15vw;
    margin-top: 20vw;
}
}





/* /////////////////////////////////////SERVICE-PAGE////////////////////////////////////////////////////////// */




.services-page-items {
    margin: 10vw 8.8vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-header-s {
    position: relative;
    margin-top: 0;
    min-height: 100vw;
}


.main-header-s.marginTop {
    top: 10vw;
    transition: .3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    opacity: 0;

}




@media (max-width: 767px) {
    .main-header-s {
        margin-top: 0;
    }


    .services-page {
        margin-bottom: 25vw;
    }

    .services-page-items {
        margin: 10vw 4.8vw;

    }

    .services-page-items p {
        line-height: normal !important;
        width: 100% !important;
    }

    .services-page-items h3 {

        margin-bottom: 5vw !important;
        text-align: left;
        width: 100%;

    }

    .copy h5 {

        margin: 10vw 0 10vw;
    }
}


@media (min-width: 1467px) {
    .main-header-s {
        margin-top: -20vw;
    }
}

.services-page-items h3 {
    font-family: var(--font-f-Medium);
    text-transform: uppercase;
    margin-bottom: 3vw;
    opacity: 1;
    letter-spacing: .5vw;
    color: #B7AB98;

}

.services-page-items p {
    font-family: var(--font-f-Light);
    line-height: 2.5vw;
    font-size: var(--font-lh-p);
    color: #B7AD9D;
    width: 65vw;
    opacity: 1;
    transition: .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.services-link {
    transform: rotate(-45deg);
}

.faq-items li {
    opacity: .5;
}

.answer {
    font-family: var(--font-f-Light);
    font-size: var(--font-lh-p);
    margin: 2vw 4vw 2vw 0;
    line-height: 2.5vw;
    display: none;
}

.show {
    display: block !important;

}

.opacity {
    opacity: 1 !important;
}

span.faq-arrow {
    font-family: var(--font-f-Light);
    vertical-align: middle;
    font-size: 3vw;
}

@media (max-width: 767px) {
    span.faq-arrow {
        font-size: 8vw;
    }
    
}




/* /////////////////////////////////Privacy///////////////////////////////////////////// */


.privacy {
    margin-bottom: 20vw;

}

.privacy-top {
    margin-top: 30vw;
}

.privacy-items {
    margin: 0 8.8vw;
}



.privacy-items h2 {
    font-family: var(--font-f-Medium);
    text-transform: uppercase;
    margin-bottom: 3vw;
    letter-spacing: .5vw;
    opacity: .3;
    color: #B7AB98;
}

.privacy-items p {
    font-family: var(--font-f-Light);
    font-size: var(--font-lh-p);
    margin: 2vw 0;
    color: #B7AB98;
    opacity: 1;
    width: 65vw;
    line-height: 2.5vw;
}


/* /////////////////////////////////////////CIJENE STRANICA/////////////////////////////////////////////// */



.services-items ul {
    margin: 2vw 0 7vw 0;
}

.services-items ul li {
    color: #B7AD9D;
    font-family: var(--font-f-Medium);
    opacity: .7;
    padding: 1vw 0;
    font-size: var(--font-s-p);
}

@media (max-width: 767px) {
    .services-items ul li {
        font-size: var(--font-lh-label);
        line-height: 6.5vw;
    }

    .services-items ul {
        margin: 6vw 0 20vw 0;
    }
    
    .privacy-items p {
    
    width: 100%;
    line-height: normal; 
}
}

.services-items strong {
    color: #b46633;
    padding-top: 8vw;
}

.services-items small {
    width: 33.33vw;
    font-family: var(--font-f-Light);
}

.custom-button {
    margin: 5px;
    padding: 10px 20px;
    cursor: pointer;
    color: #B7AD9D;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

.price-section {
    margin: 30vw 0;
}


/* BLOG */

.bog-items {
    display: flex;
    flex-direction: column;
    gap: 2vw;

}

.blog-text {
    padding: 2vw 0;
    display: flex;
    flex-direction: column;
    gap: 3vw;
    font-family: var(--font-f-Medium);
    color: #B7AD9D;
}

.blog-text h2 {
    font-size: var(--font-s-h2);
}

.blog-text p {

    font-family: var(--font-f-Light);
    font-size: var(--font-lh-p);


}

.blog-text-main {
    padding: 2vw 0;
    display: flex;
    flex-direction: column;
    gap: 2vw;
    color: #B7AD9D;
}

.blog-text-main h2 {
    font-family: var(--font-f-Medium);
    font-size: var(--font-s-h2);
}


.blog-text-main h1 {
    font-size: var(--font-s-h2);
    line-height: var(--font-lh-h2);
}

.blog-text-main h3 {
    font-family: var(--font-f-Medium);
    font-size: var(--font-lh-h3);
    line-height: var(--font-lh-h3);
    letter-spacing: var(--font-ls-h3);
    margin: 3vw 0 0;
}

.blog-text-main strong {
    font-family: var(--font-f-Medium);
    font-size: var(--font-s-h4);

    margin: 3vw 0 0;
}

.blog-text-main p {
    font-family: var(--font-f-Light);
    /*font-size: 15px;*/
    line-height: 25px;
    letter-spacing: var(--font-ls-p);

}

.blog-text h3 {
    font-size: var(--font-lh-h2);
}

.blog-text p {

    width: 33.33vw;

}

@media (max-width: 767px) {
    .blog-text {

        margin: 0 4.8vw;
        gap: 5vw;
    }

    .bog-items {
        gap: 10vw;
    }

    .blog-text p {
        width: 100%;

    }

    .blog-text-main {

        gap: 6vw;

    }
}

.ork-portfolio-section {
    height: auto;
}



.nex-blog-items {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4vw;
    margin-top: 10vw;
}

.nex-blog-item {
    flex: 1;
    margin: 1vw 0;

    background-color: transparent;
    font-family: var(--font-f-Medium);
    text-decoration: none;
    color: #B7AD9D;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nex-blog-image {
    width: 50%;
    height: auto;
    max-height: auto;
    opacity: .5;
    object-fit: cover;
    margin-bottom: 10px;
}

.nex-blog-item h2 {

    font-size: var(--font-s-h4);
    text-align: left;
    width: 100%;
    margin: 1vw 0;
}

.nex-blog-item p {
    font-size: 14px;
    color: #666;
}