*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;

    font-family: "Raleway", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Cinzel';
    src: url("../fonts/Cinzel/Cinzel-VariableFont_wght.ttf");
}
@font-face {
    font-family: 'Raleway';
    src: url("../fonts/Raleway/Raleway-VariableFont_wght.ttf");
}
@font-face {
    font-family: 'Great Vibes';
    src: url("../fonts/Great_Vibes/GreatVibes-Regular.ttf");
}
@font-face {
    font-family: 'Permanent Marker';
    src: url("../fonts/Permanent_Marker/PermanentMarker-Regular.ttf");
}
@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto/Roboto-VariableFont_wdth\,wght.ttf");
}
@font-face {
    font-family: 'Bulbasaur';
    src: url("../fonts/Bulbasaur/BulbasaurSP.otf");
}

:root{
    --index: calc(1vw + 1vh);

    --primary-color: white;
    --secondary-color: black;
    --col-dec: yellow;

    --cap-h: 10vh;
    --cap-m-w: 20vw;

    --shadow-2: 0px 10px 18px 0px rgba(0,0,0,0.3);
    --shadow-1: 0px 0px 20px 0px rgba(0,0,0,0.75);

    --off: 5vw;
    --com-gap: calc(var(--index)*2);

    --menu-w: 120vw;

    --b-r: 40px;

    --transition-cb: .5s cubic-bezier(.05, .5, 0, 1);
    --transition-cb-bs: 1s cubic-bezier(.05, .5, 0, 1);
    --transition-cb-btn: .2s cubic-bezier(0,.06,.66,2.5);
}

/* 
.cinzel-<uniquifier> {
    font-family: "Cinzel", serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}

.raleway-<uniquifier> {
    font-family: "Raleway", serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}

.roboto-<uniquifier> {
    font-family: "Roboto", serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    font-variation-settings:
    "wdth" 100;
}
  
.permanent-marker-regular {
    font-family: "Permanent Marker", serif;
    font-weight: 400;
    font-style: normal;
}
  
.great-vibes-regular {
    font-family: "Great Vibes", serif;
    font-weight: 400;
    font-style: normal;
} 
*/

/*  GENERAL */

#page_loader{
    display: flex;
    position: fixed;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    z-index: 55555555;
    background: var(--primary-color);

    top: 0;

    box-shadow: 0px 0px 42px 18px rgba(150,150,150,1);

    text-transform: uppercase;
    font-size: 10em;
}

body{
    height: 1160vh;

    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-x: hidden;

    background: var(--primary-color);
}

#body_slider{
    position: fixed;
    display: flex;
    flex-direction: column;
    transition: var(--transition-cb-bs);
    z-index: 555;
}

.button{
    position: relative;
    border: 3px solid var(--secondary-color);
    border-radius: 20px;
    width: fit-content;
    height: fit-content;
    padding: 20px 100px;
    text-decoration: none;
    color: var(--secondary-color);
    text-transform: uppercase;
    cursor: pointer;

    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;

    transition: var(--transition-cb-btn);
}

.bb{
    background: var(--secondary-color);
    color: var(--primary-color);
    border: 3px solid var(--secondary-color);
}

.wb{
    background: var(--primary-color);
    color: var(--secondary-color);
    border: 3px solid var(--primary-color);
}

.button::after{
    display: flex;
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    left: 0;
    top: 0;
    background: var(--secondary-color);
    transition: var(--transition-cb);
    z-index: -1;
}
.button:hover{
    color: var(--primary-color);
}
.button:hover::after{
    width: 100%;
}
body:has(.button:hover) #mouse_follower{
    display: none;
}

#mouse_follower{
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
    width: calc(var(--index)/3);
    background: var(--primary-color);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transition: var(--transition-cb);
    background: var(--secondary-color);

    mix-blend-mode: difference;
    background: white;
}

.mf_hid_text{
    pointer-events: none;
    position: absolute;
    opacity: 0;
}

a{
    cursor: pointer;
}

.movingMedia{
    position: relative;
}

::selection {
    background: lightgray;
}

#loading_page{
    width: 100vw;
    height: 100vh;
    background: var(--primary-color);
    z-index: 989797979;
    display: flex;
    transition: .2s;
    pointer-events: none;
}

body[data-docs-loaded="true"] #loading_page{
    opacity: 0;
}

/* SCROLLBAR */

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

::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
}

.page{
    position: relative;
    width: 100vw;
    height: 110vh;
}

/* ANIMATIONS */

@keyframes a1 {
    0%{
        transform: translateX(-50px);
        opacity: 0;
    }
    100%{
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes a2 {
    0%{
        transform: translateX(50px);
        opacity: 0;
    }
    100%{
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes a2r {
    0%{
        transform: translateX(0px);
        opacity: 1;
    }
    100%{
        transform: translateX(50px);
        opacity: 0;
    }
}

@keyframes a3 {
    0%{
        transform: translateY(-50px);
        opacity: 0;
    }
    100%{
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes a4 {
    0%{
        transform: translateY(50px);
        opacity: 0;
    }
    100%{
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes a5 {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}


@keyframes a6 {
    0%{
        width: 0%;
        opacity: 0;
    }
    100%{
        width: 100%;
        opacity: 1;
    }
}

@keyframes at1 {
    0%{
        transform: translateX(-1em);
        opacity: 0;
    }
    100%{
        transform: translateX(0em);
        opacity: 1;
    }
}

@keyframes aht {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes aLoaded {
    0%{
        transform: translateY(0);
        opacity: 1;
        z-index: 55555555;
    }
    100%{
        /* transform: translateY(-120vh); */
        opacity: 0;
        z-index: -20;
    }
}
@keyframes aNotLoaded {
    0%{
        transform: translateY(-120vh);
        z-index: -20;
    }
    100%{
        transform: translateY(0vh);
        z-index: 55555555;
    }
}



@keyframes afi {
    0%{
        transform: translateY(20px);
        opacity: 0;
        filter: blur(10px);
    }
    100%{
        transform: translateY(0px);
        opacity: 1;
        filter: blur(0px);
    }
}

.a1,.a2,.a3,.a4,.aht{
    animation-delay: 1s;
}

.a1{
    animation: a1 var(--transition-cb-bs) both;
}
.a2{
    animation: a2 var(--transition-cb-bs) both;
}
.a2r{
    animation: a2r var(--transition-cb-bs) both;
}
.a3{
    animation: a3 var(--transition-cb-bs) both;
}
.a4{
    animation: a4 var(--transition-cb-bs) both;
}
.a5{
    animation: a5 0.5s ease-in both;
}
.a6{
    animation: a6 1s cubic-bezier(.05, .5, 0, 1) both;
}
.at1{
    animation: at1 0.5s ease-out both;
}
.aht{
    animation: aht var(--transition-cb-bs) both;
}
.aLoaded{
    animation: aLoaded 0.25s ease-out both;
}
.aNotLoaded{
    animation: aNotLoaded 0.25s ease-out both;
}
.afi{
    animation: afi 0.5s ease-out both;
}



.ad01{
    animation-delay: 0.1s;
}
.ad02{
    animation-delay: 0.2s;
}
.ad03{
    animation-delay: 0.3s;
}
.ad04{
    animation-delay: 0.4s;
}
.ad05{
    animation-delay: 0.5s;
}
.ad06{
    animation-delay: 0.6s;
}
.ad07{
    animation-delay: 0.7s;
}
.ad08{
    animation-delay: 0.8s;
}
.ad09{
    animation-delay: 0.9s;
}
.ad025{
    animation-delay: 0.25s;
}
.ad1{
    animation-delay: 1s;
}
.ad15{
    animation-delay: 1.5s;
}
.ad2{
    animation-delay: 2s;
}
.ad25{
    animation-delay: 2.5s;
}
.ad3{
    animation-delay: 3s;
}
.ad35{
    animation-delay: 3.5s;
}
.ad4{
    animation-delay: 4s;
}
.ad45{
    animation-delay: 4.5s;
}

.atl{
    opacity: 0;
}

.arrow{
    width: 100%;
    background: var(--secondary-color);
    height: 5px;
    position: relative;
}
.arrow::after, .arrow::before{
    content: '';
    display: flex;
    position: absolute;
    right: -5px;
    width: 20px;
    height: 5px;
    background: var(--secondary-color);
    rotate: 45deg;
    top: -5px;
}
.arrow::after{
    rotate: 45deg;
    top: -5.5px;
}
.arrow::before{
    rotate: -45deg;
    top: 5.5px;
}

.arrow-w{
    background: var(--primary-color);
}
.arrow-w::after, .arrow-w::before{
    background: var(--primary-color);
}

/* CAPTION */

#caption{
    display: flex;
    position: fixed;
    width: var(--cap-m-w);
    top: 0;
    right: 0;
    gap: 20px;
    align-items: center;
    height: calc(var(--cap-h));
    justify-content: end;


    padding-right: var(--off);
    z-index: 5556;

    transition: var(--transition-cb-bs);
}

#caption > *{
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}

#lang_switch{
    position: relative;
    background: black;
    height: fit-content;
    width: 3em;
    height: 3em;
    padding: 4px 4px;
    border-radius: 40px;
    gap: 5px;
    color: black;

    border: 3px solid black ;
    transition: var(--transition-cb);
}

.lang_btn_en{
    left: 4px;
}
.lang_btn_ru{
    right: 4px;
}

.lang_btn{
    opacity: 0;
    position: absolute;
    font-weight: 600;
    color: white;
    padding: 10px;
}

.lang_btn[data-lang-btn="on"]{
    opacity: 1 !important;
    display: flex !important;
    background: white;
    color: black;
    border-radius: 100%;
    left: auto;
    right: auto;
}


#lang_switch:hover{
    width: 6em;
    border: 3px solid white ;
}
#lang_switch:hover .lang_btn{
    opacity: 1;
}
#lang_switch:hover .lang_btn_en{
    left: 4px !important;
}
#lang_switch:hover .lang_btn_ru{
    right: 4px !important;
}

#lang_switch_resp{
    width: 3em;
    height: 3em;
    position: relative;
    background: none;
    color: black;
    border-radius: 100%;

    display: none;
}

#lang_switch_resp .lang_btn{
    background: none;
    color: white;
}

#comp_name{
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    color: var(--primary-color);
}

.comp_name_cap{
    position: fixed;
    top: 0;
    left: 0;
    font-size: 1.3em;
    color: var(--secondary-color);
    z-index: 5556;
    width: var(--cap-m-w);
    display: flex;
    padding-left: var(--off);
    height: var(--cap-h);
    align-items: center;
    text-transform: uppercase;
    font-weight: 800;
}
.comp_name_cap > a{
    font-weight: inherit;
}

.comp_name_cap, #caption{
    mix-blend-mode: difference;
    color: var(--primary-color);
}

/* MENU */

#menu_icon{
    height: 70%;
    position: relative;
    aspect-ratio: 1/1;
    
    border-radius: var(--b-r);
    font-size: 2.5em;
    transition: .5s;

    cursor: pointer;
}
#menu_icon > span{
    position: absolute;
    transition: .5s;
    font-size: 0.4em;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
}
#menu_icon > ion-icon{
    position: absolute;
    transition: .5s;
    z-index: 5;
}
#menu_icon:hover{
    box-shadow: var(--shadow-1);
    background: var(--secondary-color);
}
#menu_icon:hover > ion-icon{
    color: var(--primary-color);
}
#menu_icon:hover > span{
    transform: translateX(-150%);
    opacity: 1;
}

body[data-menu-open="true"] #menu{
    transform: translateX(0);
}
body[data-menu-open="true"] #menu_bg{
    opacity: 0.5;
}
body[data-menu-open="true"] .menu_menu_icon{
    opacity: 0 !important;
    transition: 0s;
}
body[data-menu-open="true"] #menu_icon{
    color: var(--primary-color);
}
body[data-menu-open="true"] #menu_icon:hover{
    background: var(--primary-color);
}
body[data-menu-open="true"] #menu_icon:hover > ion-icon{
    color: var(--secondary-color);
}
body[data-menu-open="true"] .comp_name_cap{
    color: var(--primary-color);
}


body[data-menu-open="false"] #menu{
    transform: translateX(calc(var(--menu-w)*1.1));
}
body[data-menu-open="false"] #menu_bg{
    opacity: 0;
}
body[data-menu-open="false"] .menu_close_icon{
    opacity: 0 !important;
    transition: 0s;
}

body[data-menu-open="true"] ::-webkit-scrollbar-track {
    background: var(--secondary-color) !important;
}

#menu{
    display: flex;
    width: 100vw;
    height: 100vh;
    background: var(--secondary-color);
    z-index: 5555;
    position: fixed;
    /* transition: var(--transition-cb-bs); */
    transition: 1s ease-in-out;
}

#menu_bg{
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: var(--secondary-color);
    z-index: 5554;
    transition: 1s;

    opacity: 0;
    pointer-events: none;
}

.menu_right_box{
    position: absolute;
    width: 50%;
    height: 100%;
    /* border: 2px solid red; */
    right: 0;
    display: flex;
}

#menu_nav{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    /* gap: calc(var(--index)*2); */
    flex-direction: column;
    font-size: 4em;
    z-index: 66;
    padding: var(--off) 0;
}

.menunav_link{
    position: relative;
    display: flex;
    align-items: center;
    /* background: red; */
    color: var(--primary-color);
    text-decoration: none;
    text-transform: uppercase;
    transition: var(--transition-cb);

    letter-spacing: 0.1em;
    height: 5em;
    overflow: hidden;
}



#menu_nav:has(.menunav_link:hover) .menunav_link{
    opacity: 0.9;
}

.menunav_link:hover{
    opacity: 0 !important;
}


@keyframes at2 {
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(-100%);
    }
}

.menunav_link > span{
    display: flex;
    width: fit-content;
    height: fit-content;
}
.menunav_link > span::after{
    display: flex;
    position: absolute;
    top: 100%;
    content: attr(data-letter);
    width: fit-content;
    height: fit-content;
}

.menunav_link:hover > span{
    animation: at2 .3s both ease-out;
}


#menu_link_dec{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--off) 0;
    left: 0;

    
}

.menu_ld{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 10em;
    /* background: var(--primary-color); */

    opacity: 1;
    z-index: 5;
    transition: var(--transition-cb);

    pointer-events: none;
}

.menu_ld::after{
    display: flex;
    position: relative;
    justify-self: center;
    align-self: center;
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    transition: .25s ease-out;
    z-index: -1;

    height: 0%;
}

@keyframes caras {
    0%{
        left: -10vw;
    }
    100%{
        left: 110vw;
    }
}

.menu_ld > span{
    display: flex;
    font-size: 2em;
    text-transform: uppercase;
    left: -10vw;
    position: absolute;
    font-style: italic;
    font-weight: 600;

    animation: caras 8s linear infinite;
}

.menu_ld *{
    opacity: 0;
}

#menu:has(.menunav_link:nth-of-type(1):hover) .menu_ld:nth-of-type(1) *{
    opacity: 1;
}
#menu:has(.menunav_link:nth-of-type(1):hover) .menu_ld:nth-of-type(1)::after{
    height: 100%;
}
#menu:has(.menunav_link:nth-of-type(2):hover) .menu_ld:nth-of-type(2) *{
    opacity: 1;
}
#menu:has(.menunav_link:nth-of-type(2):hover) .menu_ld:nth-of-type(2)::after{
    height: 100%;
}
#menu:has(.menunav_link:nth-of-type(3):hover) .menu_ld:nth-of-type(3) *{
    opacity: 1;
}
#menu:has(.menunav_link:nth-of-type(3):hover) .menu_ld:nth-of-type(3)::after{
    height: 100%;
}
#menu:has(.menunav_link:nth-of-type(4):hover) .menu_ld:nth-of-type(4) *{
    opacity: 1;
}
#menu:has(.menunav_link:nth-of-type(4):hover) .menu_ld:nth-of-type(4)::after{
    height: 100%;
}
#menu:has(.menunav_link:nth-of-type(5):hover) .menu_ld:nth-of-type(5) *{
    opacity: 1;
}
#menu:has(.menunav_link:nth-of-type(5):hover) .menu_ld:nth-of-type(5)::after{
    height: 100%;
}

.menu_left_box{
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    padding: var(--off) var(--off);
}

.menu_dec_box{
    width: 30vw;
    height: calc(100% - var(--off));
    border: 5px solid var(--primary-color);
    backdrop-filter: blur(10px);
    z-index: 555;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    mix-blend-mode: difference;
    
}

.menu_dec_box > img{
    width: 60%;
    height: 60%;
    object-fit: cover;
    border-radius: 50px 0 0 0;
}

#menu_dec_text{
    position: absolute;
    width: 100%;
    color: var(--primary-color);
    text-transform: uppercase;
    font-size: 5em;
    bottom: 0;
    left: 10px;
    font-weight: 800;
}

#menu_dec_mini_text, #menu_dec_mini_text_resp{
    position: relative;
    color: grey;
    top: 20px;
    width: 15vw;
    text-transform: uppercase;
    line-height: 1.5em;
}

#menu_dec_mini_text_resp{
    position: absolute;
    top: auto;
    width: 100%;
    padding: 0 calc(var(--off)*4);
    bottom: 20px;
    font-size: .8em;
}

.page_between_closer{
    position: absolute;
    z-index: 55;
    width: 100vw;
    height: 5vh;
    background: inherit;
    background: inherit;
    top: -2.5vh;
}


/* HEADER */

#header{
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 6;
}


#header_cap{
    display: flex;
    position: absolute;
    width: calc(100vw - var(--cap-m-w) - 2vw);
    top: 0;
    left: 0;
    height: calc(var(--cap-h));
    justify-content: space-between;

    padding-left: var(--off);
    z-index: 5550;

    transition: var(--transition-cb-bs);
    font-size: 1.3em;
}

#header_cap > *{
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}

#header_cap > nav{
    display: flex;
    gap: 5vw;
}
#header_cap > nav > a{
    text-transform: uppercase;
    text-decoration: none;
    color: var(--secondary-color);
    font-size: 0.8em;
    cursor: pointer;
}
#header_cap > nav > a::after{
    content: '';
    display: flex;
    background: var(--secondary-color);
    height: 1px;
    transition: var(--transition-cb-bs);

    width: 0%;
}
#header_cap > nav > a:hover::after{
    width: 100%;
}


.header_center_box{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 50vw;
    top: 0;
    align-self: center;
    z-index: -5;
    overflow: hidden;
}

#header_title{
    position: fixed;
    font-size: 2em;
    font-weight: 600;
    text-transform: uppercase;
    padding: 20px 40px;
    display: flex;
    justify-content: center;
    align-items: center;

    background: var(--secondary-color);
    color: var(--primary-color);

    width: 30vw;
    

    animation: header_title_box 1s var(--transition-cb) both;

    animation-delay: 0.75s;
}

#ht_fill{
    position: absolute;
    width: 0%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--secondary-color);
    color: var(--primary-color);
    left: 0;
    overflow: hidden;
    
    animation: ht_fill both 1ms;
    animation-timeline: view(10% 100%);
}

#ht_fill_textcon{
    position: absolute;
    width: 30vw;
    display: flex;
    gap: 0.25em;
    justify-content: center;
    align-items: center;
}
#ht_fill_textcon > span{
    color: var(--col-dec);
    font-style: italic;
}

.header_title_text{
    display: flex;
    position: relative;

    /* animation: header_title_text 1s ease-out both;
    animation-delay: 3s; */
}



.ht_dec{
    height: 40%;
    aspect-ratio: 5/1;
    display: flex;
    position: absolute;

    animation: ht_dec 0.5s var(--transition-cb) both;
    animation-delay: 0.75s;
}
.ht_dec:nth-of-type(1){
    top: 0;
    left: 0;
    border-top: 10px solid var(--primary-color);
    border-left: 10px solid var(--primary-color);
}
.ht_dec:nth-of-type(2){
    bottom: 0;
    right: 0;
    border-bottom: 10px solid var(--primary-color);
    border-right: 10px solid var(--primary-color);
}

@keyframes header_title_box {
    0%{
        width: 5vw;
        height: 5vw;
    }
    100%{
        width: 40vw;
        height: 20vh;
    }
}
@keyframes header_title_text {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes ht_dec {
    0%{
        opacity: 0;
        height: 0%;
    }
    30%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        height: 40%;
    }
}
@keyframes ht_fill {
    0%{
        width: 0%;
    }
    100%{
        width: 100%;
    }
}


#headp1_dec{
    width: 100vw;
    height: 200vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
}

.hpd{
    position: fixed;
    top: 0;
    width: 0vw;
    height: 100%;
    right: 0;
    display: flex;


    overflow: hidden;

    transition: var(--transition-cb);
}


.hpd:nth-of-type(1){
    z-index: 1;
    background: var(--secondary-color);
}
.hpd:nth-of-type(2){
    z-index: 2;
    background: #3A4B41;
}
.hpd:nth-of-type(3){
    z-index: 3;
    background: #FFC72B;
}
.hpd:nth-of-type(4){
    z-index: 4;
    background: var(--secondary-color);
}
.hpd:nth-of-type(5){
    z-index: 5;
    background: var(--primary-color);
}



.hpd_content_box{
    position: absolute;
    right: 0;

    top: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
}

.hpd_text{
    position: absolute;
    width: max-content;
    font-size: 2em;
    text-transform: uppercase;
    padding: 20px 40px;
    display: flex;
    justify-content: center;
    align-items: center;


    width: 40vw;
    height: 20vh;
}

.hpd:nth-of-type(1) .hpd_text{
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0.2em;
    font-family: "Roboto", serif;
    font-optical-sizing: auto;
    background: var(--primary-color);
}
.hpd:nth-of-type(2) .hpd_text{
    font-family: "Great Vibes", serif;
    text-transform: capitalize;
    letter-spacing: 0.2em;
    font-weight: 600;
    font-style: normal;
    border: 2px solid #E6CFA7;
    color: #E6CFA7;
}
.hpd:nth-of-type(3) .hpd_text{
    font-family: "Permanent Marker", serif;
    font-weight: 400;
    font-style: normal;
}
body[data-lang="ru"] .hpd:nth-of-type(3) .hpd_text{
    font-family: "Bulbasaur";
    font-weight: 400;
    font-style: normal;
}
.hpd:nth-of-type(4) .hpd_text{
    font-family: "Cinzel", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: var(--primary-color);
}
.hpd:nth-of-type(5) .hpd_text{
    font-weight: 500;
}
.hpd:nth-of-type(5) .hpd_text::after{
    display: flex;
    content: '';
    aspect-ratio: 1/1;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    border-top: 5px solid var(--secondary-color);
    border-left: 5px solid var(--secondary-color);
}
.hpd:nth-of-type(5) .hpd_text::before{
    display: flex;
    content: '';
    aspect-ratio: 1/1;
    height: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
    border-bottom: 5px solid var(--secondary-color);
    border-right: 5px solid var(--secondary-color);
}

@keyframes hpd {
    0%{
        width: 0vw;
    }
    100%{
        width: 100vw;
    }
}



.page_dec{
    display: flex;
    align-items: center;
    position: absolute;
    top: var(--com-gap);
    left: var(--off);
    width: calc(100vw - var(--off)*2);
    gap: 10px;
    z-index: 5;
}

.page_dec > span{
    position: relative;
    padding-right: 10px;
    background: var(--primary-color);
    z-index: 2;
}

.page_dec > div{
    position: absolute;
    width: 100%;
    height: 3px;
    background: var(--secondary-color);
}

.page_dec_end{
    display: flex;
    align-items: center;
    position: absolute;
    bottom: var(--com-gap);
    left: var(--off);
    width: calc(100vw - var(--off)*2);
    gap: 10px;
}

.page_dec_end > div{
    position: absolute;
    width: 100%;
    height: 3px;
    background: var(--secondary-color);
}

/* PAGE 1 */

#page1{
    position: relative;
    z-index: 6;
    height: 220vh;
}

#p1_content{
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 0;
    width: 100vw;
    height: 110vh;
    padding: var(--off);
    background: var(--primary-color);
    box-shadow: var(--shadow-1);
}

.p1_box{
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
}

.p1_box:nth-of-type(1){
    padding-top: var(--off);
    gap: var(--com-gap);
}

.p1_text{
    position: relative;
    width: 100%;
    height: 20%;
    align-items: center;
    display: flex;
    font-size: 3em;
    text-transform: uppercase;
    gap: 0.4em;
    font-weight: 600;
}

.p1_text:nth-of-type(2){
    justify-content: end;
}

.p1t_dec{
    width: 20%;
    background: var(--secondary-color);
    height: 0.7vh;
    /* margin: 0 calc(var(--com-gap)/2); */
}

.p1_text b{
    color: var(--col-dec);
    font-style: italic;
}

.p1b2_top, .p1b2_bottom{
    width: 100%;
    display: flex;
}

.p1b2_top{
    justify-content: end;
    height: 25%;
}
.p1b2_bottom{
    height: 75%;
    position: relative;
    overflow: hidden;
}

.p1b2_bottom > img{
    width: calc(100vw - var(--off)*2);
    height: 100%;
    object-fit: cover;
    filter: grayscale(100);
    position: absolute;
    left: 0;
}

/* PAGE 2 */


#page2{
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--secondary-color);
    z-index: 4;
}

#main_video_link{
    width: 70vw;
    height: auto;
    object-fit: cover;

    transition: var(--transition-cb-bs);
    cursor: pointer;
}

#main_video_link_bg{
    width: 100vw;
    height: 140vh;
    position: absolute;
    filter: blur(10px) brightness(0.5);
    opacity: 1;
}

#main_video{
    width: 0vw;
    height: 100vh;
    position: fixed;
    display: flex;
    top: 0;
    transition: .5s ease-out;
    background: var(--secondary-color);
    z-index: 55555;
    overflow: hidden;
}

#main_video .main_vid_box{
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#main_video_vid{
    width: 100%;
    z-index: 1;
    cursor: pointer;
}

body:has(#main_video_vid:hover) #mouse_follower{
    width: 5vw;
    font-size: .8em;
}

body:has(#main_video_vid:hover) .mfht_close{
    opacity: 1;
}

/* 
#mv_close_btn{
    width: 4vw;
    border-radius: 100%;
    aspect-ratio: 1/1;
    background: var(--primary-color);
    color: var(--secondary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: var(--off);
    right: var(--off);
    cursor: pointer;
    z-index: 2;
} */

body[data-mainvid-open = "false"] #main_video{
    width: 0;
}
body[data-mainvid-open = "true"] #main_video{
    width: 100vw;
}
body[data-mainvid-open = "true"] #menu_bg{
    opacity: 1;
}

body:has(#main_video_link:hover) #mouse_follower{
    width: 8vw;
    background: var(--primary-color);
    mix-blend-mode: difference;
}

body:has(#main_video_link:hover) .mfht_play{
    opacity: 1;
}

/* PAGE 3 */

#page3{
    display: flex;
    flex-direction: column;
    height: 220vh;
    z-index: 5;
    background: var(--primary-color);
    padding: 0 var(--off);
    padding-top: calc(var(--off)*2);
    box-shadow: var(--shadow-1);
}

.p3_title{
    width: 100%;
    height: max-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 2.5em;
    text-transform: uppercase;
}

.p3t_left{
    position: relative;
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.p3t_left > span:nth-of-type(2){
    position: relative;
    width: 100%;
    text-align: end;
}

.p3t_left > div{
    background: var(--secondary-color);
    width: 100%;
    height: 5px;
}

.p3t_right{
    width: 40%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 2em;
}

.p3t_right > *{
    position: absolute;
}

.p3t_right > b{
    font-weight: 800;
    z-index: 1;
    color: var(--primary-color);
    -webkit-text-stroke: 2px var(--secondary-color);
}

.p3t_right > span{
    z-index: 2;
    font-family: "Permanent Marker", serif;
    font-style: normal;
    color: var(--col-dec);
    bottom: -0.5em;
    right: 0;
}

.p3_box{
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    margin-top: calc(var(--off)*2);
}

.p3box_hb{
    width: 50%;
    height: 100%;
    display: flex;
    position: relative;
}

.p3hb_img{
    width: 60%;
}

.p3hb_imgbox{
    width: 100%;
    height: 40vh;
}

.p3box_hb:nth-of-type(1) img{
    width: 100%;
    height: 60vh;
    object-fit: cover;
    left: 0;
}
.p3box_hb:nth-of-type(2) img{
    width: 100%;
    height: 50vh;
    object-fit: cover;
    left: 0;
}

.p3hb_text{
    padding: 0 calc(var(--com-gap)*2);
    color: rgb(60, 60, 60);
    font-size: 1.5em;
}


/* PAGE 4 */

#page4{
    height: 110vh;
    display: flex;
    background: var(--secondary-color);
    color: var(--primary-color);
    z-index: 5;
}

#page4 .page_dec div{
    background: var(--primary-color);
    max-width: 50%;
}
#page4 .page_dec span{
    background: var(--secondary-color);
    color: var(--primary-color);
}

.p4_h_box{
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--com-gap) 0;
}
.p4_h_box:nth-of-type(1){
    overflow: hidden;
}

.p4_h_box:nth-of-type(3){
    justify-content: start;
    background: var(--secondary-color);
    margin-left: 10%;
}

.p4_h_box img{
    position: relative;
    width: 80%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--b-r)/2);
}

.p4_text{
    width: 100%;
    gap: var(--com-gap);
    display: flex;
    flex-direction: column;
    font-size: 3em;
    text-transform: uppercase;
    padding-left: var(--off);
}

.p4t_box{
    display: flex;
    align-items: center;
    width: 100%;
    height: 50%;
}
.p4t_box:nth-of-type(2){
    justify-content: end;
    color: var(--col-dec);
}
.p4t_box:nth-of-type(3){
    justify-content: center;
    font-size: 0.5em;
}

@keyframes a6vw {
    0%{
        width: 0vw;
    }
    1%{
        opacity: 1;
    }
    100%{
        width: 100vw;
        opacity: 1;
    }
}

.a6vw{
    animation: a6vw 2s ease-out both;
}

.p4t_box > span{
    background: var(--secondary-color);
    z-index: 2;
    display: flex;
}
.p4t_box:nth-of-type(1) > span{
    padding-right: 30px;
    font-style: italic;
}
.p4t_box:nth-of-type(2) > span{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 30px;
    font-family: "Permanent Marker", serif;
    font-style: normal;
}
.p4t_box:nth-of-type(2) > span > .arrow{
    position: absolute;
    left: -100%;
    z-index: 5;
    width: 100vw;
}
.p4t_box > div{
    position: absolute;
    height: 5px;
    width: 100vw;
    background: var(--primary-color);
    width: 0;
}
.p4t_box:nth-of-type(1) > div{
    left: 50%;
}
.p4t_box:nth-of-type(2) > div{
    width: 100%;
    left: 0;
}

/* PAGE 5 */

#page5{
    background: var(--secondary-color);
    display: flex;
}

.p5_content{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.p5_box{
    position: relative;
    width: 25%;
    height: 100%;
    
    transition: var(--transition-cb);

    cursor: default;
    
    overflow: visible;
    background: var(--secondary-color);
}



.p5b_out_text{
    position: absolute;
    display: flex;
    width: 25vw;
    height: 30%;
    justify-content: start;
    align-items: start !important;
    flex-direction: column;
    bottom: var(--com-gap);
    padding: var(--com-gap);
    gap: calc(var(--com-gap)/2);
    
    transition: var(--transition-cb);
}
.p5b_out_text > span{
    width: 100%;
}
.p5b_out_text > h1{
    font-size: 3em;
    font-weight: 700;
    color: var(--primary-color);
}
.p5b_out_text > span{
    font-size: 1em;
    color: lightgray;
    font-style: italic;
}

.p5b_bg{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60vw;
    height: 70vh;
    position: absolute;
    transition: var(--transition-cb);
    pointer-events: none;
    top: 15vh;
    transform: translateY(10%);

    opacity: 0;
}


.p5b_bg > img{
    position: absolute;
    object-fit: cover;
    height: 100%;
    width: 100%;
    left: 0;
    transition: var(--transition-cb);
}

.p5_box:nth-of-type(1) .p5b_bg{
    left: 120%;
}
.p5_box:nth-of-type(2) .p5b_bg{
    width: 40vw;
    left: 110%;
}
.p5_box:nth-of-type(3) .p5b_bg{
    width: 40vw;
    right: 110%;
}
.p5_box:nth-of-type(4) .p5b_bg{
    right: 120%;
}



.p5_box:hover{
    opacity: 1;
    z-index: 5;
}

.p5_box:hover .p5b_bg{
    display: flex;
    position: absolute;
    opacity: 1 !important;
    transform: translateY(0);
}

#page5:has(.p5_box:hover) .p5_box:not(:hover){
    opacity: 0.5 !important;
    filter: blur(10px);
}




/* PAGE 6 */

#page6{
    background: var(--secondary-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.p6_caras{
    position: relative;
    width: 100%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: var(--com-gap);
}

.p6_caras::after{
    content: '';
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%);
}

.p6_wrapper{
    width: 100%;
    position: relative;
    height: 50%;
    display: flex;
    align-items: center;
}

.p6w_slider{
    position: absolute;
    width: max-content;
    display: flex;
    align-items: center;
    gap: var(--com-gap);
    height: 100%;
    transition: var(--transition-cb);
}

.p6_wrapper:nth-last-of-type(1) .p6w_slider{
    align-items: start;
}
.p6_wrapper:nth-last-of-type(2) .p6w_slider{
    align-items: end;
}

.p6w_slider img{
    height: 70%;
    aspect-ratio: 26/10;
    object-fit: cover;
}

.p6_title{
    position: absolute;
    color: var(--primary-color);
    font-size: 7em;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 800;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition-cb);
    overflow: hidden;
    padding: 10px 20px;
}

.p6_title::after{
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    display: flex;
    background: var(--primary-color);
    bottom: -100%;
    transition: var(--transition-cb);
    z-index: -1;
}

.p6_title:hover{
    color: var(--secondary-color);
}
.p6_title:hover::after{
    bottom: 0;
}

/* PAGE SEND */

#page_send{
    background: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 0 var(--off);
}

.p7_h_box{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.p7_title{
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    font-size: 3em; 
}


.p7_title > span:nth-of-type(1){
    text-transform: uppercase;
    font-weight: 700;
}
.p7_title > span:nth-of-type(1) > b{
    font-weight: inherit;
    color: var(--col-dec);
}
.p7_title > span:nth-of-type(2){
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.75em;
}
.p7_title > span:nth-of-type(2) > .arrow{
    max-width: 40%;
}
.p7_title > span:nth-of-type(3){
    font-size: 0.5em;
    font-style: italic;
}

#send_form{
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--com-gap)/1.5);
    padding-top: var(--off);

    
}

.sf_inp_box{
    width: 100%;
    display: flex;
    flex-direction: column;

    font-family: "Roboto", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.sf_inp_box input{
    font-family: inherit;
    font-weight: inherit;
}

.sf_inp_box label{
    margin-bottom: 5px;
}
.sf_inp_box input, .sf_inp_box textarea{
    font-size: 1em;
    padding: 20px 20px;
    border: none;
    background: lightgray;
    resize: none;
}

input[type="submit"]{
    background: var(--secondary-color);
    color: var(--primary-color);
}

#footer, #footer_resp{
    position: fixed;
    width: 100vw;
    height: 70vh;
    background: var(--secondary-color);
    bottom: 0;
    z-index: 550;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary-color);
    padding: 0 var(--off);
    padding-top: var(--com-gap);
}



body[data-fooseen="false"] #footer{
    display: none;
}
body[data-fooseen="true"] #footer{
    display: flex;
}

.foo_column{
    position: relative;
    width: calc(25% - var(--off)/4);
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;

    /* outline: auto; */
}

.foo_column img{
    width: 50%;
    aspect-ratio: 1/1;
    border-radius: 100%;
}

.foo_column:nth-of-type(1){
    align-items: start;
    justify-content: space-between;
    padding-bottom: calc(var(--com-gap)*1.5);
}

.foo_ct{
    display: flex;
    flex-direction: column;
    color: grey;
    gap: calc(var(--com-gap)/4);
}

.foo_textbox{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: max-content;
    gap: var(--com-gap);
}

.foo_tb_title{
    font-size: 1.5em;
    font-weight: 600;
}

.foo_tb_list{
    font-size: 1em;
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: grey;
    text-decoration: none;
}
.foo_tb_list a {
    width: fit-content;
    position: relative;
    display: flex;
    color: inherit;
    padding-bottom: 2px;
    text-decoration: inherit;
}
.foo_tb_list a::after {
    position: absolute;
    content: '';
    display: flex;
    background: grey;
    height: 1px;
    left: 0;
    bottom: 0;
    transition: .2s ease-out;

    width: 0%;
}
.foo_tb_list a:hover::after {
    width: 100%;
}

#footer .page_dec_end div{
    background: var(--primary-color);
}


#footer_resp{
    position: relative;
    height: 200vh;
    flex-direction: column;
    justify-content: start;
    gap: calc(var(--off)*4);
}

#footer_resp .foo_column{
    width: 100%;
    height: max-content;   
}

#footer_resp .foo_column:nth-of-type(1){
    gap: calc(var(--off)*2);
}

/* OTHER PAGES */

.oth-body #header_title{
    background: none;
    color: var(--secondary-color);
}

.oth-body .header_title_text{
    font-size: 2.5em;
}
.oth-body .header_title_text span{
    font-weight: 700;
}

/* VISION PAGE */

.vision-body{
    height: 730vh;
}



.vision-body .comp_name_cap, .vision-body #caption{
    mix-blend-mode: difference;
    color: var(--primary-color);
}

#v_page1{
    height: fit-content;
    background: var(--secondary-color);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-1);
    background: var(--secondary-color);
    color: var(--primary-color);
}

#v_slider_box{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: var(--off);
    top: 0;
    width: 12vw;
    height: 100vh;
    z-index: 55;
    transition: var(--transition-cb-bs);

    opacity: 0;

    color: var(--primary-color);

    mix-blend-mode: difference;
}

body[data-current-page="0"] #v_slider_box{
    opacity: 0;
}
body[data-current-page="1"] #v_slider_box{
    opacity: 0;
}
body[data-current-page="2"] #v_slider_box{
    opacity: 1;
}
body[data-current-page="3"] #v_slider_box{
    opacity: 1;
}
body[data-current-page="4"] #v_slider_box{
    opacity: 1;
}
body[data-current-page="5"] #v_slider_box{
    opacity: 1;
}
body[data-current-page="6"] #v_slider_box{
    opacity: 1;
}
body[data-current-page="7"] #v_slider_box{
    opacity: 1;
}

.v_slider{
    position: relative;
    display: flex;
    width: 5px;
    height: 70%;
    background: grey;
}

#v_slider_thumb{
    display: flex;
    position: relative;
    text-transform: uppercase;
    justify-content: start;
    align-items: end;
    top: 0;
    width: 100%;
    height: 10%;
    background: white;
    color: inherit;
}

#v_slider_text{
    padding-left: calc(var(--com-gap)/3);
    position: relative;
    bottom: calc(var(--com-gap)/3);
    color: inherit;
}

#v_page1 section{
    width: 100%;
    height: 110vh;
    padding: 0 var(--off);
}

.vp1_s1{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.vp1s1_bg{
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    opacity: 1 !important;
}

@keyframes ablur {
    0%{
        filter: blur(0px);
    }
    100%{
        filter: blur(10px);
    }
}

.ablur{
    animation: ablur .5s both linear;
}

.vp1s1bg_text{
    position: relative;
    display: flex;
    width: 80%;
}
.vp1s1bg_text span{
    width: 100%;
    line-height: 2em;
    color: lightgray;
}

.vp1s1bg_text:nth-of-type(1){
    justify-content: start;
}
.vp1s1bg_text:nth-of-type(1) > span{
    text-align: left;
    width: 50%;
}
.vp1s1bg_text:nth-of-type(2){
    justify-content: center;
}
.vp1s1bg_text:nth-of-type(2) > span{
    text-align: center;
}
.vp1s1bg_text:nth-of-type(3){
    justify-content: end;
}
.vp1s1bg_text:nth-of-type(3) > span{
    text-align: right;
    width: 50%;
}

#vp1_s1_title{
    width: 35vw;
    display: flex;
    flex-direction: column;
    position: absolute;
    font-size: 4em;
    text-transform: uppercase;
    font-weight: 700;
}
#vp1_s1_title > span{
    width: 100%;
    display: flex;
    font-weight: inherit;
}
#vp1_s1_title > span:nth-of-type(2){
    justify-content: end;
    color: var(--col-dec);
}

.vp1_s2{
    height: 60vh !important;
    display: flex;
    justify-content: start;
    align-items: center;

    font-size: 1.3em;

    padding-left: calc(var(--off)*4) !important;
}

.vp1_text_block{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: var(--com-gap);
}

.vp1_text_block > h2{
    font-size: 3em;
    text-transform: uppercase;
    font-weight: 700;
}
.vp1_text_block > h2 > span{
    color: var(--col-dec);
    font-weight: inherit;
}
.vp1_text_block > div{
    display: flex;
    flex-direction: column;
}
.vp1_text_block > div > span{
    font-weight: 600;
}

.vp1_s3{
    height: 60vh !important;
    display: flex;
    justify-content: end;
    align-items: center;

    font-size: 1.3em;
    padding-right: calc(var(--off)*4) !important;
}

.vp1_s4{
    height: 60vh !important;
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 1.3em;
}


#v_page2{
    display: flex;
    background: var(--primary-color);
    flex-direction: column;
    padding: 0 calc(var(--off)*3);
    padding-top: var(--off);
    gap: calc(var(--off)*2);
}

.vp2_title{
    font-size: 4em;
    font-weight: 600;
    text-transform: uppercase;
}

.vp2_title > *{
    font-weight: inherit;
}

.vp2_title > b{
    font-family: "Permanent Marker", serif;
    font-style: normal;
    color: var(--col-dec);
}

.vp2_text{
    position: relative;
    display: flex;
    width: 50%;
    height: max-content;
    font-size: 1.5em;
}

#v_page3{
    display: flex;
    flex-direction: column;
    background: var(--primary-color);
    padding: 0 calc(var(--off)*3);
    justify-content: center;
    gap: calc(var(--com-gap)*2);
}

.vp3_title{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 4em;
    font-weight: 700;
    font-style: italic;
}

.vp3_title_line{
    width: 100%;
    display: flex;
    font-weight: inherit;
    font-style: inherit;
}

.vp3_title_line:nth-of-type(1){
    justify-content: start;
}
.vp3_title_line:nth-of-type(2){
    justify-content: end;
}

.vp3_title_line > span{
    font-weight: inherit;
    font-style: inherit;
}

.vp3_title_line > span > b{
    font-weight: inherit;
    font-style: inherit;
    color: var(--col-dec);
}

.vp3_bottom_box{
    width: 100%;
    height: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--com-gap);
}
.vp3_text{
    width: 100%;
    font-size: 1.4em;
}
.vp3_bottom_box > img{
    width: 100%;
    height: 80%;
    object-fit: cover;
}

#v_page4{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--secondary-color);
    color: var(--primary-color);
}


.vp4_dec_box{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    padding-right: var(--off);
    top: 10vh;
    width: 12vw;
    height: 100vh;
    z-index: 55;
    transition: var(--transition-cb-bs);
    right: 0;

    opacity: 1;

    color: var(--primary-color);

    opacity: 0;
}

.vp4_dec{
    position: relative;
    display: flex;
    width: 5px;
    height: 70%;
    background: var(--primary-color);
}

.vp4_dec_thumb{
    display: flex;
    position: relative;
    text-transform: uppercase;
    justify-content: end;
    align-items: end;
    top: 0;
    width: 100%;
    height: 10%;
    background: white;
    color: inherit;
}

.vp4_dec_text{
    padding-right: calc(var(--com-gap)/3);
    position: relative;
    bottom: calc(var(--com-gap)/3);
    color: inherit;
}

#vp4_btn{
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;  
    color: inherit;
    text-decoration: none;
    font-size: 5em;
    font-weight: 800;
    cursor: pointer;
    z-index: 2;
    padding: 10px 20px;

    overflow: hidden;
    transition: var(--transition-cb);
}
#vp4_btn::after{
    content: '';
    display: flex;
    position: absolute;
    aspect-ratio: 1/1;
    border-radius: 100%;
    background: var(--primary-color);
    
    z-index: -1;

    transition: .5s;

    width: 0%;

}


#vp4_btn:hover{
    color: var(--secondary-color);
    scale: 1.1;
}
#vp4_btn:hover::after{
    scale: 1.1;
    width: 100%;
    border-radius: 0%;
}


/* CONTACTS PAGE */

.contacts-body{
    height: 440vh;
}

#c_page1{
    height: 220vh;
    background: var(--secondary-color);
    color: var(--primary-color);
    box-shadow: var(--shadow-1);
    display: flex;
    justify-content: center;
    align-items: center;
}


#c_page1 > .page_dec > span{
    background: var(--secondary-color);
}
#c_page1 > .page_dec > div, #c_page1 > .page_dec_end > div{
    background: var(--primary-color);
}

.cp1_box{
    color: inherit;
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
}

.cp1_link{
    width: 100%;
    height: fit-content;
    padding: var(--com-gap);
    padding-left: var(--off);
    font-size: 2em;
    border-top: 2px solid var(--primary-color);
    color: inherit;
    text-decoration: none;
    text-transform: capitalize;
    transition: var(--transition-cb);
}
.cp1_link:hover{
    background: var(--primary-color);
    color: var(--secondary-color);
    padding: calc(var(--com-gap)*1.5) !important;
}
.cp1_link:nth-last-of-type(1){
    border-bottom: 2px solid var(--primary-color);
}

.contacts-body:has(.cp1_link:hover) #mouse_follower{
    width: 5vw;
}


/* PROJECTS PAGE */

.projects-body{
    height: 320vh;
}

.p_page{
    background: var(--primary-color);
    box-shadow: var(--shadow-1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: var(--off);
    padding-bottom: calc(var(--off)*2);
    gap: var(--com-gap);

    transition: var(--transition-cb-bs);
}

.pp_img_link{
    position: relative;
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    align-items: center;
    border: 4px solid var(--secondary-color);
    border-radius: 20px;
}

.pp_img_link_lm{
    position: absolute;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary-color);
    width: 100%;
    transition: var(--transition-cb);

    opacity: 0;
}

.pp_img_link:hover .pp_img_link_lm{
    opacity: 1;
}
.pp_img_link:hover .pp_img:nth-of-type(1){
    transform: translateY(100px);
}
.pp_img_link:hover .pp_img:nth-of-type(2){
    transform: translateY(-100px);
}



.pp_img{
    width: 40%;
    rotate: -30deg;
    height: auto;
    position: relative;
    object-fit: cover;
    transition: var(--transition-cb);
}

.pp_link_bg{
    width: 100%;
    height: 100%;
    position: absolute;
    font-size: 700%;
    font-weight: 800;
    z-index: 5555;
    opacity: 1;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    text-align: center;
    mix-blend-mode: difference;
    transition: var(--transition-cb);
}

.pp_img_link:hover .pp_link_bg{
    letter-spacing: .1em;
}

.pp_text{
    width: 100%;
    display: flex;
    flex-direction: column;
    font-size: 1.2em;
    gap: 15px;
}

.pp_text > span:nth-of-type(1){
    font-size: 2em;
    font-weight: 600;
}
.pp_text > span:nth-of-type(2){
    color: grey;
}

/* TEAM PAGE */

.team-body{
    height: 520vh;
}

#t_page{
    box-shadow: var(--shadow-1);
    background: var(--primary-color);
    height: max-content;
}

.tp_s{
    width: 100%;
    position: relative;
    display: flex;
}

.tp1_hb{
    width: 50%;
    height: 100%;
    padding-top: calc(var(--off));
}

.tp1_hb:nth-of-type(1){
    padding-left: var(--off);
}
.tp1_hb:nth-of-type(2){
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: var(--off);
}
.tp1_hb:nth-of-type(2) > *{
    padding-left: calc(var(--off)*2);
}

.tp1_hb > img{
    width: 100%;
    height: 50%;
    object-fit: cover;
}

.tp1_text_dec, .tp2_text_dec{
    font-size: 1em;
    color: gray;
    text-transform: uppercase;
}

.tp1_text{
    font-size: 1.3em;
    width: 70%;
    height: calc(50%);
}

.tp2_hb{
    display: flex;
    position: relative;
    width: 100%;
    height: 50%;
}

#tp_s2{
    display: flex;
    flex-direction: column;
    padding: 0 calc(var(--off)*2);
}

.tp2_hb > img{
    max-width: 70%;
    height: 80%;
    object-fit: cover;
}

.tp2_hb:nth-of-type(1){
    justify-content: space-between;
    gap: var(--com-gap);
}

.tp2_hb:nth-of-type(2){
    justify-content: space-between;
    /* padding-left: calc(var(--off)*2); */
}

.tp2_text_box{
    width: 30%;
    font-size: 1.3em;
}

#tp_s3{
    width: 100%;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: space-around;

    display: none;
}

.tp3_box{
    width: 20%;
    height: 80%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    justify-content: center;
}

.tp3_box > img{
    width: 100%;
    height: 70%;
    object-fit: cover;
}

.tp3_box > span{
    width: 100%;
    text-transform: uppercase;
    color: grey;
    font-size: 1.5em;
}

#tp_s4{
    height: 80vh;
    justify-content: center;
    align-items: center;
}

.tp4_text{
    text-transform: uppercase;
    font-size: 4em;
    font-weight: 600;
    text-align: center;
}

.tp4_text span{
    font-weight: inherit;
}

.tp4_text > b{
    color: var(--col-dec);
}


.resp{
    display: none !important;
}
.unresp{
    display: flex;
}

/* SUCCESS PAGE */

.success-body{
    height: 100vh;
}

.success-body .header_center_box{
    z-index: 556;
}

.success-body #header_title{
    flex-direction: column;
    display: flex;
    align-items: start;
    gap: var(--com-gap);
    width: max-content !important;
}

.success-body img{
    height: 100px;
    width: auto;
    display: flex;
    margin-left: 50px;
}

.success-body a{
    color: grey;
}

.success-body #header_title > span{
    text-transform: none;
    font-size: .8em;
}

/* Mobile */

@media (max-width: 700px){

    #body_slider{
        transition: none;
    
    }
    .p_page{
        transition: none;
    }
    #main_video_link{
        transition: none;
    }
    #v_slider_box{
        transition: none;
    }

    body{
        height: 1480vh;
    }

    .resp{
        display: flex !important;
    }
    .unresp{
        display: none !important;
    }
    

    #mouse_follower{
        display: none;
    }

    .ht_dec{
        display: none;
    }

    .button{
        padding: 20px 60px;
    }


    .index-body #header_title{
        justify-content: start;
        align-items: start;
        padding-top: 15vw;
    }

    @keyframes header_title_box {
        0%{
            width: 5vw;
            height: 5vw;
        }
        100%{
            width: 60vw;
            height: 60vw;
        }
    }

    #caption{
        width: 50vw;
        flex-direction: row-reverse;
    }

    #lang_switch_resp{
        display: flex;
    }

    #lang_switch{
        display: none;
    }


    

    /* MENU */

    #menu_icon span{
        display: none;
    }

    #menu{
        justify-content: center;
        align-items: center;
        height: 101dvh;
    }
    #menu_nav{
        font-size: 2em;
        justify-content: center;
        align-items: center;
    }
    .menu_right_box{
        width: 100%;
    }
    .menunav_link{
        width: 100%;
        height: 2em;
        padding-left: calc(20vw);
    }

    /* HEADER */

    .header_title_text{
        justify-content: start;
        align-items: center;
        width: 100%;
        flex-wrap: wrap;
        overflow-wrap: break-word;
    }


    #headp1_dec{
        overflow: visible;
        height: 220dvh;
    }
    .hpd{
        height: 110%;
    }
    .hpd_text{
        width: 60vw;
        height: 60vw;
    }

    #p1_content{
        padding: 0;
        font-size: .5em;
    }
    .p1_box{
        padding: 0 var(--off);
    }
    .p1b1{
        justify-content: end;
        padding-bottom: calc(var(--off)*2);
    }
    .p1b2{
        padding: 0;
        height: 30%;
    }
    .p1b2_bottom{
        height: 100%;
    }
    .p1b2_bottom > img{
        width: 100%;
    }
    .p1b3{
        padding-top: calc(var(--off)*2);
    }

    .p1_text{
        flex-wrap: wrap;
    }
    .p1t_dec{
        display: none;
    }

    /* PAGE 3 */

    #page3{
        height: 300vh;
        padding: 0;
    }
    .p3_title{
        display: flex;
        flex-direction: column;
        font-size: 2em;
        height: 50vh;
        margin-top: 20vh;
        padding: 0 var(--off);
    }
    .p3t_left{
        width: 100%;
    }
    .p3t_right{
        width: 100%;
    }
    .p3t_right > span{
        bottom: 0em;
    }
    .p3_box{
        height: 150vh;
        flex-direction: column;
        padding: 0;
    }
    .p3hb_text{
        width: 100%;
        font-size: 1.3em;
        align-items: center;
        justify-content: center;
    }
    .p3_box_last{
        flex-direction: column-reverse;
        align-items: end;
    }
    .p3_box_last .p3hb_imgbox{
        width: 100%;
    }

    /* PAGE 4 */
    #page4 .page_dec > div{
        max-width: 100%;
    }
    .p4_h_box:nth-of-type(2){
        width: 100%;
    }
    .p4_h_box:nth-of-type(3){
        display: none;
    }
    .p4_text{
        font-size: 1.8em;
        padding: 0 var(--off);
    }
    .p4t_box:nth-of-type(2) > div{
        max-width: 50%;
    }
    .p4t_box:nth-of-type(3){
        margin-top: 10vh;
    }

    /* PAGE 5 */

    #page5{
        padding: var(--com-gap) 0;
        background: var(--secondary-color);
    }
    .p5_content{
        flex-direction: column;
    }

    .p5_box{
        position: relative;
        height: 25%;
        width: 100%;
        left: 0;
    }
    .p5b_lm{
        display: none;
    }
    .p5b_bg::after{
        display: none;
    }
    .p5b_out_text{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .p5b_out_text > span:nth-of-type(1){
        padding: 5px;
        text-shadow: 0px 0px 2px var(--secondary-color);
    }
    .p5b_out_text > span:nth-of-type(2){
        opacity: 0;
        padding-left: 5px;
        display: none;
    }
    
    .p5b_out_text > span:nth-of-type(3){
        width: 100%;
    }

    
    .p5_box:hover{
        opacity: 1;
        z-index: 5;
    }

    #page5:has(.p5_box:hover) .p5_box:not(:hover){
        opacity: 1 !important;
        filter: none !important;
    }
    

    /* PAGE 6 */

    .p6w_slider img{
        height: 20vh;
        aspect-ratio: 2/1;
    }
    .p6_title{
        font-size: 3em;
        text-decoration: underline;
    }

    /* PAGE 7 */

    #page_send{
        height: 220vh;
        flex-direction: column;
    }

    .p7_h_box{
        width: 100%;
        height: 50%;
        padding: 0 var(--off);
    }
    .p7_h_box:nth-of-type(1){
        height: 30%;
    }
    .p7_title{
        font-size: 2em;
    }
    .p7_title span{
        text-align: center;
        flex-direction: column;
    }

    #send_form{
        gap: calc(var(--com-gap)*2)
    }


    /* OTH BODY */

    .oth-body #header_title{
        font-size: 1em;
    }

    /* VISION */

    .vision-body #body_slider{
        font-size: .6em;
    }
    .v_slider, .vp4_dec{
        width: 3px;
    }

    .vp1s1bg_text{
        font-size: .8em;
    }
    .vp1s1bg_text span{
        width: 100% !important;
    }
    .vp1s1_bg{
        justify-content: center;
        gap: calc(var(--off)*2);
    }
    #vp1_s1_title{
        align-items: center;
        width: 80vw;
    }
    #vp1_s1_title > span:nth-of-type(2){
        justify-content: start;
    }
    .vp1_text_block{
        width: 100%;
    }
    .vp1_s2,.vp1_s3, .vp1_s4{
        font-size: 1.2em;
        justify-content: center;
        padding: 0 calc(var(--off)*4) !important;
    }
    #v_page2{
        justify-content: center;
    }
    .vp2_text {
        width: 100%;
    }

    .vp3_title{
        font-size: 3em;
    }
    .vp3_text {
        font-size: 1em;
    }
    #vp4_btn{
        font-size: 4em;
    }

    /* PROJECTS */
    .p_page{
        font-size: 0.75em;
    }
    .pp_img_link{
        height: 50%;
        justify-content: center;
        gap: 5em;
    }


    .pp_img{
        width: 70%;
        rotate: 0deg;
        rotate: -10deg;
        height: auto;
        position: relative;
        object-fit: cover;
        transition: var(--transition-cb);
    }

    .pp_link_bg{
        width: 100%;
        height: 100%;
        position: absolute;
        font-size: 200%;
        font-weight: 800;
        z-index: 5555;
        opacity: 1;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        text-transform: uppercase;
        mix-blend-mode: difference;
        transition: var(--transition-cb);
    }

    /* CONTACTS */
    .contacts-body{
        height: 550vh;
    }
    .cp1_link{
        padding: calc(var(--com-gap)*2);
    }

    /* TEAM */
    .team-body{
        height: 630vh;
    }

    #tp_s1{
        flex-direction: column;
    }
    .tp1_hb{
        width: 100%;
        height: 50%;
    }
    .tp1_hb:nth-of-type(2){
        justify-content: start;
        gap: var(--com-gap);
    }
    .tp1_hb:nth-of-type(2) > *{
        padding-left: var(--off);
    }
    .tp1_text{
        font-size: 1em;
    }

    #tp_s2{
        padding: 0 var(--off);
    }
    .tp2_hb{
        flex-direction: column;
    }
    .tp2_text_box{
        font-size: 1em;
        width: 100%;
        height: 30%;
    }
    .tp2_hb:nth-of-type(2){
        justify-content: center;
    }

    #tp_s3{
        flex-direction: column;
        justify-content: space-around;
    }
    .tp3_box{
        width: 80%;
        height: 20%;
    }

    .tp4_text{
        font-size: 2em;
    }

    /* SUCCESS */

    .success-body #header_title{
        width: 100vw;
        justify-content: center;
        align-items: center;
        gap: calc(var(--com-gap)*2);
    }

    .success-body .header_title_text{
        width: 70%;
        font-size: 2em;
    }

    .success-body img{
        height: 50px;
        margin-left: 10px;
    }

    .success-body #header_title > span{
        width: 70%;
        font-size: 1em;
    }
}