* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    color: black;
}

ul li {
    list-style: none;
    text-decoration: none;
    line-height: 1.618;
}

li {
    list-style: none;
    text-decoration: none;
}

/* @font-face {
    font-family: 'ABC Favorit Regular';
    src: url(fonts/ABCFavorit-Regular-Trial.otf);
    font-weight: 200;
} */

@font-face {
    font-family: 'ABC Favorit Book';
    src: url(fonts/ABCFavorit-Book.woff);
    src: url(fonts/ABCFavorit-Book.woff2);
    font-weight: 200;
}

/* @font-face {
    font-family: 'ABC Favorit Medium';
    src: url(fonts/ABCFavorit-Medium-Trial.otf);
    font-weight: 200;
} */

:root {
    --background: #EDEDED;
    --titles: rgb(14, 13, 13);
    --subtitles: #9e9e9e;
     /* --subtitles: #9D9D9D; */
    --notes: #cfcfcf;
}
/*--------------------START-SCROLL SKEW-----------------*/

.stats {
    font-family: 'Overpass Mono', monospace;
    position: fixed;
    top: 0;
    left: 0;
    color: #FCFFF5;
    padding: 20px;
    width: 90px;
    font-size: .7rem;
    display: none;
}

#scrollSkew {
    transition: all 80ms ease-in-out;
    /* transform: skewY(20deg);  */
}

/*--------------------PRELOAD-----------------*/
#indexDiv {
    display: block !important;
    visibility: visible !important;
    overflow-x: hidden;
}

/* .indexAnimated {
    -webkit-animation: fadePreload 600ms ease ;
    animation: fadePreload 600ms ease;
} */

/*.preloadIndex {*/
/*    position: fixed;*/
/*    top: 0;*/
/*    !*background: red;*!*/
/*    width: 100%;*/
/*    height: 100vh;*/
/*    z-index: 99999;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: left;*/
/*    align-items: flex-start;*/
/*}*/
#home_page .preload-container{
    z-index: 10010;
}
#home_page{
    overflow-x: hidden;
}
#body-work .preload-container{
    z-index: 10000;
}
.preload-container {
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #090909;
    height: 100vh;
    opacity: 1;
    width: 100%;
    position: fixed;
    z-index: 10010;
}

@keyframes fadePreload {
    0% {
        opacity: 0.5;
        transform: translateY(16%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes fadeSquares {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    /* 75% {
        opacity: 1;
        transform: translateY(-80%);
    } */
    100% {
        opacity: 1;
        transform: translateY(-100%);
    }
}

@keyframes sizeSquare {
    0% {
        height: 0vh;
    }
    /* 50% {
        height: 60vh;
    } */
    100% {
        height: 0vh;
    }
}

@keyframes textLoad {
    0% {
        margin-top: 20px;
        opacity: 0;
    }
    /* 50% {
        height: 60vh;
    } */
    100% {
        opacity: 1;
        margin-top: 0;
    }
}

@keyframes textNav {
    0% {
        margin-top: -60px;
        opacity: 0;
    }
    100% {
        opacity: 1;
        margin-top: 0px;
    }
}


.squares-preload {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.preload-square1 {
    width: 100%;
    height: 140vh;
    margin: 0 1px;
    background-color: #0d0d0d;
    -webkit-animation: sizeSquare 860ms ease;
    animation: sizeSquare 860ms ease;
    animation-fill-mode: forwards;
    animation-play-state: running;
}


/* .content-preload{
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: left;
    background-color:#090909;
    -webkit-animation: zoomOut 260ms ease;
    animation: zoomOut 260ms ease;
    animation-fill-mode: forwards;
    animation-delay: 260ms;
    animation-play-state: running;
    transform: skewY(40%) ease;
    height: 100vh;
    transform: scale(1.2) ease;
}

@keyframes fadePreload {
    0% {
        opacity: 1;
        transform: translateY(10%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
    
}
@keyframes fadeSquares {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 1;
        transform: translateY(-100%);
    }
}
@keyframes sizeSquare {
    0% {
        height: 140vh;
    }
    50% {
        height: 120vh;
    }
    100% {
        height: 0vh;
    }
} */

/* PRELOAD pages */
.content-preload {
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #090909;
    -webkit-animation: textLoad 600ms ease;
    animation: textLoad 600ms ease;
    animation-fill-mode: forwards;
    animation-delay: 200ms;
    animation-play-state: running;
    transform: skewY(40%) scale(1.2);
    height: 100vh;
    opacity: 0;
    width: 100%;
}

/* #about-load {
    top: 0;
    display: flex;
    justify-content: left;
    background-color: #090909;
    -webkit-animation: textLoad 600ms ease;
    animation: textLoad 600ms ease;
    animation-fill-mode: forwards;
    animation-delay: 200ms;
    animation-play-state: running;
    transform: skewY(40%) ease;
    height: 100vh;
    transform: scale(1.2) ease;
    opacity: 0;
}

#petunia-load {
    top: 0;
    display: flex;
    justify-content: left;
    background-color: #6E00FA;
    -webkit-animation: textLoad 600ms ease;
    animation: textLoad 600ms ease;
    animation-fill-mode: forwards;
    animation-delay: 200ms;
    animation-play-state: running;
    transform: skewY(40%) ease;
    height: 100vh;
    transform: scale(1.2) ease;
    opacity: 0;
}

#featu-load {
    top: 0;
    display: flex;
    justify-content: left;
    background-color: #4354F1;
    -webkit-animation: textLoad 600ms ease;
    animation: textLoad 600ms ease;
    animation-fill-mode: forwards;
    animation-delay: 200ms;
    animation-play-state: running;
    transform: skewY(40%) ease;
    height: 100vh;
    transform: scale(1.2) ease;
    opacity: 0;
}

#anfisign-load {
    top: 0;
    display: flex;
    justify-content: left;
    background-color: #FA8152;
    -webkit-animation: textLoad 600ms ease;
    animation: textLoad 600ms ease;
    animation-fill-mode: forwards;
    animation-delay: 200ms;
    animation-play-state: running;
    transform: skewY(40%) ease;
    height: 100vh;
    transform: scale(1.2) ease;
    opacity: 0;
}

#franz-load {
    top: 0;
    display: flex;
    justify-content: left;
    background-color: #003FFF;
    -webkit-animation: textLoad 600ms ease;
    animation: textLoad 600ms ease;
    animation-fill-mode: forwards;
    animation-delay: 200ms;
    animation-play-state: running;
    transform: skewY(40%) ease;
    height: 100vh;
    transform: scale(1.2) ease;
    opacity: 0;
}

#clementine-load {
    top: 0;
    display: flex;
    justify-content: left;
    background-color: #FF6011;
    -webkit-animation: zoomOut 460ms ease;
    animation: zoomOut 460ms ease;
    animation-fill-mode: forwards;
    animation-delay: 660ms;
    animation-play-state: running;
    transform: skewY(40%) ease;
    height: 100vh;
    transform: scale(1.2) ease;
}

#veris-load {
    top: 0;
    display: flex;
    justify-content: left;
    background-color: #6C70F4;
    -webkit-animation: textLoad 600ms ease;
    animation: textLoad 600ms ease;
    animation-fill-mode: forwards;
    animation-delay: 200ms;
    animation-play-state: running;
    transform: skewY(40%) ease;
    height: 100vh;
    transform: scale(1.2) ease;
    opacity: 0;
} */

.text-preload {
    /*margin: 120px 20px auto;*/
    margin: 20px;
    text-align: left;
    position: absolute;
    top: 20px;
    left: 20px;
}

.text-preload h3 {
    font-size: 60px;
    margin-bottom: 10px;
    font-weight: 100;
    color: #ffffff;
    font-family: 'ABC Favorit Book';
}

.text-preload p {
    font-size: 24px;
    font-weight: 100;
    color: #ffffff;
    font-family: 'ABC Favorit Book';
}


/* form{
    width: 146%;
} */
.topic-list:hover .topic h3,
.topic-list:hover .sub-text-topic h4 {
    color: var(--subtitles)
}

.topic-list:hover .text-topic span {
    display: block;
    transition: 200ms ease;
}

.topic-item {
    display: flex;
    flex-direction: row;
}

.topic-list span {
    display: none;
    margin-left: 10px;
}

.cursor{
    transition: width 0.2s, height 0.2s, opacity 0.2s;
}

.cursor.activeList1 {
    background-image: url(imgs/gifs/anfisa.gif);
    border-radius: 0;
    mix-blend-mode: normal;
    height: 240px;
    width: 240px;
    background-size: contain;
    border: #9D9D9D 1px solid;
}

.cursor.activeList2 {
    background-image: url(imgs/gifs/concepts.gif);
    border-radius: 0;
    mix-blend-mode: normal;
    height: 240px;
    width: 240px;
    background-size: contain;
    border: #9D9D9D 1px solid;
}

.cursor.activeList3 {
    background-image: url(imgs/gifs/motion.gif);
    border-radius: 0;
    mix-blend-mode: normal;
    height: 240px;
    width: 240px;
    background-size: contain;
    border: #9D9D9D 1px solid;
}

.cursor.activeList4 {
    background-image: url(imgs/gifs/insiders.gif);
    border-radius: 0;
    mix-blend-mode: normal;
    height: 240px;
    width: 240px;
    background-size: contain;
    border: #9D9D9D 1px solid;
}

.cursor.activeList5 {
    background-image: url(imgs/gifs/article.gif);
    border-radius: 0;
    mix-blend-mode: normal;
    height: 240px;
    width: 240px;
    background-size: contain;
    border: #9D9D9D 1px solid;
}

.cursor.activeList6 {
    background-image: url(imgs/gifs/mobeybou.gif);
    border-radius: 0;
    mix-blend-mode: normal;
    height: 240px;
    width: 240px;
    background-size: contain;
    border: #9D9D9D 1px solid;
}

.cursor.activeList7 {
    background-image: url(imgs/gifs/alquimia.gif);
    border-radius: 0;
    mix-blend-mode: normal;
    height: 240px;
    width: 240px;
    background-size: contain;
    border: #9D9D9D 1px solid;
}

.cursor.activeList8 {
    background-image: url(imgs/gifs/poleiro.gif);
    border-radius: 0;
    mix-blend-mode: normal;
    height: 240px;
    width: 240px;
    background-size: contain;
    border: #9D9D9D 1px solid;
}

.cursor.activeList9 {
    background-image: url(imgs/gifs/cris.gif);
    border-radius: 0;
    mix-blend-mode: normal;
    height: 240px;
    width: 240px;
    background-size: contain;
    border: #9D9D9D 1px solid;
}

.cursor.activeList10 {
    background-image: url(imgs/gifs/kilograma.gif);
    border-radius: 0;
    mix-blend-mode: normal;
    height: 240px;
    width: 240px;
    background-size: contain;
    border: #9D9D9D 1px solid;
}

/*-------------------- CUSTOM CURSOR-----------------*/

* {
    cursor: none !important;
}

.cursor{
    --size: 14px;
    height: var(--size);
    width: var(--size);
    border-radius: 50%;
    position: absolute;
    z-index: 110200 !important;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 1;
    mix-blend-mode: difference;
    cursor: pointer;
}

.cursor {
    background: #ffffff;
    transition: width 0.2s, height 0.2s;
    cursor: pointer;
    z-index: 110200 !important;
}

.cursor.activeCopyHover {
    --size: 50px;
    border-color: rgba(255, 255, 255, 0);
    background-color: rgba(255, 255, 255, 0.2);
    transition: width 0.2s, height 0.2s;
}

.cursor.activeCopyHoverProj {
    --size: 80px;
    border-color: rgba(255, 255, 255, 0);
    background-color: rgba(255, 255, 255, 0.2);
    transition: width 0.2s, height 0.2s;
}

.cursor.activeHoverVideo {
    --size: 120px;
    background-color: #f9f9f9;
    color: black;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'ABC Favorit Book';
    transition: width 0.3s, height 0.3s;
    mix-blend-mode: normal;
    opacity: 1;
}

.cursor.activebout {
    --size: 120px;
    background-color: #f9f9f9;
    color: black;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'ABC Favorit Book';
    transition: width 0.3s, height 0.3s;
    mix-blend-mode: normal;
    opacity: 1;
}


.cursor {
    opacity: 0;
}

.cursor{
    transition: width 0.3s, height 0.3s, opacity 0.3s;
    opacity: 1;
}

.cursor div{
    transition: scale 0.3s;
    transform: scale(0);
}

.cursor.activeHover div, .cursor.activeHoverVideo div, .cursor.activeHoverMail div, .cursor.activeAbout div{
    transform: scale(1);
}

.cursor.activeHover, .cursor.activeHoverMail, .cursor.activeAbout {
    --size: 100px;
    background-color: #f9f9f9;
    color: black;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'ABC Favorit Book';
    mix-blend-mode: normal;
    opacity: 1;
}

.showreel-video:hover {
    cursor: auto !important;
}

.vid-about:hover {
    opacity: 0.7;
}

/* .cursor-shadow-close.activeHoverClose{
    --size: 100px;
    background-color: white;
    color: black;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'ABC Favorit Book';
    transition: width 0.3s, height 0.3s;
    mix-blend-mode: normal;
    opacity: 1;
} */
/*-------------------- END CURSOR-----------------*/
/* .motion-compile{
    position: relative;
}
.fullscreen-button {
    display: none;
    top: 10px;
    right: 10px;
    background-color: rgba(255, 255, 255, 0.7);
    color: black;
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    font-size: 24px;
    z-index: 4000;
    position: absolute;
} */
/*-------------------- END CURSOR-----------------*/
/*-------------------- PASSWORD-----------------*/
::backdrop {
    background-color: #000;
    opacity: 1;
}
dialog{
    overflow-y: hidden;
    overflow-x: hidden;
    padding: 20px 0 0 20px;
    background-color: #000;
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: fixed;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 100000;
}

dialog *:focus{
    outline: none;
}
.indexAnimated :focus-visible {
    outline: none;
}

.password-form {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: right;
    align-content: center;
    margin-top: 18%;
    margin-left: 40%;
}

.password-form h1{
    font-family: 'ABC Favorit Book';
    color: var(--background);
}
input{
    text-decoration: none;
}

#password {
    width: 90%;
    padding: 10px;
    border: none;
    outline: none;
    /* border-bottom: 1px solid #b5b5b5; */
    margin-bottom: 10px;
    background-color: #000;
    font-size: 44px;
    color: #fff;
    font-family: 'ABC Favorit Book';
    font-weight: 100;
}
#password::placeholder {
    color: white;
}

dialog .close-dialog{
    height: auto;
    color: #e5e5e5;
    background-color: #000;
    border: none;
    padding: 10px;
    display: flex;
    justify-content: center;
}
.close-dialog img{
    width:30px;
}
.input-content .submit-btn{
    background-color: #000;
    border: none;
}
.submit-btn img{
    width:50px;
}
.content-pass {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.error-message {
    color: #d33636;
    font-family: 'ABC Favorit Book';  
    margin-top: 40px;
    font-size:40px;
}

/* END PASSWORD */

/* ::backdrop {
    background-color: #000;
    opacity: 1;
}
dialog{
    overflow-y: hidden;
    overflow-x: hidden;
    padding: 20px 0 0 20px;
    background-color: #000;
    width: 100%;
    cursor: pointer;
    height: auto;
}
dialog *:focus{
    outline: none;
}
.indexAnimated :focus-visible {
    outline: none;
}

.password-form {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: right;
    align-content: center;
    margin-top: 18%;
    margin-left: 40%;
}

.password-form h1{
    font-family: 'ABC Favorit Book';
    color: var(--background);
}
input{
    text-decoration: none;
}

#password {
    width: 90%;
    padding: 10px;
    border: none;
    outline: none;
    border-bottom: 1px solid #b5b5b5;
    margin-bottom: 10px;
    background-color: #000;
    font-size: 44px;
    color: #fff;
    font-family: 'ABC Favorit Book';
    font-weight: 100;
}
#password::placeholder {
    color: white;
}


dialog .close-dialog{
    height: auto;
    color: #e5e5e5;
    background-color: #000;
    border: none;
    padding: 10px;
    display: flex;
    justify-content: center;
}
.close-dialog img{
    width:30px;
}
.input-content .submit-btn{
    background-color: #000;
    border: none;
}
.submit-btn img{
    width:50px;
}
.content-pass {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.error-message {
    color: #d33636;
    font-family: 'ABC Favorit Book';  
    margin-top: 40px;
    font-size:40px;
} */



body {
    font-family: "ABC Favorit", "Arial", sans-serif;
    overflow-x: hidden;
    /* cursor: none !important; */
    /* cursor: auto !important; */
    transition: all 400ms ease;
    background-color: var(--background);
}

::-webkit-scrollbar {
    height: 10px;
    background: transparent;
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #000000;
    height: 10px;
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

.top-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px;
    position: fixed;
    width: 100%;
    z-index: 10005;
    opacity: 1;
    mix-blend-mode: difference;
}

.logo-cris-mob {
    display: none;
}

.logo-cris {
    font-size: 18px;
    font-weight: 200;
    font-family: 'ABC Favorit Book';
    color: var(--background);
}

.nav-links a, .nav-right a {
    color: var(--background);
    text-decoration: none;
    font-family: 'ABC Favorit Book';
    font-size: 18px;
}

.nav-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* mix-blend-mode:difference; */
}

.link-text, .link-text1, .link-text2, .link-text3 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 30px;
}

.cursor-link:hover, #active-navlink:hover, #link-navigation:hover, #link-glossaire:hover, #link-moustique:hover {
    color: #404040;
    transition: all 200ms ease;
}

.link-footer:hover, .link-featured:hover {
    color: var(--subtitles);
    transition: all 200ms ease;
}

#active-navlink {
    color: var(--background);
    font-weight: 200;
    text-decoration: line-through;
    transition: all 200ms ease;
}

#active-navlink-white {
    color: var(--background);
    /* color: var(--titles); */
    font-weight: 200;
    text-decoration: line-through;
    transition: all 200ms ease;
}


/*-------------------- START HOMEPAGE-----------------*/


/*START HEADER*/

.section-home-header {
    display: flex;
    flex-direction: column;
    margin: 0 20px 140px 20px;
}

.section-header {
    width: 100%;
}

.home-header-img-mob {
    display: none;
}

.home-header-img {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 60px;
}

.home-header-img .home-desk {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 600px;
    filter: brightness(70%);
}

.title-inner {
    display: inline-block;
    /* position: absolute; */
    /* margin-top: 30%; */
}

.sentence1 {
    text-align: center;
    width: 100%;
}

.sentence1-inner {
    /*display: inline-block;*/
    /*animation:text-clip 1000ms 0s cubic-bezier(0.5, 0, 0.1, 1) both;*/
    /* transition: all ease-in-out; */
    font-weight: 200;
    /*font-size:15.25vw;*/
    font-size: 11vw;
    line-height: 0.95;
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    text-align: center;
    overflow: hidden;
    position: relative;
}

@keyframes text-clip {
    from {
        clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
        transform: translateY(20%);
        opacity: 0.5;
    }
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform: none;
        opacity: 1;
    }
}

.sub-head-text {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0;
}

.topic-subtext {
    display: flex;
    flex-direction: row;
}

.block-text {
    margin-right: 50px;
}

.block-text h6 {
    font-size: 16px;
    font-family: 'ABC Favorit Book';
    font-weight: 200;
    color: var(--titles);
}

.block-text .sub-text {
    font-size: 16px;
    font-family: 'ABC Favorit Book';
    color: var(--subtitles);
}

#last-block {
    margin-right: 0;
}

/* SECTION SHOWREEL */

.motion-compile {
    margin: 0;
    display: flex;
    overflow-x: hidden;
    width: 100%;
}
.small-reel {
    position: relative;
    width: 100%;
}
/* .text-teaser{
    position: absolute;
    font-size: 6vw;
    font-family: 'ABC Favorit Book';
    color: #fff;
    mix-blend-mode: difference;
    margin: 0;
} */

.showreel-video {
    display: none;
    visibility: hidden;
    opacity: 0;
    width: 100vw;
}

.close-video{
    display: none;
}

.close-video img{
    width: 50px;
    padding: 16px;
    border-radius: 9999px;
    height: 50px;
    background: rgb(255 255 255 / 5%);
    position: absolute;
    bottom: 60px;
    transform: translate(-50%, -50%);
}

.play-stop {
    z-index: 10000;
}

.showreel-video:-webkit-full-screen::-webkit-media-controls-panel, video:-webkit-full-screen::-webkit-media-controls, video:-webkit-full-screen::-webkit-media-text-track-container {
    display: none !important;
    opacity: 0;
}

.hidenshowreelactive {
    width: 0;
    height: 100vh;
    background: #090909;
    z-index: 10000;
    top: 0;
    position: absolute;
}

.showreel-video::-webkit-media-controls {
    display: none !important;
}

.showreel-video::-webkit-media-controls-enclosure {
    display: none !important;
}

.showreel-video::-webkit-media-controls-panel {
    display: none !important;
}

/* SECTION NUMBERS PROJECTS */
.section-numbers {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    /* align-items: flex-start; */
    margin: 10vh 20px 2vh;
}

.text-numbers {
    margin-bottom: 8vh;
    width: 75%;

}

.linesstart {
    font-size: 2rem;
    font-family: 'ABC Favorit Book';
    line-height: 1.1;
    font-weight: 100;
    color: #4d4b4b;
    text-align: justify;
}

/* #y-project{
    margin-right: 80px;
} */
.block-numbers {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 70%;
    margin: 6vh 0 0 0;
}
.num {
    font-size: 2rem;
    color: var(--titles);
}

.number-left, .number-right {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    justify-content: center;
    /*flex-direction: row;
    align-items: flex-start;*/
}
.linesstart b {
 font-weight: 1000;
    color: var(--titles);
}

.unrem {
    margin-right: 0.8rem;
    margin-left: 0.7rem;
}
.zerocinq {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
/* .number-right{
    margin-left: 20vw;
} */
/* .number-left{
    margin-right: 20vw;
    margin-bottom: 10vh;
} */
#num-right {
    margin-right: 8px;
}

.block-numbers h2 {
    font-size: 18vw;
    font-family: 'ABC Favorit Book';
    font-weight: 200;
    color: var(--titles);
    line-height: 0.8;
}

.block-numbers h6 {
    font-size: 18px;
    font-family: 'ABC Favorit Book';
    font-weight: 200;
    color: var(--subtitles);
    margin-left: 20px;
}

/*  START FEATURED PROJECTS */

.section-featured-proj {
    display: flex;
    flex-direction: column;
    margin: 20vh 20px 60px 20px;
}

.project-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.title-link {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    overflow: hidden;
}

.title-link h3 {
    font-size: 4.6vw;
    font-family: 'ABC Favorit Book';
    line-height: 1;
    font-weight: 200;
    color: var(--titles);
}

.title-link a {
    font-size: 18px;
    font-family: 'ABC Favorit Book';
    line-height: 1;
    font-weight: 200;
    color: var(--titles);
    text-decoration: underline;
}

.proj-card1, .proj-card2, .proj-card3 {
    position: relative;
    width: 32.5%;
    overflow: hidden;
    height: 80vh;
}

.proj-card1:hover, .proj-card2:hover, .proj-card3:hover {
    opacity: 0.7;
    transition: all 400ms ease;
}

.content-ontop {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 20px;
}

.proj-card1 h5, .proj-card2 h5, .proj-card3 h5 {
    font-family: 'ABC Favorit Book';
    font-size: 18px;
    color: var(--background);
    padding-right: 10px;
    font-weight: 200;
}

.proj-card1 h6 {
    font-family: 'ABC Favorit Book';
    font-size: 18px;
    color: var(--background);
    padding-right: 10px;
    font-weight: 200;
}

.bottom-text {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

.proj-card .content-ontop {
    width: 100%;
}

.proj-card .img_back {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    top: 0;
    left: 0;
    z-index: -1;
}


/*.proj-card1 .content-ontop{*/
/*    background-image: url("imgs/homepage/featured-proj-petunia.jpeg");*/
/*    background-repeat: no-repeat;*/
/*    background-size: cover;*/
/*    background-position: center;*/
/*    width: 100%;*/
/*}*/

/*.proj-card2 .content-ontop{*/
/*    !* background-image: url("imgs/homepage/featured-proj-veris.jpg"); *!*/
/*    background-image: url("imgs/homepage/featured-proj-franz.jpeg");*/
/*    background-repeat: no-repeat;*/
/*    background-size: cover;*/
/*    background-position: center;*/
/*    width: 100%;*/
/*}*/
/*.proj-card3 .content-ontop{*/
/*    background-image: url("imgs/homepage/featured-clementine.jpeg");*/
/*    background-repeat: no-repeat;*/
/*    background-size: cover;*/
/*    background-position: center;*/
/*    width: 100%;   */


/* START DIVIDER LINE */
.section-line {
    margin: 6px 20px 0 20px;
}

.divider {
    height: 1px;
    width: 100%;
    background-color: var(--subtitles);
    /* transition: width 1s ease-in-out; */
}


/* START SERVICES */
.services{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 12vh 20px 10vh 20px;
    height: 100%;
}

.services h4 {
    font-family: 'ABC Favorit Book';
    font-size: 32px;
    color: var(--titles);
    font-weight: 200;
}

.services-text {
    width: 50%;
}

.services-text h6 {
    font-family: 'ABC Favorit Book';
    font-size: 18px;
    font-weight: 100;
    line-height: 1.4;
    color: var(--subtitles);
    text-decoration: none;
    margin-bottom: 10px;
    width: 80%;
}
.service-item-content p{
    font-family:'ABC Favorit Book';
    font-size: 14px;
    font-weight: 200;
    color: var(--subtitles);
    margin-bottom:10px;
}

.services-list {
    display: flex;
    flex-direction: column;
    width: 42%;
    margin-top: 2vh
}

.services-list h4 {
    font-family: 'ABC Favorit Book';
    font-size: 44px;
    font-weight: 100;
    line-height: 1.4;
    color: var(--titles);
    padding-top: 14px;
    padding-bottom: 14px;
    z-index: -10;
}

.service-item-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.service-item-content {
    display: none;
    width: 100%;
}

.service-item-content h6 {
    font-family: 'ABC Favorit Book';
    font-size: 18px;
    font-weight: 200;
    color: var(--titles);
    margin-bottom: 10px;
}
.service-item-content .phases-steps h6 {
    font-family: 'ABC Favorit Book';
    font-size: 18px;
    font-weight: 200;
    line-height: 1.4;
    color: var(--subtitles);
    text-align: justify;
}

.cross {
    background: var(--titles);
    height: 29px;
    width: 2px;
    position: relative;
    margin-right: 20px;
    transition: all 0.6s ease;
}

.cross::before {
    content: "";
    background: var(--titles);
    width: 29px;
    height: 2px;
    left: -13px;
    top: 13px;
    position: absolute;
    transition: all 0.6s ease;
}

.cross.active {
    transform: rotate(-90deg);
    transition: all 0.6s ease
}

.cross.active::before {
    transform: rotate(-90deg);
    transition: all 0.6s ease
}

.line-divide {
    height: 1px;
    width: 100%;
    background-color: var(--titles);
    transition: width 1s ease-in-out;
}

.service-item-title h4:hover {
    color: var(--subtitles);
    transition: all 0.6s ease;
}

/* START PROCESS */

.process-title {
    /* width: 100%; */
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin:16vh 20px 12vh 20px;
}

.process-title h2 {
    font-family: 'ABC Favorit Book';
    font-size: 100px;
    font-weight: 200;
    line-height: 1;
    color: var(--titles);
    /* margin-left: 20px; */
}

/*START LIST PROCESS*/
/* .section-process-list{
    margin: 10vh 0;
    display: flex;
    flex-direction: column;
    display: block;
}
.item-list{
    margin: 10px 20px;
}
.item-list h5{
    font-family: 'ABC Favorit Book';
    font-size: 24px;
    font-weight: 200;
    line-height: 1.4;
    color: var(--titles);
}
.item-list .step-title{
    font-family: 'ABC Favorit Book';
    font-size: 22px;
    font-weight: 200;
    line-height: 1;
    color: var(--subtitles);
    margin:20px 0;
}
.text-step{
    width: 70%;
}
.text-icon{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.animation-video img, .animation-video video {
    width: 120px;
}
#rocket {
    width: 120px;
}

.process-animation{
    width: 100%;
} */

/*START LIST PROCESS NEW*/
.section-process-list {
    margin: 10vh 0;
    display: flex;
    flex-direction: column;
    display: block;
}

.step-block {
    margin-top: 40px;
}

.name-step {
    display: flex;
    flex-direction: column;

}

.item-list {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    margin-top: 20px;
}

.text-icon {
    width: 42%;
}

.animation-video img, .animation-video video {
    width: 100px;
}

#rocket {
    width: 100px;
}

.item-list h5 {
    font-family: 'ABC Favorit Book';
    font-size: 20px;
    font-weight: 200;
    line-height: 1.4;
    color: var(--titles);
    opacity: 0.9;
    margin-top: 20px;
}

.name-step .step-title {
    font-family: 'ABC Favorit Book';
    font-size: 22px;
    font-weight: 200;
    line-height: 1;
    color: var(--subtitles);
    /* margin:20px 0; */
    margin-left: 20px;
}

.text-step {
    display: flex;
    flex-direction: column;
    width: 90%;
}

.phases-steps {
    margin-top: 20px;
    /* display: flex;
    flex-direction: column; */
}

/* .item-list h6 {
    font-family: 'ABC Favorit Book';
    font-size: 18px;
    font-weight: 200;
    line-height: 1.4;
    color: var(--subtitles);
} */


/*START GRID PROCESS*/
/* .section-process{
    height: 70vh;
    flex-direction: row;
    margin: 20px;
    width: 100%;
    display: none;
}
.steps-content{
    display: flex;
    flex-direction: column;
    width: 50%;
}
.step1{
    width: 80%;
    margin: 20px 20px 20px 6vw;
}
.step2{
    width: 70%;
    margin: 20px; 
}
.step3{
    width:70%;
    margin: 20px 20px 20px 10vw;
}
.step4{
    width: 70%;
    margin: 20px; 
}

.step1 .text-icon, .step2 .text-icon, .step3 .text-icon, .step4 .text-icon{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.step1 h5, .step2 h5, .step3 h5, .step4 h5{
    font-family: 'ABC Favorit Book';
    font-size: 22px;
    font-weight: 200;
    line-height: 1.2;
    color: var(--titles);
    margin-bottom: 20px;
}
.step1 .step-title, .step2 .step-title, .step3 .step-title, .step4 .step-title{
    font-family: 'ABC Favorit Book';
    font-size: 22px;
    font-weight: 200;
    line-height: 1;
    color: var(--subtitles);
    margin:20px 0;
}
.step1 .animation-video{
    margin-left: 10vw;
    margin-right: 20px;
}
.step2 .animation-video{
    margin-right: 40px;
    margin-left: 20px;
}
.step3 .animation-video{
    margin-right: 40px;
    margin-left: 40px;
}
.step4 .animation-video{
    margin-right: 40px;
    margin-left: 0px;
}

.line-process-vertical{
    width: 0.5px;
    height: 80%;
    background-color: var(--subtitles);
}

.line-process1{
    height: 0.5px;
    width: 80%;
    margin-left: 10vw;
    background-color: var(--subtitles);
}
.line-process2{
    margin-left: 6vw;
    height: 0.5px;
    background-color: var(--subtitles);
}
.line-process3{
    height: 0.5px;
    width: 80%;
    margin-right: 40px;
    background-color: var(--subtitles);
} */

/* START OFFICE IMG */
.img-office {
    margin: 20px 0 0px 0;
    overflow: hidden;
    /* height: 80vh; */
    max-height: 95vh;
}

.img-office img {
    scale: 1.1;
    width: 100%;
    margin-top: -30px;
}

/* START FOOTER*/
/* .main-footer{
    display: flex;
    flex-direction: column;
    margin: 20px 20px 10px 20px;
}

.top-section{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.top-section .left-side h4{
    font-family: 'ABC Favorit Book';
    font-size: 44px;
    font-weight: 200;
    line-height: 1.1;
    color: var(--titles);
}
.left-side{
    width: 34%;
}
.middle-side{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 50%;
    margin:12px 0 0 10%;
}
.middle-side h5, .right-side h5{
    font-family: 'ABC Favorit Book';
    font-size:16px;
    font-weight: 200;
    line-height: 1.1;
    color: var(--subtitles);
    margin-bottom:10px
}
.middle-side a{
    font-family: 'ABC Favorit Book';
    font-size: 16px;
    font-weight: 200;
    line-height: 1;
    color: var(--titles);
    margin-bottom: 10px;
}
.social{
    display: flex;
    flex-direction: column;
}

.bottom-section{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 60px 0 0 0;
}
.foot p{
    font-family: 'ABC Favorit Book';
    font-size: 14px;
    font-weight: 200;
    line-height: 1;
    color: var(--titles);
    margin-bottom: 10px;
}

.foot .grey-text, .text-right p{
    font-family: 'ABC Favorit Book';
    font-size: 14px;
    font-weight: 200;
    line-height: 1;
    color: var(--subtitles);
} */

/* START FOOTER BLACK*/

.main-footer {
    display: flex;
    flex-direction: column;
    padding: 100px 20px 10px 20px;
    background-color: #0d0d0d;
    margin-top: -10px;
}

.top-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.main-footer .grey-footer, .top-section .left-side .grey-footer {
    color: var(--subtitles);
}

.left-side {
    margin-bottom: 80px;
}

.top-right {
    font-family: 'ABC Favorit Book';
    font-size: 16px;
    color: var(--background);
}

.top-section .left-side h4 {
    font-family: 'ABC Favorit Book';
    font-size: 2rem;
    font-weight: 200;
    line-height: 1.1;
    color: var(--background);
    margin-bottom: 20px;
}

.left-side {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.top-left {
    width: 60%;
}

.middle-side {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.middle-side h5, .right-side h5 {
    font-family: 'ABC Favorit Book';
    font-size: 16px;
    font-weight: 200;
    line-height: 1.1;
    color: var(--subtitles);
    margin-bottom: 10px
}

.middle-side a {
    font-family: 'ABC Favorit Book';
    font-size: 16px;
    font-weight: 200;
    line-height: 1;
    color: var(--background);
    margin-bottom: 10px;
}

.middle-right {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-right: 8%;
}

.social {
    display: flex;
    flex-direction: column;
}

.foot {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin: 40px 0 10px 0;
}

.foot p {
    font-family: 'ABC Favorit Book';
    font-size: 1rem;
    font-weight: 200;
    line-height: 1;
    color: var(--notes);
    margin-right: 10px;
}

.foot .grey-text, .text-right p {
    font-family: 'ABC Favorit Book';
    font-size: 1rem;
    font-weight: 200;
    line-height: 1;
    color: var(--subtitles);
}


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

#body-work {
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow-y: hidden;
}

#footer-work {
    display: none;
}

.top-nav-work {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px;
    position: absolute;
    z-index: 9998;
    mix-blend-mode: difference;
}

.container-infinite {
    height: 100vh;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
}

.container-infinite::-webkit-scrollbar, #body-work::-webkit-scrollbar, #body-play::-webkit-scrollbar, .container-play::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.work-page {
    height: 100%;
    padding: 0 20px 0 20px;
    transition: all ease;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.imgs-right {
    top: 0;
    right: 0;
    position: absolute;
    width: 100%;

}

.imgs-right .img-proj {
    object-fit: cover;
    object-position: 100% right;
    width: 100%;
    height: 102vh;
}

/* .imgs-right img{
    width: 100%;
    height:102vh;
} */

.infinite-content {
    display: flex;
    flex-direction: column;
    z-index: 1000;
    margin-bottom: 60px;
    margin-top: 10vh;
    position: relative;
}

.infinite-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 20px 0 20px 0;
}

.proj-link {
    font-family: 'ABC Favorit Book';
    font-weight: 200;
    font-size: 132px;
    color: var(--titles);
    line-height: 1;
    margin-right: 16px;
}

.proj-info p {
    font-family: 'ABC Favorit Book';
    font-weight: 100;
    font-size: 18px;
    color: var(--background);
    margin-bottom: 0;
}

.proj-link:hover {
    color: var(--background);
    transition: all 0.2s ease-in-out;
}

.proj-link.opaque {
    color: var(--background);
    opacity: 0.15;
}

.proj-info {
    display: none;
    color: var(--background);
}

.proj-info.show {
    display: block;
}

.proj-link {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.proj-link p {
    font-size: 14px;
    margin-top: 10px;
}

.proj-link.active {
    border-bottom: 0.5px solid #ffffff;
    width: 85vw;
    transition: all 0.2s ease-in-out;
}

/* END LIST CSS */


/*  GRID CSS */
#gridContent {
    align-items: center;
    justify-content: center;
}

#gridContent .container-infinite, #play-content .container-play {
    position: relative;
}

#gridContent .image {
    width: 100%;
    /* height: 50vh; */
    object-fit: cover;
    object-position: 100% center;
}

#gridContent .image-soon {
    width: 100%;
    /* height: 50vh; */
    object-fit: cover;
    object-position: 100% center;
}

#gridContent h4 {
    font-family: 'ABC Favorit Book';
    font-weight: 100;
    font-size: 28px;
    color: var(--titles);
    margin-top: 20px;
}

#gridContent p {
    font-family: 'ABC Favorit Book';
    font-weight: 100;
    font-size: 14px;
    color: var(--subtitles);
    margin-bottom: 20px;
}

.proj-image {
    width: 30vw;
    overflow: hidden;
}

/*
.proj-image1{
    width: 30vw;
    margin: 25vh 40px 40px 40px;
}
.proj-image2{
    width: 30vw;
    margin: 15vh 40px 40px 40px;
}
.proj-image3{
    width: 30vw;
    margin: 0;
}
*/

.row-work {
    display: flex;
    flex-direction: row;
    margin-top: 10vh;
    justify-content: space-between;
    width: 100%;
}

.row-work .image:hover {
    opacity: 0.8;
}

#image-margin-top {
    margin-top: 15vh;
}

#gridContent h2 {
    font-family: 'ABC Favorit Book';
    font-weight: 100;
    font-size: 11.5vw;
    color: var(--subtitles);
    opacity: 0.1;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;

}

/* TOGGLE CSS */
.grid-responsive {
    display: none;
}

.container-tabs {
    width: 100%;
    height: 100vh;
}

.btnContainer {
    width: 200px;
    right: 0;
    bottom: 0;
    position: absolute;
    display: flex;
    flex-direction: row;
    border-radius: 30px;
    margin-right: 20px;
    margin-bottom: 20px;
    padding: 4px;
    background-color: #e3e3e3;
    z-index: 9999;
}

.btnContainer button.active {
    color: var(--background);
    font-weight: 400;
    transition: all 0.6s ease-in-out;
    background-color: var(--titles);
}

.btnContainer button {
    background-color: transparent;
    font-family: 'ABC Favorit Book';
    border: none;
    outline: none;
    font-size: 16px;
    color: var(--titles);
    padding: 15px 20px;
    width: 100px;
    border-radius: 30px;
}

/* END TOGGLE CSS */

/*---------------------------START ABOUT PAGE------------------*/

/*START TEST IMAGES*/

.image-track-about {
    display: flex;
    flex-direction: column;
    margin: 20px 20px 20vh 20px;
}

.image-about-mob {
    display: none;
}

/* #image-track {  
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
}  
#image-track > .image-about {
    width: 24%;
    object-fit: cover;
    object-position: 50% center;
} */
.image-about {
    display: flex;
    width: 100%;
    overflow: hidden;
    /*border: 1px solid red;*/
}

.image-about img {
    width: 100%;
    /*scale: 1.3;*/
}

/* .image-track-about {
    height: 70vh;
    width: 100vw;
    margin: 0rem;
    overflow: hidden;
 }
  
#image-track {
    display: flex;
    gap: 4vmin;
    position: absolute;
    left: 10%;
    top: 25%;
    transform: translate(0%, -50%); 
    user-select: none;
}
  
#image-track > .image-about {
    width: 40vmin;
    height: 56vmin;
    object-fit: cover;
    object-position: 50% center;
} */


/*START HEADER*/

.section-about-header {
    display: flex;
    flex-direction: column;
    margin: 0 20px 8vh 20px;
}

/* .about-header-img{
    margin: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}
.about-header-img img{
    width: 100%;
} */

.sentence2-about .world-icon {
    width: 120px;
    opacity: 0;
    animation: opacity 1s cubic-bezier(0.5, 0, 0.1, 1) forwards 4.4s;

}

.title-inner2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 80px;
}

.sentence2-about {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    /* margin-bottom: 20px; */
    animation: text-clip3 1000ms 0s cubic-bezier(0.5, 0, 0.1, 1) both;
}

.block-sentence {
    display: flex;
    align-items: center;
}

.world-icon .process-animation {
    width: 110px;
}

.block-sentence .icon-arrow {
    width: 110px;
    margin-left: 20px;
}

.sentence2-inner {
    display: inline-block;
    animation: text-clip3 1000ms 0s cubic-bezier(0.5, 0, 0.1, 1) both;
    font-weight: 200;
    font-size: 6vw;
    line-height: 1;
    font-family: 'ABC Favorit Book';
}
.sentence2-inner .tr_letter1, .sentence2-inner .tr_letter2, .sentence2-inner .tr_letter3{
    margin-right: 1vw;
}

@keyframes text-clip3 {
    from {
        clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
        transform: translateY(10%);
        opacity: 0.5;
    }
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform: none;
        opacity: 1;
    }
}

.text-img {
    width: 50%;
    margin-top: 8vh;
    /* animation:text-clip4 600ms 0s cubic-bezier(0.5, 0, 0.1, 1) both; */
}

.text-img h4 {
    font-size: 32px;
    font-family: 'ABC Favorit Book';
    font-weight: 200;
    color: var(--subtitles);
    line-height: 1.3;
    margin-top: 16px;
}

/* @keyframes text-clip4 {
    from {
      transform: translateY(80%);
      opacity: 0.1;
    }
    to {
      transform: none;
      opacity: 1;
    }
} */


/*START RECOGNITION*/


.section-recognition {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 16vh 20px 10vh 20px;
}

.heading-recognition {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-weight: 200;
    font-size: 80px;
    line-height: 1;
    width: 100%;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
}

.date-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    margin: 4vh 0 0 0;
}

.date-text h2 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-weight: 200;
    font-size: 44px;
}

.date-divider {
    height: 0.5px;
    width: 100%;
    background-color: var(--titles);
    transition: width 1s ease-in-out;
    margin: 10px 0 16px 0;
}

.recognition-title-inner {
    display: inline-block;
    
}
.text-highlights{
    margin-bottom: 3rem;
}

.recognition-work-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: end;
    margin-top: 1rem;
    /* position: relative; */
}

.topic-list, .topic-list-no {
    width: 50%;
}

.topic {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 6px;
}

.text-topic {
    display: flex;
    flex-direction: row;
}

.text-topic h3 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-weight: bold;
    font-size: 18px;
    margin-right: 10px;
    margin-bottom: 8px;
}

.info-topic h4 {
    font-family: 'ABC Favorit Book';
    color: var(--subtitles);
    font-weight: 100;
    font-size: 16px;
}

.sub-text-topic h4 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-weight: 100;
    font-size: 16px;
    line-height: 1.3;
}

.topic-divider {
    height: 1px;
    width: 50%;
    background-color: var(--titles);
    transition: width 1s ease-in-out;
    margin: 16px 0;
}

/*START BESIDES DESIGN*/
.section-outside-design {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 40px;
    margin: 6vh 20px 16vh 20px;
}

.section-outside-design .text-title_paragraph {
    width: 100%;
}

.text-title_paragraph .about-text {
    font-family: 'ABC Favorit Book';
    color: var(--subtitles);
    font-size: 16px;
    line-height: 1.1;
    font-weight: 200;
    width: 100%;
}

.section-about-vid {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex-wrap: nowrap;
    width: 100%;
    gap: 20px;
}

.section-about-vid .about-vid, .section-about-vid .hover-vid, .section-about-vid .hover-vid2, .section-about-vid .about-vid2, .section-about-vid .about-vid3, .section-about-vid .about-vid4, .section-about-vid .hover-vid3, .section-about-vid .hover-vid4, .section-about-vid .hover-vid5 {
    width: 100%;
    opacity: 0.9;
}

.hover-vid,
.hover-vid2,
.hover-vid3,
.hover-vid4,
.hover-vid5 {
    display: none;
}

/* #about-besides_design{
    display: flex;
    flex-direction: column;
    padding: 0vh 0;
    width: 25%;
} */
/* #about-besides_design h6{
    margin-bottom: 20px;
    font-size:14px;
    width: 100%;
} */

#about-title {
    margin-top: 16vh;
    margin-bottom: 0vh;
    margin-left: 0;
    margin-right: 20px;
}

.vid-about {
    height: 100%;
}

.caption-about {
    margin: 16px 0 10px 0;
}

.vid-about h2 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 18px;
    line-height: 1.1;
    font-weight: 200;
    margin-bottom: 6px;
}

.vid-about h3 {
    font-family: 'ABC Favorit Book';
    color: var(--subtitles);
    font-size: 14px;
    line-height: 1.1;
    font-weight: 200;
}

.vid-divider {
    height: 100%;;
    width: 0.5px;
    background-color: var(--titles);
    transition: width 1s ease-in-out;
    margin: 0 10px;
}

/* .text-child h3{
    font-family:'ABC Favorit Book';
    color: var(--subtitles);
    font-weight: 100;
    font-size: 70px;
} */

/*START WORK AREAS*/
.areas-work {
    display: flex;
    flex-direction: column;
    margin: 20vh 20px;
}

.title-areas h6 {
    font-family: 'ABC Favorit Book';
    color: var(--subtitles);
    font-weight: 100;
    font-size: 16px;
    /* margin-left: 10px; */
    margin-bottom: 40px;
}

.content-area {
    display: flex;
    flex-direction: column;
}

.line-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

}

.item-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    margin-right: 80px;
    margin-bottom: 20px;
    overflow: hidden;
}

.item-row h2 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-weight: 100;
    font-size: 100px;
}

.item-row img {
    width: 150px;
    margin-left: 20px;
    opacity: 0;
}

.item-row .area-desk {
    display: block;
    /*opacity: 0;*/
    /*visibility: hidden;*/
    transform: translateY(100%);
}

.item-row .area-mob {
    display: none;
}

/*---------------------------START 404------------------*/
.section-404-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 90vh;
    margin: 20px;
    /* align-items:baseline; */
    /* align-items: center; */
    /* height: 94vh; */
}

.image-404 {
    width: 44%;
    /* position: absolute; */
    right: 0;
    bottom: 0;
}

#top-404-nav {
    z-index: 9999;
}

.image-404 img {
    width: 100%;
}

.section-404 {
    width: 66%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.btn-vid{
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: end;
    margin-bottom: 10px;
}
.vid-404{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
    width: 50%;
}
.vid-404 video{
    width: 32%;
}

.vid-404 video {
    width:32%;
    /* filter: grayscale(100%); */
    transition: filter 0.2s;
}

/* .vid-404 video:hover {
    filter: grayscale(0%);
} */

.text-404 h2 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-weight: 100;
    font-size: 80px;
    line-height: 1.2;
    margin-bottom:0px;
}
/* .back-home {
    width: 100%;
}
.back-home a {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 18px;
    line-height: 1;
    font-weight: 200;
    text-decoration: underline;
} */

#top-404-nav {
    position: unset;
}

/*----------------------------START FEAT U----------------------------*/

#header-featu {
    background-image: url(imgs/featu/featu-header.webp);
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.top-nav-projects .top-nav a {
    color: var(--titles);
}

.top-nav {
    mix-blend-mode: difference;
}

/* #black-text a{
    mix-blend-mode: difference;
}  */

.top-nav-projects {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.text-wrapper {
    display: flex;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.text-wrapper h2 {
    font-family: 'ABC Favorit Book';
    color: var(--background);
    opacity: 0.5;
    font-size: 140px;
    line-height: 1;
    font-weight: 200;
    padding: 0 2.6rem;
    white-space: nowrap;
    animation: text-clip2 2000ms 0s cubic-bezier(0.5, 0, 0.1, 1) both, move-infinite 9000ms linear infinite;
}

@keyframes move-infinite {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes text-clip2 {
    from {
        clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
        transform: translateY(40%);
        opacity: 0.1;
    }
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform: none;
        opacity: 0.5;
    }
}

.context-proj {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 20px 120px 20px;
}

.services-proj-mob {
    display: none;
}

.context-proj .services-proj li {
    font-family: 'ABC Favorit Book';
    color: var(--background);
    font-size: 18px;
    line-height: 1;
    font-weight: 200;
    margin-bottom: 10px;
}

.context-proj .back-projs a {
    font-family: 'ABC Favorit Book';
    color: var(--background);
    font-size: 18px;
    line-height: 1;
    font-weight: 200;
    text-decoration: underline;
}

.proj-section8 {
    width: 100%;
    margin-top: 16vh;
}

.text-app {
    padding: 0 20px;
}

.text-app h3 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 44px;
    font-weight: 200;
    width: 40%;
}

.proj-section6 {
    padding: 40px;
}

.proj-section6 img {
    width: 100%;
}

.proj-section7 {
    padding: 20px 20px 60px 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
}

.proj-section7 img {
    width: 100%;
}

.proj-section8 img {
    width: 100%;
}

.section-imgrow {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 4vh 20px;
}

.section-imgrow-content {
    width: 49%;
}

.section-imgrow-content img {
    width: 100%;
}

#imgrow-right {
    margin-top: 50vh;
}

.section-demo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 10vh 20px;
    /* height: 80vh; */

}

.section-demo h3 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 44px;
    font-weight: 200;
    width: 36%;
}

.content-demo-phone {
    margin-left: 40px;
    display: flex;
    flex-direction: row;
    gap: 40px;
}

.content-demo-phone .phone-demo {
    width: 45%;
}


/*----------------------------START ANFISIGN----------------------------*/

#header-anfisign {
    background-image: url(imgs/anfisign/header-anfisign.webp);
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.img2-row {
    margin: 4vh 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
}

.img2-row img, .img2-row .uiuxanfisa {
    width: 49%;
}

.img2-row .uiuxanfisa {
    margin-bottom: 30vh;
}

.img2-row .junior-img {
    margin-top: 30vh;
    width: 100%;
}

.img3-row {
    margin: 0vh 20px 4vh 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
}

.img3-row .junior-img2 {
    margin-top: 0;
    width: 100%;
}

/* .img3-row .junior-img2{
    margin-top: 0;
    width: 49%;
} */
.img3-row .img-side-row {
    margin-top: 0;
    width: 49.5%;
}

.section-img-text {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 10vh 20px 10vh 20px;
}

.section-img-text .anfisa-phones {
    width: 75%;
    margin-right: 20px;
}

.section-phones {
    width: 100%;
    display: flex;
    gap: 40px;
    margin-right: 20px;
}

.section-phones img {
    width: 30%;
}

/* .section-phones .veris-symp-phone{
    width: 30%;
} */

.section-img-text h3 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 28px;
    line-height: 1.2;
    font-weight: 200;
    width: 20%;
    margin-top: 20px;
}

.proj-section6 {
    padding: 4vh 20px 4vh 20px;
    width: 100%;
}

.section6-content h6 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 18px;
    line-height: 1.1;
    font-weight: 200;
    margin-left: 40px;
    width: 50%;
}

.section6-content {
    width: auto;
    display: flex;
    /* flex-direction: row; */
    align-items: flex-start;
}

.proj-section6 img {
    width: 60%;
}

.motion-anfisa {
    margin: 6vh 20px;
}

#fullscreen-margin0 {
    margin: 4vh 20px 0vh 20px;
}

#fullscreen-margin {
    margin: 0vh 20px 10vh 20px;
}

#fullscreen-mar {
    margin: 4vh 0px 4vh 0px;
}

#fullscreen-mar2 {
    margin: 4vh 0px 4vh 0px;
}

/*START TESTIMONIAL*/
.words-client {
    padding: 100px 20px;
    display: flex;
    flex-direction: row;
}

.words-client h5 {
    font-family: 'ABC Favorit Book';
    color: var(--subtitles);
    font-size: 18px;
    font-weight: 200;
    width: 20%;
    margin-top: 20px;
}

.client-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 40px;
}

.client-block img {
    width: 60px;
    height: 60px;
    margin-right: 20px;
}

.client-block p {
    font-family: 'ABC Favorit Book';
    color: var(--subtitles);
    font-size: 20px;
    font-weight: 200;
    margin-top: 0
}

.text-block-testimonial {
    width: 70%;
}

.text-block-testimonial h4 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 44px;
    line-height: 1.2;
    font-weight: 200;
}

/*--------------------PAGINATION NEXT PREV PROJ-----------------*/
/* .pagination-projs{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 80px 20px;
}

.pag-right-proj {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
}
.pag-left-proj {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.pag-right-proj p, .pag-left-proj p{
    font-family:'ABC Favorit Book';
    color: var(--subtitles);
    font-size:20px;
    font-weight: 200;
}
.pag-right-proj a, .pag-left-proj a{
    font-family:'ABC Favorit Book';
    color: var(--titles);
    font-size:44px;
    font-weight: 200;
    margin-top: 20px;
}
.link-pagination:hover{
    color: var(--subtitles);
    transition: all 300ms ease-in-out;
} */

.pagination-list {
    display: flex;
    flex-direction: row;
    margin: 14vh 20px;
}

.pagination-list h6 {
    font-family: 'ABC Favorit Book';
    color: var(--subtitles);
    font-size: 18px;
    font-weight: 200;
    width: 24%;
    margin-top: 10px;
    margin-bottom: 40px;
}

.content-pagination {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 80%;
}

.row-pagination {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.row-pagination .proj-item {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

.proj-item {
    position: relative;
    margin-right: 40px;
    margin-bottom: 20px;
}

.proj-item h4 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-weight: 200;
    font-size: 84px;
    margin-right: 10px;
}

.proj-item p {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 20px;
    font-weight: 200;
}

/* .proj-item img{
    width: 80%;
} */
.proj-item:hover h4,
.proj-item:hover p {
    color: var(--subtitles);
    transition: 200ms ease;
}

.proj-item-image {
    position: absolute;
    opacity: 0;
    top: -60px;
    left: 60px;
    transition: opacity 100ms ease;
    width: 240px;
}

.proj-item-image:hover {
    opacity: 1;
    transition: 200ms ease;
    z-index: 9999;
    border: #c9c9c9 1px solid;
}

/*----------------------------START PETUNIA----------------------------*/

#header-petunia {
    background-image: url(imgs/petunia/header-petunia.webp);
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.text-proj-header {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;

}

.section-about-proj {
    margin: 10vh 20px;
    display: flex;
    flex-direction: row;
    /* height: 50vh; */
}
.credits-text{
    margin-top: 20px;
}
.section-about-proj .credits-text{
    width: 24%;
}
.credits-text .credits-block .context-block-credit{
    color: var(--titles);
    font-size: 14px;
    font-family: 'ABC Favorit Book';
    margin-bottom: 2px;
}
.credits-text .credits-block li{
    color: var(--subtitles);
    font-size: 14px;
    font-family: 'ABC Favorit Book';
    margin-bottom: 2px;
}
/* .section-about-proj li {
    font-family: 'ABC Favorit Book';
    color: var(--subtitles);
    font-size: 18px;
    font-weight: 200;
} */

.section-about .text-content-proj {
    width: 80%;
}

.section-about .proj-title h3, .proj-title h3 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 100px;
    font-weight: 200;
}

.context-credits {
    display: flex;
    flex-direction: column;
    width: 60%;
}

.divider-credits {
    height: 1px;
    width: 100%;
    background-color: var(--subtitles);
}

.credits {
    margin-top: 40px;
    width: 100%;
}

.text-credits {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
}

.text-credits p {
    font-family: 'ABC Favorit Book';
    color: var(--subtitles);
    font-size: 18px;
    font-weight: 200;
    margin-right: 10px;
}

.credits img {
    width: 14px;
    color: var(--subtitles);
    opacity: 0.4;
}

.text-content-proj p {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 20px;
    font-weight: 200;
    line-height: 1.618;
}

.blocks-rows {
    width: 98%;
    display: flex;
    flex-direction: row;
    margin-bottom: 8px;
}
#credits{
    width: 96%;
}
#deliverables{
    display: none;
}
.text-credits-content .context-block-credit {
    font-family: 'ABC Favorit Book';
    color: var(--subtitles);
    font-size: 14px;
    font-weight: 200;
}

.text-credits-content li {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 14px;
    font-weight: 200;
    margin-bottom: 6px;
}

.credits-block {
    display: flex;
    flex-direction: column;
    margin-right: 40px;
    margin-bottom: 20px;
}

.text-credits-content {
    display: none;
    width: 100%;
}
.info-content{
    display: flex;
    flex-direction: row;
}

.text-credits p:hover {
    color: var(--notes);
    transition: all 0.6s ease
}

.arrow-credits {
    transform: rotate(0deg);
    transition: all 0.6s ease;
    align-items: center;
    display: flex;
}

.arrow-credits.active {
    transform: rotate(180deg);
    transition: all 0.6s ease
}

/* SECTION VIDEO */
.video-header-petunia {
    margin: 4vh 0;

}

.petunia-video {
    width: 100%;
}

/* SECTION TEX + VIDEO */
.section-text_video {
    display: flex;
    flex-direction: column;
    margin: 20vh 20px;
}

.section-text_video h4 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 84px;
    font-weight: 200;
    margin: 10px 0 10vh 0;
    text-align: left;
    width: 60%;
    line-height: 1.1;
}

.section-text_video .video-header-petunia {
    margin: 0;
    width: 70%;
}

.content-steps-flow {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.list-steps-flow {
    width: 28%;
}

.step-flow {
    margin-bottom: 40px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.step-flow h3 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 36px;
    font-weight: 200;
    margin-bottom: 10px;
    width: 22%;
}

.item-step-flow {
    display: flex;
    flex-direction: column;
    width: 90%;
}

.step-flow h4 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 28px;
    font-weight: 200;
    margin-bottom: 10px;
    width: 100%;
}

.step-flow p {
    font-family: 'ABC Favorit Book';
    color: var(--subtitles);
    font-size: 18px;
    font-weight: 200;
}

#margin-bottom-none {
    margin-bottom: 2vh;
}

.divider-petunia {
    display: none;
}


/* SECTION LOGOTYPE */
.proj-section2 {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* height: 70vh; */
}

.logotype-img {
    /* border: 1px solid rgb(199, 199, 199); */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 0 100px 0;
}

.content-logotype p, .proj-section4 p, .proj-section5 p, .section-imgrow-content p {
    font-family: 'ABC Favorit Book';
    color: var(--subtitles);
    font-size: 14px;
    font-weight: 200;
    margin: 10px 0;
}
.logotype-img picture{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.logotype-img img {
    width: 80%;
}

#logo-featu {
    margin: 0 0 140px 0;
}

/* SECTION COLOR TYPE */
.proj-section3 {
    margin: 4vh 20px;
    display: flex;
}

.proj-section3 img {
    width: 80%;
}

/* SECTION BUSINESS CARD */
.proj-section4 {
    padding: 4vh 20px 4vh 20px;
    width: 100%;
}

.section4-content {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.section4-content picture{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.proj-section4 img {
    width: 70%;
}

#single-poster img {
    width: 80%;
}

/* SECTION TEXT TITLE + PARAGRAPH */

.section-text-block {
    padding: 20vh 20px;
    display: flex;
    flex-direction: row;
}

.section-text-block h6 {
    font-family: 'ABC Favorit Book';
    color: var(--subtitles);
    font-size: 18px;
    font-weight: 200;
    width: 20%;
    margin-top: 20px;
}

.text-title_paragraph {
    width: 54%;
}

.text-title_paragraph h3 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 52px;
    line-height: 1.2;
    font-weight: 200;
    width: 90%;
}

.text-title_paragraph h5 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 20px;
    line-height: 1.4;
    font-weight: 200;
    margin-top: 40px;
    width: 100%;
}

/* SECTION PAPER */
.proj-section5 {
    padding: 4vh 20px 4vh 20px;
    width: 100%;
}

.section5-content {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.proj-section5 img {
    width: 60%;
}

/* SECTION FULL SCREEN */
.img-fullscreen {
    margin: 4vh 0 6vh 0;
    width: 100%;
}

.img-fullscreen img {
    width: 100%;
}

/* SECTION TEXT + IMAGE */
.proj-section-text_image {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 20px 20px 4vh 20px;
}

.text-left-poster {
    width: 50%;
}
.proj-section-text_image picture{
    display: flex;
    justify-content: flex-end;
}
.proj-section-text_image .petunia{
    width: 60%;
}

#mob-text {
    display: none;
}

.text-left-poster h2 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 100px;
    line-height: 1;
    font-weight: 200;
}

.proj-section-text_image img {
    width: 80%;
}

/* SECTION FULL SCREEN */
#device-veris-mob {
    display: none;
}

.img-fullscreen2 {
    margin: 4vh 20px 4vh 20px;
    /* position: relative;
    overflow: hidden; */
    /* height: 100vh; */
}

.img-fullscreen2 img {
    width: 100%;
}
#phones-anfi{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin: 16vh 20px 8vh 20px;
}

#phones-anfi picture{
    display: flex;
    justify-content: center;
}
#phones-anfi img{
    width: 75%;
}

#clementine-img-combined {
    margin-top: 20vh;
}

/* SECTION FEATURES */

.section-modern_science {
    display: flex;
    flex-direction: column;
    margin: 20vh 20px;
}

.section-modern_science h5 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 54px;
    line-height: 1;
    font-weight: 200;
    margin-bottom: 40px;
}

.features-img {
    display: flex;
    flex-direction: row;
    justify-content: end;
}

.features-img img {
    width: 20%;
    margin-left: 20px;
}

/* SECTION VARIETY */
.section-list-video {
    display: flex;
    flex-direction: column;
    margin: 8vh 20px 2vh 20px;
}

.section-list-video h6 {
    font-family: 'ABC Favorit Book';
    color: var(--subtitles);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 200;
    width: 100%;
}

.content-list-variety {
    display: flex;
    flex-direction: column;
    margin: 6vh 0;
}

.item-variety {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* margin-bottom: 20px; */
}

.item-variety h2 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 100px;
    font-weight: 200;
}

.item-variety .vid-variety {
    width: 20vw;
    height: auto;
    margin-right: 20px;
}

.vid-variety .petunia-video-variety {
    width: 100%;
    border-radius: 16px 0 0 0;
}

#variety2 .petunia-video-variety {
    border-radius: 0 16px 0 0;
}

#variety3 .petunia-video-variety {
    border-radius: 0 0 0 16px;
}

#variety4 .petunia-video-variety {
    border-radius: 0 0 16px 0;
}

#variety1 {
    margin-left: 10vw;
}

#variety2 {
    margin-left: 30vw;
}

#variety3 {
    margin-left: 8vw;
}

#variety4 {
    margin-left: 20vw;
}

.line-variety {
    width: 100%;
    height: 1px;
    background-color: var(--titles);
    margin: 20px 0;
}


/*----------------------------START FRANZ----------------------------*/

#header-franz {
    background-image: url(imgs/franz/header-franz.webp);
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.img2-row .imgs-side-side {
    width: 100%;
}

/* .section-grid{
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin: 12vh 20px;
} */
.section-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 12vh 20px;
}

.grid-content {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-end;
}

.content-col {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    gap: 20px;
}

.content-col h3 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 74px;
    line-height: 1.1;
    font-weight: 200;
    margin-top: 0;
    /* height: 30%; */
    margin-bottom: 100px;
}

.content-col .second-text {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 74px;
    line-height: 1.1;
    font-weight: 200;
    margin-bottom: 260px;
    /* height: 30%; */
}

.content-col img {
    width: 100%;
}

.section-text-imgrow {
    margin: 20vh 20px 0 20px;
}

.section-text-imgrow h3 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 74px;
    line-height: 1;
    font-weight: 200;
    margin-bottom: 40px;
    width: 40%;
}

#about-me {
    margin: 20vh 20px 20vh 20px;
    width: 64%;
}

#about-me h4 {
    color: var(--titles);
    font-size: 44px;
    line-height: 1.2;
}

.section-video-text h3 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 74px;
    line-height: 1;
    font-weight: 200;
    margin-bottom: 40px;
    width: 100%;
    text-align: center;
}

.section-video-text .text-title-left {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 74px;
    line-height: 1;
    font-weight: 200;
    margin-bottom: 40px;
    text-align: left;
    width: 60%;
}

.section-text-imgrow .img2-row {
    margin: 0;
}

/* SECTION VIDEO */
.section-video-text {
    margin: 0 20px 10vh 20px;
}

#video-margintop {
    margin: 20vh 20px 0 20px;
    /* display: flex;
    justify-content: center;
    align-items:center;
    flex-direction: column; */
}

.franz-isometric {
    width: 100%;
}

#video-margintop .video-franz {
    display: flex;
    justify-content: center;
    align-items: center;
}

#video-margintop .franz-isometric {
    width: 80%;
}
#veris-video-watch .franz-isometric {
    width: 100%;
}


/*----------------------------START CLEMENTINE----------------------------*/

#header-clementine {
    background-image: url(imgs/clementine/header-clementine.jpeg);
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}


/* TOGGLE CSS */

.container-tabs-text {
    width: 100%;
    margin-top: 20vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#veris-tabs {
    width: 100%;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.container-tabs-text h1 {
    font-family: 'ABC Favorit Book';
    font-size: 80px;
    color: var(--titles);
    font-weight: 200;
    width: 60%;
    text-align: center;
    margin: 0 0 60px 0;
    line-height: 1.1;
}

.toggleContainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.toggleContainer button.active {
    color: var(--titles);
    transition: all 0.6s ease-in-out;
}

.toggleContainer button {
    font-family: 'ABC Favorit Book';
    border: none;
    outline: none;
    font-size: 32px;
    font-weight: 200;
    color: var(--subtitles);
    padding: 0 20px;
    background-color: #ffffff;
}

/* END TOGGLE CSS */

.tabs-screens-video {
    display: flex;
    justify-content: center;
}

#petunia-tabs .tabs-screens-video video {
    width: 82%;
}

.tabs-screens-video video {
    width: 74%;
}

#darkContent video, #lightContent video {
    width: 60%;
    margin-top: 10px;
}

.section-phones-only {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    margin: 16vh 20px;
}
.section-phones-only picture{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.section-phones-only img {
    width: 80%;
}

.section-phones-only .veris-symp-phone {
    width: 24%;
}

/*----------------------------START PASSWORD MODAL----------------------------*/

/* .modal {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    justify-content: right;
    align-items: center;
    z-index: 10000;
}

.modal-content {
    background-color: #0d0d0d;
    padding: 20px;
    height: 100vh;
    z-index: 10000;
    padding-left: 30%;
}

#submitPassword{
    background-color: #0d0d0d
}

#passwordInput {
    width: 80%;
    padding: 10px;
    border: none;
    outline: none;
    border-bottom: 1px solid #1f1f1f;
    margin-bottom: 10px;
    background-color: #0d0d0d;
    font-size: 50px;
    font-family: 'ABC Favorit Book';
    color: #fff;
    font-weight: 200;
}

.modal-content button {
    background-color: var(--titles);
    border: none;
    cursor: pointer;
}
.text-top{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
}
.text-top span{
    font-size: 20px;
    font-family: 'ABC Favorit Book';
    color: #fff;
    font-weight: 200;
    text-decoration: underline;
}
button img {
    width: 60px;
}

.text-pass h1 {
    font-family: 'ABC Favorit Book';
    font-size: 24px;
    font-weight: 200;
    color: var(--background);
    margin-left: 16px;
    margin-bottom: 20vh;
}
.error-message {
    display: none;
    color: rgb(251, 44, 44);
    margin-top: 10px;
    font-family: 'ABC Favorit Book';
} */

/*----------------------------START VERIS----------------------------*/


#header-veris {
    background-image: url(imgs/veris/header-veris.webp);
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.section-grid-veris {
    display: flex;
    flex-direction: column;
    margin: 16vh 20px;
}

.content-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 20px;
}

.content-row .text-content-row {
    display: flex;
    flex-direction: column;
}

.content-row .imgs-small {
    width: 49.5%;
}

.content-row h3 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 74px;
    line-height: 1;
    font-weight: 200;
    margin-bottom: 40px;
    width: 80%;
}

.content-row p {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 200;
    width: 80%;
}

.section-image-text {
    margin: 16vh 20px;
}

.section-image-text h3 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 54px;
    line-height: 1.2;
    font-weight: 200;
    margin-bottom: 40px;
    width: 60%;
}

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

.img-fullscreen-text img {
    width: 100%;
}

.section-monitorization {
    display: flex;
    flex-direction: column;
    margin: 16vh 20px;
}

.section-monitorization h2 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 80px;
    line-height: 1;
    font-weight: 200;
    text-align: center;
}

.container-monitorization-mob {
    display: none;
}

.container-monitorization {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.container-monitorization .video-symptoms-composition {
    width: 25%;
}

.video-symptoms-composition .veris-symptoms {
    width: 100%;
}

.section-monitorization img {
    width: 100%;
}

.cards-monitorization {
    display: flex;
    flex-direction: column;
    width: 20%;
    gap: 20px;
    margin: 0 60px;
}

.section-symptoms-system {
    display: flex;
    flex-direction: column;
    margin: 20vh 20px 10vh 20px;
}

.section-symptoms-system h4 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 44px;
    line-height: 1;
    font-weight: 200;
    margin-bottom: 40px;
}

.symptoms-system {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #F6F3FF;
    padding: 20px;
    width: 100%;
    gap: 20px;
}

.row-symptoms {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 50%;
    gap: 20px;
}

.symptoms-system img {
    width: 100%;
}

.img-fulltext {
    /* width: 100%; */
    margin: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #F6F3FF;
    padding: 60px;
}
.img-fulltext picture{
    display: flex;
    justify-content: center;
}
.img-fulltext h3 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    text-align: center;
    font-size: 80px;
    line-height: 1;
    font-weight: 200;
}

.img-fulltext img {
    width: 70%;
}

.text-components {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 10vh 20px;
}

.content-text-components {
    width: 60%;
}

.text-components h3 {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 64px;
    line-height: 1;
    font-weight: 200;
    margin-bottom: 60px;
}

.text-components p {
    font-family: 'ABC Favorit Book';
    color: var(--subtitles);
    font-size: 20px;
    line-height: 1.2;
    font-weight: 100;
    margin-bottom: 10px;
}

.components-video {
    width: 50%;
    display: flex;
    justify-content: center;
}

.components-video .scroll-video {
    width: 50%;
}

/*----------------------------START PLAYGROUND----------------------------*/
#body-play {
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow-y: hidden;
}

.top-nav-playground {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: absolute;
    z-index: 1000;
    padding: 20px;
    mix-blend-mode: difference;
}

.top-nav-playground .logo a, .top-nav-playground .nav-links a {
    color: var(--background);
}

.container-playground {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    top: 30%;
    position: relative;
    /* margin: 20px; */
}

.container-play {
    height: 100vh;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
}

/* .playground-page{
    margin:20px;
} */
.text-content-play h2 {
    margin-top: 10%;
    font-family: 'ABC Favorit Book';
    color: var(--subtitles);
    font-size: 36px;
    opacity: 0.3;
    line-height: 1.2;
    font-weight: 200;
    position: absolute;
    width: 40%;
    margin-left: 20px;
}

.container-playground .proj-image-desk {
    width: 80%;
    margin: 20px;
}

.container-playground .proj-image {
    width: 80%;
    margin: 20px;
}

.container-playground .proj-image1 {
    width: 50%;
    margin: 20px;
}

.container-playground .image {
    margin: 0;
}

.container-playground img {
    width: 100%;
}

.container-playground .proj-image p, .container-playground .proj-image1 p, .container-playground .proj-image-desk p, .container-playground .proj-image-mob p {
    font-family: 'ABC Favorit Book';
    color: var(--subtitles);
    font-size: 16px;
    line-height: 1;
    font-weight: 200;
    margin-top: 10px;
    margin-bottom: 40px;
}

.proj-image-desk {
    display: block;
}

.proj-image-mob {
    display: none;
}

.video-playground {
    width: 100%;
    display: flex;
    justify-content: center;
}

.playground-video {
    width: 100%;
}


/*-------------------- START CONTACTS-----------------*/
.section-say-hello {
    height: 60vh;
    display: flex;
    flex-direction: row;
    width: 90%;
    margin-left: 5%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16vh;
    margin-top: 7rem;
}
.txt_podcast {
    width: 45%;
    font-family: 'ABC Favorit Book';
    font-size: 1.5rem;
    text-align: justify;
    color: var(--titles);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.player_podcast{
    width: 45%;
    height: 100%;
}
@media (max-width: 1026px) {
    .section-say-hello {
        flex-direction: column;
        align-items: stretch;
    }

    .txt_podcast,
    .player_podcast {
        width: 100%;
    }
}
.section-say-hello a {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 6.5vw;
}

.say-hello:hover {
    transition: all 200ms ease;
    opacity: 0.8;
}

.say-hello {
    font-family: 'ABC Favorit Book';
    color: var(--titles);
    font-size: 6.5vw;
    display: inline-block;
    position: relative;
}

.say-hello:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 9px;
    bottom: 0;
    left: 0;
    background-color: var(--titles);
    transform-origin: bottom right;
    transition: transform .6s ease-out;
}

.say-hello:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

#contacts-page .text-img h4 {
    margin-top: 4px;
}

#contacts-page {
    margin-bottom: 0;
    height: 10vh;
}

/*-------------------- START RESPONSIVE -----------------*/


/*------------ START RESPONSIVE 1440PX -------------*/
@media screen and (max-width: 1440px) {
    .proj-card1, .proj-card2, .proj-card3 {
        height: 60vh;
    }

    .motion-compile {
        margin: 0;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 60px;
        margin-top: 100px;
    }

    .row-steps {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        /* gap: 40px; */
    }


    .list-steps-flow {
        flex-direction: column;
        width: 32%;
    }

    /*RESPONSIVE CONTACTS*/
    .section-say-hello {
        height: 60vh;
        margin-bottom: 10vh;
    }

    .content-steps-flow {
        flex-direction: column;
        align-items: center;
    }

    .section-text_video .video-header-petunia {
        margin: 0;
        width: 80%;
    }

    .list-steps-flow {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }

    .step-flow h3 {
        width: 12%;
    }

    .item-step-flow {
        width: 70%;
    }

    .step-flow {
        justify-content: flex-start;
    }

    /*RESPONSIVE FOOTER*/

    /*HOME PAGE*/
    .item-row h2 {
        font-size: 80px;
    }

    /*  PRELOADER  */
    .images-loader {
        /*flex-wrap: wrap;*/
        /*flex-direction: column;*/
        /*align-items: flex-end;*/
        /*width: fit-content;*/
        left: 55% !important;
    }

    .images-loader img {
        width: 100%;
        max-width: 32vw !important;
        height: auto;
        transform-origin: right;
        /*transform: translateX(-4%) !important;*/
        margin: 0 -20px 0 auto !important;
    }

    /* .images-loader img:nth-child(5) {
        display: none;
    }

    .images-loader img:nth-child(6) {
        display: none;
    }

    .images-loader img:nth-child(7) {
        display: none;
    }

    .images-loader img:nth-child(8) {
        display: none;
    }

    .images-loader img:nth-child(9) {
        display: none;
    } */

    .tr_letter3 {
        display: block;
    }

    .tr_letter2 {
        display: block;
    }
    .tr_letter1 {
        display: block;
    }

}

@media screen and (max-width: 1366px) {
    /* form{
        width: 144%;
    } */
    .img-office img {
        margin-top: 0;
    }
    #password {
        width: 90%;
    }
    .content-pass{
        width: 98%;
    }

    /* .step-flow h3{
        font-size:32px;
        width: 20%;
    } */
    .top-left {
        width: 70%;
    }

    .content-col h3 {
        margin-bottom: 60px;
    }

    /* .img2-row .imgs-side-side {
        width: 49.3%;
    } */

    .section-about .proj-title h3, .proj-title h3 {
        font-size: 80px;
    }

    .blocks-rows {
        width: 100%;
    }

    .item-variety h2 {
        font-size: 72px;
    }

    /* #variety1, #variety2, #variety3, #variety4{
        margin-left: 0;
    } */
    .item-variety .vid-variety {
        /* width: 220px; */
        height: auto;
        margin-right: 20px;
    }

    .vid-variety .petunia-video-variety {
        width: 100%;
        border-radius: 14px 0 0 0;
    }

    #variety2 .petunia-video-variety {
        border-radius: 0 14px 0 0;
    }

    #variety3 .petunia-video-variety {
        border-radius: 0 0 0 14px;
    }

    #variety4 .petunia-video-variety {
        border-radius: 0 0 14px 0;
    }

    .step-flow h4 {
        font-size: 22px;
    }

    .step-flow p {
        font-size: 16px;
    }

    .step-flow {
        margin-bottom: 40px;
    }

    /* .section-text_video .video-header-petunia{
        margin: 0;
        width: 66%;
    }
    .content-steps-flow{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: start;
    }
    .list-steps-flow{
        width: 30%;
    }
    .step-flow{
        margin-bottom: 60px;
        width: 100%;
    } */
    .content-row .imgs-small {
        width: 49.3%;
    }

    .text-title_paragraph h3 {
        width: 100%;
    }

    /* .heading-recognition{
        width: 44%;
    } */
    /* .top-section .left-side{
        width: 40%;
    } */
    .section-text-imgrow h3 {
        width: 59%;
    }

    /* .section-text-imgrow h3, .section-video-text h3 {
        width: 60%;
    } */
    .container-tabs-text h1 {
        font-size: 70px;
        width: 60%;
        margin: 0 0 60px 0;
    }

    .toggleContainer button {
        font-size: 28px;
    }

    .proj-item h4 {
        font-family: 'ABC Favorit Book';
        color: var(--titles);
        font-weight: 200;
        font-size: 64px;
        margin-right: 10px;
    }

    .proj-item p {
        font-family: 'ABC Favorit Book';
        color: var(--titles);
        font-size: 20px;
        font-weight: 200;
    }

}


/*------------ START RESPONSIVE 1250PX ---------------------*/
@media screen and (max-width: 1250px) {
    /* .content-pass{
        width: 98%;
    } */
    .password-form{
        margin-left: 40%;
        margin-top: 30%;
    }
    /*HOME PAGE*/
    .section-home-header {
        margin: 0px 20px 100px 20px;
    }

    .sentence2-inner {
        font-size: 7vw;
    }

    .motion-compile {
        margin: 10vh 0;
    }

    .block-text h6, .block-text .sub-text {
        font-size: 16px;
    }

    .section-process {
        height: 75vh;
    }

    .step1 h5, .step2 h5, .step3 h5, .step4 h5 {
        font-size: 20px;
    }

    .step1 .step-title, .step2 .step-title, .step3 .step-title, .step4 .step-title {
        font-size: 20px;
    }

    .step3 {
        width: 80%;
    }

    .line-row .item-row {
        margin-right: 40px;
    }

    .line-row .item-row img {
        width: 130px;
        margin-left: 20px;
    }

    .line-row .item-row h2 {
        font-size: 70px;
    }

    .item-row h2 {
        font-size: 70px;
    }

    .text-404 h2 {
        font-size: 66px;
    }
    /* .content-pass{
        width: 70%;
    } */
}

/*------------ START RESPONSIVE 1024PX ---------------------*/
@media screen and (max-width: 1024px) {
    /* .close-video{
        display: block;
    } */
    .link-footer:hover, .link-featured:hover, .cursor-link:hover, #active-navlink:hover, #link-navigation:hover, #link-glossaire:hover, #link-moustique:hover {
        color: var(--titles);
        transition: all 200ms ease;
    }

    /* .vid-404 video{
        width: 36%;
    }
    .vid-404{
        width: 80%;
    } */
    .say-hello:hover, .say-hello:after, .vid-404 video:hover, .cursor.activeHover, .cursor.activeHoverMail, .cursor.activeAbout {
        /*display: none;*/
    }
    .cursor-shadow-contact.activeHoverMail, .cursor.activeList1, .cursor.activeList2, .cursor.activeList3, .cursor.activeList4, .cursor.activeList5,
    .cursor.activeList6, .cursor.activeList7, .cursor.activeList8, .cursor.activeList9, .cursor.activeList10 {
        /*display: none;*/
    }

    .cursor-dot.activeHoverMail .cursor-dot.activeCopyHover, .cursor-dot.activeHoverVideo, .cursor-dot.activeCopyHoverProj, .cursor-dot.activeHoverMail, .cursor-dot.activeList1, .cursor-dot.activeList2, .cursor-dot.activeList3,
    .cursor-dot.activeList4, .cursor-dot.activeList5, .cursor-dot.activeList6, .cursor-dot.activeList7, .cursor-dot.activeList8, .cursor-dot.activeList9, .cursor-dot.activeList10, .cursor, .cursor.activeCopyHover {
        /*display: none;*/
    }

    .topic-list:hover .topic h3,
    .topic-list:hover .sub-text-topic h4 {
        color: var(--titles)
    }

    /* .date-divider {
        display: none;
    } */
    .topic-list span {
        display: block;
        margin-left: 10px;
    }

    /* form{
        width: 140%;
    } */
    #password {
        width: 85%;
    }

    #about-me h4, .date-text h2{
        font-size: 36px;
    }

    .cursor.cursor-dot, .cursor-dot.activeCopyHover, .cursor-dot.activeHoverVideo, .cursor-dot.activeCopyHoverProj, .cursor-shadow.activeCopyHover, .cursor-shadow.activeCopyHoverProj, .cursor-shadow-video.activeHoverVideo, .cursor-shadow-proj,
    .cursor-shadow-video, .cursor-shadow-proj.activeHover, .cursor.cursor-dot.activeHover, .cursor.cursor-dot.activeHoverMail, .cursor-shadow-about, .cursor-dot.activeAbout, .cursor-shadow-about.activeAbout, .cursor div, .cursor {
        /*display: none;*/
    }

    #contacts-page {
            height: 10vh;
    }

    .list-steps-flow {
        flex-direction: column;
    }

    .row-steps {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 40px;
    }

    .step-flow h3 {
        font-size: 32px;
        width: 15%;
    }

    .section-404 {
        width: 90%;
    }

    /* .section-404-content {
        flex-direction: column;
        align-items: flex-start;
    } */
/* 
    .image-404 {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .image-404 img {
        width: 60%;
    } */

    .context-proj {
        margin: 20px 20px 150px 20px;
    }

    .section-text_video {
        margin: 10vh 20px;
    }

    .step-flow p {
        font-size: 14px;
    }

    .section-text_video .video-header-petunia {
        width: 100%;
    }

    .proj-section5 {
        padding: 4vh 20px 4vh 20px;
    }

    .section-phones-only {
        margin: 10vh 20px;
    }

    .section-phones-only .veris-symp-phone {
        width: 28%;
    }
    .section-phones-only img{
        width: 100%;
    }
    .proj-section-text_image {
        padding: 4vh 20px 4vh 20px;
    }

    .img-fullscreen2 {
        margin: 4vh 20px 0 20px;
    }
  
    .container-tabs-text, #clementine-img-combined {
        margin-top: 12vh;
    }

    .container-tabs-text h1 {
        font-size: 54px;
        margin: 0 0 20px 0;
    }

    .section-about .proj-title h3, .proj-title h3 {
        font-size: 64px;
    }

    .section-grid {
        margin: 8vh 20px;
    }

    .text-content-proj p {
        font-size: 18px;
    }

    .img3-row {
        margin: 4vh 20px 4vh 20px;
    }

    .content-col h3 {
        font-size: 54px;
        margin-bottom: 38px;
    }

    .content-col .second-text {
        font-size: 54px;
        /* margin-top: 60px; */
        margin-bottom: 0;
    }

    #darkContent video, #lightContent video {
        width: 80%;
    }

    .section-video-text {
        margin: 10vh 20px;
    }

    #video-margintop {
        margin: 12vh 20px 0 20px;
    }

    .section-text-imgrow h3 {
        width: 70%;
        font-size: 54px;
    }

    .section-video-text h3 {
        font-size: 54px;
        margin-bottom: 20px;
    }

    /* .img2-row .imgs-side-side {
        width: 49%;
    } */

    .proj-section7 {
        padding: 20px;
    }

    #fullscreen-mar2 {
        margin: 6vh 0px 4vh 0px;
    }

    #fullscreen-margin {
        margin: 0vh 20px;
    }

    .img3-row {
        margin: 4vh 20px;
    }

    .proj-section4 {
        padding: 0vh 20px;
    }

    #section-margin-bottom {
        padding: 0vh 20px 4vh 20px;
    }

    .words-client {
        flex-direction: column;
    }

    .text-block-testimonial {
        width: 90%;
        margin-top: 20px;
    }

    .text-block-testimonial h4, .section-img-text h3 {
        font-size: 32px;
    }

    .text-wrapper h2 {
        font-size: 130px;
    }

    .item-variety h2 {
        font-size: 64px;
    }

    #variety1, #variety2, #variety3, #variety4 {
        margin-left: 0;
    }

    .item-variety .vid-variety {
        /* width: 200px; */
        height: auto;
        margin-right: 20px;
    }

    .vid-variety .petunia-video-variety {
        width: 100%;
        border-radius: 12px 0 0 0;
    }

    #variety2 .petunia-video-variety {
        border-radius: 0 12px 0 0;
    }

    #variety3 .petunia-video-variety {
        border-radius: 0 0 0 12px;
    }

    #variety4 .petunia-video-variety {
        border-radius: 0 0 12px 0;
    }

    .blocks-rows {
        width: 90%;
    }

    /* .text-credits p:hover {
        color: #60616e;
        transition: all 0.6s ease;
    } */

    .process-title h2 {
        font-size: 74px;
    }

    .section-process-list {
        margin-top: 6vh;
    }

    .text-icon {
        width: 50%;
    }

    .home-header-img .home-desk {
        height: 80vh;
    }

    .proj-item h4 {
        font-size: 54px;
    }

    .toggleContainer button {
        font-size: 24px;
    }

    .section-image-text h3 {
        width: 80%;
    }

    .section-video-text .text-title-left {
        font-size: 44px;
        width: 80%;
    }

    .img-fulltext img {
        width: 90%;
    }

    .section-monitorization h2, .img-fulltext h3 {
        font-size: 64px;
    }

    .content-row h3 {
        font-size: 54px;
    }

    .proj-item-image, .proj-item-image:hover {
        display: none;
    }

    .world-icon .process-animation {
        width: 95px;
    }

    .section-say-hello {
        height: 40vh;
        margin-bottom: 30vh;
    }
    .player_podcast {
        margin-top: 8rem;
    }
    /* HOME PAGE */
    .section-home-header {
        margin: 0 20px 80px 20px;
    }

    .sentence1-inner {
        font-size: 14.6vw;
    }

    .top-section .left-side h4 {
        font-size: 36px;
    }

    .sentence2-about {
        margin-bottom: 0;
    }

    .sub-head-text {
        gap: 20px;
        flex-direction: row;
        margin: 0;
    }

    .topic-subtext {
        flex-direction: column;
        gap: 16px;
    }

    .motion-compile {
        margin: 10vh 0;
    }

    .line-row .item-row h2 {
        font-size: 60px;
    }

    .proj-card1, .proj-card2, .proj-card3 {
        height: 60vh;
    }

    .section-featured-proj {
        margin: 40px 20px 20px 20px;
    }

    .line-row .item-row img {
        width: 110px;
        margin-left: 20px;
    }

    .areas-work {
        margin: 10vh 20px;
    }

    .section-process {
        display: none;
    }

    .section-process-list {
        display: block;
    }

    .animation-video {
        margin-right: 40px;
    }

    .animation-video img, .animation-video video {
        width: 100px;
    }

    #rocket {
        width: 100px;
    }

    .section-line {
        margin: 10px 20px;
    }

    /* .text-icon {
        display: flex;
        flex-direction: row-reverse;
        justify-content: start;
        align-items: center;
        margin: 0 20px;
    } */
    .text-step {
        display: flex;
        flex-direction: column;
    }

    .item-list .step-title {
        font-size: 20px;
        margin: 20px 0;
    }

    .item-list h5 {
        font-size: 20px;
    }

    .services-text, .services-list {
        width: 100%;
    }

    .services-list h4 {
        font-size: 32px;
    }

    /* FOOTER */
    /* .top-section .left-side {
        width: 50%;
    } */
    .middle-side h5, .right-side h5 {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .middle-side {
        display: flex;
        flex-direction: row;
        width: 50%;
        margin: 0;
    }

    .middle-side a {
        font-size: 16px;
    }

    .main-footer .top-section {
        flex-direction: column;
    }

    .main-footer .left-side {
        width: 100%;
        margin-bottom: 60px;
    }

    .top-left {
        width: 60%;
    }

    .main-footer .middle-side {
        flex-direction: row;
        width: 94%;
        margin: 0;
    }

    .middle-side .background, .middle-side .social {
        margin-bottom: 20px;
    }

    .middle-side .contact {
        margin-bottom: 40px;
    }

    .right-side {
        display: none;
    }

    .bottom-section {
        flex-direction: row;
        width: 100%;
        margin: 40px 0 0 0;
        align-items: center;
    }

    .foot {
        margin-bottom: 0;
    }

    /* WORK PAGE */
    .container-tabs {
        display: none;
    }

    .grid-responsive {
        display: block;
        margin: 0 20px 20px 20px;
    }

    .container-grid-responsive {
        display: flex;
        flex-direction: column;
        padding-top: 10vh;
    }

    .row-grid {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 60px;
    }

    .proj-image {
        width: 47vw;
        margin: 0;
    }

    .proj-image video {
        width: 100%;
    }

    .row-grid h4 {
        font-family: 'ABC Favorit Book';
        font-weight: 100;
        font-size: 20px;
        color: var(--titles);
        margin-top: 10px;
    }

    .row-grid p {
        font-family: 'ABC Favorit Book';
        font-weight: 100;
        font-size: 14px;
        color: var(--subtitles);
        margin-bottom: 10px;
    }

    .row-grid .image {
        width: 100%;
        object-fit: cover;
        object-position: 100% center;
    }

    #body-work {
        height: auto;
        overflow-y: scroll;
    }

    .top-nav-work {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 20px;
        position: fixed;
        z-index: 9999;
    }

    #footer-work {
        display: block;
    }

    /*ABOUT*/
    .heading-recognition {
        font-size: 60px;
    }

    .text-img {
        width: 90%;
    }

    .text-img h4 {
        font-size: 28px;
    }

    .text-title_paragraph h3 {
        font-size: 44px;
        width: 90%;
    }

    .section-text-block {
        flex-direction: column;
    }

    .text-title_paragraph {
        width: 80%;
    }

    /*FEATU*/
    .section-text-block {
        padding: 6vh 20px;
    }

    .section-text-block h6 {
        margin-bottom: 20px;
    }

    .content-demo-phone .phone-demo {
        width: 50%;
    }

    .section-img-text {
        margin: 10vh 20px;
    }

    .section-demo h3 {
        font-size: 32px;
        width: 46%;
    }

    .content-demo-phone .phone-demo {
        width: 44%;
    }

    .content-demo-phone {
        margin-left: 0;
        gap: 30px;
    }

    .proj-section8 img {
        width: 100%;
        margin: 40px 0;
    }

    #logo-featu {
        margin: 0 0 80px 0;
    }

    .logotype-img {
        border: none;
        margin: 0 0 40px 0;
    }

    /* .logotype-img img {
        width: 80%;
    } */

    #imgrow-right {
        margin-top: 0vh;
    }

    .section-imgrow {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 20px;
        align-items: end;
    }

    /*PETUNIA*/
    .text-title_paragraph h5 {
        font-size: 18px;
        line-height: 1.4;
    }

    .context-credits {
        width: 70%;
    }

    .features-img {
        gap: 20px;
        justify-content: space-between;
    }

    .features-img img {
        margin: 0;
        width: 23%;
    }

    .proj-section3 img {
        width: 90%;
    }

    .proj-section4 img {
        width: 70%;
    }

    .section-text_video h4 {
        font-size: 64px;
        width: 80%;
        margin: 10px 0 6vh 0;
    }

    .step-flow h4 {
        font-size: 24px;
        margin: 0 0 20px 0;
    }

    .item-step-flow {
        width: 64%;
    }

    #header-petunia, #header-featu, #header-anfisign {
        background-position: center;
        /* height: 70vh; */
    }

    .text-left-poster h2 {
        font-size: 80px;
    }

}

@media screen and (max-width: 860px) {
    .enjeux_img {
        flex-direction: column !important;
        align-items: center; /* Centrer les éléments en colonne */
    }

    .enjeux_img_contain {
        width: 100%; /* Prend toute la largeur en colonne */
        margin-bottom: 20px; /* Ajouter un espace entre les éléments en colonne si nécessaire */
    }
    .section-home-header {
        margin: 0 20px 80px 20px;
    }

    .section-home-header-mob {
        display: block;
    }

    .home-header-img {
        display: none;
    }

    .home-header-img-mob {
        display: flex;
        justify-content: center;
        margin-top: 40px;
    }

    .home-header-img-mob .home-mob {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 660px;
    }

    /* .home-mob{
        margin-top: 10vh;
    } */
    .section-header {
        margin-top: 20px;
    }

    .sentence1-inner {
        font-size: 14vw;
        /* margin: 0 14px; */
    }

    .topic-subtext {
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
    }

    .block-text {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .block-text h6 {
        font-size: 16px;
    }

    .project-row {
        display: flex;
        flex-direction: column;

    }

    .proj-card1, .proj-card2, .proj-card3 {
        width: 100%;
        height: 70vh;
        margin-bottom: 20px;
    }

}

@media screen and (max-width: 912px) {
    .vid-404{
        width: 100%;
    }
    .text-404 h2 {
        font-size: 60px;
        margin-bottom: 60px;
    }

    .section-404 {
        width: 90%;
    }

    .section-404-content {
        height: 92vh;
    }

    .image-404 {
        /* width: 80%; */
        display: flex;
        justify-content: flex-end;
    }

    .image-404 img {
        width: 60%;
    }

    .section-about .proj-title h3, .proj-title h3 {
        font-size: 80px;
    }

    .blocks-rows {
        width: 100%;
    }
}

@media screen and (max-width: 820px) {
    .bottom-section {
        flex-direction: column;
        width: 100%;
        margin: 40px 0 0 0;
        align-items: flex-start;
    }

    .components-video .scroll-video {
        width: 70%;
    }

    .text-left-poster h2 {
        font-size: 64px;
        width: 100%;
    }

    .section-text_video {
        margin: 10vh 20px;
    }

    .section-text_video h4 {
        font-size: 44px;
        width: 100%;
    }

    .list-steps-flow h4 {
        font-size: 24px;
    }

    /* .section-text_video h4, .text-left-poster h2{
        font-size: 64px;
        width: 100%;
    } */
    .section-text_video .video-header-petunia {
        margin: 0;
        width: 100%;
    }

    /* .content-steps-flow{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    .list-steps-flow{
        width: 100%;
    }
    .step-flow{
        margin-bottom: 30px;
        width: 100%;
    }
    
    .step-flow h4{
        font-family:'ABC Favorit Book';
        color: var(--titles);
        font-size:24px;
        font-weight: 200;
        margin-bottom: 10px;
        width: 100%;
    }
    .step-flow p{
        font-family:'ABC Favorit Book';
        color: var(--subtitles);
        font-size:16px;
        font-weight: 200;
        width: 80%;
    } */
}

/*------------ START RESPONSIVE 768PX ---------------------*/
@media screen and (max-width: 768px) {
    .section-numbers{
        margin: 10vh 20px;
    }
   
    .section-about-proj .credits-text{
        width: 100%;
    }
    .text-numbers {
        width: 85%;
    }
    .date-text .date-divider{
        display: block;
    }
    .container-grid-responsive{
        padding-top: 7vh;
    }
    .sentence2-inner {
        font-size: 9vw;
    }
    .btn-vid{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: end;
    }
    .vid-404{
        width: 100%;
    }
    .back-home{
        margin-bottom: 60px;
    }
    .vid-404 video{
        width: 32.5%;
        /* filter: grayscale(); */
    }
    .image-track-about {
        margin: 20px;
    }

    #image-track, .image-about {
        display: none;
    }

    .image-about-mob {
        display: block;
    }

    .image-about-mob img {
        width: 100%;
    }
    #phones-anfi img{
        width: 85%;
    }
    .block-numbers {
        width: 100%;
    }

    .number-left {
        width: 220px;
    }

    .password-form{
        margin-top: 50%;
        margin-left: 0;
    }

    .content-pass {
        margin-top: 0px;
        margin-left: 0px;
        width: 98%;
        /* height: 20vh; */
    }

    .text-back-content {
        flex-direction: column;
        margin-top: 40px;
    }

    .text-pass {
        margin-top: 40px;
    }

    .error-message {
        font-size: 16px;
    }

    #password {
        font-size: 40px;
        width: 90%;
    }

    button img {
        width: 40px;
    }

    .text-icon {
        width: 90%;
    }

    .step-block {
        margin-top: 80px;
    }

    .item-list {
        align-items: flex-start;
        margin-left: 20px;
    }

    .text-numbers h3 {
        font-size: 6vw;
    }

    #about-me h4 {
        font-size: 32px;
    }

    #about-me {
        width: 88%;
        margin: 12vh 20px 12vh 20px;
    }

    .section-about-vid {
        display: flex;
        flex-direction: column;
    }

    .vid-divider {
        display: none;
    }

    .section-about-vid .about-vid, .section-about-vid .about-vid4 {
        width: 100%;
        /* margin-bottom: 20px; */
    }

    .img2-row .imgs-side-side, .img3-row .junior-img2 {
        width: 100%;
    }

    .proj-section7 {
        padding: 20px 20px 10px 20px;
    }

    #text-video-margin {
        margin-bottom: 4vh;
    }

    .section-text-imgrow {
        margin: 16vh 20px 2vh 20px;
    }

    .video-header-petunia {
        margin: 4vh 0 6vh 0;
    }

    .section-img-text .anfisa-phones {
        width: 100%;
        margin-right: 0;
    }

    .section-video-text {
        margin: 4vh 20px 8vh 20px;
    }

    .section-text-imgrow h3, .section-video-text h3 h3 {
        margin-bottom: 0;
    }

    .section-grid {
        gap: 14px;
        margin: 12vh 20px 0vh 20px;
    }

    .section-about .proj-title h3, .proj-title h3 {
        font-size: 64px;
    }

    .content-col h3, .content-col .second-text {
        font-size: 36px;
    }

    .content-col .second-text {
        margin-top: 20px;
    }

    .item-variety h2 {
        font-size: 54px;
    }

    #variety1, #variety2, #variety3, #variety4 {
        margin-left: 0;
    }

    .item-variety .vid-variety {
        /* width: 160px; */
        height: auto;
        margin-right: 20px;
    }

    .vid-variety .petunia-video-variety {
        width: 100%;
        border-radius: 12px 0 0 0;
    }

    #variety2 .petunia-video-variety {
        border-radius: 0 12px 0 0;
    }

    #variety3 .petunia-video-variety {
        border-radius: 0 0 0 12px;
    }

    #variety4 .petunia-video-variety {
        border-radius: 0 0 12px 0;
    }

    .heading-recognition {
        width: 100%;
    }

    .topic-list, .topic-divider {
        width: 100%;
    }
    #about-title{
        margin-top: 8vh;
    }
    .date-text {
        margin-bottom: 2vh;
    }
    .section-recognition{
        margin:8vh 20px;
    }
    .text-highlights{
        margin-bottom: 0vh;
    }

    .text-wrapper h2 {
        font-size: 100px;
    }

    .logo-cris, .nav-links a, .nav-right a {
        font-size: 18px;
    }

    #contacts-page {
        height: 10vh;
    }

    .section-say-hello a {
        font-size: 8.5vw;
    }
    .section-say-hello{
        margin-bottom: 50vh;
    }

    .proj-item h4 {
        font-size: 54px;
        margin-right: 10px;
    }

    .proj-item p {
        font-size: 20px;
    }

    .pagination-list h6 {
        margin-top: 20px;
        width: 34%;
    }

    .content-pagination {
        width: 100%;
    }

    .text-404 h2 {
        font-size: 60px;
        margin-bottom: 30px;
    }

    .section-404 {
        width: 90%;
    }

    .section-404-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .image-404 {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .image-404 img {
        width: 60%;
        position: absolute;
        top: 80%;
    }

    /* HOME PAGE */
    .sub-head-text {
        margin: 20px 0 0 0;
    }

    .text-left-poster h2 {
        font-size: 50px;
    }

    .section-modern_science h5 {
        font-size: 44px;
    }

    .motion-compile {
        margin: 10vh 0;
    }

    .proj-card1, .proj-card2, .proj-card3 {
        height: 76vh;
    }

    .proj-card1 h5, .proj-card2 h5, .proj-card3 h5 {
        font-size: 20px;
    }

    .line-row .item-row h2 {
        font-size: 40px;
    }

    .line-row .item-row img {
        width: 90px;
        margin-left: 14px;
    }

    .services {
        flex-direction: column;
        height: 100%;
    }

    /* WORK PAGE */
    .proj-image {
        width: 46vw;
    }

    /*ABOUT*/
    .text-img {
        width: 90%;
    }

    .text-img h4 {
        font-size: 28px;
        line-height: 1.3;
    }

    .section-recognition {
        display: flex;
        flex-direction: column;
    }

    .date-text h2 {
        font-size: 30px;
    }
    #about-me h4{
        font-size: 30px;
    }

    .heading-recognition {
        font-size: 54px;
        margin-bottom: 0;
        gap: 60px;
        /* margin-top: 40px; */
    }

    .topic-divider {
        margin: 20px 0;
    }

    .recognition-work-list {
        width: 100%;
    }

    .text-title_paragraph h3, .content-row h3 {
        line-height: 1.2;
    }

    .credits {
        margin-top: 20px;
    }

    .content-row h3 {
        width: 100%;
        font-size: 44px;
        margin-bottom: 20px;
    }

    .text-topic h3 {
        font-size: 20px;
    }

    .topic {
        display: flex;
        flex-direction: column;
    }

    .section-outside-design .text-title_paragraph {
        width: 100%;
    }

    .section-text-block .text-title_paragraph h3 {
        width: 100%;
        font-size: 36px;
    }

    .section-image-text {
        margin: 10vh 20px;
    }

    .video-symptoms-composition .veris-symptoms {
        width: 90%;
    }

    .img-fullscreen2 {
        margin: 4vh 20px 4vh 20px;
    }

    #veris-tabs {
        margin-top: 2vh;
    }

    .row-symptoms {
        width: 100%;
    }

    .section-phones-only .veris-symp-phone {
        width: 31%;
    }

    .section-phones-only {
        gap: 20px;
    }

    .main-footer .left-side {
        width: 100%;
    }

    .main-footer {
        padding: 60px 20px 20px 20px;
    }

    .proj-item {
        margin-bottom: 8px;
    }

    .middle-right {
        gap: 20px;
    }

    .left-side {
        flex-direction: column;
    }

    .top-left {
        width: 100%;
    }

    /*FOOTER*/
    /* .main-footer .top-section{
       flex-direction: column;
   }
   .main-footer .left-side{
       width: 80%;
       margin-bottom: 60px;
   }
   .main-footer .middle-side {
       flex-direction: row;
       width: 90%;
       margin: 0;
   }
   .middle-side .background,.middle-side .social,.middle-side .contact{
       margin-bottom: 40px;
   }
   .right-side{
       display: none;
   }

   .bottom-section {
       flex-direction: column;
       width: 100%;
       margin: 40px 0 0 0;
       align-items: flex-start;
   }
   .foot{
       margin-bottom: 20px;
   } */
    /*PLAYGROUND*/
    .text-content-play h2 {
        font-size: 28px;
        width: 70%;
    }

    .container-playground .proj-image-desk {
        width: 90%;
    }

    .container-playground .proj-image1 {
        width: 70%;
    }


    /*PROJECTS*/
    .symptoms-system {
        flex-direction: column;
        gap: 20px;
    }

    /* .symptoms-system img {
        width: 49%;
    } */

    .text-title_paragraph {
        width: 100%;
    }

    .content-row p {
        width: 100%;
    }

    .context-proj {
        display: none;
    }
    #deliverables{
        display: block;
    }
    
    .blocks-rows {
        width: 80%;
        display: flex;
        flex-direction: column;
        margin-bottom: 8px;
    }
    #credits{
        width: 90%;
    }
    /* .services-proj-mob {
        display: block;
        margin: 20px;
    }

    .services-proj-mob li {
        font-size: 14px;
        color: var(--titles);
        font-family: 'ABC Favorit Book';
    } */

    /* .section-about .proj-title h3, .proj-title h3{
        font-size: 80px;
    } */
    .text-title_paragraph h5 {
        font-size: 18px;
    }

    .section-about-proj h6 {
        margin-top: 0;
    }

    .content-row {
        gap: 20px;
    }

    .content-row .imgs-small {
        width: 100%;
    }

    .section-image-text h3 {
        width: 100%;
        font-size: 44px;
        margin-bottom: 20px;
    }

    .section-monitorization h2 {
        font-size: 54px;
        margin-bottom: 20px;
    }

    .container-monitorization {
        display: none;
    }

    .container-monitorization-mob {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .container-monitorization-mob .video-symptoms-composition {
        width: 55%;
    }

    .cards-monitorization-mob {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 80%;
        margin: 0 60px;
    }

    .cards-monitorization-mob {
        display: flex;
        flex-direction: column;
        width: 30%;
        gap: 20px;
        margin: 0 60px;
    }

    .section-about-proj {
        flex-direction: column-reverse;
        margin: 8vh 20px;
        gap: 40px;
    }
    .context-credits {
        width: 100%;
    }

    .proj-section4 img {
        width: 100%;
    }

    .proj-section3 img {
        width: 100%;
    }

    .proj-section5 img {
        width: 100%;
    }

    .features-img {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .features-img img {
        width: 22.5%;
        margin-left: 0;
    }

    .section-img-text {
        flex-direction: column-reverse;
        margin: 10vh 20px 4vh 20px;
    }

    .section-phones {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin-top: 40px;
        margin-right: 0;
    }

    .section-demo {
        flex-direction: column-reverse;
        margin: 10vh 20px;
        height: auto;
    }

    .section-img-text h3 {
        font-size: 44px;
        line-height: 1.2;
        width: 90%;
        margin-bottom: 40px;
    }

    #fullscreen-mar {
        margin: 2vh 0px 2vh 0px;
    }

    .words-client h5 {
        width: 100%;
    }

    .text-block-testimonial {
        width: 100%;
    }

    .img2-row img, .img2-row .uiuxanfisa, .proj-section6 img {
        width: 100%;
    }

    .img2-row .uiuxanfisa {
        margin-bottom: 4vh;
    }

    .img2-row .junior-img {
        margin-top: 0vh;
    }

    .proj-section6 img {
        margin-top: 2vh;
    }

    /* .img2-row{
        flex-direction: column;
    } */
    #anfisign-row {
        margin: 4vh 20px 2vh 20px;
    }

    .section-demo h3 {
        font-size: 44px;
        width: 90%;
        margin-bottom: 40px;
        line-height: 1.2;
    }

    .section-imgrow {
        margin: 4vh 20px 20px 20px;
    }

    .proj-section8 img {
        margin: 0;
    }

    .content-demo-phone {
        margin-left: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
    }

    .text-app h3 {
        width: 100%;
    }

    .content-demo-phone .phone-demo {
        width: 49%;
    }

    .logotype-img {
        border: none;
    }

    .img-fulltext {
        padding: 20px;
    }

    .img-fulltext h3 {
        font-size: 44px;
    }

    .img-fulltext img {
        width: 100%;
    }

    .toggleContainer button {
        font-size: 20px;
        padding: 10px;
    }

    .content-row {
        flex-direction: column;
    }

    .container-tabs-text h1 {
        font-size: 44px;
        line-height: 1.2;
        width: 90%;
        margin: 0 0 40px 0;
    }

    .container-tabs-text {
        margin-top: 6vh;
        margin-bottom: 8vh;
    }

    .section-text-imgrow h3 {
        font-size: 44px;
        margin-bottom: 40px;
        width: 100%;
    }

    .section-video-text h3 {
        font-size: 44px;
        margin-bottom: 0;
        width: 100%;
    }

    .section-symptoms-system {
        margin: 10vh 20px;
    }

    .section-text-block h6 {
        width: 100%;
    }

    .section-symptoms-system h4 {
        font-size: 44px;
    }

    .tabs-screens-video video {
        width: 100%;
    }

    .section-phones {
        gap: 0;
    }

    .section-phones .veris-symp-phone {
        width: 32%;
    }

    #video-margintop {
        margin: 12vh 20px 0 20px;
    }

    .section-text-block {
        padding: 6vh 20px;
    }

    /* .section-text_video h4{
        font-size: 44px;
        width: 100%;
    } */
    .text-components {
        flex-direction: column;
        justify-content: start;
        align-items: center;
        margin: 6vh 20px;
    }

    .content-text-components {
        width: 100%;
    }

    .content-text-components h3 {
        font-size: 44px;
    }

    .components-video {
        width: 80%;
        margin-top: 4vh;
    }

    .components-video .scroll-video {
        width: 60%;
    }

    .section-modern_science {
        margin: 14vh 20px;
    }

    .item-variety {
        margin-bottom: 0;
    }

    .line-variety {
        margin: 16px 0;
    }

    .list-steps-flow {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
    }

    /* .row-steps{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 40px;
    } */
    .step-flow {
        width: 50%;
        margin-bottom: 20px;
    }

    .section-imgrow {
        margin: 4vh 20px 20px 20px;
        gap: 4vh;
        flex-direction: column;
    }

    #single-poster img {
        margin-bottom: 0;
        width: 100%;
    }

    .section-imgrow-content {
        width: 100%;
    }

    .proj-section-text_image {
        padding: 0vh 20px;
    }

    .img-fullscreen {
        margin: 4vh 0;
    }

    #clementine-poster {
        margin: 4vh 20px;
    }

    .section-phones-only {
        margin: 8vh 20px;
    }

    .section-phones-only .veris-symp-phone {
        width: 30%;
    }
    .section-phones-only img {
        width: 100%;
    }

    .bottom-section {
        margin: 0;
    }

    .img2-row, .img3-row {
        margin: 4vh 20px 2vh 20px;
        flex-direction: column;
        gap: 20px;
    }

    .img3-row .img-side-row {
        width: 100%;
    }
}
@media screen and (max-width:668px) {
    #password{
        width: 85%;
    }
}

@media screen and (max-width: 540px) {
    
    .container-tabs-text h1 {
        font-size: 32px;
        margin-bottom: 20px;
    }
    
    .top-section .left-side h4 {
        font-size: 32px;
    }
    .section-phones-only img {
        width: 90%;
    }
    #device-veris-mob {
        display: block;
    }
    #device-veris-desktop {
        display: none;
    }
    .areas-work{
        margin: 10vh 20px 4vh 20px;
    }
    .text-wrapper{
        display: none;
    }
    #about-title{
        margin-top: 4vh;
    }
    .date-text h2{
        font-size: 28px;
    }
    .section-about-header {
        margin: 0 20px 4vh 20px;
    }
    .date-text{
        margin-bottom: 0;
    }
    .error-message{
        margin-top: 20px;
    }
    .sentence2-inner .tr_letter1{
        margin-right: 4px;
    }
    .info-content{
        flex-direction: column;
    }
    .content-pass{
        width: 100%;
    }
    #phones-anfi{
        margin: 8vh 20px 4vh 20px;
    }
    #phones-anfi img{
        width: 95%;
    }
    
    #video-margintop .franz-isometric {
        width: 100%;
    }

    #petunia-tabs .tabs-screens-video video {
        width: 99%;
    }
    .img-office {
        margin: 0 0 0 0;
    }

    .process-title {
        margin: 12vh 20px 10vh 20px;
    }

    #password {
        width: 85%;
        font-size: 28px;
    }
    .close-dialog img{
        width:20px;
    }

    .name-step .step-title {
        font-size: 18px;
    }

    .caption-about {
        margin: 10px 0 30px 0;
    }

    /* .motion-compile button{
        display: block;
    } */
    #about-me h4 {
        font-size: 28px;
        line-height: 1.3;
    }

    #about-me {
        margin: 8vh 20px;
    }

    .heading-recognition {
        line-height: 1.4;
        gap: 20px;
    }

    .step-flow h3 {
        width: 24%;
    }

    .image-404 img {
        width: 76%;
        top: 25vh;
    }

    .proj-section8 {
        margin-top: 12vh;
    }

    .grid-content {
        flex-direction: column;
    }

    .content-col h3 {
        margin-bottom: 20px;
    }

    .logotype-img {
        border: none;
        margin-bottom: 40px;
    }

    #clementine-poster {
        margin: 20px;
    }

    .content-col h3, .content-col .second-text {
        font-size: 36px;
    }

    .content-col .second-text {
        margin-top: 40px;
    }

    .section-grid {
        flex-direction: column;
        margin: 12vh 20px 2vh 20px;
    }

    .section-text-imgrow {
        margin: 8vh 20px;
    }

    .content-col {
        width: 100%;
    }

    #clementine-img-combined {
        margin-top: 10vh;
    }

    #darkContent video, #lightContent video {
        width: 90%;
    }

    #about-besides_design {
        padding: 6vh 20px;
    }

    .item-variety h2 {
        font-size: 32px;
    }

    #variety1, #variety2, #variety3, #variety4 {
        margin-left: 0;
    }

    .item-variety .vid-variety {
        /* width: 120px; */
        height: auto;
        margin-right: 20px;
    }

    .vid-variety .petunia-video-variety {
        width: 100%;
        border-radius: 8px 0 0 0;
    }

    #variety2 .petunia-video-variety {
        border-radius: 0 8px 0 0;
    }

    #variety3 .petunia-video-variety {
        border-radius: 0 0 0 8px;
    }

    #variety4 .petunia-video-variety {
        border-radius: 0 0 8px 0;
    }

    .section-symptoms-system h4 {
        font-size: 32px;
        line-height: 1.2;
    }

    .text-wrapper h2 {
        font-size: 80px;
    }

    .components-video {
        width: 100%;
    }

    .text-components p {
        margin-bottom: 20px;
    }

    .section-video-text .text-title-left {
        font-size: 32px;
        width: 100%;
    }

    .section-image-text h3 {
        font-size: 32px;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .section-symptoms-system h4 {
        line-height: 1.2;
    }

    .section-phones-only {
        gap: 10px;
    }

    .section-phones-only .veris-symp-phone {
        width: 33%;
    }

    /* .text-credits p:hover {
        color: #60616e;
        transition: all 0.6s ease;
    } */
    .section-monitorization {
        margin: 10vh 20px;
    }

    .row-pagination .proj-item {
        margin-right: 20px;
    }

    .services-text h6 {
        width: 100%;
    }

    /* 404 */
    .section-say-hello a {
        font-size: 8.5vw;
    }

    .image-404 {
        width: 60%;
    }

    .text-404 h2 {
        font-size: 44px;
        margin-bottom: 40px;
    }

    .section-404-content {
        /* flex-direction: column;
        align-items: flex-start; */
        height: 89vh;
    }

    .section-404 {
        width: 90%;
        flex-direction: column;
        /* margin: 0vh 20px 0 20px; */
        margin-top: 0;
    }

    .image-404 {
        width: 120%;
        display: flex;
        justify-content: flex-end;
    }

    /* .image-404 img {
        width: 60%;
    } */
    /* PRE LOAD TEXT */
    .text-preload{
        margin: 8px;
    }
    .text-preload h3 {
        font-size: 32px;
    }

    .text-preload p {
        font-size: 18px;
    }

    /* NAV BAR */
    .top-nav {
        z-index: 9998;
        width: 100%;
        font-size: 1rem;
    }
    .logo-cris {
        display: none;
    }

    .logo-cris-mob {
        display: block;
        font-size: 16px;
        font-family: 'ABC Favorit Book';
        color: var(--background);
    }

    .nav-links a, .nav-right a {
        text-decoration: none;
        font-size: 16px;
        font-weight: 300;
    }

    .link-text, .link-text1, .link-text2, .link-text3 {
        margin-left: 10px;
    }

    /* HOME PAGE  */
    .section-home-header-mob {
        display: block;
    }

    .home-header-img {
        display: none;
    }

    .home-header-img-mob {
        display: block;
        margin-top: 60px;
    }

    .home-header-img-mob .home-mob {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 720px;
    }

    /* .home-mob{
        margin-top: 10vh;
    } */
    .section-header {
        margin-top: 20px;
    }

    /* .title-inner {
        margin-top: 0;
        margin-bottom: 80%;
        left: 14px;
    } */
    .sentence1-inner {
        font-size: 12.75vw;
        margin-top: 10px;
        font-weight: 200;
    }

    .topic-subtext {
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
        gap: 0;
    }

    .block-text {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .block-text h6 {
        font-size: 16px;
    }

    .sub-head-text {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .small-reel {
        width: 100%;
    }
    .showreel-video {
        width: 100%;
    }
    .section-numbers {
        flex-direction: column;
        margin: 12vh 20px 6vh 20px;
    }
    .text-numbers {
        width: 100%;
        margin-right: 0;
        margin-bottom: 40px;
    }

    .text-numbers h3 {
        /* font-size: 6vw; */
        /* margin-bottom: 40px; */
        font-size: 36px;
        line-height: 1.2;
    }

    /* .number-left, .number-right {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
    } */
    .block-numbers {
        flex-direction: column;
        width: 100%;
        margin-top: 40px;
    }

    .block-numbers h6 {
        font-size: 18px;
        margin-right: 20px;
    }

    .block-numbers h2 {
        font-size: 160px;
    }

    #num-right {
        margin-right: 0px;
    }

    .number-left {
        /* margin-right: 40px; */
        /*margin-bottom: 60px;*/
    }

    .number-right {
        margin-left: 0;
    }

    .title-link {
        font-size: 24px;
        margin-bottom: 32px;
    }

    .title-link h3 {
        font-size: 36px;
        margin-bottom: 0vh;
    }

    .project-row {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .proj-card1, .proj-card2, .proj-card3 {
        width: 100%;
        height: 60vh;
        margin-bottom: 20px;
    }

    .line-row {
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
    }

    .item-row {
        display: flex;
        flex-direction: column;
        margin-right: 0;
    }

    .line-row .item-row h2 {
        font-size: 40px;
    }

    .line-row .item-row {
        margin-right: 0;
        margin-bottom: 40px;
    }

    .line-row .item-row img {
        width: 100%;
        margin-left: 0px;
    }

    .item-row .area-desk {
        display: none;
    }

    .item-row .area-mob {
        display: block;
    }

    .process-title h2 {
        font-size: 54px;
    }

    .title-link a {
        font-size: 16px;
    }

    .section-process-list {
        margin: 4vh 0 14vh 0;
    }

    /* .text-icon {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
        margin: 0;
    } */
    .text-step {
        width: 100%;
        margin-right: 10px;
        margin-top: 10px;
    }

    .item-list {
        margin:20px;
        width: 90%;
    }

    .item-list h5 {
        font-size: 18px;
        line-height: 1.4;
    }

    .item-list .step-title {
        font-size: 18px;
        margin-top: 0;
    }

    /* .section-line{
        margin: 20px;
    }
    .animation-video img, .animation-video video {
        width: 100px;
    }
    #rocket {
        width: 100px;
    } */
    .section-line {
        margin: 10px 20px;
    }
    .services-text {
        width: 100%;
        margin-right: 0;
    }
    .services h4 {
        font-size: 36px;
        margin-bottom: 20px;
    }

    .services-list h4 {
        font-size: 28px;
        margin-bottom: 0;
    }

    .service-item-title h4:hover {
        display: none;
    }

    .img-office {
        /* margin: 20px; */
        height: 100%;
    }

    .title-areas h6 {
        margin-left: 0;
        margin-bottom: 32px;
    }

    /* WORK PAGE */
    .row-grid {
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
    }

    .proj-image {
        width: 100%;
        margin-bottom: 20px;
    }

    /*FOOTER*/
    .main-footer .top-section {
        flex-direction: column;
    }

    .main-footer .left-side {
        width: 100%;
        margin-bottom: 60px;
    }

    .main-footer .middle-side {
        flex-direction: column;
        width: 100%;
        margin: 0;
    }

    .middle-side .contact {
        margin-bottom: 60px;
    }

    /* .middle-side .background,.middle-side .social,.middle-side .contact{
        margin-bottom: 40px;
    } */
    .right-side {
        display: none;
    }

    .bottom-section {
        flex-direction: column;
        width: 100%;
        margin: 40px 0 0 0;
    }

    .foot {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 20px;
    }

    .foot .grey-text {
        margin-top: 10px;
    }

    /* ABOUT PAGE  */
    .sentence2-inner {
        font-size: 12vw;
        margin-bottom: 0px;
    }

    .block-sentence {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .block-sentence .icon-arrow {
        width: 80px;
        margin-left: 0;
    }

    .world-icon .process-animation {
        width: 90px;
    }

    .text-img {
        width: 100%;
        margin-top: 4vh;
    }

    .text-img h4 {
        font-size: 22px;
    }

    /* ABOUT */
    /* .image-track-about {
        margin: 20px 0;
    }

    #image-track, .image-about {
        display: none;
    }

    .image-about-mob {
        display: block;
    }

    .image-about-mob img {
        width: 100%;
    } */

    .section-recognition {
        display: flex;
        flex-direction: column;
        margin: 4vh 20px;
    }
    .section-about-vid .about-vid, .section-about-vid .hover-vid, .section-about-vid .hover-vid2, .section-about-vid .about-vid2, .section-about-vid .about-vid3, .section-about-vid .about-vid4, .section-about-vid .hover-vid3, .section-about-vid .hover-vid4, .section-about-vid .hover-vid5 {
        opacity: 1;
    }
    .section-outside-design{
        margin: 6vh 20px;
    }
    .heading-recognition {
        font-size: 40px;
    }

    .date-list {
        margin: 4vh 0 0 0;
    }
    
    .recognition-work-list {
        width: 100%;
        margin-bottom: 20px;
    }

    #about-besides_design .text-title_paragraph h3 {
        font-size: 18px;
        line-height: 1.5;
    }

    .text-topic h3 {
        font-size: 18px;
        margin-bottom: 4px;
    }

    .topic {
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
    }

    .info-topic h4, .sub-text-topic h4 {
        font-size: 14px;
    }

    .topic-divider {
        margin: 16px 0;
    }

    #about-besides_design h6 {
        margin-bottom: 20px;
        width: 100%;
    }

    /* .section-about-vid {
        display: flex;
        flex-direction: column;
    }
    .section-about-vid .about-vid {
        width: 100%;
        margin-bottom: 20px;
    } */
    #vid-hide {
        display: none;
    }

    /* PLAYGROUND PAGE  */
    .container-playground {
        margin: 20px;
        top: 20%;
    }

    .text-content-play h2 {
        font-size: 24px;
        margin-top: 20%;
        /* line-height: 1.2; */
    }

    .container-playground .proj-image, .container-playground .proj-image1, .container-playground .proj-image-mob {
        width: 100%;
    }

    .proj-image-desk {
        display: none;
    }

    .proj-image-mob {
        display: block;
    }

    /* contacts  */
    .section-say-hello {
        margin-bottom: 55vh;
    }

    #app-cover{
        width: 330px;
    }

    #header-anfisign {
        background-image: url(imgs/anfisign/anfisign-header-mob.webp);
    }

    #header-petunia {
        background-image: url(imgs/petunia/petunia-header-mob.webp);
    }

    #header-clementine {
        background-image: url(imgs/clementine/clementine-header-mob.jpeg);
    }

    #header-featu {
        background-image: url(imgs/featu/featu-header-mob.webp);
    }

    #contacts-page {
        height: auto;
    }

    /* FEATU PAGE  */
    .blocks-rows {
        width: 100%;
        flex-direction: column;
    }

    .credits-block {
        margin-bottom: 20px;
    }

    /* #header-featu{
        background-image: url(imgs/featu/featu-header-mob.jpg);
    } */
    .text-wrapper h2 {
        font-size: 70px;
    }

    .context-proj {
        display: none;
    }

    /* .services-proj-mob{
        display: block;
        margin:20px;
    }
    .services-proj-mob li {
        font-size: 14px;
        color: var(--titles);
        font-family:'ABC Favorit Book';
    } */
    .section-about-proj h6 {
        margin-bottom: 20px;
        font-size: 16px;
    }

    .section-about .proj-title h3, .proj-title h3 {
        font-size: 44px;
    }

    .context-credits {
        width: 100%;
    }

    .text-credits p {
        font-size: 16px;
    }

    .text-credits {
        margin-bottom: 10px;
    }

    .text-content-proj p {
        font-size: 18px;
    }

    .img-fullscreen2 {
        margin: 2vh 20px 0 20px;
        display: flex;
        justify-content: center;
    }

    .img-fullscreen2 img {
        width: 100%;
    }

    .text-wrapper h2 {
        padding: 0 1.6rem;
    }

    /* .section-img-text {
        flex-direction: column-reverse;
    }
    .section-phones{
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin-top: 40px;
    } */
    .section-phones img {
        width: 31.5%;
        margin-right: 0;
    }

    .section-img-text {
        margin: 40px 20px 20px 20px;
    }

    .section-img-text h3 {
        font-size: 32px;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .section-text-imgrow h3, .section-video-text h3, .content-row h3 {
        font-size: 36px;
        line-height: 1.2;
    }

    .proj-section7 {
        flex-direction: column;
        padding-bottom: 0px;
    }

    .proj-section7 img {
        width: 100%;
        margin-bottom: 0;
    }

    .proj-section7 {
        gap: 20px;
    }

    #logo-featu {
        margin: 0 0 40px 0;
    }

    .text-title_paragraph {
        width: 100%;
    }

    .text-title_paragraph h3 {
        font-size: 32px;
        line-height: 1.2;
    }

    .text-title_paragraph h5 {
        font-size: 16px;
        font-weight: 100;
        margin-top: 20px;
    }

    .section-text-block .text-title_paragraph h3 {
        font-size: 32px;
    }

    .section-text-block h6 {
        width: 100%;
        margin-bottom: 10px;
    }

    .section-demo h3 {
        font-size: 32px;
        line-height: 1.3;
        width: 100%;
        margin-bottom: 40px;
    }

    .text-app h3 {
        font-size: 32px;
        width: 100%;
    }

    .proj-section8 img {
        margin-bottom: 2vh;
    }

    .proj-section4 img {
        width: 100%;
    }

    .logotype-img {
        height: auto;
    }

    .logotype-img img {
        width: 100%;
        margin: 20px;
    }

    .logotype-img {
        margin: 20px 0;
    }

    .proj-section4 {
        padding: 20px;
    }

    .section4-content {
        align-items: flex-start;
    }

    .section-imgrow {
        flex-direction: column;
        margin: 0 20px;
        gap: 20px;
    }

    .section-imgrow-content {
        width: 100%;
        margin-bottom: 0;
    }

    #imgrow-right {
        margin-top: 0px;
    }

    #featu-section4 {
        padding: 20px 20px 0 20px;
    }

    /* PETUNIA */
    .list-steps-flow {
        flex-direction: column;
        gap: 14px;
        width: 100%;
    }

    .step-flow {
        width: 100%;
        margin-bottom: 0;
        justify-content: space-between;
    }

    .item-step-flow {
        width: 60%;
    }

    .list-steps-flow h4 {
        margin: 10px 0 4px 0;
    }

    .row-steps {
        flex-direction: column;
        gap: 20px;
    }

    .features-img {
        gap: 0;
    }

    .content-list-variety {
        margin: 2vh 0 6vh 0;
    }

    .img3-row {
        flex-direction: column;
        gap: 20px;
        margin: 4vh 20px 0vh 20px;
    }

    .img3-row .img-side-row {
        width: 100%;
        margin-bottom: 0;
    }

    .video-header-petunia {
        margin: 2vh 0 0 0;
    }

    .proj-section3 {
        margin: 2vh 20px;
    }

    .logotype-img {
        margin: 20px 0;
    }

    .proj-section5 img {
        width: 100%;
    }

    #single-poster img {
        width: 100%;
    }

    .proj-section-text_image {
        flex-direction: column;
        width: 100%;
        padding: 20px;
    }

    .proj-section5 {
        padding: 0 20px;
    }

    #desktop-text {
        display: none;
    }

    #mob-text {
        display: block;
    }
    .proj-section-text_image .petunia{
        width: 100%;
    }

    .proj-section-text_image img {
        width: 100%;
    }

    .features-img img {
        width: 32%;
        /* margin-left: 10px; */
    }

    .features-img .hide-feature {
        display: none;
    }

    .proj-section3 img {
        width: 100%;
    }

    .text-left-poster {
        width: 100%;
        margin-bottom: 20px;
    }

    .text-left-poster h2 {
        font-size: 32px;
    }

    .section-modern_science {
        margin: 10vh 20px;
    }

    .section-modern_science h5 {
        font-size: 32px;
    }

    .section-img-text .anfisa-phones {
        width: 100%;
        margin-right: 0;
    }

    .words-client {
        padding: 60px 20px;
        flex-direction: column;
    }

    .text-block-testimonial {
        width: 100%;
    }

    .text-block-testimonial h4 {
        font-size: 24px;
    }

    .words-client h5 {
        width: 100%;
        margin-bottom: 20px;
    }

    .client-block p {
        font-size: 16px;
    }

    .client-block img {
        width: 50px;
        height: 50px;
    }

    .content-text-components h3 {
        width: 90%;
    }

    #anfisign-row2 {
        flex-direction: column;
        margin: 0 20px;
        gap: 20px;
    }

    .img2-row {
        flex-direction: column;
        margin: 2vh 20px 2vh 20px;
        gap: 20px;
    }

    .img2-row .uiuxanfisa {
        margin-bottom: 0;
    }

    .img2-row .junior-img {
        margin-top: 0;
    }

    .img2-row img, .img2-row .uiuxanfisa, .img2-row .imgs-side-side {
        width: 100%;
    }

    .section6-content {
        margin-top: 20px;
    }

    .proj-section6 img {
        padding: 0;
        margin-top: 0;
        width: 100%;
    }

    .img3-row .junior-img2 {
        width: 100%;
    }

    #section-margin-bottom {
        padding-bottom: 2vh;
    }

    /* FRANZ */
    #header-franz {
        background-image: url(imgs/franz/franz-header-mob2.webp);
        background-size: cover;
        background-position: center;
        height: 100vh;
    }

    /* VERIS */
    .row-symptoms {
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

    .section-monitorization h2 {
        font-size: 44px;
    }

    .section-symptoms-system {
        margin: 8vh 20px;
    }

    .symptoms-system img {
        width: 100%;
    }

    .symptoms-system {
        flex-direction: column;
    }

    .img-fulltext h3 {
        font-size: 32px;
    }

    .container-monitorization-mob {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .cards-monitorization-mob {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin: 10px 20px;
    }

    .cards-monitorization-mob img {
        width: 30%;
    }

    /* PAGINATION */
    .pagination-list {
        display: flex;
        flex-direction: column;
        margin: 10vh 20px;
    }

    .proj-item {
        margin-bottom: 10px;
    }

    .pagination-list h6 {
        margin-top: 14px;
        width: 100%;
    }

    .proj-item h4 {
        font-size: 44px;
        margin-right: 10px;
    }

    .proj-item p {
        font-size: 16px;
    }

    .proj-item {
        margin-right: 0;
    }

    .section-home-header {
        margin: 0 20px 10vh 20px;
    }

    .services-text h6, .service-item-content h6 {
        font-size: 16px;
    }

    .main-footer {
        margin-top: -20px;
        padding: 8vh 20px 20px 20px;
    }

    .services {
        margin: 6vh 20px 10vh 20px;
    }

    .divider-petunia {
        display: block;
        height: 1px;
        width: 100%;
        background-color: var(--subtitles);
    }
    .transition_top {
        background: #9850ff;
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        transform: translateY(100%);
        z-index: 9999;
    }
    
    
    .images-loader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: auto;
        position: fixed;
        width: 90vw;
        top: 50%;
        left: 48%;
        transform: translate(-50%, -50%);
        z-index: 10001;
    }
    
    .images-loader img {
        width: 100%;
        max-width: 10vw;
        height: auto;
        transform-origin: left;
        transform: translateX(-4%);
        margin: 0 -48px 0 auto;
        visibility: hidden;
    }
    .loader-hide{
        display: none;
    }
    .password-form{
        margin-top: 30%;
    }
    .submit-btn img{
        width: 40px;
    }
    /* button img {
        width: 40px;
    } */
    /* #password{
        width: 70%;
    } */
}

@media screen and (max-width: 414px) {
    .proj-card1, .proj-card2, .proj-card3 {
        height: 58vh;
    }
    .proj-card1 .top-text, .proj-card2 .top-text, .proj-card3 .top-text{
        opacity: 0;
    }
    .proj-card1 h5, .proj-card2 h5, .proj-card3 h5{
        font-size: 20px;
    }
    .content-ontop{
        padding:20px 20px 16px 20px
    }
    .submit-btn img{
        width: 28px;
    }

    .image-404 img {
        top: 45vh;
    }

    .home-header-img-mob .home-mob {
        height: 560px;
    }

    .item-step-flow {
        width: 80%;
    }
    /* #password {
        width: 85%;
    } */
    .password-form h1 {
        font-size: 20px;
    }
    button img {
        width: 44px;
    }
    .section-404-content {
        height: 88vh;
    }
    /* .motion-compile{
        width: 90vw;
    } */
    .small-reel {
        width: 100%;
    }
    .link-text, .link-text1, .link-text2, .link-text3 {
        margin-left: 5px;
    }
    .top-nav{
        font-size: 0.7rem;
        padding: 10px;
    }
}

@media screen and (max-width: 392px) {
    .container-playground {
        top: 16%;
    }
    .section-process-list {
        margin: 4vh 0 8vh 0;
    }

    #about-me h4 {
        font-size: 24px;
        line-height: 1.3;
    }

    #about-me {
        margin: 8vh 20px 16vh 20px;
        width: 86%;
    }

    /* .small-reel {
        width: 100%;
    } */

    /* .step-flow {
        margin-bottom: 12px;
    } */
    .pagination-list h6 {
        margin-bottom: 24px;
    }

    #darkContent video, #lightContent video {
        width: 92%;
    }

    #text_image_bigger {
        font-size: 32px;
    }

    .section-text_video h4 {
        font-size: 32px;
        margin: 10px 0 4vh 0;
    }

    .list-steps-flow h4 {
        font-size: 20px;
        margin: 10px 0 10px 0;
    }

    .vid-variety .petunia-video-variety {
        border-radius: 10px 0 0 0;
    }

    #variety2 .petunia-video-variety {
        border-radius: 0 10px 0 0;
    }

    #variety3 .petunia-video-variety {
        border-radius: 0 0 0 10px;
    }

    #variety4 .petunia-video-variety {
        border-radius: 0 0 10px 0;
    }

    .text-components p {
        font-size: 18px;
    }

    .text-components h3 {
        margin-bottom: 20px;
    }

    .content-text-components h3 {
        font-size: 32px;
        line-height: 1.2;
    }

    .video-symptoms-composition .veris-symptoms {
        width: 100%;
    }

    .section-text-imgrow h3, .section-video-text h3, .content-row h3 {
        font-size: 32px;
    }

    .content-row p {
        font-size: 16px;
    }

    .section-image-text {
        margin: 9vh 20px 10vh 20px;
    }

    .section-image-text h3 {
        font-size: 24px;
    }

    .container-monitorization-mob .video-symptoms-composition {
        width: 65%;
    }

    .section-monitorization h2 {
        font-size: 32px;
    }

    .section-grid-veris {
        margin: 9vh 20px 8vh 20px;
    }

    .img2-row {
        margin-bottom: 0;
    }

    /* #device-veris-desktop {
        display: none;
    } */

    /* #device-veris-mob {
        display: block;
    } */

    .proj-item h4 {
        font-size: 36px;
    }

    #fullscreen-mar2 {
        margin: 2vh 0px 4vh 0px;
    }

    .text-left-poster h2 {
        font-size: 36px;
        margin: 4vh 0;
        line-height: 1.2;
    }

    .text-left-poster {
        margin-bottom: 0;
    }

    .link-text, .link-text1, .link-text2, .link-text3 {
        margin-left: 5px;
    }
    .top-nav{
        font-size: 0.5rem;
        padding: 5px;
    }
    .item-variety h2 {
        font-size: 28px;
    }

    .item-variety .vid-variety {
        /* width: 110px; */
        height: auto;
        margin-right: 16px;
    }

    /* .vid-variety .petunia-video-variety{
        width: 100%;
        border-radius: 4px 0 0 0;
    }
    #variety2 .petunia-video-variety{
        border-radius: 0 4px  0 0;
    }
    #variety3 .petunia-video-variety{
        border-radius: 0 0 0 4px;
    }
    #variety4 .petunia-video-variety{
        border-radius: 0 0 4px 0;
    } */
    .line-variety {
        margin: 14px 0;
    }

    .text-numbers {
        margin-bottom: 0;
    }

    .block-numbers {
        /* gap: 100px; */
        flex-direction: column;
        margin-bottom: 0;
    }

    /* .number-left, .number-right{
        justify-content: space-between;
        flex-direction: row-reverse;
    } */
    .text-content-play h2 {
        font-size: 18px;
        width: 70%;
        line-height: 1.2;
    }

    .world-icon .process-animation {
        width: 70px;
    }

    .proj-card1, .proj-card2, .proj-card3 {

        height: 58vh;
    }

    .process-title h2 {
        font-size: 44px;
    }

    .process-title {
        justify-content: flex-start;
        margin: 10vh 20px 4vh 20px;
    }

    .text-numbers h3, .title-link h3 {
        font-size: 28px;
    }

    .block-numbers h2 {
        font-size: 120px;
    }

    .section-numbers {
        margin: 10vh 20px 2vh 20px;
    }
    .step-block{
        margin-top: 60px;
    }

    .top-section .left-side h4 {
        font-size: 24px;
    }

    .line-row .item-row h2 {
        font-size: 24px;
    }

    .line-row .item-row {
        margin-right: 0;
        margin-bottom: 40px;
    }

    .content-col h3, .content-col .second-text {
        font-size: 32px;
    }

    .section-phones {
        margin-top: 10px;
    }

    .section-demo h3 {
        margin-bottom: 20px;
        font-size: 24px;
    }

    .proj-section8 img {
        margin-top: 20px;
    }

    #fullscreen-mar {
        margin: 2vh 0px 1vh 0px;
    }

    .image-404 {
        width: 110%;
    }

    .image-404 img {
        width: 82%;
        position: relative;
        top: 40px;
    }

    .text-404 h2 {
        font-size: 44px;
    }
    .sentence2-inner .tr_letter1{
        margin-right: 0px;
    }

}


@media screen and (max-width: 375px) {
    #password {
        font-size: 24px;
    }
    .password-form{
        margin-top: 30%;
    }
    .proj-card1, .proj-card2, .proj-card3 {
        height: 58vh;
    }
     .section-404-content {
        height: 85vh;
    }


    /* .home-header-img-mob{
        display: block;
    } */
    .home-header-img-mob .home-mob {
        object-fit: cover;
        /* width: 340px; */
        /* height: 600px; */
    }

    .image-404 {
        /* width: 90%; */
        width: 100%;
    }

    .image-404 img {
        width: 64%;
    }

    .sentence2-inner {
        font-size: 11.5vw;
        margin-bottom: 0px;
    }
}


/*PRELOADER*/

.transition_top {
    background: #9850ff;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    transform: translateY(100%);
    z-index: 9999;
}


.images-loader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: auto;
    position: fixed;
    width: 80vw;
    top: 50%;
    left: 48%;
    transform: translate(-50%, -50%);
    z-index: 10001;
}

.images-loader img {
    width: 100%;
    max-width: 10vw;
    height: auto;
    transform-origin: left;
    transform: translateX(-4%);
    margin: 0 -48px 0 auto;
    visibility: hidden;
}

.tr_letters, .tr_words, .tr_letter1, .tr_letter2, .tr_letter3 {
    position: relative;
    overflow: hidden;
}

.tr_letters span, .tr_words span, .tr_letter1 span, .tr_letter2 span, .tr_letter3 span {
    display: inline-block;
    transform: translateY(100%);
    overflow: visible;
    position: relative;
    visibility: hidden;
}

.container-tr {
    display: flex;
    flex-wrap: wrap;
    width: 84vw;
}

/* 
.tr_image {
    scale: 1.3;
} */

.tr_images {
    transform: scale(0.95);
    transition: all ease;
    width: 100%;
}
.tr_images:hover {
    transform: scale(1);
    transition: all 0.1s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
}
@keyframes Y_axis_100_0 {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
        visibility: visible;
    }
}

@keyframes opacity {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes unZoom {
    from {
        transform: none;
    }
    to {
        transform: scale(1);
        transition: all ease;
    }
}


/* WORK COLORS EACH PROJECTS */

/* .petuniacolor {
    background: #6E00FA;
}

.franz-color {
    background: #003FFF;
}

.clementine-color {
    background: #FF6011;
}

.featu-color {
    background: #4354F1;
}

.anfisign-color {
    background: #FA8152;
}
.veriscolor{
    background: #6C70F4;
} */

.petuniacolor {
    background: #170033;
}
.franz-color {
    background: #000f37;
}

.clementine-color {
    background: #3a1600;
}

.featu-color {
    background: #040a42;
}

.anfisign-color {
    background: #802b00;
}

.veriscolor{
    background: #110040;
}


/*LENIS SCROLL*/
html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}
;
}